@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');

:root{font-family:'DM Sans','Noto Sans JP',sans-serif;color:var(--theme-ink,#242b2a);background:var(--theme-canvas,#f7f4ec);font-synthesis:none;text-rendering:optimizeLegibility;--ink:var(--theme-ink,#242b2a);--muted:var(--theme-muted,#818984);--line:var(--theme-muted,#e9e6dc);--paper:#fffefa;--green:#25785d}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 2% 15%,var(--theme-raised,#e9f1e8) 0,transparent 27%),var(--theme-canvas,#f7f4ec)}.game-shell{width:min(1120px,calc(100% - 48px));margin:auto}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--theme-line,#e8e4d9)}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:800;letter-spacing:.12em}.brand-mark{display:grid;place-items:center;width:30px;height:30px;background:var(--theme-raised,#e6efe7);border-radius:9px;color:var(--green);font-size:20px}.prototype-tag,.step{font-size:10px;letter-spacing:.13em;font-weight:700;color:var(--theme-muted,#78827b)}.prototype-tag{border:1px solid var(--theme-line,#dedfd3);border-radius:999px;padding:7px 11px}.hero{padding:32px 0 23px;display:flex;align-items:flex-end;justify-content:space-between}.eyebrow{font-size:9px;letter-spacing:.18em;color:var(--theme-muted,#8b948d);font-weight:800;margin:0 0 8px}.hero h1{font-size:clamp(30px,4vw,43px);letter-spacing:-.055em;margin:0;line-height:1.2}.hero h1 span{font-size:.52em;color:var(--theme-muted,#89918a);letter-spacing:0;margin-left:8px}.intro{font-size:13px;color:var(--theme-muted,#777f78);margin:9px 0 0}.round-chip{border-radius:999px;background:var(--theme-paper,#fffefa);border:1px solid var(--line);padding:8px 13px;font-size:11px;color:var(--theme-muted,#67716a);margin-bottom:3px}.status-dot{display:inline-block;width:7px;height:7px;background:#ebb959;border-radius:50%;margin-right:6px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:15px;box-shadow:0 4px 16px #41453408}.arena{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 23px;margin-bottom:17px}.fighter{display:flex;align-items:center;gap:14px}.opponent-fighter{flex-direction:row-reverse;text-align:right}.avatar{display:grid;place-items:center;width:53px;height:53px;border-radius:15px;font-size:25px}.avatar-player{background:var(--theme-tint-forest,#e7f1e9);color:var(--theme-forest,#2d795d)}.avatar-opponent{background:var(--theme-raised,#f4eee5);color:var(--theme-gold,#b89a75)}.fighter-label{font-size:9px;letter-spacing:.17em;color:var(--theme-muted,#929992);font-weight:800}.fighter h2{margin:2px 0 8px;font-size:15px}.hp-line{display:flex;justify-content:space-between;gap:18px;margin-bottom:5px;font-size:10px;color:var(--theme-muted,#818983)}.hp-line strong{font-size:10px;color:var(--theme-ink,#4b544f)}.hp-track{height:5px;background:var(--theme-raised,#e8eee6);border-radius:5px;width:min(220px,30vw);overflow:hidden}.hp-track span{display:block;width:100%;height:100%;background:#4f9b71;border-radius:5px}.opponent-hp{background:var(--theme-tint-fire,#f3e9e2)}.opponent-hp span{background:#d77b68}.versus{font-size:12px;font-weight:800;color:var(--theme-muted,#b8b6a9);letter-spacing:.1em;padding:0 23px}.content-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:17px}.selection-panel,.battle-panel,.evolution-panel,.log-panel{padding:21px}.section-heading{display:flex;justify-content:space-between;align-items:center}.section-heading .eyebrow{margin-bottom:5px}.section-heading h2,.result-panel h2{font-size:17px;margin:0;letter-spacing:-.025em}.section-copy{font-size:11px;color:var(--theme-muted,#858d86);margin:10px 0 17px;line-height:1.7}.step{border:1px solid var(--theme-line,#e8e8df);padding:6px 9px;border-radius:6px}.step b{color:var(--ink)}.pencil-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pencil-card{position:relative;min-width:0;min-height:168px;border:1px solid var(--line);border-radius:12px;background:var(--theme-paper,#fffefa);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:10px 8px 12px;cursor:pointer;color:var(--ink);transition:transform .16s,border-color .16s,box-shadow .16s}.pencil-card:hover{transform:translateY(-3px);box-shadow:0 7px 18px #00000010}.pencil-card[aria-pressed=true]{outline:2px solid currentColor;outline-offset:1px}.fire{--element:#db7255;--tint:var(--theme-tint-fire,#fff1e8)}.water{--element:#558eaf;--tint:var(--theme-tint-water,#edf6fa)}.forest{--element:#478264;--tint:var(--theme-tint-forest,#edf6ee)}.pencil-card{color:var(--element)}.pencil-card:before{content:'';position:absolute;inset:0 0 auto;height:67px;border-radius:11px 11px 28px 28px;background:var(--tint)}.element-icon{position:absolute;top:10px;left:12px;z-index:1;color:var(--element);font-size:15px}.pencil-art{position:relative;z-index:1;margin:13px 0 11px;width:15px;height:63px;background:linear-gradient(90deg,#d8bc80,#f6e6bd 45%,#cdaa69);border:1px solid #c7a969;border-radius:4px 4px 2px 2px;transform:rotate(27deg);box-shadow:2px 3px 0 #0000000d}.pencil-art:before{content:'';position:absolute;top:-8px;left:-1px;width:15px;height:12px;background:var(--element);clip-path:polygon(50% 0,100% 100%,0 100%)}.pencil-art i{position:absolute;left:4px;top:17px;width:5px;height:25px;background:var(--element);opacity:.75;border-radius:4px}.element-name{font-size:14px;font-weight:800;color:var(--ink)}.element-sub{font-size:8px;letter-spacing:.16em;color:var(--theme-muted,#929992);font-weight:700;margin-top:2px}.card-hint{display:none;font-size:8px;margin-top:6px}.pencil-card[aria-pressed=true] .card-hint{display:block}.selection-note{min-height:16px;margin:12px 0 0;font-size:10px;color:var(--theme-muted,#858d86)}.battle-panel{display:flex;flex-direction:column}.reel-box{margin:19px 0 13px;flex:1;min-height:145px;background:var(--theme-raised,#f7f7f1);border:1px dashed var(--theme-line,#dedfd3);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center}.reel-caption{font-size:8px;letter-spacing:.2em;font-weight:800;color:var(--theme-muted,#9ba29b);margin-bottom:9px}.reel-window{display:flex;gap:7px}.reel-window span{display:grid;place-items:center;width:40px;height:45px;background:var(--theme-paper,white);border:1px solid var(--theme-line,#e9e6dc);border-radius:8px;color:var(--theme-muted,#abb1a8);font-size:23px;font-weight:700}.reel-box p{font-size:9px;color:var(--theme-muted,#959c95);margin:9px 0 0}.roll-button{width:100%;border:0;border-radius:9px;background:#2d795d;color:white;padding:12px;font:700 12px inherit;cursor:pointer}.roll-button span{font-size:16px;vertical-align:-1px;margin-right:4px}.roll-button:disabled{background:var(--theme-raised,#d5ddd5);color:var(--theme-muted,#8a958d);cursor:not-allowed}.button-help{text-align:center;margin:7px 0 0;color:var(--theme-muted,#9ba19b);font-size:9px}.evolution-panel{margin-top:17px}.evolution-flow{display:grid;grid-template-columns:1fr auto 1fr 1.3fr;align-items:center;gap:14px;margin-top:15px}.evolution-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:60px 1fr;align-items:center;gap:10px}.evo-label{font-size:9px;font-weight:700;color:var(--theme-muted,#858e87)}.evo-placeholder{display:flex;align-items:center;gap:9px;color:var(--theme-muted,#a0a79f)}.evo-placeholder span{display:grid;place-items:center;width:36px;height:36px;background:var(--theme-raised,#f0f2ec);border-radius:9px;font-size:19px}.evo-placeholder small{font-size:9px}.evolved .evo-placeholder span{background:var(--theme-raised,#f3efe3);color:var(--theme-gold,#b79a56)}.evolution-arrow{font-size:20px;color:var(--theme-muted,#b9b9ab)}.evolution-hint{font-size:10px;line-height:1.7;color:var(--theme-muted,#8c948e);margin:0}.bottom-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:17px;margin-top:17px}.log-panel{min-height:125px}.live-tag{font-size:8px;color:var(--theme-muted,#7e9184);letter-spacing:.12em}.live-tag i{display:inline-block;width:6px;height:6px;background:#6eaa7c;border-radius:50%;margin-right:4px}.log-entry{display:flex;gap:12px;align-items:center;border-top:1px solid var(--theme-line,#f0eee7);margin-top:14px;padding-top:12px}.log-time{font-size:8px;letter-spacing:.1em;color:var(--theme-muted,#a0a69f);font-weight:800}.log-entry p{font-size:10px;color:var(--theme-muted,#858d86);margin:0}.result-panel{position:relative;overflow:hidden;min-height:125px;padding:21px}.result-panel h2{font-size:15px}.result-panel>p:last-of-type{font-size:10px;color:var(--theme-muted,#8b938d);margin:9px 0}.result-emblem{position:absolute;right:20px;bottom:-23px;font-size:74px;color:#f5f2e9}footer{display:flex;justify-content:center;gap:8px;padding:22px 0 28px;color:var(--theme-muted,#9ca29b);font-size:9px;letter-spacing:.08em}footer span{letter-spacing:0}
@media(max-width:720px){.game-shell{width:min(100% - 28px,540px)}.topbar{height:62px}.hero{padding:25px 0 17px;align-items:flex-start}.round-chip{font-size:10px}.arena{padding:15px 13px;gap:7px}.fighter{gap:8px}.avatar{width:41px;height:41px;border-radius:12px;font-size:20px}.fighter h2{font-size:12px}.hp-track{width:100%}.hp-line{gap:8px}.versus{padding:0 4px;font-size:10px}.content-grid,.bottom-grid{grid-template-columns:1fr}.selection-panel,.battle-panel,.evolution-panel,.log-panel{padding:17px}.pencil-card{min-height:155px}.reel-box{min-height:130px}.evolution-flow{grid-template-columns:1fr auto 1fr}.evolution-hint{grid-column:1/-1;text-align:center}.evolution-card{grid-template-columns:1fr;gap:7px;padding:9px}.evo-placeholder{gap:5px}.evo-placeholder small{font-size:8px}}
@media(max-width:390px){.game-shell{width:calc(100% - 20px)}.prototype-tag{font-size:8px;padding:6px 8px}.hero h1{font-size:29px}.arena{padding:12px 9px}.fighter{gap:6px}.avatar{width:34px;height:34px}.fighter-label{font-size:8px}.hp-line{font-size:9px}.hp-line strong{font-size:9px}.pencil-options{gap:6px}.pencil-card{min-height:145px}.evolution-card{padding:7px}.evo-placeholder span{width:30px;height:30px}}

.reset-button{margin-top:7px;padding:8px;border:1px solid var(--line);background:var(--theme-paper,#fffefa);border-radius:8px;color:var(--theme-muted,#66716a);font:inherit;font-size:10px;font-weight:600;cursor:pointer}.roll-button{font:inherit;font-size:12px;font-weight:700}.reset-button:disabled{opacity:.5;cursor:wait}.battle-log{max-height:220px;overflow:auto}.battle-log .log-entry{align-items:flex-start}.battle-log .log-entry p{line-height:1.6}.hp-track{transition:background-color .2s}.hp-track span{transition:width .4s ease}.is-dimmed{opacity:.42;text-decoration:line-through}.is-active{color:var(--green);font-weight:700}.reel-window.spinning span{animation:reel-flash .14s linear infinite alternate}.result-panel h2{position:relative;z-index:1}.result-panel>p{position:relative;z-index:1}.pencil-card:disabled{cursor:default;opacity:.77}.pencil-card:disabled:hover{transform:none;box-shadow:none}
@keyframes reel-flash{from{transform:translateY(-3px);opacity:.55}to{transform:translateY(3px);opacity:1}}

.online-panel{margin:0 0 17px;padding:21px}.online-controls{display:grid;grid-template-columns:1fr minmax(130px,.9fr) 1fr auto;gap:9px}.online-button{border:0;border-radius:9px;background:#2d795d;color:#fff;padding:11px 13px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.online-button.secondary{background:var(--theme-raised,#e9f1e9);color:var(--theme-forest,#35674f)}.online-button.leave{background:var(--theme-paper,#fff);border:1px solid var(--line);color:var(--theme-muted,#6c756e)}.online-button:disabled{opacity:.48;cursor:not-allowed}.room-code-field{display:flex}.room-code-field input{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--theme-paper,#fffefa);padding:0 12px;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}.room-code-field input:disabled{background:var(--theme-raised,#f4f4ee)}.connection-state{font-size:9px;color:var(--theme-muted,#9b8c6d);border:1px solid var(--theme-line,#eee8d9);border-radius:999px;padding:6px 9px;white-space:nowrap}.connection-state[data-connected=true]{color:var(--theme-forest,#397753);border-color:var(--theme-line,#d9e9dd);background:var(--theme-tint-forest,#f2f8f2)}.room-feedback{min-height:17px;margin-top:11px;color:var(--theme-muted,#818984);font-size:10px}.room-feedback[data-kind=error]{color:var(--theme-fire,#b95e52)}.room-feedback[data-kind=success]{color:var(--theme-forest,#397753)}.room-status{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:9px;padding-top:11px;font-size:10px;color:var(--theme-muted,#737d75)}.room-status[hidden]{display:none}.room-status strong{color:var(--theme-forest,#376c51)}.room-status code{padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--theme-raised,#f7f7f1);font-size:12px;letter-spacing:.15em;color:var(--ink)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:720px){.online-panel{padding:17px}.online-controls{grid-template-columns:1fr 1fr}.room-code-field{grid-column:1}.online-button.secondary{grid-column:2;grid-row:2}.online-button.leave{grid-column:1/-1}.room-status{gap:7px}}
@media(max-width:390px){.online-controls{grid-template-columns:1fr}.room-code-field,.online-button.secondary,.online-button.leave{grid-column:1;grid-row:auto}.online-button,.room-code-field input{min-height:40px}.connection-state{font-size:8px;padding:5px 7px}}

/* State-based game screens. Keep the existing panels and IDs so the battle
   controllers continue to own all game and network behavior. */
[hidden]{display:none!important}
.selection-view{margin-bottom:17px}
.local-mode-button,.text-button,.log-toggle,.result-exit{min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--theme-paper,#fffefa);color:var(--theme-ink,#53645a);padding:10px 15px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.local-mode-button{margin-top:12px;background:var(--theme-raised,#eef4ed);border-color:var(--theme-line,#dce9dc);color:var(--theme-forest,#326c4f)}
#game-status:empty{display:none}
.text-button{margin-top:7px;min-height:40px;background:transparent}
.fighter-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fighter-title h2{margin:2px 0 5px}
.fighter-detail{display:block;margin-bottom:5px;color:var(--theme-muted,#7f8981);font-size:10px}
.turn-banner{display:flex;align-items:center;justify-content:center;gap:14px;min-height:43px;padding:6px 12px;border:1px solid var(--theme-line,#dce9dc);border-radius:11px;background:var(--theme-tint-forest,#eef5ed);color:var(--theme-forest,#326c4f);font-size:14px;font-weight:800}
.turn-banner .step{margin-left:auto}
.battle-view{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);grid-template-areas:"arena arena" "turn turn" "battle evolution" "bottom bottom";gap:14px;align-items:stretch}
.battle-view>.arena{grid-area:arena;margin:0}
.battle-view>.turn-banner{grid-area:turn}
.battle-view>.battle-panel{grid-area:battle}
.battle-view>.evolution-panel{grid-area:evolution;margin:0}
.battle-view>.bottom-grid{grid-area:bottom;margin:0}
.battle-view .bottom-grid{grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr)}
.online-panel .online-controls{align-items:stretch}
.log-toggle{width:100%;margin-top:8px;min-height:40px;background:var(--theme-raised,#f7f7f1)}
.battle-log:not(.is-expanded) .log-entry:not(:nth-last-child(-n+2)){display:none}
.result-exit{position:relative;z-index:1;margin-top:10px;background:#2d795d;border-color:var(--theme-forest,#2d795d);color:#fff}
.game-shell[data-screen="selection"][data-mode="online"] .hero{padding-top:17px;padding-bottom:12px}
.game-shell[data-screen="selection"][data-mode="online"] .online-panel{padding:10px 14px;margin-bottom:12px}
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .section-heading>.eyebrow,
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .section-heading h2,
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .section-copy,
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .room-feedback,
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .local-mode-button{display:none}
.game-shell[data-screen="selection"][data-mode="online"] #selection-back{display:none}
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .section-heading{justify-content:flex-end}
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .online-controls{display:flex;justify-content:flex-end;gap:8px}
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .online-controls>*:not(#leave-room){display:none}
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .online-button.leave{min-height:36px;padding:7px 12px}
.game-shell[data-screen="selection"][data-mode="online"] .online-panel .room-status{margin:0;padding:5px 0 0;border:0}
.game-shell[data-mode="local"] .online-panel{display:none}
.game-shell[data-screen="battle"] .hero{display:none}
.game-shell[data-screen="battle"] .online-panel{display:none}
.game-shell[data-screen="battle"][data-mode="online"] .evolution-panel{display:none}
.game-shell[data-screen="battle"][data-result="false"] .result-panel{display:none}
.game-shell[data-screen="battle"][data-result="true"] .log-panel{display:none}
.game-shell[data-screen="battle"][data-result="true"] .bottom-grid{display:block}
.game-shell[data-screen="battle"][data-result="true"] .result-panel{min-height:185px}

@media(max-width:720px){
  .battle-view{grid-template-columns:1fr;grid-template-areas:"arena" "turn" "battle" "evolution" "bottom";gap:9px}
  .battle-view .bottom-grid{grid-template-columns:1fr}
  .battle-view .evolution-panel{margin:0}
  .fighter-detail{font-size:10px}
}

@media(max-width:600px){
  html,body{min-width:320px;overflow-x:hidden}
  body{min-height:100dvh}
  .game-shell{width:calc(100% - 20px);max-width:520px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .topbar{height:52px}
  .brand{gap:6px;font-size:11px;letter-spacing:.09em}
  .brand-mark{width:28px;height:28px}
  .prototype-tag{font-size:8px;letter-spacing:.04em;padding:6px 8px}
  .hero{padding:20px 0 14px;gap:8px;align-items:flex-start;flex-direction:column}
  .hero h1{font-size:30px}
  .intro{font-size:12px;margin-top:6px}
  .round-chip{font-size:10px;margin:0}
  .online-panel{padding:15px;margin-bottom:12px}
  .online-panel .section-heading{align-items:flex-start;gap:8px}
  .online-panel .section-heading h2{font-size:16px}
  .online-controls{grid-template-columns:1fr 1fr;gap:8px}
  .online-controls .room-code-field{grid-column:1/-1;grid-row:1}
  .online-controls #create-room{grid-column:1;grid-row:2}
  .online-controls #join-room{grid-column:2;grid-row:2}
  .online-controls #leave-room{grid-column:1/-1;grid-row:3}
  .online-button,.room-code-field input{min-height:48px;font-size:13px}
  .room-code-field input{text-align:center}
  .connection-state{font-size:9px}
  .room-status{gap:7px;font-size:10px}
  .room-status code{font-size:13px}
  .local-mode-button{width:100%;min-height:48px}
  .selection-view{padding:15px;margin-bottom:10px}
  .selection-view .section-heading h2{font-size:18px}
  .selection-view .section-copy{margin:9px 0 12px;font-size:12px}
  .pencil-options{gap:8px}
  .pencil-card{min-height:166px;padding:8px 4px 10px}
  .pencil-art{height:57px;margin:11px 0 9px}
  .element-name{font-size:15px}
  .element-sub{font-size:8px}
  .card-hint{font-size:9px}
  .selection-note{font-size:12px;line-height:1.5;margin-top:12px}
  .text-button{width:100%;margin-top:5px;min-height:44px}
  .battle-view{height:calc(100dvh - 60px - env(safe-area-inset-bottom));min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:3px;grid-template-rows:auto auto auto auto;gap:8px}
  .battle-view>.arena{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:9px 12px;border-radius:12px}
  .battle-view .fighter{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;width:100%;text-align:left;align-items:center}
  .battle-view .opponent-fighter{order:1;flex-direction:row;text-align:left}
  .battle-view .versus{display:none}
  .battle-view .player-fighter{order:2;border-top:1px solid var(--theme-line,#f0eee7);padding-top:5px}
  .battle-view .avatar{display:grid;width:30px;height:30px;border-radius:8px;font-size:16px}
  .battle-view .fighter-title{gap:7px;align-items:baseline}
  .battle-view .fighter-label{font-size:8px;letter-spacing:.1em}
  .battle-view .fighter h2{font-size:12px;margin:0;line-height:1.3}
  .battle-view .fighter-detail{display:inline-block;font-size:10px;line-height:1.25;margin:1px 0 3px}
  .battle-view .hp-line{font-size:10px;margin:0 0 3px;gap:8px}
  .battle-view .hp-line strong{font-size:11px}
  .battle-view .hp-track{width:100%;height:6px}
  .turn-banner{min-height:42px;border-radius:10px;font-size:14px;padding:5px 10px}
  .turn-banner .step{padding:5px 8px;font-size:9px}
  .battle-view>.battle-panel{padding:9px 11px;border-radius:12px}
  .reel-box{min-height:0;flex:initial;margin:0 0 8px;padding:7px 8px;background:var(--theme-raised,#f7f7f1)}
  .reel-caption{font-size:10px;margin:0 0 5px;letter-spacing:.08em}
  .reel-window span{width:39px;height:39px;font-size:21px}
  .reel-box p{font-size:11px;line-height:1.4;text-align:center;margin:6px 0 0;max-width:100%;overflow-wrap:anywhere}
  .roll-button{min-height:52px;padding:12px;font-size:15px;border-radius:10px}
  .reset-button{width:100%;min-height:42px;margin-top:7px;font-size:12px}
  .button-help{font-size:10px;margin-top:4px;line-height:1.35}
  .battle-view>.evolution-panel{display:none}
  .battle-view>.bottom-grid{display:block;margin:0}
  .log-panel{min-height:0;padding:9px 11px;border-radius:11px}
  .log-panel .section-heading h2{font-size:13px}
  .log-panel .section-heading .eyebrow{display:none}
  .live-tag{font-size:8px}
  .battle-log{max-height:76px;overflow:auto}
  .battle-log .log-entry{gap:7px;margin-top:5px;padding-top:5px}
  .battle-log .log-time{font-size:8px;white-space:nowrap}
  .battle-log .log-entry p{font-size:11px;line-height:1.4}
  .log-toggle{min-height:40px;margin-top:5px;padding:7px;font-size:12px}
  .result-panel{min-height:0!important;padding:17px;border-radius:13px}
  .result-panel h2{font-size:25px}
  .result-panel>p:last-of-type{font-size:13px;line-height:1.55}
  .result-exit{width:100%;min-height:50px;font-size:14px}
  footer{display:none}
  .game-shell[data-screen="battle"]{height:100dvh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:max(5px,env(safe-area-inset-bottom))}
  .game-shell[data-screen="battle"] .battle-view{flex:1}
}

@media(max-width:360px){
  .game-shell{width:calc(100% - 16px)}
  .prototype-tag{font-size:7px;padding:5px 6px}
  .battle-view .fighter{grid-template-columns:29px minmax(0,1fr);gap:6px}
  .battle-view .avatar{width:27px;height:27px}
  .pencil-options{gap:6px}
  .pencil-card{min-height:158px}
}

/* Lightweight pencil roller. The visual skin can later be replaced by an
   image inside .pencil-skin without changing reel or battle state handling. */
.pencil-stage{height:40px;width:min(100%,260px);display:grid;place-items:center;perspective:460px;margin:1px 0 5px}
.rolling-pencil{--lead-color:#db7255;position:relative;width:min(72%,190px);height:19px;display:flex;align-items:center;transform-style:preserve-3d;transform:rotateX(0deg);filter:drop-shadow(0 4px 2px #262b221c)}
.rolling-pencil:not(.is-rolling){transition:transform .22s cubic-bezier(.2,.7,.25,1)}
.rolling-pencil[data-face="2"]:not(.is-rolling){transform:rotateX(60deg)}
.rolling-pencil[data-face="3"]:not(.is-rolling){transform:rotateX(120deg)}
.rolling-pencil[data-face="4"]:not(.is-rolling){transform:rotateX(180deg)}
.rolling-pencil[data-face="5"]:not(.is-rolling){transform:rotateX(240deg)}
.rolling-pencil[data-face="6"]:not(.is-rolling){transform:rotateX(300deg)}
.rolling-pencil[data-element="water"]{--lead-color:#558eaf}
.rolling-pencil[data-element="forest"]{--lead-color:#478264}
.rolling-pencil[data-evolved="true"]{filter:drop-shadow(0 0 5px #d6ad4b) drop-shadow(0 4px 2px #262b221c)}
.pencil-tip{position:absolute;left:-15px;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:16px solid var(--theme-line,#d5bc8d)}
.pencil-tip:after{content:"";position:absolute;left:13px;top:-3px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-right:5px solid var(--theme-line,#49443a)}
.pencil-skin{position:absolute;inset:2px 2px 2px 0;border-radius:3px;background:linear-gradient(180deg,var(--theme-tint-gold,#fff1cb) 0 12%,var(--lead-color) 13% 22%,#e5c98e 23% 77%,var(--lead-color) 78% 87%,var(--theme-tint-gold,#fff1cb) 88%);border:1px solid var(--theme-gold,#b99b61)}
.rolling-pencil[data-evolved="true"] .pencil-skin{background:linear-gradient(180deg,var(--theme-tint-gold,#fff2c8) 0 12%,#c6a448 13% 23%,var(--theme-tint-gold,#ffe6a0) 24% 76%,#c6a448 77% 87%,var(--theme-tint-gold,#fff2c8) 88%);border-color:var(--theme-gold,#a9852e)}
.pencil-face-label{position:absolute;z-index:1;left:45%;top:3px;color:var(--theme-gold,#624e2d);font-size:8px;line-height:12px;font-weight:900;letter-spacing:.12em;pointer-events:none}
.rolling-pencil.is-rolling{animation:pencil-roll 1.12s cubic-bezier(.2,.58,.3,1) both}
@keyframes pencil-roll{0%{transform:translateX(-27px) rotateX(0) rotateZ(-8deg)}18%{transform:translateX(18px) rotateX(360deg) rotateZ(6deg)}42%{transform:translateX(-12px) rotateX(900deg) rotateZ(-5deg)}68%{transform:translateX(9px) rotateX(1440deg) rotateZ(3deg)}86%{transform:translateX(-3px) rotateX(1800deg) rotateZ(-2deg)}100%{transform:translateX(0) rotateX(2160deg) rotateZ(0)}}
.game-shell[data-screen="battle"] .reel-box{overflow:hidden}
.game-shell[data-screen="battle"] .reel-window span{color:var(--green);border-color:var(--theme-line,#d8e6d8);box-shadow:0 2px 6px #26351b0c}
.reset-button{align-self:center;min-height:32px;padding:5px 12px;font-size:9px}
.rematch-button{position:relative;z-index:1;width:100%;min-height:50px;margin-top:16px;border:0;border-radius:10px;background:#2d795d;color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.rematch-button:disabled{background:var(--theme-raised,#dbe4db);color:var(--theme-muted,#657166);cursor:wait}
.rematch-button[hidden]{display:none!important}
.rematch-status{position:relative;z-index:1;min-height:18px!important;margin:7px 0!important;color:var(--theme-forest,#397753)!important;font-size:12px!important;font-weight:700}
@media(prefers-reduced-motion:reduce){.rolling-pencil.is-rolling{animation-duration:1.12s;animation-timing-function:linear}}
@media(max-width:600px){
  .pencil-stage{height:34px;width:min(100%,220px);margin:0 0 2px}
  .rolling-pencil{width:min(72%,170px);height:16px}
  .pencil-tip{left:-12px;border-top-width:8px;border-bottom-width:8px;border-right-width:13px}
  .pencil-tip:after{left:11px;top:-2px;border-top-width:2px;border-bottom-width:2px;border-right-width:4px}
  .pencil-face-label{top:2px;font-size:7px;line-height:10px}
  .game-shell[data-screen="battle"] .reset-button{width:auto;min-height:30px;margin-top:5px}
  .game-shell[data-screen="battle"][data-result="true"] .rematch-button{margin-top:12px}
}

.battle-log[hidden],.battle-log:not(.is-expanded){display:none!important}
.log-panel{min-height:0}
#reel-message{white-space:pre-line}
.faces-open{align-self:flex-end;margin:0 0 7px;min-height:44px;padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--theme-ink,#526b5c);font:inherit;font-size:12px;cursor:pointer}
.faces-open:disabled{opacity:.5}
#faces-dialog{width:min(420px,calc(100% - 24px));max-height:80dvh;overflow:auto;border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--paper);color:var(--ink)}
#faces-dialog::backdrop{background:#19251db3}
#faces-title{font-size:17px;margin:0 0 15px;overflow-wrap:anywhere}
#faces-list{padding-left:28px;margin:0;font-size:13px;line-height:1.65}
#faces-list li{padding:9px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
#faces-close{width:100%;min-height:48px;margin-top:16px;border:1px solid var(--line);border-radius:9px;background:var(--theme-tint-forest,#eef5ed);font:inherit;cursor:pointer}
@media(max-width:600px){#faces-dialog{margin:auto auto max(12px,env(safe-area-inset-bottom));border-radius:18px}.faces-open{min-height:40px}}

/* Spectators reuse the battle panels and the existing flat pencil animation. */
.faces-controls{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
#faces-open{order:1}#spectator-faces-2{order:2}
.spectator-status{margin:0 0 6px;color:var(--green);font-size:12px;font-weight:800}
.online-controls{grid-template-columns:1fr minmax(130px,.9fr) 1fr 1fr auto}
.game-shell[data-viewer-role="spectator"] .evolution-panel{display:none}
.game-shell[data-viewer-role="spectator"] .fighter-info{min-width:0}
.game-shell[data-viewer-role="spectator"] .fighter h2{overflow-wrap:anywhere}
.game-shell[data-viewer-role="spectator"][data-result="true"] .log-panel{display:block;margin-bottom:8px}
@media(max-width:720px){.online-controls{grid-template-columns:1fr 1fr}.online-controls #spectate-room{grid-column:1/-1;grid-row:auto}}
@media(max-width:600px){
  .online-controls #spectate-room{grid-column:1;grid-row:3}
  .online-controls #leave-room{grid-column:2;grid-row:3}
  .game-shell[data-viewer-role="spectator"] .faces-controls{flex-wrap:nowrap}
  .game-shell[data-viewer-role="spectator"] .faces-open{flex:1;min-width:0;padding:7px 5px;font-size:11px}
}

/* CPU/room selection follows RUN setup; scoped to leave the RUN page intact. */
.selection-view{padding:16px;min-width:0}
.selection-view .section-heading h2{font-size:17px}
.selection-view .section-copy{font-size:11px;color:var(--theme-muted,#65746b);line-height:1.65;margin:7px 0 12px}
.selection-view fieldset{border:0;padding:0;margin:14px 0;min-width:0}
.selection-view legend{font-size:12px;font-weight:700;margin-bottom:6px}
.selection-view .pencil-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.selection-view .pencil-card,.selection-view .mark-options button{border:1px solid var(--theme-line,#dce5d9);border-radius:9px;background:var(--theme-raised,#f5f7f0);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;box-shadow:none;transform:none;transition:none}
.selection-view .pencil-card{min-width:0;min-height:130px;justify-content:center;gap:0;padding:12px 6px}
.selection-view .pencil-card::before{content:'';position:absolute;inset:8px auto auto 8px;width:13px;height:13px;border:1px solid var(--theme-line,#8b948d);border-radius:50%;background:var(--theme-paper,#fff);box-sizing:border-box}
.selection-view .pencil-art{flex:none;height:57px;margin:14px 0 10px;pointer-events:none}
.selection-view .element-name{font-size:13px;line-height:1.5}
.selection-view .mark-options>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.selection-view .mark-options button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:48px;padding:8px}
.selection-view .mark-options button::before{content:'';width:13px;height:13px;flex:none;border:1px solid var(--theme-line,#8b948d);border-radius:50%;background:var(--theme-paper,#fff);box-sizing:border-box}
.selection-view .pencil-card[aria-pressed="true"],.selection-view .mark-options button[aria-pressed="true"]{border-color:var(--theme-forest,#2d795d);background:var(--theme-tint-forest,#e6f1e5);outline:none}
.selection-view .pencil-card[aria-pressed="true"]::before,.selection-view .mark-options button[aria-pressed="true"]::before{border-color:var(--theme-forest,#2d795d);background:#2d795d;box-shadow:inset 0 0 0 3px #fff}
.selection-view #confirm-pencil{width:100%;min-height:44px;border:1px solid var(--theme-forest,#2d795d);border-radius:9px;background:#2d795d;color:#fff;font:inherit;font-size:14px;font-weight:700;padding:9px 12px;cursor:pointer}
.selection-view button:disabled{opacity:.45;cursor:not-allowed}
.selection-view button:focus-visible{outline:3px solid #558eaf;outline-offset:2px}
@media(max-width:720px){.selection-view{padding:13px}}

.cpu-session-results{display:none}
/* Local CPU battle only. Shared room/spectator markup and pencil stay intact. */
.game-shell[data-mode="local"] .battle-view{grid-template-columns:minmax(0,1fr);grid-template-areas:"arena" "turn" "battle" "evolution" "bottom";gap:12px;align-items:start}
.game-shell[data-mode="local"] .battle-view>.arena{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:16px;align-items:stretch;direction:ltr}
.game-shell[data-mode="local"] .arena>.player-fighter{grid-column:1;grid-row:1}
.game-shell[data-mode="local"] .arena>.opponent-fighter{grid-column:2;grid-row:1}
.game-shell[data-mode="local"] .arena>.versus,.game-shell[data-mode="local"] .arena .avatar{display:none}
.game-shell[data-mode="local"] .arena>.fighter{display:flex;flex-direction:column;align-items:stretch;text-align:left;min-width:0;width:auto;order:0;gap:0;padding:9px 8px;border:1px solid var(--line);border-radius:9px}
.game-shell[data-mode="local"] .fighter-info{display:flex;flex-direction:column;flex:1;min-width:0}
.game-shell[data-mode="local"] .fighter-title{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.game-shell[data-mode="local"] .fighter-label{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--theme-muted,#65746b)}
.game-shell[data-mode="local"] .fighter h2{font-size:13px;min-height:2.8em;line-height:1.4;margin:0;overflow-wrap:anywhere}
.game-shell[data-mode="local"] .fighter-detail{font-size:11px;line-height:1.5;color:var(--theme-muted,#65746b);margin:4px 0 8px;overflow-wrap:anywhere}
.game-shell[data-mode="local"] .hp-line{font-size:11px;gap:5px;margin:0 0 5px;margin-top:auto}
.game-shell[data-mode="local"] .hp-line strong{font-size:12px;white-space:nowrap}
.game-shell[data-mode="local"] .hp-track{width:100%;height:6px;flex-shrink:0}
.game-shell[data-mode="local"] .turn-banner{min-height:44px;padding:8px 12px;border-radius:9px;font-size:14px}
.game-shell[data-mode="local"] .battle-panel,.game-shell[data-mode="local"] .evolution-panel,.game-shell[data-mode="local"] .log-panel{padding:16px;min-width:0}
.game-shell[data-mode="local"] .reel-box{min-height:0;flex:initial;padding:12px 7px;margin:0 0 9px;border-radius:10px}
.game-shell[data-mode="local"] #reel-message{font-size:12px;line-height:1.6;white-space:pre-line;text-align:center;overflow-wrap:anywhere;max-width:100%}
.game-shell[data-mode="local"] .reel-window span{color:var(--theme-forest,#2d795d)}
.game-shell[data-mode="local"] .battle-panel .roll-button{min-height:44px;padding:9px 12px;border-radius:9px;font-size:14px}
.game-shell[data-mode="local"] .bottom-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.game-shell[data-mode="local"] .log-panel .section-heading .eyebrow{display:none}
.game-shell[data-mode="local"] .log-panel h2{font-size:14px}
.game-shell[data-mode="local"] .battle-log{max-height:170px}
.game-shell[data-mode="local"] .result-panel h2{font-size:26px;color:var(--theme-forest,#2d795d)}
.game-shell[data-mode="local"][data-result="true"] .log-panel{display:block;margin-bottom:12px}
@media(max-width:720px){
  .game-shell[data-mode="local"] .battle-view>.arena{padding:13px}
  .game-shell[data-mode="local"] .battle-panel,.game-shell[data-mode="local"] .log-panel{padding:13px}
}

.game-shell[data-mode="local"][data-result="true"] .cpu-session-results{display:block;position:relative;z-index:1}
.game-shell[data-mode="local"] .cpu-session-record{white-space:pre-line;padding:12px;border:1px solid var(--theme-line,#d9e5d9);border-radius:10px;background:var(--theme-tint-forest,#f0f6ef);color:var(--theme-forest,#376c51);font-size:14px;line-height:1.8}
.game-shell[data-mode="local"] .cpu-result-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.game-shell[data-mode="local"] .cpu-result-actions button{width:100%;min-width:0;min-height:44px;white-space:normal;overflow-wrap:anywhere;font-size:13px}
.game-shell[data-mode="local"][data-result="true"] #result-exit,.game-shell[data-mode="local"][data-result="true"] #reset-button,.game-shell[data-mode="local"][data-result="true"] #rematch-button{display:none}
@media(max-width:720px){.game-shell[data-mode="local"][data-result="true"]{height:auto;min-height:100dvh;overflow:visible}.game-shell[data-mode="local"][data-result="true"] .battle-view{flex:none}}

/* Room battle presentation: explicit online player/spectator scope. */
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .battle-view{grid-template-columns:minmax(0,1fr);grid-template-areas:"arena" "turn" "battle" "evolution" "bottom";gap:12px;align-items:start}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .battle-view>.arena{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:16px;align-items:stretch;direction:ltr}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .arena>.player-fighter{grid-column:1;grid-row:1}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .arena>.opponent-fighter{grid-column:2;grid-row:1}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .arena>.versus,.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .arena .avatar{display:none}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .arena>.fighter{display:flex;flex-direction:column;align-items:stretch;text-align:left;min-width:0;width:auto;order:0;gap:0;padding:9px 8px;border:1px solid var(--line);border-radius:9px}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .fighter-info{display:flex;flex-direction:column;flex:1;min-width:0}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .fighter-title{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .fighter-label{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--theme-muted,#65746b)}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .fighter h2{font-size:13px;min-height:2.8em;line-height:1.4;margin:0;overflow-wrap:anywhere}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .fighter-detail{font-size:11px;line-height:1.5;color:var(--theme-muted,#65746b);margin:4px 0 8px;overflow-wrap:anywhere}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .hp-line{font-size:11px;gap:5px;margin:0 0 5px;margin-top:auto}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .hp-line strong{font-size:12px;white-space:nowrap}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .hp-track{width:100%;height:6px;flex-shrink:0}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .turn-banner{min-height:44px;padding:8px 12px;border-radius:9px;font-size:14px}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .battle-panel,.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .evolution-panel,.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .log-panel{padding:16px;min-width:0}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .reel-box{min-height:0;flex:initial;padding:12px 7px;margin:0 0 9px;border-radius:10px}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) #reel-message{font-size:12px;line-height:1.6;white-space:pre-line;text-align:center;overflow-wrap:anywhere;max-width:100%}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .reel-window span{color:var(--theme-forest,#2d795d)}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .battle-panel .roll-button{min-height:44px;padding:9px 12px;border-radius:9px;font-size:14px}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .bottom-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .log-panel .section-heading .eyebrow{display:none}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .log-panel h2{font-size:14px}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .battle-log{max-height:170px}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .result-panel h2{font-size:26px;color:var(--theme-forest,#2d795d)}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"])[data-result="true"] .log-panel{display:block;margin-bottom:12px}
@media(max-width:720px){
  .game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .battle-view>.arena{padding:13px}
  .game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .battle-panel,.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .log-panel{padding:13px}
}

.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .battle-log .log-entry p{min-width:0;overflow-wrap:anywhere}
.game-shell[data-mode="online"]:is([data-viewer-role="player"],[data-viewer-role="spectator"]) .turn-banner{min-width:0;flex-wrap:wrap}
.game-shell[data-mode="online"][data-viewer-role="spectator"] .arena>.opponent-fighter{grid-column:1;grid-row:1}
.game-shell[data-mode="online"][data-viewer-role="spectator"] .arena>.player-fighter{grid-column:2;grid-row:1}

/* Lobby creation choices; battle and CPU layouts are unchanged. */
.online-controls #create-spectator-room{grid-column:1;grid-row:2;min-width:0;white-space:normal;overflow-wrap:anywhere;min-height:44px}
#spectator-room-info{font-size:12px;margin:0 0 12px;min-width:0}
.room-status{align-items:flex-start;flex-direction:column}
.room-share{width:100%;max-width:360px;min-width:0;padding:12px;border:1px solid var(--theme-line,#d9e5d9);border-radius:10px;background:var(--theme-tint-forest,#f0f6ef)}
.room-share-label{display:block;margin-bottom:7px;font-size:11px;font-weight:700;color:var(--theme-ink,#557360)}
.room-share-controls{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.room-share code,.room-status .room-share code{display:block;min-width:0;padding:0;border:0;background:transparent;font-size:clamp(24px,6vw,30px);font-weight:800;line-height:1.3;letter-spacing:.12em;color:var(--green);white-space:nowrap;user-select:all}
.room-share .room-copy{flex:0 0 auto;min-height:44px;padding:9px 12px;border:1px solid var(--theme-line,#cbdccb);background:var(--theme-paper,#fffefa);font-size:12px;white-space:nowrap}
.room-copy:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.room-copy-feedback{display:block;font-size:11px;line-height:1.6;color:var(--theme-forest,#376c51);overflow-wrap:anywhere}
.room-copy-feedback:not(:empty){margin-top:6px}
.room-members{display:block;white-space:pre-line;font-size:12px;line-height:1.8;color:var(--theme-ink,#557360);margin:0}
.spectator-room-info .room-members{margin-top:8px}
@media(max-width:390px){.room-share-controls{flex-direction:column;align-items:flex-start;gap:8px}.room-share{padding:10px}}
@media(max-width:720px){.online-controls #create-spectator-room{grid-column:1/-1;grid-row:4}}