/* Chất liệu cổ phong cho cửa sổ khu: gỗ sơn mài, giấy dó, biển hiệu, cuộn thư, bảng vàng.
   Đang dùng cho Đại Sảnh và Xưởng Văn. Màu nhấn vẫn lấy từ bảng màu của khu (--primary). */

/* Khai trước thứ tự lớp, vì tệp này nạp trước Tailwind. */
@layer theme, base, components, utilities;

/* Biến màu và khung cửa sổ để ngoài lớp: phải thắng tokens.css và class bg-surface của #cua-so.
   Khu nào bật `coPhong` trong KHU (cua-so.js) thì cửa sổ mang [data-co-phong]. */
[data-co-phong] {
  --background: #fbf6ea;   /* giấy dó */
  --foreground: #1d1a14;
  --muted: #5d554a;
  --go: #3a2216;           /* gỗ sơn mài */
  --go-sang: #4a2c1c;
  --go-toi: #2c190f;
  --vang: #b8914a;
  --vang-nhat: #d6b36a;
  --kem: #fbf6ea;
  --son: #a8321f;          /* son đỏ của ấn triện */
  --border: rgba(184, 145, 74, 0.35);
}
/* Màu nhấn đậm (hover nút, chữ link) theo từng khu */
[data-co-phong][data-mau="dai-sanh"] { --primary-dam: #0b4f3c; }
[data-co-phong][data-mau="xuong-van"] { --primary-dam: #364f1a; }

/* ---------- Chất liệu ---------- */
.go { background: linear-gradient(180deg, var(--go-sang) 0%, var(--go) 55%, var(--go-toi) 100%) var(--go); }
.giay,
#cua-so[data-co-phong] .than-cua-so {
  background-color: var(--kem);
  background-image:
    radial-gradient(rgba(120, 90, 40, 0.06) 1px, transparent 1px),
    radial-gradient(rgba(120, 90, 40, 0.04) 1px, transparent 1px);
  background-size: 22px 22px, 13px 13px;
  background-position: 0 0, 7px 9px;
}

/* ---------- Khung cửa sổ: gỗ bao ngoài, giấy bên trong ---------- */
#cua-so[data-co-phong] { background: linear-gradient(180deg, var(--go-sang), var(--go) 55%, var(--go-toi)); }
#cua-so[data-co-phong] > header { border-color: transparent; align-items: center; }
@media (max-width: 1023px) {
  #cua-so[data-co-phong] > header { padding-top: calc(env(safe-area-inset-top) + 8px); padding-bottom: 8px; }
}
#cua-so[data-co-phong] #cs-ten { color: var(--kem); }
#cua-so[data-co-phong] [data-dong-cua-so] { background: var(--go); color: var(--kem); --tw-ring-color: var(--vang); }
#cua-so[data-co-phong] [data-dong-cua-so]:hover { background: var(--primary); }
/* Tên khu đã đủ nói nó là gì: bỏ icon và lời giới thiệu, dải đầu chỉ còn tên và nút đóng */
#cua-so[data-co-phong] #cs-icon,
#cua-so[data-co-phong] #cs-mo-ta { display: none; }
#cua-so[data-co-phong] .than-cua-so {
  box-shadow: inset 0 0 0 1px var(--vang), inset 0 0 0 5px var(--kem), inset 0 0 0 6px rgba(184, 145, 74, 0.55);
}
#cua-so[data-co-phong] #cs-noi-dung { background: transparent; }
/* Tab có thanh dính mép (Bàn viết): bỏ đệm trên/dưới của vùng cuộn để thanh dính sát mép,
   không để chữ lọt qua khe đệm. Tab tự đệm bằng py-* của nó. */
#cs-noi-dung:has(> [data-dinh-mep]:not([hidden])) { padding-top: 0; padding-bottom: 0; }

/* Cột tab: thẻ gỗ treo. Tab đang chọn là biển gỗ chữ vàng, vạch màu khu bên trái. */
#cua-so[data-co-phong] #cs-tab { border-color: rgba(184, 145, 74, 0.45); }
#cua-so[data-co-phong] .tab-cua-so { color: #3b342a; border-radius: 3px; font-family: var(--display-font, Lora, serif); font-size: 16px; }
#cua-so[data-co-phong] .tab-cua-so:hover { background: rgba(184, 145, 74, 0.14); color: var(--foreground); }
#cua-so[data-co-phong] .tab-cua-so[aria-selected="true"] {
  background: var(--go); color: var(--vang-nhat); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--vang), inset 3px 0 0 var(--primary);
}
#cua-so[data-co-phong] .tab-cua-so[aria-selected="true"] i,
#cua-so[data-co-phong] .tab-cua-so[aria-selected="true"] svg { color: var(--vang-nhat); }
#cua-so[data-co-phong] .tab-cua-so[aria-selected="true"] .so { color: var(--kem); }

