/* assets/css/orbit.css - Noos Orbit */
body { font-family: 'Quicksand', sans-serif; }
:root {
    --or-bg: #070a12; --or-surface: #0f1629; --or-line: rgba(255,255,255,.09);
    --or-cyan: #06b6d4; --or-magenta: #d946ef; --or-gold: #fde047; --or-text: #f1f5f9; --or-mute: #94a3b8;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0; background: var(--or-bg); color: var(--or-text);
    display: flex; flex-direction: column; height: 100dvh; overflow: hidden; overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}
.header-container { width: 100%; flex-shrink: 0; background: #05070f; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#beta-report-trigger { display: none !important; }

.or-main { flex: 1; min-height: 0; display: flex; padding: 6px 12px max(8px, env(safe-area-inset-bottom)); }
.or-app {
    --sz: 360px; position: relative; width: 100%; max-width: 780px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}

/* HUD */
.or-hud { width: var(--sz); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.or-hud-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.or-chip { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--or-cyan); background: rgba(6,182,212,.12); border: 1px solid rgba(6,182,212,.3); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.or-sector { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: var(--or-mute); white-space: nowrap; }
.or-hud-c { display: flex; align-items: baseline; gap: 5px; }
.or-star-ic { color: var(--or-gold); font-size: 22px; text-shadow: 0 0 14px rgba(253,224,71,.7); }
.or-stars { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 18px rgba(6,182,212,.45); }
.or-hud-r { display: flex; justify-content: flex-end; }
.or-lives { display: flex; gap: 3px; font-size: 22px; line-height: 1; }
.or-lives.zen { font-size: 26px; color: var(--or-cyan); font-weight: 800; }
.or-heart { color: #334155; transition: color .2s, transform .2s; }
.or-heart.on { color: #fb7185; text-shadow: 0 0 12px rgba(251,113,133,.7); }

/* Stage */
.or-stage { position: relative; width: var(--sz); height: var(--sz); flex: none; }
#orCanvas {
    display: block; width: 100%; height: 100%; touch-action: none; border-radius: 22px; outline: none;
    border: 1px solid var(--or-line); background: #070a12;
    box-shadow: 0 24px 50px -14px rgba(0,0,0,.75), 0 0 46px rgba(6,182,212,.07);
}
#orCanvas:focus-visible { box-shadow: 0 0 0 3px rgba(253,224,71,.65); }
.or-msg {
    width: var(--sz); min-height: 18px; margin: -2px 0 -4px; text-align: center; pointer-events: none;
    font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #a5f3fc; opacity: 0; transition: opacity .25s;
}
.or-msg.on { opacity: 1; }

/* Bottom bar */
.or-bar { width: var(--sz); display: flex; flex-direction: column; gap: 8px; }
.or-parrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.or-pips { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.or-pip { width: 16px; height: 7px; border-radius: 4px; opacity: .3; transition: opacity .15s, box-shadow .15s; }
.or-pip.z3 { background: #fde047; } .or-pip.z2 { background: #a5b4fc; } .or-pip.z1 { background: #fb923c; } .or-pip.zx { background: #f43f5e; }
.or-pip.on { opacity: 1; box-shadow: 0 0 8px currentColor; }
.or-pip.z3.on { box-shadow: 0 0 8px #fde047; } .or-pip.z2.on { box-shadow: 0 0 8px #a5b4fc; } .or-pip.z1.on { box-shadow: 0 0 8px #fb923c; }
.or-par { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; color: var(--or-mute); white-space: nowrap; }
.or-btns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.or-tb {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 46px; padding: 5px 2px;
    font-family: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; white-space: nowrap; color: #cbd5e1; cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid var(--or-line); border-radius: 12px; transition: transform .1s, background .2s, opacity .2s;
}
.or-tb span { font-size: 16px; line-height: 1; }
.or-tb:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.or-tb:active:not(:disabled) { transform: scale(.95); }
.or-tb:disabled { opacity: .35; cursor: default; }
.or-tb:focus-visible, .or-btn:focus-visible, .or-pill:focus-visible, .or-mode:focus-visible, .or-pal:focus-visible { outline: 2px solid var(--or-gold); outline-offset: 2px; }

/* Layout variants */
.or-app.tight .or-btns { grid-template-columns: repeat(3, 1fr); }
.or-app.tight .or-stars { font-size: 28px; }
.or-app.compact .or-tb { min-height: 38px; }
.or-app.compact .or-tb span { display: none; }
.or-app.land { display: grid; grid-template-columns: var(--sz) minmax(190px, 1fr); grid-template-rows: auto auto 1fr; gap: 8px 14px; align-content: center; justify-items: stretch; }
.or-app.land .or-stage { grid-column: 1; grid-row: 1 / 4; align-self: center; }
.or-app.land .or-msg { grid-column: 2; grid-row: 3; width: auto; margin: 0; text-align: left; }
.or-app.land .or-hud { grid-column: 2; grid-row: 1; width: auto; align-self: end; }
.or-app.land .or-bar { grid-column: 2; grid-row: 2; width: auto; align-self: start; }
.or-app.land .or-btns { grid-template-columns: repeat(3, 1fr); }
.or-app.land .or-tb { min-height: 40px; }
.or-app.land .or-tb span { display: block; }

/* Overlays (cover the whole game card; scroll if tall) */
.or-ov {
    position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 24px;
    background: rgba(5,8,18,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.or-ov > :first-child { margin-top: auto; }
.or-ov > :last-child { margin-bottom: auto; }
.or-opts { background: #090d1b; backdrop-filter: none; }
.or-count { background: rgba(5,8,18,.55); justify-content: center; }
.or-count-n { font-size: 110px; font-weight: 800; color: var(--or-gold); text-shadow: 0 0 40px rgba(253,224,71,.6); animation: orPop .7s ease-out infinite; }
.or-ov-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; padding: 6px 0; }
.or-wide { max-width: 380px; }
.or-logo { font-size: 44px; line-height: 1; }
.or-h1 { margin: 0; font-size: 44px; font-weight: 800; letter-spacing: 8px; padding-left: 8px; background: linear-gradient(90deg, #67e8f9, #e879f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.or-h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 4px; color: #fff; }
.or-tag { margin: 0; font-size: 13px; font-weight: 700; color: var(--or-mute); }
.or-desc { margin: 0; min-height: 36px; font-size: 13px; font-weight: 600; color: #cbd5e1; line-height: 1.4; }
.or-best { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--or-gold); }
.or-lbl { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--or-mute); margin-top: 4px; }
.or-sub { font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .75; }
.or-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.or-mode { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; font-family: inherit; color: #cbd5e1; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid var(--or-line); border-radius: 14px; transition: background .2s, border-color .2s, transform .1s; }
.or-mode-n { font-size: 15px; font-weight: 800; letter-spacing: .5px; }
.or-mode-s { font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; opacity: .6; }
.or-mode.on { background: rgba(6,182,212,.16); border-color: var(--or-cyan); color: #fff; box-shadow: 0 0 18px -4px var(--or-cyan); }
.or-mode:active { transform: scale(.97); }
.or-btn { padding: 13px 10px; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: 1.6px; color: #fff; cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; transition: transform .1s, background .2s; }
.or-btn:hover { background: rgba(255,255,255,.14); }
.or-btn:active { transform: scale(.97); }
.or-primary { background: linear-gradient(90deg, #0891b2, #06b6d4); border-color: transparent; box-shadow: 0 8px 22px -6px rgba(6,182,212,.7); }
.or-primary:hover { filter: brightness(1.1); background: linear-gradient(90deg, #0891b2, #06b6d4); }
.or-ghost { background: transparent; color: #cbd5e1; }
.or-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; font-size: 14px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.06); text-align: left; }
.or-pill { min-width: 66px; padding: 7px 12px; font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; white-space: nowrap; color: #fff; cursor: pointer; background: rgba(6,182,212,.18); border: 1px solid rgba(6,182,212,.45); border-radius: 999px; }
.or-pill.warn { background: rgba(244,63,94,.16); border-color: rgba(244,63,94,.5); }
#trophy-list { width: 100%; max-height: 40vh; overflow-y: auto; text-align: left; margin: 4px 0 8px; }
.or-pals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.or-pal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; font-family: inherit; color: #cbd5e1; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid var(--or-line); border-radius: 14px; }
.or-pal.on { border-color: var(--or-gold); background: rgba(253,224,71,.08); color: #fff; }
.or-pal.lock { opacity: .45; cursor: default; }
.or-pal-dots { display: flex; gap: 5px; }
.or-pal-dots i { width: 16px; height: 16px; border-radius: 50%; display: block; box-shadow: 0 0 8px currentColor; }
.or-pal-n { font-size: 12px; font-weight: 800; letter-spacing: .5px; }
.or-pal-s { font-size: 10px; font-weight: 800; min-height: 12px; color: var(--or-gold); }
@keyframes orPop { 0% { transform: scale(1.35); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(.9); opacity: .9; } }

@media (max-height: 430px) { .or-logo, .or-tag { display: none; } }
@media (max-height: 640px) { .or-h1 { font-size: 34px; } .or-logo { font-size: 32px; } .or-ov-card { gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .or-count-n { animation: none; } .or-msg { transition: none; } }