/* ==========================================================================
   Arcade - /arcade
   --------------------------------------------------------------------------
   SURGE on a test bench (dark), the leaderboard as a test report (paper),
   the datasheet (dark), then the shared circuit CTA.

   .sg-* is the game's own interface, built by src/js/surge/surge-ui.js.
   ========================================================================== */

/* ================================ BENCH ================================== */

.cwx-arc {
    position: relative;
    padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
    background: var(--cwx-board);
    color: var(--cwx-silk);
}

.cwx-arc__head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: end;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.cwx-arc__copy .cwx-silk { margin: 0 0 14px; }
.cwx-arc__title {
    margin-bottom: 18px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--cwx-silk);
}
.cwx-arc__title::after {
    content: '';
    display: inline-block;
    width: .32em;
    height: .32em;
    margin-left: .18em;
    vertical-align: .08em;
    background: var(--cwx-mint);
    clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
}

/* Spec block, set like the electrical characteristics table on a datasheet. */
.cwx-arc__specs {
    margin: 0;
    border-top: 1px solid var(--cwx-line);
}
.cwx-arc__specs div {
    display: grid;
    grid-template-columns: 9.5em 1fr;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--cwx-line);
}
.cwx-arc__specs dt {
    font-family: var(--cwx-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cwx-mute);
}
.cwx-arc__specs dd { margin: 0; font-size: 14.5px; }

