:root {
  color-scheme: dark;
  --bg: #061117;
  --bg-2: #081b23;
  --panel: rgba(8, 18, 24, 0.78);
  --panel-strong: rgba(6, 14, 18, 0.9);
  --line: rgba(177, 223, 228, 0.18);
  --line-strong: rgba(177, 223, 228, 0.34);
  --text: #edf5f4;
  --muted: rgba(221, 236, 238, 0.64);
  --muted-2: rgba(221, 236, 238, 0.44);
  --accent: #7eb9ba;
  --accent-2: #bfd2c6;
  --success: #8ec7b3;
  --danger: #b67171;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html, body, #app {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

.setup-brand-link {
  width: 74px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.setup-brand-link img {
  display: block;
  width: 70px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.22));
}

.setup-screen {
  overflow: auto;
  padding: max(20px, env(safe-area-inset-top)) 16px max(30px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 14% 8%, rgba(122, 180, 182, 0.16), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(184, 210, 198, 0.08), transparent 20%),
    linear-gradient(180deg, #0a1f29, #07161d 48%, #050d12 100%);
}
.setup-wrap { width: min(620px, 100%); margin: auto; }
.brand-row {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 0 24px;
  letter-spacing: .16em; font-size: 11px; text-transform: uppercase;
  color: var(--muted);
}
.brand-row > span {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(191,210,198,.18);
  background: rgba(255,255,255,.03);
  font-size: 9px;
  color: rgba(237,245,244,.76);
}
h1 {
  margin: 0 0 12px;
  font-size: clamp(21px, 6.2vw, 44px);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 700;
  white-space: nowrap;
}


.lead {
  max-width: 52ch;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.fish-card {
  background: linear-gradient(180deg, rgba(10, 20, 26, .92), rgba(7, 14, 19, .94));
  color: var(--text);
  border-radius: var(--radius-xl);
  padding: 16px 14px 18px;
  border: 1px solid rgba(191,210,198,.12);
  box-shadow: var(--shadow);
}
.fish-card-head {
  display:flex; justify-content:space-between; align-items:center;
  padding: 0 8px; margin-bottom: 4px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.fish-card-head b { color: var(--text); font-weight: 700; letter-spacing: .08em; }
.fish-selector {
  display:grid; grid-template-columns: 44px 1fr 44px; align-items:center;
  min-height: 210px;
}
.arrow {
  border: 0; background: rgba(255,255,255,.04); color: var(--text);
  height: 44px; width: 44px; border-radius: 50%; font-size: 28px; cursor:pointer;
  border: 1px solid rgba(191,210,198,.12);
}
#fishCanvas {
  width: 100%; height: 200px; display:block; cursor:crosshair; touch-action:none;
  background: linear-gradient(180deg, #f7f1e7, #ebe2d5);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(10,20,26,.08);
}
.dots { display:flex; justify-content:center; gap:8px; margin-top: 12px; }
.dot { width:7px; height:7px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.18); transition:all .18s ease; }
.dot.active { background: var(--accent-2); transform: scale(1.3); }
.paint-help {
  text-align:center; margin: 16px 0 10px;
  font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.colors { display:flex; justify-content:space-between; gap:4px; flex-wrap:nowrap; overflow:hidden; }
.swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(247,241,231,.9);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
  cursor:pointer; transition:all .18s ease;
}
.swatch.active { box-shadow: 0 0 0 2px var(--accent-2), 0 0 0 6px rgba(191,210,198,.12); transform: scale(.96); }
.swatch.erase { background: linear-gradient(135deg, #f7f1e7 0 43%, #bc7373 44% 54%, #f7f1e7 55% 100%) !important; }
.reset-paint {
  display:block; margin: 12px auto 0; padding: 10px 14px;
  border-radius: 999px; border:1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--text);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor:pointer;
}

.category-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px; }
.category-tab {
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.03); color: var(--muted);
  padding: 11px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; cursor:pointer;
  transition: all .18s ease;
}
.category-tab.active {
  background: linear-gradient(180deg, rgba(126,185,186,.22), rgba(126,185,186,.10));
  border-color: rgba(126,185,186,.4);
  color: var(--text);
}
.ar-tabs { margin-bottom: 12px; }

.primary {
  width: 100%; margin-top: 18px; padding: 16px;
  border: 1px solid rgba(191,210,198,.2); border-radius: 16px;
  background: linear-gradient(180deg, rgba(191,210,198,.18), rgba(126,185,186,.16));
  color: var(--text); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  cursor:pointer; transition: all .18s ease;
}
.primary:disabled { opacity: .4; cursor:not-allowed; }
.primary:active:not(:disabled) { transform: translateY(1px); }
.support { text-align:center; min-height:18px; color: var(--muted-2); font-size: 10px; margin: 10px 0 0; }
.spatial-note {
  margin-top: 12px; padding: 13px 14px; border-radius: 16px;
  border: 1px solid rgba(191,210,198,.12); background: rgba(255,255,255,.03);
  color: var(--muted); font-size: 11px; line-height: 1.55;
}

select {
  width:100%; border:1px solid var(--line); border-radius:14px; color:var(--text);
  background: var(--panel-strong); padding: 13px; outline:0;
}

.ar-screen { background:#000; touch-action:none; }
#xrCanvasHost { position:absolute; inset:0; }
#xrCanvasHost canvas { display:block; width:100%!important; height:100%!important; }
.ar-overlay { position:absolute; inset:0; pointer-events:none; }
.ui { pointer-events:auto; }
.glass {
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.topbar {
  position:absolute; z-index:10;
  top:max(10px, env(safe-area-inset-top)); left:10px; right:10px;
  height:54px; border-radius: 18px;
  display:grid; grid-template-columns: 52px 42px 1fr 66px 66px; gap:8px; align-items:center; padding:6px;
}
.topbar > div { display:flex; flex-direction:column; min-width:0; }
.topbar strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.topbar span { font-size: 8px; color: var(--muted); margin-top: 2px; letter-spacing: .08em; text-transform: uppercase; }

.brand-link-btn {
  height: 40px; width: 46px; display:flex; align-items:center; justify-content:center;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05); overflow:hidden; text-decoration:none;
}
.brand-link-btn img {
  display:block; width: 38px; height: auto; object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.28));
}
.brand-link-btn:active { transform: translateY(1px); }

