:root{
  color-scheme:dark;
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Noto Sans CJK SC",system-ui,sans-serif;
  --bg:#202123;--bg-deep:#17181a;--surface:#2a2b2e;--surface-2:#333438;--surface-3:#3a3b3f;
  --text:#f4f4f2;--muted:#a6a6a6;--line:#3b3c40;--primary:#61a84b;--primary-2:#77bd60;
  --ai:#4f8fe8;--theory:#d59a35;--review:#8e68cf;--training:#4aaa79;--danger:#ef7771;--wood:#c99a5d;
}
*{box-sizing:border-box}
html{background:var(--bg-deep)}
body{margin:0;background:var(--bg);color:var(--text);min-height:100dvh;-webkit-font-smoothing:antialiased}
button,select{font:inherit;min-height:44px;border-radius:10px;border:1px solid #4a4b4f;background:var(--surface-2);color:var(--text);padding:9px 14px;max-width:100%;cursor:pointer}
button:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 75%,white);outline-offset:3px}
button:disabled{opacity:.42;cursor:default}
button.primary{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:750;width:100%;box-shadow:0 8px 22px #0002}
button.primary:active{background:var(--primary-2)}
.danger,.error{color:var(--danger)}
[hidden]{display:none!important}
.app{width:100%;max-width:720px;margin:auto;min-height:100dvh;background:var(--bg);position:relative}
.appbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:62px;padding:8px 16px;border-bottom:1px solid #343539;background:#232426f2;backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}
.appbar strong{font-size:18px;letter-spacing:.01em;text-align:center;white-space:nowrap}
.appbar .back-button{justify-self:start;display:flex;align-items:center;gap:4px;padding:4px 4px;background:transparent;border:0;color:#e7e7e5}
.appbar .back-button span:first-child{font-size:30px;line-height:1;margin-top:-2px}
.appbar .back-button:disabled{visibility:hidden}
.badge{display:inline-flex;align-items:center;justify-content:center;font-size:10px;white-space:nowrap;border:1px solid #55565a;border-radius:999px;padding:3px 8px;color:#c7c7c5;letter-spacing:.05em}
.preview-badge{justify-self:end;color:#b9b9b7}
main#pages{padding:18px 18px calc(100px + env(safe-area-inset-bottom));overflow-wrap:anywhere;min-height:calc(100dvh - 62px)}
h1,h2,h3,p{margin-top:0}
h1{font-size:31px;line-height:1.2;letter-spacing:-.035em;margin:7px 0 10px;font-weight:760}
h2{font-size:20px;line-height:1.3;margin:0 0 8px;font-weight:730}
h3{font-size:17px;line-height:1.3;margin:0 0 4px;font-weight:700}
p{margin:6px 0 14px;color:var(--muted)}
small,.muted{color:var(--muted);font-size:13px}.eyebrow,.section-kicker{font-size:11px;letter-spacing:.16em;color:#85aef0;font-weight:700}.theory{color:#e0a84f}.review-tone{color:#a989e0}.training-tone{color:#70c592}
.intro{margin:8px 0 20px}.compact-intro{margin:4px 2px 18px}.compact-intro p{margin-bottom:0}

/* Home: compact, app-like visual rhythm inspired by professional board apps without copying their feature wall. */
.home-page{padding-top:0}.home-brand{display:flex;gap:14px;align-items:flex-start;margin:4px 2px 18px}.brand-mark{width:40px;height:40px;border-radius:11px;background:#302f35;display:grid;grid-template-columns:repeat(2,7px);grid-template-rows:repeat(2,7px);gap:4px;place-content:center;flex:0 0 auto;border:1px solid #424247;box-shadow:inset 0 0 0 1px #ffffff05}.brand-mark i{display:block;background:#9d70d8;border-radius:1px}.home-brand h1{font-size:30px;margin-bottom:0}
.hero-card{position:relative;min-height:220px;border-radius:18px;background:linear-gradient(135deg,#36383c 0%,#2b2c2f 58%,#27282a 100%);border:1px solid #434448;overflow:hidden;margin-bottom:24px;box-shadow:0 14px 32px #0002}.hero-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#20212300 50%,#20212322);pointer-events:none}.hero-copy{position:relative;z-index:2;padding:24px;width:64%}.hero-copy h2{font-size:25px;margin:5px 0 8px}.hero-copy p{font-size:14px;margin-bottom:18px}.hero-action{max-width:210px;display:flex;align-items:center;justify-content:space-between;font-size:16px}.hero-action span:last-child{font-size:26px;line-height:.8}
.hero-board{position:absolute;width:185px;height:185px;right:-35px;top:18px;border-radius:18px;transform:rotate(-5deg);background-color:#ca9a5e;background-image:linear-gradient(#73562f55 1px,transparent 1px),linear-gradient(90deg,#73562f55 1px,transparent 1px);background-size:23px 23px;background-position:11px 11px;box-shadow:-18px 18px 32px #0004;border:1px solid #d3aa73}.stone{position:absolute;width:21px;height:21px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 4px #0005}.stone.black{background:radial-gradient(circle at 35% 30%,#4d4d4d,#111 62%)}.stone.white{background:radial-gradient(circle at 35% 30%,#fff,#d9d9d2 68%)}.s1{left:46px;top:58px}.s2{left:69px;top:81px}.s3{left:92px;top:81px}.s4{left:92px;top:104px}.s5{left:115px;top:104px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 11px}.section-head h2{font-size:18px;margin:0}.section-head span{font-size:12px;color:#858585}.section-head.compact{margin-top:24px}
.action-list{border-radius:16px;overflow:hidden;border:1px solid #3c3d41;background:var(--surface)}.action-row{display:grid;grid-template-columns:48px 1fr 40px;align-items:center;gap:13px;padding:14px 13px;background:var(--surface);position:relative}.action-row+.action-row:before{content:"";position:absolute;top:0;left:74px;right:0;border-top:1px solid #404145}.action-row.standalone{border:1px solid #3c3d41;border-radius:16px;margin-bottom:16px}.action-copy p{font-size:13px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:10px;font-size:24px;font-weight:700}.review-icon{background:#4b3b62;color:#b79be5}.training-icon{background:#2d5443;color:#73cf9a}.theory-icon{background:#62491f;color:#e6b557}.record-icon{background:#3a4d63;color:#8fbaf0}.row-action{border:0;background:transparent;font-size:28px;color:#96979a;padding:0;min-height:40px;width:40px}.learning-strip{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:5px;padding:14px 14px;border-radius:14px;border:1px solid #38393d;background:#252629;color:#c7c7c4;font-size:12px}.learning-strip span{display:flex;gap:4px;align-items:center;white-space:nowrap}.learning-strip b{color:#7eae6b;font-size:10px}.learning-strip i{text-align:center;color:#5f6063;font-style:normal}

/* Play / Setup */
.segment{display:grid;grid-template-columns:1fr 1fr;background:#292a2d;border:1px solid #3e3f43;border-radius:12px;padding:4px;margin-bottom:18px}.segment button{border:0;background:transparent;min-height:40px;border-radius:9px;color:#a8a8a8}.segment button.active{background:#3a3b3f;color:#fff;font-weight:700;box-shadow:0 2px 10px #0002}.opponent-card{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:20px;border-radius:16px;background:#313236;border:1px solid #44454a;margin-bottom:14px;box-shadow:0 12px 24px #0002}.player-tile{text-align:center}.player-tile strong,.player-tile span{display:block}.player-tile strong{font-size:16px;margin-top:9px}.player-tile span{font-size:12px;color:#919191}.avatar{width:74px;height:74px;margin:auto;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:22px;background:#e6e3dd;color:#232323}.human-avatar{font-size:34px}.ai-avatar{background:#31558a;color:#bcd7ff;border:1px solid #4774ae}.versus{font-weight:800;color:#d5d5d3;font-size:18px}.card,.settings-card,.feature-stage,.membership-card{background:var(--surface);border:1px solid #3c3d41;border-radius:16px;padding:18px;margin-bottom:14px}.compact-card{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}.compact-card p{margin-bottom:0}.compact-card button{width:auto;min-width:124px}.settings-card{padding:0;overflow:hidden}.setting-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px;margin:0!important;padding:16px 16px;border-bottom:1px solid #404145;font-weight:600}.setting-row>span:first-child{display:grid;gap:2px}.setting-row b{font-size:15px}.setting-row small{font-weight:400}.setting-row select{appearance:none;text-align:right;text-align-last:right;border:0;background:transparent;color:#ededeb;padding:6px 24px 6px 6px;min-height:36px;max-width:58%;font-weight:500;background-image:linear-gradient(45deg,transparent 50%,#999 50%),linear-gradient(135deg,#999 50%,transparent 50%);background-position:calc(100% - 10px) 15px,calc(100% - 6px) 15px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}.setting-note{padding:10px 16px 13px;margin:0;background:#252629;border-bottom:1px solid #404145;line-height:1.45}.settings-card .start-button{width:calc(100% - 28px);margin:16px 14px 14px;min-height:52px;font-size:17px}.settings-card .error{padding:0 16px;margin-top:-5px}

/* Board page keeps the board as the visual center. */
.game-page{padding-top:4px}.game-meta{display:flex;justify-content:space-between;font-size:13px;color:#b7b7b5;margin:0 2px 10px;gap:8px}.board-wrap{margin:0 -18px;background:var(--wood);overflow:hidden;border-top:1px solid #5b482f;border-bottom:1px solid #5b482f}#core{width:100%;aspect-ratio:1;border:0;display:block}.game-panel{margin:0 -18px;padding:13px 18px 14px;background:#292a2d;border-bottom:1px solid #3b3c40}.state{display:flex;align-items:center;gap:9px;color:#8fbaf0}.state p{margin:0;color:inherit;font-weight:600;font-size:14px}#feedback{margin:5px 0 10px;min-height:20px}.controls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.controls button{flex:1 1 auto;font-size:14px;padding:7px 12px;min-width:0}.game-controls{display:grid;grid-template-columns:repeat(3,1fr)}.game-controls button{background:#35363a}.result-card{margin-top:16px}.result-card h2{font-size:28px}

/* Research / review / training */
.feature-stage{text-align:center;padding:24px 20px}.feature-stage p{max-width:450px;margin:8px auto 18px}.feature-stage button+button{margin-top:10px}.stage-icon{width:62px;height:62px;margin:0 auto 14px;display:grid;place-items:center;border-radius:15px;background:#4b3b62;color:#b99ee6;font-size:31px}.board-poster{position:relative;aspect-ratio:1.25;border-radius:16px;overflow:hidden;margin-bottom:14px;background:#bf8f56;border:1px solid #d0a46c}.poster-grid{position:absolute;inset:16px;background-image:linear-gradient(#4e38248a 1px,transparent 1px),linear-gradient(90deg,#4e38248a 1px,transparent 1px);background-size:calc(100% / 10) calc(100% / 10);background-position:0 0}.poster-stone{position:absolute;width:26px;height:26px;border-radius:50%;box-shadow:0 2px 5px #0006}.poster-stone.black{background:radial-gradient(circle at 35% 30%,#4b4b4b,#101010 63%)}.poster-stone.white{background:radial-gradient(circle at 35% 30%,white,#d9d9d2 68%)}.p1{left:42%;top:44%}.p2{left:50%;top:52%}.p3{left:58%;top:52%}.p4{left:58%;top:60%}.training-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.training-grid article{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;padding:13px;border:1px solid #3d3e42;background:#2a2b2e;border-radius:13px}.training-grid article>span{grid-row:1/3;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:#335743;color:#7bd19f;font-weight:800}.training-grid b{font-size:14px}.training-grid small{font-size:11px}

/* My */
.profile-card{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:13px;margin:3px 0 22px}.profile-card h1{font-size:24px;margin:0 0 2px}.profile-card p{margin:0;font-size:13px}.profile-avatar{width:58px;height:58px;border-radius:16px;background:linear-gradient(145deg,#3d3350,#292b32);border:1px solid #51445f;display:grid;place-items:center;color:#bc98e6;font-size:26px;font-weight:800}.membership-pill{font-size:10px;letter-spacing:.08em;padding:5px 8px;border-radius:999px;background:#3b442f;color:#a9d289;border:1px solid #536443}.membership-card{display:grid;grid-template-columns:1fr 72px;gap:18px;align-items:center;background:linear-gradient(135deg,#302c37,#292a2e)}.membership-card p{margin-bottom:5px}.membership-orb{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#4e6384,#2d3950);color:#c9dcff;font-weight:800;border:1px solid #586b88}

/* Navigation */
#bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:720px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#252628f7;border-top:1px solid #414246;padding:6px 4px calc(7px + env(safe-area-inset-bottom));z-index:30;backdrop-filter:blur(18px)}
#bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;border:0;padding:4px 0;background:none;color:#a6a6a4;min-width:0;border-radius:9px;min-height:50px}
#bottom-nav .nav-icon{font-size:25px;height:27px;line-height:27px;font-weight:400}#bottom-nav .nav-label{font-size:11px}
#bottom-nav button[aria-current=page]{color:#e2b052;background:transparent}#bottom-nav button[aria-current=page] .nav-icon{transform:translateY(-1px);text-shadow:0 0 14px #e2b05233}

dialog{width:calc(100% - 32px);max-width:420px;border:1px solid #515256;background:#2a2b2e;color:var(--text);border-radius:16px;padding:22px;box-shadow:0 24px 70px #0009}dialog::backdrop{background:#0009}#save-status{font-size:13px;margin-bottom:0}

@media(min-width:700px){main#pages{padding:24px 38px 112px}.board-wrap,.game-panel{margin-left:0;margin-right:0;border-radius:14px}.game-panel{margin-top:10px}.home-brand h1{font-size:36px}.hero-card{min-height:250px}.hero-board{width:220px;height:220px;right:10px}.hero-copy{padding:30px}.hero-copy h2{font-size:29px}}
@media(max-width:430px){.hero-copy{width:67%;padding:21px}.hero-board{right:-52px}.hero-copy h2{font-size:23px}.home-brand h1{font-size:28px}.learning-strip{font-size:11px;gap:3px}.compact-card{grid-template-columns:1fr}.compact-card button{width:100%}.board-poster{aspect-ratio:1.15}}
@media(max-width:350px){.appbar{padding:7px 10px}.appbar strong{font-size:16px}.preview-badge{font-size:8px;padding:2px 6px}main#pages{padding-left:12px;padding-right:12px}.hero-copy{width:72%;padding:17px}.hero-board{right:-70px}.action-row{grid-template-columns:42px 1fr 34px;gap:10px;padding:12px 10px}.action-icon{width:40px;height:40px}.action-row+.action-row:before{left:62px}.learning-strip{padding:12px 8px}.learning-strip b{display:none}.board-wrap,.game-panel{margin-left:-12px;margin-right:-12px}.setting-row{padding:14px 12px}.setting-row select{max-width:60%}}
@media(prefers-reduced-motion:no-preference){button,.action-row,.hero-card{transition:background-color .15s ease,transform .15s ease}button:active{transform:scale(.985)}}
/* 2026-10-04 mobile polish v2 */
.header-spacer{justify-self:end;width:44px;height:1px}
.preview-badge{display:none!important}
.appbar strong{outline:none!important;border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;border-radius:0!important}
.appbar strong:focus,.appbar strong:focus-visible{outline:none!important}
.action-row{cursor:pointer}
.action-row:active{background:#303135}
body:has([data-page="game"]:not([hidden])) #bottom-nav{display:none}
body:has([data-page="game"]:not([hidden])) main#pages{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
body:has([data-page="game"]:not([hidden])) .appbar{background:#222326}
.game-panel{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
@media(max-width:430px){
 .appbar{min-height:58px;padding:7px 14px}
 .appbar strong{font-size:17px}
 main#pages{padding-top:14px}
 .home-brand{margin-bottom:15px}
 .hero-card{margin-bottom:20px}
 .section-head{margin-bottom:9px}
 .game-meta{margin-top:-2px}
 .game-controls{gap:7px}
}
#pages{display:flex;flex-direction:column}#shared-board-wrap{order:1}[data-page=game],#research-tools{order:2}.hero-board{background-image:none}.hero-board svg{display:block;width:100%;height:100%}#hint{width:auto;flex:1.25}.game-controls button{flex:1}.bottom-sheet{position:fixed;inset:auto 0 0;margin:0 auto;max-width:700px;width:100%;max-height:80dvh;overflow:auto;border-radius:20px 20px 0 0;padding:22px 18px calc(24px + env(safe-area-inset-bottom));border:1px solid #555057;background:#2a2b2e;color:#eee5dd}.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.sheet-actions{display:grid;gap:10px;margin:14px 0}.candidate-row{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;border-bottom:1px solid #474044;padding:14px 0}.candidate-row>span:first-child{color:#dfc17b;font-weight:800}.candidate-row small{display:block;color:#c3b9ab}.candidate-row button{font-size:13px}.candidate-metadata{font-size:12px;color:#b4b0b2;overflow-wrap:anywhere;margin-top:5px}#research-tools label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}#research-tools select{max-width:100%;min-width:0}#research-tools{margin-bottom:20px}#research-tools button{min-height:44px}#assist-status,#research-status{font-size:13px;overflow-wrap:anywhere}#shared-board-wrap .game-meta{gap:12px}#shared-board-wrap .board-wrap{margin-top:6px}

/* S3 post-game review */
#review-progress{width:100%;height:8px;margin-top:14px}
.review-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:18px;align-items:start}
.review-points{display:grid;gap:10px;margin-bottom:14px}
.review-point{width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:14px;border:1px solid var(--line,#d9d4ca);border-radius:14px;background:var(--surface,#2a2b2e)}
.review-point>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ede6d6;color:#202123;font-weight:800}
.review-point div{display:grid;gap:4px;min-width:0}.review-point strong,.review-point small{display:block}.review-point.active{border-color:#315f59;box-shadow:0 0 0 1px #315f59 inset}
.review-detail{margin-top:0}.review-board-wrap{position:sticky;top:72px;padding:10px;border-radius:18px;background:#f2ede3}.review-board-wrap svg{display:block;width:100%;height:auto}
#training-review-card{border-style:solid}
@media(max-width:700px){.review-layout{grid-template-columns:1fr}.review-board-wrap{position:static;order:-1}.review-point{padding:12px}.review-detail .controls{display:grid;grid-template-columns:1fr}.review-detail .controls button{width:100%}}