/* Tĩnh tâm (Xưởng Văn): giấu cột tab, chỉ còn bàn viết */
#cua-so[data-tinh-tam] #cs-tab { display: none; }
#cua-so[data-tinh-tam] .than-cua-so { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }

@media (min-width: 1024px) {
  #cua-so[data-co-phong] {
    padding: 0 14px 14px;
    box-shadow: 0 0 0 1px #1a0f08, 0 0 0 3px var(--vang), 0 30px 80px rgba(0, 0, 0, 0.55);
  }
  #cua-so[data-co-phong] .than-cua-so { border-radius: 10px; overflow: hidden; }
  #cua-so[data-co-phong] .goc-cham { color: var(--vang); }
  #cua-so[data-co-phong] #cs-ten { color: var(--go); }
  /* Dải đầu gọn kiểu cửa sổ game: chỉ cao đủ cho nửa dưới băng giấy tên khu.
     Nút đóng ghim vào góc phải trên của khung gỗ, thay cho góc chạm ở đó. */
  #cua-so[data-co-phong] > header { height: 30px; padding: 0; }
  #cua-so[data-co-phong] [data-dong-cua-so] { position: absolute; top: 8px; right: 8px; z-index: 3; width: 36px; height: 36px; }
  #cua-so[data-co-phong] .goc-cham.top-2.right-2 { display: none; }
  /* Tĩnh tâm nới cửa sổ gần kín màn, chừa chỗ cho băng giấy tên khu */
  #cua-so[data-co][data-tinh-tam] { top: 2.25rem; bottom: 0.75rem; width: calc(100vw - 1.5rem); }
}

/* Các khối dựng sẵn: trong lớp components, class tiện ích vẫn thắng. */

@layer components {
/* ---------- Biển hiệu tên mục ---------- */
.bien-hieu {
  display: inline-block; margin: 0; padding: 8px 22px; border-radius: 3px;
  background: var(--go); color: var(--vang-nhat);
  font: 700 22px/1.3 var(--display-font, Lora, serif);
  box-shadow: inset 0 0 0 1px var(--vang), inset 0 0 0 3px var(--go), inset 0 0 0 4px rgba(184, 145, 74, 0.5);
}
.day-vang { flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--vang), transparent); }

/* ---------- Nút ---------- */
.nut-ngoc {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 4px; background: var(--primary); color: var(--kem); font-weight: 600; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--vang-nhat); transition: background-color 150ms;
}
.nut-ngoc:hover { background: var(--primary-dam); }
.nut-vien {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 4px; background: transparent; color: var(--primary-dam); font-weight: 600; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--vang); transition: background-color 150ms;
}
.nut-vien:hover { background: rgba(184, 145, 74, 0.12); }

/* ---------- Chính điện ---------- */
.khung-go-anh { padding: 8px; border-radius: 6px; background: var(--go); box-shadow: 0 0 0 1px var(--vang), 0 14px 30px rgba(58, 34, 22, 0.25); }
.an-trien {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px;
  border-radius: 6px; background: var(--son); color: var(--kem); rotate: -6deg; text-align: center;
  font: 700 22px/1.05 var(--display-font, Lora, serif);
  box-shadow: inset 0 0 0 3px var(--son), inset 0 0 0 5px rgba(251, 246, 234, 0.85);
}

