/* The room's lobby on the selector's lines (select.css): your character on a stage in its camp's colours, the roster's cards in small, faces in the
   list. room.js builds the lobby and lobby.js draws into it; without lobby.js the stage stays empty and the rest works as before. */
#room .room-pick{margin:10px 0 0}
#room .room-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 16px}
#room .side-choice select:disabled{opacity:1;color:#c5dcd8;border-color:#507479;cursor:default}
#room .side-choice select:focus-visible{outline:3px solid #f4faf1;outline-offset:2px}
#room-stage{--lobby-camp:#cdebea;position:relative;display:flex;min-height:150px;margin:0 0 8px;overflow:hidden;text-align:left;border:1px solid color-mix(in srgb,var(--lobby-camp) 36%,transparent);border-radius:12px;background:radial-gradient(ellipse at 22% 64%,color-mix(in srgb,var(--lobby-camp) 22%,transparent),transparent 66%),linear-gradient(115deg,#071b27e6,#0c2b33cc 60%,#071b27e6);transition:border-color .2s}
#room-faction{position:absolute;left:2%;top:50%;transform:translateY(-52%);font-size:150px;font-weight:900;line-height:1;color:color-mix(in srgb,var(--lobby-camp) 11%,transparent);pointer-events:none;user-select:none}
/* (The stage's size never depends on the canvas: lobby.js sizes the canvas to its box, which would otherwise feed back into the layout.) */
#room-portrait{position:absolute;left:0;top:0;display:block;width:40%;height:100%}
.room-who{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;min-width:0;margin-left:40%;padding:12px 12px 12px 0}
#room-name{font-size:32px;font-weight:900;line-height:1.12;letter-spacing:-.02em;color:var(--paper)}
#room-role{font-size:12px;line-height:1.45;color:#c5dcd8}
#room-item{margin-top:5px;font-size:12px;font-weight:700;line-height:1.45;color:var(--lobby-camp)}
.room-move{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;font-size:12px;line-height:1.45}.room-move>span{font-size:11px;color:#bfd2c6}#room-musou{font-weight:800;color:var(--gold)}
/* The fifteen, as the selector's cards: camp-tinted, name strip below, gold with a diamond for yours; a mark in a side's colour (and shape) on those the
   others play. */
/* The room's picker is the select screen's hexagon too (the owner: "the hexagon also should be in" a room's page; select.js selectHex builds it, and
   select.css gives every cell its shape): sized to the lobby's width. A character's button keeps its own look inside the shape: the button is the
   rim, its ::after the face, and its ::before the dot of whoever else in the room plays that character, in their side's colour. */
#room-heroes{display:block;margin:0;container-type:inline-size}
#room-heroes .hero-hex{--hexw:min(100cqw,300px)}
#room-heroes .room-hero{background:#507479;color:#edf4e5;touch-action:manipulation;transition:background-color .15s,opacity .15s,filter .15s}
#room-heroes .room-hero::after{content:'';position:absolute;inset:2.5px;z-index:-1;clip-path:var(--hex);background:color-mix(in srgb,var(--camp) 18%,#112b35);transition:background-color .15s}
#room-heroes .room-hero canvas{position:absolute;top:10%;left:0;width:100%;height:56%;object-fit:cover;object-position:50% 12%;pointer-events:none}
#room-heroes .room-hero>span{position:absolute;top:64%;left:15%;right:15%;padding:1px 0;border-radius:4px;font-size:max(10px,calc(var(--hexw) * .039));line-height:1.35;text-align:center;white-space:nowrap;background:#071b27e8}
#room-heroes .room-hero[aria-pressed="true"]{background:var(--gold)}
#room-heroes .room-hero[aria-pressed="true"]::after{background:color-mix(in srgb,var(--camp) 32%,#183b3e)}
#room-heroes .room-hero[aria-pressed="true"]>span{color:#10232a;background:var(--gold)}
#room-heroes .room-hero[aria-pressed="true"] canvas{animation:lobby-hop .34s cubic-bezier(.16,1,.3,1)}
#room-heroes .room-hero[data-taken]::before{content:'';position:absolute;top:22%;right:15%;z-index:1;width:9px;height:9px;border-radius:50%;background:#78eee0;box-shadow:0 0 0 1.5px #07171f}
#room-heroes .room-hero[data-taken="1"]::before{border-radius:0;background:#ffab93;transform:rotate(45deg) scale(.86)}
#room-heroes .room-hero[data-taken="01"]::before{box-shadow:0 0 0 1.5px #07171f,0 0 0 3.5px #ffab93}
#room-heroes .room-hero:focus-visible{outline:0;background:#fff}
#room-heroes .room-hero.dim{opacity:.3;filter:saturate(.25)}
@media(hover:hover){#room-heroes .room-hero:hover{background:#dbeee0}#room-heroes .room-hero:hover::after{background:color-mix(in srgb,var(--camp) 28%,#183b3e)}#room-heroes .room-hero[aria-pressed="true"]:hover{background:var(--gold)}}
@keyframes lobby-ring{from{box-shadow:0 0 0 0 #ffd977b3}to{box-shadow:0 0 0 9px #ffd97700}}
@keyframes lobby-hop{0%{transform:translateY(4px) scale(.92)}60%{transform:translateY(-2px) scale(1.04)}100%{transform:none}}
/* The list: a face in a side's frame (round on one side, square on the other) where the dot was; yours lit. */
#room-seats li{min-height:34px}
#room-seats li.face::before{display:none}
#room-seats li>canvas{flex:none;width:28px;height:28px;box-sizing:border-box;border:2px solid currentColor;border-radius:50%;background:color-mix(in srgb,currentColor 14%,#0b222b)}
#room-seats .t1 li>canvas{border-radius:5px}
#room-seats li.me{border-radius:8px;background:#ffe3971c}
/* START and SHARE never leave the screen (the owner: on a phone they stay above the fold): one bar that sticks to the bottom of the lobby while
   the characters and the list scroll under it. Without START (a guest, or a match on) SHARE takes the bar. */
#room .room-bar{position:sticky;bottom:0;z-index:3;display:flex;gap:8px;align-items:stretch;margin:12px 0 0;padding:12px 0 max(10px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#071b2600,#071b26ee 18%,#071b26)}
#room .room-bar #room-go{flex:1.7;min-width:0;margin:0;min-height:56px;font-size:17px;white-space:nowrap}
#room .room-bar #room-share{flex:1;min-width:0;margin:0;min-height:56px;padding:6px 8px;font-size:13px;font-weight:800;line-height:1.3;color:#ffe397;border-color:#ffe39788}
#room .room-bar #room-go.hidden+#room-share{flex:1;font-size:15px}
@media(max-width:374px){#room .room-bar #room-go{font-size:15px}#room .room-bar #room-share{font-size:12px}}
@media(orientation:landscape) and (max-height:550px){#room .room-bar{margin-top:8px;padding-top:8px}#room .room-bar #room-go,#room .room-bar #room-share{min-height:48px}}
@media(max-width:374px){#room-name{font-size:28px}}
@media(orientation:portrait) and (max-height:650px){#room-stage{min-height:118px}#room-faction{font-size:118px}#room-name{font-size:26px}.room-who{padding:8px 10px 8px 0}}
@media(orientation:landscape) and (max-height:550px){
 #room .room-pick{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px;align-items:stretch}
 #room-stage{margin:0;min-height:118px}
 #room-portrait{width:44%}#room-faction{font-size:112px}
 .room-who{gap:2px;margin-left:44%;padding:8px 8px 8px 0}#room-name{font-size:22px}#room-role,#room-item,.room-move{font-size:10px}.room-move>span{font-size:9px}#room-item{margin-top:3px}
}
@media(prefers-reduced-motion:reduce){#room *,#room *::before,#room *::after{animation:none!important;transition:none!important}}

/* v50: one optional field under your stage; player text wraps inside each seat. */
#room .room-self{min-width:0}
#room .room-nickname{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:#c5dcd8;font:700 12px/1.4 system-ui}
#room-nickname{box-sizing:border-box;display:block;flex:1;min-width:0;width:0;height:44px;min-height:44px;margin:0;padding:0 10px;border:1px solid #507479;border-radius:7px;background:#071b26;color:#edf4e5;font:400 16px/1.4 system-ui;touch-action:manipulation}
#room-nickname::placeholder{color:#a8c0c0;opacity:1}
#room-nickname:focus-visible{outline:3px solid #f4faf1;outline-offset:2px}
#room-seats .room-seat-name{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.4}
@media(orientation:landscape) and (max-height:550px){#room .room-nickname{margin:6px 0 0}}

/* v56 (the owner: "after entering online ... this page not mobile friendly"): on a phone the lobby was a long page, your character a large card
   on top and the hexagon mostly under the START / SHARE bar. Upright: the heading on one line, who is in the room right under the room's state,
   then your character as a short row and the hexagon with the party buttons beside it. Held sideways: two columns, the room on the left and the characters on the right (your
   character is in the list and gold in the hexagon), the party buttons beside the hexagon, so that a phone shows it all at once. */
@media (orientation:portrait) and (max-width:599px){
 #room .menu-panel{display:flex;flex-direction:column}
 #room .menu-panel>*{flex:none}
 #room .room-pick,#room .room-sides,#room .room-bar,#room .result-row,#room-link,#room-join,#room .fine{order:1}
 #room .eyebrow{display:none}
 #room h2{font-size:19px;margin:2px 0 6px}
 #room-status{margin:8px 0}
 #room-stage{min-height:92px}
 #room-faction{font-size:92px}
 #room-portrait{width:30%}
 .room-who{margin-left:30%;padding:8px 10px 8px 0}
 #room-name{font-size:24px}
 #room-seats ul{min-height:64px}
 #room-heroes .hero-pick{flex-direction:row;justify-content:center;gap:8px}
 #room-heroes .hero-parties{flex-direction:column}
 #room-heroes .hero-hex{--hexw:min(calc(100cqw - 56px),300px)}
}
@media (orientation:landscape) and (max-height:550px){
 #room .menu-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;align-content:start;width:min(100%,760px)}
 #room .menu-panel>*{grid-column:1;min-width:0}
 #room .menu-panel>h2,#room .room-bar,#room .result-row,#room-join,#room .fine{grid-column:1/-1}
 #room .eyebrow{display:none}
 #room h2{font-size:18px;margin:0 0 4px}
 #room-status{margin:4px 0}
 #room .room-pick{grid-column:2;grid-row:2/span 5;display:block;margin:0}
 #room-stage{display:none}
 #room .room-nickname{margin:0 0 6px}
 #room .room-sides{margin:6px 0 4px}
 #room-heroes .hero-pick{flex-direction:row;justify-content:center;gap:8px}
 #room-heroes .hero-parties{flex-direction:column}
 #room-heroes .hero-hex{--hexw:min(calc(100cqw - 56px),240px)}
}