body { font-family: 'Quicksand', sans-serif; }
[hidden] { display: none !important; }
#beta-report-trigger { display: none !important; }

#apPage { --ap-accent: #34d399; --ap-bg: #05080f; padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); box-sizing: border-box; display: flex; justify-content: center; }
.ap-card { width: 100%; max-width: 1180px; display: flex; flex-direction: column; gap: 8px; color: #e2e8f0; }

.ap-hud { display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap; background: linear-gradient(180deg, #0c1424, #070b14); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 8px 10px; }
.ap-stat { display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 1 1 0; }
.ap-l { font-size: 10px; letter-spacing: 1.5px; color: #64748b; font-weight: 700; white-space: nowrap; }
.ap-v { font-size: 22px; font-weight: 800; color: var(--ap-accent); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(52,211,153,.35); white-space: nowrap; }
.ap-strikes { letter-spacing: 3px; font-size: 18px; }
.ap-strikes .x { color: #ef4444; text-shadow: 0 0 10px rgba(239,68,68,.7); }

.ap-stage { position: relative; width: 100%; background: var(--ap-bg); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 40px -18px var(--ap-accent); margin: 0 auto; touch-action: none; }
#apCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

.ap-banner { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); padding: 10px 22px; border-radius: 999px; background: rgba(5,8,15,.82); border: 1px solid var(--ap-accent); color: #fff; font-weight: 800; letter-spacing: 2px; font-size: 14px; text-align: center; pointer-events: none; animation: apPop .5s ease-out both; max-width: 92%; box-shadow: 0 0 24px -4px var(--ap-accent); }
.ap-ready { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ap-ready span { padding: 12px 24px; border-radius: 999px; background: rgba(5,8,15,.78); border: 1px solid var(--ap-accent); font-weight: 800; letter-spacing: 3px; animation: apBlink 1.2s ease-in-out infinite; }
.ap-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 800; color: #fff; text-shadow: 0 0 30px var(--ap-accent); pointer-events: none; }

.ap-ov { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #05080f; padding: 16px; box-sizing: border-box; }
.ap-ov > :first-child { margin-top: auto; }
.ap-ov > :last-child { margin-bottom: auto; }
.ap-start { background: radial-gradient(120% 90% at 50% 0%, #0f2a2a 0%, #05080f 62%); }
.ap-start-in, .ap-ov-in { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; text-align: center; }
.ap-kicker { font-size: 11px; letter-spacing: 4px; color: #64748b; font-weight: 800; }
.ap-title { margin: 0; font-size: 40px; letter-spacing: 5px; font-weight: 800; color: #f8fafc; text-shadow: 0 0 26px rgba(52,211,153,.55); }
.ap-tag { margin: 0; font-size: 13px; color: #94a3b8; font-weight: 600; }
.ap-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.ap-mode { font: inherit; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #e2e8f0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.ap-mode b { font-size: 15px; letter-spacing: 1px; }
.ap-mode i { font-style: normal; font-size: 11px; color: #94a3b8; font-weight: 600; }
.ap-mode[aria-checked="true"] { border-color: var(--ap-accent); background: rgba(52,211,153,.14); box-shadow: 0 0 18px -6px var(--ap-accent); }
.ap-modes-s .ap-mode { padding: 8px 10px; }
.ap-desc { font-size: 12.5px; color: #cbd5e1; min-height: 34px; font-weight: 600; line-height: 1.4; }
.ap-best { font-size: 12px; color: #fbbf24; font-weight: 800; letter-spacing: 1px; min-height: 16px; }
.ap-play, .ap-btn { font: inherit; font-weight: 800; letter-spacing: 3px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; padding: 13px 24px; cursor: pointer; width: 100%; max-width: 320px; }
.ap-play, .ap-primary { background: var(--ap-accent); border-color: transparent; color: #04120c; box-shadow: 0 8px 22px -6px var(--ap-accent); }
.ap-play:active, .ap-btn:active { transform: scale(.98); }
.ap-pause, .ap-opts { background: #05080f; }
.ap-ov h2 { margin: 0; letter-spacing: 4px; font-size: 20px; color: var(--ap-accent); }
.ap-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.ap-row-h { align-self: flex-start; font-size: 11px; letter-spacing: 2px; color: #64748b; font-weight: 800; }
.ap-tog { font: inherit; font-weight: 800; font-size: 12px; letter-spacing: 1px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #e2e8f0; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.ap-tog[aria-pressed="true"] { background: var(--ap-accent); color: #04120c; border-color: transparent; }
#trophy-list { width: 100%; max-height: 42vh; overflow-y: auto; text-align: left; flex-shrink: 0; }

.ap-bar { display: flex; gap: 8px; align-items: center; background: linear-gradient(180deg, #0c1424, #070b14); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 8px 10px; }
.ap-sel { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-sel b { color: #f8fafc; }
.ap-chip { font: inherit; font-weight: 800; font-size: 12px; letter-spacing: 1px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); color: #e2e8f0; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.ap-chip:disabled { opacity: .4; cursor: default; }
.ap-chip.on { background: #f59e0b; color: #1c1002; border-color: transparent; }

@keyframes apPop { from { opacity: 0; transform: translateX(-50%) scale(.85); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes apBlink { 50% { opacity: .45; } }

#apPage.compact .ap-v { font-size: 18px; }
#apPage.compact .ap-title { font-size: 30px; }
#apPage.tight .ap-hud { gap: 4px; padding: 6px; }
#apPage.tight .ap-l { font-size: 8.5px; letter-spacing: 1px; }
#apPage.tight .ap-v { font-size: 16px; }
#apPage.tight .ap-sel { display: none; }
#apPage.tight .ap-bar { gap: 5px; padding: 6px; }
#apPage.tight .ap-chip { padding: 9px 4px; font-size: 10.5px; letter-spacing: 0; flex: 1 1 0; min-width: 0; }
#apPage.land .ap-card { flex-direction: row; align-items: stretch; }
#apPage.land .ap-hud { flex-direction: column; width: 120px; flex-shrink: 0; justify-content: space-around; }
#apPage.land .ap-bar { flex-direction: column; width: 110px; flex-shrink: 0; }
#apPage.land .ap-sel { display: none; }
#apPage.land .ap-title { font-size: 26px; }

@media (prefers-reduced-motion: reduce) { .ap-banner, .ap-ready span { animation: none; } }