/* ==========================================================================
ARA-X design system. Two themes share one component set via CSS custom
properties: the admin builder/GM dashboard keep the original light
ocean-teal look (:root defaults, internal tools); the player-facing app
(home/shop/checkout/lobby/play/results) runs the ARA-X dark navy + neon
cyan "AR/HUD" theme via the .iq-theme-dark scope further down — see
views/layout.php for how a page picks up that class.
========================================================================== */
:root {
--iq-primary: #0f6f6f;
--iq-primary-dark: #0a5555;
--iq-primary-light: #e3f4f3;
--iq-accent: #ff8a65;
--iq-ink: #16211f;
--iq-muted: #62706d;
--iq-bg: #f5f8f8;
--iq-surface: #ffffff;
--iq-border: rgba(16, 30, 28, .08);
--iq-card-radius: 1.25rem;
--iq-pill: 999px;
--iq-ease: cubic-bezier(.22, .8, .35, 1);
--iq-shadow-xs: 0 1px 2px rgba(16, 30, 28, .04), 0 1px 1px rgba(16, 30, 28, .03);
--iq-shadow-sm: 0 1px 2px rgba(16, 30, 28, .04), 0 4px 14px rgba(16, 30, 28, .07);
--iq-shadow-md: 0 2px 4px rgba(16, 30, 28, .05), 0 14px 34px rgba(16, 30, 28, .12);
--iq-shadow-lg: 0 4px 10px rgba(16, 30, 28, .08), 0 24px 48px rgba(16, 30, 28, .16);
--iq-glow-sm: var(--iq-shadow-sm);
--iq-glow-lg: var(--iq-shadow-lg);
--iq-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
/* Subtle fractal-noise grain — layered under gradients so they read as a
designed, textured surface instead of a flat placeholder swatch. */
--iq-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
/* Faint nested-diamond lattice, echoing Pacific tapa-cloth/tivaevae
geometric motifs — a genuine cultural nod instead of generic noise,
kept very low-opacity so it reads as texture, not wallpaper. */
--iq-tapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='white' stroke-width='1' opacity='0.16'%3E%3Cpath d='M42 6L78 42L42 78L6 42Z'/%3E%3Cpath d='M42 24L60 42L42 60L24 42Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* ARA-X dark theme: navy base, neon-cyan accent, HUD/scanner motifs —
applied by adding .iq-theme-dark to (player-facing pages only). */
body.iq-theme-dark {
--iq-primary: #2dd7e6;
--iq-primary-dark: #12a3b3;
--iq-primary-light: rgba(45, 215, 230, .14);
--iq-accent: #ffb648;
--iq-ink: #eaf6f8;
--iq-muted: #86aab5;
--iq-bg: #06141d;
--iq-surface: #0e2530;
--iq-border: rgba(94, 214, 230, .22);
--iq-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
--iq-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .35);
--iq-shadow-md: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 40px rgba(0, 0, 0, .4);
--iq-shadow-lg: 0 6px 16px rgba(0, 0, 0, .4), 0 28px 64px rgba(0, 0, 0, .5);
--iq-glow-sm: 0 0 0 1px rgba(45, 215, 230, .3), 0 0 16px rgba(45, 215, 230, .25);
--iq-glow-lg: 0 0 0 1px rgba(45, 215, 230, .35), 0 0 40px rgba(45, 215, 230, .3);
--iq-font-display: 'Rajdhani', 'Plus Jakarta Sans', system-ui, sans-serif;
/* Faint concentric radar/scanner rings — the recurring HUD motif. */
--iq-hud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cg fill='none' stroke='%232dd7e6' stroke-width='1' opacity='0.22'%3E%3Ccircle cx='170' cy='170' r='40'/%3E%3Ccircle cx='170' cy='170' r='80'/%3E%3Ccircle cx='170' cy='170' r='120'/%3E%3Ccircle cx='170' cy='170' r='160'/%3E%3C/g%3E%3C/svg%3E");
background: var(--iq-bg);
color: var(--iq-ink);
}
* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--iq-primary); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(16, 30, 28, .18); border-radius: var(--iq-pill); border: 2px solid var(--iq-bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(16, 30, 28, .3); }
body {
background: var(--iq-bg);
color: var(--iq-ink);
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6, .navbar-brand, .btn {
font-family: var(--iq-font-display), system-ui, -apple-system, 'Segoe UI', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
letter-spacing: -.02em;
}
.iq-theme-dark h1, .iq-theme-dark h2, .iq-theme-dark h3,
.iq-theme-dark .navbar-brand, .iq-theme-dark .btn {
font-weight: 700;
letter-spacing: .01em;
}
a { transition: color .15s var(--iq-ease); }
.iq-theme-dark a { color: var(--iq-primary); }
.iq-theme-dark a:hover { color: #fff; }
.text-muted { color: var(--iq-muted) !important; }
/* Small uppercase label — used above headings for an editorial, designed feel */
.iq-eyebrow {
display: inline-flex;
align-items: center;
font-size: .75rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .85);
margin-bottom: .6rem;
}
/* Focus ring — consistent, on-brand, not the default Bootstrap blue */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
outline: none;
box-shadow: 0 0 0 .2rem rgba(15, 111, 111, .28);
}
/* Navbar */
.iq-navbar {
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(1.2) blur(8px);
-webkit-backdrop-filter: saturate(1.2) blur(8px);
border-bottom: 1px solid var(--iq-border);
box-shadow: var(--iq-shadow-xs);
padding-top: .75rem;
padding-bottom: .75rem;
}
.iq-navbar .nav-link {
color: var(--iq-ink);
font-weight: 600;
transition: color .15s var(--iq-ease);
}
.iq-navbar .nav-link:hover { color: var(--iq-primary); }
.iq-brand {
font-weight: 800;
font-size: 1.3rem;
color: var(--iq-ink) !important;
letter-spacing: -.01em;
}
.iq-brand-sub {
font-weight: 600;
font-size: .68rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--iq-muted);
margin-left: .5rem;
padding-left: .5rem;
border-left: 1px solid var(--iq-border);
}
.iq-user-chip {
background: var(--iq-primary-light);
color: var(--iq-primary-dark);
border-radius: var(--iq-pill);
padding: .3rem .9rem;
font-weight: 700;
font-size: .9rem;
}
/* ARA-X dark theme — component overrides. Bootstrap's shipped CSS hardcodes
white/black on cards, forms, tables etc. rather than consuming our custom
properties, so these need explicit dark-scoped rules on top of the
palette swap above. Only rendered on player-facing pages (see layout.php). */
.iq-theme-dark a:focus-visible, .iq-theme-dark button:focus-visible, .iq-theme-dark .btn:focus-visible,
.iq-theme-dark .form-control:focus-visible, .iq-theme-dark .form-select:focus-visible {
box-shadow: 0 0 0 .2rem rgba(45, 215, 230, .3);
}
.iq-theme-dark ::selection { background: var(--iq-primary); color: #06141d; }
.iq-theme-dark ::-webkit-scrollbar-thumb { background: rgba(94, 214, 230, .25); border-color: var(--iq-bg); }
.iq-theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(94, 214, 230, .4); }
.iq-theme-dark .iq-navbar {
background: rgba(6, 20, 29, .82);
border-bottom: 1px solid var(--iq-border);
}
.iq-theme-dark .iq-navbar .nav-link { color: var(--iq-muted); }
.iq-theme-dark .iq-navbar .nav-link:hover { color: var(--iq-primary); }
.iq-theme-dark .iq-brand { color: var(--iq-ink) !important; }
.iq-theme-dark .card { background: var(--iq-surface); color: var(--iq-ink); }
.iq-theme-dark .card-header { background: var(--iq-surface); border-color: var(--iq-border); color: var(--iq-ink); }
.iq-theme-dark .form-control, .iq-theme-dark .form-select {
background: rgba(255, 255, 255, .04);
color: var(--iq-ink);
border-color: var(--iq-border);
}
.iq-theme-dark .form-control::placeholder { color: rgba(234, 246, 248, .35); }
.iq-theme-dark .form-control:focus, .iq-theme-dark .form-select:focus {
background: rgba(255, 255, 255, .06);
color: var(--iq-ink);
border-color: var(--iq-primary);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2), 0 0 0 .2rem rgba(45, 215, 230, .2);
}
.iq-theme-dark .form-select option { color: #06141d; }
.iq-theme-dark .form-text { color: var(--iq-muted); }
.iq-theme-dark .form-check-input { background-color: rgba(255, 255, 255, .06); border-color: var(--iq-border); }
.iq-theme-dark .form-check-input:checked { background-color: var(--iq-primary); border-color: var(--iq-primary); }
.iq-theme-dark .list-group-item { background: var(--iq-surface); color: var(--iq-ink); border-color: var(--iq-border); }
.iq-theme-dark .table { --bs-table-color: var(--iq-ink); --bs-table-bg: transparent; color: var(--iq-ink); border-color: var(--iq-border); }
.iq-theme-dark .table > :not(caption) > * > * { border-color: var(--iq-border); color: var(--iq-ink); background: transparent; }
.iq-theme-dark .alert-secondary { background: rgba(255, 255, 255, .06); color: var(--iq-ink); border-color: var(--iq-border); }
.iq-theme-dark .alert-info { background: rgba(45, 215, 230, .1); color: var(--iq-ink); border-color: rgba(45, 215, 230, .35); }
.iq-theme-dark .alert-warning { background: rgba(255, 182, 72, .12); color: var(--iq-ink); border-color: rgba(255, 182, 72, .4); }
.iq-theme-dark .alert-danger { background: rgba(229, 72, 77, .14); color: #ffd7d8; border-color: rgba(229, 72, 77, .4); }
.iq-theme-dark .alert-success { background: rgba(52, 184, 116, .14); color: #baf3d3; border-color: rgba(52, 184, 116, .4); }
.iq-theme-dark .modal-content { background: var(--iq-surface); color: var(--iq-ink); border: 1px solid var(--iq-border); }
.iq-theme-dark .modal-header, .iq-theme-dark .modal-footer { border-color: var(--iq-border); }
.iq-theme-dark .btn-close { filter: invert(1) grayscale(1); }
.iq-theme-dark code { color: var(--iq-primary); background: rgba(45, 215, 230, .08); padding: .1em .3em; border-radius: .25rem; }
.iq-theme-dark .icon-circle { background: var(--iq-primary-light); color: var(--iq-primary); box-shadow: inset 0 0 0 1px rgba(45, 215, 230, .25); }
.iq-theme-dark .dropdown-menu { background: var(--iq-surface); border-color: var(--iq-border); }
.iq-theme-dark .dropdown-item { color: var(--iq-ink); }
.iq-theme-dark .dropdown-item:hover, .iq-theme-dark .dropdown-item:focus { background: var(--iq-primary-light); color: var(--iq-ink); }
/* Buttons — fully rounded pills, bold weight, subtle lift on hover/press */
.btn {
border-radius: var(--iq-pill);
font-weight: 700;
padding: .55rem 1.4rem;
transition: transform .15s var(--iq-ease), box-shadow .15s var(--iq-ease), background-color .15s var(--iq-ease), color .15s var(--iq-ease), border-color .15s var(--iq-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: .8rem 1.9rem; }
.btn-sm { padding: .35rem 1rem; }
.btn-primary {
background: var(--iq-primary);
border-color: var(--iq-primary);
color: #fff;
box-shadow: 0 1px 2px rgba(10, 20, 19, .1), 0 8px 20px rgba(15, 111, 111, .28);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background: var(--iq-primary-dark) !important;
border-color: var(--iq-primary-dark) !important;
color: #fff !important;
box-shadow: 0 1px 2px rgba(10, 20, 19, .12), 0 10px 24px rgba(10, 85, 85, .35) !important;
}
.btn-outline-primary {
color: var(--iq-primary);
border-color: var(--iq-primary);
background: #fff;
}
.btn-outline-primary:hover {
background: var(--iq-primary);
border-color: var(--iq-primary);
color: #fff;
}
.btn-success {
box-shadow: 0 1px 2px rgba(10, 20, 19, .1), 0 8px 20px rgba(25, 135, 84, .25);
}
.btn-outline-secondary, .btn-outline-danger, .btn-outline-warning {
background: #fff;
}
/* Bright cyan buttons need dark text for contrast, and a glow instead of a
drop-shadow reads as "lit up" rather than "floating" on a navy surface. */
.iq-theme-dark .btn-primary {
color: #06141d;
box-shadow: var(--iq-glow-sm);
}
.iq-theme-dark .btn-primary:hover, .iq-theme-dark .btn-primary:focus, .iq-theme-dark .btn-primary:active {
color: #06141d !important;
box-shadow: var(--iq-glow-lg) !important;
}
.iq-theme-dark .btn-outline-primary { background: transparent; }
.iq-theme-dark .btn-outline-primary:hover { color: #06141d; }
.iq-theme-dark .btn-outline-secondary, .iq-theme-dark .btn-outline-danger, .iq-theme-dark .btn-outline-warning {
background: transparent;
color: var(--iq-ink);
}
.iq-theme-dark .btn-outline-secondary { border-color: var(--iq-border); }
.iq-btn-pill-sm {
background: var(--iq-primary);
color: #fff;
border-radius: var(--iq-pill);
padding: .4rem 1.1rem;
font-weight: 700;
font-size: .9rem;
transition: background-color .15s var(--iq-ease), transform .15s var(--iq-ease);
}
.iq-btn-pill-sm:hover { background: var(--iq-primary-dark); color: #fff; transform: translateY(-1px); }
.iq-theme-dark .iq-btn-pill-sm { color: #06141d; }
.iq-theme-dark .iq-btn-pill-sm:hover { color: #06141d; }
/* Cards */
.card {
border: 1px solid var(--iq-border);
border-radius: var(--iq-card-radius);
box-shadow: var(--iq-shadow-sm);
}
.card-header {
background: #fff;
border-bottom: 1px solid var(--iq-border);
font-weight: 700;
border-top-left-radius: var(--iq-card-radius) !important;
border-top-right-radius: var(--iq-card-radius) !important;
}
/* Badges / pill chips */
.badge {
border-radius: var(--iq-pill);
font-weight: 700;
padding: .42em .85em;
letter-spacing: .02em;
}
.badge.bg-primary { background: var(--iq-primary) !important; color: #fff !important; }
.badge.bg-info { background: var(--iq-primary-light) !important; color: var(--iq-primary-dark) !important; }
.iq-theme-dark .badge.bg-primary { color: #06141d !important; }
/* Forms */
.form-control, .form-select {
border-radius: 1rem;
border-color: var(--iq-border);
padding: .65rem 1rem;
box-shadow: inset 0 1px 2px rgba(16, 30, 28, .04);
transition: border-color .15s var(--iq-ease), box-shadow .15s var(--iq-ease);
}
.form-control:focus, .form-select:focus {
border-color: var(--iq-primary);
box-shadow: inset 0 1px 2px rgba(16, 30, 28, .04), 0 0 0 .2rem rgba(15, 111, 111, .18);
}
.form-control::placeholder { color: #98a4a1; }
.alert {
border: 1px solid transparent;
border-radius: 1rem;
box-shadow: var(--iq-shadow-xs);
}
/* Hero (home page) — ARA-X "HUD" treatment: navy-to-cyan gradient, faint
radar rings top-right, thin cyan frame, outlined glow CTA. */
.iq-hero {
position: relative;
border-radius: 1.25rem;
padding: 4.5rem 2rem;
text-align: center;
color: #fff;
overflow: hidden;
background:
var(--iq-hud, none),
linear-gradient(180deg, rgba(2, 10, 15, .2) 0%, rgba(2, 10, 15, .72) 100%),
linear-gradient(125deg, #030d14 0%, #0a2733 45%, #12495a 100%);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: right -60px top -60px, center, center;
background-size: 380px 380px, auto, auto;
box-shadow: var(--iq-shadow-lg);
border: 1px solid rgba(45, 215, 230, .28);
margin-bottom: 2rem;
}
.iq-hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(120% 90% at 15% 0%, rgba(45, 215, 230, .1) 0%, rgba(45, 215, 230, 0) 55%);
pointer-events: none;
}
.iq-hero > * { position: relative; }
.iq-hero-coords {
font-family: 'Rajdhani', monospace;
font-size: .8rem;
letter-spacing: .1em;
color: rgba(45, 215, 230, .8);
margin-bottom: .5rem;
}
.iq-hero h1 {
font-family: 'Rajdhani', var(--iq-font-display), sans-serif;
font-size: clamp(2.6rem, 6vw, 4.2rem);
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
text-shadow: 0 0 30px rgba(45, 215, 230, .35), 0 2px 20px rgba(0, 0, 0, .4);
}
.iq-hero-x { color: var(--iq-primary); }
.iq-hero-subtitle {
font-family: 'Rajdhani', var(--iq-font-display), sans-serif;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--iq-primary);
}
.iq-hero-subtitle span { color: #fff; margin-left: .35em; }
.iq-hero p.lead {
color: rgba(234, 246, 248, .85);
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 600;
}
.iq-hero .btn-primary {
background: transparent;
color: var(--iq-primary);
border: 1.5px solid var(--iq-primary);
box-shadow: var(--iq-glow-sm);
text-transform: uppercase;
letter-spacing: .08em;
}
.iq-hero .btn-primary:hover {
background: var(--iq-primary);
color: #06141d !important;
box-shadow: var(--iq-glow-lg);
}
.iq-hero .btn-outline-primary {
color: #fff;
border-color: rgba(255, 255, 255, .8);
background: transparent;
text-transform: uppercase;
letter-spacing: .08em;
}
.iq-hero .btn-outline-primary:hover { background: rgba(255, 255, 255, .15); }
.iq-feature-tile {
border-radius: var(--iq-card-radius);
height: 100%;
transition: transform .2s var(--iq-ease), box-shadow .2s var(--iq-ease);
}
.iq-feature-tile:hover {
transform: translateY(-2px);
box-shadow: var(--iq-shadow-md);
}
/* Trip-style photo cards (shop) */
.iq-trip-card {
border-radius: var(--iq-card-radius);
overflow: hidden;
box-shadow: var(--iq-shadow-sm);
transition: transform .2s var(--iq-ease), box-shadow .2s var(--iq-ease);
background: var(--iq-surface);
border: 1px solid var(--iq-border);
color: var(--iq-ink);
}
.iq-trip-card:hover {
transform: translateY(-4px);
box-shadow: var(--iq-shadow-lg);
}
.iq-trip-photo {
position: relative;
overflow: hidden;
/* A fixed pixel height cropped a wide desktop card and a narrow phone
card to completely different-shaped slices of the same source photo —
aspect-ratio keeps the crop shape (and therefore how much of the
image is visible) consistent no matter how wide the card ends up on
a given device/breakpoint. */
aspect-ratio: 16 / 9;
background:
var(--iq-grain),
linear-gradient(180deg, rgba(2, 10, 15, 0) 45%, rgba(2, 10, 15, .82) 100%),
linear-gradient(150deg, #041019 0%, #0a2c38 45%, #14586a 100%);
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
padding: 1rem;
}
/* Admin-uploaded race art is a plain ![]()
(same convention as
.iq-challenge-banner img) rather than a cropped CSS background — these
are often full marketing compositions with a baked-in title/scene, so
cover-cropping them (as a generic background-image would) can hide the
whole point of the image, same class of bug already fixed once for
challenge banners. contain always shows the admin's actual upload in
full; the dark fill shows through any letterboxed edges. */
.iq-trip-photo-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #04151d;
z-index: 0;
}
/* Always-present darkening scrim so the title/pill/price stay legible
regardless of what's under them — previously this only worked by
accident (baked into the placeholder's own background shorthand, which
a real uploaded photo's inline background-image silently discarded). */
.iq-trip-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(2, 10, 15, 0) 45%, rgba(2, 10, 15, .82) 100%);
pointer-events: none;
z-index: 1;
}
.iq-trip-photo .iq-trip-pill,
.iq-trip-photo .iq-trip-price {
z-index: 2;
}
.iq-trip-photo .iq-trip-title {
position: relative;
z-index: 2;
}
.iq-trip-photo .iq-trip-title {
color: #fff;
font-weight: 800;
font-size: 1.15rem;
text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.iq-trip-pill {
position: absolute;
top: .75rem;
left: .75rem;
background: rgba(255, 255, 255, .16);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .3);
color: #fff;
font-weight: 700;
font-size: .78rem;
padding: .35em .8em;
border-radius: var(--iq-pill);
}
/* Inline SVG icons (replace emoji) */
.icon {
width: 1.1em;
height: 1.1em;
vertical-align: -0.15em;
flex-shrink: 0;
}
.icon-sm { width: .95em; height: .95em; }
.icon-lg { width: 1.6rem; height: 1.6rem; }
.icon-xl { width: 2.25rem; height: 2.25rem; stroke-width: 1.6; }
.icon-circle {
width: 3rem;
height: 3rem;
border-radius: var(--iq-pill);
background: var(--iq-primary-light);
color: var(--iq-primary-dark);
box-shadow: inset 0 0 0 1px rgba(15, 111, 111, .12);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon-circle .icon { width: 1.4rem; height: 1.4rem; }
.icon-circle.sm { width: 2.25rem; height: 2.25rem; }
.icon-circle.sm .icon { width: 1.1rem; height: 1.1rem; }
.iq-brand .icon { width: 1.4rem; height: 1.4rem; margin-right: .4rem; vertical-align: -.3rem; color: var(--iq-primary); }
.btn .icon { margin-right: .4rem; }
.btn .icon:only-child { margin-right: 0; }
.iq-trip-price {
position: absolute;
top: .75rem;
right: .75rem;
background: rgba(255, 255, 255, .95);
color: #16211f;
font-weight: 800;
font-size: .85rem;
padding: .35em .8em;
border-radius: var(--iq-pill);
box-shadow: var(--iq-shadow-xs);
}
.iq-trip-meta {
display: flex;
gap: 1rem;
font-size: .82rem;
font-weight: 700;
color: var(--iq-primary-dark);
border-top: 1px solid var(--iq-border);
padding-top: .65rem;
}
.iq-trip-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.iq-trip-meta .icon { color: var(--iq-primary); }
/* Challenge play area — the mission "hero": ChallengeArt's banner (#chArt)
flush with the card's top edge, with a stage-number/name label overlaid
in the top-left corner (the banner's own bottom-left caption is the
challenge TYPE, so the two never collide). */
.challenge-card { overflow: hidden; }
.iq-mission-hero { position: relative; }
.iq-mission-hero .iq-challenge-banner { margin-bottom: 0; border-radius: 0; }
/* A separate bar in normal flow above the hero image — not an overlay on
top of it. A long stage name wraps to two lines without limit (admins
set this text freely), and an absolutely-positioned overlay has no way
to know that height in advance; it would just spill down over whatever
sits below it (the challenge image, then the instructions text). Normal
flow means it always pushes the image down instead, so it can never
obscure anything no matter how long the name gets. */
.iq-mission-overlay {
position: relative; z-index: 2;
padding: .65rem 1.1rem;
background: linear-gradient(180deg, rgba(4,21,29,.97), rgba(6,28,37,.92));
border-bottom: 1px solid rgba(45, 215, 230, .18);
}
.iq-mission-eyebrow {
display: block;
font-family: 'Rajdhani', var(--iq-font-display), sans-serif;
text-transform: uppercase; letter-spacing: .14em;
font-size: .72rem; font-weight: 700;
color: var(--iq-accent);
}
.iq-mission-name {
display: block;
font-family: 'Rajdhani', var(--iq-font-display), sans-serif;
font-weight: 700; font-size: 1.25rem; line-height: 1.15;
color: #fff;
}
.iq-mission-instructions { font-size: 1.05rem; }
/* Answer panel: a light glass wrapper unifying the ~26 different
per-type widgets (compass rose, upload preview, MC buttons, etc.) under
one consistent frame instead of each floating loose in the card body. */
.iq-answer-panel {
background: rgba(255, 255, 255, .035);
border: 1px solid rgba(45, 215, 230, .16);
border-radius: 1rem;
padding: 1.1rem;
margin: .25rem 0 1rem;
}
/* Storytelling: scene-setting on arrival, narrative payoff on success */
.scene-text {
font-style: italic;
background: #fff3ee;
border-left: 4px solid var(--iq-accent);
padding: .75rem 1rem;
margin-bottom: 1rem;
border-radius: .25rem;
}
.story-card {
background: linear-gradient(180deg, #fff3ee 0%, #ffffff 100%);
border: 1px solid var(--iq-accent);
}
.story-card .story-icon {
opacity: .8;
}
.story-text {
max-width: 42rem;
margin: 0 auto;
white-space: pre-line;
}
/* Live GPS navigation card (gps_checkin, compass_follow "compass" mode) */
.gps-nav-card, .compass-follow-card {
text-align: center;
padding: 1.25rem 1rem;
background: var(--iq-primary-light);
border: 1px solid var(--iq-border);
border-radius: var(--iq-card-radius);
}
.gps-nav-dial { display: flex; justify-content: center; margin-bottom: .75rem; }
.gps-nav-ring {
position: relative;
width: 120px; height: 120px;
border-radius: 50%;
background: conic-gradient(var(--iq-primary) var(--gps-pct, 0%), var(--iq-border) 0);
transition: background .6s var(--iq-ease);
display: flex; align-items: center; justify-content: center;
}
.gps-nav-ring::after {
content: '';
position: absolute; inset: 8px;
border-radius: 50%;
background: #fff;
box-shadow: var(--iq-shadow-xs);
}
.gps-nav-arrow {
position: relative; z-index: 1;
color: var(--iq-primary-dark);
display: flex;
transition: transform .4s var(--iq-ease);
}
.gps-nav-readout { margin-bottom: .5rem; }
.gps-nav-figure { font-size: 2.25rem; font-weight: 800; color: var(--iq-primary-dark); display: block; line-height: 1.1; }
.gps-nav-unit { font-size: .85rem; color: var(--iq-muted); text-transform: uppercase; letter-spacing: .04em; }
.gps-nav-caption { margin-bottom: 1rem; }
.gps-nav-card.gps-nav-arrived, .compass-follow-card.gps-nav-arrived {
background: #e6f6ee;
border-color: #34b874;
transition: background .4s var(--iq-ease), border-color .4s var(--iq-ease);
}
.gps-nav-card.gps-nav-arrived .gps-nav-figure { color: #1c8a56; }
/* Follow the Compass — a big arrow, not a small dial, so which way to walk
is unmistakable at a glance. Rotates in place (compass_follow.js) to
always point straight at the destination; absent entirely when the admin
turns it off for a distance-only, trial-and-error version. */
.iq-navarrow-wrap { display: flex; justify-content: center; margin-bottom: .75rem; }
.iq-navarrow-icon {
width: 6.5rem; height: 6.5rem; color: var(--iq-primary-dark);
filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
transition: transform .35s var(--iq-ease);
}
.compass-follow-card.gps-nav-arrived .iq-navarrow-icon { color: #1c8a56; }
.compass-follow-steps { text-align: left; max-height: 260px; overflow-y: auto; margin-bottom: .75rem; }
.compass-follow-steps .list-group-item { display: flex; align-items: center; gap: .75rem; }
.compass-follow-steps .step-icon { width: 22px; height: 22px; flex: none; color: var(--iq-primary-dark); transition: transform .3s var(--iq-ease); }
.compass-follow-steps .step-distance { margin-left: auto; font-weight: 700; color: var(--iq-primary-dark); white-space: nowrap; font-size: .85rem; }
.compass-follow-steps .list-group-item.active { background: var(--iq-primary-light); border-color: var(--iq-primary); }
.compass-follow-summary { text-align: center; color: var(--iq-primary-dark); }
/* Dead-reckoning orders (compass_orders): ordered legs list + a true-north-up
compass rose. The rose never encodes the real destination — only current
facing (needle) and the current leg's target bearing (marker) — so the
endpoint stays secret until the geofence check at the end. */
.compass-orders-steps { text-align: left; max-height: 220px; overflow-y: auto; }
.compass-orders-steps .list-group-item.active { background: var(--iq-primary-light); border-color: var(--iq-primary); font-weight: 600; }
.compass-orders-steps .list-group-item.done { opacity: .55; text-decoration: line-through; }
.compass-rose { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: .5rem 0 1rem; }
.compass-rose-dial {
position: relative;
width: 200px; height: 200px;
max-width: 62vw; max-height: 62vw;
border-radius: 50%;
background: var(--iq-primary-light);
border: 2px solid var(--iq-border);
transition: border-color .3s var(--iq-ease), box-shadow .3s var(--iq-ease);
}
.compass-rose-dial.is-aligned { border-color: #34b874; box-shadow: 0 0 0 4px rgba(52, 184, 116, .18); }
.compass-rose-label {
position: absolute;
transform: translate(-50%, -50%);
font-size: .75rem;
font-weight: 700;
color: var(--iq-muted);
}
.compass-rose-label-main { font-size: .85rem; color: var(--iq-primary-dark); }
.compass-rose-needle, .compass-rose-target {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
transition: top .3s var(--iq-ease), left .3s var(--iq-ease);
}
.compass-rose-needle { color: var(--iq-primary-dark); display: flex; }
.compass-rose-needle .icon { width: 22px; height: 22px; }
.compass-rose-target {
width: 14px; height: 14px;
border-radius: 50%;
background: var(--iq-accent);
box-shadow: 0 0 0 3px rgba(255, 138, 101, .25);
}
.compass-rose-readout { text-align: center; }
.compass-rose-leg-text { display: block; }
.compass-rose-heading { font-family: 'Rajdhani', monospace; font-size: 1.1rem; color: var(--iq-primary-dark); }
/* Target Lock (compass_bearing): live camera feed + sniper-scope reticle.
The reticle colour is the only feedback about proximity — cold (far) to
hot (close) to locked (solid, both bearing and elevation in tolerance) —
the camera view itself is the puzzle, never labelled with what's in it. */
.target-lock-scope {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
max-height: 60vh;
border-radius: var(--iq-card-radius);
overflow: hidden;
background: #000;
margin-bottom: .75rem;
}
.target-lock-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.target-lock-reticle {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.target-lock-reticle-svg {
width: 45%; height: 45%;
filter: drop-shadow(0 0 4px rgba(0,0,0,.6));
transition: filter .25s var(--iq-ease);
}
.target-lock-reticle-svg .ring-outer, .target-lock-reticle-svg .ring-inner, .target-lock-reticle-svg .tick {
stroke: #ff4d4d;
transition: stroke .25s var(--iq-ease);
}
.target-lock-reticle.is-cold .ring-outer, .target-lock-reticle.is-cold .ring-inner, .target-lock-reticle.is-cold .tick { stroke: #ff4d4d; }
.target-lock-reticle.is-cool .ring-outer, .target-lock-reticle.is-cool .ring-inner, .target-lock-reticle.is-cool .tick { stroke: #ff9a3d; }
.target-lock-reticle.is-warm .ring-outer, .target-lock-reticle.is-warm .ring-inner, .target-lock-reticle.is-warm .tick { stroke: #ffe14d; }
.target-lock-reticle.is-hot .ring-outer, .target-lock-reticle.is-hot .ring-inner, .target-lock-reticle.is-hot .tick { stroke: #9fff4d; }
.target-lock-reticle.is-locked .ring-outer, .target-lock-reticle.is-locked .ring-inner, .target-lock-reticle.is-locked .tick { stroke: #34ff8f; }
.target-lock-reticle.is-locked .target-lock-reticle-svg { filter: drop-shadow(0 0 10px rgba(52,255,143,.85)); }
.target-lock-locked-badge {
position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
background: rgba(52,255,143,.15); color: #34ff8f; border: 1px solid #34ff8f;
border-radius: 999px; padding: .2rem .8rem; font-weight: 800; letter-spacing: .06em;
font-size: .8rem; display: flex; align-items: center; gap: .35rem;
}
.target-lock-locked-badge .icon { width: 14px; height: 14px; }
.target-lock-readout {
position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
display: flex; gap: .75rem;
background: rgba(0,0,0,.5); color: #fff; border-radius: 999px;
padding: .25rem .9rem; font-family: 'Rajdhani', monospace; font-size: .95rem;
}
.target-lock-rotate-overlay {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
background: rgba(4,21,29,.92); color: #fff; text-align: center; padding: 1.5rem;
}
.target-lock-rotate-overlay .icon-lg { width: 3rem; height: 3rem; transform: rotate(90deg); color: var(--iq-primary); }
.target-lock-rotate-overlay p { margin: 0; font-weight: 600; }
.target-lock-orientation-hint { display: flex; align-items: center; gap: .4rem; }
/* ChallengeArt: per-type decorative HUD panel (app/Core/ChallengeArt.php) —
one navy/cyan brand identity shared by every type (matching .iq-hero /
images/arax_01_hero_header.png), told apart by icon + caption rather than
colour. A real uploaded challenge/race image is a plain ![]()
. */
.iq-challenge-banner { margin-bottom: 1rem; border-radius: var(--iq-card-radius); overflow: hidden; background: #04151d; }
.iq-challenge-banner img {
display: block; width: 100%; height: 190px;
/* contain, not cover: the stock art has its own caption text baked in
near the bottom edge (e.g. "Solve the riddle. Find the hidden
location.") — cover would crop it off on tall/square source images. */
object-fit: contain;
}
.iq-challenge-banner-generated {
position: relative;
height: 150px;
overflow: hidden;
display: flex; align-items: flex-end;
padding: .9rem 1.1rem;
background:
var(--iq-hud, none),
linear-gradient(180deg, rgba(2, 10, 15, .1) 0%, rgba(2, 10, 15, .82) 100%),
linear-gradient(125deg, #030d14 0%, #0a2733 45%, #12495a 100%);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: right -50px top -60px, center, center;
background-size: 300px 300px, auto, auto;
border: 1px solid rgba(45, 215, 230, .28);
box-shadow: var(--iq-shadow-md);
}
.iq-challenge-banner-generated::before {
content: ''; position: absolute; inset: 0;
background: var(--iq-grain);
opacity: .5; pointer-events: none;
}
.iq-challenge-art-icon {
position: absolute; right: -14px; top: -14px;
width: 118px; height: 118px;
color: rgba(77, 218, 230, .38);
filter: drop-shadow(0 0 20px rgba(45, 215, 230, .35));
}
.iq-challenge-art-icon .icon { width: 100%; height: 100%; }
.iq-challenge-art-scan {
position: absolute; left: 0; top: 0; bottom: 0; width: 45%;
background: linear-gradient(90deg, transparent, rgba(45, 215, 230, .16), transparent);
animation: iq-scan 3.2s ease-in-out infinite alternate;
pointer-events: none;
}
.iq-challenge-art-label {
position: relative; z-index: 1;
font-family: 'Rajdhani', var(--iq-font-display), sans-serif;
text-transform: uppercase; letter-spacing: .1em;
font-size: .78rem; font-weight: 700;
color: #d8fbff;
text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.iq-challenge-banner-sm { margin-bottom: 0; border-radius: .6rem; }
.iq-challenge-banner-sm img { height: 56px; }
.iq-challenge-banner-sm .iq-challenge-banner-generated { height: 56px; padding: .4rem .5rem; }
.iq-challenge-banner-sm .iq-challenge-art-icon { width: 60px; height: 60px; right: -8px; top: -8px; }
.iq-challenge-banner-sm .iq-challenge-art-label { font-size: .62rem; }
.iq-challenge-banner-sm .iq-challenge-art-scan { display: none; }
.iq-challenge-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem; border-radius: 50%; flex: none;
background: linear-gradient(135deg, #0a2733, #12495a);
border: 1px solid rgba(45, 215, 230, .3);
}
.iq-challenge-badge .icon { width: 1rem; height: 1rem; color: #4ddae6; }
.iq-challenge-badge-photo { overflow: hidden; background: none; border: none; }
.iq-challenge-badge-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.progress-steps .step {
display: flex;
align-items: center;
gap: .5rem;
padding: .3rem 0;
}
.progress-steps .step .badge {
min-width: 2rem;
}
/* Letter tiles (anagram) — background is a fixed white "physical tile" look
regardless of theme, so the text colour must be fixed dark too rather
than inheriting the dark theme's near-white ink (which was rendering as
barely-visible light-grey-on-white). */
.tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
margin: .2rem;
border: 2px solid var(--iq-primary-dark);
border-radius: .5rem;
background: #fff;
color: #16211f;
font-size: 1.3rem;
font-weight: 700;
cursor: pointer;
user-select: none;
transition: transform .12s var(--iq-ease), box-shadow .12s var(--iq-ease);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--iq-shadow-xs); }
.tile.used {
opacity: .3;
pointer-events: none;
}
.tile-slot {
border-style: dashed;
color: var(--iq-primary-dark);
}
/* Code lock wheels */
.lock-wheel {
width: 3.2rem;
text-align: center;
}
.lock-wheel input {
font-size: 1.6rem;
text-align: center;
}
/* Sortable ordering list */
.order-list .list-group-item {
cursor: grab;
transition: background-color .12s var(--iq-ease);
}
.order-list .list-group-item.dragging {
opacity: .5;
}
/* Matching pairs */
.match-item {
cursor: pointer;
transition: outline-color .12s var(--iq-ease);
}
.match-item.selected {
outline: 3px solid var(--iq-primary-dark);
}
.match-item.matched {
opacity: .45;
pointer-events: none;
}
/* Timed Questions quiz */
.timed-quiz-dot {
width: .65rem;
height: .65rem;
border-radius: 50%;
background: var(--iq-border);
display: inline-block;
transition: background-color .2s var(--iq-ease);
}
.timed-quiz-dot.correct { background: #34b874; }
.timed-quiz-dot.wrong { background: #e5484d; }
.timed-quiz-dot.active { background: var(--iq-accent); }
.timed-quiz-timer-figure {
font-size: 2.5rem;
font-weight: 800;
color: var(--iq-primary-dark);
font-variant-numeric: tabular-nums;
}
.timed-quiz-bar { transition: width .1s linear, background-color .3s var(--iq-ease); }
.timed-quiz-question { min-height: 3.25rem; display: flex; align-items: center; justify-content: center; }
/* Leaderboard */
.leaderboard .team-row.finished {
background: #d1e7dd;
}
/* The light theme's mint highlight above collides with dark-theme text
colour (both light-on-light) — the results page renders in the dark
theme like everything else public-facing, so it needs its own tint. */
.iq-theme-dark .leaderboard .team-row.finished {
background: rgba(45, 215, 230, .12);
}
.iq-theme-dark .leaderboard .team-row.finished > * { color: var(--iq-ink) !important; }
/* Long codes/links must wrap, never force horizontal scroll on a phone */
code {
word-break: break-all;
}
@media (max-width: 576px) {
main.container {
padding-left: .75rem;
padding-right: .75rem;
}
.iq-hero {
padding: 2.75rem 1.25rem;
border-radius: 1.25rem;
}
.lock-wheel {
width: 2.6rem;
}
.lock-wheel input {
font-size: 1.3rem;
padding-left: .4rem;
padding-right: .4rem;
}
.compass-follow-steps .list-group-item {
flex-wrap: wrap;
row-gap: .25rem;
}
.compass-follow-steps .step-distance {
margin-left: 2.25rem;
}
.gps-nav-ring {
width: 96px;
height: 96px;
}
.gps-nav-figure {
font-size: 1.9rem;
}
}
/* Public experience refresh: photography, dimensional glass panels and large touch targets. */
.iq-theme-dark { background: #04141b; }
.iq-theme-dark::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 12% 0%, rgba(15,180,192,.16), transparent 30rem), linear-gradient(180deg, #061c25 0, #041218 40rem); }
.iq-main { padding-top: clamp(1rem, 3vw, 2.25rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.iq-brand-mark { font-family: Rajdhani, sans-serif; font-size: 1.7rem; font-weight: 700; letter-spacing: .08em; color: #fff; line-height: 1; }
.iq-nav-logo { display: block; width: 7.2rem; height: auto; }
.iq-brand-mark b { color: var(--iq-primary); font-weight: 700; }
.iq-theme-dark .iq-navbar { min-height: 4.5rem; background: rgba(3, 18, 25, .9); }
.iq-theme-dark .navbar-toggler { border-color: var(--iq-border); filter: invert(1); }
.iq-theme-dark .card, .iq-theme-dark .iq-trip-card { border-color: rgba(77, 218, 230, .26); background: linear-gradient(145deg, rgba(18, 51, 61, .93), rgba(7, 27, 36, .96)); box-shadow: 0 1rem 2.8rem rgba(0,0,0,.25); }
.iq-theme-dark .card-body { padding: clamp(1.15rem, 4vw, 1.75rem); }
.iq-theme-dark .card-header { padding: .9rem 1.25rem; background: rgba(1, 14, 20, .28); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.iq-theme-dark .form-control, .iq-theme-dark .form-select { min-height: 3.15rem; border-radius: .75rem; }
.iq-theme-dark .btn { min-height: 2.85rem; display: inline-flex; align-items: center; justify-content: center; }
.iq-theme-dark .table { --bs-table-striped-bg: rgba(255,255,255,.025); }
.iq-theme-dark .table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(45,215,230,.08); }
.iq-hero-photo { min-height: clamp(29rem, 50vw, 36rem); padding: 0; display: grid; place-items: center; isolation: isolate; background: #071b23; }
.iq-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.iq-hero-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,10,14,.76), rgba(0,10,14,.22) 63%, rgba(0,10,14,.46)); }
.iq-hero-content { max-width: 42rem; padding: 2rem; text-align: center; }
.iq-hero-photo .iq-hero-subtitle { color: #d8fbff; font-size: clamp(.9rem, 2vw, 1.35rem); }
.iq-hero-photo .iq-hero-subtitle::after { content: ''; display: block; width: 8rem; height: 1px; margin: 1rem auto 0; background: var(--iq-primary); box-shadow: 0 0 10px var(--iq-primary); }
.iq-hero-photo .iq-hero-content .btn-primary { background: rgba(1,13,18,.38); backdrop-filter: blur(4px); }
.iq-unlocked-panel { position: relative; min-height: 31rem; overflow: hidden; border: 1px solid rgba(77,218,230,.34); border-radius: 1.25rem; display: flex; align-items: center; box-shadow: var(--iq-shadow-lg); }
.iq-unlocked-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iq-unlocked-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,13,12,.92), rgba(2,20,18,.55) 49%, rgba(2,20,18,.05)); }
.iq-unlocked-copy { position: relative; z-index: 1; width: min(100%, 31rem); padding: clamp(1.5rem, 5vw, 3.25rem); }
.iq-unlocked-copy h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); text-transform: uppercase; }
.iq-feature-list { padding: 0; margin: 1.25rem 0 1.75rem; list-style: none; display: grid; gap: .8rem; text-transform: uppercase; letter-spacing: .06em; font-size: .83rem; font-weight: 700; }
.iq-feature-list li { display: flex; align-items: center; gap: .7rem; }
.iq-feature-list .icon { color: var(--iq-primary); width: 1.3rem; height: 1.3rem; }
.iq-hero-art { overflow: hidden; border: 1px solid rgba(77,218,230,.34); border-radius: 1.25rem; background: #04151d; box-shadow: var(--iq-shadow-lg); }.iq-hero-art img { display: block; width: 100%; height: auto; }.iq-home-title { max-width: 16ch; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.04; text-transform: uppercase; }.iq-glass-card { background: linear-gradient(135deg, rgba(17,55,65,.9), rgba(7,26,35,.96)) !important; }
.iq-unlocked-hero-art { max-width: 76rem; margin-left: auto; margin-right: auto; }.iq-home-features h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; }
.iq-unlocked-home { min-height: clamp(15rem, 24vw, 19rem); position: relative; overflow: hidden; display: flex; align-items: center; border: 1px solid rgba(77,218,230,.34); border-radius: 1.25rem; background: #061710 url('../../images/arax-unlocked-background.jpg') center 15%/cover no-repeat; box-shadow: var(--iq-shadow-lg); }.iq-unlocked-home::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,13,12,.94) 0%, rgba(1,13,12,.82) 35%, rgba(1,13,12,.25) 68%, rgba(1,13,12,.08)); }.iq-unlocked-hero-copy { position: relative; z-index: 1; width: min(100%, 31rem); padding: clamp(.85rem, 2vw, 1.4rem); }.iq-home-logo { display: block; width: min(8.5rem, 55%); height: auto; }.iq-home-rule { width: 6rem; height: 1px; margin: .5rem 0; background: #2dd7e6; box-shadow: 0 0 .75rem #2dd7e6; }.iq-unlocked-hero-copy h1 { max-width: 20ch; margin: 0 0 .3rem; color: #fff; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.1; text-transform: uppercase; }.iq-unlocked-hero-copy p { margin: 0 0 .5rem; color: rgba(255,255,255,.9); font-size: .85rem; }.iq-home-missions { display: grid; gap: .3rem; margin: .5rem 0 .75rem; padding: 0; list-style: none; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.iq-home-missions li { display: flex; align-items: center; gap: .5rem; }.iq-home-missions .icon { width: .95rem; height: .95rem; color: #2dd7e6; }.iq-quest-entry .card-body { padding: .85rem 1.1rem; }
@media (max-width: 576px) { .iq-brand-mark { font-size: 1.45rem; } .iq-navbar { padding: .6rem 0; } .iq-main { padding-left: 1rem; padding-right: 1rem; } .iq-hero-art { margin-left: -1rem; margin-right: -1rem; border-radius: 0; border-left: 0; border-right: 0; } .iq-home-title { max-width: 13ch; } .iq-unlocked-panel { min-height: 39rem; align-items: end; } .iq-unlocked-image { object-position: 62% center; } .iq-unlocked-panel::after { background: linear-gradient(180deg, rgba(1,13,12,.05), rgba(1,13,12,.92) 65%); } .iq-unlocked-copy { width: 100%; padding: 1.5rem; } .iq-theme-dark .card-body { padding: 1.15rem; } .table { font-size: .83rem; } }
@media (max-width: 576px) { .iq-nav-logo { width: 6.4rem; }.iq-unlocked-home { min-height: 42rem; align-items: end; margin-left: -1rem; margin-right: -1rem; border-radius: 0; border-left: 0; border-right: 0; background-position: 57% 15%; }.iq-unlocked-home::before { background: linear-gradient(180deg, rgba(1,13,12,.08), rgba(1,13,12,.94) 60%); }.iq-unlocked-hero-copy { width: 100%; padding: 1.5rem; }.iq-home-logo { width: 12rem; }.iq-unlocked-hero-copy h1 { font-size: 1.9rem; }.iq-quest-entry { margin-top: 1rem !important; } }
/* Unlocked surface system: shared by every guest, customer and player screen. */
body.iq-theme-dark::before { background: linear-gradient(180deg, rgba(2,15,18,.92), rgba(2,17,22,.96)), url('../../images/arax-unlocked-background.jpg') center / cover fixed; opacity: .42; }
.iq-theme-dark .iq-main > h3:first-child, .iq-theme-dark .iq-main > .row > h3:first-child { color: #fff; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.3rem); }
.iq-theme-dark .card, .iq-theme-dark .iq-trip-card { position: relative; overflow: hidden; border: 1px solid rgba(76,213,226,.25); background: linear-gradient(135deg, rgba(12,46,54,.9), rgba(4,22,28,.94)) !important; backdrop-filter: blur(12px); }
.iq-theme-dark .card::before, .iq-theme-dark .iq-trip-card::before { content: ''; position: absolute; width: 12rem; height: 12rem; right: -6rem; top: -7rem; border: 1px solid rgba(45,215,230,.14); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(45,215,230,.025), 0 0 0 4rem rgba(45,215,230,.018); pointer-events: none; }
.iq-theme-dark .card-header { position: relative; background: linear-gradient(90deg, rgba(1,18,23,.5), transparent) !important; color: #c5fbff; border-bottom-color: rgba(45,215,230,.22); }
.iq-theme-dark .form-label { color: #d5f4f6; font-weight: 700; }.iq-theme-dark .form-text, .iq-theme-dark .text-muted { color: #9abdc3 !important; }
.iq-theme-dark .form-control, .iq-theme-dark .form-select { background: rgba(1,15,20,.55); border-color: rgba(93,215,226,.27); }.iq-theme-dark .form-control:focus, .iq-theme-dark .form-select:focus { background: rgba(4,27,34,.88); }
.iq-theme-dark .input-group .btn { z-index: 1; }.iq-theme-dark .btn-success { background: #2dd7e6; border-color: #2dd7e6; color: #06141d; box-shadow: 0 0 1.1rem rgba(45,215,230,.28); }.iq-theme-dark .btn-success:hover { background: #a4f6fa; border-color: #a4f6fa; color: #06141d; }
.iq-theme-dark .btn-outline-secondary, .iq-theme-dark .btn-outline-warning, .iq-theme-dark .btn-outline-danger { background: rgba(2,19,25,.35); }.iq-theme-dark .btn-outline-secondary:hover { background: rgba(255,255,255,.16); }
.iq-theme-dark .iq-trip-photo { background: linear-gradient(180deg, rgba(1,12,15,.04), rgba(1,12,15,.86)), url('../../images/arax-unlocked-background.jpg') center / cover; }.iq-theme-dark .iq-trip-meta { border-color: rgba(45,215,230,.18); color: #a6e9ee; }
.iq-theme-dark .table, .iq-theme-dark .table > :not(caption) > * > * { background: transparent !important; }.iq-theme-dark .bg-white { background: transparent !important; }.iq-theme-dark .table thead { background: rgba(1,14,19,.42); color: #bdf9fc; text-transform: uppercase; font-size: .74rem; letter-spacing: .07em; }.iq-theme-dark .list-group-item { background: rgba(4,28,35,.52); }
.iq-theme-dark .scene-text { background: linear-gradient(90deg, rgba(45,215,230,.13), rgba(45,215,230,.035)); border-left-color: #2dd7e6; color: #e7fbfc; border-radius: .6rem; }.iq-theme-dark .story-card { background: linear-gradient(145deg, rgba(13,62,67,.96), rgba(4,26,31,.96)); border-color: rgba(45,215,230,.45); }.iq-theme-dark .story-text { color: #dff8fa; }
.iq-theme-dark .alert-secondary { background: rgba(13,50,59,.68); }.iq-theme-dark .alert-info { background: rgba(11,79,91,.45); }.iq-theme-dark .badge.bg-secondary { background: rgba(125,157,163,.3) !important; }.iq-theme-dark .badge.bg-success { background: #147c62 !important; color: #e9fff6 !important; }
.iq-theme-dark .iq-user-chip { background: rgba(45,215,230,.13); color: #bdf9fc; }.iq-theme-dark code { border: 1px solid rgba(45,215,230,.18); }
@media (max-width: 576px) { .iq-theme-dark .card { border-radius: 1rem; }.iq-theme-dark .card-header { padding: .8rem 1rem; }.iq-theme-dark .card-body { padding: 1rem; }.iq-theme-dark .btn-lg { min-height: 3.25rem; }.iq-theme-dark .table-responsive { margin: 0 -.25rem; } }
.iq-public-main { max-width: 1180px; min-height: calc(100vh - 5rem); }
/* ---- "The Experience" (Unlocked Rarotonga home page only) — sets
expectations for what a mission actually is before pricing is shown. ---- */
.iq-experience { padding: 3rem 0 .5rem; }
.iq-experience-head { text-align: center; max-width: 640px; margin: 0 auto 2.25rem; }
.iq-experience-head .iq-eyebrow { justify-content: center; }
.iq-experience-head h2 { font-family: var(--iq-font-display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.15rem); margin: .4rem 0 .75rem; text-transform: uppercase; }
.iq-experience-head p { color: var(--iq-muted); margin: 0; line-height: 1.6; }
.iq-experience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 992px) { .iq-experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 576px) { .iq-experience-grid { grid-template-columns: minmax(0, 1fr); } }
.iq-experience-item {
padding: 1.4rem 1.25rem; border-radius: var(--iq-card-radius); border: 1px solid var(--iq-border);
background: linear-gradient(135deg, rgba(17,55,65,.55), rgba(7,26,35,.75));
}
.iq-experience-icon {
width: 2.5rem; height: 2.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
margin-bottom: .85rem; background: rgba(45,215,230,.1); border: 1px solid rgba(45,215,230,.35); color: var(--iq-primary);
}
.iq-experience-icon svg { width: 1.25rem; height: 1.25rem; }
.iq-experience-item h4 { font-family: var(--iq-font-display); font-size: 1.02rem; font-weight: 700; margin: 0 0 .35rem; color: var(--iq-ink); }
.iq-experience-item p { color: var(--iq-muted); font-size: .85rem; line-height: 1.5; margin: 0; }
.iq-experience-close { max-width: 640px; margin: 2.25rem auto 0; text-align: center; font-style: italic; color: var(--iq-muted); }
.iq-challenge-types { padding: 2.5rem 0 .5rem; max-width: 840px; margin: 0 auto; }
.iq-challenge-group { margin-bottom: 1.5rem; }
.iq-challenge-group-title {
font-family: var(--iq-font-display); font-size: .78rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--iq-primary); margin: 0 0 .65rem;
}
.iq-challenge-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.iq-challenge-chip {
display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem .4rem .6rem;
border-radius: 999px; border: 1px solid var(--iq-border); background: rgba(10,36,43,.5);
color: var(--iq-ink); font-size: .8rem; white-space: nowrap;
}
.iq-challenge-chip .icon { color: var(--iq-primary); width: 1rem; height: 1rem; flex: none; }
/* ---- Mission Packs (Unlocked Rarotonga home page only — not the parent
ARA-X brand site, since pricing/mission language is specific to this
product) ---- */
.iq-mission-packs { padding: 3.5rem 0 1rem; }
.iq-mission-packs-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.iq-mission-packs-head .iq-eyebrow { justify-content: center; }
.iq-mission-packs-head h2 { font-family: var(--iq-font-display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.3rem); margin: .4rem 0 .5rem; }
.iq-mission-packs-head p { color: var(--iq-muted); font-style: italic; margin: 0; }
.iq-mission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
@media (max-width: 992px) { .iq-mission-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; } }
.iq-mission-card {
position: relative; display: flex; flex-direction: column; overflow: hidden;
padding: 1.7rem 1.5rem 1.9rem; border-radius: var(--iq-card-radius);
border: 1px solid var(--iq-border);
background: linear-gradient(135deg, rgba(17,55,65,.85), rgba(7,26,35,.96));
backdrop-filter: blur(10px);
transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.iq-mission-card::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: var(--iq-hud); background-repeat: no-repeat; background-position: 115% -10%;
}
.iq-mission-card:hover { transform: translateY(-6px); box-shadow: var(--iq-shadow-lg), var(--iq-glow-sm); border-color: rgba(148,197,209,.4); }
.iq-mission-card.iq-mission-featured { border-color: rgba(255,182,72,.4); }
.iq-mission-card.iq-mission-featured:hover { box-shadow: var(--iq-shadow-lg), 0 0 0 1px rgba(255,182,72,.4), 0 0 40px rgba(255,182,72,.22); }
.iq-mission-file-tag {
position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .35rem;
font-family: var(--iq-font-display); font-size: .7rem; font-weight: 700; letter-spacing: .2em;
text-transform: uppercase; color: var(--iq-primary); margin-bottom: 1rem;
}
.iq-mission-file-tag::before { content: '◆'; font-size: .55rem; }
.iq-mission-featured .iq-mission-file-tag { color: var(--iq-accent); }
.iq-mission-icon {
position: relative; z-index: 1; width: 2.75rem; height: 2.75rem; border-radius: 999px;
display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
background: rgba(45,215,230,.1); border: 1px solid rgba(45,215,230,.35); color: var(--iq-primary);
}
.iq-mission-featured .iq-mission-icon { background: rgba(255,182,72,.12); border-color: rgba(255,182,72,.45); color: var(--iq-accent); }
.iq-mission-icon svg { width: 1.4rem; height: 1.4rem; }
.iq-mission-card h3 { position: relative; z-index: 1; font-family: var(--iq-font-display); font-size: 1.35rem; font-weight: 700; margin: 0 0 .25rem; color: var(--iq-ink); }
.iq-mission-tagline { position: relative; z-index: 1; font-style: italic; color: var(--iq-muted); font-size: .88rem; margin: 0 0 1.1rem; }
.iq-mission-price { position: relative; z-index: 1; font-family: var(--iq-font-display); font-weight: 700; margin-bottom: .3rem; }
.iq-mission-price .amount { font-size: 1.9rem; color: var(--iq-ink); }
.iq-mission-price .unit { font-size: .8rem; color: var(--iq-muted); font-weight: 500; margin-left: .25rem; }
.iq-mission-price .note { display: block; font-size: .78rem; color: var(--iq-primary); font-weight: 600; margin-top: .1rem; font-family: inherit; }
.iq-mission-featured .iq-mission-price .note { color: var(--iq-accent); }
.iq-mission-cap {
position: relative; z-index: 1; display: inline-block; margin: .4rem 0 .9rem;
font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
padding: .28rem .65rem; border-radius: 999px; background: rgba(255,182,72,.12); color: var(--iq-accent);
border: 1px solid rgba(255,182,72,.3);
}
.iq-mission-desc { position: relative; z-index: 1; color: var(--iq-muted); font-size: .89rem; line-height: 1.55; margin: 0 0 1.1rem; }
.iq-mission-features { position: relative; z-index: 1; list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.iq-mission-features li { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--iq-ink); }
.iq-mission-features li::before {
content: ''; flex: none; width: .85rem; height: .85rem; margin-top: .2rem; border-radius: 3px;
background: var(--iq-primary); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 45% 62%);
}
.iq-mission-featured .iq-mission-features li::before { background: var(--iq-accent); }
.iq-mission-pricing-table { position: relative; z-index: 1; margin: 0 0 1.2rem; border: 1px solid var(--iq-border); border-radius: .6rem; overflow: hidden; font-size: .82rem; }
.iq-mission-pricing-table div { display: flex; justify-content: space-between; padding: .4rem .75rem; }
.iq-mission-pricing-table div:nth-child(odd) { background: rgba(255,255,255,.03); }
.iq-mission-pricing-table span:first-child { color: var(--iq-muted); }
.iq-mission-pricing-table span:last-child { font-family: var(--iq-font-display); font-weight: 700; color: var(--iq-ink); }
.iq-mission-usecases { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.2rem; }
.iq-mission-usecases span {
font-size: .72rem; font-weight: 600; padding: .28rem .6rem; border-radius: 999px;
background: rgba(255,255,255,.05); border: 1px solid var(--iq-border); color: var(--iq-muted);
}
.iq-mission-card .btn { position: relative; z-index: 1; margin-top: auto; }
.iq-mission-featured .btn-primary { background: var(--iq-accent) !important; border-color: var(--iq-accent) !important; color: #06141d !important; }
.iq-mission-enquiry-form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .6rem; }
.iq-mission-enquiry-form .form-control, .iq-mission-enquiry-form select.form-control { font-size: .88rem; }
.iq-mission-soon-tag {
position: absolute; z-index: 2; top: 1.2rem; right: 1.5rem;
font-family: var(--iq-font-display); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
padding: .3rem .7rem; border-radius: 999px; background: rgba(255,182,72,.14); color: var(--iq-accent);
border: 1px solid rgba(255,182,72,.35);
}
.iq-mission-soon .iq-mission-enquiry-form { opacity: .55; pointer-events: none; }
/* Deliberately just a plain heading, not a banner — this sits directly
above the race grid on /shop, and the races (what someone actually came
to /shop to see) need to be visible with as little scrolling as possible. */
.iq-page-title-compact { margin: 0 0 1rem; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .02em; }
.iq-auth-card { max-width: 32rem; margin: clamp(2rem, 9vh, 6rem) auto; }.iq-auth-card .card-body { padding: clamp(1.5rem, 5vw, 2.4rem); }.iq-auth-card .icon-circle { background: rgba(45,215,230,.13); }.iq-auth-card .btn { margin-top: .5rem; }.iq-public-main > .table, .iq-public-main > .table-responsive { padding: .5rem; border: 1px solid rgba(45,215,230,.2); border-radius: 1rem; background: rgba(4,27,34,.72); }.iq-public-main .leaderboard { margin-bottom: 0; }
/* V2 app polish: shared typography, motion and internal-tool clarity. */
body { font-family: Inter, system-ui, sans-serif; }
.iq-theme-dark h1, .iq-theme-dark h2, .iq-theme-dark h3, .iq-theme-dark h4, .iq-theme-dark .btn { font-family: Montserrat, Inter, sans-serif; }
.iq-theme-dark .iq-hero h1, .iq-brand-mark, .iq-app-loader strong { font-family: Orbitron, Montserrat, sans-serif; }
.iq-app-loader { position: fixed; z-index: 3000; inset: 0; display: grid; place-items: center; background: linear-gradient(rgba(2,13,18,.65), rgba(2,13,18,.9)), url('../../images/arax_02_unlocked_rarotonga.jpg') center/cover; color: #fff; transition: opacity .45s ease, visibility .45s ease; }
.iq-app-loader > div { display: grid; gap: .7rem; min-width: min(74vw, 23rem); text-align: center; padding: 2rem; border: 1px solid rgba(45,215,230,.5); background: rgba(3,20,28,.68); backdrop-filter: blur(12px); box-shadow: 0 0 3rem rgba(0,0,0,.4); }
.iq-app-loader strong { font-size: clamp(2.2rem, 9vw, 4rem); letter-spacing: .12em; }.iq-app-loader strong i { color: #2dd7e6; font-style: normal; }.iq-app-loader span { color: #2dd7e6; text-transform: uppercase; font-size: .72rem; letter-spacing: .2em; }.iq-app-loader small { margin-top: 1rem; letter-spacing: .08em; }.iq-app-loader small em { color: #9beef4; font-style: normal; }.iq-loader-bar { height: .3rem; overflow: hidden; background: rgba(255,255,255,.18); }.iq-loader-bar::after { content: ''; display: block; width: 55%; height: 100%; background: #2dd7e6; box-shadow: 0 0 1rem #2dd7e6; animation: iq-scan 1s ease-in-out infinite alternate; }.iq-app-loader.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes iq-scan { from { transform: translateX(-65%); } to { transform: translateX(185%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.iq-bottom-nav { display: none; }
@media (max-width: 767px) { .iq-theme-dark .iq-main { padding-bottom: 6.25rem; } .iq-bottom-nav { position: fixed; z-index: 1020; bottom: .75rem; left: .75rem; right: .75rem; display: flex; justify-content: space-around; padding: .45rem; border: 1px solid rgba(88,220,230,.3); border-radius: 1.1rem; background: rgba(3,20,28,.88); backdrop-filter: blur(14px); box-shadow: 0 .8rem 2rem rgba(0,0,0,.35); } .iq-bottom-nav a { flex: 1; display: grid; justify-items: center; gap: .2rem; padding: .35rem; color: #a5c6cc; text-decoration: none; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .iq-bottom-nav a:hover, .iq-bottom-nav a:focus { color: #2dd7e6; } .iq-bottom-nav .icon { width: 1.2rem; height: 1.2rem; } }
/* Toast notifications — a shared stack (app.js toastStack()), not each
toast positioning itself independently, so several arriving close
together (a session resuming often fires more than one broadcast) line
up instead of rendering on top of each other. Sits clear of the mobile
bottom-nav bar instead of being covered by/overlapping it. */
.iq-toast-stack {
position: fixed; z-index: 2000; right: 1rem; bottom: 1rem; left: auto;
display: flex; flex-direction: column-reverse; gap: .5rem; max-width: min(90vw, 22rem);
pointer-events: none;
}
.iq-toast-stack .iq-toast { pointer-events: auto; margin: 0; }
@media (max-width: 767px) {
.iq-toast-stack { left: .75rem; right: .75rem; bottom: 5.25rem; max-width: none; }
}
.iq-mission-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px solid rgba(45,215,230,.26); background: linear-gradient(110deg, rgba(13,56,67,.8), rgba(7,24,32,.7)); border-radius: 1rem; }.iq-mission-head h4 { text-transform: uppercase; }/* A pill, not a fixed-size circle — this holds variable-length text ("Stage
1 of 1" now, "Stage 12 of 8" or "Finished!" depending on the race), and a
circle has no good way to fit that: it either wraps awkwardly or spills
past the ring. A pill just grows with its content instead. */
.iq-mission-head .badge { min-width: 3.4rem; padding: .5rem .9rem; border: 2px solid #2dd7e6; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #dffcff; background: transparent !important; text-align: center; font: 600 .72rem/1.2 Orbitron, sans-serif; white-space: nowrap; box-shadow: 0 0 1.3rem rgba(45,215,230,.25), inset 0 0 1rem rgba(45,215,230,.1); }
@media (max-width: 576px) { .iq-mission-head { padding: .85rem 1rem; } }
/* Mission-start countdown (lobby.php) */
.iq-countdown-overlay {
position: fixed; z-index: 3100; inset: 0; display: grid; place-items: center;
background: radial-gradient(circle at 50% 40%, rgba(13,62,67,.92), rgba(2,10,14,.97));
color: #eafeff; text-align: center;
}
.iq-countdown-number {
font-family: var(--iq-font-display, 'Orbitron', sans-serif); font-weight: 700;
font-size: clamp(6rem, 28vw, 12rem); line-height: 1; color: #2dd7e6;
text-shadow: 0 0 2.5rem rgba(45,215,230,.65);
}
.iq-countdown-number.pulse { animation: iq-countdown-pulse .9s ease-out; }
@keyframes iq-countdown-pulse { 0% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.iq-countdown-message {
font-family: var(--iq-font-display, 'Orbitron', sans-serif); font-weight: 700;
font-size: clamp(2rem, 8vw, 3.5rem); letter-spacing: .08em; color: #fff;
text-shadow: 0 0 2.5rem rgba(45,215,230,.65); animation: iq-countdown-pulse .6s ease-out;
}
/* Per-challenge "Challenge Completed" flash (play.php) */
.iq-complete-popup {
position: fixed; z-index: 3050; inset: 0; display: grid; place-items: center;
background: rgba(2,10,14,.55); opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.iq-complete-popup.is-showing { opacity: 1; }
.iq-complete-inner {
display: grid; justify-items: center; gap: .5rem; padding: 2rem 2.5rem; border-radius: 1.2rem;
border: 1px solid rgba(45,215,230,.5); background: rgba(3,20,28,.9); backdrop-filter: blur(10px);
box-shadow: 0 0 3rem rgba(45,215,230,.35); color: #eafeff; transform: scale(.85);
transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.iq-complete-popup.is-showing .iq-complete-inner { transform: scale(1); }
.iq-complete-inner .icon { width: 3rem; height: 3rem; color: #2dd7e6; }
.iq-complete-inner span {
font-family: var(--iq-font-display, 'Orbitron', sans-serif); font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; font-size: 1.1rem;
}
/* Whole-race finish celebration confetti (play.js spawns .iq-confetti-piece into #confettiBurst) */
#confettiBurst { position: fixed; z-index: 3060; inset: 0; overflow: hidden; pointer-events: none; }
.iq-confetti-piece {
position: absolute; top: -1rem; width: .6rem; height: 1rem; opacity: .9;
animation: iq-confetti-fall linear forwards;
}
@keyframes iq-confetti-fall {
0% { transform: translateY(0) rotate(0deg); opacity: .95; }
100% { transform: translateY(105vh) rotate(540deg); opacity: 0; }
}