/* Kỳ Đấu — theme đỏ đô / vàng kim trên nền tranh thủy mặc (chốt 2026-11-02).
   Đổi màu nhanh ở :root. Ảnh nền: /img/bg-ink.jpg, độ tối lớp phủ: --overlay. */
/* UTM Netmuc KT (Michael Đinh Kiên, "Free for everyone") for "KỲ ĐẤU" and every h1/h2/h3. */
@font-face{font-family:'UTM Netmuc KT';src:url(/fonts/utm-netmuc-kt.woff2) format('woff2'),url(/fonts/utm-netmuc-kt.ttf) format('truetype');font-display:swap}
:root{
  --display:'UTM Netmuc KT','Noto Serif',Georgia,serif;
  --bg:#1a0a0c; --panel:#2a0d12; --panel-2:#1f090d; --panel-glass:rgba(42,13,18,.72);
  --line:#5a3a22; --line-2:#6a4a2a; --line-soft:#3e2016;
  --gold:#e8c66a; --gold-btn:#d9ad4c; --gold-line:#c9a24a; --gold-dark:#8a6a2a;
  --cream:#f4e9d8; --cream-2:#e9d9c0; --muted:#c9b08a; --muted-2:#d6c3a4;
  --red:#b3121f; --black:#1d2a4a; --header:rgba(56,4,7,.72);
  --overlay:rgba(24,8,10,.72); --panel-soft:rgba(44,8,10,.55);
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Noto Serif',Georgia,serif; --brush:'Splash','Noto Serif',cursive;
  --radius:16px; --shadow:0 18px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:var(--font);color:var(--cream);background:var(--bg);line-height:1.5}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{z-index:-2;background:url(/img/bg-ink.jpg) center 40%/cover no-repeat}
