/* Broadcast controls: the arena and the players carry the colour. */
body.mobile-entry #boot,
body.mobile-entry #html-lobby {
  /* Safari samples fixed layers' solid colour for its status-bar extension,
     even when an opaque background image hides that colour in the page. */
  background-color: #152238;
  background-image:
    linear-gradient(180deg, #152238 0%, #152238 9%, rgba(21, 34, 56, .94) 17%, rgba(21, 34, 56, .64) 25%, rgba(21, 34, 56, .18) 34%, transparent 43%, transparent 62%, rgba(21, 34, 56, .18) 72%, rgba(21, 34, 56, .64) 84%, rgba(21, 34, 56, .94) 94%, #152238 100%),
    url("keyart-mobile.jpg?v=054");
  background-position: center;
  background-size: cover;
}
#html-lobby .lobby-shell {
  padding: clamp(1rem, 4vh, 2rem) clamp(1rem, 4vw, 3rem) calc(1rem + env(safe-area-inset-bottom));
}
#html-lobby .lobby-hero { max-width: 38rem; margin-inline: auto; }
#html-lobby .lobby-eyebrow {
  display: inline-block; padding: .35rem .7rem; margin-bottom: .55rem;
  border: 1px solid rgba(220,246,255,.55); border-radius: 999px;
  background: rgba(7,31,63,.5); color: #e9faff; letter-spacing: .18em;
  text-shadow: none; backdrop-filter: blur(8px);
}
#html-lobby .lobby-hero h1 {
  font-size: clamp(2.9rem, 8vw, 5.2rem); letter-spacing: .045em;
  text-shadow: 0 3px 0 #102958, 0 8px 22px rgba(8,14,28,.38);
}
#html-lobby .lobby-hero .tag { margin-top: .25rem; font-size: clamp(.9rem, 1.8vw, 1.05rem); }
#html-lobby .lobby-dock,
#html-lobby .queue-card {
  width: min(92vw, 24rem); padding: 1rem 1.1rem 1.05rem;
  border: 1px solid rgba(222,248,255,.55); border-radius: 20px;
  background: rgba(7, 27, 57, .78); color: #f4fcff;
  box-shadow: 0 10px 34px rgba(4,18,42,.3), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(14px); text-align: left;
}
#html-lobby .lobby-dock label { color: rgba(228,248,255,.72); margin-bottom: .35rem; }
#html-lobby .lobby-dock input,
#html-lobby .lobby-friends-body input {
  height: 2.85rem; border: 1px solid rgba(190,232,255,.65); border-radius: 11px;
  background: rgba(248,253,255,.96); color: #102958; box-shadow: none;
}
#html-lobby .btn {
  height: 3.1rem; margin-top: .7rem; border: 0; border-radius: 12px;
  background: #ff7115; color: #fff; box-shadow: 0 3px 0 #c74f0b, 0 8px 18px rgba(255,113,21,.22);
}
#html-lobby .btn.secondary,
#html-lobby .btn.ghost {
  height: 2.75rem; border: 1px solid rgba(190,232,255,.45); border-radius: 11px;
  background: rgba(16,55,96,.72); color: #e9faff; box-shadow: none;
}
#html-lobby .lobby-friends { margin-top: .65rem; border: 1px solid rgba(190,232,255,.45); border-radius: 11px; background: rgba(16,55,96,.58); }
#html-lobby .lobby-friends > summary { color: #e9faff; }
#html-lobby .lobby-friends > summary::after { color: #9ce5ff; }
#html-lobby .lobby-hints { display: none; }

#touch-controls {
  background:#fbfdff; color:#0c204a; border:1px solid #fff;
  box-shadow:0 4px 18px #10295820; border-radius:28px;
  max-width:550px; padding:10px 10px 10px 18px; gap:16px;
}
#touch-controls .touch-heading { color:#0c204a; letter-spacing:0; font-size:11px; }
#touch-power-label { color:#0c204a; }
#touch-controls>button {
  background:#ff7115; color:#fff; border:0; border-radius:24px;
  box-shadow:0 2px 0 #e75b08; min-height:64px;
}
#touch-controls>button:active { background:#eb600d; }
#touch-controls>button:disabled { background:#19345b; color:#fff; border:0; box-shadow:none; }
#touch-power::-webkit-slider-runnable-track {
  height:14px; background:linear-gradient(90deg,#ff7115 0%,#ff7115 var(--power-progress,44.44%),#d4ddef var(--power-progress,44.44%),#d4ddef 100%); box-shadow:none;
}
#touch-power::-webkit-slider-thumb { background:#ff7115; border:3px solid #fff; margin-top:-9px; box-shadow:0 1px 4px #10295830; }
#touch-power::-moz-range-track { height:14px; background:#d4ddef; }
#touch-power::-moz-range-progress { height:14px; background:#ff7115; }
#touch-power::-moz-range-thumb { background:#ff7115; border-color:#fff; }
#mobile-settings {
  position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); z-index:90;
}
#mobile-settings #mobile-settings-toggle {
  width:44px; height:44px; border:0; background:#fbfdff; color:#0c204a;
  font:900 20px/1 system-ui; box-shadow:0 2px 10px #10295815; border-radius:14px;
}
#mobile-settings #mobile-settings-panel {
  position:absolute; top:52px; right:0; display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px; padding:12px; width:120px; background:#fbfdff; border:0;
  box-shadow:0 8px 24px #12233b22; border-radius:18px;
}
#mobile-settings #mobile-settings-panel[hidden] { display:none; }
#mobile-settings-panel small { flex:0 0 100%; text-align:center; font:700 11px 'Nunito',sans-serif; color:#435477; }
#mobile-settings #music-mute, #mobile-settings #unity-fullscreen-button {
  position:static!important; width:48px; height:48px; opacity:1; pointer-events:auto; border:1px solid #d4ddef;
}
@media(orientation:landscape) and (max-height:540px) {
  #touch-controls { left:auto; width:min(490px,70vw); margin:0; padding-block:7px; }
  #touch-controls>button { min-height:54px; }
}

