:root{--paper:#11152b;--paper-light:#1a2040;--ink:#f5f2ff;--indigo:#191d3b;--indigo-2:#252a54;--amber:#f3bd68;--amber-deep:#bb7d2e;--lilac:#b9a6f7;--line:#383c68;--muted:#b8b7d0;--shadow:0 14px 30px #05071466}
body{background:radial-gradient(circle at 16% 12%,#34336a 0,transparent 28%),radial-gradient(circle at 87% 78%,#4b2853 0,transparent 25%),var(--indigo);color:var(--ink)}
.scene{opacity:0}.page{max-width:1000px;margin:0 auto;padding-top:86px;box-sizing:border-box}.controls{z-index:3}.round-control,.lang-switch,.hub-home{background:#1b2142e8;border-color:#4b4f7d;color:var(--ink);box-shadow:0 4px 14px #05071455}.round-control:hover,.hub-home:hover{background:#292f59}.lang-switch button{color:#c7c4e0}.lang-switch button.active{background:var(--amber);color:#21182a}.landing{max-width:650px}.brand h1,.game-title strong,.modal h2{color:#fff}.brand h1 span,.section-label,.friends-label strong{color:var(--amber)}.hanzi{color:var(--lilac)}.tagline,.section-note,.fine-print,.preview-note{color:#bbb9d0}.tile-logo{height:96px;gap:7px;align-items:center;filter:drop-shadow(0 8px 12px #05071466)}.logo-tile{background:linear-gradient(145deg,#fffaff,#dcd8f2);border-color:#8e88bd;border-bottom-color:var(--amber);color:#3c397b;transform:none!important}.logo-tile:nth-child(1){transform:translateY(7px) rotate(-8deg)!important}.logo-tile:nth-child(2){transform:translateY(-4px) rotate(4deg)!important}.logo-tile:nth-child(3){transform:translateY(5px) rotate(-3deg)!important}.logo-tile:nth-child(4){transform:translateY(-6px) rotate(7deg)!important}.logo-tile:nth-child(5){transform:translateY(4px) rotate(-5deg)!important}.logo-tile:nth-child(2),.logo-tile:nth-child(4){color:#9b3e65}.play-card{background:#1b2142f2;border-color:#404675;color:var(--ink);box-shadow:0 5px 16px #05071455}.play-card:hover{border-color:var(--lilac);box-shadow:var(--shadow)}.play-card .icon{background:#2c3260;color:var(--amber)}.play-card small{color:#c5c2db}.play-card.primary{background:linear-gradient(135deg,#8b65d8,#5948a6);border-color:#a893f2}.play-card.primary .icon{background:#b9a6f7;color:#24193c}.play-card.primary small{color:#f2edff}.badge{background:var(--amber);color:#24182a}.table-board{background:radial-gradient(ellipse at center,#46447d 0,#282d5b 50%,#171b39 100%);border-color:#d29543;box-shadow:0 14px 30px #05071488,inset 0 0 0 2px #f0c97866}.table-board:before,.table-board:after{border-color:#c6b8ff33}.back-tile{background:repeating-linear-gradient(45deg,#373d7a,#373d7a 3px,#53589a 3px,#53589a 6px);border-color:#c2b5f0}.seat,.center-status p{color:#f7f3ff}.wind{color:var(--amber)}.seat.current-seat>span:first-child,.seat-turn>span:first-child{background:var(--amber);color:#251b36}.discard-tile,.hand-tile,.tile-face{background:linear-gradient(135deg,#fffaff,#dedaf1);border-color:#aaa4ce;border-bottom-color:#d29543;box-shadow:0 3px 7px #05071466}.discard-tile,.hand-tile{color:#49418d}.hand-tile.red,.discard-tile.red{color:#a43d68}.hand-tile:hover,.hand-tile:focus-visible{transform:translateY(-8px);box-shadow:0 9px 15px #05071488}.hand-label,.status-line{color:#c8c6dd}.back-btn,.subtle-btn{background:#222852;border-color:#555b8e;color:#f6f2ff}.status-line{min-height:23px}.modal{background:var(--paper-light);color:var(--ink)}.modal p,.field label,.room-help span,.room-footnote{color:#cbc9df}.field select,.field input,.field textarea{background:#11162f;color:#fff;border-color:#555b8e}.action-primary{background:var(--amber);color:#251b36}.action-secondary{background:#30365e;color:#fff}.demo-disclaimer{background:#302644;color:#e7dfff!important}.record-stat div,.room-help{background:#272d57}.record-stat strong,.room-code{color:var(--amber)}.room-code{background:#2c2754}.close-modal{background:#30365e;color:#fff}.toast{background:#f3bd68;color:#24182a}.motion-toggle[aria-pressed=true]{outline:2px solid var(--amber);outline-offset:2px}
.board-ornament{position:absolute;width:180px;height:180px;border:1px solid #c3b8ff25;transform:rotate(45deg);pointer-events:none}.board-ornament:after{content:"";position:absolute;inset:28px;border:1px solid #f3bd6825}.drawn-tile{animation:tile-arrive .48s cubic-bezier(.2,.8,.2,1) both}.discard-fly{animation:discard-land .48s cubic-bezier(.2,.8,.2,1) both}.thinking{animation:pulse-seat 1s ease-in-out infinite}.status-punct{animation:status-in .25s ease-out both}
/* Local-practice motion surfaces created by the game controller. */
.practice-dice{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;margin:9px 0 2px;color:var(--amber);opacity:0;transform:translateY(-5px) scale(.94);transition:opacity .22s ease,transform .22s ease}.practice-dice.is-visible{opacity:1;transform:none}.practice-die{display:grid;place-items:center;width:34px;height:34px;border:1px solid #c6b8ff66;border-radius:9px;background:#292c5de6;box-shadow:inset 0 0 0 1px #f3bd6822,0 4px 10px #05071455;font:700 25px/1 Georgia,serif}.practice-dice small{margin-left:3px;color:#d8d3f4;font:700 10px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}.motion-ghost{position:fixed;z-index:20;pointer-events:none;margin:0;opacity:.94;filter:drop-shadow(0 8px 8px #05071477);will-change:transform,opacity}.table-call{position:absolute;z-index:4;top:14px;left:50%;max-width:calc(100% - 30px);padding:6px 11px;border:1px solid #f3bd6866;border-radius:999px;background:#171b39e8;color:#fff1c9;box-shadow:0 5px 14px #05071455;font-size:11px;font-weight:800;letter-spacing:.06em;text-align:center;transform:translate(-50%,-5px);animation:status-in .25s ease-out both}.seat.is-thinking,.seat.thinking{filter:drop-shadow(0 0 7px #f3bd68cc);animation:pulse-seat 1.05s ease-in-out infinite}.hand-tile.is-drawn{position:relative;z-index:2;transform:translateY(-4px) translateX(2px);box-shadow:0 8px 14px #05071488}.discard-tile.is-latest{position:relative;z-index:2;outline:2px solid var(--amber);outline-offset:2px;box-shadow:0 0 0 4px #f3bd6822,0 7px 13px #05071488}#gameView[data-phase=dealing] .table-board{box-shadow:0 14px 30px #05071488,inset 0 0 0 2px #f0c97866,0 0 0 1px #b9a6f766}#gameView[data-phase=computer] .game-meta{color:var(--amber);text-shadow:0 0 9px #f3bd6866}#gameView[data-phase=computer] .table-board{box-shadow:0 14px 30px #05071488,inset 0 0 0 2px #f0c97866,0 0 22px #b9a6f733}#gameView[data-phase=ready] .table-board{box-shadow:0 14px 30px #05071488,inset 0 0 0 2px #f0c97866}
.game-top{min-height:58px;align-items:center}.game-title{min-width:0}.game-title small{color:#d2cdef}.game-meta{color:#f0dca7;text-shadow:0 1px 2px #05071499;white-space:nowrap}
button:focus-visible,.play-card:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--amber);outline-offset:3px}@keyframes tile-arrive{from{opacity:0;transform:translateY(-18px) scale(.92)}to{opacity:1;transform:none}}@keyframes discard-land{from{opacity:0;transform:translate(24px,-24px) rotate(8deg)}to{opacity:1;transform:none}}@keyframes pulse-seat{50%{filter:drop-shadow(0 0 10px var(--amber))}}@keyframes status-in{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:700px){.page{padding:76px 16px 26px}.game-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px}.game-title strong{font-size:21px}.game-title small{font-size:11px}.game-meta{font-size:11px}.tile-logo{height:82px;gap:5px}.practice-dice{margin-top:5px}.table-call{top:10px}.seat.is-thinking,.seat.thinking{filter:drop-shadow(0 0 5px #f3bd68cc)}}
@media(max-width:385px){.page{padding-top:72px}.controls{right:8px;transform:scale(.78);transform-origin:top right}.hub-home{z-index:4}.game-top{grid-template-columns:auto minmax(0,1fr);align-items:start}.game-meta{grid-column:2;text-align:right;margin-top:-5px}.game-title{text-align:right}.logo-tile{width:42px;height:61px}.table-board{min-height:310px}.practice-die{width:30px;height:30px;font-size:22px}.practice-dice small{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.motion-ghost{display:none!important}}body.motion-off *,body.motion-off *::before,body.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-off .motion-ghost{display:none!important}

/* Local presentation refinements; the dice do not change the practice rules. */
.practice-dice-faces{display:flex;gap:8px;align-items:center}.table-call{top:65px}.hand-tile.is-drawn{margin-left:9px}.practice-die{flex:none}.center-status{max-width:calc(100% - 110px)}.center-status p{max-width:360px;margin-left:auto;margin-right:auto}.discards{max-width:100%}@media(max-width:385px){.center-status{max-width:calc(100% - 84px)}.center-status p{font-size:11px}.table-call{top:58px;font-size:10px}.hand-tile.is-drawn{margin-left:5px}}

.ruang-mark{position:relative;display:flex;justify-content:center;gap:10px;margin:5px auto 22px;width:148px;height:82px}.ruang-mark span{display:grid;place-items:center;width:64px;height:70px;border:1px solid #cbbaff77;border-bottom:5px solid var(--amber);border-radius:18px 6px 18px 6px;background:linear-gradient(140deg,#544281,#25284e);color:#f4e9ff;font:700 37px/1 Georgia,serif;box-shadow:0 10px 25px #080c2255}.ruang-mark span+span{margin-top:12px;border-radius:6px 18px 6px 18px;background:linear-gradient(140deg,#3a416f,#25284e);color:var(--amber)}.ruang-mark i{position:absolute;right:-8px;top:1px;width:9px;height:9px;border:2px solid var(--amber);transform:rotate(45deg)}@media(max-width:700px){.ruang-mark{transform:scale(.85);margin-bottom:8px}}

.play-card.primary:hover{background:linear-gradient(135deg,#9872e3,#6955bb)}