:root{color-scheme:dark;--bg:#111a22;--panel:#1b2932;--ink:#f3eddf;--muted:#a8b8ba;--gold:#e9c58b;--jade:#193e39;--line:#ffffff18;font-family:system-ui,-apple-system,"Yu Gothic",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);overscroll-behavior:none}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;min-height:44px;border:1px solid #ffffff28;border-radius:12px;background:#263943;color:var(--ink);padding:11px 18px;transition:background .15s,transform .15s}button:hover{background:#344d55}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ead19d;outline-offset:3px}button.primary{background:var(--gold);color:#28312e;border-color:var(--gold);font-weight:750;box-shadow:0 5px 25px #d1a66415}button.danger{background:#994e49;border-color:#d7917b;color:white}.subtle{background:transparent;color:var(--muted);border:0}input,select,textarea{background:#12212a;border:1px solid #617473;border-radius:10px;min-height:46px;color:var(--ink);padding:10px 13px;width:100%}textarea{min-height:100px;resize:vertical}input[type=checkbox]{width:auto;min-height:0}input[type=range]{padding:0;accent-color:var(--gold)}label{display:grid;gap:8px;color:#d1dcdb;font-size:13px}a{color:var(--gold);text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2{letter-spacing:.04em}h1{font-weight:650;font-size:clamp(28px,3.5vw,48px);line-height:1.5}p{line-height:1.85}.quiet{color:var(--muted);font-size:13px}.eyebrow{font-size:10px;letter-spacing:.25em;color:var(--gold);font-weight:700}#app{min-height:100dvh}.game-header{height:76px;display:flex;align-items:center;gap:22px;padding:10px max(24px,env(safe-area-inset-right)) 10px max(24px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:#111a22;position:relative;z-index:10}.wordmark{font-size:19px;font-weight:850;letter-spacing:.06em;line-height:1;background:none;border:0;padding:5px 0;min-width:64px}.wordmark span{display:block;font-size:9px;letter-spacing:.34em;color:var(--gold);margin-top:6px}.game-heading{display:grid;gap:3px;flex:1}.game-heading small{font-size:9px;color:var(--muted);letter-spacing:.14em}.game-heading b{font-size:14px}.header-tools{display:flex;gap:8px}.header-tools button{background:transparent;padding:8px 12px;font-size:12px}#voice-button.on{color:var(--gold);border-color:#b39860}#connection{position:fixed;bottom:3px;right:8px;z-index:90;font-size:9px;color:#acc4c0;pointer-events:none}#connection.offline{color:#f7b58a;background:#281814;padding:3px 6px;border-radius:4px}#toast{position:fixed;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#e8d7b7;color:#202c30;border-radius:12px;box-shadow:0 7px 30px #0006;max-width:90vw;width:max-content;padding:14px 22px;font-size:13px;line-height:1.6;z-index:150;opacity:0;pointer-events:none;transition:all .2s}#toast.show{opacity:1;transform:translate(-50%,0)}
.home{max-width:1060px;margin:auto;padding:45px 32px 30px}.home-intro h1{margin:14px 0;font-size:48px;line-height:1.32;letter-spacing:.05em}.home-intro h1 em{font-style:normal;color:var(--gold)}.home-intro p{color:var(--muted);font-size:14px}.game-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0}.game-card{text-align:left;min-width:0;overflow:hidden;position:relative;padding:20px 25px 22px;border-radius:22px;border:1px solid #789b862b;background:linear-gradient(145deg,#254a42,#183832);box-shadow:0 12px 50px #0002}.game-card:hover{background:linear-gradient(145deg,#315e51,#20463e)}.game-card.active{border-color:#d9b580;box-shadow:0 0 0 1px #d9b58044,0 12px 45px #0003}.game-card.ship-card{background:linear-gradient(145deg,#293c61,#172640)}.game-card h2{font-size:24px;margin:9px 0}.game-card p{font-size:12px;color:#b9cbcc;margin:0}.game-tag{font-size:10px;letter-spacing:.12em;color:#e8dcbf}.card-art{height:145px;position:relative;display:flex;align-items:center;justify-content:center}.tile-fan .tile{width:62px;height:86px;margin:0 -3px;box-shadow:0 12px 0 #b4a880,0 14px 18px #0004;transform:rotate(-15deg) translateY(4px)}.tile-fan .tile:nth-child(2){transform:rotate(-7deg) translateY(-5px)}.tile-fan .tile:nth-child(3){transform:translateY(-10px)}.tile-fan .tile:nth-child(4){transform:rotate(7deg) translateY(-5px)}.tile-fan .tile:nth-child(5){transform:rotate(15deg) translateY(4px)}.moon{position:absolute;right:45px;top:10px;border-radius:50%;width:55px;height:55px;background:#e9dcbc;box-shadow:0 0 50px #eee2ab33}.airship{position:absolute;left:calc(50% - 85px);top:25px;width:170px;height:65px;border-radius:60% 70% 65% 55%;background:repeating-linear-gradient(90deg,#c79e68 0 24px,#dcc5a0 24px 47px);box-shadow:inset 0 -18px 25px #4b46534d,0 16px 40px #060b2366;transform:rotate(-8deg)}.airship:before{content:'';position:absolute;right:-14px;top:23px;border-left:24px solid #d6bb8d;border-top:12px solid transparent;border-bottom:12px solid transparent}.airship span{position:absolute;width:85px;height:24px;border-radius:5px 5px 25px 25px;background:#886d4f;top:70px;left:43px;box-shadow:0 -9px 0 -6px #bfa777}.airship span:after{content:'• • • •';position:absolute;left:16px;top:-2px;color:#f3d395}.cloud{position:absolute;width:100px;height:12px;border-radius:100%;background:#9fb9c42b;filter:blur(5px)}.c1{left:20px;bottom:22px}.c2{right:12px;bottom:47px}.entry-panel{padding:23px 26px;background:#1b2932;border:1px solid var(--line);border-radius:20px;display:grid;grid-template-columns:1fr 1.3fr;gap:20px}.entry-options{display:flex;align-items:end;gap:13px}.entry-options label{flex:1}.entry-options button{min-width:190px}.entry-options button span{margin-left:28px}.join-row{grid-column:1/-1;display:flex;gap:12px;border-top:1px solid var(--line);padding-top:20px}.join-row input{max-width:280px;letter-spacing:.12em}.entry-panel .quiet{grid-column:1/-1;margin:0}.home-footer{display:flex;justify-content:center;align-items:center;gap:15px;padding-top:22px;font-size:11px;flex-wrap:wrap}.home-footer button{border:0;background:transparent;font-size:11px;color:var(--muted);padding:8px}.lobby{max-width:840px;padding:36px 24px 50px;margin:auto;text-align:center}.lobby h1{margin:8px 0}.invite-code{display:block;margin:20px auto 28px;background:#1c2a31;border:1px solid #b99b67;min-width:260px}.invite-code span{display:block;font-size:30px;letter-spacing:.27em;margin-left:.27em;font-weight:650;color:var(--gold)}.invite-code small{display:block;font-size:10px;color:var(--muted);margin-top:7px}.lobby-seats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.lobby-seat{background:#1c2a33;padding:18px 8px;border:1px solid var(--line);border-radius:14px;display:grid;justify-items:center;gap:8px}.lobby-seat b{font-size:13px;overflow-wrap:anywhere}.lobby-seat small{font-size:10px;color:var(--muted)}.lobby-seat.empty{border-style:dashed;opacity:.6}.avatar{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:17px;background:color-mix(in srgb,var(--p,#678b8c) 25%,#182633);border:1px solid color-mix(in srgb,var(--p,#678b8c) 65%,transparent);color:var(--p,#92aeac);font-weight:750;font-size:19px;position:relative;flex-shrink:0}.speak-ring{position:absolute;inset:-5px;border-radius:22px;border:2px solid transparent}.speak-ring.speaking{border-color:#94dbc0;box-shadow:0 0 15px #69d7af66}.lobby-guide{margin:25px 0;text-align:left;background:#142129;padding:20px 24px;border-radius:16px;border:1px solid var(--line)}.lobby-guide p{font-size:13px;color:var(--muted);margin:8px 0 14px}.lobby-guide button{font-size:12px;margin-right:10px}.lobby-actions{display:flex;gap:10px;justify-content:center}.lobby-actions .primary{min-width:240px}
.tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(100deg,#fffdf0,#eae6d4);border:1px solid #c9c7b0;border-radius:5px;width:42px;height:57px;box-shadow:0 4px 0 #b4aa87,0 5px 3px #0004;color:#283439;position:relative;flex-shrink:0;line-height:1}.tile b{font-family:serif;font-size:22px;font-weight:800}.tile em{font-family:serif;font-size:20px;font-style:normal;color:#af433b;margin-top:2px}.tile svg{height:90%;width:94%}.tile .honor{font-size:30px}.tile .z6{color:#26744f}.tile .z7{color:#b34134}.tile .z5{color:#597897}.tile.red b{color:#b5473c}.tile.small{width:22px;height:31px;border-radius:3px;box-shadow:0 2px 0 #b0a680}.tile.small b{font-size:12px}.tile.small em{font-size:11px}.tile.small .honor{font-size:17px}.tile.back{background:linear-gradient(120deg,#477d6d,#316457);border:2px solid #d4d4b9}.mahjong-screen{height:calc(100dvh - 76px);min-height:560px;display:flex;flex-direction:column;background:#101c22}.table-felt{flex:1;min-height:350px;max-height:660px;position:relative;background:radial-gradient(ellipse at 50% 48%,#28584b,#153d36 65%,#16322f);border:10px solid #243635;box-shadow:inset 0 0 0 1px #8490794f,inset 0 0 80px #0005;overflow:hidden}.table-felt:before{content:'';position:absolute;inset:18px;border:1px solid #d6c89113;border-radius:45%}.seat{position:absolute;min-width:120px;z-index:3;display:flex;flex-direction:column;gap:3px}.seat-name{display:flex;gap:6px;align-items:center;font-size:11px}.seat-name small{font-size:8px;color:#c0cec0}.avatar-dot{display:inline-flex;align-items:center;justify-content:center;background:var(--p);color:#20382f;width:25px;height:25px;border-radius:9px;font-style:normal;font-weight:700}.seat-wind{background:#17342e;border:1px solid #758e64;border-radius:5px;padding:4px;color:#dfcb8c}.score{font-size:19px;letter-spacing:.03em;color:#ebdfba}.seat-bottom{left:calc(50% - 65px);bottom:10px}.seat-top{left:calc(50% - 65px);top:10px}.seat-left{left:12px;top:42%}.seat-right{right:12px;top:42%;text-align:right}.seat.turn .seat-wind{background:#e8c58b;color:#223f32;box-shadow:0 0 18px #e6c58566}.riichi-mark{color:#f4d096;font-size:10px}.table-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;padding:12px;text-align:center;background:#112d29;border:1px solid #8b946f88;border-radius:14px;color:#d3dfcb;box-shadow:0 4px 16px #0002}.table-center>span{font-size:13px;letter-spacing:.17em}.table-center>b{display:block;font-size:28px;font-weight:650}.table-center>b small{font-size:10px;margin-left:4px}.table-center>div{font-size:10px}.dora{display:flex;justify-content:center;align-items:center;gap:3px;padding-top:8px}.dora small{font-size:8px;writing-mode:vertical-rl}.dora .tile{width:18px;height:26px}.river{display:grid;grid-template-columns:repeat(6,22px);gap:3px;position:absolute}.river-bottom{top:calc(50% + 92px);left:calc(50% - 73px)}.river-top{bottom:calc(50% + 92px);left:calc(50% - 73px);transform:rotate(180deg)}.river-left{top:calc(50% - 60px);right:calc(50% + 100px);transform:rotate(90deg)}.river-right{top:calc(50% - 60px);left:calc(50% + 100px);transform:rotate(-90deg)}.discard{height:31px;display:inline-block}.discard.called{opacity:.25}.discard.declared .tile{outline:2px solid #e7b762}.melds{display:flex;gap:1px}.melds .tile{width:17px;height:25px}.hand-area{padding:10px 18px max(22px,env(safe-area-inset-bottom));background:linear-gradient(#1b2b30,#111b23);border-top:1px solid #8c9a7644;position:relative;z-index:4}.turn-instruction{max-width:900px;display:flex;justify-content:space-between;gap:12px;margin:0 auto 12px;color:#ceccb8;font-size:11px}.turn-time{color:var(--gold);white-space:nowrap}.hand{display:flex;justify-content:center;gap:4px;min-height:68px;align-items:end}.hand-tile{padding:0;background:transparent!important;border:0;min-width:44px;min-height:64px;border-radius:5px}.hand-tile .tile{width:43px;height:59px}.hand-tile:disabled{opacity:1}.hand-tile.selected{transform:translateY(-10px)}.hand-tile.selected .tile{outline:3px solid #edc87f;box-shadow:0 0 15px #edc87f55}.hand-tile.drawn{margin-left:10px}.call-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:44px}.call-actions>button{font-size:12px;padding:9px 14px}.call-tiles{display:inline-flex;margin-left:8px;gap:1px;vertical-align:middle}.round-result{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);z-index:5;width:min(380px,90vw);background:#17232bf5;border:1px solid var(--gold);box-shadow:0 20px 60px #0008;border-radius:16px;text-align:center;padding:24px;display:grid;gap:12px}.round-result>b{font-size:29px;color:var(--gold)}.round-result>span{font-size:13px;line-height:1.8}.round-result>strong{font-size:25px}.round-result>small{font-size:11px;color:var(--muted)}
.ship-screen{height:calc(100dvh - 76px);position:relative;overflow:hidden;background:#102033}.ship-screen canvas{width:100%;height:100%;display:block;touch-action:none}.ship-hud{position:absolute;left:20px;right:20px;top:18px;display:flex;gap:12px;align-items:center;font-size:11px;pointer-events:none}.role-pill{border:1px solid #91cbb2;background:#17372fdd;color:#c7eddc;padding:6px 12px;border-radius:20px;font-weight:700}.role-pill.shade{background:#4d222cdd;border-color:#bc7d86;color:#f3cbd0}.progress{height:6px;flex:1;max-width:180px;background:#ffffff22;border-radius:6px;overflow:hidden}.progress i{height:100%;display:block;background:#b3d9a6}.ship-objective{position:absolute;left:20px;top:68px;max-width:calc(100% - 40px);background:#102131de;border-left:2px solid #d4bd7d;padding:9px 14px;display:grid;gap:4px;pointer-events:none}.ship-objective b{font-size:12px;font-weight:650}.ship-objective small{font-size:10px;color:#b6c7cb}.ship-objective button{min-height:24px;padding:0 6px;font-size:10px;background:none;border:0;color:#e4ca8f;pointer-events:auto}.alert{color:#f6b28e}.joystick{position:absolute;left:max(25px,env(safe-area-inset-left));bottom:max(35px,env(safe-area-inset-bottom));width:112px;height:112px;border-radius:50%;border:1px solid #c7d7d85c;background:radial-gradient(#294654aa,#18273599);touch-action:none;user-select:none;box-shadow:inset 0 0 25px #a4c3c122}.joystick i{position:absolute;top:34px;left:34px;width:44px;height:44px;border:1px solid #acc7bd99;background:#6a8a8dbb;border-radius:50%;pointer-events:none}.joystick small{position:absolute;bottom:-23px;width:100%;text-align:center;color:#cad9d8;font-size:10px;pointer-events:none}.ship-actions{position:absolute;bottom:max(40px,env(safe-area-inset-bottom));right:max(20px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:8px;max-width:155px}.ship-actions button{box-shadow:0 5px 20px #0004;min-height:48px;font-size:13px;background:#223746ed}.role-reveal{min-height:calc(100dvh - 76px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse,#2d514b,#111a22 70%);padding:28px}.role-reveal.shade{background:radial-gradient(ellipse,#49333e,#111a22 70%)}.role-symbol{font-size:95px;color:var(--gold);margin:15px}.role-reveal h1{font-size:42px}.role-reveal p{font-size:15px;color:#c6d4d4}.role-reveal small{font-size:11px;color:var(--muted)}.role-reveal>b{margin-top:25px;color:var(--gold)}.meeting{max-width:1100px;margin:auto;padding:30px 26px}.meeting-heading{position:relative;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:24px}.meeting-heading h1{font-size:27px;margin:8px 0}.meeting-heading>[data-countdown]{position:absolute;right:0;top:25px;color:var(--gold);font-size:22px}.meeting-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:25px}.voting-seats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:start}.vote-person{display:grid;justify-items:center;gap:8px;padding:18px 10px;background:#1c2c35}.vote-person:disabled{opacity:1}.vote-person.eliminated{opacity:.4}.vote-person.voted{border-color:var(--gold);background:#453d2c}.vote-person b{font-size:12px}.vote-person small{font-size:10px;color:var(--muted)}.skip-vote{grid-column:1/-1}.discussion{background:#17252f;border:1px solid var(--line);border-radius:16px;padding:15px;display:flex;flex-direction:column;max-height:65dvh;min-height:320px}.chat-log{flex:1;overflow:auto;min-height:120px}.chat-log p{padding:8px 0;border-bottom:1px solid var(--line);margin:0;font-size:12px;display:grid;gap:4px}.chat-log p b{font-size:10px;color:var(--gold)}#chat-form{display:flex;gap:6px;padding-top:12px}#chat-form input{min-width:0;font-size:12px}#chat-form button{font-size:12px;padding:7px 12px}.match-result{max-width:680px;margin:auto;padding:55px 24px;text-align:center}.match-result h1{margin-top:12px}.result-list{display:grid;gap:10px;margin:25px 0}.result-list>div{display:flex;gap:15px;align-items:center;padding:15px;background:#1e3039;border:1px solid var(--line);border-radius:14px}.result-list strong{margin-left:auto;color:var(--gold)}.match-result>button{margin:5px}.waiting{display:grid;place-content:center;text-align:center;min-height:65dvh}.spinner{width:35px;height:35px;border:2px solid #ffffff22;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{to{transform:rotate(360deg)}}
.modal-backdrop{position:fixed;inset:0;background:#060c12bf;backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.modal{background:#1b2b35;border:1px solid #96a59055;border-radius:22px;width:min(560px,100%);max-height:88dvh;display:flex;flex-direction:column;box-shadow:0 22px 90px #0006}.modal>header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}.modal>header h2{font-size:18px;margin:0}.modal>header button{font-size:22px;border:0;background:none;padding:5px 10px}.modal-body{padding:22px;overflow:auto;font-size:14px;line-height:1.85}.modal-body h3{font-size:15px;color:var(--gold);margin-top:20px}.modal-body>button{margin:4px}.modal-body label{margin:12px 0}.task-target{text-align:center;font-size:35px;color:var(--gold);letter-spacing:.1em;margin:25px 0}.task-buttons{display:flex;gap:12px;justify-content:center}.task-buttons button{width:64px;height:64px;font-size:23px}.task-buttons button:active{background:#dac28e;color:#1f3433}.modal-body output{display:block;text-align:center;font-size:30px}.voice-controls{display:flex;flex-wrap:wrap;gap:6px}.volume-list label{display:flex;align-items:center;gap:12px}.volume-list input{min-width:60px;max-width:200px;margin-left:auto}.volume-list .avatar{width:35px;height:35px;font-size:14px}.volume-list span{font-size:12px}
@media(min-width:1000px){.home-intro{padding-top:10px}.home{display:grid;grid-template-columns:.8fr 1.2fr;gap:0 45px;align-items:center}.game-cards{grid-column:2;grid-row:1 / 3}.entry-panel{grid-column:1/-1}.home-footer{grid-column:1/-1}.home-intro h1{font-size:46px}.tile-fan .tile{width:48px;height:70px}.card-art{height:180px}.airship{width:140px;left:calc(50% - 70px)}.game-card h2{font-size:22px}.mahjong-screen .table-felt{max-height:none}.seat-left{left:8%}.seat-right{right:8%}}
@media(max-width:640px){.game-header{height:64px;padding:8px 14px;gap:12px}.wordmark{font-size:16px;min-width:52px}.game-heading b{font-size:12px}.header-tools{gap:4px}.header-tools button{padding:8px;font-size:11px;min-width:42px}.home{padding:27px 18px 30px}.home-intro h1{font-size:36px}.home-intro p{font-size:12px}.game-cards{gap:12px;margin:20px 0}.game-card{padding:12px 14px 17px;border-radius:17px}.game-card h2{font-size:18px}.game-card p{font-size:10px;min-height:32px}.game-tag{font-size:8px;letter-spacing:.05em}.card-art{height:115px}.tile-fan .tile{width:32px;height:48px;border-radius:4px;box-shadow:0 6px 0 #b4a880,0 10px 15px #0005}.tile-fan .tile b{font-size:16px}.tile-fan .tile em{font-size:14px}.moon{width:34px;height:34px;right:8px;top:6px}.airship{width:105px;height:43px;left:calc(50% - 55px);top:27px;background-size:32px}.airship span{width:60px;height:16px;left:24px;top:49px}.airship span:after{font-size:11px;left:10px;top:-4px}.airship:before{right:-9px;top:16px;border-left-width:15px;border-top-width:8px;border-bottom-width:8px}.entry-panel{grid-template-columns:1fr;padding:18px;gap:17px}.entry-options button{min-width:155px}.entry-options button span{margin-left:10px}.join-row input{min-width:0}.join-row button{flex-shrink:0;padding:8px 12px;font-size:12px}.lobby{padding:28px 18px}.lobby-seats{grid-template-columns:repeat(2,1fr)}.lobby-guide{padding:18px}.lobby-guide b{font-size:13px}.lobby-actions .primary{min-width:200px}.mahjong-screen{height:calc(100dvh - 64px);min-height:640px}.table-felt{min-height:355px;border-width:5px}.seat{min-width:90px}.seat-name{font-size:9px;gap:3px}.seat-wind{padding:3px}.avatar-dot{width:20px;height:20px;font-size:10px}.seat-left{left:7px;top:38%}.seat-right{right:7px;top:38%}.seat-bottom{bottom:6px;left:calc(50% - 50px)}.seat-top{top:6px;left:calc(50% - 50px)}.score{font-size:15px}.table-center{width:96px;padding:9px 4px}.table-center>b{font-size:23px}.river{grid-template-columns:repeat(6,14px);gap:2px}.river .tile.small{width:14px;height:20px}.river .tile.small b{font-size:8px}.river .tile.small em{font-size:7px}.river .tile.small .honor{font-size:12px}.discard{height:20px}.river-bottom{top:calc(50% + 66px);left:calc(50% - 48px)}.river-top{bottom:calc(50% + 66px);left:calc(50% - 48px)}.river-left{right:calc(50% + 58px);top:calc(50% + 25px)}.river-right{left:calc(50% + 58px);top:calc(50% + 25px)}.hand-area{padding:9px 10px 20px}.turn-instruction{font-size:10px;gap:8px;line-height:1.6;margin-bottom:5px}.hand{display:grid;grid-template-columns:repeat(7,40px);gap:5px;justify-content:center;min-height:118px}.hand-tile{min-width:40px;min-height:52px}.hand-tile .tile{width:38px;height:49px}.hand-tile.drawn{margin-left:0}.hand-tile.selected{transform:translateY(-4px)}.call-actions{gap:6px;margin-top:7px}.call-actions>button{padding:8px 12px;min-height:44px}.ship-screen{height:calc(100dvh - 64px)}.ship-hud{left:12px;right:12px;top:12px;gap:8px;font-size:9px}.role-pill{padding:5px 9px;font-size:10px}.ship-objective{left:12px;top:57px;padding:8px 10px}.ship-objective b{font-size:11px}.joystick{width:100px;height:100px;left:22px;bottom:45px}.joystick i{top:28px;left:28px}.ship-actions{right:14px;bottom:40px;max-width:135px}.meeting{padding:20px 16px}.meeting-heading h1{font-size:22px}.meeting-heading>[data-countdown]{font-size:16px;top:0}.meeting-layout{grid-template-columns:1fr;gap:18px}.voting-seats{gap:8px}.vote-person{padding:12px 5px}.vote-person .avatar{width:40px;height:40px}.discussion{min-height:220px;max-height:42dvh}.modal-backdrop{padding:12px}.modal-body{padding:18px;font-size:13px}.modal>header{padding:12px 18px}.role-reveal{min-height:calc(100dvh - 64px)}.match-result h1{font-size:25px}.task-buttons{gap:8px}.task-buttons button{width:55px;height:55px}.home-footer{gap:5px}}
@media(max-height:500px) and (orientation:landscape){.game-header{height:52px}.mahjong-screen{height:calc(100dvh - 52px);min-height:0}.table-felt{min-height:220px;border-width:4px}.hand-area{padding:5px 12px 12px}.hand{display:flex;min-height:48px;gap:3px}.hand-tile{min-height:46px;min-width:33px}.hand-tile .tile{height:43px;width:31px}.hand-tile .tile b{font-size:17px}.hand-tile .tile em{font-size:15px}.turn-instruction{margin-bottom:2px}.call-actions{position:absolute;right:8px;bottom:70px;flex-direction:column;align-items:stretch}.call-actions>button{min-height:36px;padding:5px 10px}.table-center{width:90px;padding:5px}.table-center .dora{display:none}.table-center>b{font-size:20px}.river-top{bottom:calc(50% + 45px)}.river-bottom{top:calc(50% + 45px)}.seat-top{left:22px;top:8px}.seat-bottom{left:22px;bottom:8px}.seat-left{top:40%;left:22px}.seat-right{right:22px;top:40%}.ship-screen{height:calc(100dvh - 52px)}.joystick{width:86px;height:86px;bottom:20px}.joystick i{top:21px;left:21px}.joystick small{display:none}.ship-actions{bottom:18px;flex-direction:row;max-width:none}.role-reveal{min-height:calc(100dvh - 52px)}.role-symbol{font-size:45px;margin:6px}.role-reveal h1{font-size:30px;margin:5px}.role-reveal p{margin:5px}.meeting-layout{grid-template-columns:1fr 1fr}.discussion{max-height:70dvh}.vote-person{padding:7px}.vote-person .avatar{width:30px;height:30px}.meeting{padding:15px}.meeting-heading{margin-bottom:12px}}
.ship-map{display:block;width:100%;height:auto;background:#12202c;border-radius:14px;margin-bottom:12px}.concealed{display:flex;gap:1px;margin-top:4px;max-width:120px}.concealed i{display:block;width:8px;height:15px;flex-shrink:0;border-radius:2px;border:1px solid #c1b990;background:linear-gradient(135deg,#6ca390,#3c7663);box-shadow:0 2px 0 #928d74}.seat-bottom .concealed{display:none}.table-felt:after{content:'星灯り麻雀';position:absolute;left:50%;bottom:20%;transform:translateX(-50%);font-family:serif;font-size:17px;letter-spacing:.25em;color:#dec6951c;pointer-events:none}.seat-name>span:not(.seat-wind){max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.concealed{max-width:90px}.concealed i{width:5px;height:10px}.seat-name>span:not(.seat-wind){max-width:64px}}
@media(max-width:640px) and (max-height:740px) and (orientation:portrait){.mahjong-screen{min-height:0}.table-felt{min-height:260px}.hand-area{padding-bottom:max(10px,env(safe-area-inset-bottom))}.hand{min-height:104px;gap:3px}.hand-tile{min-height:48px}.hand-tile .tile{height:45px}.call-actions{margin-top:5px}.turn-instruction{font-size:9px}.table-center{padding:5px 3px}.seat-top{top:3px}.seat-bottom{bottom:3px}.table-felt:after{display:none}}
.compact-dora{display:none}@media(max-height:500px) and (orientation:landscape){.compact-dora{display:flex;gap:2px;margin-left:auto;align-items:center}.compact-dora:before{content:'ドラ表示';font-size:8px;margin-right:4px}.compact-dora .tile.small{width:14px;height:20px}.compact-dora .tile.small b{font-size:8px}.compact-dora .tile.small em{font-size:7px}.compact-dora .tile.small .honor{font-size:12px}.river{grid-template-columns:repeat(6,14px);gap:2px}.river .tile.small{width:14px;height:20px}.river .tile.small b{font-size:8px}.river .tile.small em{font-size:7px}.river .tile.small .honor{font-size:12px}.discard{height:20px}.river-top,.river-bottom{left:calc(50% - 47px)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.onboarding h3{font-size:23px;margin:18px 0}.onboarding>small{color:var(--muted);font-size:10px;letter-spacing:.18em}.guide-progress{display:flex;gap:5px;margin:0 0 17px}.guide-progress i{height:4px;flex:1;border-radius:3px;background:#ffffff18}.guide-progress i.on{background:var(--gold)}.guide-badge,.guide-combo{padding:22px 14px;margin:20px 0;border-radius:16px;background:linear-gradient(135deg,#29483f,#1a303b);color:#f1d9a3;text-align:center;font-size:15px;line-height:1.8}.guide-combo{display:flex;justify-content:center;gap:12px}.guide-combo span{padding:10px 6px;color:#244037;background:#f1ecd7;border-radius:6px}.guide-nav{display:flex;justify-content:flex-end;gap:8px}.guide-nav .primary{min-width:150px}.settings-list{display:grid;gap:0}.setting-row{display:flex!important;gap:15px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);margin:0!important}.setting-row span{display:grid;gap:3px}.setting-row small{font-size:11px;color:var(--muted)}.setting-row input{width:22px;height:22px;accent-color:var(--gold);flex-shrink:0}.history-row{display:grid;grid-template-columns:1fr auto;gap:5px;padding:14px 0;border-bottom:1px solid var(--line)}.history-row small{color:var(--muted);font-size:10px;grid-column:1/-1}.history-row strong{color:var(--gold)}.hand-coach{display:flex;justify-content:center;align-items:center;gap:7px;min-height:22px;font-size:10px;color:#d1d4bd;margin-top:5px}.hand-coach b{color:#f2ba98;font-size:9px}.wait-tiles{display:flex;gap:2px}.wait-tiles .tile.small{width:12px;height:17px}.wait-tiles .tile.small b{font-size:7px}.wait-tiles .tile.small em{font-size:6px}.wait-tiles .tile.small .honor{font-size:10px}#scene-cue{position:fixed;left:50%;top:100px;transform:translate(-50%,-10px);padding:14px 27px;color:#ffebbe;border:1px solid #c4a772;border-radius:14px;background:#183029ee;box-shadow:0 12px 40px #0004;z-index:70;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;text-align:center;font-weight:700;max-width:90vw;width:max-content}#scene-cue.show{opacity:1;transform:translate(-50%,0)}#scene-cue.win{background:#51412aef}#scene-cue.danger{background:#512c35ef}html[data-reduce="1"] *{animation:none!important;transition:none!important}body[data-native="mahjong"] [data-game="deduction"],body[data-native="deduction"] [data-game="mahjong"]{display:none}body[data-native="mahjong"] .game-cards,body[data-native="deduction"] .game-cards{grid-template-columns:1fr}body[data-native="mahjong"] .home-intro,body[data-native="deduction"] .home-intro{display:none}@media(max-width:640px) and (max-height:740px) and (orientation:portrait){.table-felt{min-height:235px}.hand-coach{font-size:8px;gap:3px;min-height:18px}.hand-coach b{font-size:8px}.call-actions .subtle{padding:7px 5px}}@media(max-height:500px) and (orientation:landscape){.hand-coach{position:absolute;left:20px;top:-24px;color:#e2dac5;margin:0}.table-felt{min-height:205px}}.game-card{padding-top:0!important}.game-card .card-art{height:170px;margin:0 -25px 15px;background-position:center 44%;background-size:cover;mask-image:linear-gradient(#000 70%,transparent)}.game-card .card-art>*{display:none}.game-card .tile-fan{background-image:url('./art/mahjong-title.webp')}.game-card .ship-art{background-image:url('./art/voyage-title.png')}.lobby{position:relative;isolation:isolate}.lobby:before{content:'';position:absolute;inset:0 -40px auto;z-index:-1;height:360px;background:linear-gradient(transparent,#111a22),var(--lobby-art) center 45%/cover;opacity:.35}.lobby-seats{margin-top:20px}.role-reveal{background-image:linear-gradient(#10232acb,#111a22f5),url('./art/voyage-title.png');background-size:cover;background-position:center}.role-reveal.shade{background-image:linear-gradient(#3b1728d9,#111a22f5),url('./art/voyage-title.png')}.role-symbol{filter:drop-shadow(0 0 30px #e9c58b33)}.keyboard-open .home-intro{display:none}@media(max-width:640px){.game-card .card-art{height:140px;margin:0 -14px 8px}}body[data-native="mahjong"] .game-card .card-art,body[data-native="deduction"] .game-card .card-art{height:200px}.vote-tally{width:min(360px,90vw);margin:16px auto;text-align:left}.vote-tally p{display:flex;justify-content:space-between;gap:20px;margin:0;padding:6px 14px;border-bottom:1px solid var(--line);font-size:14px}.vote-tally strong{color:var(--gold)}.meeting-reason{background:#263a43;border-left:3px solid var(--gold);padding:10px 16px;border-radius:8px;font-size:13px}.lobby:before{inset-inline:0}button[hidden]{display:none!important}.task-stage{padding:18px;border:1px solid #547176;border-radius:16px;background:linear-gradient(135deg,#253e43,#182b34)}.task-stage>small{font-size:9px;letter-spacing:.18em;color:var(--gold)}.task-stage>p{font-size:13px;margin-top:14px}.gauge{max-width:300px;margin:auto;text-align:center}.gauge svg{width:100%;display:block}.gauge span{font-size:13px;color:var(--muted)}.gauge output{font-size:24px;color:var(--gold);font-weight:700;margin:0 4px}.gauge-control{margin:20px 0!important}.gauge-control input{height:44px}.task-route,.task-slots{display:flex;align-items:center;justify-content:center;gap:7px;margin:20px 0}.task-route span{display:grid;text-align:center;color:var(--lamp);font-size:11px}.task-route b{font-size:24px}.task-route i{color:#8fa5a5;font-style:normal;font-size:13px}.task-slots i{width:42px;height:46px;border:1px dashed #7e9694;display:grid;place-items:center;font-style:normal;border-radius:7px;color:#6c8587}.task-slots i.filled{background:#304951;border:1px solid var(--lamp);color:var(--lamp)}.task-stage .task-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.task-buttons button{padding:8px 4px;min-height:64px;display:grid;gap:5px;place-items:center;color:var(--lamp);background:#12232c}.task-buttons button b{font-size:22px}.task-buttons button span{font-size:12px}.cargo .task-buttons button{background:#d9d2b7;color:#273b43;box-shadow:0 3px 0 #8e8d79}.task-stage .task-submit{display:block;width:100%;margin-top:20px}#gauge-needle{transition:transform .12s}@media(max-height:600px){.gauge{max-width:200px}.task-stage{padding:10px}.task-route,.task-slots{margin:10px 0}}/* Generated material stays below all readable game elements. */
.table-felt{background:#123c31 url('./art/jade-felt-v1.png') center/100% 100%;border-color:#273d36;box-shadow:inset 0 0 0 1px #bda16b66,inset 0 0 55px #00130f77}
.table-felt:before{border-color:#d6c89118}
.seat-name,.score{text-shadow:0 1px 3px #00150f}
.table-center{background:linear-gradient(145deg,#1e4039,#102d29);border-color:#bba77699;box-shadow:0 5px 18px #00150f88,inset 0 1px #d8c78a20}
.hand-area{box-shadow:0 -5px 22px #0003}
/* Each game owns its entrance; the site's identity is carried into play. */
.game-entry{max-width:1160px;margin:auto;padding:0 24px 28px}.entry-hero{min-height:350px;position:relative;display:flex;align-items:end;isolation:isolate;overflow:hidden;border-radius:0 0 26px 26px;margin-bottom:24px}.entry-hero-art{position:absolute;inset:0;z-index:-2;background:center 46%/cover url('./art/mahjong-title.webp')}.entry-voyage .entry-hero-art{background-image:url('./art/voyage-title.png')}.entry-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#091f20d9,transparent),linear-gradient(0deg,#111a22,transparent 80%)}.entry-hero-copy{padding:35px;max-width:620px}.entry-hero h1{font-family:serif;font-size:48px;font-weight:600;letter-spacing:.13em;margin:14px 0;color:#fff0c9}.entry-hero p{font-size:15px;line-height:1.9;color:#eee8d5}.entry-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.entry-chips span{font-size:10px;border:1px solid #dec88c55;border-radius:20px;padding:5px 12px;background:#102326aa}.play-panel{background:linear-gradient(120deg,#21383d,#172a33);border:1px solid #bba57740;border-radius:22px;padding:24px;box-shadow:0 12px 40px #0002}.entry-profile{display:flex;align-items:center;gap:12px;margin-bottom:24px}.profile-orb{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#dac394;color:#18352e;font-weight:700}.entry-profile>div{display:grid;gap:4px}.entry-profile b{font-size:15px}.entry-profile small{font-size:10px;color:var(--muted)}.entry-profile a{margin-left:auto;color:#d8c697;font-size:11px;padding:10px}.entry-play-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}.entry-play-actions button{position:relative;text-align:left;padding:22px 46px 22px 22px;display:grid;gap:8px;border-radius:14px}.entry-play-actions b{font-size:20px}.entry-play-actions small{font-size:11px;font-weight:400;line-height:1.5}.entry-play-actions button>span{position:absolute;right:22px;top:30px;font-size:24px}.friends-play{background:#19363d;border-color:#81989188}.friend-options{margin-top:20px;border:1px solid #79928b44;border-radius:12px;padding:0 16px}.friend-options summary{cursor:pointer;padding:15px 0;font-size:12px;color:#d9dcca;min-height:44px}.friend-options .entry-options{margin:4px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}.friend-options .entry-options button{min-width:0}.friend-options .join-row{margin-bottom:18px;display:flex;gap:8px}.friend-options .join-row input{flex:1;min-width:0}.entry-learn{display:flex;gap:12px;justify-content:center;margin-top:20px}.entry-learn button{font-size:12px;background:none;border:0;color:#d7cbad}.entry-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:28px 0}.entry-steps>div{display:grid;gap:8px;padding:8px 14px;border-left:1px solid #c2b28566}.entry-steps small{font-size:11px;color:#c1ad7a;letter-spacing:.12em}.entry-steps b{font-size:14px}.entry-steps p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}.invite-notice,.entry-error{padding:16px;border:1px solid #c6ad77;border-radius:12px;margin-bottom:18px;font-size:13px}.invite-notice strong{letter-spacing:.15em}.invite-notice p{margin:8px 0 0;font-size:11px}.entry-error{border-color:#d28f7b;background:#482e2d}
@media(min-width:950px){.game-entry{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;padding-top:28px}.entry-hero{min-height:530px;grid-row:1/3;border-radius:22px;margin:0}.entry-hero-copy{padding:30px}.entry-hero h1{font-size:40px}.play-panel{align-self:start}.entry-steps{grid-column:2;gap:12px}.entry-steps>div{padding-left:10px}.game-entry>.home-footer{grid-column:1/-1}.entry-play-actions{grid-template-columns:1fr}.entry-play-actions button{padding:18px 46px 18px 20px}}
@media(max-width:640px){.game-entry{padding:0 14px 20px}.entry-hero{min-height:260px;margin:0 -14px 14px;border-radius:0}.entry-hero-copy{padding:24px 20px 18px}.entry-hero h1{font-size:34px;letter-spacing:.09em;margin:10px 0}.entry-hero p{font-size:12px}.entry-hero .eyebrow{font-size:9px}.entry-chips{margin-top:14px;gap:5px}.entry-chips span{font-size:9px;padding:4px 9px}.play-panel{padding:16px;border-radius:18px}.entry-profile{margin-bottom:18px;gap:9px}.entry-profile a{font-size:10px;padding:6px}.entry-play-actions{grid-template-columns:1fr;gap:10px}.entry-play-actions button{padding:17px 42px 17px 16px;gap:5px}.entry-play-actions b{font-size:17px}.entry-play-actions button>span{top:21px;right:18px}.entry-learn{gap:3px}.entry-learn button{padding:10px 8px;font-size:11px}.entry-steps{gap:12px;grid-template-columns:1fr;margin:22px 6px}.entry-steps>div{grid-template-columns:24px 1fr;gap:4px 10px;border:0;padding:0}.entry-steps small{grid-row:1/3}.entry-steps b{font-size:12px}.entry-steps p{font-size:11px}.friend-options{padding:0 10px}.friend-options .join-row{flex-direction:column}.friend-options .join-row button{min-height:44px}.friend-options summary{font-size:11px}}
.my-turn .turn-instruction{background:#e9c884;color:#17362c;border-radius:8px;padding:8px 12px;font-weight:700;box-shadow:0 0 20px #e9c88418}.my-turn .turn-time{color:#17362c;font-size:14px}.waiting-turn .turn-instruction{padding:8px 12px;border:1px solid #64827755;border-radius:8px}.turn-time{display:grid;place-items:center;min-width:38px;font-variant-numeric:tabular-nums}.ship-objective{max-width:calc(100% - 28px)}.ship-objective small{line-height:1.65}.ship-objective button{min-height:32px;padding:4px 10px;border:1px solid #c1aa7566;border-radius:8px;margin-top:4px}
.entry-profile>div{min-width:0}.entry-profile b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}.seat-name>span:not(.seat-wind){max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-seat b,.vote-person b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wordmark{min-width:62px}.wordmark span{font-size:7px;letter-spacing:.18em}@media(max-width:640px){.seat-name>span:not(.seat-wind){max-width:66px}.entry-profile b{max-width:170px}}
/* Private rebuild v2: generated table and ivory tile bodies, exact vector markings. */
.tile:not(.back){background:transparent url('./art/mahjong-tile-v2.webp') center/100% 100% no-repeat;border:0;box-shadow:0 2px 2px #00170a55;border-radius:4px;overflow:hidden;padding:4px 3px 7px}.tile .tile-face{width:100%;height:100%;display:block}.tile.small{padding:2px 2px 4px}.tile.back{background:linear-gradient(135deg,#46ab91,#14654e);box-shadow:0 3px 0 #ded3ac;border-color:#efe7d1}
.table-felt{background:#10382b url('./art/mahjong-table-v2.webp') center/100% 100%;border:0;min-height:300px;overflow:hidden}.table-felt:before,.table-felt:after{display:none}.table-layout{position:absolute;width:min(96%,calc(100dvh - 285px));aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);container-type:inline-size}.table-center{width:24%;padding:7px 3px;border-radius:10px;z-index:1}.table-center>b{font-size:clamp(19px,5cqw,30px)}.table-center>span{font-size:clamp(10px,2.4cqw,14px)}.table-center>div{font-size:9px}.dora{padding-top:4px}.dora .tile.small{width:clamp(13px,3.4cqw,21px);height:clamp(19px,4.9cqw,30px)}
.table-layout .river{grid-template-columns:repeat(6,min(4.6cqw,27px));gap:1px;z-index:2;transform-origin:center}.table-layout .river .tile.small{width:min(4.6cqw,27px);height:min(6.4cqw,38px)}.table-layout .discard{height:min(6.4cqw,38px)}.table-layout .river-bottom{left:50%;top:65%;transform:translateX(-50%)}.table-layout .river-top{left:50%;top:auto;bottom:65%;transform:translateX(-50%) rotate(180deg)}.table-layout .river-left{left:auto;right:65%;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center}.table-layout .river-right{right:auto;left:65%;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center}
.table-layout .seat{min-width:0;max-width:34%;gap:2px;background:#092a237a;border:1px solid #c5cc9f30;border-radius:9px;padding:5px 7px;backdrop-filter:blur(3px)}.table-layout .seat-top{left:50%;top:1%;transform:translateX(-50%)}.table-layout .seat-bottom{left:50%;bottom:0;transform:translateX(-50%)}.table-layout .seat-left{left:0;top:45%;max-width:20%}.table-layout .seat-right{right:0;top:45%;max-width:20%}.table-layout .seat-left .seat-name,.table-layout .seat-right .seat-name{flex-wrap:wrap;gap:3px}.table-layout .seat-name{font-size:10px}.table-layout .seat-name>span:not(.seat-wind){max-width:70px}.table-layout .score{font-size:clamp(12px,3cqw,20px)}.table-layout .seat-wind{padding:2px 4px}.table-layout .avatar-dot{width:20px;height:20px}.table-layout .concealed{max-width:100%;overflow:hidden}.table-layout .concealed i{width:5px;height:9px}.seat.turn{border-color:#ebc783;box-shadow:0 0 14px #ebc78344}.table-layout .seat-left .concealed,.table-layout .seat-right .concealed{display:none}
.hand-tile .tile{padding:5px 4px 10px}.hand-tile.selected{transform:translateY(-12px)}.hand-tile.selected .tile{outline:2px solid #ffd881;filter:drop-shadow(0 0 7px #ffce6477)}.hand-coach .tile.small{padding:1px 1px 2px}.round-result{backdrop-filter:blur(14px)}
.entry-voyage .entry-hero-art{background-image:url('./art/space-voyage-v2.webp')}.role-reveal{background-image:linear-gradient(#0a2532bb,#091526f5),url('./art/space-voyage-v2.webp')}.role-reveal.shade{background-image:linear-gradient(#461b36cd,#101526f5),url('./art/space-voyage-v2.webp')}.ship-screen{background:#081426}.ship-hud{background:#0a1c31dc;border:1px solid #72bcd14f;border-radius:12px;padding:10px 12px;backdrop-filter:blur(10px)}.ship-objective{top:86px;border:1px solid #93bdd43b;border-left:3px solid #ffd68b;border-radius:10px;background:#0c2134e8;box-shadow:0 5px 20px #0002}.ship-actions button{border-radius:15px;border:2px solid #acd5ec77;background:linear-gradient(#2a526b,#19364c);font-weight:700;min-height:56px}.ship-actions button.primary{background:linear-gradient(#ffdf97,#e5ad59);color:#263448;border-color:#fff0c5}.joystick{background:radial-gradient(#6994b033,#17364aaa);border:2px solid #b8e8ff77;box-shadow:0 4px 14px #0003,inset 0 0 0 14px #86c5de10}.joystick i{background:linear-gradient(#c8e5eeaa,#678ba5aa);box-shadow:0 4px 10px #06172f66}.meeting{max-width:1000px}.meeting-flow{display:flex;gap:8px;margin:0 0 15px}.meeting-flow span{flex:1;border-bottom:3px solid #547087;padding:8px;text-align:center;color:#94aabb;font-size:12px}.meeting-flow .active{color:#ffe0a2;border-color:#ffd080}.meeting-help{background:#18364b;border:1px solid #78b2d150;border-radius:12px;padding:13px 16px;font-size:12px;line-height:1.8}.seat-number{display:inline-grid;place-items:center;background:#8db8cb26;border:1px solid #99ceda5e;border-radius:7px;padding:2px 6px;font:700 12px system-ui;color:#d7f7ff}.vote-person{position:relative;border-radius:18px;background:linear-gradient(145deg,#223e53,#132c3f)}.vote-person>.seat-number{position:absolute;left:7px;top:7px}.vote-person.voted{box-shadow:0 0 0 2px #e4be78;background:#344e58}.vote-person .avatar{border-radius:50%;width:54px;height:54px;font-size:24px}.vote-person .speak-ring{border-radius:50%}.meeting-prompts{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}.meeting-prompts button{font-size:10px;min-height:34px;padding:5px 8px;background:#2a465c}.role-detail{max-width:440px;background:#142b3cd9;border:1px solid #8ecade55;border-radius:14px;padding:16px 20px;font-size:13px;line-height:1.8}.role-pill{white-space:nowrap}.ability-note{font-size:10px;color:#aae1f7}.friend-options .entry-options label{min-width:0}
@media(max-width:640px){.table-layout{width:94%}.table-felt{min-height:290px}.mahjong-screen{min-height:0}.table-layout .seat{padding:4px}.ship-hud{left:10px;right:10px;top:12px;gap:7px;font-size:10px}.ship-objective{top:78px;left:10px;max-width:calc(100% - 20px)}.meeting{padding:16px 12px}.voting-seats{grid-template-columns:repeat(3,minmax(0,1fr))}.vote-person b{font-size:11px}.table-layout .avatar-dot{display:none}.meeting-heading{margin-bottom:12px}.hand-area{padding-left:10px;padding-right:10px}.hand-tile .tile{width:39px;height:56px}.hand-tile{min-width:40px}.hand{gap:4px}.meeting-flow{gap:3px}.meeting-flow span{font-size:10px}.meeting-help{font-size:11px}.role-detail{font-size:12px}}
@media(max-height:500px) and (orientation:landscape){.table-layout{width:260px}.table-felt{min-height:210px}.table-layout .seat-top{left:-35%;top:5%;transform:none;max-width:45%}.table-layout .seat-bottom{left:-35%;bottom:5%;transform:none;max-width:45%}.table-layout .seat-left{left:-35%;max-width:45%}.table-layout .seat-right{right:-35%;max-width:45%}.hand-tile .tile{width:31px;height:43px;padding:3px 3px 7px}.hand-tile{min-width:33px}.ship-objective{top:72px}.ship-hud{max-width:500px}.table-layout .river .tile.small{width:14px;height:20px}.table-layout .river{grid-template-columns:repeat(6,14px)}.table-layout .discard{height:20px}.table-layout .table-center{width:29%}.ship-actions button{min-height:44px}.role-detail{padding:8px;font-size:11px}.role-reveal p{font-size:12px}}
.wire-panel{position:relative;display:flex;justify-content:space-between;min-height:260px;padding:0 5px;touch-action:none}.wire-panel>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.wire-column{display:grid;grid-template-rows:repeat(4,1fr);gap:10px;z-index:1}.wire-column button{width:70px;min-height:48px;border:2px solid var(--lamp);color:var(--lamp);background:#0b1e2d;font-weight:800}.wire-column button.selected{box-shadow:0 0 16px var(--lamp);background:#294758}.wire-column button:disabled{opacity:.65}#wire-status{font-size:12px;text-align:center}.private-clue{padding:12px;border:1px solid #76bacb;border-radius:10px;background:#143948;color:#b9ebfa;font-size:13px}.observation-log{margin:14px 0;padding:10px 14px;background:#102b3b;border:1px solid #91bdce33;border-radius:10px;font-size:12px}.observation-log summary{cursor:pointer;min-height:30px}.observation-log p{margin:6px 0}.observation-log small{float:right;color:#9bb9c7}.meeting-help button{padding:6px 12px;font-size:11px;min-height:36px;margin-top:6px}.meeting-layout{margin-top:16px}
/* Four rivers stay centered on their own side, even after the fourth row. */
.table-layout .river{grid-template-columns:repeat(6,min(4.2cqw,25px))}.table-layout .river .tile.small{width:min(4.2cqw,25px);height:min(5.8cqw,35px)}.table-layout .discard{height:min(5.8cqw,35px)}.table-layout .river-bottom{left:50%;top:74%;bottom:auto;transform:translate(-50%,-50%)}.table-layout .river-top{left:50%;top:26%;bottom:auto;transform:translate(-50%,-50%) rotate(180deg)}.table-layout .river-left{left:26%;right:auto;top:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}.table-layout .river-right{left:74%;right:auto;top:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center}.table-layout .table-center{width:22%}.table-layout .seat-left,.table-layout .seat-right{max-width:16%;width:16%;text-align:center;align-items:center}.table-layout .seat-left .seat-name,.table-layout .seat-right .seat-name{justify-content:center}.table-layout .seat-left .avatar-dot,.table-layout .seat-right .avatar-dot{display:none}.discard:last-child .tile{filter:drop-shadow(0 0 3px #f3e5a34d)}
@media(max-height:500px) and (orientation:landscape){.table-layout .seat-left,.table-layout .seat-right{width:40%;max-width:40%}.table-layout .river{grid-template-columns:repeat(6,14px)}.table-layout .river .tile.small{width:14px;height:20px}.table-layout .discard{height:20px}.table-layout .table-center{width:29%}}
.avatar>svg{width:90%;height:90%;filter:drop-shadow(0 2px 3px #00142677)}.match-result{isolation:isolate;position:relative;min-height:calc(100dvh - 76px)}.match-result:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 10%,#b9ce9830,transparent 60%);pointer-events:none}.match-result h1{color:#ffe0a6}.result-list>div{background:linear-gradient(120deg,#244559,#182f3d)}.result-list>div:first-child{border-color:#c6ad72}.match-result .primary{min-width:180px}
@media(max-height:500px) and (orientation:landscape){.call-actions{right:12px;bottom:calc(100% + 12px);flex-direction:row;max-width:28vw;min-height:0}.call-actions .subtle{display:none}.hand-coach{left:12px;top:-23px}}
.ship-screen{background:#071729 url('./art/space-backdrop-v2.webp') center/cover no-repeat}
@media(max-width:640px) and (max-height:740px) and (orientation:portrait){.table-felt{min-height:0}.table-layout{width:min(94%,calc(100dvh - 295px))}.hand-area{padding:5px 8px max(8px,env(safe-area-inset-bottom))}.hand{min-height:102px}.hand-tile .tile{height:46px;padding:4px 4px 7px}.hand-tile{min-height:48px}.turn-instruction{font-size:9px}.call-actions{margin-top:4px}.table-layout .dora{display:none}.compact-dora{display:flex;gap:2px;margin-left:auto;align-items:center}.compact-dora:before{content:'ドラ';font-size:8px}.compact-dora .tile.small{width:13px;height:20px}.table-layout .score{font-size:12px}.table-layout .seat-name{font-size:9px}.table-layout .seat-left,.table-layout .seat-right{top:43%}.table-layout .seat-wind{font-size:10px}}
.ship-actions button>small{display:block;font-size:10px;line-height:1.4;margin-top:3px;font-weight:500}
/* Public table actions, correctly oriented calls, and readable settlement. */
.meld-group{display:inline-flex;align-items:flex-end;gap:1px;vertical-align:bottom;margin:0 3px;isolation:isolate}.meld-called{display:inline-flex;position:relative;width:31px;height:22px;align-items:center;justify-content:center;flex:none}.meld-called>.tile{transform:rotate(90deg);margin:0}.meld-called.added-kan>.tile+ .tile{position:absolute;bottom:14px;z-index:2}.melds{flex-wrap:wrap;gap:7px;margin-top:3px}.melds .meld-called{width:25px;height:17px}.melds .added-kan>.tile+ .tile{bottom:11px}.closed-kan .back{width:22px;height:31px}.melds .closed-kan .back{width:17px;height:25px}.discard.latest-discard .tile{outline:2px solid #ffdb8b;filter:drop-shadow(0 0 6px #ffe2a7)}.discard.declared .tile{transform:rotate(90deg);scale:.83}.table-notice{position:absolute;left:15px;top:12px;z-index:4;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;background:#091f22e8;border:1px solid #d4be7866;box-shadow:0 4px 12px #0003;font-size:11px;max-width:40%}.table-notice>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-notice>b{color:#ffe1a2;font-size:17px;white-space:nowrap}.table-notice>small{white-space:nowrap;color:#b5c8c1}.table-notice .tile{width:19px;height:26px}.my-turn .turn-instruction>span:first-child{color:#ffe2a5}.hand-tile{transition:transform .13s ease,filter .13s ease}.hand-tile:not(:disabled):hover{filter:brightness(1.08)}
.detailed-result{position:fixed;top:50%;width:min(540px,94vw);max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain;padding:22px;gap:12px;text-align:left;z-index:8;background:linear-gradient(145deg,#193d3df7,#101e2bf7);border-color:#c5ad77;box-shadow:0 0 0 100vmax #020b14a6,0 20px 70px #0009}.round-result-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.round-result-heading small{font-size:11px;color:#c0d3cb}.round-result-heading h2{margin:4px 0 0;color:#f7d393;font-family:serif;font-size:30px}.round-result-heading>strong{font-size:30px;color:#ffe5b2;white-space:nowrap}.round-result-heading>strong small{margin-left:5px}.winner-name{margin:0;font-size:15px;font-weight:700}.winner-name small{font-size:11px;font-weight:400;color:#b9cac5}.winning-hand{display:flex;gap:2px;flex-wrap:wrap;align-items:flex-end;padding:12px 0}.winning-hand>.tile{width:25px;height:35px}.result-yaku{display:grid;grid-template-columns:1fr 1fr;gap:7px}.result-yaku>span{display:flex;justify-content:space-between;gap:7px;border-bottom:1px solid #afc9b425;padding:5px 0;font-size:12px}.result-yaku b{color:#f9d992;white-space:nowrap}.result-total{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#ffe2a5}.ura-dora{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-size:10px;color:#c2d3cb}.ura-dora .tile{width:16px;height:23px}.settlement{display:grid;gap:4px;margin-top:4px}.settlement>div{display:grid;grid-template-columns:minmax(0,1fr) 65px 70px;align-items:center;gap:8px;padding:9px 10px;background:#08192566;border-radius:7px;font-size:12px}.settlement>div.self{outline:1px solid #b8cdad55;background:#b8ce9b14}.settlement span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settlement b,.settlement small{text-align:right;font-variant-numeric:tabular-nums}.settlement small{color:#bbcacb}.settlement .gain{color:#95e6bd}.settlement .loss{color:#ff9e9e}.detailed-result>.primary{width:100%;min-height:46px}.detailed-result>.quiet{margin:0;font-size:12px}
@media(max-width:640px){.table-notice{left:9px;top:7px;padding:5px 8px;gap:5px;max-width:40%;font-size:9px}.table-notice>b{font-size:13px}.table-notice .tile{width:15px;height:22px}.detailed-result{padding:15px;gap:10px}.winning-hand>.tile{width:19px;height:28px}.result-yaku{gap:4px 10px}.result-yaku>span{font-size:11px}.round-result-heading h2{font-size:26px}.round-result-heading>strong{font-size:26px}.settlement>div{padding:8px;font-size:11px;grid-template-columns:minmax(0,1fr) 55px 62px}.table-layout .melds .tile{width:12px;height:18px}.table-layout .melds .meld-called{width:18px;height:12px}.table-layout .melds .added-kan>.tile+ .tile{bottom:8px}.table-layout .melds{gap:5px}.table-layout .meld-group{margin:0 1px}}
@media(prefers-reduced-motion:reduce){.hand-tile{transition:none}}
.room-summary{max-width:700px;margin:18px auto;padding:18px 22px;background:#132e3b;border:1px solid #92b7bd44;border-radius:14px;text-align:left}.room-summary>b{color:#ffe0a0;font-size:13px}.room-summary p{font-size:13px;line-height:1.7;color:#d4e4df}.room-summary small{font-size:11px;color:#a4bcc2}.room-summary button{min-height:44px}.pace-guide{padding:12px;background:#163444;border-radius:10px;font-size:12px;line-height:1.8}.pace-guide small{color:#b7cfd5}.modal-body>label{display:grid;gap:7px;margin:10px 0}.modal-body>label select{width:100%;min-height:44px;padding:10px}
.my-turn .turn-instruction>span:first-child{color:#26382d;font-weight:650}.my-turn .turn-instruction .turn-time{color:#26382d;font-weight:750}
.voyage-finish:before{background:linear-gradient(#07162799,#101e2af5 440px),url('./art/space-voyage-v2.webp') top center/100% auto no-repeat}.personal-result{display:flex;align-items:center;justify-content:center;gap:15px;margin:24px auto;padding:20px;max-width:430px;background:linear-gradient(120deg,#4562719c,#183242e8);border:1px solid #b9d6d360;border-radius:16px;backdrop-filter:blur(8px)}.self-win .personal-result{border-color:#e9c781;background:linear-gradient(120deg,#6d61359c,#253a34e8)}.personal-result>div{display:grid;gap:5px;text-align:left}.personal-result small{font-size:11px;color:#bcd1cf}.personal-result b{font-size:23px;color:#ffe5af}.personal-result span{font-size:13px}.result-list .self-result{outline:1px solid #e5cc8e}.result-list small{display:block;font-size:10px;color:#b1cbd0;font-weight:400;margin-top:3px}.result-rank{font-size:22px;font-weight:750;color:#ecd392;min-width:22px}.match-review{max-width:650px;margin:22px auto;text-align:left;background:#132e3be8;border:1px solid #708e9f55;border-radius:13px;padding:17px}.match-review summary{cursor:pointer;font-size:13px;font-weight:700;min-height:32px;line-height:1.8}.match-review ol{list-style:none;margin:12px 0 0;padding:0}.match-review li{display:flex;gap:12px;border-left:2px solid #8cb4ba66;padding:8px 0 8px 12px;font-size:12px;line-height:1.8}.match-review time{color:#e9d393;font-variant-numeric:tabular-nums;min-width:36px}.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px auto}.result-actions button{min-height:46px}.match-result .result-list{max-width:650px;margin-left:auto;margin-right:auto}@media(max-width:640px){.match-result h1{font-size:27px}.personal-result{padding:16px}.result-list .avatar{width:38px;height:38px}.result-list>div{gap:8px;padding:12px}.result-list b,.result-list strong{font-size:12px}.result-list .result-rank{font-size:18px;min-width:17px}.match-review{padding:14px}.result-actions .primary{min-width:140px}}
/* October release: readable table, deliberate actions, and a persistent navigation display. */
.mahjong-screen{background:radial-gradient(ellipse at center,#1a3534,#0c171d);min-height:0}
.table-felt{display:grid;place-items:center;min-height:0;flex:1;background-size:100% 100%;box-shadow:inset 0 0 65px #0005}
.table-layout{position:relative;inset:auto;transform:none;width:min(95%,calc(100dvh - 285px),620px);aspect-ratio:1}
.table-layout .river{margin:0;padding:0;border:0;border-radius:0;background:none!important;min-height:0;min-width:0;grid-template-columns:repeat(6,5cqw);gap:.35cqw;outline-offset:5px;align-content:start;box-shadow:none}
.table-layout .river .tile.small{width:5cqw;height:7cqw;border-radius:2px;padding:2px 2px 4px}
.table-layout .discard{height:7cqw}
.table-layout .river-bottom{left:50%;top:63%;transform:translateX(-50%)}
.table-layout .river-top{left:50%;top:auto;bottom:63%;transform:translateX(-50%) rotate(180deg)}
.table-layout .river-left{left:25%;top:50%;transform:translate(-50%,-50%) rotate(90deg)}
.table-layout .river-right{left:75%;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}
.table-layout .river:hover .tile{filter:brightness(1.1)}
.table-layout .table-center{width:22%;border-color:#dfc18b90;box-shadow:0 6px 18px #0007;background:linear-gradient(140deg,#12312c,#071c1a);padding:8px 2px}
.table-layout .seat{padding:4px 7px;border-radius:8px;max-width:35%;background:#082822db;box-shadow:0 3px 12px #0003}
.table-layout .seat-top{left:50%;top:0;transform:translateX(-50%)}
.table-layout .seat-bottom{left:50%;bottom:0;transform:translateX(-50%)}
.table-layout .seat-left{left:1%;top:5%;width:22%;max-width:22%}
.table-layout .seat-right{right:1%;top:auto;bottom:5%;width:22%;max-width:22%}
.table-layout .seat-name{font-size:10px;max-width:100%}
.table-layout .seat-name>span:not(.seat-wind){text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:90px}
.table-layout .score{font-variant-numeric:tabular-nums}
.table-layout .concealed{display:none}
.table-notice{left:auto;right:3%;top:3%;max-width:29%;background:#092b28ed;border-color:#bdcda866;border-radius:10px}
.hand-area{padding:10px 18px max(10px,env(safe-area-inset-bottom));background:linear-gradient(#1f3437,#111f28);border-top:1px solid #a0a47766}
.hand{min-height:65px}
.turn-instruction{align-items:center;border:0;min-height:24px;background:none;padding:0;margin-bottom:9px}
.turn-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7b9396;margin-right:7px}
.my-turn .turn-dot{background:#ffe29d;box-shadow:0 0 12px #e9c58b}
.my-turn .turn-instruction{color:#ffe6ab}
.hand-tile.selected{transform:translateY(-8px)}
.hand-tile.selected .tile{outline:2px solid #ffe4a0;box-shadow:0 0 24px #e9c58b70}
.hand-tile.drawn .tile{border-top:3px solid #e6b459}
.call-actions{min-height:40px;margin-top:5px;gap:5px}
.call-actions>button{min-height:40px;padding:7px 11px;font-size:11px}
.discard-confirm{display:inline-flex;align-items:center;gap:8px;box-shadow:0 0 20px #e9c58b33!important}
.discard-confirm .tile.small{width:20px;height:28px}
.winning-action{animation:winning-glow 1.4s ease-in-out infinite alternate}
@keyframes winning-glow{to{box-shadow:0 0 25px #f8d69988}}
.river-expanded{display:grid;grid-template-columns:repeat(6,1fr);gap:10px 5px;margin:16px 0;justify-items:center}
.river-expanded>span{display:grid;gap:5px;justify-items:center}.river-expanded small{font-size:10px;color:#9cb5b9}
.river-expanded .called{opacity:.35}.river-expanded .declared .tile{outline:3px solid #f8cf84}.river-tabs{display:flex;gap:8px;justify-content:center;margin-top:20px}
.role-portrait{display:block;background-image:url('./art/crew-role-atlas-v3.webp');background-repeat:no-repeat;background-size:400% 100%;width:180px;aspect-ratio:3/8;max-height:330px;margin:0 auto;mask-image:linear-gradient(transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(transparent,black 8%,black 92%,transparent);border-radius:60px}
.portrait-crew{background-position:0 50%}.portrait-shade{background-position:33.333% 50%}.portrait-engineer{background-position:66.666% 50%}.portrait-analyst{background-position:100% 50%}
.cinematic-role{position:relative;padding:25px 24px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#245a6c66,transparent 65%)}
.cinematic-role.shade{background:radial-gradient(ellipse at 50% 35%,#6f254f70,transparent 65%)}
.cinematic-role h1{font-size:42px;margin:0 0 10px}.cinematic-role .role-detail{max-width:480px;margin:0 auto;background:#102936db;border:1px solid #52758b80;border-radius:14px;padding:16px;line-height:1.9}
.cinematic-role p{margin:15px 0 8px;font-size:12px;color:#bed2dc}.cinematic-role>small{font-size:11px;color:#88a6b5}.cinematic-role>[data-countdown]{display:block;margin-top:10px;color:#ebcf91}
#ship-mini-map{position:absolute;top:76px;right:12px;z-index:4}.mini-map{display:block;padding:7px;background:#0c2533ed;box-shadow:0 5px 18px #0005;border:1px solid #7396ad66;border-radius:12px;width:138px;min-height:0}.mini-map svg{width:100%;display:block}.mini-map>span{display:flex;justify-content:space-between;font-size:10px;padding:4px 3px 1px;color:#d7e7e9}.mini-map small{font-size:9px;color:#b3c4c9}
.ship-objective{max-width:min(310px,calc(100% - 178px));border-left:3px solid #f2cc87;background:#0d2635eb;box-shadow:0 5px 18px #0004;top:76px}.ship-objective small{line-height:1.75}.ship-objective button{min-height:32px;padding:4px 9px}
.ship-hud{background:#0c2533e8;border-color:#6d94a966;padding:10px 13px;border-radius:12px}.ship-actions button{background:linear-gradient(#284e61,#123144);border:1px solid #7db0c180;box-shadow:0 5px 0 #06152388,0 8px 22px #0005;border-radius:18px;min-width:90px;min-height:60px;}.ship-actions button.primary{background:linear-gradient(#ffda90,#d5a655);border-color:#ffe6ad;color:#293426}.ship-actions button.danger{background:linear-gradient(#a86167,#6d3449);border-color:#e3949c}
.task-route-list{display:grid;gap:8px}.task-route-list button{display:flex;align-items:center;gap:12px;text-align:left;padding:12px}.task-route-list button>span:nth-child(2){display:grid;gap:4px;flex:1}.task-route-list b{font-size:13px}.task-route-list small{font-size:11px;color:#a4bec7}.task-route-list button>span:last-child{font-size:11px;color:#ead097}
@media(max-width:640px){.table-layout{width:min(95%,calc(100dvh - 310px))}.table-layout .seat{padding:4px}.table-layout .seat-name{font-size:9px}.table-layout .score{font-size:13px}.table-layout .seat-left,.table-layout .seat-right{width:21%;max-width:21%}.table-layout .river .tile.small{padding:1px 1px 3px}.table-notice{font-size:9px;right:3%;top:3%;max-width:29%;padding:5px}.hand-area{padding:8px 8px max(10px,env(safe-area-inset-bottom))}.hand{display:grid;grid-template-columns:repeat(7,minmax(0,44px));gap:7px 5px;min-height:116px}.hand-tile{min-width:0;min-height:54px}.hand-tile .tile{width:100%;height:54px;padding:4px 4px 8px}.hand-tile.selected{transform:translateY(-4px)}.call-actions>button{font-size:10px;min-height:40px;padding:6px 8px}.hand-coach{margin-top:8px;font-size:10px}.turn-instruction{font-size:10px;margin-bottom:7px}.river-expanded .tile{width:36px;height:51px}.role-portrait{width:150px;max-height:285px}.cinematic-role{padding:18px}.cinematic-role h1{font-size:36px}.cinematic-role .role-detail{padding:13px;font-size:12px}.cinematic-role p{font-size:11px}.mini-map{width:105px;padding:5px}.mini-map>span{font-size:9px}.mini-map small{display:none}.ship-objective{max-width:calc(100% - 134px);top:76px;padding:9px}.ship-objective b{font-size:10px}.ship-objective small{font-size:9px}.ship-objective button{padding:4px 5px;font-size:9px;min-height:30px}.ship-actions{bottom:36px}.ship-actions button{min-height:54px}.ship-hud{padding:10px;font-size:9px}.joystick{box-shadow:0 8px 20px #0005}}
@media(max-width:640px) and (max-height:740px) and (orientation:portrait){.table-layout{width:min(95%,calc(100dvh - 275px))}.hand{min-height:98px;gap:4px}.hand-tile{min-height:46px}.hand-tile .tile{height:46px}.hand-area{padding-top:5px;padding-bottom:7px}.call-actions{margin-top:3px}.call-actions>button{min-height:34px;padding:4px 7px}.hand-coach{margin-top:4px}.turn-instruction{margin-bottom:5px;font-size:9px}.cinematic-role .role-portrait{width:105px;max-height:185px}.cinematic-role h1{font-size:29px}.cinematic-role .role-detail{padding:10px;font-size:11px}}
@media(max-height:500px) and (orientation:landscape){.table-layout{width:225px}.table-layout .seat-left{left:-65%;top:24%;width:45%;max-width:45%}.table-layout .seat-right{right:-65%;bottom:24%;width:45%;max-width:45%}.table-layout .seat-top{left:-65%;top:0;transform:none;max-width:45%}.table-layout .seat-bottom{left:-65%;bottom:0;transform:none;max-width:45%}.table-layout .river{grid-template-columns:repeat(6,12px);gap:1px}.table-layout .river .tile.small{width:12px;height:17px}.table-layout .discard{height:17px}.table-layout .table-center{width:24%;padding:3px}.table-layout .table-center>b{font-size:17px}.table-layout .table-center>span{font-size:9px}.table-layout .table-center>div{font-size:7px}.table-felt{min-height:0}.hand-area{padding:4px 12px 8px}.hand{display:flex;gap:3px;min-height:44px}.hand-tile{min-width:32px;min-height:43px}.hand-tile .tile{width:31px;height:43px;padding:3px 3px 7px}.turn-instruction{margin-bottom:3px;font-size:9px}.hand-coach{font-size:9px;margin-top:5px}.call-actions{right:10px;bottom:105px;max-width:135px;gap:4px}.call-actions>button{min-height:36px;padding:6px 8px}.table-notice{right:4%;top:8%}.ship-objective{top:10px;left:10px;max-width:230px}.ship-hud{left:50%;transform:translateX(-50%);max-width:240px;top:10px;right:auto;width:40%;padding:8px}.ship-hud .progress{display:none}#ship-mini-map{top:10px;right:10px}.mini-map{width:102px}.cinematic-role{min-height:0;display:grid;grid-template-columns:130px minmax(0,450px);justify-content:center;gap:6px 25px;padding:15px}.cinematic-role>.role-portrait{grid-column:1;grid-row:1/7;width:115px;max-height:290px}.cinematic-role>h1{font-size:28px;margin:0}.cinematic-role .role-detail{padding:10px;font-size:11px}.cinematic-role p,.cinematic-role>[data-countdown]{margin:0}.cinematic-role>small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.winning-action{animation:none}}html[data-reduce='1'] .winning-action{animation:none}

/* The game canvas is the primary surface; controls live at its edges. */
.game-heading{min-width:0}.game-heading b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-phase=playing][data-game=mahjong] .game-header{height:48px;padding:4px 18px;background:#0b2328;border-bottom:1px solid #b59c5f38;gap:15px}
html[data-phase=playing][data-game=mahjong] .wordmark{font-size:15px;min-height:38px}
html[data-phase=playing][data-game=mahjong] .wordmark span{font-size:7px;margin-top:4px}
html[data-phase=playing][data-game=mahjong] .header-tools button{min-height:36px;padding:7px 10px}
html[data-phase=playing][data-game=mahjong] .game-heading b{font-size:11px}
html[data-phase=playing][data-game=mahjong] #screen{height:calc(100dvh - 48px);overflow:hidden}
.mj-v4{--tile-w:clamp(23px,5.9vw,48px);height:100%;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 25%,#255953,#09262c 80%);overflow:hidden;position:relative}
.mj-stage{flex:1;min-height:180px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#23564f66 10%,#03191fdd 95%)}
.mj-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:manipulation}
.mj-player{position:absolute;z-index:2;display:flex;align-items:center;gap:7px;min-height:46px;padding:7px 10px 7px 7px;border:1px solid #658e8966;border-radius:7px;background:linear-gradient(140deg,#193d3eea,#0e282feb);box-shadow:0 3px 9px #0004;color:#ecede2;max-width:180px;text-align:left;transition:box-shadow .15s,border .15s}
.mj-player:hover{background:#204b4be8}
.mj-player.active{border-color:#e4ca87;box-shadow:0 0 0 1px #d8bd7333,0 0 18px #dec98033}
.mj-avatar{height:34px;width:34px;border-radius:50%;background:linear-gradient(150deg,var(--p),color-mix(in srgb,var(--p) 40%,#16423a));border:2px solid #c9d4b677;display:grid;place-items:center;font-weight:800;color:#15303b;position:relative;flex-shrink:0;font-size:15px}
.mj-avatar .speak-ring{border-radius:50%;inset:-4px}
.mj-player-info{display:flex;flex-direction:column;min-width:0;gap:3px}
.mj-player-name{font-size:10px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:100px;letter-spacing:.02em}
.mj-player-name em{font-style:normal;font-size:7px;padding:1px 3px;background:#547a724d;color:#a8c7bb;margin-left:4px}
.mj-player-info strong{font-family:system-ui,sans-serif;font-size:20px;font-weight:650;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#fff1c4}
.mj-wind{color:#8fb6ae;font-family:serif;font-size:16px;padding-left:3px}
.mj-wind.dealer{color:#f7d789}
.mj-riichi-label{position:absolute;right:-5px;bottom:-8px;background:#be4740;border:1px solid #e5a687;color:#fff2d2;font-size:9px;padding:2px 6px;border-radius:4px;letter-spacing:.15em}
.mj-player-top{left:50%;top:10px;transform:translateX(-50%)}
.mj-player-bottom{left:14px;bottom:12px}
.mj-player-left{left:14px;top:42%}
.mj-player-right{right:14px;top:42%}
.mj-player.self .mj-avatar{border-color:#d3b574}
.mj-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:75px;text-align:center;pointer-events:none;z-index:1;color:#daeee1;line-height:1.25;text-shadow:0 1px 2px #0a191e}
.mj-center>strong{display:block;font-size:18px;letter-spacing:.05em;font-weight:800}
.mj-center>strong small{font-size:10px;margin-left:2px}
.mj-center>span{display:block;font-size:9px;color:#aed7c9;margin-top:3px}
.mj-center>span b{font-size:13px;color:#faf3ca}
.mj-center>small{display:block;font-size:7px;margin-top:4px;white-space:nowrap}
.mj-dora{position:absolute;top:12px;left:14px;display:flex;flex-direction:column;gap:6px;padding:7px 9px;border:1px solid #879d7755;border-radius:6px;background:#0c262dcc;box-shadow:0 3px 9px #0002}
.mj-dora>span{font-size:8px;letter-spacing:.15em;color:#d3cb9c}
.mj-dora>div{display:flex;gap:3px}
.mj-dora .tile.small,.mj-dora i{height:27px;width:20px;border-radius:2px}
.mj-dora i{background:linear-gradient(150deg,#236a58,#194c44);border:1px solid #74968666;box-shadow:0 2px 0 #7c8c7755}
.mj-table-tools{position:absolute;right:14px;top:12px;display:flex;gap:5px}
.mj-table-tools button{min-height:32px;width:32px;padding:3px;border-radius:50%;background:#163831bb;color:#c3d0ba;border-color:#aec69844}
.mj-event{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%) scale(.9);display:flex;align-items:center;flex-direction:column;gap:7px;pointer-events:none;opacity:0;z-index:8;background:radial-gradient(ellipse,#173c33ed,transparent 70%);width:260px;padding:30px;transition:opacity .2s,transform .2s}
.mj-event.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mj-event small{font-size:12px;color:#fff3c8}
.mj-event strong{font-family:'Yu Mincho',serif;font-size:58px;color:#ffdfa2;text-shadow:0 3px #643c15,0 0 20px #e8ce714f;white-space:nowrap;letter-spacing:.1em}
.mj-hand-panel{flex-shrink:0;position:relative;z-index:4;min-height:164px;padding:7px 18px max(7px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#17473fde,#0b242d);border-top:1px solid #d0b9714a;box-shadow:0 -8px 22px #02181e44}
.mj-hand-status{display:flex;align-items:center;gap:12px;max-width:920px;margin:auto auto 8px;height:23px;font-size:11px}
.mj-turn-label{display:flex;align-items:center;gap:7px;flex:1;color:#a2beb8}
.mj-turn-label i{height:6px;width:6px;border-radius:50%;background:#738e88}
.mj-your-turn .mj-turn-label{color:#f9e8b4}
.mj-your-turn .mj-turn-label i{background:#f5db8c;box-shadow:0 0 9px #f4d079aa}
.mj-coach{font-size:10px;color:#b8d6c7}
.mj-timer{font-variant-numeric:tabular-nums;color:#edcf84;font-weight:750;min-width:28px;text-align:right}
.mj-hand-row.hand{display:flex;flex-wrap:nowrap;justify-content:center;align-items:end;gap:2px;min-height:0;height:calc(var(--tile-w)*1.4 + 10px);max-width:920px;margin:auto;overflow:visible}
.mj-hand-row .hand-tile{position:relative;flex:0 0 var(--tile-w);width:var(--tile-w);min-width:0;min-height:0;height:calc(var(--tile-w)*1.4);padding:0;border:0;border-radius:4px;background:none;transition:transform .14s,filter .14s;opacity:1;box-shadow:none;margin:0}
.mj-hand-row .hand-tile:disabled{opacity:1;filter:none;cursor:default}
.mj-hand-row .hand-tile .tile{display:block;height:100%;width:100%;border-radius:4px;border:1px solid #fff9d4;box-shadow:0 2px 0 #d4c6a1,0 5px 0 #3c927a,1px 7px 3px #0005;background:linear-gradient(120deg,#fffff1,#f4ead0)}
.mj-hand-row .hand-tile .tile svg{width:100%;height:96%;padding:2% 3%;filter:drop-shadow(0 1px 0 #fff)}
.mj-hand-row .hand-tile.drawn{margin-left:9px}
.mj-hand-row .hand-tile.selected{transform:translateY(-9px);filter:drop-shadow(0 0 5px #f8db7888)}
.mj-hand-row .hand-tile.selected .tile{outline:2px solid #fce2a1;outline-offset:1px}
.mj-hand-row .hand-tile:not(:disabled):hover{transform:translateY(-5px)}
.mj-hand-row .hand-tile.selected:hover{transform:translateY(-9px)}
.mj-hand-bottom{max-width:920px;margin:9px auto 0;display:flex;align-items:center;justify-content:space-between;min-height:45px;gap:8px}
.mj-hand-tip{font-size:10px;color:#8caea6}
.mj-selection-preview{position:absolute;bottom:calc(100% + 8px);left:12px;display:flex;flex-direction:column;gap:7px;align-items:center;color:#f8e6b3;font-size:12px;padding:10px 13px;background:linear-gradient(145deg,#214b43f5,#0a262cf5);border:1px solid #dec287;border-radius:10px;box-shadow:0 8px 24px #0007;pointer-events:none;z-index:12;text-align:center;min-width:90px}
.mj-selection-preview:after{content:'';position:absolute;bottom:-7px;left:calc(50% - 5px);width:10px;height:10px;transform:rotate(45deg);background:#0a262c;border-right:1px solid #dec287;border-bottom:1px solid #dec287}
.mj-selection-preview>.tile{width:62px;height:84px;border-radius:5px;box-shadow:0 3px 0 #bdba98,0 6px 0 #348574}
.mj-hand-row{touch-action:none;user-select:none;-webkit-user-select:none}
.mj-selection-preview>span>small{display:block;color:#a4bbb0;font-size:8px;margin-top:2px}
.mj-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
.mj-actions button{min-height:40px;padding:8px 19px;border-radius:6px;font-size:14px;font-weight:750;letter-spacing:.04em;background:linear-gradient(#f6e4b0,#d8b365);border:1px solid #f3dfa4;border-bottom:3px solid #9d743e;color:#30433b;box-shadow:0 3px 10px #0002}
.mj-actions button.mj-pass{background:#284c47;color:#c6d4bd;border:1px solid #7ca89c66;border-bottom:3px solid #122c28}
.mj-actions button.mj-win-call{background:linear-gradient(#fae5a2,#e9b560);color:#583c21;border-color:#ffe3a2;box-shadow:0 0 16px #ecb56155}
.mj-confirm span{margin-left:20px}
.mj-waits{display:flex;gap:3px;align-items:center;margin-right:4px}
.mj-waits>small{font-size:9px;color:#c5d4ba;margin-right:3px}
.mj-waits>.tile.small{width:18px;height:25px}
.mj-result-layer:empty{display:none}
.mj-result-layer:not(:empty){position:absolute;inset:0;z-index:15;background:#081d26bb;backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;padding:18px;overflow:auto}
.mj-result-layer .round-result{position:relative;inset:auto;transform:none;max-height:100%;width:min(600px,100%);margin:auto;overflow:auto;background:linear-gradient(140deg,#214740,#102c31);border:1px solid #bb9d68;border-radius:15px;color:#e9eed8;box-shadow:0 20px 80px #0006}
.mj-fallback{display:none;position:absolute;inset:20% 5%;background:radial-gradient(#347c66,#195642);border:6px solid #a68d50;border-radius:16px}
.mj-use-fallback .mj-fallback{display:block}
.mj-fallback-river{position:absolute;display:grid;grid-template-columns:repeat(6,18px);gap:2px;padding:0;background:none;border:0;min-height:0}
.mj-fallback-river .tile.small{width:18px;height:25px}
.mj-fallback-bottom{left:50%;top:60%;transform:translateX(-50%)}
.mj-fallback-top{left:50%;bottom:60%;transform:translateX(-50%) rotate(180deg)}
.mj-fallback-right{left:65%;top:50%;transform:translateY(-50%) rotate(-90deg)}
.mj-fallback-left{right:65%;top:50%;transform:translateY(-50%) rotate(90deg)}
@media(max-width:600px) and (orientation:portrait){
 .mj-v4{--tile-w:calc((100vw - 48px)/14)}
 .mj-hand-panel{padding:8px 9px max(10px,env(safe-area-inset-bottom));min-height:142px}
 .mj-player{padding:5px 7px 5px 5px;gap:5px;max-width:146px;min-height:41px}
 .mj-avatar{width:27px;height:27px;font-size:12px}
 .mj-player-name{font-size:9px;max-width:70px}
 .mj-player-info strong{font-size:18px}
 .mj-wind{font-size:14px}
 .mj-player-top{top:65px}
 .mj-player-left{left:9px;top:28%}
 .mj-player-right{right:9px;top:auto;bottom:24%}
 .mj-player-bottom{left:9px;bottom:12px}
 .mj-dora{left:9px;top:10px}
 .mj-center>strong{font-size:16px}
 .mj-center>span b{font-size:11px}
 .mj-center>small{font-size:6px}
 .mj-center{width:68px}
 .mj-hand-status{font-size:10px;gap:5px}
 .mj-hand-row.hand{gap:2px}
 .mj-hand-row .hand-tile.drawn{margin-left:6px}
 .mj-hand-row .hand-tile .tile{border-radius:3px}
 .mj-hand-tip{font-size:8px}
 .mj-hand-bottom{min-height:43px;margin-top:11px}
 .mj-actions{gap:5px}
 .mj-actions button{min-height:41px;padding:8px 14px;font-size:12px}
 .mj-waits{display:none}
 .mj-selection-preview{font-size:11px;gap:6px;padding:9px 10px;min-width:78px}
 .mj-selection-preview>.tile{width:54px;height:74px}
 .mj-result-layer:not(:empty){padding:12px}
}
@media(max-height:520px) and (orientation:landscape){
 html[data-phase=playing][data-game=mahjong] .game-header{height:38px;padding:1px 12px}
 html[data-phase=playing][data-game=mahjong] .wordmark{font-size:12px;min-height:33px}
 html[data-phase=playing][data-game=mahjong] .wordmark span{font-size:6px;margin-top:2px}
 html[data-phase=playing][data-game=mahjong] .header-tools button{min-height:30px;font-size:10px;padding:5px 8px}
 html[data-phase=playing][data-game=mahjong] #screen{height:calc(100dvh - 38px)}
 .mj-v4{--tile-w:clamp(26px,4vw,40px)}
 .mj-stage{min-height:115px}
 .mj-hand-panel{min-height:90px;padding:3px 12px max(5px,env(safe-area-inset-bottom))}
 .mj-hand-status{font-size:9px;margin-bottom:0;height:17px}
 .mj-hand-row.hand{height:calc(var(--tile-w)*1.3 + 8px)}
 .mj-hand-row .hand-tile{height:calc(var(--tile-w)*1.3)}
 .mj-hand-bottom{min-height:0;height:15px;margin-top:4px;justify-content:center}
 .mj-hand-tip{font-size:8px}
 .mj-actions{position:absolute;right:14px;bottom:calc(100% + 12px);max-width:26vw;flex-wrap:wrap;justify-content:flex-end;gap:6px}
 .mj-actions button{padding:7px 14px;min-height:38px;font-size:13px}
 .mj-selection-preview{bottom:calc(100% + 60px);padding:7px 10px;gap:5px;min-width:74px}
 .mj-selection-preview>.tile{width:45px;height:60px}
 .mj-waits{display:none}
 .mj-player{padding:4px 7px 4px 4px;min-height:39px;gap:5px;max-width:155px}
 .mj-player-top{top:7px;left:30%}
 .mj-player-bottom{bottom:8px;left:27%}
 .mj-player-left{top:48%;left:12px}
 .mj-player-right{top:30%;right:15%}
 .mj-avatar{width:28px;height:28px;font-size:12px}
 .mj-player-info strong{font-size:18px}
 .mj-player-name{font-size:9px}
 .mj-dora{top:7px;left:12px;padding:5px 7px;gap:4px}
 .mj-dora .tile.small,.mj-dora i{width:17px;height:23px}
 .mj-dora>span{font-size:7px}
 .mj-center{width:57px}
 .mj-center>strong{font-size:12px}
 .mj-center>strong small{font-size:8px}
 .mj-center>span{font-size:7px;margin-top:1px}
 .mj-center>span b{font-size:10px}
 .mj-center>small{font-size:5px;margin-top:2px}
 .mj-event strong{font-size:42px}
 .mj-event{padding:16px}
 .mj-result-layer .round-result{max-height:100%}
}
.avatar>img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block;pointer-events:none}
.modal>header{flex-shrink:0}.modal-body{min-height:0}
.volume-list .avatar{flex:none}.volume-list label>span:not(.avatar){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-backdrop{bottom:auto;height:var(--app-height,100dvh)}.modal{max-height:calc(var(--app-height,100dvh) - 24px)}
.mj-result-layer .winning-hand{min-width:0}
@media(min-width:650px) and (max-height:520px) and (orientation:landscape){
 .mj-result-layer .round-result:has(.winning-hand){width:min(780px,100%);padding:16px;column-gap:20px;row-gap:8px;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"heading settlement" "winner settlement" "hand settlement" "yaku settlement" "total action";align-items:start}
 .mj-result-layer .round-result:has(.winning-hand) .round-result-heading{grid-area:heading}
 .mj-result-layer .round-result:has(.winning-hand) .round-result-heading h2,.mj-result-layer .round-result:has(.winning-hand) .round-result-heading>strong{font-size:25px}
 .mj-result-layer .round-result:has(.winning-hand) .winner-name{grid-area:winner;font-size:13px;line-height:1.5}
 .mj-result-layer .round-result:has(.winning-hand) .winning-hand{grid-area:hand;padding:4px 0 6px;gap:2px}
 .mj-result-layer .round-result:has(.winning-hand) .winning-hand>.tile{width:21px;height:30px}
 .mj-result-layer .round-result:has(.winning-hand) .result-yaku{grid-area:yaku;gap:3px 12px}
 .mj-result-layer .round-result:has(.winning-hand) .result-yaku>span{font-size:11px;padding:3px 0}
 .mj-result-layer .round-result:has(.winning-hand) .result-total{grid-area:total;align-self:center;font-size:12px}
 .mj-result-layer .round-result:has(.winning-hand) .settlement{grid-area:settlement;margin:0;height:100%;align-content:center;gap:7px}
 .mj-result-layer .round-result:has(.winning-hand) .settlement>div{min-height:38px;padding:8px;font-size:11px;grid-template-columns:minmax(0,1fr) 55px 66px}
 .mj-result-layer .round-result:has(.winning-hand)>.primary,.mj-result-layer .round-result:has(.winning-hand)>.quiet:last-child{grid-area:action;align-self:end;min-height:44px}
}
.round-result-heading>strong .score-bonus{display:block;margin:5px 0 0;font-size:10px;font-weight:500;line-height:1.5;white-space:normal;text-align:right;max-width:180px}
@media(min-width:600px) and (max-height:520px){
 .match-result:is(.mahjong-finish,.voyage-finish){width:100%;max-width:1100px;height:calc(100dvh - 52px);min-height:0;padding:12px 16px;display:grid;grid-template-columns:minmax(180px,.85fr) minmax(0,1.6fr);grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"summary list" "review list" "hint actions";gap:8px 16px;text-align:left}
 .result-summary{grid-area:summary;min-height:0;overflow:auto}
 .match-result .result-summary h1{font-size:24px;line-height:1.2;margin:4px 0 8px}
 .result-summary>p{font-size:12px;line-height:1.5;margin:0 0 8px}
 .result-summary .personal-result{margin:8px 0;padding:12px;gap:10px;justify-content:flex-start;max-width:none}
 .result-summary .personal-result .avatar{width:38px;height:38px}
 .result-summary .personal-result b{font-size:21px}
 .match-result .result-list{grid-area:list;width:100%;max-width:none;min-height:0;overflow:auto;margin:0;gap:6px;align-content:center}
 .match-result .result-list>div{min-width:0;min-height:44px;padding:8px;gap:7px;border-radius:9px}
 .match-result .result-list .avatar{width:28px;height:28px;flex-shrink:0}
 .match-result .result-list b{min-width:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .match-result .result-list strong{font-size:11px;white-space:nowrap}
 .match-result .result-list small{font-size:9px;margin-top:2px}
 .voyage-finish .result-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .match-result .match-review{grid-area:review;margin:0;padding:7px 9px;max-height:100px;overflow:auto}
 .match-result .match-review summary{font-size:10px;min-height:22px}
 .match-result>.quiet{grid-area:hint;margin:0;font-size:10px;line-height:1.5}
 .match-result .result-actions{grid-area:actions;display:flex;gap:6px;margin:0;width:100%;flex-wrap:nowrap;align-items:center}
 .match-result .result-actions button{flex:1;min-width:0;min-height:44px;padding:7px;font-size:11px;white-space:nowrap}
 .match-result .result-actions>.quiet{flex:1;font-size:10px;line-height:1.4;margin:0}
}

.evidence-journal section+section{margin-top:24px}
.evidence-journal h3{font-size:17px;margin:12px 0}
.evidence-journal h3 small{font-size:11px;color:#aabec7;margin-left:6px}
.evidence-journal article{padding:12px 14px;border:1px solid #7bb3c233;border-radius:12px;margin:8px 0;background:#152a32}
.evidence-journal article header{display:flex;justify-content:space-between;gap:12px;align-items:center}
.evidence-journal article b{min-width:0;overflow-wrap:anywhere}
.evidence-journal time{font-size:12px;font-variant-numeric:tabular-nums;color:#9fbdc9;white-space:nowrap}
.evidence-journal article p{margin:6px 0 0;font-size:14px;line-height:1.7}
.evidence-journal .evidence-clue{border-color:#e1c97570;background:linear-gradient(135deg,#363021,#1b2b30)}
.conf-controls .has-evidence{color:#ffe59b;border-color:#d9bf6d;background:#514322}

.vent-route-picker{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(180px,.85fr);align-items:center}
.vent-route-map{min-width:0;padding:10px;background:#0d202b;border-radius:14px;border:1px solid #608b9a55}
.vent-route-map svg{display:block;width:100%;height:auto}.vent-route-map>span{display:block;text-align:center;font-size:12px;color:#ffe4a0;margin:5px 0}
.vent-exits p{font-size:14px;margin:0 0 10px}.vent-exits button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;text-align:left;margin:8px 0;padding:12px 14px;border-color:#7fb3c666;background:#1b3845}
.vent-exits button span{display:grid;gap:5px}.vent-exits b{font-size:16px}.vent-exits small{font-size:10px;color:#b5cdd8}.vent-exits i{font-style:normal;font-size:23px;color:#e8ce8c}
@media(max-width:520px){.vent-route-picker{grid-template-columns:1fr;gap:14px}.vent-route-map svg{max-height:200px}.vent-exits button{min-height:62px}}

.mj-hand-status .mj-coach{min-height:25px;padding:3px 6px;margin:0;background:#214c45;border:1px solid #7d9f8755;border-radius:5px;font:inherit;color:#cfe2bb;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;white-space:nowrap}
.mj-timer.practice-untimed{font-size:10px;color:#b5d5c3;white-space:nowrap}
.mahjong-lesson .lesson-mode{padding:9px 12px;border-radius:8px;color:#cfe8ce;background:#29473d;font-size:12px}
.mahjong-lesson h3{margin:20px 0 12px;font-size:17px}.mahjong-lesson p{font-size:14px;line-height:1.8}
.lesson-shapes{display:flex;gap:15px;flex-wrap:wrap}.lesson-shapes>span{display:flex;gap:2px}.lesson-shapes .tile.small{width:28px;height:38px}
.lesson-pick{display:flex;gap:15px;padding:15px;background:#173338;border:1px solid #9ab59855;border-radius:12px;align-items:flex-start}.lesson-pick>.tile{width:43px;height:60px;flex-shrink:0}.lesson-pick>div{min-width:0}.lesson-pick b{font-size:14px}.lesson-pick p{font-size:12px;margin:8px 0}.lesson-pick button{font-size:12px;min-height:42px;padding:9px 12px}
.lesson-waits{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:10px 0}.lesson-waits small{font-size:10px;margin-right:7px}.lesson-waits .tile.small{width:24px;height:33px}
@media(max-height:520px) and (orientation:landscape){.mj-hand-status .mj-coach{min-height:17px;padding:1px 5px;font-size:9px}.mj-timer.practice-untimed{font-size:8px}}

html[data-phase=playing][data-game=deduction] .game-header{height:48px;padding:4px 18px;gap:15px;background:#102a3b;border-bottom:1px solid #b4cddd24}
html[data-phase=playing][data-game=deduction] .wordmark{font-size:15px;min-height:38px}
html[data-phase=playing][data-game=deduction] .wordmark span{font-size:7px;margin-top:4px}
html[data-phase=playing][data-game=deduction] .header-tools button{min-height:36px;padding:7px 10px}
html[data-phase=playing][data-game=deduction] .game-heading b{font-size:11px}
.conference-v4.meeting{height:calc(var(--app-height,100dvh) - 48px);max-width:none;margin:0;padding:12px max(16px,env(safe-area-inset-left)) 9px;display:grid;grid-template-rows:auto minmax(130px,1fr) auto minmax(110px,23%);gap:8px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#315368,#192f44 57%,#112439);color:#e6f0ec}
.conf-header{width:min(1050px,100%);margin:auto}
.conf-heading{display:flex;align-items:center;gap:15px;position:relative}
.conf-heading>span{font-size:9px;color:#8abccb;letter-spacing:.15em}
.conf-heading h1{font-size:22px;font-weight:750;letter-spacing:.015em;margin:0;line-height:1.4;flex:1;text-align:center}
.conf-heading>b{font-size:20px;min-width:54px;text-align:right;font-variant-numeric:tabular-nums;color:#ffe1a0}
.conf-header>p{font-size:10px;text-align:center;color:#b0c6cd;line-height:1.4;margin:7px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.conf-phases{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:8px;font-size:9px;color:#849eae}
.conf-phases span{padding:3px 12px;border-radius:20px;background:#11283d99}
.conf-phases span.on{background:#c7e3e7;color:#143a4b;font-weight:800}
.conf-phases i{font-size:14px;font-style:normal;color:#678899}
.conf-floor{display:grid;grid-template-columns:minmax(135px,1fr) minmax(180px,1.2fr) minmax(135px,1fr);width:min(980px,100%);margin:auto;height:100%;min-height:0;gap:20px;position:relative;isolation:isolate}
.conf-floor:before{content:'';position:absolute;left:50%;bottom:2%;transform:translateX(-50%);width:56%;height:40%;border:1px solid #95d9e93d;border-radius:50%;box-shadow:inset 0 0 45px #78d8ef17,0 0 30px #78d8ef12;background:radial-gradient(ellipse,#56959d1c,transparent);z-index:-1}
.conf-roster{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:0}
.conf-person.vote-person{padding:8px 12px 8px 7px;min-height:50px;display:flex;flex-direction:row;gap:9px;align-items:center;position:relative;border-radius:30px;background:linear-gradient(110deg,#284958e8,#284254e8);border:1px solid #7ca4b565;box-shadow:0 4px 12px #0002;text-align:left;color:#eef4e7}
.conf-person.vote-person:disabled{opacity:1;cursor:default}
.conf-person.vote-person.eliminated{opacity:.48;background:#162a3ccc;filter:grayscale(.85)}
.conf-person.vote-person.is-speaker{background:linear-gradient(110deg,#e6e0b7,#e2edc8);color:#213f44;border-color:#eaffcb;box-shadow:0 0 0 2px #d9ebb233,0 0 23px #d9edb12d}
.conf-person.vote-person.voted{background:#536964;border:1px solid #ddca90;box-shadow:0 0 0 2px #d5c48f55}
.conf-person.vote-person:not(:disabled):hover{transform:translateY(-2px);border-color:#f6d28d;background:#406273}
.conf-person>.avatar{width:39px;height:39px;border-radius:50%;flex-shrink:0;font-size:17px;border:2px solid color-mix(in srgb,var(--p) 80%,white);background:#122b40}
.conf-person>.avatar img{height:100%;width:100%;object-fit:contain;border-radius:50%}
.conf-seat{position:absolute;left:0;bottom:-2px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#d8e8e9;border:2px solid #264252;color:#1d3d4d;font-size:11px;font-weight:800;z-index:2}
.conf-person-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.conf-person-info b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;line-height:1.3}
.conf-person-info small{font-size:8px;line-height:1;color:#a9c4cc}
.conf-person.is-speaker .conf-person-info small{color:#4b6e66}
.conf-talking{font-style:normal;font-size:13px;letter-spacing:1px;color:#347b70;margin-left:auto;white-space:nowrap}
.conf-voted{font-size:16px;color:#e9dda4;margin-left:auto;font-style:normal}
.conf-center{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.conf-portrait{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.conf-speaker-name{z-index:1;display:flex;flex-direction:column;gap:5px;align-items:center;text-shadow:0 2px 6px #0d223d;pointer-events:none;margin-bottom:22px}
.conf-speaker-name>span{font-size:8px;letter-spacing:.22em;color:#adcad4;background:#122b40d9;padding:4px 10px;border-radius:20px;white-space:nowrap}
.conf-speaker-name>strong{font-size:18px;color:#eef4d9;white-space:nowrap;max-width:100%;text-overflow:ellipsis;overflow:hidden;line-height:1.3}
.conf-speech-tip{position:relative;z-index:1;text-align:center;font-size:9px;color:#d1dde0;line-height:1.5;min-height:28px;width:max-content;max-width:150%}
.conf-turn-dots{display:flex;justify-content:center;gap:5px;margin-top:7px}
.conf-turn-dots i{width:7px;height:4px;background:#647f91;border-radius:8px}
.conf-turn-dots i.current{width:22px;background:#f1d993}
.conf-turn-dots i.done{background:#8fd1bd}
.conf-controls{display:flex;justify-content:center;align-items:center;gap:10px;min-height:42px;width:min(900px,100%);margin:auto}
.conf-controls button{border-radius:7px;min-height:40px;padding:9px 19px;font-size:12px;font-weight:750;background:#254c62;border:1px solid #7aa6bc88}
.conf-controls .conf-finish{background:linear-gradient(#e9dbaf,#d3b875);border:1px solid #f0e0ab;border-bottom:3px solid #9b8254;color:#304140}
.conf-finish span{margin-left:25px}
.conf-controls .conf-skip.selected{border-color:#e9d29b;color:#ead49e}
.conf-controls>span{font-size:10px;color:#b0cbd4}
.conf-chat.discussion{min-height:0;max-height:none;width:min(920px,100%);margin:auto;height:100%;padding:0;background:#102c40e6;border:1px solid #85a9b64d;border-radius:10px;display:flex;flex-direction:column;overflow:hidden}
.conf-chat-head{display:flex;align-items:center;padding:6px 12px;border-bottom:1px solid #90b7c326;flex-shrink:0;gap:10px;font-size:9px;color:#94bccb}
.conf-chat-head button{margin-left:auto;background:none;min-height:26px;padding:3px 10px;font-size:9px;border-color:#8db4c14d;border-radius:5px}
.conf-chat .chat-log{flex:1;min-height:0;overflow:auto;padding:5px 12px;scrollbar-width:thin;scrollbar-color:#637f8b transparent}
.conf-chat .chat-log p{margin:0 0 7px;padding:0;display:flex;gap:10px;align-items:baseline;font-size:11px;line-height:1.5;border:0}
.conf-chat .chat-log p b{display:flex;align-items:center;gap:4px;max-width:150px;flex-shrink:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:10px;color:#b3cbd4}
.conf-chat .chat-log p b>i{display:inline-grid;place-items:center;width:17px;height:17px;background:var(--p);border-radius:50%;color:#1b3148;font-size:9px;font-style:normal;flex-shrink:0}
.conf-chat .chat-log p>span{color:#e2eaeb;overflow-wrap:anywhere}
.conf-chat .chat-log p.own>span{color:#dcdfae}
.conf-chat .chat-log p.conf-chat-empty{color:#8faebc;font-size:10px;line-height:1.8;display:block;padding:3px 0}
.conf-chat-form{flex-shrink:0}
.conf-chat-form form{display:flex;align-items:center;gap:6px;padding:5px 8px;background:#0e2537;border-top:1px solid #85a9b625;margin:0}
.conf-chat-form input{height:35px;min-height:35px;flex:1;border:0;border-radius:5px;background:#29465c;padding:6px 11px;font-size:12px;color:#e0ebec;width:0}
.conf-chat-form button{border:1px solid #9ec5d3;border-bottom:3px solid #578195;background:linear-gradient(#b2d6df,#81b0c3);color:#1d445e;width:47px;min-height:35px;height:35px;padding:0;font-size:18px;border-radius:5px}
.conf-chat-form>p{font-size:9px;color:#95adba;margin:6px 10px;line-height:1.5}
.conf-vote-confirm:empty{display:none}
.conf-vote-confirm:not(:empty){position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#1c354dda;backdrop-filter:blur(5px);border:1px solid #bdcdb74d;border-radius:12px;padding:10px}
.conf-vote-confirm>div{display:flex;flex-direction:column;gap:8px;text-align:center;width:100%}
.conf-vote-confirm small{font-size:10px;color:#afc7cf}
.conf-vote-confirm strong{font-size:19px;color:#f9e2a3;overflow-wrap:anywhere}
.conf-vote-confirm p{font-size:10px;color:#c5d7dc;line-height:1.6;margin:0}
.conf-vote-confirm button{min-height:39px;padding:7px 10px;font-size:11px;border-radius:6px}
@media(max-width:600px) and (orientation:portrait){
 .conference-v4.meeting{padding:9px 9px 7px;gap:7px;grid-template-rows:auto minmax(175px,1fr) auto minmax(130px,26%)}
 .conf-heading{gap:7px;flex-wrap:wrap;justify-content:space-between}
 .conf-heading>span{font-size:8px}
 .conf-heading h1{font-size:16px;order:3;flex:0 0 100%;margin-top:0;text-align:center}
 .conf-heading>b{font-size:16px;min-width:40px}
 .conf-phases{font-size:8px;gap:6px;margin-top:6px}
 .conf-phases span{padding:3px 10px}
 .conf-header>p{font-size:9px;margin-top:5px}
 .conf-floor{grid-template-columns:minmax(92px,1fr) minmax(104px,1.13fr) minmax(92px,1fr);gap:5px}
 .conf-roster{gap:10px}
 .conf-person.vote-person{padding:5px 5px 5px 4px;gap:4px;min-height:43px;border-radius:8px}
 .conf-person>.avatar{width:28px;height:28px;border-width:1px;font-size:13px}
 .conf-seat{width:17px;height:17px;font-size:9px;left:0;bottom:-2px;border-width:1px}
 .conf-person-info b{font-size:9px;max-width:60px}
 .conf-person-info small{font-size:7px}
 .conf-talking{position:absolute;right:5px;bottom:2px;font-size:9px}
 .conf-voted{font-size:10px;position:absolute;right:4px;bottom:2px}
 .conf-speaker-name{margin-bottom:18px;width:100%}
 .conf-speaker-name>span{font-size:6px;letter-spacing:.1em;padding:3px 6px}
 .conf-speaker-name>strong{font-size:12px}
 .conf-speech-tip{font-size:8px;max-width:120%;min-height:25px}
 .conf-controls{gap:6px;flex-wrap:wrap;min-height:40px}
 .conf-controls button{font-size:10px;min-height:39px;padding:8px 12px}
 .conf-controls>span{font-size:9px}
 .conf-finish span{margin-left:9px}
 .conf-chat .chat-log p{gap:7px;align-items:flex-start;font-size:11px}
 .conf-chat .chat-log p b{font-size:9px;max-width:95px;min-width:70px}
 .conf-chat-form input{font-size:16px}
 .conf-chat-form form{padding:5px 6px}
 .conf-vote-confirm:not(:empty){inset:4% -12%;padding:9px}
 .conf-vote-confirm p{font-size:9px}
 .conf-vote-confirm strong{font-size:15px}
 .conf-vote-confirm>div{gap:7px}
}
@media(max-height:520px) and (orientation:landscape){
 html[data-phase=playing][data-game=deduction] .game-header{height:38px;padding:1px 12px}
 html[data-phase=playing][data-game=deduction] .wordmark{font-size:12px;min-height:33px}
 html[data-phase=playing][data-game=deduction] .wordmark span{font-size:6px;margin-top:2px}
 html[data-phase=playing][data-game=deduction] .header-tools button{min-height:30px;font-size:10px;padding:5px 8px}
 .conference-v4.meeting{height:calc(var(--app-height,100dvh) - 38px);padding:5px 13px 5px;gap:4px;grid-template-rows:auto minmax(95px,1fr) auto minmax(50px,20%)}
 .conf-heading h1{font-size:15px}
 .conf-heading>b{font-size:15px}
 .conf-heading>span{font-size:8px}
 .conf-phases{margin-top:3px;font-size:8px}
 .conf-phases span{padding:2px 10px}
 .conf-header>p{position:static;width:100%;text-align:center;font-size:8px;line-height:1.35;max-height:12px;margin:3px 0 0}
 .conf-floor{grid-template-columns:minmax(130px,1fr) minmax(150px,1fr) minmax(130px,1fr);max-width:770px;gap:22px}
 .conf-roster{gap:4px}
 .conf-person.vote-person{min-height:29px;padding:3px 8px 3px 5px;gap:6px}
 .conf-person>.avatar{width:25px;height:25px;font-size:10px}
 .conf-person-info{flex-direction:row;align-items:center;gap:5px}
 .conf-person-info b{font-size:10px;max-width:100px}
 .conf-person-info small{font-size:7px}
 .conf-seat{width:16px;height:16px;font-size:8px;border-width:1px}
 .conf-speaker-name{margin-bottom:7px;gap:3px}
 .conf-speaker-name>span{font-size:6px;padding:2px 7px}
 .conf-speaker-name>strong{font-size:12px}
 .conf-speech-tip{font-size:8px;min-height:16px}
 .conf-turn-dots{margin-top:3px}
 .conf-controls{min-height:29px}
 .conf-controls button{min-height:29px;padding:5px 13px;font-size:10px}
 .conf-chat-head{display:none}
 .conf-chat.discussion{display:grid;grid-template-columns:1fr 43%;grid-template-rows:1fr;max-width:900px}
 .conf-chat .chat-log{padding:3px 8px}
 .conf-chat .chat-log p{font-size:9px;margin:0 0 3px}
 .conf-chat .chat-log p b{font-size:8px}
 .conf-chat .chat-log p.conf-chat-empty{font-size:8px}
 .conf-chat-form{display:grid;align-items:end;border-left:1px solid #6d95a44d}
 .conf-chat-form form{background:transparent;border:0}
 .conf-chat-form input{font-size:12px;min-height:31px;height:31px}
 .conf-chat-form button{min-height:31px;height:31px}
 .conf-vote-confirm:not(:empty){inset:-10% -5%;padding:7px}
 .conf-vote-confirm>div{gap:4px}
 .conf-vote-confirm strong{font-size:15px}
 .conf-vote-confirm p{font-size:8px}
 .conf-vote-confirm button{min-height:28px;padding:5px;font-size:10px}
}
.role-portrait.crew-role-portrait{background:none;mask-image:none;-webkit-mask-image:none;aspect-ratio:2/3;width:180px;border-radius:0;max-height:270px;filter:drop-shadow(0 9px 18px #0005)}
.crew-role-portrait>img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-height:740px) and (orientation:portrait){.role-portrait.crew-role-portrait{width:120px;max-height:180px}}
@media(max-height:520px) and (orientation:landscape){.cinematic-role>.role-portrait.crew-role-portrait{width:155px;max-height:260px}}

/* Give the meeting the full landscape viewport and make votes finger-sized. */
@media(min-width:600px) and (max-height:520px) and (orientation:landscape){
 html:has(.conference-v4) .game-header{position:absolute;inset:6px 12px auto auto;width:auto;height:auto;background:none;border:0;padding:0;z-index:8}
 html:has(.conference-v4) .game-header>.wordmark,html:has(.conference-v4) .game-heading{display:none}
 html:has(.conference-v4) .header-tools{gap:5px}
 html:has(.conference-v4) .header-tools button{min-height:38px;padding:7px 9px;font-size:10px}
 .conference-v4.meeting{height:var(--app-height,100dvh);padding:6px max(12px,env(safe-area-inset-left));gap:4px;grid-template-rows:46px minmax(0,1fr) 44px 48px;position:relative}
 .conf-header{padding-right:108px;height:46px}
 .conf-heading{gap:7px}.conf-heading h1{font-size:14px;line-height:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.conf-heading>b{font-size:15px;min-width:37px}
 .conf-phases{margin-top:3px;font-size:7px;gap:5px;line-height:12px}.conf-phases span{padding:1px 8px}.conf-phases i{font-size:11px}
 .conf-header>p{margin:2px 0 0;font-size:7px;line-height:9px}
 .conf-floor{max-width:1000px;grid-template-columns:minmax(155px,1fr) minmax(145px,1fr) minmax(155px,1fr);gap:16px}
 .conf-roster{gap:2px}
 .conf-person.vote-person{min-height:44px;padding:4px 8px;gap:7px;border-radius:25px}
 .conf-person>.avatar{width:32px;height:32px}
 .conf-person-info{flex-direction:column;align-items:flex-start;gap:3px}.conf-person-info b{font-size:11px;max-width:155px}.conf-person-info small{font-size:8px}
 .conf-controls{min-height:44px}.conf-controls button{min-height:44px;font-size:11px;padding:7px 16px}
 .conf-chat-form input,.conf-chat-form button{min-height:38px;height:38px}
 .conf-vote-confirm button{min-height:44px;font-size:11px}
 .conf-vote-confirm:not(:empty){inset:0 -3%;padding:7px}
 .conf-vote-confirm>div{gap:5px}.conf-vote-confirm p{font-size:9px}
}
@media(min-width:600px) and (max-height:379px) and (orientation:landscape){
 .conference-v4.meeting{padding-top:4px;padding-bottom:4px;gap:3px;grid-template-rows:44px minmax(0,1fr) 40px 44px}
 .conf-person.vote-person{min-height:40px}.conf-person>.avatar{width:28px;height:28px}.conf-controls,.conf-controls button{min-height:40px}
}
.conf-controls .conf-mic.is-live{background:#315c4e;border-color:#b2dcb1;color:#e0f3d3}
.conf-controls .conf-mic.is-armed{border-color:#d2bd80;color:#efdbab}
.conf-chat-head .conf-chat-done{display:none}
html[data-keyboard=open] .conference-v4.meeting{grid-template-rows:auto minmax(0,1fr);gap:6px}
html[data-keyboard=open] .conf-floor,html[data-keyboard=open] .conf-controls{display:none}
html[data-keyboard=open] .conf-chat.discussion{display:flex;flex-direction:column;min-height:0}
html[data-keyboard=open] .conf-chat-head{display:flex;min-height:38px;padding:0 9px}
html[data-keyboard=open] .conf-chat-head .conf-chat-done{display:block;min-height:36px;font-size:11px}
html[data-keyboard=open] .conf-chat-head [data-a=observations]{display:none}
html[data-keyboard=open] .conf-chat .chat-log{flex:1;font-size:11px}
html[data-keyboard=open] .conf-chat-form{display:block;border:0}
html[data-keyboard=open] .conf-chat-form input{font-size:16px;min-height:40px;height:40px}
html[data-keyboard=open] .conf-chat-form button{min-height:40px;height:40px}

html[data-phase=entry] .game-header{height:52px;padding:5px 24px;background:#0d2435;border-bottom-color:#aed4e428}
html[data-phase=entry][data-game=mahjong] .game-header{background:#122e2b}
html[data-phase=entry] .wordmark{font-size:15px;min-height:36px}
html[data-phase=entry] .wordmark span{font-size:6px}
html[data-phase=entry] .game-heading b{font-size:11px}
html[data-phase=entry] .header-tools button{min-height:35px;font-size:10px}
.game-home-v4{height:calc(var(--app-height,100dvh) - 52px);min-height:520px;position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr 1.04fr;grid-template-rows:auto 1fr auto;gap:20px 4%;padding:25px max(30px,calc((100vw - 1240px)/2));background:#14334a}
.home-scene{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#091c3855,#122940b8 52%,#152e45ef 100%),url('./art/voyage-home-v4.webp') 32% 50%/cover;opacity:.9}
.home-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0e2435eb,transparent 40%,#1d4c600b 65%,#10263c88)}
.home-mahjong{background:#17392f}
.home-mahjong .home-scene{background-image:linear-gradient(90deg,#091e1450,#132f25b5 52%,#163729e8),url('./art/mahjong-title.webp');background-position:28% 53%;opacity:.9}
.home-mahjong .home-scene:after{background:linear-gradient(0deg,#0c251bf7,transparent 40%,#12372a22 65%,#172f2499)}
.home-profile{display:flex;align-items:center;gap:10px;grid-column:1/-1;max-width:300px;z-index:1}
.home-profile-icon{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;border-radius:14px;background:linear-gradient(130deg,#ccdcda,#73a8b9);box-shadow:0 4px 12px #04182477;border:1px solid #d4e1dd;color:#28485b;font-size:19px;font-weight:800}
.home-profile>div{display:grid;gap:4px;min-width:0;text-shadow:0 2px 7px #091727}
.home-profile strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-profile small{font-size:11px;color:#bacdd6}
.home-profile>a{display:grid;place-items:center;width:32px;height:32px;border:1px solid #bed6d449;border-radius:50%;margin-left:4px;color:#d7e9e5;font-size:23px}
.home-title{align-self:center;margin-top:-30px;padding-bottom:50px;text-shadow:0 4px 23px #020b16aa;position:relative}
.home-title>span{font-size:10px;color:#d9e6e7;letter-spacing:.37em}
.home-title h1{font-size:clamp(34px,4.6vw,65px);line-height:1.25;letter-spacing:.08em;margin:13px 0 16px;color:#fff5d5;font-weight:800;white-space:nowrap}
.home-mahjong .home-title h1{font-family:'Yu Mincho','Hiragino Mincho ProN',serif}
.home-title>p{font-size:13px;letter-spacing:.1em;margin:0 0 20px;color:#e2e8e3}
.home-genre{display:flex;gap:10px;align-items:center;font-size:11px;color:#bdd0d7;letter-spacing:.03em}
.home-genre>i{height:3px;width:3px;border-radius:50%;background:#aac1ca}
.home-mode-area{align-self:center;min-width:0;max-width:560px;width:100%;margin-left:auto;padding:15px 0}
.home-modes{display:grid;gap:17px}
.home-mode{border-radius:18px;min-height:134px;position:relative;overflow:hidden;display:flex;align-items:center;padding:18px 24px 18px 39%;text-align:left;border:1px solid #b1e6efbd;border-bottom:4px solid #26738b;box-shadow:0 9px 22px #051c3966,inset 0 1px 0 #fff5;color:#123a51;background:linear-gradient(110deg,#6fc6d2,#c2f0e5);transition:transform .18s,filter .18s}
.home-mode:hover{background:linear-gradient(110deg,#88d9e2,#d6fff0);transform:translateY(-3px);filter:brightness(1.04)}
.home-mode:active{transform:translateY(1px)}
.home-mode:after{content:'';position:absolute;right:-45px;top:-50px;border-radius:50%;width:180px;height:180px;border:23px solid #fff2;pointer-events:none}
.home-mode.mode-roles{background:linear-gradient(110deg,#aca2e2,#f0d4eb);border-color:#e5d9ff;border-bottom-color:#716299;color:#3b3561}
.home-mode.mode-roles:hover{background:linear-gradient(110deg,#bab0f1,#ffe1f5)}
.home-mode.mode-east{background:linear-gradient(110deg,#70b3a3,#d3eac4);border-color:#c7e4c2;border-bottom-color:#437e66;color:#264e43}
.home-mode.mode-south{background:linear-gradient(110deg,#d4af6d,#f4e6ba);border-color:#e9dcb5;border-bottom-color:#8d7349;color:#5a462e}
.mode-info{display:flex;flex-direction:column;gap:7px;position:relative;z-index:1}
.mode-info small{font-size:11px;opacity:.8;font-weight:600}
.mode-info b{font-size:25px;line-height:1.2;letter-spacing:.04em;font-weight:850}
.mode-info em{font-size:12px;font-style:normal;opacity:.95;line-height:1.4}
.home-mode>i{position:absolute;right:17px;top:50%;font-size:29px;transform:translateY(-50%);font-style:normal;opacity:.6}
.mode-art{position:absolute;left:0;top:0;width:37%;height:100%;overflow:hidden;pointer-events:none}
.mode-art>img{height:175%;width:115%;object-fit:contain;object-position:top;position:absolute;bottom:-63%;left:0;filter:drop-shadow(2px 6px 6px #12547933)}
.mode-orbit{display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#f6eac644,transparent 70%)}
.mode-orbit>span{font-size:84px;color:#f6f2d8;filter:drop-shadow(0 4px 5px #4d438b77);text-shadow:2px 2px #bfb2df}
.mode-orbit>i{position:absolute;width:90px;height:65px;border:2px solid #fcf1da9c;border-radius:50%;transform:rotate(40deg)}
.mode-orbit>i:last-child{transform:rotate(-40deg)}
.mode-tiles{display:flex;align-items:center;justify-content:center;transform:rotate(-12deg);gap:3px;overflow:visible;padding-left:15px}
.mode-tiles>.tile{width:43px;height:59px;padding:3px 3px 6px;filter:drop-shadow(2px 6px 2px #173c2944);border-radius:5px;flex-shrink:0}
.mode-tiles>.tile:first-child{transform:translateY(8px) rotate(-12deg)}
.mode-tiles>.tile:last-child{transform:translateY(8px) rotate(12deg)}
.home-secondary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}
.home-secondary>button{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:12px;border:1px solid #a3d3da57;background:linear-gradient(135deg,#345773dd,#274258e8);padding:13px 5px 12px;box-shadow:0 5px 12px #00132d2e;color:#e9efea}
.home-mahjong .home-secondary>button{background:linear-gradient(135deg,#34594be8,#294539ee);border-color:#a9c4aa55}
.home-secondary>button:hover{filter:brightness(1.14);transform:translateY(-2px)}
.home-action-icon{display:grid;place-items:center;width:33px;height:30px;color:#d5e9df;font-size:29px;line-height:1;font-weight:400}
.home-secondary b{font-size:12px;white-space:nowrap}
.home-secondary small{font-size:11px;color:#c6dce4;white-space:normal;line-height:1.4;text-wrap:balance}
.home-mahjong .home-secondary small{color:#b2c6b4}
.home-mode-note{font-size:11px;text-align:center;color:#aec1c7;margin:13px 0 0;line-height:1.5}
.home-bottom{grid-column:1/-1;display:flex;gap:7px;align-items:center;justify-content:flex-end;border-top:1px solid #bdd6d62b;padding-top:12px}
.home-bottom>a{margin-right:auto;color:#bdcfcf;font-size:12px;padding:8px}
.home-bottom>button{min-height:40px;font-size:12px;padding:7px 17px;border:1px solid #b3c4c430;border-radius:8px;background:#18334ba1;color:#d1dbda}
.home-mahjong .home-bottom>button{background:#294333b5}
.home-invitation{display:flex;gap:12px;align-items:center;width:100%;padding:12px 15px;margin-bottom:12px;background:#f1deaa;border:1px solid #fff0c9;color:#3b4a4c;border-radius:12px}
.home-invitation span{font-size:11px}
.home-invitation b{font-size:14px;letter-spacing:.1em}
.home-invitation strong{font-size:11px;margin-left:auto}
.home-alert{padding:10px;background:#54363ce8;border:1px solid #d7978a;border-radius:10px;font-size:12px;margin-bottom:12px}
.modal .friend-options{padding:0;border:0;margin:0}
.friend-create>h3,.friend-join>h3{font-size:14px;font-weight:700;margin:5px 0 14px}
.friend-create>p{font-size:11px;color:#aabdc5;line-height:1.7;margin:12px 0 22px}
.friend-create .entry-options{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:0}
.friend-create .entry-options>button{grid-column:1/-1;margin-top:2px}
.friend-create .entry-options>label:only-of-type{grid-column:1/-1}
.friend-join{border-top:1px solid #a4c5c333;padding-top:20px}
.friend-join .join-row{display:flex;flex-direction:row;gap:8px;margin-bottom:0}
.friend-join input{min-width:0;flex:1;text-transform:uppercase;letter-spacing:.14em}
.friend-join button{min-width:95px;padding:8px}
.mode-choice{display:flex;flex-direction:column;gap:12px}
.mode-choice>p{font-size:13px;color:#bfd0d0;line-height:1.8;margin:0 0 8px}
.mode-choice>button{min-height:54px;display:flex;justify-content:space-between;align-items:center;text-align:left;font-size:14px}
.mode-choice>small{font-size:10px;color:#9eb8bd;line-height:1.6;margin-top:5px}
.public-rooms{display:grid;gap:10px}
.public-rooms>button{display:flex;gap:15px;align-items:center;text-align:left;padding:15px 17px;border:1px solid #7196a866;background:linear-gradient(115deg,#2b4b5b,#1c3549);border-radius:12px}
.public-rooms>button>span{flex:1;min-width:0;display:grid;gap:6px}
.public-rooms b{font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.public-rooms small{font-size:10px;color:#b2cbd1}
.public-rooms strong{font-size:24px;color:#e0eac3;white-space:nowrap}
.public-rooms strong small{font-size:13px;font-weight:400}
.public-rooms i{font-style:normal;color:#c0d8d4;font-size:22px}
.rooms-tools{display:flex;gap:10px;margin-top:20px}
.rooms-tools>button{font-size:12px;flex:1;padding:10px 7px}
.rooms-tools>.primary{flex:2}
.rooms-empty{text-align:center;padding:15px 10px}
.rooms-empty>span{font-size:49px;color:#b9d9dc}
.rooms-empty h3{font-size:16px;margin:15px 0}
.rooms-empty p{font-size:12px;color:#a7c1c9;margin:0}
@media(max-width:700px) and (orientation:portrait){
 html[data-phase=entry] .game-header{padding:5px 16px;gap:14px}
 .game-home-v4{grid-template-columns:1fr;grid-template-rows:auto minmax(110px,1fr) auto auto;gap:8px;padding:16px 18px 10px;min-height:690px}
 .home-scene{background:linear-gradient(#1331441a 10%,#17314670 34%,#152e45f5 72%),url('./art/voyage-home-v4.webp') 32% 0/auto 70% no-repeat;opacity:1}
 .home-mahjong .home-scene{background:linear-gradient(#17392f11 10%,#132e2a50 35%,#12392bf5 72%),url('./art/mahjong-title.webp') 31% -45px/auto 78% no-repeat}
 .home-profile{grid-column:1;gap:9px;max-width:260px}
 .home-profile-icon{width:36px;height:36px;font-size:16px;border-radius:11px}
 .home-profile strong{font-size:13px}
 .home-profile small{font-size:11px}
 .home-title{align-self:center;margin:0;padding:10px 0 5px;text-align:center}
 .home-title>span{font-size:8px;letter-spacing:.27em}
 .home-title h1{font-size:39px;margin:7px 0 10px;letter-spacing:.06em}
 .home-title>p{font-size:12px;letter-spacing:.08em;margin-bottom:10px}
 .home-genre{justify-content:center;font-size:11px;gap:8px}
 .home-mode-area{padding:8px 0 0;max-width:460px;margin:auto}
 .home-modes{gap:12px}
 .home-mode{min-height:102px;border-radius:14px;padding:12px 17px 12px 39%}
 .mode-info{gap:5px}
 .mode-info small{font-size:11px}
 .mode-info b{font-size:24px}
 .mode-info em{font-size:12px}
 .home-mode>i{right:13px;font-size:25px}
 .mode-tiles{padding-left:10px;gap:1px}
 .mode-tiles>.tile{width:34px;height:49px;padding:3px 3px 6px}
 .mode-orbit>span{font-size:69px}
 .mode-orbit>i{width:76px;height:49px}
 .home-secondary{gap:8px;margin-top:12px}
 .home-secondary>button{padding:10px 3px;gap:5px;border-radius:10px}
 .home-secondary b{font-size:12px}
 .home-secondary small{font-size:11px}
 .home-action-icon{height:25px;font-size:26px}
 .home-mode-note{font-size:11px;margin-top:10px}
 .home-bottom{gap:4px;grid-column:1;padding-top:8px;margin-top:5px}
 .home-bottom>a{font-size:12px;padding:6px 2px}
 .home-bottom>button{padding:6px 9px;min-height:40px;font-size:12px;border-radius:6px}
 .home-invitation{gap:8px;padding:9px}
 .home-invitation span{font-size:11px}
 .home-invitation b{font-size:12px}
 .home-invitation strong{font-size:11px}
}
@media(max-height:520px) and (orientation:landscape){
 html[data-phase=entry] .game-header{height:44px;padding:1px 17px}
 html[data-phase=entry] .wordmark{font-size:12px;min-height:33px}
 html[data-phase=entry] .wordmark span{font-size:5px;margin-top:3px}
 html[data-phase=entry] .header-tools button{min-height:40px;padding:4px 10px}
 .game-home-v4{height:calc(var(--app-height,100dvh) - 44px);min-height:330px;grid-template-columns:.9fr 1.1fr;gap:8px 5%;padding:12px 27px 7px;grid-template-rows:auto 1fr auto}
 .home-profile{grid-column:1;grid-row:1;gap:8px}
 .home-profile-icon{width:31px;height:31px;font-size:15px;border-radius:10px}
 .home-profile strong{font-size:13px}
 .home-profile small{font-size:11px}
 .home-profile>a{height:40px;width:40px;font-size:22px}
 .home-title{grid-column:1;grid-row:2;margin:0;padding:0}
 .home-title>span{font-size:7px;letter-spacing:.25em}
 .home-title h1{font-size:34px;margin:9px 0 12px}
 .home-title>p{font-size:12px;margin-bottom:12px}
 .home-genre{font-size:11px}
 .home-mode-area{grid-column:2;grid-row:1/3;padding:0}
 .home-modes{gap:10px}
 .home-mode{min-height:83px;border-radius:12px;padding:10px 16px 10px 38%;border-bottom-width:3px}
 .mode-info{gap:4px}
 .mode-info small{font-size:11px}
 .mode-info b{font-size:21px}
 .mode-info em{font-size:12px}
 .home-mode>i{font-size:22px;right:10px}
 .mode-tiles>.tile{width:30px;height:43px}
 .mode-tiles{gap:0;padding-left:8px}
 .mode-orbit>span{font-size:63px}
 .mode-orbit>i{width:69px;height:45px}
 .home-secondary{gap:7px;margin-top:10px}
 .home-secondary>button{padding:8px 2px;gap:4px;border-radius:9px}
 .home-secondary b{font-size:12px}
 .home-secondary small{font-size:11px}
 .home-action-icon{height:20px;font-size:21px}
 .home-mode-note{font-size:11px;margin-top:8px}
 .home-bottom{padding-top:5px;gap:6px}
 .home-bottom>a{font-size:12px;padding:5px}
 .home-bottom>button{min-height:40px;padding:4px 14px;font-size:12px;border-radius:6px}
 .home-invitation{padding:7px 10px;min-height:32px;margin-bottom:7px}
 .home-invitation span,.home-invitation strong{font-size:11px}.home-invitation b{font-size:10px}
}

/* Small screens keep useful labels readable; secondary detail remains in the dialogs. */
.home-profile>a{min-width:40px;min-height:40px}
.home-invitation{min-height:40px!important}.home-invitation span,.home-invitation strong{font-size:11px!important}
html[data-phase=entry] .header-tools button{min-height:40px}
@media(max-width:700px) and (orientation:portrait){
 .home-secondary>button{min-height:92px;padding:10px 5px}
 .home-bottom{flex-wrap:wrap}.home-bottom>button{min-width:55px}
 .game-home-v4:has(.home-invitation){min-height:746px}
}
@media(max-height:520px) and (orientation:landscape){
 .home-secondary small,.home-mode-note{display:none}
 .home-secondary>button{min-height:56px;padding:7px 3px}
 .home-modes{gap:8px}.home-secondary{margin-top:8px}
 .home-mode{min-height:83px}.mode-info{gap:3px}
 .home-title>p{margin-bottom:8px}
 .game-home-v4:has(.home-invitation){min-height:380px}
}
@media(max-width:720px) and (max-height:520px) and (orientation:landscape){
 .mode-info small{display:none}.mode-info em{font-size:12px}
 .home-mode{padding-right:23px}.home-mode>i{right:7px}
 .home-bottom>button{padding:6px 12px}
}

html[data-phase=lobby] .game-header{height:48px;padding:4px 18px;background:#102a3b;border-bottom:1px solid #b4cddd24;gap:15px}
html[data-phase=lobby][data-game=mahjong] .game-header{background:#17382f}
html[data-phase=lobby] .wordmark{font-size:15px;min-height:38px}
html[data-phase=lobby] .wordmark span{font-size:6px;margin-top:4px}
html[data-phase=lobby] .header-tools button{min-height:35px;padding:7px 11px;font-size:10px}
html[data-phase=lobby] .game-heading b{font-size:11px}
.lobby.lobby-v4{width:100%;height:calc(var(--app-height,100dvh) - 48px);max-width:none;margin:0;padding:18px 24px 15px;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,30%);grid-template-rows:auto minmax(0,1fr) auto;gap:15px 22px;text-align:left;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 33% 35%,#396373cc,#143246e6 68%),url('./art/space-backdrop-v2.webp') center/cover}
.lobby.lobby-v4.lobby-mahjong{background:radial-gradient(ellipse at 30% 40%,#325b46b0,#123228eb 70%),url('./art/mahjong-title.webp') center/cover}
.lobby-v4:before{display:none}
.lobby-v4-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;grid-column:1/-1}
.lobby-v4-heading>div{display:flex;align-items:center;gap:14px}
.lobby-room-tag{border:1px solid #94c5cd65;padding:5px 10px;border-radius:20px;color:#bbdce1;background:#12344d80;font-size:10px;white-space:nowrap}
.lobby-v4-heading h1{font-size:21px;line-height:1.3;margin:0;letter-spacing:.05em;color:#eff3e3}
.lobby-v4 .invite-code{margin:0;display:flex;align-items:center;gap:15px;padding:8px 15px;background:#41617466;border:1px solid #9bc2c56b;border-radius:10px;color:#e9edda;min-height:43px}
.lobby-v4 .invite-code>small{font-size:10px;letter-spacing:0;color:#b6cdd5;display:block}
.lobby-v4 .invite-code>span{font:750 20px ui-monospace,monospace;letter-spacing:.14em;margin:0;display:block}
.lobby-v4 .invite-code>b{font-size:10px;letter-spacing:0;color:#bfe4de;font-weight:500}
.lobby-stage{position:relative;min-height:0;min-width:0;overflow:hidden;border:1px solid #a4d3dc30;border-radius:18px;background:linear-gradient(#1d465d14,#0e2e4470)}
.lobby-scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.lobby-stage-caption{position:absolute;left:22px;bottom:24px;display:flex;flex-direction:column;gap:8px;pointer-events:none;text-shadow:0 2px 5px #001b30;z-index:2}
.lobby-stage-caption>span{font-size:8px;color:#b0d4de;letter-spacing:.25em}
.lobby-stage-caption>b{font-size:19px;color:#e3f0e9;font-weight:700;letter-spacing:.03em}
.lobby-stage-caption>small{font-size:10px;color:#a7c7d0}
.lobby-wave{position:absolute;right:15px;bottom:20px;border:1px solid #c4ddca80;background:#335269c2;backdrop-filter:blur(5px);width:44px;height:44px;padding:0;font-size:23px;border-radius:50%;z-index:3}
.lobby-side{display:flex;flex-direction:column;min-height:0;padding:0 0 3px}
.lobby-side-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 2px}
.lobby-side-heading>b{font-size:13px;color:#c6dce1;font-weight:600}
.lobby-side-heading>span{font-size:21px;color:#e2edc5;font-weight:800}
.lobby-side-heading>span>small{font-size:11px;color:#91b4c4;font-weight:400}
.lobby-v4 .lobby-seats{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:2px 2px 8px;overflow-y:auto;min-height:0;flex:1;align-content:start;scrollbar-width:thin;scrollbar-color:#577484 transparent}
.lobby-v4 .lobby-seat{display:flex;align-items:center;text-align:left;gap:9px;position:relative;min-height:57px;padding:7px 11px;border:1px solid #7199a64a;border-radius:10px;background:linear-gradient(115deg,#42657577,#23465b99);min-width:0}
.lobby-v4 .lobby-seat.self{border-color:#d1deb5;background:linear-gradient(110deg,#637d756e,#4b73616b)}
.lobby-seat-number{font-size:10px;color:#a7c3d0;flex-shrink:0;width:11px;text-align:center}
.lobby-v4 .lobby-seat>.avatar{width:36px;height:36px;min-width:36px;border-radius:50%;border:1px solid color-mix(in srgb,var(--p,#9db6bd) 60%,transparent);background:#16334c;font-size:18px;overflow:visible;position:relative}
.lobby-v4 .lobby-seat .avatar>img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.lobby-v4 .lobby-seat>div{display:grid;gap:4px;min-width:0;flex:1}
.lobby-v4 .lobby-seat b{font-size:12px;color:#e6efed;max-width:100%;line-height:1.25}
.lobby-v4 .lobby-seat>div>small{font-size:8px;line-height:1.2;color:#9abac6}
.lobby-v4 .lobby-seat.is-ready>div>small{color:#c2d9b6}
.lobby-v4 .lobby-seat.empty{opacity:.53;border-style:dashed;background:#173b501f}
.lobby-v4 .lobby-seat.empty>.avatar{border:1px solid #98b7c380;background:#224559;color:#bad2db}
.lobby-v4 .lobby-seat.empty b{font-size:10px;font-weight:400}
.lobby-seat-mark{font-size:14px;color:#cde7b9}
.lobby-seat-menu{padding:0;min-height:28px;height:28px;width:26px;flex-shrink:0;border:0;background:none;color:#b0cad6;font-size:19px}
.lobby-rule-card{flex-shrink:0;border-top:1px solid #91b5c036;padding:12px 2px 0;margin-top:5px}
.lobby-rule-card>div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lobby-rule-card b{font-size:10px;color:#b9d0d6;font-weight:500}
.lobby-rule-card>div>button{padding:3px 8px;min-height:27px;border-radius:5px;font-size:9px;background:#193d5388;border-color:#94b6c244}
.lobby-rule-card>p{font-size:9px;line-height:1.7;color:#98b7c3;margin:8px 0 0}
.lobby-rule-card>.lobby-visibility{width:100%;padding:5px 8px;min-height:31px;font-size:9px;color:#c0ded8;background:#21465680;border:1px solid #88b9bc3d;border-radius:5px;margin-top:10px}
.lobby-v4-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:18px;align-items:center;padding-top:12px;border-top:1px solid #b4d3d12b}
.lobby-voice-entry{display:flex;align-items:center;gap:12px}
.lobby-voice-entry>button{font-size:12px;min-height:44px;border-radius:10px;padding:9px 18px;background:#385c72;border-color:#a5c8d36b;color:#e0ebdc}
.lobby-voice-entry>small{font-size:9px;color:#9ab9c3}
.lobby-v4 .lobby-actions{display:flex;gap:20px;align-items:center;margin:0;padding:0}
.lobby-v4 .lobby-actions>div{display:grid;gap:6px;text-align:right}
.lobby-actions>div>b{font-size:11px;color:#d8e6d0;font-weight:600}
.lobby-actions>div>small{font-size:8px;color:#9bb8c0}
.lobby-v4 .lobby-actions>.primary{display:flex;gap:28px;align-items:center;justify-content:space-between;min-width:185px;padding:13px 18px;border-radius:10px;background:linear-gradient(#eae2ba,#d7c486);border:1px solid #f4e4b5;border-bottom:3px solid #a08754;color:#364e4b;font-size:15px;font-weight:800;box-shadow:0 6px 16px #0a253388}
.lobby-actions>.primary>span{font-size:21px}
.lobby-table-illustration{position:absolute;inset:0;background:url('./art/mahjong-title.webp') center/cover}
.lobby-table-illustration:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#16362aeb)}
.lobby-mahjong .lobby-stage-caption>span{color:#c1cfaa}
.lobby-mahjong .lobby-seat{background:linear-gradient(110deg,#42675577,#24463699);border-color:#85a38555}
.lobby-mahjong .lobby-seat.self{background:#7183626b;border-color:#e1deae}
.scene-fallback .lobby-stage{background:url('./art/space-voyage-v2.webp') center/cover}
@media(max-width:700px) and (orientation:portrait){
 .lobby.lobby-v4{padding:12px 12px 10px;grid-template-columns:1fr;grid-template-rows:auto minmax(145px,.95fr) minmax(190px,1.05fr) auto;gap:10px;height:calc(var(--app-height,100dvh) - 48px)}
 .lobby-v4-heading{gap:10px;grid-column:1;align-items:center}
 .lobby-v4-heading>div{display:grid;gap:5px}
 .lobby-room-tag{font-size:8px;padding:3px 7px;width:max-content}
 .lobby-v4-heading h1{font-size:19px;margin-left:2px}
 .lobby-v4 .invite-code{gap:5px 9px;flex-wrap:wrap;justify-content:center;max-width:160px;padding:7px 10px;border-radius:9px}
 .lobby-v4 .invite-code>small{font-size:8px}.lobby-v4 .invite-code>span{font-size:18px}.lobby-v4 .invite-code>b{font-size:8px;flex-basis:100%;text-align:center}
 .lobby-stage{border-radius:13px}
 .lobby-stage-caption{left:13px;bottom:12px;gap:5px}
 .lobby-stage-caption>span{font-size:6px}.lobby-stage-caption>b{font-size:13px}.lobby-stage-caption>small{font-size:8px}
 .lobby-wave{right:12px;bottom:12px;width:36px;height:36px;min-height:36px;font-size:18px}
 .lobby-side{display:grid;grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr 1fr;gap:5px 10px;min-height:0;padding:0}
 .lobby-side-heading{grid-column:1/-1;margin:0 0 2px}.lobby-side-heading>b{font-size:11px}.lobby-side-heading>span{font-size:17px}.lobby-side-heading>span>small{font-size:9px}
 .lobby-v4 .lobby-seats{grid-column:1;grid-template-columns:1fr;gap:5px;min-height:0;padding:1px 2px 2px}
 .lobby-v4 .lobby-seat{min-height:43px;padding:5px;gap:5px;border-radius:7px}
 .lobby-v4 .lobby-seat>.avatar{width:27px;height:27px;min-width:27px;font-size:15px}.lobby-seat-number{font-size:8px;width:8px}.lobby-v4 .lobby-seat b{font-size:9px}.lobby-v4 .lobby-seat>div>small{font-size:7px}.lobby-v4 .lobby-seat>div{gap:3px}
 .lobby-v4 .lobby-seat.empty b{font-size:8px}.lobby-seat-menu{width:15px;font-size:15px}.lobby-seat-mark{font-size:10px}
 .lobby-rule-card{border-top:0;border-left:1px solid #91b5c036;padding:5px 0 0 10px;margin:0;grid-column:2;grid-row:2;overflow:auto;scrollbar-width:thin}
 .lobby-rule-card>div{gap:4px;flex-wrap:wrap}.lobby-rule-card b{font-size:9px}.lobby-rule-card p{font-size:8px;line-height:1.8}.lobby-rule-card>.lobby-visibility{font-size:8px;margin-top:8px;padding:5px}
 .lobby-v4-bottom{grid-column:1;padding-top:9px;gap:9px;align-items:flex-end}
 .lobby-voice-entry{display:flex;flex-direction:column;gap:5px;align-items:center;flex-shrink:0}
 .lobby-voice-entry>button{min-height:39px;padding:8px 11px;font-size:10px;border-radius:8px}.lobby-voice-entry>small{font-size:6px}
 .lobby-v4 .lobby-actions{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:6px}
 .lobby-v4 .lobby-actions>div{gap:2px;text-align:center}.lobby-actions>div>b{font-size:9px}.lobby-actions>div>small{display:none}
 .lobby-v4 .lobby-actions>.primary{min-width:0;min-height:44px;padding:10px 13px;font-size:12px;gap:10px;border-radius:8px}
}
@media(max-height:520px) and (orientation:landscape){
 html[data-phase=lobby] .game-header{height:38px;padding:1px 13px}.game-header .wordmark{min-height:30px}html[data-phase=lobby] .wordmark{font-size:12px}html[data-phase=lobby] .header-tools button{min-height:29px;font-size:9px;padding:5px 9px}
 .lobby.lobby-v4{height:calc(var(--app-height,100dvh) - 38px);padding:9px 17px 8px;gap:8px 14px;grid-template-columns:minmax(0,1fr) minmax(245px,37%)}
 .lobby-v4-heading>div{gap:10px}.lobby-room-tag{font-size:8px;padding:4px 8px}.lobby-v4-heading h1{font-size:16px}
 .lobby-v4 .invite-code{min-height:31px;padding:5px 10px;gap:10px;border-radius:7px}.lobby-v4 .invite-code>span{font-size:16px}.lobby-v4 .invite-code>small,.lobby-v4 .invite-code>b{font-size:8px}
 .lobby-stage{border-radius:12px}.lobby-stage-caption{left:13px;bottom:11px;gap:4px}.lobby-stage-caption>span{font-size:6px}.lobby-stage-caption>b{font-size:12px}.lobby-stage-caption>small{font-size:7px}.lobby-wave{right:12px;bottom:11px;width:30px;height:30px;min-height:30px;font-size:16px}
 .lobby-side{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;padding:0}
 .lobby-side-heading{margin-bottom:5px}.lobby-side-heading>b{font-size:10px}.lobby-side-heading>span{font-size:16px}.lobby-side-heading>span>small{font-size:9px}
 .lobby-v4 .lobby-seats{grid-template-columns:1fr 1fr;gap:5px;padding-bottom:2px}.lobby-v4 .lobby-seat{padding:4px 5px;min-height:35px;gap:4px;border-radius:7px}.lobby-seat-number{font-size:7px;width:8px}.lobby-v4 .lobby-seat>.avatar{width:23px;height:23px;min-width:23px;font-size:13px}.lobby-v4 .lobby-seat b{font-size:8px}.lobby-v4 .lobby-seat>div>small{font-size:6px}.lobby-v4 .lobby-seat>div{gap:3px}.lobby-seat-mark{font-size:9px}.lobby-seat-menu{width:13px;height:22px;min-height:22px;font-size:14px}.lobby-v4 .lobby-seat.empty b{font-size:7px}
 .lobby-rule-card{padding:5px 0 0;margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.lobby-rule-card>div{gap:7px}.lobby-rule-card b{font-size:8px}.lobby-rule-card>p{font-size:7px;margin:0;flex:1;min-width:100px;max-height:30px;overflow:auto}.lobby-rule-card>div>button{font-size:7px;min-height:22px;padding:3px 5px}.lobby-rule-card>.lobby-visibility{margin:0;width:auto;font-size:7px;padding:4px 6px;min-height:22px}
 .lobby-v4-bottom{padding-top:7px;gap:10px}.lobby-voice-entry{gap:9px}.lobby-voice-entry>button{font-size:9px;min-height:33px;padding:7px 12px;border-radius:7px}.lobby-voice-entry>small{font-size:7px}
 .lobby-v4 .lobby-actions{gap:14px}.lobby-actions>div>b{font-size:9px}.lobby-actions>div>small{font-size:7px}.lobby-v4 .lobby-actions>div{gap:3px}.lobby-v4 .lobby-actions>.primary{min-height:37px;min-width:160px;padding:8px 13px;font-size:12px;border-radius:7px}.lobby-actions>.primary>span{font-size:18px}
}
.lobby-rule-card .lobby-chat-entry{width:100%;font-size:10px;min-height:32px;margin-top:10px;padding:5px 8px;background:#32536a88;border-color:#9fc4ca55;color:#d0e7e1}
.lobby-chat-entry span{display:inline-grid;place-items:center;min-width:17px;height:17px;border-radius:12px;margin-left:5px;background:#c8dfd0;color:#24454b;font-size:9px}
.lobby-chat-log{height:min(300px,39dvh);min-height:120px;overflow:auto;overscroll-behavior:contain;padding:12px;background:#0a2330;border:1px solid #6e9fab44;border-radius:10px;display:flex;flex-direction:column;gap:11px}
.lobby-chat-log>div{align-self:flex-start;max-width:90%;display:grid;gap:4px}.lobby-chat-log>div.own{align-self:flex-end;justify-items:end}
.lobby-chat-log small{font-size:9px;color:#9dbdc6}.lobby-chat-log p{font-size:12px;line-height:1.6;margin:0;padding:9px 12px;background:#28495b;border:1px solid #93bdc42b;border-radius:0 11px 11px;overflow-wrap:anywhere}.lobby-chat-log .own p{border-radius:11px 0 11px 11px;background:#345a58;color:#e1eedb}.lobby-chat-log .lobby-chat-empty{align-self:center;margin:auto;text-align:center;color:#9bb7c2;font-size:12px;line-height:1.8}
.lobby-chat-stamps{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.lobby-chat-stamps button{min-height:33px;font-size:10px;padding:5px 10px;border-radius:18px}
#lobby-chat-form{display:flex;gap:7px;align-items:center}#lobby-chat-text{flex:1;min-width:0;margin:0;font-size:14px;min-height:42px}#lobby-chat-form button{min-width:44px;min-height:42px;padding:8px;color:#c3ddd5;background:#345b6b}.modal-lobby-chat .quiet{font-size:10px;margin:10px 0 0}
@media(max-height:520px) and (orientation:landscape){.modal-lobby-chat{max-height:calc(var(--app-height,100dvh) - 18px)}.modal-lobby-chat .modal-body{padding:10px 16px}.lobby-chat-log{height:140px;min-height:100px}.lobby-chat-stamps{margin:8px 0}.modal-lobby-chat .quiet{display:none}.lobby-rule-card .lobby-chat-entry{margin-top:7px;min-height:28px;font-size:9px}}
.modal-lobby-chat .modal-body{display:flex;flex-direction:column;overflow:hidden}.modal-lobby-chat .lobby-chat-log{flex:1 1 300px;min-height:80px}.lobby-chat-stamps,#lobby-chat-form,.modal-lobby-chat .quiet{flex-shrink:0}

html[data-stage=roam][data-game=deduction] .game-header{position:absolute;right:max(15px,env(safe-area-inset-right));top:12px;width:auto;height:auto;padding:0;background:transparent;border:0;z-index:10}
html[data-stage=roam][data-game=deduction] .game-header>.wordmark,html[data-stage=roam][data-game=deduction] .game-heading{display:none}
html[data-stage=roam][data-game=deduction] .header-tools{gap:7px}
html[data-stage=roam][data-game=deduction] .header-tools button{background:#122d42d9;border:1px solid #a0c7d08a;backdrop-filter:blur(5px);border-radius:50%;padding:0;min-height:38px;width:38px;height:38px;font-size:16px;box-shadow:0 3px 10px #04172655}
html[data-stage=roam][data-game=deduction] #voice-button{font-size:9px;width:59px;border-radius:22px}
.ship-screen{height:var(--app-height,100dvh);min-height:0;position:relative;overflow:hidden;touch-action:none;isolation:isolate}
.ship-screen>canvas{width:100%;height:100%;display:block;touch-action:none}
.ship-hud{position:absolute;top:14px;left:max(18px,env(safe-area-inset-left));right:auto;transform:none;width:252px;max-width:calc(100% - 148px);padding:0;display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:0;backdrop-filter:none;box-shadow:none}
.ship-hud .role-pill{display:flex;gap:6px;align-items:center;background:#12394aeb;color:#d0eddc;border:1px solid #8fbbb98a;min-height:37px;padding:6px 11px;border-radius:20px;font-size:11px;white-space:nowrap;box-shadow:0 3px 8px #021c2d44}
.ship-hud .role-pill>i{width:6px;height:6px;background:#98e5bf;border-radius:50%;box-shadow:0 0 9px #afffd966}
.ship-hud .role-pill>small{font-size:8px;color:#a8c7c4;border:1px solid #92b9ba77;border-radius:50%;width:12px;height:12px;display:grid;place-items:center;line-height:1}
.ship-hud .role-pill.shade{background:#613844e6;color:#ffdddd;border-color:#e3a2ad}
.ship-hud .role-pill.shade>i{background:#ffa2ac;box-shadow:0 0 9px #fa728b55}
.ship-repair-progress{flex:1;display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;min-width:0;background:#0b273aca;border:1px solid #87b1c147;border-radius:9px;padding:7px 9px;box-shadow:0 3px 8px #021c2d44}
.ship-repair-progress>span{font-size:8px;color:#c7dbe0;white-space:nowrap}.ship-repair-progress>b{font-size:10px;color:#d9ecc5;white-space:nowrap}.ship-repair-progress>b>small{font-size:8px;color:#a8bec5;font-weight:400}
.ship-repair-progress .progress{display:block;grid-column:1/-1;height:5px;width:100%;border:0;border-radius:5px;background:#091c2da3;overflow:hidden}
.ship-repair-progress .progress>i{display:block;height:100%;background:linear-gradient(90deg,#61b3ab,#b7dea9);border-radius:5px;transition:width .4s}
.ship-objective{left:max(18px,env(safe-area-inset-left));top:69px;width:240px;max-width:calc(100% - 155px);border:1px solid #8db7c254;border-radius:10px;padding:0;background:#102b40dd;backdrop-filter:blur(8px);box-shadow:0 6px 18px #00182a33;overflow:hidden}
.ship-objective .objective-toggle{display:flex;align-items:center;gap:9px;width:100%;border:0;border-radius:0;background:#436c7955;padding:9px 10px;min-height:37px;color:#d6e4dc;text-align:left;margin:0}
.objective-toggle>b{font-size:10px;flex:1;white-space:nowrap}.objective-toggle>span{font-size:9px;color:#c6dec6}.objective-toggle>i{font-size:14px;font-style:normal;color:#b4c9cb}
.ship-task-lines{display:grid;padding:5px 7px 6px;gap:1px}
.ship-objective .ship-task-lines>button{margin:0;display:flex;align-items:center;gap:7px;min-height:33px;background:none;border:0;border-radius:6px;padding:4px 5px;text-align:left}
.ship-task-lines>button>span:first-child{font-size:13px;color:#e2d492}.ship-task-lines>button>span:last-child{font-size:9px;color:#dce5df;display:flex;gap:7px;align-items:center}
.ship-task-lines>button small{font-size:8px;color:#a9c0c8;line-height:1.3}.ship-task-lines>button.done{opacity:.45}.ship-task-lines>button.done>span:first-child{color:#a8ddba}.ship-task-lines>button.done small{text-decoration:line-through}
.ship-task-lines>button.target{background:#b0d0a915}
.objective-next{font-size:9px;line-height:1.4;color:#b9cdd2;padding:8px 11px;margin:0}
.ship-allies{font-size:9px;color:#f0bbc5;padding:4px 10px 9px;margin:0}
.ship-emergency-note{position:relative;padding:11px;border-bottom:1px solid #df998b55;background:linear-gradient(110deg,#703543e8,#3c304ccc)}
.ship-emergency-note>b{font-size:11px;color:#ffcdc0;display:block;margin-bottom:5px}.ship-emergency-note>small{font-size:8px;line-height:1.5;color:#e5b9b7;display:block}.ship-emergency-note>strong{position:absolute;right:10px;top:10px;color:#ffe1c4;font-size:14px}
#ship-mini-map{position:absolute;top:67px;right:max(16px,env(safe-area-inset-right));z-index:4}
.mini-map{width:133px;border-radius:12px;padding:7px;background:#0e2a3be0;border:1px solid #9ac8cb80;box-shadow:0 5px 12px #061d2a66;backdrop-filter:blur(6px)}
.mini-map>span{font-size:9px;color:#d5e5e1;padding:5px 1px 0}.mini-map small{display:block;font-size:8px;color:#98bac1}
.joystick{position:absolute;left:max(28px,env(safe-area-inset-left));bottom:max(32px,env(safe-area-inset-bottom));width:124px;height:124px;display:grid;place-items:center;border-radius:50%;border:2px solid #d0e5eb90;background:radial-gradient(#527c9c20 38%,#2b486064 39%,#7395a93b 57%,#7d9aa536 58%);box-shadow:0 6px 18px #071b3766,inset 0 0 0 8px #b5d6df15;touch-action:none;user-select:none;z-index:5;opacity:.84}
.joystick:active{opacity:1}.joystick>i{position:absolute;width:55px;height:55px;border-radius:50%;background:linear-gradient(145deg,#dcecf2b8,#94b3c58f);border:1px solid #e0f2f48c;box-shadow:0 4px 12px #071c426e;left:calc(50% - 27.5px);top:calc(50% - 27.5px)}
.joystick>small{position:absolute;bottom:-20px;font-size:9px;color:#c0d9e0;text-shadow:0 2px 4px #06182a;letter-spacing:.08em}
.ship-actions{position:absolute;right:max(26px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:flex-end;gap:15px;z-index:5;max-width:calc(100% - 190px)}
.ship-actions>.ship-control{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;width:74px;min-width:74px;min-height:0;background:none;border:0;padding:0;box-shadow:none;border-radius:0;color:#e5f0ed;position:relative;overflow:visible;transition:filter .15s,transform .15s}
.ship-actions>.ship-control:hover{background:none;filter:brightness(1.14)}
.ship-control .control-disc{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;position:relative;border:2px solid #bedcebb3;border-bottom:4px solid #7297a7;background:radial-gradient(circle at 35% 24%,#527e96,#294762 70%);box-shadow:0 5px 16px #031b4566,inset 0 0 0 4px #accbda17;color:#dceef3}
.ship-control .control-disc>svg{width:34px;height:34px;filter:drop-shadow(0 2px 1px #16354a99)}
.ship-control>b{font-size:11px;font-weight:750;letter-spacing:.03em;text-shadow:0 2px 4px #061529;line-height:1.4;white-space:nowrap}
.ship-actions>.ship-control>small{font-size:8px;font-weight:400;color:#b3c6cf;margin:0;line-height:1.2;height:11px;max-width:94px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px #0b1f2d;position:absolute;bottom:-14px;left:50%;transform:translateX(-50%)}
.ship-control.control-main{width:85px;min-width:85px}.ship-control.control-main .control-disc{width:78px;height:78px;border-color:#fae9b9;border-bottom-color:#aa9056;background:radial-gradient(circle at 35% 24%,#f5e6b3,#c2a465 78%);color:#48594e;box-shadow:0 7px 18px #051b4266,inset 0 0 0 4px #ffe4a32f}.ship-control.control-main .control-disc>svg{width:40px;height:40px;filter:drop-shadow(0 2px 0 #fff1cd66)}
.ship-control.control-danger .control-disc{background:radial-gradient(circle at 35% 24%,#df9798,#97546a 80%);border-color:#f8c8bd;border-bottom-color:#70384d;color:#fff0e6}
.ship-actions>.ship-control:disabled{opacity:.48;filter:saturate(.4);cursor:default}.ship-actions>.ship-control:disabled:hover{filter:saturate(.4)}
.ship-control .control-disc>strong{position:absolute;inset:0;border-radius:50%;background:#13263ac4;display:grid;place-items:center;color:#eff7f2;font-size:19px;font-variant-numeric:tabular-nums}
.ship-location{position:absolute;left:50%;bottom:25px;transform:translateX(-50%);display:grid;gap:5px;text-align:center;pointer-events:none;z-index:3;text-shadow:0 2px 6px #071b30}
.ship-location>strong{font-size:15px;letter-spacing:.15em;color:#e4eee9}.ship-location>span{font-size:8px;color:#bbcfd8;white-space:nowrap;background:#123249a3;border:1px solid #9abfcd33;padding:4px 10px;border-radius:20px}
@media(max-width:700px) and (orientation:portrait){
 html[data-stage=roam][data-game=deduction] .game-header{top:12px;right:10px}.ship-hud{left:10px;top:13px;width:245px;max-width:calc(100% - 122px);gap:6px}.ship-hud .role-pill{padding:6px 8px;font-size:10px;min-height:34px;gap:4px}.ship-repair-progress{padding:5px 7px;gap:5px}.ship-repair-progress>span{font-size:7px}.ship-repair-progress>b{font-size:9px}.ship-hud .role-pill>small{display:none}
 .ship-objective{left:10px;top:66px;width:224px;max-width:calc(100% - 132px);border-radius:8px}.ship-objective .objective-toggle{padding:8px;min-height:33px;gap:5px}.objective-toggle>b{font-size:9px}.objective-toggle>span{font-size:8px}.ship-task-lines{padding:4px}.ship-task-lines>button>span:last-child{display:grid;gap:2px;font-size:9px}.ship-task-lines>button small{font-size:8px}.ship-objective .ship-task-lines>button{min-height:34px;padding:3px 5px}.objective-next{font-size:8px;padding:7px 8px}
 #ship-mini-map{right:10px;top:65px}.mini-map{width:108px;padding:5px;border-radius:9px}.mini-map>span{font-size:8px;padding-top:3px}.mini-map small{display:none}
 .joystick{left:20px;bottom:max(50px,env(safe-area-inset-bottom));width:112px;height:112px}.joystick>i{width:50px;height:50px;left:calc(50% - 25px);top:calc(50% - 25px)}
 .ship-actions{right:16px;bottom:max(49px,env(safe-area-inset-bottom));max-width:170px;display:flex;flex-wrap:wrap-reverse;align-items:flex-end;gap:19px 8px}
 .ship-actions>.ship-control{width:64px;min-width:64px;gap:4px}.ship-control .control-disc{width:55px;height:55px;border-bottom-width:3px}.ship-control .control-disc>svg{width:29px;height:29px}.ship-control>b{font-size:10px}.ship-control.control-main{width:78px;min-width:78px}.ship-control.control-main .control-disc{width:73px;height:73px}.ship-control.control-main .control-disc>svg{width:37px;height:37px}.ship-actions>.ship-control>small{font-size:7px;bottom:-12px}.ship-control .control-disc>strong{font-size:17px}
 .ship-location{bottom:12px;gap:3px;width:100%;max-width:210px}.ship-location>strong{font-size:12px}.ship-location>span{font-size:7px;padding:3px 8px;justify-self:center}
}
@media(max-height:520px) and (orientation:landscape){
 html[data-stage=roam][data-game=deduction] .game-header{top:9px;right:12px}.ship-hud{top:9px;left:14px;max-width:260px;width:244px;gap:8px}.ship-hud .role-pill{font-size:9px;min-height:32px;padding:5px 9px}.ship-repair-progress{padding:5px 7px;gap:4px}.ship-repair-progress>span{font-size:7px}.ship-repair-progress>b{font-size:9px}.ship-repair-progress .progress{height:4px}
 .ship-objective{top:51px;left:14px;width:211px;max-width:30%;border-radius:8px}.ship-objective .objective-toggle{padding:7px 9px;min-height:30px}.objective-toggle>b{font-size:8px}.objective-toggle>span{font-size:8px}.objective-next{font-size:8px;padding:6px 9px}.ship-objective .ship-task-lines>button{min-height:24px;padding:2px 4px}.ship-task-lines>button>span:last-child{font-size:8px}.ship-task-lines>button small{font-size:7px}.ship-task-lines{padding:3px 6px}.ship-emergency-note{padding:8px}.ship-emergency-note>b{font-size:9px}.ship-emergency-note>small{font-size:7px}
 #ship-mini-map{top:53px;right:12px}.mini-map{width:113px;padding:5px;border-radius:9px}.mini-map>span{font-size:8px;padding-top:3px}.mini-map small{font-size:7px}
 .joystick{width:105px;height:105px;left:25px;bottom:28px}.joystick>i{width:48px;height:48px;left:calc(50% - 24px);top:calc(50% - 24px)}.joystick>small{font-size:8px;bottom:-17px}
 .ship-actions{right:22px;bottom:26px;gap:12px;max-width:53%}.ship-actions>.ship-control{width:57px;min-width:57px;gap:4px}.ship-control .control-disc{width:53px;height:53px;border-bottom-width:3px}.ship-control .control-disc>svg{width:28px;height:28px}.ship-control>b{font-size:9px}.ship-control.control-main{width:69px;min-width:69px}.ship-control.control-main .control-disc{width:64px;height:64px}.ship-control.control-main .control-disc>svg{width:34px;height:34px}.ship-actions>.ship-control>small{font-size:7px;bottom:-11px}.ship-control .control-disc>strong{font-size:16px}
 .ship-location{bottom:12px;left:43%;gap:4px}.ship-location>strong{font-size:12px}.ship-location>span{font-size:7px;padding:3px 8px}
}

.practice-card{padding:13px 12px 10px;color:#e8eedb}
.practice-card>small{display:block;color:#d5c286;font-size:9px;line-height:1.5}
.practice-card h3{font-size:13px;margin:8px 0;line-height:1.6}
.practice-card p{font-size:11px;line-height:1.75;margin:0 0 10px}
.practice-card>span{display:block;font-size:9px;color:#b4d7c3;line-height:1.5}
.practice-card>button{display:block;width:100%;font-size:9px;min-height:32px;padding:6px 4px;margin:10px 0 0;color:#b9ced6;background:#173a4c;border-color:#8baeb54a}
.practice-meeting-help{display:block;min-height:36px;padding:6px 10px;margin:6px auto 0;font-size:10px;background:#395563;border:1px solid #b8c9b570;color:#eee6c0}
@media(max-height:520px) and (orientation:landscape){.practice-card{padding:9px}.practice-card h3{font-size:11px;margin:5px 0}.practice-card p{font-size:9px;line-height:1.6;margin-bottom:6px}.practice-card>small,.practice-card>span{font-size:8px}.practice-card>button{font-size:8px;min-height:28px;margin-top:6px}.practice-meeting-help{min-height:30px;font-size:9px;padding:4px 8px;margin-top:4px}}

.modal-task{width:min(650px,100%);border-color:#93b8c677;background:linear-gradient(140deg,#233e4c,#0e2537);box-shadow:0 25px 100px #0009,inset 0 0 0 5px #c5dce50a}
.modal-task>header{padding:13px 20px;background:#122b3b75}
.modal-task>header h2{font-size:16px;letter-spacing:.04em}
.modal-task .modal-body{padding:14px}
.task-stage{position:relative;padding:19px;border:1px solid #93b7ba65;border-radius:12px;background:radial-gradient(ellipse at 50% 0,#395e6580,transparent 70%),linear-gradient(#9edcda05 1px,transparent 1px),linear-gradient(90deg,#9edcda05 1px,transparent 1px),#122c3b;background-size:auto,20px 20px,20px 20px,auto;box-shadow:inset 0 0 35px #041b2c80}
.task-stage>small{display:block;font-size:9px;color:#a8d8d2;letter-spacing:.2em}
.task-stage>p{line-height:1.6;margin:13px 0;color:#d3e3df}
.task-stage>p.quiet:last-child{font-size:10px;color:#97b3be;margin:12px 0 0}
.task-stage .task-submit{min-height:44px;border-radius:9px;margin:18px 0 0;font-size:13px}
.task-stage .task-submit:disabled{opacity:.42;filter:saturate(.25)}
.task-stage .task-buttons{gap:10px}
.task-stage .task-buttons button{line-height:1.2;gap:4px}.task-stage .task-buttons button b,.task-stage .task-buttons button span{line-height:1}
.task-stage .task-buttons button{width:auto;min-height:64px;border:1px solid color-mix(in srgb,var(--lamp) 70%,transparent);border-radius:11px;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--lamp) 16%,transparent),#0a2030 80%);box-shadow:0 4px 0 #051825,inset 0 1px 0 #a3d4e333;transition:transform .12s,box-shadow .12s}
.task-stage .task-buttons button:active{transform:translateY(3px);box-shadow:0 1px 0 #051825;background:var(--lamp);color:#12303a}
.task-stage.cargo .task-buttons button{color:#263e48;background:linear-gradient(140deg,#f3e4bd,#bea97b);box-shadow:0 4px 0 #736f59}
.task-route{padding:10px 14px;border:1px solid #b3d6d32e;border-radius:8px;background:#051e2c80;justify-content:space-evenly}
.task-route span{min-width:35px}.task-route b{text-shadow:0 0 16px color-mix(in srgb,var(--lamp) 25%,transparent)}
.task-slots i{height:39px;width:45px;transition:background .15s,border-color .15s}
.task-slots i.filled{box-shadow:inset 0 0 16px #c1eae512}
.task-stage [data-a=task-reset]{font-size:11px;min-height:36px;padding:5px 13px;margin:0}
.wire-panel{min-height:240px;height:240px;margin:15px 0;touch-action:none}
.wire-column{gap:10px}.wire-column button{height:50px;min-height:44px;width:72px;border-radius:9px;border-width:1px;box-shadow:inset 0 0 0 4px #bad6dc0c,0 3px 8px #041a2a66;touch-action:none}
.wire-column button:disabled{opacity:1;background:color-mix(in srgb,var(--lamp) 19%,#102c3b);box-shadow:inset 0 0 0 3px #b1dfd51a}
#wire-lines path{filter:drop-shadow(0 0 2px #d9eed840);stroke-linecap:round}
#wire-status{color:#b8e6c7;min-height:22px;margin:8px 0;font-size:12px}
.gauge{max-width:280px;border-radius:12px;padding:5px 10px 12px;background:radial-gradient(ellipse at 50% 80%,#3761666b,transparent 75%)}
.gauge span{display:flex;align-items:center;justify-content:center;gap:7px}.gauge output{display:inline;font-variant-numeric:tabular-nums}
.gauge-control{font-size:11px;color:#b0c7cf}.gauge-control input{height:44px;accent-color:#e7cf93}
#scene-cue.task{top:35%;background:#153f3ff2;border-color:#9fdcbb;padding:20px 35px;color:#d8f5cf;font-size:19px;box-shadow:0 15px 60px #051c3180}
@media(max-width:500px) and (orientation:portrait){
 .modal-task .modal-body{padding:10px}.task-stage{padding:15px}.task-stage>p{font-size:12px}.task-stage .task-buttons{gap:7px}.task-stage .task-buttons button{min-height:58px}.wire-panel{height:236px;min-height:236px}.wire-column button{width:65px}.task-route{margin:15px 0;padding:10px 8px}
}
@media(max-height:540px) and (orientation:landscape){
 .modal-backdrop:has(.modal-task){padding:8px 16px}
 .modal-task{width:min(830px,100%);max-height:calc(var(--app-height,100dvh) - 16px)}
 .modal-task>header{padding:6px 16px;min-height:39px}.modal-task>header h2{font-size:14px}.modal-task>header button{min-height:30px;padding:0 9px}
 .modal-task .modal-body{padding:8px;overflow:auto}
 .task-stage{padding:12px 16px;display:grid;grid-template-columns:minmax(240px,1.15fr) minmax(180px,1fr);column-gap:24px;row-gap:5px;align-items:center}
 .task-stage>small{grid-column:2;grid-row:1;font-size:8px;align-self:end}
 .task-stage>p:first-of-type{grid-column:2;grid-row:2;font-size:11px;line-height:1.55;margin:0}
 .task-stage .task-submit{grid-column:2;grid-row:6;margin:0;min-height:40px;font-size:12px;align-self:end}
 .task-stage>p.quiet:last-child{grid-column:2;grid-row:7;font-size:9px;margin:0;line-height:1.4}
 .task-stage .task-route{grid-column:1;grid-row:1/3;margin:0;padding:8px 12px}
 .task-stage .task-slots{grid-column:1;grid-row:3;margin:3px 0;gap:10px}.task-slots i{height:30px;width:43px}
 .task-stage .task-buttons{grid-column:1;grid-row:4/7;align-self:center}.task-stage .task-buttons button{min-height:58px;height:58px}
 .task-stage #task-answer{grid-column:2;grid-row:3;font-size:10px;margin:0;line-height:1.5}
 .task-stage [data-a=task-reset]{grid-column:2;grid-row:4;justify-self:start;min-height:29px;font-size:10px;padding:3px 10px}
 .task-stage.circuit>button:not(.task-submit):not([data-a]){grid-column:2;grid-row:5;justify-self:start;min-height:29px;padding:3px 10px;font-size:10px}
 .task-stage .gauge{grid-column:1;grid-row:1/8;max-width:270px;width:100%;padding:0 10px}
 .task-stage .gauge-control{grid-column:2;grid-row:3/6;margin:4px 0!important;font-size:10px}.gauge-control input{height:38px}
 .task-stage.wiring{min-height:240px}
 .task-stage .wire-panel{grid-column:1;grid-row:1/8;height:220px;min-height:220px;margin:0}
 .wire-column{gap:7px}.wire-column button{width:67px;height:48px;min-height:44px;padding:5px}
 .task-stage #wire-status{grid-column:2;grid-row:4/6;font-size:12px;margin:0}
}

.voyage-cinematic.role-reveal{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(260px,1fr) minmax(330px,1fr);gap:4%;align-items:center;width:100%;height:calc(var(--app-height,100dvh) - 48px);min-height:0;padding:30px max(6%,20px);overflow:auto;background:radial-gradient(ellipse at 25% 45%,#326e797a,transparent 55%),linear-gradient(130deg,#173547,#071929);text-align:left}
.voyage-cinematic.shade{background:radial-gradient(ellipse at 25% 45%,#a4507760,transparent 55%),linear-gradient(130deg,#3d253e,#141c35);--scene-accent:#edb0b8}
.voyage-cinematic.crew{--scene-accent:#a9dfd3}
.cinematic-stars{position:absolute;inset:0;z-index:-1;opacity:.55;background:radial-gradient(circle at 12% 17%,#e1ffdc 0 1px,transparent 2px),radial-gradient(circle at 62% 82%,#bef4ff 0 1px,transparent 2px),radial-gradient(circle at 88% 36%,#e5f5ea 0 1px,transparent 2px);background-size:193px 211px,257px 283px,331px 197px;animation:cinematic-sky 18s linear infinite}
.cinematic-actor{position:relative;align-self:stretch;min-height:260px;max-height:650px;display:grid;place-items:center}
.cinematic-person,.cinematic-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;filter:drop-shadow(0 12px 25px #0004)}
.cinematic-fallback{padding:7% 9%;transition:opacity .15s}.model-ready .cinematic-fallback{opacity:0}
.cinematic-ring{position:absolute;left:3%;right:3%;bottom:14%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--scene-accent) 27%,transparent);border-radius:50%;box-shadow:0 0 0 24px #bdeaff03,inset 0 0 70px #a4e8d908;transform:perspective(350px) rotateX(56deg)}
.cinematic-person-name{position:absolute;bottom:0;left:0;right:0;z-index:2;text-align:center;display:grid;gap:4px;color:#e5f1e8}
.cinematic-person-name small{font-size:9px;letter-spacing:.18em;color:#9cbecb}.cinematic-person-name b{font-size:15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.cinematic-copy{position:relative;max-width:560px;justify-self:center;width:100%;animation:cinematic-copy .45s both}
.cinematic-kicker{display:block;font-size:11px;letter-spacing:.13em;color:#a4c2cf}
.cinematic-copy h1{font-size:clamp(28px,5vw,58px);line-height:1.3;margin:15px 0;color:#e9f3e8;letter-spacing:.09em;text-shadow:0 6px 35px #a9e3e026}
.cinematic-team{display:inline-block;padding:5px 14px;border:1px solid color-mix(in srgb,var(--scene-accent) 50%,transparent);border-radius:20px;color:var(--scene-accent);font-size:11px;letter-spacing:.1em;background:#9ee7d40b}
.cinematic-copy .cinematic-description{font-size:14px;line-height:1.9;color:#c8dce0;margin:20px 0}
.cinematic-mission{display:grid;gap:7px;padding:16px 18px;border-left:2px solid var(--scene-accent);border-radius:0 10px 10px 0;background:#c1e7e309}
.cinematic-mission small,.cinematic-allies small{font-size:10px;color:#9fc1cb}.cinematic-mission strong{font-size:14px;color:#e0eee6}.cinematic-mission span{font-size:10px;color:#adcad1;line-height:1.6}
.cinematic-allies{display:grid;gap:6px;margin:15px 0;padding:12px 16px;border:1px solid #e9aeb24d;border-radius:9px;background:#b2677d12}.cinematic-allies b{font-size:13px;color:#f1cbd3}
.cinematic-departure{display:grid;grid-template-columns:1fr auto;gap:12px;margin:25px 0 0;align-items:center;color:#b9d4d9;font-size:11px}
.cinematic-departure>b{font-size:15px;color:var(--scene-accent);font-variant-numeric:tabular-nums}.cinematic-departure>i{grid-column:1/-1;height:2px;border-radius:3px;transform-origin:left;background:linear-gradient(90deg,var(--scene-accent),#d7dbbb);animation:cinematic-timer var(--duration) linear forwards}
.cinematic-tally{display:grid;gap:11px;padding:15px 0}.cinematic-tally>div{display:grid;grid-template-columns:minmax(65px,1fr) minmax(50px,1.3fr) 30px;gap:12px;align-items:center;font-size:12px;color:#ccdee1}.cinematic-tally span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cinematic-tally i{height:6px;border-radius:5px;background:#06182880;overflow:hidden}.cinematic-tally em{display:block;height:100%;background:var(--scene-accent);border-radius:5px;animation:cinematic-bar .6s both;transform-origin:left}.cinematic-tally b{font-size:17px;color:var(--scene-accent)}.cinematic-tally b small{font-size:9px;margin-left:3px}
.cinematic-compass{font-size:140px;color:#c3ece0;text-shadow:0 0 90px #70ccf855;animation:cinematic-compass 12s linear infinite}
@keyframes cinematic-sky{to{background-position:12px 22px,18px 31px,-9px 18px}}
@keyframes cinematic-copy{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cinematic-timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes cinematic-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cinematic-compass{to{transform:rotate(360deg)}}
@media(orientation:portrait){
 .voyage-cinematic.role-reveal{display:flex;flex-direction:column;gap:12px;padding:15px 25px 20px;overflow:auto;height:calc(var(--app-height,100dvh) - 48px)}
 .cinematic-actor{width:100%;height:38%;min-height:220px;max-height:350px;flex:1}.cinematic-person-name{bottom:0}.cinematic-person-name b{font-size:12px}.cinematic-person-name small{font-size:8px}
 .cinematic-copy{text-align:center;max-width:460px}.cinematic-kicker{font-size:9px}.cinematic-copy h1{font-size:34px;margin:10px 0}.cinematic-team{font-size:10px;padding:4px 12px}
 .cinematic-copy .cinematic-description{font-size:12px;line-height:1.7;margin:14px 0}.cinematic-mission{text-align:left;padding:11px 14px;gap:5px}.cinematic-mission strong{font-size:12px}.cinematic-mission small{font-size:9px}.cinematic-mission span{font-size:9px}.cinematic-allies{margin:10px 0;padding:9px 12px}.cinematic-allies b{font-size:12px}
 .cinematic-departure{margin:16px 0 0;font-size:10px;gap:8px}.cinematic-tally{padding:8px 0;gap:8px;text-align:left}.vote-verdict .cinematic-copy h1{font-size:24px}.vote-verdict .cinematic-actor{min-height:180px;height:30%}
}
@media(max-height:520px) and (orientation:landscape){
 .voyage-cinematic.role-reveal{height:calc(var(--app-height,100dvh) - 38px)}
 .voyage-cinematic.role-reveal{padding:12px max(5%,20px);grid-template-columns:minmax(180px,.8fr) minmax(280px,1fr);gap:4%}.cinematic-actor{min-height:220px}.cinematic-copy h1{font-size:34px;margin:6px 0}.cinematic-kicker{font-size:9px}.cinematic-team{font-size:9px;padding:3px 12px}.cinematic-copy .cinematic-description{font-size:11px;line-height:1.7;margin:9px 0}.cinematic-mission{padding:9px 12px;gap:4px}.cinematic-mission strong{font-size:11px}.cinematic-mission small,.cinematic-mission span{font-size:9px}.cinematic-allies{margin:8px 0;padding:7px 11px;gap:4px}.cinematic-allies small{font-size:8px}.cinematic-allies b{font-size:11px}.cinematic-departure{margin:12px 0 0;font-size:9px;gap:7px}.cinematic-departure>b{font-size:12px}.cinematic-person-name b{font-size:11px}.cinematic-person-name small{font-size:8px}.vote-verdict h1{font-size:25px}.cinematic-tally{gap:6px;padding:3px 0}.cinematic-tally>div{font-size:10px;gap:10px}.cinematic-tally b{font-size:13px}
}
@media(max-height:700px) and (orientation:portrait){
 .voyage-cinematic.role-reveal{padding:10px 22px 15px;gap:8px}.cinematic-actor{min-height:180px}.cinematic-copy h1{font-size:28px;margin:7px 0}.cinematic-copy .cinematic-description{font-size:11px;margin:10px 0}.cinematic-mission{padding:9px 12px}.cinematic-allies{padding:7px 11px;margin:8px 0}.cinematic-departure{margin-top:11px}
}
/* TGS1014 広場の卓の中で開いた時・観戦・追放の公開 */
.table-wait{min-height:calc(100dvh - 48px);display:grid;place-items:center;padding:24px 16px}
.table-wait-card{max-width:420px;width:100%;text-align:center;background:#1b2932e6;border:1px solid #e9c58b44;border-radius:18px;padding:26px 20px}
.table-wait-card h1{font-size:20px;margin:6px 0 10px;color:var(--gold)}
.table-wait-card p{font-size:15px;line-height:1.8;color:var(--ink);margin:0 0 16px}
.table-wait-card button{min-height:44px;font-size:15px}
.table-wait-mark{display:block;font-size:28px;color:var(--gold)}
html[data-table="1"] .home-bottom a[href*="asobu-games"]{display:none}
html[data-watching="1"] #voice-button{display:none}
html[data-watching="1"] .mj-hand-row,html[data-watching="1"] .mj-actions,html[data-watching="1"] .mj-coach{display:none}
html[data-watching="1"] .mj-hand-panel{min-height:0}
html[data-watching="1"] .mj-turn-label{font-size:14px}
html[data-watching="1"] .ship-actions,html[data-watching="1"] .vote-actions,html[data-watching="1"] .chat-form{display:none}
.watch-roam{min-height:calc(100dvh - 48px);display:grid;place-items:center;padding:20px 16px;background:radial-gradient(circle at 50% 20%,#1d3b4a,#0b1418 70%)}
.watch-roam-card{max-width:520px;width:100%;text-align:center}
.watch-roam-card h1{font-size:20px;margin:6px 0 10px;color:var(--ink)}
.watch-roam-card .quiet{font-size:14px;line-height:1.8}
.watch-progress{margin:16px auto;max-width:360px}
.watch-progress b{display:block;font-size:15px;color:var(--gold);margin-bottom:6px}
.watch-progress i{display:block;height:10px;border-radius:99px;background:#ffffff18;overflow:hidden}
.watch-progress em{display:block;height:100%;background:linear-gradient(90deg,#6be3c0,#e9c58b);transition:width .6s}
.watch-sabotage{color:#ff9a8a;font-size:14px;font-weight:700}
.watch-roster{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:14px 0}
.watch-crew{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px}
.watch-crew b{font-size:14px;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.watch-crew small{font-size:14px;color:var(--muted)}
.voyage-cinematic.ejected .cinematic-actor{animation:tgs-eject 5.2s cubic-bezier(.5,0,.75,.4) .9s both}
.voyage-cinematic.eject-confirmed.shade h1{color:#ff8a8a}
.voyage-cinematic.eject-confirmed.crew h1{color:#9fe3cf}
@keyframes tgs-eject{0%{transform:none;opacity:1}15%{transform:translateY(-6px) rotate(-2deg)}100%{transform:translate(55vw,-12vh) rotate(260deg) scale(.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.voyage-cinematic.ejected .cinematic-actor{animation:none}}
.voyage-cinematic{overflow-x:hidden}

/* Twelve seats retain the same physical target size; conversation uses the center. */
@media(min-width:520px) and (max-height:520px) and (orientation:landscape){
 html:has(.conference-v4[data-count="12"]) .game-header{position:absolute;inset:6px 12px auto auto;width:auto;height:auto;background:none;border:0;padding:0;z-index:8}
 html:has(.conference-v4[data-count="12"]) .game-header>.wordmark,html:has(.conference-v4[data-count="12"]) .game-heading{display:none}
 html:has(.conference-v4[data-count="12"]) .header-tools button{min-height:36px;font-size:10px;padding:6px 8px}
 .conference-v4[data-count="12"]{position:relative;min-height:370px;height:var(--app-height,100dvh);padding:6px 12px;grid-template-rows:46px minmax(0,1fr) 44px;gap:4px}
 .conference-v4[data-count="12"] .conf-header{height:46px;padding-right:108px}
 .conference-v4[data-count="12"] .conf-floor{max-width:1000px;grid-template-columns:minmax(150px,1fr) minmax(170px,1.1fr) minmax(150px,1fr);gap:12px}
 .conference-v4[data-count="12"] .conf-roster{gap:2px}
 .conference-v4[data-count="12"] .conf-person{min-height:44px;padding:4px 7px;gap:5px}
 .conference-v4[data-count="12"] .conf-person>.avatar{width:30px;height:30px}
 .conference-v4[data-count="12"] .conf-person-info{flex-direction:column;align-items:flex-start;gap:3px}
 .conference-v4[data-count="12"] .conf-person-info b{font-size:11px;max-width:130px}
 .conference-v4[data-count="12"] .conf-person-info small{font-size:8px}
 .conference-v4[data-count="12"] .conf-speaker-name{position:absolute;top:3px;width:100%;margin:0}
 .conference-v4[data-count="12"] .conf-speech-tip{position:absolute;bottom:116px;font-size:9px;max-width:100%}
 .conference-v4[data-count="12"] .conf-chat{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);width:33%;height:110px;display:flex;flex-direction:column;z-index:2;background:#102c40ec}
 .conference-v4[data-count="12"] .conf-chat-head{display:none}
 .conference-v4[data-count="12"] .conf-chat .chat-log{padding:5px 7px}
 .conference-v4[data-count="12"] .conf-chat .chat-log p{display:block;font-size:10px;line-height:1.4;margin-bottom:5px}
 .conference-v4[data-count="12"] .conf-chat .chat-log p b{display:block;font-size:9px;max-width:none}
 .conference-v4[data-count="12"] .conf-chat-form{display:block;border:0}
 .conference-v4[data-count="12"] .conf-chat-form form{padding:3px 4px;gap:3px}
 .conference-v4[data-count="12"] .conf-chat-form input{min-width:0;font-size:12px;min-height:36px;height:36px;padding:4px 6px}
 .conference-v4[data-count="12"] .conf-chat-form button{min-width:35px;min-height:36px;height:36px;padding:4px}
 .conference-v4[data-count="12"] .conf-controls{min-height:44px;gap:8px}
 .conference-v4[data-count="12"] .conf-controls button{min-height:44px;font-size:11px;padding:7px 12px}
 .conference-v4[data-count="12"] .conf-vote-confirm{z-index:5}
 .conference-v4[data-count="12"][data-stage="vote"] .conf-chat{display:none}
 .conference-v4[data-count="12"][data-stage="vote"] .conf-speech-tip{position:relative;bottom:auto}
}
@media(min-width:520px) and (max-height:379px) and (orientation:landscape){
 .conference-v4[data-count="12"]{padding:4px 10px;grid-template-rows:44px minmax(0,1fr) 40px;gap:3px}
 .conference-v4[data-count="12"] .conf-person{min-height:40px}.conference-v4[data-count="12"] .conf-person>.avatar{width:28px;height:28px}
 .conference-v4[data-count="12"] .conf-controls,.conference-v4[data-count="12"] .conf-controls button{min-height:40px}
 .conference-v4[data-count="12"] .conf-chat{bottom:49px}
}
@media(max-width:520px) and (max-height:700px) and (orientation:portrait){
 .conference-v4[data-count="12"]{min-height:510px;grid-template-rows:auto minmax(260px,1fr) auto 80px;gap:5px;padding:6px 9px}
 .conference-v4[data-count="12"] .conf-header>p,.conference-v4[data-count="12"] .conf-phases{display:none}
 .conference-v4[data-count="12"] .conf-heading h1{font-size:14px}.conference-v4[data-count="12"] .conf-heading>span{display:none}
 .conference-v4[data-count="12"] .conf-floor{grid-template-columns:1fr 1fr;gap:7px}
 .conference-v4[data-count="12"] .conf-center{display:contents}
 .conference-v4[data-count="12"] .conf-portrait,.conference-v4[data-count="12"] .conf-speaker-name,.conference-v4[data-count="12"] .conf-speech-tip{display:none}
 .conference-v4[data-count="12"] .conf-roster{gap:4px}.conference-v4[data-count="12"] .conf-person{min-height:40px;padding:4px 6px}
 .conference-v4[data-count="12"] .conf-person-info b{font-size:11px;max-width:88px}
 .conference-v4[data-count="12"] .conf-controls{gap:4px;flex-wrap:wrap}.conference-v4[data-count="12"] .conf-controls button{font-size:10px;padding:6px 8px;min-height:38px}
 .conference-v4[data-count="12"] .conf-vote-confirm:not(:empty){position:fixed;inset:15% 8%;z-index:25;background:#142f46f5}
 .conference-v4[data-count="12"] .conf-vote-confirm button{min-height:44px}
 .conference-v4[data-count="12"] .conf-chat-head{display:none}
}
html[data-keyboard="open"] .conference-v4[data-count="12"]{min-height:0;grid-template-rows:auto minmax(0,1fr)}
html[data-keyboard="open"] .conference-v4[data-count="12"] .conf-chat{position:static;transform:none;width:100%;height:100%;display:flex;flex-direction:column}
html[data-keyboard="open"] .conference-v4[data-count="12"] .conf-chat-head{display:flex}
html[data-keyboard="open"] .conference-v4[data-count="12"] .conf-chat-form input{font-size:16px}

/* Full-height table with separate readable side controls on phone landscape. */
.mj-relative{display:none}
@media(min-width:650px) and (min-height:360px) and (max-height:520px) and (orientation:landscape){
 html[data-phase=playing][data-game=mahjong] .game-header{position:absolute;right:max(12px,env(safe-area-inset-right));top:6px;left:auto;width:auto;height:auto;padding:0;border:0;background:none;z-index:8}
 html[data-phase=playing][data-game=mahjong] .game-header>.wordmark,html[data-phase=playing][data-game=mahjong] .game-heading{display:none}
 html[data-phase=playing][data-game=mahjong] .header-tools button{min-height:36px;font-size:11px}
 html[data-phase=playing][data-game=mahjong] #screen{height:100dvh}
 .mj-v4{--tile-w:clamp(30px,4.4vw,40px)}
 .mj-canvas{left:150px;width:calc(100% - 300px)}
 .mj-player{width:134px;max-width:134px;min-height:44px}
 .mj-player-top{left:12px;transform:none;top:64px}
 .mj-player-left{left:12px;top:calc(50% + 6px)}
 .mj-player-bottom{left:12px;bottom:8px}
 .mj-player-right{right:12px;top:55px}
 .mj-player-info{flex:1;gap:1px}.mj-player-name{font-size:11px;line-height:1.1;max-width:66px}.mj-player-name em{font-size:8px}
 .mj-player-info strong{font-size:20px}
 .mj-wind{display:flex;flex-direction:column;align-items:center;font-size:15px;line-height:1}
 .mj-riichi-label{right:-4px;bottom:-4px;padding:1px 3px;font-size:8px;line-height:1.2}
 .mj-relative{display:block;font-family:system-ui,sans-serif;font-size:10px;line-height:1.5;white-space:nowrap;color:#c4d5c8}
 .mj-table-tools{right:122px;top:6px}.mj-table-tools button{min-height:36px;width:36px}
 .mj-table-tools [data-a=settings]{display:none}
 .mj-dora>span{font-size:10px}.mj-hand-status{font-size:11px;height:20px}
 .mj-hand-status .mj-coach{font-size:11px;min-height:20px}.mj-timer.practice-untimed{font-size:10px}
 .mj-hand-tip{font-size:10px}
 .mj-actions{width:134px;max-width:134px;right:12px;bottom:calc(100% + 12px);gap:6px}
 .mj-actions button{width:100%;min-height:40px;padding:7px 8px;font-size:13px}
 .mj-confirm span{margin-left:10px}
 .mj-selection-preview{left:auto!important;right:12px;bottom:calc(100% + var(--mj-action-height,40px) + 24px);width:134px;min-width:0;min-height:76px;flex-direction:row;padding:7px 8px;gap:9px;font-size:12px}
 .mj-selection-preview>.tile{width:43px;height:59px;flex:none}.mj-selection-preview>span{flex:1}.mj-selection-preview>span>small{font-size:10px}
 .mj-selection-preview:after{display:none}
 .mj-hand-bottom:has(.mj-actions button:nth-of-type(2)){height:auto;min-height:48px;margin-top:8px}
 .mj-hand-bottom:has(.mj-actions button:nth-of-type(2)) .mj-hand-tip{display:none}
 .mj-actions:has(button:nth-of-type(2)){position:static;width:100%;max-width:none;flex-wrap:nowrap;justify-content:center;overflow-x:auto;overscroll-behavior:contain;padding:4px;scrollbar-width:thin}
 .mj-actions:has(button:nth-of-type(2)) button{width:auto;min-width:76px;flex:none;display:flex;align-items:center;justify-content:center;gap:6px}
 .mj-hand-bottom:has(.mj-actions button:nth-of-type(2)) .mj-selection-preview{bottom:calc(100% + 12px)}
 .mj-actions .call-tiles{display:flex;justify-content:center}
 .mj-use-fallback .mj-fallback{inset:10px 150px}
}

.conf-controls .conf-snipe{border-color:#e4a2af;color:#ffe3eb;background:#653a53}
.sniper-summary{display:flex;justify-content:space-between;gap:12px;color:#f2c5d4;font-size:12px}
.sniper-summary b{white-space:nowrap;color:#fff1bc}
.sniper-warning{padding:12px 15px;border:1px solid #bd718b;background:#512c3c;border-radius:10px;line-height:1.8;font-size:13px}
.sniper-warning strong{color:#ffcfde}
.sniper-choice h3{font-size:14px;margin:20px 0 10px}
.sniper-targets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sniper-targets button{min-height:64px;padding:8px;display:flex;align-items:center;gap:8px;text-align:left;min-width:0}
.sniper-targets .avatar{width:34px;height:34px;flex:none}
.sniper-targets b{font-size:12px;overflow-wrap:anywhere;min-width:0}
.sniper-targets button>span:last-child{color:#b8c9d2;font-size:10px;margin-left:auto}
.sniper-targets .selected,.sniper-roles .selected{border-color:#ffd794;background:#555034;box-shadow:inset 0 0 0 1px #ffd794}
.sniper-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sniper-roles button{display:grid;text-align:left;gap:6px;min-height:75px;padding:12px 10px}
.sniper-roles b{font-size:14px}.sniper-roles small{font-size:11px;line-height:1.5;color:#cfdae0}
.sniper-confirm{margin-top:18px;padding:16px;background:#1e293b;border:1px solid #b47489;border-radius:12px}
.sniper-confirm p{font-size:14px;line-height:1.8;margin:0 0 7px}.sniper-confirm strong{color:#ffdda0;margin:0 5px}
.sniper-confirm small{display:block;color:#f0b6c5;line-height:1.7}.sniper-confirm button{margin:12px 6px 0 0;min-height:46px}
.role-pool{display:grid;gap:8px;padding:14px;margin:15px 0;background:#254353;border-radius:10px}.role-pool b{font-size:13px}.role-pool span{font-size:12px;color:#f5d89e}.role-pool small{font-size:11px;color:#c0d1d6}
@media(max-width:480px){.sniper-targets{grid-template-columns:repeat(2,minmax(0,1fr))}.sniper-roles{grid-template-columns:1fr}.sniper-roles button{min-height:58px;grid-template-columns:75px 1fr;align-items:center}.sniper-confirm button{width:100%;margin-right:0}}
@media(orientation:landscape) and (max-height:520px){.modal-sniper{width:min(720px,95vw)}.sniper-targets{grid-template-columns:repeat(4,minmax(0,1fr))}.sniper-targets button{min-height:50px}.sniper-choice h3{margin-top:12px}}

.mj-last-discard:empty{display:none}
.mj-round-strip{display:none}
.mj-last-discard{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;gap:9px;align-items:center;width:150px;min-height:65px;padding:8px 10px;border:1px solid #a8cdb566;border-radius:8px;background:linear-gradient(140deg,#214b44ed,#102c32f5);box-shadow:0 4px 16px #0003;pointer-events:none}
.mj-last-discard{line-height:1.2}
.mj-last-discard>.tile{width:33px;height:46px}
.mj-last-discard>span:last-child{display:grid;gap:2px;min-width:0}
.mj-last-discard small{font-size:9px;color:#afcabb}
.mj-last-discard b{font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:92px}
.mj-last-discard em{font-size:11px;font-style:normal;color:#f4e2a8}
.mj-v4:has(.mj-selection-preview) .mj-last-discard{visibility:hidden}
.mj-fallback-river .mj-latest-tile .tile{outline:2px solid #ffe296;outline-offset:1px}
@media(max-width:640px) and (min-height:521px) and (orientation:portrait){
 .mj-canvas{top:124px;height:calc(100% - 188px)}
 .mj-player-top{top:10px;right:9px;left:auto;transform:none;max-width:126px}
 .mj-player-left{top:72px;left:9px}
 .mj-player-right{top:72px;right:9px;bottom:auto}
 .mj-player-bottom{left:9px;bottom:12px;max-width:146px}
 .mj-table-tools{left:calc(50% - 16px);right:auto;top:12px}
 .mj-table-tools [data-a=settings]{display:none}
 .mj-last-discard{right:9px;bottom:10px;width:140px;min-height:48px;padding:5px 8px}
 .mj-last-discard>.tile{width:28px;height:39px}
 .mj-use-fallback .mj-fallback{inset:124px 5px 64px}
 .mj-hand-bottom:has(.mj-actions button:nth-of-type(2)){min-height:46px;margin-top:8px}
 .mj-hand-bottom:has(.mj-actions button:nth-of-type(2)) .mj-hand-tip{display:none}
 .mj-actions:has(button:nth-of-type(2)){width:100%;max-width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px 2px}
 .mj-actions:has(button:nth-of-type(2)) button{flex:none;display:flex;align-items:center;gap:4px}
 .mj-actions .call-tiles{display:flex;margin-left:0}
}
@media(min-width:641px) and (min-height:521px){.mj-canvas{top:70px;height:calc(100% - 140px)}}
@media(max-width:640px) and (min-height:521px) and (max-height:740px) and (orientation:portrait){
 .mj-canvas{top:144px;height:calc(100% - 208px)}
 .mj-center{display:none}
 .mj-round-strip{display:flex;position:absolute;top:126px;left:50%;transform:translateX(-50%);gap:10px;align-items:center;white-space:nowrap;font-size:10px;line-height:16px;color:#bed5c8}
 .mj-round-strip b{font-size:12px;color:#f2e1a9}
 .mj-use-fallback .mj-fallback{top:144px}
}
@media(min-width:650px) and (min-height:360px) and (max-height:520px) and (orientation:landscape){
 .mj-last-discard{right:12px;top:112px;bottom:auto;width:134px;min-height:62px;padding:7px 8px}
 .mj-last-discard b{max-width:72px}
 .mj-v4:has(.mj-actions button:only-of-type) .mj-last-discard{visibility:hidden}
}
@media(max-height:359px) and (orientation:landscape){.mj-last-discard{display:none}}

/* SET1015 宇宙人狼: 2〜3戦で1セットの通算成績（結果画面） */
.set-summary{max-width:650px;margin:14px auto;padding:12px 14px;border:1px solid #b9d6d360;border-radius:14px;background:#0f2433d9;text-align:left}
.set-summary h2{font-size:18px;line-height:1.3;margin:0 0 8px;color:#ffe0a6}
.set-games{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 8px}
.set-games li{flex:1;min-width:96px;display:flex;flex-direction:column;gap:2px;padding:6px 9px;border-radius:9px;background:#ffffff14;border-left:4px solid #9aa8b4}
.set-games li.set-crew{border-left-color:#7fd6c2}
.set-games li.set-shade{border-left-color:#ef8f8f}
.set-lead{margin:0 0 8px;color:#ffe0a6}
.set-tally{list-style:none;padding:0;margin:0 0 6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.set-tally li{display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 10px;border-radius:9px;background:#ffffff12}
.set-tally li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-tally li span small{margin-left:6px;color:#ffe0a6}
.set-tally li.self-result{outline:2px solid #ffe0a6aa}
.set-summary>.quiet{margin:0;line-height:1.5}
.result-actions .set-next{flex-basis:100%;margin:0;text-align:center}
@media(min-width:600px) and (max-height:520px){
 .voyage-finish:has(.set-summary){grid-template-rows:minmax(0,1fr) auto auto auto;grid-template-areas:"summary list" "set list" "review list" "hint actions"}
 .voyage-finish .set-summary{grid-area:set;margin:0;max-height:150px;overflow:auto;padding:8px 10px}
 .voyage-finish .set-summary h2{font-size:15px;margin-bottom:4px}
 .voyage-finish .result-actions{flex-wrap:wrap}
}
.set-tally li span small.set-cpu{color:#9fb3c2}

/* TGS1014 スマホ（幅600px以下）で文字を14px未満にしない（ゲーム品質チェックリスト C）。
   元の小さな字の決まりは残し、ここで最後に下限だけを付ける。飾りの英字（MAHJONG・VOYAGE）は外す */
/* 5回目✕Q3 14px の下限は PC にも効かせる（以前はスマホだけ） */
#app :is(small,span,em,b,strong,i,p,button,label,a,li,td,th,h3,h4,figcaption,summary,time,div):not(.tile):not(.tile *):not(.call-tiles):not(.call-tiles *){font-size:max(14px,1em)}
.wordmark span,.mj-wordmark small,.home-title>span{display:none}
#connection.connected{display:none}
#connection,#room-code{font-size:14px}#room-code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;letter-spacing:0}.game-heading{gap:1px;line-height:1.25;overflow:hidden}@media(max-width:400px){html #app .game-header{gap:8px}}
.mj-riichi-label{font-size:14px!important}
/* 6回目: 卓の中ではゲームの見出し（ROOM ○○）を PC でも出さない */
html[data-table="1"] .game-heading{display:none}
@media (max-width:600px){
 html[data-watching="1"] .mj-hand-bottom{display:none}
 html[data-watching="1"][data-table="1"] .mj-hand-panel{padding-bottom:70px}
 html[data-watching="1"][data-table="1"] .watch-roam{padding-bottom:84px}
}
html[data-watching="1"] [data-a="voice"],html[data-watching="1"] [data-a="report-player"]{display:none}
@media (max-width:400px){.mj-player-name em{display:none}}
/* 点検✕4 スマホ縦: 麻雀のドラ表示の箱と左右の席の札を縦に離す */
@media (max-width:600px) and (orientation:portrait){
 .mj-player-left,.mj-player-right{top:88px!important}
 .mj-round-strip{top:148px!important}
}
/* 点検✕4 スマホ縦: 宇宙人狼の会議。席の札は左右、真ん中は立ち絵だけ。「NOW SPEAKING」・補足・投票の確定は席の下の段へ。メッセージ欄は3行以上 */
@media (max-width:600px) and (orientation:portrait){
 .conference-v4.meeting{grid-template-rows:auto minmax(140px,1fr) auto minmax(176px,31%)!important}
 .conf-controls{display:flex!important;flex-wrap:nowrap!important;overflow:visible!important;gap:6px!important;justify-content:stretch!important}
 .conf-controls button{flex:1 1 0;min-width:0;min-height:44px;padding:4px 6px!important;white-space:normal!important;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere}
 .conf-header h1{margin:2px 0!important}
 .conf-header p{margin:2px 0!important;line-height:1.4}
 .conf-floor{grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr)!important;grid-template-rows:auto auto auto auto;align-content:start;grid-template-areas:"left face right" "name name name" "tip tip tip" "vote vote vote";gap:4px 6px!important;overflow-y:auto;overflow-x:hidden}
 .conf-floor:before{display:none}
 .conf-center{display:contents}
 .conf-roster-left{grid-area:left}.conf-roster-right{grid-area:right}
 .conf-roster{gap:5px!important;justify-content:flex-start!important}
 .conf-portrait{grid-area:face;width:78px!important;height:118px!important;align-self:center;justify-self:center}
 .conf-speaker-name{grid-area:name;flex-direction:row!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px!important;margin:2px 0 0!important;width:auto!important}
 .conf-speaker-name>span{letter-spacing:.04em!important;padding:2px 8px!important}
 .conf-speech-tip{grid-area:tip;width:auto!important;max-width:100%!important;min-height:0!important;text-align:center;line-height:1.5}
 .conf-vote-confirm{grid-area:vote}
 .conf-talking{display:none!important}
 .conf-person.vote-person{min-height:44px;padding:3px 6px 3px 4px!important}
 .conf-person>.avatar{width:30px!important;height:30px!important}
 .conf-person-info small{line-height:1.2!important}
 .conf-person-info b{max-width:none!important}
 .conf-chat .chat-log p{line-height:1.45}
 html[data-watching="1"] .conf-chat-form{display:none}
}
html[data-table="1"],html[data-table="1"] body{overflow-x:hidden}
/* スマホ縦の探索画面: 字を14pxに上げた分、上の段と下の段を詰める（重なりを出さない） */
@media (max-width:600px) and (orientation:portrait){
 .ship-repair-progress{max-width:150px!important}
 .ship-control small{display:none!important}
 .ship-location strong{display:none!important}
 .ship-location{bottom:150px!important;max-width:140px;white-space:normal;text-align:center}
}
/* 再点検✕4 麻雀: 鳴きのボタンの牌は横並び・ボタンの中に収める／卓の中央の箱は字に合わせて広げる */
.mj-actions button{white-space:nowrap}
.mj-actions .call-tiles,.mj-actions .call-tiles .meld-group{display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-end}
.mj-actions .call-tiles .tile{max-height:30px}
.mj-center{width:auto!important;min-width:96px;padding:0 4px}
.mj-center>small{white-space:nowrap}
/* 再点検✕4 麻雀 360×640 など（縦・高さ521〜740）: 局の行を卓の上に置き、卓をその下から描く */
/* 卓の中央の箱は卓の大きさに合わせて縮められ（実際は7px前後）、14pxを守れないので、スマホ縦では出さずに局の行（縮まない字）で見せる */
@media(max-width:600px) and (orientation:portrait){
 .mj-center{display:none!important}
 .mj-round-strip{display:flex!important;position:absolute;left:50%;transform:translateX(-50%);gap:10px;align-items:center;white-space:nowrap;color:#bed5c8;z-index:2}
 .mj-canvas{top:174px!important;height:calc(100% - 238px)!important}
 .mj-use-fallback .mj-fallback{top:174px!important}
 .mj-round-strip{top:148px!important;line-height:20px!important}
}
/* 再点検✕4 宇宙人狼の会議: 席の札は中身に合わせた高さ。名前は1行で省略、役目は2行まで */
@media (max-width:600px) and (orientation:portrait){
 .conf-person.vote-person{height:auto!important;min-height:44px;flex:0 0 auto!important;align-items:center;overflow:hidden}
 .conf-person-info{min-width:0;overflow:hidden}
 .conf-person-info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3!important}
 .conf-person-info small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25!important;white-space:normal}
 .conf-roster{overflow:visible}
}
/* 再々点検R1 宇宙人狼の会議・5人以上: 席の札は小さい形（名前1行・役目なし）。札の段だけを中でスクロールし、YOUR TURN の段・ボタン・メッセージ欄は外に固定 */
@media (max-width:600px) and (max-height:760px) and (orientation:portrait){
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]) .conf-floor{overflow:hidden!important}
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]) .conf-person.vote-person{min-height:36px!important;padding:2px 6px 2px 3px!important}
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]) .conf-person>.avatar{width:24px!important;height:24px!important}
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]) .conf-person-info small{display:none!important}
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]) .conf-person .conf-seat{font-size:14px}
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]) .conf-roster{max-height:122px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]):not([data-count="5"]):not([data-count="6"]) .conf-roster{-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);padding-bottom:14px}
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]) .conf-portrait{height:100px!important}
 /* 12人（conference-twelve.css の縦の作り）も同じ並びにそろえる: 話している人の段・補足・段階・メッセージ欄を出す */
 .conference-v4[data-count="12"]{min-height:0!important;grid-template-rows:auto minmax(0,1fr) auto minmax(165px,31%)!important}
 .conference-v4[data-count="12"] .conf-floor{grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr)!important}
 .conference-v4[data-count="12"] .conf-speaker-name{display:flex!important}
 .conference-v4[data-count="12"] .conf-speech-tip{display:block!important}
 .conference-v4[data-count="12"] .conf-portrait{display:block!important}
 .conference-v4[data-count="12"] .conf-phases{display:flex!important}
 .conference-v4[data-count="12"] .conf-heading>span{display:inline!important}
 .conference-v4[data-count="12"] .conf-chat{position:static!important;transform:none!important;width:auto!important;height:100%!important;min-height:0!important;display:flex!important;flex-direction:column}
 .conference-v4[data-count="12"] .conf-chat-head{display:flex!important}
}
@media (max-width:600px) and (min-height:761px) and (orientation:portrait){
 .conference-v4[data-count="10"] .conf-roster,.conference-v4[data-count="12"] .conf-roster{max-height:250px;overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(#000 85%,transparent);mask-image:linear-gradient(#000 85%,transparent);padding-bottom:14px}
 .conference-v4[data-count="10"] .conf-floor,.conference-v4[data-count="12"] .conf-floor{overflow:hidden!important}
}
/* QUICK1014 すぐ遊ぶ: ホームの「友達と遊ぶ・観戦」はリンク（広場の卓へ）・待ち画面 */
.home-secondary>a.home-link{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:12px;border:1px solid #a3d3da57;background:linear-gradient(135deg,#345773dd,#274258e8);padding:13px 5px 12px;box-shadow:0 5px 12px #00132d2e;color:#e9efea;text-decoration:none;text-align:center}
.home-mahjong .home-secondary>a.home-link{background:linear-gradient(135deg,#34594be8,#294539ee);border-color:#a9c4aa55}
.home-quick-lead{font-size:14px;line-height:1.6;color:#e9efea;margin:0 0 8px;text-shadow:0 1px 4px #0008}
.friend-table-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:10px;text-decoration:none;font-weight:700}
.quick-lobby{min-height:calc(100dvh - 48px);display:grid;place-items:center;padding:20px 16px;background:radial-gradient(circle at 50% 25%,#24485a,#0e1b23 70%)}
.quick-mahjong.quick-lobby{background:radial-gradient(circle at 50% 25%,#235445,#0d1d18 70%)}
.quick-card{width:100%;max-width:460px;text-align:center}
.quick-card h1{font-size:22px;margin:6px 0 4px;color:#f3eddf}
.quick-count{font-size:16px;color:#e9c58b;margin:4px 0}
.quick-count b{font-size:28px;margin-right:4px}
.quick-note{font-size:14px;line-height:1.7;color:#c9d6d2;margin:6px 0 14px}
.quick-seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:0 0 16px}
.quick-seat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;background:#ffffff12;border:1px solid #ffffff22}
.quick-seat.empty{opacity:.7;border-style:dashed}
.quick-seat b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-seat small{font-size:14px;color:#a8b8ba}
.quick-actions{display:flex;flex-direction:column;gap:8px}
.quick-actions button{min-height:48px;font-size:16px}
/* 5回目✕Q2 麻雀: 「立直」の印は顔の丸の上に重ね、点数と風の行には出さない（14px のまま） */
.mj-riichi-label{position:absolute!important;left:4px!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%);width:34px;height:34px;display:grid!important;place-items:center;padding:0!important;border-radius:50%!important;line-height:1!important;letter-spacing:0!important;z-index:2;box-shadow:0 0 0 2px #fff2d2aa}
/* 5回目✕Q1 ホーム: 英字の見出しは出さず、説明は下の注記（流れの中）へ */
.home-mode-note{line-height:1.6}
/* 5回目: すぐ遊ぶのカードの説明が右の「›」に重ならないように */
.home-mode .mode-info{padding-right:30px}
.home-mode>i{right:10px!important}
/* 立直の印は顔の丸に重ねるので、そのあいだ顔の頭文字は隠す */
.mj-player:has(.mj-riichi-label) .mj-avatar{visibility:hidden}
/* 5回目✕Q3 PC: 卓の中央の箱は卓に合わせて縮められ実際の字が小さくなるので、PC でも局の行（縮まない字）で見せる */
@media (min-width:601px) and (min-height:521px){
 .mj-center{display:none!important}
 .mj-round-strip{display:flex!important;position:absolute;top:122px;left:50%;transform:translateX(-50%);gap:12px;align-items:center;white-space:nowrap;color:#bed5c8;z-index:2;background:#0c262dcc;padding:4px 12px;border-radius:999px}
}
/* 5回目: 投票の段のスマホ縦。札の段は中でスクロール（6回目✕S1: 5人以上だけ。4人以下は中身の高さ）・✓は札の流れの中・「n/4 人が投票済み」はボタンの下の行 */
@media (max-width:600px) and (max-height:760px) and (orientation:portrait){
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]) .conf-floor{overflow:hidden!important}
 .conference-v4[data-count]:not([data-count="3"]):not([data-count="4"]) .conf-roster{max-height:122px;overflow-y:auto;overscroll-behavior:contain}
 /* 6回目✕S1: 4人以下はスクロールさせず、札を少し詰めて2段を段の中に収める（役目・CPU の2行目は残す） */
 .conference-v4:is([data-count="3"],[data-count="4"]) .conf-person.vote-person{min-height:0!important;padding:3px 6px 3px 3px!important}
 .conference-v4:is([data-count="3"],[data-count="4"]) .conf-person>.avatar{width:28px!important;height:28px!important}
 .conference-v4:is([data-count="3"],[data-count="4"]) .conf-person-info{gap:0!important}
 .conference-v4:is([data-count="3"],[data-count="4"]) .conf-person-info>*{line-height:1.25!important}
 .conference-v4:is([data-count="3"],[data-count="4"]) .conf-roster{gap:4px!important}
 /* 札の段は中身の高さ（5人以上は122pxまで）を取り、みんなのメッセージ欄が縮む（120px は残す） */
 .conference-v4[data-count]:not([data-count="12"]){grid-template-rows:auto auto auto minmax(120px,1fr)!important}
}
@media (max-width:600px) and (orientation:portrait){
 .conf-voted{position:static!important;margin-left:auto;flex:0 0 auto}
 .conf-controls{flex-wrap:wrap!important}
 .conf-controls>:not(button){flex:1 0 100%;order:2;text-align:center;font-size:14px;margin:0}
}
/* 10/14 夜 ユーザー「はいの中の絵柄が小さくて見にくい」: 牌の面の余白を詰め、絵柄を面いっぱいに（絵柄そのものは tiles.mjs で大きく・太く・濃く） */
#app .tile:not(.back){padding:2px 1px 4px}
#app .tile.small:not(.back){padding:1px 1px 2px}
#app .tile svg,#app .tile .tile-face{width:100%;height:100%}
#app .mj-hand-row .hand-tile .tile svg{width:100%;height:100%;padding:1px 0 0;filter:none}
/* 手牌は 360 幅でも14枚が1列のまま、いちばん大きく（すき間 1px・ツモ牌の間 4px） */
@media (max-width:600px) and (orientation:portrait){
 #app .mj-hand-row.hand{gap:1px}
 #app .mj-hand-row .hand-tile.drawn{margin-left:4px}
 #app .mj-hand-row{--tile-w:calc((100vw - 36px)/14)}
}
/* ドラ表示と和了の手も少し大きく（1列は崩さない） */
#app .mj-dora .tile.small,#app .mj-dora i{width:24px;height:33px}
/* 和了の手: 1列に詰めると17px まで小さくなるので、24px のまま2段に折り返す（スマホ） */
@media (max-width:600px){#app .mj-result-layer .round-result .winning-hand>.tile{width:24px;height:33px}}
/* 10/14 夜 河を大きくした分: PC の局の帯は卓の上に重ねず、ドラ表示の下へ。背の低いスマホでは「直前の捨て牌」の箱が河に重なるので出さない（卓の上の黄色い枠で分かる） */
@media (min-width:601px) and (min-height:521px){
 #app .mj-round-strip{top:142px!important;left:16px!important;transform:none!important}
}
@media (max-width:600px) and (max-height:700px) and (orientation:portrait){
 #app .mj-last-discard{display:none!important}
}
/* 9回目✕M2（v23）: 友達の部屋の待機画面（スマホ）。1列にして、席の行は名前・状態を折り返して高さを中身に合わせる。真ん中だけをスクロール、下の「対局をはじめる」は残す */
@media (max-width:600px){
 #app .lobby-v4{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto minmax(0,1fr) auto!important;overflow:hidden}
 #app .lobby-v4>*{min-width:0;max-width:100%}
 #app .lobby-side{display:flex!important;flex-direction:column!important;gap:8px;height:auto!important;min-height:0;overflow-y:auto!important;overscroll-behavior:contain;align-content:start}
 #app .lobby-seats{max-height:none!important;height:auto!important;overflow:visible!important;flex:none!important}
 #app .lobby-side>*{flex:none!important;min-height:min-content!important}
 #app .lobby-seat{height:auto!important;min-height:48px!important;padding-top:6px!important;padding-bottom:6px!important}
 #app .lobby-seat>div{gap:2px!important}
 #app .lobby-seat b,#app .lobby-seat>div>small{display:block!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.3!important;max-height:none!important}
 #app .lobby-rule-card{height:auto!important;overflow:visible!important;min-width:0}
 #app .lobby-rule-card>div{flex-wrap:wrap;gap:6px}
 #app .lobby-stage{height:118px!important;min-height:0}
 #app .lobby-side-heading{grid-area:lh!important}
 #app .lobby-side>.lobby-seats{grid-area:ls!important}
 #app .lobby-side>.lobby-rule-card{grid-area:lr!important}
}
/* 9回目✕M1（v23）: 途中参加を待つ帯（観戦の画面の下にずっと出す）と、お知らせの字を 14px に */
/* 帯はヘッダーの場所に重ねる（下の席の札・手番の行と重ならない）。待っている間はヘッダーの中身（合言葉・通話・メニュー）を隠す。「やめる」で観戦をやめられる */
#join-band{position:fixed;left:0;right:0;top:0;z-index:140;height:var(--jb-h,56px);overflow:hidden;display:flex;align-items:center;gap:8px;padding:4px max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left));border-bottom:1px solid #f0d89c;background:#12313a;color:#f5ecd6}
#join-band[hidden]{display:none}
#join-band>span{flex:1;min-width:0;font-size:14px;line-height:1.3}
#join-band b{font-size:14px;color:#f3d48c;margin-right:6px}
#join-band small{display:none}
#join-band button{flex:none;min-height:40px;padding:6px 14px;font-size:14px}
body:has(#join-band:not([hidden])) .game-header>*{visibility:hidden}
#toast{font-size:14px!important}
/* お知らせは席の札（下の自分の札・上の相手の札）に重ならない卓の真ん中に。帯がある時は帯の上 */
html[data-game=mahjong][data-phase=playing] #toast{top:44%;bottom:auto}
html[data-game=mahjong][data-phase=playing] #toast.show{transform:translate(-50%,0)}
/* 観戦で音が止まっている時の「🔊 タップで音が出ます」も、ヘッダーの場所に出す（観戦の画面の字と重ならない） */
body:has(#sound-hint:not([hidden])) .game-header>*{visibility:hidden}

/* Four readable score cards, an uncluttered table, and a larger touch hand. */
html[data-game=mahjong][data-phase=playing] #screen{height:calc(100dvh - 48px)}
#app .mj-v4{--tile-w:clamp(34px,4.8vw,52px);background:radial-gradient(ellipse at 50% 20%,#255a51,#071f2b 90%)}
#app .mj-stage{min-height:0!important;flex:1 1 0;overflow:hidden}
#app .mj-players{position:absolute;inset:8px 12px auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;z-index:3;max-width:1000px;margin:auto}
#app .mj-player{position:relative!important;inset:auto!important;transform:none!important;max-width:none!important;width:100%;min-height:62px;height:62px;padding:8px 10px;gap:8px;border-radius:10px;justify-content:center;box-shadow:0 3px 12px #0003}
#app .mj-player.self{border-color:#7ed9bd;background:linear-gradient(120deg,#235348,#163d3c)}
#app .mj-player.active{border-color:#ffe4a3;box-shadow:0 0 0 2px #f4d88b50,0 3px 15px #efce7540}
#app .mj-player-info{min-width:0;flex:1}
#app .mj-player-info strong{font-size:22px!important;letter-spacing:0;line-height:1.1}
#app .mj-player-name{max-width:none;font-size:14px!important;line-height:1.2}
#app .mj-player-name em{display:none}
#app .mj-wind{font-size:18px!important;padding:0}
#app .mj-relative{font-size:14px!important;line-height:1.2}
#app .mj-riichi-label{font-size:14px!important;left:auto!important;right:3px!important;top:auto!important;bottom:-5px!important;transform:none!important;width:auto;height:20px;line-height:18px!important;border-radius:5px!important;padding:1px 5px!important;box-shadow:0 1px 4px #0005}
#app .mj-center,#app .mj-last-discard{display:none!important}
#app .mj-round-strip{display:grid!important;grid-template-columns:auto auto;gap:2px 12px;left:14px!important;top:80px!important;right:auto;transform:none!important;padding:0!important;background:none!important;border:0!important;line-height:23px!important;height:48px;color:#c6ded3}
#app .mj-round-strip b{font-size:18px!important;color:#ffedbc}
#app .mj-round-strip span{font-size:14px!important}
#app .mj-dora{top:80px!important;left:auto!important;right:14px!important;bottom:auto;display:flex;flex-direction:row;align-items:center;gap:8px;border:0;background:none;box-shadow:none;padding:0;max-width:50%;height:48px}
#app .mj-dora>span{font-size:14px!important;letter-spacing:0;white-space:nowrap}
#app .mj-dora>div{gap:3px;flex-wrap:nowrap}
#app .mj-dora .tile.small{width:25px!important;height:35px!important;flex-shrink:0}
#app .mj-dora i{display:none}
#app .mj-canvas{inset:138px 0 0!important;width:100%!important;height:calc(100% - 138px)!important}
#app .mj-use-fallback .mj-fallback{inset:146px 12px 10px!important}
#app .mj-table-tools{top:auto!important;right:auto!important;left:10px!important;bottom:8px;display:flex;gap:6px;z-index:5}
#app .mj-table-tools button{width:42px;height:42px;min-height:42px;padding:4px;font-size:20px!important;border-radius:12px;background:#0b2933ed;border:1px solid #688f8555}
#app .mj-hand-panel{padding:8px 12px max(8px,env(safe-area-inset-bottom));min-height:0!important;flex:0 0 auto;background:linear-gradient(150deg,#194e43,#0c2932);border-top:1px solid #d5bd7770}
#app .mj-hand-status{height:auto!important;min-height:26px;max-width:1000px;margin:0 auto 10px;gap:8px;flex-wrap:wrap}
#app .mj-turn-label{font-size:14px!important;line-height:1.4}
#app .mj-timer,#app .mj-coach{font-size:14px!important}
#app .mj-hand-row.hand{--tile-w:inherit;gap:4px;height:calc(var(--tile-w)*1.4 + 7px);max-width:1000px;justify-content:center}
#app .mj-hand-row .hand-tile{width:var(--tile-w);height:calc(var(--tile-w)*1.4);flex:0 0 var(--tile-w)}
#app .mj-hand-row .hand-tile .tile{border-radius:5px;box-shadow:0 2px #d1c6a5,0 5px #3a9981,0 7px 4px #001e2480}
#app .mj-hand-row .hand-tile:focus-visible{outline:3px solid #ffe7a9;outline-offset:5px}
#app .mj-hand-row .hand-tile.drawn{margin-left:10px}
#app .mj-hand-bottom{margin:10px auto 0;min-height:46px;max-width:1000px;gap:8px}
#app .mj-hand-tip{font-size:14px!important;line-height:1.45;max-width:45%}
#app .mj-selection-preview{position:static!important;flex-direction:row;gap:7px;padding:2px 5px;min-width:0;max-width:45%;background:none;border:0;box-shadow:none;flex-shrink:0}
#app .mj-selection-preview:after{display:none}
#app .mj-selection-preview>.tile{width:30px;height:42px;flex-shrink:0}
#app .mj-selection-preview>span{font-size:14px!important;line-height:1.2;text-align:left}
#app .mj-selection-preview>span>small{font-size:14px!important;margin-top:3px}
#app .mj-actions{position:static!important;inset:auto!important;width:auto;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:100%}
#app .mj-actions button{font-size:16px!important;min-height:46px;padding:8px 16px;touch-action:manipulation}
#app .mj-confirm span{margin-left:6px}
#app .mj-waits{display:none}
#app .mj-chat-open{position:absolute;right:10px;bottom:calc(var(--mj-panel-height,178px) + 8px);z-index:6;display:flex;gap:6px;align-items:center;background:#0b2933ed;border:1px solid #7da09480;color:#e8f4db;border-radius:12px;height:42px;padding:8px 10px;min-height:42px;box-shadow:0 3px 12px #00181b55}
#app .mj-chat-open svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#app .mj-chat-open span{font-size:14px!important}
#app .mj-chat-open b{position:absolute;top:-8px;right:-4px;border-radius:30px;background:#eb916a;color:#102a30;font-size:14px!important;min-width:23px;height:23px;display:grid;place-items:center}
#app .mj-chat-open b[hidden]{display:none}
#app .mj-chat-preview{position:absolute;right:10px;bottom:calc(var(--mj-panel-height,178px) + 58px);z-index:8;width:min(280px,70%);background:#f9f3e2;color:#173b37;padding:12px 14px;border-radius:15px 15px 3px 15px;box-shadow:0 8px 24px #001b2460;pointer-events:none}
#app .mj-chat-preview b{display:block;font-size:14px!important;margin-bottom:3px}
#app .mj-chat-preview span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:15px!important;line-height:1.5}
#app .mj-chat-preview[hidden]{display:none}
.mj-chat-dialog{color:#e9f1e2;border:1px solid #799f85;border-radius:20px;background:#102f35;width:min(480px,calc(100vw - 20px));max-height:calc(100dvh - 28px);padding:0;box-shadow:0 25px 90px #0008;overflow:hidden}
.mj-chat-dialog::backdrop{background:#00171c99;backdrop-filter:blur(3px)}
.mj-chat-dialog[open]{display:flex;flex-direction:column}
.mj-chat-dialog header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #5d887459;flex-shrink:0;gap:10px}
.mj-chat-dialog header small{font-size:12px!important;letter-spacing:.12em;color:#9cc5b2}
.mj-chat-dialog h2{font-size:22px!important;color:#f4e8bd;margin:2px 0 0}
.mj-chat-dialog button{font-size:14px!important;min-height:44px;padding:8px 12px}
.mj-chat-dialog .mj-chat-turn{margin:8px 12px 0;flex-shrink:0;background:#f4db97;color:#243a34;font-weight:700;border:0}
.mj-chat-dialog [hidden]{display:none!important}
.mj-chat-log{min-height:130px;height:min(320px,40dvh);overflow-y:auto;overscroll-behavior:contain;padding:14px;scrollbar-width:thin}
.mj-chat-log article{max-width:88%;width:fit-content;margin:0 0 12px}
.mj-chat-log article.self{margin-left:auto}
.mj-chat-log small{display:block;color:#b8cfc4;font-size:14px!important;margin-bottom:4px;overflow-wrap:anywhere}
.mj-chat-log time{color:#a2b9b0;font-size:12px!important;margin-left:6px}
.mj-chat-log p{background:#24484a;color:#f5f2df;border-radius:12px 12px 12px 3px;margin:0;padding:10px 12px;font-size:16px!important;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}
.mj-chat-log .self p{background:#365a49;border-radius:12px 12px 3px 12px}
.mj-chat-log .mj-chat-empty{background:none;color:#b4cec0;text-align:center;padding:26px 0;line-height:1.8}
.mj-chat-stamps{display:flex;gap:6px;padding:8px 12px;flex-wrap:wrap;border-top:1px solid #5d887459;flex-shrink:0}
.mj-chat-stamps button{border:1px solid #73998480;border-radius:30px;background:#1d4140;color:#e6eccc;flex:1 0 auto}
.mj-chat-form{display:flex;gap:8px;padding:4px 12px;flex-shrink:0}
.mj-chat-form input{min-width:0;flex:1;width:0;border:1px solid #789b8c;background:#0a232c;color:#fff8e7;border-radius:10px;padding:10px 12px;font-size:16px!important;min-height:46px}
.mj-chat-form button{background:#ead39a;color:#233c33;border:0;font-weight:750;border-radius:10px}
.mj-chat-error{font-size:14px!important;line-height:1.4;margin:0 12px;color:#ffd3a8;min-height:0}
.mj-chat-error:empty{display:none}
.mj-chat-note{font-size:14px!important;color:#b6cbbf;margin:8px 12px 12px;line-height:1.5}
.mj-chat-dialog .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Moment overlays are informational and never intercept a tile or a result button. */
#app .mj-event{position:absolute;inset:0!important;transform:none!important;width:100%;height:100%;padding:0;display:grid;place-content:center;gap:0;z-index:26;pointer-events:none;opacity:0;transition:opacity .18s;background:transparent}
#app .mj-event.show{opacity:1}
.mj-event-card{position:relative;display:flex;align-items:center;flex-direction:column;gap:10px;padding:28px 24px;width:min(520px,calc(100vw - 24px));color:#fff0c8;isolation:isolate;text-align:center}
.mj-event-card:before{content:'';position:absolute;inset:0 -20vw;background:linear-gradient(90deg,transparent,#102c32f5 24%,#143c35f5 76%,transparent);border-block:1px solid #e9cd7977;z-index:-1;box-shadow:0 12px 50px #00171970}
#app .mj-event strong{font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:clamp(56px,15vw,100px)!important;letter-spacing:.12em;line-height:1.25;color:#ffe4a6;text-shadow:0 3px #86572a,0 0 32px #e2ba6580}
#app .mj-event small,#app .mj-event em{font-size:18px!important;font-style:normal;line-height:1.4;color:#f5edce;overflow-wrap:anywhere;max-width:100%}
#app .mj-event b{font-size:34px!important;font-variant-numeric:tabular-nums;color:#fff2bf}
#app .mj-event[data-kind=deal-in] strong{color:#ffd1ba;text-shadow:0 3px #782d30,0 0 26px #cb5c6d66}
#app .mj-event[data-kind=deal-in] .mj-event-card:before{background:linear-gradient(90deg,transparent,#3e2335f5 24%,#382a36f5 76%,transparent);border-color:#e69d91}
#app .mj-event[data-kind=riichi] strong{color:#ffe5a8}
#app .mj-event.show .mj-event-card{animation:mj-declare-in .5s cubic-bezier(.17,.8,.24,1) both}
#app .mj-event[data-kind=win].show .mj-event-card:after{content:'';position:absolute;inset:-100px;background:repeating-conic-gradient(from 0deg,transparent 0deg 12deg,#f5ce7629 13deg 14deg,transparent 15deg 30deg);z-index:-2;mask-image:radial-gradient(black,transparent 70%);animation:mj-radiance 6s linear infinite}
@keyframes mj-declare-in{from{opacity:0;transform:translateY(18px) scale(.88);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes mj-radiance{to{transform:rotate(30deg)}}
#app .mj-result-layer:not(:empty){padding:10px;background:#061e2bda}
#app .mj-result-layer .round-result{width:min(700px,100%);border-radius:18px;border-color:#a6bd95}
.mj-personal-result{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-1px -1px 18px;padding:16px 18px;background:#315c4b;border-bottom:1px solid #a0c7a1;color:#fff0b3;border-radius:16px 16px 0 0}
.mj-personal-result span{font-size:19px!important;font-weight:750}
.mj-personal-result strong{font-size:28px!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.mj-personal-result.loss{background:#513343;border-color:#b7868b;color:#ffcebd}
.mj-personal-result.neutral{background:#244650;color:#d3e8dc;border-color:#709698}
#app .mj-result-layer .round-result .winning-hand{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:14px 6px;background:#092a30;border-radius:10px}
#app .mj-result-layer .round-result .winning-hand>.tile{width:32px!important;height:44px!important;flex:0 0 32px}
#app .mj-result-layer .round-result .result-yaku{display:flex;flex-wrap:wrap;gap:8px}
#app .mj-result-layer .round-result .result-yaku>span{font-size:16px!important;padding:8px 12px;background:#31564c;border-radius:8px}
#app .mj-result-layer .round-result .settlement>div{min-height:52px;padding:10px 8px}
#app .mj-result-layer .round-result .settlement b{font-size:20px!important}
#app .mj-result-layer .round-result .primary{min-height:52px;font-size:17px!important}
@media(max-width:600px) and (orientation:portrait){
 #app .mj-v4{--tile-w:clamp(36px,calc((100vw - 48px)/7),48px)}
 #app .mj-players{left:8px;right:8px;gap:4px}
 #app .mj-player{padding:6px;gap:3px;min-height:62px}
 #app .mj-player .mj-avatar{display:none}
 #app .mj-player-info strong{font-size:18px!important}
 #app .mj-wind{font-size:14px!important}
 #app .mj-relative{display:none}
 #app .mj-dora{flex-direction:column;align-items:flex-end;gap:2px;right:9px!important;height:50px}
 #app .mj-dora>span{font-size:14px!important;line-height:16px}
 #app .mj-dora .tile.small{width:23px!important;height:32px!important}
 #app .mj-round-strip{left:10px!important;gap:2px 9px}
 #app .mj-hand-panel{padding-left:8px;padding-right:8px}
 #app .mj-hand-status{gap:4px 8px;margin-bottom:10px}
 #app .mj-hand-row.hand{display:grid;grid-template-columns:repeat(7,var(--tile-w));grid-auto-rows:calc(var(--tile-w)*1.36);height:auto;gap:9px 4px;align-items:stretch;justify-content:center;padding:0 0 5px}
 #app .mj-hand-row .hand-tile{height:calc(var(--tile-w)*1.36);margin:0!important}
 #app .mj-hand-row .hand-tile.selected{transform:translateY(-4px)}
 #app .mj-hand-row .hand-tile.drawn .tile{outline:2px solid #c9ae70;outline-offset:1px}
 #app .mj-hand-bottom{margin-top:7px}
 #app .mj-hand-tip{display:none}
 #app .mj-actions button{padding:8px 12px;font-size:15px!important}
 #app .mj-coach{padding:2px 7px;min-height:28px}
 #app .mj-selection-preview>span>small{display:none}
 .mj-chat-dialog{margin:auto auto 10px}
}
@media(max-width:600px) and (max-height:650px) and (orientation:portrait){
 #app .mj-v4{--tile-w:clamp(34px,calc((100vw - 62px)/7),42px)}
 #app .mj-players{top:4px}
 #app .mj-player{height:52px;min-height:52px}
 #app .mj-round-strip{top:62px!important;height:42px;line-height:20px!important}
 #app .mj-dora{top:61px!important}
 #app .mj-canvas{top:116px!important;height:calc(100% - 116px)!important}
 #app .mj-hand-status{margin-bottom:6px}.mj-hand-bottom{min-height:42px}
 #app .mj-selection-preview>.tile{width:25px;height:35px}
}
@media(min-width:601px) and (max-height:520px) and (orientation:landscape){
 html[data-game=mahjong][data-phase=playing] .game-header{height:44px!important;position:relative;inset:auto;width:100%;padding:2px 10px;background:#0b2328;border-bottom:1px solid #b59c5f38}html[data-game=mahjong][data-phase=playing] .game-header>.wordmark{display:block}
 html[data-game=mahjong][data-phase=playing] #screen{height:calc(100dvh - 44px)!important}
 #app .mj-v4{--tile-w:clamp(29px,4.1vw,38px);display:grid;grid-template-columns:minmax(0,1fr) 205px;grid-template-rows:minmax(0,1fr)}
 #app .mj-stage{height:100%;width:100%;min-height:0}
 #app .mj-hand-panel{height:100%;width:205px;display:flex;flex-direction:column;justify-content:flex-start;padding:6px 8px;border-top:0;border-left:1px solid #d5bd7770;overflow-y:auto}
 #app .mj-hand-status{margin:0 0 10px;gap:4px;flex:none}
 #app .mj-hand-row.hand{display:grid;grid-template-columns:repeat(4,var(--tile-w));grid-auto-rows:calc(var(--tile-w)*1.25);height:auto;gap:7px 5px;flex:none}
 #app .mj-hand-row .hand-tile{height:calc(var(--tile-w)*1.25);margin:0!important}
 #app .mj-hand-row .hand-tile.selected{transform:translateY(-3px)}
 #app .mj-v4:not(:has(.hand-tile[data-choice])):has(.mj-actions button:nth-of-type(2)) .mj-hand-row.hand{--tile-w:23px;grid-template-columns:repeat(7,23px);gap:5px 3px;grid-auto-rows:31px}
 #app .mj-v4:not(:has(.hand-tile[data-choice])):has(.mj-actions button:nth-of-type(2)) .mj-hand-row .hand-tile{height:31px}
 #app .mj-hand-bottom{margin:8px 0 0;flex-wrap:wrap;justify-content:flex-end;flex:none}
 #app .mj-hand-tip,#app .mj-selection-preview,#app .mj-relative,#app .mj-avatar{display:none!important}
 #app .mj-actions{flex-wrap:wrap!important;overflow:visible!important;width:100%;padding:0!important}#app .mj-actions button{min-height:38px;padding:6px;font-size:14px!important;width:auto;flex:1 0 auto;min-width:65px}#app .mj-actions .call-tiles .tile{width:15px!important;height:21px!important}#app .mj-actions .call-tiles .meld-group{gap:0}
 #app .mj-players{top:4px;left:6px;right:6px;gap:4px}
 #app .mj-player{height:48px;min-height:48px;padding:4px;gap:4px}
 #app .mj-player-info strong{font-size:17px!important}
 #app .mj-wind{font-size:14px!important}
 #app .mj-round-strip{top:57px!important;left:8px!important;display:flex!important;height:24px;gap:8px;align-items:center}
 #app .mj-round-strip span:nth-of-type(n+2){display:none}
 #app .mj-round-strip b{font-size:15px!important}
 #app .mj-dora{top:56px!important;right:8px!important;gap:4px;height:27px}
 #app .mj-dora>span{display:none}
 #app .mj-dora .tile.small{width:17px!important;height:24px!important}
 #app .mj-canvas{top:88px!important;height:calc(100% - 88px)!important}
 #app .mj-chat-open{bottom:6px;right:211px}
 #app .mj-chat-open span{display:none}
 #app .mj-chat-preview{bottom:56px;right:211px;max-width:220px}
 #app .mj-table-tools{bottom:6px}
 .mj-chat-dialog{max-height:calc(100dvh - 12px);margin:auto}.mj-chat-log{min-height:60px;height:24dvh}.mj-chat-dialog header{padding:8px 12px}.mj-chat-stamps{padding:4px 12px;flex-wrap:nowrap;overflow-x:auto}.mj-chat-stamps button{min-height:38px}.mj-chat-note{margin:4px 12px;font-size:12px!important}
}
html[data-reduce="1"] .mj-event *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.mj-event *{animation:none!important;transition:none!important}}

/* A continuous hand and a table-first layout, with scores outside public tiles. */
#app .mj-v4{display:flex!important;flex-direction:column!important;--tile-w:clamp(28px,5.5vw,56px)}
#app .mj-stage{flex:1 1 0!important;width:100%!important;height:auto!important;min-height:0}
#app .mj-players{display:contents!important}
#app .mj-player{position:absolute!important;width:calc((100% - 36px)/3)!important;max-width:190px!important;height:58px!important;min-height:0!important;top:8px!important;bottom:auto!important;padding:6px 9px!important;gap:6px!important;justify-content:space-between!important;z-index:4}
#app .mj-player-left{left:8px!important;right:auto!important}
#app .mj-player-top{left:50%!important;right:auto!important;transform:translateX(-50%)!important}
#app .mj-player-right{right:8px!important;left:auto!important}
#app .mj-player-bottom{left:8px!important;right:auto!important;top:auto!important;bottom:5px!important;width:150px!important;height:36px!important;background:#123d37f2!important}
#app .mj-player-bottom .mj-player-info{display:flex;align-items:center;gap:8px}
#app .mj-player-bottom .mj-player-name{max-width:48px}
#app .mj-player-info strong{font-size:20px!important}
#app .mj-player-name{font-size:13px!important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#app .mj-player .mj-avatar{display:none!important}
#app .mj-relative{display:block!important;font-size:11px!important;white-space:nowrap}
#app .mj-wind{font-size:15px!important;line-height:1.15}
#app .mj-player-bottom .mj-relative{display:none!important}
#app .mj-canvas{inset:70px 0 45px!important;width:100%!important;height:calc(100% - 115px)!important}
#app .mj-use-fallback .mj-fallback{inset:70px 6px 45px!important}
#app .mj-center{display:flex!important;flex-direction:column;align-items:center;justify-content:center;width:100px;height:88px;gap:3px;border:1px solid #a8bd8d99;border-radius:10px;background:#12362ff2;color:#e4f2d6;line-height:1.1;box-shadow:0 0 12px #071b2455;z-index:2;pointer-events:none}
#app .mj-center>strong{font-size:26px!important;line-height:1.15;color:#ffedb9;font-weight:800}
#app .mj-center>strong small{font-size:17px!important}
#app .mj-center>span{font-size:17px!important}
#app .mj-center>span b{font-size:22px!important;color:#fff6cf}
#app .mj-center>small{font-size:12px!important;white-space:nowrap}
#app .mj-round-strip{display:none!important}
#app .mj-dora{top:auto!important;bottom:4px!important;right:8px!important;left:auto!important;max-width:calc(100% - 175px);height:38px;display:flex!important;flex-direction:row!important;gap:5px;padding:0!important}
#app .mj-dora>span{font-size:11px!important;line-height:1.2;white-space:normal;width:26px}
#app .mj-dora .tile.small{width:20px!important;height:29px!important}
#app .mj-dora>div{gap:2px}
#app .mj-table-tools{left:8px!important;bottom:50px!important;top:auto!important}
#app .mj-table-tools button{width:36px;height:36px;min-height:36px}
#app .mj-table-tools [data-a=settings]{display:none}
#app .mj-hand-panel{width:100%!important;height:auto!important;flex:0 0 auto!important;overflow:visible!important;padding:7px 10px max(7px,env(safe-area-inset-bottom));border:0;border-top:1px solid #c3b46a66;display:block!important}
#app .mj-hand-status{margin:0 auto 8px!important;min-height:23px;flex-wrap:nowrap!important;gap:6px!important}
#app .mj-turn-label{font-size:13px!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .mj-coach{font-size:13px!important;min-height:25px;padding:2px 6px;white-space:nowrap}
#app .mj-timer{font-size:13px!important;white-space:nowrap}
#app .mj-hand-row.hand{display:flex!important;flex-wrap:nowrap!important;gap:2px!important;height:calc(var(--tile-w)*1.45 + 9px)!important;align-items:flex-end!important;justify-content:center!important;padding:0 0 5px!important;width:100%}
#app .mj-hand-row .hand-tile{width:var(--tile-w)!important;flex:0 0 var(--tile-w)!important;height:calc(var(--tile-w)*1.45)!important;margin:0!important;touch-action:none}
#app .mj-hand-row .hand-tile.drawn{margin-left:6px!important}
#app .mj-hand-row .hand-tile.selected{transform:translateY(-8px)!important}
#app .mj-hand-row .hand-tile .tile{border-radius:3px;box-shadow:0 2px #cdc2a0,0 4px #478d72,0 6px 3px #06232688}
#app .mj-hand-row .hand-tile.drawn .tile{outline:1px solid #d8bb71;outline-offset:1px}
#app .mj-hand-bottom{margin:5px auto 0!important;min-height:0!important;flex-wrap:nowrap!important;align-items:center;justify-content:space-between;gap:8px}
#app .mj-hand-tip{display:block!important;max-width:none!important;font-size:12px!important;color:#c2d8cc;line-height:1.5}
#app .mj-hand-bottom:not(:has(.mj-actions button)):not(:has(.mj-selection-preview)){min-height:18px!important}
#app .mj-selection-preview{display:flex!important;position:static!important;max-width:45%!important;padding:2px 0!important;gap:7px!important}
#app .mj-selection-preview>.tile{width:33px!important;height:46px!important}
#app .mj-selection-preview>span{font-size:14px!important}
#app .mj-selection-preview>span>small{display:none!important}
#app .mj-actions{display:flex;flex-wrap:wrap!important;width:auto!important;max-width:100%!important;overflow:visible!important;padding:0!important;gap:6px!important}
#app .mj-actions button{flex:0 0 auto!important;width:auto!important;min-width:62px;min-height:44px!important;padding:8px 12px!important;font-size:15px!important}
#app .mj-actions .call-tiles{margin-left:0;display:flex}
#app .mj-actions .call-tiles .tile{width:18px!important;height:25px!important}
#app .mj-hand-bottom:has(.mj-actions button:nth-of-type(2)) .mj-hand-tip{display:none!important}
#app .mj-chat-open{bottom:calc(var(--mj-panel-height,120px) + 50px)!important;right:8px!important;left:auto;width:40px;height:36px;min-height:36px;padding:6px;justify-content:center}
#app .mj-chat-open>span{display:none}
#app .mj-chat-preview{bottom:calc(var(--mj-panel-height,120px) + 92px)!important;right:8px!important;max-width:230px}
@media(max-width:600px) and (orientation:portrait){
 #app .mj-v4{--tile-w:calc((100vw - 52px)/14)}
 #app .mj-player{padding:5px 7px!important;gap:4px!important}
 #app .mj-player-info strong{font-size:18px!important}
 #app .mj-player-bottom{width:150px!important}
 #app .mj-hand-row.hand{min-height:48px}
 #app .mj-hand-row .hand-tile{min-height:42px}
 #app .mj-hand-row .hand-tile .tile{width:100%!important;height:100%!important}
 #app .mj-hand-status{gap:5px!important}
 #app .mj-turn-label{flex:1}
 #app .mj-coach{max-width:95px}
 #app .mj-hand-bottom:has(.mj-actions button:nth-of-type(3)){flex-wrap:wrap!important}
 #app .mj-hand-bottom:has(.mj-actions button:nth-of-type(3)) .mj-actions{width:100%!important;justify-content:flex-end}
}
@media(orientation:landscape) and (max-height:550px){
 html[data-game=mahjong][data-phase=playing] .game-header{height:36px!important;min-height:36px!important;padding:2px 9px}
 html[data-game=mahjong][data-phase=playing] #screen{height:calc(100dvh - 36px)!important}
 #app .mj-v4{--tile-w:clamp(27px,4.6vw,44px)}
 #app .mj-stage{min-height:100px!important}
 #app .mj-canvas{inset:0 128px!important;width:calc(100% - 256px)!important;height:100%!important}
 #app .mj-use-fallback .mj-fallback{inset:3px 130px!important}
 #app .mj-player{width:116px!important;height:48px!important;left:8px!important;right:auto!important;transform:none!important;padding:4px 7px!important}
 #app .mj-player-top{top:4px!important}
 #app .mj-player-left{top:58px!important}
 #app .mj-player-right{top:112px!important}
 #app .mj-player-bottom{left:auto!important;right:8px!important;top:4px!important;bottom:auto!important;height:48px!important}
 #app .mj-player-bottom .mj-player-info{display:block}
 #app .mj-player-bottom .mj-player-name{max-width:none}
 #app .mj-player-info strong{font-size:18px!important}
 #app .mj-player-name{font-size:12px!important}
 #app .mj-dora{top:64px!important;bottom:auto!important;right:8px!important;width:112px;max-width:112px;height:42px;justify-content:flex-end}
 #app .mj-dora>span{display:none}
 #app .mj-dora:before{content:'ドラ表示牌';position:absolute;top:-14px;right:0;font-size:11px;color:#d3dec6}
 #app .mj-dora .tile.small{width:18px!important;height:25px!important}
 #app .mj-table-tools{bottom:4px!important;left:8px!important}
 #app .mj-hand-panel{padding:4px 12px 5px!important}
 #app .mj-hand-status{position:absolute;top:112px;right:8px;width:116px!important;max-width:116px!important;display:flex;flex-direction:column;align-items:flex-end;gap:4px!important;margin:0!important;z-index:4}
 #app .mj-hand-status .mj-turn-label{font-size:12px!important;white-space:normal;text-align:right}
 #app .mj-hand-row.hand{height:calc(var(--tile-w)*1.45 + 8px)!important}
 #app .mj-hand-bottom{min-height:0!important;margin-top:2px!important}
 #app .mj-hand-tip{font-size:11px!important}
 #app .mj-selection-preview{max-width:200px!important}
 #app .mj-selection-preview>.tile{width:26px!important;height:36px!important}
 #app .mj-actions button{min-height:38px!important;padding:5px 12px!important;font-size:14px!important}
 #app .mj-chat-open{bottom:calc(var(--mj-panel-height,115px) + 4px)!important;right:8px!important}
 #app .mj-chat-preview{bottom:calc(var(--mj-panel-height,115px) + 46px)!important;right:8px!important}
}

#app .mj-player-name,#app .mj-player-info strong{display:block}
#app .mj-player-bottom .mj-player-info{flex-direction:row}
#app .mj-selection-preview{height:48px!important;min-height:0!important;box-sizing:border-box}
@media(max-width:600px) and (orientation:portrait){#app .mj-player-bottom{width:120px!important}.mj-player-bottom .mj-player-name{display:none!important}#app .mj-player-bottom .mj-relative{display:block!important}#app .mj-table-tools{bottom:5px!important;left:134px!important}#app .mj-chat-open{bottom:calc(var(--mj-panel-height,120px) + 5px)!important;left:178px!important;right:auto!important}#app .mj-dora{max-width:calc(100% - 232px)}#app .mj-dora>span{display:none!important}#app .mj-dora:before{content:'ドラ表示牌';position:absolute;top:-4px;right:0;font-size:10px;color:#ceddc6}#app .mj-dora>div{padding-top:7px}}
@media(orientation:landscape) and (max-height:550px){#app .mj-hand-panel{position:static!important}#app .mj-selection-preview{height:38px!important}html[data-game=mahjong][data-phase=playing] .game-header{height:40px!important;min-height:40px!important}html[data-game=mahjong][data-phase=playing] #screen{height:calc(100dvh - 40px)!important}html[data-game=mahjong] .game-header .header-tools{margin-left:auto}}

#app .mj-hand-bottom{height:auto!important}#app .mj-hand-row.hand{--tile-w:inherit!important}

/* Keep the exploration scene and the movement area clear at every orientation. */
html[data-game=deduction][data-stage=roam] #app .ship-hud{max-width:calc(100% - 128px);width:300px;gap:6px;top:12px;left:12px}
html[data-game=deduction] #app .ship-hud .role-pill{font-size:14px;min-height:38px;padding:6px 10px}
html[data-game=deduction] #app .ship-repair-progress{min-height:38px;padding:5px 8px;gap:3px}
html[data-game=deduction] #app .ship-repair-progress :is(span,b,small){font-size:14px!important}
html[data-game=deduction] #app .ship-objective{top:64px;left:12px;width:250px;max-width:calc(100% - 138px);background:#102b40eb;border-radius:12px;box-shadow:0 6px 22px #0003}
html[data-game=deduction] #app .practice-card{padding:11px 12px;margin:0;border:0;background:none;box-shadow:none}
html[data-game=deduction] #app .practice-card>small{color:#f2d58e;font-size:14px!important;line-height:1.3;display:block}
html[data-game=deduction] #app .practice-card h3{font-size:16px!important;line-height:1.45;margin:6px 0;color:#fff7df}
html[data-game=deduction] #app .practice-card p{font-size:14px!important;line-height:1.5;margin:0 0 8px;color:#c4dcd9}
html[data-game=deduction] #app .practice-card button{width:100%;min-height:36px;padding:5px 7px;font-size:14px!important;line-height:1.4;background:#31546b;border:1px solid #789baa80;border-radius:7px;margin:0}
html[data-game=deduction] #app .objective-toggle{min-height:42px;padding:8px 10px}
html[data-game=deduction] #app .objective-toggle>b{white-space:normal}
html[data-game=deduction] #app .objective-next{font-size:14px!important;padding:8px 11px;line-height:1.5}
html[data-game=deduction] #app .ship-task-lines{max-height:230px;overflow:auto;overscroll-behavior:contain}
html[data-game=deduction] #app .ship-task-lines>button{min-height:46px;padding:6px}
html[data-game=deduction] #app .ship-task-lines>button>span:last-child{display:grid;gap:2px;min-width:0}
html[data-game=deduction] #app #ship-mini-map{top:64px;right:12px}
html[data-game=deduction] #app .mini-map{width:112px;padding:6px}
html[data-game=deduction] #app .ship-location{left:50%;bottom:14px!important;max-width:270px;width:max-content;gap:4px}
html[data-game=deduction] #app .ship-location strong{display:block!important;font-size:15px!important;letter-spacing:.04em}
html[data-game=deduction] #app .ship-location>span{font-size:12px!important;padding:3px 8px;white-space:normal}
html[data-game=deduction] #app .joystick{left:max(22px,env(safe-area-inset-left));bottom:max(70px,calc(env(safe-area-inset-bottom) + 52px));width:112px;height:112px;opacity:.95}
html[data-game=deduction] #app .joystick>small{font-size:14px!important;bottom:-22px}
html[data-game=deduction] #app .ship-actions{right:18px;bottom:max(73px,calc(env(safe-area-inset-bottom) + 55px));max-width:184px;display:grid;grid-template-columns:76px 82px;align-items:end;gap:14px 10px}
html[data-game=deduction] #app .ship-actions>.ship-control{width:76px;min-width:0;min-height:0;gap:5px}
html[data-game=deduction] #app .ship-actions>.ship-control.control-main{width:82px;order:10;grid-column:2}
html[data-game=deduction] #app .ship-actions>.control-report{order:9}
html[data-game=deduction] #app .ship-actions>.ship-control.control-eliminate{order:8;grid-column:auto}
html[data-game=deduction] #app .ship-control .control-disc{width:58px;height:58px}
html[data-game=deduction] #app .ship-control.control-main .control-disc{width:72px;height:72px}
html[data-game=deduction] #app .ship-control>b{font-size:14px!important;line-height:1.3}
html[data-game=deduction] #app .ship-control>small{display:none!important}
html[data-game=deduction] #app .ship-control:disabled{opacity:.48}
html[data-game=deduction] #app .ship-control:not(:disabled) .control-disc{box-shadow:0 0 0 3px #ffd97533,0 6px 18px #0005}
html[data-game=deduction] #app .ship-control.control-main:not(:disabled) .control-disc{border-color:#fff5cd;background:radial-gradient(circle at 35% 24%,#fff0b9,#dfb54c);color:#283e44}
html[data-game=deduction] #app .ship-control.control-main.control-danger:not(:disabled) .control-disc{border-color:#ffd8d8;background:radial-gradient(circle at 35% 24%,#eb9d9d,#ae4f67);color:#fff}
html[data-game=deduction] #app .ship-objective:has(.ship-emergency-note) .objective-next{display:none}
html[data-game=deduction] #app .voyage-cinematic .cinematic-actor{max-height:300px}
html[data-game=deduction] #app .cinematic-person-name small{display:none}
html[data-game=deduction] #app .cinematic-team{font-size:14px!important}
@media(orientation:portrait){
 html[data-game=deduction] #app .voyage-cinematic.role-reveal{padding:14px 22px 20px;gap:12px}
 html[data-game=deduction] #app .cinematic-actor{height:26vh;min-height:150px;max-height:220px;flex:0 0 auto}
 html[data-game=deduction] #app .cinematic-copy h1{font-size:34px;margin:8px 0}
 html[data-game=deduction] #app .cinematic-description{margin:12px 0;font-size:15px;line-height:1.65}
 html[data-game=deduction] #app .cinematic-mission{padding:12px;gap:5px}
}
@media(orientation:portrait) and (max-height:700px){
 html[data-game=deduction] #app .cinematic-actor{height:140px;min-height:140px}
 html[data-game=deduction] #app .cinematic-kicker{display:none}
 html[data-game=deduction] #app .cinematic-description{margin:8px 0}
 html[data-game=deduction] #app .ship-objective{top:60px;max-width:calc(100% - 146px)}
 html[data-game=deduction] #app .practice-card{padding:8px}
 html[data-game=deduction] #app .practice-card p{display:none}
 html[data-game=deduction] #app .practice-card h3{font-size:15px!important}
 html[data-game=deduction] #app .ship-emergency-note{padding:7px 8px}
 html[data-game=deduction] #app .ship-emergency-note>b{margin-bottom:3px;line-height:1.35}
 html[data-game=deduction] #app .ship-emergency-note>small{line-height:1.4}
 html[data-game=deduction] #app .objective-toggle>b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 html[data-game=deduction] #app .ship-actions{gap:8px}
}
@media(orientation:landscape) and (max-height:550px){
 html[data-game=deduction] #app .ship-objective{top:58px;max-width:255px;width:31%}
 html[data-game=deduction] #app .practice-card{padding:8px 10px}
 html[data-game=deduction] #app .practice-card h3{margin:5px 0;font-size:15px!important}
 html[data-game=deduction] #app .practice-card p{display:none}
 html[data-game=deduction] #app .practice-card button{min-height:34px}
 html[data-game=deduction] #app .ship-task-lines{max-height:100px}
 html[data-game=deduction] #app .joystick{width:102px;height:102px;bottom:32px}
 html[data-game=deduction] #app .ship-actions{display:flex;flex-wrap:nowrap;gap:10px;bottom:30px;right:20px;max-width:58%}
 html[data-game=deduction] #app .ship-actions>.ship-control{width:62px;flex:0 0 62px}
 html[data-game=deduction] #app .ship-actions>.ship-control.control-main{width:72px;flex-basis:72px}
 html[data-game=deduction] #app .ship-control .control-disc{width:50px;height:50px}
 html[data-game=deduction] #app .ship-control.control-main .control-disc{width:62px;height:62px}
 html[data-game=deduction] #app .ship-location{bottom:8px!important}
 html[data-game=deduction] #app .ship-location>span{display:none}
 html[data-game=deduction] #app #ship-mini-map{top:58px}
 html[data-game=deduction] #app .voyage-cinematic.role-reveal{grid-template-columns:minmax(140px,.6fr) minmax(310px,1fr);gap:20px;padding:12px 24px}
 html[data-game=deduction] #app .cinematic-actor{min-height:180px}
 html[data-game=deduction] #app .cinematic-copy h1{font-size:30px;margin:4px 0}
 html[data-game=deduction] #app .cinematic-kicker{display:none}
 html[data-game=deduction] #app .cinematic-description{font-size:14px;line-height:1.5;margin:8px 0}
 html[data-game=deduction] #app .cinematic-mission{padding:7px 10px;gap:3px}
 html[data-game=deduction] #app .cinematic-mission small{display:none}
}

/* The result keeps the outcome and next action visible while details scroll. */
#app .mj-result-layer .round-result{align-items:stretch!important}
.mj-result-summary,.mj-result-body,.mj-result-footer{width:100%;box-sizing:border-box}
.mj-settlement-labels>span{font-size:12px!important;white-space:nowrap}
#app .mj-result-layer:not(:empty){padding:10px;overflow:hidden}
#app .mj-result-layer .round-result{display:flex!important;flex-direction:column;gap:0;padding:0!important;width:min(860px,100%)!important;max-height:100%;min-height:0;overflow:hidden;margin:auto;grid-template-areas:none!important}
.mj-result-summary{flex:0 0 auto;padding:12px 16px 10px;border-bottom:1px solid #afbf8c35}
#app .mj-result-summary .mj-personal-result{margin:-12px -16px 10px;border-radius:0;padding:12px 16px;gap:10px}
#app .mj-result-summary .mj-personal-result span{font-size:17px!important}
#app .mj-result-summary .mj-personal-result strong{font-size:27px!important}
#app .mj-result-layer .round-result-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;grid-area:auto!important}
#app .mj-result-layer .round-result-heading h2{font-size:24px!important;line-height:1.3;margin:3px 0 0}
#app .mj-result-layer .round-result-heading>strong{font-size:24px!important;text-align:right;min-width:0}
#app .mj-result-layer .round-result-heading>strong>small{font-size:14px!important}
#app .mj-result-layer .round-result-heading .score-bonus{display:block;max-width:350px;font-size:12px!important;line-height:1.5;margin-top:4px}
.mj-result-body{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto;padding:14px 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;scrollbar-width:thin;scrollbar-color:#b3c4a0 #102c31}
.mj-result-hand,.mj-result-scores{min-width:0}
#app .mj-result-layer .round-result .winner-name{grid-area:auto!important;margin:0 0 10px;font-size:16px!important;overflow-wrap:anywhere;line-height:1.5}
#app .mj-result-layer .round-result .winner-name small{font-size:13px!important}
#app .mj-result-layer .round-result .winning-hand{grid-area:auto!important;gap:3px;padding:10px 6px;margin-bottom:10px}
#app .mj-result-layer .round-result .winning-hand>.tile{flex:0 0 30px;width:30px!important;height:42px!important}
#app .mj-result-layer .round-result .result-yaku{grid-area:auto!important;gap:6px;margin-bottom:10px}
#app .mj-result-layer .round-result .result-yaku>span{font-size:15px!important;padding:6px 9px}
#app .mj-result-layer .round-result .result-total{grid-area:auto!important;font-size:14px!important;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mj-settlement-labels,#app .mj-result-layer .round-result .settlement>div{display:grid;grid-template-columns:minmax(0,1fr) 82px 82px;gap:8px;align-items:center}
.mj-settlement-labels{padding:0 9px 6px;font-size:12px;color:#bdd2c8}
.mj-settlement-labels span:not(:first-child){text-align:right}
#app .mj-result-layer .round-result .settlement{grid-area:auto!important;margin:0;display:grid;gap:7px;height:auto;align-content:start}
#app .mj-result-layer .round-result .settlement>div{min-height:48px;padding:9px;font-size:14px!important}
#app .mj-result-layer .round-result .settlement>div>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .mj-result-layer .round-result .settlement b{font-size:19px!important;text-align:right;white-space:nowrap;min-width:0}
#app .mj-result-layer .round-result .settlement small{font-size:14px!important;text-align:right;white-space:nowrap;min-width:0}
.mj-result-footer{flex:0 0 auto;padding:10px 16px max(10px,env(safe-area-inset-bottom));border-top:1px solid #afbf8c35;background:#163933}
#app .mj-result-layer .round-result .mj-result-footer .primary{display:block;width:100%;min-height:48px;margin:0;font-size:16px!important}
.mj-result-footer>.quiet{text-align:center;margin:4px 0;font-size:14px;line-height:1.5}
@media(max-width:380px){
 .mj-result-body{padding:12px 10px}.mj-result-summary{padding-left:10px;padding-right:10px}
 #app .mj-result-summary .mj-personal-result{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
 .mj-settlement-labels,#app .mj-result-layer .round-result .settlement>div{grid-template-columns:minmax(0,1fr) 74px 74px;gap:5px}
 #app .mj-result-layer .round-result .settlement b{font-size:17px!important}
 #app .mj-result-layer .round-result-heading h2,#app .mj-result-layer .round-result-heading>strong{font-size:21px!important}
}
@media(min-width:650px){.mj-result-body{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
@media(orientation:landscape) and (max-height:550px){
 .mj-result-summary{padding:7px 12px;display:flex;gap:14px;align-items:center;justify-content:space-between}
 #app .mj-result-summary .mj-personal-result{margin:0;padding:6px 10px;border:1px solid #a0c7a144;border-radius:8px;min-width:220px;flex:0 0 auto}
 #app .mj-result-summary .mj-personal-result span{font-size:14px!important}
 #app .mj-result-summary .mj-personal-result strong{font-size:23px!important}
 #app .mj-result-layer .round-result-heading{flex:1}
 #app .mj-result-layer .round-result-heading h2,#app .mj-result-layer .round-result-heading>strong{font-size:20px!important}
 #app .mj-result-layer .round-result-heading>div>small{font-size:12px!important}
 #app .mj-result-layer .round-result-heading .score-bonus{font-size:11px!important;margin-top:0}
 .mj-result-body{padding:9px 12px;gap:12px}
 .mj-result-footer{padding:6px 12px}
 #app .mj-result-layer .round-result .mj-result-footer .primary{min-height:42px}
 #app .mj-result-layer .round-result .winning-hand>.tile{width:26px!important;height:36px!important;flex-basis:26px}
 #app .mj-result-layer .round-result .settlement>div{min-height:38px;padding:6px;font-size:13px!important}
 #app .mj-result-layer .round-result .settlement b{font-size:17px!important}
 .mj-settlement-labels,#app .mj-result-layer .round-result .settlement>div{grid-template-columns:minmax(0,1fr) 70px 70px;gap:5px}
 .mj-settlement-labels{padding-left:6px;padding-right:6px}
}

/* Star-lit mahjong: deliberate selection, readable recent discard and stronger declarations. */
#app .mj-v4{background:radial-gradient(ellipse at 50% 38%,#204b43,#0d252c 76%)}
#app .mj-player{border-radius:13px!important;background:#153532ed!important;border:1px solid #93bcaa50!important;box-shadow:0 3px 12px #00191c35!important}
#app .mj-player.active{border-color:#f0d28c!important;background:#36554a!important;box-shadow:0 0 0 2px #e7c56f28,0 4px 18px #081e2855!important}
#app .mj-player.self{border-color:#ccb774a0!important}.mj-player .mj-wind{background:#ffffff10;border-radius:7px;padding:4px 6px;color:#e0c990}
#app .mj-hand-panel{background:linear-gradient(#245347,#153c38)!important;border-top:1px solid #dbcb8f99!important;box-shadow:0 -5px 28px #00171744;position:relative;z-index:6}
#app .mj-hand-row .hand-tile.selected .tile{outline:2px solid #f5d78e;box-shadow:0 3px #bd9c58,0 5px #346554,0 7px 8px #001b2088;filter:brightness(1.07)}
#app .mj-hand-row .hand-tile.is-drawing{animation:mj-tile-arrives .36s cubic-bezier(.18,.82,.3,1) both}@keyframes mj-tile-arrives{from{transform:translateY(-22px) rotate(6deg);opacity:.3}to{transform:translateY(0) rotate(0);opacity:1}}
#app .mj-confirm{background:linear-gradient(#ffe6a1,#d9b66c)!important;color:#173a35!important;border:1px solid #faeac2!important;border-radius:12px!important;box-shadow:0 3px #9e814b;font-weight:800}
#app .mj-magnifier{position:absolute;z-index:8;pointer-events:none;display:grid;justify-items:center;gap:4px;padding:7px 9px;background:#123936f5;border:1px solid #e7d59b;border-radius:12px;box-shadow:0 5px 20px #00181788;transform:translateX(-50%);min-width:65px;box-sizing:border-box}
#app .mj-magnifier[hidden]{display:none}#app .mj-magnifier>.tile{width:43px!important;height:61px!important;box-shadow:0 2px #9d9d7c,0 4px #34866a}#app .mj-magnifier>small{font-size:11px;color:#fff1bf;white-space:nowrap}
#app .mj-magnifier:after{content:'';position:absolute;top:100%;border:7px solid transparent;border-top-color:#e7d59b}
#app .mj-selection-preview>span{font-size:14px!important}.mj-last-discard.recent{animation:mj-recent .4s ease-out}@keyframes mj-recent{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
#app .mj-event-card{gap:8px;padding:23px 24px;width:min(600px,calc(100vw - 24px))}.mj-event-card:before{background:linear-gradient(100deg,transparent,#092d31f5 17%,#255b4ff8 50%,#092d31f5 83%,transparent);border-block:2px solid #d8c180aa;box-shadow:0 10px 65px #001b28aa}
#app .mj-event strong{font-size:clamp(66px,18vw,115px)!important;letter-spacing:.16em;color:#fff1bf;text-shadow:0 4px #735423,0 0 40px #ebd59c88;font-weight:900}
#app .mj-event .mj-declaration-head{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;letter-spacing:.08em;color:#f2e8cb}.mj-declaration-head i{font-style:normal;border-radius:50%;display:grid;place-content:center;width:34px;height:34px;background:#dfca93;color:#204336;font-size:19px;font-weight:800}
#app .mj-event[data-kind=riichi] .mj-event-card:before{background:linear-gradient(100deg,transparent,#4d2538f8 17%,#8a3947f8 50%,#4d2538f8 83%,transparent);border-color:#eecb8e}
#app .mj-event[data-kind=riichi].show strong{animation:mj-riichi-stamp .5s cubic-bezier(.1,.8,.2,1) both}
#app .mj-event[data-kind=deal-in] .mj-event-card:before{background:linear-gradient(100deg,transparent,#20253cf8 17%,#4b2d45f8 50%,#20253cf8 83%,transparent);border-color:#d1a9b0}
#app .mj-event[data-kind=deal-in] strong{color:#f8c6bd;text-shadow:0 4px #693543}.mj-event-card .mj-declaration-tile{position:absolute;right:6%;top:50%;transform:translateY(-50%) rotate(9deg);opacity:.35;z-index:-1}.mj-declaration-tile>.tile{width:65px!important;height:91px!important}
#app .mj-event[data-kind=call] .mj-event-card{width:280px;padding:16px 24px}#app .mj-event[data-kind=call] strong{font-size:56px!important}
@keyframes mj-riichi-stamp{0%{transform:scale(1.6) rotate(-5deg);opacity:0}70%{transform:scale(.97) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
@media(min-height:740px) and (max-width:600px) and (orientation:portrait){#app .mj-last-discard:not(:empty){display:flex!important;visibility:visible!important;position:absolute;left:50%!important;top:78px!important;bottom:auto!important;transform:translateX(-50%);width:auto!important;min-width:150px;padding:6px 11px;background:#163b35ed;border:1px solid #b7c7a24d;border-radius:12px;gap:10px;z-index:3;pointer-events:none}#app .mj-last-discard>.tile{width:30px!important;height:42px!important}.mj-last-discard span{display:grid;gap:1px}.mj-last-discard small{font-size:10px!important}.mj-last-discard b{font-size:13px!important}.mj-last-discard em{font-size:11px!important;font-style:normal}}
@media(orientation:landscape) and (max-height:550px){#app .mj-event-card{padding:15px 25px;gap:4px}#app .mj-event strong{font-size:68px!important}#app .mj-event .mj-declaration-head,#app .mj-event em{font-size:14px!important}#app .mj-event b{font-size:27px!important}.mj-declaration-head i{width:26px;height:26px;font-size:15px}#app .mj-magnifier>.tile{width:36px!important;height:51px!important}#app .mj-magnifier{padding:5px 7px;min-width:55px}}
/* Voyage: the objective is a compact navigator, not a curtain over the ship. */
html[data-game=deduction] #app .ship-objective{border:1px solid #8bb9c444;box-shadow:0 4px 15px #020f2944;border-radius:15px;background:#102d43e8;overflow:hidden}
html[data-game=deduction] #app .practice-card{padding:9px 10px;position:relative;padding-right:39px}
html[data-game=deduction] #app .practice-card>small{font-size:11px!important;color:#8cd8dc;letter-spacing:.03em}
html[data-game=deduction] #app .practice-card h3{font-size:14px!important;line-height:1.45;margin:4px 0 2px}
html[data-game=deduction] #app .practice-card p{font-size:11px!important;margin:0;line-height:1.4}
html[data-game=deduction] #app .practice-card button{position:absolute;right:6px;top:9px;width:29px;min-height:29px;height:29px;border-radius:50%;font-size:15px!important;padding:0;background:#31566d;border:1px solid #c1dfe766}
.voyage-route{display:flex!important;align-items:center;gap:9px;padding:9px 10px!important;width:100%;text-align:left;color:#f4e8b4;background:transparent;border:0;border-top:1px solid #83aabb33;border-radius:0!important;min-height:48px!important}
.voyage-route svg{width:28px;height:28px;flex:0 0 28px;fill:none;stroke:#f2d27e;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.voyage-route>span{display:grid;gap:2px;min-width:0}.voyage-route b{font-size:12px;line-height:1.3}.voyage-route small{font-size:10px;color:#b6d0d5;line-height:1.3}.voyage-route.is-near{background:#3562577a}
html[data-game=deduction] #app .mini-map{border-radius:14px;border:1px solid #83b1bc66;background:#17364adf;box-shadow:0 4px 18px #001c3344}.mini-map .map-route{stroke:#ffe29a;stroke-width:5;fill:none;stroke-linejoin:round;stroke-linecap:round;opacity:.9}.mini-map .map-me{fill:#b9ffea}
html[data-game=deduction] #app .ship-control .control-disc{background:linear-gradient(145deg,#536f80e6,#294758e6);border:2px solid #bedbe49c;box-shadow:0 4px 0 #10273c99,0 7px 20px #00132755}
html[data-game=deduction] #app .ship-control:not(:disabled).control-main .control-disc{background:linear-gradient(145deg,#e2cf8c,#aaa568);border-color:#fff0c2;color:#203e42;box-shadow:0 4px #746c4b,0 0 25px #e5d79a33}
html[data-game=deduction] #app .ship-control.control-danger:not(:disabled) .control-disc{background:linear-gradient(145deg,#a65d6e,#723d56);border-color:#f3bbc2;color:#ffe9d7}
html[data-game=deduction] #app .ship-control:disabled .control-disc{opacity:.55;filter:none}.ship-control b{letter-spacing:.03em}.ship-task-feedback{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:#163a4df2;color:#f8e4ac;border:1px solid #e9d489;border-radius:18px;box-shadow:0 10px 35px #00142788;padding:15px 25px;text-align:center;z-index:12;pointer-events:none;animation:task-achieved .35s ease-out}.ship-task-feedback strong{display:block;font-size:24px}.ship-task-feedback small{display:block;font-size:13px;margin-top:5px;color:#c7e6df}@keyframes task-achieved{from{opacity:0;transform:translate(-50%,-40%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:600px) and (orientation:portrait){html[data-game=deduction] #app .ship-objective{width:232px;max-width:calc(100% - 130px)}html[data-game=deduction] #app .practice-card h3{font-size:13px!important}.voyage-route{gap:6px}.voyage-route b{font-size:11px}.voyage-route svg{width:24px;height:24px;flex-basis:24px}html[data-game=deduction] #app .objective-toggle{font-size:12px!important;min-height:36px}.objective-next{display:none}}
@media(orientation:landscape) and (max-height:550px){html[data-game=deduction] #app .practice-card p{display:none}html[data-game=deduction] #app .practice-card{padding-block:7px}html[data-game=deduction] #app .voyage-route{min-height:40px!important;padding-block:6px!important}html[data-game=deduction] #app .ship-objective{width:225px!important}.ship-task-feedback{top:45%;padding:10px 20px}.ship-task-feedback strong{font-size:20px}}
html[data-reduce='1'] :is(.mj-event *, .mj-magnifier,.ship-task-feedback,.hand-tile.is-drawing,.mj-last-discard){animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.mj-event *,.ship-task-feedback,.hand-tile.is-drawing,.mj-last-discard{animation:none!important;transition:none!important}}

html[data-game=deduction] #app .practice-card p{display:none!important}
html[data-game=deduction] #app .practice-card{padding-top:8px;padding-bottom:8px}
html[data-game=deduction] #app .voyage-route{min-height:44px!important;padding:7px 10px!important;gap:7px}
html[data-game=deduction] #app .voyage-route b{font-size:12px!important;line-height:1.35!important;font-weight:700}
html[data-game=deduction] #app .voyage-route small{display:block;font-size:11px!important;line-height:1.4!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html[data-game=deduction] #app .voyage-route>span{min-width:0;overflow:hidden}
html[data-game=deduction] #app .voyage-route svg{width:24px!important;height:24px!important;flex-basis:24px}

/* Overnight candidate: stable hand area and player-controlled assistance. */
#app .mj-play-controls{flex:0 0 auto;z-index:7;background:#163b35;border-top:1px solid #a6bd9747;padding:0 10px;color:#edf1dc}
#app .mj-play-controls[hidden]{display:none}
#app .mj-play-switches{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px}
#app .mj-play-switches button{min-height:44px;padding:5px 7px;display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.2;border:0;border-radius:7px;background:transparent;color:#c4d9cb;white-space:nowrap}
#app .mj-play-switches button i{display:inline-block;width:10px;height:10px;flex:0 0 10px;border:1px solid #7b9e8b;border-radius:50%;background:#071e22}
#app .mj-play-switches button[aria-pressed=true]{color:#ffe8ac;background:#46624a;box-shadow:inset 0 0 0 1px #d4c58d66}
#app .mj-play-switches button[aria-pressed=true] i{background:#f8d786;border-color:#fff0bd;box-shadow:0 0 7px #f7dc7f55}
#app .mj-play-switches .mj-controls-help{font-size:12px;color:#e5d8af}
#app .mj-controls-help span{display:grid;place-items:center;border:1px solid #a5bb9f;border-radius:50%;width:18px;height:18px}
#app .mj-live-lesson{display:flex;align-items:flex-start;gap:8px;border-top:1px solid #849f7b55;padding:8px 0 10px}
#app .mj-live-lesson>div{flex:1;min-width:0}
#app .mj-live-lesson b{font-size:14px;color:#fbe3ab}
#app .mj-live-lesson p{font-size:13px;line-height:1.6;margin:3px 0 0;color:#d8e5d8}
#app .mj-live-lesson button{width:36px;min-height:40px;padding:0;flex:0 0 36px;background:#ffffff09;border:0;color:#d6e1d1;font-size:23px}
#app .mj-hand-panel{border-top:1px solid #8da37c44!important;box-shadow:none}
#app .mj-hand-bottom{min-height:50px!important}
#app .mj-hand-bottom:not(:has(.mj-actions button)):not(:has(.mj-selection-preview)){min-height:50px!important}
#app .mj-selection-preview{min-width:0}
#app .mj-selection-preview>.tile{display:none}
#app .mj-selection-preview>span{font-size:14px!important}
#app .mj-selection-preview>span>small{display:block!important;color:#bacdbb;font-size:11px;margin-top:2px}
#app .mj-hand-row .hand-tile{transition:transform .12s ease-out}
#app .mj-hand-row .hand-tile:focus-visible{outline:2px solid #ffe7aa;outline-offset:3px;border-radius:3px}
#app .mj-throw-ready .mj-magnifier{border-color:#fff3bf;box-shadow:0 0 0 3px #d5d79544,0 8px 30px #00181788}
#app .mj-throw-ready .mj-magnifier:before{content:'離して打牌 ↑';position:absolute;bottom:calc(100% + 7px);padding:6px 10px;border-radius:8px;background:#f2dda1;color:#193f34;white-space:nowrap;font-size:13px;font-weight:800}
#app .mj-result-layer .winning-hand{flex-wrap:nowrap!important;gap:2px!important;overflow-x:auto;justify-content:flex-start!important;padding:10px 5px 14px;scrollbar-width:thin}
#app .mj-result-layer .winning-hand>.tile{width:clamp(20px,calc((100vw - 101px)/14),35px)!important;height:auto!important;aspect-ratio:5/7;flex-shrink:0}
#app .mj-hand-tip{font-size:12px!important}
@media(max-width:600px) and (orientation:portrait){
 #app .mj-hand-panel{padding-left:6px;padding-right:6px}
 #app .mj-v4{--tile-w:calc((100vw - 44px)/14)}
 #app .mj-player-bottom{bottom:5px!important}
 #app .mj-table-tools{display:none}
 #app .mj-chat-open{left:134px!important;width:84px;gap:4px;font-size:12px;min-height:40px}
 #app .mj-chat-open svg{width:19px;height:19px}
 #app .mj-chat-open>span{display:inline;font-size:11px}
 #app .mj-last-discard:not(:empty){top:76px!important}
}
@media(orientation:landscape) and (max-height:550px){
 #app .mj-play-controls{position:absolute;left:8px;bottom:calc(var(--mj-panel-height,100px) + 4px);width:116px;padding:0;background:transparent;border:0}
 #app .mj-play-switches{display:grid;gap:3px}
 #app .mj-play-switches button{font-size:12px;min-height:33px;padding:4px 6px}
 #app .mj-live-lesson{display:none}
 #app .mj-table-tools{display:none}
 #app .mj-player-right{left:auto!important;right:8px!important;top:58px!important}
 #app .mj-hand-panel{position:static!important;padding-top:5px!important}
 #app .mj-hand-bottom{min-height:43px!important}
 #app .mj-hand-bottom:not(:has(.mj-actions button)):not(:has(.mj-selection-preview)){min-height:43px!important}
 #app .mj-hand-status{top:116px!important}
 #app .mj-dora{top:174px!important}
 #app .mj-hand-row.hand{height:calc(var(--tile-w)*1.45 + 8px)!important}
 #app .mj-selection-preview{height:38px!important}
 #app .mj-chat-open{left:auto!important;right:8px!important;min-height:34px;height:34px;bottom:calc(var(--mj-panel-height,100px) + 5px)!important}
 #app .mj-chat-preview{bottom:calc(var(--mj-panel-height,100px) + 45px)!important}
}
@media(prefers-reduced-motion:reduce){#app .mj-hand-row .hand-tile{transition:none}}
html[data-reduce='1'] #app .mj-hand-row .hand-tile{transition:none}

#app .mj-dora{bottom:calc(var(--mj-panel-height,120px) + 5px)!important;top:auto!important}
@media(max-width:600px) and (orientation:portrait){
 #app .mj-canvas{inset:132px 0 45px!important;height:calc(100% - 177px)!important}
 #app .mj-use-fallback .mj-fallback{inset:132px 6px 45px!important}
}
@media(orientation:landscape) and (max-height:550px){
 #app .mj-dora{bottom:10px!important;top:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%);height:29px;width:auto;max-width:none;gap:7px}
 #app .mj-dora>span{display:block!important;font-size:11px!important;width:auto;white-space:nowrap}
 #app .mj-dora:before{display:none}
 #app .mj-dora .tile.small{width:18px!important;height:25px!important}
}

@media(max-width:600px) and (max-height:739px) and (orientation:portrait){
 #app .mj-canvas{inset:70px 0 45px!important;height:calc(100% - 115px)!important}
 #app .mj-use-fallback .mj-fallback{inset:70px 6px 45px!important}
 #app .mj-live-lesson{padding:5px 0 7px}
 #app .mj-live-lesson b{display:none}
 #app .mj-live-lesson p{font-size:12px;line-height:1.4;margin:0}
}

/* Distinct ship instruments; native controls remain available for keyboard and touch. */
.task-stage .task-check{min-height:22px;font-size:14px;line-height:1.5;margin:12px 0 0;color:#b5c9d6}
.task-stage.is-matched{border-color:#9ce5ba;box-shadow:inset 0 0 25px #4bbd7e22,0 0 20px #4bbd7e18}
.task-stage.is-matched .task-check{color:#bff5cc}.task-stage .task-submit{margin-top:10px}
.valve-wheel{width:120px;margin:4px auto 12px;position:relative;touch-action:none;cursor:grab;outline-offset:5px}
.valve-wheel svg{display:block;width:120px;height:120px;transform:rotate(var(--angle,-135deg));filter:drop-shadow(0 5px 2px #041825);transition:transform .07s}
.valve-wheel svg circle,.valve-wheel svg path{fill:none;stroke:#b6c9ca;stroke-width:9;stroke-linecap:round}.valve-wheel svg .wheel-hub{fill:#28495b;stroke:#92b4bd;stroke-width:5}.valve-wheel svg .wheel-mark{fill:#edc780;stroke:#4e4331;stroke-width:2}
.valve-wheel span{display:block;text-align:center;font-size:12px;color:#b0cbd3;margin-top:4px}.valve-wheel:active{cursor:grabbing}
.task-stage.pressure .gauge{max-width:230px;margin:0 auto}.task-stage.pressure .gauge svg{max-height:120px}.task-stage.pressure>p{margin:8px 0}
.task-stage [hidden]{display:none!important}
.memory-signals{border:1px solid #5c869d;border-radius:10px;padding:18px 10px;background:#071b2d}.memory-signals b{display:block;text-align:center;color:#b0cedf;font-size:13px;margin-top:12px;min-height:20px}
.memory-lamps{display:flex;gap:12px;justify-content:center}.memory-lamps i{display:grid;place-items:center;width:44px;height:44px;border:2px solid #45637a;border-radius:50%;color:#809cb2;font-style:normal;background:#1d3547;transition:background .1s,box-shadow .1s}
.memory-lamps i.lit{background:#f5d58a;border-color:#fff4c6;color:#40341a;box-shadow:0 0 25px #ffe096b3}.memory-replay{min-height:40px;margin-top:10px}
.cargo-drag .task-buttons button{touch-action:none}.cargo-drag #task-slots i:not(.filled):first-child,.cargo-drag.is-dragging #task-slots i:not(.filled){border-style:dashed;border-color:#dccea3}
.cargo-drag-ghost{position:fixed;z-index:99999;pointer-events:none;transform:translate(-50%,-50%) rotate(-5deg);border:2px solid #fff0c3;border-radius:9px;background:#ead5a5;color:#263e48;font-size:20px;box-shadow:0 12px 25px #0008;opacity:.9}
.task-stage .chart-nodes{position:relative;display:block;height:190px;margin:14px 0;background:radial-gradient(circle at 70% 30%,#24426e,#08182b 75%);border:1px solid #547893;border-radius:12px;overflow:hidden}
.chart-links{position:absolute;inset:0;width:100%;height:100%}.chart-grid{fill:none;stroke:#8aaedb1a;stroke-width:1}.chart-line{fill:none;stroke:#dfc08a;stroke-width:2;stroke-dasharray:6 4}
.task-stage .chart-nodes button{position:absolute;min-height:44px;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 15px #a3c9ff40;background:#1d3859;z-index:1}
.chart-nodes button:nth-of-type(1){left:15%;top:65%}.chart-nodes button:nth-of-type(2){left:36%;top:25%}.chart-nodes button:nth-of-type(3){left:63%;top:70%}.chart-nodes button:nth-of-type(4){left:84%;top:28%}
.task-stage .chart-nodes button:active{transform:translate(-50%,-50%) scale(.94)}.sample-tray .task-buttons button{border-radius:50%;box-shadow:inset 0 0 0 6px #afcedb24,0 4px 0 #081b29;min-height:66px}
@media(max-height:600px){.task-stage.pressure .gauge{max-width:180px}.valve-wheel{width:92px}.valve-wheel svg{width:92px;height:92px}.task-stage{padding:12px}.memory-signals{padding:12px}.task-stage .chart-nodes{height:150px}}

/* Keep the emergency timer beside its title, and the movement pad uncovered. */
html[data-game=deduction] #app .ship-emergency-note{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:start}
html[data-game=deduction] #app .ship-emergency-note>b{grid-column:1;margin:0;line-height:1.4}
html[data-game=deduction] #app .ship-emergency-note>strong{position:static;grid-column:2;grid-row:1;font-size:14px;line-height:1.4;white-space:nowrap}
html[data-game=deduction] #app .ship-emergency-note>small{grid-column:1/-1;line-height:1.4}
@media(orientation:landscape) and (max-height:550px){
 html[data-game=deduction] #app .ship-objective{width:255px!important;gap:0;max-height:calc(100dvh - 208px);overflow:auto;overscroll-behavior:contain;pointer-events:auto}
 html[data-game=deduction] #app .ship-emergency-note{padding:7px 10px}
}

.lobby-wait-exit{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;z-index:2}.lobby-wait-exit button{flex:1;min-height:48px;min-width:160px}.game-header>[data-a=back]{flex-shrink:0;min-height:44px}@media(max-width:480px){.game-header .wordmark{display:none}}