@media(max-width:640px) {
  #html-lobby .lobby-shell { padding-inline: 1rem; }
  #html-lobby .lobby-hero h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }
  #html-lobby .lobby-dock, #html-lobby .queue-card { width: min(92vw, 23rem); }
}

/* Icy game-menu treatment for the mobile lobby. */
body.mobile-entry #html-lobby .lobby-eyebrow { display:none; }
body.mobile-entry #html-lobby .lobby-hero h1 {
  color:#f8fdff;
  text-shadow:0 4px 0 #17477f, 0 8px 0 #0e2f63, 0 13px 18px rgba(5,16,38,.42);
}
body.mobile-entry #html-lobby .lobby-hero h1::after {
  content:""; display:block; width:min(13rem,48vw); height:3px; margin:.45rem auto 0;
  background:linear-gradient(90deg,transparent,#c6f5ff 20%,#fff 50%,#c6f5ff 80%,transparent);
  box-shadow:0 0 12px #8ee9ff;
}
body.mobile-entry #html-lobby .lobby-dock,
body.mobile-entry #html-lobby .queue-card {
  position:relative; overflow:hidden; isolation:isolate;
  width:min(92vw,23rem); padding:1.15rem 1.2rem 1.1rem;
  border:2px solid #e9fbff; border-radius:25px;
  background:linear-gradient(145deg,rgba(247,253,255,.97),rgba(195,231,250,.92));
  box-shadow:0 0 0 3px rgba(111,210,255,.42),0 12px 0 rgba(20,91,159,.48),0 22px 35px rgba(5,30,69,.34),inset 0 0 22px rgba(255,255,255,.9);
  color:#143f78;
}
body.mobile-entry #html-lobby .lobby-dock::before,
body.mobile-entry #html-lobby .lobby-dock::after {
  content:""; position:absolute; z-index:-1; width:7.5rem; height:3rem;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(121,216,255,.25));
  clip-path:polygon(0 100%,11% 35%,24% 70%,37% 15%,52% 64%,69% 8%,85% 48%,100% 0,100% 100%);
}
body.mobile-entry #html-lobby .lobby-dock::before { top:0; left:0; transform:translate(-1rem,-.35rem); }
body.mobile-entry #html-lobby .lobby-dock::after { right:0; bottom:0; transform:rotate(180deg) translate(-1rem,-.35rem); }
body.mobile-entry #html-lobby .lobby-dock label { color:#416b98; font-size:.66rem; }
body.mobile-entry #html-lobby .lobby-dock input { border:2px solid #9dcdf1; background:#fff; color:#173d72; box-shadow:inset 0 2px 6px rgba(45,113,173,.12); }
body.mobile-entry #html-lobby .btn {
  height:auto; min-height:4.45rem; display:grid; place-content:center; gap:.08rem;
  border:3px solid #126cb6; border-radius:18px; background:linear-gradient(180deg,#63dfff,#168bd7 68%,#0870bd);
  color:#fff; box-shadow:0 5px 0 #075991,0 10px 16px rgba(22,145,217,.3),inset 0 2px 0 rgba(228,255,255,.9);
  font-family:"Lilita One","Impact",sans-serif; font-size:1.65rem; letter-spacing:.045em; text-shadow:0 2px 0 #075991;
}
body.mobile-entry #html-lobby .btn small { display:block; font:800 .73rem/1.1 "Nunito",sans-serif; letter-spacing:.025em; text-shadow:none; }
body.mobile-entry #html-lobby .lobby-friends { margin-top:1.1rem; border:2px solid #1971c9; border-radius:18px; background:rgba(255,255,255,.75); box-shadow:inset 0 0 0 1px rgba(225,249,255,.8); }
body.mobile-entry #html-lobby .lobby-friends > summary { position:relative; display:grid; justify-items:center; gap:.08rem; min-height:4.35rem; padding:.55rem 2.3rem .5rem; color:#124886; font-family:"Lilita One","Impact",sans-serif; font-size:1.38rem; letter-spacing:.045em; }
body.mobile-entry #html-lobby .lobby-friends > summary small { font:800 .72rem/1.1 "Nunito",sans-serif; letter-spacing:.025em; }
body.mobile-entry #html-lobby .lobby-friends > summary::after { position:absolute; color:#1971c9; font-family:"Nunito",sans-serif; font-size:1.6rem; right:1rem; top:50%; transform:translateY(-50%); }
body.mobile-entry #html-lobby .lobby-friends-body { background:rgba(230,247,255,.7); border-radius:0 0 16px 16px; }

