:root{color-scheme:dark;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;color:#eff5ed;background:#091e22}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 90% 0,#254544,transparent 50%),#091e22}main{max-width:980px;margin:auto;padding:28px 24px 50px}header,.session-head,.home-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand,.eyebrow{font-size:11px;letter-spacing:.18em;color:#a5c4bf}.chip{border:1px solid #57756d;border-radius:99px;padding:5px 12px;font-size:11px;color:#d7dcc4}.intro{padding:32px 0 18px}h1{font-size:clamp(30px,6vw,48px);line-height:1.2;letter-spacing:-.04em;margin:10px 0}h1 span{display:block;color:#edcf89}p{line-height:1.75;color:#b7cdc5}h2{font-size:23px;margin:12px 0}h3{font-size:15px}.guide{display:grid;grid-template-columns:70px 1fr;gap:16px;border:1px solid #345d5c;background:#123235;border-radius:18px;padding:18px;margin:0 0 24px}.portrait{height:70px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#bad9cc 12%,#647e8a 13%,#173c49 48%);border:2px solid #d5bd82;position:relative}.portrait:after{content:'凛';position:absolute;inset:0;display:grid;place-items:center;font-size:25px;color:#f9e5bc}.guide-name{font-weight:700}.guide-name small{font-weight:400;color:#a2b9ad;margin-left:8px}.guide p{margin:8px 0}.rank-card,.records{border:1px solid #516b5d;background:linear-gradient(130deg,#21403b,#152e30);border-radius:18px;padding:24px;margin-bottom:20px}.rank-card h2{color:#f2d18a;font-size:30px}.rank-card small{color:#aabdb0}.rank-card p{font-size:12px}progress{width:100%;height:8px;appearance:none;border:0;border-radius:9px;overflow:hidden;background:#0a2023;margin:12px 0}progress::-webkit-progress-bar{background:#0a2023}progress::-webkit-progress-value{background:#d9bf7c}progress::-moz-progress-bar{background:#d9bf7c}.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.course{min-height:170px;background:#133436;border-color:#375b59;text-align:left;padding:22px;color:#e7eee5}.course b{font-size:21px;display:block;margin:16px 0 10px}.course span{font-size:12px;color:#c6d4c7}.course small{color:#e3bd72;letter-spacing:.12em}button{font:inherit;font-weight:650;background:#ebcf89;color:#162e2d;border:1px solid #efdba8;border-radius:10px;padding:13px 19px;min-height:48px;cursor:pointer;touch-action:manipulation}button:hover{filter:brightness(1.08)}button:disabled{opacity:.5;cursor:default}.text-button{background:transparent;border-color:transparent;color:#bcd1c4;font-size:12px;padding:5px 0;min-height:36px}button:focus-visible,summary:focus-visible{outline:3px solid #7dddc7;outline-offset:4px}.home-actions{justify-content:flex-start;flex-wrap:wrap;margin-bottom:24px}.records{background:#102b2e}.badge{display:inline-block;background:#354538;border:1px solid #627453;border-radius:8px;padding:7px 12px;margin:4px;font-size:12px;color:#e9dfb1}.weak-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #294b49;font-size:13px}.session-head{font-size:13px;color:#bed3c5}.table{background:radial-gradient(ellipse at 50% 100%,#215d4e,#143c35);border:7px solid #34463b;box-shadow:inset 0 0 0 1px #809073,0 14px 40px #00141060;border-radius:18px;padding:28px 22px;margin:16px 0 24px}.table h2{font-size:clamp(20px,4.5vw,28px);margin-top:20px}.table p{font-size:14px;color:#d3e1cf}.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.choices button{background:#193b3d;color:#edf2db;border-color:#587d71;min-height:68px;font-size:19px}.choices .correct{background:#3c6953;border-color:#a0d3a1;opacity:1}.choices .wrong{background:#694141;border-color:#dc9b83;opacity:1}#explanation{margin-top:18px;border-radius:16px;border:1px solid #4e7868;padding:24px;background:#16362f}#verdict{color:#e8d59c}.step{display:grid;grid-template-columns:80px 1fr;border-bottom:1px solid #36564a;padding:12px 0;gap:12px;font-size:13px}.step b{color:#e4ca8d}.step p{margin:0}.tiles{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin:22px 0}.tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#fffceb,#d4dfd3);color:#173b38;border:1px solid #9aaa89;border-bottom:5px solid #4d7862;border-radius:4px;width:42px;height:60px;font-weight:800;box-shadow:0 2px 4px #07191566}.tile b{font-size:22px}.tile small{font-size:12px}.tile[data-suit=m]{color:#a44539}.tile[data-suit=p]{color:#345b9a}.tile[data-suit=s]{color:#1f7650}.extra-tiles{display:flex;gap:18px;align-items:center;justify-content:center;font-size:12px;flex-wrap:wrap}.extra-tiles div{display:flex;gap:8px;align-items:center}#meld-info{font-size:12px;color:#d3dbb6;margin-top:16px}.player{display:grid;grid-template-columns:1fr auto auto;gap:16px;padding:12px;background:#09282277;margin-top:8px;border-radius:7px}.player.you{border:1px solid #dfc588}.player b{font-variant-numeric:tabular-nums}.player small{color:#b8cbb3}.score-result .player{animation:rise .5s ease}.result-note{padding:12px 0;color:#e3bf77}details{margin-top:32px;border-top:1px solid #38514a;padding-top:20px;font-size:12px}summary{min-height:40px;cursor:pointer}footer{text-align:center;font-size:11px;color:#8ea89e;margin-top:25px}[hidden]{display:none!important}@keyframes rise{from{transform:translateY(8px);opacity:.4}to{transform:translateY(0);opacity:1}}@media(max-width:650px){main{padding:20px 14px}.courses{grid-template-columns:1fr;gap:10px}.course{min-height:100px;padding:16px}.course b{margin:7px 0;font-size:19px}.table{padding:22px 12px;border-width:5px}.tile{width:32px;height:48px}.tile b{font-size:18px}.tile small{font-size:10px}.tiles{gap:2px}.choices button{font-size:16px;padding:13px 8px}.guide{padding:14px;gap:12px;grid-template-columns:55px 1fr}.portrait{height:55px}.guide p{font-size:13px}.rank-card,.records{padding:20px}.step{grid-template-columns:65px 1fr;gap:8px}.player{gap:8px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.tile.dora{outline:2px solid #e8ba52;outline-offset:-2px}.tile.winning{box-shadow:inset 0 4px #4893c7,0 2px 4px #07191566}

/* Compact guide occupies its own grid column and never covers the question. */
.guide{grid-template-columns:110px minmax(0,1fr);align-items:center}.portrait{width:110px;height:160px;border:0;border-radius:0;background:transparent url("assets/rin-chibi.png") no-repeat 0 50%;background-size:300% 100%}.portrait:after{content:none}.portrait[data-expression=happy]{background-position:50% 50%}.portrait[data-expression=encourage]{background-position:100% 50%}.portrait[data-expression=panic],.portrait[data-expression=surprise],.portrait[data-expression=retort]{background-image:url("assets/rin-reactions.png")}.portrait[data-expression=surprise]{background-position:50% 50%}.portrait[data-expression=retort]{background-position:100% 50%}.portrait[data-expression=thinking]{background-image:url("assets/rin-review.png");background-size:300% 200%;background-position:50% 100%;height:110px}.expression-buttons{display:flex;flex-wrap:wrap;gap:8px}.expression-buttons button{font-size:13px}header{flex-wrap:wrap}.guide-name small{display:inline-block}@media(max-width:650px){.guide{grid-template-columns:82px minmax(0,1fr);gap:10px}.portrait{width:82px;height:118px}.portrait[data-expression=thinking]{height:82px}.guide-name small{margin-left:0;margin-top:4px;display:block}.guide p{overflow-wrap:anywhere}}

.tile{padding:0;border:0;background:none;overflow:hidden;flex-shrink:0}.tile img{display:block;width:100%;height:100%;object-fit:fill}.tiles{gap:4px}.tile.dora{outline-offset:0}.tile.winning{border-top:3px solid #57a4db}.tile{width:42px;height:60px}@media(max-width:650px){.tile{width:36px;height:52px}.tiles{gap:3px;justify-content:flex-start}.extra-tiles .tile{width:42px;height:60px}}

.hand-status{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 12px}.status-badge{font-weight:750;font-size:15px;background:#092c26;border:1px solid #78a893;border-radius:9px;padding:10px 13px;color:#edf4db}.status-badge.riichi-on{background:#5c352c;color:#fff0bc;border-color:#e5b076}.hand-label{margin:16px 0 6px;color:#ecdbaf}.hand-label small{font-size:11px;font-weight:400;color:#d3dfca}.open-melds{padding:12px;border:1px solid #91ad8a;border-radius:10px;background:#103029;margin:12px 0 18px}.open-melds h3{margin:0 0 10px;color:#eed3a0}.meld-groups{display:flex;flex-wrap:wrap;gap:14px}.meld-group{display:flex;flex-direction:column;gap:6px}.meld-group small{color:#efdec2}.meld-tiles{display:flex;gap:3px;align-items:flex-end}.meld-tiles .tile.called{width:60px;height:42px;position:relative;overflow:hidden}.meld-tiles .tile.called img{width:42px;height:60px;position:absolute;left:9px;top:-9px;transform:rotate(90deg)}@media(max-width:650px){.status-badge{font-size:14px;padding:9px 11px}.meld-tiles .tile.called{width:52px;height:36px}.meld-tiles .tile.called img{width:36px;height:52px;left:8px;top:-8px}.extra-tiles{justify-content:flex-start}.tiles{margin-top:10px}}

.answer-guide{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:18px}.answer-guide h2{margin:9px 0;font-size:26px}.answer-guide p{font-size:14px;margin:0}.answer-guide .portrait{animation:answer-pop .35s ease-out}#explanation{scroll-margin-top:20px}@keyframes answer-pop{from{transform:scale(.9);opacity:.4}to{transform:scale(1);opacity:1}}@media(max-width:650px){.answer-guide{grid-template-columns:90px minmax(0,1fr);gap:12px}.answer-guide .portrait{width:90px;height:132px}.answer-guide h2{font-size:23px}.answer-guide p{font-size:13px}#explanation{padding:16px}}

.stage-select{display:block;margin:14px 0;color:#d8e5dd}.stage-select select{display:block;width:100%;min-height:48px;background:#183e38;color:#fff;border:1px solid #7a9c90;border-radius:12px;padding:10px;font:inherit;margin-top:6px}.movement{border:1px solid #8da69c;border-radius:12px;padding:14px;animation:reveal .6s ease}.movement p{font-size:14px}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.movement{animation:none}}

#result .rank-card{animation:reveal .6s ease}@media(prefers-reduced-motion:reduce){#result .rank-card{animation:none}}

.scenario-lead{font-weight:750;font-size:17px!important;color:#f3e6bb!important;line-height:1.65;margin:16px 0}.scenario-details{margin:16px 0 22px}.scenario-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid #54766955;font-size:14px;line-height:1.7}.scenario-row dt{font-weight:700;color:#ecd6a0}.scenario-row dd{margin:0;color:#e1ecdc;overflow-wrap:anywhere}.table-heading{color:#f0d998;margin:20px 0 10px;font-size:16px}.dealer-badge{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid #dbc180;border-radius:6px;color:#f8d99b!important;font-size:11px}.answer-instruction{font-size:14px;background:#123431;border-left:3px solid #d9bf7c;border-radius:6px;padding:12px 14px;color:#e1e9d3;line-height:1.7}.player>span{min-width:0}.player>small{white-space:nowrap}@media(max-width:650px){.scenario-row{grid-template-columns:80px minmax(0,1fr);gap:8px;font-size:14px}.scenario-lead{font-size:16px!important}.player{gap:7px}.dealer-badge{margin-left:5px;padding:1px 5px}.answer-instruction{font-size:13px}}

/* Keep each atlas cell at its original aspect ratio, including mobile answers. */
.portrait,.answer-guide .portrait{height:auto;aspect-ratio:1828 / 2580;align-self:start}
.portrait[data-expression=panic],.portrait[data-expression=surprise],.portrait[data-expression=retort]{height:auto;aspect-ratio:1774 / 2661}
.portrait[data-expression=thinking],.answer-guide .portrait[data-expression=thinking]{height:auto;aspect-ratio:1 / 1}
.answer-guide{align-items:start}.answer-guide .portrait[data-expression=panic],.answer-guide .portrait[data-expression=surprise],.answer-guide .portrait[data-expression=retort]{height:auto;aspect-ratio:1774 / 2661}

.learning-primer{padding:20px;border:1px solid #6b8775;border-radius:16px;background:#163630;margin:20px 0}.learning-primer h2{color:#f0d698;font-size:22px}.learning-primer p{font-size:14px}.learning-primer details{margin-top:14px;padding-top:12px}.tile{filter:drop-shadow(0 2px 2px #031c18aa);box-shadow:none;overflow:visible;border-radius:5px}.tile img{border-radius:5px}.tiles{gap:4px}.extra-tiles .tile{width:48px;height:68px}@media(max-width:650px){.tiles .tile{width:38px;height:54px}.tiles{gap:3px}.extra-tiles .tile{width:46px;height:66px}}

/* Keep learning hints, calculations and movement visible without overlays. */
#hint-content,#substep-feedback{scroll-margin-top:12px;border-color:#e3c880;color:#f0e6bf}
#result-continue{margin:12px 8px 12px 0}.stage-select{max-width:100%}
#score-table{scroll-margin-top:12px}.movement p{margin:8px 0;font-variant-numeric:tabular-nums}
@media(max-width:650px){.tiles .tile{width:42px;height:60px}.meld-tiles .tile{width:40px;height:57px}.meld-tiles .tile.called{width:57px;height:40px}.meld-tiles .tile.called img{width:40px;height:57px;left:8.5px;top:-8.5px}.answer-guide{grid-template-columns:100px minmax(0,1fr)}.answer-guide .portrait{width:100px}.choices button{min-height:70px;overflow-wrap:anywhere}.player{grid-template-columns:minmax(0,1fr) auto auto}}

/* PC: one proportional size for concealed, called, winning and indicator tiles. */
.tile img{object-fit:contain}
@media(min-width:651px){
 #hand-area{--tile-width:48px;--tile-height:calc(var(--tile-width) * 10 / 7)}
 #hand-area .tile{width:var(--tile-width);height:var(--tile-height)}
 #hand-area .tiles{gap:5px}
 #hand-area .meld-tiles .tile.called{width:var(--tile-height);height:var(--tile-width)}
 #hand-area .meld-tiles .tile.called img{width:var(--tile-width);height:var(--tile-height);left:calc((var(--tile-height) - var(--tile-width)) / 2);top:calc((var(--tile-width) - var(--tile-height)) / 2)}
 #hand-area .extra-tiles{margin-top:24px;gap:32px}
}
@media(min-width:900px){#hand-area{--tile-width:56px}}

.tile-preview{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.tile-preview .tile{width:84px;height:120px}@media(max-width:650px){.tile-preview{gap:8px}.tile-preview .tile{width:56px;height:80px}}