/* Theme "Sáng · Liquid Glass" (liquid-light) của web — Thanh Tùng.
   Nạp SAU hi3d-a.css và hi3d-a-skin.css; mọi luật nằm dưới html[data-theme=liquid-light] nên theme tối
   (jade-dark) giữ nguyên từng điểm ảnh. Chỉ đổi diện mạo/bố cục lớp vỏ; không có logic ở đây.
   Số liệu thiết kế: docs/design/macos26-light/2026-10-15 (screens 01–04, 11–13, t04–t06).
   Tài nguyên: assets/theme/liquid-light (catalog.json, tách từ 9 sheet bằng tools/extract-theme-sheets.py).
   Không thêm breakpoint mới: chỉ dùng 1024 / 1023.98 / 1279.98 (tools/test-web-layout.mjs). */
@font-face{font-family:'Kylam Inter';src:url(assets/fonts/inter.ttf) format('truetype');font-weight:100 900;font-display:swap}

/* Token chung cho toàn bộ màn hình web, gồm Binh pháp. */
html[data-theme=liquid-light]{
  --lg-ink:#183d34;--lg-ink-2:#3d5f55;--lg-muted:#5f7a70;--lg-jade:#23735b;--lg-jade-hi:#2f8f72;--lg-gold:#c6a86a;--lg-bg:#f5f7f4;
  --lg-glass:rgba(255,255,255,.55);--lg-glass-2:rgba(255,255,255,.74);--lg-rim:rgba(255,255,255,.92);--lg-line:rgba(24,61,52,.14);
  --lg-shadow:0 12px 34px rgba(24,61,52,.14),0 2px 6px rgba(24,61,52,.06);--lg-blur:blur(22px) saturate(1.5);--lg-blur-soft:blur(8px);
  --lg-red:#b4281f;--lg-side-w:232px;
  --a-ink:var(--lg-ink);--a-muted:var(--lg-muted);--a-gold:var(--lg-jade);--a-gold-hi:var(--lg-ink);--a-gold-dim:var(--lg-gold);--a-on-gold:#fff;
  --a-bg:var(--lg-bg);--a-panel:var(--lg-glass);--a-raised:var(--lg-glass-2);--a-line:var(--lg-line);--a-line-soft:rgba(24,61,52,.1);
  --a-danger:#b4281f;--a-ok:var(--lg-jade);--a-red:var(--lg-red);--a-scene:url(assets/theme/liquid-light/scene-wide.webp);
  --a-gold-grad:linear-gradient(180deg,#183d34,#183d34);
  --a-header-h:0px;
  font-family:'Kylam Inter','Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}
html[data-theme=liquid-light][data-glass=lite]{--lg-blur:none;--lg-blur-soft:none;--lg-glass:rgba(252,253,251,.93);--lg-glass-2:rgba(255,255,255,.97)}


html[data-theme=liquid-light]{
  /* canvas phủ toàn màn hình mọi trạng thái: kính blur trên cảnh 3D thật; bàn cờ được dịch bằng chromeShift() */
  body>#view,body[data-screen]>#view{inset:0!important}
  body{background:#f5f7f4 var(--a-scene) center/cover no-repeat;color:var(--lg-ink)}
  /* ---- chữ ---- */
  .a-gold-text,.a-home h1,.a-brand b,.a-dialog h2,.a-help-body h3,#loading .loading-card h2,.a-vs b,
  #settings-dialog h2,#help-dialog h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--lg-ink);-webkit-text-fill-color:currentColor;filter:none;text-shadow:none;font-family:'Lora',Georgia,serif}
  #settings-dialog h3,#settings-dialog legend{color:var(--lg-jade);font-family:'Lora',Georgia,serif}
  .a-t-dark,.a-tag-dark,.a-logo-dark{display:none}
  .a-kicker{display:block;margin:0;font:500 11px/1 'Kylam Inter','Inter',sans-serif;letter-spacing:.18em;color:var(--lg-muted)}
  .a-home h1{font-weight:700;letter-spacing:0;line-height:1.05}
  .a-sub{color:var(--lg-ink-2)}

  /* ---- biểu tượng thiết kế (sheet s02/s03) thay mặt nạ vàng ---- */
  .a-ic{-webkit-mask:none;mask:none;background:var(--ic,none) center/contain no-repeat;filter:drop-shadow(0 1px 1px rgba(24,61,52,.18));color:inherit}
  .a-ic-home{--ic:url(assets/theme/liquid-light/nav/home.webp)}.a-ic-book{--ic:url(assets/theme/liquid-light/nav/book.webp)}.a-ic-editor{--ic:url(assets/theme/liquid-light/nav/brush.webp)}
  .a-ic-gear{--ic:url(assets/theme/liquid-light/nav/gear.webp)}.a-ic-back{--ic:url(assets/theme/liquid-light/nav/chevron-left.webp)}.a-ic-next{--ic:url(assets/theme/liquid-light/nav/chevron-right.webp)}
  .a-ic-hint{--ic:url(assets/theme/liquid-light/actions/hint.webp)}.a-ic-history{--ic:url(assets/theme/liquid-light/nav/history.webp)}.a-ic-camera{--ic:url(assets/theme/liquid-light/actions/camera.webp)}
  .a-ic-pause{--ic:url(assets/theme/liquid-light/actions/pause.webp)}.a-ic-play{--ic:url(assets/theme/liquid-light/actions/play.webp)}.a-ic-branch{--ic:url(assets/theme/liquid-light/nav/tree.webp)}
  .a-ic-position{--ic:url(assets/theme/liquid-light/nav/board.webp)}.a-ic-reset{--ic:url(assets/theme/liquid-light/actions/restart.webp)}
  .a-ic-help{--ic:url(assets/theme/liquid-light/nav/help.webp)}
  .a-nav button:not([aria-current=page]) .a-ic,.a-tabbar button:not([aria-current=page]) .a-ic{background:var(--ic,none) center/contain no-repeat;filter:saturate(.8) opacity(.88)}
  .a-history p::before{display:none}

  /* ---- kính ---- */
  .a-panel,.a-dialog:not(.opening-dialog),#help-dialog,#settings-dialog,#loading .loading-card{
    background:var(--lg-glass)!important;border:1px solid var(--lg-rim)!important;border-image:none!important;border-radius:24px!important;color:var(--lg-ink);
    box-shadow:var(--lg-shadow),inset 0 1px 0 var(--lg-rim)!important;filter:none;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
  dialog:not(.opening-dialog):not(.opening-form-dialog):not(.opening-suggestions-dialog):not(#side-dialog)::backdrop{background:rgba(245,247,244,.46)!important;-webkit-backdrop-filter:var(--lg-blur-soft);backdrop-filter:var(--lg-blur-soft)}
  #loading{background:var(--lg-bg) var(--a-scene) center/cover!important}
  #loading .loading-card{color:var(--lg-ink);padding:34px 40px!important}
  #loading progress{accent-color:var(--lg-jade)}
  #reload{border:0;background:var(--lg-jade);color:#fff;border-radius:999px;min-height:48px}
  .a-home,.a-side{padding:18px}

  /* ---- nút ---- */
  .a-btn{border:1px solid var(--lg-rim);border-image:none;border-radius:999px;min-height:48px;padding:8px 18px;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.58));color:var(--lg-ink);filter:none;
    box-shadow:0 4px 14px rgba(24,61,52,.1),inset 0 1px 0 #fff;font-weight:600;font-family:'Kylam Inter','Inter',sans-serif}
  .a-btn:hover:not(:disabled){background:linear-gradient(180deg,#fff,rgba(255,255,255,.78));filter:none;border-color:#fff;box-shadow:0 6px 18px rgba(24,61,52,.16),inset 0 1px 0 #fff}
  .a-btn:active:not(:disabled){transform:translateY(1px);filter:none}
  .a-btn:disabled{opacity:.5}
  .a-btn:focus-visible,.a-nav button:focus-visible,.a-tabbar button:focus-visible,.a-seg button:focus-visible,.a-side-cards button:focus-visible,.a-help-list button:focus-visible,.a-header-tools button:focus-visible,.a-viewbar button:focus-visible,.a-theme-card:focus-visible{outline:3px solid #2f8f72;outline-offset:2px}
  .a-primary,.a-home .a-primary{border:1px solid rgba(255,255,255,.55);border-image:none;background:linear-gradient(180deg,#2f8f72,#1d6a54);color:#fff;min-height:60px;padding:0 28px;
    box-shadow:0 10px 24px rgba(35,115,91,.34),inset 0 1px 0 rgba(255,255,255,.5)}
  .a-primary:hover:not(:disabled){background:linear-gradient(180deg,#38a082,#237a60);filter:none}
  .a-primary .a-label,.a-primary span:not(.a-discs):not(.a-chev):not(.a-ic){background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;font-weight:700;letter-spacing:0;font-family:'Kylam Inter','Inter',sans-serif}
  .a-primary .a-chev,.a-chev{color:currentColor;text-shadow:none;font-size:26px}
  .a-primary{color:#fff}
  .a-danger{background:linear-gradient(180deg,#fff1ef,#fbd9d4);border-color:#f3b6ad;color:#a3231a}
  .a-wide{min-height:56px;border-width:1px;border-image:none}
  .a-wide span:last-child{background:none;color:#fff;font:700 18px 'Kylam Inter','Inter',sans-serif;-webkit-background-clip:border-box;background-clip:border-box}
  .a-actions .a-primary{min-height:56px;border-image:none;padding:0 20px}.a-actions .a-primary span{font-size:16px;color:#fff}
  .a-stack b{font-family:'Kylam Inter','Inter',sans-serif;font-weight:650;color:var(--lg-ink);font-size:16px}.a-stack small{color:var(--lg-muted);font-size:12.5px}
  .a-ghost{border:0;background:transparent;box-shadow:none;border-top:0}

  /* ---- sidebar (desktop) / header (mobile) ---- */
  .a-header{background:var(--lg-glass)!important;border:1px solid var(--lg-rim)!important;box-shadow:var(--lg-shadow),inset 0 1px 0 var(--lg-rim)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
  .a-header::after{display:none}
  .a-brand{color:var(--lg-ink)}.a-brand b{font-size:24px;letter-spacing:.02em;filter:none}.a-brand small{color:var(--lg-muted);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
  .a-header .a-logo-light{display:block;width:auto;height:48px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(24,61,52,.22))}
  .a-nav button{color:var(--lg-ink);font:500 15px 'Kylam Inter','Inter',sans-serif;border-radius:14px}
  .a-nav button+button::before{display:none}
  .a-nav button:hover{background:rgba(255,255,255,.55);color:var(--lg-ink)}
  .a-nav button[aria-current=page],.a-tabbar button[aria-current=page]{color:var(--lg-jade);font-weight:650}
  .a-nav button[aria-current=page]{background:linear-gradient(180deg,rgba(47,143,114,.24),rgba(47,143,114,.12));box-shadow:inset 0 0 0 1px rgba(35,115,91,.22),inset 0 1px 0 rgba(255,255,255,.7)}
  .a-nav button[aria-current=page]::after{display:none}
  .a-header-tools button:hover{background:rgba(255,255,255,.6)}
  .a-tabbar{background:var(--lg-glass)!important;border:1px solid var(--lg-rim)!important;box-shadow:var(--lg-shadow),inset 0 1px 0 var(--lg-rim)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
  .a-tabbar button{color:var(--lg-ink-2);font-family:'Kylam Inter','Inter',sans-serif}

  /* ---- trang chủ ---- */
  .a-home{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;gap:14px}
  .a-row,.a-card,.a-tile{background:var(--lg-glass-2);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
  .a-card,.a-tile{border-radius:20px;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:6px;padding:14px}
  .a-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
  .a-card img,.a-card .a-art{width:72px;height:72px;filter:drop-shadow(0 4px 8px rgba(24,61,52,.2))}
  .a-card img:not(.a-art){display:none}
  .a-art{display:block;object-fit:contain}
  .a-tile .a-ic{display:none}.a-tile .a-art{width:64px;height:64px;filter:drop-shadow(0 4px 8px rgba(24,61,52,.2))}
  .a-tile{font-weight:650;min-height:120px}
  .a-discs i{box-shadow:0 2px 5px rgba(24,61,52,.3)}
  .a-row .a-ic{color:inherit}
  .a-ghost{background:transparent}

  /* ---- ván chơi ---- */
  .a-side{gap:10px}
  .a-player,.a-player.a-me{border:1px solid var(--lg-rim);border-image:none;border-radius:20px;background:var(--lg-glass-2);box-shadow:0 4px 14px rgba(24,61,52,.1),inset 0 1px 0 #fff;filter:none;margin:0;padding:10px 12px;min-height:84px;color:var(--lg-ink)}
  .a-player[data-active=true],.a-player.a-me[data-active=true]{box-shadow:0 0 0 2px var(--lg-jade),0 8px 22px rgba(35,115,91,.22),inset 0 1px 0 #fff}
  .a-player.a-me[data-active=true][data-red=true]{background:linear-gradient(180deg,rgba(255,244,241,.95),rgba(255,255,255,.8));box-shadow:0 0 0 2px #d9564a,0 8px 22px rgba(180,40,31,.2),inset 0 1px 0 #fff}
  .a-player.a-me[data-active=true][data-red=false]{background:linear-gradient(180deg,rgba(233,248,241,.97),rgba(255,255,255,.85));border-image:none}
  .a-player.a-me[data-active=true][data-red=false],.a-player.a-me[data-active=true][data-red=true]{border-width:1px}
  .a-avatar:not(.a-disc){width:56px;height:56px;border:2px solid var(--lg-gold);border-radius:50%;background:#fff;filter:none;overflow:hidden}
  .a-avatar:not(.a-disc) img{opacity:1;width:44px;height:44px}
  .a-disc,.a-me .a-disc{border:2px solid var(--lg-gold);background:radial-gradient(circle at 35% 30%,#fffaf0,#efe3c4);box-shadow:inset 0 0 0 3px #fff7e2,0 2px 5px rgba(24,61,52,.25);color:#183d34;width:56px;height:56px;font-size:30px}
  .a-disc.red,.a-discs i.red{color:var(--lg-red)}
  .a-player .a-stack b{font-size:15px;text-transform:none;letter-spacing:0}
  .a-clock,.a-me[data-red=true] .a-clock,.a-me[data-active=true] .a-clock{min-width:92px;padding:6px 12px;border:1px solid var(--lg-line);border-radius:999px;background:rgba(255,255,255,.8);box-shadow:inset 0 1px 2px rgba(24,61,52,.1);font:700 22px 'Lora',Georgia,serif;color:var(--lg-ink);text-shadow:none;letter-spacing:.02em}
  .a-turn{border:1px solid #f0b7ae;background:linear-gradient(180deg,#fff3f0,#ffe0db);color:var(--lg-red);font-weight:650;letter-spacing:.04em;box-shadow:0 3px 10px rgba(180,40,31,.14);padding:6px 24px}
  .a-turn[data-turn=b]{border-color:#9fd2bf;background:linear-gradient(180deg,#f0faf6,#d8f0e6);color:var(--lg-jade);box-shadow:0 3px 10px rgba(35,115,91,.14)}
  .a-turn i{box-shadow:none;background:var(--lg-red)}.a-turn[data-turn=b] i{background:var(--lg-jade);box-shadow:none}
  .a-history{border:1px solid var(--lg-rim);border-image:none;border-radius:20px;background:var(--lg-glass-2);margin:0;box-shadow:inset 0 1px 0 #fff}
  .a-history summary{border-bottom:1px solid var(--lg-line);color:var(--lg-ink);font:650 16px 'Kylam Inter','Inter',sans-serif}.a-history summary .a-ic{width:26px;height:26px}
  .a-history ol{color:var(--lg-ink);font-size:14px}.a-history p{color:var(--lg-muted)}
  .a-hint-status{color:var(--lg-jade)}
  .a-tools .a-btn{flex-direction:column;min-height:84px;border-radius:20px;gap:4px;font-size:14px}.a-tools .a-ic{width:38px;height:38px}
  .a-viewbar{background:var(--lg-glass)!important;border:1px solid var(--lg-rim);border-image:none!important;border-radius:999px;color:var(--lg-ink-2);filter:none;box-shadow:var(--lg-shadow);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);padding:6px 10px}
  .a-viewbar button{border:1px solid transparent;background:transparent;color:var(--lg-ink);font-weight:600}
  .a-viewbar button[aria-pressed=true]{background:linear-gradient(180deg,#2f8f72,#1d6a54);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(35,115,91,.3)}
  .a-viewbar em{border-left-color:var(--lg-line)}
  .a-check input{accent-color:var(--lg-jade)}

  /* ---- hộp thoại & điều khiển ---- */
  .a-dialog{color:var(--lg-ink)}.a-dialog h2{font-size:28px}
  .a-seg,.a-stepper{border:1px solid var(--lg-line);border-radius:999px;background:rgba(255,255,255,.6);overflow:hidden}
  .a-seg button,.a-stepper button{background:transparent;color:var(--lg-ink);border-radius:0}
  .a-seg button[aria-checked=true],.a-seg-inline button[aria-pressed=true]{background:linear-gradient(180deg,#2f8f72,#1d6a54);color:#fff;box-shadow:none}
  .a-stepper output,.a-stepper b{color:var(--lg-ink)}
  .a-seg-inline{border:0;background:transparent;gap:6px}.a-seg-inline button{border:1px solid var(--lg-line);border-radius:999px;background:rgba(255,255,255,.7)}
  .a-side-cards button{border:1px solid var(--lg-rim);border-radius:20px;background:var(--lg-glass-2);color:var(--lg-ink)}
  .a-side-cards button[aria-checked=true]{background:linear-gradient(180deg,rgba(47,143,114,.22),rgba(47,143,114,.1));box-shadow:inset 0 0 0 2px var(--lg-jade)}
  .a-vs img{border-color:var(--lg-gold);background:#fff}
  .a-warning{color:#8a5a12}
  .a-help-list button{border:1px solid var(--lg-line);border-radius:14px;background:rgba(255,255,255,.55);color:var(--lg-ink)}
  .a-help-list button[aria-current=true]{background:linear-gradient(180deg,rgba(47,143,114,.22),rgba(47,143,114,.1));border-color:rgba(35,115,91,.4);color:var(--lg-jade)}
  .a-help-body,.a-switch,.a-info{border:1px solid var(--lg-rim);border-radius:18px;background:var(--lg-glass-2);color:var(--lg-ink)}
  .a-help-body p{color:var(--lg-ink-2)}
  .a-switch input{background:#d4dcd7;border-color:var(--lg-line)}.a-switch input::after{background:#fff;box-shadow:0 1px 3px rgba(24,61,52,.3)}
  .a-switch input:checked{background:var(--lg-jade)}.a-switch input:checked::after{background:#fff}
  .a-info b,.a-settings-extra h3{color:var(--lg-jade)}.a-settings-extra h3{font-family:'Kylam Inter','Inter',sans-serif}
  .a-field small,.a-switch small{color:var(--lg-muted)}
  .dialog-close{border:1px solid var(--lg-rim)!important;background:rgba(255,255,255,.8)!important;color:var(--lg-ink)!important;box-shadow:0 2px 8px rgba(24,61,52,.15)}
  #toast{background:rgba(255,255,255,.9);border:1px solid var(--lg-rim);border-radius:999px;color:var(--lg-ink);box-shadow:var(--lg-shadow);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}

  .appearance-settings{border-top:1px solid var(--lg-line)}
  .appearance-settings h3{color:var(--lg-ink);font-family:'Lora',Georgia,serif}
  .appearance-settings .appearance-title{color:var(--lg-jade);font-weight:650}
  .appearance-settings p{color:var(--lg-ink-2)}
  .appearance-settings select{background:rgba(255,255,255,.8);color:var(--lg-ink);border:1px solid var(--lg-line)}
  .appearance-tile{background:var(--lg-glass-2);color:var(--lg-ink);border:1px solid var(--lg-rim);border-radius:16px;box-shadow:0 3px 10px rgba(24,61,52,.08)}
  .appearance-tile img{background:#eef3ef;border-radius:12px}
  .appearance-tile[aria-checked=true]{border:2px solid var(--lg-jade);background:linear-gradient(180deg,rgba(47,143,114,.2),rgba(47,143,114,.08));color:var(--lg-ink)}
  .appearance-tile:hover{border-color:var(--lg-jade)}
  .a-logo-light.a-seal{width:72px;height:72px;border:0}
  .a-stepper{display:inline-flex;align-items:center}.a-stepper button{display:grid;place-items:center;line-height:1}.a-stepper output{display:grid;place-items:center;min-height:48px}
  /* thẻ chọn theme (Cài đặt → Giao diện) */
  input[type=range]{accent-color:var(--lg-jade)}
  .a-check{color:var(--lg-ink)}
  .a-switch span{letter-spacing:0}
}
/* Bàn & quân: hai tab chỉ ở theme sáng (theme tối giữ hai nhóm xếp dọc). */
.appearance-tabs,.appearance-summary{display:none}
html[data-theme=liquid-light] .appearance-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:10px 0;border:1px solid var(--lg-line);border-radius:999px;background:rgba(255,255,255,.6)}
html[data-theme=liquid-light] .appearance-tabs button{min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--lg-ink);font:600 15px 'Kylam Inter','Inter',sans-serif;cursor:pointer}
html[data-theme=liquid-light] .appearance-tabs button[aria-selected=true]{background:linear-gradient(180deg,#2f8f72,#1d6a54);color:#fff;box-shadow:0 4px 12px rgba(35,115,91,.3)}
html[data-theme=liquid-light] .appearance-settings[data-tab=board] .appearance-pane[data-pane=pieces],html[data-theme=liquid-light] .appearance-settings[data-tab=pieces] .appearance-pane[data-pane=board]{display:none}
html[data-theme=liquid-light] .appearance-summary{display:block;margin:12px 0 0;padding:10px 14px;border-radius:14px;background:var(--lg-glass-2);border:1px solid var(--lg-rim);color:var(--lg-ink-2);font-size:13px}
/* Chức năng thêm dùng chung hai theme (lưu ván, đồng hồ). */
.a-seg-4{grid-template-columns:repeat(4,1fr)}
.a-seg-4 button{padding:0 4px;font-size:14px}
.a-ic-save{--ix:5;--iy:2}.a-ic-lift,.a-ic-drop,.a-ic-shatter{--ix:5;--iy:2}
.a-clock[data-low=true]{color:#ff8a70}
html[data-theme=jade-dark] :is(.a-tool-light,.a-glass-row){display:none}
html[data-theme=liquid-light] .a-ic-save{--ic:url(assets/theme/liquid-light/actions/save.webp)}
html[data-theme=liquid-light] .a-clock[data-low=true]{color:#b4281f;border-color:#f0b7ae;background:#fff1ef}
/* Phần tử của picker dùng chung cho hai theme (tối cũng cần thấy được thẻ). */
.a-theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.a-theme-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:44px;padding:10px;border-radius:16px;border:1px solid var(--a-line-soft);background:transparent;color:var(--a-ink);text-align:left;cursor:pointer;font:inherit}
.a-theme-card b{font-size:15px}.a-theme-card small{font-size:12px;color:var(--a-muted)}
.a-theme-card[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--a-gold)}
.a-theme-preview{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr 1fr;gap:5px;width:100%;aspect-ratio:16/9;padding:6px;border-radius:12px;overflow:hidden}
.a-theme-preview i{display:block;border-radius:6px}
.a-theme-preview i:first-child{grid-row:1/3}
.a-prev-light{background:linear-gradient(160deg,#eef5f1,#cfe3da 60%,#f4efe0)}.a-prev-light i{background:rgba(255,255,255,.8);box-shadow:0 1px 4px rgba(24,61,52,.15)}.a-prev-light i:last-child{background:#23735b}
.a-prev-dark{background:linear-gradient(160deg,#0b1411,#162922 60%,#1d2a22)}.a-prev-dark i{background:#0f1d18;box-shadow:inset 0 0 0 1px #c8a962}.a-prev-dark i:last-child{background:#dbc07c}
.a-theme-status{margin:0 0 10px;color:var(--a-danger);font-size:13px}.a-theme-status[hidden]{display:none}
html[data-theme=liquid-light] .a-theme-card{border-color:var(--lg-rim);background:var(--lg-glass-2)}
html[data-theme=liquid-light] .a-theme-card[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--lg-jade)}
html[data-theme=jade-dark] :is(.a-nav-light,.a-art,.a-kicker,.a-logo-light,.a-tag-light,.a-t-light){display:none}
html[data-theme=liquid-light] .a-logo-dark{display:none}

/* ================= DESKTOP (>= 1024): thanh bên kính ================= */
@media (min-width:1024px){
  html[data-theme=liquid-light]{
    .a-header{inset:12px auto 12px 12px;width:var(--lg-side-w);height:auto!important;padding:20px 12px 16px;flex-direction:column;align-items:stretch;gap:12px;border-radius:26px;z-index:5}
    .a-brand{padding:0 6px 8px;border-bottom:1px solid var(--lg-line)}
    .a-nav{position:static;transform:none;flex-direction:column;height:auto;gap:4px;flex:1}
    .a-nav button{justify-content:flex-start;min-width:0;height:48px;padding:0 12px;font-size:15px;gap:12px}
    .a-nav button .a-ic{width:30px;height:30px}
    .a-nav .a-nav-sep{margin-top:auto}
    .a-nav .a-nav-sep+button{margin-top:0}
    .a-tools #a-menu{display:none}
    .a-header-tools{display:none}
    .a-home{left:calc(var(--lg-side-w) + 40px);top:32px;bottom:32px;width:clamp(400px,38vw,560px);padding:8px 0;justify-content:center}
    .a-home h1{font-size:clamp(40px,4.4vw,64px)}
    .a-home .a-sub{font-size:16px;line-height:1.5;max-width:34em}
    .a-home .a-primary{width:max-content;min-width:260px}
    .a-tiles{grid-template-columns:repeat(2,1fr)}
    .a-card,.a-tile{min-height:112px}
    .a-side{top:12px;bottom:12px;right:12px}
    .a-viewbar{left:calc(var(--lg-side-w) + 48px)}
    body[data-screen=play],body[data-screen=setup]{--lg-side-w:196px}
  }
}
@media (min-width:1024px) and (max-width:1279.98px){
  html[data-theme=liquid-light]{--lg-side-w:196px;
    .a-brand small{display:none}.a-home{width:clamp(360px,40vw,440px)}.a-home h1{font-size:38px}.a-nav button{height:44px;font-size:14px}}
}
/* ================= MOBILE (< 1024): header gọn + thanh nổi ================= */
@media (max-width:1023.98px){
  html[data-theme=liquid-light]{--a-header-h:56px;--a-tab-h:64px;
    --a-scene:url(assets/theme/liquid-light/scene-tall.webp);
    .a-header{inset:8px 10px auto 10px;height:calc(var(--a-header-h) + var(--a-safe-t))!important;border-radius:20px;padding-inline:12px}
    .a-header .a-logo-light{height:36px}.a-brand b{font-size:20px}
    /* Bottom menu trượt (kiểu macOS 26): đóng = chỉ còn tay nắm; mở = tờ kính trượt lên bằng đường cong lò xo. */
    .a-tabbar{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;left:10px;right:10px;bottom:calc(6px + var(--a-safe-b));height:auto;padding:22px 8px 12px;border-radius:30px;z-index:6;
      transform:translateY(calc(100% + 24px + var(--a-safe-b)));visibility:hidden;opacity:.6;
      transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .3s ease,visibility 0s linear .5s;will-change:transform;user-select:none;-webkit-user-select:none;touch-action:pan-x}
    .a-tabbar *{-webkit-user-drag:none;user-select:none}
    .a-tabbar::before{content:'';position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(24,61,52,.25)}
    &[data-menu=open] .a-tabbar{transform:none;visibility:visible;opacity:1;transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .25s ease,visibility 0s}
    .a-tabbar button{flex-direction:column;min-width:0;min-height:72px;padding:0 2px;border-radius:20px;gap:4px;font-size:11.5px;white-space:nowrap;overflow:hidden}
    .a-tabbar button[aria-current=page]{background:linear-gradient(180deg,rgba(47,143,114,.22),rgba(47,143,114,.1))}
    .a-tabbar .a-ic{width:36px;height:36px}
    .a-tabbar button:active{transform:scale(.96);transition:transform .12s}
    .a-menu-scrim{position:fixed;inset:0;z-index:5;background:rgba(228,236,231,.0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);pointer-events:none;transition:background .4s ease,backdrop-filter .4s ease,-webkit-backdrop-filter .4s ease}
    &[data-menu=open] .a-menu-scrim{background:rgba(228,236,231,.34);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto}
    &[data-glass=lite] .a-menu-scrim{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
    .a-menu-handle{position:fixed;z-index:5;left:50%;bottom:var(--a-safe-b);width:170px;height:44px;margin-left:-85px;padding:0;border:0;background:none;display:grid;place-items:end center;padding-bottom:10px;box-sizing:border-box;cursor:pointer;
      transition:opacity .25s ease;-webkit-tap-highlight-color:transparent;touch-action:none}
    .a-menu-handle span{display:block;width:44px;height:5px;border-radius:3px;background:rgba(24,61,52,.5);box-shadow:0 0 0 1.5px rgba(255,255,255,.8);transition:width .3s cubic-bezier(.32,.72,0,1),transform .3s cubic-bezier(.32,.72,0,1)}
    .a-menu-handle:hover span,.a-menu-handle:focus-visible span{width:56px}
    .a-menu-handle:focus-visible{outline:3px solid #2f8f72;outline-offset:-4px;border-radius:15px}
    &[data-menu=open] .a-menu-handle{opacity:0;pointer-events:none}
    body[data-screen=play] .a-menu-handle,body[data-screen=play] .a-menu-scrim{display:none}
    .a-home{left:12px;right:12px;bottom:calc(36px + var(--a-safe-b) + 8px);height:auto;max-height:min(60dvh,480px);padding:6px 4px;gap:8px}
    .a-home h1{font-size:30px}.a-home .a-sub,.a-kicker{display:none}
    .a-card{min-height:64px;padding:8px 12px}.a-row{min-height:48px}.a-tile{min-height:84px;padding:10px}
    .a-home .a-primary{min-height:52px;width:100%}
    .a-card{padding:10px}.a-card .a-art{width:52px;height:52px}
    .a-tile{min-height:96px}.a-tile .a-art{width:48px;height:48px}
    .a-side{border-radius:26px 26px 0 0!important;left:8px;right:8px;bottom:0}
    body[data-screen=play] .a-side{grid-template-columns:1fr 1fr;gap:6px}
    .a-me .a-clock,.a-clock{max-width:none;min-width:84px;font-size:18px;margin-left:auto}
    .a-player,.a-player.a-me{min-height:82px;padding:6px 8px;border-radius:16px;grid-template-columns:30px minmax(0,1fr);gap:3px 6px}
    .a-avatar:not(.a-disc),.a-disc,.a-me .a-disc{width:30px;height:30px;font-size:20px}.a-avatar:not(.a-disc) img{width:24px;height:24px}
    .a-clock,.a-me .a-clock{min-width:0;font-size:18px;padding:2px 8px;max-width:none;justify-self:stretch;margin:0}
    .a-history{border-radius:16px}
    .a-tools{grid-template-columns:repeat(5,1fr)}.a-tools .a-btn{min-height:56px;border-radius:16px;font-size:11px;padding:6px 2px}.a-tools .a-ic{width:26px;height:26px}
    .a-wide{min-height:48px}
  }
}
@media (prefers-reduced-motion:reduce){html[data-theme=liquid-light] .a-btn,.a-tabbar,.a-menu-scrim,.a-menu-handle,.a-menu-handle span{transition:none!important}}

/* Màn hẹp: hàng cài đặt và nhóm nút tự xuống dòng thay vì tràn ngang (cả hai theme). */
/* Binh pháp dùng cùng kính sáng và màu trạng thái như phần Chơi cờ. */
html[data-theme=liquid-light]{
  :is(.opening-dialog,.opening-form-dialog,.opening-suggestions-dialog,#side-dialog){
    border:1px solid var(--lg-rim)!important;border-image:none!important;border-radius:24px!important;background:var(--lg-glass-2)!important;color:var(--lg-ink);box-shadow:var(--lg-shadow)!important;filter:none;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)
  }
  :is(.opening-dialog,.opening-form-dialog,.opening-suggestions-dialog,#side-dialog)::backdrop{background:rgba(228,236,231,.45);-webkit-backdrop-filter:var(--lg-blur-soft);backdrop-filter:var(--lg-blur-soft)}
  :is(.opening-dialog,.opening-form-dialog,.opening-suggestions-dialog) :is(h2,h3,h4,strong,.opening-kicker){background:none;color:var(--lg-ink);-webkit-text-fill-color:currentColor;filter:none;text-shadow:none}
  :is(.opening-dialog,.opening-form-dialog,.opening-suggestions-dialog) :is(p,label,small,summary){color:var(--lg-ink-2)}
  #library-empty,.opening-tree-card-meta,.opening-local-note,.opening-editor-tip{color:var(--lg-ink-2)}
  :is(.opening-dialog,.opening-form-dialog,.opening-suggestions-dialog) button{border:1px solid var(--lg-line);border-image:none;border-radius:12px;background:rgba(255,255,255,.8);color:var(--lg-ink);box-shadow:none;text-shadow:none;filter:none}
  :is(.opening-dialog,.opening-form-dialog,.opening-suggestions-dialog) button:hover:not(:disabled){background:#e2f2eb;border-color:var(--lg-jade)}
  :is(.opening-dialog,.opening-form-dialog,.opening-suggestions-dialog) button:focus-visible{outline:3px solid var(--lg-jade);outline-offset:2px}
  :is(.opening-dialog,.opening-form-dialog,.opening-suggestions-dialog) :is(input:not([type=checkbox]),select,textarea){background:rgba(255,255,255,.85);color:var(--lg-ink);border:1px solid var(--lg-line);border-radius:12px}
  :is(.opening-tree-card,.opening-tree-info,.opening-library-section,.opening-suggestion,.device-book-info,.opening-training-card,.opening-board-wrap){background:rgba(255,255,255,.78);border:1px solid var(--lg-line);border-image:none;border-radius:18px;box-shadow:none}
  .opening-tree-card[data-selected=true],.device-book-row[data-selected=true]{background:#e2f2eb;box-shadow:inset 0 0 0 1px var(--lg-jade)}
  :is(.opening-tree-canvas,.opening-tree-minimap){background:rgba(246,250,248,.9);border:1px solid var(--lg-line)}
  :is(.opening-tree-node,.opening-next-move){background:#fff;color:var(--lg-ink);border-color:var(--lg-line);box-shadow:none}
  :is(.opening-tree-node,.opening-next-move)[data-selected=true]{background:#e2f2eb;border-color:var(--lg-jade)}
  :is(.opening-tree-node,.opening-next-move) :is(small,strong,span){color:inherit}
  :is(.opening-editor-actions,.opening-form-actions,.opening-suggestions-actions){background:transparent}
  :is(.opening-editor-actions .primary,.opening-form-actions button[type=submit]){background:var(--lg-jade);color:#fff}
  #opening-view-board{background:var(--lg-jade)!important;background-image:none!important;color:#fff}
  #opening-board-angle{background:#fff;color:var(--lg-ink)}
  #opening-editor-menu{color:var(--lg-ink)}
  #library-dialog .opening-editor-actions,#opening-node-form .opening-form-actions{background:var(--lg-glass-2)}
  .opening-selected-line>span{color:var(--lg-ink-2)}
  .opening-tree-zoom{background:var(--lg-glass-2);border-color:var(--lg-line)}
  .opening-danger{color:var(--lg-red)!important}
  .opening-training-hud{background:var(--lg-bg);color:var(--lg-ink)}
  .opening-training-card{color:var(--lg-ink)}
  .opening-training-card :is(strong,p,span,summary,li){color:var(--lg-ink-2)}
  #opening-training-level,#opening-training-progress,#opening-training-feedback,#opening-training-branches li{color:var(--lg-ink-2)}
  #opening-training-kicker,#opening-zoom-value{color:var(--lg-jade)}
  #opening-training-branches li[data-completed=true]{color:var(--lg-jade);border-color:var(--lg-jade)}
  .opening-tree-card-meta span,.device-book-info :is(dt,dd),.opening-tree-info :is(dt,dd){color:var(--lg-ink-2)}
  .opening-training-card button{background:#fff;color:var(--lg-ink);border:1px solid var(--lg-line);border-radius:12px}
  .opening-training-card progress{accent-color:var(--lg-jade)}
  .device-book-chip{background:#e2f2eb;color:var(--lg-jade);border-color:var(--lg-line)}
}
@media(max-width:1023.98px){
  html[data-theme=liquid-light]{
    body[data-screen=play] .a-side{height:auto;max-height:var(--a-sheet-h);padding:8px;gap:4px}
    .a-history{min-height:0;max-height:128px}
    .a-history summary{display:flex;align-items:center;min-height:44px;padding:2px 8px;font-size:12px}
    .a-history:not([open]){max-height:46px}
    .a-tools .a-btn{min-height:48px;border-radius:12px}
    .a-wide{min-height:48px}
  }
}
@media(max-width:1023.98px) and (max-height:700px){
  :root{--a-sheet-h:244px}
  body[data-screen=play] .a-side{height:var(--a-sheet-h);gap:4px}
  .a-player,.a-player.a-me{grid-template-columns:minmax(0,1fr);min-height:60px}
  .a-player .a-avatar{display:none}
  .a-player .a-stack{flex-direction:row;align-items:baseline;gap:6px}
  .a-player .a-stack small{margin:0;flex:1;min-width:0}
  .a-turn{grid-column:1;grid-row:2;align-self:center;padding:3px 8px;font-size:11px}
  .a-history{grid-column:2;grid-row:2}
  .a-history[open]{grid-column:1/-1;grid-row:auto}
  .a-history summary{min-height:44px;font-size:11px;padding:2px 4px;gap:3px}
  .a-history summary .a-ic{width:18px;height:18px}
  .a-tools .a-btn{min-height:48px;padding:4px 2px;font-size:11px;line-height:1.1;gap:2px}
  .a-tools .a-ic{width:22px;height:22px}
  html[data-theme=jade-dark]{
    body[data-screen=play] .a-side{border:2px solid var(--a-line)!important;border-image:none!important;padding:6px}
    .a-player,.a-player.a-me,.a-player.a-me[data-active=true]{border:1px solid var(--a-line);border-image:none;margin:0;padding:4px 6px;background:var(--a-raised)}
    .a-player .a-clock,.a-player.a-me .a-clock{font-size:18px;line-height:22px;padding:1px 4px}
    .a-history{border:1px solid var(--a-line);border-image:none}
    .a-tools .a-btn,.a-wide{border:1px solid var(--a-line);border-image:none}
  }
  html[data-theme=liquid-light]{
    .a-player,.a-player.a-me{grid-template-columns:minmax(0,1fr);min-height:60px;padding:4px 6px}
    .a-player .a-clock,.a-player.a-me .a-clock{padding:1px 6px;font-size:18px;line-height:22px}
    .a-tools .a-btn{min-height:48px;padding:4px 2px;gap:2px;font-size:11px;line-height:1.1}
    .a-tools .a-ic{width:22px;height:22px}
  }
}
@media (max-width:1023.98px){
  .a-info.a-field,.a-switch{flex-wrap:wrap}
  .a-seg-inline{flex-wrap:wrap}
}
/* Điện thoại ngang (theme sáng): header kính nổi cao hơn --a-header-h nên panel bên phải bắt đầu dưới nó. */
@media (max-width:1023.98px) and (orientation:landscape) and (max-height:560px){
  html[data-theme=liquid-light] body[data-screen=play] .a-side{top:calc(var(--a-header-h) + 18px);border-radius:22px 0 0 22px!important}
  html[data-theme=liquid-light] .a-header{inset:6px 8px auto 8px;border-radius:16px}
}

/* Kết quả ván (t05): hai nút dưới banner thành kính viên thuốc ở theme sáng. */
html[data-theme=liquid-light] #result-actions button{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.62)) !important;border:1px solid var(--lg-rim);border-radius:999px;color:var(--lg-ink);text-shadow:none;filter:none;font:650 16px 'Kylam Inter','Inter',sans-serif;padding:0 22px;box-shadow:var(--lg-shadow);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur)}
html[data-theme=liquid-light] #result-actions #result-new{background:linear-gradient(180deg,#2f8f72,#1d6a54) !important;color:#fff;border-color:rgba(255,255,255,.5)}

/* Desktop: không có bottom menu. */
@media (min-width:1024px){.a-menu-handle,.a-menu-scrim{display:none!important}}
html[data-theme=jade-dark] .a-menu-handle,html[data-theme=jade-dark] .a-menu-scrim{display:none!important}

/* Cách chơi: mini-bàn minh họa (nước đi tính từ luật thật) — hai theme. */
.a-help-fig{margin:14px 0 0;display:grid;gap:8px;justify-items:center}
.a-help-board{width:min(100%,260px);height:auto}
.a-help-board .hb-bg{fill:#e9d9a8;stroke:#8a6a2a;stroke-width:2}
.a-help-board .hb-lines line{stroke:#5b4520;stroke-width:1}
.a-help-board .hb-river{font:600 13px 'Noto Serif SC','Songti SC',serif;fill:#6b5326;text-anchor:middle}
.a-help-board .hb-piece circle{fill:#f6ecce;stroke:#b8924a;stroke-width:1.5}
.a-help-board .hb-piece text{font:600 14px 'Noto Serif SC','Songti SC',serif;text-anchor:middle}
.a-help-board .hb-piece.red text{fill:#b4221c}.a-help-board .hb-piece.blue text{fill:#143a30}
.a-help-board .hb-piece.focus circle{stroke:#23735b;stroke-width:3}
.a-help-board .hb-dot{fill:#23735b;opacity:.85}
.a-help-board .hb-cap{fill:none;stroke:#c23b2e;stroke-width:3}
.a-help-fig figcaption{font-size:13px;color:var(--a-muted);text-align:center;max-width:36em}
html[data-theme=liquid-light] #help-dialog{width:min(900px,calc(100vw - 24px))}
@media (min-width:1024px){html[data-theme=liquid-light] .a-help{grid-template-columns:minmax(220px,280px) 1fr}}

/* Trang chủ sáng: studio ngọc trắng, giữ kính sữa và góc cận 3D. */
html[data-theme=liquid-light] body[data-screen=home]{background:radial-gradient(ellipse at 72% 28%,#fbf9f2,#e7ede7 60%,#d5e0d7)}
html[data-theme=liquid-light] .a-home .a-tiles{grid-template-columns:1fr}
html[data-theme=liquid-light] .a-home .a-tile{flex-direction:row;align-items:center;min-height:76px}
html[data-theme=liquid-light] .a-home .a-tile .a-art{width:48px;height:48px}
html[data-theme=liquid-light] .a-tabbar{grid-template-columns:repeat(3,minmax(0,1fr))}


/* Xếp thế để chơi (chủ dự án 2026-11-01): khung nổi kính sáng. */
html[data-theme=liquid-light] .a-setup-panel{background:var(--lg-glass-2);border:1px solid var(--lg-rim);color:var(--lg-ink);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);border-radius:24px;box-shadow:0 18px 50px rgba(24,61,52,.18)}
html[data-theme=liquid-light] .a-setup-panel h2{color:var(--lg-ink)}
html[data-theme=liquid-light] .a-setup-fen input{background:var(--lg-glass-2);border-color:var(--lg-line);color:var(--lg-ink)}
html[data-theme=liquid-light] .a-setup-fen span{color:var(--lg-muted)}