/* Personal presentation. Shared game surfaces keep their semantic marks and artwork. */
:root,[data-appearance=garden],[data-appearance=emoji]{--look-bg:#fff8e5;--look-panel:#fffdf6;--look-ink:#293f3b;--look-muted:#52655c;--look-line:#d9dfcf;--look-accent:#b84326;--look-on-accent:#fffdf6;--look-soft:#e2f1f4;--look-stage:#fffdf6;--look-radius:20px;--look-pattern:radial-gradient(ellipse at 80% 0%,#e2f1f4 0,transparent 60%);--look-play:#294c47;--look-font:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;--look-display:"Hiragino Kaku Gothic ProN",system-ui,sans-serif;--look-button-radius:12px;--look-border:1px;--look-shadow:none}
[data-appearance=manga]{--look-bg:#f1eddf;--look-panel:#fffdf6;--look-ink:#232630;--look-muted:#57575f;--look-line:#242834;--look-accent:#ba332d;--look-on-accent:#fffdf6;--look-soft:#ffe485;--look-stage:#fffdf6;--look-radius:6px;--look-pattern:radial-gradient(#2527351c 1px,transparent 1px);--look-play:#252735;--look-font:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;--look-display:"Hiragino Kaku Gothic ProN","Yu Gothic",Impact,sans-serif;--look-button-radius:3px;--look-border:2px;--look-shadow:3px 3px 0 #242834}
[data-appearance=orbit]{--look-bg:#0c1729;--look-panel:#16263c;--look-ink:#e9f7ff;--look-muted:#b0c6da;--look-line:#45657d;--look-accent:#88e5ea;--look-on-accent:#102d3e;--look-soft:#223c53;--look-stage:#f1f7fa;--look-radius:12px;--look-pattern:linear-gradient(#83dded09 1px,transparent 1px),linear-gradient(90deg,#83dded09 1px,transparent 1px);--look-play:#88e5ea;--look-font:"SFMono-Regular",Consolas,"Hiragino Kaku Gothic ProN",monospace;--look-display:"SFMono-Regular",Consolas,"Hiragino Kaku Gothic ProN",monospace;--look-button-radius:4px 12px 4px 12px;--look-border:1px;--look-shadow:inset 0 0 0 3px #88e5ea12}
[data-appearance=dark]{--look-bg:#1b1422;--look-panel:#302237;--look-ink:#f5e8f4;--look-muted:#cfb9d0;--look-line:#84648b;--look-accent:#d5b2ed;--look-on-accent:#2e173c;--look-soft:#48324f;--look-stage:#faf4f8;--look-radius:9px;--look-pattern:radial-gradient(ellipse at 90% 0%,#7b3e8745,transparent 65%);--look-play:#d5b2ed;--look-font:system-ui,"Yu Gothic",sans-serif;--look-display:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif;--look-button-radius:3px;--look-border:1px;--look-shadow:inset 0 0 0 3px #d5b2ed15}
[data-appearance=halloween]{--look-bg:#251b34;--look-panel:#35273f;--look-ink:#fff0da;--look-muted:#ddc4b1;--look-line:#8f6d87;--look-accent:#ffb866;--look-on-accent:#3e2536;--look-soft:#50334d;--look-stage:#fff8ee;--look-radius:26px;--look-pattern:radial-gradient(ellipse at 80% 0%,#bf642940,transparent 65%);--look-play:#ffb866;--look-font:"Hiragino Maru Gothic ProN",system-ui,sans-serif;--look-display:"Hiragino Maru Gothic ProN",Georgia,serif;--look-button-radius:16px 6px 16px 6px;--look-border:2px;--look-shadow:2px 3px 0 #0e091b}
[data-appearance=christmas]{--look-bg:#173b35;--look-panel:#234e45;--look-ink:#fff6e2;--look-muted:#c8ded0;--look-line:#628f7d;--look-accent:#f3d197;--look-on-accent:#3f3026;--look-soft:#326454;--look-stage:#fffcf3;--look-radius:18px;--look-pattern:radial-gradient(#f3d19724 1px,transparent 2px);--look-play:#9ad8c4;--look-font:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;--look-display:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif;--look-button-radius:8px;--look-border:1px;--look-shadow:inset 0 0 0 3px #f3d19718}


/* Approved v5 avatar modes. */
[data-appearance=pixel]{--look-bg:#e5efd3;--look-panel:#fffae7;--look-ink:#214331;--look-muted:#42613a;--look-line:#345f38;--look-accent:#c84c26;--look-on-accent:#fff8e3;--look-soft:#b9d2a0;--look-stage:#fffdf6;--look-radius:0px;--look-pattern:linear-gradient(90deg,#517a4010 1px,transparent 1px),linear-gradient(#517a4010 1px,transparent 1px);--look-play:#c84c26;--look-font:ui-monospace,"MS Gothic",monospace;--look-display:"Hiragino Kaku Gothic ProN",system-ui,sans-serif;--look-button-radius:0px;--look-border:2px;--look-shadow:3px 3px 0 #345f3850;}
[data-appearance=woodcut]{--look-bg:#f0e5ca;--look-panel:#f8efd9;--look-ink:#203e4a;--look-muted:#5e695b;--look-line:#87917f;--look-accent:#a8412c;--look-on-accent:#fff8e8;--look-soft:#e3d8bc;--look-stage:#fffdf6;--look-radius:2px;--look-pattern:linear-gradient(8deg,#805d3010 0px,transparent 1px,transparent 5px);--look-play:#a8412c;--look-font:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;--look-display:"Yu Mincho","Hiragino Mincho ProN",serif;--look-button-radius:2px;--look-border:1px;--look-shadow:none;}
[data-appearance=sf]{--look-bg:#0b1725;--look-panel:#102a3b;--look-ink:#ddfaff;--look-muted:#a9ccd5;--look-line:#397689;--look-accent:#7be8f5;--look-on-accent:#0c2431;--look-soft:#15384a;--look-stage:#fffdf6;--look-radius:5px;--look-pattern:linear-gradient(#67deed08 1px,transparent 1px),linear-gradient(90deg,#67deed08 1px,transparent 1px);--look-play:#7be8f5;--look-font:ui-monospace,system-ui,sans-serif;--look-display:"Hiragino Kaku Gothic ProN",system-ui,sans-serif;--look-button-radius:5px;--look-border:1px;--look-shadow:0 0 12px #64edfa19;}
[data-appearance=anime]{--look-bg:#eee8dc;--look-panel:#faf6eb;--look-ink:#222e39;--look-muted:#606768;--look-line:#a5a99e;--look-accent:#a44822;--look-on-accent:#fff9ef;--look-soft:#ded7c4;--look-stage:#fffdf6;--look-radius:4px;--look-pattern:linear-gradient(140deg,transparent 0px,transparent 90px,#34404b09 91px,#34404b09 94px,transparent 95px);--look-play:#a44822;--look-font:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;--look-display:"Hiragino Kaku Gothic ProN",system-ui,sans-serif;--look-button-radius:4px;--look-border:2px;--look-shadow:2px 3px 0 #26323b24;}
[data-appearance=halloween]{--look-bg:#34283e;--look-panel:#48354d;--look-ink:#ffefd9;--look-muted:#dfc7b6;--look-line:#987496;--look-accent:#ef9b3a;--look-on-accent:#322039;--look-soft:#59415f;--look-stage:#fffdf6;--look-radius:17px;--look-pattern:radial-gradient(#f6c77a17 2px,transparent 2px);--look-play:#ef9b3a;--look-font:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;--look-display:"Hiragino Kaku Gothic ProN",system-ui,sans-serif;--look-button-radius:17px;--look-border:2px;--look-shadow:none;}
[data-appearance=christmas]{--look-bg:#173d34;--look-panel:#234d40;--look-ink:#fbf3dd;--look-muted:#c4d9be;--look-line:#769c7a;--look-accent:#a92d2d;--look-on-accent:#fff8e9;--look-soft:#315c4b;--look-stage:#fffdf6;--look-radius:14px;--look-pattern:radial-gradient(#f8dcae2a 1px,transparent 1px);--look-play:#a92d2d;--look-font:system-ui,"Hiragino Kaku Gothic ProN",sans-serif;--look-display:"Hiragino Kaku Gothic ProN",system-ui,sans-serif;--look-button-radius:14px;--look-border:1px;--look-shadow:inset 0 0 0 2px #e3d3a420;}
[data-appearance=raw]{--look-bg:#fff;--look-panel:#fff;--look-ink:#111;--look-muted:#555;--look-line:#aaa;--look-accent:#0863ce;--look-on-accent:#fff;--look-soft:#f3f3f3;--look-stage:#fffdf6;--look-radius:0px;--look-pattern:none;--look-play:#0863ce;--look-font:Arial,system-ui,sans-serif;--look-display:"Hiragino Kaku Gothic ProN",system-ui,sans-serif;--look-button-radius:0px;--look-border:1px;--look-shadow:none;}

:root{font-family:Inter,"Hiragino Kaku Gothic ProN",system-ui,sans-serif;color:#20342d;background:#f7f8f2;--green:#214f41;--muted:#778078;--line:#dde2d8}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.48}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #de7b4c;outline-offset:4px}.shell{display:grid;grid-template-columns:226px minmax(0,1fr);min-height:100vh}.sidebar{border-right:1px solid var(--line);padding:40px 25px;display:flex;flex-direction:column;background:#eff2e9}.brand{font-size:49px;font-weight:800;letter-spacing:-4px}.brand-caption{font-size:8px;letter-spacing:1.5px;margin-top:10px}.nav{margin-top:63px}.nav-item{font-size:13px;padding:15px 12px;border-radius:7px;margin-bottom:10px}.selected{background:#dce7d9;color:var(--green);font-weight:700}.side-note{margin-top:auto;padding-top:110px;white-space:pre-line}.side-note p{font-size:19px;line-height:1.9;font-weight:600}.side-note small{color:var(--muted);line-height:1.9;font-size:11px}.main{padding:0 48px;max-width:1500px;width:100%;margin:auto}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:1.6px}.connection-state{color:#537d59;background:#e7eddf;padding:9px 12px;border-radius:20px;font-size:9px}.connection-state.offline{background:#f8ded1;color:#923c15}.connection-state.offline:after{content:" · 再接続中"}.hero{padding:54px 0 48px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700}.green{color:#4d7551}.hero h1{font-size:clamp(32px,3.4vw,52px);line-height:1.5;letter-spacing:-1.5px;margin:18px 0 20px;white-space:pre-line}.lead{white-space:pre-line;color:#758077;line-height:2;font-size:13px}.hero-art{position:relative;min-height:250px}.orbit{position:absolute;border:1px solid #d0d9ca;border-radius:50%;width:240px;height:170px;left:10%;top:30px;transform:rotate(-35deg)}.orbit-two{transform:rotate(40deg)}.art-disc{position:absolute;border-radius:50%;display:grid;place-items:center;box-shadow:0 14px 25px #203b2012}.disc-one{width:125px;height:125px;left:10%;top:5px;background:#e9bb67;font-size:76px;font-family:Georgia,serif;transform:rotate(-18deg)}.disc-two{width:103px;height:103px;right:12%;top:75px;background:#284f3d;color:#f0f0d8;font-size:48px;transform:rotate(15deg)}.disc-three{width:76px;height:76px;left:17%;top:145px;background:#e59578;font-size:47px;transform:rotate(10deg)}.art-caption{position:absolute;bottom:0;left:14%;font-size:8px;letter-spacing:2px;color:#929c8d}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.section-heading h2{font-size:19px}.section-heading span{font-size:9px;letter-spacing:1px}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.game-card{text-align:left;background:#fffef9;border:1px solid var(--line);border-radius:12px;padding:20px 15px 17px;color:inherit;transition:transform .15s,border-color .15s;min-width:0}.game-card:hover{transform:translateY(-4px)}.game-card.active{border-color:#355e42;box-shadow:0 0 0 1px #355e42}.game-icon{height:66px;width:100%;display:grid;place-items:center;font-size:39px;font-family:Georgia,serif;border-radius:8px;margin-bottom:20px;background:#e5e9d9;color:#537349}.game-wordwolf .game-icon{background:#e8e2f0;color:#706382}.game-quiz .game-icon{background:#f5e6c4;color:#a77b30}.game-mahjong .game-icon{background:#dce9e1;color:#285344}.game-yakyuken .game-icon{background:#f6e0d4;color:#b46a42}.game-card .eyebrow{font-size:7px;letter-spacing:1px}.game-card h3{font-size:16px;margin:9px 0}.game-card p{font-size:10px;line-height:1.85;min-height:38px;color:#7b8278;margin:0 0 16px}.game-meta{font-size:8px;letter-spacing:1px}.rules{font-size:11px;color:#738074;line-height:1.9;margin:17px 0 24px;padding-left:12px;border-left:2px solid #c6d3ba}.start-panel{margin:35px 0 0;background:#e9eee2;border:1px solid #dae1d1;border-radius:13px;padding:28px 30px;display:grid;grid-template-columns:1.4fr 1fr;gap:45px}.start-panel h2{font-size:23px;margin:10px 0}.start-panel p{font-size:11px;line-height:1.8}.join-box{border-left:1px solid #d1dbca;padding-left:30px}.join-box h3{font-size:17px}.join-box small{display:block;line-height:1.8;font-size:10px}.field-label{display:block;font-size:11px;margin:15px 0 7px}.input{border:1px solid #cfd8c8;background:#fffef9;padding:12px;border-radius:6px;width:100%;color:var(--green);font-size:12px}.button{border:1px solid #c8d1c2;border-radius:7px;background:#fffef7;color:var(--green);padding:12px 17px;font-size:12px;font-weight:600;margin:10px 8px 10px 0;line-height:1.5}.primary{background:var(--green);color:#fff;border-color:var(--green)}.secondary{background:#e2e9db}.quiet{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:4px}.footer{font-size:9px;color:#899181;padding:32px 0;line-height:1.8}.muted{color:var(--muted)}.room-heading{display:flex;justify-content:space-between;align-items:center;margin:38px 0 24px;gap:20px}.room-title{font-size:29px;line-height:1.5}.room-tools{display:flex;flex-wrap:wrap;justify-content:flex-end}.space-link{font-size:12px;text-decoration:underline}.people{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 30px}.person{display:flex;gap:8px;align-items:center;font-size:11px;background:#f0f2e9;border:1px solid var(--line);border-radius:30px;padding:5px 13px 5px 5px}.avatar{height:28px;width:28px;border-radius:50%;background:#e6dfc9;display:grid;place-items:center;font-size:17px}.avatar-1{background:#deebd5}.avatar-2{background:#f1dacd}.avatar-3{background:#e3dce9}.help{display:block;font-size:11px;color:#7b8677;line-height:1.8}.waiting{padding:22px;background:#e9eede;border-radius:8px;font-size:13px}.board{background:#fffef9;border:1px solid var(--line);border-radius:13px;padding:32px;margin:24px 0}.question{font-size:25px;line-height:1.65;margin:24px 0}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:25px 0}.answer{border:1px solid #d9dfd2;border-radius:8px;padding:19px;background:#f5f6ed;color:#2b4c3e;text-align:left;font-size:14px}.answer.picked{border:2px solid #436c49;background:#e6eeda}.answer.correct{background:#dfe9c7;border-color:#789852}.explanation{background:#edf0e2;padding:19px;border-radius:8px;font-size:14px;line-height:1.8}.answer-count{font-size:11px;color:#7f8a7c;margin-top:25px}.scores{display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;margin-top:25px}.score{padding:13px;background:#f0f2e9;border-radius:8px;min-width:130px;display:grid;gap:9px;font-size:11px}.score strong{font-size:20px}.bridge-panel{padding:23px 0;margin-top:30px;border-top:1px solid var(--line);font-size:12px;color:#61725e}.bridge-panel small{display:block;font-size:10px;line-height:1.9}.secret{text-align:center;background:#ebe8f0;border-radius:12px;padding:32px;margin:24px 0;color:#635670}.secret h2{font-size:32px}.secret small{display:block;font-size:10px}.result-row{font-size:13px;border-bottom:1px solid var(--line);padding-bottom:10px}.hints{line-height:2;font-size:14px;padding-left:24px}.world-map{width:100%;aspect-ratio:2;background:#e9f0ed;border:1px solid #d7e1d8;border-radius:8px;cursor:crosshair}.grid-line{stroke:#d5dfd7;stroke-width:.6}.land{fill:#bdcbb1;stroke:#abbba1;stroke-width:1}.map-pin{fill:#dc8354;stroke:#fff;stroke-width:2}.map-answer{fill:#2d6550;stroke:#fff;stroke-width:2}.geo-controls{display:flex;align-items:end;gap:14px;margin:22px 0}.geo-controls label{width:120px;font-size:11px}.geo-controls .input{margin-top:8px}.geo-controls .button{margin-bottom:0}.veggie-stage{display:flex;justify-content:space-around;padding:20px 0;text-align:center}.veggie{width:170px;height:220px;position:relative}.veggie-body{position:absolute;font-size:130px;top:55px;left:15px}.coat{position:absolute;font-size:83px;top:110px;left:42px}.scarf{position:absolute;font-size:61px;top:85px;left:56px}.hat{position:absolute;font-size:80px;top:0;left:46px}.veggie-card h3{font-size:16px}.veggie-card p{font-size:12px}.hand-choices{display:flex;gap:12px;justify-content:center}.rivers{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.river{background:#edf0e3;padding:15px;border-radius:8px;font-size:12px}.discard-tiles{line-height:2.3;margin-top:10px;color:#6b795e;min-height:45px}.tiles{display:flex;gap:5px;flex-wrap:wrap;margin:16px 0}.tile{padding:10px 6px;background:#fffced;border:1px solid #c1caba;border-bottom:4px solid #a6b69a;border-radius:5px;min-width:38px;font-weight:700;color:#394d70;font-size:16px}.suit-1{color:#904d47}.suit-2{color:#426544}.suit-3{color:#705164}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);padding:16px 24px;background:#213e32;color:#fff;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;font-size:13px;z-index:100;max-width:90vw}#toast.shown{opacity:1;transform:translate(-50%,0)}.copy-dialog{max-width:520px;width:90vw;border:1px solid #d6dfcc;border-radius:12px;padding:24px}.copy-dialog textarea{height:130px}.copy-dialog::backdrop{background:#12271b88}@media(min-width:1500px){.main{padding:0 70px}}@media(max-width:1100px){.shell{grid-template-columns:175px minmax(0,1fr)}.sidebar{padding:32px 19px}.main{padding:0 28px}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-art{transform:scale(.85)}.hero h1{font-size:36px}.game-card p{min-height:auto}}@media(max-width:760px){.shell{display:block}.sidebar{flex-direction:row;align-items:center;justify-content:space-between;padding:14px 20px;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:33px;letter-spacing:-2px}.brand-caption{font-size:7px}.nav,.side-note{display:none}.main{padding:0 20px}.topbar{height:65px;font-size:8px;letter-spacing:.6px}.hero{padding:35px 0;grid-template-columns:1fr}.hero-art{display:none}.hero h1{font-size:37px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading span{font-size:7px}.section-heading h2{font-size:17px}.start-panel{grid-template-columns:1fr;gap:28px;padding:24px}.join-box{border-left:0;border-top:1px solid #d1dbca;padding:24px 0 0}.room-heading{align-items:flex-start;flex-direction:column;gap:0}.room-title{font-size:25px}.room-tools{justify-content:flex-start}.board{padding:20px}.question{font-size:21px}.options{grid-template-columns:1fr}.geo-controls{flex-wrap:wrap}.veggie{transform:scale(.83);margin:-15px;width:150px}.hand-choices{gap:6px}.hand-choices .answer{font-size:11px;padding:14px 8px}.rivers{grid-template-columns:1fr}.scores{gap:8px}.score{min-width:100px}.room-heading{margin-top:28px}.footer{font-size:8px}}

.game-foodvote .game-icon{background:#ede2ce;color:#9a713e}
.food-intro{font-size:13px;line-height:1.9;color:#748074;max-width:650px}.food-status{font-size:11px;padding:12px 16px;background:#eef1e6;border-radius:6px;margin:24px 0}.food-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.food-card{border:1px solid var(--line);border-radius:10px;padding:16px;background:#fafaf4;min-width:0}.food-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.food-letter{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e7e6d7;color:#607051;font-family:Georgia,serif;font-size:19px}.food-card-head .eyebrow{font-size:8px;letter-spacing:1.2px}.food-photo{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;background:#eeeee5;border-radius:5px}.food-vote{width:100%;margin:4px 0 0}.food-vote:disabled{opacity:1;color:#7a8575;background:#edf0e6}.food-vote.primary:disabled{background:var(--green);color:#fff}.food-picked{border-color:#698154}.food-winner{background:#f3f1df;border-color:#b6a459}.food-winner .food-letter{background:#dccc8f}.food-zoom{font-size:10px;padding:5px 0;margin:7px 0}.food-dish{font-size:17px;margin:12px 0}.food-author{font-size:12px;color:#60705b}.food-result{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0 5px;font-size:10px}.food-result strong{font-size:25px;font-weight:500}.food-meter{width:100%;height:8px;display:block;margin-bottom:17px}.food-meter::-webkit-meter-bar{background:#e0e4d5;border:0}.food-meter::-webkit-meter-optimum-value{background:#658259}.food-source{font-size:11px;text-decoration:underline;text-underline-offset:4px}.food-card .help{font-size:9px;margin-top:8px}.food-dialog{max-width:min(95vw,1100px);max-height:95vh;border:0;border-radius:12px;background:#fafaf4;padding:20px}.food-dialog img{display:block;max-width:100%;max-height:75vh;object-fit:contain;margin:auto}.food-dialog::backdrop{background:#15281ce0}@media(max-width:760px){.food-grid{grid-template-columns:1fr;gap:18px}.food-card{padding:13px}.food-status{line-height:1.8}.food-dialog{padding:12px}}
.mahjong-table-info{font-size:11px;line-height:1.8;color:#61745a;margin-top:20px}.river-current{outline:2px solid #648455;outline-offset:-2px}
.room-events{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;font-size:12px}.room-events summary{cursor:pointer;color:#52674c}.room-events ol{padding-left:20px;line-height:2}.room-events time{font-size:10px;color:#7b8677;margin-right:14px}
.game-hanafuda .game-icon{background:#f2dedf;color:#a14350}.hana-status{font-size:11px;color:#71806e;line-height:1.8;margin-top:20px}.hana-instruction{font-size:13px;line-height:1.8}.hana-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;max-width:880px;margin:16px 0}.hana-field{background:#edf1e5;padding:16px;border-radius:10px;min-height:90px}.hana-card{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:space-between;min-height:128px;max-width:120px;padding:10px 5px;border:1px solid #d6ceba;border-radius:6px;background:linear-gradient(155deg,#fffcf3,#eee9dc);color:#324635;box-shadow:0 3px 0 #d7d3c6;text-align:center}.hana-month{font-size:10px;white-space:nowrap}.hana-symbol{font-size:32px;line-height:1.3}.hana-motif{font-size:11px;font-weight:700}.hana-kind{font-size:8px;letter-spacing:1px;color:#778068}.hana-light{border-color:#c7a96a;background:linear-gradient(155deg,#fff9dc,#f0e4bd)}.hana-ribbon{border-top:5px solid #b96165}.hana-seed{border-top:5px solid #677f91}.hana-match{outline:3px solid #ca784f;outline-offset:2px}.hana-card:is(button):hover{transform:translateY(-3px)}.hana-drawn{display:flex;align-items:center;gap:24px;background:#f3ecd9;border-radius:8px;padding:16px;margin:20px 0}.hana-drawn .hana-card{width:90px}.hana-hand{border-top:1px solid var(--line);margin-top:25px;padding-top:18px}.hana-decisions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.hana-call{font-size:12px;background:#f4e3d5;color:#924e31;padding:14px;border-radius:6px;line-height:1.8}.hana-piles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.hana-pile{padding:16px;background:#f1f3e9;border-radius:8px;min-width:0}.hana-pile h3{font-size:13px;margin-top:0}.hana-captured{display:flex;flex-wrap:wrap;gap:5px}.hana-chip{padding:5px 7px;border:1px solid #d4d9c8;border-radius:4px;background:#fcfcf5;font-size:9px}.hana-chip.hana-light{background:#f7edc8}.hana-chip.hana-ribbon{color:#a14350}.hana-guide{border-top:1px solid var(--line);padding-top:20px;margin-top:24px;font-size:12px;line-height:1.9}.hana-guide summary{cursor:pointer}.hana-guide dl{display:grid;grid-template-columns:minmax(80px,1fr) 3fr;gap:8px 12px}.hana-guide dd{margin:0;color:#67745d}.hana-guide dt{font-weight:600}@media(max-width:760px){.hana-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}.hana-card{min-height:110px}.hana-field{padding:10px}.hana-symbol{font-size:27px}.hana-piles{grid-template-columns:1fr}.hana-guide dl{grid-template-columns:90px 1fr}.hana-drawn{gap:12px}}
.game-shiritori .game-icon{background:#e8e1f0;color:#766288}.word-prompt{display:flex;align-items:center;gap:20px;background:#f0ecf4;padding:20px;border-radius:8px;line-height:1.8;margin:22px 0}.word-seed{font-family:serif;font-size:42px;color:#78668b;flex-shrink:0}.word-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.word-field{min-width:0}.word-field-meaning,.word-form-note{grid-column:1/-1}.word-form .input{width:100%;margin:7px 0 0}.word-form textarea{resize:vertical;font:inherit;line-height:1.7}.word-form .button{justify-self:start;margin:0}.word-featured{background:#f4f0e7;border-left:4px solid #9a886c;border-radius:5px;padding:24px 28px;margin:24px 0}.word-reading{font-size:12px;color:#857a6b;margin:12px 0 4px}.word-title{font-family:serif;font-size:34px;margin:4px 0 14px;line-height:1.5}.word-meaning{font-size:14px;line-height:1.9;white-space:pre-wrap}.word-entry{overflow-wrap:anywhere;min-width:0}.word-votes{display:flex;flex-wrap:wrap;gap:12px}.word-verdict{font-size:20px;line-height:1.7;color:#5e7150}.word-dictionary{margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}.word-dictionary>h3{font-size:16px}.word-chain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;padding:0;counter-reset:word}.word-chain .word-entry{background:#f1f3e9;border:1px solid #dce1cf;border-radius:6px;padding:16px 18px;counter-increment:word}.word-chain .word-entry::before{content:counter(word,decimal-leading-zero);font-size:10px;letter-spacing:2px;color:#778267}.word-chain h4{font-size:20px;margin:4px 0 8px}.word-chain .word-meaning{font-size:12px;margin:8px 0}.word-chain .word-reading{margin-top:8px}@media(max-width:760px){.word-form,.word-chain{grid-template-columns:1fr}.word-prompt{gap:15px;padding:16px;font-size:13px}.word-featured{padding:18px}.word-title{font-size:28px}.word-votes .button{width:100%}.word-form .button{justify-self:stretch}.word-verdict{font-size:18px}}
.game-proof .game-icon{background:#dce9ee;color:#456d80}.proof-verification{font-size:12px;line-height:1.8;color:#536f7c;border-bottom:1px solid #d8e4e9;padding-bottom:16px}.proof-theorem{background:#eaf0f3;border-radius:8px;padding:24px;margin:24px 0 30px}.proof-theorem h2{font-size:24px;font-family:serif}.proof-theorem h3{font-size:12px;color:#627580;margin-top:24px}.proof-math,.proof-claim,.proof-reason,.proof-response,.proof-issue{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9}.proof-math{font-size:15px}.proof-problems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.proof-problem{background:#edf2f3;border:1px solid #cfdde3;border-radius:8px;padding:20px;text-align:left;color:inherit}.proof-problem:hover{border-color:#648999;background:#e1ebef}.proof-problem h3{font-size:16px;line-height:1.7}.proof-problem p{font-size:12px;line-height:1.9}.proof-problem .eyebrow{font-size:9px;letter-spacing:.5px}.proof-form{display:grid;gap:18px;margin:20px 0 28px}.proof-form .input{width:100%;margin:8px 0 0;font:inherit;line-height:1.8;resize:vertical}.proof-form .button{justify-self:start;margin:0}.proof-field{min-width:0}.proof-refs{border:1px solid #d3dde0;border-radius:6px;padding:14px;font-size:12px;min-width:0}.proof-check{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.9;overflow-wrap:anywhere}.proof-check input{margin-top:6px;flex-shrink:0;accent-color:#54788a}.proof-flow{display:grid;gap:14px}.proof-step{padding:20px 22px;border:1px solid #d4e0e2;border-left:3px solid #7497a2;border-radius:7px;background:#f6f9f7;min-width:0}.proof-step .eyebrow{font-size:10px;letter-spacing:1px}.proof-claim{font-size:18px;margin:14px 0;font-weight:600}.proof-reason{font-size:13px;color:#53635c}.proof-step .button{margin-top:14px}.proof-proposals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.proof-issues{background:#faf1df;border:1px solid #e1d4b7;border-radius:8px;padding:20px;margin:24px 0}.proof-issues h3{font-size:15px;margin-top:0;color:#816a3f}.proof-issue{font-size:13px;padding:12px 0;border-top:1px solid #e5dac5}.proof-issue p{font-size:12px}.proof-response{padding:13px 17px;border-radius:6px;background:#edf2e8;font-size:12px}.proof-response.has-question{background:#faf1df;color:#7d653d}.proof-outcome{font-size:19px;line-height:1.8;color:#4e6f79;margin:24px 0}.proof-question{background:#f7f3e9;padding:20px;border-radius:8px}.proof-details{font-size:12px;border-top:1px solid #dce3df;margin:24px 0;padding-top:18px}.proof-details summary{cursor:pointer;line-height:1.8}.proof-details .proof-step{margin:12px 0}.proof-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.proof-actions .button{margin:0}@media(max-width:760px){.proof-problems,.proof-proposals{grid-template-columns:1fr}.proof-theorem{padding:18px}.proof-theorem h2{font-size:22px}.proof-step{padding:16px}.proof-form .button{justify-self:stretch}.proof-claim{font-size:16px}.proof-issues,.proof-question{padding:16px}}
.proof-export{width:min(90vw,850px);max-height:90vh;border:1px solid #cfdbdd;border-radius:12px;background:#fafcf8;color:var(--ink);padding:28px}.proof-export h2{font-size:22px}.proof-export textarea{width:100%;height:48vh;line-height:1.8;font-size:13px;resize:vertical;box-sizing:border-box}.proof-export::backdrop{background:#203b44b8}.proof-export .proof-actions a{text-decoration:none;display:inline-flex;align-items:center}@media(max-width:760px){.proof-export{padding:18px}.proof-export .proof-actions{gap:8px}}
.game-debate .game-icon{background:#f2e2ce;color:#987137}.debate-note{font-size:12px;line-height:1.9;color:#77674f}.debate-topic{background:#f3eadb;padding:24px;border-radius:8px;margin:24px 0}.debate-topic h2{font-size:23px;line-height:1.7;font-family:serif;overflow-wrap:anywhere}.debate-topic p{font-size:13px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}.debate-topic-choice{background:#f4eddf;border-color:#e3d3b6}.debate-teams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.debate-team{padding:16px;border-radius:7px;border:1px solid #d9ded4;min-width:0}.debate-team h3{font-size:14px}.debate-team p{font-size:12px;line-height:1.8;overflow-wrap:anywhere}.debate-team .button{font-size:11px;padding:9px 12px;margin:0}.debate-affirmative{background:#edf3ec;border-left:3px solid #7a9677}.debate-negative{background:#edf1f8;border-left:3px solid #7b8ca6}.debate-listener{background:#f4f0e9;border-left:3px solid #a6967f}.debate-route{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:30px 0;font-size:11px}.debate-route li{padding:8px 12px;border-radius:20px;border:1px solid #e0dfd6;color:#859080}.debate-route .current{background:#806b4d;color:#fff;border-color:#806b4d}.debate-turn{padding:22px;border-radius:7px;margin:22px 0}.debate-turn h2{font-size:23px;line-height:1.7}.debate-turn p{font-size:13px;line-height:1.9}.debate-body,.debate-reference{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;font-size:13px}.debate-reference{border-left:3px solid #cbbb99;background:#f7f2e8;padding:14px 18px;margin:0}.debate-question{border:1px solid #dfd7c8;border-radius:7px;background:#faf8f1;padding:20px;margin:14px 0}.debate-question .eyebrow{font-size:10px;letter-spacing:1px}.debate-answer{border-top:1px solid #e1dfd4;padding-top:15px;color:#536e60}.debate-reflections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.debate-reflection{padding:22px;background:#f1f3e8;border-radius:8px;min-width:0}.debate-reflection h4{font-size:11px;color:#7b8268;margin-bottom:6px}.debate-reflection .debate-body{margin-top:0}.debate-outcome{font-size:22px;color:#776244;line-height:1.8;margin:28px 0}.debate-record{padding:18px;margin:12px 0;border-radius:6px}.debate-record .eyebrow{font-size:10px;letter-spacing:1px}@media(max-width:760px){.debate-teams,.debate-reflections{grid-template-columns:1fr}.debate-topic,.debate-turn,.debate-question{padding:18px}.debate-topic h2,.debate-turn h2{font-size:21px}.debate-route{gap:5px}.debate-route li{padding:6px 9px;font-size:10px}}
.game-drawing .game-icon{background:#f3dfd3;color:#ad6846}.drawing-prompts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.drawing-prompt{border:1px solid #e2cdbb;background:#fbf0e4;color:#745d40;text-align:left;border-radius:9px;padding:24px;font-size:17px;line-height:1.8}.drawing-prompt:hover{background:#f7e5d0}.drawing-custom{margin:24px 0}.drawing-kicker{display:block;color:#ac7348;margin-top:26px}.drawing-title{font-family:serif;font-size:30px;line-height:1.7;overflow-wrap:anywhere}.drawing-editor{background:#f4eee5;padding:18px;border:1px solid #e2d7c8;border-radius:10px}.drawing-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px}.drawing-palette{display:flex;flex-wrap:wrap;gap:9px;align-items:center;flex:1}.drawing-color{width:34px;height:34px;border-radius:50%;background:var(--ink);border:2px solid #fff;box-shadow:0 0 0 1px #ccc4b7;font-size:22px;color:#435b4e}.drawing-color[aria-pressed=true]{outline:3px solid #876b4d;outline-offset:3px}.drawing-tools .field-label{margin:0}.drawing-size{width:auto;max-width:100%;font-family:inherit}.drawing-canvas{display:block;background:#fff;max-width:100%;width:100%;height:auto;aspect-ratio:4/3;border:1px solid #d2c8b9;border-radius:4px}.drawing-editor .drawing-canvas{touch-action:none;cursor:crosshair}.drawing-canvas:focus-visible,.drawing-size:focus-visible{outline:3px solid #de7b4c;outline-offset:3px}.drawing-actions{display:flex;flex-wrap:wrap;gap:2px;align-items:center}.drawing-actions .primary{margin-left:auto}.drawing-status{min-height:20px;margin:10px 0 0}.drawing-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0}.drawing-art{border:1px solid #e1d6c6;background:#f8f3e9;padding:18px;border-radius:9px;min-width:0}.drawing-art h3{font-size:14px;margin:0 0 16px}.drawing-winner{border-color:#caa55a;background:#fbf1d9;box-shadow:0 0 0 1px #caa55a}.drawing-author{font-size:13px;color:#805f38;margin-bottom:0}.drawing-outcome{font-size:22px;line-height:1.8;color:#826442;margin-top:28px}@media(max-width:760px){.drawing-prompts,.drawing-gallery{grid-template-columns:1fr}.drawing-title{font-size:25px}.drawing-editor{padding:10px}.drawing-palette{flex-basis:100%}.drawing-color{width:32px;height:32px}.drawing-actions .button{font-size:11px;padding:10px}.drawing-actions .primary{margin-left:0}.drawing-art{padding:14px}}
.drawing-export{width:min(780px,calc(100vw - 32px));max-height:90vh;overflow:auto;border:1px solid #d3c7b5;border-radius:12px;padding:24px;color:#253b36;background:#fffef9}.drawing-export::backdrop{background:#20342d88}.drawing-export h2{font-size:21px;margin:0 0 18px}.drawing-export img{display:block;width:100%;height:auto;border:1px solid #e1d6c6}.drawing-export .button{display:inline-block}

/* Site and setup links remain usable in the compact sidebar too. */
.nav a.nav-item { display: block; }
.nav a.nav-item:hover { background: #e3e9dc; }
@media (max-width: 760px) {
  .sidebar:has(.nav a) { flex-wrap: wrap; gap: 10px; }
  .nav:has(a) { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 8px; margin-top: 0; }
  .nav:has(a) > div { display: none; }
  .nav a.nav-item { margin: 0; padding: 8px 10px; font-size: 11px; }
}

/* A shared stage: readable cues, clear casting and quiet audience participation. */
.game-drama .game-icon { background: #e6dbf3; color: #69467b; }
.drama-heading { margin: 18px 0 24px; }
.drama-heading .question { margin-bottom: 8px; }
.drama-ticket { display: inline-block; background: #eee6f4; color: #624275; padding: 9px 14px; border-radius: 8px; margin-top: 8px; font-size: 13px; }
.drama-presets, .drama-cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; margin: 24px 0; }
.drama-script-card, .drama-role { min-width: 0; border: 1px solid #ddd4e2; padding: 22px; border-radius: 14px; background: #fbf8fd; }
.drama-script-card h3, .drama-role h3 { margin: 12px 0; font-size: 21px; }
.drama-role .button, .drama-role .input { display: block; margin-top: 12px; width: 100%; }
.drama-role.is-mine { border-color: #86669b; background: #f3eafa; }
.drama-form { display: grid; gap: 12px; margin: 20px 0; }
.drama-form textarea { line-height: 1.7; resize: vertical; }
.drama-form .button { justify-self: start; }
.drama-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.drama-details { margin: 18px 0; padding: 16px 0; border-top: 1px solid #e7dfea; }
.drama-details summary { cursor: pointer; color: #624275; font-weight: 600; }
.drama-script { padding-left: 26px; }
.drama-line { padding: 14px; margin: 8px 0; border-radius: 8px; border-left: 3px solid transparent; }
.drama-line p { margin: 6px 0 0; }
.drama-line.is-mine { background: #f0e6f7; }
.drama-line.is-current { border-left-color: #77548c; }
.drama-stage { padding: 32px; border-radius: 18px; background: #30253d; color: #fcf8ef; box-shadow: 0 12px 30px #30253d17; }
.drama-stage.is-mine { background: #473254; }
.drama-stage.is-paused { background: #59525f; }
.drama-stage .eyebrow { color: #d8c5e4; }
.drama-speaker { font-size: 17px; font-weight: 500; color: #ead9f5; margin: 24px 0 16px; }
.drama-cue { font-size: clamp(23px, 2.5vw, 34px); line-height: 1.85; letter-spacing: .02em; margin: 0 0 28px; }
.drama-wait { font-size: 13px; color: #e0d2e9; }
.drama-next { white-space: pre-wrap; color: #75667b; border-left: 2px solid #d6c8df; padding-left: 18px; margin: 26px 0; font-size: 14px; line-height: 1.9; }
.drama-curtain { margin: 24px 0; padding: 28px; border-radius: 16px; background: #eee5f3; }
.drama-curtain h3 { font-size: 26px; line-height: 1.6; margin: 14px 0; }
.drama-review { border-bottom: 1px solid #e7dfea; padding: 18px 0; }
.board-drama p, .board-drama h2, .board-drama h3, .drama-script li { overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 640px) { .drama-stage { padding: 22px; } .drama-actions .button { flex: 1 1 100%; } }

/* Participant counts are independent of the two-player/four-seat layouts. */
.people { max-height: 180px; overflow: auto; }
.veggie-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 16px; max-height: 510px; overflow: auto; padding: 12px 2px; }
.veggie-card { min-width: 0; background: #f1f3e7; border: 1px solid #dce1cf; border-radius: 12px; padding: 12px; overflow-wrap: anywhere; }
.veggie-card .veggie { margin: 0 auto; }
.veggie-self { border-color: #799076; background: #edf4df; }
.veggie-out { background: #f5f3ee; color: #788171; }
.veggie-rule { font-size: 14px; line-height: 1.9; padding: 18px 22px; background: #f5efdb; border-radius: 8px; }
.veggie-results { max-height: 300px; overflow: auto; }
.board-yakyuken h2, .board-yakyuken h3 { overflow-wrap: anywhere; }
.rivers { max-height: 320px; overflow: auto; }
@media (max-width: 640px) { .veggie-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .veggie-card { padding: 8px; } .veggie-card h3 { font-size: 13px; } }

/* Oogiri: anonymous answer cards, with names only after voting. */
.game-oogiri .game-icon { background: #f4e0cd; color: #8b522c; }
.oogiri-prompts, .oogiri-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.oogiri-prompt { font: inherit; line-height: 1.7; text-align: left; padding: 20px; border: 1px solid #dfddd2; border-radius: 13px; background: #faf9f3; cursor: pointer; color: inherit; }
.oogiri-prompt:hover { border-color: #8a9e81; background: #eff3e9; }
.oogiri-form { display: grid; gap: 10px; max-width: 720px; margin: 26px 0; }
.oogiri-form .input { margin: 0; width: 100%; resize: vertical; }
.oogiri-form .button { justify-self: start; }
.oogiri-theme { display: inline-block; font-weight: 700; padding: 5px 14px; margin-top: 22px; border-radius: 20px; background: #e9eddf; color: #536d41; }
.oogiri-title { font-size: clamp(22px, 3vw, 34px); line-height: 1.7; max-width: 850px; margin: 16px 0 22px; overflow-wrap: anywhere; }
.oogiri-answer { display: flex; flex-direction: column; align-items: start; background: #fffdf6; border: 1px solid #e2ddd1; border-radius: 16px; padding: 26px; min-width: 0; }
.oogiri-answer .button, .oogiri-author { margin-top: auto; }
.oogiri-response { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.8; font-weight: 600; padding: 10px 0 22px; overflow-wrap: anywhere; white-space: pre-wrap; }
.oogiri-best { border-color: #a3ae73; box-shadow: inset 0 3px 0 #a3ae73; }
.oogiri-own { padding: 24px; background: #f6f1e7; border-radius: 12px; overflow-wrap: anywhere; }
.oogiri-author { color: #5f704e; font-size: 14px; }
.oogiri-finale { padding: 20px 0; font-size: 24px; }
.oogiri-history { border-top: 1px solid #e2ddd1; padding-top: 22px; margin-top: 32px; overflow-wrap: anywhere; }
.oogiri-history summary { cursor: pointer; }
.oogiri-history p { line-height: 1.8; }
.hana-teams { padding: 16px; background: #f3f0e7; border-radius: 12px; line-height: 1.8; }
@media (max-width: 680px) { .oogiri-prompts, .oogiri-gallery { grid-template-columns: 1fr; } .oogiri-answer { padding: 20px; } }

/* A shared, silent stage for X activity and audience cheers. */
.live-stage { position: relative; overflow: hidden; padding: 28px 30px 24px; border-radius: 20px; border: 1px solid #d7e2cf; background: linear-gradient(125deg, #edf2e6, #f9f5e9); margin: 24px 0 32px; }
.live-stage-top { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.live-stage h2 { margin: 9px 0 0; font-size: clamp(21px, 2.3vw, 28px); letter-spacing: -.04em; }
.live-connection { font-size: 11px; color: #52694d; padding-top: 4px; white-space: nowrap; }
.live-scene { position: relative; height: 100px; margin-top: 12px; }
.live-garden { display: flex; align-items: end; justify-content: center; gap: clamp(18px, 5vw, 60px); height: 100%; padding-bottom: 10px; border-bottom: 2px solid #bdcda4; }
.live-veggie { display: inline-block; font-size: 44px; transform-origin: 50% 100%; filter: drop-shadow(0 9px 2px #57704412); }
.voice-active .live-veggie { animation: live-bob .8s ease-in-out infinite alternate; }
.voice-active .veggie-1, .voice-active .veggie-3 { animation-delay: -.35s; }
.voice-active .veggie-2 { animation-delay: -.6s; }
.voice-active .veggie-4 { animation-delay: -.15s; }
.live-voice { font-size: 13px; font-weight: 600; text-align: center; color: #42654c; margin: 14px 0 6px; }
.live-crowd { text-align: center; font-size: 11px; color: #69756c; margin: 0; }
.live-cue { margin: 24px 0 12px; font-size: 14px; }
.live-cheers { display: flex; flex-wrap: wrap; gap: 9px; }
.live-cheer { border: 1px solid #d9dfcf; background: #ffffffc9; color: #314638; border-radius: 24px; font: inherit; font-size: 14px; padding: 11px 16px; cursor: pointer; transition: background .15s, transform .15s; }
.live-cheer:hover:not(:disabled) { background: #fff; transform: translateY(-2px); }
.live-cheer:disabled { opacity: .5; cursor: default; }
.live-cheer:focus-visible { outline: 3px solid #849c71; outline-offset: 3px; }
.live-meter { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.live-goal { width: 180px; height: 8px; border: none; border-radius: 8px; background: #dde4d4; accent-color: #79964d; }
.live-goal::-webkit-progress-bar { background: #dde4d4; border-radius: 8px; }
.live-goal::-webkit-progress-value { background: #79964d; border-radius: 8px; transition: width .25s; }
.live-goal-label, .live-note { font-size: 11px; color: #6d7767; }
.live-celebration { min-height: 20px; font-weight: 600; color: #775f2a; font-size: 14px; margin: 12px 0 0; }
.live-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.live-controls .button { font-size: 11px; min-height: 34px; padding: 8px 0; margin: 4px 0 10px; }
.live-effects { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.live-particle { position: absolute; font-size: 32px; left: 10%; bottom: 0; animation: live-float 3.5s ease-out forwards; }
.particle-1 { left: 23%; animation-delay: .08s; } .particle-2 { left: 35%; animation-delay: .12s; } .particle-3 { left: 47%; } .particle-4 { left: 59%; animation-delay: .15s; } .particle-5 { left: 70%; } .particle-6 { left: 81%; } .particle-7 { left: 89%; }
.is-preview { border-style: dashed; }
.is-quiet .live-veggie, .is-quiet .live-particle { animation: none !important; }
.is-quiet .live-effects { display: none; }
.audience-board { margin-top: 24px; }
.audience-phase { display: inline-block; border-radius: 20px; background: #eef1e7; padding: 8px 14px; color: #52654b; font-size: 13px; }
.audience-title { font-size: 24px; line-height: 1.7; overflow-wrap: anywhere; }
.audience-text { line-height: 1.9; overflow-wrap: anywhere; white-space: pre-wrap; }
.audience-card { border: 1px solid #e3e0d4; border-radius: 14px; padding: 22px; margin: 12px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.audience-card > p { font-size: 19px; line-height: 1.8; }
.audience-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.audience-card .food-image { max-width: 100%; border-radius: 10px; }
@keyframes live-bob { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(5deg) translateY(-9px); } }
@keyframes live-float { 0% { opacity: 0; transform: translateY(15px) scale(.7); } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-130px) rotate(12deg) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .live-veggie, .live-particle { animation: none !important; } .live-effects { display: none; } .live-cheer, .live-goal::-webkit-progress-value { transition: none; } }
@media (max-width: 680px) { .live-stage { padding: 22px 18px; } .live-stage-top { flex-direction: column; gap: 8px; } .live-veggie { font-size: 35px; } .live-cheer { padding: 10px 13px; } .audience-gallery { grid-template-columns: 1fr; } }

/* Garden companions: original vectors, shared across the site and extension. */
:root{background:#fbf9f1;--muted:#667563;--line:#dde1d2}
.main{max-width:1550px;width:100%;margin:0 auto}
.sidebar{background:#f2f4e9}
.garden-character{display:block;width:100%;height:auto;overflow:visible}
.garden-hero{grid-template-columns:1.1fr 1fr;gap:12px;padding:48px 0 38px;align-items:center}
.garden-hero h1{font-size:clamp(36px,4vw,60px);letter-spacing:-.055em;line-height:1.45;margin:17px 0}
.garden-hero .lead{font-size:14px;line-height:2;color:#62725e}
.hero-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}
.hero-badges span{font-size:10px;padding:6px 10px;border:1px solid #d9e0cc;border-radius:30px;background:#f2f3e5}
.garden-illustration{position:relative;height:310px;isolation:isolate;min-width:0}
.garden-illustration:before{content:"";position:absolute;inset:40px 0 12px;border-radius:52% 48% 45% 55%;background:radial-gradient(ellipse at 50% 15%,#f6eac9 0%,#e8edcf 85%);transform:rotate(-5deg);z-index:-1}
.garden-illustration:after{content:"";position:absolute;bottom:24px;left:10%;width:80%;height:35px;background:#7295681a;border-radius:50%;z-index:-1}
.garden-speech{position:absolute;top:6px;left:25%;font-size:12px;letter-spacing:.1em;background:#fffef8;border:1px solid #d5ddc7;border-radius:50% 50% 50% 5%;padding:17px 22px;transform:rotate(-5deg)}
.hero-friend{position:absolute;filter:drop-shadow(0 7px 3px #55632a0d)}
.hero-friend-0{width:40%;left:4%;bottom:50px;transform:rotate(-12deg);z-index:2}
.hero-friend-1{width:36%;left:32%;bottom:10px;transform:rotate(8deg);z-index:3}
.hero-friend-2{width:32%;right:1%;bottom:46px;transform:rotate(13deg);z-index:2}
.hero-friend-3{width:27%;left:36%;top:59px;transform:rotate(-8deg);z-index:1}
.hero-friend-4{width:24%;right:8%;top:30px;transform:rotate(8deg)}
.garden-spark{position:absolute;font-size:24px;color:#aeba82}.spark-one{left:3%;top:44px}.spark-two{right:0;top:8px;font-size:35px;color:#e4ba76}
.start-panel{margin:0 0 45px;gap:35px;padding:28px 32px;background:#f0f2e5;border-radius:20px;border-color:#dce2ce;grid-template-columns:1fr 1fr}
.start-panel h2{font-size:24px}.start-panel .field-label{font-size:12px}.start-panel .help{font-size:11px;line-height:1.8}.start-panel p{font-size:12px}.start-panel .input{font-size:13px;padding:13px}
.start-panel .button{font-size:13px;min-height:45px}.join-box h2{margin:10px 0}.join-box .field-label{margin-top:28px}.join-box .button{margin-right:4px}
.game-selection{padding:14px 18px;margin-bottom:20px;background:#f2f0e3;border:1px solid #e3dfcb;border-radius:12px}.game-selection .rules{margin:0}.game-selection .button{margin-bottom:4px}
.game-card{border-radius:15px}.game-card p{font-size:12px;color:#63715f}.game-card .eyebrow{font-size:9px}.game-meta{font-size:9px}.game-card.active:after{content:"選択中";display:inline-block;float:right;font-size:10px;color:#335b42}.game-card.active{background:#f0f3e5}
.room-heading{margin-top:30px}.room-tools .button{padding:9px 12px;margin:4px;font-size:11px}.room-code{letter-spacing:.07em;background:#e9eddf;font-variant-numeric:tabular-nums}
.people{margin:18px 0;gap:8px}.person{padding:2px 12px 2px 4px;background:#fffdf5}.avatar-character{width:42px;height:46px;flex:none}
.bridge-panel{border:1px solid #d9e1cd;background:#f0f4e8;border-radius:14px;padding:12px 18px;margin:16px 0 22px;color:#4e6748}
.bridge-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.bridge-top .button{margin:2px 0;font-size:11px;flex-shrink:0}.bridge-status{font-size:12px;font-weight:550;line-height:1.8}
.bridge-guide summary{font-size:11px;cursor:pointer;margin:8px 0;text-decoration:underline;text-underline-offset:3px}.bridge-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-left:20px;margin:22px 0}.bridge-steps strong{display:block;font-size:12px;margin-bottom:8px}.bridge-steps a{display:block;font-size:11px;line-height:1.8}.bridge-last:empty{display:none}
.live-stage{background:linear-gradient(135deg,#f0f4e5,#faf0df);padding:24px}.live-scene{height:135px}.live-garden{border-bottom:0;gap:clamp(0px,2vw,20px);padding-bottom:0;max-width:740px;margin:0 auto}.live-veggie{width:90px;font-size:initial;min-width:0;flex:1;max-width:105px;filter:none}.live-cue{margin:15px 0 10px}.live-controls{margin-top:8px}.live-celebration:empty{display:none}.live-voice{margin-top:5px}
.live-stage h2{font-size:23px}.live-connection{white-space:normal;line-height:1.7;max-width:200px}
.veggie{width:145px;height:175px;transform:none!important;margin:0 auto}.veggie .garden-character{width:145px;height:175px}.veggie-stage{gap:14px}.veggie-card{background:#f5f4e9;border:1px solid #e0e2d3;border-radius:18px;padding:12px;min-width:160px}.veggie-card h3{font-size:13px}.veggie-out{filter:grayscale(.5);opacity:.7}
.invitation-friend,.expired-room .garden-character{width:125px;margin:0 0 10px}.expired-room{max-width:740px;margin:50px auto}.network-notice{padding:13px 18px;border-radius:10px;background:#fae6ce;color:#715334;font-size:13px;line-height:1.8}
.setup-hero{margin:35px 0}.setup-hero h1{font-size:clamp(28px,4vw,43px)}.setup-steps{counter-reset:setup}.setup-step{counter-increment:setup;position:relative;padding:25px 28px 25px 80px;background:#fffdf5;border:1px solid var(--line);border-radius:16px;margin:16px 0}.setup-step:before{content:counter(setup);position:absolute;top:25px;left:25px;background:#e5ebd8;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;color:#47704d;font-family:Georgia,serif;font-size:20px}.setup-step h2{font-size:20px;margin:0 0 14px}.setup-step p,.setup-trouble p{font-size:13px;line-height:1.9;color:#5b6d58}.setup-step a:not(.button){text-decoration:underline}.setup-step code{font-size:12px;background:#f0eedf;padding:3px 6px;border-radius:5px;overflow-wrap:anywhere}.setup-trouble{margin:22px 0;padding:20px 25px;background:#eef1e4;border-radius:15px}.setup-trouble summary{cursor:pointer;font-weight:600}
[aria-busy=true] [data-enter]{opacity:.5}.button,.input{border-radius:10px}.muted,.help{color:#667563}summary:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d7915d;outline-offset:4px}
@media(max-width:1100px){.garden-illustration{height:275px}.garden-speech{font-size:10px;padding:14px;left:24%}.hero-friend-3{top:64px}.hero-friend-4{top:50px}.garden-hero .eyebrow{font-size:9px;letter-spacing:1.1px}}
@media(max-width:760px){.garden-hero{grid-template-columns:1fr;gap:5px;padding:25px 0 18px}.garden-hero h1{font-size:38px;margin:10px 0}.garden-hero .lead{font-size:13px}.hero-badges{margin-top:12px}.garden-illustration{height:200px;max-width:350px;width:100%;margin:5px auto 0}.garden-illustration:before{inset:28px 8% 6px}.hero-friend-0{width:31%;left:10%;bottom:18px}.hero-friend-1{width:29%;left:36%;bottom:0}.hero-friend-2{width:26%;right:5%;bottom:23px}.hero-friend-3{width:20%;left:40%;top:35px}.hero-friend-4{width:18%;right:13%;top:30px}.garden-speech{top:-4px;font-size:9px;padding:10px 14px}.spark-one{left:8%;top:25px}.spark-two{right:5%;top:15px;font-size:22px}.start-panel{grid-template-columns:1fr;gap:20px;padding:24px;margin-bottom:32px}.start-panel h2{font-size:22px}.join-box{padding-top:22px}.join-box .field-label{margin-top:15px}.hero-badges span{font-size:10px}.brand-caption{display:none}.sidebar{flex-wrap:wrap;gap:12px}.sidebar .nav{margin:0;gap:12px}.nav-item{font-size:11px}.topbar{height:45px;gap:10px;line-height:1.8}.topbar>span:last-child{font-size:7px;max-width:160px;text-align:right}.game-card p{font-size:11px}.game-card .eyebrow{font-size:8px}.game-selection{padding:14px}.game-selection .rules{font-size:12px}.game-selection .button{width:100%}.bridge-top{align-items:flex-start;flex-direction:column;gap:6px}.bridge-steps{grid-template-columns:1fr;gap:20px}.live-stage{padding:20px 15px}.live-scene{height:106px}.live-garden{gap:0}.live-veggie{max-width:65px}.live-stage h2{font-size:20px}.live-voice{font-size:12px;line-height:1.8}.live-cheer{font-size:12px;min-height:44px}.live-cue{font-size:12px;line-height:1.8}.live-note{line-height:1.8}.room-title{font-size:24px}.setup-step{padding:65px 22px 22px}.setup-step:before{top:20px;left:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.game-card,.button{transition:none}.live-particle{display:none}}

.hero-cta{display:inline-block;margin-top:18px}.garden-hero{padding-top:30px;padding-bottom:26px}.audience-card>.garden-character{width:140px;height:158px;margin:0 auto 12px}.audience-board+.live-stage{margin-top:20px}

/* Room-local X account linking */
.identity-panel{margin:18px 0 26px;border:1px solid #cddccf;border-radius:20px;background:#fbfdf7;overflow:hidden}
.identity-summary{padding:19px 22px;cursor:pointer;font-weight:750;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}
.identity-summary:before{content:'↗';color:#417358}.identity-summary>span:first-child{flex:1}.identity-count{font-size:12px;font-weight:500;color:#52735c}
.identity-body{padding:0 22px 22px}.identity-intro{font-size:13px;color:#346347;line-height:1.9}
.identity-form{margin-top:20px}.identity-form-actions{display:flex;gap:10px;margin-top:8px}.identity-form-actions .input{max-width:280px}
.account-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #dfE6d9}.account-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.account-text strong,.account-handle{overflow-wrap:anywhere}.account-handle{font-size:12px;color:#526757}.account-role{font-size:11px;color:#657569}
.account-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;position:relative;border-radius:50%;overflow:hidden;background:#e8efde;font-size:22px}.account-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.account-avatar .avatar-character{width:44px;height:44px}
.account-approved{font-size:11px;color:#346347;background:#e9f1e0;padding:5px 9px;border-radius:20px}.identity-review{margin-top:25px}.identity-review h3{font-size:15px}.identity-review-actions{display:flex;gap:6px;flex-wrap:wrap}.identity-roster{margin-top:16px;font-size:13px}.identity-roster>summary{cursor:pointer;color:#45674a;padding:9px 0}.identity-roster[open]{margin-bottom:18px}
.person .account-text{gap:2px}.person .account-text strong{font-size:13px}.person .account-role{font-size:10px}.person{max-width:100%}
@media(max-width:640px){.identity-summary{padding:16px;flex-wrap:wrap}.identity-count{width:100%;padding-left:22px}.identity-body{padding:0 16px 16px}.identity-form-actions{flex-direction:column}.identity-form-actions .input{max-width:none}.account-row{flex-wrap:wrap}.identity-review-actions{width:100%;padding-left:56px}.account-row>.button{font-size:12px}.identity-intro{font-size:12px}}

@media(max-width:640px){.account-row>.account-text{flex:1 1 calc(100% - 60px)}.account-row>.account-approved{margin-left:56px}.identity-review-actions{padding-left:0}}

/* A simple shared board: movable notes, garden friends, ink and connections. */
.room-view-tabs{display:flex;gap:8px;margin:12px 0}.room-view-tabs .button[aria-pressed=true]{background:#365e50;color:#fff9ec}
.whiteboard{background:#f7f8ef;border:1px solid #d8dfce;border-radius:20px;overflow:hidden;margin:16px 0;color:#3d604e}.whiteboard [hidden]{display:none!important}.wb-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px 16px}.wb-heading h2{font-size:23px;font-weight:600;margin:8px 0 0}.wb-heading .eyebrow{font-size:8px;color:#929e82;letter-spacing:2px}.wb-status{font-size:11px;color:#7d9271;line-height:1.7;max-width:230px}.wb-toolbar{display:flex;gap:7px;flex-wrap:wrap;padding:0 22px 12px}.wb-button,.wb-tool{font:inherit;font-size:11px;color:#56715a;background:#fffdf5;border:1px solid #dbe1ce;border-radius:9px;padding:9px 13px;cursor:pointer;min-height:38px;text-decoration:none}.wb-button:hover,.wb-tool:hover{background:#edf1df}.wb-button:disabled,.wb-tool:disabled{opacity:.4;cursor:default}.wb-tool{display:inline-flex;gap:8px;align-items:center;background:transparent;border-color:transparent;min-width:75px}.wb-tool>span{font-size:23px}.wb-tool[aria-pressed=true]{background:#e6ecd7;border-color:#bccfa9;color:#365a45}.wb-actions{display:flex;gap:7px;flex-wrap:wrap;padding:0 24px 16px}.wb-actions .wb-button{font-size:10px;min-height:32px;padding:5px 10px}.wb-body{display:grid;grid-template-columns:minmax(0,1fr) 242px;border-top:1px solid #d8dfce}.wb-stage{position:relative;height:600px;min-width:0;overflow:hidden;background:#eaeade;touch-action:none}.wb-paper{position:absolute;top:0;left:0;width:1600px;height:1000px;transform-origin:0 0;box-shadow:0 12px 26px #5b603922}.wb-canvas{position:absolute;inset:0;width:1600px;height:1000px;display:block}.wb-canvas:focus-visible{outline:4px solid #91aa75}.wb-objects{position:absolute;inset:0;pointer-events:none}.wb-object{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:0;padding:0;cursor:grab;font:inherit;text-align:left;transition:left .18s ease-out,top .18s ease-out;touch-action:none;color:#4a5341}.wb-object.is-dragging{transition:none;cursor:grabbing;z-index:4}.wb-object.is-selected{outline:3px dashed #bc8861;outline-offset:9px}.wb-object:focus-visible{outline:4px solid #9daa6e;outline-offset:9px}.wb-note{background:var(--note-color);border-radius:6px;box-shadow:0 8px 13px #666b3f1d;display:flex;flex-direction:column;overflow:hidden}.wb-note-time{display:block;width:100%;padding:9px 17px;background:#ffffff4a;font-size:15px;min-height:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-note-text{display:block;padding:18px;font-size:22px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden}.wb-character{background:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.wb-friend{display:block;width:160px;height:180px;transform-origin:50% 100%;flex-shrink:0}.wb-friend .garden-character{width:160px;height:180px}.wb-speech{position:absolute;bottom:175px;left:0;width:100%;padding:15px 18px;background:#fffefb;border:2px solid #d8e0ce;border-radius:22px;box-shadow:0 5px 10px #4f624112;font-size:19px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;max-height:165px;overflow:auto}.wb-speech:after{content:'';position:absolute;bottom:-10px;left:60%;width:18px;height:18px;transform:rotate(45deg);background:#fffefb;border-right:2px solid #d8e0ce;border-bottom:2px solid #d8e0ce}.wb-owner{font-size:15px;color:#6b8267;white-space:nowrap;max-width:250px;overflow:hidden;text-overflow:ellipsis}.wb-friend[data-motion=sway]{animation:wb-sway 2.6s ease-in-out infinite alternate}.wb-friend[data-motion=hop]{animation:wb-hop 1.8s ease-in-out infinite}.wb-stage[data-tool=pen],.wb-stage[data-tool=link]{cursor:crosshair}.wb-stage[data-tool=eraser]{cursor:cell}.wb-stage[data-tool=pen] .wb-object{pointer-events:none}.wb-inspector{border-left:1px solid #d8dfce;padding:22px 17px;max-height:600px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.wb-inspector h3{font-size:16px;margin:0 0 16px;font-weight:600}.wb-help{font-size:11px;line-height:1.9;color:#8b997c}.wb-inspector>.wb-button{margin:4px 0}.wb-field{display:flex;flex-direction:column;gap:8px;margin:16px 0;font-size:11px;color:#7b8e71}.wb-field input,.wb-field textarea,.wb-field select{font:inherit;font-size:13px;color:#45664c;background:#fffdf6;border:1px solid #d5ddc8;border-radius:8px;padding:11px;width:100%;resize:vertical;line-height:1.7;box-sizing:border-box}.wb-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:18px 0}.wb-palette .wb-button{font-size:9px;padding:8px 2px;min-height:30px}.wb-reorder{display:flex;gap:7px}.wb-reorder .wb-button{flex:1;font-size:10px}.wb-delete{color:#a7896e;margin-top:20px!important}.wb-friends{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:16px 0}.wb-friends .wb-button{padding:3px;border-radius:10px;font-size:8px;min-width:0}.wb-friends svg{width:50px;height:57px;margin:auto}.wb-friends .wb-button[aria-pressed=true]{background:#e6edd7;border-color:#adc48e}.wb-inventory{font-size:11px;margin-top:25px}.wb-inventory summary{cursor:pointer}.wb-inventory .wb-button{display:block;margin-top:6px;width:100%;font-size:10px;text-align:left}.wb-empty{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);width:90%;text-align:center;color:#8d9e7e}.wb-empty>span{font-size:55px;color:#a3b78b}.wb-empty h3{font-size:18px;font-weight:600;color:#52734f}.wb-empty p{font-size:12px}.wb-empty .wb-button{margin:5px}.wb-zoom{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:#fffdf6e8;padding:3px;border:1px solid #d6dfc8;border-radius:11px;white-space:nowrap}.wb-zoom .wb-button{border:0;min-height:28px;padding:4px 9px;font-size:10px;background:none}.wb-hint{font-size:10px;line-height:1.8;color:#8b9b7d;padding:12px 20px;border-top:1px solid #d8dfce}.wb-dialog{max-width:min(900px,94vw);max-height:90vh;overflow:auto;padding:24px;background:#fcfdf5;border:1px solid #d8dfce;border-radius:18px;color:#496849}.wb-dialog::backdrop{background:#2e423e77}.wb-dialog img{width:100%;display:block;margin:18px 0}.wb-dialog p{font-size:12px;line-height:1.8}.wb-dialog .wb-button{margin:5px}.whiteboard :focus-visible{outline:3px solid #b68e62;outline-offset:3px}.workshop-callout{margin:25px 0;padding:26px;border:1px solid #d6dfc6;border-radius:17px;background:#f2f2e3}.workshop-callout h2{font-size:25px}.workshop-callout p{font-size:13px;line-height:1.9;color:#7e9272}.shell:has(.whiteboard){grid-template-columns:130px minmax(0,1fr)}.shell:has(.whiteboard) .sidebar{padding:25px 14px}.shell:has(.whiteboard) .brand{font-size:30px}.shell:has(.whiteboard) .side-note,.shell:has(.whiteboard) .brand-caption{display:none}.main:has(.whiteboard){max-width:none;padding:20px}.main:has(.whiteboard) .room-heading{margin-top:12px}.main:has(.whiteboard) .room-title{font-size:24px;margin:8px 0}.main:has(.whiteboard) .room-tools .button{font-size:10px;padding:7px}
@keyframes wb-sway{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-4px)}}@keyframes wb-hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-17px) rotate(3deg)}}
@media(max-width:1100px){.shell:has(.whiteboard){grid-template-columns:1fr}.shell:has(.whiteboard) .sidebar{display:none}}
@media(max-width:850px){.main:has(.whiteboard){padding:12px}.wb-body{grid-template-columns:1fr}.wb-stage{height:480px}.wb-inspector{max-height:420px;border-left:0;border-top:1px solid #d8dfce}.wb-friends{grid-template-columns:repeat(6,1fr)}.wb-field{max-width:600px}.wb-heading{padding:18px;gap:10px}.wb-heading h2{font-size:20px}.wb-heading .eyebrow{font-size:7px;letter-spacing:1px}.wb-status{font-size:10px}.wb-toolbar{gap:4px;padding:0 12px 10px}.wb-tool{min-width:60px;padding:7px}.wb-actions{padding:0 16px 13px}.wb-palette{max-width:360px}.wb-reorder{max-width:300px}}
@media(max-width:450px){.wb-heading{display:block}.wb-status{display:block;margin-top:9px}.wb-tool{min-width:0;flex:1;flex-direction:column;gap:3px;font-size:9px;padding:6px 4px}.wb-stage{height:410px}.wb-friends{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){.wb-friend{animation:none!important}.wb-object{transition:none}}

/* Keep the shared paper close to the top, with room controls still reachable. */
.main:has(.whiteboard) .topbar{height:42px}.main:has(.whiteboard) .room-heading{margin:12px 0 8px}.main:has(.whiteboard) .room-heading .eyebrow{display:none}.main:has(.whiteboard) .room-view-tabs{margin:6px 0}.main:has(.whiteboard) .room-view-tabs .button{margin:0;padding:9px 14px}.main:has(.whiteboard) .room-tools .button{margin-top:4px;margin-bottom:4px}

.game-workshop{border-color:#aebf91;background:#f5f5e7}.game-workshop .game-icon{background:#e6ecd7;color:#456655}.game-workshop .game-meta{font-weight:700;color:#365e50}

/* One room frame and one selection pattern for every activity. */
.shell:has(.activity-room){grid-template-columns:130px minmax(0,1fr)}.shell:has(.activity-room) .sidebar{padding:25px 14px}.shell:has(.activity-room) .brand{font-size:30px}.shell:has(.activity-room) .side-note,.shell:has(.activity-room) .brand-caption{display:none}.main.activity-room{max-width:none;padding:20px}.activity-room .topbar{height:42px}.activity-room .room-heading{margin:12px 0 8px}.activity-room .room-heading .eyebrow{display:none}.activity-room .room-title{font-size:24px;margin:8px 0}.activity-room .room-tools .button{font-size:11px;padding:8px 12px;margin:4px 6px 4px 0}.activity-room .people{margin:16px 0}.activity-room .bridge-panel{margin:12px 0;padding:12px 0}.activity-room .identity-panel{margin:12px 0}.activity-room .activity-surface,.activity-room .whiteboard{background:#fffef9;border:1px solid #d8dfce;border-radius:16px;margin:16px 0}.game-selection{padding:20px 24px;margin:20px 0;background:#f0f3e8;border:1px solid #d8dfce;border-radius:14px}.game-selection h2{font-size:20px;margin:0 0 8px}.game-selection .help{font-size:12px}.game-workshop{background:#fffef9;border-color:var(--line)}.wb-button,.wb-tool{font-size:12px}.activity-room .host-controls{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:12px}
@media(max-width:1100px){.shell:has(.activity-room){grid-template-columns:1fr}.shell:has(.activity-room) .sidebar{display:none}}
@media(max-width:850px){.main.activity-room{padding:12px}.game-selection{padding:16px}.activity-room .room-heading{align-items:flex-start}}

/* Evidence stays compact on the paper; the inspector holds the readable original. */
.wb-canvas{height:100%;}.wb-note-text{flex:1;min-height:0}.wb-note-evidence{display:flex;align-items:center;gap:8px;padding:5px 12px;background:#ffffff50;min-height:32px;font-size:13px;flex-shrink:0}.wb-note-evidence img{width:42px;height:30px;object-fit:cover;border-radius:4px}.wb-evidence{margin:22px 0;padding-top:12px;border-top:1px solid #d8dfce}.wb-evidence h4{font-size:14px;margin:6px 0}.wb-evidence input,.wb-search,.wb-import textarea{font:inherit;width:100%;box-sizing:border-box;border:1px solid #d5ddc8;background:#fffdf6;border-radius:8px;padding:10px;font-size:12px;margin:5px 0;color:#45664c}.wb-evidence input[type=file]{font-size:10px;padding:8px}.wb-source{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:12px;overflow-wrap:anywhere}.wb-source a{flex:1;color:#466d61}.wb-source .wb-button{padding:5px;font-size:10px;min-height:28px}.wb-proof-preview{padding:6px;width:100%;margin:10px 0}.wb-proof-preview img{width:100%;max-height:160px;object-fit:contain;display:block;border-radius:5px}.wb-proof-preview span{display:block;font-size:10px;margin:6px}.wb-event-list{max-height:260px;overflow:auto;overscroll-behavior:contain}.wb-event-list .wb-button{white-space:pre-line;line-height:1.7;padding:8px 10px}.wb-event-list [aria-current=true]{background:#e6ecd7;border-color:#adc48e}.wb-import{width:540px}.wb-import textarea{font-size:14px;line-height:1.8;resize:vertical}.wb-status{font-variant-numeric:tabular-nums}

@media(min-width:851px){.wb-body{grid-template-columns:minmax(0,1fr) 290px}}

/* Landing concept: an after-school game party. Scoped to the entrance. */
.shell:has(.landing){display:block;background:#fffaf0;color:#25243a;--green:#bd321e;--muted:#575267;--line:#d8d2c5}
.shell:has(.landing) .sidebar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:18px max(5vw,24px);border:0;border-bottom:1px solid #e5ddce;background:#fffaf0}
.shell:has(.landing) .brand{font-size:42px;letter-spacing:-3px;color:#303bb3;line-height:1}
.shell:has(.landing) .brand-caption,.shell:has(.landing) .side-note{display:none}
.shell:has(.landing) .nav{display:flex;margin:0;gap:12px;align-items:center}
.shell:has(.landing) .nav-item{margin:0;font-size:12px;padding:10px 16px;border-radius:30px}
.shell:has(.landing) .selected{background:#ffe354;color:#25243a}
.landing{max-width:none;padding:0!important}
.landing>.topbar{display:none}
.landing .garden-hero{background:#fff8e5;padding:40px max(5vw,24px) 40px;grid-template-columns:1fr 1.18fr;gap:30px;min-height:560px;border-bottom:1px solid #e5ddce;overflow:hidden}
.landing .hero-copy{position:relative;z-index:2}
.landing .garden-hero .eyebrow{font-size:15px;letter-spacing:.12em;color:#303bb3}
.landing .garden-hero h1{font-size:clamp(42px,4.9vw,70px);font-weight:900;line-height:1.18;letter-spacing:-.06em;margin:22px 0 24px;white-space:normal}
.landing .hero-title-pop{display:block;color:#315844;transform:rotate(-3deg);transform-origin:left center;text-decoration:underline;text-decoration-color:#ffe354;text-decoration-thickness:.16em;text-underline-offset:.05em;text-decoration-skip-ink:none}
.landing .garden-hero .lead{color:#343249;font-size:15px;line-height:1.9;max-width:510px}
.landing .hero-badges{gap:7px;margin-top:20px}
.landing .hero-badges span{background:#fffdf6;border:1px solid #e5ddce;color:#343249;font-size:11px;font-weight:600;padding:6px 10px}
.landing .hero-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:26px}
.landing .hero-cta{margin:0;background:#b84326;border:1px solid #b84326;box-shadow:0 4px 0 #8f331b;border-radius:12px;font-size:16px;padding:16px 23px;color:white}
.landing .hero-browse{font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.landing .button{transition:transform .16s,box-shadow .16s}
.landing .button:hover{transform:translateY(-2px)}
.landing .hero-cta:active{transform:translateY(3px);box-shadow:0 1px 0 #8f331b}
.landing .garden-illustration{height:460px;max-width:610px;width:100%;margin:auto;transform:none}
.landing .garden-illustration:before{inset:38px 0 54px;background:#e2f1f4;border:0;border-radius:48% 52% 47% 53%;transform:rotate(-8deg)}
.landing .garden-illustration:after{width:75%;left:13%;bottom:72px;height:28px;background:#3158440c}
.landing .garden-speech{top:4px;left:13%;font-size:14px;font-weight:700;letter-spacing:0;background:#fffdf8;border:1px solid #d9e5e4;border-radius:18px 18px 18px 2px;box-shadow:0 4px 12px #31584409;padding:15px 22px;z-index:5;transform:rotate(-8deg)}
.landing .hero-friend{filter:drop-shadow(0 9px 6px #31584412)}
.landing .hero-friend-0{width:43%;left:-4%;bottom:72px;transform:rotate(-13deg);z-index:3}
.landing .hero-friend-1{width:40%;left:31%;bottom:61px;transform:rotate(8deg);z-index:4}
.landing .hero-friend-2{width:35%;right:-3%;bottom:96px;transform:rotate(12deg);z-index:3}
.landing .hero-friend-3{width:29%;left:28%;top:46px;transform:rotate(-8deg)}
.landing .hero-friend-4{width:28%;right:7%;top:19px;transform:rotate(9deg)}
.landing .garden-spark{color:#efb13f;font-size:28px;z-index:4}
.landing .spark-one{left:0;top:65px}.landing .spark-two{right:0;top:0;color:#e9b263;font-size:38px}
.landing .hero-play-cards{position:absolute;bottom:1px;left:6%;right:0;display:flex;justify-content:center;gap:12px;z-index:6}
.landing .hero-play-card{width:118px;min-height:50px;display:flex;align-items:center;justify-content:center;flex-direction:row;gap:8px;background:#fffdf6;color:#315844;border:1px solid #dedfd0;border-radius:14px;box-shadow:0 4px 0 #dedfd05c;font-size:12px;font-weight:700;transform:rotate(-4deg);transition:transform .18s}
.landing .hero-play-card:nth-child(2){background:#fffdf6;color:#315844;transform:translateY(-3px) rotate(3deg)}
.landing .hero-play-card:nth-child(3){background:#fffdf6;color:#315844;transform:rotate(5deg)}
.landing .hero-play-card:hover{transform:translateY(-12px) rotate(0deg)}
.landing .play-card-icon{font-size:22px;line-height:1.1;font-family:inherit}
.landing .play-ribbon{background:#ffdf75;color:#315844;display:flex;justify-content:center;gap:7vw;padding:18px 24px;font-size:14px;font-weight:700}
.landing .play-ribbon span{display:flex;align-items:center;gap:12px}.landing .play-ribbon b{color:#815924;font-size:12px}
.landing .start-panel,.landing>.section-heading,.landing>.game-picker,.landing>.footer{max-width:1200px;width:calc(100% - 10vw);margin-left:auto;margin-right:auto}
.landing .start-panel{margin-top:46px;margin-bottom:48px;background:#fff;border:1px solid #e5ddce;border-radius:22px;box-shadow:0 5px 18px #70604208;padding:30px 34px;gap:36px}
.landing .start-panel h2{font-size:27px;font-weight:800}.landing .start-panel .eyebrow{color:#303bb3}
.landing .start-panel .primary{background:#b84326;color:white;border-color:#b84326}
.landing .start-panel .secondary{background:#303bb3;color:white;border-color:#303bb3}
.landing .start-panel .help,.landing .start-panel p{color:#575267}
.landing .input{background:#fffaf0;border:1px solid #aaa3b5;color:#25243a}
.landing .join-box{border-color:#d8d2c5}
.landing .section-heading h2{font-size:30px;letter-spacing:-.04em}
.landing .game-selection{background:#ebeaff;border:1px solid #c7c1f0;padding:18px 24px;color:#303bb3}
.landing .game-selection .help{color:#4d4866}
.landing .game-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.landing .game-card{background:#fff;border:2px solid #d8d2c5;padding:20px;border-radius:18px}
.landing .game-card .game-icon{background:#ffe354;color:#25243a;height:96px;font-family:inherit;font-weight:800}
.landing .game-card:nth-child(4n+2) .game-icon{background:#b9ed94;color:#25243a}
.landing .game-card:nth-child(4n+3) .game-icon{background:#ffb3ca;color:#25243a}
.landing .game-card:nth-child(4n) .game-icon{background:#dcd9ff;color:#303bb3}
.landing .game-card.active{border-color:#303bb3;box-shadow:4px 4px 0 #303bb3;background:#f4f3ff}
.landing .game-card.active:after{color:#303bb3}.landing .game-card p{color:#575267}.landing .game-card h3{font-size:18px}.landing .game-card .eyebrow{color:#575267}
.landing .game-card{scroll-margin-top:24px}.landing #start,.landing #games{scroll-margin-top:24px}
.landing .footer{color:#575267;font-size:11px;padding:40px 0}
@media(min-width:761px) and (max-width:1050px){.landing .garden-hero{gap:15px;padding-top:35px;padding-bottom:35px}.landing .garden-illustration{height:380px}.landing .hero-play-card{width:96px;min-height:46px}.landing .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.landing .hero-actions{gap:18px}}
@media(max-width:760px){
.shell:has(.landing) .sidebar{padding:15px 20px;flex-wrap:nowrap;gap:12px}.shell:has(.landing) .brand{font-size:34px}.shell:has(.landing) .nav{gap:0}.shell:has(.landing) .nav-item{font-size:10px;padding:8px}.shell:has(.landing) .nav-item.selected{display:none}
.landing .garden-hero{grid-template-columns:1fr;gap:10px;padding:22px 22px 24px;min-height:0}
.landing .garden-hero .eyebrow{font-size:12px}.landing .garden-hero h1{font-size:clamp(38px,8.7vw,52px);margin:12px 0 15px;line-height:1.16}.landing .garden-hero .lead{font-size:13px;line-height:1.8;margin:0;white-space:normal}
.landing .hero-badges{margin-top:15px;gap:5px}.landing .hero-badges span{font-size:9px;padding:5px 8px}.landing .hero-actions{margin-top:20px;gap:18px}.landing .hero-cta{font-size:14px;padding:13px 17px}.landing .hero-browse{font-size:11px}
.landing .garden-illustration{height:295px;max-width:390px;margin:10px auto 0}.landing .garden-illustration:before{inset:20px 1% 44px}.landing .garden-speech{font-size:12px;top:0;padding:11px 14px;left:17%}.landing .hero-friend-0{width:39%;left:-3%;bottom:46px}.landing .hero-friend-1{width:36%;left:31%;bottom:43px}.landing .hero-friend-2{width:33%;right:-3%;bottom:66px}.landing .hero-friend-3{width:26%;top:35px;left:27%}.landing .hero-friend-4{width:25%;top:22px;right:7%}.landing .spark-one{top:38px;font-size:22px}.landing .spark-two{font-size:28px}.landing .hero-play-cards{gap:12px;left:0}.landing .hero-play-card{min-height:42px;width:92px;font-size:11px;border-radius:12px;gap:5px}.landing .play-card-icon{font-size:19px}
.landing .play-ribbon{padding:16px 12px;gap:15px;flex-wrap:wrap;font-size:11px}.landing .play-ribbon span{gap:5px}.landing .play-ribbon b{font-size:10px}
.landing .start-panel,.landing>.section-heading,.landing>.game-picker,.landing>.footer{width:calc(100% - 40px)}.landing .start-panel{padding:24px;gap:22px;margin-top:30px;margin-bottom:32px}.landing .start-panel h2{font-size:24px}.landing .section-heading h2{font-size:23px}.landing .section-heading{align-items:flex-start;gap:10px}.landing .section-heading>span{font-size:8px;padding-top:12px}.landing .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.landing .game-card{padding:14px}.landing .game-card h3{font-size:16px}.landing .game-card .eyebrow{font-size:8px}.landing .game-card .game-icon{height:72px}.landing .game-selection{padding:16px}
}

/* Voice and arrivals are illustrative; no microphone or live presence is used. */
.landing .garden-speech{display:flex;align-items:center;gap:10px}
.hero-voice{display:inline-flex;gap:3px;align-items:center;height:20px;flex:none}
.hero-voice i{display:block;width:3px;height:9px;border-radius:3px;background:#6c9991;transform-origin:center}
.hero-voice i:nth-child(2),.hero-voice i:nth-child(4){height:15px}.hero-voice i:nth-child(3){height:20px}
.landing .garden-illustration .spark-two{display:none}
.hero-signals{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-voice-ring{position:absolute;inset:42px 3% 67px;border:1.5px solid #7cafb342;border-radius:50%;transform:rotate(-8deg)}
.hero-voice-ring.ring-two{inset:24px -1% 53px;border-color:#7cafb326}
.hero-reply{position:absolute;background:#fffdf8;border:1px solid #d9e5e4;border-radius:15px 15px 4px 15px;padding:8px 12px;font-size:12px;font-weight:700;color:#527567;box-shadow:0 3px 10px #31584406;white-space:nowrap}
.reply-hello{left:0;top:18%;rotate:-8deg}.reply-play{right:0;top:2%;rotate:7deg}
.hero-motion-control{position:absolute;right:0;bottom:-27px;border:0;background:transparent;color:#617568;font-size:10px;text-decoration:underline;text-underline-offset:3px;padding:5px;z-index:7}
.landing .hero-friend{transform-origin:50% 85%;--friend-step:0s}
.landing .hero-friend-1{--friend-step:.7s}.landing .hero-friend-2{--friend-step:1.4s}.landing .hero-friend-3{--friend-step:2.1s}.landing .hero-friend-4{--friend-step:2.8s}
@media(prefers-reduced-motion:no-preference){
.landing .hero-friend{animation:hero-gather 1.1s cubic-bezier(.2,.8,.3,1) both,hero-chat 5s ease-in-out 1.2s infinite;animation-delay:0s,calc(1.2s + var(--friend-step))}
.landing .hero-friend-0{--arrive-x:-24px}.landing .hero-friend-1{--arrive-x:0px}.landing .hero-friend-2{--arrive-x:24px}.landing .hero-friend-3{--arrive-x:-12px}.landing .hero-friend-4{--arrive-x:14px}
.hero-voice i{animation:hero-sound 1.1s ease-in-out infinite alternate}.hero-voice i:nth-child(2){animation-delay:-.5s}.hero-voice i:nth-child(3){animation-delay:-.8s}.hero-voice i:nth-child(4){animation-delay:-.2s}.hero-voice i:nth-child(5){animation-delay:-.6s}
.hero-voice-ring{animation:hero-call 5.8s ease-out infinite}.hero-voice-ring.ring-two{animation-delay:-2.9s}
.reply-hello{animation:hero-reply 7s ease-in-out infinite}.reply-play{animation:hero-reply 7s ease-in-out -3.5s infinite}
.landing [data-motion=paused] .hero-friend,.landing [data-motion=paused] .hero-voice i,.landing [data-motion=paused] .hero-voice-ring,.landing [data-motion=paused] .hero-reply{animation-play-state:paused}
@keyframes hero-gather{from{translate:var(--arrive-x,0px) 10px}to{translate:0 0}}
@keyframes hero-chat{0%,38%,100%{translate:0 0;rotate:0deg}48%{translate:0 -6px;rotate:-2deg}58%{translate:0 0;rotate:1deg}68%{translate:0 -3px;rotate:0deg}}
@keyframes hero-sound{from{scale:1 .35}to{scale:1 1}}
@keyframes hero-call{0%{scale:.92;opacity:0}20%{opacity:.8}85%,100%{scale:1.08;opacity:0}}
@keyframes hero-reply{0%,15%,80%,100%{opacity:.3;translate:0 3px}25%,60%{opacity:1;translate:0 -3px}}
}
@media(prefers-reduced-motion:reduce){.hero-motion-control{display:none}}
@media(max-width:1050px){.hero-reply{font-size:10px;padding:6px 9px}.reply-hello{top:28%;left:-2%}.reply-play{top:2%;right:0}}
@media(max-width:760px){
.landing .garden-speech{gap:7px;padding:10px 12px;left:13%;font-size:11px}.hero-voice{height:17px;gap:2px}.hero-voice i{width:2px}.hero-voice i:nth-child(3){height:17px}
.hero-voice-ring{inset:27px 2% 53px}.hero-voice-ring.ring-two{inset:15px -2% 41px}
.reply-hello{top:30%;left:0}.reply-play{top:-2%;right:0}.hero-reply{font-size:9px;padding:5px 8px}
.hero-motion-control{font-size:9px;bottom:-23px}.landing .garden-hero{padding-bottom:34px}
}

/* Let visitors picture a turn before asking them to make a room. */
.landing .hero-teaser{background:#fffdf8;border:1px solid #e8ddbf;border-left:4px solid #e9b953;border-radius:12px;padding:14px 17px;margin:20px 0 0;max-width:450px}
.teaser-label{font-size:11px;color:#856239;font-weight:700}.landing .teaser-prompt{font-size:17px;font-weight:750;line-height:1.6;letter-spacing:-.02em;margin:7px 0;color:#315844}
.teaser-invite{font-size:11px;color:#5e6d5c}.teaser-link{display:block;padding:7px 0 0;border:0;background:none;color:#8d3d23;font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.landing .garden-hero{padding-top:30px;padding-bottom:34px}.landing .garden-hero h1{margin-top:16px;margin-bottom:17px}
.landing .hero-actions{margin-top:20px;gap:16px}.landing .hero-badges{margin-top:14px}
.landing .game-card .eyebrow{letter-spacing:0;font-size:11px;line-height:1.6;font-weight:700;display:block;color:#527567}.landing .game-card p{line-height:1.8}.landing .game-meta{font-size:11px;letter-spacing:0;font-weight:700}
.landing-rules{font-size:12px;margin:12px 0;color:#575267}.landing-rules summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}.landing-rules .help{margin:10px 0;max-width:850px;line-height:1.9}
.landing .start-panel h2{font-size:24px}.landing .hero-browse{font-size:12px}
@media(max-width:760px){.landing .garden-hero{padding:20px 22px 34px}.landing .hero-teaser{padding:11px 13px;margin-top:15px}.landing .teaser-prompt{font-size:14px;line-height:1.5;margin:5px 0}.teaser-label,.teaser-invite{font-size:10px}.teaser-link{font-size:11px;padding-top:5px}.landing .garden-hero .eyebrow{font-size:11px;letter-spacing:.03em}.landing .hero-actions{margin-top:15px;gap:14px}.landing .hero-browse{font-size:10px}.landing .start-panel h2{font-size:22px}.landing .game-card .eyebrow{font-size:10px}}

.game-card .eyebrow{letter-spacing:0;line-height:1.6;display:block}

/* Voice follows the person; the audience can cheer without leaving the game. */
body:has(.live-dock){padding-bottom:150px}.live-stage-people{scroll-margin-top:20px}.live-stage-people .live-cast{display:flex;flex-direction:column;gap:18px;margin-top:22px}.live-role-group h3{font-size:12px;font-weight:750;margin:0 0 12px;color:#486957}.live-role-people{display:flex;flex-wrap:wrap;gap:12px}.live-person{position:relative;width:125px;padding:8px 10px 10px;text-align:center;border:1px solid #d8e3d3;background:#fffdf8;border-radius:18px;transition:background .2s,border-color .2s}.live-person-art{position:relative;width:80px;height:90px;margin:auto;isolation:isolate}.live-person-art>.garden-character{width:80px;height:90px;transform-origin:50% 95%}.live-person-avatar{position:absolute;right:-3px;bottom:0;width:27px;height:27px;object-fit:cover;border-radius:50%;border:2px solid #fffdf8;z-index:2}.live-person strong{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere;margin-top:5px}.live-person small{display:block;font-size:9px;line-height:1.5;color:#687b67;margin-top:3px}.live-person-voice{display:block;min-height:24px;font-size:9px;color:#71846c;line-height:1.5;margin-top:6px}.live-person.is-speaking{background:#eaf5d6;border-color:#80b45d;box-shadow:0 0 0 3px #95bd6f30}.live-person.is-speaking .garden-character{transform:translateY(var(--voice-rise,0px)) rotate(var(--voice-tilt,0deg)) scale(var(--voice-scale,1))}.live-person.is-speaking .live-person-voice{color:#2b723e;font-weight:800}.live-person-art:before{content:"";position:absolute;inset:13px 0 0;border-radius:50%;z-index:-1;opacity:0;border:3px solid #81b64e}.live-person.is-speaking .live-person-art:before{opacity:var(--voice-glow,0);transform:scale(var(--voice-ring,1))}.live-person-reaction{position:absolute;right:-12px;top:-5px;font-size:31px;z-index:3;filter:drop-shadow(0 3px 2px #52764120)}.live-person.is-cheering{border-color:#e2ae4c}.live-person.is-cheering .live-person-reaction{animation:person-cheer .5s ease-out}.live-reaction-feed{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.live-reaction-row{font-size:11px;padding:6px 10px;border-radius:20px;background:#fff4cc;color:#5a623e;overflow-wrap:anywhere}.live-dock{position:fixed;z-index:30;bottom:12px;left:50%;transform:translateX(-50%);width:min(620px,calc(100vw - 24px));padding:9px 16px 7px;background:#fffef6f7;color:#2f523e;border:1px solid #c3d3a8;border-radius:20px;box-shadow:0 8px 34px #30463230;backdrop-filter:blur(12px)}.live-dock-status{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.live-now{font-size:11px;font-weight:650;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.live-now.is-speaking{color:#247337}.live-stage-link{border:0;background:none;font-size:10px;color:#4f705b;padding:3px;white-space:nowrap;cursor:pointer}.live-dock .live-cheers{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.live-dock .live-cheer{padding:5px 2px;min-width:44px;min-height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;border-color:#dce4cf;background:#f7faed}.live-dock .live-cheer>span{font-size:23px;line-height:1.1}.live-latest{font-size:10px;text-align:center;color:#6a765b;margin:5px 0 0;min-height:15px;line-height:1.5}.live-dock .live-effects{overflow:visible}.live-burst{position:absolute;bottom:100%;left:12%;display:flex;flex-direction:column;align-items:center;max-width:140px;animation:live-name-burst 3.2s cubic-bezier(.16,.8,.2,1) forwards;pointer-events:none}.live-burst b{font-size:54px;line-height:1.2;filter:drop-shadow(0 5px 4px #465d3c20)}.live-burst small{max-width:140px;padding:4px 8px;border-radius:12px;background:#fff4c8;color:#39543e;font-size:10px;font-weight:750;overflow-wrap:anywhere;box-shadow:0 3px 8px #39543e15}.burst-1{left:25%}.burst-2{left:39%}.burst-3{left:53%}.burst-4{left:67%}.burst-5{left:78%}
@keyframes person-cheer{0%{transform:scale(.25) rotate(-20deg)}60%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1)}}@keyframes live-name-burst{0%{opacity:0;transform:translateY(25px) scale(.5) rotate(-12deg)}12%{opacity:1;transform:translateY(-40px) scale(1.2) rotate(6deg)}60%{opacity:1}100%{opacity:0;transform:translateY(-250px) scale(.8) rotate(-5deg)}}
.is-quiet .live-person-art>.garden-character,.is-quiet .live-person-art:before,.is-quiet .live-person-reaction,.is-quiet .live-burst{animation:none!important}.is-quiet .live-person-art:before{opacity:0}.is-quiet .live-burst{display:none}@media(prefers-reduced-motion:reduce){.live-person-art>.garden-character,.live-person-art:before,.live-person-reaction,.live-burst{animation:none!important}.live-burst,.live-person-art:before{display:none}}@media(max-width:600px){.live-stage-people{padding:20px 14px}.live-role-people{gap:8px}.live-person{width:calc((100% - 16px)/3);min-width:84px;padding:7px 4px}.live-person-art{width:65px;height:75px}.live-person-art>.garden-character{width:65px;height:75px}.live-dock{bottom:max(8px,env(safe-area-inset-bottom));padding:8px 10px 6px;border-radius:17px}.live-stage-people h2{font-size:21px}}

/* Ivory tiles on a felt table. All table information is shared with spectators. */
.mj-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;flex-wrap:wrap}.mj-caption{font-size:.86rem;font-weight:700;color:#49675f}.mj-rule-button{position:sticky;top:12px;background:#fff8da;color:#204b3e;border:2px solid #315f4d;font-size:.85rem;z-index:2}.mj-table{padding:24px;background:radial-gradient(ellipse at 50% 15%,#356d5d,#173e34);color:#f8f1da;border:7px solid #b38a58;border-radius:24px;box-shadow:inset 0 0 0 2px #dfba80,inset 0 0 32px #102b25,0 8px 0 #785638;position:relative;overflow:hidden}.mj-table:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0l6 6M6 0L0 6' stroke='%23fff' stroke-width='.3'/%3E%3C/svg%3E")}.mj-table-center{text-align:center;position:relative;margin:0 0 24px}.mj-table-label{font-size:.68rem;letter-spacing:.2em;color:#d5c49b}.mj-table-center h2{font-size:clamp(1.05rem,3vw,1.7rem);color:#fff5d6;margin:12px 0}.mj-table-meta{font-size:.8rem;color:#c8ded2;margin:8px 0}.mj-indicators{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.7rem}.mj-pot{padding:6px 10px;border:1px solid #b8c79d66;border-radius:20px}.mj-rivers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;position:relative}.mj-seat{padding:14px;background:#102f299c;border:1px solid #789b856b;border-radius:12px;min-width:0}.mj-current{border-color:#f2d26b;box-shadow:0 0 0 1px #f2d26b55}.mj-seat-header{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-size:.82rem}.mj-seat-header strong{overflow-wrap:anywhere}.mj-wind{padding:3px 6px;color:#ccded3;background:#436652;border-radius:4px;font-size:.7rem;white-space:nowrap}.mj-dealer{color:#ffe194}.mj-points{margin-left:auto;color:#ffe6a7;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:800}.mj-riichi{color:#ffbcc0;font-weight:800;font-size:.72rem}.mj-sticks{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 12px}.mj-stick{background:linear-gradient(#fff,#eee4ca);border-radius:2px;color:#364c53;padding:2px 8px 2px 15px;font-size:.59rem;box-shadow:0 2px 0 #b9ac8b;position:relative;white-space:nowrap}.mj-stick:before{content:"•••";position:absolute;left:3px;font-size:5px;top:7px;color:#ae3541}.mj-stick-5000:before{content:"•";font-size:10px;top:2px}.mj-stick-1000:before{content:"•";color:#283740;font-size:9px;top:3px}.mj-stick-100:before{color:#283740}.mj-river{display:grid;grid-template-columns:repeat(6,34px);gap:5px 3px;min-height:48px;align-content:start}.mj-empty{grid-column:1/-1;font-size:.75rem;color:#b9d0c0;padding:10px 0}.mj-tile{--tile-w:42px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--tile-w);width:var(--tile-w);height:58px;padding:1px 2px 6px;border:1px solid #e3d5b1;border-radius:5px;background:linear-gradient(105deg,#fffdf5 5%,#f4efd9 76%,#dfd4b6 100%);box-shadow:inset 2px 2px 1px #fff,0 4px 0 #d0bb8c,0 6px 0 #397965,0 7px 3px #071a2570;vertical-align:middle;position:relative;transform:translateY(0);color:#19302e;transition:transform .15s,box-shadow .15s;user-select:none}.mj-tile svg{width:100%;height:100%;filter:drop-shadow(0 .45px .2px #05172330)}.mj-calligraphy{font-family:"YuMincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;font-weight:900}.mj-small{--tile-w:32px;height:44px;padding:1px 1px 4px;box-shadow:inset 1px 1px 1px #fff,0 3px 0 #d0bb8c,0 5px 0 #397965,0 6px 3px #071a2570}.mj-tile:disabled{opacity:.78;cursor:default}.mj-tile:not(:disabled):is(button):hover{transform:translateY(-7px);box-shadow:inset 2px 2px 1px #fff,0 4px 0 #d0bb8c,0 6px 0 #397965,0 12px 8px #071a2570}.mj-tile:is(button):focus-visible{outline:3px solid #e6ad24;outline-offset:3px;transform:translateY(-5px)}.mj-tile:is(button):active{transform:translateY(3px)}.mj-sideways svg{transform:rotate(90deg);width:32px;height:40px}.mj-sideways{background:#fff2c8;border-color:#dab768}.mj-latest{outline:2px solid #f0d273;outline-offset:1px}.mj-claimed{outline:2px solid #ff99a3}.mj-drop{animation:mj-drop .48s cubic-bezier(.2,.8,.3,1)}@keyframes mj-drop{0%{transform:translateY(-42px) rotate(-10deg) scale(1.1);opacity:0}62%{transform:translateY(3px) rotate(2deg);opacity:1}82%{transform:translateY(-3px)}100%{transform:translateY(0)}}.mj-reveal-label{font-size:.72rem;color:#ffe3a8;margin:17px 0 8px}.mj-revealed-hand{display:flex;flex-wrap:wrap;gap:7px 3px;padding-bottom:6px}.mj-own-hand{padding:22px 0 12px}.mj-hand-tiles{display:flex;gap:4px;overflow-x:auto;padding:18px 6px 18px;scrollbar-width:thin;overscroll-behavior-inline:contain}.mj-drawn{margin-left:12px;border-color:#d09924}.mj-riichi-choice{outline:2px solid #c43957;outline-offset:1px}.mj-hand-help{color:#52605a;font-size:.8rem;line-height:1.7}.mj-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 0}.mj-result{margin:26px 0 0;padding:24px;background:#fff8e8;border:2px solid #bf9554;border-radius:16px}.mj-result h3{color:#574526;margin-top:0}.mj-yaku{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.mj-yaku span{background:#f0e4c6;border-radius:20px;padding:5px 10px;font-size:.8rem}.mj-payment{font-size:.87rem;overflow-wrap:anywhere;border-bottom:1px solid #e6d8b5;padding:8px 0}.mj-delta{display:inline-block;margin:5px 12px 0 0;font-size:.8rem;font-weight:700}.mj-rules-dialog{max-width:760px;width:calc(100% - 32px);max-height:85dvh;padding:28px;border:3px solid #8f714b;border-radius:20px;background:#fffaf0;color:#263c35;overflow-y:auto}.mj-rules-dialog::backdrop{background:#10271dcc;backdrop-filter:blur(4px)}.mj-dialog-close{position:sticky;top:0;float:right;z-index:2;background:#fff9ea}.mj-rules-dialog p,.mj-rules-dialog li,.mj-rules-dialog dd{font-size:.88rem;line-height:1.9}.mj-rules-dialog h3{margin-top:28px}.mj-guide-yaku dt{font-size:.9rem;font-weight:800;margin-top:16px}.mj-guide-yaku dd{margin:4px 0;color:#59675f}.mj-rule-example{display:flex;flex-wrap:wrap;gap:6px 2px;padding:14px 0}.mj-group-gap{margin-left:8px}.mj-steps{padding-left:22px}.mj-rules-dialog a{font-size:.76rem;color:#416456}
.geo-difficulty{border:0;padding:0;margin:16px 0;display:flex;gap:10px;flex-wrap:wrap}.geo-difficulty legend{font-size:.85rem;font-weight:800;margin-bottom:8px}.geo-difficulty-option{display:grid;grid-template-columns:20px 1fr;gap:4px 6px;flex:1;min-width:180px;background:#fffdf3;border:2px solid #d9e0c6;border-radius:12px;padding:12px;cursor:pointer}.geo-difficulty-option:has(:checked){border-color:#418368;background:#eaf7df}.geo-difficulty-option input{grid-row:1/3;width:16px;height:16px;margin-top:4px;accent-color:#32765b}.geo-difficulty-option small{font-size:.75rem;line-height:1.5}.geo-level{font-size:.85rem;font-weight:800;color:#447265}.geo-map-wrap{border:2px solid #8cb4bd;border-radius:18px;overflow:hidden;background:#e5f1ed}.geo-map-tools{display:flex;align-items:center;gap:6px;padding:10px;flex-wrap:wrap;background:#f7fcf7;border-bottom:1px solid #b7d3cd}.geo-map-tools .button{font-size:.75rem;padding:8px 11px}.geo-zoom{margin-left:auto;font-size:.8rem;color:#375f66;font-variant-numeric:tabular-nums}.geo-viewport{height:360px;background:#c7e6ef}.geo-world{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline-offset:-4px}.geo-world:focus-visible{outline:3px solid #d6971d}.geo-ocean{fill:#c7e6ef}.geo-graticule{stroke:#9dbfca;stroke-width:.5;vector-effect:non-scaling-stroke}.geo-country{fill:#f6f0d5;stroke:#889d82;stroke-width:.65;vector-effect:non-scaling-stroke}.geo-country-label{fill:#38565b;paint-order:stroke;stroke:#fffdf1;stroke-width:.7px;vector-effect:non-scaling-stroke;pointer-events:none}.geo-pin-halo{fill:#ffc45688;stroke:#e68128;stroke-width:1.5}.geo-pin{fill:#be4b12;stroke:#fff8dd;stroke-width:1}.geo-guess-marker circle{fill:#b64f2b;stroke:#fff4dd;stroke-width:1.5}.geo-guess-marker path{stroke:#b64f2b}.geo-answer-marker circle{fill:#217652;stroke:#fff4dd;stroke-width:2}.geo-answer-marker path{stroke:#217652}.geo-pin-label{fill:#1c473e;font-size:10px;font-weight:800;paint-order:stroke;stroke:#fffbe8;stroke-width:3}.geo-coordinate{margin:0;padding:10px 14px;font-size:.83rem;font-weight:700;color:#345950;min-height:40px}.geo-map-help{display:block;padding:0 14px 12px;font-size:.68rem;line-height:1.6;color:#537270}.geo-answer-title{color:#217652}.geo-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:end}.geo-controls label{flex:1;min-width:100px;font-size:.75rem}.geo-controls .input{width:100%;margin-top:5px}.geo-controls .button{min-height:45px}
@media(max-width:650px){.mj-table{padding:14px 10px;border-width:5px;border-radius:18px}.mj-rivers{grid-template-columns:1fr;gap:10px}.mj-seat{padding:12px}.mj-table-center{margin-bottom:18px}.mj-seat-header{font-size:.74rem}.mj-table-label{font-size:.6rem}.mj-result{padding:18px}.mj-rules-dialog{padding:20px 16px}.mj-rules-dialog .mj-small{--tile-w:28px;height:39px}.mj-toolbar{gap:8px}.mj-rule-button{font-size:.76rem;padding:8px 11px}.mj-caption{font-size:.74rem}.geo-viewport{height:290px}.geo-difficulty-option{min-width:100%;padding:10px}.geo-map-tools .button{font-size:.68rem;padding:8px}.geo-controls .button{flex-basis:100%}.mj-hand-tiles .mj-tile{--tile-w:37px;height:52px}}
@media(prefers-reduced-motion:reduce){.mj-drop{animation:none}.mj-tile{transition:none}}

.mj-toolbar{position:sticky;top:8px;z-index:4;background:#fffaf0ed;padding:8px;border-radius:12px;backdrop-filter:blur(6px)}.mj-rule-button{position:static;margin-left:auto}.mj-sound-button{font-size:.72rem;padding:8px;color:#44685b;background:#f3f6ec;border:1px solid #aec1a0}.mj-river{grid-template-columns:repeat(6,minmax(0,32px))}.mj-river .mj-tile{width:100%;min-width:0}.mj-rules-dialog .mj-dialog-close{min-height:40px}

.geo-guess-marker .geo-pin-label{display:none}.geo-guess-marker:is(:hover,:focus) .geo-pin-label{display:block}.geo-markers g:focus{outline:none}.geo-guess-marker:focus circle{stroke:#d58c1e;stroke-width:3}

/* Keep drawing instructions and zoom controls outside the pointer surface. */
.wb-empty{position:static;transform:none;width:auto;text-align:left;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:12px 20px;background:#fff4c7;border-top:1px solid #e5ddb9;color:#655933}.wb-empty h3,.wb-empty p{margin:0}.wb-empty h3{font-size:15px}.wb-empty p{font-size:12px;line-height:1.6}.wb-empty .wb-button{margin:0}.wb-zoom{position:static;transform:none;display:flex;align-items:center;gap:5px;flex-wrap:wrap;white-space:normal;border:0;border-top:1px solid #d8dfce;border-radius:0;padding:10px 16px;background:#f4f6ed}.wb-zoom .wb-button{min-height:38px;background:#fffdf6;border:1px solid #d6dfc8;font-size:12px;padding:8px 12px}.wb-zoom-title{font-size:12px;margin-right:6px}.wb-zoom-value{font-size:13px;font-weight:700;min-width:48px;text-align:center;font-variant-numeric:tabular-nums}.wb-zoom .wb-button:disabled{opacity:.4}.wb-pen-palette{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.wb-pen-palette .wb-button{border-left:6px solid var(--ink)}.wb-pen-palette [aria-pressed=true]{outline:2px solid var(--ink);outline-offset:1px}.wb-stage[data-tool=pen]{cursor:crosshair}@media(max-width:450px){.wb-zoom{gap:4px;padding:10px}.wb-zoom-title{width:100%}.wb-zoom .wb-button{padding:8px;font-size:11px}.wb-empty{padding:12px}}

.visibility-guide{margin:14px 0;padding:16px 20px;background:#eef5e8;border:1px solid #cedec0;border-radius:14px;color:#385447}.visibility-turn{display:block;font-size:15px}.visibility-turn:before{content:'●';color:#609555;margin-right:8px}.visibility-shared{font-size:13px;line-height:1.75;margin:7px 0}.visibility-details summary{font-size:13px;cursor:pointer;min-height:32px;padding-top:5px;font-weight:600}.visibility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.visibility-card{background:#fffef9;border:1px solid #d7e2ce;border-radius:10px;padding:14px}.visibility-card h3{font-size:13px;margin:0 0 8px}.visibility-card p{font-size:12px;line-height:1.8;margin:0}.visibility-note{font-size:11px;line-height:1.7;color:#647661;margin:8px 0 0}@media(max-width:700px){.visibility-grid{grid-template-columns:1fr}.visibility-guide{padding:14px}.visibility-details summary{line-height:1.6}}

.character-panel{margin:14px 0;border:1px solid #d6dfc8;border-radius:16px;background:#fffef9;color:#385447}.character-summary{display:flex;align-items:center;gap:12px;padding:12px 18px;cursor:pointer;list-style:none}.character-summary::-webkit-details-marker{display:none}.character-summary:after{content:'＋';margin-left:auto;font-size:22px;font-weight:600}.character-panel[open] .character-summary:after{content:'−'}.character-current{width:46px;height:52px;flex-shrink:0}.character-summary-text{display:grid;gap:5px}.character-summary-text strong{font-size:14px}.character-summary-text>span{font-size:12px;color:#738269}.character-picker-body{padding:0 18px 18px;border-top:1px solid #e3e8d9}.character-intro{font-size:13px;line-height:1.8;margin:16px 0}.character-choice-section h3{font-size:13px;margin:18px 0 10px}.character-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}.character-choice{font:inherit;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px 9px;min-height:154px;background:#fafbee;border:1px solid #e0e5d5;border-radius:13px;color:#385447;cursor:pointer}.character-choice svg{width:72px;height:81px;transition:transform .18s ease}.character-choice:hover:not(:disabled) svg{transform:translateY(-5px) rotate(-4deg)}.character-choice[aria-pressed=true]{border:2px solid #739a55;background:#f0f6da;box-shadow:0 3px 0 #b7cfa3}.character-choice-name{font-size:12px;font-weight:600}.character-choice-selected{font-size:10px;color:#4c762b}.character-choice:disabled{cursor:default;opacity:.55}.character-choice:focus-visible,.character-summary:focus-visible{outline:3px solid #b38a5b;outline-offset:3px}.character-picker-note{font-size:11px;color:#7c8875;line-height:1.8;margin:14px 0 0}@media(max-width:450px){.character-summary{padding:10px 12px}.character-picker-body{padding:0 12px 14px}.character-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.character-choice{min-height:137px;padding:10px 3px 7px}.character-choice svg{width:62px;height:70px}.character-choice-name{font-size:11px}}@media(prefers-reduced-motion:reduce){.character-choice svg{transition:none}}

/* Keep companions in sight without covering the game surface. */
.live-surround{position:sticky;top:8px;z-index:24;display:flex;gap:8px;margin:18px 0;background:#fffdf3f5;border:1px solid #dce4c9;border-radius:20px;padding:6px 8px;backdrop-filter:blur(10px);isolation:isolate}
.live-wing{display:contents}.live-companion{position:relative;flex:0 0 78px;text-align:center;padding:4px 3px;border-radius:18px;background:#eff5df80;min-width:0}.live-companion .live-person-art{width:56px;height:60px}.live-companion .garden-character{width:56px;height:60px}.live-companion strong{display:block;font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.live-companion small{display:block;font-size:8px;color:#6d8065;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-companion .live-person-reaction{font-size:27px;right:-6px;top:-5px}.live-companion.is-speaking{background:#e5f3bf;box-shadow:inset 0 0 0 2px #99b660}.live-companion.is-speaking .garden-character{transform:translateY(var(--voice-rise,0px)) rotate(var(--voice-tilt,0deg)) scale(var(--voice-scale,1))}.live-companion.is-speaking .live-person-art:before{opacity:var(--voice-glow,0);transform:scale(var(--voice-ring,1))}.live-companion.is-cheering{background:#fff0b3}.live-companion.is-cheering .garden-character{animation:companion-cheer .7s ease-out}.live-companion.is-cheering .live-person-reaction{animation:person-cheer .5s ease-out}
.live-surround .surround-effects{z-index:3;overflow:hidden;border-radius:18px}.surround-burst{bottom:auto;top:0;left:5%;height:100%;width:150px;max-width:150px;display:grid;grid-template-columns:65px 1fr;grid-template-rows:55px auto auto;gap:0 3px;align-content:center;background:#fff8dbfa;border:1px solid #e7d794;border-radius:18px;padding:3px 8px;animation:surround-pop 3.6s ease-out forwards;box-shadow:0 6px 16px #8eab5526}.surround-burst.burst-1{left:auto;right:5%}.surround-burst .burst-character{width:65px;height:74px;grid-row:1/4;align-self:center}.surround-burst b{font-size:38px;align-self:center}.surround-burst small{font-size:10px;padding:0;background:none;box-shadow:none;line-height:1.3}.surround-burst .burst-role{font-size:8px;font-weight:400;color:#718064}
@keyframes companion-cheer{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-18px) rotate(-12deg) scale(1.15)}65%{transform:translateY(-5px) rotate(10deg)}100%{transform:translateY(0)}}
@keyframes surround-pop{0%{opacity:0;transform:translateY(12px) scale(.7)}12%,80%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(.95)}}
@media(max-width:1199px){.live-surround{overflow-x:auto;scrollbar-width:thin;max-width:100%}.live-companion:nth-child(n){order:0}.live-surround .surround-effects{position:sticky;right:0;flex:0 0 0;overflow:visible}.surround-burst{left:auto;right:12px;top:0;width:150px;height:92px}.surround-burst.burst-1{right:172px}}
@media(min-width:1200px){.shell:has(.activity-room){--companion-sidebar:226px;grid-template-columns:var(--companion-sidebar) minmax(0,1fr)}.shell:has(.whiteboard){--companion-sidebar:84px}.main.activity-room{padding-left:124px;padding-right:124px;max-width:none}.activity-room .live-surround{position:fixed;inset:0;pointer-events:none;border:0;background:none;padding:0;margin:0;backdrop-filter:none}.activity-room .live-wing{position:absolute;top:110px;bottom:160px;width:98px;display:flex;flex-direction:column;align-items:center;gap:12px;overflow-y:auto;scrollbar-width:thin;pointer-events:auto;padding:14px 3px;background:linear-gradient(#eff5df80,#fff9e870);border-radius:48px}.activity-room .wing-left{left:calc(var(--companion-sidebar) + 10px)}.activity-room .wing-right{right:10px}.activity-room .live-companion{flex:0 0 auto;width:90px;padding:10px 3px;background:none}.activity-room .live-companion .live-person-art{width:76px;height:84px}.activity-room .live-companion .garden-character{width:76px;height:84px}.activity-room .live-companion strong{font-size:11px}.activity-room .live-companion small{font-size:9px;white-space:normal}.activity-room .live-companion.is-speaking{background:#e5f3bf}.activity-room .live-companion.is-cheering{background:#fff0b3}.activity-room .surround-effects{overflow:visible}.activity-room .surround-burst{left:calc(var(--companion-sidebar) + 10px);top:130px;width:98px;max-width:98px;height:auto;min-height:180px;display:flex;gap:4px;flex-direction:column;padding:10px 3px}.activity-room .surround-burst.burst-1{left:auto;right:10px;top:250px}.activity-room .surround-burst .burst-character{width:78px;height:88px}.activity-room .surround-burst b{position:absolute;right:0;top:0;font-size:34px}.activity-room .surround-burst small{max-width:90px;overflow-wrap:anywhere;text-align:center}}
.is-quiet .live-companion .garden-character,.is-quiet .live-companion .live-person-art:before,.is-quiet .live-companion .live-person-reaction{animation:none!important}.is-quiet .live-companion .live-person-art:before{display:none}.is-quiet .surround-burst{display:none}@media(prefers-reduced-motion:reduce){.live-companion .garden-character,.live-companion .live-person-art:before,.live-companion .live-person-reaction{animation:none!important}.live-companion .live-person-art:before,.surround-burst{display:none}}

.live-surround{max-width:100%}.main:not(.activity-room) .live-surround{overflow-x:auto;scrollbar-width:thin}
@media(max-width:1199px){html:has(.live-surround){scroll-padding-top:125px}.activity-room button,.activity-room input,.activity-room textarea{scroll-margin-top:125px}}

/* A band made from everyone's little rhythm. */
.ensemble-board{background:linear-gradient(145deg,#fffdf4,#f1f5e5);padding:clamp(16px,3vw,30px)}.ensemble-original{display:inline-block;padding:6px 11px;border-radius:20px;background:#fce8ac;font-size:11px;font-weight:750;color:#725b25}.ensemble-board .question{margin:14px 0 8px;font-size:clamp(24px,3vw,36px)}.ensemble-invite{font-size:14px;line-height:1.8;color:#567347}.ensemble-audio{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 16px;background:#ffffffc9;border:1px solid #dce5cb;border-radius:16px}.ensemble-volume{display:flex;gap:8px;align-items:center;font-size:11px}.ensemble-volume input{width:110px;accent-color:#497440}.ensemble-sound-status{flex-basis:100%;font-size:11px;line-height:1.7;color:#627c56;padding-bottom:7px}.ensemble-beat{margin:20px 0;padding:17px;background:#e5edcc;border-radius:15px;font-size:14px;font-weight:750;line-height:1.6;text-align:center;color:#426131;min-height:56px}.ensemble-config{display:grid;grid-template-columns:minmax(0,1fr) 90px;align-items:center;gap:8px;margin:16px 0}.ensemble-config .button{grid-column:1/-1;margin:0}.ensemble-players{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px;margin:20px 0}.ensemble-player{display:grid;grid-template-columns:50px minmax(0,1fr);gap:3px 8px;align-items:center;background:#fffef7;border:1px solid #e3e6d5;border-radius:18px;padding:12px 10px;min-width:0;transition:background .12s,border-color .12s}.ensemble-friend{grid-column:1;grid-row:1/4;width:50px;height:58px;transform-origin:50% 90%}.ensemble-player strong{font-size:11px;overflow-wrap:anywhere}.ensemble-player>span{font-size:10px}.ensemble-player>small{font-size:9px;color:#769261}.ensemble-player.is-playing{background:#fff0af;border-color:#d8b758}.ensemble-player.is-playing .ensemble-friend{animation:ensemble-hop .23s ease-out}.ensemble-mini{grid-column:1/-1;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:2px;margin-top:7px}.ensemble-mini span{height:8px;background:#edf0e0;border-radius:3px}.ensemble-mini .has-note{background:#97b478}.ensemble-mini .is-current{box-shadow:0 0 0 2px #d59832;background:#ffda66}.ensemble-own{padding:20px;background:#fffefb;border:1px solid #dce5cb;border-radius:20px}.ensemble-own h3{margin:0 0 8px;font-size:19px}.ensemble-instruments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:18px 0}.ensemble-instrument{border:1px solid #dce4ce;border-radius:12px;background:#f4f7e9;padding:13px 5px;min-height:48px;color:#46693b;font:inherit;font-size:12px}.ensemble-instrument[aria-pressed=true]{background:#dce8b7;border-color:#698a48;box-shadow:inset 0 0 0 1px #698a48}.ensemble-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px;margin:18px 0}.ensemble-step{position:relative;border:1px solid #d6deca;border-radius:11px;min-height:54px;background:#f4f6e9;font:inherit;font-size:12px;color:#627856;padding:0}.ensemble-step[aria-pressed=true]{background:#add07b;border-color:#6c9252;color:#2e501e;font-weight:800}.ensemble-step.is-current{outline:3px solid #e1a540;outline-offset:1px;background:#ffda6d;color:#5c451c}.ensemble-step:nth-child(9){border-left-width:3px}.ensemble-edit-status{font-size:11px;line-height:1.8;color:#7d855b;margin:10px 0 0}.ensemble-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.ensemble-rules{border-top:1px solid #dce5cc;margin-top:24px;padding-top:15px;font-size:12px}.ensemble-rules summary{cursor:pointer;font-weight:700;padding:8px 0}.ensemble-board button:focus-visible,.ensemble-board select:focus-visible,.ensemble-board input:focus-visible{outline:3px solid #d08d32;outline-offset:3px}
@keyframes ensemble-hop{0%{transform:translateY(0) rotate(-3deg)}45%{transform:translateY(-8px) rotate(5deg)}100%{transform:translateY(0)}}
@media(max-width:700px){.ensemble-own{padding:15px 12px}.ensemble-instruments{grid-template-columns:repeat(2,minmax(0,1fr))}.ensemble-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.ensemble-step{min-height:48px;font-size:11px}.ensemble-own>.primary{width:100%;font-size:11px}.ensemble-players{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.ensemble-player{padding:10px 7px;grid-template-columns:40px minmax(0,1fr);gap:3px 5px}.ensemble-friend{width:40px;height:47px}.ensemble-player>span{font-size:9px}.ensemble-audio{padding:10px}.ensemble-audio .button{font-size:11px}.ensemble-invite{font-size:12px}.ensemble-beat{font-size:12px}}
body:has(.live-surround.is-quiet) .ensemble-friend{animation:none!important}@media(prefers-reduced-motion:reduce){.ensemble-player{transition:none}.ensemble-friend{animation:none!important}}

.room-space-context{display:flex;flex-direction:column;gap:7px;margin:0 0 24px;padding:18px 22px;border:1px solid #dfe5d5;border-radius:18px;background:#f3f7e9}.space-context-title{font-size:clamp(18px,2.3vw,26px);overflow-wrap:anywhere}.bridge-purpose{font-size:14px;line-height:1.8;margin:12px 0}.bridge-auto{margin:14px 0}.bridge-auto .help{margin:8px 0}.quiz-result{font-size:24px;color:#315743}

/* A small suggestion can grow into the next game. */
.feedback-page{max-width:1000px;margin:0 auto;padding:32px 24px 80px}.feedback-page>.brand{display:inline-block;margin-bottom:30px}.feedback-page .feedback-form{max-width:720px}.feedback-dialog{width:min(740px,calc(100vw - 32px));max-height:90dvh;padding:26px;border:2px solid var(--ink,#252339);border-radius:24px;background:var(--cream,#fffaf0);overflow:auto;box-sizing:border-box}.feedback-dialog::backdrop{background:#25233999}.feedback-close{display:block;margin-left:auto;margin-bottom:16px}.feedback-form{display:grid;gap:20px}.feedback-form .room-title{font-size:clamp(25px,4vw,38px);margin:0}.feedback-form .lead{font-size:17px;margin:0}.feedback-field{display:grid;gap:8px;font-weight:650}.feedback-field .input{width:100%;box-sizing:border-box;font-weight:400}.feedback-field textarea{resize:vertical}.feedback-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6}.feedback-check input{width:22px;height:22px;flex-shrink:0;accent-color:#363db0;margin:0}.feedback-recording{display:grid;gap:18px;border-left:4px solid #b9e993;padding:16px 20px;background:#fff}.feedback-recording[hidden]{display:none}.feedback-context{padding:14px;border:1px solid #ccc6b8;border-radius:12px}.feedback-context summary{cursor:pointer;font-weight:650}.feedback-context .feedback-field{margin-top:16px}.feedback-message{color:#364485;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0;line-height:1.6}.feedback-form .help{margin:0}.footer .space-link{display:inline-block;margin:8px 16px}.feedback-admin-header .room-title{font-size:clamp(26px,4vw,42px)}.feedback-filters{display:grid;grid-template-columns:1fr 1fr 2fr;gap:16px;align-items:end}.feedback-filters>.button{grid-column:1/-1;justify-self:start}.feedback-admin-tools{display:flex;gap:10px;margin:16px 0}.feedback-inbox{display:grid;gap:16px}.feedback-card{border:2px solid #d5d0c4;border-radius:20px;background:#fff;overflow:hidden}.feedback-card>summary{padding:20px;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.feedback-card>summary::before{content:'＋';font-weight:700;color:#364485}.feedback-card[open]>summary::before{content:'−'}.feedback-card>summary .help{margin:0 0 0 auto}.feedback-preview{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}.feedback-status{border-radius:99px;padding:4px 12px;font-size:13px;background:#eee;white-space:nowrap}.status-new{background:#ffe553}.status-reviewed{background:#c5edaa}.status-planned{background:#dcdafe}.status-done{background:#c6e7ef}.feedback-card-body{border-top:1px solid #e4e0d5;padding:20px;display:grid;gap:16px}.feedback-comment{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;line-height:1.8}.feedback-card-body .help{overflow-wrap:anywhere;margin:0}.feedback-position{font-size:19px;font-weight:700;margin:0}.feedback-save-actions,.feedback-pagination{display:flex;flex-wrap:wrap;gap:12px}.feedback-pagination{margin-top:20px}.feedback-empty{padding:30px;background:#fff;border-radius:16px}.feedback-page:has(.feedback-admin-header) .feedback-form{padding:24px;background:white;border-radius:20px}.feedback-dialog :focus-visible,.feedback-page :focus-visible{outline:3px solid #363db0;outline-offset:3px}@media(max-width:640px){.feedback-page{padding:22px 16px 60px}.feedback-dialog{padding:18px}.feedback-filters{grid-template-columns:1fr}.feedback-card>summary .help{margin-left:0}.feedback-save-actions .button{width:100%}.feedback-recording{padding:14px}.feedback-card-body{padding:16px}}

/* Motion follows visible waveform strength instead of a looping mic-on animation. */
.live-person-art>.garden-character{transition:transform .18s ease-out}.live-person-art:before{transition:opacity .22s ease-out,transform .18s ease-out}.is-quiet .live-person-art>.garden-character,.is-quiet .live-companion .garden-character{transform:none!important}@media(prefers-reduced-motion:reduce){.live-person-art>.garden-character{transform:none!important;transition:none!important}.live-person-art:before{display:none}}

.is-quiet .live-person-art:before{opacity:0!important}
/* Direct invitations, shared drawing space, and quiet host tools. */
.game-picture{position:relative;height:132px;margin-bottom:20px;border-radius:18px;background:#fff0b4;overflow:hidden;display:flex;align-items:center;padding:20px}.game-picture .game-icon{background:none!important;width:55%;height:auto;margin:0;font-size:64px;color:#24342d}.game-picture .card-friend{position:absolute;right:1px;bottom:-18px;width:118px;height:144px;transform:rotate(-10deg);transition:transform .2s}.game-card:hover .card-friend,.game-card:focus-visible .card-friend{transform:translateY(-9px) rotate(4deg)}.game-geo .game-picture,.game-proof .game-picture{background:#dcf0c5}.game-wordwolf .game-picture,.game-oogiri .game-picture{background:#ffe0e8}.game-mahjong .game-picture,.game-ensemble .game-picture{background:#dbe9ff}.game-card{display:flex;flex-direction:column;border-radius:22px;box-shadow:0 3px 0 #d5d8ce;padding:20px;min-height:350px}.game-card .game-picture{width:100%;flex-shrink:0}.game-card h3{font-size:23px}.game-card p{font-size:14px;line-height:1.75;flex-grow:1}.game-card .eyebrow{font-size:12px;letter-spacing:.03em}.game-meta{font-size:12px;letter-spacing:0}.card-play{display:block;margin-top:18px;padding:11px 14px;background:#254b3c;color:white;border-radius:999px;font-size:14px;font-weight:800;align-self:flex-start}.game-card:not(:disabled):hover{box-shadow:0 8px 0 #d5d8ce;transform:translateY(-5px)}.game-picker>.landing-rules{margin:14px 0}.queued-game{margin-bottom:24px}.host-console{margin:25px 0;border:1px solid #d6dccc;border-radius:14px;padding:16px;background:#f5f6ef}.host-console>summary{font-weight:700;font-size:14px;cursor:pointer}.host-console .bridge-panel{margin:16px 0}.host-label{display:block;width:100%;font-size:12px;color:#657066}.game-area{min-width:0}.mine-score{display:flex;flex-direction:column;gap:12px;font-size:16px}.mine-score strong{font-size:23px}.mine-grid{display:grid;grid-template-columns:repeat(var(--mine-width),minmax(0,1fr));gap:4px;max-width:480px;margin:22px auto}.mine-cell{aspect-ratio:1;min-width:0;border:1px solid #94b794;border-radius:8px;background:linear-gradient(#e8f6d2,#c9e4ad);box-shadow:0 3px 0 #8dae83;font-weight:800;font-size:clamp(17px,3vw,25px);color:#215640;opacity:1!important}.mine-cell:not(:disabled):hover{background:#fff0aa;transform:translateY(-2px)}.mine-cell.is-open{background:#f4f3e9;border-color:#dddcd0;box-shadow:none}.mine-cell[data-number="1"]{color:#3972b6}.mine-cell[data-number="2"]{color:#34734b}.mine-cell[data-number="3"]{color:#b95158}.mine-cell.is-exploded{background:#ffb6b0}.mine-cell.is-flagged{color:#bd4e55}.mine-last{font-size:13px;color:#576453}.minesweeper-board .mine-mode{margin-bottom:0}
@media(max-width:600px){.game-card{padding:14px;min-height:340px}.game-picture{height:106px;padding:12px}.game-picture .card-friend{width:88px;height:115px}.game-picture .game-icon{font-size:44px}.game-card h3{font-size:18px}.game-card p{font-size:13px}.game-card .eyebrow{font-size:11px}.card-play{font-size:12px;padding:9px 11px}.mine-grid{gap:3px}.mine-cell{border-radius:5px}}
@media(prefers-reduced-motion:reduce){.game-picture .card-friend,.game-card{transition:none}.game-card:hover .card-friend,.game-card:focus-visible .card-friend{transform:rotate(-10deg)}}

.game-rules{margin:18px 0;font-size:14px}.game-rules>summary{cursor:pointer;font-weight:600}.game-rules .rules{margin-bottom:8px}


/* A shared activity frame, with a three-dimensional city and personal field notes. */
.board-city{padding:0!important;overflow:hidden}.city-heading{padding:24px 26px 12px}.city-heading h2{font-size:27px;letter-spacing:-.8px;margin:7px 0}.city-location{font-size:13px;color:#657d73;margin:12px 0}.city-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;background:#f3f4ec;border-block:1px solid #d6ded0}.city-stage{position:relative;min-width:0;height:480px;background:#c5e3ec;overflow:hidden}.city-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.city-canvas:active{cursor:grabbing}.city-compass{position:absolute;top:16px;left:16px;background:#fffdf3e6;border:1px solid #e3e1d4;border-radius:30px;font-size:12px;color:#4d6257;padding:9px 15px;pointer-events:none}.city-look{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:5px;background:#fffdf3de;border-radius:13px;padding:5px;max-width:96%;white-space:nowrap}.city-look .button{font-size:11px;padding:8px 10px;margin:0;background:transparent;min-height:36px}.city-panel{padding:22px;max-height:480px;overflow:auto;border-left:1px solid #d6ded0;overscroll-behavior:contain}.city-panel h3{font-size:17px;margin:8px 0 14px}.city-panel .button{font-size:11px;padding:8px 10px;margin:4px 5px 4px 0}.city-missions{padding-bottom:17px;border-bottom:1px dashed #cbd5c6}.city-missions p{font-size:14px;line-height:1.7;margin:13px 0}.city-missions p small{display:block;font-size:11px;color:#7d8c78;margin-left:20px}.city-missions .is-done{color:#779875;text-decoration:line-through}.city-nearby{margin:20px 0}.city-nearby p{font-size:12px;line-height:1.8}.city-map{border-top:1px dashed #cbd5c6;padding-top:14px}.city-map svg{display:block;width:150px;height:150px;margin:auto;background:#fffdf5;border-radius:12px}.city-map small{display:block;margin-top:10px}.city-controls{padding:20px 26px}.city-controls h3{font-size:17px;margin:0 0 10px}.city-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.city-path{display:flex;align-items:stretch;gap:4px;background:#f0f3e9;border-radius:12px;padding:4px}.city-path .button{font-size:12px;padding:11px;margin:0;border-radius:9px;flex:1;text-align:left;line-height:1.7}.city-path .button+button{font-size:10px;flex:0 0 94px;color:#b07a54}.city-tip{font-size:12px;color:#7d8c78;border-top:1px solid #d6ded0;padding:16px 26px;margin:0;line-height:1.8}.city-result{padding:14px 0;border-bottom:1px dashed #cbd5c6;font-size:12px;line-height:1.8}.city-result p{margin:7px 0}.city-fallback{position:absolute;inset:20px;background:#fffdf5;padding:25px;border-radius:12px;line-height:1.8}.city-canvas:focus-visible{outline:3px solid #d7aa73;outline-offset:-3px}.city-panel .help{line-height:1.8}.city-score{font-size:13px;color:#5a7b62}
@media(max-width:900px){.city-layout{grid-template-columns:1fr}.city-stage{height:390px}.city-panel{border-left:0;border-top:1px solid #d6ded0;max-height:none;display:grid;grid-template-columns:1fr 1fr;gap:20px}.city-map{grid-column:1/-1}.city-map svg{width:140px;height:140px}.city-paths{grid-template-columns:1fr}}
@media(max-width:550px){.city-panel{display:block;padding:18px}.city-stage{height:340px}.city-heading,.city-controls{padding:18px}.city-heading h2{font-size:23px}.city-compass{font-size:10px;left:10px;top:10px}.city-look .button{font-size:10px;padding:7px}.city-tip{padding:14px 18px}}

.city-view{min-width:0;position:relative;align-self:start}.city-stairs{position:absolute;bottom:65px;left:14px;right:14px;padding:12px;background:#fffbeeeF;border:1px solid #d3dac4;border-radius:14px;box-shadow:0 5px 20px #456c5220;display:grid;gap:8px}.city-stairs[hidden]{display:none}.city-stair-intro{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.city-stair-intro strong{font-size:14px;color:#355f53}.city-stair-intro small{font-size:10px;color:#6b7d63}.city-stair-actions{display:flex;gap:8px}.city-stair-actions .city-stair-action{margin:0;flex:1;min-height:56px;padding:9px 10px;border:1px solid #6e9a81;background:#427f6b;color:#fff9df;text-align:left;line-height:1.5;font-size:12px;border-radius:12px}.city-stair-action small{display:block;font-size:10px;font-weight:400;color:#e3edcf;margin-top:4px}.city-stair-actions .city-stair-guide{background:#e8efda;color:#3f6656}.city-stair-action:hover:not(:disabled){background:#346a59}.city-stair-guide:hover:not(:disabled){background:#dbe8c8}.city-stair-action:disabled{opacity:.55;cursor:default}@media(max-width:550px){.city-stairs{padding:9px;left:9px;right:9px;bottom:58px}.city-stair-actions{gap:5px}.city-stair-intro{gap:4px}.city-stair-actions .city-stair-action{min-height:52px;font-size:12px}.city-look .button{padding:7px 5px}}

/* Rooms are a stable viewport, independent of the landing page's document flow. */
html:has(body.in-room),body.in-room{height:100%;overflow:hidden;overscroll-behavior:none}
body.in-room #app{height:100dvh;overflow:hidden}
body.in-room .shell{display:block;height:100%;min-height:0;padding:0}
body.in-room .sidebar,body.in-room .topbar,body.in-room .footer{display:none}
body.in-room .main.room-screen{height:100%;max-width:none;margin:0;padding:12px 24px max(8px,env(safe-area-inset-bottom));display:grid;grid-template-rows:52px 38px minmax(0,1fr) 58px;gap:8px;overflow:hidden;background:radial-gradient(ellipse at 80% 0%,#e7eedc 0,transparent 45%),#f7f8f2}
.room-screen [hidden],.room-sheet [hidden]{display:none!important}
.room-bar,.room-bar-title,.room-nav,.room-activity-tools{display:flex;align-items:center;gap:10px;min-width:0}
.room-bar{justify-content:space-between}.room-brand{font-size:28px;letter-spacing:-2px;font-weight:850;padding-right:18px;border-right:1px solid #d4ddcc}
.room-bar .room-title{font-size:20px;line-height:1.3;letter-spacing:-.4px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-bar .button,.room-activity-tools .button{margin:0;padding:8px 13px;min-height:36px;font-size:12px;white-space:nowrap;border-radius:11px}
.room-nav{flex-shrink:0}.room-activity-tools{gap:6px}.room-activity-tools .button{background:#ffffff90;border-color:#dce3d6;padding:6px 12px;font-weight:500;min-height:32px}
.room-stage{min-width:0;min-height:0;overflow:hidden;position:relative;container-type:size;border-radius:20px}
.room-stage .game-area{height:100%;min-height:0;display:flex;flex-direction:column;gap:8px}
.room-stage .board{flex:1;min-height:0;height:100%;margin:0;padding:20px 24px;border-radius:20px;box-shadow:0 2px 8px #28442b07;overflow:hidden}
.room-stage .host-controls{flex:none;margin:0;padding:0;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.room-stage .host-controls .button{margin:0;padding:8px 16px;min-height:36px}.room-stage .host-label{width:auto;font-size:11px;margin-right:8px}
.room-stage .game-flow{color:#f3f5e9;flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:0 8px}.room-stage .game-flow .help{color:inherit;margin:0;font-size:12px}
.city-queued-step{position:absolute;bottom:66px;left:12px;right:12px;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px;background:#fffdf4eF;border-radius:12px;font-size:12px}.city-queued-step[hidden]{display:none}
.room-stage .button{margin:3px 4px 3px 0;padding:8px 12px;font-size:12px;min-height:36px}
.room-stage :is(h2,h3,p){overflow-wrap:anywhere}.room-stage .question{font-size:clamp(19px,2.2vw,27px);margin:6px 0 14px;line-height:1.5}
.room-stage .board>.eyebrow{font-size:10px;line-height:1.4}
.room-stage .answer-count{margin:6px 0;font-size:12px}.room-stage .waiting{padding:12px;margin:8px 0}.room-stage .explanation{margin:8px 0;padding:12px;font-size:13px}
.room-stage .options{margin:8px 0;gap:10px}.room-stage .answer{padding:16px;font-size:15px;min-height:52px}
.room-stage .field-label{margin:6px 0;font-size:12px}.room-stage .input{padding:10px;font-size:16px}.room-stage textarea{resize:none;max-height:130px;line-height:1.5}
.room-stage :is(.oogiri-form,.drawing-custom,.proof-form,.drama-form){margin:8px 0;gap:8px}
.room-stage :is(.oogiri-title,.drawing-title){font-size:clamp(18px,2.2vw,27px);line-height:1.5;margin:4px 0 10px}
.room-stage :is(.secret,.proof-problem,.debate-topic,.debate-turn,.drama-script-card,.drama-role){padding:16px;margin:8px 0}.room-stage .secret h2{font-size:25px;margin:10px 0}
.room-stage :is(.proof-actions,.drama-actions,.debate-route){margin:8px 0;gap:6px}
.room-flow{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.room-board:has(>.room-flow){display:flex;flex-direction:column;gap:8px}
.room-flow>*{flex-shrink:0;max-width:100%;margin-block:0!important}
.room-pager{display:flex;justify-content:center;align-items:center;gap:18px;flex:none;height:34px;margin-top:auto;font-size:12px}
.room-pager .button{min-height:30px;padding:4px 10px;margin:0;background:transparent;border-color:#d5decb}.room-page-number{font-variant-numeric:tabular-nums;color:#5d735e;min-width:54px;text-align:center}
.room-collection{height:clamp(150px,55cqh,360px);min-height:0;display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.room-collection-grid{display:grid!important;grid-template-columns:repeat(var(--room-columns,2),minmax(0,1fr))!important;grid-template-rows:repeat(var(--room-rows,1),minmax(0,1fr));gap:10px!important;flex:1;min-height:0;margin:0!important;overflow:hidden}
.room-collection-grid>*{min-height:0!important;min-width:0;margin:0!important;overflow:auto;overscroll-behavior:contain}
.room-stage .room-collection-grid :is(.oogiri-prompt,.drawing-prompt){padding:16px;font-size:16px;line-height:1.65}
.room-stage :is(.oogiri-answer,.drawing-art,.food-card){padding:14px;border-radius:14px}
.room-stage .oogiri-response{font-size:18px;line-height:1.6;margin:12px 0}.room-stage .food-photo{max-height:140px;width:100%;object-fit:cover}.room-stage .food-card .button{width:100%}
.room-stage .drawing-art .drawing-canvas{height:110px;width:auto;max-width:100%;margin:auto}.room-stage .drawing-art h3{margin:0 0 4px;font-size:13px}
.room-stage .veggie{height:90px}.room-stage .veggie-card .garden-character{height:90px;width:70px}.room-stage .veggie-card h3{font-size:14px;margin:6px 0}
.room-stage .game-picker{height:100%;display:flex;flex-direction:column;gap:8px}.room-selecting .room-collection{flex:1;height:auto}.room-selecting .game-grid{height:100%;gap:12px!important}
.room-selecting .game-card{position:relative;display:flex;min-height:0;padding:16px 16px 12px;border-radius:16px;box-shadow:none;gap:5px;transition:none}.room-selecting .game-card:hover{transform:none;box-shadow:0 0 0 2px #8baa77;background:#f1f6e8}
.room-selecting .game-picture{position:absolute;right:8px;top:5px;width:55px;height:55px;background:transparent;margin:0;padding:0;opacity:.8}.room-selecting .game-icon{display:none}.room-selecting .game-picture .card-friend{width:50px;height:60px;right:0;bottom:-5px}
.room-selecting .game-card h3{font-size:18px;margin:0;padding-right:45px}.room-selecting .game-card .eyebrow{font-size:10px;letter-spacing:0;padding-right:45px}.room-selecting .game-card p{font-size:12px;line-height:1.6;min-height:0;margin:0;flex:1}.room-selecting .game-meta{font-size:10px}.room-selecting .card-play{display:none}.room-selecting .queued-game{padding:12px 16px;margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.room-selecting .queued-game h2{font-size:16px;margin:0}.room-selecting .queued-game p{margin:0}.room-selecting .queued-game .button{margin:0}
/* Reactions occupy their own row; they never cover the playing surface. */
.room-screen>.live-dock{position:static!important;transform:none!important;left:auto;right:auto;bottom:auto;width:100%;max-width:none;margin:0;box-shadow:none;border:0;border-top:1px solid #dce3d6;border-radius:0;padding:5px 0 0;background:transparent;display:flex;align-items:center;justify-content:flex-end;gap:18px;min-height:0;z-index:auto}
.room-screen>.live-dock .live-dock-status{flex:1;min-width:0;font-size:11px}.room-screen>.live-dock .live-now{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.room-screen>.live-dock .live-stage-link{display:none}
.room-screen>.live-dock .live-cheers{display:flex;gap:6px;margin:0}.room-screen>.live-dock .live-cheer{width:44px;height:44px;padding:3px 8px;display:flex;align-items:center;justify-content:center;gap:4px;background:#fffdf5;border-radius:12px}.room-screen>.live-dock .live-cheer span{font-size:22px}.room-screen>.live-dock .live-latest{display:none}
.room-sheet{width:min(820px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:1px solid #c5d3be;border-radius:20px;background:#fffef8;color:#20342d;box-shadow:0 18px 80px #213a3230;overflow:hidden}
.room-sheet::backdrop{background:#1d332a66;backdrop-filter:blur(3px)}.room-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid #dce3d6}.room-sheet-header h2{font-size:18px;margin:0}.room-sheet-header .button{margin:0;min-height:36px;padding:8px 12px}
.room-sheet-body{max-height:calc(100dvh - 106px);overflow:auto;padding:20px;overscroll-behavior:contain}.room-sheet .people{margin:0 0 20px}.room-sheet .room-tools{justify-content:flex-start}.room-sheet .live-stage{margin:16px 0}.room-sheet .live-surround{display:none!important}.room-sheet .host-console{margin:14px 0}.room-sheet .city-panel{border:0;max-height:none;display:block;padding:0}.room-sheet .city-map{max-width:300px}.room-sheet .scores{margin:0}.room-sheet .room-events{margin-top:20px}
.room-sheet-notes{width:min(1400px,calc(100vw - 24px));height:calc(100dvh - 24px)}.room-sheet-notes .room-sheet-body{height:calc(100% - 66px);max-height:none;padding:10px;overflow:hidden}
/* Spatial games get the remaining height instead of a fixed 480px canvas. */
.room-city .board{padding:0}.room-city .board>.eyebrow{display:none}.room-city .city-board{height:100%;display:grid;grid-template-rows:42px minmax(0,1fr) auto}.room-city .city-heading{padding:9px 15px}.room-city .city-heading>:not(.city-location){display:none}.room-city .city-location{margin:0;font-size:13px}.room-city .city-layout{display:block;min-height:0}.room-city .city-view,.room-city .city-stage{height:100%;min-height:0;max-height:none}.room-city .city-controls{padding:8px 12px}.room-city .city-controls>h3,.room-city .city-controls>.help,.room-city .city-controls>.button{display:none}.room-city .city-paths{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}.room-city .city-path{min-width:0;gap:2px;padding:2px}.room-city .city-path .button{font-size:11px;padding:7px 6px;min-width:0;line-height:1.4}.room-city .city-path .button+button{flex:0 0 60px;font-size:9px}.room-city .city-stairs{max-width:560px;bottom:57px;padding:8px 10px}.room-city .city-stair-intro small{display:none}.room-city .city-stair-actions .city-stair-action{min-height:44px;padding:7px;font-size:11px}.room-city .city-stair-action small{margin-top:1px;font-size:9px}.room-city .city-stair-intro strong{font-size:12px}.room-city .city-look{bottom:8px}.room-city .city-look .button{min-height:30px;font-size:10px;margin:0}.room-city .city-compass{top:12px;padding:7px 12px;font-size:11px}
.room-minesweeper .board{display:flex;flex-direction:column;align-items:center;gap:6px}.room-minesweeper .mine-score{gap:4px;align-items:center;font-size:12px}.room-minesweeper .mine-score strong{font-size:18px}.room-minesweeper .mine-grid{width:min(100%,calc(100cqh - 170px));max-width:430px;aspect-ratio:1;min-height:0;margin:0;gap:4px}.room-minesweeper .mine-cell{font-size:18px;padding:0;min-height:0}.room-minesweeper .mine-last{font-size:11px;margin:0}.room-minesweeper .mine-mode{margin:0}.room-minesweeper .board>.eyebrow{display:none}
.room-drawing .board{display:flex;flex-direction:column;gap:5px}.room-drawing .drawing-title{margin:0;font-size:19px}.room-drawing .drawing-editor{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:10px;gap:5px}.room-drawing .drawing-tools{width:100%;margin:0;gap:8px}.room-drawing .drawing-palette{gap:7px;flex-basis:auto}.room-drawing .drawing-canvas{width:auto;max-width:100%;height:calc(100cqh - 230px);max-height:calc(100% - 100px);min-height:70px;object-fit:contain;flex:1}.room-drawing .drawing-actions{width:100%;margin:0}.room-drawing .drawing-editor>.help{display:none}.room-drawing .drawing-actions .button{font-size:11px;padding:5px 8px}.room-drawing .drawing-color{width:26px;height:26px}.room-drawing .drawing-tools .field-label{font-size:10px}.room-drawing .drawing-size{padding:5px;width:80px;font-size:12px}.room-drawing .board>button{align-self:flex-end;margin:0}
.room-geo .board{display:flex;flex-direction:column;gap:6px}.room-geo .question{margin:0;font-size:20px}.room-geo .geo-level{margin:0;font-size:12px}.room-geo .hints{margin:0;padding-left:20px;font-size:12px;line-height:1.6}.room-geo .geo-map-wrap{flex:1;min-height:0;margin:0;display:flex;flex-direction:column}.room-geo .geo-viewport{flex:1;min-height:70px;height:auto;aspect-ratio:auto}.room-geo .geo-world{height:100%;width:100%}.room-geo .geo-coordinate{margin:2px 0;font-size:11px}.room-geo .geo-map-help{display:none}.room-geo .geo-map-tools{padding:0}.room-geo .geo-controls{margin:0;gap:8px;display:flex;align-items:end}.room-geo .geo-controls label{flex:1;max-width:150px}.room-geo .geo-controls .input{padding:5px;font-size:14px}.room-geo .geo-controls .button{margin:0}
.room-mahjong .board{display:flex;flex-direction:column;gap:6px}.room-mahjong .mj-toolbar{margin:0}.room-mahjong .mj-table{padding:12px;flex:1;min-height:0;margin:0}.room-mahjong .mj-table-center{padding:12px}.room-mahjong .mj-table-center h2{font-size:22px;margin:8px 0}.room-mahjong .mj-own-hand{margin:0;padding:8px 12px}.room-mahjong .mj-own-hand>.button{margin:0}.room-mahjong .mj-hand-tiles{flex-wrap:wrap;gap:4px;margin:8px 0}.room-mahjong .mj-hand-tiles .mj-tile{width:clamp(22px,4vw,42px);height:auto;aspect-ratio:40/56}.room-mahjong .mj-own-hand .help{display:none}.room-mahjong .mj-hand-help{font-size:11px;margin:4px 0}.room-mahjong .mj-actions{margin:0}
.room-stage .ensemble-audio{padding:8px;gap:8px}.room-stage .ensemble-beat{padding:8px;font-size:14px}.room-stage .ensemble-own{padding:12px;margin:0}.room-stage .ensemble-own h3{margin:0;font-size:16px}.room-stage .ensemble-instruments{gap:4px}.room-stage .ensemble-instrument{padding:7px;font-size:12px}.room-stage .ensemble-step{min-width:0;padding:7px 0}.room-stage .ensemble-grid{margin:8px 0}.room-stage .ensemble-controls{margin:0}.room-stage .ensemble-own .help{font-size:10px;margin:4px 0}
.room-stage .hana-card{width:clamp(40px,6vw,70px);min-height:0;height:92px;padding:5px}.room-stage .hana-grid{gap:5px}.room-stage .hana-symbol{font-size:25px}.room-stage .hana-hand{padding:10px;margin:6px 0}.room-stage .hana-status{font-size:11px;margin:0}
.room-workshop>.whiteboard,.room-sheet-notes .whiteboard{height:100%;margin:0;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden}.room-workshop .wb-heading,.room-sheet-notes .wb-heading{display:none}.room-workshop .wb-body,.room-sheet-notes .wb-body{flex:1;min-height:0}.room-workshop .wb-stage,.room-sheet-notes .wb-stage{height:100%;min-height:0}.room-workshop .wb-inspector,.room-sheet-notes .wb-inspector{min-height:0;max-height:100%;overflow:auto}.room-workshop .wb-hint,.room-sheet-notes .wb-hint{display:none}.room-workshop .wb-zoom,.room-sheet-notes .wb-zoom{margin:0;padding:4px}.room-workshop .wb-zoom-title,.room-sheet-notes .wb-zoom-title{display:none}.room-workshop .wb-toolbar,.room-sheet-notes .wb-toolbar{margin:0;gap:5px}.room-workshop .wb-actions,.room-sheet-notes .wb-actions{margin:0;gap:4px}.room-workshop .wb-button,.room-sheet-notes .wb-button{padding:6px;font-size:11px}.room-workshop .wb-empty,.room-sheet-notes .wb-empty{display:none}
body.in-room #toast{bottom:76px;max-width:calc(100vw - 28px)}
@media(max-width:700px){
body.in-room .main.room-screen{padding:8px 10px max(6px,env(safe-area-inset-bottom));grid-template-rows:60px 34px minmax(0,1fr) 48px;gap:6px}.room-bar{align-items:flex-start;gap:6px}.room-bar-title{align-items:flex-start;flex-direction:column;gap:3px}.room-brand{font-size:18px;line-height:1;padding:0;border:0;letter-spacing:-1px}.room-bar .room-title{font-size:15px;max-width:45vw}.room-nav{gap:4px;align-self:center}.room-bar .button{font-size:11px;padding:7px;min-height:34px}.room-activity-tools{gap:4px}.room-activity-tools .button{font-size:11px;padding:5px 8px;min-height:30px}.room-stage{border-radius:14px}.room-stage .board{padding:14px;border-radius:14px}.room-stage .question{font-size:21px}.room-stage .host-label{display:none}.room-stage .answer{font-size:14px;padding:12px}.room-stage .options{gap:8px}.room-selecting .game-card{padding:12px;gap:5px}.room-selecting .game-card .eyebrow{display:none}.room-selecting .game-card h3{font-size:15px;padding-right:30px}.room-selecting .game-card p{font-size:11px}.room-selecting .game-picture{width:37px;height:45px;top:4px;right:3px}.room-selecting .game-picture .card-friend{height:48px;width:37px}.room-selecting .game-grid{gap:8px!important}.room-selecting .queued-game{padding:9px;gap:4px}.room-selecting .queued-game h2{font-size:13px}.room-selecting .queued-game p{font-size:10px}.room-selecting .queued-game .button{font-size:10px;padding:5px;min-height:28px}.room-screen>.live-dock{justify-content:center;padding:0;gap:0}.room-screen>.live-dock .live-dock-status{display:none}.room-screen>.live-dock .live-cheers{width:100%;justify-content:center;gap:6px}.room-screen>.live-dock .live-cheer{flex:0 0 44px;max-width:44px;height:44px;padding:3px}.room-screen>.live-dock .live-cheer span{font-size:20px;line-height:22px}.room-city .board{padding:0}.room-city .city-board{grid-template-rows:34px minmax(0,1fr) auto}.room-city .city-heading{padding:7px 10px}.room-city .city-location{font-size:11px}.room-city .city-paths{grid-template-columns:repeat(2,minmax(0,1fr))}.room-city .city-path .button{font-size:11px;min-height:34px}.room-city .city-path .button+button{flex-basis:42px;font-size:8px}.room-city .city-controls{padding:6px}.room-city .city-stairs{bottom:51px;left:8px;right:8px}.room-city .city-stair-actions .city-stair-action{font-size:10px;min-height:40px}.room-city .city-stair-intro strong{font-size:11px}.room-city .city-stair-actions{gap:4px}.room-city .city-look .button{font-size:9px;padding:6px}.room-city .city-compass{font-size:9px;top:8px;left:8px}.room-sheet-body{padding:14px}.room-sheet-header{padding:12px 14px}.room-sheet-header h2{font-size:16px}.room-stage .room-collection{height:clamp(140px,48cqh,330px)}.room-selecting .room-collection{height:auto}.room-minesweeper .mine-grid{width:min(100%,calc(100cqh - 155px))}.room-drawing .drawing-tools{gap:6px}.room-drawing .drawing-color{width:24px;height:24px}.room-drawing .drawing-palette{gap:6px}.room-drawing .drawing-tools>.field-label{display:none}.room-drawing .drawing-actions{gap:3px;display:grid;grid-template-columns:repeat(3,1fr)}.room-drawing .drawing-actions .primary{grid-column:1/-1}.room-drawing .drawing-canvas{height:calc(100cqh - 260px)}.room-drawing .drawing-actions .button{margin:0;min-height:28px}.room-mahjong .mj-table-center{padding:8px}.room-mahjong .mj-table-center h2{font-size:18px}.room-mahjong .mj-table-label{display:none}.room-mahjong .mj-toolbar .button{font-size:10px;padding:5px}.room-stage .host-controls .button{font-size:11px;padding:6px 12px}.room-workshop .wb-body,.room-sheet-notes .wb-body{grid-template-columns:1fr minmax(110px,30%)}.room-workshop .wb-inspector,.room-sheet-notes .wb-inspector{padding:8px}.room-workshop .wb-zoom,.room-sheet-notes .wb-zoom{gap:3px}.room-workshop .wb-tool,.room-sheet-notes .wb-tool{padding:5px;font-size:11px}
}
@media(max-height:520px) and (min-width:700px){body.in-room .main.room-screen{grid-template-rows:38px 30px minmax(0,1fr) 36px;padding:5px 12px;gap:4px}.room-bar .room-title{font-size:17px}.room-stage .board{padding:10px}.room-city .board{padding:0}.room-city .city-stairs{max-width:420px;left:auto}.room-city .city-stair-intro{display:none}.room-city .city-stair-actions small{display:none}.room-city .city-board{grid-template-rows:28px minmax(0,1fr) auto}.room-city .city-heading{padding:4px 10px}}
/* Remove the old floating-dock spacer, including programmatic focus scrolling. */
html:has(body.in-room){scroll-padding:0;overflow:clip}
body.in-room{padding:0;overflow:clip}
body.in-room #app,body.in-room .main.room-screen,.room-stage{overflow:clip}

.room-drawing .room-drawing-paper{flex:1;min-height:0;width:100%;display:grid;place-items:center;container-type:size}
.room-drawing .room-drawing-paper .drawing-canvas{width:min(100cqw,calc(100cqh * 4 / 3));height:auto;max-height:none;min-height:0;flex:none;aspect-ratio:4/3}
.room-flow>.drawing-canvas{width:auto;height:min(40cqh,320px);align-self:center;max-width:100%}
.room-minesweeper .board[data-phase="finished"] .mine-grid{width:min(100%,calc(100cqh - 210px))}
.room-stage .audience-gallery .garden-character{width:90px;height:110px}
.room-stage .audience-gallery .drawing-canvas{max-height:150px;width:auto;margin:auto}
.room-stage .food-grid .food-image{height:130px;width:100%;object-fit:cover}

.room-workshop .wb-body,.room-sheet-notes .wb-body{position:relative}
.room-paper-settings{min-height:0;height:100%;overflow:hidden;background:#fffdf7;border-left:1px solid #dce3d6}
.room-paper-settings>summary{cursor:pointer;list-style:none;padding:8px 12px;font-size:12px;font-weight:700;color:#365e48;background:#e9efdf;border-radius:8px;min-height:34px}
.room-paper-settings>summary::after{content:' ＋'}.room-paper-settings[open]>summary::after{content:' −'}
.room-workshop .room-paper-settings .wb-inspector,.room-sheet-notes .room-paper-settings .wb-inspector{height:calc(100% - 34px);max-height:none;border:0}
@media(max-width:700px){
.room-workshop .wb-body,.room-sheet-notes .wb-body{display:block}
.room-paper-settings{position:absolute;right:6px;top:6px;z-index:8;height:auto;width:auto;border:1px solid #cbd8c1;border-radius:10px}
.room-paper-settings[open]{height:calc(100% - 12px);width:calc(100% - 12px);box-shadow:0 4px 22px #26452c24}
.room-workshop .wb-toolbar,.room-sheet-notes .wb-toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
.room-workshop .wb-tool,.room-sheet-notes .wb-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:46px;padding:5px 2px;white-space:nowrap;font-size:10px;gap:2px}
.room-workshop .wb-tool span,.room-sheet-notes .wb-tool span{font-size:18px;line-height:20px}
}

.room-screen>.network-notice{position:fixed;left:24px;right:24px;bottom:74px;z-index:40;padding:12px;background:#fff0cb;border:1px solid #d7b873;border-radius:12px;font-size:12px}

/* Timing stays in the existing toolbar so games keep their viewport. */
.room-activity-tools .room-timer{margin-left:auto;order:20;min-width:72px;font-weight:750;font-variant-numeric:tabular-nums;background:#eaf0df;color:#355b3b}
.room-activity-tools .room-timer.is-urgent{background:#fff0cd;color:#825100;border-color:#dfbd77}
.room-time-policy{font-size:20px;font-weight:700;line-height:1.6}
.room-moderation{padding:14px;background:#f0f4e9;border-radius:14px;margin-bottom:16px}.room-moderation h3{margin:0 0 8px}.room-moderation>p{font-size:13px;line-height:1.7}.room-moderation-person{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #d9e1d0}.room-moderation-person .button{margin:0;font-size:12px;min-height:36px}.room-restriction{font-size:11px;color:#865c21}
.room-minesweeper .mine-score{flex-wrap:wrap;justify-content:center;text-align:center}.room-minesweeper .mine-score strong{width:100%}.room-minesweeper .mine-last{max-width:100%;text-align:center;line-height:1.4}
@media(max-width:700px){.room-activity-tools .button{padding-inline:6px;font-size:10px}.room-activity-tools .room-timer{min-width:62px;font-size:12px}.room-minesweeper .mine-score strong{font-size:16px}.room-minesweeper .mine-score>span{font-size:11px}}

.mine-result-tabs,.mine-result-pages{display:flex;gap:8px;align-items:center;justify-content:center}.mine-result-tabs .button[aria-pressed=true]{background:#b84326;color:white}.mine-results{border-collapse:collapse;width:100%;max-width:740px;font-size:13px;table-layout:fixed;background:#fffdf6;border-radius:14px;overflow:hidden}.mine-results th,.mine-results td{padding:12px 8px;border-bottom:1px solid #e0e2d4;text-align:center}.mine-results th:first-child{width:40%;text-align:left;overflow-wrap:anywhere}.mine-results thead{background:#e2f1f4;font-size:11px;color:#536860}.mine-results tbody th{font-weight:650}.mine-results td{font-size:21px;font-weight:800;color:#315b63;font-variant-numeric:tabular-nums}.mine-results small{display:block;font-size:10px;color:#64716b;font-weight:400}.mine-result-note{font-size:11px;text-align:center;color:#64716b;margin:4px 0}.room-minesweeper .mine-result-pages .button,.room-minesweeper .mine-result-tabs .button{min-height:32px;padding:6px 10px;font-size:12px}.room-minesweeper .board:has(.mine-results){justify-content:center;gap:12px}
@media(max-height:650px),(max-width:600px){.mine-results{font-size:11px}.mine-results th,.mine-results td{padding:7px 5px}.mine-results td{font-size:17px}.mine-results thead{font-size:10px}.mine-result-note{font-size:10px}.room-minesweeper .board:has(.mine-results){gap:6px}.mine-results small{font-size:9px}}

/* One identity and one next action, from arrival through the next game. */
.entry-card{max-width:920px;margin:32px auto;background:#fffdf6;border:1px solid #dedecd;border-radius:24px;padding:28px;color:#293f3b}
.play-journey{display:flex;justify-content:space-between;list-style:none;gap:12px;margin:0;padding:0 0 20px;border-bottom:1px solid #dddfd2;font-size:12px}
.play-journey li{display:flex;align-items:center;gap:8px;color:#697771;white-space:nowrap}.play-journey b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e9ede3;font-size:12px}.play-journey .is-current{color:#a63820;font-weight:750}.play-journey .is-current b{background:#b84326;color:white}.play-journey .is-done b{background:#e2f1f4;color:#315b63}
.entry-heading{margin:26px 0 8px}.entry-heading h1{font-size:clamp(24px,3vw,34px);margin:10px 0}.entry-heading p{font-size:14px;line-height:1.8;color:#52655c}
.entry-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:32px;align-items:center}.entry-preview{display:flex;align-items:center;flex-direction:column;gap:8px;padding:24px;background:#fff1d5;border-radius:20px}.entry-preview>.garden-character{width:150px;height:170px}.entry-preview strong{font-size:22px}.entry-preview>span,.entry-preview small{font-size:12px;text-align:center}.entry-picker-tabs{display:flex;gap:8px}.entry-picker-tabs .button{margin:0 0 10px}.entry-picker-tabs .button[aria-pressed=true]{background:#315b63;color:white;border-color:#315b63}
.entry-character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.entry-character-grid .character-choice{padding:8px;min-height:95px;position:relative;border:1px solid #d8dece;border-radius:12px;background:#fffdf6}.entry-character-grid .character-choice[aria-pressed=true]{border:2px solid #b84326;background:#fff1d5}.entry-character-grid .garden-character{width:52px;height:62px}.entry-character-grid .character-choice-name{font-size:11px}.entry-picker-pages{display:flex;align-items:center;justify-content:space-between;font-size:12px}.entry-picker-pages .button{margin-block:4px}.entry-actions{display:flex;align-items:center;gap:8px;margin-top:18px}.entry-note{font-size:11px;color:#52655c;line-height:1.7}
.room-screen{color:#293f3b;background:#fff8e5}.room-screen .button.primary{background:#b84326;border-color:#b84326;color:white}.room-screen .button.secondary{background:#e2f1f4;border-color:#cadbdb;color:#294c47}
.room-bar .room-self{display:flex;align-items:center;justify-content:center;background:#fffdf6;border:1px solid #dfdecb}.room-self .garden-character{width:32px;height:38px;flex:none}
.room-sheet-self .character-panel{border:0;margin:0;padding:0;background:transparent}.room-sheet-self .character-summary{pointer-events:none}.room-sheet-self .character-summary-text>span{display:none}.room-sheet-self .character-intro{color:#52655c}.room-sheet-self .character-choice[aria-pressed=true]{border-color:#b84326;background:#fff1d5}
.room-moment{font-size:12px;font-weight:800;white-space:nowrap;background:#e2f1f4;color:#315b63;border-radius:9px;padding:7px 12px;line-height:1.2}.room-moment.moment-playing{background:#294c47;color:#fff8e5}.room-moment.moment-finished{background:#f4d694;color:#59471f}.room-moment.moment-practice{background:#e2f1f4;color:#315b63}
.room-screen[data-moment=playing]>.room-stage{border:5px solid #294c47;background:#294c47;box-shadow:0 0 0 1px #294c47}.room-screen[data-moment=finished]>.room-stage{border:3px solid #dfbb70;background:#fff8e5}.room-screen[data-moment=playing]:has(.room-onboarding)>.room-stage{border-color:#cadbdb;box-shadow:none;background:#fffdf6}
.room-onboarding{background:#fffdf6}.room-welcome{height:100%;padding:clamp(16px,3cqw,38px);display:flex;flex-direction:column;gap:18px;container-type:inline-size}.room-welcome .play-journey{flex:none;padding-bottom:14px}.starter-layout,.practice-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4cqw,70px);align-items:center;flex:1;min-height:0;max-width:1080px;width:100%;margin:auto}.starter-self{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:12px}.starter-self .garden-character{width:38px;height:44px}.starter-self .button{font-size:11px;margin:0}.starter-copy h2,.practice-copy h2{font-size:clamp(24px,3.5cqw,38px);line-height:1.4;margin:12px 0}.starter-description{font-size:14px;line-height:1.85;color:#52655c;margin:10px 0 18px}.starter-actions{display:flex;flex-wrap:wrap;gap:8px}.room-stage .starter-actions>.button{margin:0;min-height:42px;padding:10px 16px;font-size:13px}.starter-actions>.primary{flex-basis:100%;text-align:center}.starter-next,.practice-feedback,.practice-live{font-size:12px;line-height:1.7;color:#52655c;margin:16px 0 0}.practice-live{color:#9e3b24}.starter-rules{list-style:none;counter-reset:rule;margin:0;padding:0;display:grid;gap:16px}.starter-rules li{counter-increment:rule;position:relative;padding:16px 16px 16px 52px;background:#eef5f1;border-radius:14px}.starter-rules li::before{content:counter(rule);position:absolute;left:16px;top:16px;font-size:18px;font-weight:800;color:#315b63}.starter-rules strong{display:block;font-size:14px;margin-bottom:5px}.starter-rules span{display:block;font-size:12px;line-height:1.7;color:#52655c}.starter-guide>.waiting-character{display:block;width:155px;height:175px;margin:auto}.starter-guide>p,.starter-guide>small{display:block;text-align:center;font-size:13px;line-height:1.8}.room-welcome.is-intro .starter-self{display:none}
.practice-demo{text-align:center;padding:20px;background:#e2f1f4;border-radius:20px;max-width:350px;width:100%;justify-self:center}.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;aspect-ratio:1;max-width:270px;margin:12px auto}.practice-cell{border:1px solid #8fa6a1;background:#fffdf6;color:#315b63;border-radius:8px;font-size:24px;font-weight:800;min-width:0;padding:0}.practice-cell.is-open{background:#cfdfdc;border-color:transparent}.practice-cell:disabled{opacity:1}.practice-cell.is-target{outline:3px solid #b84326;outline-offset:1px}.practice-demo>small{font-size:11px}.room-stage .practice-mode{font-size:12px;margin:0;min-height:40px}.practice-feedback{min-height:2em}.room-stage .person>.account-avatar{width:25px;height:25px}
@media(max-width:700px){
 .entry-card{padding:18px;margin:20px auto}.play-journey{gap:5px;font-size:10px}.play-journey li{flex-direction:column;gap:5px}.play-journey b{width:21px;height:21px;font-size:10px}.entry-heading{margin:16px 0 6px}.entry-heading p{font-size:12px}.entry-layout{grid-template-columns:1fr;gap:12px}.entry-preview{flex-direction:row;flex-wrap:wrap;padding:8px 12px;gap:10px}.entry-preview>.garden-character{width:44px;height:50px}.entry-preview strong{font-size:16px}.entry-preview>span{margin-left:auto;font-size:10px}.entry-preview small{width:100%;font-size:10px}.entry-picker-tabs .button{padding:6px 16px;min-height:32px}.entry-character-grid .character-choice{min-height:80px;padding:5px}.entry-character-grid .garden-character{height:47px;width:44px}.entry-actions{margin-top:6px}.entry-actions .button{margin-block:2px;font-size:12px}.entry-note{font-size:10px}
 .room-bar .room-title{font-size:14px;max-width:34vw}.room-bar .room-self{padding:1px 4px;max-width:112px}.room-self .garden-character{width:28px;height:36px}.room-self-text strong{font-size:10px}.room-self-text small{font-size:8px}.room-self-text>span{font-size:9px}.room-nav{gap:3px}.room-bar .button{padding-inline:6px}.room-moment{font-size:11px;padding:7px 9px}.room-screen[data-moment=playing]>.room-stage{border-width:3px}.room-welcome{padding:14px;gap:10px}.room-welcome .play-journey{padding-bottom:10px}.starter-layout{grid-template-columns:1fr;gap:12px;align-content:center}.room-welcome:not(.is-intro) .starter-guide{display:none}.starter-self{margin:0 0 8px}.starter-self .garden-character{height:34px;width:30px}.starter-copy h2,.practice-copy h2{font-size:22px;margin:8px 0}.starter-description{font-size:12px;line-height:1.7;margin:8px 0 12px}.room-stage .starter-actions>.button{font-size:12px;min-height:36px;padding:7px 10px}.starter-next{font-size:11px;margin:10px 0 0}.starter-rules{gap:6px}.starter-rules li{padding:9px 10px 9px 34px;border-radius:10px}.starter-rules li::before{left:12px;top:9px;font-size:15px}.starter-rules strong{font-size:12px;margin-bottom:2px}.starter-rules span{font-size:11px;line-height:1.5}.room-welcome.is-intro .starter-layout{align-content:center;gap:8px}.room-welcome.is-intro .starter-description{font-size:11px}.room-welcome.is-intro .starter-next{display:none}.room-welcome.is-intro .starter-guide{grid-row:1}
 .practice-layout{grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-content:center;align-items:start}.practice-copy{display:contents}.practice-copy>.eyebrow,.practice-copy>h2,.practice-copy>.starter-actions{grid-column:1/-1}.practice-copy>.eyebrow{grid-row:1}.practice-copy>h2{grid-row:2;margin:0;font-size:20px}.practice-copy>.starter-description{grid-column:1;grid-row:3;margin:0;font-size:12px}.practice-demo{grid-column:2;grid-row:3/5;padding:8px;border-radius:12px}.practice-copy>.practice-feedback{grid-column:1;grid-row:4;font-size:10px;margin:0;min-height:0}.practice-copy>.starter-actions{grid-row:6}.practice-live{grid-column:1/-1;grid-row:5;font-size:10px;margin:0}.practice-grid{gap:5px;margin:9px 0}.practice-cell{font-size:20px;border-radius:5px}.room-stage .practice-mode{font-size:9px;padding:4px;min-height:32px;width:100%}.practice-demo>small{font-size:9px}
}
@media(max-height:620px) and (min-width:701px){.room-welcome{padding:12px 24px;gap:8px}.room-welcome .play-journey{padding-bottom:8px}.starter-self{margin-bottom:4px}.starter-copy h2,.practice-copy h2{font-size:23px;margin:6px 0}.starter-description{font-size:12px;line-height:1.6;margin:6px 0 10px}.starter-rules{gap:8px}.starter-rules li{padding-block:10px}.starter-rules li::before{top:10px}.starter-next,.practice-feedback{margin-top:8px;font-size:11px}.practice-demo{max-width:240px;padding:12px}.practice-grid{max-width:155px}.room-stage .starter-actions>.button{min-height:34px;font-size:12px;padding:6px 12px}}

body.in-room .main.room-screen{background:#fff8e5}.entry-card .button.primary{background:#b84326;border-color:#b84326;color:white}

.practice-grid{grid-template-rows:repeat(3,minmax(0,1fr))}

/* Shared predictions carry a stable seat number as well as a participant color. */
.mine-identity{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:22px;height:24px;padding:0 5px 3px;background:var(--flag-color,#315b63);clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);color:#fff;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.mine-person-name{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere}.mine-character{width:23px;height:27px;flex-shrink:0}.mine-people{width:100%;max-width:480px;font-size:12px}.mine-people>summary{cursor:pointer;text-align:center;padding:4px}.mine-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px 0}.mine-person{min-width:0;display:flex;flex-direction:column;gap:2px}.mine-person>small{padding-left:27px;color:#59695d;font-size:11px}.mine-help,.mine-cell-detail{max-width:480px;text-align:center;font-size:11px;line-height:1.5;color:#526454;margin:2px 0}.mine-cell-detail{min-height:2.8em}.mine-cell{position:relative}.mine-cell-flags{display:flex;align-items:center;justify-content:center;gap:1px;position:absolute;inset:2px;pointer-events:none}.mine-cell-flags .mine-identity{min-width:0;width:40%;max-width:24px;height:70%;max-height:27px;padding:0 1px 2px;font-size:clamp(9px,2vw,13px)}.mine-cell-flags .mine-identity:only-child{width:65%;height:80%}.mine-flag-more{position:absolute;right:-1px;bottom:-1px;background:#fffdf6;color:#324a3b;border-radius:4px;font-size:9px;line-height:12px;padding:0 2px}.mine-cell.is-own-flag{box-shadow:inset 0 0 0 2px #315b63,0 3px 0 #8dae83}.mine-cell.is-mine .mine-cell-flags{inset:auto 1px 1px;height:12px;justify-content:flex-end}.mine-cell.is-mine .mine-cell-flags .mine-identity{height:12px;width:12px;font-size:8px}.mine-cell:disabled:not(.is-open):not(.is-own-flag){cursor:default}.mine-cell:focus-visible{outline:3px solid #315b63;outline-offset:2px}.mine-correction{font-weight:700;color:#943e2d}.room-minesweeper .board:has(.mine-people[open]){overflow-y:auto;justify-content:flex-start}.room-minesweeper .board:has(.mine-people[open]) .mine-grid{flex-shrink:0}.mine-results .mine-person-name{text-align:left}.room-minesweeper .mine-last{min-height:1.4em}.room-minesweeper .mine-help{font-size:10px}.room-minesweeper .mine-cell-detail{font-size:10px}
@media(max-width:400px){.mine-identity{min-width:18px;height:21px;font-size:11px}.mine-legend{grid-template-columns:1fr}.mine-character{width:20px;height:23px}.mine-cell-flags .mine-identity{font-size:10px}}

.room-sheet .person>.account-avatar{width:25px;height:25px}.room-sheet .person>.account-avatar .garden-character{width:25px;height:25px}
.mine-flag-avatar{position:absolute;inset:-3px 0 1px;width:100%;height:100%;pointer-events:none}.mine-identity.has-avatar .mine-flag-number{position:absolute;bottom:2px;right:1px;border-radius:2px;background:#fffdf6;color:#263e31;padding:0 1px;font-size:8px;line-height:10px}.mine-cell.is-mine .mine-flag-avatar{display:none}.mine-cell.is-mine .mine-flag-number{position:static;background:none;color:#fff;font-size:8px;line-height:1}.mine-flag-locations{border-top:1px solid #d8dfcf;margin-top:7px;padding-top:5px}.mine-flag-location{font-size:12px}.mine-flag-location>summary{cursor:pointer;padding:5px}.mine-location-owners{display:flex;flex-wrap:wrap;gap:8px;padding:6px}
.room-minesweeper .board{gap:4px}.room-minesweeper .mine-grid{width:min(100%,max(160px,calc(100cqh - 165px)));flex-shrink:0}.room-minesweeper .mine-last{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.room-minesweeper .mine-cell-detail{display:none}.room-minesweeper .mine-score,.room-minesweeper .mine-mode,.room-minesweeper .mine-last{flex-shrink:0}
@media(max-height:600px){.room-minesweeper .mine-score[data-state="playing"] strong{display:none}.room-minesweeper .mine-grid{width:min(100%,max(120px,calc(100cqh - 140px)))}}
/* Keep touch targets large and mouse boards compact, including narrow PC windows. */
.mine-board-viewport{--mine-cell-size:44px;--mine-cell-step:calc(var(--mine-cell-size) + 3px);position:relative;flex:1 1 auto;width:100%;max-width:calc(var(--mine-width)*var(--mine-cell-step) + 5px);height:calc(var(--mine-height)*var(--mine-cell-step) + 9px);max-height:calc(var(--mine-height)*var(--mine-cell-step) + 9px);min-height:80px;isolation:isolate}
@media(hover:hover) and (pointer:fine){.mine-board-viewport{--mine-cell-size:32px}}
@media(any-pointer:coarse){.mine-board-viewport{--mine-cell-size:44px}}
.mine-board-scroll{position:absolute;inset:0;width:100%;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 4px 8px;touch-action:pan-x pan-y pinch-zoom;scrollbar-width:thin;scrollbar-color:var(--look-line,#a9bca4) transparent}
.mine-board-scroll.is-overview-hidden{visibility:hidden;pointer-events:none}
.mine-board-scroll .mine-grid,.room-minesweeper .board .mine-board-scroll .mine-grid{grid-template-columns:repeat(var(--mine-width),var(--mine-cell-size));grid-auto-rows:var(--mine-cell-size);width:calc(var(--mine-width)*var(--mine-cell-step) - 3px);min-width:0;max-width:none;aspect-ratio:auto;gap:3px;margin:0}
.room-minesweeper .mine-board-scroll .mine-cell{width:var(--mine-cell-size);height:var(--mine-cell-size);min-height:var(--mine-cell-size);min-width:var(--mine-cell-size);font-size:clamp(16px,calc(var(--mine-cell-size)*.455),20px);touch-action:pan-x pan-y pinch-zoom}
.mine-board-scroll .mine-flag-owner.has-emoji .mine-flag-sign,.mine-board-scroll .mine-flag-owner.has-emoji .mine-question-sign{font-size:clamp(14px,calc(var(--mine-cell-size)*.455),20px)}
.mine-board-scroll .mine-flag-owner.has-emoji:only-child .mine-flag-sign,.mine-board-scroll .mine-flag-owner.has-emoji:only-child .mine-question-sign{font-size:clamp(22px,calc(var(--mine-cell-size)*.636),28px)}
.mine-board-scroll .mine-flag-owner.has-emoji:only-child .mine-owner-emoji{font-size:clamp(9px,calc(var(--mine-cell-size)*.25),11px)}
.mine-controls .mine-overview-toggle{min-height:44px;margin:0;padding:6px 12px;font-size:12px}
.mine-overview{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.mine-overview[hidden]{display:none}
.mine-overview-map{position:relative;display:block;min-width:0;min-height:0;padding:0;border:0;border-radius:6px;background:var(--look-panel,#fffdf5);color:var(--look-ink,#294c47);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mine-overview-grid{display:grid;width:100%;height:100%;grid-template-columns:repeat(var(--mine-width),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:1px;pointer-events:none}
.mine-overview-cell{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;border:1px solid #94b794;border-radius:2px;background:#cfe5b5;color:#215640;font-size:clamp(10px,2.8vw,16px);font-weight:750;overflow:hidden}
.mine-overview-cell.is-open{background:#f4f3e9;border-color:#dddcd0}.mine-overview-cell.is-mine{background:#ffcfba}.mine-overview-cell[data-number="1"]{color:#3972b6}.mine-overview-cell[data-number="2"]{color:#34734b}.mine-overview-cell[data-number="3"]{color:#b95158}
.mine-overview-cell b{font-size:1em;line-height:1}.mine-overview-cell small{position:absolute;right:0;bottom:0;font-size:.55em;line-height:1}
.mine-overview-window{position:absolute;box-sizing:border-box;border:2px solid #bb5c2d;border-radius:4px;box-shadow:0 0 0 1px #fffdf5,inset 0 0 0 1px #fffdf5;pointer-events:none}
.mine-scroll-hint{font-size:11px;color:var(--look-muted,#526454);text-align:center;margin:0;flex-shrink:0}
@media(max-height:500px) and (min-width:600px){
 .room-screen:has(.mine-board-viewport) .cycle-brief{display:none}
}
/* Personal activity notes and host-selected rules. */
.mine-cell.is-mark-ready,.practice-cell.is-mark-ready{outline:3px solid #315b63;outline-offset:-3px}.mine-identity.mine-question-identity{clip-path:none;border-radius:50%;background:#fffdf6;border:2px solid var(--flag-color);color:var(--flag-color);padding:0}.mine-question-sign{font-size:19px;line-height:1}.mine-question-identity .mine-flag-number{position:absolute;bottom:-2px;right:-2px;font-size:9px;background:var(--flag-color);color:white;border-radius:3px;padding:1px 2px;line-height:1}.mine-cell,.practice-cell{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mine-settings{border:1px solid #cbd7c4;border-radius:12px;padding:10px 12px;margin:10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.mine-settings legend{padding:0 5px;font-size:13px;font-weight:700}.mine-setting{display:flex;align-items:center;gap:8px;font-size:12px}.mine-setting select{font:inherit;border:1px solid #bdcbb7;border-radius:7px;padding:6px;background:#fffdf6}.mine-setting-check input{width:18px;height:18px;accent-color:#315b63}.mine-settings small{width:100%;font-size:11px;line-height:1.5;color:#526454}.mine-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.mine-controls .mine-mode{margin:0;padding:6px 10px;font-size:12px;min-height:32px}.mine-game-settings{margin:2px 0;font-size:11px;color:#526454}.mine-record{width:100%;max-width:650px}.mine-record h3{text-align:center;font-size:18px;margin:8px 0}.mine-personal-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}.mine-personal-totals>div{padding:10px 5px;border-radius:10px;background:#e9eedf;text-align:center}.mine-personal-totals dt{font-size:11px}.mine-personal-totals dd{font-size:24px;font-weight:800;margin:4px 0 0;color:#315b63}.mine-action-log{list-style:none;padding:0;margin:8px 0;font-size:13px}.mine-action-log li{padding:7px 4px;border-bottom:1px solid #e0e2d4;overflow-wrap:anywhere}.room-minesweeper .board:has(.mine-record){overflow-y:auto;justify-content:flex-start}.room-activity-tools{overflow-x:auto;scrollbar-width:none}.room-activity-tools>*{flex-shrink:0}.room-welcome:has(.mine-settings){overflow-y:auto}.room-welcome:has(.mine-settings) .starter-layout{flex-shrink:0}
@media(max-width:600px){.mine-personal-totals{grid-template-columns:repeat(2,minmax(0,1fr));margin:6px 0}.mine-personal-totals>div{padding:5px}.mine-personal-totals dd{font-size:20px}.mine-action-log{font-size:11px}.mine-record h3{font-size:16px;margin:4px 0}.mine-controls{gap:5px}.mine-controls .mine-mode{font-size:11px}.mine-settings{padding:7px 9px;gap:7px}.mine-setting{font-size:11px}}
.room-welcome:has(.mine-settings)>.play-journey{flex:0 0 auto}.room-welcome:has(.mine-settings) .starter-layout{flex:0 0 auto;align-content:start;align-items:start}
/* Records are shared by their owner and opened only by interested viewers. */
.mine-record-sharing{width:100%;max-width:650px;padding:9px 12px;border:1px solid #ced9c5;border-radius:10px;background:#f5f7ee;text-align:center}.mine-record-sharing p{font-size:12px;margin:0 0 7px}.mine-record-sharing small{display:block;font-size:10px;color:#526454;margin-top:5px}.mine-sharing-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.mine-sharing-actions .button{font-size:12px;padding:7px 10px;min-height:32px}.mine-shared-records{width:100%;max-width:650px;text-align:center}.mine-shared-records h3{font-size:17px;margin:6px 0}.mine-record-choice{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:12px;margin:10px 0}.mine-record-choice select{font:inherit;max-width:100%;border:1px solid #bdcbb7;border-radius:8px;padding:8px;background:#fffdf6}.room-minesweeper .board:has(.mine-shared-records){overflow-y:auto;justify-content:flex-start}.mine-shared-launcher{font-size:12px;min-height:32px}
.mine-shared-scope{font-size:12px;line-height:1.6;color:#526454;text-align:center;margin:6px 0}.mine-share-update{padding:9px;border-radius:9px;background:#e9eedf;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:12px}.mine-share-update .button{font-size:12px;padding:6px 10px}.mine-unread-badge{margin-left:5px;font-size:10px;color:#526454}.mine-defer-read{font-size:12px;padding:6px 10px;margin:6px 0}.mine-board-feedback{font-size:12px;margin:3px 0;color:#315b63;text-align:center}.mine-stuck-help{font-size:12px;line-height:1.6}.mine-cell-owner-dialog{border:2px solid #315b63;border-radius:16px;background:#fffdf6;color:#253b36;max-width:min(420px,90vw);max-height:75vh;padding:18px}.mine-cell-owner-dialog::backdrop{background:#253b3666}.mine-cell-owner-dialog h3{font-size:17px;margin:0 0 12px}.mine-cell-owner-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow-y:auto;max-height:48vh;margin-bottom:14px}.mine-cell[data-open-blocked=true]:hover{transform:none;cursor:help}.mine-shared-launcher{white-space:nowrap}

/* A shared click is a brief moment, never a speed contest. */
.mine-together-host{position:relative}.mine-together-effect{position:absolute;inset:0;pointer-events:none;z-index:3}.mine-together-ring{position:absolute;inset:-2px;border:2px solid var(--together-color,#315b63);border-radius:7px;box-shadow:0 0 0 1px #fffdf6aa;animation:mine-together-ring 2600ms ease-out both;animation-delay:var(--together-delay,0ms)}.mine-together-ring:nth-child(2){inset:-6px;animation-name:mine-together-ring-outer}.mine-together-status{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:calc(100% - 16px);margin:0;padding:7px 10px;border:1px solid #bccdb9;border-radius:12px;background:#fffdf6ed;box-shadow:0 2px 8px #253b3620;color:#294c47;font-size:11px;line-height:1.5;text-align:center;pointer-events:none;animation:mine-together-notice 2600ms linear both;animation-delay:var(--together-delay,0ms)}.mine-together-people{display:flex;gap:3px;flex:none;align-items:center}.mine-together-avatar{width:23px;height:27px}.mine-together-identity{display:inline-grid;place-items:center;width:19px;height:19px;flex:none;border-radius:50%;background:var(--together-color,#315b63);color:white;font-size:10px;font-weight:750}.mine-together-text{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.mine-together-record{margin:12px 0;padding:10px 12px;border:1px solid #d3ddcc;border-radius:10px;background:#f4f7ee}.mine-together-record h4{margin:0;text-align:center;font-size:13px}.mine-together-total{text-align:center;font-size:21px;font-weight:750;margin:4px 0;color:#315b63}.mine-together-partners{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}.mine-together-partners li{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.mine-together-partner{display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}.mine-together-count{white-space:nowrap}.mine-together-record-note{display:block;margin:4px 0;font-size:10px;line-height:1.5;color:#526454}
@keyframes mine-together-ring{0%{opacity:0;transform:scale(.82)}15%{opacity:1;transform:scale(1.08)}35%{transform:scale(1)}75%{opacity:.85}100%{opacity:0;transform:scale(1.2)}}
@keyframes mine-together-ring-outer{0%{opacity:0;transform:scale(.88)}18%{opacity:.85;transform:scale(1.04)}38%{transform:scale(1)}75%{opacity:.65}100%{opacity:0;transform:scale(1.17)}}
@keyframes mine-together-notice{0%,80%{opacity:1}100%{opacity:0}}
.is-quiet .mine-together-ring,.is-quiet .mine-together-status{animation:none;transform:none}.is-quiet .mine-together-status{transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){.mine-together-ring{animation:none;opacity:.85;transform:none}.mine-together-status{animation:none;opacity:1}}

/* Emoji avatar catalogue: show the whole collection without paging. */
.entry-character-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));max-height:440px;overflow-y:auto;padding:4px;align-content:start}.entry-character-grid .character-choice{min-height:98px}.entry-picker-tabs{flex-wrap:wrap}.entry-preview{position:sticky;top:20px;align-self:start}
@media(max-width:700px){.entry-character-grid{max-height:360px;grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.entry-preview{position:static}}




/* Show the prediction first, with its owner as a small corner signature. */
.mine-identity.has-emoji{clip-path:none;background:transparent;border:0;border-radius:0;color:var(--flag-color);padding:0;overflow:visible}
.mine-owner-emoji{font-size:21px;line-height:1}
.mine-cell-flags .mine-flag-owner.has-emoji{max-width:28px;max-height:30px}
.mine-flag-owner.has-emoji .mine-owner-emoji{position:absolute;right:-2px;bottom:-1px;font-size:9px;line-height:1;z-index:1}
.mine-flag-owner.has-emoji .mine-flag-sign,.mine-flag-owner.has-emoji .mine-question-sign{position:static;font-size:20px;line-height:1;font-weight:800;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--flag-color);transform:translate(-1px,-2px)}
.mine-flag-owner.has-emoji:only-child .mine-flag-sign,.mine-flag-owner.has-emoji:only-child .mine-question-sign{font-size:28px}
.mine-flag-owner.has-emoji:only-child .mine-owner-emoji{font-size:11px;right:-3px;bottom:-2px}
.mine-identity.has-emoji .mine-flag-number{position:absolute;top:-2px;right:-4px;font-size:8px;line-height:10px;border-radius:3px;padding:0 2px;background:var(--flag-color);color:white}
.mine-cell.is-mine .mine-flag-owner.has-emoji .mine-owner-emoji{position:static;font-size:10px}
.mine-cell.is-mine .has-emoji .mine-flag-sign{display:none}
.room-minesweeper .mine-cell-detail{display:none}

.comment-strip[hidden],.live-dock-status[hidden]{display:none!important}

.mine-cell.is-tap-pending,.practice-cell.is-tap-pending{filter:brightness(.94);transform:translateY(1px)}

.game-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;border:1px solid var(--line,#d5ddd4);border-radius:16px;padding:16px;margin:16px 0;min-width:0}
.game-settings legend{font-weight:700;padding:0 8px}.game-settings>p{grid-column:1/-1}.game-setting{display:grid;align-content:start;gap:7px;min-width:0}.game-setting select{width:100%;min-width:0}.optional-view{margin:12px 0}.optional-view-body:not(:empty),.creative-private{margin-top:12px;padding:14px;border:1px solid var(--line,#d5ddd4);border-radius:14px}.optional-view-body .drawing-canvas{width:100%;height:auto}.optional-view-body .oogiri-response{white-space:pre-wrap;overflow-wrap:anywhere}
.game-settings-panel{margin:12px 0;border:1px solid #cbd7c4;border-radius:12px;background:#f6f9f2;padding:12px}.game-settings-panel>summary{font-size:13px;line-height:1.6;font-weight:700;cursor:pointer}.game-settings-panel .game-settings{border:0;padding:8px 0;margin:8px 0 0}.room-welcome:has(.game-settings){overflow-y:auto}.room-welcome:has(.game-settings)>.play-journey{flex:0 0 auto}.room-welcome:has(.game-settings) .starter-layout{flex:0 0 auto;align-items:start;align-content:start}.room-stage .board:has(.optional-view){overflow-y:auto}
.game-settings>.geo-difficulty{grid-column:1/-1;min-width:0}

/* Viewer-selected modes share the avatar palette, typography and control shapes. */
:root[data-appearance]{--green:var(--look-accent);--ink:var(--look-ink);--muted:var(--look-muted);--line:var(--look-line);color:var(--look-ink);background:var(--look-bg);font-family:var(--look-font)}
[data-appearance] body,[data-appearance] .shell{background:var(--look-bg);color:var(--look-ink)}
[data-appearance] .main{background-image:var(--look-pattern);background-size:24px 24px}
[data-appearance] .sidebar{background:var(--look-panel);border-color:var(--look-line);color:var(--look-ink)}
[data-appearance] :is(.brand,.room-title,.hero-title,.game-title,.entry-heading h1){color:var(--look-ink);font-family:var(--look-display)}
[data-appearance] :is(.topbar,.brand-caption,.eyebrow,.help,.lead,.side-note,.connection-state,.footer,.entry-note,.character-intro,.character-picker-note){color:var(--look-muted);border-color:var(--look-line)}
[data-appearance] :is(.board,.game-card,.entry-card,.room-welcome,.entry-preview,.character-panel,.live-stage,.audience-stage,.starter-guide,.veggie-card){background:var(--look-panel);color:var(--look-ink);border-color:var(--look-line);border-radius:var(--look-radius);box-shadow:var(--look-shadow)}
[data-appearance] :is(.button,.character-choice,.entry-picker-tabs button){font-family:var(--look-font);color:var(--look-ink);background:var(--look-panel);border-color:var(--look-line);border-radius:var(--look-button-radius)}
[data-appearance] :is(.button.primary,.button.selected,.nav-item.selected){background:var(--look-accent);color:var(--look-on-accent);border-color:var(--look-accent)}
[data-appearance] :is(.button.secondary,.character-choice[aria-pressed=true]){background:var(--look-soft);color:var(--look-ink)}
[data-appearance] :is(.input,select,textarea){color:var(--look-ink);background:var(--look-panel);border-color:var(--look-line)}
.appearance-picker{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;margin:20px 0 0;flex:0 0 auto;color:var(--look-ink);font-size:12px}.appearance-label{font-weight:700;white-space:nowrap}.appearance-select{width:100%;max-width:100%;padding:9px 10px;border:1px solid var(--look-line);border-radius:var(--look-button-radius);font:12px var(--look-font);background:var(--look-panel);color:var(--look-ink)}.appearance-select:focus-visible{outline:3px solid var(--look-accent);outline-offset:3px}.shell:has(.landing) .appearance-picker{width:auto;flex-direction:row;align-items:center;margin:0 0 0 auto;gap:8px}.shell:has(.landing) .appearance-select{width:140px;max-width:40vw}.garden-character[data-character-look=pixel]{image-rendering:pixelated}
[data-appearance=pixel] .main{background-size:12px 12px}[data-appearance=pixel] .button{box-shadow:var(--look-shadow)}[data-appearance=woodcut] .board{border-style:double;border-width:3px}[data-appearance=anime] .button.primary{box-shadow:var(--look-shadow)}[data-appearance=christmas] .live-stage{border-style:dashed}[data-appearance=raw] .main{background-image:none}
@media(max-width:760px){.appearance-picker{gap:5px}.appearance-label,.appearance-current{display:none}.appearance-select{width:116px;padding:8px 6px;font-size:11px}}
/* Landing composition uses the same mode tokens as its avatars. */
[data-appearance]:not([data-appearance=garden]) .landing .garden-hero{background:var(--look-bg);border-color:var(--look-line)}
[data-appearance]:not([data-appearance=garden]) .landing .garden-hero :is(h1,.hero-title-pop){color:var(--look-ink);font-family:var(--look-display);text-decoration-color:var(--look-accent)}
[data-appearance]:not([data-appearance=garden]) .landing .garden-hero :is(.lead,.eyebrow){color:var(--look-muted)}
[data-appearance]:not([data-appearance=garden]) .landing .garden-illustration:before{background:var(--look-soft);border:var(--look-border) solid var(--look-line);border-radius:var(--look-radius)}
[data-appearance]:not([data-appearance=garden]) .landing :is(.hero-badges span,.start-panel){color:var(--look-ink);background:var(--look-panel);border-color:var(--look-line);border-radius:var(--look-radius)}
[data-appearance]:not([data-appearance=garden]) .landing :is(.play-ribbon,.hero-play-card,.garden-speech){background:var(--look-soft);color:var(--look-ink);border-color:var(--look-line)}
[data-appearance]:not([data-appearance=garden]) .landing :is(.play-ribbon b,.start-panel p,.start-panel .help,.start-panel .eyebrow,.hero-browse){color:var(--look-muted)}
[data-appearance]:not([data-appearance=garden]) .landing .start-panel .primary{background:var(--look-accent);color:var(--look-on-accent);border-color:var(--look-accent)}
[data-appearance]:not([data-appearance=garden]) .landing .start-panel .secondary{background:var(--look-soft);color:var(--look-ink);border-color:var(--look-line)}
[data-appearance] :is(.activity-surface,.room-sheet-body,.host-controls,.game-flow){--look-bg:var(--game-paper);--look-stage:var(--game-paper);--look-panel:var(--game-paper);--look-ink:var(--game-ink);--look-muted:var(--game-muted);--look-soft:var(--game-soft);--look-accent:var(--game-accent);--look-on-accent:var(--game-on-accent);--look-line:var(--game-line);--green:var(--game-accent);--ink:var(--game-ink);--muted:var(--game-muted);--line:var(--game-line);background:var(--game-paper);color:var(--game-ink)}

html[data-appearance] body .shell>.sidebar{background:var(--look-panel);color:var(--look-ink);border-color:var(--look-line)}
html[data-appearance] body .sidebar :is(.brand,.brand-caption,.nav-item){color:var(--look-ink)}
html[data-appearance] body .sidebar .nav-item.selected{color:var(--look-on-accent)}
html[data-appearance] body.in-room .main.room-screen{background:var(--look-bg);color:var(--look-ink)}
[data-appearance] :is(.room-bar,.room-sheet,.room-sheet-header,.live-dock){background:var(--look-panel);color:var(--look-ink);border-color:var(--look-line)}
[data-appearance] :is(.room-brand,.room-bar-title,.room-sheet-header h2){color:var(--look-ink)}
[data-appearance] :is(.room-moment,.room-bar .room-self){background:var(--look-soft);color:var(--look-ink);border-color:var(--look-line)}
[data-appearance] .room-sheet .appearance-picker{justify-content:flex-start;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--look-line)}
[data-appearance] .room-welcome{--look-panel:var(--look-stage);--look-ink:#253b36;--look-muted:#53685e;background:var(--look-stage);color:var(--look-ink)}
[data-appearance] .room-screen[data-moment=playing]>.room-stage{border-color:var(--look-play);background:var(--look-play);box-shadow:0 0 0 1px var(--look-play)}

[data-appearance] .room-sheet .appearance-picker{max-width:280px}

/* A visible game cycle: an outlined ready area, a solid play frame, a double finish frame. */
body.in-room .main.room-screen{grid-template-rows:52px auto 32px minmax(0,1fr) 112px}
.room-cycle{--cycle-color:#416c70;--cycle-paper:#eef5f5;--cycle-edge:#b6cccc;min-width:0;display:grid;gap:6px;color:#293f3b}
.room-cycle[data-cycle=playing]{--cycle-color:#2c6350;--cycle-paper:#e9f3eb;--cycle-edge:#9cbeaa}
.room-cycle[data-cycle=finished]{--cycle-color:#805921;--cycle-paper:#fff1d3;--cycle-edge:#cfb276}
.cycle-steps{display:flex;gap:0;list-style:none;padding:0;margin:0;max-width:520px;min-width:0;font-size:11px;line-height:1.3;color:var(--look-muted,#52655c)}
.cycle-steps li{position:relative;display:flex;align-items:center;gap:6px;flex:1;min-width:0;white-space:nowrap}
.cycle-steps li:not(:last-child)::after{content:'';height:1px;flex:1;margin:0 10px 0 4px;background:var(--look-line,#c4cebd)}
.cycle-step-symbol{display:grid;place-items:center;flex:none;width:21px;height:21px;border:1px solid var(--look-line,#bdc8b8);border-radius:50%;font-size:10px;font-weight:800}
.cycle-steps .is-current{color:var(--look-ink,#293f3b);font-weight:800}
.cycle-steps .is-current .cycle-step-symbol{background:var(--cycle-color);border-color:var(--cycle-color);color:#fff;box-shadow:0 0 0 2px var(--look-bg,#fff8e5),0 0 0 3px var(--cycle-color)}
.cycle-steps .is-current .symbol-prepare{border-style:dashed;background:var(--cycle-paper);color:var(--cycle-color)}
.cycle-steps .is-current .symbol-finished{border-radius:5px}
.cycle-brief{display:flex;align-items:center;gap:14px;min-width:0;min-height:66px;padding:10px 16px;background:var(--cycle-paper);border:1px solid var(--cycle-edge);border-left:5px solid var(--cycle-color);border-radius:12px}
.cycle-emblem{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;color:var(--cycle-color);border:2px dashed currentColor;border-radius:50%}
.emblem-prepare::before{content:'';width:10px;height:10px;border:2px solid currentColor;border-radius:50%}
.emblem-playing{border:0;background:var(--cycle-color);color:#fff;border-radius:50%}
.emblem-playing::before{content:'';width:17px;height:20px;margin-left:3px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.emblem-finished{border:2px solid currentColor;border-radius:8px;box-shadow:0 0 0 3px var(--cycle-paper),0 0 0 4px var(--cycle-edge)}
.emblem-finished::before{content:'';width:9px;height:18px;border:solid currentColor;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.cycle-current{flex:1;min-width:0}
.cycle-scene{display:block;font-size:10px;line-height:1.4;letter-spacing:.06em;color:var(--cycle-color);font-weight:750}
.cycle-heading{font-size:19px;line-height:1.4;margin:2px 0 0;letter-spacing:-.03em;font-weight:800;overflow-wrap:anywhere}
.cycle-preview{display:flex;flex-direction:column;gap:3px;max-width:42%;padding-left:18px;border-left:1px solid var(--cycle-edge);font-size:11px;line-height:1.5}
.cycle-preview strong{font-size:12px;color:var(--cycle-color)}
.cycle-preview span{color:#52645c}
.room-cycle .cycle-next{flex:none;margin:0;font-size:12px;min-height:40px;padding:8px 14px}
.cycle-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.room-cycle.is-arriving .cycle-brief{animation:cycle-arrive 650ms ease-out both;animation-delay:var(--cycle-elapsed,0ms)}
@keyframes cycle-arrive{from{opacity:.55;transform:translateY(5px);box-shadow:0 0 0 3px var(--cycle-edge)}to{opacity:1;transform:translateY(0);box-shadow:0 0 0 0 transparent}}
html[data-appearance] .room-screen[data-moment=prepare]>.room-stage,.room-screen[data-moment=prepare]>.room-stage{border:2px dashed #a9bfbd;background:var(--look-stage,#fffdf6);box-shadow:none}
html[data-appearance] .room-screen[data-moment=playing]>.room-stage,.room-screen[data-moment=playing]>.room-stage{border:4px solid var(--look-play,#2c6350);background:var(--look-play,#2c6350)}
html[data-appearance] .room-screen[data-moment=finished]>.room-stage,.room-screen[data-moment=finished]>.room-stage{border:6px double #cfb276;background:#fff1d3;box-shadow:none}
.room-screen[data-moment=finished] .cycle-brief{border-style:double;border-width:3px 3px 3px 6px;background-image:repeating-linear-gradient(135deg,transparent,transparent 6px,#cfb27612 6px,#cfb27612 8px)}
.room-stage .game-flow{color:var(--look-ink,#293f3b);background:var(--look-panel,#fffdf6);border-radius:8px;padding:4px 8px}
.room-onboarding .room-welcome{overflow-y:auto}
.room-stage .board.room-direct-play{overflow-y:auto;overscroll-behavior:contain}
.room-stage .quiz-result{font-size:clamp(23px,3vw,32px);line-height:1.4;margin:4px 0 16px;color:#805921}
.room-drawing .drawing-editor{flex:1 0 280px;min-height:280px}
.room-drawing .room-drawing-paper{min-height:120px}
@media(max-width:700px){
 body.in-room .main.room-screen{grid-template-rows:54px auto 30px minmax(0,1fr) 108px;gap:6px}
 .room-cycle{gap:6px}.cycle-steps{max-width:none;font-size:10px;padding-inline:3px}.cycle-steps li{gap:5px}.cycle-steps li:not(:last-child)::after{margin-inline:7px}.cycle-step-symbol{width:18px;height:18px;font-size:9px}
 .cycle-brief{display:grid;grid-template-columns:29px minmax(0,1fr);gap:3px 9px;padding:7px 10px;min-height:0;border-radius:10px}
 .cycle-emblem{width:29px;height:29px}.emblem-playing::before{width:12px;height:15px}.emblem-finished::before{width:7px;height:13px;border-width:0 2px 2px 0}
 .cycle-emblem{grid-column:1;grid-row:1/3;align-self:start;margin-top:3px}
 .cycle-current{grid-column:2;min-width:0}.cycle-scene{font-size:9px}.cycle-heading{font-size:15px;margin-top:1px;line-height:1.4}
 .cycle-preview{grid-column:2;max-width:none;padding:0;border:0;gap:1px;font-size:10px;line-height:1.45}.cycle-preview strong{font-size:11px}
 .room-cycle[data-cycle=finished] .cycle-brief{grid-template-columns:29px minmax(0,1fr) auto}.room-cycle[data-cycle=finished] .cycle-current{grid-column:2/4}.room-cycle[data-cycle=finished] .cycle-next{grid-column:3;grid-row:2;align-self:end}
 .room-cycle .cycle-next{font-size:11px;padding:6px 9px;min-height:36px}
 .room-stage .board-quiz .options{grid-template-columns:repeat(2,minmax(0,1fr))}.room-stage .board-quiz .answer{margin:0;min-height:44px}
 .room-drawing .drawing-editor{min-height:350px;flex-basis:350px}.room-drawing .room-drawing-paper{min-height:180px}
 html[data-appearance] .room-screen[data-moment=playing]>.room-stage{border-width:3px}
 .room-onboarding .room-welcome{padding:12px}
}
@media(max-height:520px) and (min-width:701px){body.in-room .main.room-screen{grid-template-rows:38px auto 28px minmax(0,1fr) 96px;gap:4px}.cycle-brief{min-height:48px;padding-block:6px}.cycle-heading{font-size:16px}.cycle-emblem{width:29px;height:29px}}
@media(prefers-reduced-motion:reduce){.room-cycle.is-arriving .cycle-brief{animation:none}}

/* The current player's task has its own shape as well as a color. */
.room-cycle[data-attention=wait]{--cycle-color:#596c82;--cycle-paper:#edf1f6;--cycle-edge:#adb9c8}
.room-cycle[data-attention=review]{--cycle-color:#805921;--cycle-paper:#fff3d9;--cycle-edge:#cfb276}
.room-cycle[data-attention=watch]{--cycle-color:#69677a;--cycle-paper:#f1eff6;--cycle-edge:#c2bdce}
.room-cycle[data-attention=wait] .cycle-brief{border-left-style:dashed;background-image:repeating-linear-gradient(135deg,transparent,transparent 9px,#596c8207 9px,#596c8207 11px)}
.emblem-act{border:0;background:var(--cycle-color);color:#fff}
.emblem-act::before{content:'';width:15px;height:18px;margin-left:3px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.emblem-wait{border-style:dashed;border-radius:8px}
.emblem-wait::before{content:'';width:12px;height:16px;border:solid currentColor;border-width:0 4px}
.emblem-review{border:2px solid currentColor;border-radius:3px}
.emblem-review::before{content:'';width:17px;height:14px;border:1px solid currentColor;border-radius:2px;background:linear-gradient(90deg,transparent 47%,currentColor 47%,currentColor 53%,transparent 53%)}
.emblem-watch{border:2px solid currentColor;border-radius:50% 50% 45% 45%}
.emblem-watch::before{content:'';width:10px;height:10px;border:2px solid currentColor;border-radius:50%}
.cycle-explain{display:none}
.room-geo .geo-map-wrap{flex:1 0 200px;min-height:200px}
.room-geo .board>*{flex-shrink:0}
.room-geo .geo-viewport{min-height:130px}
.room-stage .board-foodvote>.room-collection{height:300px}
html[data-appearance] .room-screen[data-moment=playing][data-attention=wait]>.room-stage{border-color:#708299;background:#708299;box-shadow:none}
html[data-appearance] .room-screen[data-moment=playing][data-attention=review]>.room-stage{border-color:#c7a66c;background:#c7a66c;box-shadow:none}
html[data-appearance] .room-screen[data-moment=playing][data-attention=watch]>.room-stage{border-color:#a09aaf;background:#a09aaf;box-shadow:none}
@media(max-width:700px){
 .room-stage .game-flow .help{font-size:10px;line-height:1.4}
 .room-stage .board-drawing[data-phase=vote]>.room-collection,.room-stage .board-oogiri[data-phase=vote]>.room-collection{height:220px}
 .room-stage .board-drawing[data-phase=vote]>h3{display:none}
 .room-stage .board-oogiri textarea{height:76px;min-height:76px}.room-stage .board-oogiri .field-label{margin:3px 0}.room-stage .board-oogiri .oogiri-form{gap:4px;margin:4px 0}
 .room-stage .board-oogiri>.oogiri-theme{display:none}.room-stage .board-oogiri>.oogiri-title{margin:8px 0;font-size:18px;line-height:1.5}
 .room-stage .debate-topic{padding:10px;margin:4px 0}.room-stage .debate-topic>.eyebrow{display:none}.room-stage .debate-topic h2{font-size:15px;line-height:1.5;margin:2px 0}.room-stage .debate-topic p{font-size:11px;line-height:1.5;margin:4px 0}
 .room-stage .debate-turn{padding:8px;margin:6px 0}.room-stage .debate-turn h2{font-size:16px;margin:4px 0}.room-stage .debate-turn p{font-size:12px;line-height:1.5;margin:4px 0}
 .room-screen[data-attention=act] .debate-turn>h2{display:none}
 .room-stage .proof-verification{font-size:10px;line-height:1.5;margin:4px 0;padding-bottom:6px}.room-stage :is(.proof-problem,.proof-theorem){padding:10px;margin:6px 0}.room-stage .proof-theorem>.eyebrow{display:none}.room-stage .proof-theorem h2{font-size:18px;line-height:1.5;margin:6px 0}.room-stage .proof-theorem h3{margin:8px 0 4px}.room-stage :is(.proof-problem,.proof-theorem) p{font-size:12px;line-height:1.6;margin:6px 0}
 .room-stage .word-featured{padding:10px;margin:6px 0}.room-stage .word-title{font-size:24px;margin:4px 0}.room-stage .word-reading,.room-stage .word-meaning{margin:6px 0}.room-stage .word-featured .word-meaning{font-size:13px;line-height:1.5}
 .room-stage .board-shiritori>.explanation{font-size:11px;line-height:1.5;padding:10px;margin:6px 0}
 .room-stage .board-drama{display:flex;flex-direction:column;gap:6px}.room-stage .board-drama>*{flex-shrink:0}
 .room-screen[data-moment=playing] .board-drama .drama-stage{order:-1;margin:0;padding:12px}.room-screen[data-moment=playing] .board-drama .drama-heading{order:1}
 .room-stage .drama-stage .drama-cue{font-size:20px;line-height:1.6;margin:8px 0}.room-stage .drama-stage .drama-wait{font-size:11px;line-height:1.5;margin:6px 0}.room-stage .drama-stage .drama-speaker{font-size:16px;margin:6px 0}
 .room-stage .ensemble-audio{padding:6px;gap:4px;flex-shrink:0}.room-stage .ensemble-audio .button{font-size:10px;padding:6px;min-height:32px;margin:0}
 .room-stage .ensemble-volume{gap:4px;font-size:10px}.room-stage .ensemble-volume input{width:72px}.room-stage .ensemble-sound-status{font-size:10px;line-height:1.3;padding:0}
 .room-stage .ensemble-beat{min-height:0;font-size:11px;line-height:1.4;padding:6px;margin:6px 0}
 .room-screen[data-attention=review] .board-hanafuda .hana-hand,.room-screen[data-moment=finished] .board-hanafuda .hana-hand{order:0;position:static}
 .room-screen[data-moment=playing][data-attention=act] .room-minesweeper .mine-score>strong,.room-screen[data-moment=playing][data-attention=wait] .room-minesweeper .mine-score>strong{display:none}
 .room-screen[data-moment=playing] .room-minesweeper .board{padding:8px;overflow-y:auto}
 .room-screen[data-moment=playing] .room-minesweeper .board>.mine-grid{width:min(100%,max(200px,calc(100cqh - 80px)))}
 .room-geo .board>.question,.room-stage .board-foodvote>.question,.room-stage .board-yakyuken>.question{display:none}
 .room-stage .board-foodvote>.food-status{padding:6px;margin:6px 0;font-size:11px}
 .room-stage .board-yakyuken>.room-collection{height:184px}.room-stage .board-yakyuken .veggie{height:55px}.room-stage .board-yakyuken .veggie-card{padding:8px}.room-stage .board-yakyuken .veggie-card h3{font-size:12px;line-height:1.3;margin:2px 0}.room-stage .board-yakyuken .veggie-card p{font-size:11px;line-height:1.3;margin:2px 0}
 .room-mahjong .mj-table{flex:0 0 auto;min-height:145px}.room-mahjong .mj-own-hand,.room-mahjong .mj-toolbar{flex-shrink:0}
 .room-mahjong .mj-own-hand{order:-1;padding:2px 0 6px}.room-mahjong .mj-claim{order:-2;flex-shrink:0;padding:6px 8px;background:#eef4ee;border-radius:8px}.room-mahjong .mj-claim p{margin:0 0 3px;font-size:12px}.room-mahjong .board>.eyebrow{display:none}
 .room-mahjong .mj-hand-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:4px;margin:4px 0}.room-mahjong .mj-actions:empty{display:none}
 .room-mahjong .mj-hand-tiles .mj-tile{width:100%;min-width:0;min-height:44px;height:44px;aspect-ratio:auto;margin:0}
 .room-mahjong .mj-hand-tiles .mj-drawn{margin-left:4px;width:calc(100% - 4px)}
 .room-stage .board-hanafuda{display:flex;flex-direction:column;gap:6px}.room-stage .board-hanafuda>*{flex-shrink:0}
 .room-stage .board-hanafuda>.eyebrow{order:-3}.room-stage .board-hanafuda>.hana-status{order:-2}
 .room-stage .board-hanafuda .hana-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin:4px 0;gap:5px}
 .room-stage .board-hanafuda .hana-card{width:100%;max-width:none;min-height:0;height:80px;padding:4px}.room-stage .board-hanafuda .hana-symbol{font-size:20px}
 .room-stage .board-hanafuda .hana-hand{order:-1;position:sticky;top:0;z-index:2;background:#fffdf6;padding:6px;margin:0;border:1px solid #d2dacb;border-radius:9px}
 .room-stage .board-hanafuda .hana-hand::before{content:'自分の手札';font-size:11px;font-weight:700}.room-stage .board-hanafuda .hana-hand>.help{display:none}
 .room-screen[data-attention=act] .board-hanafuda>.question,.room-screen[data-attention=wait] .board-hanafuda>.question{display:none}
 .room-stage .board-hanafuda>.hana-instruction{font-size:11px;line-height:1.5;margin:2px 0}.room-stage .board-hanafuda>h3{font-size:13px;margin:4px 0}.room-stage .board-hanafuda>.hana-decisions{order:-4}
 .room-cycle[data-attention]{gap:4px}
 .room-cycle[data-attention] .cycle-brief{grid-template-columns:24px minmax(0,1fr) 34px;padding:6px 8px;gap:2px 8px}
 .room-cycle[data-attention] .cycle-emblem{width:24px;height:26px;margin-top:1px}.emblem-act::before{width:11px;height:14px}.emblem-wait::before{height:13px;width:10px;border-inline-width:3px}.emblem-review::before{width:13px;height:12px}
 .room-cycle[data-attention] .cycle-scene{font-size:10px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
 .room-cycle[data-attention] .cycle-heading{font-size:14px;line-height:1.4;margin:0}
 .room-cycle[data-attention] .cycle-preview{font-size:11px;line-height:1.3}.room-cycle[data-attention] .cycle-preview>span{display:none}.room-cycle[data-attention] .cycle-preview strong{font-weight:600;font-size:10px;line-height:1.4}
 .room-cycle[data-attention] .cycle-explain{display:block;grid-column:3;grid-row:1/3;align-self:center;margin:0;padding:5px 2px;min-height:34px;font-size:10px;background:transparent;border-color:var(--cycle-edge);color:var(--cycle-color)}
}

/* Keep typing and the original submit action above the on-screen keyboard. */
.room-input-actions{display:none}
@media(max-width:700px),(max-width:1000px) and (max-height:520px){
 body.in-room .main.room-screen[data-editing]{position:fixed;top:var(--room-input-top,0px);left:0;width:100%;height:var(--room-input-height,100dvh);grid-template-rows:36px auto minmax(0,1fr) auto;gap:4px;padding:6px 8px}
 .room-screen[data-editing]>.room-bar{grid-row:1}.room-screen[data-editing]>.room-cycle{grid-row:2}.room-screen[data-editing]>.room-stage{grid-row:3}
 .room-screen[data-editing]>.room-activity-tools,.room-screen[data-editing]>.live-dock{display:none}
 .room-screen[data-editing] .room-stage :is(.game-flow,.host-controls){display:none}
 .room-screen[data-editing] .room-bar-title{flex-direction:column;align-items:flex-start;gap:1px}.room-screen[data-editing] .room-brand{font-size:15px;line-height:1;padding:0;border:0}.room-screen[data-editing] .room-title{font-size:12px}.room-screen[data-editing] .room-nav .button{min-height:32px;padding-block:3px}.room-screen[data-editing] .room-self .garden-character{height:30px;width:24px}
 .room-screen[data-editing] .cycle-brief{display:grid;padding:4px 8px;gap:1px 6px;grid-template-columns:23px minmax(0,1fr)}
 .room-screen[data-editing] .cycle-emblem{grid-column:1;grid-row:1/3}.room-screen[data-editing] .cycle-current{grid-column:2}.room-screen[data-editing] .cycle-preview{grid-column:2;display:block;max-width:none;border:0;padding:0}.room-screen[data-editing] .cycle-preview>span{display:none}
 .room-screen[data-editing] .cycle-emblem{width:23px;height:23px;margin-top:2px}.room-screen[data-editing] .cycle-scene{display:none}.room-screen[data-editing] .cycle-heading{font-size:13px;line-height:1.4}.room-screen[data-editing] .cycle-preview strong{font-size:10px;line-height:1.4}
 .room-screen[data-editing] .cycle-explain{display:none}.room-screen[data-editing] .room-stage .board{padding:10px;scroll-padding-block:8px}
 .room-screen[data-editing] :is(.room-stage,.room-sheet) textarea.input{height:80px;min-height:64px;max-height:96px}
 .room-screen[data-editing] :is(.room-stage,.room-sheet) input.input{font-size:16px}
 .room-screen[data-editing] .room-sheet[open][data-editing]{position:fixed;inset:calc(var(--room-input-top,0px) + 6px) 0 auto;margin:0 auto;display:flex;flex-direction:column;height:calc(var(--room-input-height,100dvh) - 12px);max-height:calc(var(--room-input-height,100dvh) - 12px)}
 .room-sheet[data-editing] .room-sheet-header{flex:none;padding:8px 12px}.room-sheet[data-editing] .room-sheet-header h2{font-size:14px}.room-sheet[data-editing] .room-sheet-body{flex:1;min-height:0;max-height:none;padding:10px;scroll-padding-block:8px}
 .room-sheet .input{font-size:16px}
 .room-screen[data-editing]>.room-input-actions,.room-sheet[data-editing]>.room-input-actions{display:flex;align-items:center;gap:6px;grid-row:4;flex:none;background:var(--look-bg,#fff8e5);border-top:1px solid var(--look-line,#cbd7c7);padding:4px 0 0}
 .room-input-actions>.button{margin:0;min-height:44px;font-size:12px;padding:7px 10px}.room-input-actions>.button:first-child:not(:last-child){flex:1}.room-input-actions>.button:last-child{flex:none}
}

/* One room menu with explicit counts, and one row of reactions. */
body.in-room .main.room-screen{grid-template-rows:44px auto 32px minmax(0,1fr) 50px}
.room-bar{align-items:center}.room-bar-title{justify-content:center}
.room-bar .room-menu{display:flex;align-items:center;gap:7px;padding:4px 8px;min-height:40px}
.room-menu-counts{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}.room-menu-group{display:inline-flex;align-items:center;gap:4px}.room-menu-icon{display:block;flex:none;width:17px;height:17px;opacity:.8}.room-menu-icon.icon-chevron{width:10px;height:10px;opacity:.6}
.room-participants{border-top:1px solid var(--look-line,#dce3d6);margin-top:18px;padding-top:12px}.room-participants>h3{font-size:15px;margin:0 0 8px}.room-population{font-size:12px;margin:6px 0 12px}
.room-screen>.live-dock{position:relative!important;display:flex;align-items:center;justify-content:center;gap:0;padding:0}
.room-screen>.live-dock .live-latest.live-announcement{display:block;position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.room-screen>.live-dock .live-latest.live-announcement.is-delivered{right:0;bottom:calc(100% + 4px);width:max-content;max-width:100%;height:auto;margin:0;padding:5px 10px;border:1px solid var(--look-line,#d3dcc9);border-radius:8px;background:var(--look-panel,#fffdf5);color:var(--look-ink,#294c47);font-size:11px;line-height:1.4;clip-path:none;text-overflow:ellipsis;pointer-events:none;box-shadow:0 2px 8px #20342d15}
@media(max-width:700px){
 body.in-room .main.room-screen{grid-template-rows:44px auto 30px minmax(0,1fr) 50px}
 .room-bar-title{align-items:flex-start}.room-bar .room-menu{gap:5px;padding:3px 6px}
}
.room-screen .room-bar .room-self{position:relative;flex:none;width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0}
.room-self-edit{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:15px;height:15px;border:1px solid var(--look-line,#bdcfc7);border-radius:50%;background:var(--look-panel,#fffdf6);color:var(--look-ink,#355b50);pointer-events:none}
.room-self-edit .room-menu-icon{width:11px;height:11px;opacity:1}
.room-screen[data-editing] .room-bar .room-self{width:40px;min-width:40px;max-width:40px;height:36px;min-height:36px;padding:0}

/* One footer row leaves the rest of the height for the game. */
body.in-room .main.room-screen:has(>.live-dock>.room-comments:not([hidden])){grid-template-rows:44px auto 32px minmax(0,1fr) 48px}
.room-screen>.live-dock:has(>.room-comments:not([hidden])){flex-direction:row;align-items:center;justify-content:center;min-width:0;overflow:visible}
.room-comments{position:static;flex:1;min-width:0;max-width:680px;min-height:48px;color:var(--look-ink,#294c47)}
.comment-strip{display:flex;align-items:center;gap:4px;height:48px}
.comment-river{position:relative;overflow-x:hidden;overflow-y:auto;flex:1;min-width:0;height:46px;scroll-snap-type:y mandatory;overscroll-behavior:contain;overflow-anchor:none;touch-action:pan-y pinch-zoom;user-select:none;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--look-line,#b5c3b9) transparent}
.comment-river::-webkit-scrollbar{width:6px}.comment-river::-webkit-scrollbar-thumb{background:var(--look-line,#b5c3b9);border-radius:6px}
.comment-scroll-track{width:100%}.comment-snap-row{position:relative;width:100%;height:46px;scroll-snap-align:start;scroll-snap-stop:normal}
.comment-river:focus-visible{outline:2px solid var(--look-play,#366749);outline-offset:-2px;border-radius:8px}
.comment-river[data-locked=true]{pointer-events:none}
.comment-river.is-dragging{scroll-snap-type:none;cursor:grabbing}
.comment-river.is-dragging .comment-copy,.comment-river.is-dragging .comment-glyphs{cursor:grabbing}
.comment-empty{position:absolute;top:0;left:0;display:block;font-size:12px;color:var(--look-muted,#64736b);padding:12px 8px;margin:0}
.comment-icon{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:8px;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer}
.comment-icon svg{width:19px;height:19px}.comment-icon:hover,.comment-icon[aria-expanded=true]{background:var(--look-soft,#e9efe6)}
.comment-write{position:static;flex:none}
.comment-carrier,.comment-neighbor{position:absolute;inset:1px auto auto 0;display:flex;align-items:center;gap:5px;max-width:100%;min-height:44px;width:100%;border:0;border-radius:12px;background:transparent;color:inherit;padding:0 4px 0 0;text-align:left}
.comment-neighbor{pointer-events:none}
.comment-copy,.comment-neighbor-copy{flex:1;min-width:0;cursor:grab}
.comment-navigation-status{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.comment-avatar,.comment-neighbor-avatar{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer}.comment-avatar .garden-character,.comment-neighbor-avatar .garden-character{width:36px;height:40px}
.comment-glyphs,.comment-neighbor-glyphs{display:block;min-width:0;width:fit-content;max-width:min(240px,100%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--look-line,#d3dcc9);border-radius:10px 10px 10px 3px;padding:5px 8px;background:var(--look-panel,#fffdf5);font-size:14px;line-height:1.5;unicode-bidi:plaintext;cursor:pointer}
.comment-text-viewport,.comment-neighbor-viewport{display:block;min-width:0;overflow:hidden}.comment-text,.comment-neighbor-text{display:block;width:max-content;white-space:nowrap}
.comment-carrier.is-readable .comment-glyphs,.comment-neighbor.is-readable .comment-neighbor-glyphs{border-color:var(--look-play,#366749)}
.comment-carrier.is-readable{width:100%;max-width:100%}
.comment-carrier.is-readable .comment-glyphs,.comment-neighbor.is-readable .comment-neighbor-glyphs{width:auto;max-width:none;text-overflow:clip}
.comment-carrier.is-readable .comment-avatar,.comment-neighbor.is-readable .comment-neighbor-avatar{background:var(--look-soft,#e9efe6);border-radius:12px}
.comment-avatar:disabled{opacity:1;cursor:default}
.room-comment-settings{margin:16px 0;padding-top:12px;border-top:1px solid var(--look-line,#d3dcc9)}
.room-comment-settings h3{font-size:15px;margin:0 0 8px}
.comment-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:8px 0;cursor:pointer}
.comment-setting>span{min-width:0}.comment-setting strong{display:block;font-size:13px}.comment-setting small{display:block;margin-top:3px;font-size:11px;line-height:1.6;color:var(--look-muted,#64736b)}
.comment-setting input{appearance:none;position:relative;flex:none;width:42px;height:26px;margin:0;border:1px solid var(--look-line,#acbfb2);border-radius:20px;background:var(--look-soft,#e4e9e1);cursor:pointer}
.comment-setting input:before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--look-panel,#fffdf5);box-shadow:0 1px 3px #20342d30}
.comment-setting input:checked{background:var(--look-play,#366749)}.comment-setting input:checked:before{left:19px}
.comment-setting input:focus-visible{outline:2px solid var(--look-ink,#294c47);outline-offset:3px}.comment-setting input:disabled{opacity:.45;cursor:wait}
.comment-setting-status{font-size:12px;line-height:1.5;margin:4px 0}.comment-setting-status:empty{display:none}
.comment-restore{flex:1;min-width:0;min-height:44px;border:0;background:transparent;color:inherit;font-size:12px;cursor:pointer}
.comment-panel{position:absolute;bottom:calc(100% + 6px);right:0;width:min(100%,480px);max-height:min(360px,calc(100dvh - 160px));display:flex;flex-direction:column;border:1px solid var(--look-line,#d3dcc9);border-radius:14px;background:var(--look-panel,#fffdf5);color:var(--look-ink,#294c47);box-shadow:0 5px 24px #182f2526;z-index:42;overflow:hidden}
.comment-panel[hidden],.room-comments [hidden]{display:none!important}
.comment-panel-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 5px 2px 12px;flex:none}.comment-panel-header strong{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere}
.comment-panel-body{overflow:auto;padding:4px 12px 12px;min-height:0;overscroll-behavior:contain;scroll-padding:8px}
.comment-compose label{display:block;margin:0 0 5px;font-size:11px}
.comment-entry{display:flex;align-items:center;gap:6px}.comment-entry .input{flex:1;min-width:0;width:100%;height:44px;font-size:16px;margin:0}.comment-entry .comment-send{flex:none;min-height:44px;margin:0;padding:7px 10px;font-size:12px;white-space:nowrap}
.comment-input-help{display:block;margin-top:5px;font-size:11px;line-height:1.5;color:var(--look-muted,#64736b)}
.comment-status{margin:0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}.comment-status:not(:empty){margin-top:8px}
.comment-done{display:none}



.comment-options{display:grid;gap:3px}.comment-options .button{font-size:12px;min-height:44px;text-align:left;justify-content:flex-start;margin:0}.comment-motion-note:empty{display:none}.comment-motion-note{font-size:11px}
/* A disclosure on small screens; the same controls stay inline on desktop. */
.live-reactions{flex:none;align-self:center}
.room-screen>.live-dock .live-reactions>.live-cheers{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:2px;width:auto;min-width:0;height:48px;margin:0;padding:0}
.room-screen>.live-dock .live-reactions .live-cheer{flex:0 0 44px;min-width:44px;min-height:44px;width:44px;max-width:44px;height:44px;padding:2px;margin:0}
.room-screen>.live-dock .live-reactions .live-cheer:focus-visible{outline-offset:-3px}
.room-screen>.live-dock .live-reactions[data-compact=true]>.live-cheers{position:absolute;right:0;bottom:calc(100% + 6px);z-index:43;width:max-content;max-width:100%;height:auto;min-height:56px;flex-wrap:wrap;gap:2px;padding:6px;border:1px solid var(--look-line,#d3dcc9);border-radius:12px;background:var(--look-panel,#fffdf5);color:var(--look-ink,#294c47);box-shadow:0 5px 24px #182f2526}
@media(max-width:700px){body.in-room .main.room-screen:has(>.live-dock>.room-comments:not([hidden])){grid-template-rows:44px auto 30px minmax(0,1fr) 48px}}
@media(max-width:700px),(max-width:1000px) and (max-height:520px){
 body.in-room .main.room-screen[data-editing]:has(>.live-dock>.room-comments:not([hidden])){grid-template-rows:36px auto minmax(0,1fr) auto}
 body.in-room .main.room-screen[data-comment-editing]:has(>.live-dock>.room-comments:not([hidden])){position:fixed;top:var(--comment-viewport-top,0px);left:0;width:100%;height:var(--comment-viewport-height,100dvh);grid-template-rows:36px auto minmax(0,1fr) auto;gap:4px;padding:6px 8px}
 .room-screen[data-comment-editing]>.room-bar{grid-row:1}.room-screen[data-comment-editing]>.room-cycle{grid-row:2}.room-screen[data-comment-editing]>.room-stage{grid-row:3}.room-screen[data-comment-editing]>.live-dock{grid-row:4}
 .room-screen[data-comment-editing]>.room-activity-tools{display:none}
 .room-screen[data-comment-editing] .room-bar .room-self{width:36px;min-width:36px;max-width:36px;height:36px;min-height:36px}.room-screen[data-comment-editing] .room-self .garden-character{width:28px;height:32px}.room-screen[data-comment-editing] .room-bar .room-title{font-size:12px}
 .room-screen[data-comment-editing] .cycle-brief{display:grid;min-height:42px;padding:4px 8px;gap:1px 6px;grid-template-columns:23px minmax(0,1fr)}
 .room-screen[data-comment-editing] .cycle-emblem{grid-column:1;grid-row:1/3;width:23px;height:23px;margin-top:2px}.room-screen[data-comment-editing] .cycle-current{grid-column:2}.room-screen[data-comment-editing] .cycle-preview{grid-column:2;display:block;max-width:none;border:0;padding:0}.room-screen[data-comment-editing] .cycle-preview>span,.room-screen[data-comment-editing] .cycle-scene,.room-screen[data-comment-editing] .cycle-explain{display:none}
 .room-screen[data-comment-editing] .cycle-heading{font-size:13px;line-height:1.4}.room-screen[data-comment-editing] .cycle-preview strong{font-size:10px;line-height:1.4}
 .room-screen[data-comment-editing] .room-comments{min-height:0}.room-screen[data-comment-editing] .comment-strip,.room-screen[data-comment-editing] .comment-panel-header{display:none}
 .room-screen[data-comment-editing]>.live-dock:has(>.room-comments:not([hidden])){gap:4px}
 .room-screen[data-comment-editing] .live-reactions{align-self:flex-start}
 .room-screen[data-comment-editing] .comment-panel{position:relative;bottom:auto;right:auto;width:100%;max-height:none;border-radius:10px;box-shadow:none}.room-screen[data-comment-editing] .comment-panel-body{padding:8px}
 .room-screen[data-comment-editing] .comment-compose>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
 .room-screen[data-comment-editing] .comment-done{display:grid}.room-screen[data-comment-editing] .comment-input-help{margin-top:4px}
}

/* Game reading schema: opaque surfaces and paired foregrounds, independent of avatar mode.
   Keep normal text pairs at >= 4.5:1; checked in game-colors.test.mjs. */
:root{--game-paper:#fffdf6;--game-ink:#253b36;--game-muted:#53685e;--game-soft:#e2f1f4;--game-accent:#a63d24;--game-on-accent:#fffdf6;--game-line:#809087}
/* Records can be moved from the board into a room sheet. Carry their pair with them. */
[data-appearance] :is(.score,.mine-results){background:var(--game-paper);color:var(--game-ink);--muted:var(--game-muted)}
[data-appearance] .mine-results thead{background:var(--game-soft);color:var(--game-muted)}
[data-appearance] .mine-results td{color:var(--game-ink)}
[data-appearance] .mine-results small{color:var(--game-muted)}

/* Disabled answers remain reading material during answer review. */
html[data-appearance] body :is(.activity-surface,.room-sheet-body,.host-controls,.game-flow) :is(.button,.answer):disabled{opacity:1;color:var(--game-muted);border-style:dashed}
html[data-appearance] body :is(.activity-surface,.room-sheet-body,.host-controls,.game-flow) .button.primary:disabled{background:var(--game-soft);color:var(--game-muted);border-color:var(--game-line)}
/* The theater is a dark surface inside the otherwise light game board. */
[data-appearance] .drama-stage .eyebrow{color:#e8dcef}

/* Finished games give the result most of the viewport; next steps stay in one compact row. */
.room-cycle[data-cycle=finished]{padding-block:2px;gap:6px}
.room-cycle[data-cycle=finished] .cycle-steps{display:flex;max-width:none}
.cycle-finish-wait{margin:0;font-size:11px;line-height:1.5;color:var(--look-muted,#52655c)}
@media(min-width:1000px){
 .room-cycle[data-cycle=finished]{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px}
 .room-cycle[data-cycle=finished] .cycle-steps{max-width:520px}
}
.cycle-finish-actions{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px;min-width:0}
.room-cycle .cycle-finish-actions .button{margin:0;min-height:44px;font-size:12px;line-height:1.4;padding:7px 10px;white-space:normal}
html[data-appearance] .room-screen[data-moment=finished]>.room-stage,.room-screen[data-moment=finished]>.room-stage{border:2px solid #cfb276;background:var(--look-stage,#fffdf6)}
.room-screen[data-moment=finished] .room-minesweeper .mine-record h3{margin:6px 0}
.room-screen[data-moment=finished] .mine-personal-totals>div{display:grid;grid-template-rows:1fr auto}
.room-screen[data-moment=finished] .mine-personal-totals dt{text-wrap:balance;line-height:1.4}
.restart-settings-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.room-sheet-next-round .mine-settings{margin-top:12px}
@media(min-width:421px){
 .room-screen[data-moment=finished] .mine-personal-totals{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:700px){
 .cycle-finish-actions{grid-column:1/-1;gap:6px;margin:0}
 .room-cycle .cycle-finish-actions .button{font-size:12px;padding:7px 5px}
 .room-cycle[data-cycle=finished] .cycle-finish-actions .cycle-next{grid-column:auto;grid-row:auto;align-self:stretch}
 .room-screen[data-moment=finished] .room-minesweeper .board{padding:12px}
 .restart-settings-actions .primary{flex:1 0 100%}
}

/* A single responsive table, with a readable river for the selected seat. */
.mj-table{container-type:inline-size}
.room-mahjong .board{padding:4px;gap:4px}
.room-mahjong .mj-table{padding:6px;flex:0 0 auto;border-width:3px;border-radius:16px;overflow:visible}
.mj-toolbar{position:static;display:flex;flex-wrap:wrap;gap:6px;padding:4px;margin:0;background:transparent;backdrop-filter:none}
.mj-toolbar .mj-caption{font-size:11px;flex:1 0 100%}
.mj-toolbar .button{min-height:44px;margin:0;padding:8px 10px;font-size:11px}
.mj-table-status{margin:3px 2px 6px;font-size:13px;line-height:1.5;font-weight:800;color:#fff2c7;overflow-wrap:anywhere}
.mj-table-felt{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto 12px;display:block;isolation:isolate}
.mj-table-felt.mj-table-oval{aspect-ratio:1/1.35}
.mj-table-felt:before{content:'';position:absolute;inset:8% 10%;border:1px solid #cbb67488;border-radius:50%;box-shadow:inset 0 0 24px #091f2530;pointer-events:none}
.mj-table-felt .mj-table-center{position:absolute;left:36%;top:37%;width:28%;height:26%;padding:5px;margin:0;border:1px solid #d4bf7a88;border-radius:10px;background:#173c32;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;z-index:2;color:#fff0c8;box-shadow:0 2px 8px #08271b50}
.mj-table-center strong{font-size:clamp(11px,2.5cqi,16px)}
.mj-table-felt .mj-table-meta{font-size:clamp(9px,2cqi,12px);margin:0;color:#e1e8d6}
.mj-table-felt .mj-indicators{font-size:clamp(8px,1.8cqi,11px);gap:3px}
.mj-table-felt .mj-indicators .mj-small{--tile-w:clamp(14px,3.6cqi,24px);height:auto;aspect-ratio:40/56;box-shadow:0 2px 0 #bca574}
.mj-table-felt .mj-pot{font-size:clamp(8px,1.8cqi,11px);padding:0;border:0;color:#f3e9c1}
.mj-table-felt .mj-seat{position:absolute;left:var(--seat-x);top:var(--seat-y);width:44px;height:44px;transform:translate(-50%,-50%);padding:0;margin:0;min-width:0;border:0;border-radius:50%;background:transparent;box-shadow:none;z-index:3}
.mj-seat-button{position:relative;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:3px;border:2px solid #b0bda1;border-radius:50%;background:#214c3d;color:#fff4d9;box-shadow:0 2px 3px #092b1d80;touch-action:manipulation}
.mj-seat-button[aria-pressed=true]{border-color:#fff3b3;box-shadow:0 0 0 3px #fff1ad77;background:#365d42}
.mj-current .mj-seat-button{border-color:#ffdb68;background:#635632;box-shadow:0 0 0 3px #e9bc4677}
.mj-last-actor .mj-seat-button{border-color:#ffc68a}
.mj-seat-button:focus-visible{outline:3px solid #fff4b3;outline-offset:3px}
.mj-seat-avatar{display:grid;place-items:center;width:28px;height:28px;font-size:22px;line-height:1}
.mj-seat-avatar>*{width:100%!important;height:100%!important;margin:0!important;position:static!important;object-fit:contain}
.mj-seat-number{position:absolute;right:-2px;bottom:-3px;min-width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#fff1c4;color:#193d30;font-size:10px;font-weight:900;border:1px solid #907e48}
.mj-riichi-dot{position:absolute;left:-4px;top:-5px;padding:1px 3px;border-radius:3px;background:#f7c0ce;color:#66233b;font-size:9px;font-weight:800}
.mj-seat-name{position:absolute;left:50%;top:47px;transform:translateX(-50%);width:76px;font-size:10px;line-height:1.4;text-align:center;color:#fff2d2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.mj-table-felt:has(.mj-position-6) .mj-seat-name{display:none}
.mj-seat-facing{position:absolute;left:50%;top:50%;width:clamp(26px,10cqi,46px);height:30px;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translate(-50%,-50%) rotate(var(--seat-angle)) translateY(calc(-1 * clamp(34px,9cqi,54px)));pointer-events:none;z-index:-1}
.mj-concealed-hand{display:flex;gap:1px;width:100%;justify-content:center;flex:0 0 6px;padding:0;filter:drop-shadow(0 1px 1px #082b1b)}
.mj-tile-back{flex:1;max-width:5px;height:6px;display:block;border:0;border-radius:1px;background:linear-gradient(90deg,#c79437,#f5cf72);box-shadow:0 1px 0 #f4edd0}
.mj-river-mini{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;max-height:24px;width:100%;overflow:hidden}
.mj-river-mini .mj-river-slot{height:auto;aspect-ratio:40/56;min-width:0}
.mj-river-mini .mj-tile{display:block;width:100%;height:100%;min-width:0;max-width:none;padding:0;border:0;border-radius:.5px;box-shadow:none;transform:none}
.mj-river-mini .mj-sideways svg{width:100%;height:100%;transform:rotate(90deg)}
.mj-river-mini .mj-latest{outline:1px solid #f4d57b;outline-offset:0}
.mj-river-mini .mj-empty{font-size:0;padding:0}
.mj-seat-help{font-size:11px;line-height:1.5;margin:2px 0 8px;text-align:center;color:#d2e0cb}
.mj-river-inspector{padding:10px;border:1px solid #b9c6a077;border-radius:9px;background:#10362bd9;color:#fff2d5}
.mj-inspector-heading{display:flex;gap:6px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
.mj-inspector-identity{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;overflow-wrap:anywhere;font-size:13px}
.mj-inspector-identity .mj-points{font-size:11px;color:#f2d798;margin:0}
.mj-river-tools{display:flex;flex-wrap:wrap;gap:4px}
.mj-river-tools .button{font-size:11px;min-height:44px;margin:0;padding:6px 8px;border:1px solid #aebd99;color:#f9efc9;background:#2b5340;white-space:nowrap}
.mj-river-tools .button[aria-pressed=true]{background:#edda94;color:#263d2c}
.mj-river-inspector .mj-river{display:grid;grid-template-columns:repeat(6,minmax(0,32px));gap:6px 3px;max-width:none;min-height:44px;align-content:start;overflow:visible}
.mj-river-inspector .mj-river-slot{display:flex;align-items:center;justify-content:center;min-width:0;height:44px}
.mj-river-inspector .mj-tile{--tile-w:30px;width:30px;max-width:100%;height:42px;min-width:0;padding:1px 1px 4px;flex:0 1 30px;box-shadow:inset 1px 1px #fff,0 2px 0 #c7b585,0 3px 2px #09271b}
.mj-river-inspector .mj-sideways{width:25px;height:35px;transform:rotate(90deg)}
.mj-river-inspector .mj-sideways svg{transform:none;width:100%;height:100%}
.mj-river-inspector .mj-river-caption{margin:8px 0 0;min-height:16px;font-size:11px;line-height:1.5;color:#f0dea5}
.mj-river-inspector .mj-empty{font-size:12px;color:#c6d8c5;grid-column:1/-1;padding:10px 0}
.mj-entry-guide{font-size:12px;line-height:1.8;border:1px solid #cbd7c9;background:#f0f5eb;border-radius:9px;padding:8px 10px;margin:4px 0;flex-shrink:0}
.mj-entry-guide summary{font-weight:750;cursor:pointer;min-height:28px}.mj-entry-guide p{margin:8px 0 0}
.room-mahjong .mj-table>.mj-own-hand{position:sticky;bottom:0;z-index:5;margin:10px -3px -3px;padding:10px 6px 6px;border:1px solid #bdb475;border-radius:10px;background:#193f32;color:#fff2d2;box-shadow:0 -4px 12px #0b2b2266;flex-shrink:0}
.room-mahjong .mj-own-hand .mj-hand-title{margin:0 0 5px;color:#fff0c0;font-size:13px;line-height:1.5}
.room-mahjong .mj-hand-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:5px 2px 8px;margin:0;overflow:visible}
.room-mahjong .mj-hand-tiles .mj-tile{--tile-w:100%;width:100%;max-width:44px;min-width:0;height:48px;min-height:48px;aspect-ratio:auto;margin:0;flex-basis:auto;justify-self:center}
.room-mahjong .mj-hand-tiles .mj-drawn{margin-left:3px;width:calc(100% - 3px);outline:2px solid #e7c265;outline-offset:1px}
.room-mahjong .mj-hand-help{font-size:11px;line-height:1.5;margin:3px 0;color:#dae5cf}
.room-mahjong .mj-actions{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0;margin:0}
.room-mahjong .mj-actions:empty{display:none}
.room-mahjong .mj-actions .button{font-size:13px;min-height:44px;margin:0;padding:9px 12px}
.room-mahjong .mj-riichi-action{border:2px solid #cb758d;background:#fff1ef;color:#7d2d45}
.room-mahjong .mj-claim{order:-3;flex-shrink:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;background:#fff0cd;border:2px solid #b68b35;border-radius:10px}
.room-mahjong .mj-claim-copy{flex:1;min-width:120px;font-size:12px;line-height:1.6}
.room-mahjong .mj-claim .mj-actions{width:100%}
.room-mahjong .mj-host-skip{font-size:12px;min-height:44px;align-self:flex-start;border-style:dashed}
.room-mahjong .board>.question,.room-mahjong .board>.audience-phase{display:none}
.mj-shared-hands{display:grid;gap:10px;margin:12px 0;color:#fff2ca}.mj-shared-seat{padding:10px;border:1px solid #b4c9ac66;border-radius:8px}
.mj-lobby-join{padding:14px;background:#edf4e5;border:1px solid #c0d2b5;border-radius:12px}.mj-lobby-join h3{font-size:15px;margin:0}
@container(min-width:640px){.room-mahjong .mj-hand-tiles{grid-template-columns:repeat(14,minmax(0,1fr))}.room-mahjong .mj-hand-tiles .mj-tile{height:56px}}
/* Keep native game inputs reachable while browsing any of the 16 seats. */
.room-mahjong .game-area.mj-play-area{display:flex;flex-direction:column;min-height:0;height:100%;border:3px solid #ae8956;border-radius:12px;background:#193f32;overflow:hidden}
.room-mahjong .mj-play-area>.board{flex:1;min-height:100px;height:auto;margin:0;border:0;border-radius:0;background:transparent;overflow-y:auto}
.room-mahjong .mj-play-area .mj-table{border:0;border-radius:0;box-shadow:none;background:transparent;margin:0}
.room-mahjong .mj-play-area .mj-caption{color:#f6e7b9}
.room-mahjong .mj-player-dock{flex:0 0 auto;min-width:0;max-height:70%;overflow-y:auto;padding:6px;border-top:1px solid #c9b77b88;background:#193f32;color:#fff2d2}
.room-mahjong .mj-player-dock>.mj-own-hand{position:static;margin:0;padding:0;border:0;box-shadow:none;border-radius:0;background:transparent}
.room-mahjong .mj-player-dock .mj-claim{margin:0 0 6px;padding:7px}
.room-mahjong .mj-player-dock .mj-claim .mj-actions{padding:0}
.room-mahjong .mj-player-dock .mj-claim>.mj-tile{--tile-w:30px;width:30px;height:42px}
.room-mahjong .mj-player-dock .mj-claim-copy{font-size:11px}
.room-mahjong .mj-player-dock{container-type:inline-size}
.room-mahjong .mj-hand-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
.room-mahjong .mj-hand-tiles .mj-tile{min-width:44px}
@container(min-width:310px){.room-mahjong .mj-hand-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
@container(min-width:360px){.room-mahjong .mj-hand-tiles{grid-template-columns:repeat(7,minmax(0,1fr))}}
@container(min-width:640px){.room-mahjong .mj-hand-tiles{grid-template-columns:repeat(14,minmax(0,1fr))}}
.room-screen[data-game=mahjong] .cycle-steps,.room-screen[data-game=mahjong] .cycle-preview,.room-screen[data-game=mahjong] .cycle-scene{display:none}
.room-screen[data-game=mahjong] .cycle-brief{min-height:42px;padding:5px 8px;gap:8px}
.room-screen[data-game=mahjong] .cycle-heading{font-size:14px;line-height:1.4}
.room-screen[data-game=mahjong] .cycle-emblem{width:26px;height:26px}
.room-screen[data-game=mahjong] .cycle-explain{min-height:32px;margin:0 0 0 auto;padding:5px 7px}
.room-sheet-help .mj-toolbar .mj-caption{color:#355d45}
@media(max-width:700px){.mj-table-felt{max-width:320px}.mj-table-felt.mj-table-oval{max-width:260px}}
.room-mahjong .mj-player-dock>.mj-dock-toggle{display:block;width:100%;min-height:44px;margin:0 0 5px;padding:8px;font-size:12px;background:#294f3c;color:#fff0c4;border:1px solid #d6c289;text-align:center}
.room-mahjong .mj-player-dock[data-collapsed=true]>.mj-dock-toggle{margin:0;background:#eedb9c;color:#263c2d}
.room-mahjong .mj-player-dock .mj-own-hand[hidden]{display:none!important}
.room-mahjong .mj-player-dock .mj-claim{padding:5px;gap:4px}
.room-mahjong .mj-player-dock .mj-claim>.mj-tile{--tile-w:24px;width:24px;height:32px}
.room-mahjong .mj-player-dock .mj-claim .button{padding:8px 10px}
.room-mahjong .mj-player-dock .mj-claim-copy{font-size:11px;line-height:1.4}
@media(max-width:700px){.mj-table-felt{max-width:280px}.mj-table-felt.mj-table-oval{max-width:240px}}
.room-mahjong .mj-player-dock .mj-claim-copy{color:#34432b}
/* The overview gives the shared felt the room while retaining claim actions and reactions. */
body.in-room .main.room-screen[data-mahjong-overview=true]:not([data-editing]):not([data-comment-editing]){grid-template-rows:44px minmax(0,1fr) 50px!important}
.room-screen[data-mahjong-overview=true]>.room-cycle,.room-screen[data-mahjong-overview=true]>.room-activity-tools{display:none}
.room-screen[data-mahjong-overview=true] .mj-table-status{display:none}
/* Names stay readable in the inspector; the overview uses unique avatars and seat numbers. */
.mj-table-felt .mj-seat-name{display:none}
.mj-table-felt .mj-self .mj-seat-name{display:block}

/* Independent actions stay in the same private tray as the regular table. */
.mj-speed-calls{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.mj-speed-call{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid #c8cdb6}
.mj-speed-call>.mj-tile{flex:none}.mj-speed-call .mj-actions{width:100%;margin:0}.mj-speed-call button{min-width:80px;min-height:44px;flex:1}
.mj-speed-calls>.help{color:#34432b}.mj-speed-hand .mj-actions button{min-height:44px}
.mj-speed-hand .mj-hand-title{font-size:14px}.mj-melds{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}
.mj-meld{display:inline-flex;gap:2px}.mj-meld .mj-small{width:27px;height:36px}
.room-mahjong .mj-speed-call>.mj-tile{--tile-w:24px;width:24px;height:32px}
.room-mahjong .mj-speed-call{gap:4px;padding-bottom:4px}
.room-mahjong .mj-speed-call .mj-actions{gap:4px}
.room-mahjong .mj-speed-call .mj-actions .button{min-width:72px;padding:8px 6px}
.room-mahjong .mj-player-dock[data-collapsed=true] .mj-speed-calls{max-height:100px;overflow-y:auto}
.room-mahjong .mj-player-dock[data-collapsed=true] .mj-speed-calls>.help{display:none}
.game-setting[hidden]{display:none}
/* The draw wait stays visible even while the private hand is folded. */
.room-mahjong .mj-speed-bar{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.room-mahjong .mj-speed-bar>.mj-dock-toggle{flex:1;min-width:0;min-height:44px;margin:0;padding:6px;font-size:12px;background:#eedb9c;color:#263c2d;border:1px solid #d6c289}
.room-mahjong .mj-speed-flow{flex:1;min-width:0;text-align:center;font-size:12px;line-height:1.5}
.room-mahjong .mj-speed-flow small{display:block;font-size:10px}.room-mahjong .mj-speed-flow>.button{width:100%;min-height:44px;margin:0;padding:6px}
.mj-latest-discards{margin:8px 0 12px}.mj-latest-discards h3{margin:0 0 6px;font-size:13px;color:#ffedbe}
.mj-latest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mj-latest-discard{display:flex;gap:4px;align-items:center;min-width:0;min-height:56px;border:1px solid #92ac81;border-radius:8px;padding:5px;background:#f7f0d9;color:#283d2c;text-align:left}
.mj-latest-discard .mj-small{flex:none;--tile-w:27px;width:27px;height:38px}.mj-latest-empty{display:grid;place-items:center;width:27px;height:38px;color:#879181}
.mj-latest-label{min-width:0;font-size:10px;line-height:1.5}.mj-latest-label strong,.mj-latest-label small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mj-latest-label small{font-size:10px}
.mj-latest-discard.mj-callable{border:2px solid #dba53b;background:#fff0b8}.mj-latest-discard:focus-visible{outline:3px solid #ebbc4b;outline-offset:1px}
@media(min-width:640px){.mj-latest-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.room-mahjong .mj-player-dock[data-collapsed=true] .mj-speed-bar{margin-bottom:0}
/* Fit the whole hand in one row; a separate large control confirms the selected tile. */
.room-mahjong .mj-hand-tiles{display:flex;flex-wrap:nowrap;justify-content:center;gap:clamp(1px,.3cqi,4px);overflow:visible;max-width:100%;padding:5px 0 7px;touch-action:manipulation}
.room-mahjong .mj-hand-tiles .mj-tile{flex:1 1 0;min-width:0;max-width:44px;width:auto;height:clamp(44px,12cqi,58px);min-height:44px;padding:1px 0 4px}
.room-mahjong .mj-hand-tiles .mj-drawn{flex-basis:0;width:auto;margin-left:4px}
.room-mahjong .mj-hand-tiles .mj-tile:is(button):hover{transform:none}
.room-mahjong .mj-hand-tiles .mj-tile.mj-hand-selected{transform:translateY(-4px);border-color:#efc04f;background:#fff1ae;box-shadow:0 0 0 1px #efc04f,0 4px 0 #bba46d}
.mj-discard-confirm{display:flex;align-items:center;gap:5px;min-width:0;flex:1}
.mj-discard-preview{display:grid;place-items:center;flex:0 0 34px;width:34px;height:48px}
.mj-discard-preview .mj-tile{--tile-w:32px;width:32px;height:44px;padding:1px 1px 4px}
.mj-discard-placeholder{display:grid;place-items:center;width:30px;height:42px;border:1px dashed #a0ab87;border-radius:4px;color:#c6ceab;font-size:12px}
.room-mahjong .mj-discard-action{flex:1;min-width:0;min-height:44px;padding:5px;font-size:12px;line-height:1.3;margin:0}
.room-mahjong .mj-speed-bar:has(.mj-discard-confirm)>.mj-dock-toggle{flex:0 0 80px;font-size:11px;padding:4px}
.room-mahjong .mj-speed-flow:has(.mj-discard-confirm)>.mj-draw-wait{display:none}
.room-mahjong .mj-player-dock[data-collapsed=true] .mj-discard-confirm{display:none}
.room-mahjong .mj-player-dock[data-collapsed=true] .mj-speed-flow:has(.mj-discard-confirm)>.mj-draw-wait{display:block}
.room-mahjong .mj-player-dock[data-collapsed=true] .mj-speed-bar>.mj-dock-toggle{flex:1}
body.in-room .main.room-screen:has(.mj-arena[data-active=true]):not([data-editing]):not([data-comment-editing]){grid-template-rows:44px minmax(0,1fr) 50px!important}
.room-screen:has(.mj-arena[data-active=true])>.room-cycle,.room-screen:has(.mj-arena[data-active=true])>.room-activity-tools{display:none}
.mj-arena .mj-table-felt{isolation:isolate;overflow:visible}.mj-arena .mj-table-center{width:34%;font-size:11px;gap:3px;padding:4px}
.mj-arena-title{font-size:10px;color:#e7c97d}.mj-arena .mj-inspector-identity{display:grid;gap:2px;max-width:100%;font-size:10px;text-align:center;line-height:1.3}.mj-arena .mj-inspector-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.mj-arena .mj-table-center>.mj-small{--tile-w:28px;width:28px;height:38px;flex:none}
.mj-arena .mj-seat-button>.mj-seat-latest{--tile-w:27px;width:27px;height:38px;box-shadow:0 1px 0 #c3b38b;pointer-events:none}
.mj-arena .mj-avatar-badge{position:absolute;width:17px;height:17px;left:-6px;top:-7px;border-radius:50%;background:#e8efd3;border:1px solid #6b8b65;pointer-events:none}
.mj-arena .mj-seat-button.mj-callable{border-color:#ffce61;box-shadow:0 0 0 2px #eec15c70}.mj-arena .mj-seat-number{z-index:2}
.mj-wall{position:absolute;z-index:0;display:flex;gap:2px;pointer-events:none;opacity:.9}.mj-wall-top,.mj-wall-bottom{left:28%;width:44%;justify-content:center}.mj-wall-top{top:29%}.mj-wall-bottom{bottom:29%}.mj-wall-left,.mj-wall-right{top:33%;height:34%;flex-direction:column;justify-content:center}.mj-wall-left{left:25%}.mj-wall-right{right:25%}
.mj-wall-stack{display:block;width:7px;height:13px;background:linear-gradient(#ebdfb4 0 25%,#68877a 26% 42%,#f1e7c3 43% 68%,#3d6d59 69%);border:1px solid #d8cb9e;border-radius:1px;box-shadow:1px 1px 0 #082d21}.mj-wall-left .mj-wall-stack,.mj-wall-right .mj-wall-stack{width:12px;height:6px}
.mj-arena .mj-seat-help,.mj-arena-status{overflow-wrap:anywhere;margin:5px 0;color:#f1e2ba;font-size:11px;line-height:1.5}.mj-arena .optional-view{margin:6px 0;color:#f6e9ca}.mj-arena .optional-view>button{min-height:44px;font-size:12px}
.mj-completed-hand{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:3px}.mj-completed-hand .mj-small{flex:none}.mj-reset-note{margin:3px 0;color:#ffdfa3;font-size:12px}
.room-mahjong .mj-speed-hand .mj-hand-title{display:none}.room-mahjong .mj-speed-hand .mj-hand-help{font-size:10px;line-height:1.4;margin:2px 0}.mj-table-motions{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:visible}
.mj-flight-tile,.mj-point-flight{position:absolute;left:var(--from-x);top:var(--from-y);transform:translate(-50%,-50%);animation:mj-flight 1900ms ease-out both;pointer-events:none}
.mj-flight-tile .mj-small{--tile-w:28px;width:28px;height:38px}.mj-point-flight{z-index:2;background:#fff0a6;border:1px solid #d4a952;border-radius:18px;padding:4px 8px;color:#573b12;font-size:12px;font-weight:800;white-space:nowrap;animation-duration:2400ms}
.mj-table-callout{max-width:90%;overflow:hidden;text-overflow:ellipsis;position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);padding:7px 12px;border-radius:10px;background:#fff0c9;color:#68382a;border:2px solid #d4b35f;font-size:15px;white-space:nowrap;animation:mj-callout 2600ms ease-out both;box-shadow:0 4px 18px #102c2280}
.mj-score-delta{position:absolute;transform:translate(-50%,-90%);font-size:12px;font-weight:850;background:#f4f2cf;padding:3px 5px;border-radius:6px;white-space:nowrap;animation:mj-delta 3000ms ease-out both}.mj-gain{color:#236343}.mj-loss{color:#a43e36}
@keyframes mj-flight{0%{left:var(--from-x);top:var(--from-y);opacity:0;scale:.8}12%{opacity:1}78%{left:var(--to-x);top:var(--to-y);opacity:1;scale:1.1}100%{left:var(--to-x);top:var(--to-y);opacity:0;scale:1}}
@keyframes mj-callout{0%{opacity:0;scale:.75}12%,75%{opacity:1;scale:1}100%{opacity:0;scale:1}}
@keyframes mj-delta{0%{opacity:0;translate:0 8px}15%,75%{opacity:1;translate:0 -8px}100%{opacity:0;translate:0 -14px}}
@media(prefers-reduced-motion:reduce){.mj-flight-tile,.mj-point-flight{animation-name:mj-callout;left:50%;top:60%;animation-duration:2200ms}.mj-table-callout,.mj-score-delta{animation-duration:2200ms}}

.mj-arena-indicators,.mj-arena-melds{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:11px}.mj-arena-melds{color:#f4e4bf;margin:4px 0}.mj-arena-indicators .mj-small,.mj-meld-chip .mj-small{--tile-w:18px;width:18px;height:25px}.mj-meld-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 5px;border:1px solid #a68d5a;border-radius:5px;font-size:11px}.mj-completed-meld{display:flex;flex:none;gap:2px;margin-left:8px}.mj-arena-melds[hidden]{display:none}

/* Show the complete own river beside the full hand, without an extra view. */
.room-mahjong .mj-own-hand>.mj-actions:empty,.room-mahjong .mj-own-hand .mj-hand-title{display:none}
body.in-room .main.room-screen[data-game=mahjong]:has(.mj-player-dock):not([data-editing]):not([data-comment-editing]){grid-template-rows:44px minmax(0,1fr) 50px!important}
.room-screen[data-game=mahjong]:has(.mj-player-dock)>.room-cycle,.room-screen[data-game=mahjong]:has(.mj-player-dock)>.room-activity-tools{display:none}
.room-mahjong .mj-own-river-panel{margin:4px 0 0;min-width:0;border-top:1px solid #829573;padding-top:5px}
.mj-own-river-header{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin:0 0 4px;font-size:10px;line-height:1.4;color:#e5d9b8}
.mj-own-river-header h3{font-size:12px;color:#fff0c0;margin:0}
.mj-own-river-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px 2px;padding:2px 2px 3px;max-width:540px}
.mj-own-river-slot{display:grid;justify-items:center;min-width:0;gap:3px;border-radius:3px;padding:1px 0}
.mj-own-river-slot .mj-small{--tile-w:28px;width:min(100%,28px);height:clamp(28px,9cqi,38px);min-width:0;padding:1px 0 3px;border-radius:3px;box-shadow:inset 1px 1px 1px #fff,0 2px 0 #ad9a70}
.mj-own-river-slot small{font-size:8px;line-height:1.2;white-space:nowrap;color:#d7ddc7}
.mj-own-river-slot.mj-furiten-tile{outline:1px solid #ff9588;background:#7d332d}
.mj-river-called small{color:#f2e6b9}.mj-river-riichi small{color:#ffd888}
.mj-own-river-empty,.mj-own-river-guide{font-size:10px;line-height:1.4;margin:3px 0;color:#d7ddc7}
.mj-furiten-warning{margin:4px 0 2px;font-size:11px;line-height:1.4;color:#ffd2c8}
/* Keep hand selection and confirmation visible while reading a very long river. */
.room-mahjong .mj-player-dock{padding-right:14px}
.room-mahjong .mj-player-dock .mj-speed-bar,.room-mahjong .mj-player-dock>.mj-dock-toggle{position:sticky;top:0;z-index:6;min-height:48px;background:#193f32;box-shadow:0 -6px 0 6px #193f32}
.room-mahjong .mj-player-dock .mj-hand-tiles{position:sticky;top:53px;z-index:5;background:#193f32;box-shadow:0 -4px 0 4px #193f32}
.room-mahjong .mj-player-dock[data-collapsed=true] .mj-speed-bar{min-height:44px}
.room-mahjong .mj-player-dock[data-collapsed=true]>.mj-dock-toggle{min-height:44px;background:#eedb9c}

/* CPU practice keeps its setup outside the hand and river viewport. */
.mj-practice-settings{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:18px;border:2px solid #8c8057;border-radius:16px;background:#fffaf0;color:#263c35;overflow-y:auto}
.mj-practice-settings::backdrop{background:#10271dcc}.mj-practice-settings-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:18px}.mj-practice-settings-header h2{margin:0;font-size:19px}.mj-practice-settings-header .button{min-height:44px;flex:none;padding:6px 10px;font-size:12px}
.mj-practice-form{display:grid;gap:14px}.mj-practice-form label{display:grid;gap:6px;font-size:13px;font-weight:700}.mj-practice-form select,.mj-practice-form>.button{width:100%;min-height:48px}.mj-practice-detail{font-size:13px;margin:0;line-height:1.6}.mj-practice-form .help{margin:0}.mj-practice-setup-status{font-size:12px;color:#a13c36;margin:0;line-height:1.6}.mj-practice-setup-status:empty{display:none}
.mj-practice-welcome{max-width:500px;padding:36px 20px;margin:10vh auto}.mj-practice-welcome h1{font-size:28px}.mj-practice-welcome p{line-height:1.8}.mj-practice-welcome .button{min-height:48px}
body.mj-practice.in-room #app{height:100dvh}.mj-practice-screen{height:100dvh!important;max-width:none!important;margin:0!important}.mj-practice-screen .room-bar{gap:6px}.mj-practice-screen .room-bar .mj-practice-switch{min-height:44px;min-width:0;font-size:14px;padding:4px 10px;color:#244735;background:#f6e7b9;border:1px solid #a8935e;white-space:nowrap}.mj-practice-count{font-size:11px;line-height:1.4;margin-right:auto}.mj-practice-screen .room-bar>.button:last-child{min-height:44px;padding:4px 8px;font-size:12px;white-space:nowrap}
.mj-practice-screen .mj-toolbar[hidden]{display:none!important}.mj-practice-footer{display:flex!important;align-items:center;justify-content:space-between;gap:6px;padding:0 4px}.mj-practice-footer>.button{min-height:44px;flex:none;margin:0;font-size:12px;padding:5px 8px}.mj-practice-info{font-size:10px;line-height:1.4;min-width:0;overflow-wrap:anywhere}
@media(max-width:350px){.mj-practice-switch{font-size:12px;padding-inline:6px}.mj-practice-count{font-size:10px}.mj-practice-screen .room-bar>.button:last-child{padding-inline:5px;font-size:11px}}
@media(min-width:701px){.mj-practice-screen .mj-table-felt{max-width:clamp(240px,calc(100dvh - 340px),560px)}.mj-practice-screen .mj-table-felt.mj-table-oval{max-width:clamp(240px,calc((100dvh - 340px)/1.35),560px)}}

/* Early play: the table, hand, actions and own river remain visible together. */
.room-mahjong:has(.mj-quick-layout) .mj-play-area{border-width:2px}
.room-mahjong .mj-play-area>.mj-quick-layout{min-height:0;flex:1 1 auto;overflow:visible;padding:4px 6px}
.room-mahjong .mj-quick-layout .mj-table{padding:0}
.room-mahjong .mj-arc-table .mj-table-felt.mj-arc-felt{width:100%;max-width:650px;height:var(--arc-height);min-height:0;aspect-ratio:auto;margin:0 auto;background:radial-gradient(ellipse at 50% 15%,#316b50,#21563f 75%);border:1px solid #799271;border-bottom:3px solid #bb9a58;border-radius:46% 46% 12% 12% / 25% 25% 10% 10%;box-shadow:inset 0 0 20px #0a312c88;overflow:visible}
.mj-arc-caption{position:absolute;inset:2px 8px auto;display:flex;justify-content:space-between;font-size:9px;color:#dbd7af;pointer-events:none}
.mj-arc-table .mj-seat{width:44px;height:44px;transform:translate(-50%,-50%);position:absolute;left:var(--seat-x);top:var(--seat-y)}
.mj-arc-table .mj-seat-button{width:44px;height:44px;min-height:44px;min-width:44px;margin:0;border-radius:10px}
.mj-arc-seat-name{position:absolute;top:43px;left:50%;transform:translateX(-50%);font-size:8px;line-height:9px;white-space:nowrap;color:#eee4bd;max-width:54px;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.mj-arc-table .mj-left-neighbor .mj-seat-button{border-bottom:3px solid #e4c97c}.mj-arc-table .mj-left-neighbor .mj-arc-seat-name{color:#ffde8d}
.mj-arc-table .mj-wall-bottom{bottom:2px;left:50%;transform:translateX(-50%);height:8px;gap:2px;z-index:0}.mj-arc-table .mj-wall-stack{width:10px;height:6px;box-shadow:0 -3px 0 #e6d4a0}
.mj-arc-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:10px;line-height:14px;color:#f2e3bd;padding:4px 2px}.mj-arc-meta>.mj-arena-indicators{font-size:9px;gap:3px;flex-wrap:nowrap}.mj-arc-meta .mj-small{width:12px;height:17px;--tile-w:12px}
.room-mahjong .mj-player-dock.mj-speed-dock{max-height:none;overflow:visible;padding:4px 6px;flex:0 0 auto}
.room-mahjong .mj-speed-dock .mj-own-hand{display:flex;flex-direction:column;gap:2px;overflow:visible}
.mj-hand-heading{display:flex;align-items:center;gap:6px;font-size:11px;line-height:16px;min-height:16px}.mj-own-score{font-size:10px;color:#edddb3}.room-mahjong .mj-hand-heading .mj-speed-flow{font-size:10px;text-align:right;line-height:14px}
.room-mahjong .mj-speed-dock .mj-hand-tiles.mj-hand-inline{position:static;display:flex;align-items:center;justify-content:stretch;gap:1px;margin:0;padding:4px 0 2px;overflow:visible;box-shadow:none;min-height:52px}
.room-mahjong .mj-hand-inline>.mj-tile{flex:1 1 0;max-width:44px;min-width:0;height:48px;min-height:48px;border-radius:3px;padding:1px 0 4px}
.room-mahjong .mj-hand-inline>.mj-tile.mj-drawn-slot,.mj-drawn-space{flex:0 0 clamp(19px,6cqi,36px);width:clamp(19px,6cqi,36px);margin-left:2px;max-width:36px}
.room-mahjong .mj-hand-action-slot{flex:0 0 44px;width:44px;align-self:stretch;margin-left:2px;display:flex;align-items:center}
.room-mahjong .mj-hand-action-slot .mj-discard-confirm{display:block;min-width:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none;width:44px}
.room-mahjong .mj-hand-action-slot .mj-discard-preview{display:none}
.room-mahjong .mj-hand-action-slot .button{width:44px;min-width:44px;min-height:48px;margin:0;padding:4px 0;font-size:12px;line-height:16px;border-radius:6px}
.room-mahjong .mj-speed-hand .mj-compact-calls{display:block;order:initial;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#e8dec0}
.mj-call-context{display:flex;align-items:center;gap:5px;min-height:28px;font-size:10px;color:#e3d8b9}
.mj-call-context>.mj-small{--tile-w:17px;width:17px;height:24px;flex:none}.mj-call-target{width:112px;max-width:45%;min-width:0;height:28px;font-size:10px;background:#224d39;color:#fff0c9;border:1px solid #829577;border-radius:4px;padding:2px}.mj-call-hint{flex:1;min-width:0;font-size:9px;line-height:12px}
.mj-chi-choice,.mj-kan-choice{width:100px;min-height:28px;background:#244e3b;color:#f9e8b8;font-size:10px;border:1px solid #a4b694}
.mj-call-buttons{display:flex;gap:4px;margin:0}.room-mahjong .mj-call-buttons>.button{flex:1;min-width:0;min-height:44px;margin:0;padding:4px 2px;font-size:12px;border-width:1px}.room-mahjong .mj-call-buttons .button:disabled{opacity:.38}.room-mahjong .mj-call-buttons>.mj-riichi-action{background:#5a3c42;color:#fff0d1;border-color:#c58f8e}
.mj-own-melds{display:flex;gap:4px;align-items:center;min-height:22px}.mj-own-melds .mj-meld-chip{padding:0 2px;gap:1px}.mj-own-melds .mj-small{--tile-w:14px;width:14px;height:20px}
.room-mahjong .mj-river-compact{margin:2px 0 0;padding-top:3px}.mj-river-compact .mj-own-river-header{margin:0 0 2px;font-size:9px;line-height:12px}.mj-river-compact .mj-own-river-header h3{font-size:10px;line-height:12px}
.mj-river-compact .mj-own-river-grid{grid-template-columns:repeat(var(--river-columns,12),minmax(0,1fr));gap:3px 1px;padding:1px;max-width:none}.mj-river-compact .mj-own-river-slot{position:relative;display:block;padding:0;gap:0;text-align:center}.mj-river-compact .mj-own-river-slot .mj-small{width:min(100%,24px);height:27px;--tile-w:24px;border-radius:2px;vertical-align:top}.mj-river-compact .mj-own-river-slot small{position:absolute;right:0;bottom:0;color:#201c0f;background:#ffdf91;font-size:8px;line-height:9px}.mj-river-compact .mj-own-river-slot small:empty{display:none}.mj-river-compact .mj-own-river-guide,.mj-river-compact .mj-own-river-empty{font-size:9px;line-height:11px;margin:2px 0 0}.mj-river-compact .mj-furiten-warning{font-size:10px;line-height:12px;margin:2px 0 0}
.mj-win-summary{margin:2px 0 0;padding:5px 6px;border:1px solid #bba062;border-radius:6px;background:#243e33;color:#f3e6c4;min-width:0}.mj-win-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:22px;font-size:10px;line-height:14px}.mj-win-heading strong{min-width:0}.mj-win-history{height:28px;width:106px;flex:0 0 106px;font-size:10px;background:#365541;color:#fff0c6;border:1px solid #b6a477;border-radius:4px}.mj-win-heading .mj-win-latest{min-height:28px;margin:0;padding:2px 4px;font-size:10px}.mj-win-summary .mj-completed-hand{display:flex;flex-wrap:nowrap;align-items:center;gap:1px;margin:3px 0;min-width:0}.mj-win-summary .mj-completed-hand>.mj-small{--tile-w:18px;width:18px;min-width:0;height:25px;flex:0 1 18px}.mj-win-summary .mj-completed-meld{gap:1px;margin-left:3px;flex:0 1 auto;min-width:0}.mj-win-summary .mj-completed-meld .mj-small{--tile-w:17px;width:17px;min-width:0;height:25px;flex:0 1 17px}.mj-win-yaku{font-size:10px;line-height:13px;margin:2px 0 0;overflow-wrap:anywhere}
@media(max-width:350px){.room-mahjong .mj-speed-dock{padding-inline:4px}.room-mahjong .mj-play-area>.mj-quick-layout{padding-inline:4px}.mj-hand-heading{gap:4px;font-size:10px}.mj-own-score{font-size:9px}.room-mahjong .mj-hand-heading .mj-speed-flow{font-size:9px}.mj-river-compact:has(.mj-own-river-slot:nth-child(37)) .mj-own-river-slot .mj-small{height:22px}.mj-win-summary{padding:3px 4px}.mj-win-yaku{font-size:9px;line-height:11px}}
.room-mahjong:has(.mj-quick-layout) .mj-play-area{gap:2px}
.room-mahjong .mj-speed-dock .mj-hand-tiles.mj-hand-inline{min-height:48px;padding-top:2px}
.room-mahjong .mj-hand-inline>.mj-tile{height:44px;min-height:44px}
.room-mahjong .mj-hand-action-slot .button{min-height:44px}
.mj-arc-meta{padding-block:2px}
.mj-win-summary .mj-completed-hand{margin:1px 0}
.mj-river-compact .mj-own-river-grid{gap:2px 1px}
.mj-river-compact:has(.mj-own-river-slot:nth-child(37)) .mj-own-river-slot .mj-small{height:20px}
@media(max-width:350px){.room-mahjong .mj-player-dock.mj-speed-dock{padding-inline:4px}.mj-river-compact:has(.mj-own-river-slot:nth-child(37)) .mj-own-river-slot .mj-small{height:20px}}
.room-mahjong .mj-speed-dock .mj-hand-tiles.mj-hand-inline{gap:.5px}
.room-mahjong .mj-hand-inline>.mj-tile.mj-drawn-slot,.mj-drawn-space{margin-left:1px}
.room-mahjong .mj-hand-action-slot{margin-left:1px}
.room-mahjong:has(.mj-quick-layout) .mj-play-area{max-width:720px;width:100%;margin-inline:auto;justify-content:center}
.room-mahjong .mj-play-area>.mj-quick-layout{flex:0 1 auto}
.room-mahjong .mj-speed-dock .mj-hand-tiles.mj-hand-inline{width:100%;max-width:664px;margin-inline:auto}
.room-mahjong .mj-hand-inline>.mj-tile.mj-drawn-slot,.mj-hand-inline>.mj-drawn-space{margin-left:auto}
/* A short, wide window puts the completed hand beside the opponents. */
@media(min-width:450px) and (max-height:700px){
 .room-mahjong .mj-arc-table:has(.mj-win-summary){display:grid;grid-template-columns:minmax(250px,1fr) minmax(135px,170px);gap:2px 4px}
 .mj-arc-table:has(.mj-win-summary) .mj-arc-felt{grid-column:1;grid-row:1}
 .mj-arc-table:has(.mj-win-summary) .mj-arc-meta{grid-column:1;grid-row:2;font-size:9px}
 .mj-arc-table .mj-win-summary{grid-column:2;grid-row:1 / span 2;margin:0;padding:4px}
 .mj-win-summary .mj-win-heading{flex-wrap:wrap;gap:2px}
 .mj-win-summary .mj-completed-hand{flex-wrap:wrap;gap:2px 1px}
 .mj-win-summary .mj-completed-hand>.mj-small{flex:0 0 17px;width:17px;height:23px}
 .mj-win-summary .mj-completed-meld{flex:0 0 auto;margin-left:2px}
 .mj-win-summary .mj-completed-meld .mj-small{width:16px;flex:0 0 16px;height:23px}
 .mj-win-summary .mj-win-yaku{font-size:9px;line-height:11px}
 .mj-river-compact:has(.mj-own-river-slot:nth-child(37)) .mj-own-river-grid{grid-template-columns:repeat(24,minmax(0,1fr))}
}
/* Preserve the complete table in very short browser panes as well. */
@media(min-width:320px) and (max-width:449px) and (max-height:599px){
 .room-stage:has(.mj-arc-table){zoom:.72}
 .room-mahjong .mj-arc-table:has(.mj-win-summary){display:grid;grid-template-columns:minmax(250px,1fr) minmax(135px,170px);gap:2px 4px}
 .mj-arc-table:has(.mj-win-summary) .mj-arc-felt{grid-column:1;grid-row:1;height:calc(var(--arc-height) - 10px)}
 .mj-arc-table:has(.mj-win-summary) .mj-arc-meta{grid-column:1;grid-row:2;font-size:9px}
 .mj-arc-table .mj-win-summary{grid-column:2;grid-row:1 / span 2;margin:0;padding:4px}
 .mj-win-summary .mj-win-heading{flex-wrap:wrap;gap:2px}
 .mj-win-summary .mj-completed-hand{flex-wrap:wrap;gap:2px 1px}
 .mj-win-summary .mj-completed-hand>.mj-small{flex:0 0 17px;width:17px;height:23px}
 .mj-win-summary .mj-completed-meld{flex:0 0 auto;margin-left:2px}
 .mj-win-summary .mj-completed-meld .mj-small{width:16px;flex:0 0 16px;height:23px}
 .mj-win-summary .mj-win-yaku{font-size:9px;line-height:11px}
 .mj-river-compact .mj-own-river-grid{grid-template-columns:repeat(18,minmax(0,1fr))}
 .mj-river-compact:has(.mj-own-river-slot:nth-child(37)) .mj-own-river-grid{grid-template-columns:repeat(24,minmax(0,1fr))}
}
@media(min-width:390px) and (max-width:449px) and (min-height:500px) and (max-height:599px){.room-stage:has(.mj-arc-table){zoom:.88}}
.mj-call-context:has(.mj-chi-choice) .mj-call-hint,.mj-call-context:has(.mj-kan-choice) .mj-call-hint{display:none}

/* The player's river sits directly above a stable, bottom-aligned hand. */
.room-mahjong:has(.mj-quick-layout) .mj-play-area{justify-content:flex-end}
.room-mahjong .mj-play-area>.mj-quick-layout{flex:1 1 auto;min-height:0}
.mj-quick-layout .mj-arc-table{display:flex;flex-direction:column}
.room-mahjong .mj-play-area .mj-quick-layout .mj-arc-table{flex:1;min-height:0}
.mj-quick-layout .mj-arc-felt{flex:1 0 var(--arc-height)}
.room-mahjong .mj-player-dock.mj-speed-dock{padding-bottom:3px;border-top:1px solid #d2bf8c55;background:linear-gradient(#1c4937,#133c2f)}
.room-mahjong .mj-speed-dock .mj-hand-tiles.mj-hand-inline{--hand-unit:min(44px,calc((min(100cqi,664px) - 58px)/14));min-height:48px;padding:3px 0 1px}
.room-mahjong .mj-hand-inline>.mj-tile,.room-mahjong .mj-hand-inline>.mj-tile.mj-drawn-slot,.room-mahjong .mj-hand-inline>.mj-drawn-space{flex:0 0 var(--hand-unit);width:var(--hand-unit);min-width:0;max-width:var(--hand-unit);margin-left:0}
.room-mahjong .mj-hand-inline>.mj-tile.mj-drawn-slot,.room-mahjong .mj-hand-inline>.mj-drawn-space{margin-left:3px}
.room-mahjong .mj-hand-action-slot{margin-left:auto;align-self:center}
.mj-hand-inline>.mj-own-melds{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:3px;padding:0 3px 0 4px;align-self:center;box-shadow:inset 1px 0 #b6b18a88}
.mj-hand-inline .mj-own-melds .mj-meld-chip{flex:none;gap:.5px;padding:0;border:0;box-shadow:none;background:none;align-items:center;position:relative}
.mj-hand-inline .mj-own-melds .mj-small{--tile-w:calc(var(--hand-unit)*.7);width:var(--tile-w);height:calc(var(--tile-w)*1.4);min-height:0;min-width:0;flex:none;border-radius:2px;padding:1px 0 2px;box-shadow:inset 1px 1px #fff,0 2px #9f8f66}
.mj-hand-inline .mj-own-melds .mj-meld-chip::after{content:attr(aria-label);position:absolute;bottom:-9px;left:0;right:0;text-align:center;font-size:7px;color:#dacfae;line-height:8px}
.room-mahjong .mj-speed-hand>.mj-own-river-panel{margin:2px 0 0;padding-bottom:0}
.mj-arc-table .mj-seat-button.mj-callable{background:#365c35;border:2px solid #ffdb72;box-shadow:0 0 0 2px #ffd15f66,0 0 13px #e8bd5455}
.mj-arc-table .mj-seat-button.mj-callable>.mj-seat-latest{position:absolute;left:2px;top:2px;--tile-w:25px;width:25px;height:36px;z-index:1}
.mj-call-badge{position:absolute;right:0;top:2px;bottom:2px;width:12px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-size:9px;font-weight:800;line-height:12px;color:#263e22;background:#ffe49a;border-radius:3px;z-index:3;pointer-events:none}
.mj-can-ron .mj-call-badge{color:#fff4d9;background:#af412d}.mj-arc-table .mj-seat-button.mj-can-ron{border-color:#ffab76;box-shadow:0 0 0 2px #ef865d88,0 0 15px #e08e4566}
.mj-opponent-hand{position:absolute;left:3px;right:3px;bottom:1px;height:5px;display:flex;justify-content:center;gap:1px;pointer-events:none;z-index:0}
.mj-opponent-hand i{display:block;width:5px;height:5px;background:linear-gradient(#d8c99c,#74865b);border:1px solid #b4bc82;border-radius:1px}
.mj-arc-table .mj-wall-left,.mj-arc-table .mj-wall-right{top:43%;height:38%;width:8px;gap:1px;opacity:.5;filter:drop-shadow(1px 2px 1px #0a2a25)}
.mj-arc-table .mj-wall-left{left:31%;transform:rotate(25deg)}.mj-arc-table .mj-wall-right{right:31%;transform:rotate(-25deg)}
.mj-arc-table .mj-wall-left .mj-wall-stack,.mj-arc-table .mj-wall-right .mj-wall-stack{width:8px;height:5px;flex:none;box-shadow:2px 0 #e2d1a2}
body.in-room .main.room-screen.mj-practice-screen[data-game=mahjong]:has(.mj-speed-dock):not([data-editing]):not([data-comment-editing]){grid-template-rows:44px minmax(0,1fr)!important}
.mj-practice-screen .room-bar>.mj-practice-info{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.mj-practice-screen .room-bar>.mj-practice-count{margin-right:auto}
@media(max-width:480px){.mj-practice-screen .room-bar>.mj-practice-count{display:none}.mj-practice-screen .room-bar>.mj-practice-switch{margin-right:auto}}
.room-mahjong .mj-speed-dock .mj-hand-tiles.mj-hand-inline{--hand-unit:min(44px,calc((min(100cqi,664px) - 56px)/14))}
.mj-hand-inline>.mj-own-melds{gap:2px}
.mj-hand-inline .mj-own-melds .mj-meld-chip::after{display:none}
/* Keep a full touch area while drawing a correctly proportioned upright tile face. */
.room-mahjong .mj-hand-inline>.mj-tile{height:max(44px,calc(var(--hand-unit)*1.4));min-height:44px;position:relative;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;aspect-ratio:auto}
.room-mahjong .mj-hand-inline>.mj-tile::before{content:"";position:absolute;left:0;right:0;bottom:1px;height:calc(var(--hand-unit)*1.4 - 2px);border:1px solid #d3c18d;border-radius:3px;background:#fff7df;box-shadow:inset 1px 1px #fff,0 2px #b7a26b}
.room-mahjong .mj-hand-inline>.mj-tile>svg{position:absolute;left:1px;bottom:3px;width:calc(100% - 2px);height:calc(var(--hand-unit)*1.4 - 6px);max-height:none;z-index:1}
.room-mahjong .mj-hand-inline>.mj-tile.mj-hand-selected{background:transparent;box-shadow:none}
.room-mahjong .mj-hand-inline>.mj-tile.mj-hand-selected::before{background:#ffe79a;border-color:#f1bf52;box-shadow:0 0 0 1px #e5ad3c,0 2px #ae8c43}
.mj-hand-inline>.mj-riichi-choice::before{border:2px solid #e7ae71;background:#ffeccd}

.playtest-banner { height: 28px; padding: 4px 8px; background: #f7df98; color: #35280d; text-align: center; font-size: 12px; line-height: 20px; white-space: nowrap; }
body.is-playtest.in-room #app { height: calc(100dvh - 28px); }