:root {
  color-scheme: dark;
  --navy: #09121d;
  --header: #111e2c;
  --panel: #132332;
  --ivory: #f3e9d1;
  --muted: #9ca8ac;
  --amber: #f6b542;
  --amber-dark: #b87519;
  --emerald: #08634b;
  --danger: #ea695f;
  --scale: 1;
  --offset-x: 0px;
  --offset-y: 0px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--navy);
  color: var(--ivory);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #050b12;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #12283a 0, #09121d 62%, #050a11 100%);
  touch-action: manipulation;
  user-select: none;
}

.profile-strip { position:absolute; z-index:6; right:max(16px,env(safe-area-inset-right)); top:max(12px,env(safe-area-inset-top)); display:grid; grid-template-columns:42px minmax(110px,auto); grid-template-rows:auto 4px; align-items:center; gap:2px 10px; min-height:58px; padding:7px 12px; color:var(--ivory); text-align:left; border:1px solid rgba(198,160,106,.38); border-radius:15px; background:rgba(12,26,39,.9); box-shadow:0 9px 28px rgba(0,0,0,.3); cursor:pointer; }
.profile-strip .player-avatar { grid-row:1 / 3; width:38px; height:38px; }
.profile-strip strong,.profile-strip small { display:block; }
.profile-strip small { margin-top:2px; color:var(--muted); font-size:11px; }
.mini-xp { display:block; height:3px; overflow:hidden; border-radius:4px; background:#263746; }
.mini-xp i,.xp-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--amber-dark),var(--amber)); transition:width 220ms ease; }
.home-menu { overflow:visible; }
.home-menu > p { margin-bottom:max(16px,calc(24px * var(--scale))); }
.home-menu .button-large { min-height:max(42px,calc(52px * var(--scale))); margin-bottom:max(6px,calc(9px * var(--scale))); }
.home-menu .home-links { margin-top:max(5px,calc(9px * var(--scale))); }