body::after{z-index:-2;background:var(--overlay)}
/* Falling leaves and petals (fx.js) sit between the background and the page. */
.kd-fx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
a{color:var(--gold);text-decoration:none}
a:hover{color:#fff1c4}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--gold);margin:0;letter-spacing:.3px}
:focus-visible{outline:2px solid var(--gold-btn);outline-offset:2px}
.container{max-width:1320px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border-radius:10px;border:1px solid transparent;font:600 15px var(--font);cursor:pointer;color:var(--cream);background:transparent;text-align:center}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-gold{background:var(--gold-btn);color:#3a0608;font-weight:700}
.btn-gold:hover{background:#e6bd5e;color:#3a0608}
.btn-outline{border-color:var(--gold-line);color:var(--cream)}
.btn-outline:hover{background:rgba(201,162,74,.12);color:#fff1c4}
.btn-dark{background:var(--panel-2);border-color:var(--line);color:var(--gold)}
.btn-danger{background:#4a1016;border-color:#8a2a2a;color:#ffd6cc}
.btn-lg{min-height:52px;padding:0 28px;font-size:17px}
.btn-block{width:100%}
/* Big "Chơi" button: gold face, dark-red edge underneath. */
.btn-play{min-height:58px;border-radius:14px;background:linear-gradient(#f0dcae,var(--gold-btn));border-color:#fff1c4;color:#3a0608;font-weight:800;font-size:19px;letter-spacing:.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 #8a2a2a,0 12px 20px rgba(0,0,0,.4)}
.btn-play:hover{color:#3a0608;filter:brightness(1.06)}
.btn-play:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #8a2a2a,0 6px 12px rgba(0,0,0,.4)}
.pill-link{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:rgba(90,74,56,.55);border:1px solid #7a6a52;color:#f1e6d2;font-weight:600;font-size:14px;cursor:pointer;font-family:var(--font)}
.pill-link:hover{color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--header);border-bottom:1px solid var(--gold-dark);backdrop-filter:blur(6px)}
.site-header .container{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;color:var(--cream)}
.brand img{width:auto;height:46px;display:block}
.about .brand img{height:40px}
.brand-name{display:flex;flex-direction:column;line-height:1.1}
.brand-name b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--gold);letter-spacing:.5px}
.brand-name small{font-size:12px;color:#e9cfa8}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;flex:1 1 420px;margin:0 auto}
.nav a{padding:12px 14px;font-weight:600;font-size:15px;color:var(--cream)}
.nav a[aria-current="page"]{color:#fff1c4;box-shadow:inset 0 -2px 0 var(--gold-btn)}
.nav a:hover{color:#fff1c4}
.auth-area{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.auth-area .user-label{font-size:14px;color:var(--gold)}

/* ---------- Footer ---------- */
.site-footer{margin-top:24px;background:rgba(18,5,7,.85);border-top:1px solid #4a2a1c}
.footer-cols{display:flex;flex-wrap:wrap;gap:40px;padding:40px 0}
.footer-cols>div{flex:1 1 160px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer-cols .about{flex:1 1 280px}
.footer-cols strong{color:#fff1c4}
.footer-bar{border-top:1px solid #2e1510}
.footer-bar .container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}
.footer-bar nav{display:flex;flex-wrap:wrap;column-gap:24px;font-size:14px}
.footer-bar nav a{padding:12px 0}
.footer-bar span{font-size:13px;color:#a8927a}

/* ---------- Cards / sections ---------- */
.section{padding:32px 0}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
.section-head h2{font-size:34px}
/* Ink brush stroke behind page and section titles. */
.page-hero h1,.section-head h2{display:inline-block;padding:.22em 1em .32em;
  background:url(/img/screen-title.png) center center/100% 100% no-repeat;
  background:image-set(url(/img/screen-title.webp) 1x type("image/webp"),url(/img/screen-title.png) 1x type("image/png")) center center/100% 100% no-repeat}
.card{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:24px;box-shadow:var(--shadow)}
.card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid #4a2a1c}
.card-head h2{font-size:26px}
.badge-live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#4a1016;border:1px solid #8a2a2a;font-size:12px;font-weight:700;color:#ffb4a8}
.badge-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px rgba(255,77,61,.25);animation:kd-live 1.2s ease-in-out infinite}
@keyframes kd-live{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,77,61,.7)}50%{opacity:.35;box-shadow:0 0 0 6px rgba(255,77,61,0)}}
/* Checkmate: the board jumps and shakes. */
@keyframes kd-shake{0%,100%{transform:none}8%{transform:translateY(-14px) scale(1.02)}16%,36%,56%,76%{transform:translateX(-9px) rotate(-.8deg)}26%,46%,66%{transform:translateX(9px) rotate(.8deg)}86%{transform:translateX(-4px)}94%{transform:translateX(3px)}}
.board-3d.shake{animation:kd-shake .95s cubic-bezier(.36,.07,.19,.97)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{min-height:40px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--cream);font:600 14px var(--font);cursor:pointer}
.tab[aria-selected="true"]{background:var(--gold-btn);border-color:var(--gold-btn);color:#3a0608}
.empty{padding:14px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:14px;text-align:center}

/* ---------- 3D piece (shared) ---------- */
.pc{border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:800;line-height:1;background:radial-gradient(circle at 35% 30%,#fffaf0,#f3e2bd 45%,#d8bb84);box-shadow:inset 0 0 0 3px #f0dcae,inset 0 0 0 4.5px currentColor,0 4px 0 #8f6a3a,0 6px 8px rgba(0,0,0,.35);text-shadow:0 1px 0 rgba(255,255,255,.7);flex:none}
.pc.r{color:var(--red)} .pc.b{color:var(--black)}

/* ---------- Home: hero ---------- */
.hero{background:rgba(42,13,18,.45);border-bottom:1px solid #4a2a1c}
.hero .container{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px}
.eyebrow{align-self:flex-start;padding:6px 12px;border:1px solid var(--gold-dark);border-radius:999px;font-size:13px;color:var(--gold);font-weight:600;background:rgba(42,13,18,.6)}
.hero h1{font-size:clamp(36px,4.6vw,58px);line-height:1.15;font-weight:400}
.hero p.lead{margin:0;font-size:18px;line-height:1.6;color:var(--cream-2);max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.hero-stats{display:flex;flex-wrap:wrap;gap:32px;margin-top:12px}
.hero-stats div{display:flex;flex-direction:column;gap:2px}
.hero-stats b{font-family:var(--serif);font-size:26px;color:#fff1c4}
.hero-stats span{font-size:13px;color:var(--muted)}

/* Mode picker (Cờ tướng / Cờ úp) */
.mode-picker{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:20px;background:rgba(28,22,18,.85);border:1px solid #5a4a32;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.mode-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mode-card{position:relative;height:184px;padding:0;border-radius:16px;background:#1c1712;border:2px solid #3a3026;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.mode-card[aria-checked="true"]{border-color:var(--gold-btn);box-shadow:0 0 0 3px rgba(217,173,76,.25),0 0 24px rgba(217,173,76,.3)}
.mode-card .ink{position:absolute;left:50%;top:112px;width:170px;height:26px;margin-left:-85px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(6px)}
.mode-card .stack{position:absolute;left:50%;top:20px;width:150px;height:100px;margin-left:-75px}
.mode-card .disc{position:absolute;border-radius:50%}
.mode-card .disc.back{right:0;top:30px;width:86px;height:60px;background:radial-gradient(circle at 40% 35%,#fff2d6,#eccb92 60%,#d4a464);box-shadow:inset 0 0 0 4px #f3d9a8,inset 0 0 0 5.5px var(--ring),0 8px 0 #a8743c,0 9px 0 #7f5428,0 16px 14px rgba(0,0,0,.5)}
.mode-card .disc.front{left:0;top:0;width:108px;height:76px;background:var(--face);box-shadow:inset 0 0 0 5px #f3d9a8,inset 0 0 0 7px var(--ring),inset 0 -6px 10px rgba(140,90,40,.35),0 11px 0 #b07a40,0 12px 0 #845726,0 20px 18px rgba(0,0,0,.5);transform:rotate(-10deg);display:flex;align-items:center;justify-content:center;font:800 40px var(--serif);color:var(--red);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.mode-card[data-mode="xq"]{--ring:var(--red);--face:radial-gradient(circle at 40% 35%,#fff4dc,#f0d3a0 55%,#d9ab6a)}
.mode-card[data-mode="up"]{--ring:#c99a5a;--face:repeating-radial-gradient(circle at 50% 50%,#f6deb0 0 5px,#e7c28a 5px 8px)}
.mode-card .title{position:relative;margin-bottom:14px;font:400 34px/1 var(--display);color:var(--gold);text-shadow:0 2px 0 #3a0608,0 0 14px rgba(232,198,106,.3)}
.mode-card .soon{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:999px;background:#3a3026;color:#e9d9c0;font-size:11px;font-weight:700}
.mode-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* Game modes row */
.modes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.mode-tile{display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;color:var(--cream)}
.mode-tile .pc{width:64px;height:64px;font-size:30px}
.mode-tile b{font-family:var(--serif);font-size:22px;color:#fff1c4}
.mode-tile span{font-size:15px;line-height:1.55;color:var(--muted-2)}
.mode-tile em{margin-top:auto;font-style:normal;font-weight:700;color:var(--gold)}

/* Lobby + leaderboard */
.two-col{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}
.two-col>.card{flex:1 1 480px;min-width:0;display:flex;flex-direction:column}
.rows{flex:1;display:flex;flex-direction:column;gap:10px}
.match-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;background:var(--panel-2);border:1px solid #4a2a1c;border-radius:12px;color:var(--cream)}
.match-row .side{display:flex;align-items:center;gap:10px;min-width:0}
.match-row .side.right{flex-direction:row-reverse;text-align:right}
.match-row .side .pc{width:36px;height:36px;font-size:18px}
.match-row .name{display:flex;flex-direction:column;min-width:0}
.match-row .name b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-row .name small{color:var(--muted);font-size:12px}
.match-row .vs{display:flex;flex-direction:column;align-items:center;gap:2px}
.match-row .vs i{font:italic 800 15px var(--serif);color:var(--gold)}
.match-row .vs small{padding:2px 8px;border-radius:6px;background:#3a1a12;font-size:12px;color:var(--cream-2)}
.match-row .act{padding:8px 14px;border:1px solid var(--gold-line);border-radius:8px;font-size:13px;font-weight:700;color:var(--gold);background:transparent;cursor:pointer;font-family:var(--font)}
.rank-row{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line-soft)}
.rank-row .pos{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:#3e2016}
.rank-row:nth-child(1) .pos{background:#d9ad4c;color:#2a0608}
.rank-row:nth-child(2) .pos{background:#c9c2b4;color:#2a0608}
.rank-row:nth-child(3) .pos{background:#b07a4a;color:#2a0608}
.rank-row .who{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-row .elo{font-weight:700;color:var(--gold)}
.rank-row .wins{font-size:12px;color:var(--muted)}
.create-room{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.create-room select{flex:1 1 160px}

/* Puzzles */
.puzzle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:20px}
.puzzle-card{display:flex;flex-direction:column;gap:14px;padding:18px;background:var(--panel);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow)}
.puzzle-card header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.puzzle-card header b{font-family:var(--serif);font-size:18px;color:#fff1c4}
.level{flex:none;padding:3px 10px;border-radius:999px;color:#fff1c4;font-size:12px;font-weight:700;background:#2e6b3a}
.level.mid{background:#8a5a12}
.mini-board{position:relative;width:252px;height:280px;flex:none;align-self:center;border-radius:8px;background-color:#e3bd7d;background-image:linear-gradient(165deg,#f0d39a,#d4a462);box-shadow:inset 0 0 0 4px #c48f4c,0 6px 0 #7a4a1c,0 14px 20px rgba(0,0,0,.45)}
.mini-board svg{position:absolute;inset:0}
.mini-board .pc{position:absolute;width:24px;height:24px;font-size:13px;box-shadow:inset 0 0 0 1.5px #f0dcae,inset 0 0 0 2.5px currentColor,0 2px 0 #8f6a3a,0 3px 4px rgba(0,0,0,.35)}
.puzzle-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:var(--cream-2)}
.puzzle-meta b{color:var(--gold)}
.dot-red{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid #f1dfb8;margin-right:6px;vertical-align:-1px}

/* Learn + app CTA */
.learn-row{display:flex;flex-wrap:wrap;gap:20px}
.learn-card{flex:1 1 320px;min-width:0;padding:28px;border-radius:16px;background:#1d2238;border:1px solid #3a4266;display:flex;flex-direction:column;gap:10px}
.learn-card b{font-family:var(--serif);font-size:22px;color:#fff1c4}
.learn-card p{margin:0;color:#cdd3ea;font-size:15px;line-height:1.55}
.app-cta{display:flex;flex-wrap:wrap;align-items:center;gap:32px;padding:40px;border-radius:20px;background:#5e0b10;border:1px solid var(--gold-dark)}
.app-cta img{width:140px;height:140px;object-fit:contain}
.app-cta>div{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:10px}
.app-cta p{margin:0;color:#f1dcc0;line-height:1.6}
.store-btns{display:flex;flex-wrap:wrap;gap:12px}
.store-btn{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 20px 6px 16px;border-radius:12px;background:#120507;border:1px solid var(--gold-line);color:#fff1c4}
.store-btn span{display:flex;flex-direction:column;line-height:1.15}
.store-btn small{font-size:12px;color:var(--muted-2)}
.store-btn strong{font-size:17px}

/* ---------- Play page ---------- */
.play-main{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;padding-top:28px;padding-bottom:40px}
/* Player cards: icon + name + clock, the side on top of the board above it and the other below. */
.mf-side{width:100%;max-width:640px;display:flex;align-items:center;gap:12px;min-width:0;padding:8px 12px;border-radius:12px;background:rgba(42,13,18,.88);border:1px solid var(--line)}
.mf-side.active{border-color:var(--gold-btn);box-shadow:0 0 0 1px var(--gold-btn)}
.mf-avatar{width:42px;height:42px;flex:none;border-radius:50%;border:2px solid rgba(241,223,184,.6);box-shadow:0 3px 8px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font:800 20px var(--serif);color:#f6e7c4}
.mf-avatar.r{background:var(--red)} .mf-avatar.b{background:var(--black)}
.mf-side.active .mf-avatar{border-color:var(--gold-btn)}
.mf-name{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.mf-name b{font-size:16px;color:#fff1c4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-name small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mf-side.active .mf-name small{color:var(--gold)}
.clock{flex:none;margin-left:auto;padding:5px 12px;border-radius:9px;background:var(--panel-2);font:700 22px var(--serif);color:var(--muted);font-variant-numeric:tabular-nums}
.mf-side.active .clock{background:var(--gold-btn);color:#3a0608}
.mode-label{align-self:flex-start;font-size:13px;color:var(--cream-2)}
/* Board column order; flipped swaps the two cards so each sits on its own side of the board. */
#mfBlack{order:1} .board-scroll{order:2} #mfRed{order:3} .status-bar{order:4} .play-opts{order:5}
.play-main.flipped #mfRed{order:1} .play-main.flipped #mfBlack{order:3}
.board-col{flex:1 1 640px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.status-bar{width:100%;max-width:640px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-radius:10px;background:var(--panel);border:1px solid var(--gold-dark)}
.status-bar.alert{background:#7a1418}
.status-bar.over{background:#5e0b10}
.status-bar b{font-size:15px;color:#fff1c4}
.variant-tabs{width:100%;max-width:640px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
.variant-tabs .tab{border:0;min-height:44px;font-size:15px}
.mode-tabs{width:100%;max-width:640px;display:flex;flex-wrap:wrap;gap:6px}
.ai-level{width:100%;max-width:640px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ai-level span{font-size:14px;color:var(--muted-2);margin-right:4px}
.ai-level .tab{flex:1 1 80px}
.play-opts{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:14px}
.tab[aria-checked="true"]{background:var(--gold-btn);border-color:var(--gold-btn);color:#3a0608}
/* Cờ úp: a face-down piece is a plain wooden disc, no character and no side ring
   (face-down pieces never leave their starting point, so where it stands says whose it is). */
/* Layers, inside out: flat cream face, thin dark ring, light bevel edge, then the shiny wooden rim. */
.board .piece.hidden,.board .piece.hidden.selected{background:
  radial-gradient(circle,#f1e3c3 0,#e6d1a6 18.5px,#34324a 19px,#34324a 20.5px,rgba(255,244,215,.9) 21.5px,rgba(255,244,215,0) 24px),
  linear-gradient(150deg,#fff0cf 0%,#ecca8f 30%,#cf9f5e 62%,#9c6c34 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -3px 4px rgba(90,55,20,.45),0 4px 0 #9a7038,0 5px 0 #6e4a20,0 8px 12px rgba(0,0,0,.5)}
.mode-tabs .tab{flex:1 1 120px}
.board-scroll{width:100%;overflow-x:auto;display:flex;justify-content:center}
.board-3d{padding:12px 0 28px;perspective:1600px}
.board{position:relative;width:592px;height:656px;flex:none;border-radius:14px;background-color:#e3bd7d;background-image:repeating-linear-gradient(91deg,rgba(120,70,20,.07) 0 2px,transparent 2px 9px),repeating-linear-gradient(88deg,rgba(255,240,200,.12) 0 1px,transparent 1px 23px),linear-gradient(165deg,#f0d39a,#dcae6b 60%,#c8964f);box-shadow:inset 0 0 0 10px #c48f4c,inset 0 0 0 12px #8a5a26,inset 0 3px 6px rgba(255,255,255,.5),0 10px 0 #7a4a1c,0 14px 0 #5a3412,0 40px 60px rgba(0,0,0,.6);
  /* --s is set by board.js to fit narrow screens; the negative margins give the space back to the layout. */
  --s:1;transform:scale(var(--s)) rotateX(14deg);transform-origin:50% 0;margin:0 calc(296px * (var(--s) - 1)) calc(656px * (var(--s) - 1))}
.board.flat{transform:scale(var(--s))}
.board svg{position:absolute;left:0;top:0}
.board .piece{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;padding:0;border:0;font-size:28px;cursor:default;box-shadow:inset 0 0 0 4px #f0dcae,inset 0 0 0 5.5px currentColor,inset 0 -3px 5px rgba(120,80,30,.3),0 5px 0 #b38b52,0 6px 0 #7f5a2c,0 9px 12px rgba(0,0,0,.45);transition:transform .12s ease}
.board .piece.mine{cursor:pointer}
.board .piece.selected{transform:translateY(-4px);box-shadow:inset 0 0 0 4px #f0dcae,inset 0 0 0 5.5px currentColor,0 5px 0 #b38b52,0 14px 16px rgba(0,0,0,.45)}
/* Selected piece: a glowing arc spinning around it. */
.board .piece.selected::before{content:"";position:absolute;inset:-8px;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 45%,rgba(255,110,150,.15) 55%,#ff6d9a 85%,#fff 98%,transparent 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));filter:drop-shadow(0 0 4px rgba(255,90,140,.8));animation:kd-spin .9s linear infinite}
@keyframes kd-spin{to{transform:rotate(360deg)}}
.board .piece.last{box-shadow:inset 0 0 0 4px #f0dcae,inset 0 0 0 5.5px currentColor,0 5px 0 #b38b52,0 6px 0 #7f5a2c,0 0 0 3px #2ee05a,0 0 14px 3px rgba(46,224,90,.65)}
.board .piece.check{box-shadow:inset 0 0 0 4px #f0dcae,inset 0 0 0 5.5px currentColor,0 5px 0 #b38b52,0 0 0 4px #ff3b30,0 0 18px #ff3b30}
/* Last move: bright green corner brackets where the piece came from, a green glow round where it landed. */
.board .from-mark{position:absolute;width:60px;height:60px;margin:-30px 0 0 -30px;--g:#2ee05a;background:linear-gradient(var(--g),var(--g)) 0 0/16px 4px,linear-gradient(var(--g),var(--g)) 0 0/4px 16px,linear-gradient(var(--g),var(--g)) 100% 0/16px 4px,linear-gradient(var(--g),var(--g)) 100% 0/4px 16px,linear-gradient(var(--g),var(--g)) 0 100%/16px 4px,linear-gradient(var(--g),var(--g)) 0 100%/4px 16px,linear-gradient(var(--g),var(--g)) 100% 100%/16px 4px,linear-gradient(var(--g),var(--g)) 100% 100%/4px 16px;background-repeat:no-repeat;filter:drop-shadow(0 0 3px rgba(46,224,90,.9))}
.board .target{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* Where the selected piece can go: glowing orange dots; a glowing ring round a piece it can take. */
.board .target::after{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff6d0 0 25%,#ffb347 55%,#ff7a1a);box-shadow:0 0 6px 2px rgba(255,140,30,.85),0 0 14px 4px rgba(255,120,20,.45);animation:kd-glow 1.2s ease-in-out infinite alternate}
.board .target.capture{width:64px;height:64px;margin:-32px 0 0 -32px;border:3px solid #ff8a1e;box-shadow:0 0 10px 2px rgba(255,140,30,.85),inset 0 0 10px rgba(255,140,30,.6);animation:kd-glow 1.2s ease-in-out infinite alternate}
@keyframes kd-glow{from{opacity:.75}to{opacity:1}}
.board .target.capture::after{display:none}
.side-col{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:20px}
.side-col .card{padding:20px}
.side-col h2{font-size:22px;margin-bottom:12px}
.moves{display:flex;flex-direction:column;max-height:300px;min-height:60px;overflow-y:auto}
.move-row{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center;padding:4px 8px;border-bottom:1px solid var(--line-soft);font-size:15px}
.move-row span{color:var(--muted)}
.move-row button{min-height:34px;text-align:left;padding:0 8px;border:0;border-radius:6px;background:transparent;font:600 15px var(--font);cursor:pointer}
.move-row button.r{color:#ff9a8a} .move-row button.b{color:#cdd3ea}
.move-row button[aria-current="true"]{background:#5a3a22}
.ctrl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.nav-btns{display:flex;gap:8px;margin-top:8px}
.nav-btns .btn{flex:1;padding:0}
.chat{display:flex;flex-direction:column;gap:6px;height:150px;overflow-y:auto;font-size:14px;line-height:1.5;padding:8px;border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2)}
.chat .sys{color:var(--muted)}
.room-btns{display:flex;gap:6px}
.room-btns .btn{flex:1 1 auto;min-width:0;min-height:38px;padding:0 8px;font-size:13px;white-space:nowrap}
.cap-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft)}
.cap-row:first-of-type{border-top:0;padding-top:0}
.cap-label{flex:none;width:62px;padding-top:6px;font-size:13px;color:var(--muted-2)}
.cap-list{display:flex;flex-wrap:wrap;gap:6px;min-height:30px;align-items:center}
.cap-list .pc{width:30px;height:30px;font-size:16px;box-shadow:inset 0 0 0 2px #f0dcae,inset 0 0 0 3px currentColor,0 2px 0 #8f6a3a}
.cap-list .muted{font-size:13px}
.room-info{font-size:14px;color:var(--muted-2);margin:0 0 10px}
.room-info b{color:#fff1c4}
.puzzle-pick{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Puzzle library ---------- */
.pz-head{width:100%;max-width:640px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pz-num{font:700 26px var(--serif);color:var(--gold)}
.level.hard{background:#8a1f2a}
.pz-ctrl{width:100%;max-width:640px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pz-name{font-family:var(--serif);font-size:18px;color:#fff1c4}
.pz-timer{margin-left:auto;padding:6px 12px;border-radius:10px;background:var(--gold-btn);color:#3a0608;font:700 22px var(--serif);font-variant-numeric:tabular-nums}
.pz-timer.low{background:#b3121f;color:#fff1c4}
.pz-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pz-card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--shadow);color:var(--cream)}
.pz-card:hover{border-color:var(--gold-line);color:var(--cream)}
.pz-card.current{border:2px solid var(--gold-btn);box-shadow:0 0 0 3px rgba(217,173,76,.2),var(--shadow)}
.pz-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pz-card-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.pz-card-title small{font-size:12px;color:var(--muted)}
.pz-card-title b{font-family:var(--serif);font-size:18px;color:#fff1c4}
.pz-card footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--muted-2)}
.pz-solved{padding:2px 10px;border-radius:999px;background:#3a2f0a;color:var(--gold);font-weight:700}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:24px}
.pager-btn{min-width:44px;min-height:44px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--cream);font:600 15px var(--font);cursor:pointer}
.pager-btn[aria-current="page"]{background:var(--gold-btn);border-color:var(--gold-btn);color:#3a0608}
.pager-btn:disabled{opacity:.4;cursor:not-allowed}
.pager-gap{padding:0 4px;color:var(--muted)}
.pager-info{flex-basis:100%;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:1060px){.pz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;max-height:360px;overflow-y:auto;padding:2px}
.pz-tile{min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--cream);font:600 14px var(--font);cursor:pointer;position:relative}
.pz-tile.lv1{border-left:3px solid #4caf50}
.pz-tile.lv2{border-left:3px solid #d99a2b}
.pz-tile.lv3{border-left:3px solid #e0475a}
.pz-tile.solved{background:#3a2f0a;color:var(--gold)}
.pz-tile.solved::after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.pz-tile[aria-current="true"]{outline:2px solid var(--gold-btn);outline-offset:1px}

/* ---------- Forms / auth ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600}
input,select,textarea{width:100%;min-height:46px;padding:0 14px;border-radius:10px;border:1px solid #7a5a32;background:rgba(20,6,8,.7);color:var(--cream);font:400 15px var(--font)}
textarea{padding:12px 14px;line-height:1.55;resize:vertical;min-height:140px}
select{background:var(--panel-2)}
.check{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-size:14px;line-height:1.5;cursor:pointer}
.check input{width:18px;height:18px;min-height:0;margin-top:2px;flex:none;accent-color:var(--gold-btn)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:48px 16px;min-height:calc(100vh - 200px)}
.auth-card{width:100%;max-width:460px;padding:36px;border-radius:20px;background:var(--panel-glass);backdrop-filter:blur(14px);border:1px solid rgba(201,162,74,.55);box-shadow:0 30px 80px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:18px}
.auth-card .logo{width:96px;height:96px;align-self:center;object-fit:contain}
.auth-card h1{font-size:30px;text-align:center}
.auth-card .sub{margin:0;text-align:center;font-size:15px;color:#e0ccae;line-height:1.55}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.form-msg{margin:0;padding:10px 12px;border-radius:10px;font-size:14px}
.form-msg.err{background:#4a1016;border:1px solid #8a2a2a;color:#ffd6cc}
.form-msg.ok{background:rgba(46,125,50,.2);border:1px solid #6fbf73;color:#cdeccf}
.or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
/* Google sign-in: white button with the multicolour G, as Google's branding asks. */
.btn-google{background:#fff;color:#1f1f1f;border-color:#dadce0;font-weight:600}
.btn-google:hover{background:#f5f5f5;color:#1f1f1f}
.btn-google[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.center{text-align:center;margin:0;font-size:14px;color:#e0ccae}

/* ---------- Static pages ---------- */
.page-hero{padding:56px 0 24px}
.page-hero h1{font-size:clamp(32px,4vw,48px);font-weight:800}
.page-hero p{margin:12px 0 0;font-size:18px;line-height:1.6;color:var(--cream-2);max-width:680px}
.app-hero .container{display:flex;flex-wrap:wrap;align-items:center;gap:56px;padding-top:56px;padding-bottom:40px}
.phone{position:relative;width:310px;height:630px;flex:none;border-radius:48px;background:#0d0405;border:2px solid var(--gold-dark);box-shadow:0 0 0 8px #241014,0 40px 80px rgba(0,0,0,.6);padding:14px}
.phone-screen{width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column}
.qr{display:flex;align-items:center;gap:18px;padding:16px;border-radius:14px;background:var(--panel-glass);border:1px solid var(--line);align-self:flex-start;max-width:100%}
.qr-box{width:112px;height:112px;flex:none;border-radius:8px;background:#f6e7c4;color:#3a0608;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:700}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.feature{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.feature .pc{width:52px;height:52px;font-size:24px}
.feature b{font-family:var(--serif);font-size:20px;color:#fff1c4}
.feature p{margin:0;font-size:15px;line-height:1.55;color:var(--muted-2)}
.kv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;font-size:15px}
.kv span:nth-child(odd){color:var(--muted)}
.kv span:nth-child(even){font-weight:600}
details{border-bottom:1px solid var(--line-soft);padding:6px 0}
details:last-child{border-bottom:0}
summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:16px}
details p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--muted-2)}
.channel{display:flex;gap:14px;align-items:flex-start}
.channel .ic{width:44px;height:44px;flex:none;border-radius:12px;background:#4a1016;border:1px solid var(--gold-dark);color:var(--gold);display:flex;align-items:center;justify-content:center}
.channel .ic.light{background:#fff6e6}
.channel div{display:flex;flex-direction:column;gap:2px;min-width:0}
.channel small{font-size:13px;color:var(--muted)}
.channel b{font-weight:600;font-size:16px;overflow-wrap:anywhere}
/* Guides */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--muted);margin-bottom:10px}
.crumbs a{padding:4px 0}
.guide-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.guide-card{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:18px;background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--shadow);color:var(--cream)}
.guide-card:hover{border-color:var(--gold-line);color:var(--cream)}
.guide-card .pcs{display:flex;gap:8px}
.guide-card .pcs .pc{width:52px;height:52px;font-size:24px}
.guide-card .pcs .pc.down{background:repeating-radial-gradient(circle at 50% 50%,#f6deb0 0 4px,#e7c28a 4px 7px)}
.guide-card b{font-family:var(--display);font-weight:400;font-size:28px;color:var(--gold)}
.guide-card p{margin:0;color:var(--muted-2);line-height:1.6}
.guide-card em{font-style:normal;font-weight:700;color:var(--gold);margin-top:auto}
.quick-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.quick-links a{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;background:var(--panel-glass);border:1px solid var(--line);color:var(--cream)}
.quick-links a b{color:#fff1c4}
.quick-links a span{font-size:13px;color:var(--muted)}
.piece-table{width:100%;border-collapse:collapse;font-size:15px}
.piece-table th,.piece-table td{padding:10px 8px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.piece-table th{color:var(--gold);font-weight:700}
.piece-table td .pc{width:34px;height:34px;font-size:17px;display:inline-flex}
.table-wrap{overflow-x:auto}
.steps{counter-reset:s;list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{counter-increment:s;position:relative;padding:12px 14px 12px 52px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-soft)}
.steps li::before{content:counter(s);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--gold-btn);color:#3a0608;font-weight:800;display:flex;align-items:center;justify-content:center}
.note{padding:14px 16px;border-radius:12px;background:#3a2f0a;border:1px solid var(--gold-dark);color:#fef3c7}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.toc a{padding:8px 12px;border-radius:999px;border:1px solid var(--line);font-size:14px}
@media (max-width:860px){.guide-cards{grid-template-columns:1fr}.quick-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prose{max-width:1000px;margin:16px auto 32px;padding:24px 28px;border-radius:20px;background:var(--panel-soft);border:1px solid var(--line-soft)}
.prose h2{font-size:24px;margin:28px 0 10px}
@media (max-width:720px){.prose{padding:20px 16px}}
.prose p,.prose li{color:var(--cream-2);line-height:1.7}

/* ---------- Mobile (approved design 2026-11-02) ---------- */
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;color:var(--gold);align-items:center;justify-content:center;cursor:pointer;border-radius:8px}
.tabbar{display:none}
@media (max-width:720px){
  .container{padding:0 16px}
  /* Header: logo, sign-in, menu button; links open as a panel. */
  .site-header .container{flex-wrap:wrap;gap:8px;padding-top:6px;padding-bottom:6px}
  .brand img{height:36px}
  .brand-name b{font-size:19px}
  .brand-name small{display:none}
  .menu-btn{display:flex}
  .nav{display:none;order:3;flex:1 1 100%;flex-direction:column;margin:0;padding:4px 0 8px;border-top:1px solid rgba(138,106,42,.5)}
  .site-header.open .nav{display:flex}
  .nav a{padding:12px 4px}
  .auth-area{margin-left:auto;gap:6px}
  .auth-area .user-label{display:none}
  .auth-area a[href="/register.html"]{display:none}
  .auth-area .btn{min-height:40px;padding:0 14px;font-size:14px}
  .auth-area a[href="/login.html"]{background:var(--gold-btn);border-color:var(--gold-btn);color:#3a0608}
  /* Bottom tab bar */
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(26,8,10,.97);border-top:1px solid var(--line)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--muted)}
  .tabbar a[aria-current="page"]{color:var(--gold);font-weight:700}
  body.has-tabbar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .site-footer{margin-top:8px}
  .footer-cols{gap:20px;padding:24px 0}
  .footer-cols>div{flex:1 1 140px}

  /* Home */
  .section{padding:20px 0}
  .section-head{margin-bottom:14px}
  .section-head h2{font-size:24px}
  .hero .container{gap:16px;padding-top:20px;padding-bottom:20px}
  .hero-copy{gap:10px}
  .hero h1{font-size:27px;line-height:1.15}
  .hero p.lead{font-size:15px}
  .hero-cta{display:none}
  .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px;text-align:center}
  .hero-stats div{padding:10px 4px;border-radius:12px;background:var(--panel-glass);border:1px solid var(--line)}
  .hero-stats b{font-size:20px}
  .hero-stats span{font-size:11px}
  .mode-picker{flex-basis:100%;padding:14px;gap:12px;border-radius:18px}
  .mode-cards{gap:10px}
  .mode-card{height:128px}
  .mode-card .stack{transform:scale(.7);transform-origin:50% 0;top:12px}
  .mode-card .ink{top:78px;width:116px;margin-left:-58px;height:18px}
  .mode-card .title{font-size:25px;margin-bottom:10px}
  .btn-play{min-height:52px;font-size:17px}
  .mode-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .mode-links .pill-link{justify-content:center;padding:0 6px;font-size:13px}
  .modes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mode-tile{padding:14px;gap:8px}
  .mode-tile .pc{width:44px;height:44px;font-size:21px}
  .mode-tile b{font-size:17px}
  .mode-tile span{font-size:13px}
  .two-col{gap:16px}
  .two-col>.card{flex-basis:100%}
  .card{padding:14px;border-radius:16px}
  .card-head h2{font-size:20px}
  .match-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;padding:8px 10px}
  .match-row .act{grid-column:1/-1;text-align:center}
  .puzzle-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px}
  .puzzle-card{flex:0 0 288px;scroll-snap-align:start}
  .learn-row{gap:12px}
  .learn-card{padding:18px}
  .app-cta{padding:20px;gap:16px;text-align:center;justify-content:center}
  .app-cta img{width:96px;height:96px}

  /* Game screen: player A, board, player B, then options (board column flattened into the page). */
  .play-main{gap:10px;padding-top:12px;padding-bottom:24px}
  .board-col{display:contents}
  .side-col{order:6}
  .mf-side,.board-scroll,.status-bar,.play-opts{flex:1 1 100%;max-width:none}
  .mf-side{padding:8px 10px;gap:10px}
  .mf-avatar{width:38px;height:38px;font-size:18px}
  .mf-name b{font-size:14px}
  .clock{font-size:20px;padding:6px 10px}
  .play-opts{gap:10px;padding:12px;border-radius:16px;background:var(--panel-glass);border:1px solid var(--line)}
  .mode-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .ai-level span{flex:1 1 100%}
  .status-bar{padding:8px 12px}
  .status-bar b{font-size:14px}
  .board-3d{padding:4px 0 12px}
  .side-col{gap:12px}
  .side-col .card{padding:14px}

  /* Puzzle library */
  .page-hero{padding:20px 0 4px}
  .page-hero h1{font-size:28px}
  .page-hero h1,.section-head h2{padding:.2em .8em .3em}
  .page-hero p{font-size:15px}
  .pz-ctrl .btn{flex:1 1 40%}
  .pz-cards{grid-template-columns:minmax(0,1fr);gap:14px}
  .pz-name{font-size:16px;flex-basis:100%;order:3}
  .pz-timer{font-size:20px}

  /* Forms: 16px text stops iPhone zooming in. */
  input,select,textarea{font-size:16px;min-height:50px}
  .auth-main{padding:20px 16px;min-height:0}
  .auth-card{padding:24px 20px;border-radius:22px}
  .auth-card .logo{width:88px;height:88px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.board .piece{transition:none}.badge-live::before{animation:none}.board-3d.shake{animation-duration:.3s}.board .piece.selected::before{animation-duration:3s}.board .target::after,.board .target.capture{animation:none}}

/* Headings that replaced <b> labels on the home page (SEO / AI SEO): same look as before */
.mode-tile h3,.learn-card h3,.puzzle-card header h3{margin:0;font-family:var(--serif);font-weight:700;line-height:1.3;color:#fff1c4}
.mode-tile h3,.learn-card h3{font-size:22px}
.puzzle-card header h3{font-size:18px}
@media (max-width:720px){.mode-tile h3{font-size:17px}.hero-stats span{font-size:13px}}