/* Personal board: the island is the screen; controls occupy only the space they need. */
body.phone-mode{overflow:hidden;overscroll-behavior:none}
.phone-mode #app{height:100dvh;min-height:0}
.phone-mode .phone-game{position:relative;width:100%;max-width:none;height:100dvh;margin:0;padding:0;display:block;overflow:hidden}
.phone-mode .phone-board{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden;box-shadow:none;aspect-ratio:auto}
.phone-mode .phone-board .world-canvas{border-radius:0}
.phone-board .world-canvas{touch-action:none;cursor:grab}
.phone-board[data-camera-dragging] .world-canvas{cursor:grabbing}
@media(max-width:900px),(pointer:coarse){
 .tv-board .world-canvas{touch-action:none;cursor:grab}
 .tv-board[data-camera-dragging] .world-canvas{cursor:grabbing}
 /* The paused card carries this message; leave room for the host's view controls. */
 .host-game .paused{display:none}
}
#board-overview[hidden]{display:none}
.phone-mode .phone-board .board-hint{display:none}
.phone-toolbar{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));pointer-events:none;background:linear-gradient(#c5e3ddc9,transparent)}
.phone-mode .phone-heading{display:flex;min-width:0;gap:8px;padding:6px 10px 6px 6px;background:var(--paper);border:0;border-left:4px solid var(--turn-color);border-radius:16px;box-shadow:0 3px 12px #214c521c}
.phone-mode .phone-heading>div{min-width:0}
.phone-mode .phone-heading p{font-size:10px;line-height:1.4;font-weight:800;color:var(--muted)}
.phone-mode .phone-heading h1{font-size:18px;line-height:1.2;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone-mode .phone-heading .avatar{width:32px;height:36px;background:transparent}
.phone-mode .phone-heading .avatar img{width:44px;height:44px}
.phone-view-actions{display:flex;gap:6px;flex:none;pointer-events:auto}
.phone-view-actions .ghost{min-height:44px;padding:8px 11px;border:1px solid #fff8dfaa;background:var(--paper);color:var(--ink);font-size:12px;box-shadow:0 3px 12px #214c521c;border-radius:14px}
.phone-view-actions [aria-pressed=true]{background:var(--ink);color:var(--paper)}
/* Explicit clipping prevents Chromium from treating offscreen scrolled content as an opaque cover over WebGL. */
.phone-mode .world-card{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));top:auto;width:auto;max-width:580px;margin:0 auto;max-height:58%;overflow:auto;overscroll-behavior:contain;padding:0 14px 14px;border:1px solid #fff8df;border-radius:24px;box-shadow:0 5px 24px #163e4833;scrollbar-width:thin;transform:translateZ(0);clip-path:inset(0 round 24px)}
.phone-mode .world-card .control{min-height:0;gap:10px}
.phone-mode .world-card .scene-companion,.phone-mode .world-card .category-icon,.phone-mode .world-card .control[data-phase=difficulty]>.eyebrow{display:none}
.phone-mode .world-card .control h2{font-size:clamp(19px,5vw,24px);line-height:1.22;text-wrap:pretty}
.phone-mode .world-card .control>p{line-height:1.4}
.phone-mode .world-card .control .small{font-size:12px}
.phone-mode .card-toggle{min-height:44px;margin:0 auto;padding:10px 20px;font-size:11px;letter-spacing:.02em;color:var(--muted)}
.phone-mode .world-card.is-hidden{padding:0 14px;border-radius:18px;width:max-content;max-width:calc(100% - 24px)}
.phone-mode .world-card .answers{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.phone-mode .world-card .answer{min-height:54px;padding:9px 8px;font-size:14px;border-radius:14px;line-height:1.25}
.phone-mode .world-card .answer-letter{width:23px;height:25px;font-size:11px;flex-shrink:0}
.phone-mode .world-card .control[data-phase=difficulty]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
.phone-mode .world-card .control[data-phase=difficulty]>:not(.level){grid-column:1/-1;text-align:center}
.phone-mode .world-card .level{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 4px;min-height:68px;font-size:16px}
.phone-mode .world-card .level span{font-size:10px;white-space:normal}
.phone-mode .world-card .control>.ghost{min-height:44px;padding:8px}
.phone-mode .world-card .primary,.phone-mode .world-card .secondary{min-height:48px}
.phone-mode .world-card.is-waiting{padding:12px 14px}
.phone-mode .world-card.is-waiting .control{opacity:1;margin-top:14px}
.phone-mode .watch-status{gap:8px}
.phone-mode .watch-status p{font-size:13px}
.phone-mode .watch-status .avatar{width:30px;height:34px}
.phone-mode .watch-status .avatar img{width:40px;height:40px}
.phone-mode .watch-toggle{font-size:12px;min-height:44px;padding:8px 10px;flex-shrink:0}
.phone-mode .phone-board.is-moving:not(.is-telling) .world-card,.phone-mode .world-card.is-held,.phone-mode .world-card.event-told,.phone-mode .world-card:has(>.control[data-phase=turn-end]:not([data-event])){opacity:0;visibility:hidden;pointer-events:none}
.phone-mode .world-team-label{font-size:11px;line-height:17px;height:21px;max-width:120px}


#phone-menu{width:min(440px,calc(100% - 28px));max-height:calc(100dvh - 48px);margin:auto;padding:22px;color:var(--ink);background:var(--paper);border:2px solid var(--panel-edge);border-radius:24px;box-shadow:0 20px 80px #163e4855;overflow:auto}
#phone-menu::backdrop{background:#163e4877}
.phone-menu-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.phone-menu-heading h2{font-size:28px}
.phone-menu-heading .eyebrow{font-size:11px;color:var(--muted)}
.phone-menu-heading button{min-height:44px}
.phone-mode #phone-menu .teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}
.phone-mode #phone-menu .team{min-width:0;padding:10px;box-shadow:none}
.phone-menu-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.phone-menu-actions button{min-height:48px;font-size:13px;padding:10px}
.phone-menu-actions #leave-game{grid-column:1/-1}
.phone-mode button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:360px){.phone-mode .phone-heading .avatar{display:none}.phone-mode .phone-heading h1{font-size:16px}.phone-mode .world-card{padding-left:10px;padding-right:10px}.phone-view-actions .ghost{padding:8px 9px}}
@media(orientation:landscape) and (min-width:600px){
 .phone-mode .world-card{left:auto;right:max(12px,env(safe-area-inset-right));top:calc(70px + env(safe-area-inset-top));bottom:auto;width:42%;max-width:440px;max-height:calc(100% - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0 12px 12px;border-radius:20px}
 .phone-mode .world-card.is-waiting{padding:10px 12px}
 .phone-mode .world-card.is-hidden{top:auto;bottom:max(12px,env(safe-area-inset-bottom));width:auto;padding:0 14px}
 .phone-mode .world-card .control{gap:8px}
 .phone-mode .world-card .control h2{font-size:19px}
 .phone-mode .world-card .answer{min-height:48px;font-size:13px;padding:7px}


}