/* Multiplayer: player profile (name + photo), player chips in the lobby and HUD, camera dialog, invite link */
.profile{display:flex;gap:12px;align-items:center}
.pfpic{flex:none;width:64px;height:64px;padding:0;border-radius:50%;border:2px solid var(--sand);background:#0e0b08;color:var(--sand);
  display:grid;place-items:center;overflow:hidden}
.pfpic:hover{border-color:var(--gold);color:var(--gold)}
.pfpic img{width:100%;height:100%;object-fit:cover}
.pffields{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.pffields input{width:100%;box-sizing:border-box}
.pfhint{font-size:11px;color:var(--dim)}
.pfhint.warn{color:var(--red)}

/* player chip: round photo (or initial) ringed in the team colour, then the name */
.pl{display:inline-flex;align-items:center;gap:7px;min-width:0}
.pl img,.pl .ini{flex:none;width:26px;height:26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--pc,var(--sand))}
.pl .ini{display:grid;place-items:center;background:var(--pc,var(--sand));color:#14110d;font-weight:700;font-size:12px}
.pl b,.rooms button .pl b{color:var(--fg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rooms button{align-items:center}

.hud .vs{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;gap:8px;max-width:100%;box-sizing:border-box;
  padding:4px 12px 4px 4px;border-radius:999px;background:rgba(20,17,13,.8);font-size:12px}
.hud .vs .team{display:flex;gap:10px;min-width:0}
.hud .vs .pl img,.hud .vs .pl .ini{width:30px;height:30px}
.hud .vs .pl b{max-width:9em}
.hud .vs.four .pl b{max-width:6em}
.hud .vs .pl.me b{color:var(--gold)}
@media (max-width:600px){ .hud .vs.four .pl:not(.me) b{display:none} }
.hud .vs i{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

.camov{position:fixed;inset:0;z-index:20;display:flex;padding:16px;overflow:auto;background:rgba(10,8,6,.94)}
.camcard{margin:auto;width:100%;max-width:420px;display:flex;flex-direction:column;gap:12px;align-items:center}
.camview{width:min(100%,300px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid var(--sand);background:#000}
.camview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}   /* selfie preview is mirrored */
.cammsg{margin:0;min-height:1.3em;text-align:center;color:var(--dim)}
.camrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;font-size:12px;color:var(--dim)}
.share span{word-break:break-all;-webkit-user-select:text;user-select:text}

/* start screen: one calm column, every row of choices spans its full width */
.card{max-width:620px}
#ovMenu{gap:14px!important}
.race button{padding:14px 10px}
.foe,.diff{width:100%;box-sizing:border-box}
.foe button,.diff button{flex:1 1 0;min-width:0}
.foe .foelbl{flex:none;width:5.5em;text-align:left}
#diff{gap:8px}
#bGo{align-self:stretch;font-size:26px;padding:10px 24px!important}
details.mp>summary{align-self:stretch;text-align:center}
details.mp[open]{gap:10px}
.hostrow{display:flex;gap:8px}
.hostrow button{flex:1 1 0}
@media (min-width:700px){
  .card h2{font-size:52px}
  .race{gap:12px}
  .race b{font-size:22px}
  .foe button,.diff button{font-size:14px}
}

/* 2 vs 2 waiting room: two teams, two seats each */
.seats{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.steam{display:flex;flex-direction:column;gap:6px;text-align:left}
.steam .lbl{color:var(--pc)}
.seatrow{display:flex;align-items:center;gap:8px;min-width:0}
/* every player box has the same size, whatever name or race it holds */
.seat{flex:1 1 0;min-width:0;height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;border-color:var(--line);text-align:left;overflow:hidden}
.seat:disabled{opacity:1;cursor:default}
.seat .pl{flex:1 1 auto;min-width:0}
/* the box wears the frame of the player's race */
div.seat{border-style:solid;border-color:transparent;background:transparent;border-radius:0;color:#f3e3c2;text-shadow:0 1px 2px rgba(0,0,0,.7)}
div.seat[data-r="0"]{border-width:7px 18px;border-image:var(--lgframe) 72 268 72 268 fill / 7px 18px stretch}
div.seat[data-r="1"]{border-width:7px 15px;border-image:var(--lzframe) 44 86 44 86 fill / 7px 15px stretch}
div.seat[data-r="2"]{border-width:10px 14px 5px;border-image:var(--chframe) 85 120 38 120 fill / 10px 14px 5px stretch}
div.seat.you{filter:drop-shadow(0 0 6px var(--pc))}
.seat .pln{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.seat .pln b{max-width:100%}
.srace{flex:none;font:inherit;font-size:11px;color:inherit;white-space:nowrap}
.srace[data-r="1"]{font-family:"Brutschrift",sans-serif;font-size:14px;letter-spacing:.04em}
select.srace{background:#0e0b08;color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:3px 4px;cursor:pointer;max-width:8.5em}
select.srace:hover{border-color:var(--sand)}
select.srace:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
select.srace option{font-family:var(--mono);font-size:13px}
/* ready state outside, right of the box, in a fixed-width column so all boxes line up */
.sstate{flex:none;width:4.6em;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:pre-line;line-height:1.35}
.sstate.rdy{color:var(--ok)}
.seat .free{color:var(--dim);font-size:12px}
.seat:not(:disabled):hover .free{color:var(--fg)}
@media (max-width:440px){ .seats{grid-template-columns:1fr} }

/* voice chat: microphone toggle in the HUD and the waiting room; a mic badge on everyone who is talking */
.hud #bVoice{grid-column:2;grid-row:3;justify-self:end;pointer-events:auto;padding:3px 8px!important;font-size:12px}
#bVoice.on,#bVoiceWait.on{color:var(--ok)!important;filter:brightness(1.2) drop-shadow(0 0 6px rgba(127,209,139,.6))}
#bVoice,#bVoiceWait{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#bVoice[hidden],#bVoiceWait[hidden]{display:none}
#bVoice .mi,#bVoiceWait .mi{width:16px;height:16px;flex:none}
#bVoice.off,#bVoiceWait.off{color:var(--red)!important;filter:drop-shadow(0 0 5px rgba(232,100,79,.55))}
#bVoice.off .mt,#bVoiceWait.off .mt{text-decoration:line-through;text-decoration-thickness:2px}
#bVoiceWait.off{animation:micnag 1.6s ease-in-out infinite}
@keyframes micnag{50%{filter:drop-shadow(0 0 10px rgba(232,100,79,.9))}}
@media (prefers-reduced-motion:reduce){#bVoiceWait.off{animation:none}}
.pl{position:relative}
.pl.talk::after{content:"";position:absolute;left:17px;top:-3px;width:12px;height:12px;border-radius:50%;
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2314110d' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1A7 7 0 0 0 19 11h-2z'/%3E%3C/svg%3E") center/9px no-repeat;
  box-shadow:0 0 0 1.5px #14110d}
.hud .vs .pl.talk::after{left:21px}
/* waiting room: a red, struck-through mic on everyone whose microphone is off */
.seat .pl.mute::after{content:"";position:absolute;left:17px;top:-3px;width:12px;height:12px;border-radius:50%;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2314110d' d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1A7 7 0 0 0 19 11h-2z'/%3E%3Cpath d='M3 3 21 21' stroke='%2314110d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/9px no-repeat;
  box-shadow:0 0 0 1.5px #14110d}

/* waiting-room chat */
/* in the waiting room the card takes the full height and the chat fills whatever is left */
.card:has(#ovWait:not([hidden])){margin:0 auto;max-width:620px;height:100%;min-height:0}
#ovWait:not([hidden]){flex:1 1 0;min-height:0}
.chat{width:100%;flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:6px;text-align:left}
.chatlog{flex:1 1 0;min-height:44px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;overflow-y:auto;background:#0e0b08;border:1px solid var(--line);border-radius:4px;padding:6px 8px;display:flex;flex-direction:column;gap:3px;-webkit-user-select:text;user-select:text}
.chatlog .msg{flex:none;line-height:1.4;word-break:break-word;color:var(--fg)}
.chatlog .msg.me{color:var(--sand)}
.chatlog .none{flex:none;color:var(--dim);font-size:12px}
.chatrow{display:flex;gap:6px}
.chatrow input{flex:1 1 auto}

/* waiting room: ready marks, ready + mic side by side */
.waitbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.waitbtns button{min-width:9em}
#bReady.on{color:var(--ok)!important;filter:brightness(1.2) drop-shadow(0 0 6px rgba(127,209,139,.6))}
#bStart:disabled{opacity:.55}
/* waiting-room footer, pinned to the bottom of the screen: leave on the left, start on the right */
.waitfoot{position:fixed;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px max(16px,calc((100% - 620px) / 2)) calc(10px + env(safe-area-inset-bottom));background:rgba(20,17,13,.97);border-top:1px solid var(--line)}
.waitfoot #bStart{margin-left:auto}
.waitfoot button{white-space:nowrap}
#ovWait{padding-bottom:72px}   /* room for the pinned footer */

/* iPhone: text fields below 16px make Safari zoom in on focus */
@media (pointer:coarse){ input,select{font-size:16px!important} }
/* while typing in the chat the pinned footer would sit on the keyboard: hide it */
#ovWait:has(#chatIn:focus) .waitfoot{display:none}
#ovWait:has(#chatIn:focus){padding-bottom:8px}