/* Rink polish: retain the cream/orange identity and native rendering resolution. */
button, input, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #41c3ea; outline-offset: 4px; }
#html-lobby .lobby-dock, #html-lobby .queue-card {
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 2px 0 rgba(27,39,68,.3), 0 16px 44px rgba(8,24,42,.32);
  border-radius: 22px;
  background: linear-gradient(150deg,#fffaf1,#fff3e2);
}
#html-lobby .lobby-dock input, #html-lobby .lobby-friends-body input {
  border: 1.5px solid #bec8ce; min-height: 46px; font-size: 16px;
}
#html-lobby .btn { border-width: 1.5px; box-shadow: 0 3px 0 #ca5427, inset 0 1px 0 #ffffff66; transition: transform .12s, background-color .12s; }
#html-lobby .btn.secondary, #html-lobby .btn.ghost { border: 1.5px solid #b7c4ce; box-shadow: 0 2px 0 #d3dbe0; }
#html-lobby .lobby-friends { border: 1px solid #d7dfe0; background: #ffffff85; }
#html-lobby .lobby-friends summary { min-height: 44px; }
#html-lobby .btn:active { transform: translateY(2px); }
#html-lobby .lobby-friends-body .btn { min-height: 44px; }
#touch-controls {
  position: fixed; z-index: 70;
  left: max(12px,env(safe-area-inset-left)); right: max(12px,env(safe-area-inset-right));
  bottom: max(12px,env(safe-area-inset-bottom)); margin-inline:auto;
  width:auto; max-width:560px; box-sizing:border-box;
  display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:18px; align-items:center;
  padding:14px 14px 12px 18px; background:linear-gradient(135deg,#fffaf3,#fff2df);
  color:#1b2744; border:1px solid rgba(255,255,255,.9); border-radius:23px;
  box-shadow:0 2px 0 #18304844,0 12px 32px #081e3c45;
  font:800 14px 'Nunito',system-ui,sans-serif; touch-action:none; user-select:none; -webkit-user-select:none;
}
#touch-controls[hidden] { display:none; }
#touch-controls label { display:block; min-width:0; }
#touch-controls .touch-heading { display:flex; align-items:center; justify-content:space-between; gap:5px; color:#536379; font-size:10px; letter-spacing:.09em; }
#touch-power-label { color:#1b2744; font-size:14px; letter-spacing:0; font-variant-numeric:tabular-nums; }
#touch-power { display:block; width:100%; height:44px; margin:0; appearance:none; -webkit-appearance:none; background:transparent; touch-action:none; cursor:pointer; }
#touch-power::-webkit-slider-runnable-track { height:9px; border:0; border-radius:99px; background:linear-gradient(90deg,#ffac64 0%,#f17c46 var(--power-progress,44.44%),#d6e0e5 var(--power-progress,44.44%),#d6e0e5 100%); box-shadow:inset 0 1px 2px #17345615; }
#touch-power::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:32px; height:32px; margin-top:-11.5px; border:3px solid #fffaf3; border-radius:50%; background:#f48648; box-shadow:0 0 0 1px #df94674d,0 3px 7px #85340e33; }
#touch-power::-moz-range-track { height:9px; border-radius:99px; background:#d6e0e5; }
#touch-power::-moz-range-progress { height:9px; border-radius:99px; background:#f48648; }
#touch-power::-moz-range-thumb { width:26px; height:26px; border:3px solid #fffaf3; border-radius:50%; background:#f48648; box-shadow:0 3px 7px #85340e33; }
#touch-controls>button { min-height:70px; width:100%; padding:10px 6px; border:1px solid #d9652e; border-radius:16px; background:linear-gradient(#ffad6b,#fb864b); color:#273248; box-shadow:0 3px 0 #c95c30,inset 0 1px 0 #ffe2be; font:900 19px 'Nunito',system-ui,sans-serif; touch-action:manipulation; transition:transform .12s,box-shadow .12s; }
#touch-controls>button:active { transform:translateY(2px); box-shadow:0 1px 0 #c95c30; }
#touch-controls>button:disabled { background:#d6e8de; border-color:#9bbdac; box-shadow:0 2px 0 #aecbbc; color:#35634e; }
#touch-controls>button span { display:block; margin-top:5px; font-size:9px; font-weight:800; white-space:nowrap; opacity:.8; }
#touch-controls small { display:block; color:#697a87; font-size:11px; font-weight:700; }
#touch-controls.is-locked #touch-power { opacity:.6; }
.touch-enabled #music-mute, .touch-enabled #unity-fullscreen-button { bottom:auto; top:max(12px,env(safe-area-inset-top)); }
.touch-enabled #mobile-settings { position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); z-index:90; }
.mobile-entry #mobile-settings-toggle, .touch-enabled #mobile-settings-toggle { width:44px; height:44px; border:1px solid #ccd7df; background:#fff8ed; color:#1b2744; font:900 20px/1 system-ui; box-shadow:0 3px 12px #12233b26; border-radius:14px; }
.mobile-entry #mobile-settings-panel, .touch-enabled #mobile-settings-panel { position:absolute; top:52px; right:0; display:flex; gap:8px; padding:8px; background:#fff8ed; border:1px solid #ccd7df; box-shadow:0 8px 24px #12233b33; border-radius:18px; }
.touch-enabled #mobile-settings-panel[hidden] { display:none; }
.touch-enabled #mobile-settings-panel #music-mute, .touch-enabled #mobile-settings-panel #unity-fullscreen-button { position:static !important; width:48px; height:48px; opacity:1; pointer-events:auto; border:1px solid #ccd7df; }
.mobile-entry #html-lobby { overflow-y:auto; touch-action:pan-y; }
.mobile-entry #html-lobby .lobby-shell { min-height:100%; height:auto; gap:30px; padding:38px 6px 20px; }
.mobile-entry #html-lobby .lobby-dock, .mobile-entry #html-lobby .queue-card { max-width:100%; }
@media(max-width:360px) {
  #touch-controls { grid-template-columns:minmax(0,1fr) 100px; gap:12px; padding:12px; }
  #touch-controls .touch-heading { font-size:9px; letter-spacing:0; }
}
@media(orientation:landscape) and (max-height:540px) {
  .mobile-entry #html-lobby .lobby-shell { flex-direction:row; align-items:center; justify-content:center; gap:24px; padding:14px 46px; }
  .mobile-entry #html-lobby .lobby-hero { flex:1; }
  .mobile-entry #html-lobby .lobby-hero h1 { font-size:clamp(32px,6vw,54px); }
  .mobile-entry #html-lobby .lobby-dock, .mobile-entry #html-lobby .queue-card { flex:1; max-width:360px; }
  .mobile-entry #html-lobby .lobby-eyebrow { font-size:10px; }
  #touch-controls { padding-block:8px; bottom:max(8px,env(safe-area-inset-bottom)); }
  #touch-controls>button { min-height:60px; }
  #touch-controls small { display:none; }
}
@media(prefers-reduced-motion:reduce) { button, #boot { transition:none !important; } }