/* A door to the arcade's other game, in EPOCH's own sunset colours. */
.cwx-arc__epoch {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2px 14px;
    margin-top: 22px;
    padding: 12px 16px 12px 18px;
    background: linear-gradient(100deg, rgba(255, 154, 74, .16), rgba(210, 69, 106, .14) 50%, rgba(90, 42, 138, .18));
    border: 1px solid rgba(255, 196, 92, .35);
    color: var(--cwx-silk);
    text-decoration: none;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: border-color .2s, background .2s;
}
.cwx-arc__epoch:hover { border-color: #ffd34a; background: linear-gradient(100deg, rgba(255, 154, 74, .26), rgba(210, 69, 106, .22) 50%, rgba(90, 42, 138, .26)); }
.cwx-arc__epoch-k { grid-column: 1 / -1; font-family: var(--cwx-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #ffc45c; }
.cwx-arc__epoch b { font-family: 'Lilita One', var(--cwx-display), sans-serif; font-size: 26px; font-weight: 400; letter-spacing: .04em; color: #ffd34a; }
.cwx-arc__epoch span:not([class]) { font-size: 14px; color: var(--cwx-mute); }
.cwx-arc__epoch-go { font-size: 22px; color: #ffd34a; transition: transform .2s; }
.cwx-arc__epoch:hover .cwx-arc__epoch-go { transform: translateX(4px); }
@media (max-width: 600px) { .cwx-arc__epoch { grid-template-columns: auto 1fr; } .cwx-arc__epoch-go { display: none; } }

/* The fixture: four probe clips hold the board's corners. */
.cwx-arc__bench {
    position: relative;
    padding: 10px;
    background:
        linear-gradient(var(--cwx-line), var(--cwx-line)) top / 100% 1px no-repeat,
        linear-gradient(var(--cwx-line), var(--cwx-line)) bottom / 100% 1px no-repeat,
        #08101a;
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.cwx-arc__clip {
    position: absolute;
    z-index: 2;
    width: 26px;
    height: 26px;
    pointer-events: none;
}
.cwx-arc__clip::before, .cwx-arc__clip::after {
    content: '';
    position: absolute;
    background: var(--cwx-mint);
}
.cwx-arc__clip::before { width: 100%; height: 2px; }
.cwx-arc__clip::after { width: 2px; height: 100%; }
.cwx-arc__clip--tl { left: 4px; top: 4px; }
.cwx-arc__clip--tr { right: 4px; top: 4px; transform: scaleX(-1); }
.cwx-arc__clip--bl { left: 4px; bottom: 4px; transform: scaleY(-1); }
.cwx-arc__clip--br { right: 4px; bottom: 4px; transform: scale(-1); }

.cwx-arc__foot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 0;
    font-size: 10.5px;
}

@media (max-width: 900px) {
    .cwx-arc__head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 600px) {
    .cwx-arc__bench { padding: 6px; clip-path: none; }
    .cwx-arc__clip { display: none; }
    .cwx-arc__foot span:first-child { display: none; }
    .cwx-arc__specs div { grid-template-columns: 8em 1fr; }
}

/* ================================= GAME ================================== */

.sg {
    --sg-cut: 10px;
    --sg-coin: #ffc94a;
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr); /* or wide content blows the column out */
    height: clamp(620px, 88vh, 940px);
    background: #070c14;
    color: var(--cwx-silk);
    font-family: var(--cwx-body);
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.sg button { font-family: inherit; }
.sg-sr, .sg-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.sg-noscript { padding: 40px; text-align: center; color: var(--cwx-mute); }

/* Focus mode and real fullscreen: the game owns the viewport. */
.sg.is-focus, .sg.is-full {
    position: fixed;
    inset: 0;
    z-index: 100000;
    height: 100vh;
    height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.sg:fullscreen { width: 100%; height: 100%; }
html.sg-locked, html.sg-locked body { overflow: hidden; }
/* A clip-path on an ancestor would trap the fixed game inside it. */
html.sg-locked .cwx-arc__bench { clip-path: none; }
html.sg-locked .cwx-wa, html.sg-locked .cwx-promo { display: none; }

/* --------------------------------- HUD ----------------------------------- */

.sg-hud {
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 24px);
    padding: 8px 12px;
    background: linear-gradient(#0d1522, #0a111b);
    border-bottom: 1px solid rgba(69, 249, 171, .18);
}
.sg-hud__stats { display: flex; gap: clamp(10px, 2vw, 26px); }
.sg-stat { position: relative; }
.sg-stat small, .sg-gate small {
    display: block;
    font-family: var(--cwx-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cwx-mute);
}
.sg-stat b {
    display: block;
    font-family: var(--cwx-mono);
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sg-mult {
    position: absolute;
    left: calc(100% + 4px);
    bottom: 2px;
    font-family: var(--cwx-mono);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    color: #ffd678;
}
.sg-gate { flex: 1; min-width: 90px; max-width: 360px; }
.sg-gate__bar {
    display: block;
    height: 8px;
    margin-top: 4px;
    background: rgba(232, 238, 243, .1);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.sg-gate__bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #1f9e6c, var(--cwx-mint));
    transition: width .2s;
}
.sg-gate b { display: none; }
.sg.is-low .sg-gate__bar i { background: linear-gradient(90deg, #b3182a, #ff4d5a); animation: sg-blink .7s steps(2) infinite; }
.sg.is-hit .sg-gate__bar { box-shadow: 0 0 12px rgba(255, 77, 90, .8); }
@keyframes sg-blink { 50% { opacity: .5; } }

.sg-cr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 8px;
    background: rgba(255, 201, 74, .08);
    border: 1px solid rgba(255, 201, 74, .35);
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.sg-cr svg { width: 20px; height: 20px; }
.sg-cr b { font-family: var(--cwx-mono); font-size: 18px; font-weight: 700; color: var(--sg-coin); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.sg-cr.is-ping { animation: sg-ping .25s var(--cwx-ease); }
@keyframes sg-ping { 40% { transform: scale(1.12); } }

.sg-ctrl { display: flex; gap: 6px; margin-left: auto; }
.sg-btn {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(232, 238, 243, .18);
    background: transparent;
    color: var(--cwx-silk);
    font-family: var(--cwx-mono);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.sg-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.sg-btn:hover { border-color: var(--cwx-mint); }
.sg-btn[aria-pressed="true"] { border-color: var(--cwx-mint); color: var(--cwx-mint); background: rgba(69, 249, 171, .1); }

/* -------------------------------- Stage ---------------------------------- */

.sg-stage { position: relative; min-height: 0; overflow: hidden; }
.sg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}
.sg-canvas:active { cursor: grabbing; }
.sg[data-state="title"] .sg-hud > *,
.sg[data-state="title"] .sg-bar,
.sg[data-state="title"] .sg-heroes { visibility: hidden; }

.sg-boss {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 3;
    width: min(420px, calc(100% - 120px));
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}
.sg-boss[hidden] { display: none; }
.sg-boss b { font-family: var(--cwx-display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #ffd0d2; text-shadow: 0 2px 8px #000; }
.sg-boss span { display: block; height: 8px; margin-top: 4px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 77, 90, .6); }
.sg-boss i { display: block; height: 100%; background: linear-gradient(90deg, #b3182a, #ff4d5a); transition: width .15s; }

.sg-heroes {
    position: absolute;
    left: 10px;
    top: 50%;
    z-index: 3;
    display: grid;
    gap: 8px;
    transform: translateY(-50%);
}
.sg-port {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 3px;
    border: 0;
    background: conic-gradient(var(--hc) var(--hp), rgba(255, 255, 255, .1) 0);
    border-radius: 50%;
    cursor: pointer;
}
.sg-port img { display: block; width: 100%; height: 100%; border-radius: 50%; background: #0d1522; }
.sg-port b {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 20px;
    padding: 1px 4px;
    background: var(--hc);
    color: #0b131f;
    font-family: var(--cwx-mono);
    font-size: 10px;
    font-weight: 700;
    border-radius: 2px;
}
.sg-port.is-dead img { filter: grayscale(1) brightness(.5); }
.sg-port em { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--cwx-mono); font-size: 14px; font-style: normal; font-weight: 700; color: #fff; }

.sg-banner {
    position: absolute;
    left: 50%;
    top: 30%;
    z-index: 4;
    display: grid;
    justify-items: center;
    gap: 6px;
    width: calc(100% - 40px);
    transform: translate(-50%, -10px) scale(.96);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transition: opacity .25s, transform .35s var(--cwx-ease);
}
.sg-banner.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sg-banner b {
    font-family: var(--cwx-display);
    font-size: clamp(1.6rem, 5vw, 2.8rem);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--cwx-silk);
    text-shadow: 0 0 24px rgba(69, 249, 171, .45), 0 3px 0 #050a12;
}
.sg-banner small { font-family: var(--cwx-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cwx-mint); }
.sg-banner.is-warn b { text-shadow: 0 0 24px rgba(255, 181, 71, .6), 0 3px 0 #050a12; }
.sg-banner.is-warn small { color: #ffb547; }
.sg-banner.is-boss b { color: #ffd0d2; text-shadow: 0 0 30px rgba(255, 77, 90, .8), 0 3px 0 #050a12; }
.sg-banner.is-boss small { color: #ff6b75; }

.sg-toast {
    position: absolute;
    left: 50%;
    top: 46px;
    z-index: 5;
    max-width: calc(100% - 24px);
    padding: 8px 14px;
    background: rgba(13, 21, 34, .95);
    border-left: 2px solid var(--cwx-mint);
    font-family: var(--cwx-mono);
    font-size: 12.5px;
    transform: translate(-50%, -8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s var(--cwx-ease);
}
.sg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.sg-tip {
    position: absolute;
    left: 50%;
    top: 84px;
    z-index: 3;
    max-width: calc(100% - 200px);
    margin: 0;
    padding: 7px 12px;
    background: rgba(8, 13, 21, .85);
    border: 1px solid rgba(69, 249, 171, .3);
    font-size: 13px;
    text-align: center;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.sg-tip.is-on { opacity: 1; }

.sg-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.sg-bar > * { pointer-events: auto; }
.sg-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border: 0;
    background: var(--cwx-mint);
    color: var(--cwx-navy);
    font-family: var(--cwx-display);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    clip-path: polygon(var(--sg-cut) 0, 100% 0, 100% calc(100% - var(--sg-cut)), calc(100% - var(--sg-cut)) 100%, 0 100%, 0 var(--sg-cut));
}
.sg-view:hover { background: #6dffc0; }
.sg.is-base .sg-view { background: #ffb547; }
.sg-next {
    padding: 6px 10px;
    background: rgba(8, 13, 21, .8);
    font-family: var(--cwx-mono);
    font-size: 12px;
    color: var(--cwx-mute);
    border-left: 2px solid #ffb547;
}
.sg-streak {
    margin-left: auto;
    min-width: 130px;
    padding: 5px 10px;
    background: rgba(8, 13, 21, .8);
    font-family: var(--cwx-mono);
    font-size: 12px;
    font-weight: 700;
    color: #ffd678;
    text-align: right;
}
.sg-streak[hidden] { display: none; }
.sg-streak span { display: block; height: 3px; margin-top: 3px; background: rgba(255, 255, 255, .1); }
.sg-streak i { display: block; height: 100%; margin-left: auto; background: #ffd678; }

/* -------------------------------- Abilities ------------------------------ */
/* The ability bar: centred along the bottom on wide screens, every ability
   with its icon, name and key. Ready ones glow, cooling ones sweep down
   with a countdown, locked ones show a padlock and their unlock time. */

.sg-abil {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px 6px;
    background: linear-gradient(rgba(7, 12, 20, .55), rgba(7, 12, 20, .9));
    border: 1px solid rgba(69, 249, 171, .2);
    transform: translateX(-50%);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
}
.sg-ab, .sg-ult {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--cwx-silk);
    -webkit-tap-highlight-color: transparent;
}
.sg-ab { display: grid; justify-items: center; gap: 4px; width: 88px; }
.sg-ab__face {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 50% 40%, #16263a, #0a111b 70%);
    box-shadow: inset 0 0 0 1.5px rgba(232, 238, 243, .22);
    clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
    transition: box-shadow .2s, color .2s;
}
.sg-ab svg { position: relative; z-index: 1; width: 30px; height: 30px; }
.sg-ab__cd {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: conic-gradient(rgba(3, 6, 11, .8) var(--cd, 0%), transparent 0);
    pointer-events: none;
}
.sg-ab__t {
    position: absolute;
    z-index: 3;
    font-family: var(--cwx-mono);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px #000, 0 0 2px #000;
}
.sg-ab kbd {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 3;
    min-width: 18px;
    padding: 1px 4px;
    background: rgba(232, 238, 243, .9);
    color: #0b131f;
    font-family: var(--cwx-mono);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}
.sg-ab__n {
    max-width: 100%;
    font-family: var(--cwx-mono);
    font-size: 9.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cwx-mute);
}
/* Ready: lit mint, gently breathing. */
.sg-ab.is-ready { color: var(--cwx-mint); }
.sg-ab.is-ready .sg-ab__face {
    box-shadow: inset 0 0 0 2px var(--cwx-mint), inset 0 0 22px rgba(69, 249, 171, .35);
    animation: sg-ab-breathe 2.2s ease-in-out infinite;
}
.sg-ab.is-ready kbd { background: var(--cwx-mint); }
.sg-ab.is-ready .sg-ab__n { color: var(--cwx-silk); }
.sg-ab.is-ready:hover .sg-ab__face { background: radial-gradient(circle at 50% 40%, #1d4a3c, #0a111b 70%); }
@keyframes sg-ab-breathe { 50% { box-shadow: inset 0 0 0 2px var(--cwx-mint), inset 0 0 30px rgba(69, 249, 171, .55); } }
/* Just came off cooldown: a flash and a ring. */
.sg-ab.is-ping .sg-ab__face { animation: sg-ab-ping .55s var(--cwx-ease); }
@keyframes sg-ab-ping { 0% { transform: scale(1.18); box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 rgba(69, 249, 171, .9), inset 0 0 40px rgba(214, 255, 236, .9); } 100% { transform: scale(1); } }
/* Locked: dimmed, padlock badge, unlock countdown in place of the timer. */
.sg-ab.is-locked .sg-ab__face { opacity: .55; }
.sg-ab.is-locked .sg-ab__t { font-size: 11px; }
.sg-ab.is-locked .sg-ab__face::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 3;
    width: 12px;
    height: 12px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb547' stroke-width='2.4'%3E%3Crect x='5' y='11' width='14' height='10' rx='1'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E");
}
.sg-ab:active .sg-ab__face { transform: scale(.93); }

.sg-ult {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin-left: 4px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #0d1522 60%, transparent 62%),
        conic-gradient(#ffd65a var(--charge, 0%), rgba(255, 255, 255, .12) 0);
    color: #ffd65a;
}
.sg-ult svg { position: relative; z-index: 1; width: 32px; height: 32px; margin-top: -12px; }
.sg-ult b {
    position: absolute;
    bottom: 13px;
    z-index: 2;
    font-family: var(--cwx-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
}
.sg-ult kbd {
    position: absolute;
    top: -8px;
    left: 50%;
    z-index: 3;
    padding: 1px 6px;
    background: #ffd65a;
    color: #0b131f;
    font-family: var(--cwx-mono);
    font-size: 10px;
    font-weight: 700;
    transform: translateX(-50%);
}
.sg-ult.is-ready { animation: sg-ult 1.1s ease-in-out infinite; }
.sg-ult.is-on { background: radial-gradient(circle, #2a1f05 60%, transparent 62%), conic-gradient(#45f9ab var(--charge, 0%), rgba(255, 255, 255, .12) 0); color: #fff4c2; box-shadow: 0 0 34px rgba(255, 214, 90, .7); }
@keyframes sg-ult { 50% { box-shadow: 0 0 30px rgba(255, 214, 90, .85); transform: scale(1.06); } }
/* Overdrive: a gold edge round the whole board. */
.sg.is-od .sg-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 70px rgba(255, 200, 70, .35);
}
.sg[data-state="title"] .sg-abil { visibility: hidden; }
/* Not enough room to centre the bar beside the Base button and the streak:
   lift it above them instead. */
@media (max-width: 1180px) {
    .sg-abil { bottom: 64px; }
}

/* --------------------------------- Sheet --------------------------------- */
/* The build panel: docked right on wide screens, a bottom sheet on phones. */

.sg-sheet {
    position: absolute;
    right: 10px;
    top: 10px;
    bottom: 66px;
    z-index: 6;
    width: 340px;
    overflow: auto;
    padding: 16px;
    background: rgba(10, 17, 27, .97);
    border: 1px solid rgba(69, 249, 171, .3);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    -webkit-user-select: text;
    user-select: text;
    overscroll-behavior: contain;
}
.sg-sheet[hidden] { display: none; }
.sg-sheet__x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--cwx-mute);
    font-size: 24px;
    cursor: pointer;
}
.sg-sheet__kicker { margin: 0 0 12px; font-family: var(--cwx-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cwx-mint); }
.sg-sheet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-right: 30px; }
.sg-sheet__head img { flex: none; width: 56px; height: 56px; background: #0d1522; border: 1px solid var(--cwx-line); }
.sg-sheet__head b { display: block; font-family: var(--cwx-display); font-size: 17px; font-weight: 600; }
.sg-sheet__head small { font-family: var(--cwx-mono); font-size: 11.5px; color: var(--cwx-mute); }
.sg-sheet__blurb { margin: 0 0 10px; font-size: 13px; color: var(--cwx-mute); }
.sg-sheet__lock { margin: 0; font-family: var(--cwx-mono); font-size: 12px; color: #ffb547; }
.sg-sheet__btns { display: grid; gap: 8px; margin-top: 12px; }

.sg-rows { margin: 0; font-family: var(--cwx-mono); font-size: 12.5px; }
.sg-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--cwx-line); }
.sg-rows dt { color: var(--cwx-mute); }
.sg-rows dd { margin: 0; text-align: right; }
.sg-hpbar { height: 6px; margin-top: 8px; background: rgba(255, 255, 255, .08); }
.sg-hpbar i { display: block; height: 100%; background: var(--cwx-mint); }

.sg-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(232, 238, 243, .2);
    background: transparent;
    color: var(--cwx-silk);
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.sg-buy b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--cwx-mono); font-weight: 700; color: var(--sg-coin); white-space: nowrap; }
.sg-buy b svg { width: 15px; height: 15px; }
.sg-buy:hover { border-color: var(--cwx-mint); }
.sg-buy--main { background: var(--cwx-mint); border-color: var(--cwx-mint); color: var(--cwx-navy); }
.sg-buy--main b { color: #3b2a00; }
.sg-buy--main:hover { background: #6dffc0; }
.sg-buy--ghost b { color: var(--cwx-mint); }
.sg-buy--sm { flex: none; min-height: 38px; padding: 0 10px; font-size: 12.5px; }
.sg-buy.is-poor { opacity: .5; }
.sg-buy--main.is-poor { background: rgba(232, 238, 243, .1); border-color: transparent; color: var(--cwx-mute); opacity: 1; }
.sg-buy--main.is-poor b { color: #ff6b75; }

.sg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sg-card {
    position: relative;
    display: grid;
    justify-items: start;
    gap: 3px;
    padding: 10px;
    border: 1px solid rgba(232, 238, 243, .16);
    background: rgba(232, 238, 243, .03);
    color: var(--cwx-silk);
    text-align: left;
    cursor: pointer;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.sg-card img { width: 48px; height: 48px; }
.sg-card b { font-size: 14px; }
.sg-card small { font-size: 11.5px; color: var(--cwx-mute); line-height: 1.3; }
.sg-card em { display: inline-flex; align-items: center; gap: 4px; font-family: var(--cwx-mono); font-size: 13px; font-style: normal; font-weight: 700; color: var(--sg-coin); }
.sg-card em svg { width: 14px; height: 14px; }
.sg-card kbd { position: absolute; top: 8px; right: 10px; font-family: var(--cwx-mono); font-size: 10px; color: rgba(232, 238, 243, .3); }
.sg-card:hover:not(:disabled) { border-color: var(--cwx-mint); background: rgba(69, 249, 171, .06); }
.sg-card.is-poor em { color: #ff6b75; }
.sg-card.is-locked { cursor: default; opacity: .5; }
.sg-card.is-locked small { color: #ffb547; }

.sg-tracks { display: grid; gap: 8px; }
.sg-track { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--cwx-line); }
.sg-track > div { flex: 1; min-width: 0; }
.sg-track b { display: block; font-size: 14px; }
.sg-track b small { font-family: var(--cwx-mono); font-size: 11px; color: var(--cwx-mint); }
.sg-track span { font-size: 12px; color: var(--cwx-mute); }
.sg-max { font-family: var(--cwx-mono); font-size: 11px; font-style: normal; color: var(--cwx-mint); }

.sg-heroes-list { display: grid; gap: 10px; }
.sg-hero {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid rgba(232, 238, 243, .12);
    border-left: 3px solid var(--hc);
    background: rgba(232, 238, 243, .02);
}
.sg-hero img { width: 52px; height: 52px; background: #0d1522; }
.sg-hero b { display: block; font-size: 14px; }
.sg-hero b small { font-family: var(--cwx-mono); font-size: 11px; font-weight: 500; color: var(--hc); }
.sg-hero span { display: block; font-size: 12px; color: var(--cwx-mute); }
.sg-hero.is-focus { border-color: var(--hc); background: rgba(232, 238, 243, .05); }
.sg-xp { display: block; height: 3px; margin: 6px 0; background: rgba(255, 255, 255, .08); }
.sg-xp i { display: block; height: 100%; background: var(--hc); }
.sg-lanes { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-lanes button {
    padding: 4px 8px;
    border: 1px solid rgba(232, 238, 243, .18);
    background: transparent;
    color: var(--cwx-mute);
    font-family: var(--cwx-mono);
    font-size: 10.5px;
    cursor: pointer;
}
.sg-lanes button.is-on { border-color: var(--hc); color: var(--cwx-silk); background: rgba(255, 255, 255, .06); }

/* -------------------------------- Modals --------------------------------- */

.sg-modal {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(5, 9, 15, .78);
    overflow: auto;
}
.sg-modal[hidden] { display: none; }
.sg[data-state="title"] .sg-modal { background: radial-gradient(ellipse at center, rgba(5, 9, 15, .45), rgba(5, 9, 15, .85)); }
.sg-modal__card {
    width: 100%;
    max-width: 560px;
    max-height: 100%;
    overflow: auto;
    padding: clamp(20px, 4vw, 34px);
    background: rgba(13, 21, 34, .97);
    border: 1px solid rgba(69, 249, 171, .3);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    -webkit-user-select: text;
    user-select: text;
}
.sg-modal__kicker { margin: 0 0 10px; font-family: var(--cwx-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cwx-mint); }
.sg-modal__h { margin: 0 0 16px; font-family: var(--cwx-display); font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.sg-modal__lead { margin: 0 0 22px; color: var(--cwx-mute); font-size: 15px; }
.sg-modal__fine { margin: 16px 0 0; font-size: 12.5px; color: var(--cwx-mute); }
.sg-modal__fine b { color: var(--cwx-silk); }
.sg-modal__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sg-modal__btns--title { display: grid; }
.sg-wait { margin: 0; font-family: var(--cwx-mono); font-size: 13px; color: var(--cwx-mute); }
.sg-title {
    margin: 0 0 12px;
    font-family: var(--cwx-display);
    font-size: clamp(3rem, 11vw, 5rem);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: .95;
    color: var(--cwx-silk);
    text-shadow: 0 0 40px rgba(69, 249, 171, .35), 0 4px 0 #050a12;
}

.sg-cta {
    --bg: var(--cwx-mint);
    --fg: var(--cwx-navy);
    display: grid;
    gap: 3px;
    padding: 14px 20px;
    border: 0;
    background: var(--bg);
    color: var(--fg);
    text-align: left;
    cursor: pointer;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.sg-cta span { font-size: 15px; font-weight: 600; }
.sg-cta small { font-family: var(--cwx-mono); font-size: 11.5px; opacity: .75; }
.sg-cta:hover { background: #6dffc0; }
.sg-cta--ghost { --bg: transparent; --fg: var(--cwx-silk); box-shadow: inset 0 0 0 1px rgba(232, 238, 243, .24); }
.sg-cta--ghost:hover { background: rgba(69, 249, 171, .08); box-shadow: inset 0 0 0 1px var(--cwx-mint); }
.sg-cta--slim { padding: 10px 20px; }

.sg-help { list-style: none; margin: 0; padding: 0; counter-reset: pin; }
.sg-help li { position: relative; padding: 10px 0 10px 46px; border-bottom: 1px dashed var(--cwx-line); font-size: 14px; color: var(--cwx-mute); counter-increment: pin; }
.sg-help li b { color: var(--cwx-silk); }
.sg-help li::before {
    content: 'P' counter(pin);
    position: absolute;
    left: 0;
    top: 11px;
    width: 32px;
    padding: 2px 0;
    border: 1px solid rgba(69, 249, 171, .4);
    font-family: var(--cwx-mono);
    font-size: 11px;
    text-align: center;
    color: var(--cwx-mint);
}

.sg-score {
    margin: -6px 0 16px;
    font-family: var(--cwx-display);
    font-size: clamp(2.6rem, 9vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--cwx-mint);
    text-shadow: 0 0 30px rgba(69, 249, 171, .35);
}
.sg-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.sg-sum div { padding: 10px; background: rgba(232, 238, 243, .04); border: 1px solid var(--cwx-line); }
.sg-sum small { display: block; font-family: var(--cwx-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cwx-mute); }
.sg-sum b { font-family: var(--cwx-mono); font-size: 16px; }

.sg-submit label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--cwx-mute); }
.sg-submit__row { display: flex; gap: 8px; }
.sg-submit__row[hidden] { display: none; }
.sg-submit input[name="callsign"] {
    flex: 1;
    min-width: 0;
    padding: 0 14px;
    border: 1px solid rgba(232, 238, 243, .25);
    background: #070c14;
    color: var(--cwx-silk);
    font-family: var(--cwx-mono);
    font-size: 16px; /* 16px stops iOS zooming in on focus */
    letter-spacing: .1em;
    text-transform: uppercase;
}
.sg-submit input[name="callsign"]:focus { outline: none; border-color: var(--cwx-mint); }
.sg-submit .sg-cta { padding: 12px 20px; }
.sg-submit__msg { min-height: 1.3em; margin: 8px 0 0; font-size: 13px; color: var(--cwx-mute); }
.sg-submit__msg.is-ok { color: var(--cwx-mint); }
.sg-submit__msg.is-bad { color: #ff5a5f; }

/* Accounts: the panel on the title screen and the sign-in forms. */
.sg-acct {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px dashed rgba(69, 249, 171, .3);
    background: rgba(69, 249, 171, .04);
}
.sg-acct p { margin: 0; font-size: 13px; color: var(--cwx-mute); }
.sg-acct p b { color: var(--cwx-silk); }
.sg-acct__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sg-acct.is-in { display: flex; align-items: center; gap: 10px; border-style: solid; }
.sg-acct.is-in p { flex: 1; }
.sg-acct__dot { flex: none; width: 8px; height: 8px; background: var(--cwx-mint); box-shadow: 0 0 10px var(--cwx-mint); }
.sg-link {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--cwx-mint);
    font-family: var(--cwx-mono);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.sg-link:hover { color: #6dffc0; }

.sg-form { display: grid; gap: 12px; }
.sg-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--cwx-silk); }
.sg-form label small { font-weight: 400; font-size: 11.5px; color: var(--cwx-mute); }
.sg-form input:not(.sg-hp) {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(232, 238, 243, .25);
    background: #070c14;
    color: var(--cwx-silk);
    font-family: var(--cwx-mono);
    font-size: 16px; /* 16px stops iOS zooming in on focus */
}
.sg-form input:focus { outline: none; border-color: var(--cwx-mint); box-shadow: 0 0 0 1px var(--cwx-mint); }
.sg-form .sg-modal__btns { margin-top: 4px; }
.sg-form__note { margin: -6px 0 14px; font-family: var(--cwx-mono); font-size: 12px; color: #ffb547; }
.sg-form__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--cwx-line); }

.sg-built {
    display: block;
    margin-top: 20px;
    padding: 14px 16px;
    border-left: 2px solid var(--cwx-mint);
    background: rgba(69, 249, 171, .05);
    color: var(--cwx-mute);
    font-size: 13.5px;
    text-decoration: none;
}
.sg-built span { color: var(--cwx-silk); font-weight: 600; }
.sg-built b { color: var(--cwx-mint); white-space: nowrap; }
.sg-built:hover b { text-decoration: underline; }

/* ------------------------------- Phones ---------------------------------- */

@media (max-width: 820px) {
    .sg { height: min(80vh, 760px); }
    .sg-hud { flex-wrap: wrap; gap: 6px 12px; padding: 6px 10px; }
    .sg-hud__stats { gap: 12px; }
    .sg-stat small { font-size: 8.5px; letter-spacing: .1em; }
    .sg-stat b { font-size: 14px; }
    .sg-cr { padding: 3px 8px 3px 6px; }
    .sg-cr b { font-size: 15px; }
    .sg-btn { min-width: 34px; height: 34px; padding: 0 6px; }
    .sg-gate { order: 5; flex-basis: 100%; max-width: none; }
    .sg-gate__bar { height: 6px; margin-top: 2px; }
    .sg-gate small { display: none; }
    .sg-heroes { top: 56px; transform: none; }
    .sg-port { width: 40px; height: 40px; }
    .sg-view { height: 44px; padding: 0 16px; }
    .sg-next { font-size: 11px; }
    .sg-streak { min-width: 0; font-size: 11px; }
    .sg-tip { top: 64px; max-width: calc(100% - 110px); font-size: 12px; }
    .sg-abil { left: 6px; right: 6px; bottom: 60px; gap: 4px; justify-content: space-between; padding: 6px 6px 4px; transform: none; }
    .sg-ab { width: auto; flex: 1; gap: 2px; }
    .sg-ab__face { width: 48px; height: 48px; }
    .sg-ab svg { width: 24px; height: 24px; }
    .sg-ab__t { font-size: 16px; }
    .sg-ab kbd, .sg-ult kbd { display: none; }
    .sg-ab__n { font-size: 8px; letter-spacing: 0; }
    .sg-ult { flex: none; width: 64px; height: 64px; margin-left: 0; }
    .sg-ult svg { width: 26px; height: 26px; margin-top: -10px; }
    .sg-ult b { bottom: 9px; font-size: 8.5px; }
    .sg-sheet {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: auto;
        max-height: 64%;
        padding: 14px 12px 20px;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px);
    }
    .sg-sum { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .sg-hud__stats .sg-stat:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sg.is-low .sg-gate__bar i, .sg-cr.is-ping { animation: none; }
}

/* ================================ REPORT ================================= */

.cwx-rep {
    padding: clamp(64px, 8vw, 120px) 0;
    background: var(--cwx-paper);
    color: var(--cwx-ink);
}
.cwx-rep__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 5vw, 80px);
    align-items: end;
    margin-bottom: 40px;
}
.cwx-rep__head p { max-width: 30em; margin: 0; color: var(--cwx-ink-2); font-size: 1.05rem; }

.cwx-rep__sheet {
    background: #fff;
    border: 1px solid var(--cwx-rule);
    padding: clamp(14px, 3vw, 28px);
}
.cwx-rep__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cwx-rep__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cwx-rep__tabs button {
    display: grid;
    gap: 2px;
    padding: 10px 16px;
    border: 1px solid var(--cwx-rule);
    background: transparent;
    color: var(--cwx-ink);
    font-family: var(--cwx-body);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.cwx-rep__tabs small { font-family: var(--cwx-mono); font-size: 10.5px; font-weight: 400; color: var(--cwx-ink-2); }
.cwx-rep__tabs button:hover { border-color: var(--cwx-ink); }
.cwx-rep__tabs button[aria-selected="true"] { background: var(--cwx-ink); border-color: var(--cwx-ink); color: #fff; }
.cwx-rep__tabs button[aria-selected="true"] small { color: var(--cwx-mint); }
.cwx-rep__range { display: flex; border: 1px solid var(--cwx-rule); }
.cwx-rep__range button {
    padding: 8px 14px;
    border: 0;
    background: transparent;
    color: var(--cwx-ink-2);
    font-family: var(--cwx-mono);
    font-size: 12px;
    cursor: pointer;
}
.cwx-rep__range button[aria-pressed="true"] { background: var(--cwx-paper-2); color: var(--cwx-ink); font-weight: 600; }
.sg-rep__num.is-key { font-weight: 700; color: var(--cwx-ink); }

.cwx-rep__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cwx-rep__table th {
    padding: 10px 12px;
    border-bottom: 2px solid var(--cwx-ink);
    font-family: var(--cwx-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    color: var(--cwx-ink-2);
}
.cwx-rep__table td { padding: 12px; border-bottom: 1px solid var(--cwx-rule); }
.cwx-rep__table tbody[aria-busy="true"] { opacity: .5; }
.cwx-rep__table tr:nth-child(-n+3) .sg-rep__rank { color: #0a8f6a; font-weight: 600; }
.sg-rep__rank { width: 3.5em; font-family: var(--cwx-mono); color: var(--cwx-ink-2); }
.sg-rep__call { font-family: var(--cwx-mono); font-weight: 600; letter-spacing: .06em; }
.sg-rep__call small { margin-left: 6px; padding: 1px 6px; background: var(--cwx-mint); color: var(--cwx-ink); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.sg-rep__num { text-align: right; font-family: var(--cwx-mono); font-variant-numeric: tabular-nums; }
th.sg-rep__num { text-align: right; }
.sg-rep__res { font-family: var(--cwx-mono); font-size: 13px; color: var(--cwx-ink-2); }
.sg-rep__res .is-pass { color: #0a8f6a; font-weight: 600; }
.sg-rep__empty { padding: 28px 12px !important; text-align: center; color: var(--cwx-ink-2); }
.cwx-rep__table tr.is-me td { background: rgba(69, 249, 171, .14); }
.cwx-rep__note { margin: 14px 0 0; font-family: var(--cwx-mono); font-size: 11.5px; color: var(--cwx-ink-2); }

@media (max-width: 700px) {
    .cwx-rep__head { grid-template-columns: 1fr; }
    .cwx-rep__table { font-size: 14px; }
    .cwx-rep__table th, .cwx-rep__table td { padding: 10px 6px; }
    .cwx-rep__table { font-size: 13px; }
}

/* =============================== DATASHEET =============================== */

.cwx-ds {
    padding: clamp(64px, 8vw, 120px) 0;
    background: var(--cwx-navy);
    color: var(--cwx-silk);
}
.cwx-ds__head { max-width: 760px; margin-bottom: 48px; }
.cwx-ds__head .cwx-h2 { margin-bottom: 18px; }
.cwx-ds__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.cwx-ds__h {
    margin: 0 0 14px;
    font-family: var(--cwx-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cwx-mint);
}
.cwx-ds__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cwx-ds__table th {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(232, 238, 243, .3);
    font-family: var(--cwx-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    color: var(--cwx-mute);
}
.cwx-ds__table td { padding: 10px; border-bottom: 1px solid var(--cwx-line); vertical-align: top; color: var(--cwx-mute); }
.cwx-ds__table td b { display: block; color: var(--cwx-silk); }
.cwx-ds__table td small { font-family: var(--cwx-mono); font-size: 10.5px; color: rgba(141, 157, 177, .8); }
.cwx-ds__ref, .cwx-ds__pwr { font-family: var(--cwx-mono); color: var(--cwx-mint) !important; white-space: nowrap; }

.cwx-ds__heroes { list-style: none; margin: 0 0 6px; padding: 0; }
.cwx-ds__heroes li { display: grid; gap: 2px; padding: 10px 0 10px 16px; border-left: 3px solid var(--hc); border-bottom: 1px solid var(--cwx-line); }
.cwx-ds__heroes b { font-size: 14.5px; color: var(--hc); }
.cwx-ds__heroes span { font-size: 13.5px; color: var(--cwx-mute); }
.cwx-ds__aside { margin: 0 0 32px; font-family: var(--cwx-mono); font-size: 11.5px; color: var(--cwx-mute); }
.cwx-ds__faults { list-style: none; margin: 0; padding: 0; }
.cwx-ds__faults li { display: grid; gap: 2px; padding: 10px 0 10px 18px; border-bottom: 1px solid var(--cwx-line); position: relative; }
.cwx-ds__faults li::before { content: ''; position: absolute; left: 0; top: 17px; width: 7px; height: 7px; background: #ffb547; }
.cwx-ds__faults li.is-boss::before { background: #ff5a5f; }
.cwx-ds__faults b { font-size: 14.5px; }
.cwx-ds__faults span { font-size: 13.5px; color: var(--cwx-mute); }

.cwx-ds__notes { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--cwx-line); }
.cwx-ds__notes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; list-style: none; margin: 0; padding: 0; }
.cwx-ds__notes li { font-size: 14.5px; color: var(--cwx-mute); }
.cwx-ds__notes li b { color: var(--cwx-silk); }

@media (max-width: 900px) {
    .cwx-ds__grid, .cwx-ds__notes ul { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .cwx-ds__table th:nth-child(2), .cwx-ds__table td:nth-child(2) { display: none; }
}

/* ================================ LOBBY ==================================
   /arcade: one cabinet per game, screenshot on one side, the pitch on the
   other, alternating down the page. Games keep their own look inside the
   screenshot; the frame round it is ours. */

.cwx-lob {
    position: relative;
    padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
    background: var(--cwx-board);
    color: var(--cwx-silk);
}
.cwx-lob__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
.cwx-lob__head .cwx-silk { margin: 0 0 14px; }
.cwx-lob__list { display: grid; gap: clamp(40px, 6vw, 88px); }

.cwx-cab {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.cwx-cab:nth-child(even) .cwx-cab__shot { order: 2; }

.cwx-cab__shot {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #08101a;
    border: 1px solid var(--cwx-line);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.cwx-cab--epoch .cwx-cab__shot { background: linear-gradient(160deg, #ff9a4a, #d2456a 45%, #2a1650); }
.cwx-cab--surge .cwx-cab__shot { background: radial-gradient(circle at 50% 40%, #12324a, #070c14 70%); }
.cwx-cab__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--cwx-ease); }
.cwx-cab__shot:hover img { transform: scale(1.04); }
.cwx-cab__play {
    position: absolute;
    left: 50%; top: 50%;
    display: grid; place-items: center;
    width: 72px; height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: rgba(11, 19, 31, .7);
    border: 1px solid rgba(69, 249, 171, .6);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .25s, transform .25s var(--cwx-ease);
}
.cwx-cab__play svg { width: 30px; height: 30px; fill: var(--cwx-mint); margin-left: 4px; }
.cwx-cab__shot:hover .cwx-cab__play, .cwx-cab__shot:focus-visible .cwx-cab__play { opacity: 1; transform: none; }

.cwx-cab__body .cwx-silk { margin: 0 0 10px; }
.cwx-cab__name {
    margin: 0 0 14px;
    font-family: var(--cwx-display);
    font-size: clamp(2.2rem, 4.4vw, 3.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
}
.cwx-cab--epoch .cwx-cab__name { color: #ffc45c; }
.cwx-cab__lead { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--cwx-mute); }
.cwx-cab__specs { margin: 0 0 22px; padding: 0; list-style: none; border-top: 1px solid var(--cwx-line); }
.cwx-cab__specs li {
    position: relative;
    padding: 9px 0 9px 22px;
    border-bottom: 1px solid var(--cwx-line);
    font-size: 14.5px;
}
.cwx-cab__specs li::before {
    content: '';
    position: absolute;
    left: 2px; top: 50%;
    width: 8px; height: 8px;
    margin-top: -4px;
    background: var(--cwx-mint);
    clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
}
.cwx-cab--epoch .cwx-cab__specs li::before { background: #ffc45c; }
.cwx-cab__board { margin: 0 0 22px; }
.cwx-cab__board .cwx-silk { margin-bottom: 6px; }
.cwx-cab__board ol { margin: 0; padding: 0; list-style: none; }
.cwx-cab__board li { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 10px; padding: 6px 0; font-family: var(--cwx-mono); font-size: 13.5px; border-bottom: 1px dashed var(--cwx-line); }
.cwx-cab__board li span { color: var(--cwx-mute); }
.cwx-cab__board li em { font-style: normal; color: var(--cwx-mint); }
.cwx-cab__empty { margin: 0; font-size: 14px; color: var(--cwx-mute); }

@media (max-width: 900px) {
    .cwx-cab { grid-template-columns: 1fr; }
    .cwx-cab:nth-child(even) .cwx-cab__shot { order: 0; }
    .cwx-cab__play { opacity: 1; transform: none; }
}

/* ================================= GATE ==================================
   Signed-out visitors to /arcade or any game get this instead: the pitch on
   the left, sign-in and sign-up on the right. */

.cwx-gate {
    padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
    background: var(--cwx-board);
    color: var(--cwx-silk);
}
.cwx-gate__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
}
.cwx-gate__copy .cwx-silk { margin: 0 0 14px; }
.cwx-gate__perks { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--cwx-line); }
.cwx-gate__perks li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--cwx-line); font-size: 15px; }
.cwx-gate__perks li::before {
    content: '';
    position: absolute; left: 2px; top: 50%;
    width: 8px; height: 8px; margin-top: -4px;
    background: var(--cwx-mint);
    clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
}

.cwx-gate__card {
    padding: clamp(20px, 3vw, 32px);
    background: #08101a;
    border: 1px solid var(--cwx-line);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.cwx-gate__tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; border-bottom: 1px solid var(--cwx-line); }
.cwx-gate__tabs button {
    padding: 12px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--cwx-mute);
    font: 600 15px var(--cwx-body);
    cursor: pointer;
}
.cwx-gate__tabs button[aria-selected="true"] { color: var(--cwx-silk); border-bottom-color: var(--cwx-mint); }
.cwx-gate__form { display: grid; gap: 14px; }
.cwx-gate__form[hidden] { display: none; }
.cwx-gate__form label { display: grid; gap: 6px; font: 600 13px var(--cwx-body); letter-spacing: .02em; }
.cwx-gate__form small { font-weight: 400; color: var(--cwx-mute); }
.cwx-gate__form input {
    height: 46px;
    padding: 0 14px;
    background: var(--cwx-navy);
    border: 1px solid var(--cwx-trace);
    color: var(--cwx-silk);
    font: 400 15px var(--cwx-body);
    border-radius: 0;
}
.cwx-gate__form input:focus { outline: none; border-color: var(--cwx-mint); }
.cwx-gate__form .cwx-btn { justify-self: start; margin-top: 4px; }
.cwx-gate__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cwx-gate__link { justify-self: start; padding: 0; border: 0; background: none; color: var(--cwx-mint); font: 500 14px var(--cwx-body); text-decoration: underline; cursor: pointer; }
.cwx-gate__note { margin: 0; color: var(--cwx-mute); font-size: 14.5px; }
.cwx-gate__msg { min-height: 1.4em; margin: 16px 0 0; font-size: 14px; color: var(--cwx-mute); }
.cwx-gate__msg.is-bad { color: #ff8a7a; }
.cwx-gate__msg.is-ok { color: var(--cwx-mint); }

@media (max-width: 900px) {
    .cwx-gate__grid { grid-template-columns: 1fr; }
}