:root{font-family:Noto Sans TC,Microsoft JhengHei,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f7f0df;background:#12352c;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}.app-shell{position:relative;width:100dvw;height:100dvh;overflow:hidden;background:radial-gradient(circle at 24% 26%,rgb(69 137 102 / .28),transparent 34%),linear-gradient(135deg,#0e2f27,#17483d 52%,#0c2a26)}.portrait-lock{display:none}.game-board{width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(12rem,24vw,17rem);grid-template-rows:auto minmax(0,1fr) minmax(5.8rem,29dvh);gap:.75rem;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.play-surface{display:contents}.top-bar{grid-column:1;grid-row:1;min-height:3.8rem;display:grid;grid-template-columns:minmax(8rem,1fr) auto auto auto;align-items:center;gap:.7rem;padding:.75rem 0 0 .75rem}.brand-lockup{min-width:0}.brand-kicker{display:block;color:#ffd98f;font-size:.78rem;font-weight:700;letter-spacing:0}h1{margin:0;color:#fff8e8;font-size:1.55rem;line-height:1;letter-spacing:0}.difficulty-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-width:15rem;border:1px solid rgb(255 255 255 / .18);background:#0000002e;border-radius:.5rem;padding:.18rem}.tab{min-width:0;border:0;border-radius:.35rem;color:#d7eadf;background:transparent;padding:.42rem .35rem;font-size:.86rem;font-weight:700}.tab.active{color:#102f26;background:#f6d782}.stat-strip{display:flex;align-items:center;gap:.38rem}.level-pill{width:clamp(7.2rem,14vw,9.6rem);min-width:0;height:2.35rem;display:grid;grid-template-rows:1fr .24rem auto;gap:.12rem;border:1px solid rgb(255 255 255 / .14);border-radius:.5rem;padding:.24rem .42rem .22rem;background:#071f1cb8}.level-pill-main{min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:.3rem}.level-pill-main strong{color:#ffe4a1;font-size:.88rem;line-height:1;white-space:nowrap}.level-pill-main span,.level-pill small{min-width:0;color:#b8d9cd;font-size:.6rem;font-weight:800;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-progress{width:100%;height:.24rem;overflow:hidden;border-radius:999px;background:#ffffff24}.level-progress span{display:block;height:100%;border-radius:inherit;background:#f6d782}.stat-pill{min-width:4rem;height:2.35rem;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;column-gap:.25rem;border:1px solid rgb(255 255 255 / .14);border-radius:.5rem;padding:.3rem .45rem;background:#071f1cb8}.stat-pill svg{width:1rem;height:1rem;grid-row:1 / span 2;color:#ffd98f}.stat-pill span{font-size:.68rem;color:#b8d9cd;line-height:1}.stat-pill strong{font-size:.88rem;line-height:1}.fullscreen-button{width:2.35rem;height:2.35rem;display:inline-grid;place-items:center;border:1px solid rgb(255 255 255 / .14);border-radius:.5rem;color:#ffe4a1;background:#071f1cb8;cursor:pointer;touch-action:manipulation}.fullscreen-button.active{color:#102f26;background:#f6d782}.fullscreen-button svg{width:1.15rem;height:1.15rem}.table-zone{position:relative;grid-column:1;grid-row:2;min-height:0;display:grid;place-items:center;background:linear-gradient(90deg,rgb(255 255 255 / .055) 1px,transparent 1px),linear-gradient(rgb(255 255 255 / .045) 1px,transparent 1px);background-size:42px 42px;border-block:1px solid rgb(255 255 255 / .1);margin:0 0 0 .75rem}.round-chip{position:absolute;left:.3rem;top:.3rem;width:5.5rem;height:5.5rem;display:grid;place-items:center;align-content:center;border:1px solid rgb(255 255 255 / .18);border-radius:50%;background:#08211ec7;box-shadow:inset 0 0 0 .28rem #f6d7821f}.round-chip span,.round-chip small{color:#c6e3d8;font-size:.72rem;line-height:1.1}.round-chip strong{color:#ffe9aa;font-size:1.65rem;line-height:1}.center-callout{min-width:12rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;color:#effff6;border:1px solid rgb(255 255 255 / .14);border-radius:.5rem;background:#04151480;padding:.65rem 1rem;font-weight:800}.callout-icon{width:1.25rem;height:1.25rem;color:#ffd98f}.callout-icon.success{color:#7dffbf}.callout-icon.danger{color:#ff9b8f}.hand-row{grid-column:1 / -1;grid-row:3;min-width:0;display:grid;grid-template-columns:repeat(17,minmax(0,1fr));align-items:end;gap:.2rem;padding:.35rem .75rem .55rem}.tile-button{position:relative;min-width:0;width:100%;max-height:100%;aspect-ratio:.69;display:grid;place-items:center;border:0;border-radius:.25rem;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;transition:transform .15s ease,filter .15s ease}.tile-button img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 .24rem .22rem rgb(0 0 0 / .34));-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.tile-button.selected{transform:translateY(-.65rem)}.tile-button.selected img{filter:drop-shadow(0 0 .28rem rgb(255 217 143 / .95)) drop-shadow(0 .32rem .28rem rgb(0 0 0 / .38))}.tile-button.best img{filter:drop-shadow(0 0 .22rem rgb(125 255 191 / .95)) drop-shadow(0 .3rem .26rem rgb(0 0 0 / .36))}.tile-button.locked{cursor:default}.tile-button:disabled{opacity:1}.tile-fallback{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;display:grid;place-items:center;color:#202020;border-radius:.25rem;background:#fbf7ef;font-weight:900}.result-panel{grid-column:2;grid-row:1 / 3;align-self:stretch;min-width:0;display:grid;grid-template-rows:auto minmax(0,1.1fr) auto auto auto auto auto;gap:.55rem;padding:.75rem .75rem 0 0}.panel-top,.verdict-box,.xp-feedback,.analysis-grid,.wait-list,.best-list{border:1px solid rgb(255 255 255 / .14);border-radius:.5rem;background:#071e1cd1;box-shadow:0 .55rem 1.25rem #00000024}.panel-top{display:flex;align-items:center;justify-content:space-between;min-height:2.65rem;padding:.55rem .7rem}.panel-label,.wait-list span,.best-list span,.metric span{color:#b8d9cd;font-size:.78rem;font-weight:700}.panel-top strong{color:#ffe4a1}.verdict-box{min-height:0;padding:.7rem}.verdict{display:inline-flex;align-items:center;gap:.38rem;min-height:2rem;border-radius:.45rem;padding:.35rem .55rem;font-weight:900}.verdict svg{width:1rem;height:1rem}.verdict.success{color:#083623;background:#7dffbf}.verdict.danger{color:#47110b;background:#ffb2a8}.verdict.neutral{color:#102f26;background:#f6d782}.verdict-box p{margin:.6rem 0 0;color:#f8f6ea;font-size:.92rem;line-height:1.45}.xp-feedback{display:grid;gap:.2rem;min-height:2.7rem;padding:.5rem .7rem}.xp-feedback span{color:#b8d9cd;font-size:.78rem;font-weight:700}.xp-feedback strong{color:#ffe4a1;font-size:.92rem;line-height:1.15}.xp-feedback.gain strong{animation:xp-pop .52s ease}@keyframes xp-pop{0%{transform:scale(.96);opacity:.55}58%{transform:scale(1.04);opacity:1}to{transform:scale(1)}}.analysis-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden}.metric{min-width:0;display:grid;place-items:center;gap:.12rem;min-height:3.25rem;background:#ffffff09}.metric strong{color:#ffe4a1;font-size:1.1rem}.wait-list,.best-list{display:grid;gap:.22rem;padding:.58rem .7rem;min-height:3.25rem}.wait-list strong,.best-list strong{font-size:.9rem;line-height:1.25}.next-button{min-height:3.2rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;border-radius:.5rem;color:#102f26;background:#f6d782;font-weight:900;cursor:pointer}.next-button svg{width:1.1rem;height:1.1rem}.next-button:disabled{color:#ffffff70;background:#ffffff1f;cursor:default}@media(orientation:portrait){.portrait-lock{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 50% 25%,rgb(246 215 130 / .18),transparent 32%),#12352c}.rotate-card{display:grid;place-items:center;gap:.75rem;color:#fff4d6;text-align:center;font-weight:900}.rotate-card svg{width:3rem;height:3rem;color:#ffd98f}.game-board{visibility:hidden}}@media(max-height:420px){.game-board{grid-template-columns:minmax(0,1fr) 12rem;grid-template-rows:auto minmax(0,1fr) minmax(5.15rem,27dvh);gap:.5rem}.top-bar{min-height:3rem;gap:.45rem;padding-top:.45rem;padding-left:.45rem}h1{font-size:1.18rem}.brand-kicker,.stat-pill span,.xp-feedback span,.panel-label,.wait-list span,.best-list span,.metric span{font-size:.66rem}.difficulty-tabs{min-width:12rem}.tab{padding:.32rem .25rem;font-size:.75rem}.stat-pill{min-width:3.45rem;height:2rem;padding:.22rem .32rem}.level-pill{width:6.6rem;height:2rem;padding:.18rem .32rem .16rem}.level-pill-main strong{font-size:.76rem}.level-pill-main span,.level-pill small{font-size:.52rem}.fullscreen-button{width:2rem;height:2rem}.stat-strip .accuracy-stat{display:none}.table-zone{margin-left:.45rem}.hand-row{padding:.25rem .45rem .4rem}.round-chip{width:4.35rem;height:4.35rem}.round-chip strong{font-size:1.2rem}.center-callout{min-width:10rem;padding:.48rem .75rem}.result-panel{gap:.28rem;padding:.45rem .45rem 0 0}.panel-top{min-height:2rem;padding:.35rem .5rem}.verdict-box{padding:.45rem}.verdict-box p{font-size:.78rem;line-height:1.3;margin-top:.4rem}.xp-feedback{min-height:2.2rem;padding:.32rem .5rem}.xp-feedback strong{font-size:.72rem}.analysis-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric{min-height:2.15rem}.metric strong{font-size:.92rem}.wait-list,.best-list{min-height:2.35rem;padding:.34rem .5rem}.wait-list strong,.best-list strong{font-size:.78rem}.next-button{min-height:2.35rem}}