/* =====================================================================
   Lobby ("في الميناء") on both screens, in the launch-console look.
   TV: a join station, four berths that light up as captains dock, and a
   status screen that says what the room is waiting for.
   Phone: your identity card, the crew, and the host's start button docked
   at the bottom of the screen.
   ===================================================================== */
.tape{display:inline-block;width:max-content;max-width:100%;background:var(--tape);color:var(--tape-ink);font-family:var(--label);font-weight:800;letter-spacing:1px;line-height:1.7;padding:0 .7em;border-radius:2px;text-shadow:0 1px 0 #777,0 -1px 0 #000;box-shadow:0 2px 0 #0007,inset 0 1px 0 #ffffff14}
.lamp-go{--lamp:#7dff8a}

/* ---------- Shared screen ---------- */
.muster{--screw:calc(var(--u)*.9);display:grid;grid-template-columns:calc(var(--u)*30) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:calc(var(--u)*1.2);height:calc(100dvh - var(--u)*7.7);direction:rtl}
.join-station,.berth,.mode-module{border-radius:calc(var(--u)*.8);background:
  radial-gradient(circle at var(--screw) var(--screw),#20241e 0 calc(var(--u)*.22),#8b9484 calc(var(--u)*.22) calc(var(--u)*.3),transparent calc(var(--u)*.3)),
  radial-gradient(circle at calc(100% - var(--screw)) var(--screw),#20241e 0 calc(var(--u)*.22),#8b9484 calc(var(--u)*.22) calc(var(--u)*.3),transparent calc(var(--u)*.3)),
  linear-gradient(180deg,var(--bake-hi),var(--bake) 55%,var(--bake-lo));
  box-shadow:0 0 0 calc(var(--u)*.12) var(--black),0 calc(var(--u)*.35) 0 calc(var(--u)*.12) var(--black),inset 0 1px 0 #8b9484}
.harbour-title,.muster-count,.berth-dock,.status-screen,.join-link,.mode-detail{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,var(--crt-hi),var(--crt) 80%);box-shadow:inset 0 0 0 calc(var(--u)*.16) var(--seam),inset 0 0 calc(var(--u)*1) #000,0 calc(var(--u)*.12) 0 #8b9484;border-radius:calc(var(--u)*.6)}
.harbour-title::after,.status-screen::after,.berth-dock::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.45));animation:crt-flicker 7s infinite}

/* Join station: everything a phone needs, readable from the couch */
.join-station{grid-row:1/-1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:calc(var(--u)*.6);padding:calc(var(--u)*1.6) calc(var(--u)*1.6) calc(var(--u)*1.2);text-align:center}
.join-station>.tape{font-size:calc(var(--u)*1.3)}
.join-step{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*.6);font-size:calc(var(--u)*1.1);font-weight:700;color:var(--ink);line-height:1.4}
.join-step b,.rule-tips b{flex:none;width:calc(var(--u)*1.8);height:calc(var(--u)*1.8);display:grid;place-items:center;border-radius:3px;background:#0c0902;color:var(--led);font:800 calc(var(--u)*1.45)/1 var(--dot);box-shadow:inset 0 0 0 calc(var(--u)*.1) var(--seam);text-shadow:0 0 calc(var(--u)*.4) #ff4a2aaa}
.join-or{font-size:calc(var(--u)*.95);font-weight:500;color:var(--muted)}
.join-qr{line-height:0;background:#fff;padding:calc(var(--u)*.7);border-radius:calc(var(--u)*1);box-shadow:0 0 0 calc(var(--u)*.3) var(--black),0 0 0 calc(var(--u)*.6) #3a4037,0 calc(var(--u)*.4) 0 calc(var(--u)*.6) var(--black)}
.join-qr img{display:block;width:calc(var(--u)*19);height:calc(var(--u)*19);image-rendering:pixelated}
.join-link{max-width:100%;padding:calc(var(--u)*.15) calc(var(--u)*1);font:600 calc(var(--u)*1.55)/1.4 var(--dot);letter-spacing:.5px;color:var(--amber);text-decoration:none;text-shadow:0 0 calc(var(--u)*.4) #ffb00088;overflow-wrap:anywhere;border-radius:calc(var(--u)*.4)}
.join-code{font:800 calc(var(--u)*6.4)/1 var(--dot);letter-spacing:calc(var(--u)*.8);padding:calc(var(--u)*.1) calc(var(--u)*.5) calc(var(--u)*.2) calc(var(--u)*1.3);color:var(--led);text-shadow:0 0 calc(var(--u)*.8) #ff4a2aaa;background:#0c0902;border-radius:calc(var(--u)*.5);box-shadow:inset 0 0 0 calc(var(--u)*.18) var(--seam),inset 0 0 calc(var(--u)*1) #000,0 calc(var(--u)*.12) 0 #8b9484}
.join-note{font-size:calc(var(--u)*.8);color:var(--muted);line-height:1.5}
.join-note .text-button{font-size:inherit;min-height:0;padding:0;color:var(--amber)}

/* Harbour: title, head count and the four berths */
.harbour{min-width:0;min-height:0;display:flex;flex-direction:column;gap:calc(var(--u)*1.1)}
.harbour-head{flex:none;display:flex;align-items:stretch;gap:calc(var(--u)*1.1);height:calc(var(--u)*5.4)}
.harbour-title{flex:1;min-width:0;display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:0 calc(var(--u)*1.4)}
.harbour-title .tape{flex:none;font-size:calc(var(--u)*.95)}
.harbour-title h1{flex:none;font:800 calc(var(--u)*3.1)/1.1 var(--dot);color:var(--amber);text-shadow:0 0 calc(var(--u)*.6) #ffb00099;white-space:nowrap}
.harbour-title h1 em{font-style:normal;color:var(--led);text-shadow:0 0 calc(var(--u)*.6) #ff4a2a99}
.harbour-title .seat-queue{min-width:0;margin:0 auto 0 0;font:600 calc(var(--u)*1.05)/1.3 var(--dot);color:var(--amber-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.muster-count{flex:none;width:calc(var(--u)*11.5);display:flex;align-items:baseline;justify-content:center;gap:calc(var(--u)*.2);direction:ltr;padding-top:calc(var(--u)*.5);background:#0c0902}
.muster-count b{font:800 calc(var(--u)*4)/1 var(--dot);color:var(--led);text-shadow:0 0 calc(var(--u)*.6) #ff4a2aaa}
.muster-count span{font:800 calc(var(--u)*2.4)/1 var(--dot);color:#a03a22}
.muster-count small{margin-left:calc(var(--u)*.7);font:700 calc(var(--u)*.85)/1 var(--label);color:var(--amber-dim)}
.berths{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:calc(var(--u)*1.1)}

/* The shared screen explains who starts and where; it is not a start button. */
.display-start-guide{flex:none;display:flex;align-items:center;gap:calc(var(--u)*1.5);padding:calc(var(--u)*1.1) calc(var(--u)*1.6);border:calc(var(--u)*.2) solid #7dff8a;border-radius:calc(var(--u)*.7);background:radial-gradient(ellipse at 100% 0%,#7dff8a20,transparent 70%),var(--crt);box-shadow:0 calc(var(--u)*.3) 0 var(--black);color:#b8ffb0}
.display-start-guide>div{min-width:0}
.start-phone{flex:none;width:calc(var(--u)*3.7);height:calc(var(--u)*5.2)}
.start-guide-label{font:700 calc(var(--u)*1.15)/1.5 var(--label);color:var(--ink);overflow-wrap:anywhere}
.start-guide-label b{color:var(--amber-hi)}
.display-start-guide h2{margin:calc(var(--u)*.25) 0;font:800 calc(var(--u)*3)/1.2 var(--dot);overflow-wrap:anywhere}
.start-guide-detail{font:500 calc(var(--u)*1.25)/1.6 var(--label);color:var(--ink)}
.is-ready .berth{gap:calc(var(--u)*.6) calc(var(--u)*1);padding:calc(var(--u)*.8) calc(var(--u)*1.2)}
.is-ready .berth .avatar{width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);font-size:calc(var(--u)*2.7)}
.is-ready .berth-id{gap:calc(var(--u)*.3)}
.is-ready .berth-id h2{font-size:calc(var(--u)*1.8)}
.is-ready .berth-dock{height:calc(var(--u)*3)}
.muster.is-ready .berth .fleet-roster{--deck:calc(var(--u)*.95)}

.berth{position:relative;min-width:0;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;gap:calc(var(--u)*1) calc(var(--u)*1.2);padding:calc(var(--u)*1.5) calc(var(--u)*1.5) calc(var(--u)*1.2);overflow:hidden;isolation:isolate}
.berth::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--captain-color) 30%,transparent),transparent 62%);box-shadow:inset calc(var(--u)*-.45) 0 0 var(--captain-color)}
.berth-no{position:absolute;top:calc(var(--u)*.55);left:calc(var(--u)*2);padding:0 calc(var(--u)*.5);border-radius:3px;background:#0c0902;color:var(--led);font:800 calc(var(--u)*1.2)/1.3 var(--dot);box-shadow:inset 0 0 0 calc(var(--u)*.08) var(--seam)}
.berth .avatar{width:calc(var(--u)*6);height:calc(var(--u)*6);font-size:calc(var(--u)*3.6);border-radius:50%;background:radial-gradient(circle,#2f342c,#1d201b);border:0;box-shadow:0 0 0 calc(var(--u)*.18) var(--black),0 0 0 calc(var(--u)*.45) var(--captain-color),0 calc(var(--u)*.35) 0 calc(var(--u)*.45) var(--black)}
.berth .avatar-bezel .lamp{position:absolute;bottom:calc(var(--u)*-.2);left:calc(var(--u)*-.2);width:calc(var(--u)*1.2);height:calc(var(--u)*1.2)}
.berth-id{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*.5)}
.berth-id h2{max-width:100%;padding:0 calc(var(--u)*.8);border-radius:3px;background:var(--tape);color:var(--tape-ink);font:800 calc(var(--u)*2.1)/1.5 var(--label);letter-spacing:1px;text-shadow:0 1px 0 #777,0 -1px 0 #000;box-shadow:0 calc(var(--u)*.1) 0 #0007;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.berth-role{padding:0 calc(var(--u)*.6);border-radius:calc(var(--u)*.3);background:var(--crt);color:var(--amber);font:600 calc(var(--u)*1.2)/1.45 var(--dot);box-shadow:inset 0 0 0 calc(var(--u)*.1) var(--seam)}
.berth-role.is-host{background:linear-gradient(180deg,#ffd166,var(--amber));color:var(--crt);font:800 calc(var(--u)*.95)/1.7 var(--label);box-shadow:0 calc(var(--u)*.1) 0 #0007}
.berth-dock{grid-column:1/-1;height:calc(var(--u)*4.6);display:flex;align-items:flex-end;padding:calc(var(--u)*.5) calc(var(--u)*1.1) calc(var(--u)*1.05)}
.berth-dock::before{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*1.05);background:linear-gradient(color-mix(in srgb,var(--captain-color) 75%,transparent),color-mix(in srgb,var(--captain-color) 75%,transparent)) 0 0/100% calc(var(--u)*.1) no-repeat,repeating-linear-gradient(90deg,color-mix(in srgb,var(--captain-color) 30%,transparent) 0 calc(var(--u)*.9),transparent calc(var(--u)*.9) calc(var(--u)*1.4)) 0 calc(var(--u)*.45)/100% calc(var(--u)*.12) repeat-x;animation:dock-water 2.4s linear infinite}
.muster .berth .fleet-roster{--deck:calc(var(--u)*1.22);flex-direction:row;align-items:flex-end;gap:calc(var(--u)*.55)}
.muster .berth .toy-ship i{background:var(--captain-color);box-shadow:0 0 calc(var(--u)*.4) color-mix(in srgb,var(--captain-color) 70%,transparent)}
.muster .berth .toy-ship::before{background:color-mix(in srgb,var(--captain-color) 55%,#fff)}
.muster .berth .toy-ship::after{background:color-mix(in srgb,var(--captain-color) 45%,#000)}
.dock-fleet.anim-once .toy-ship{animation:dock-in .8s cubic-bezier(.2,.9,.3,1) both}
.dock-fleet.anim-once .toy-ship:nth-child(2){animation-delay:.09s}
.dock-fleet.anim-once .toy-ship:nth-child(3){animation-delay:.18s}
.dock-fleet.anim-once .toy-ship:nth-child(4){animation-delay:.27s}
.dock-fleet.anim-once .toy-ship:nth-child(5){animation-delay:.36s}
.dock-count{position:absolute;top:calc(var(--u)*.45);left:calc(var(--u)*.9);font:600 calc(var(--u)*1.15)/1 var(--dot);color:var(--amber-dim)}
.berth-power{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--captain-color) 65%,#fff),transparent 70%)}
.berth-power.anim-once{animation:berth-power .7s ease-out}

.berth-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*.6);padding:calc(var(--u)*1);background:#2f342c;box-shadow:inset 0 0 0 calc(var(--u)*.12) #22261f,inset 0 0 calc(var(--u)*1.4) #0008;color:#8f8a76;text-align:center}
.berth-empty::before{inset:calc(var(--u)*.8);z-index:0;background:none;border:calc(var(--u)*.12) dashed #555c51;border-radius:calc(var(--u)*.5);box-shadow:none}
.berth-empty .berth-no{background:#22261f;color:#8f8a76;box-shadow:none;top:calc(var(--u)*1.3);left:calc(var(--u)*1.4)}
.empty-ring{width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);display:grid;place-items:center;border-radius:50%;border:calc(var(--u)*.14) dashed #555c51;color:#6f7368;font:calc(var(--u)*2.2)/1 Arial,sans-serif}
.berth-empty strong{display:flex;align-items:center;gap:calc(var(--u)*.6);font:600 calc(var(--u)*1.5)/1.2 var(--dot)}
.berth-empty .lamp{width:calc(var(--u)*.8);height:calc(var(--u)*.8)}
.berth-empty small{font-size:calc(var(--u)*.85);color:#a8a28c}
.berth-empty.is-next{color:var(--amber)}
.berth-empty.is-next::before{border-color:var(--amber-dim);animation:berth-call 2.4s ease-in-out infinite}
.berth-empty.is-next .empty-ring{border-color:var(--amber-dim);color:var(--amber)}

/* Console strip: what the room is waiting for, the rules, the game type */
.lobby-console{grid-column:2;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--u)*20.5);gap:calc(var(--u)*1.1);height:calc(var(--u)*9)}
.status-screen{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*.7);padding:calc(var(--u)*.6) calc(var(--u)*1.5)}
.status-line{min-width:0;display:flex;align-items:baseline;gap:calc(var(--u)*.9);font:800 calc(var(--u)*2.7)/1.15 var(--dot);color:var(--amber);text-shadow:0 0 calc(var(--u)*.5) #ffb00099;white-space:nowrap}
.status-line .lamp{align-self:center;width:calc(var(--u)*1.2);height:calc(var(--u)*1.2)}
.status-line small{min-width:0;font:600 calc(var(--u)*1.5)/1.2 var(--dot);color:var(--amber-dim);text-shadow:none;overflow:hidden;text-overflow:ellipsis}
.is-ready .status-line{color:#b8ffb0;text-shadow:0 0 calc(var(--u)*.6) #7dff8a99}
.is-ready .status-line small{color:var(--amber)}
.is-ready .status-screen{animation:ready-screen 2s ease-in-out infinite}
.rule-row{display:flex;align-items:center;gap:calc(var(--u)*.9)}
.rule-row .tape{flex:none;font-size:calc(var(--u)*.8)}
.rule-tips{position:relative;flex:1;min-width:0;height:calc(var(--u)*2);margin:0;padding:0;list-style:none}
.rule-tips li{--i:0;position:absolute;inset:0;display:flex;align-items:center;gap:calc(var(--u)*.6);font:600 calc(var(--u)*1.15)/1.3 var(--label);color:var(--ink);white-space:nowrap;opacity:0;animation:tip-cycle 30s linear infinite;animation-delay:calc(var(--tip-shift,0s) + var(--i)*6s)}
.rule-tips li:first-child{opacity:1}
.rule-tips li:nth-child(2){--i:1}.rule-tips li:nth-child(3){--i:2}.rule-tips li:nth-child(4){--i:3}.rule-tips li:nth-child(5){--i:4}
.rule-tips b{width:calc(var(--u)*1.5);height:calc(var(--u)*1.5);font-size:calc(var(--u)*1.2)}
.mode-module{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*.55);padding:calc(var(--u)*.8) calc(var(--u)*1.2)}
.mode-module .tape{align-self:center;font-size:calc(var(--u)*.8)}
.mode-lamps{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*.6)}
.mode-lamp{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*.5);padding:calc(var(--u)*.2) calc(var(--u)*.4);border-radius:calc(var(--u)*.4);background:#2a2e28;box-shadow:0 0 0 calc(var(--u)*.1) var(--black),inset 0 1px 0 #555c51;font:700 calc(var(--u)*1)/1.6 var(--label);color:#8f8a76;white-space:nowrap}
.mode-lamp .lamp{width:calc(var(--u)*.7);height:calc(var(--u)*.7)}
.mode-lamp.is-on{color:var(--amber-hi);background:radial-gradient(circle at 50% 40%,#5a4210,#2a2e28 80%);box-shadow:0 0 0 calc(var(--u)*.1) var(--black),0 0 calc(var(--u)*.9) #ffb00044}
.mode-detail{padding:0 calc(var(--u)*.6);font:700 calc(var(--u)*1.05)/1.9 var(--label);color:var(--amber);text-shadow:0 0 calc(var(--u)*.4) #ffb00077;text-align:center;border-radius:calc(var(--u)*.4);white-space:nowrap}

@keyframes dock-in{from{opacity:0;transform:translateX(-160%)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes dock-water{to{background-position:0 0,calc(var(--u)*1.4) calc(var(--u)*.45)}}
@keyframes berth-power{0%{opacity:.9}100%{opacity:0}}
@keyframes berth-call{50%{border-color:var(--amber);box-shadow:inset 0 0 calc(var(--u)*1.6) #ffb00026}}
@keyframes ready-screen{50%{box-shadow:inset 0 0 0 calc(var(--u)*.16) var(--seam),inset 0 0 calc(var(--u)*1) #000,0 calc(var(--u)*.12) 0 #8b9484,0 0 calc(var(--u)*1.6) #7dff8a55}}
@keyframes tip-cycle{0%{opacity:0;transform:translateY(45%)}2%,18%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-45%)}}

/* A tall or narrow window: stack everything and let the page scroll */
@media (max-aspect-ratio:1/1){
  .muster{--u:min(2.2vw,1.8vh);grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto}
  .join-station{grid-row:auto;gap:calc(var(--u)*1)}
  .lobby-console{grid-column:auto;grid-template-columns:minmax(0,1fr);height:auto}
  .berth{min-height:calc(var(--u)*14)}
  .muster .berth .fleet-roster{--deck:calc(var(--u)*.9);gap:calc(var(--u)*.4)}
  .status-line{flex-wrap:wrap;white-space:normal}
  .status-screen,.mode-module{padding-block:calc(var(--u)*1)}
}

/* ---------- Phone ---------- */
.phone-view .phone-lobby{padding-bottom:150px}
.phone-view .phone-lobby .console-label{margin:16px 0 9px}
.phone-view .phone-lobby .console-label b{order:3;font:600 14px/1 var(--dot);color:var(--amber)}
.lobby-id{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px 14px 14px;border-radius:12px;overflow:hidden;isolation:isolate;background:
  radial-gradient(circle at 9px 9px,#22261f 0 2.5px,#8b9484 2.5px 3.5px,transparent 3.5px),
  radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--captain-color) 32%,transparent),transparent 65%),
  linear-gradient(180deg,var(--bake-hi),var(--bake));
  box-shadow:0 0 0 2px var(--black),0 4px 0 2px var(--black),inset 0 1px 0 #8b9484,inset -6px 0 0 var(--captain-color)}
.phone-view .lobby-id .avatar{width:58px;height:58px;font-size:33px;border-radius:50%;box-shadow:0 0 0 2px var(--black),0 0 0 5px var(--captain-color),0 3px 0 5px var(--black)}
.id-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.phone-view .id-text .overline{margin:0;font-size:10px;display:inline-block;background:var(--tape);color:var(--tape-ink);font-weight:800;letter-spacing:1px;padding:0 8px;border-radius:2px;text-shadow:0 1px 0 #777}
.phone-view .id-text .overline::before{display:none}
.id-text h1{max-width:100%;font-size:23px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.id-text small{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);line-height:1.4}
.id-text small i{width:10px;height:10px;border-radius:2px;background:var(--captain-color);box-shadow:0 0 0 2px var(--black),0 0 8px var(--captain-color)}
.id-room{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px}
.id-room small{font-size:10px;font-weight:700;color:var(--muted);line-height:1}
.phone-view .id-room .small-room-code{margin:0;letter-spacing:2px}

.crew{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.crew-seat{position:relative;min-width:0;min-height:64px;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:linear-gradient(180deg,var(--bake-hi),var(--bake));box-shadow:0 0 0 2px var(--black),0 3px 0 2px var(--black),inset 0 1px 0 #8b9484,inset -4px 0 0 var(--captain-color)}
.crew-seat.is-filled{animation:seat-pop .4s cubic-bezier(.2,1.5,.4,1)}
.crew-seat.is-me{box-shadow:0 0 0 2px var(--black),0 0 0 4px var(--captain-color),0 3px 0 4px var(--black),inset 0 1px 0 #8b9484}
.phone-view .crew-seat .avatar{width:38px;height:38px;font-size:22px;border-radius:50%;box-shadow:0 0 0 2px var(--black),0 0 0 4px var(--captain-color)}
.crew-seat .player-name strong{font-size:14px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.crew-seat .player-name small{font:600 12px/1.3 var(--dot);color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crew-seat .remove-player{position:absolute;top:6px;left:6px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#3a4037,#2a2e28);color:var(--ink);font:16px/1 Arial,sans-serif;box-shadow:0 0 0 2px var(--black),0 2px 0 2px var(--black)}
.crew-seat .remove-player::after{content:'';position:absolute;inset:-9px}
.crew-seat:has(.remove-player) .player-name{padding-inline-end:16px}
.crew-seat.is-empty{justify-content:center;gap:8px;background:#2f342c;box-shadow:inset 0 0 0 2px #22261f,inset 0 0 12px #0007;color:#a8a28c;font-size:12px}
.crew-seat.is-empty .empty-avatar{width:28px;height:28px;border-radius:50%;border:1.5px dashed #555c51;font-size:16px;color:#8f8a76}
.phone-view .seat-queue{margin:10px 0 0;font-size:11px;color:var(--muted)}

.phone-view .phone-lobby .mode-picker{margin:0}
.phone-view .mode-picker .ship-choice{position:relative;padding:12px 8px 10px}
.phone-view .mode-picker .ship-choice .lamp{position:absolute;top:9px;left:10px;width:9px;height:9px}
.phone-view .mode-picker .ship-choice small{font-size:11px;color:var(--amber)}
.phone-view .mode-picker div.ship-choice:not(.selected){opacity:.55}

.how-to{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.how-to li{display:flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.how-to b{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:3px;background:#0c0902;color:var(--led);font:800 17px/1 var(--dot);box-shadow:inset 0 0 0 2px var(--seam);text-shadow:0 0 6px #ff4a2aaa}

/* Docked at the bottom, like the launch panel during the battle */
.lobby-dock{position:fixed;z-index:20;left:50%;bottom:0;translate:-50% 0;width:min(100%,560px);display:flex;flex-direction:column;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#444b41,#3a4037);box-shadow:0 -2px 0 var(--seam),0 -8px 18px #0006}
.lobby-dock .button.primary{min-height:58px;font-size:18px}
.lobby-dock .button.primary:not(:disabled){animation:start-glow 1.6s ease-in-out infinite}
/* A finger resting where the button lands must not wash it out */
.lobby-dock .button.primary:not(:disabled):hover{background:linear-gradient(180deg,#ffd166,var(--amber) 55%,#d28f00)}
.lobby-dock .button.primary:disabled{opacity:1;filter:grayscale(.8) brightness(.62)}
.lobby-dock .button.secondary{min-height:44px;font-size:14px}
.dock-note{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5;color:var(--ink)}
.dock-note .lamp,.dock-wait .lamp{width:11px;height:11px}
.lobby-dock.dock-wait{flex-direction:row;align-items:center;gap:14px;padding-block:16px calc(16px + env(safe-area-inset-bottom))}
.dock-wait b{display:block;font:800 21px/1.2 var(--dot);color:var(--amber);text-shadow:0 0 8px #ffb00088}
.dock-wait small{display:block;font-size:12px;color:var(--ink)}
.phone-view .phone-lobby:has(+ .dock-wait){padding-bottom:96px}

@keyframes seat-pop{from{opacity:0;transform:scale(.86)}}
@keyframes start-glow{50%{box-shadow:0 0 0 3px var(--black),0 5px 0 3px var(--black),inset 0 2px 0 #fff3c4,0 0 26px #ffb000aa}}

/* Phones only: the invite stands in for the shared screen's join station */
.invite{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 14px;align-items:center;padding:14px;border-radius:12px;background:linear-gradient(180deg,var(--bake-hi),var(--bake));box-shadow:0 0 0 2px var(--black),0 4px 0 2px var(--black),inset 0 1px 0 #8b9484}
.invite-code{display:flex;flex-direction:column;align-items:center;gap:5px}
.invite-code small{font-size:10px;font-weight:700;color:var(--muted);line-height:1}
.invite-code strong{padding:6px 10px 4px 14px;border-radius:8px;background:#0c0902;box-shadow:inset 0 0 0 3px var(--seam);font:800 40px/1 var(--dot);letter-spacing:4px;color:var(--led);text-shadow:0 0 10px #ff4a2a88}
.invite-actions{display:flex;flex-direction:column;gap:9px;min-width:0}
.invite-actions .button{min-height:42px;padding:8px 10px;font-size:14px;white-space:normal}
.invite-qr{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px}
.invite-qr img{width:min(220px,70%);border-radius:8px;box-shadow:0 0 0 2px var(--black)}
.invite-qr small{font-size:12px;color:var(--ink)}
.invite-link{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 12px;text-align:center;overflow-wrap:anywhere}
.invite-link span{font:600 15px/1.4 var(--dot);color:var(--amber)}