@charset "UTF-8";
:root {
  --ink:#283a3c; --muted:#7c887e; --green:#28534e; --green-deep:#193e3b;
  --pink:#d68899; --cream:#faf6ea; --line:#dfdecc; --gold:#edcb83;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,Georgia,serif;
  --sans:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:#17273a; color:var(--cream); font:14px var(--sans); -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button { color:inherit; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
button,a,input,select { touch-action:manipulation; }
button,a { transition:background .18s,box-shadow .18s,transform .18s,color .18s; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #f4cf79; outline-offset:4px; }
a { color:var(--green); }
h1,h2,h3,p { margin:0; }
img { display:block; max-width:100%; }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:-70px; left:16px; z-index:300; background:#fff8e5; color:#213749; padding:14px; }
.skip-link:focus { top:12px; }
.icon-button { display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid #ead5a645; border-radius:7px; flex-shrink:0; background:#17213266; }
.icon-button:hover { background:#a9844350; border-color:var(--gold); }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:11px; padding:10px 0; color:#e7ddc7; }
.text-button:hover { color:#fff5d6; }
.section-kicker { font:9px var(--sans); letter-spacing:.23em; color:#b2a484; margin-bottom:7px; }
.primary-button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:48px; padding:14px 23px; border-radius:5px; background:linear-gradient(#36665d,#264d48); color:#fff9e9; box-shadow:0 3px 0 #173936; font-weight:600; font-size:13px; }
.primary-button:hover { background:linear-gradient(#417970,#285c53); transform:translateY(-1px); }
.primary-button:active { transform:translateY(1px); }
.primary-button:disabled { opacity:.5; }

/* The lobby is a game scene with menus over the illustration. */
.site-header { position:absolute; z-index:20; top:0; left:0; right:0; height:94px; padding:0 3.6%; display:flex; align-items:center; gap:24px; background:linear-gradient(#111c31b5,transparent); }
.brand { display:flex; align-items:center; gap:11px; padding:0; text-shadow:0 2px 10px #171426; }
.brand-seal { width:42px; height:48px; display:grid; place-items:center; border:1px solid #e7c17e; box-shadow:inset 0 0 0 3px #813d3766,0 3px 8px #0003; background:linear-gradient(135deg,#954742,#5e2d34); color:#ffe9bd; font:800 31px var(--serif); transform:rotate(-5deg); }
.brand-type { color:#ffedc5; font:800 29px/1.2 var(--serif); letter-spacing:.14em; text-align:left; }
.brand-type small { display:block; font:8px var(--sans); letter-spacing:.25em; margin-top:7px; color:#dac49b; }
.header-nav { display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav-item { font-size:12px; padding:10px 15px; border:1px solid transparent; border-radius:4px; text-shadow:0 1px 5px #0007; }
.nav-item:hover,.nav-item.active { background:#151c2c65; border-color:#ead5a638; }
.header-tools { display:flex; align-items:center; gap:8px; }
.cpu-badge { display:flex; align-items:center; gap:7px; font-size:10px; color:#dbddcf; margin-right:9px; }
.cpu-badge i { width:5px; height:5px; background:#b9d793; border-radius:50%; box-shadow:0 0 7px #b9d79380; }
.lobby-screen { position:relative; isolation:isolate; min-height:680px; height:100dvh; overflow:hidden; }
.lobby-backdrop,.lobby-vignette { position:absolute; inset:0; pointer-events:none; z-index:-3; }
.lobby-backdrop { background:#342c2b url('assets/lobby-garden-v2.webp') center/cover no-repeat; }
.lobby-vignette { z-index:-2; background:linear-gradient(90deg,#11172a1a 0%,transparent 46%,#12182725 65%,#12152070 100%),linear-gradient(0deg,#141624de,transparent 35%,transparent 76%,#151f3620); }
.standing-character { position:absolute; height:91%; width:auto; aspect-ratio:440/887; left:17%; bottom:-3%; background:url('assets/characters-standing-v2.webp') 0 center/403.1818% 100% no-repeat; filter:drop-shadow(5px 12px 12px #11101d50); z-index:-1; transform-origin:bottom center; animation:character-arrive .7s ease both; }
.character-intro { position:absolute; left:5.2%; bottom:25%; width:min(340px,30vw); text-shadow:0 2px 14px #101c3b; }
.character-tag { display:inline-block; color:#f7d795; border-left:3px solid #e2b462; padding:3px 12px; font-size:12px; letter-spacing:.12em; margin-bottom:11px; background:linear-gradient(90deg,#1f293bb0,transparent); }
.character-intro h2 { font:800 clamp(27px,3vw,43px)/1.4 var(--serif); letter-spacing:.12em; color:#fff7e5; }
.character-speech { display:flex; text-align:left; align-items:center; gap:13px; width:100%; font-size:12px; line-height:1.8; margin-top:14px; padding:13px 17px; background:linear-gradient(105deg,#182232df,#172436af); border:1px solid #e3cc924d; border-radius:4px; box-shadow:0 4px 20px #10132128; }
.speech-next { color:var(--gold); margin-left:auto; }
.character-select { position:absolute; left:5.2%; bottom:42px; width:326px; }
.character-select-heading { display:flex; gap:13px; align-items:center; padding:0 3px 10px; text-shadow:0 1px 5px #000; }
.character-select-heading h2 { font:600 14px var(--serif); letter-spacing:.1em; }
.character-select-heading>span { font:8px var(--sans); letter-spacing:.15em; color:#d9c4a5; }
.character-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.character-choice { min-width:0; padding:0; text-align:center; }
.character-portrait { display:block; background-image:url('assets/portraits.webp'); background-size:400% 100%; background-repeat:no-repeat; aspect-ratio:3/4; }
.character-choice .character-portrait { height:74px; width:100%; aspect-ratio:auto; background-size:400% auto; background-position-y:16%!important; border:2px solid #c7b79766; border-radius:4px; box-shadow:0 3px 0 #171d2b; filter:brightness(.73) saturate(.7); transition:filter .2s,transform .2s; position:relative; }
.character-choice.selected .character-portrait { filter:none; border-color:#ffde94; box-shadow:0 0 0 1px #a78852,0 0 16px #e7b56d66; transform:translateY(-3px); }
.character-choice.selected .character-portrait:after { content:'✦'; position:absolute; top:-9px; right:-6px; color:#ffe2a3; font-size:16px; text-shadow:0 1px 4px #714a24; }
.character-choice:hover .character-portrait { filter:none; transform:translateY(-4px); }
.character-choice>strong { display:block; font-size:10px; font-weight:500; color:#d8d1bf; margin-top:8px; text-shadow:0 1px 4px #000; }
.character-choice.selected>strong { color:#ffe7ae; }
.lobby-menu { position:absolute; right:6.5%; top:50%; transform:translateY(-47%); width:380px; padding:10px 4px; }
.menu-heading { display:flex; align-items:center; justify-content:center; gap:19px; text-align:center; }
.menu-heading h1 { font:800 36px/1.45 var(--serif); letter-spacing:.22em; color:#ffe7b9; text-shadow:0 3px 8px #0006; padding-left:.22em; }
.menu-rule { height:1px; flex:1; position:relative; background:linear-gradient(90deg,transparent,#c1a26b); }
.menu-rule:last-child { transform:rotate(180deg); }
.menu-rule:after { content:''; position:absolute; right:0; top:-2px; width:5px; height:5px; background:#d9b776; transform:rotate(45deg); }
.menu-heading .section-kicker { margin-bottom:2px; color:#d6b885; font-size:8px; letter-spacing:.27em; }
.menu-invitation { text-align:center; font-size:11px; letter-spacing:.13em; color:#decab0; margin:10px 0 23px; text-shadow:0 2px 4px #0008; }
.mode-options { display:grid; gap:13px; }
.mode-card { display:flex; align-items:center; gap:20px; position:relative; width:100%; padding:18px 20px; text-align:left; min-height:113px; border:1px solid #bca17077; outline:1px solid #1a2131; outline-offset:3px; border-radius:3px; background:linear-gradient(110deg,#213b4de8,#162637e8); box-shadow:0 8px 22px #080f1f3d,inset 0 1px #e6d5b026; overflow:hidden; }
.mode-card:after { content:'✿'; position:absolute; right:17px; top:-13px; font-size:141px; color:#e4c27a0b; transform:rotate(-18deg); pointer-events:none; }
.mode-card:hover { transform:translateX(-5px); border-color:#eed09b; }
.mode-card.selected { border-color:#ffdfa0; outline-color:#cfa86e73; box-shadow:0 0 21px #e8b96426,inset 0 0 25px #d4ad5430; background:linear-gradient(110deg,#2b4859f7,#213144eb); }
.mode-emblem { display:grid; place-items:center; flex-shrink:0; width:61px; height:64px; color:#e6c17e; font:800 40px var(--serif); border:1px solid #d6b7786e; border-radius:2px; background:linear-gradient(135deg,#edc37d10,#ebc47702); box-shadow:inset 0 0 0 4px #e2b66e09; }
.mode-copy { position:relative; z-index:1; }
.mode-copy>strong { display:block; font:800 29px/1.3 var(--serif); letter-spacing:.12em; color:#fff0ce; }
.mode-english { display:block; font-size:7px; letter-spacing:.2em; margin-top:4px; color:#c5b28e; }
.mode-description { display:block; margin-top:9px; font-size:10px; color:#c9d5d9; }
.choice-circle { margin-left:auto; align-self:center; width:21px; height:21px; border:1px solid #ccb58b55; border-radius:50%; color:transparent; display:grid; place-items:center; font-size:12px; }
.selected .choice-circle { color:#2b3340; border-color:#eccc89; background:#edcf95; }
.sanma-card { background:linear-gradient(110deg,#503143ef,#302537ee); }
.sanma-card.selected { background:linear-gradient(110deg,#654052f7,#392b3bee); }
.sanma-card .mode-emblem { color:#efc2aa; border-color:#d7b39b55; }
.match-options { display:flex; align-items:center; gap:17px; margin-top:24px; }
.option-label { white-space:nowrap; color:#dec6a5; font-size:11px; text-shadow:0 1px 4px #0007; }
.segmented { display:flex; flex:1; border:1px solid #cab28b45; border-radius:3px; padding:3px; gap:3px; background:#111d2ee8; }
.segmented>button { flex:1; font-size:12px; white-space:nowrap; padding:9px 8px; border-radius:2px; color:#afbac5; }
.segmented>button.selected { color:#ffe7ac; background:#55607770; box-shadow:inset 0 0 0 1px #d3b98470; }
.mode-summary { text-align:center; font-size:11px; color:#d8c8ac; line-height:1.8; margin:16px 0 13px; text-shadow:0 1px 4px #000; }
.mode-summary>span { color:#bfb7a9; }
.mode-summary>small { display:block; font-size:10px; color:#b5b8b8; }
.start-game { display:flex; align-items:center; justify-content:center; position:relative; width:100%; min-height:76px; gap:27px; border:1px solid #fff0bb; outline:1px solid #bb8d4c; outline-offset:3px; border-radius:3px; background:linear-gradient(105deg,#b57f3e,#f0cf8b 40%,#e9bf72 80%,#c3914c); color:#503721; box-shadow:0 5px 0 #6b492e,0 8px 22px #10142399,inset 0 0 0 4px #fff6c623; text-shadow:0 1px #ffedb8; }
.start-game>span:nth-child(2) { font:900 29px/1.2 var(--serif); letter-spacing:.2em; padding-left:.2em; }
.start-game small { display:block; font:8px var(--sans); letter-spacing:.25em; margin-top:5px; font-weight:600; }
.start-decoration { font-size:30px; opacity:.62; position:absolute; left:24px; }
.start-arrow { position:absolute; right:27px; font:39px Georgia,serif; opacity:.65; }
.start-game:hover { filter:brightness(1.1); transform:translateY(-3px); box-shadow:0 8px 0 #6b492e,0 10px 28px #0006; }
.start-game:active { transform:translateY(2px); box-shadow:0 3px 0 #6b492e; }
.menu-bottom { display:flex; justify-content:space-between; margin-top:16px; }
.menu-bottom .text-button { font-size:10px; padding:6px 1px; color:#c8b798; text-shadow:0 2px 5px #000; }
.menu-bottom .text-button>span:first-child { border:1px solid #c2a77c77; border-radius:50%; width:15px; height:15px; display:grid; place-items:center; font-family:Georgia,serif; }
.lobby-bottom { position:absolute; left:calc(5.2% + 370px); right:6.5%; bottom:32px; display:flex; align-items:center; gap:25px; justify-content:flex-end; }
.small-stats { display:flex; align-items:center; gap:18px; padding:9px 13px; background:#151c2b86; border:1px solid #d8bd892b; border-radius:4px; color:#c7c8c2; font-size:10px; cursor:pointer; }
.small-stats b { font:19px Georgia,serif; color:#efd5a2; margin-right:3px; }
.stats-label { color:#d8ba83; font-size:11px; border-right:1px solid #c9b38238; padding-right:16px; }
.tip-button { font-size:10px; color:#d0bea0; text-shadow:0 1px 5px #000; white-space:nowrap; }
.falling-petals { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.falling-petals i { position:absolute; top:-20px; left:11%; width:9px; height:5px; border-radius:2px 90% 0 90%; background:#ffc7d1b3; animation:petal-fall 15s linear infinite; }
.falling-petals i:nth-child(2) { left:33%; animation-duration:19s; animation-delay:-5s; width:11px; height:7px; }
.falling-petals i:nth-child(3) { left:58%; animation-duration:17s; animation-delay:-9s; }
.falling-petals i:nth-child(4) { left:4%; animation-duration:20s; animation-delay:-13s; }
.falling-petals i:nth-child(5) { left:43%; animation-duration:13s; animation-delay:-3s; width:6px; height:4px; }

/* A full-viewport mahjong table. Dimensions share one board unit. */
body.playing { overflow:hidden; overscroll-behavior:none; }
.playing .site-header { display:none; }
.game-screen { --board:min(76vw,calc(100dvh - 128px),780px); --core:clamp(82px,calc(var(--board) * .23),180px); --rv:clamp(14px,calc(var(--board) * .038),30px); position:fixed; inset:0; height:100dvh; overflow:hidden; background:#183747; }
.play-layout,.table-column,.table-shell { position:absolute; inset:0; }
.mahjong-table { position:absolute; inset:0; overflow:hidden; background:radial-gradient(ellipse at 48% 42%,#355974 0%,#284861 38%,#1c354d 78%,#14273b 100%); }
.felt-texture { position:absolute; inset:0; opacity:.5; background:repeating-linear-gradient(25deg,#d3e6ed06 0,#d3e6ed06 1px,transparent 1px,transparent 3px),repeating-linear-gradient(115deg,#091c3914 0,#091c3914 1px,transparent 1px,transparent 3px); pointer-events:none; }
.table-edge { position:absolute; inset:0; border:12px solid #3b2c27; border-top-color:#655047; border-bottom-color:#463129; box-shadow:inset 0 0 0 2px #8b724950,inset 0 0 80px #0003; pointer-events:none; }
.table-emblem { position:absolute; top:47%; left:50%; transform:translate(-50%,-50%) rotate(-14deg); font-size:calc(var(--board) * .9); color:#a4bed105; pointer-events:none; }
.table-brand { position:absolute; left:23px; top:188px; writing-mode:vertical-rl; font:800 20px var(--serif); letter-spacing:.13em; color:#cdd7d427; pointer-events:none; }
.table-brand small { font:7px var(--sans); letter-spacing:.2em; margin-right:8px; }
.game-topbar { position:absolute; z-index:20; left:max(24px,env(safe-area-inset-left)); right:max(24px,env(safe-area-inset-right)); top:max(16px,env(safe-area-inset-top)); display:flex; justify-content:space-between; align-items:center; pointer-events:none; gap:12px; }
.game-breadcrumb,.game-top-tools { display:flex; align-items:center; gap:10px; pointer-events:auto; }
.game-breadcrumb { background:#12243a9c; padding:5px 14px 5px 7px; border:1px solid #b2c1c52b; border-radius:4px; font-size:11px; color:#d8e2e5; }
.game-breadcrumb>button { font-size:11px; padding:3px 8px; display:flex; align-items:center; gap:4px; color:#dcc79e; }
.game-breadcrumb>button>span { font:26px/1 Georgia,serif; }
.game-breadcrumb>strong { border-left:1px solid #b9b7a535; padding-left:13px; font-weight:500; }
.game-breadcrumb>span { font-size:10px; color:#a9becb; }
.game-top-tools { gap:6px; }
.game-top-tools>button:not(.icon-button) { padding:9px 11px; font-size:10px; border:1px solid #c0c7bd38; border-radius:4px; background:#12243a96; color:#d6dfdf; min-height:34px; }
.game-top-tools .icon-button { height:34px; width:34px; border-radius:4px; border-color:#c0c7bd38; background:#12243a96; color:#d7d9d0; }
.dora-rack { position:absolute; left:max(35px,env(safe-area-inset-left)); top:82px; display:flex; flex-direction:column; gap:8px; padding:10px 12px 12px; border:1px solid #bdc8c020; background:#12243a70; border-radius:4px; z-index:4; }
.dora-rack-label { font-size:10px; color:#bdcdd4; letter-spacing:.06em; }
.dora-tiles { display:flex; gap:3px; }
.dora-tiles .mahjong-tile { width:24px; border-radius:3px; }
.table-board { position:absolute; width:var(--board); height:var(--board); top:calc(50% - 45px); left:50%; transform:translate(-50%,-50%); z-index:3; }
.opponent { position:absolute; inset:0; pointer-events:none; }
.seat-card { position:absolute; width:100px; display:flex; flex-direction:column; align-items:center; gap:6px; color:#fbf4dc; text-align:center; }
.opponent-top .seat-card { left:75%; top:7%; }
.opponent-left .seat-card { left:-12%; top:48%; }
.opponent-right .seat-card { right:-12%; top:23%; }
.avatar { display:block; width:52px; height:52px; border-radius:5px; background-image:url('assets/portraits.webp'); background-repeat:no-repeat; background-size:400% auto; background-color:#c9b7b0; border:2px solid #d8c397; flex-shrink:0; box-shadow:0 3px 8px #07182966; }
.seat-avatar-wrap { position:relative; }
.seat-card .avatar { width:64px; height:72px; border-color:#a69878; border-radius:4px; }
.seat-card.active-turn .avatar { border-color:#ffe3a0; box-shadow:0 0 0 2px #dfa34655,0 0 24px #ffce733c; }
.seat-card.active-turn:before { content:''; position:absolute; top:28px; left:5px; border:5px solid transparent; border-left-color:#f8d990; }
.seat-wind { position:absolute; bottom:-4px; right:-6px; width:22px; height:24px; background:linear-gradient(#f2deae,#c3a671); color:#2b3b45; border:1px solid #ffe5b0; display:grid; place-items:center; font:800 15px var(--serif); border-radius:2px; box-shadow:0 2px 4px #0005; }
.seat-name { display:block; font-size:12px; text-shadow:0 2px 4px #0009; letter-spacing:.03em; }
.seat-name small { display:block; margin-top:3px; font-size:7px; letter-spacing:.18em; color:#97acbb; }
.seat-score { display:none; }
.seat-riichi { color:#fff1c7; font:600 9px var(--sans); padding:4px 12px; letter-spacing:.12em; background:linear-gradient(100deg,#aa4852,#71394f); box-shadow:0 2px 7px #10182766; border:1px solid #eebd9870; border-radius:2px; position:absolute; top:-13px; }
.back-row { position:absolute; display:flex; justify-content:center; gap:2px; width:max-content; }
.back-row .mahjong-tile { width:calc(var(--board) * .030); border-radius:3px; }
.back-row .tile-back i { font-size:calc(var(--board) * .02); }
.opponent-top .back-row { top:3%; left:50%; transform:translateX(-50%) rotate(180deg); }
.opponent-left .back-row { top:50%; left:3%; transform:translate(-50%,-50%) rotate(90deg); }
.opponent-right .back-row { top:50%; right:3%; transform:translate(50%,-50%) rotate(-90deg); }
.open-melds { position:absolute; display:flex; align-items:flex-end; gap:7px; width:max-content; max-width:75%; }
.opponent-top .open-melds { top:12%; left:32%; transform:rotate(180deg); transform-origin:center; }
.opponent-left .open-melds { top:75%; left:8%; transform:translate(-50%,-50%) rotate(90deg); }
.opponent-right .open-melds { top:25%; right:8%; transform:translate(50%,-50%) rotate(-90deg); }
.open-melds .mahjong-tile { width:calc(var(--board) * .031); }
.meld-group { display:inline-flex; gap:2px; align-items:flex-end; }
.meld-called { transform:rotate(90deg) scale(.83); }
.nuki-pile { display:flex; position:absolute; align-items:center; gap:2px; }
.nuki-pile .mahjong-tile { width:calc(var(--board) * .03); }
.nuki-pile small { color:#edcf9e; font-size:9px; }
.opponent-left .nuki-pile { top:33%; left:5%; transform:rotate(90deg); }
.opponent-right .nuki-pile { top:67%; right:5%; transform:rotate(-90deg); }
.opponent-top .nuki-pile { top:10%; left:68%; transform:rotate(180deg); }
.river { position:absolute; display:grid; grid-template-columns:repeat(6,var(--rv)); gap:2px; align-content:start; justify-content:start; width:max-content; z-index:2; }
.river .mahjong-tile { width:var(--rv); border-radius:3px; box-shadow:0 3px 0 #a1a697,1px 4px 4px #07162866; }
.river-top { left:50%; bottom:calc(50% + var(--core) / 2 + 12px); transform:translateX(-50%) rotate(180deg); }
.river-bottom { left:50%; top:calc(50% + var(--core) / 2 + 12px); transform:translateX(-50%); }
.river-left { left:24%; top:50%; transform:translate(-50%,-50%) rotate(90deg); }
.river-right { left:76%; top:50%; transform:translate(-50%,-50%) rotate(-90deg); }
.river-long { --rv:clamp(11px,calc(var(--board) * .03),23px); gap:1px; }
.river .river-riichi { transform:rotate(90deg) scale(.85); box-shadow:0 0 0 2px #e7b4a0,0 3px #979788; }
.river .river-called { opacity:.28; }
.river .river-tsumogiri { filter:brightness(.84); }
.river .river-last { outline:2px solid #ffe496; outline-offset:1px; box-shadow:0 0 12px #e9cc6873,0 3px #a8aa92; animation:tile-place .22s ease-out; }
.table-center { position:absolute; width:var(--core); height:var(--core); left:50%; top:50%; transform:translate(-50%,-50%); background:linear-gradient(135deg,#17212b,#0e1a24); border:4px solid #61717b; border-right-color:#34444f; border-bottom-color:#263542; border-radius:7px; box-shadow:0 5px 0 #0f1b2b,0 8px 14px #08152899,inset 0 0 0 1px #0a1117; color:#e7c783; }
.center-main { position:absolute; left:23%; right:23%; top:23%; bottom:23%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#1b2c3b; border:1px solid #7a949438; border-radius:3px; box-shadow:inset 0 0 10px #0b172b99; }
.center-round { font:800 clamp(12px,calc(var(--board) * .027),21px)/1.35 var(--serif); color:#f1d494; letter-spacing:.04em; white-space:nowrap; }
.center-meta { display:flex; gap:9px; font-size:8px; margin-top:4px; color:#95aeba; }
.center-meta>span { display:flex; align-items:center; gap:3px; }
.center-meta i { font-style:normal; color:#d8cba5; font-size:9px; }
.center-meta small { display:none; }
.center-meta b { font-size:10px; font-weight:500; }
.center-wall { display:flex; gap:4px; align-items:baseline; margin-top:4px; font-size:8px; color:#879da9; }
.center-wall b { color:#dbdfc9; font:20px/1.1 Georgia,serif; font-variant-numeric:tabular-nums; }
.center-seat { display:flex; justify-content:center; align-items:center; gap:5px; position:absolute; width:78%; height:21%; color:#a7c7d7; font-variant-numeric:tabular-nums; }
.center-seat-top { left:11%; top:0; transform:rotate(180deg); }
.center-seat-bottom { left:11%; bottom:0; }
.center-seat-left { left:-28.5%; top:39.5%; transform:rotate(90deg); }
.center-seat-right { right:-28.5%; top:39.5%; transform:rotate(-90deg); }
.center-seat-wind { font:800 clamp(9px,calc(var(--board) * .018),14px) var(--serif); color:#8499a4; }
.center-seat-score { font:500 clamp(11px,calc(var(--board) * .024),19px)/1 Georgia,serif; letter-spacing:.03em; color:#b0d1df; }
.center-seat-label { font-size:5px; max-width:24px; color:#647d8a; }
.center-seat.is-turn { background:#bd9f5333; box-shadow:inset 0 -2px #efc96b; }
.center-seat.is-turn .center-seat-wind,.center-seat.is-turn .center-seat-score { color:#ffe5a2; }
.center-seat.is-you .center-seat-label { color:#d3ba78; }

/* Tiles retain actual tile faces, with a warm ivory face and amber backs. */
.mahjong-tile { width:40px; height:auto; aspect-ratio:40/56; display:inline-flex; position:relative; flex-shrink:0; align-items:center; justify-content:center; padding:2px 1px; border:1px solid #c7c9bc; border-top-color:#ffffef; border-left-color:#ffffef; border-radius:4px; background:linear-gradient(110deg,#fffef3 0%,#f9f5e4 80%,#e3e2d2); color:#233543; box-shadow:0 4px 0 #bdc0ae,0 5px 3px #00132266,inset 0 0 1px #fff; vertical-align:middle; user-select:none; transform-origin:center; }
.mahjong-tile svg { width:100%; height:100%; overflow:visible; pointer-events:none; display:block; }
.tile-back { background:linear-gradient(115deg,#ecc26c,#bf8838); border-color:#f1d794; box-shadow:0 3px #9f7a43,0 4px 4px #0f1d28aa; }
.tile-back i { font:normal 21px var(--serif); color:#946b2a40; text-shadow:0 1px #f8d79188; }
.red-tile:after { content:''; position:absolute; right:2px; top:2px; width:3px; height:3px; background:#b13341; border-radius:50%; }
.tile-badge { position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); white-space:nowrap; background:#daaa51; color:#332e29; border:1px solid #ffe5a0; border-radius:2px; font-size:9px; padding:1px 4px; z-index:3; }
.hand-area { position:absolute; z-index:8; left:13%; right:9%; bottom:max(28px,env(safe-area-inset-bottom)); }
.hand-topline { display:flex; gap:15px; align-items:center; justify-content:flex-end; height:32px; margin-bottom:5px; }
.human-badge { position:absolute; display:flex; flex-direction:column; align-items:center; width:96px; left:-112px; bottom:10px; gap:5px; text-align:center; }
.human-badge .avatar { width:65px; height:73px; border-color:#f2d18a; }
.human-badge .human-wind { position:absolute; top:55px; right:10px; background:#e8cd91; color:#253743; border:1px solid #ffe7b5; width:23px; height:25px; display:grid; place-items:center; font:800 15px var(--serif); border-radius:2px; }
.human-badge>strong { font-size:11px; font-weight:500; text-shadow:0 1px 5px #000; }
.human-score { display:none; }
.you-label { color:#d4ba84; font-size:7px; letter-spacing:.1em; display:block; margin-top:4px; }
.hand-status { font-size:11px; color:#adc4cd; padding:4px 9px; border-radius:3px; background:#15253b66; white-space:nowrap; margin-right:auto; }
.hand-status:empty { display:none; }
.hand-status.tenpai { color:#ffe0a0; }
.status-dot { display:inline-block; width:5px; height:5px; background:currentColor; border-radius:50%; margin-right:6px; }
.furiten-badge { margin-left:9px; color:#ffc2b8; border-left:1px solid #bac1b948; padding-left:9px; }
.human-melds { display:flex; gap:9px; align-items:flex-end; justify-content:flex-end; margin-left:auto; }
.human-melds .mahjong-tile { width:clamp(20px,2.7vw,37px); }
.nuki-count { display:flex; align-items:center; gap:5px; color:#e5d5aa; font-size:10px; }
.hand-tiles { display:flex; align-items:flex-end; justify-content:center; gap:3px; padding:6px 0 7px; min-height:85px; }
.hand-tiles .mahjong-tile { width:calc((100% - 65px) / 14); max-width:69px; border-radius:5px; box-shadow:0 6px 0 #a8b0a2,0 7px 0 #667b7b,1px 10px 8px #07122299; transition:transform .12s,box-shadow .12s,filter .12s; }
.hand-tiles .mahjong-tile:disabled:not(.unavailable) { filter:brightness(.94); }
.hand-tiles .mahjong-tile:not(:disabled):hover { transform:translateY(-12px); filter:brightness(1.06); }
.hand-tiles .mahjong-tile.selected-tile { transform:translateY(-16px); border-color:#ffe5a1; box-shadow:0 6px #cbb571,0 7px #837147,0 0 0 2px #ffe39b,0 0 23px #d9b26299; }
.hand-tiles .mahjong-tile.riichi-allowed { border-color:#f4a8b4; box-shadow:0 6px #b17288,0 0 0 2px #f9b3c0aa; }
.hand-tiles .mahjong-tile.unavailable { filter:brightness(.6); }
.hand-tiles .mahjong-tile.recommended-tile { border-color:#f4d181; box-shadow:0 6px #b8995b,0 0 0 2px #f8d16faa,0 0 20px #ffdc7744; }
.drawn-tile { margin-left:18px; }
.hand-bottomline { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:11px; color:#92a9ba; font-size:10px; line-height:1.6; }
.hand-small-actions { display:flex; gap:12px; }
.hand-small-actions>button { font-size:11px; color:#d2d1ba; padding:3px 4px; }
.hand-small-actions>button:hover { color:#ffe9b6; }
.action-dock { position:absolute; z-index:12; right:7%; bottom:calc(max(28px,env(safe-area-inset-bottom)) + clamp(128px,10.8vw,162px)); display:flex; flex-direction:column; align-items:flex-end; gap:11px; max-width:70%; pointer-events:none; }
.action-prompt { color:#bfced4; font-size:11px; line-height:1.6; text-shadow:0 2px 4px #0b1627; background:linear-gradient(90deg,transparent,#14233985); padding:5px 10px 5px 18px; border-radius:3px; }
.action-prompt strong { color:#f5ddb0; font-weight:600; }
.action-prompt>span { margin-left:10px; color:#adc2cd; font-size:10px; }
.action-buttons { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; justify-content:flex-end; pointer-events:auto; }
.action-btn { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:78px; min-height:69px; padding:9px 15px 8px; border:1px solid #d3c294; outline:1px solid #263547; outline-offset:2px; color:#fff0cd; background:linear-gradient(135deg,#3a6478,#253f58); border-radius:3px; box-shadow:0 4px #142639,0 6px 12px #101c3566; text-shadow:0 2px 2px #11182766; }
.action-main { display:block; font:800 27px/1.2 var(--serif); letter-spacing:.05em; white-space:nowrap; }
.action-caption { display:block; color:#c3c6be; font-size:8px; margin-top:5px; letter-spacing:.1em; }
.action-btn:hover { transform:translateY(-4px); filter:brightness(1.18); }
.action-btn:active { transform:translateY(1px); }
.action-btn.action-riichi { background:linear-gradient(135deg,#966177,#633e60); border-color:#f1c3b3; }
.action-btn.action-win { min-width:101px; background:linear-gradient(135deg,#f2d396,#c69854); border-color:#ffebaf; color:#613b27; box-shadow:0 4px #7f5839,0 0 24px #ecc57b44; text-shadow:0 1px #fff2c088; }
.action-btn.action-win .action-main { font-size:34px; }
.action-win .action-caption { color:#765432; }
.action-btn.action-pass { min-width:70px; min-height:57px; border-color:#94a4ab75; background:linear-gradient(135deg,#304354,#223446); color:#cfdbdb; box-shadow:0 3px #162330; }
.action-pass .action-main { font:600 14px var(--sans); }
.action-pass .action-caption { font-size:7px; color:#8ba1b0; }
.action-btn.action-discard { background:linear-gradient(135deg,#477b70,#27574f); }
.action-btn .inline-meld { display:none; }
.auto-discard-label { font-size:10px; color:#9ab5c1; }
.table-message { position:absolute; left:50%; transform:translateX(-50%); bottom:18%; font-size:11px; color:#9bb0c1; white-space:nowrap; max-width:75%; overflow:hidden; text-overflow:ellipsis; display:none; }
.table-bottom { position:absolute; z-index:14; left:max(24px,env(safe-area-inset-left)); top:50%; transform:translateY(-40%); display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.game-switches { display:flex; flex-direction:column; gap:7px; }
.game-switches label { display:flex; gap:7px; align-items:center; min-height:35px; padding:6px 9px; background:#12233a7a; border:1px solid #c2cbc126; border-radius:3px; color:#a4bccb; font-size:10px; cursor:pointer; }
.game-switches input { position:absolute; opacity:0; width:1px; height:1px; }
.switch { width:11px; height:11px; border:1px solid #8197a080; background:#071b2d88; display:grid; place-items:center; border-radius:2px; }
.game-switches input:checked+.switch { background:#d0af68; border-color:#f4d891; box-shadow:0 0 5px #efd57f55; }
.game-switches input:checked+.switch:after { content:'✓'; color:#253244; font-weight:800; font-size:10px; }
.game-switches label:has(input:checked) { color:#f4d897; border-color:#baa9754d; }
.game-switches input:focus-visible+.switch { outline:2px solid #fce3ac; outline-offset:4px; }
.table-bottom>.text-button { font-size:10px; color:#91a5b1; padding:4px 8px; }
.table-quick-tools { position:absolute; right:max(24px,env(safe-area-inset-right)); bottom:max(31px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:5px; z-index:14; }
.table-quick-tools>button { font-size:10px; color:#a6bfcc; background:#182a3c; border:1px solid #bfc2ad29; border-radius:3px; min-width:59px; min-height:33px; }
.table-quick-tools>button>span { font-size:16px; margin-right:4px; color:#dcc58e; vertical-align:middle; }
.orientation-tip { display:none; }

/* Brief illustrated calls punctuate the table. */
.table-event { position:absolute; inset:0; z-index:24; pointer-events:none; display:flex; align-items:center; overflow:hidden; }
.call-animation { position:relative; width:100%; height:42%; display:flex; align-items:center; justify-content:center; background:linear-gradient(90deg,transparent,#192c50e8 23%,#162741f5 70%,transparent); box-shadow:0 -1px #e4c99088,0 1px #e4c99088; color:#fff4cb; animation:call-flash 1.5s ease both; overflow:hidden; }
.call-animation:before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(-12deg,transparent 0,transparent 18px,#aabbcc07 19px,#aabbcc07 20px); }
.call-portrait { height:160%; width:auto; aspect-ratio:3/4; background:url('assets/portraits.webp') 0 center/400% 100% no-repeat; mask-image:linear-gradient(90deg,transparent,black 16%,black 82%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,black 16%,black 82%,transparent); transform:rotate(-9deg) translateY(7%); margin-right:-5%; }
.call-copy { z-index:1; transform:skew(-7deg); text-shadow:0 3px #5b3651,0 0 24px #e5bc7a77; }
.call-title { display:block; font:900 clamp(50px,8vw,120px)/1.1 var(--serif); letter-spacing:.06em; }
.call-subtitle { display:block; font-size:13px; letter-spacing:.5em; margin-top:8px; color:#e0c895; }
.call-character-name { display:block; font-size:12px; margin-top:8px; color:#d4d7df; letter-spacing:.1em; }
.call-riichi { background:linear-gradient(90deg,transparent,#59334fe8 23%,#342947f5 70%,transparent); }
.call-win { background:linear-gradient(90deg,transparent,#5d4837e8 23%,#403447f5 70%,transparent); }
@keyframes character-arrive { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
@keyframes petal-fall { 0% { transform:translate(0,0) rotate(0); opacity:0; } 8% { opacity:1; } 90% { opacity:.8; } 100% { transform:translate(200px,105vh) rotate(620deg); opacity:0; } }
@keyframes tile-place { from { opacity:.6; translate:0 -8px; } to { opacity:1; translate:0 0; } }
@keyframes call-flash { 0% { opacity:0; transform:translateX(-50px) scale(1.02); } 12% { opacity:1; transform:translateX(0) scale(1); } 78% { opacity:1; transform:translateX(0); } 100% { opacity:0; transform:translateX(50px); } }

@media (min-width:1600px) { .lobby-menu { width:430px; right:9%; } .standing-character { left:21%; } .mode-card { min-height:127px; } .mode-copy>strong { font-size:32px; } .character-select { bottom:55px; } .character-intro { bottom:28%; } .hand-area { left:16%; right:12%; } }
@media (max-width:1100px) and (min-width:761px) { .lobby-menu { width:330px; right:4%; } .standing-character { left:10%; height:86%; } .character-intro { left:4%; bottom:28%; width:300px; } .character-select { left:4%; width:282px; } .mode-card { min-height:106px; gap:14px; } .mode-emblem { width:52px; height:59px; } .mode-copy>strong { font-size:26px; } .lobby-bottom { left:360px; right:4%; } .tip-button { display:none; } .header-nav { gap:0; } .nav-item { padding:10px; } .cpu-badge { display:none; } .brand-type { font-size:24px; } .table-bottom { left:18px; } .game-screen { --board:min(76vw,calc(100dvh - 145px)); } .seat-card .avatar { width:50px; height:58px; } .seat-card { width:80px; } .human-badge .avatar { width:52px; height:59px; } .human-badge { width:80px; left:-90px; } .human-badge .human-wind { top:43px; right:5px; } .game-top-tools { gap:4px; } .dora-rack { left:25px; } }

/* Phones in portrait keep every tile reachable; landscape uses the full table. */
@media (max-width:760px) and (orientation:portrait) {
  .site-header { height:77px; padding:0 19px; gap:8px; }
  .brand-type { font-size:24px; } .brand-type small { font-size:6px; } .brand-seal { width:33px; height:39px; font-size:25px; }
  .header-nav { display:none; } .header-tools { margin-left:auto; gap:6px; } .cpu-badge { display:none; } .icon-button { width:34px; height:34px; }
  .lobby-screen { height:100dvh; min-height:720px; }
  .lobby-backdrop { background-position:37% center; }
  .lobby-vignette { background:linear-gradient(0deg,#131c31 0%,#131b2ce8 37%,#11192755 56%,transparent 90%); }
  .standing-character { height:64%; left:calc(50% - 147px); bottom:auto; top:6%; }
  .character-intro { left:22px; top:auto; bottom:460px; width:calc(100% - 44px); }
  .character-intro h2 { font-size:31px; }
  .character-tag { font-size:10px; padding:3px 9px; margin-bottom:5px; }
  .character-speech { padding:9px 12px; font-size:11px; margin-top:8px; max-width:330px; }
  .lobby-menu { left:21px; right:21px; width:auto; top:auto; bottom:125px; transform:none; padding:0; }
  .menu-heading h1 { font-size:21px; letter-spacing:.16em; }
  .menu-heading .section-kicker,.menu-invitation { display:none; }
  .menu-heading { gap:16px; margin-bottom:15px; }
  .mode-options { grid-template-columns:1fr 1fr; gap:12px; }
  .mode-card { min-height:95px; padding:12px; gap:8px; outline-offset:2px; }
  .mode-emblem { width:31px; height:47px; font-size:28px; border:0; box-shadow:none; }
  .mode-copy>strong { font-size:22px; letter-spacing:.03em; }
  .mode-english { font-size:5px; letter-spacing:.08em; }
  .mode-description { font-size:8px; margin-top:6px; }
  .choice-circle { position:absolute; right:8px; top:7px; width:12px; height:12px; font-size:8px; }
  .mode-card:after { font-size:95px; right:-24px; top:18px; }
  .match-options { margin-top:17px; gap:15px; }
  .option-label { font-size:10px; }
  .segmented>button { font-size:11px; padding:7px; }
  .mode-summary { font-size:10px; margin:10px 0 9px; }
  .mode-summary>small { display:inline; margin-left:6px; font-size:8px; }
  .mode-summary>span { display:none; }
  .start-game { min-height:57px; }
  .start-game>span:nth-child(2) { font-size:25px; }
  .start-game small { font-size:6px; margin-top:3px; }
  .start-decoration { font-size:25px; }
  .menu-bottom { margin-top:10px; }
  .menu-bottom .text-button { font-size:9px; }
  .character-select { left:23px; bottom:19px; width:260px; }
  .character-select-heading { padding-bottom:7px; gap:10px; }
  .character-select-heading h2 { font-size:11px; }
  .character-select-heading>span { font-size:6px; }
  .character-grid { gap:12px; }
  .character-choice .character-portrait { height:53px; }
  .character-choice>strong { font-size:8px; margin-top:5px; }
  .lobby-bottom { left:auto; right:18px; bottom:38px; }
  .small-stats { padding:10px; display:block; text-align:center; background:#1c2c4366; }
  .small-stats .stats-label { padding:0; border:0; display:block; font-size:10px; }
  .small-stats>span:not(:first-child) { display:none; }
  .small-stats:before { content:'☷'; display:block; font-size:21px; color:#d9c393; margin-bottom:3px; }
  .tip-button { display:none; }
  .game-screen { --board:96vw; --core:96px; --rv:18px; }
  .table-edge { border-width:6px; }
  .table-board { top:44%; }
  .game-topbar { left:13px; right:13px; top:max(13px,env(safe-area-inset-top)); gap:7px; }
  .game-breadcrumb { gap:7px; padding:4px 8px 4px 4px; font-size:10px; }
  .game-breadcrumb>button { font-size:9px; padding:3px 4px; }
  .game-breadcrumb>strong { padding-left:7px; }
  .game-breadcrumb>span { font-size:8px; }
  .game-top-tools { gap:4px; }
  #game-sound-button,#fullscreen-button { display:none; }
  .game-top-tools #table-rules-button { display:inline-flex; align-items:center; justify-content:center; font-size:0; width:29px; padding:0; }
  .game-top-tools #table-rules-button::after { content:"役"; font-size:12px; }
  .game-top-tools>button:not(.icon-button) { min-height:31px; padding:7px; font-size:9px; }
  .game-top-tools .icon-button { width:30px; height:31px; }
  .dora-rack { left:16px; top:65px; gap:5px; padding:8px 10px; }
  .dora-rack-label { font-size:8px; }
  .dora-tiles { gap:2px; } .dora-tiles .mahjong-tile { width:19px; }
  .table-brand { display:none; }
  .seat-card { width:76px; gap:4px; }
  .seat-card .avatar { width:43px; height:50px; }
  .seat-name { font-size:10px; } .seat-name small { display:none; }
  .seat-wind { width:18px; height:20px; font-size:12px; right:-5px; }
  .opponent-top .seat-card { left:calc(50% - 38px); top:-10%; }
  .opponent-left .seat-card { left:0; top:5%; }
  .opponent-right .seat-card { right:0; top:5%; }
  .seat-card.active-turn:before { left:8px; top:18px; border-width:4px; }
  .opponent-top .back-row { top:8%; }
  .opponent-left .back-row { left:3%; top:57%; }
  .opponent-right .back-row { right:3%; top:57%; }
  .back-row { gap:1px; }
  .back-row .mahjong-tile { width:10px; border-radius:2px; }
  .back-row .tile-back i { display:none; }
  .river { gap:1.5px; }
  .river-left { left:20%; } .river-right { left:80%; }
  .river-long { --rv:14px; gap:1px; }
  .river-top { bottom:calc(50% + var(--core) / 2 + 10px); }
  .river-bottom { top:calc(50% + var(--core) / 2 + 10px); }
  .river .mahjong-tile { border-radius:2px; box-shadow:0 2px #a6aeaa,0 3px 3px #06172788; }
  .table-center { border-width:3px; border-radius:5px; }
  .center-round { font-size:14px; } .center-main { left:20%; right:20%; top:24%; bottom:24%; }
  .center-meta { gap:6px; margin-top:3px; font-size:6px; } .center-meta b,.center-meta i { font-size:7px; }
  .center-wall { font-size:6px; gap:2px; margin-top:3px; } .center-wall b { font-size:15px; }
  .center-seat { gap:3px; } .center-seat-score { font-size:12px; } .center-seat-wind { font-size:9px; } .center-seat-label { display:none; }
  .open-melds { gap:3px; } .open-melds .mahjong-tile { width:13px; }
  .opponent-top .open-melds { top:16%; left:62%; }
  .opponent-left .open-melds { left:5%; top:78%; }
  .opponent-right .open-melds { right:5%; top:31%; }
  .nuki-pile .mahjong-tile { width:14px; }
  .hand-area { left:12px; right:12px; bottom:max(56px,calc(env(safe-area-inset-bottom) + 22px)); }
  .hand-topline { height:33px; margin-bottom:10px; gap:8px; }
  .human-badge { position:relative; left:auto; bottom:auto; flex-direction:row; width:auto; gap:6px; text-align:left; }
  .human-badge .avatar { width:29px; height:33px; }
  .human-badge .human-wind { position:static; width:17px; height:20px; font-size:11px; }
  .human-badge>strong { font-size:10px; }
  .you-label { display:none; }
  .hand-status { font-size:9px; padding:4px 5px; margin-left:auto; margin-right:0; }
  .furiten-badge { margin-left:4px; padding-left:4px; }
  .human-melds { position:absolute; bottom:106px; right:0; gap:5px; }
  .human-melds .mahjong-tile { width:20px; }
  .hand-tiles { min-height:50px; padding:6px 0 5px; gap:1.5px; justify-content:center; }
  .hand-tiles .mahjong-tile { width:calc((100% - 29px) / 14); max-width:39px; border-radius:3px; padding:1px 0; box-shadow:0 4px #a5b1a7,0 6px 4px #071325; }
  .hand-tiles .mahjong-tile.selected-tile { transform:translateY(-12px); }
  .drawn-tile { margin-left:7px; }
  .hand-bottomline { margin-top:9px; font-size:9px; } .hand-small-actions { gap:9px; } .hand-small-actions>button { font-size:10px; }
  .action-dock { bottom:calc(max(56px,calc(env(safe-area-inset-bottom) + 22px)) + 134px); right:16px; left:16px; max-width:none; gap:8px; }
  .action-prompt { font-size:10px; }
  .action-buttons { gap:8px; }
  .action-btn { min-width:64px; min-height:61px; padding:8px 12px; }
  .action-main { font-size:24px; } .action-caption { font-size:7px; }
  .action-btn.action-win { min-width:80px; } .action-btn.action-win .action-main { font-size:29px; }
  .action-btn.action-pass { min-width:62px; min-height:48px; } .action-pass .action-main { font-size:12px; }
  .table-bottom { top:auto; bottom:max(14px,env(safe-area-inset-bottom)); left:14px; right:14px; transform:none; flex-direction:row; align-items:center; gap:8px; }
  .game-switches { flex-direction:row; gap:5px; }
  .game-switches label { font-size:8px; min-height:29px; padding:5px 6px; gap:5px; }
  .switch { width:10px; height:10px; }
  .table-bottom>.text-button { font-size:8px; margin-left:auto; padding:4px 0; }
  .table-quick-tools { top:72px; right:17px; bottom:auto; flex-direction:row; gap:5px; }
  .table-quick-tools>button { min-width:47px; min-height:32px; font-size:9px; }
  .table-quick-tools>button>span { font-size:13px; margin-right:2px; }
  .orientation-tip { display:block; position:absolute; left:0; right:0; top:122px; text-align:center; color:#8da3b4; font-size:8px; pointer-events:none; }
  .call-animation { height:32%; }
  .call-title { font-size:54px; } .call-subtitle { font-size:9px; } .call-character-name { font-size:9px; }
}

/* Compact landscape fits inside Safari's visible viewport, including its toolbars. */
@media (max-height:600px) and (orientation:landscape), (max-width:760px) and (orientation:landscape) {
  .site-header { height:53px; padding:0 max(22px,env(safe-area-inset-left)); gap:15px; }
  .brand-type { font-size:21px; } .brand-type small { font-size:5px; margin-top:4px; } .brand-seal { width:29px; height:34px; font-size:22px; }
  .header-nav { gap:2px; } .nav-item { font-size:10px; padding:7px 10px; } .header-tools { gap:5px; } .header-tools .icon-button { width:29px; height:29px; } .cpu-badge { display:none; }
  .lobby-screen { height:100dvh; min-height:340px; }
  .standing-character { height:107%; left:18%; bottom:-7%; }
  .character-intro { left:4%; bottom:31%; width:260px; }
  .character-tag { font-size:9px; margin-bottom:5px; }
  .character-intro h2 { font-size:29px; }
  .character-speech { font-size:9px; padding:8px 11px; margin-top:8px; }
  .character-select { left:4%; bottom:17px; width:240px; }
  .character-select-heading { padding-bottom:7px; } .character-select-heading h2 { font-size:10px; } .character-select-heading>span { font-size:6px; }
  .character-choice .character-portrait { height:45px; } .character-choice>strong { font-size:8px; margin-top:5px; } .character-grid { gap:12px; }
  .lobby-menu { width:310px; right:5%; top:53%; transform:translateY(-44%); padding:0; }
  .menu-heading h1 { font-size:23px; } .menu-heading .section-kicker { font-size:6px; } .menu-invitation { display:none; }
  .mode-options { gap:9px; margin-top:10px; grid-template-columns:1fr 1fr; }
  .mode-card { min-height:75px; padding:9px; gap:6px; outline-offset:2px; }
  .mode-emblem { width:30px; height:47px; font-size:25px; border:0; box-shadow:none; }
  .mode-copy>strong { font-size:19px; letter-spacing:0; } .mode-english { font-size:5px; letter-spacing:0; } .mode-description { font-size:7px; margin-top:5px; }
  .choice-circle { width:11px; height:11px; font-size:7px; position:absolute; top:6px; right:6px; }
  .mode-card:after { font-size:80px; right:-20px; top:0; }
  .match-options { margin-top:14px; gap:11px; } .option-label { font-size:9px; } .segmented { padding:2px; } .segmented>button { font-size:10px; padding:6px; }
  .mode-summary { font-size:9px; margin:10px 0 8px; line-height:1.5; } .mode-summary>small { font-size:8px; display:inline; margin-left:5px; } .mode-summary>span { display:none; }
  .start-game { min-height:51px; } .start-game>span:nth-child(2) { font-size:24px; } .start-game small { font-size:6px; margin-top:3px; }
  .menu-bottom { margin-top:11px; } .menu-bottom .text-button { font-size:9px; padding:3px 0; }
  .lobby-bottom { bottom:17px; right:calc(5% + 324px); left:auto; } .small-stats { font-size:8px; padding:8px; gap:8px; } .small-stats b { font-size:15px; } .small-stats .stats-label { font-size:9px; padding-right:8px; } .tip-button { display:none; }
  .game-screen { --board:min(67vw,calc(100dvh - 71px)); --core:82px; --rv:clamp(12px,calc(var(--board) * .043),19px); }
  .table-edge { border-width:6px; }
  .table-board { top:calc(50% - 25px); }
  .game-topbar { top:max(9px,env(safe-area-inset-top)); left:max(15px,env(safe-area-inset-left)); right:max(15px,env(safe-area-inset-right)); }
  .game-breadcrumb { gap:8px; font-size:9px; padding:3px 9px 3px 3px; }
  .game-breadcrumb>button { font-size:9px; padding:0 6px; } .game-breadcrumb>button>span { font-size:20px; } .game-breadcrumb>strong { padding-left:8px; } .game-breadcrumb>span { font-size:8px; }
  .game-top-tools>button:not(.icon-button) { min-height:28px; font-size:8px; padding:5px 8px; } .game-top-tools .icon-button { width:28px; height:28px; } .game-top-tools svg { width:16px; height:16px; }
  .dora-rack { top:53px; left:max(23px,env(safe-area-inset-left)); padding:7px 9px; gap:5px; } .dora-rack-label { font-size:8px; } .dora-tiles { gap:2px; } .dora-tiles .mahjong-tile { width:18px; }
  .table-brand { left:17px; top:145px; font-size:15px; }
  .seat-card { width:66px; gap:4px; } .seat-card .avatar { width:39px; height:44px; } .seat-name { font-size:9px; } .seat-name small { display:none; } .seat-wind { width:17px; height:19px; font-size:11px; right:-5px; }
  .seat-card.active-turn:before { left:5px; top:16px; border-width:4px; }
  .opponent-top .seat-card { left:83%; top:13%; } .opponent-left .seat-card { left:-29%; top:43%; } .opponent-right .seat-card { right:-29%; top:25%; }
  .seat-riichi { font-size:6px; padding:3px 8px; top:-11px; }
  .back-row { gap:1px; } .back-row .mahjong-tile { width:calc(var(--board) * .033); } .back-row .tile-back i { display:none; }
  .opponent-top .back-row { top:8%; } .opponent-left .back-row { left:1%; } .opponent-right .back-row { right:1%; }
  .river { gap:1px; } .river-top { bottom:calc(50% + var(--core) / 2 + 9px); } .river-bottom { top:calc(50% + var(--core) / 2 + 9px); } .river-left { left:23%; } .river-right { left:77%; }
  .river-long { --rv:clamp(9px,calc(var(--board) * .03),15px); }
  .river .mahjong-tile { border-radius:2px; padding:1px 0; box-shadow:0 2px #a5aaa4,0 3px 3px #07162666; }
  .table-center { border-width:3px; border-radius:4px; }
  .center-main { left:22%; right:22%; top:24%; bottom:24%; }
  .center-round { font-size:11px; } .center-meta { gap:5px; margin-top:3px; } .center-meta i,.center-meta b { font-size:6px; } .center-wall { font-size:5px; gap:2px; margin-top:2px; } .center-wall b { font-size:12px; }
  .center-seat { gap:3px; } .center-seat-score { font-size:10px; } .center-seat-wind { font-size:8px; } .center-seat-label { display:none; }
  .open-melds { gap:3px; } .open-melds .mahjong-tile { width:calc(var(--board) * .037); }
  .hand-area { left:16%; right:12%; bottom:max(13px,env(safe-area-inset-bottom)); }
  .hand-topline { height:15px; margin-bottom:3px; }
  .human-badge { left:-72px; bottom:4px; width:60px; gap:4px; }
  .human-badge .avatar { width:41px; height:46px; } .human-badge .human-wind { width:17px; height:19px; right:2px; top:31px; font-size:11px; } .human-badge>strong { font-size:9px; } .you-label { font-size:5px; margin-top:2px; }
  .hand-status { font-size:8px; padding:3px 7px; }
  .human-melds .mahjong-tile { width:19px; } .human-melds { gap:6px; } .nuki-count { font-size:8px; }
  .hand-tiles { gap:2px; padding:4px 0; min-height:42px; }
  .hand-tiles .mahjong-tile { width:calc((100% - 43px) / 14); max-width:41px; padding:1px 0; border-radius:3px; box-shadow:0 4px #a8b1a6,0 6px 4px #06122699; }
  .drawn-tile { margin-left:12px; }
  .hand-tiles .mahjong-tile.selected-tile { transform:translateY(-10px); }
  .hand-bottomline { margin-top:5px; font-size:8px; } .hand-small-actions { gap:10px; } .hand-small-actions>button { padding:1px 3px; font-size:9px; }
  .action-dock { right:5%; bottom:calc(max(13px,env(safe-area-inset-bottom)) + 94px); max-width:48%; gap:6px; }
  .action-prompt { font-size:9px; padding:3px 8px; } .action-prompt>span { font-size:8px; }
  .action-buttons { gap:7px; } .action-btn { min-width:55px; min-height:49px; padding:6px 10px; }
  .action-main { font-size:21px; } .action-caption { font-size:6px; margin-top:3px; }
  .action-btn.action-win { min-width:68px; } .action-btn.action-win .action-main { font-size:26px; }
  .action-btn.action-pass { min-height:41px; min-width:56px; } .action-pass .action-main { font-size:10px; } .action-pass .action-caption { font-size:6px; }
  .table-bottom { left:max(17px,env(safe-area-inset-left)); top:52%; gap:8px; } .game-switches { gap:4px; } .game-switches label { min-height:26px; font-size:8px; padding:4px 7px; gap:5px; } .switch { width:9px; height:9px; } .table-bottom>.text-button { font-size:8px; }
  .table-quick-tools { right:max(16px,env(safe-area-inset-right)); bottom:max(17px,env(safe-area-inset-bottom)); gap:4px; } .table-quick-tools>button { min-height:26px; min-width:50px; font-size:8px; } .table-quick-tools>button>span { font-size:12px; }
  .call-animation { height:46%; } .call-title { font-size:64px; } .call-subtitle { font-size:10px; } .call-character-name { font-size:9px; }
}
@media (max-width:370px) and (orientation:portrait) { .lobby-menu { left:17px; right:17px; } .mode-copy>strong { font-size:20px; } .mode-card { gap:5px; padding:10px 8px; } .character-select { width:237px; left:18px; } .brand-type { font-size:21px; } .game-screen { --core:90px; --rv:16px; } .hand-status { font-size:8px; } .game-breadcrumb { gap:5px; } .game-top-tools { gap:3px; } .action-btn { min-width:58px; padding:7px 10px; } .game-switches label { font-size:7px; padding:5px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } .falling-petals { display:none; } }
.rack-counters { display:flex; gap:19px; font-size:9px; color:#95aebc; padding-top:4px; }
.rack-counters b { margin-left:4px; color:#f1d99f; font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; }
.center-main .center-wall { margin-top:8px; }
@media(max-width:760px) and (orientation:portrait) { .rack-counters { gap:12px; font-size:8px; padding-top:2px; } .rack-counters b { font-size:9px; } .center-main .center-wall { margin-top:5px; } .orientation-tip { top:139px; } }
@media(max-height:600px) and (orientation:landscape), (max-width:760px) and (orientation:landscape) { .rack-counters { gap:11px; font-size:7px; padding-top:2px; } .rack-counters b { font-size:9px; margin-left:2px; } .center-main .center-wall { margin-top:5px; } }
@media(max-height:360px) and (orientation:landscape) {
  .game-screen { --board:min(67vw,calc(100dvh - 95px)); --core:74px; }
  .table-board { top:calc(50% - 33px - env(safe-area-inset-bottom) / 2); }
  .river-left { left:21%; } .river-right { left:79%; }
  .opponent-top .back-row { top:3%; }
  .hand-tiles .mahjong-tile { max-width:calc(100dvh * .093); }
  .center-seat { gap:2px; } .center-seat-score { font-size:9px; } .center-seat-wind { font-size:7px; }
  .center-round { font-size:10px; } .center-wall b { font-size:11px; }
  .center-main .center-wall { margin-top:4px; }
}
/* Open melds share the front tile rail. Calls occupy the separate row above. */
.human-melds { position:absolute; right:0; bottom:35px; max-width:66%; margin:0; z-index:2; }
.hand-area.has-melds .hand-tiles { justify-content:flex-start; }
.human-melds .meld-group { min-width:0; flex-shrink:1; }
.human-melds .mahjong-tile { min-width:0; flex-shrink:1; }
.nuki-status { display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding-left:8px; border-left:1px solid #bfc9b447; color:#e9d4a3; }
.nuki-status b { font-weight:500; }
@media(max-width:760px) and (orientation:portrait) {
  .game-screen { --rv:17px; }
  .opponent-left .seat-card,.opponent-right .seat-card { top:-10%; }
  .opponent-top .back-row { top:9%; }
  .opponent-top.has-melds .back-row { left:6%; transform:rotate(180deg); }
  .opponent-top .open-melds { right:8%; left:auto; top:9%; }
  .opponent-top .open-melds .mahjong-tile { width:11px; }
  .human-melds { bottom:28px; max-width:66%; gap:5px; }
  .human-melds .mahjong-tile { width:15px; }
  .nuki-status { margin-left:5px; padding-left:5px; font-size:8px; }
  .orientation-tip { top:137px; }
}
@media(max-width:370px) and (orientation:portrait) { .game-screen { --rv:16px; } .nuki-status { margin-left:3px; padding-left:3px; font-size:7px; } }
@media(max-height:600px) and (orientation:landscape), (max-width:760px) and (orientation:landscape) { .human-melds { bottom:22px; } .human-melds .mahjong-tile { width:19px; } .nuki-status { margin-left:6px; padding-left:6px; font-size:7px; } }