.icon-btn, .text-btn, .mini-arrow, .round {
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05);
  color: var(--text); cursor:pointer; transition: all .18s ease;
}
.icon-btn { height: 40px; border-radius: 12px; font-size: 20px; }
.text-btn { height: 36px; border-radius: 11px; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 0 10px; }
.icon-btn:active, .text-btn:active { transform: translateY(1px); }


.scan-title-overlay {
  position:absolute; z-index:8; left:50%; transform:translateX(-50%);
  top: calc(max(10px, env(safe-area-inset-top)) + 64px);
  min-width: 172px;
  max-width: calc(100% - 28px);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align:center;
  pointer-events:none;
}

.scan-hint {
  position: absolute;
  z-index: 11;
  top: calc(max(10px, env(safe-area-inset-top)) + 146px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(420px, calc(100% - 28px));
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
.environment-chip {
  position: absolute;
  z-index: 11;
  top: calc(max(10px, env(safe-area-inset-top)) + 106px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  border-radius: 999px;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.environment-chip > span {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius:50%;
  background: #cfb777; box-shadow: 0 0 10px rgba(207,183,119,.9);
}
.environment-chip.ready > span { background: var(--success); box-shadow: 0 0 10px rgba(142,199,179,.9); }
.environment-chip.limited > span { background: #b6906e; box-shadow: 0 0 10px rgba(182,144,110,.9); }
.volume-chip { position:absolute; z-index:8; top: calc(max(10px, env(safe-area-inset-top)) + 136px); right:12px; border-radius:999px; padding:8px 10px; font-size:8px; }
.volume-chip > span { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(126,185,186,.8); }

.bottom {
  position:absolute; z-index:9; left:10px; right:10px; bottom:max(10px, env(safe-area-inset-bottom));
  border-radius: 24px; padding: 12px;
}
.selected-fish-row {
  display:grid; grid-template-columns: 36px 108px 36px 1fr; gap:10px; align-items:center; margin-bottom: 12px;
}
.selected-fish-row canvas, #arFishCanvas {
  width: 108px; height: 60px; border-radius: 14px; display:block;
  background: linear-gradient(180deg, #f7f1e7, #ebe2d5);
  box-shadow: inset 0 0 0 1px rgba(10,20,26,.08);
}
.selected-fish-row > div { display:flex; flex-direction:column; }
.selected-fish-row b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.selected-fish-row span { font-size: 8px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.ar-cycle {
  height: 36px; border-radius: 50%; width: 36px; border:1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.05); color: var(--text); font-size: 18px; cursor:pointer;
}
.ar-cycle:active { transform: translateY(1px); }
.status-row {
  display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-bottom: 10px;
}
.status-row > div { display:none; }
.status-row strong { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.status-row span { font-size: 8px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.school-badge {
  border:1px solid var(--line); padding:7px 10px; border-radius:999px; white-space:nowrap;
  font-weight:700; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
.microcopy {
  margin-top: 8px; color: var(--muted-2); font-size: 8px; line-height: 1.5; text-align:center;
}
.edit-panel {
  border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
  border-radius: 18px; padding: 12px; margin-bottom: 12px; position:relative; z-index: 9;
}
.edit-head { display:flex; flex-direction:column; }
.edit-head b { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.edit-head span { font-size:8px; color: var(--muted); line-height:1.45; margin-top: 4px; }
.edit-panel.hidden { display:none!important; }
.edit-panel,.edit-panel .edit-head { pointer-events:none; }
.gesture-layer { position:fixed; inset:0; z-index:8; pointer-events:none; touch-action:none; background:transparent; }
.gesture-layer.active { pointer-events:auto; }
.gesture-layer.hidden { display:none!important; }

.play-game {
  display:block; width:100%; margin: 0 0 12px; padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(151, 219, 216, .72);
  background: linear-gradient(180deg, rgba(87, 173, 174, .78), rgba(53, 118, 123, .72));
  color: #f7ffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor:pointer;
  box-shadow: 0 8px 22px rgba(28, 91, 96, .24), inset 0 1px 0 rgba(255,255,255,.14);
  text-shadow: 0 1px 2px rgba(0,0,0,.32);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.play-game:disabled {
  opacity:.68;
  cursor:default;
  border-color: rgba(126,185,186,.38);
  background: linear-gradient(180deg, rgba(79, 129, 132, .46), rgba(44, 74, 79, .48));
  color: rgba(240,250,249,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.play-game:not(:disabled) {
  box-shadow: 0 10px 28px rgba(41, 132, 137, .34), 0 0 0 1px rgba(126,185,186,.08), inset 0 1px 0 rgba(255,255,255,.17);
}
.play-game:not(:disabled):active { transform: translateY(1px); }

.capture-toast {
  position:absolute; z-index:15; left:50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 210px);
  transform: translateX(-50%); padding: 10px 14px; border-radius: 999px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.xr-error {
  position:absolute; z-index:30; left:18px; right:18px; top:50%; transform: translateY(-50%);
  padding: 22px 20px; border:1px solid var(--line); border-radius: 24px; background: rgba(5,16,21,.96); text-align:center;
}
.xr-error strong { font-size: 16px; letter-spacing: .08em; text-transform: uppercase; }
.xr-error p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 10px 0 0; }
.xr-error button { border: 1px solid var(--line); border-radius: 14px; padding: 11px 18px; font-weight: 700; margin-top: 16px; background: rgba(255,255,255,.05); color: var(--text); }

.game-hud {
  position:absolute; z-index:18; left:10px; right:10px; top: calc(max(10px, env(safe-area-inset-top)) + 68px);
  display:grid; grid-template-columns: 1fr 1fr 1fr auto; align-items:center; gap:8px; padding: 8px 10px; border-radius: 18px;
}
.game-hud.hidden, .game-hint.hidden, .game-result.hidden { display:none!important; }
.game-stat { display:flex; flex-direction:column; min-width:0; }
.game-stat span { font-size:7px; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); font-weight:700; }
.game-stat b { font-size: 14px; line-height:1.1; margin-top:2px; }
.game-end {
  border:1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: var(--text);
  border-radius: 12px; padding: 9px 10px; font-size: 9px; font-weight: 700; letter-spacing:.12em; text-transform:uppercase;
}
.game-hint {
  position:absolute; z-index:17; left:50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 18px); transform: translateX(-50%);
  padding: 9px 13px; border-radius: 999px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events:none; color: var(--muted);
}
.game-result {
  position:absolute; z-index:28; left:20px; right:20px; top:50%; transform: translateY(-50%);
  padding: 24px 20px; border-radius: 26px; text-align:center; background: rgba(5,16,21,.96); border:1px solid var(--line);
}
.game-result strong { display:block; font-size: 20px; margin-bottom: 8px; letter-spacing: .12em; text-transform: uppercase; }
.game-result > div { font-size: 11px; color: var(--muted); margin-top: 6px; }
.game-result #gameResultScore { font-size: 18px; color: var(--text); font-weight: 700; }
.game-result-actions { display:grid!important; grid-template-columns:1fr 1fr; gap:8px; margin-top: 18px!important; }
.game-result-actions button {
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 9px; font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,.05); color: var(--text); text-transform: uppercase; letter-spacing: .08em;
}
.game-result-actions button:first-child {
  background: linear-gradient(180deg, rgba(126,185,186,.2), rgba(191,210,198,.12));
}
body.game-active .bottom { display:none!important; }
body.game-active .environment-chip, body.game-active .volume-chip, body.game-active 
.scan-title-overlay {
  position:absolute; z-index:8; left:50%; transform:translateX(-50%);
  top: calc(max(10px, env(safe-area-inset-top)) + 64px);
  min-width: 172px;
  max-width: calc(100% - 28px);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align:center;
  pointer-events:none;
}

.scan-hint { display:none!important; }
body.game-active .gesture-layer { display:block!important; pointer-events:auto!important; z-index:16; }
body.game-active .topbar { opacity:.82; }
.game-hit-pop { position:absolute; z-index:19; pointer-events:none; font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:#dbeae8; text-shadow:0 2px 8px rgba(0,0,0,.55); transform:translate(-50%,-50%); animation: gamePop .75s ease-out forwards; }
@keyframes gamePop {
  0% { opacity:0; transform:translate(-50%,-25%) scale(.84); }
  20% { opacity:1; }
  100% { opacity:0; transform:translate(-50%,-90%) scale(1.02); }
}
body.photo-capturing .topbar,
body.photo-capturing .bottom,
body.photo-capturing .scan-hint,
body.photo-capturing .environment-chip,
body.photo-capturing .volume-chip,
body.photo-capturing .game-hud,
body.photo-capturing .game-hint,
body.photo-capturing .capture-toast {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 380px) {
  .fish-selector { grid-template-columns: 38px 1fr 38px; min-height: 182px; }
  .arrow { width: 38px; height: 38px; font-size: 24px; }
  #fishCanvas { height: 178px; }
  .swatch { width: 25px; height: 25px; }
  .topbar { grid-template-columns: 44px 40px 1fr 58px 58px; }
  .selected-fish-row { grid-template-columns: 32px 95px 32px 1fr; gap:8px; }
  .selected-fish-row canvas, #arFishCanvas { width:95px; height:54px; }
  .microcopy { display:none; }
  .scan-title-overlay {
    top: calc(max(10px, env(safe-area-inset-top)) + 58px);
    min-width: 150px;
    font-size: 10px;
  }
  .environment-chip {
    top: calc(max(10px, env(safe-area-inset-top)) + 100px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100% - 18px);
  }
  .scan-hint {
    top: calc(max(10px, env(safe-area-inset-top)) + 138px);
    max-width: calc(100% - 18px);
  }
}

@media (max-width: 480px) {
  .setup-brand-link {
  width: 74px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.setup-brand-link img {
  display: block;
  width: 70px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.22));
}

.setup-screen { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 22px; letter-spacing: -.05em; }
  .lead { font-size: 12px; }
  .scan-title-overlay { top: calc(max(10px, env(safe-area-inset-top)) + 58px); min-width: 150px; font-size: 10px; }
  .environment-chip { top: calc(max(10px, env(safe-area-inset-top)) + 100px); }
  .scan-hint { top: calc(max(10px, env(safe-area-inset-top)) + 138px); }
  .colors { gap: 3px; }
  .swatch { width: 24px; height: 24px; }
}

@media (max-width: 480px) {
  .setup-brand-link { width: 62px; height: 48px; }
  .setup-brand-link img { width: 58px; }
}

/* iPhone/iPad camera-based WebAR fallback */
.ios-camera-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: #000;
}
body.ios-webar-active #xrCanvasHost { z-index: 1; }
body.ios-webar-active .ar-overlay { z-index: 2; }
body.ios-webar-active #xrCanvasHost canvas { background: transparent !important; }


/* Explicit iOS WebAR permission flow */
.permission-card {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: auto;
  touch-action: manipulation;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 10, 14, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.permission-card-inner {
  width: min(420px, 100%);
  padding: 24px;
  border-radius: 24px;
  text-align: center;
}
.permission-kicker {
  margin-bottom: 10px;
  color: var(--accent-2);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
}
.permission-card strong {
  display: block;
  font-size: 20px;
  letter-spacing: -.02em;
}
.permission-card p {
  margin: 10px auto 18px;
  max-width: 34ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.permission-primary,
.permission-secondary {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.permission-primary {
  border: 1px solid rgba(126,185,186,.34);
  background: linear-gradient(180deg, rgba(126,185,186,.24), rgba(126,185,186,.12));
  color: var(--text);
}
.permission-secondary {
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.permission-card.is-error .permission-card-inner {
  border-color: rgba(182,113,113,.34);
}
.permission-card.is-error #iosPermissionText {
  color: #e4bcbc;
}


/* v62 iPhone virtual-floor calibration */
.floor-card .permission-card-inner {
  position: relative;
}
.floor-calibration-mark {
  width: 86px;
  height: 86px;
  margin: 4px auto 18px;
  border-radius: 50%;
  border: 1px solid rgba(120,255,240,.48);
  box-shadow: inset 0 0 0 8px rgba(120,255,240,.04), 0 0 26px rgba(120,255,240,.10);
  position: relative;
}
.floor-calibration-mark::before,
.floor-calibration-mark::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: rgba(120,255,240,.68);
  transform: translate(-50%, -50%);
}
.floor-calibration-mark::before { width: 46px; height: 1px; }
.floor-calibration-mark::after { width: 1px; height: 46px; }
.floor-calibration-mark span {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #78fff0;
  box-shadow: 0 0 14px rgba(120,255,240,.85);
}
.floor-card.is-error #iosFloorText { color: #e4bcbc; }


/* v65 player identity + server leaderboard */
.player-name-card,
.leaderboard-card { z-index: 90; }

.player-name-input {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0 0 8px;
  padding: 0 14px;
  border: 1px solid rgba(126,185,186,.28);
  border-radius: 14px;
  outline: none;
  background: rgba(1,8,12,.56);
  color: var(--text);
  font: 700 16px/1 system-ui, sans-serif;
  letter-spacing: .02em;
  text-align: center;
}
.player-name-input:focus {
  border-color: rgba(126,185,186,.72);
  box-shadow: 0 0 0 3px rgba(126,185,186,.10);
}
.player-name-input::placeholder { color: rgba(237,245,244,.34); font-weight: 500; }

.player-name-error {
  min-height: 20px;
  margin: 0 0 6px;
  color: #e8b3b0;
  font-size: 10px;
  line-height: 1.4;
}

.game-result {
  max-height: min(82vh, 720px);
  overflow-y: auto;
}
.game-result-rank {
  margin-top: 10px!important;
  color: var(--accent-2)!important;
  font-size: 12px!important;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.inline-leaderboard {
  margin-top: 12px!important;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.game-result-actions { grid-template-columns: 1fr 1fr!important; }
.game-result-actions button:last-child { grid-column: 1 / -1; }

.leaderboard-card .permission-card-inner {
  width: min(92vw, 430px);
  max-height: min(86vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  margin: 14px 0 12px;
}
.leaderboard-tabs button {
  min-height: 35px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.leaderboard-tabs button.active {
  border-color: rgba(126,185,186,.36);
  background: rgba(126,185,186,.14);
  color: var(--text);
}
.leaderboard-list {
  min-height: 130px;
  max-height: min(430px, 46vh); /* 10 score rows max before scrolling */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.leaderboard-list::-webkit-scrollbar { width: 7px; }
.leaderboard-list::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; }
.leaderboard-list::-webkit-scrollbar-thumb { background: rgba(126,185,186,.48); border-radius: 999px; }
.leaderboard-list { scrollbar-width: thin; scrollbar-color: rgba(126,185,186,.48) rgba(255,255,255,.035); }
.leaderboard-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  font-size: 11px;
}
.leaderboard-row:last-child { border-bottom: 0; }
.leaderboard-rank { color: var(--accent-2); font-weight: 800; }
.leaderboard-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  font-weight: 700;
  text-align: left;
}
.leaderboard-score { color: var(--text); font-weight: 900; font-variant-numeric: tabular-nums; }
.leaderboard-loading,
.leaderboard-empty {
  padding: 28px 12px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.inline-leaderboard .leaderboard-row { min-height: 32px; grid-template-columns: 28px 1fr auto; font-size: 10px; }
.inline-leaderboard .leaderboard-row:nth-child(n+6) { display:none; }

@media (max-width: 390px) {
  .player-name-card .permission-card-inner,
  .leaderboard-card .permission-card-inner { padding: 18px 15px; }
}


/* v69 iPhone-safe nickname gating */
.player-name-card { z-index: 240 !important; pointer-events: auto !important; }
.player-name-card .permission-card-inner { pointer-events: auto; }
.player-name-card button,
.player-name-card input { pointer-events: auto; touch-action: manipulation; }
.player-name-card .permission-primary:disabled {
  opacity: .48;
  filter: saturate(.55);
  cursor: default;
}


/* v71 iPhone-safe leaderboard scrolling */
.leaderboard-scroll-shell {
  position: relative;
  min-height: 130px;
  max-height: min(430px, 46vh);
  padding-right: 13px;
}
.leaderboard-scroll-shell .leaderboard-list {
  max-height: min(430px, 46vh);
  height: 100%;
  overflow-y: scroll !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.leaderboard-scroll-shell .leaderboard-list::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
.leaderboard-scroll-track {
  position: absolute;
  top: 0; right: 2px; bottom: 0;
  width: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.leaderboard-scroll-track.visible { opacity: 1; }
.leaderboard-scroll-track > span {
  display: block;
  width: 100%;
  min-height: 38px;
  border-radius: 999px;
  background: rgba(126,185,186,.72);
  box-shadow: 0 0 10px rgba(126,185,186,.14);
  transform: translateY(0);
  will-change: transform;
}
body.ios-webar-active .leaderboard-card { z-index: 260 !important; }
body.ios-webar-active .leaderboard-list { touch-action: pan-y !important; }


/* v72 placement destination selector */

/* v72 Android/iOS keyboard-safe nickname entry */
.player-name-card.keyboard-open {
  inset: auto 0 auto 0 !important;
  top: var(--nickname-vvo, 0px) !important;
  height: var(--nickname-vvh, 100dvh) !important;
  min-height: 0;
  place-items: start center !important;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.player-name-card.keyboard-open .permission-card-inner {
  width: min(420px, 100%);
  max-height: calc(var(--nickname-vvh, 100dvh) - 16px);
  margin: 0 auto;
  padding: 14px 16px;
  overflow-y: auto;
}
.player-name-card.keyboard-open .permission-kicker { margin-bottom: 4px; font-size: 7px; }
.player-name-card.keyboard-open .permission-card-inner > strong { font-size: 17px; }
.player-name-card.keyboard-open .permission-card-inner > p { display: none; }
.player-name-card.keyboard-open .player-name-input { height: 44px; margin-top: 9px; }
.player-name-card.keyboard-open .player-name-error { min-height: 14px; margin-bottom: 3px; }
.player-name-card.keyboard-open .permission-primary,
.player-name-card.keyboard-open .permission-secondary { min-height: 40px; }
.player-name-card.keyboard-open .permission-secondary { margin-top: 5px; }

@media (max-width: 390px) {
}


/* v75 iPhone native text-input portal
   Safari text editing is more reliable when the nickname card is a direct
   child of <body>, outside the WebAR canvas/overlay/touch-action hierarchy. */
.player-name-card.ios-input-portal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  pointer-events: auto !important;
  touch-action: auto !important;
  -webkit-user-select: auto !important;
  user-select: auto !important;
  overflow: auto;
  isolation: isolate;
  background: rgba(2, 10, 14, .90);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.player-name-card.ios-input-portal .permission-card-inner {
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
  touch-action: auto !important;
}
.player-name-card.ios-input-portal .player-name-input {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  touch-action: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  caret-color: currentColor;
  font-size: 16px !important; /* avoids Safari auto-zoom on focus */
}
.player-name-card.ios-input-portal button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* When the iPhone keyboard is open, use only the visible viewport. */
.player-name-card.ios-input-portal.keyboard-open {
  top: var(--nickname-vvo, 0px) !important;
  bottom: auto !important;
  width: 100% !important;
  height: var(--nickname-vvh, 100dvh) !important;
}


/* v77 iPhone dialog spacing
   Keep the native-input portal fix, but use the same comfortable proportions
   as Android instead of compressing the controls vertically. */

body.ios-webar-active .player-name-card .permission-card-inner,
.player-name-card.ios-input-portal .permission-card-inner {
  width: min(430px, calc(100vw - 32px));
  padding: 28px 22px 24px !important;
  border-radius: 25px;
}

.player-name-card.ios-input-portal .permission-kicker {
  margin-bottom: 12px;
  font-size: 9px;
}

.player-name-card.ios-input-portal .permission-card-inner > strong {
  font-size: 22px;
  line-height: 1.15;
}

.player-name-card.ios-input-portal .permission-card-inner > p {
  margin: 14px auto 24px;
  line-height: 1.55;
}

.player-name-card.ios-input-portal .player-name-input {
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 14px;
  font-size: 16px !important;
}

.player-name-card.ios-input-portal .player-name-error {
  min-height: 22px;
  margin: 7px 0 0;
}

.player-name-card.ios-input-portal .permission-primary {
  min-height: 54px !important;
  margin-top: 18px !important;
}

.player-name-card.ios-input-portal .permission-secondary {
  min-height: 52px !important;
  margin-top: 13px !important;
}

/* Keyboard visible: hide only the explanatory paragraph, not the useful spacing.
   The card itself may scroll if a short iPhone viewport needs it. */
.player-name-card.ios-input-portal.keyboard-open .permission-card-inner {
  width: min(430px, calc(100vw - 24px));
  max-height: calc(var(--nickname-vvh, 100dvh) - 16px);
  padding: 16px 18px 18px !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.player-name-card.ios-input-portal.keyboard-open .permission-kicker {
  margin-bottom: 6px;
  font-size: 8px;
}

.player-name-card.ios-input-portal.keyboard-open .permission-card-inner > strong {
  font-size: 19px;
}

.player-name-card.ios-input-portal.keyboard-open .permission-card-inner > p {
  display: none;
}

.player-name-card.ios-input-portal.keyboard-open .player-name-input {
  height: 52px !important;
  min-height: 52px !important;
  margin-top: 14px !important;
}

.player-name-card.ios-input-portal.keyboard-open .player-name-error {
  min-height: 18px;
  margin: 6px 0 0;
}

.player-name-card.ios-input-portal.keyboard-open .permission-primary {
  min-height: 48px !important;
  margin-top: 14px !important;
}

.player-name-card.ios-input-portal.keyboard-open .permission-secondary {
  min-height: 46px !important;
  margin-top: 10px !important;
}

/* iPhone Top Scores / Leaderboard popup: same visual rhythm as Android. */
body.ios-webar-active .leaderboard-card {
  padding: 22px !important;
}

body.ios-webar-active .leaderboard-card .permission-card-inner {
  width: min(430px, calc(100vw - 32px));
  max-height: min(84dvh, 720px);
  padding: 26px 22px 24px !important;
  border-radius: 25px;
}

body.ios-webar-active .leaderboard-card .permission-kicker {
  margin-bottom: 11px;
}

body.ios-webar-active .leaderboard-card .permission-card-inner > strong {
  font-size: 22px;
}

body.ios-webar-active .leaderboard-card .leaderboard-tabs {
  gap: 7px;
  margin: 18px 0 17px;
}

body.ios-webar-active .leaderboard-card .leaderboard-tabs button {
  min-height: 42px;
  border-radius: 12px;
}

body.ios-webar-active .leaderboard-card .leaderboard-scroll-shell {
  margin-top: 2px;
}

body.ios-webar-active .leaderboard-card #closeLeaderboard {
  min-height: 52px;
  margin-top: 18px;
}

/* End-of-mission score popup buttons should also feel identical on iPhone. */
body.ios-webar-active .game-result-actions {
  gap: 10px !important;
  margin-top: 22px !important;
}

body.ios-webar-active .game-result-actions button {
  min-height: 48px;
  padding: 12px 10px;
}

@media (max-width: 390px) {
  body.ios-webar-active .player-name-card .permission-card-inner,
  .player-name-card.ios-input-portal .permission-card-inner,
  body.ios-webar-active .leaderboard-card .permission-card-inner {
    width: calc(100vw - 28px);
  }

  .player-name-card.ios-input-portal .player-name-input {
    height: 54px !important;
    min-height: 54px !important;
  }
}


/* v92 Android keyboard/compositor stability */
.player-name-card.android-input-stable {
  background: #020a0e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
  contain: paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.player-name-card.android-input-stable .permission-card-inner {
  background: #0b1d26 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.42) !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.player-name-card.android-input-stable.keyboard-open {
  background: #020a0e !important;
  overscroll-behavior: none;
}
.player-name-card.android-input-stable .player-name-input {
  font-size: 16px !important;
  transform: translateZ(0);
}


/* v93 Android IME: never resize/re-scale the AR document while entering a nickname. */
.player-name-card.android-input-stable.android-keyboard-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px !important;
  background: #020a0e !important;
  contain: strict;
}
.player-name-card.android-input-stable.android-keyboard-overlay .permission-card-inner {
  width: min(420px, calc(100vw - 24px)) !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 12px 16px !important;
  overflow: visible !important;
  transform: none !important;
  background: #0b1d26 !important;
}
.player-name-card.android-input-stable.android-keyboard-overlay .permission-kicker {
  margin-bottom: 3px !important;
  font-size: 7px !important;
}
.player-name-card.android-input-stable.android-keyboard-overlay .permission-card-inner > strong {
  font-size: 16px !important;
}
.player-name-card.android-input-stable.android-keyboard-overlay .permission-card-inner > p {
  display: none !important;
}
.player-name-card.android-input-stable.android-keyboard-overlay .player-name-input {
  height: 48px !important;
  min-height: 48px !important;
  margin: 8px 0 5px !important;
  font-size: 17px !important;
}
.player-name-card.android-input-stable.android-keyboard-overlay .player-name-error {
  min-height: 12px !important;
  margin-bottom: 2px !important;
}
.player-name-card.android-input-stable.android-keyboard-overlay .permission-primary,
.player-name-card.android-input-stable.android-keyboard-overlay .permission-secondary {
  min-height: 38px !important;
}
.player-name-card.android-input-stable.android-keyboard-overlay .permission-secondary {
  margin-top: 4px !important;
}


/* v94 Android nickname input: in-app keyboard, so the system IME never opens over WebXR. */
.android-nickname-keyboard.hidden { display:none !important; }
.player-name-card.android-input-stable .player-name-input[readonly] {
  caret-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.android-nickname-keyboard {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  margin:8px 0 10px;
  padding:8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:#07151c;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  contain:layout paint;
}
.android-nickname-key-row {
  display:flex;
  justify-content:center;
  gap:4px;
  width:100%;
}
.android-nickname-key {
  flex:1 1 0;
  min-width:0;
  height:38px;
  min-height:38px !important;
  padding:0 2px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px !important;
  background:#16323f !important;
  color:#f4ffff !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  touch-action:manipulation;
}
.android-nickname-key:active { background:#245060 !important; transform:translateY(1px); }
.android-nickname-key-actions .key-language { flex:.75 1 0; font-size:11px !important; }
.android-nickname-key-actions .key-space { flex:2.5 1 0; font-size:10px !important; letter-spacing:.08em !important; }
.android-nickname-key-actions .key-backspace { flex:.85 1 0; font-size:18px !important; }
@media (max-width:380px) {
  .android-nickname-keyboard { gap:4px; padding:6px; margin:6px 0 8px; }
  .android-nickname-key-row { gap:3px; }
  .android-nickname-key { height:35px; min-height:35px !important; font-size:12px !important; }
}