@media(max-width:640px) {
  body.mobile-entry #html-lobby .lobby-hero h1 { font-size:clamp(3.15rem,13vw,3.9rem); }
}

/* Queue: player portraits make each filled rink slot unmistakable. */
body.mobile-entry #html-lobby .queue-card { text-align:center; }
body.mobile-entry #html-lobby .queue-card h2 { color:#153f78; }
body.mobile-entry #html-lobby .queue-card .queue-sub { color:#52749a; }
body.mobile-entry #html-lobby .queue-seats {
  max-width:16.5rem; gap:.52rem .56rem; margin:1.3rem auto 1rem;
}
body.mobile-entry #html-lobby .queue-seats i {
  aspect-ratio:1; border-radius:50%; background-color:#cfe5f3;
  background-position:center; background-size:122%; background-repeat:no-repeat;
  filter:grayscale(1) saturate(.15) opacity(.38);
  box-shadow:0 2px 0 rgba(48,98,141,.15);
}
body.mobile-entry #html-lobby .queue-seats i:nth-child(1) { background-image:url("queue-portraits/portrait_0.png"); }
body.mobile-entry #html-lobby .queue-seats i:nth-child(2) { background-image:url("queue-portraits/portrait_1.png"); }
body.mobile-entry #html-lobby .queue-seats i:nth-child(3) { background-image:url("queue-portraits/portrait_2.png"); }
body.mobile-entry #html-lobby .queue-seats i:nth-child(4) { background-image:url("queue-portraits/portrait_3.png"); }
body.mobile-entry #html-lobby .queue-seats i:nth-child(5) { background-image:url("queue-portraits/portrait_4.png"); }
body.mobile-entry #html-lobby .queue-seats i:nth-child(6) { background-image:url("queue-portraits/portrait_5.png"); }
body.mobile-entry #html-lobby .queue-seats i:nth-child(7) { background-image:url("queue-portraits/portrait_6.png"); }
body.mobile-entry #html-lobby .queue-seats i:nth-child(8) { background-image:url("queue-portraits/portrait_7.png"); }
body.mobile-entry #html-lobby .queue-seats i:nth-child(9) { background-image:url("queue-portraits/portrait_8.png"); }
body.mobile-entry #html-lobby .queue-seats i:nth-child(10) { background-image:url("queue-portraits/portrait_9.png"); }
body.mobile-entry #html-lobby .queue-seats i.on {
  filter:none; opacity:1; transform:translateY(-3px) scale(1.04);
  box-shadow:0 0 0 2px #fff,0 0 0 4px #68caff,0 5px 0 #1562a4,0 0 16px rgba(78,210,255,.7);
}
body.mobile-entry #html-lobby .queue-seats i.on:nth-child(2n) {
  box-shadow:0 0 0 2px #fff,0 0 0 4px #72e4c0,0 5px 0 #16766b,0 0 16px rgba(81,232,181,.65);
}
body.mobile-entry #html-lobby .queue-status { color:#285880; letter-spacing:.13em; }
body.mobile-entry #html-lobby .queue-card .btn,
body.mobile-entry #html-lobby .queue-card .btn.ghost {
  border-color:#126cb6; background:linear-gradient(180deg,#63dfff,#168bd7 68%,#0870bd);
  box-shadow:0 5px 0 #075991,0 10px 16px rgba(22,145,217,.3),inset 0 2px 0 rgba(228,255,255,.9);
  color:#fff; text-shadow:0 2px 0 #075991;
}
body.mobile-entry #spectate-leave {
  border-color:#126cb6; background:linear-gradient(180deg,#63dfff,#168bd7 68%,#0870bd);
  box-shadow:0 5px 0 #075991,0 10px 16px rgba(22,145,217,.3),inset 0 2px 0 rgba(228,255,255,.9);
  color:#fff; text-shadow:0 2px 0 #075991;
}
body.mobile-entry #spectate-leave:active { box-shadow:0 2px 0 #075991; }