.pull-rail { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:4px; color:var(--ivory); border:1px solid rgba(246,181,66,.42); border-radius:13px; background:linear-gradient(180deg,rgba(19,35,50,.96),rgba(8,22,31,.97)); box-shadow:0 9px 25px rgba(0,0,0,.3); touch-action:none; cursor:ns-resize; }
.pull-rail span { color:var(--amber); font-size:20px; line-height:1; }
.pull-rail strong { font-size:10px; letter-spacing:.13em; }
.pull-rail small { color:var(--muted); font-size:8px; }
.pull-rail.charging { border-color:#ffd983; box-shadow:0 0 0 3px rgba(246,181,66,.18),0 9px 25px rgba(0,0,0,.3); }
.guide-legend { position:absolute; z-index:4; left:50%; top:max(60px,calc(var(--offset-y) + 72px)); bottom:auto; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; color:#d7dcda; background:rgba(8,20,29,.76); font-size:10px; pointer-events:none; }
.guide-legend > span { width:8px; height:3px; border-radius:2px; }
.guide-legend .ivory-dot { background:#f3e9d1; }.guide-legend .amber-dot { background:#f6b542; }.guide-legend .cyan-dot { background:#55d4e6; }.guide-legend small { margin-left:4px; color:#839198; }
#game-canvas.cue-grabbable { cursor:grab; } #game-canvas.cue-charging { cursor:grabbing; }

.modal-wide { width:min(720px,95vw); max-height:min(630px,94vh); overflow:auto; text-align:left; touch-action:pan-y; }
.modal-wide > .button-primary { width:100%; margin-top:16px; }
.modal label { display:flex; flex-direction:column; gap:6px; color:#c9d1d1; font-size:12px; text-align:left; }
.modal input[type="text"],.modal input[type="email"],.modal input[type="url"],.modal input:not([type]) { width:100%; min-height:46px; padding:10px 12px; color:var(--ivory); border:1px solid rgba(156,168,172,.35); border-radius:10px; outline:none; background:#0b1b29; user-select:text; }
.modal input:focus { border-color:var(--amber); box-shadow:0 0 0 2px rgba(246,181,66,.14); }
.modal select,.modal textarea { width:100%; min-height:46px; padding:10px 12px; color:var(--ivory); border:1px solid rgba(156,168,172,.35); border-radius:10px; outline:none; background:#0b1b29; user-select:text; resize:vertical; }.modal select:focus,.modal textarea:focus { border-color:var(--amber); box-shadow:0 0 0 2px rgba(246,181,66,.14); }
.setup-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0 4px; }
.difficulty-grid,.card-list { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:14px; }
.choice-card,.challenge-card { min-height:112px; padding:14px; color:var(--ivory); text-align:left; border:1px solid rgba(156,168,172,.25); border-radius:13px; background:linear-gradient(160deg,rgba(18,45,53,.94),rgba(11,26,38,.96)); cursor:pointer; }
.choice-card.selected,.challenge-card.recommended { border-color:var(--amber); box-shadow:inset 0 0 0 1px rgba(246,181,66,.25); }
.choice-card strong,.choice-card small,.challenge-card strong,.challenge-card small { display:block; }.choice-card small,.challenge-card small { margin-top:6px; color:var(--muted); line-height:1.35; }.challenge-card em { display:inline-block; margin-top:9px; color:var(--amber); font-size:11px; font-style:normal; }.challenge-card:disabled { opacity:.48; cursor:not-allowed; }
.career-copy { margin:7px 0 2px; color:#c7cecc; }
.profile-head { display:grid; grid-template-columns:68px 1fr auto; align-items:end; gap:12px; margin:10px 0 13px; }.profile-avatar { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:#10202b; background:linear-gradient(#ffd577,#e99b2a); font-size:26px; font-weight:750; }.profile-head .button { height:46px; padding:0 16px; }
.xp-card,.account-card,.service-status,.room-wait { padding:13px; border:1px solid rgba(156,168,172,.18); border-radius:12px; background:rgba(8,25,35,.63); }.xp-card { display:grid; grid-template-columns:1fr auto; gap:7px 14px; }.xp-card > span { color:var(--amber); font-size:12px; }.xp-track { grid-column:1/-1; height:7px; overflow:hidden; border-radius:8px; background:#263746; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }.stat-grid div { padding:9px 5px; text-align:center; border-radius:9px; background:rgba(20,46,57,.7); }.stat-grid strong,.stat-grid small { display:block; }.stat-grid strong { color:var(--amber); font-size:19px; }.stat-grid small { color:var(--muted); font-size:10px; }
.modal-wide h3 { margin:12px 0 5px; color:#efe2c7; font-size:13px; }.award-list,.history-list { display:flex; flex-wrap:wrap; gap:6px; }.award-list span,.history-list span { padding:6px 9px; border-radius:999px; color:#cbd2d1; background:#172f3e; font-size:10px; }.award-list .earned { color:#171e22; background:var(--amber); }.history-list { max-height:76px; overflow:auto; }.account-card { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:13px; }.account-card strong { white-space:nowrap; }.account-card small { flex:1; min-width:160px; color:var(--muted); }.account-card .button { min-width:126px; }
.service-status { margin:8px 0 12px; color:#d5dad8; }.service-status.error { color:#f1aa9f; border-color:rgba(234,105,95,.4); }.guest-online,.code-row,.room-actions { display:flex; align-items:end; gap:10px; }.guest-online label,.code-row label,.room-actions label { flex:1; }.divider { display:flex; align-items:center; gap:10px; margin:14px 0; color:#72838a; font-size:10px; text-transform:uppercase; letter-spacing:.14em; }.divider::before,.divider::after { content:""; flex:1; height:1px; background:rgba(156,168,172,.17); }.privacy-copy { color:var(--muted); font-size:11px; }.privacy-copy a { color:#e7bf70; }.room-actions { flex-wrap:wrap; }.room-actions > span { color:var(--muted); padding-bottom:13px; }.room-actions label { min-width:120px; }.room-wait { margin:13px 0; color:#e6dac2; }.matchmaking-actions { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 12px; }.matchmaking-actions small { grid-column:1/-1; color:var(--muted); }.result-rewards { margin:8px 0; padding:10px; border:1px solid rgba(246,181,66,.32); border-radius:10px; color:#f6d99a; background:rgba(84,62,24,.24); white-space:pre-line; }
.service-setup { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px; margin:0 0 12px; padding:12px; border:1px solid rgba(246,181,66,.32); border-radius:12px; background:rgba(84,62,24,.14); }.service-setup label { min-width:0; }
.login-history { display:flex; flex-direction:column; gap:4px; margin-top:8px; padding:9px 12px; border-radius:10px; background:rgba(8,25,35,.55); color:var(--muted); font-size:10px; }.login-history strong { color:#e5dcc8; font-size:11px; }
.coach-overlay { position:absolute; z-index:12; left:max(14px,env(safe-area-inset-left)); top:max(76px,calc(var(--offset-y) + 82px)); width:min(285px,calc(100vw - 28px)); padding:13px 15px; border:1px solid rgba(246,181,66,.55); border-radius:14px; background:rgba(10,25,35,.96); box-shadow:0 12px 34px rgba(0,0,0,.42); pointer-events:auto; }
.coach-overlay small,.coach-overlay strong { display:block; }.coach-overlay small { color:var(--amber); font-size:9px; letter-spacing:.12em; }.coach-overlay strong { margin-top:4px; color:var(--ivory); }.coach-overlay p { margin:5px 0 2px; color:#cbd3d1; font-size:12px; line-height:1.35; }.coach-overlay .button { min-height:36px; margin-top:2px; padding:2px 0; color:var(--muted); }
.last-shot { position:absolute; z-index:5; left:max(14px,env(safe-area-inset-left)); top:max(72px,calc(var(--offset-y) + 80px)); max-width:min(420px,calc(100vw - 28px)); color:#d8dfdc; border:1px solid rgba(198,160,106,.35); border-radius:10px; background:rgba(8,22,31,.91); font-size:11px; pointer-events:auto; }.last-shot summary { min-height:38px; padding:11px 13px 8px; color:#f0d49b; cursor:pointer; }.last-shot p { margin:0; padding:0 13px 12px; line-height:1.45; }

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.screen-layer { position: absolute; inset: 0; pointer-events: none; }
.screen-layer button, .screen-layer input, .screen-layer .mapped-region { pointer-events: auto; }
.is-hidden { display: none !important; }

.mapped-control, .mapped-region { position: absolute; }

.button, .icon-button, .quiet-link {
  border: 0;
  color: var(--ivory);
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, filter 140ms ease;
}

.button:active:not(:disabled), .icon-button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.button:focus-visible, .icon-button:focus-visible, input:focus-visible, .quiet-link:focus-visible, .spin-pad:focus-visible { outline: 3px solid rgba(246,181,66,.7); outline-offset: 2px; }
.button:disabled { opacity: .42; cursor: default; }

.button-primary {
  color: #10202b;
  font-weight: 750;
  background: linear-gradient(180deg, #ffc75b 0%, var(--amber) 58%, #db8f24 100%);
  border: 1px solid #ffd887;
  border-radius: 14px;
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 8px 22px rgba(0,0,0,.24), 0 0 0 1px rgba(108,77,44,.55);
}
.button-primary:hover:not(:disabled) { filter: brightness(1.06); }
.button-outline { background: rgba(5,62,49,.74); border: 1px solid #ead3a4; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(198,160,106,.18); }
.button-text { background: transparent; color: var(--ivory); }
.button-text:hover { color: var(--amber); }

.home-menu { display: flex; flex-direction: column; align-items: stretch; }
.brand-mark { display: flex; flex-direction: column; gap: 6px; width: 46px; transform: rotate(-24deg); margin: 1px 0 14px 108px; }
.brand-mark i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--amber), #efca84); }
.brand-mark i:nth-child(2) { margin-left: 9px; }
.brand-mark i:nth-child(3) { margin-left: 18px; }
.home-menu h1 { font-size: clamp(38px, calc(69px * var(--scale)), 70px); letter-spacing: .22em; line-height: .9; font-weight: 350; margin: 0; text-shadow: 0 3px 18px rgba(0,0,0,.35); }
.home-menu > p { color: #e3e6e3; font-size: clamp(14px, calc(19px * var(--scale)), 20px); letter-spacing: .01em; margin: 25px 0 37px 18px; }
.button-large { width: max(148px, calc(270px * var(--scale))); min-height: max(44px, calc(66px * var(--scale))); font-size: clamp(16px, calc(22px * var(--scale)), 23px); margin-bottom: max(9px, calc(18px * var(--scale))); }
.home-menu .button-outline { background: rgba(5,54,43,.63); }
.home-links { display: flex; gap: 13px; margin: 24px 0 0 3px; }
.button-icon-text { background: transparent; display: flex; gap: 10px; align-items: center; color: #e7e3d7; padding: 8px 8px; font-size: clamp(12px, calc(15px * var(--scale)), 16px); }
.button-icon-text span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d8c7a6; border-radius: 50%; }
#new-match { align-self: center; min-height: 34px; padding: 4px 12px; margin: -10px 0 2px; color: #bdc6c7; font-size: 13px; text-decoration: underline; }
.save-warning { position: absolute; left: 18px; bottom: 16px; max-width: 430px; padding: 10px 15px; border: 1px solid rgba(246,181,66,.35); border-radius: 10px; color: #f0d7a5; background: rgba(9,18,29,.94); font-size: 13px; pointer-events: none; }

.match-header, .practice-header {
  position: absolute;
  top: 0;
  left: var(--offset-x);
  width: calc(1280px * var(--scale));
  height: max(52px, calc(66px * var(--scale)));
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(17,30,44,.96), rgba(11,23,35,.92));
  border-bottom: 1px solid rgba(156,168,172,.12);
  box-shadow: 0 7px 22px rgba(0,0,0,.2);
  pointer-events: auto;
}
.player-card { position: absolute; left: calc(75px * var(--scale)); top: 0; height: 100%; display: flex; align-items: center; gap: 11px; min-width: max(188px, calc(245px * var(--scale))); border-bottom: 3px solid var(--amber); padding: 0 7px; }
.player-card.player-right { left: auto; right: calc(72px * var(--scale)); justify-content: flex-end; border-color: transparent; color: #b1b9ba; }
.player-card:not(.active) { border-color: transparent; }
.player-avatar { display: grid; place-items: center; flex: 0 0 auto; width: max(36px, calc(44px * var(--scale))); height: max(36px, calc(44px * var(--scale))); border-radius: 50%; background: #c7c9c6; color: #10202b; font-weight: 700; font-size: 19px; }
.player-card.active { color: var(--ivory); }
.player-card.active .player-avatar { background: linear-gradient(#ffc65a,#e99b2a); }
.player-card.player-right.active { border-color: var(--amber); color: var(--ivory); }
.player-card strong { display: block; font-size: clamp(14px, calc(20px * var(--scale)), 20px); font-weight: 650; }
.player-card small { display: block; color: var(--muted); font-size: clamp(11px, calc(12px * var(--scale)), 13px); margin-top: 2px; }
.player-copy { min-width: 0; }
.player-copy-right { text-align: right; }
.player-meta { display: flex; align-items: center; gap: 9px; margin-top: 2px; white-space: nowrap; }
.player-meta-right { justify-content: flex-end; }
.player-meta small { margin-top: 0; }
.score-readout { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 7px; border: 1px solid rgba(246,181,66,.38); border-radius: 999px; background: rgba(246,181,66,.09); color: #e2cfa6; font-size: clamp(9px, calc(10px * var(--scale)), 11px); font-weight: 700; letter-spacing: .08em; line-height: 1.35; font-variant-numeric: tabular-nums; }
.score-readout b { color: var(--amber); font-size: clamp(12px, calc(15px * var(--scale)), 16px); letter-spacing: 0; }
.score-readout em { color: #9ca8ac; font-style: normal; letter-spacing: 0; }
.mode-label { margin: 0 auto; color: #949da3; font-size: clamp(11px, calc(12px * var(--scale)), 13px); letter-spacing: .32em; }
.quiet-link { display: block; margin: 1px auto 0; min-height: 18px; min-width: 88px; padding: 1px 8px; background: none; color: #65727a; font-size: 9px; letter-spacing: .15em; }
.quiet-link:hover { color: var(--amber); }

.icon-button { display: grid; place-items: center; border-radius: 13px; background: rgba(17,30,44,.88); border: 1px solid rgba(156,168,172,.26); font-size: 23px; }
#pause { font-size: 20px; }

.power-control { display: flex; flex-direction: column; align-items: center; padding: 11px 7px 9px; background: linear-gradient(180deg, rgba(19,35,50,.94), rgba(10,21,33,.96)); border: 1px solid rgba(156,168,172,.18); border-radius: 17px; box-shadow: 0 12px 26px rgba(0,0,0,.26); }
.power-control { min-width: 52px; }
.power-control label { color: #d6d5cf; font-size: 11px; letter-spacing: .1em; }
.power-control output { color: var(--amber); font-size: 11px; font-variant-numeric: tabular-nums; margin: 2px 0 4px; }
.power-control input[type="range"] { width: 44px; flex: 1; min-height: 175px; writing-mode: vertical-lr; direction: rtl; accent-color: var(--amber); cursor: pointer; touch-action: none; }
.shoot-button { padding: 0 13px; border-radius: 11px; font-size: 16px; }

.spin-button { padding: 0; border: 0; background: transparent; color: var(--ivory); }
.spin-button > span { position: relative; display: block; width: 54px; height: 54px; margin: 0 auto 4px; border-radius: 50%; background: radial-gradient(circle at 36% 31%, #fffdf5, #e8e0cd 53%, #99958a 100%); border: 3px solid #172535; box-shadow: 0 4px 14px rgba(0,0,0,.44), inset -4px -5px 8px rgba(0,0,0,.12); }
.spin-button > span i { position: absolute; width: 8px; height: 8px; left: calc(50% - 4px); top: calc(50% - 4px); border-radius: 50%; background: #162333; transition: transform 120ms ease; }
.spin-button small { font-size: 11px; letter-spacing: .13em; }
.status-line { margin: 0; color: var(--ivory); text-align: center; font-size: clamp(13px, calc(18px * var(--scale)), 18px); white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.85); pointer-events: none !important; }

.practice-header { padding: 0 max(18px, calc(30px * var(--scale))); gap: max(10px, calc(18px * var(--scale))); }
.practice-header h2 { margin: 0; font-size: clamp(15px, calc(19px * var(--scale)), 20px); white-space: nowrap; }
.practice-header h2 span { font-weight: 450; }
.practice-back { background: transparent; border-color: transparent; }
.practice-progress { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: clamp(12px, calc(14px * var(--scale)), 15px); }
.progress-dots { display: flex; gap: 11px; margin-top: 5px; }
.progress-dots i { width: 9px; height: 9px; border: 1px solid #667684; border-radius: 50%; background: #243444; }
.progress-dots i.done { background: var(--amber); border-color: #ffd784; box-shadow: 0 0 8px rgba(246,181,66,.65); }
.practice-header .button-compact { min-height: 44px; min-width: 92px; border: 1px solid rgba(156,168,172,.27); border-radius: 11px; background: rgba(19,35,50,.74); padding: 0 13px; }
#practice-pause { margin-left: auto; background: rgba(19,35,50,.74); }

.spin-popover { position: absolute; left: max(12px, calc(var(--offset-x) + 22px)); bottom: max(12px, calc(var(--offset-y) + 18px)); width: min(290px, calc(100vw - 24px)); padding: 16px; z-index: 20; background: rgba(15,30,43,.98); border: 1px solid rgba(198,160,106,.45); border-radius: 18px; box-shadow: 0 20px 55px rgba(0,0,0,.5); pointer-events: auto; }
.popover-header, .modal-header { display: flex; justify-content: space-between; align-items: center; }
.spin-popover p { font-size: 13px; line-height: 1.45; color: #b9c2c3; margin: 5px 0 13px; }
.spin-pad { position: relative; width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 36% 31%, #fffefa, #eee5d1 55%, #9f9b91 100%); border: 5px solid #263748; box-shadow: inset -10px -12px 22px rgba(0,0,0,.16), 0 6px 22px rgba(0,0,0,.35); touch-action: none; }
.spin-pad::before, .spin-pad::after { content:""; position:absolute; background:rgba(9,18,29,.16); pointer-events:none; }
.spin-pad::before { width:1px; height:78%; left:50%; top:11%; }
.spin-pad::after { height:1px; width:78%; top:50%; left:11%; }
#spin-marker { position: absolute; z-index: 2; left: calc(50% - 7px); top: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #9d2732; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.spin-labels { display: flex; align-items: center; justify-content: space-between; color: #879398; font-size: 9px; letter-spacing: .12em; }
.spin-labels .button { font-size: 12px; min-height: 36px; }

.modal-layer { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(2,8,13,.67); backdrop-filter: blur(5px); pointer-events: auto; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.modal { width: min(390px, 94vw); max-height: calc(100vh - 24px); overflow: auto; padding: 27px; border-radius: 21px; background: linear-gradient(155deg, #172b3d, #0e1d2a 64%, #0a1722); border: 1px solid rgba(198,160,106,.4); box-shadow: 0 28px 80px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.05); text-align: center; }
.modal h2 { margin: 3px 0 8px; font-size: 30px; font-weight: 620; }
.modal > p { color: #b4bec0; margin: 0 0 20px; }
.modal > .button { width: 100%; margin-top: 9px; }
.modal-kicker { color: var(--amber); letter-spacing: .22em; font-size: 10px; font-weight: 750; }
.modal-header { text-align: left; margin-bottom: 15px; }
.modal-header h2 { margin: 2px 0 0; }
.modal-header .icon-button, .popover-header .icon-button { background: transparent; border-color: transparent; }
.modal-settings { width: min(520px, 95vw); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 11px 4px; border-top: 1px solid rgba(156,168,172,.12); text-align: left; }
.setting-row > span { flex: 1; }
.setting-row small { display: block; color: #87959a; font-size: 11px; margin-top: 3px; }
.setting-row input[type="range"] { flex: 0 1 160px; min-width: 90px; accent-color: var(--amber); }
.setting-row output { width: 38px; color: var(--amber); font-size: 12px; }
input[role="switch"] { width: 48px; height: 27px; accent-color: var(--amber); }
.modal-rules { width: min(650px, 95vw); text-align: left; }
.rules-copy { max-height: min(430px, calc(100vh - 220px)); overflow: auto; padding-right: 7px; color: #ced5d4; font-size: 14px; line-height: 1.48; touch-action: pan-y; overscroll-behavior: contain; }
.rules-copy h3 { color: #f0e2c5; margin: 15px 0 3px; }
.rules-copy p { margin: 4px 0; }
.rules-note { color: #90a0a3; border-left: 2px solid var(--amber); padding-left: 11px; margin-top: 18px !important; }
.result-icon { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 13px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #434548, #08090a 67%); border: 2px solid #c6a06a; font: 700 28px Georgia,serif; box-shadow: 0 10px 27px rgba(0,0,0,.5); }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.confirm-actions .button { width: 100%; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }

.toast { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%); max-width: min(520px, 90vw); padding: 11px 18px; border-radius: 999px; background: rgba(17,30,44,.96); border: 1px solid rgba(198,160,106,.38); box-shadow: 0 9px 30px rgba(0,0,0,.36); font-size: 13px; pointer-events: none; }
.qa-status { position: absolute; z-index: 90; left: 5px; top: 5px; max-width: 70vw; padding: 5px 8px; color: #062016; background: rgba(134,255,194,.92); border: 1px solid #fff; border-radius: 4px; font: 11px/1.3 ui-monospace,monospace; white-space: pre-wrap; pointer-events: none; }
#orientation-note { display: none; position: absolute; z-index: 100; inset: 0; align-items: center; justify-content: center; flex-direction: column; gap: 7px; background: var(--navy); text-align: center; }
#orientation-note span { color: var(--muted); }

@media (orientation: portrait) and (max-width: 800px) {
  #orientation-note { display: flex; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .button, .icon-button { min-height: 44px; min-width: 44px; }
  .match-header, .practice-header { left: 0; width: 100%; height: 52px; }
  .player-card { min-width: 155px; }
  .player-avatar { width: 34px; height: 34px; min-width: 34px; }
  .mode-label { display: none; }
  .practice-progress { top: 2px; }
  .practice-header h2 span { display: none; }
  .practice-header .button-compact { min-width: 48px; padding: 0 10px; }
  .practice-header .button-compact span { display: none; }
  .modal { padding: 16px 20px; }
  .modal h2 { font-size: 23px; }
  .modal > p { margin-bottom: 9px; }
  .modal > .button { margin-top: 5px; }
  .setting-row { min-height: 46px; padding: 5px 3px; }
  .rules-copy { max-height: calc(100vh - 160px); }
  .spin-popover { bottom: 5px; width: 390px; padding: 10px; }
  .spin-popover p { display: none; }
  .spin-pad { width: 115px; height: 115px; }
  .home-menu { height: auto !important; }
  .brand-mark { display: none; }
  .home-menu h1 { font-size: 32px; line-height: 1; }
  .home-menu > p { margin: 7px 0 10px; max-width: 155px; font-size: 12px; line-height: 1.2; }
  .button-large { width: 148px; min-height: 38px !important; margin-bottom: 4px !important; font-size: 13px; }
  #new-match { min-height: 24px; margin: -1px 0 0; padding: 1px 5px; font-size: 11px; align-self: flex-start; }
  .home-links { position: fixed; left: 0; right: 0; bottom: 2px; z-index: 4; justify-content: center; margin: 0; gap: 18px; }
  .button-icon-text { min-height: 44px; padding: 4px 8px; font-size: 12px; }
  .button-icon-text span { width: 26px; height: 26px; }
  .spin-button > span { width: 42px; height: 42px; margin-bottom: 1px; }
  .spin-button small { font-size: 10px; }
  .power-control { border-radius: 12px; padding: 6px 4px; }
  .power-control input[type="range"] { min-height: 105px; }
  .shoot-button { width: 90px !important; padding: 0 10px; }
  .status-line { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .profile-strip { top:4px; right:4px; min-height:44px; padding:3px 7px; grid-template-columns:32px minmax(80px,auto); }.profile-strip .player-avatar { width:30px;height:30px;font-size:14px; }.profile-strip small { font-size:9px; }
  .guide-legend { top:53px; bottom:auto; padding:3px 7px; font-size:8px; }.guide-legend small { display:none; }
  .coach-overlay { left:68px; top:58px; width:230px; padding:9px 11px; }.coach-overlay p { font-size:10px; }.coach-overlay .button { min-height:32px; }
  .last-shot { left:4px; top:54px; max-width:290px; font-size:9px; }.last-shot summary { min-height:32px; padding:8px 10px 6px; }.last-shot p { padding:0 10px 8px; }
  .modal-wide { max-height:96vh; width:min(690px,96vw); padding:14px 18px; }.modal-wide h2 { font-size:20px; }.difficulty-grid,.card-list { gap:7px; margin-top:7px; }.choice-card,.challenge-card { min-height:77px; padding:8px; }.choice-card small,.challenge-card small { margin-top:2px; font-size:9px; }.challenge-card em { margin-top:4px; }.profile-head { grid-template-columns:46px 1fr auto; margin:3px 0 6px; }.profile-avatar { width:44px;height:44px;font-size:18px; }.stat-grid { margin:6px 0; }.modal-wide h3 { margin:6px 0 3px; }.account-card { margin-top:6px;padding:7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Online lobby: explicit random matchmaking + friend invites. */
.online-modal { width:min(720px,96vw); }
.online-intro { margin:0 0 14px; color:#b7c1c2; font-size:13px; line-height:1.45; text-align:left; }
.online-auth { display:block; }
.account-signin { margin-top:14px; border-top:1px solid rgba(156,168,172,.14); padding-top:10px; text-align:left; }
.account-signin summary { cursor:pointer; color:#c4cdcf; font-size:12px; }
.account-signin-body { display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px; margin-top:10px; }
.account-signin-body > label { min-width:0; }
.account-signin-body .code-row,.account-signin-body .privacy-copy { grid-column:1/-1; }
.online-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.online-choice { min-width:0; padding:16px; border:1px solid rgba(156,168,172,.19); border-radius:16px; background:linear-gradient(155deg,rgba(18,45,58,.86),rgba(8,27,38,.84)); text-align:left; }
.online-choice.random-choice { border-color:rgba(246,181,66,.34); box-shadow:inset 0 1px rgba(255,255,255,.03); }
.online-choice-kicker { color:var(--amber); letter-spacing:.16em; font-size:10px; font-weight:800; }
.online-choice h3 { margin:5px 0 5px; color:#f1eadb; font-size:20px; }
.online-choice p { min-height:38px; margin:0 0 13px; color:#aeb9bb; font-size:12px; line-height:1.45; }
.online-choice .matchmaking-actions { grid-template-columns:1fr; }
.online-choice .matchmaking-actions small { grid-column:1; }
.online-choice .room-actions { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; }
.online-choice .room-actions > button:first-child { grid-column:1/-1; }
.online-choice .room-actions label { min-width:0; }
.online-resume { width:100%; margin:0 0 12px; }
.room-wait { margin:14px 0 8px; font-size:13px; line-height:1.5; }
.room-wait strong { color:#ffd789; font-size:18px; letter-spacing:.06em; }
.danger-outline { width:100%; border-color:rgba(234,105,95,.45); color:#f2b0a8; }
.online-signout { display:block; margin:7px auto 0; }
@media (max-width:760px), (max-height:460px) {
  .online-modal { width:min(680px,97vw); padding:18px; }
  .online-choice-grid { gap:9px; }
  .online-choice { padding:12px; }
  .online-choice h3 { font-size:17px; }
  .online-choice p { min-height:0; font-size:11px; }
  .online-choice .room-actions { grid-template-columns:1fr; }
  .online-choice .room-actions > button:first-child { grid-column:1; }
}


/* Google Play Games integration */
.play-games-panel { margin: 10px 0 14px; padding: 13px; border: 1px solid rgba(84,201,154,.26); border-radius: 14px; background: rgba(8,45,37,.45); text-align:left; }
.play-games-head,.friends-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.play-games-head small,.friends-title small { display:block; color:var(--amber); font-size:10px; letter-spacing:.15em; }
.play-games-head strong,.friends-title strong { display:block; color:var(--ivory); margin-top:3px; }
.play-games-panel p,.play-games-friends p { margin:8px 0; color:#aebbbc; font-size:12px; line-height:1.4; }
.play-games-panel .button { margin-top:5px; }
.play-games-friends { margin-top:13px; padding:12px; border:1px solid rgba(156,168,172,.18); border-radius:14px; background:rgba(10,27,39,.72); text-align:left; }
.play-games-friends-list { display:grid; gap:7px; max-height:170px; overflow:auto; margin-top:8px; }
.play-games-friend { display:flex; align-items:center; gap:9px; min-height:48px; padding:7px 8px; border-radius:10px; background:rgba(255,255,255,.035); }
.play-games-friend img { width:34px; height:34px; border-radius:50%; object-fit:cover; background:#243444; }
.play-games-friend .friend-copy { flex:1; min-width:0; }
.play-games-friend strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.play-games-friend small { color:#92a0a4; }
.play-games-friend .button { min-height:34px; padding:5px 10px; }
.incoming-play-games-invites { margin-top:11px; padding:10px; border:1px solid rgba(246,181,66,.32); border-radius:12px; background:rgba(75,50,12,.32); }
.incoming-play-games-invites strong { display:block; margin-bottom:7px; }
.incoming-play-games-invites .invite-actions { display:flex; gap:8px; }

/* In-match chat is independent of the mapped pool controls and modal stack. */
.match-chat { position:fixed; inset:0; z-index:22; pointer-events:none; }
.chat-toggle { position:absolute; right:max(12px,env(safe-area-inset-right)); top:max(76px,env(safe-area-inset-top)); min-height:44px; min-width:80px; padding:9px 14px; border:1px solid var(--amber); border-radius:14px; background:#10232f; color:var(--ivory); font:600 14px system-ui,sans-serif; pointer-events:auto; cursor:pointer; }
.chat-badge { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 4px; margin-left:4px; border-radius:20px; color:#10232f; background:var(--amber); }
.chat-panel { position:fixed; right:max(10px,env(safe-area-inset-right)); top:calc(var(--chat-top,0px) + max(8px,env(safe-area-inset-top))); width:min(390px,calc(100vw - 20px)); height:min(560px,calc(var(--chat-vh,100dvh) - 16px)); max-height:calc(100vh - 16px); display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid rgba(198,160,106,.65); border-radius:16px; background:rgba(9,23,33,.98); box-shadow:0 15px 55px rgba(0,0,0,.5); color:var(--ivory); pointer-events:auto; overflow:auto; touch-action:pan-y; font:13px/1.4 system-ui,sans-serif; }
.chat-panel button { min-height:36px; padding:7px 10px; border:1px solid #5a6e78; border-radius:8px; background:#19323e; color:var(--ivory); cursor:pointer; font:inherit; }
.chat-panel button:disabled { opacity:.5; cursor:not-allowed; }
.chat-panel button:focus-visible,.chat-panel input:focus-visible,.chat-panel select:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.chat-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chat-header strong { display:block; color:#f4d49b; font-size:17px; }
.chat-header small { display:block; color:#b9c6ca; font-size:10px; }
#chat-close { min-width:44px; min-height:44px; font-size:23px; }
.chat-toolbar { display:flex; gap:6px; }
.chat-toolbar button { flex:1; font-size:11px; }
.chat-log { flex:1 1 160px; min-height:60px; overflow-y:auto; overscroll-behavior:contain; padding:4px; border-radius:9px; background:#08141d; touch-action:pan-y; user-select:text; }
.chat-message { max-width:92%; padding:8px 10px; margin:0 0 7px; border-radius:11px 11px 11px 3px; background:#193540; overflow-wrap:anywhere; }
.chat-message-mine { margin-left:auto; border-radius:11px 11px 3px 11px; background:#334034; }
.chat-message-meta { display:flex; gap:12px; align-items:baseline; justify-content:space-between; color:#d8c294; font-size:10px; }
.chat-message-meta strong { min-width:0; overflow-wrap:anywhere; }
.chat-message time { color:#acb7bd; flex:none; font-size:9px; }
.chat-message p { margin:4px 0 0; white-space:pre-wrap; }
.chat-panel .chat-report-message { min-height:26px; padding:2px 5px; margin-top:4px; border:none; background:transparent; color:#b8c4ca; font-size:10px; }
.chat-empty { padding:12px; margin:0; color:#afbec4; }
.chat-rules { padding:8px; border-radius:9px; background:#27332d; }
.chat-rules p { margin:0 0 6px; font-size:11px; line-height:1.4; }
.chat-rules button { width:100%; }
.chat-quick { display:flex; flex:none; gap:6px; overflow-x:auto; padding:2px; touch-action:pan-x; }
.chat-quick-button { flex:none; font-size:11px !important; }
.chat-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 6px; }
.chat-input-label { grid-column:1/-1; font-size:10px; color:#afbec4; }
#chat-input { width:100%; min-width:0; min-height:40px; padding:7px 9px; border:1px solid #6d7a76; border-radius:8px; background:#071722; color:var(--ivory); user-select:text; touch-action:auto; font:16px system-ui,sans-serif; }
#chat-send,#chat-accept { border-color:var(--amber); }
#chat-count { grid-column:1/-1; text-align:right; color:#afbec4; font-size:10px; }
.chat-status-row { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
#chat-status { flex:1 0 100%; margin:0; color:#d3c5a8; font-size:10px; }
.chat-report-form { padding:8px; background:#302e2a; border:1px solid #95724c; border-radius:8px; }
.chat-report-form select { width:100%; padding:5px; margin:4px 0; background:#142934; color:var(--ivory); font:inherit; }
@media (max-height:430px) {
  .chat-panel { gap:4px; padding:8px; width:min(370px,calc(100vw - 20px)); }
  .chat-header strong { font-size:14px; }
  .chat-header small { font-size:9px; }
  .chat-toolbar button { min-height:30px; padding:3px 8px; }
  .chat-log { flex-basis:80px; min-height:50px; }
  .chat-input-label { display:none; }
  .chat-panel .chat-quick-button { min-height:30px; padding:3px 7px; }
}

/* Player identity does not alter table/physics coordinates. */
.player-avatar,.profile-avatar,.chat-profile-avatar,.chat-message-avatar { overflow:hidden; }
.player-avatar img,.profile-avatar img,.chat-profile-avatar img,.chat-message-avatar img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.match-header .player-card { min-width:0; max-width:calc(44% - 36px); gap:8px; }
.match-header .player-copy { min-width:0; }
.match-header .player-copy>strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.match-career { display:block; color:#e3c38c; font-size:11px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.profile-photo-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.profile-photo-controls .button { min-height:36px; padding:6px 12px; }
.profile-photo-controls small { flex:1 1 180px; color:var(--muted); font-size:11px; }
.profile-title-picker { display:flex; align-items:center; gap:12px; font-size:13px; }
.profile-title-picker select { flex:1; min-width:0; }
.profile-sharing { display:flex; align-items:flex-start; gap:9px; margin:12px 0 4px; font-size:11px; line-height:1.5; }
.profile-sharing input { width:20px; height:20px; flex:0 0 20px; margin:0; accent-color:#dfb460; }
.profile-sync-status { min-height:2.8em; margin:4px 0 10px; font-size:12px; line-height:1.4; color:#b8dce8; }
.chat-player-cards { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:6px 0; border-bottom:1px solid #334953; }
.chat-player-mini { display:flex; gap:7px; align-items:center; min-width:0; }
.chat-player-mini>div { min-width:0; }
.chat-player-mini strong { display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-profile-level { display:block; color:#e3c38c; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-profile-avatar,.chat-message-avatar { flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#e3b767; color:#172a36; font-weight:700; }
.chat-message-avatar { width:22px; height:22px; font-size:9px; }
.chat-message-meta { align-items:center; justify-content:flex-start; gap:6px; }
.chat-message-meta>strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-message-meta time { margin-left:auto; flex-shrink:0; }
.chat-player-details { flex:0 0 auto; font-size:10px; color:#bacbd2; }
.chat-player-details summary { cursor:pointer; padding:3px 0; color:#e3c38c; }
.chat-player-details>div { padding:4px 0; }
.chat-player-details strong,.chat-player-details span { display:block; overflow-wrap:anywhere; }
.chat-player-details[open] { max-height:140px; overflow-y:auto; }
@media(max-height:450px) {
  .match-header .player-card { gap:6px; }
  .match-header .player-copy>strong { font-size:12px; line-height:1.1; }
  .match-career { font-size:9px; }
  .match-header .player-meta { gap:4px; line-height:1; }
  .match-header .score-readout { padding-top:2px; padding-bottom:2px; }
  .chat-player-cards { padding:2px 0; }
  .chat-profile-avatar { width:25px; height:25px; }
  .chat-player-mini strong { font-size:10px; }
  .chat-profile-level { font-size:9px; }
  .chat-player-details[open] { max-height:85px; }
}
@media(max-width:650px) {
  .match-header .player-card { left:10px; max-width:calc(45% - 10px); }
  .match-header .player-card.player-right { left:auto; right:10px; }
  .profile-head { grid-template-columns:44px minmax(80px,1fr) auto; gap:6px; }
  .profile-head .button { padding:0 8px; font-size:12px; }
}

/* Keep the composer reachable when profiles, rules or the keyboard take space. */
.chat-panel { overflow:hidden; }
.chat-history-area { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:4px; overflow-y:auto; touch-action:pan-y; }
.chat-history-area>.chat-header,.chat-history-area>.chat-player-cards,.chat-history-area>.chat-toolbar,.chat-history-area>.chat-rules,.chat-history-area>.chat-report-form { flex-shrink:0; }
.chat-form,.chat-status-row { flex:0 0 auto; }
@media(max-height:300px) { .chat-quick { display:none; } .chat-status-row { max-height:28px; overflow:auto; } .chat-header small { display:none; } }
#profile-modal .profile-sharing { flex-direction:row; align-items:flex-start; }
#profile-modal .profile-title-picker { flex-direction:row; }


/* FRAME full-screen table layout. These rules apply only while a table is open.
   Controls stay in side columns; no transparent shooting layer covers the cloth. */
#app:not([data-screen="home"]) .match-header,
#app:not([data-screen="home"]) .practice-header { left:0; width:100%; height:var(--game-header,52px); }
#app:not([data-screen="home"]) .player-card { left:6px; min-width:0; width:calc(50% - 38px); gap:8px; padding:0 5px; }
#app:not([data-screen="home"]) .player-card.player-right { left:auto; right:6px; }
#app:not([data-screen="home"]) .player-avatar { width:34px; height:34px; min-width:34px; font-size:17px; }
#app:not([data-screen="home"]) .player-copy { min-width:0; }
#app:not([data-screen="home"]) .player-card strong { font-size:13px; line-height:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app:not([data-screen="home"]) .player-card small { font-size:10px; line-height:12px; margin-top:0; }
#app:not([data-screen="home"]) .player-card .player-level { font-size:9px; line-height:11px; }
#app:not([data-screen="home"]) .player-meta { gap:5px; margin-top:0; }
#app:not([data-screen="home"]) .score-readout { font-size:8px; padding:0 5px; line-height:14px; }
#app:not([data-screen="home"]) .score-readout b { font-size:11px; }
#app:not([data-screen="home"]) .mode-label { display:none; }
#app:not([data-screen="home"]) .power-control { padding:7px 4px; border-radius:12px; min-width:0; overflow:hidden; }
#app:not([data-screen="home"]) .power-control label { font-size:10px; }
#app:not([data-screen="home"]) .power-control output { margin:1px 0 4px; }
#app:not([data-screen="home"]) .power-control input[type="range"] { min-height:0; height:0; width:44px; flex:1 1 auto; }
#app:not([data-screen="home"]) .shoot-button { width:calc(var(--game-column,78px) - 12px) !important; min-width:44px; padding:0 4px; font-size:12px; }
#app:not([data-screen="home"]) .pull-rail { min-height:44px; }
#app:not([data-screen="home"]) .pull-rail span { font-size:15px; }
#app:not([data-screen="home"]) .pull-rail strong { font-size:9px; }
#app:not([data-screen="home"]) .pull-rail small { font-size:8px; }
#app:not([data-screen="home"]) .spin-button > span { width:42px; height:42px; margin:0 auto 2px; }
#app:not([data-screen="home"]) .spin-button small { font-size:9px; }
#app:not([data-screen="home"]) .status-line { display:flex; align-items:center; justify-content:center; white-space:normal; overflow-wrap:anywhere; font-size:11px; line-height:1.3; color:#c4d2d5; text-wrap:balance; }
#app:not([data-screen="home"]) .guide-legend { top:calc(var(--game-header,52px) + 7px); padding:2px 8px; font-size:8px; }
#app:not([data-screen="home"]) .guide-legend small { display:none; }
#app:not([data-screen="home"]) .chat-toggle { top:calc(var(--game-header,52px) + 6px); left:6px; right:auto; width:calc(var(--game-column,78px) - 12px); min-width:44px; min-height:44px; padding:6px 3px; font-size:12px; }
#app:not([data-screen="home"]) .chat-badge { position:absolute; top:-5px; right:-3px; min-width:18px; height:18px; margin:0; font-size:10px; border:1px solid #10232f; }
#app:not([data-screen="home"]) .last-shot { left:6px; top:calc(var(--game-header,52px) + 6px); width:calc(var(--game-column,78px) - 12px); font-size:10px; }
#app[data-screen="online"] .last-shot { top:calc(var(--game-header,52px) + 56px); }
#app:not([data-screen="home"]) .last-shot summary { min-height:44px; padding:10px 5px; }
#app:not([data-screen="home"]) .last-shot[open] { width:min(340px,calc(100vw - 20px)); z-index:24; }
#app:not([data-screen="home"]) .last-shot p { padding:0 10px 10px; }
#app:not([data-screen="home"]) .coach-overlay { left:calc(var(--game-column,78px) + 8px); top:calc(var(--game-header,52px) + 28px); }
#app:not([data-screen="home"]) .spin-popover { left:6px; bottom:6px; }
@media (max-height:299px) {
  #app:not([data-screen="home"]) .status-line { display:none; }
  #app:not([data-screen="home"]) .power-control { padding:4px; }
  #app:not([data-screen="home"]) .power-control label { display:none; }
  #app:not([data-screen="home"]) .power-control output { font-size:9px; margin:0 0 1px; }
}

/* Neutral age screen: no default date, no hints about unlock ages. */
.age-screen{padding:14px;border:1px solid rgba(255,199,81,.3);border-radius:16px;margin-bottom:12px;background:rgba(0,0,0,.12)}
.age-screen h3{margin:0 0 8px}.age-screen p{font-size:14px;line-height:1.45}
.age-fields{display:flex;gap:12px;margin:12px 0}.age-fields label{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px}.age-fields input{width:100%;min-height:44px}
#age-continue,#age-offline{min-height:44px}#age-message{color:var(--gold,#ffc84c)}
@media(max-height:390px){.age-screen{padding:10px}.age-screen p{font-size:12px;margin:6px 0}.age-fields{margin:8px 0}}

.age-fields input {width:100%;font:inherit;font-size:16px;min-height:44px;padding:8px 10px;background:#061f2c;color:#edf7f8;border:1px solid #506775;border-radius:8px;}
.age-fields input:focus {outline:2px solid #ffc34c;outline-offset:2px;}

/* Age-memory player chooser: wraps without shrinking tap targets. */
.age-player-choices {display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.age-player-choices .button {min-height:44px;flex:1 1 160px;}
#age-date-setup .age-fields {margin:8px 0;}
#age-restore-pgs {margin:8px 0;}