/* ---------- Bảng Chiếu: giấy ghim trên bảng gỗ ---------- */
.to-giay { position: relative; padding: 16px 18px 16px 24px; border-radius: 2px; background: var(--kem); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.to-giay::before { content: ""; position: absolute; top: 11px; left: 9px; width: 7px; height: 7px; border-radius: 999px; background: var(--son); }

/* ---------- Vân Đàn: thẻ bài ---------- */
.the-bai {
  flex-shrink: 0; width: 64px; padding: 8px 0 10px; text-align: center; border-radius: 3px 3px 14px 14px;
  background: var(--primary); color: var(--kem); box-shadow: inset 0 0 0 1px var(--vang-nhat);
}
.the-bai.dang-mo { background: var(--son); box-shadow: inset 0 0 0 1px #f3c9a8; }

/* ---------- Bảng Phong Vân: cuộn thư ---------- */
.truc { display: block; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #5a3622, var(--go-toi)); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.cuon-thu { background: #fffaf0; box-shadow: inset 1px 0 0 #e5d6b5, inset -1px 0 0 #e5d6b5; margin-inline: 6px; }

/* ---------- Kim Bảng: bảng vàng ---------- */
.bang-vang { padding: 10px; border-radius: 6px; background: linear-gradient(135deg, #e9c97f, var(--vang) 50%, #e2c27a); box-shadow: 0 10px 24px rgba(120, 90, 40, 0.25); }
.huy-chuong {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px;
  font: 700 16px/1 var(--display-font, Lora, serif); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 1px var(--vang);
}
.huy-chuong.nhat { background: linear-gradient(135deg, #f3d98f, var(--vang)); color: var(--go); }
.huy-chuong.nhi { background: linear-gradient(135deg, #eef0f2, #a9b0b8); color: #2a2f35; }
.huy-chuong.tam { background: linear-gradient(135deg, #f0c9a4, #c98a5e); color: var(--go-toi); }
.huy-chuong.tu { background: #f3ead3; color: var(--go); }
.nhan-son { padding: 2px 10px; border-radius: 2px; background: var(--son); color: var(--kem); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---------- Tân Thư Các: kệ sách ---------- */
.ke-go { height: 18px; border-radius: 3px; box-shadow: inset 0 1px 0 #7a4e32, 0 8px 14px rgba(58, 34, 22, 0.3); }
.bia-sach { box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.2), 4px 6px 10px rgba(58, 34, 22, 0.35); border-radius: 2px 4px 4px 2px; }
.nhan-moi { padding: 2px 10px; border-radius: 2px; font-size: 13px; font-weight: 600; background: var(--primary); color: var(--kem); }
.nhan-sap { padding: 2px 10px; border-radius: 2px; font-size: 13px; font-weight: 600; background: #f3e1c0; color: #7a4a10; }

/* ---------- Xưởng Văn: tờ giấy kẻ dòng, bìa sách đóng chỉ ---------- */
.to-viet { background-color: #fffcf3; box-shadow: inset 0 0 0 1px #e5d6b5, 0 8px 20px rgba(58, 34, 22, 0.12); }
/* Dòng kẻ nằm ngay trên ô viết, mỗi 36px một dòng, khớp line-height 36px nên chữ luôn ngồi trên dòng */
.dong-ke { background-image: repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(184, 145, 74, 0.28) 35px, rgba(184, 145, 74, 0.28) 36px); }
.thanh-go { box-shadow: inset 0 0 0 1px var(--vang); border-radius: 4px 4px 0 0; }
.nut-go {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: 3px; color: #efe2c4; cursor: pointer; transition: background-color 150ms;
}
.nut-go:hover { background: rgba(214, 179, 106, 0.18); }
.nut-go[aria-pressed="true"], .nut-go[aria-expanded="true"] { background: rgba(214, 179, 106, 0.24); color: var(--kem); box-shadow: inset 0 -2px 0 var(--vang-nhat); }
.the-giay { background: #fffaf0; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(184, 145, 74, 0.55); }
.bia-chi {
  position: relative; flex-shrink: 0; width: 104px; height: 144px; border-radius: 2px 4px 4px 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 4px 6px 12px rgba(58, 34, 22, 0.3);
  /* gáy: một đường chỉ dọc và bốn mũi khâu */
  background-image:
    linear-gradient(90deg, transparent 10px, rgba(251, 246, 234, 0.5) 10px, rgba(251, 246, 234, 0.5) 11px, transparent 11px),
    linear-gradient(#efe2c4, #efe2c4), linear-gradient(#efe2c4, #efe2c4), linear-gradient(#efe2c4, #efe2c4), linear-gradient(#efe2c4, #efe2c4),
    linear-gradient(160deg, transparent, rgba(0, 0, 0, 0.35));  /* màu lụa bìa đặt bằng bg-[…] */
  background-size: 100% 100%, 7px 2px, 7px 2px, 7px 2px, 7px 2px, 100% 100%;
  background-position: 0 0, 7px 18px, 7px 54px, 7px 90px, 7px 126px, 0 0;
  background-repeat: no-repeat;
}
.bia-chi .nhan-doc {
  position: absolute; top: 14px; right: 14px; bottom: 14px; width: 30px; overflow: hidden;
  display: flex; justify-content: center; padding-top: 8px; background: var(--kem); box-shadow: inset 0 0 0 1px var(--vang);
  writing-mode: vertical-rl; font: 600 12px/1.2 var(--display-font, Lora, serif); color: var(--go);
}
}