:root {
    color-scheme: dark;
    --bg: #050506;
    --panel: rgba(8, 11, 15, 0.82);
    --panel-strong: rgba(8, 11, 15, 0.94);
    --gold: #f6c74a;
    --gold-soft: #ffe6a0;
    --red: #dc2f27;
    --cyan: #44d7d0;
    --green: #7ce38b;
    --text: #fff7dd;
    --muted: #b9b19b;
    --violet: #9b65ff;
    --token-blue: #159bff;
    --token-blue-rim: #7af6ff;
    --token-yellow: #ffd33f;
    --token-yellow-rim: #fff38b;
    --token-green: #22e76e;
    --token-green-rim: #8cffae;
    --token-red: #ff3131;
    --token-red-rim: #ff8177;
    --tile-size: 72px;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--bg);
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100svh;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.winner-modal-open,
body.champion-quiz-open,
body.info-tile-open,
body.space-puzzle-open,
body.jigsaw-open,
body.word-search-open,
body.crossword-open,
body.reflex-open,
body.memory-open,
body.duel-open,
body.token-modal-open,
body.rules-modal-open,
body.comodin-modal-open,
body.comodin-burst-open,
body.turn-notice-open,
body.chance-modal-open {
    overflow: hidden;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

button:disabled {
    cursor: not-allowed;
}

.is-online-spectator .is-spectator-disabled {
    cursor: default;
    opacity: 0.58;
    filter: saturate(0.72);
}

.is-online-spectator .is-spectator-disabled:hover {
    transform: none;
}

.online-spectator-banner {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: 0 0 12px;
    border: 1px solid rgba(68, 215, 208, 0.4);
    border-radius: 999px;
    padding: 8px 12px;
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.18), rgba(246, 199, 74, 0.1)),
        rgba(5, 5, 6, 0.88);
    color: var(--gold-soft);
    font-size: 0.78rem;
    font-weight: 920;
    line-height: 1.25;
    text-align: center;
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.28),
        0 0 22px rgba(68, 215, 208, 0.14);
}

img {
    display: block;
    max-width: 100%;
}

.space-backdrop {
    position: fixed;
    inset: 0;
    z-index: -5;
    background: var(--bg);
}

.space-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.olympic-banner-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.olympic-banner {
    --fabric: #0f806c;
    --fabric-edge: rgba(255, 230, 160, 0.58);
    position: absolute;
    top: 14%;
    width: clamp(46px, 4.2cqw, 70px);
    height: clamp(112px, 12cqw, 168px);
    display: grid;
    place-items: center;
    padding: clamp(18px, 2.4svh, 26px) 9px clamp(28px, 3.2svh, 38px);
    border: 1px solid var(--fabric-edge);
    color: rgba(255, 230, 160, 0.92);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
    background:
        linear-gradient(90deg, rgba(255, 247, 221, 0.14), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.18)),
        linear-gradient(180deg, color-mix(in srgb, var(--fabric) 88%, #fff 12%), var(--fabric) 64%, color-mix(in srgb, var(--fabric) 76%, #050506 24%));
    box-shadow:
        inset 0 1px 0 rgba(255, 247, 221, 0.28),
        inset 0 -16px 26px rgba(0, 0, 0, 0.16),
        0 16px 34px rgba(0, 0, 0, 0.18);
    opacity: 0.58;
}

.olympic-banner::before,
.olympic-banner::after {
    position: absolute;
    left: 50%;
    content: "";
    transform: translateX(-50%);
}

.olympic-banner::before {
    top: -9px;
    width: 112%;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(112, 78, 25, 0.8), rgba(255, 230, 160, 0.95), rgba(112, 78, 25, 0.8));
    box-shadow: 0 0 14px rgba(246, 199, 74, 0.18);
}

.olympic-banner::after {
    bottom: 14%;
    width: 68%;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 230, 160, 0.55);
    box-shadow: 0 10px 0 rgba(255, 230, 160, 0.36);
}

.olympic-banner svg {
    width: 74%;
    height: 68%;
    overflow: visible;
    filter:
        drop-shadow(0 0 5px rgba(255, 230, 160, 0.48))
        drop-shadow(0 8px 10px rgba(0, 0, 0, 0.22));
    opacity: 0.9;
}

.olympic-banner path,
.olympic-banner circle {
    fill: currentColor;
}

.olympic-banner__piece {
    width: 78%;
    height: 68%;
    background: currentColor;
    filter:
        drop-shadow(0 0 5px rgba(255, 230, 160, 0.5))
        drop-shadow(0 8px 10px rgba(0, 0, 0, 0.24));
    opacity: 0.92;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.olympic-banner__piece--rook {
    -webkit-mask-image: url("../../tablero/piezassilicio/wR.svg");
    mask-image: url("../../tablero/piezassilicio/wR.svg");
}

.olympic-banner__piece--knight {
    -webkit-mask-image: url("../../tablero/piezassilicio/wN.svg");
    mask-image: url("../../tablero/piezassilicio/wN.svg");
}

.olympic-banner--rook {
    left: 13.8%;
    transform: rotate(-4deg);
}

.olympic-banner--knight {
    --fabric: #b53c35;
    right: 12.4%;
    top: 17%;
    transform: rotate(4deg);
}

.olympic-banner--gold-knight {
    --fabric: #bc912d;
    left: 46.5%;
    top: 10%;
    transform: rotate(-2deg);
}

body::before,
body::after {
    position: fixed;
    inset: 0;
    z-index: -3;
    content: "";
    pointer-events: none;
}

body::before {
    background:
        linear-gradient(180deg, rgba(5, 5, 6, 0.2), rgba(5, 5, 6, 0.86) 78%, #050506 100%),
        radial-gradient(circle at 18% 28%, rgba(68, 215, 208, 0.11), transparent 28%),
        radial-gradient(circle at 76% 18%, rgba(246, 199, 74, 0.14), transparent 26%),
        radial-gradient(circle at 62% 80%, rgba(124, 227, 139, 0.08), transparent 32%);
}

body::after {
    z-index: -2;
    background:
        linear-gradient(rgba(255, 247, 221, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 247, 221, 0.026) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 90%, transparent);
    opacity: 0.55;
}

.mobile-orientation-gate {
    display: none;
}

.mobile-orientation-gate__card {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 320px;
    border: 1px solid rgba(246, 199, 74, 0.36);
    border-radius: 22px;
    padding: 24px 22px;
    background:
        radial-gradient(circle at 50% 12%, rgba(68, 215, 208, 0.22), transparent 48%),
        linear-gradient(145deg, rgba(5, 5, 6, 0.94), rgba(8, 14, 18, 0.9));
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 247, 221, 0.1);
    text-align: center;
}

.mobile-orientation-gate__device {
    position: relative;
    width: 82px;
    aspect-ratio: 0.62;
    border: 2px solid rgba(255, 230, 160, 0.72);
    border-radius: 17px;
    background:
        radial-gradient(circle at 50% 45%, rgba(68, 215, 208, 0.24), transparent 56%),
        rgba(5, 5, 6, 0.66);
    box-shadow:
        0 0 22px rgba(246, 199, 74, 0.22),
        inset 0 0 0 1px rgba(255, 247, 221, 0.08);
    transform: rotate(90deg);
}

.mobile-orientation-gate__device::before,
.mobile-orientation-gate__device::after {
    position: absolute;
    content: "";
}

.mobile-orientation-gate__device::before {
    left: 50%;
    bottom: 7px;
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 230, 160, 0.8);
    transform: translateX(-50%);
}

.mobile-orientation-gate__device::after {
    left: 50%;
    top: 50%;
    width: 48px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--gold), transparent);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px rgba(68, 215, 208, 0.48);
}

.mobile-orientation-gate__card h2 {
    margin: 0;
    color: #fff8df;
    font-size: clamp(2rem, 9vw, 2.7rem);
    line-height: 0.95;
}

.mobile-orientation-gate__card p:not(.eyebrow) {
    margin: 0;
    color: #e7ddc3;
    font-size: 0.94rem;
    line-height: 1.45;
}

.game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(1560px, calc(100vw - 28px));
    margin: 0 auto;
    padding: 10px 0 0;
}

.game-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.game-brand img {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.game-brand span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.game-brand strong,
.game-brand small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-brand strong {
    color: var(--gold-soft);
    font-size: 0.94rem;
}

.game-brand small {
    color: var(--muted);
    font-size: 0.78rem;
}

.game-header__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.space-sound-toggle,
.vc-sound-toggle {
    border: 1px solid rgba(246, 199, 74, 0.48);
    border-radius: 999px;
    padding: 8px 12px;
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 230, 160, 0.32), transparent 42%),
        linear-gradient(135deg, rgba(246, 199, 74, 0.2), rgba(68, 215, 208, 0.12)),
        rgba(5, 5, 6, 0.68);
    color: #fff8df;
    box-shadow:
        0 0 18px rgba(246, 199, 74, 0.14),
        inset 0 1px 0 rgba(255, 247, 221, 0.18);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.space-sound-toggle.is-on,
.vc-sound-toggle.is-on {
    border-color: rgba(68, 215, 208, 0.72);
    background:
        radial-gradient(circle at 28% 20%, rgba(68, 215, 208, 0.34), transparent 42%),
        linear-gradient(135deg, rgba(68, 215, 208, 0.24), rgba(246, 199, 74, 0.12)),
        rgba(5, 5, 6, 0.74);
    box-shadow:
        0 0 22px rgba(68, 215, 208, 0.18),
        inset 0 1px 0 rgba(255, 247, 221, 0.2);
}

.space-music-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(68, 215, 208, 0.28);
    border-radius: 999px;
    padding: 5px 8px;
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.11), rgba(246, 199, 74, 0.06)),
        rgba(5, 5, 6, 0.68);
    box-shadow:
        0 0 18px rgba(68, 215, 208, 0.08),
        inset 0 1px 0 rgba(255, 247, 221, 0.08);
}

.space-music-toggle {
    border: 1px solid rgba(255, 230, 160, 0.28);
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(5, 5, 6, 0.62);
    color: rgba(255, 247, 221, 0.86);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.space-music-toggle.is-on {
    border-color: rgba(68, 215, 208, 0.72);
    background:
        radial-gradient(circle at 30% 20%, rgba(68, 215, 208, 0.28), transparent 42%),
        rgba(5, 5, 6, 0.76);
    color: #e9ffff;
    box-shadow: 0 0 16px rgba(68, 215, 208, 0.16);
}

.space-music-volume {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 247, 221, 0.72);
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.space-music-volume input {
    width: 88px;
    accent-color: var(--cyan);
    cursor: pointer;
}

.prototype-pill {
    flex: 0 0 auto;
    border: 1px solid rgba(68, 215, 208, 0.42);
    border-radius: 999px;
    padding: 8px 12px;
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.2), rgba(246, 199, 74, 0.08)),
        rgba(5, 5, 6, 0.62);
    color: #e9ffff;
    font-size: 0.74rem;
    font-weight: 950;
    text-transform: uppercase;
}

.goose-game {
    width: min(1560px, calc(100vw - 28px));
    margin: 0 auto;
    padding: 8px 0 42px;
}

.game-intro {
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.eyebrow {
    margin: 0;
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.game-intro h1 {
    max-width: none;
    margin: 6px 0 0;
    color: #fff8df;
    font-size: clamp(1.65rem, 2.35vw, 2.65rem);
    line-height: 0.96;
}

.game-intro p {
    max-width: 620px;
    margin: 0;
    color: #e4dac0;
    font-size: clamp(0.9rem, 1vw, 1rem);
    line-height: 1.5;
}

.game-table {
    border: 1px solid rgba(246, 199, 74, 0.28);
    border-radius: 12px;
    padding: clamp(10px, 1.2vw, 16px);
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.08), rgba(246, 199, 74, 0.06)),
        var(--panel);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.54),
        inset 0 1px 0 rgba(255, 247, 221, 0.08);
}

.table-titlebar {
    display: block;
    margin-bottom: 6px;
}

.table-titlebar .eyebrow {
    font-size: 0.84rem;
}

.game-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.board-scroll {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 12px;
    scrollbar-color: rgba(246, 199, 74, 0.62) rgba(255, 247, 221, 0.08);
    scrollbar-width: thin;
}

.space-game-board {
    position: relative;
    container-type: size;
    --tile-size: min(78px, calc(100cqw / 16 - 7px), calc(100cqh / 10 - 5px));
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 8.05;
    overflow: hidden;
    border: 2px solid rgba(246, 199, 74, 0.36);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 40%, rgba(246, 199, 74, 0.18), transparent 19%),
        radial-gradient(circle at 22% 72%, rgba(68, 215, 208, 0.14), transparent 22%),
        radial-gradient(circle at 84% 28%, rgba(124, 227, 139, 0.1), transparent 22%),
        linear-gradient(135deg, rgba(8, 14, 18, 0.96), rgba(5, 5, 6, 0.94));
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 221, 0.08),
        inset 0 0 120px rgba(0, 0, 0, 0.72);
}

.space-game-board::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(rgba(255, 247, 221, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 247, 221, 0.028) 1px, transparent 1px);
    background-size: calc(100% / 16) calc(100% / 10);
    opacity: 0.72;
    pointer-events: none;
}

.space-game-board::after {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(68, 215, 208, 0.18);
    border-radius: 12px;
    content: "";
    pointer-events: none;
}

.space-route-svg {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.space-route-ribbon,
.space-route-glow,
.space-route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.space-route-ribbon {
    stroke: rgba(255, 247, 221, 0.07);
    stroke-width: clamp(42px, 5.8vw, 64px);
}

.space-route-glow {
    stroke: rgba(68, 215, 208, 0.26);
    stroke-width: clamp(18px, 2.8vw, 34px);
    filter: blur(11px);
}

.space-route-line {
    stroke: url("#space-route-gradient");
    stroke-width: clamp(4px, 0.55vw, 7px);
    stroke-dasharray: 18 14;
    filter: drop-shadow(0 0 9px rgba(68, 215, 208, 0.34));
}

.board-nebula {
    position: absolute;
    inset: 17% 15% 17% 15%;
    z-index: 1;
    border: 1px solid rgba(246, 199, 74, 0.14);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 45%, rgba(68, 215, 208, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(255, 247, 221, 0.055), rgba(5, 5, 6, 0.48));
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(68, 215, 208, 0.1);
}

.finish-relevo {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    pointer-events: none;
    text-align: left;
}

.finish-relevo {
    left: 29.2%;
    top: 48.5%;
    width: clamp(166px, 13.8cqw, 214px);
    transform: translate(-50%, -50%);
}

.finish-relevo img {
    flex: 0 0 clamp(54px, 4.8cqw, 72px);
    width: clamp(54px, 4.8cqw, 72px);
    height: auto;
    filter:
        drop-shadow(0 18px 30px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 24px rgba(68, 215, 208, 0.18));
}

.finish-relevo img {
    filter:
        drop-shadow(0 18px 32px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 30px rgba(246, 199, 74, 0.24));
}

.finish-relevo span {
    max-width: none;
    margin-top: 0;
    border: 1px solid rgba(255, 230, 160, 0.28);
    border-radius: 10px;
    padding: 5px 8px;
    background:
        radial-gradient(circle at 0% 50%, rgba(68, 215, 208, 0.13), transparent 62%),
        rgba(5, 5, 6, 0.78);
    color: var(--gold-soft);
    font-size: clamp(0.56rem, 0.7cqw, 0.68rem);
    font-weight: 950;
    line-height: 1.05;
    text-transform: uppercase;
    white-space: normal;
}

.finish-relevo span {
    color: #fef0bb;
}

.central-command {
    position: absolute;
    left: 57%;
    top: 31.5%;
    z-index: 5;
    display: grid;
    justify-items: center;
    gap: 7px;
    width: min(186px, 14.5%);
    min-height: 108px;
    padding: 10px 10px 11px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(246, 199, 74, 0.32);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 20%, rgba(246, 199, 74, 0.16), transparent 44%),
        linear-gradient(145deg, rgba(5, 5, 6, 0.86), rgba(8, 14, 18, 0.76));
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 247, 221, 0.1);
    text-align: center;
}

.central-command strong {
    color: #fff8df;
    font-size: clamp(0.92rem, 1.05vw, 1.08rem);
    line-height: 1.1;
}

.turn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    max-width: 100%;
    border: 1px solid rgba(68, 215, 208, 0.38);
    border-radius: 999px;
    padding: 5px 11px;
    background:
        radial-gradient(circle at 50% 0%, rgba(68, 215, 208, 0.16), transparent 60%),
        rgba(5, 5, 6, 0.54);
    color: #dcffff;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: 0;
    box-shadow:
        0 0 18px rgba(68, 215, 208, 0.16),
        inset 0 1px 0 rgba(255, 247, 221, 0.1);
}

.orbital-die {
    display: grid;
    place-items: center;
    width: 50px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 230, 160, 0.58);
    border-radius: 18px;
    background:
        linear-gradient(145deg, #fff4c8, #f6c74a 46%, #90670d);
    color: #050506;
    cursor: pointer;
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.36),
        0 0 26px rgba(246, 199, 74, 0.24),
        inset 0 2px 0 rgba(255, 255, 255, 0.45);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.orbital-die:hover,
.orbital-die:focus-visible {
    outline: none;
    transform: translateY(-3px) rotate(-2deg);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.42),
        0 0 34px rgba(246, 199, 74, 0.34),
        inset 0 2px 0 rgba(255, 255, 255, 0.52);
}

.orbital-die.is-rolling {
    animation: die-roll 760ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.orbital-die:disabled {
    opacity: 0.58;
    transform: none;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.28),
        inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.die-face {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    width: 62%;
    aspect-ratio: 1;
}

.die-face i {
    width: 5px;
    aspect-ratio: 1;
    place-self: center;
    border-radius: 50%;
    background: #050506;
    box-shadow: 0 0 0 2px rgba(68, 215, 208, 0.18);
}

.die-face[data-dice-face="1"] i:not(:nth-child(5)),
.die-face[data-dice-face="2"] i:not(:nth-child(1)):not(:nth-child(9)),
.die-face[data-dice-face="3"] i:not(:nth-child(1)):not(:nth-child(5)):not(:nth-child(9)),
.die-face[data-dice-face="4"] i:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(7)):not(:nth-child(9)),
.die-face[data-dice-face="5"] i:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(5)):not(:nth-child(7)):not(:nth-child(9)),
.die-face[data-dice-face="6"] i:not(:nth-child(1)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(6)):not(:nth-child(7)):not(:nth-child(9)) {
    opacity: 0;
}

.central-command .eyebrow {
    font-size: 0.58rem;
}

.board-quick-actions {
    position: absolute;
    left: 2.2%;
    top: 37%;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    width: clamp(124px, 9.4cqw, 148px);
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
}

.board-quick-actions .primary-action,
.board-quick-actions .secondary-action {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    min-height: 29px;
    margin-top: 0;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: clamp(0.49rem, 0.56cqw, 0.6rem);
    line-height: 1.05;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.64);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.board-quick-actions .primary-action::before,
.board-quick-actions .secondary-action::before {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 13px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 0.84em;
    line-height: 1;
    text-shadow: 0 0 10px currentColor;
}

.board-quick-actions .primary-action::after,
.board-quick-actions .secondary-action::after {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: inherit;
    background:
        linear-gradient(90deg, var(--action-accent, rgba(246, 199, 74, 0.78)) 0 3px, transparent 3px),
        linear-gradient(110deg, rgba(255, 247, 221, 0.12), transparent 34% 100%);
    pointer-events: none;
    opacity: 0.95;
}

.board-quick-actions [data-board-new-game]::before {
    content: "+";
}

.board-quick-actions [data-rules-open]::before {
    content: "?";
}

.board-quick-actions [data-comodin-open]::before {
    content: "\2605";
    color: var(--gold-soft);
}

.board-quick-actions [data-online-leave-room]::before {
    content: "\00D7";
}

.board-quick-actions .primary-action {
    --action-accent: rgba(246, 199, 74, 0.86);
    border-color: rgba(246, 199, 74, 0.46);
    background:
        linear-gradient(135deg, rgba(246, 199, 74, 0.24), rgba(68, 215, 208, 0.08)),
        rgba(5, 5, 6, 0.76);
    color: #fff7dd;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.26),
        0 0 16px rgba(246, 199, 74, 0.12),
        inset 0 1px 0 rgba(255, 247, 221, 0.14);
}

.board-quick-actions .secondary-action {
    --action-accent: rgba(68, 215, 208, 0.72);
    border-color: rgba(68, 215, 208, 0.34);
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.14), rgba(246, 199, 74, 0.05)),
        rgba(5, 5, 6, 0.72);
    color: rgba(255, 247, 221, 0.92);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        0 0 14px rgba(68, 215, 208, 0.08),
        inset 0 1px 0 rgba(255, 247, 221, 0.11);
}

.board-quick-actions .secondary-action.is-danger-action {
    --action-accent: rgba(220, 47, 39, 0.86);
    border-color: rgba(220, 47, 39, 0.48);
    background:
        linear-gradient(135deg, rgba(220, 47, 39, 0.24), rgba(5, 5, 6, 0.72));
    color: #ffe6e2;
}

.board-quick-actions .primary-action:not(:disabled):hover,
.board-quick-actions .primary-action:not(:disabled):focus-visible,
.board-quick-actions .secondary-action:not(:disabled):hover,
.board-quick-actions .secondary-action:not(:disabled):focus-visible {
    outline: none;
    transform: translateY(-1px);
    border-color: rgba(255, 230, 160, 0.66);
    box-shadow:
        0 11px 22px rgba(0, 0, 0, 0.28),
        0 0 18px rgba(68, 215, 208, 0.14),
        inset 0 1px 0 rgba(255, 247, 221, 0.18);
}

.mobile-game-shell {
    display: none;
}

.mobile-command-console {
    border: 1px solid rgba(246, 199, 74, 0.28);
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 0%, rgba(68, 215, 208, 0.18), transparent 45%),
        linear-gradient(145deg, rgba(5, 5, 6, 0.92), rgba(8, 14, 18, 0.84));
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 247, 221, 0.08);
}

.mobile-command-console__main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.mobile-command-console__main strong {
    color: #fff8df;
    font-size: 1.05rem;
    line-height: 1;
}

.mobile-command-console__actions,
.mobile-command-console__audio {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mobile-command-console__actions .primary-action,
.mobile-command-console__actions .secondary-action {
    min-height: 38px;
    margin-top: 0;
    border-radius: 10px;
    padding: 8px 9px;
    font-size: 0.68rem;
    line-height: 1;
    text-transform: uppercase;
}

.mobile-path-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(246, 199, 74, 0.58) rgba(255, 247, 221, 0.07);
}

.mobile-path-board {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(68, 215, 208, 0.24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 52% 0%, rgba(246, 199, 74, 0.14), transparent 24%),
        radial-gradient(circle at 18% 38%, rgba(68, 215, 208, 0.14), transparent 28%),
        radial-gradient(circle at 82% 76%, rgba(124, 227, 139, 0.09), transparent 28%),
        linear-gradient(145deg, rgba(8, 14, 18, 0.96), rgba(5, 5, 6, 0.94));
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 221, 0.05),
        inset 0 0 80px rgba(0, 0, 0, 0.52);
}

.mobile-path-board::before {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: inherit;
    background:
        linear-gradient(rgba(255, 247, 221, 0.036) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 247, 221, 0.026) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: 0.58;
    pointer-events: none;
}

.mobile-route-svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.mobile-route-ribbon,
.mobile-route-glow,
.mobile-route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-route-ribbon {
    stroke: rgba(255, 247, 221, 0.075);
    stroke-width: 36px;
}

.mobile-route-glow {
    stroke: rgba(68, 215, 208, 0.28);
    stroke-width: 18px;
    filter: blur(8px);
}

.mobile-route-line {
    stroke: url("#mobile-space-route-gradient");
    stroke-width: 5px;
    stroke-dasharray: 14 11;
    filter: drop-shadow(0 0 9px rgba(68, 215, 208, 0.36));
}

.mobile-path-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-tile {
    --mobile-tile-color: rgba(255, 247, 221, 0.2);
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(38px, 1fr) auto;
    place-items: center;
    align-self: start;
    min-width: 0;
    min-height: 112px;
    border: 1px solid var(--mobile-tile-color);
    border-radius: 14px;
    padding: 8px 6px 9px;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 247, 221, 0.18), transparent 46%),
        linear-gradient(145deg, rgba(255, 247, 221, 0.11), rgba(5, 5, 6, 0.86));
    color: var(--text);
    cursor: pointer;
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 247, 221, 0.05);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.mobile-tile:hover,
.mobile-tile:focus-visible,
.mobile-tile.is-selected {
    outline: none;
    transform: translateY(-2px);
    border-color: rgba(255, 230, 160, 0.7);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(246, 199, 74, 0.18),
        inset 0 0 0 1px rgba(255, 247, 221, 0.08);
}

.mobile-tile.is-start {
    --mobile-tile-color: rgba(246, 199, 74, 0.62);
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 230, 160, 0.24), transparent 48%),
        linear-gradient(145deg, rgba(246, 199, 74, 0.18), rgba(5, 5, 6, 0.9));
}

.mobile-tile.is-gem,
.mobile-tile.is-reflex {
    --mobile-tile-color: rgba(68, 215, 208, 0.62);
}

.mobile-tile.is-fuel,
.mobile-tile.is-memory {
    --mobile-tile-color: rgba(124, 227, 139, 0.56);
}

.mobile-tile.is-hazard {
    --mobile-tile-color: rgba(220, 47, 39, 0.64);
}

.mobile-tile.is-relevo,
.mobile-tile.is-nebula {
    --mobile-tile-color: rgba(155, 101, 255, 0.6);
}

.mobile-tile.is-champion,
.mobile-tile.is-crown,
.mobile-tile.is-puzzle,
.mobile-tile.is-jigsaw,
.mobile-tile.is-wordsearch,
.mobile-tile.is-crossword {
    --mobile-tile-color: rgba(246, 199, 74, 0.58);
}

.mobile-tile.has-current-player {
    border-color: rgba(68, 215, 208, 0.85);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.42),
        0 0 26px rgba(68, 215, 208, 0.24),
        inset 0 0 0 1px rgba(255, 247, 221, 0.08);
}

.mobile-tile__step {
    position: absolute;
    top: 6px;
    left: 6px;
    border-radius: 999px;
    padding: 2px 6px;
    background: rgba(5, 5, 6, 0.82);
    color: var(--gold-soft);
    font-size: 0.64rem;
    font-weight: 950;
    line-height: 1;
}

.mobile-tile__core {
    display: grid;
    place-items: center;
    width: 48px;
    aspect-ratio: 1;
    margin-top: 8px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 247, 221, 0.94) 0 20%, transparent 22%),
        radial-gradient(circle at 50% 50%, rgba(68, 215, 208, 0.22), transparent 68%);
    box-shadow:
        0 0 0 6px rgba(68, 215, 208, 0.06),
        0 0 16px rgba(68, 215, 208, 0.18);
}

.mobile-tile.is-start .mobile-tile__core,
.mobile-tile.is-champion .mobile-tile__core,
.mobile-tile.is-crown .mobile-tile__core {
    width: 54px;
    overflow: hidden;
    background: rgba(255, 247, 221, 0.94);
}

.mobile-tile.is-start .mobile-tile__core {
    width: 60px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 42%, rgba(246, 199, 74, 0.2), transparent 66%),
        rgba(5, 5, 6, 0.46);
}

.mobile-tile__core img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-tile.is-start .mobile-tile__core img {
    object-fit: contain;
    padding: 0;
    transform: scale(1.22);
}

.mobile-tile.is-champion .mobile-tile__core img,
.mobile-tile.is-crown .mobile-tile__core img {
    object-fit: cover;
    object-position: 50% 40%;
    transform: scale(1.52);
}

.mobile-tile__mark {
    width: 15px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.88;
}

.mobile-tile__copy {
    display: grid;
    gap: 2px;
    justify-items: center;
    width: 100%;
    min-width: 0;
    text-align: center;
}

.mobile-tile__label {
    max-width: 100%;
    overflow: hidden;
    color: #fff8df;
    font-size: 0.76rem;
    font-weight: 950;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-tile__sub {
    max-width: 100%;
    overflow: hidden;
    color: var(--gold-soft);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-tile__tokens {
    position: absolute;
    right: 5px;
    bottom: -11px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
    max-width: calc(100% - 10px);
    pointer-events: auto;
}

.mobile-tile.is-start .mobile-tile__tokens {
    right: 50%;
    bottom: -44px;
    justify-content: center;
    width: calc(100% + 16px);
    max-width: none;
    transform: translateX(50%);
}

.mobile-tile.is-inicio {
    min-height: 270px;
    padding-bottom: 154px;
}

.mobile-tile.is-inicio .mobile-tile__tokens {
    right: 50%;
    bottom: 12px;
    display: grid;
    grid-template-columns: repeat(2, var(--mobile-home-token-size, 48px));
    justify-content: center;
    justify-items: center;
    gap: 8px;
    width: calc(100% - 10px);
    max-width: none;
    transform: translateX(50%);
}

.mobile-tile.is-inicio .mobile-board-token {
    --mobile-token-size: var(--mobile-home-token-size, 48px);
}

.mobile-board-token {
    --token-color: var(--token-blue);
    --token-rim: var(--token-blue-rim);
    --mobile-token-size: 46px;
    --mobile-token-art-size: calc(var(--mobile-token-size) * 0.86);
    --mobile-token-art-scale: 1;
    --token-travel-scale: var(--mobile-token-art-scale);
    display: grid;
    flex: 0 0 var(--mobile-token-size);
    position: relative;
    place-items: center;
    width: var(--mobile-token-size);
    min-width: var(--mobile-token-size);
    height: var(--mobile-token-size);
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--token-rim), #fff 48%);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--token-rim), #fff 42%), transparent 24%),
        radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--token-color), transparent 18%), transparent 72%),
        linear-gradient(145deg, color-mix(in srgb, var(--token-color), #050506 34%), rgba(5, 5, 6, 0.82));
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.34),
        0 0 0 1px color-mix(in srgb, var(--token-color), #fff 42%),
        0 0 16px color-mix(in srgb, var(--token-rim), transparent 4%),
        0 0 34px color-mix(in srgb, var(--token-color), transparent 18%),
        inset 0 0 18px color-mix(in srgb, var(--token-rim), transparent 44%);
    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms ease;
    will-change: transform;
    isolation: isolate;
    overflow: visible;
}

.mobile-board-token::before {
    position: absolute;
    inset: 3px;
    border: 1px solid color-mix(in srgb, var(--token-rim), #fff 42%);
    border-radius: 9px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 36%, color-mix(in srgb, var(--token-color), transparent 58%)),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--token-color), transparent 34%), transparent 58%);
    content: "";
    opacity: 0.82;
    pointer-events: none;
}

.mobile-board-token::after {
    position: absolute;
    inset: -7px;
    z-index: -1;
    border-radius: 17px;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--token-rim), transparent 42%), transparent 64%),
        radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--token-color), transparent 28%), transparent 70%);
    content: "";
    opacity: 0.9;
    pointer-events: none;
}

.mobile-board-token.is-current {
    transform: translateY(-2px);
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.38),
        0 0 0 2px rgba(255, 247, 221, 0.62),
        0 0 18px color-mix(in srgb, var(--token-rim), transparent 4%),
        0 0 36px color-mix(in srgb, var(--token-color), transparent 22%),
        inset 0 0 14px color-mix(in srgb, var(--token-rim), transparent 58%);
}

.mobile-board-token.is-traveling {
    transform: translateY(-4px) scale(1.035);
}

.mobile-board-token img {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: calc(var(--mobile-token-size) * 0.86);
    height: var(--mobile-token-art-size);
    object-fit: contain;
    transform: translateZ(0) scale(var(--mobile-token-art-scale));
    transform-origin: center bottom;
    filter:
        drop-shadow(0 6px 8px rgba(0, 0, 0, 0.36))
        drop-shadow(0 0 12px color-mix(in srgb, var(--token-rim), transparent 16%));
}

.mobile-board-token.is-cyan {
    --token-color: var(--token-blue);
    --token-rim: var(--token-blue-rim);
}

.mobile-board-token.is-gold {
    --token-color: var(--token-yellow);
    --token-rim: var(--token-yellow-rim);
}

.mobile-board-token.is-green {
    --token-color: var(--token-green);
    --token-rim: var(--token-green-rim);
}

.mobile-board-token.is-red {
    --token-color: var(--token-red);
    --token-rim: var(--token-red-rim);
}

.token-dock,
.player-rack {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.dock-token,
.board-token {
    --token-color: var(--token-blue);
    --token-rim: var(--token-blue-rim);
    --token-img-scale: 1;
    --token-img-size: 86%;
    --token-travel-scale: var(--token-img-scale);
    display: inline-grid;
    position: relative;
    place-items: center;
    width: 54px;
    min-width: 54px;
    aspect-ratio: 1;
    border: 2px solid color-mix(in srgb, var(--token-rim), #fff 48%);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--token-rim), #fff 40%), transparent 25%),
        radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--token-color), transparent 18%), transparent 70%),
        linear-gradient(145deg, color-mix(in srgb, var(--token-color), #050506 34%), rgba(5, 5, 6, 0.74));
    color: #050506;
    font-size: 0.62rem;
    font-weight: 950;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.32),
        0 0 0 1px color-mix(in srgb, var(--token-color), #fff 42%),
        0 0 18px color-mix(in srgb, var(--token-rim), transparent 4%),
        0 0 34px color-mix(in srgb, var(--token-color), transparent 18%),
        inset 0 0 16px color-mix(in srgb, var(--token-rim), transparent 46%);
    isolation: isolate;
    overflow: visible;
}

.dock-token::before,
.board-token::before {
    position: absolute;
    inset: 3px;
    border: 1px solid color-mix(in srgb, var(--token-rim), #fff 42%);
    border-radius: 9px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 38%, color-mix(in srgb, var(--token-color), transparent 58%)),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--token-color), transparent 38%), transparent 60%);
    content: "";
    opacity: 0.82;
    pointer-events: none;
}

.dock-token img,
.board-token img {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: var(--token-img-size);
    height: var(--token-img-size);
    object-fit: contain;
    transform: scale(var(--token-img-scale));
    transform-origin: center bottom;
    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 12px color-mix(in srgb, var(--token-rim), transparent 18%));
}

.dock-token.is-cyan,
.board-token.is-cyan {
    --token-color: var(--token-blue);
    --token-rim: var(--token-blue-rim);
}

.dock-token.is-gold,
.board-token.is-gold {
    --token-color: var(--token-yellow);
    --token-rim: var(--token-yellow-rim);
}

.dock-token.is-green,
.board-token.is-green {
    --token-color: var(--token-green);
    --token-rim: var(--token-green-rim);
}

.dock-token.is-red,
.board-token.is-red {
    --token-color: var(--token-red);
    --token-rim: var(--token-red-rim);
}

.space-path-grid,
.board-pieces-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.start-boarding-light {
    position: absolute;
    left: 4.65%;
    top: calc(8.1% + (var(--tile-size) / 2) - 4px);
    z-index: 5;
    width: clamp(120px, 11cqw, 172px);
    height: clamp(148px, 16cqw, 232px);
    transform: translateX(-50%);
    opacity: 1;
    pointer-events: none;
    transition: opacity 520ms ease, filter 520ms ease;
}

.space-game-board.is-boarding-complete .start-boarding-light {
    opacity: 0;
    filter: brightness(0.6);
}

.start-boarding-light::before,
.start-boarding-light::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.start-boarding-light::before {
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    clip-path: polygon(45% 0, 55% 0, 98% 100%, 2% 100%);
    background:
        radial-gradient(ellipse at 50% 8%, rgba(255, 230, 160, 0.34), transparent 24%),
        linear-gradient(180deg, rgba(255, 230, 160, 0.42), rgba(68, 215, 208, 0.2) 42%, rgba(68, 215, 208, 0.03) 100%);
    filter: blur(0.4px);
    opacity: 0.78;
    mix-blend-mode: screen;
}

.start-boarding-light::after {
    left: 50%;
    bottom: 0;
    width: 82%;
    height: 26%;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 230, 160, 0.35), rgba(68, 215, 208, 0.2) 40%, transparent 72%);
    filter: blur(1px);
    opacity: 0.86;
    mix-blend-mode: screen;
}

.space-tile {
    position: absolute;
    left: var(--tile-left, 50%);
    top: var(--tile-top, 50%);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: 3px;
    width: var(--tile-size);
    height: var(--tile-size);
    border: 1px solid rgba(255, 247, 221, 0.2);
    border-radius: 12px;
    padding: 6px 5px 5px;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 247, 221, 0.18), transparent 48%),
        linear-gradient(145deg, rgba(255, 247, 221, 0.11), rgba(5, 5, 6, 0.84));
    color: var(--text);
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 247, 221, 0.05);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.start-space {
    position: absolute;
    left: 4.65%;
    top: 8.1%;
    z-index: 8;
    display: grid;
    grid-template-rows: auto 1fr auto;
    place-items: center;
    gap: 2px;
    width: var(--tile-size);
    height: var(--tile-size);
    border: 1px solid rgba(246, 199, 74, 0.48);
    border-radius: 12px;
    padding: 4px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 230, 160, 0.24), transparent 48%),
        linear-gradient(145deg, rgba(246, 199, 74, 0.18), rgba(5, 5, 6, 0.9));
    color: var(--gold-soft);
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.34),
        0 0 0 3px rgba(246, 199, 74, 0.09),
        inset 0 0 0 1px rgba(255, 247, 221, 0.08);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.start-space:hover,
.start-space:focus-visible,
.start-space.is-selected {
    border-color: rgba(255, 230, 160, 0.78);
    outline: none;
    transform: translate(-50%, calc(-50% - 5px));
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.38),
        0 0 0 3px rgba(246, 199, 74, 0.14),
        0 0 28px rgba(246, 199, 74, 0.18);
}

.start-space__core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 58%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 230, 160, 0.34);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 230, 160, 0.68), rgba(68, 215, 208, 0.18) 46%, rgba(5, 5, 6, 0.72) 100%);
    box-shadow:
        0 0 0 5px rgba(246, 199, 74, 0.08),
        0 0 18px rgba(68, 215, 208, 0.2);
}

.start-space__core img {
    width: 132%;
    height: 132%;
    object-fit: contain;
    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36))
        drop-shadow(0 0 12px rgba(68, 215, 208, 0.2));
}

.start-space .space-tile__step {
    border-color: rgba(246, 199, 74, 0.34);
}

.space-tile::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(115deg, transparent 0 34%, rgba(255, 247, 221, 0.18) 50%, transparent 66% 100%);
    opacity: 0;
    transform: translateX(-72%);
    transition: opacity 180ms ease, transform 420ms ease;
}

.space-tile:hover,
.space-tile:focus-visible,
.space-tile.is-selected {
    z-index: 20;
    border-color: rgba(246, 199, 74, 0.72);
    outline: none;
    transform: translate(-50%, calc(-50% - 5px));
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.38),
        0 0 0 3px rgba(246, 199, 74, 0.12),
        0 0 28px rgba(68, 215, 208, 0.18);
}

.space-tile:hover::before,
.space-tile:focus-visible::before,
.space-tile.is-selected::before {
    opacity: 0.75;
    transform: translateX(74%);
}

.space-tile__step,
.space-tile__core,
.space-tile__copy {
    position: relative;
    z-index: 2;
}

.space-tile__step {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 4;
    justify-self: start;
    border: 1px solid rgba(255, 247, 221, 0.16);
    border-radius: 999px;
    padding: 2px 6px;
    background: rgba(5, 5, 6, 0.7);
    color: var(--gold-soft);
    font-size: 0.62rem;
    font-weight: 950;
    line-height: 1;
}

.space-tile__core {
    align-self: end;
    display: grid;
    place-items: center;
    width: 50%;
    aspect-ratio: 1;
    border: 1px solid rgba(68, 215, 208, 0.28);
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 32%, rgba(255, 247, 221, 0.78), rgba(246, 199, 74, 0.22) 34%, rgba(68, 215, 208, 0.16) 62%, rgba(5, 5, 6, 0.55) 100%);
    box-shadow:
        0 0 0 5px rgba(68, 215, 208, 0.05),
        0 0 16px rgba(68, 215, 208, 0.16);
}

.space-tile__core img {
    width: 112%;
    height: 112%;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
}

.space-tile.is-champion .space-tile__core {
    width: 55%;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 247, 221, 0.94), rgba(255, 230, 160, 0.28) 50%, rgba(68, 215, 208, 0.16) 78%);
}

.space-tile.is-champion .space-tile__core img {
    width: 118%;
    height: 118%;
}

.space-tile__mark {
    display: grid;
    place-items: center;
    width: 64%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 15px currentColor;
}

.space-tile__mark::after {
    width: 44%;
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    background: rgba(5, 5, 6, 0.74);
}

.space-tile__copy {
    display: grid;
    gap: 1px;
    width: calc(100% + 10px);
    min-width: 0;
    min-height: 30px;
    margin: 0 -5px -5px;
    border-top: 1px solid rgba(255, 230, 160, 0.2);
    border-radius: 0 0 10px 10px;
    padding: 4px 4px 5px;
    background:
        linear-gradient(180deg, rgba(5, 5, 6, 0.82), rgba(5, 5, 6, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 247, 221, 0.06);
    text-align: center;
}

.space-tile__label,
.space-tile__sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.space-tile__label {
    color: #fff8df;
    font-size: 0.72rem;
    font-weight: 950;
    line-height: 1.05;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.space-tile__sub {
    color: #ffe6a0;
    font-size: 0.54rem;
    font-weight: 820;
    line-height: 1.05;
    opacity: 0.9;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.space-tile.is-start {
    border-color: rgba(124, 227, 139, 0.56);
    background:
        radial-gradient(circle at 50% 16%, rgba(124, 227, 139, 0.28), transparent 50%),
        linear-gradient(145deg, rgba(124, 227, 139, 0.18), rgba(5, 5, 6, 0.84));
}

.space-tile.is-champion {
    border-color: rgba(246, 199, 74, 0.48);
    background:
        radial-gradient(circle at 50% 16%, rgba(246, 199, 74, 0.26), transparent 50%),
        linear-gradient(145deg, rgba(246, 199, 74, 0.15), rgba(5, 5, 6, 0.84));
}

.space-tile.is-puzzle {
    border-color: rgba(255, 230, 160, 0.58);
    color: var(--gold-soft);
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 230, 160, 0.28), transparent 50%),
        radial-gradient(circle at 48% 42%, rgba(68, 215, 208, 0.16), transparent 56%),
        linear-gradient(145deg, rgba(246, 199, 74, 0.16), rgba(5, 5, 6, 0.84));
}

.space-tile.is-puzzle .space-tile__mark {
    border-radius: 6px;
    transform: rotate(45deg);
}

.space-tile.is-puzzle .space-tile__mark::after {
    border-radius: 3px;
}

.space-tile.is-jigsaw {
    border-color: rgba(68, 215, 208, 0.58);
    color: #dcffff;
    background:
        radial-gradient(circle at 50% 15%, rgba(68, 215, 208, 0.32), transparent 50%),
        radial-gradient(circle at 50% 48%, rgba(246, 199, 74, 0.2), transparent 54%),
        linear-gradient(145deg, rgba(68, 215, 208, 0.16), rgba(5, 5, 6, 0.84));
}

.space-tile.is-jigsaw .space-tile__mark {
    border-radius: 6px;
    background:
        linear-gradient(90deg, currentColor 0 28%, transparent 28% 36%, currentColor 36% 64%, transparent 64% 72%, currentColor 72% 100%),
        linear-gradient(0deg, transparent 0 34%, rgba(5, 5, 6, 0.65) 34% 42%, transparent 42% 100%);
}

.space-tile.is-wordsearch {
    border-color: rgba(68, 215, 208, 0.62);
    color: #dcffff;
    background:
        radial-gradient(circle at 50% 18%, rgba(124, 227, 139, 0.24), transparent 52%),
        radial-gradient(circle at 50% 52%, rgba(68, 215, 208, 0.22), transparent 55%),
        linear-gradient(145deg, rgba(68, 215, 208, 0.16), rgba(5, 5, 6, 0.84));
}

.space-tile.is-wordsearch .space-tile__mark {
    border-radius: 50%;
    background:
        radial-gradient(circle, currentColor 0 20%, transparent 21% 100%),
        conic-gradient(from 0deg, transparent 0 18%, currentColor 18% 22%, transparent 22% 48%, currentColor 48% 52%, transparent 52% 78%, currentColor 78% 82%, transparent 82% 100%);
}

.space-tile.is-crossword {
    border-color: rgba(255, 230, 160, 0.66);
    color: var(--gold-soft);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 230, 160, 0.3), transparent 52%),
        radial-gradient(circle at 50% 52%, rgba(68, 215, 208, 0.22), transparent 55%),
        linear-gradient(145deg, rgba(246, 199, 74, 0.15), rgba(5, 5, 6, 0.86));
}

.space-tile.is-crossword .space-tile__mark {
    width: 50%;
    height: 50%;
    border-radius: 5px;
    background:
        linear-gradient(90deg, currentColor 0 16%, transparent 16% 28%, currentColor 28% 44%, transparent 44% 56%, currentColor 56% 72%, transparent 72% 84%, currentColor 84% 100%),
        linear-gradient(0deg, currentColor 0 16%, transparent 16% 28%, currentColor 28% 44%, transparent 44% 56%, currentColor 56% 72%, transparent 72% 84%, currentColor 84% 100%);
    box-shadow: 0 0 16px rgba(255, 230, 160, 0.35);
}

.space-tile.is-reflex {
    border-color: rgba(246, 199, 74, 0.62);
    color: var(--gold-soft);
    background:
        radial-gradient(circle at 50% 18%, rgba(246, 199, 74, 0.3), transparent 52%),
        radial-gradient(circle at 50% 52%, rgba(68, 215, 208, 0.24), transparent 55%),
        linear-gradient(145deg, rgba(246, 199, 74, 0.16), rgba(5, 5, 6, 0.84));
}

.space-tile.is-reflex .space-tile__mark {
    width: 42%;
    height: 58%;
    border-radius: 8px 2px 8px 2px;
    background: linear-gradient(135deg, currentColor 0 45%, transparent 46% 58%, currentColor 59% 100%);
    transform: skewX(-12deg);
}

.space-tile.is-memory {
    border-color: rgba(124, 227, 139, 0.62);
    color: #eaffdd;
    background:
        radial-gradient(circle at 50% 18%, rgba(124, 227, 139, 0.28), transparent 52%),
        radial-gradient(circle at 50% 54%, rgba(68, 215, 208, 0.22), transparent 55%),
        linear-gradient(145deg, rgba(124, 227, 139, 0.15), rgba(5, 5, 6, 0.84));
}

.space-tile.is-memory .space-tile__mark {
    width: 54%;
    height: 46%;
    border-radius: 6px;
    background:
        linear-gradient(90deg, currentColor 0 42%, transparent 42% 58%, currentColor 58% 100%),
        linear-gradient(0deg, transparent 0 42%, rgba(5, 5, 6, 0.65) 42% 58%, transparent 58% 100%);
    box-shadow: 0 0 16px rgba(124, 227, 139, 0.3);
}

.space-tile.is-info {
    border-color: rgba(68, 215, 208, 0.5);
    color: var(--cyan);
    background:
        radial-gradient(circle at 50% 18%, rgba(68, 215, 208, 0.26), transparent 52%),
        radial-gradient(circle at 46% 52%, rgba(255, 230, 160, 0.14), transparent 54%),
        linear-gradient(145deg, rgba(68, 215, 208, 0.14), rgba(5, 5, 6, 0.84));
}

.space-tile.is-gem,
.space-tile.is-relevo {
    border-color: rgba(68, 215, 208, 0.5);
}

.space-tile.is-gem {
    color: var(--cyan);
}

.space-tile.is-relevo {
    color: var(--violet);
}

.space-tile.is-hazard {
    border-color: rgba(220, 47, 39, 0.52);
    color: var(--red);
}

.space-tile.is-fuel {
    border-color: rgba(124, 227, 139, 0.52);
    color: var(--green);
}

.space-tile.is-nebula {
    border-color: rgba(155, 101, 255, 0.48);
    color: var(--violet);
}

.space-tile.is-crown {
    border-color: rgba(246, 199, 74, 0.88);
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 230, 160, 0.38), transparent 54%),
        linear-gradient(145deg, rgba(246, 199, 74, 0.25), rgba(68, 215, 208, 0.13) 48%, rgba(5, 5, 6, 0.82));
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.38),
        0 0 36px rgba(246, 199, 74, 0.22),
        inset 0 0 0 1px rgba(255, 247, 221, 0.08);
}

.space-tile,
.mobile-tile {
    --tile-accent: #f5c84c;
    --tile-accent-rgb: 245, 200, 76;
    --tile-second: #2ce4ff;
    --tile-second-rgb: 44, 228, 255;
}

.space-tile.tone-prize,
.mobile-tile.tone-prize {
    --tile-accent: #f5c84c;
    --tile-accent-rgb: 245, 200, 76;
    --tile-second: #fff8df;
    --tile-second-rgb: 255, 248, 223;
}

.space-tile.tone-penalty,
.mobile-tile.tone-penalty {
    --tile-accent: #ef3f35;
    --tile-accent-rgb: 239, 63, 53;
    --tile-second: #f5c84c;
    --tile-second-rgb: 245, 200, 76;
}

.space-tile.tone-move,
.mobile-tile.tone-move {
    --tile-accent: #49e878;
    --tile-accent-rgb: 73, 232, 120;
    --tile-second: #2ce4ff;
    --tile-second-rgb: 44, 228, 255;
}

.space-tile.tone-chance,
.mobile-tile.tone-chance {
    --tile-accent: #2ce4ff;
    --tile-accent-rgb: 44, 228, 255;
    --tile-second: #f5c84c;
    --tile-second-rgb: 245, 200, 76;
}

.space-tile.tone-shield,
.mobile-tile.tone-shield {
    --tile-accent: #49e878;
    --tile-accent-rgb: 73, 232, 120;
    --tile-second: #f5c84c;
    --tile-second-rgb: 245, 200, 76;
}

.space-tile.tone-duel,
.mobile-tile.tone-duel {
    --tile-accent: #ef3f35;
    --tile-accent-rgb: 239, 63, 53;
    --tile-second: #2ce4ff;
    --tile-second-rgb: 44, 228, 255;
}

.space-tile.tone-final,
.mobile-tile.tone-final {
    --tile-accent: #f5c84c;
    --tile-accent-rgb: 245, 200, 76;
    --tile-second: #49e878;
    --tile-second-rgb: 73, 232, 120;
}

.space-tile.tone-rest,
.mobile-tile.tone-rest {
    --tile-accent: #2ce4ff;
    --tile-accent-rgb: 44, 228, 255;
    --tile-second: #49e878;
    --tile-second-rgb: 73, 232, 120;
}

.space-tile.tone-mixed,
.mobile-tile.tone-mixed {
    --tile-accent: #f5c84c;
    --tile-accent-rgb: 245, 200, 76;
    --tile-second: #ef3f35;
    --tile-second-rgb: 239, 63, 53;
}

.space-tile.tone-prize,
.space-tile.tone-penalty,
.space-tile.tone-move,
.space-tile.tone-chance,
.space-tile.tone-shield,
.space-tile.tone-duel,
.space-tile.tone-final,
.space-tile.tone-rest,
.space-tile.tone-mixed {
    border-color: rgba(var(--tile-accent-rgb), 0.72);
    background:
        radial-gradient(circle at 50% 15%, rgba(var(--tile-accent-rgb), 0.32), transparent 48%),
        radial-gradient(circle at 50% 48%, rgba(var(--tile-second-rgb), 0.18), transparent 58%),
        linear-gradient(145deg, rgba(var(--tile-accent-rgb), 0.14), rgba(5, 5, 6, 0.88));
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.32),
        0 0 20px rgba(var(--tile-accent-rgb), 0.16),
        inset 0 1px 0 rgba(255, 247, 221, 0.16);
}

.space-tile.tone-mixed {
    background:
        radial-gradient(circle at 34% 16%, rgba(var(--tile-accent-rgb), 0.32), transparent 45%),
        radial-gradient(circle at 72% 18%, rgba(var(--tile-second-rgb), 0.3), transparent 46%),
        linear-gradient(145deg, rgba(245, 200, 76, 0.14), rgba(239, 63, 53, 0.12) 46%, rgba(5, 5, 6, 0.88));
}

.space-tile__core.is-art {
    width: 58%;
    border-color: rgba(var(--tile-accent-rgb), 0.44);
    border-radius: 18px;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 248, 223, 0.2), transparent 36%),
        radial-gradient(circle at 50% 55%, rgba(var(--tile-accent-rgb), 0.22), transparent 72%),
        rgba(5, 5, 6, 0.42);
    box-shadow:
        0 0 0 4px rgba(var(--tile-accent-rgb), 0.08),
        0 0 18px rgba(var(--tile-accent-rgb), 0.2),
        inset 0 0 0 1px rgba(255, 247, 221, 0.1);
}

.space-tile__core.is-art img,
.space-tile.is-champion .space-tile__core.is-art img,
.space-tile.is-crown .space-tile__core.is-art img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    filter:
        drop-shadow(0 6px 8px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 10px rgba(var(--tile-accent-rgb), 0.28));
}

.space-tile.is-champion .space-tile__core.is-art {
    width: 58%;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 248, 223, 0.24), transparent 38%),
        radial-gradient(circle at 50% 55%, rgba(var(--tile-accent-rgb), 0.24), transparent 72%),
        rgba(5, 5, 6, 0.46);
}

.mobile-tile.tone-prize,
.mobile-tile.tone-penalty,
.mobile-tile.tone-move,
.mobile-tile.tone-chance,
.mobile-tile.tone-shield,
.mobile-tile.tone-duel,
.mobile-tile.tone-final,
.mobile-tile.tone-rest,
.mobile-tile.tone-mixed {
    --mobile-tile-color: rgba(var(--tile-accent-rgb), 0.72);
    background:
        radial-gradient(circle at 50% 14%, rgba(var(--tile-accent-rgb), 0.28), transparent 46%),
        radial-gradient(circle at 50% 48%, rgba(var(--tile-second-rgb), 0.16), transparent 60%),
        linear-gradient(145deg, rgba(var(--tile-accent-rgb), 0.12), rgba(5, 5, 6, 0.86));
    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.36),
        0 0 20px rgba(var(--tile-accent-rgb), 0.12),
        inset 0 0 0 1px rgba(255, 247, 221, 0.06);
}

.mobile-tile__core.is-art,
.mobile-tile.is-champion .mobile-tile__core.is-art,
.mobile-tile.is-crown .mobile-tile__core.is-art {
    width: 58px;
    border: 1px solid rgba(var(--tile-accent-rgb), 0.44);
    border-radius: 18px;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 248, 223, 0.2), transparent 36%),
        radial-gradient(circle at 50% 56%, rgba(var(--tile-accent-rgb), 0.22), transparent 72%),
        rgba(5, 5, 6, 0.48);
    box-shadow:
        0 0 0 5px rgba(var(--tile-accent-rgb), 0.08),
        0 0 18px rgba(var(--tile-accent-rgb), 0.18),
        inset 0 0 0 1px rgba(255, 247, 221, 0.1);
}

.mobile-tile__core.is-art img,
.mobile-tile.is-champion .mobile-tile__core.is-art img,
.mobile-tile.is-crown .mobile-tile__core.is-art img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    object-position: 50% 50%;
    border-radius: 0;
    background: transparent;
    transform: none;
    filter:
        drop-shadow(0 6px 8px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 10px rgba(var(--tile-accent-rgb), 0.28));
}

.board-token {
    position: absolute;
    z-index: 35;
    width: 46px;
    height: 46px;
    min-width: 46px;
    transform: translate(-50%, -50%);
    transition:
        left 300ms cubic-bezier(0.22, 1, 0.36, 1),
        top 300ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 180ms ease,
        box-shadow 180ms ease;
    will-change: left, top, transform;
    pointer-events: auto;
    cursor: pointer;
}

.board-token.is-home {
    z-index: 34;
}

.board-token.is-unused {
    opacity: 0;
    pointer-events: none;
}

.board-token.is-current {
    z-index: 38;
    transform: translate(-50%, -50%);
    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(255, 230, 160, 0.34),
        0 0 20px color-mix(in srgb, var(--token-color), transparent 30%);
}

.board-token.is-current[data-token-dock="home"] {
    transform: translate(-50%, -50%);
}

.board-token.is-traveling {
    z-index: 40;
}

.board-token.is-stacked {
    width: 24px;
    min-width: 24px;
    border-radius: 8px;
}

.board-token[data-token-dock]:not([data-token-dock="home"]) {
    --board-token-art-height: 30px;
    border-radius: 8px;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--token-rim), #fff 18%), transparent 24%),
        radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--token-color), transparent 38%), transparent 70%),
        rgba(5, 5, 6, 0.72);
    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.34),
        0 0 0 1px color-mix(in srgb, var(--token-rim), transparent 30%),
        0 0 14px color-mix(in srgb, var(--token-rim), transparent 22%),
        0 0 24px color-mix(in srgb, var(--token-color), transparent 42%);
}

.board-token.is-current[data-token-dock]:not([data-token-dock="home"]) {
    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(255, 230, 160, 0.34),
        0 0 20px color-mix(in srgb, var(--token-color), transparent 30%);
}

.board-token[data-token-dock]:not([data-token-dock="home"]) img {
    width: auto;
    max-width: var(--board-token-art-height);
    height: var(--board-token-art-height);
    object-fit: contain;
    transform: none;
}

.board-token.is-stacked[data-token-dock]:not([data-token-dock="home"]) {
    --board-token-art-height: 24px;
}

.board-token[data-token-dock="home"] {
    border-radius: 10px;
}

.board-token[data-token-dock="home"] img {
    width: auto;
    max-width: 34px;
    height: 34px;
    object-fit: contain;
    transform: none;
}

.is-hidden {
    display: none !important;
}

.mode-options,
.setup-options,
.setup-roster,
.game-actions,
.token-choice-grid {
    display: grid;
    gap: 8px;
}

.mode-options {
    margin-top: 12px;
}

.mode-button,
.primary-action,
.secondary-action,
.token-choice {
    border: 1px solid rgba(255, 247, 221, 0.16);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.1), rgba(246, 199, 74, 0.05)),
        rgba(5, 5, 6, 0.54);
    color: var(--text);
    font-weight: 900;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.mode-button {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 10px;
    text-align: left;
}

.mode-button--premium {
    padding-right: 42px;
}

.mode-lock {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 17px;
    height: 14px;
    border: 2px solid var(--gold);
    border-radius: 4px;
    transform: translateY(-32%);
    box-shadow: 0 0 12px rgba(246, 199, 74, 0.32);
}

.mode-lock::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--gold);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    transform: translateX(-50%);
}

.mode-button span {
    color: #fff8df;
    font-size: 0.86rem;
}

.mode-button small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 760;
}

.mode-button.is-active,
.token-choice.is-active,
.primary-action:not(:disabled):hover,
.secondary-action:not(:disabled):hover {
    border-color: rgba(246, 199, 74, 0.58);
    box-shadow: 0 0 0 3px rgba(246, 199, 74, 0.1), 0 0 20px rgba(68, 215, 208, 0.1);
}

.mode-button.is-disabled {
    opacity: 0.46;
}

.setup-online {
    gap: 12px;
}

.online-premium-gate {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(246, 199, 74, 0.36);
    border-radius: 14px;
    padding: 16px;
    background:
        radial-gradient(circle at 90% 0%, rgba(68, 215, 208, 0.14), transparent 38%),
        linear-gradient(145deg, rgba(33, 27, 8, 0.82), rgba(5, 22, 31, 0.9));
    box-shadow: inset 4px 0 0 rgba(246, 199, 74, 0.78);
}

.online-premium-gate.is-allowed {
    display: none;
}

.online-premium-gate__badge {
    width: max-content;
    border: 1px solid rgba(246, 199, 74, 0.52);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--gold-soft);
    font-size: 0.67rem;
    font-weight: 950;
    text-transform: uppercase;
}

.online-premium-gate h3,
.online-premium-gate p {
    margin: 0;
}

.online-premium-gate h3 {
    color: #fff8df;
    font-size: 1.08rem;
}

.online-premium-gate p {
    max-width: 62ch;
    color: var(--muted);
    line-height: 1.45;
}

.online-premium-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3px;
}

.online-member-controls {
    display: grid;
    gap: 12px;
}

.online-member-identity {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 10px;
    border: 1px solid rgba(68, 215, 208, 0.28);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(5, 26, 34, 0.68);
}

.online-member-identity > span {
    grid-row: 1 / 3;
    border-right: 1px solid rgba(68, 215, 208, 0.24);
    padding-right: 10px;
    color: var(--cyan);
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.online-member-identity strong {
    color: #fff8df;
    font-size: 0.95rem;
}

.online-member-identity small {
    color: #d8f2ea;
    font-size: 0.68rem;
    font-weight: 700;
}

.online-mode-tabs,
.online-room-size,
.online-token-options,
.online-lobby__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.online-mode-tabs button,
.online-room-size button,
.online-token-choice,
.online-lobby__player {
    border: 1px solid rgba(255, 247, 221, 0.14);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.1), rgba(246, 199, 74, 0.05)),
        rgba(5, 5, 6, 0.58);
    color: var(--text);
    font-weight: 900;
}

.online-mode-tabs button,
.online-room-size button {
    min-height: 42px;
    padding: 9px 12px;
}

.online-mode-tabs button.is-active,
.online-room-size button.is-active,
.online-token-choice.is-active {
    border-color: rgba(246, 199, 74, 0.62);
    box-shadow:
        0 0 0 3px rgba(246, 199, 74, 0.1),
        0 0 20px rgba(68, 215, 208, 0.12);
}

.online-setup-panel {
    display: grid;
    grid-template-columns: auto minmax(220px, 1.2fr);
    align-items: end;
    gap: 12px;
}

.online-setup-panel[data-online-join-panel] {
    grid-template-columns: minmax(150px, 0.75fr) minmax(220px, 1.2fr);
}

.online-room-size,
.online-token-panel {
    display: grid;
    gap: 7px;
}

.online-room-size > span,
.online-token-panel > span {
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.online-token-choice {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    min-width: 112px;
    min-height: 48px;
    padding: 7px 9px;
    text-align: left;
}

.online-token-choice:disabled {
    opacity: 0.45;
}

.online-token-choice img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(68, 215, 208, 0.22));
}

.online-setup-status {
    min-height: 18px;
    margin: 0;
    color: var(--gold-soft);
    font-size: 0.78rem;
    font-weight: 820;
}

.online-lobby {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(68, 215, 208, 0.24);
    border-radius: 14px;
    padding: 14px;
    background:
        radial-gradient(circle at 22% 12%, rgba(68, 215, 208, 0.14), transparent 34%),
        rgba(5, 5, 6, 0.46);
}

.online-lobby__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.online-lobby h3 {
    margin: 0;
    color: #fff8df;
    font-size: clamp(1.3rem, 3vw, 2rem);
}

.online-lobby h3 strong {
    color: var(--cyan);
    letter-spacing: 0.04em;
}

.online-lobby p {
    margin: 0;
    color: var(--muted);
}

.online-lobby__players {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.online-lobby__player {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 8px;
}

.online-lobby__player img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.online-lobby__player strong,
.online-lobby__player small {
    display: block;
}

.online-lobby__player small {
    color: var(--muted);
}

.online-lobby__player em {
    border: 1px solid rgba(68, 215, 208, 0.34);
    border-radius: 999px;
    padding: 4px 7px;
    color: var(--cyan);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.online-lobby__player.is-away em {
    border-color: rgba(246, 199, 74, 0.48);
    color: var(--gold-soft);
}

.online-lobby__player.is-offline em,
.online-lobby__player.is-left em {
    border-color: rgba(220, 47, 39, 0.42);
    color: #ffd8d5;
}

.online-lobby__player.is-left {
    opacity: 0.68;
}

.setup-options {
    margin-top: 12px;
}

.setup-note {
    margin-top: 12px !important;
}

.setup-field {
    display: grid;
    gap: 6px;
}

.setup-field > span,
.setup-name-field > span {
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.setup-field select,
.setup-name-field input {
    width: 100%;
    border: 1px solid rgba(255, 247, 221, 0.16);
    border-radius: 9px;
    padding: 9px 10px;
    background: rgba(5, 5, 6, 0.76);
    color: var(--text);
    font: inherit;
    font-weight: 820;
}

.setup-count-field {
    max-width: 240px;
}

.setup-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.setup-custom-select {
    position: relative;
    width: min(100%, 210px);
}

.setup-select-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(246, 199, 74, 0.34);
    border-radius: 10px;
    padding: 9px 12px;
    background:
        radial-gradient(circle at 20% 20%, rgba(68, 215, 208, 0.16), transparent 48%),
        linear-gradient(135deg, rgba(246, 199, 74, 0.14), rgba(5, 5, 6, 0.84));
    color: #fff8df;
    font-size: 0.82rem;
    font-weight: 950;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 247, 221, 0.08);
}

.setup-select-button i {
    width: 9px;
    aspect-ratio: 1;
    border-right: 2px solid var(--gold-soft);
    border-bottom: 2px solid var(--gold-soft);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
}

.setup-custom-select.is-open .setup-select-button {
    border-color: rgba(246, 199, 74, 0.7);
    box-shadow:
        0 0 0 3px rgba(246, 199, 74, 0.1),
        0 0 22px rgba(68, 215, 208, 0.1);
}

.setup-custom-select.is-open .setup-select-button i {
    transform: translateY(2px) rotate(225deg);
}

.setup-select-list {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 12;
    display: grid;
    gap: 5px;
    width: 100%;
    border: 1px solid rgba(246, 199, 74, 0.4);
    border-radius: 12px;
    padding: 6px;
    background:
        radial-gradient(circle at 18% 0%, rgba(68, 215, 208, 0.18), transparent 45%),
        rgba(8, 11, 15, 0.98);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 247, 221, 0.08);
}

.setup-select-list button {
    min-height: 34px;
    border: 1px solid rgba(255, 247, 221, 0.1);
    border-radius: 8px;
    padding: 7px 9px;
    background: rgba(255, 247, 221, 0.045);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-align: left;
}

.setup-select-list button:hover,
.setup-select-list button:focus-visible,
.setup-select-list button.is-selected {
    border-color: rgba(246, 199, 74, 0.58);
    outline: none;
    background: rgba(246, 199, 74, 0.12);
    color: #fff8df;
}

.setup-name-field input:focus-visible,
.setup-field select:focus-visible,
.setup-select-button:focus-visible {
    outline: 2px solid rgba(68, 215, 208, 0.72);
    outline-offset: 2px;
}

.setup-roster {
    margin-top: 8px;
}

.setup-player-card {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(255, 247, 221, 0.12);
    border-radius: 10px;
    padding: 8px;
    background:
        radial-gradient(circle at 14% 8%, rgba(68, 215, 208, 0.16), transparent 34%),
        rgba(255, 247, 221, 0.045);
}

.setup-player-card.is-bot {
    background:
        radial-gradient(circle at 14% 8%, rgba(246, 199, 74, 0.14), transparent 34%),
        rgba(255, 247, 221, 0.04);
}

.setup-player-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.setup-player-badge {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(5, 5, 6, 0.74);
    border: 1px solid rgba(246, 199, 74, 0.42);
    color: var(--gold-soft);
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
}

.setup-player-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.setup-player-title strong {
    margin: 0;
    overflow: hidden;
    color: #fff8df;
    font-size: 0.86rem;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-player-title small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-name-field {
    display: grid;
    gap: 5px;
}

.setup-player-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(164px, 0.34fr);
    gap: 10px;
    align-items: stretch;
}

.setup-player-fields {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.setup-token-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.setup-token-button {
    display: grid;
    place-items: center;
    gap: 2px;
    min-height: 58px;
    padding: 3px 2px;
}

.setup-token-button img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(68, 215, 208, 0.24));
}

.setup-token-button span {
    max-width: 100%;
    overflow: hidden;
    color: var(--gold-soft);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-token-button:disabled {
    cursor: not-allowed;
    opacity: 0.32;
    box-shadow: none;
}

.setup-token-button.is-previewed {
    border-color: rgba(68, 215, 208, 0.74);
    box-shadow:
        0 0 0 3px rgba(68, 215, 208, 0.12),
        0 0 24px rgba(68, 215, 208, 0.18);
}

.setup-token-preview {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 0;
    border: 1px solid rgba(255, 247, 221, 0.14);
    border-radius: 12px;
    padding: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 34%, rgba(246, 199, 74, 0.16), transparent 44%),
        radial-gradient(circle at 30% 72%, rgba(68, 215, 208, 0.12), transparent 46%),
        rgba(5, 5, 6, 0.42);
    text-align: center;
}

.setup-token-preview.is-pending {
    border-color: rgba(246, 199, 74, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 247, 221, 0.08), 0 0 24px rgba(68, 215, 208, 0.08);
}

.setup-token-preview__art {
    display: grid;
    place-items: center;
    width: min(132px, 100%);
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--preview-color, var(--gold)), #fff 24%);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--preview-color, var(--gold)), transparent 62%), transparent 66%),
        rgba(5, 5, 6, 0.48);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.32),
        0 0 28px color-mix(in srgb, var(--preview-color, var(--gold)), transparent 54%);
}

.setup-token-preview__art img {
    width: 118%;
    height: 118%;
    object-fit: contain;
    filter:
        drop-shadow(0 12px 16px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 12px color-mix(in srgb, var(--preview-color, var(--gold)), transparent 48%));
}

.setup-token-preview.is-gold {
    --preview-color: var(--token-yellow);
}

.setup-token-preview.is-green {
    --preview-color: var(--token-green);
}

.setup-token-preview.is-red {
    --preview-color: var(--token-red);
}

.setup-token-preview.is-cyan {
    --preview-color: var(--token-blue);
}

.setup-token-preview strong {
    color: #fff8df;
    font-size: 0.82rem;
    line-height: 1.1;
}

.setup-token-preview__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    margin-top: 0;
}

.setup-token-preview__actions .primary-action,
.setup-token-preview__actions .secondary-action {
    min-height: 30px;
    margin-top: 0;
    padding: 6px 7px;
    font-size: 0.64rem;
}

.token-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.token-choice {
    display: grid;
    place-items: center;
    min-height: 58px;
    padding: 3px;
}

.token-choice .dock-token {
    width: 46px;
    min-width: 46px;
}

.primary-action,
.secondary-action {
    min-height: 40px;
    padding: 9px 12px;
    color: #fff8df;
}

.primary-action {
    margin-top: 12px;
    background:
        linear-gradient(135deg, rgba(246, 199, 74, 0.42), rgba(68, 215, 208, 0.18)),
        rgba(5, 5, 6, 0.72);
}

.secondary-action {
    margin-top: 0;
    color: var(--gold-soft);
}

.online-only-action {
    border-color: rgba(68, 215, 208, 0.28);
    background:
        radial-gradient(circle at 20% 18%, rgba(68, 215, 208, 0.14), transparent 42%),
        rgba(5, 5, 6, 0.68);
    color: #dcffff;
}

.secondary-action.is-danger-action {
    border-color: rgba(220, 47, 39, 0.42);
    background:
        radial-gradient(circle at 18% 20%, rgba(220, 47, 39, 0.2), transparent 42%),
        rgba(5, 5, 6, 0.72);
    color: #ffd8d5;
}

.primary-action:disabled,
.secondary-action:disabled {
    opacity: 0.45;
}

.setup-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 18px;
}

.setup-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 42% 22%, rgba(68, 215, 208, 0.16), transparent 34%),
        rgba(5, 5, 6, 0.78);
    backdrop-filter: blur(12px);
}

.setup-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    width: min(820px, calc(100vw - 28px));
    max-height: min(860px, calc(100svh - 28px));
    overflow-y: auto;
    border: 1px solid rgba(246, 199, 74, 0.34);
    border-radius: 18px;
    padding: 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(246, 199, 74, 0.18), transparent 34%),
        radial-gradient(circle at 78% 12%, rgba(68, 215, 208, 0.14), transparent 30%),
        linear-gradient(145deg, rgba(8, 14, 18, 0.96), rgba(5, 5, 6, 0.96));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.56),
        inset 0 1px 0 rgba(255, 247, 221, 0.1);
}

.setup-modal__close {
    justify-self: end;
    min-height: 34px;
    border: 1px solid rgba(255, 247, 221, 0.16);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(5, 5, 6, 0.64);
    color: var(--gold-soft);
    cursor: pointer;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 920;
}

.setup-modal__hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.setup-modal__hero h2 {
    margin: 2px 0 0;
    color: #fff8df;
    font-size: clamp(1.62rem, 4.1vw, 2.72rem);
    line-height: 0.98;
}

.setup-modal__hero p:not(.eyebrow) {
    max-width: 58ch;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.38;
}

.setup-modal__hero-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.setup-sound-toggle {
    padding: 7px 11px;
    font-size: 0.68rem;
}

.setup-modal__art {
    display: grid;
    place-items: center;
    width: 76px;
    aspect-ratio: 1;
    border: 1px solid rgba(246, 199, 74, 0.32);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 42%, rgba(246, 199, 74, 0.2), transparent 60%),
        rgba(255, 247, 221, 0.045);
}

.setup-modal__art img {
    width: 112%;
    height: 112%;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(68, 215, 208, 0.22));
}

.setup-modal__settings {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(255, 247, 221, 0.1);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 247, 221, 0.04);
}

.setup-modal .mode-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.setup-modal .setup-options {
    margin-top: 0;
}

.setup-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.setup-progress span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 247, 221, 0.12);
    border-radius: 999px;
    padding: 6px 9px;
    background: rgba(255, 247, 221, 0.045);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
}

.setup-progress span.is-current {
    border-color: rgba(246, 199, 74, 0.58);
    color: #fff8df;
    box-shadow: 0 0 18px rgba(246, 199, 74, 0.1);
}

.setup-progress span.is-done {
    border-color: rgba(68, 215, 208, 0.4);
    color: #d9fcff;
}

.setup-modal__actions {
    display: grid;
    grid-template-columns: auto auto minmax(132px, 1fr);
    gap: 8px;
}

.setup-modal__actions .primary-action,
.setup-modal__actions .secondary-action {
    margin-top: 0;
}

body.setup-modal-open {
    overflow: hidden;
}

.game-actions {
    grid-template-columns: 1fr;
    margin-top: 12px;
}

.winner-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 20px;
}

.winner-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(246, 199, 74, 0.24), transparent 32%),
        rgba(5, 5, 6, 0.82);
    backdrop-filter: blur(8px);
}

.winner-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    width: min(520px, calc(100vw - 32px));
    border: 1px solid rgba(246, 199, 74, 0.46);
    border-radius: 18px;
    padding: clamp(22px, 4vw, 34px);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 22%, rgba(246, 199, 74, 0.2), transparent 35%),
        radial-gradient(circle at 50% 52%, rgba(68, 215, 208, 0.12), transparent 42%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.98), rgba(5, 5, 6, 0.95));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.62),
        0 0 54px rgba(246, 199, 74, 0.18),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
    text-align: center;
}

.winner-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 247, 221, 0.18);
    border-radius: 50%;
    background: rgba(5, 5, 6, 0.72);
    color: var(--gold-soft);
    font-size: 1rem;
    font-weight: 950;
}

.winner-modal__art {
    position: relative;
    display: grid;
    place-items: center;
    width: min(250px, 62vw);
    margin: 14px 0 4px;
}

.winner-modal__podio {
    width: 100%;
    filter:
        drop-shadow(0 20px 34px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 34px rgba(246, 199, 74, 0.32));
}

.winner-modal__token {
    --token-color: var(--token-blue);
    position: absolute;
    bottom: 8%;
    display: grid;
    place-items: center;
    width: 92px;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--token-color), #fff 32%);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--token-color), transparent 58%), transparent 64%),
        rgba(5, 5, 6, 0.52);
    box-shadow:
        0 16px 28px rgba(0, 0, 0, 0.38),
        0 0 24px color-mix(in srgb, var(--token-color), transparent 45%);
}

.winner-modal__token img {
    width: 112%;
    height: 112%;
    object-fit: contain;
    filter:
        drop-shadow(0 10px 14px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 12px color-mix(in srgb, var(--token-color), transparent 44%));
}

.winner-modal__token.is-gold {
    --token-color: var(--token-yellow);
}

.winner-modal__token.is-green {
    --token-color: var(--token-green);
}

.winner-modal__token.is-red {
    --token-color: var(--token-red);
}

.winner-modal__token.is-cyan {
    --token-color: var(--token-blue);
}

.winner-modal h2 {
    margin: 8px 0 0;
    color: #fff8df;
    font-size: clamp(1.8rem, 5vw, 2.7rem);
    line-height: 0.95;
}

.winner-modal p:not(.eyebrow) {
    max-width: 34rem;
    margin: 12px 0 0;
    color: #e8dec4;
    font-size: 0.98rem;
    line-height: 1.5;
}

.winner-modal strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: 14px;
    border: 1px solid rgba(246, 199, 74, 0.44);
    border-radius: 999px;
    padding: 8px 14px;
    background: rgba(246, 199, 74, 0.1);
    color: var(--gold-soft);
    font-size: 0.95rem;
    font-weight: 950;
}

.winner-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
}

.winner-modal__actions .primary-action,
.winner-modal__actions .secondary-action {
    margin-top: 0;
}

.rules-modal {
    position: fixed;
    inset: 0;
    z-index: 82;
    display: grid;
    place-items: center;
    padding: 20px;
}

.rules-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 36%, rgba(68, 215, 208, 0.2), transparent 36%),
        rgba(5, 5, 6, 0.82);
    backdrop-filter: blur(8px);
}

.rules-modal__card {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100vw - 32px));
    max-height: min(86vh, 720px);
    border: 1px solid rgba(246, 199, 74, 0.42);
    border-radius: 18px;
    padding: clamp(20px, 3vw, 30px);
    overflow: auto;
    background:
        radial-gradient(circle at 84% 8%, rgba(246, 199, 74, 0.16), transparent 30%),
        radial-gradient(circle at 8% 20%, rgba(68, 215, 208, 0.15), transparent 34%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.98), rgba(5, 5, 6, 0.95));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.62),
        0 0 44px rgba(68, 215, 208, 0.14),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
}

.rules-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 247, 221, 0.18);
    border-radius: 50%;
    background: rgba(5, 5, 6, 0.72);
    color: var(--gold-soft);
    font-size: 1rem;
    font-weight: 950;
}

.rules-modal h2 {
    margin: 8px 0 0;
    color: #fff8df;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    line-height: 1;
}

.rules-modal__intro {
    max-width: 620px;
    margin: 12px 0 0;
    color: rgba(255, 247, 221, 0.84);
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.45;
}

.rules-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.rules-modal__item {
    position: relative;
    min-height: 124px;
    border: 1px solid rgba(255, 247, 221, 0.12);
    border-radius: 12px;
    padding: 15px 15px 15px 54px;
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.1), transparent 48%),
        rgba(255, 247, 221, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 247, 221, 0.08);
}

.rules-modal__item span {
    position: absolute;
    top: 15px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 28px;
    aspect-ratio: 1;
    border: 1px solid rgba(246, 199, 74, 0.46);
    border-radius: 50%;
    background: rgba(5, 5, 6, 0.7);
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 950;
    box-shadow: 0 0 16px rgba(68, 215, 208, 0.18);
}

.rules-modal__item strong {
    display: block;
    color: #fff8df;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.1;
}

.rules-modal__item p {
    margin: 7px 0 0;
    color: rgba(232, 222, 196, 0.92);
    font-size: 0.88rem;
    font-weight: 720;
    line-height: 1.38;
}

.rules-modal__note {
    margin: 14px 0 0;
    border: 1px solid rgba(124, 227, 139, 0.22);
    border-radius: 10px;
    padding: 12px 14px;
    background: rgba(124, 227, 139, 0.08);
    color: rgba(255, 247, 221, 0.9);
    font-size: 0.9rem;
    font-weight: 820;
    line-height: 1.4;
}

.rules-modal__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.rules-modal__actions .primary-action,
.rules-modal__actions .secondary-action {
    margin-top: 0;
}

.comodin-modal {
    position: fixed;
    inset: 0;
    z-index: 84;
    display: grid;
    place-items: center;
    padding: 20px;
}

.comodin-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 32%, rgba(68, 215, 208, 0.22), transparent 36%),
        radial-gradient(circle at 58% 64%, rgba(246, 199, 74, 0.14), transparent 38%),
        rgba(5, 5, 6, 0.84);
    backdrop-filter: blur(9px);
}

.comodin-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(780px, calc(100vw - 32px));
    max-height: calc(100svh - 32px);
    border: 1px solid rgba(68, 215, 208, 0.38);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 30px);
    overflow: auto;
    background:
        radial-gradient(circle at 16% 14%, rgba(68, 215, 208, 0.16), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(246, 199, 74, 0.18), transparent 31%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.98), rgba(5, 5, 6, 0.96));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.62),
        0 0 48px rgba(68, 215, 208, 0.16),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
}

.comodin-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 247, 221, 0.18);
    border-radius: 50%;
    background: rgba(5, 5, 6, 0.72);
    color: var(--gold-soft);
    font-size: 1rem;
    font-weight: 950;
}

.comodin-modal__hero {
    display: grid;
    grid-template-columns: minmax(100px, 150px) 1fr;
    gap: 18px;
    align-items: center;
}

.comodin-modal__hero img {
    width: 100%;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(246, 199, 74, 0.42);
    border-radius: 16px;
    object-fit: cover;
    background: rgba(5, 5, 6, 0.64);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.42),
        0 0 32px rgba(68, 215, 208, 0.18);
}

.comodin-modal h2 {
    margin: 8px 0 0;
    color: #fff8df;
    font-size: clamp(1.8rem, 5vw, 3rem);
    line-height: 0.95;
}

.comodin-modal p:not(.eyebrow) {
    margin: 10px 0 0;
    color: #e8dec4;
    line-height: 1.5;
}

.comodin-roster {
    display: grid;
    gap: 10px;
}

.comodin-empty {
    border: 1px solid rgba(255, 247, 221, 0.14);
    border-radius: 14px;
    padding: 14px;
    background: rgba(5, 5, 6, 0.42);
    color: #e8dec4;
    font-weight: 820;
}

.comodin-player-card {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(255, 247, 221, 0.14);
    border-radius: 14px;
    padding: 10px;
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.1), rgba(246, 199, 74, 0.06)),
        rgba(5, 5, 6, 0.48);
}

.comodin-player-card.is-empty {
    opacity: 0.74;
}

.comodin-player-card > img {
    width: 50px;
    aspect-ratio: 1;
    object-fit: contain;
    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 10px rgba(68, 215, 208, 0.18));
}

.comodin-player-card strong {
    display: block;
    color: #fff8df;
    font-size: 1rem;
    font-weight: 950;
}

.comodin-player-card small {
    display: block;
    margin-top: 3px;
    color: #d8caaa;
    font-size: 0.78rem;
    font-weight: 800;
}

.comodin-card-stack {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 116px;
}

.comodin-card-stack img {
    width: 44px;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(246, 199, 74, 0.38);
    border-radius: 8px;
    object-fit: cover;
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(68, 215, 208, 0.14);
}

.comodin-card-stack img + img {
    margin-left: -18px;
}

.comodin-card-stack em {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    margin-left: 8px;
    border: 1px solid rgba(246, 199, 74, 0.48);
    border-radius: 999px;
    background: rgba(246, 199, 74, 0.12);
    color: var(--gold-soft);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 950;
}

.comodin-modal__actions {
    display: flex;
    justify-content: flex-end;
}

.comodin-modal__actions .primary-action,
.comodin-modal__actions .secondary-action {
    margin-top: 0;
}

.comodin-burst {
    position: fixed;
    inset: 0;
    z-index: 104;
    display: grid;
    place-items: center;
    padding: 20px;
    pointer-events: none;
}

.comodin-burst.requires-continue {
    pointer-events: auto;
    background:
        radial-gradient(circle at 50% 38%, rgba(68, 215, 208, 0.16), transparent 34%),
        rgba(0, 0, 0, 0.58);
}

.comodin-burst__card {
    display: grid;
    place-items: center;
    width: min(280px, calc(100vw - 52px));
    border: 1px solid rgba(246, 199, 74, 0.5);
    border-radius: 22px;
    padding: 18px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 12%, rgba(68, 215, 208, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.96), rgba(5, 5, 6, 0.94));
    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.62),
        0 0 64px rgba(68, 215, 208, 0.3),
        inset 0 1px 0 rgba(255, 247, 221, 0.16);
}

.comodin-burst__card img {
    width: min(150px, 52vw);
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(246, 199, 74, 0.44);
    border-radius: 16px;
    object-fit: cover;
    box-shadow:
        0 22px 42px rgba(0, 0, 0, 0.42),
        0 0 38px rgba(68, 215, 208, 0.24);
}

.comodin-burst__card strong {
    margin-top: 12px;
    color: #fff8df;
    font-size: 1.24rem;
    font-weight: 950;
}

.comodin-burst__card span {
    margin-top: 7px;
    color: #f4e5bf;
    font-size: 0.9rem;
    font-weight: 820;
    line-height: 1.35;
}

.comodin-burst__actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
}

.comodin-burst__actions .primary-action {
    width: min(190px, 100%);
}

.turn-notice-modal {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 20px;
}

.turn-notice-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(68, 215, 208, 0.2), transparent 34%),
        radial-gradient(circle at 50% 70%, rgba(246, 199, 74, 0.14), transparent 42%),
        rgba(5, 5, 6, 0.72);
    backdrop-filter: blur(7px);
}

.turn-notice-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    width: min(500px, calc(100vw - 36px));
    border: 1px solid rgba(246, 199, 74, 0.52);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 28px);
    text-align: center;
    background:
        radial-gradient(circle at 50% 10%, rgba(68, 215, 208, 0.2), transparent 34%),
        linear-gradient(145deg, rgba(10, 16, 18, 0.98), rgba(5, 5, 6, 0.96));
    box-shadow:
        0 34px 110px rgba(0, 0, 0, 0.66),
        0 0 70px rgba(68, 215, 208, 0.22),
        inset 0 1px 0 rgba(255, 247, 221, 0.18);
}

.turn-notice-modal h2 {
    margin: 6px 0 0;
    color: #fff8df;
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    font-weight: 950;
    line-height: 1;
}

.turn-notice-modal p:not(.eyebrow) {
    max-width: 38ch;
    margin: 14px 0 0;
    color: #f6ead0;
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.45;
}

.turn-notice-modal__die-panel {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 16px;
}

.turn-notice-modal__die-panel[hidden] {
    display: none;
}

.turn-notice-modal__die-panel > span:first-child {
    color: #f6c74a;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.turn-notice-modal__die-shell {
    display: grid;
    place-items: center;
    width: 72px;
    aspect-ratio: 1;
    border: 1px solid rgba(246, 199, 74, 0.52);
    border-radius: 18px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.5), transparent 20%),
        linear-gradient(145deg, #ffe871, #d5a72d 48%, #83651c);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.38),
        0 0 26px rgba(246, 199, 74, 0.24),
        inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.turn-notice-modal__die-shell .die-face {
    width: 58%;
}

.turn-notice-modal__notice {
    width: 100%;
    margin-top: 18px;
    border: 1px solid rgba(124, 227, 139, 0.42);
    border-radius: 14px;
    padding: 12px 14px;
    background:
        radial-gradient(circle at 12% 50%, rgba(124, 227, 139, 0.17), transparent 42%),
        rgba(9, 34, 25, 0.58);
}

.turn-notice-modal__notice strong {
    color: #fff7dd;
    font-size: 0.94rem;
    font-weight: 950;
    line-height: 1.35;
}

.turn-notice-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
}

.turn-notice-modal__actions .primary-action,
.turn-notice-modal__actions .secondary-action {
    width: min(220px, 100%);
}

.chance-modal {
    position: fixed;
    inset: 0;
    z-index: 104;
    display: grid;
    place-items: center;
    padding: 20px;
}

.chance-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 28%, rgba(246, 199, 74, 0.18), transparent 36%),
        radial-gradient(circle at 50% 68%, rgba(68, 215, 208, 0.18), transparent 42%),
        rgba(5, 5, 6, 0.76);
    backdrop-filter: blur(8px);
}

.chance-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    width: min(540px, calc(100vw - 36px));
    border: 1px solid rgba(246, 199, 74, 0.54);
    border-radius: 20px;
    padding: clamp(20px, 3vw, 28px);
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.18), transparent 30%),
        radial-gradient(circle at 50% 62%, rgba(68, 215, 208, 0.18), transparent 46%),
        linear-gradient(145deg, rgba(11, 17, 18, 0.98), rgba(5, 5, 6, 0.96));
    box-shadow:
        0 34px 110px rgba(0, 0, 0, 0.66),
        0 0 74px rgba(68, 215, 208, 0.2),
        inset 0 1px 0 rgba(255, 247, 221, 0.18);
}

.chance-modal h2 {
    margin: 6px 0 0;
    color: #fff8df;
    font-size: clamp(1.7rem, 4vw, 2.55rem);
    font-weight: 950;
    line-height: 1;
}

.chance-modal p:not(.eyebrow) {
    max-width: 43ch;
    margin: 13px 0 0;
    color: #f6ead0;
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.45;
}

.chance-modal__die-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    margin-top: 20px;
    border: 1px solid rgba(246, 199, 74, 0.34);
    border-radius: 18px;
    padding: 13px 14px;
    background:
        radial-gradient(circle at 50% 44%, rgba(246, 199, 74, 0.16), transparent 48%),
        radial-gradient(circle at 50% 70%, rgba(68, 215, 208, 0.12), transparent 58%),
        rgba(5, 5, 6, 0.52);
}

.chance-modal__die-panel > span,
.chance-modal__die-panel > strong {
    color: #fff7dd;
    font-size: 0.9rem;
    font-weight: 950;
    line-height: 1.15;
}

.chance-modal__die-panel > span {
    color: #dcffff;
    text-align: left;
}

.chance-modal__die-panel > strong {
    justify-self: end;
    color: var(--gold-soft);
}

.chance-die {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 84px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 230, 160, 0.68);
    border-radius: 22px;
    background:
        linear-gradient(145deg, #fff4c8, #f6c74a 48%, #8c640e);
    color: #050506;
    cursor: pointer;
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.4),
        0 0 36px rgba(246, 199, 74, 0.32),
        0 0 44px rgba(68, 215, 208, 0.16),
        inset 0 2px 0 rgba(255, 255, 255, 0.48);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.chance-die:hover,
.chance-die:focus-visible {
    outline: none;
    transform: translateY(-2px) rotate(-2deg);
    box-shadow:
        0 22px 42px rgba(0, 0, 0, 0.46),
        0 0 44px rgba(246, 199, 74, 0.42),
        0 0 54px rgba(68, 215, 208, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.54);
}

.chance-die:disabled {
    cursor: not-allowed;
    opacity: 0.68;
    transform: none;
}

.chance-die.is-locked {
    cursor: default;
    opacity: 1;
    pointer-events: none;
    transform: none;
}

.chance-die .die-face i {
    width: 7px;
}

.chance-die.is-rolling {
    animation: duel-die-roll 820ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.chance-modal__notice {
    width: 100%;
    margin-top: 16px;
    border: 1px solid rgba(124, 227, 139, 0.42);
    border-radius: 14px;
    padding: 12px 14px;
    background:
        radial-gradient(circle at 12% 50%, rgba(124, 227, 139, 0.17), transparent 42%),
        rgba(9, 34, 25, 0.58);
}

.chance-modal__notice strong {
    color: #fff7dd;
    font-size: 0.94rem;
    font-weight: 950;
    line-height: 1.35;
}

.chance-modal__actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
}

.chance-modal__actions .primary-action {
    width: min(220px, 100%);
}

.chance-modal.has-result .chance-die {
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.42),
        0 0 42px rgba(246, 199, 74, 0.42),
        0 0 58px rgba(68, 215, 208, 0.24),
        inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.chance-modal.has-result .chance-die:disabled,
.chance-modal.has-result .chance-die.is-locked {
    opacity: 1;
}

.chance-modal.has-result .chance-modal__notice {
    border-color: rgba(246, 199, 74, 0.48);
    background:
        radial-gradient(circle at 18% 40%, rgba(246, 199, 74, 0.2), transparent 46%),
        rgba(33, 24, 8, 0.62);
}

.chance-modal.has-result [data-chance-result] {
    color: #fff4bd;
    text-shadow: 0 0 18px rgba(246, 199, 74, 0.34);
}

.info-tile-modal {
    position: fixed;
    inset: 0;
    z-index: 83;
    display: grid;
    place-items: center;
    padding: 20px;
}

.info-tile-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 28%, rgba(246, 199, 74, 0.2), transparent 34%),
        radial-gradient(circle at 50% 68%, rgba(68, 215, 208, 0.18), transparent 40%),
        rgba(5, 5, 6, 0.82);
    backdrop-filter: blur(8px);
}

.info-tile-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100svh - 32px);
    border: 1px solid rgba(246, 199, 74, 0.44);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 28px);
    overflow: auto;
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 230, 160, 0.16), transparent 34%),
        radial-gradient(circle at 10% 24%, rgba(68, 215, 208, 0.14), transparent 28%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.98), rgba(5, 5, 6, 0.95));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.62),
        0 0 46px rgba(246, 199, 74, 0.15),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
    text-align: center;
}

.info-tile-modal__collage {
    position: relative;
    display: block;
    width: min(420px, 100%);
    aspect-ratio: 16 / 9;
    margin-bottom: 16px;
    border: 1px solid rgba(246, 199, 74, 0.34);
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 20%, rgba(246, 199, 74, 0.18), transparent 45%),
        linear-gradient(145deg, rgba(5, 5, 6, 0.95), rgba(12, 28, 24, 0.88));
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(68, 215, 208, 0.12),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
}

.info-tile-modal__collage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 105%, rgba(246, 199, 74, 0.22), transparent 36%),
        linear-gradient(180deg, transparent 58%, rgba(5, 5, 6, 0.24));
    pointer-events: none;
}

.info-tile-modal__collage.is-single {
    width: min(420px, 100%);
}

.info-tile-modal__art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-tile-modal__portrait {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 230, 160, 0.34);
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(255, 247, 221, 0.9), rgba(246, 199, 74, 0.42) 52%, rgba(68, 215, 208, 0.1));
    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.32),
        0 0 16px rgba(246, 199, 74, 0.16);
}

.info-tile-modal__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-tile-modal__collage.is-single .info-tile-modal__portrait {
    width: min(150px, 44vw);
}

.info-tile-modal h2 {
    margin: 8px 0 0;
    color: #fff8df;
    font-size: clamp(1.9rem, 5vw, 3rem);
    line-height: 0.98;
}

.info-tile-modal p:not(.eyebrow) {
    max-width: 38rem;
    margin: 12px 0 0;
    color: #e8dec4;
    font-size: 0.98rem;
    line-height: 1.5;
}

.info-tile-modal__notice {
    display: grid;
    gap: 4px;
    width: min(440px, 100%);
    margin-top: 18px;
    border: 1px solid rgba(68, 215, 208, 0.32);
    border-radius: 14px;
    padding: 12px;
    background:
        radial-gradient(circle at 50% 0%, rgba(68, 215, 208, 0.16), transparent 68%),
        rgba(5, 5, 6, 0.44);
}

.info-tile-modal__notice strong {
    color: var(--gold-soft);
    font-size: 0.88rem;
    font-weight: 950;
    text-transform: uppercase;
}

.info-tile-modal__notice span {
    color: #dcffff;
    font-size: 0.86rem;
    font-weight: 760;
    line-height: 1.35;
}

.info-tile-modal__actions {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
}

.info-tile-modal__actions .primary-action,
.info-tile-modal__actions .secondary-action {
    margin-top: 0;
}

.space-puzzle-modal {
    position: fixed;
    inset: 0;
    z-index: 85;
    display: grid;
    place-items: center;
    padding: 18px;
}

.space-puzzle-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 36% 26%, rgba(246, 199, 74, 0.18), transparent 34%),
        radial-gradient(circle at 64% 56%, rgba(68, 215, 208, 0.18), transparent 38%),
        rgba(5, 5, 6, 0.86);
    backdrop-filter: blur(8px);
}

.space-puzzle-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(1040px, calc(100vw - 28px));
    max-height: calc(100svh - 28px);
    border: 1px solid rgba(246, 199, 74, 0.46);
    border-radius: 18px;
    padding: clamp(14px, 2vw, 22px);
    overflow: auto;
    background:
        radial-gradient(circle at 22% 12%, rgba(255, 230, 160, 0.14), transparent 34%),
        radial-gradient(circle at 78% 28%, rgba(68, 215, 208, 0.14), transparent 38%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.98), rgba(5, 5, 6, 0.95));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.62),
        0 0 46px rgba(246, 199, 74, 0.13),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
}

.space-puzzle-modal__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.space-puzzle-modal h2 {
    margin: 6px 0 0;
    color: #fff8df;
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    line-height: 1;
}

.space-puzzle-modal p:not(.eyebrow) {
    margin: 8px 0 0;
    color: #e8dec4;
    font-size: 0.95rem;
    line-height: 1.42;
}

.space-puzzle-modal__timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 142px;
    border: 1px solid rgba(255, 230, 160, 0.4);
    border-radius: 999px;
    padding: 10px 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.2), transparent 68%),
        rgba(5, 5, 6, 0.54);
    color: var(--gold-soft);
    font-size: 0.88rem;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 0 20px rgba(246, 199, 74, 0.12);
}

.space-puzzle-modal__timer.is-warning {
    border-color: rgba(246, 199, 74, 0.82);
    color: #fff1ad;
    box-shadow: 0 0 26px rgba(246, 199, 74, 0.26);
}

.space-puzzle-modal__timer.is-critical,
.space-puzzle-modal__timer.is-expired {
    border-color: rgba(220, 47, 39, 0.72);
    color: #ffd0cc;
    box-shadow: 0 0 28px rgba(220, 47, 39, 0.25);
}

.space-puzzle-modal__timer.is-paused {
    opacity: 0.78;
}

.space-puzzle-modal__meta,
.space-puzzle-modal__reward {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(255, 247, 221, 0.12);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(5, 5, 6, 0.34);
}

.space-puzzle-modal__meta span,
.space-puzzle-modal__reward span {
    color: #e8dec4;
    font-size: 0.84rem;
    font-weight: 760;
    line-height: 1.35;
}

.space-puzzle-modal__meta strong,
.space-puzzle-modal__reward strong {
    color: var(--gold-soft);
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.space-puzzle-modal__reward {
    border-color: rgba(124, 227, 139, 0.28);
    background:
        radial-gradient(circle at 0% 50%, rgba(124, 227, 139, 0.14), transparent 50%),
        rgba(5, 5, 6, 0.34);
}

.space-puzzle-modal__arena {
    display: grid;
    grid-template-columns: minmax(320px, 0.96fr) minmax(260px, 0.74fr);
    gap: 14px;
    align-items: stretch;
}

.space-puzzle-modal.is-intro .space-puzzle-modal__arena {
    grid-template-columns: minmax(0, 1fr);
}

.space-puzzle-modal.is-intro .space-puzzle-modal__board-frame {
    display: none;
}

.space-puzzle-modal.is-intro .space-puzzle-modal__status {
    min-height: 150px;
    align-items: center;
    justify-items: center;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.16), transparent 58%),
        radial-gradient(circle at 50% 90%, rgba(68, 215, 208, 0.1), transparent 52%),
        rgba(5, 5, 6, 0.56);
}

.space-puzzle-modal.is-transitioning .space-puzzle-modal__status {
    border-color: rgba(124, 227, 139, 0.42);
    box-shadow: inset 0 0 28px rgba(124, 227, 139, 0.08);
}

.space-puzzle-modal__board-frame {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 400px;
    border: 1px solid rgba(68, 215, 208, 0.24);
    border-radius: 14px;
    padding: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(68, 215, 208, 0.16), transparent 56%),
        linear-gradient(145deg, rgba(255, 247, 221, 0.06), rgba(5, 5, 6, 0.76));
}

.space-puzzle-modal__board-frame.is-wrong {
    border-color: rgba(220, 47, 39, 0.54);
    box-shadow: inset 0 0 32px rgba(220, 47, 39, 0.12);
}

.space-puzzle-modal__board-frame.is-crashing .space-puzzle-modal__board {
    animation: puzzle-board-impact 780ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.puzzle-crash-layer {
    --impact-x: 50%;
    --impact-y: 50%;
    position: absolute;
    inset: 0;
    z-index: 30;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
}

.puzzle-crash-layer.is-active,
.puzzle-crash-layer.is-settled {
    opacity: 1;
}

.puzzle-crash-alert {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(220, 47, 39, 0.22), transparent),
        radial-gradient(circle at var(--impact-x) var(--impact-y), rgba(246, 199, 74, 0.18), transparent 34%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: puzzle-crash-alert 1050ms ease-out forwards;
}

.puzzle-crash-board-flash,
.puzzle-crash-firefield,
.puzzle-crash-heat,
.puzzle-crash-board-smoke {
    position: absolute;
    left: var(--board-left);
    top: var(--board-top);
    width: var(--board-width);
    height: var(--board-height);
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
}

.puzzle-crash-board-flash {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 247, 221, 0.96) 0 9%, rgba(246, 199, 74, 0.84) 18%, rgba(220, 47, 39, 0.54) 38%, transparent 68%),
        linear-gradient(135deg, rgba(255, 247, 221, 0.35), rgba(220, 47, 39, 0.26));
    filter: blur(2px);
    mix-blend-mode: screen;
    transform: scale(0.62);
    animation: puzzle-crash-board-flash 1200ms ease-out 260ms forwards;
}

.puzzle-crash-firefield {
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 247, 221, 0.55) 0 3%, rgba(246, 199, 74, 0.56) 7%, transparent 19%),
        radial-gradient(circle at 72% 30%, rgba(255, 247, 221, 0.4) 0 4%, rgba(220, 47, 39, 0.58) 10%, transparent 24%),
        radial-gradient(circle at 45% 72%, rgba(246, 199, 74, 0.68) 0 8%, rgba(220, 47, 39, 0.5) 16%, transparent 32%),
        linear-gradient(0deg, rgba(220, 47, 39, 0.62), rgba(246, 199, 74, 0.22) 48%, rgba(5, 5, 6, 0.12));
    box-shadow:
        0 0 52px rgba(220, 47, 39, 0.62),
        0 0 120px rgba(246, 199, 74, 0.38);
    mix-blend-mode: screen;
    transform: scale(0.96);
    animation: puzzle-crash-firefield 1300ms ease-out 520ms forwards, puzzle-crash-firefield-pulse 860ms ease-in-out 1.45s infinite alternate;
}

.puzzle-crash-heat {
    inset: calc(var(--board-top) - 28px) auto auto calc(var(--board-left) - 28px);
    width: calc(var(--board-width) + 56px);
    height: calc(var(--board-height) + 56px);
    border: 1px solid rgba(246, 199, 74, 0.18);
    background:
        repeating-linear-gradient(115deg, rgba(255, 247, 221, 0.08) 0 7px, transparent 7px 18px),
        radial-gradient(circle at 50% 50%, rgba(246, 199, 74, 0.17), transparent 64%);
    filter: blur(5px);
    mix-blend-mode: screen;
    animation: puzzle-crash-heat 1500ms ease-out 430ms forwards;
}

.puzzle-crash-board-smoke {
    inset: calc(var(--board-top) - 34px) auto auto calc(var(--board-left) - 34px);
    width: calc(var(--board-width) + 68px);
    height: calc(var(--board-height) + 68px);
    background:
        radial-gradient(circle at 22% 34%, rgba(25, 20, 18, 0.52), transparent 34%),
        radial-gradient(circle at 62% 22%, rgba(82, 62, 46, 0.42), transparent 38%),
        radial-gradient(circle at 72% 72%, rgba(15, 14, 14, 0.48), transparent 34%),
        radial-gradient(circle at 42% 72%, rgba(220, 47, 39, 0.2), transparent 38%);
    filter: blur(15px);
    mix-blend-mode: multiply;
    animation: puzzle-crash-board-smoke 1700ms ease-out 720ms forwards;
}

.puzzle-crash-trail {
    position: absolute;
    left: var(--impact-x);
    top: var(--impact-y);
    width: min(72vw, 520px);
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(68, 215, 208, 0.3), rgba(246, 199, 74, 0.72), rgba(220, 47, 39, 0.78));
    filter: blur(4px);
    opacity: 0;
    transform-origin: right center;
    animation: puzzle-crash-trail 760ms cubic-bezier(0.18, 0.88, 0.25, 1) forwards;
}

.puzzle-crash-ship {
    position: absolute;
    left: var(--impact-x);
    top: var(--impact-y);
    width: 72px;
    height: 30px;
    border-radius: 70% 18% 18% 70%;
    background:
        linear-gradient(90deg, rgba(255, 247, 221, 0.95), rgba(68, 215, 208, 0.9) 58%, rgba(5, 5, 6, 0.72)),
        #d9fcff;
    box-shadow:
        0 0 24px rgba(68, 215, 208, 0.74),
        -34px 0 36px rgba(246, 199, 74, 0.42);
    opacity: 0;
    transform-origin: 70% 50%;
    animation: puzzle-crash-ship 760ms cubic-bezier(0.2, 0.86, 0.22, 1) forwards;
}

.puzzle-crash-ship::before,
.puzzle-crash-ship::after {
    content: "";
    position: absolute;
    left: 30px;
    width: 28px;
    height: 14px;
    background: rgba(246, 199, 74, 0.82);
    clip-path: polygon(0 100%, 100% 50%, 0 0);
}

.puzzle-crash-ship::before {
    top: -7px;
    transform: rotate(-18deg);
}

.puzzle-crash-ship::after {
    bottom: -7px;
    transform: rotate(18deg);
}

.puzzle-crash-flash,
.puzzle-crash-wave,
.puzzle-crash-crater,
.puzzle-crash-smoke,
.puzzle-crash-flame,
.puzzle-crash-label {
    position: absolute;
    left: var(--impact-x);
    top: var(--impact-y);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.puzzle-crash-flash {
    width: min(86vw, 620px);
    height: min(86vw, 620px);
    background: radial-gradient(circle, rgba(255, 247, 221, 0.96) 0 14%, rgba(246, 199, 74, 0.82) 26%, rgba(220, 47, 39, 0.66) 48%, transparent 72%);
    filter: blur(1px);
    animation: puzzle-crash-flash 850ms ease-out 430ms forwards;
}

.puzzle-crash-wave {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(246, 199, 74, 0.88);
    box-shadow: 0 0 38px rgba(220, 47, 39, 0.56);
    animation: puzzle-crash-wave 920ms ease-out 450ms forwards;
}

.puzzle-crash-shard {
    position: absolute;
    left: var(--impact-x);
    top: var(--impact-y);
    width: 5px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 247, 221, 0.95), rgba(220, 47, 39, 0.78));
    box-shadow: 0 0 12px rgba(246, 199, 74, 0.45);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(24deg);
    animation: puzzle-crash-shard 720ms cubic-bezier(0.18, 0.82, 0.28, 1) var(--shard-delay) forwards;
}

.puzzle-crash-crater {
    width: min(82vw, 540px);
    height: min(82vw, 540px);
    background:
        radial-gradient(circle, rgba(255, 247, 221, 0.9) 0 5%, rgba(246, 199, 74, 0.8) 9%, rgba(220, 47, 39, 0.78) 24%, rgba(5, 5, 6, 0.78) 46%, transparent 68%),
        repeating-conic-gradient(from 18deg, rgba(246, 199, 74, 0.34) 0 8deg, transparent 8deg 20deg);
    box-shadow:
        0 0 58px rgba(220, 47, 39, 0.78),
        0 0 140px rgba(246, 199, 74, 0.42);
    animation: puzzle-crash-crater 1050ms ease-out 520ms forwards;
}

.puzzle-crash-smoke {
    width: min(94vw, 680px);
    height: min(88vw, 620px);
    background:
        radial-gradient(circle at 38% 42%, rgba(22, 18, 16, 0.66), transparent 34%),
        radial-gradient(circle at 58% 36%, rgba(74, 58, 44, 0.46), transparent 35%),
        radial-gradient(circle at 50% 62%, rgba(220, 47, 39, 0.24), transparent 44%);
    filter: blur(9px);
    mix-blend-mode: multiply;
    animation: puzzle-crash-smoke 1450ms ease-out 720ms forwards;
}

.puzzle-crash-flame,
.puzzle-crash-board-flame {
    border-radius: 50% 50% 46% 46%;
    background:
        radial-gradient(circle at 50% 70%, rgba(255, 247, 221, 0.98) 0 14%, transparent 15%),
        radial-gradient(circle at 48% 55%, rgba(246, 199, 74, 0.96) 0 34%, transparent 35%),
        linear-gradient(180deg, rgba(255, 114, 47, 0.98), rgba(220, 47, 39, 0.92) 62%, transparent 100%);
    box-shadow:
        0 0 18px rgba(246, 199, 74, 0.68),
        0 0 34px rgba(220, 47, 39, 0.58);
    opacity: 0;
    transform-origin: 50% 100%;
}

.puzzle-crash-flame {
    width: 28px;
    height: 64px;
    animation: puzzle-crash-flame 780ms ease-out var(--flame-delay) forwards, puzzle-crash-fire-breathe 680ms ease-in-out 1.38s infinite alternate;
}

.puzzle-crash-board-flame {
    position: absolute;
    left: var(--board-flame-x);
    top: var(--board-flame-y);
    width: 34px;
    height: 86px;
    animation:
        puzzle-crash-board-flame 920ms ease-out var(--board-flame-delay) forwards,
        puzzle-crash-board-fire-breathe 780ms ease-in-out 1.35s infinite alternate;
}

.puzzle-crash-label {
    min-width: 116px;
    border: 1px solid rgba(255, 247, 221, 0.28);
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(28, 4, 4, 0.82);
    color: #fff1df;
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 0 28px rgba(220, 47, 39, 0.5);
    transform: translate(-50%, calc(-50% + 82px)) scale(0.9);
    animation: puzzle-crash-label 650ms ease-out 700ms forwards;
}

.puzzle-crash-scoreboard,
.puzzle-crash-attempt-emblem,
.puzzle-crash-score-pulse {
    position: absolute;
    left: var(--impact-x);
    top: var(--impact-y);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

.puzzle-crash-scoreboard {
    min-width: 138px;
    padding: 10px 14px;
    border: 1px solid rgba(246, 199, 74, 0.74);
    border-radius: 8px;
    background: rgba(8, 39, 67, 0.94);
    color: #ffe6a0;
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    box-shadow:
        0 0 24px rgba(246, 199, 74, 0.35),
        inset 0 0 22px rgba(68, 215, 208, 0.12);
    animation: puzzle-scoreboard-pop 980ms cubic-bezier(0.18, 0.88, 0.25, 1) 260ms forwards;
}

.puzzle-crash-scoreboard::before {
    content: "Intento no válido";
    display: block;
}

.puzzle-crash-scoreboard::after {
    content: "No es mate en 1";
    display: block;
    margin-top: 5px;
    color: #fff7dd;
    font-size: 0.62rem;
}

.puzzle-crash-attempt-emblem,
.puzzle-crash-score-pulse {
    width: 58px;
    height: 58px;
    border: 2px solid rgba(255, 247, 221, 0.82);
    border-radius: 12px;
    padding: 7px;
    object-fit: contain;
    background: #0b3152;
    box-shadow: 0 0 24px rgba(246, 199, 74, 0.48), 0 10px 28px rgba(0, 0, 0, 0.34);
}

.puzzle-crash-attempt-emblem {
    animation: puzzle-attempt-emblem-pop 980ms cubic-bezier(0.18, 0.88, 0.25, 1) 360ms forwards;
}

.puzzle-crash-score-pulse {
    border-color: rgba(68, 215, 208, 0.78);
    animation: puzzle-score-pulse 940ms cubic-bezier(0.2, 0.86, 0.22, 1) 310ms forwards;
}

.space-puzzle-modal__board {
    --puzzle-coord-gap: clamp(18px, 3vw, 26px);
    --puzzle-coord-edge: clamp(6px, 1.1vw, 10px);
    width: min(58svh, 100%, 500px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 247, 221, 0.18);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    background: #eee4d1;
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(255, 247, 221, 0.08);
}

.space-puzzle-modal__board cg-container {
    width: calc(100% - var(--puzzle-coord-gap) - var(--puzzle-coord-edge)) !important;
    height: calc(100% - var(--puzzle-coord-gap) - var(--puzzle-coord-edge)) !important;
    margin: var(--puzzle-coord-edge) var(--puzzle-coord-edge) var(--puzzle-coord-gap) var(--puzzle-coord-gap);
    overflow: visible !important;
    position: relative;
}

.space-puzzle-modal__board cg-board {
    background-color: #eee4d1 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"><g id="a"><g id="b"><g id="c"><g id="d"><rect width="1" height="1" id="e" fill="%23eee4d1"/><use x="1" y="1" href="%23e"/><rect y="1" width="1" height="1" id="f" fill="%231a8e78"/><use x="1" y="-1" href="%23f"/></g><use x="2" href="%23d"/></g><use x="4" href="%23c"/></g><use y="2" href="%23b"/></g><use y="4" href="%23a"/></svg>') !important;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.space-puzzle-modal__board cg-board square.selected {
    background-color: rgba(246, 199, 74, 0.42) !important;
}

.space-puzzle-modal__board cg-board square.last-move {
    background-color: rgba(68, 215, 208, 0.28) !important;
}

.space-puzzle-modal__board cg-board square.move-dest {
    background: radial-gradient(circle, rgba(246, 199, 74, 0.48) 22%, transparent 24%);
}

.space-puzzle-modal__board coords.files {
    position: absolute !important;
    right: 0 !important;
    bottom: calc(var(--puzzle-coord-gap) * -0.82) !important;
    left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    align-items: center !important;
    height: calc(var(--puzzle-coord-gap) * 0.7) !important;
    pointer-events: none !important;
}

.space-puzzle-modal__board coords.ranks {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: calc(var(--puzzle-coord-gap) * -0.82) !important;
    display: grid !important;
    grid-template-rows: repeat(8, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: calc(var(--puzzle-coord-gap) * 0.7) !important;
    pointer-events: none !important;
}

.space-puzzle-modal__board coords coord {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #15120c !important;
    font-size: clamp(9px, 1.6vw, 12px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
    transform: none !important;
}

.space-puzzle-modal__board coords.ranks coord:nth-child(1) { order: 8; }
.space-puzzle-modal__board coords.ranks coord:nth-child(2) { order: 7; }
.space-puzzle-modal__board coords.ranks coord:nth-child(3) { order: 6; }
.space-puzzle-modal__board coords.ranks coord:nth-child(4) { order: 5; }
.space-puzzle-modal__board coords.ranks coord:nth-child(5) { order: 4; }
.space-puzzle-modal__board coords.ranks coord:nth-child(6) { order: 3; }
.space-puzzle-modal__board coords.ranks coord:nth-child(7) { order: 2; }
.space-puzzle-modal__board coords.ranks coord:nth-child(8) { order: 1; }

.space-puzzle-modal__board coords.files.black coord:nth-child(1) { order: 8; }
.space-puzzle-modal__board coords.files.black coord:nth-child(2) { order: 7; }
.space-puzzle-modal__board coords.files.black coord:nth-child(3) { order: 6; }
.space-puzzle-modal__board coords.files.black coord:nth-child(4) { order: 5; }
.space-puzzle-modal__board coords.files.black coord:nth-child(5) { order: 4; }
.space-puzzle-modal__board coords.files.black coord:nth-child(6) { order: 3; }
.space-puzzle-modal__board coords.files.black coord:nth-child(7) { order: 2; }
.space-puzzle-modal__board coords.files.black coord:nth-child(8) { order: 1; }

.space-puzzle-modal__board coords.ranks.black coord:nth-child(1) { order: 1; }
.space-puzzle-modal__board coords.ranks.black coord:nth-child(2) { order: 2; }
.space-puzzle-modal__board coords.ranks.black coord:nth-child(3) { order: 3; }
.space-puzzle-modal__board coords.ranks.black coord:nth-child(4) { order: 4; }
.space-puzzle-modal__board coords.ranks.black coord:nth-child(5) { order: 5; }
.space-puzzle-modal__board coords.ranks.black coord:nth-child(6) { order: 6; }
.space-puzzle-modal__board coords.ranks.black coord:nth-child(7) { order: 7; }
.space-puzzle-modal__board coords.ranks.black coord:nth-child(8) { order: 8; }

.space-puzzle-modal__loader {
    position: absolute;
    inset: 12px;
    z-index: 5;
    display: grid;
    place-items: center;
    gap: 10px;
    border-radius: 12px;
    background: rgba(5, 5, 6, 0.78);
    color: var(--gold-soft);
    text-align: center;
}

.space-puzzle-modal__loader[hidden] {
    display: none;
}

.space-puzzle-modal__loader span {
    width: 44px;
    aspect-ratio: 1;
    border: 3px solid rgba(68, 215, 208, 0.2);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: puzzle-loader-spin 900ms linear infinite;
}

.space-puzzle-modal__status {
    display: grid;
    align-content: start;
    gap: 10px;
    border: 1px solid rgba(255, 247, 221, 0.12);
    border-radius: 14px;
    padding: 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.12), transparent 48%),
        rgba(5, 5, 6, 0.42);
}

.space-puzzle-modal__status strong {
    color: #fff8df;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-weight: 950;
}

.space-puzzle-modal__status p {
    margin: 0;
    color: #e8dec4;
    font-size: 0.92rem;
    line-height: 1.45;
}

.space-puzzle-modal__status small {
    display: inline-flex;
    width: fit-content;
    border: 1px solid rgba(68, 215, 208, 0.28);
    border-radius: 999px;
    padding: 7px 10px;
    color: #dcffff;
    font-size: 0.76rem;
    font-weight: 900;
}

.space-puzzle-modal__status.is-success {
    border-color: rgba(124, 227, 139, 0.42);
    box-shadow: inset 0 0 28px rgba(124, 227, 139, 0.08);
}

.space-puzzle-modal__status.is-danger {
    border-color: rgba(220, 47, 39, 0.46);
    box-shadow: inset 0 0 28px rgba(220, 47, 39, 0.08);
}

.space-puzzle-modal__actions {
    display: flex;
    justify-content: flex-end;
}

.space-puzzle-modal__actions:not(.is-hidden) {
    justify-content: center;
    border: 1px solid rgba(255, 230, 160, 0.24);
    border-radius: 14px;
    padding: 10px;
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.16), transparent 70%),
        rgba(5, 5, 6, 0.56);
    box-shadow:
        0 0 24px rgba(246, 199, 74, 0.08),
        inset 0 0 0 1px rgba(255, 247, 221, 0.05);
}

.space-puzzle-modal__actions .primary-action,
.space-puzzle-modal__actions .secondary-action {
    margin-top: 0;
}

.jigsaw-modal {
    position: fixed;
    inset: 0;
    z-index: 86;
    display: grid;
    place-items: center;
    padding: 18px;
}

.jigsaw-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 24%, rgba(68, 215, 208, 0.2), transparent 36%),
        radial-gradient(circle at 72% 58%, rgba(246, 199, 74, 0.18), transparent 38%),
        rgba(5, 5, 6, 0.88);
    backdrop-filter: blur(8px);
}

.jigsaw-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(1050px, calc(100vw - 28px));
    max-height: calc(100svh - 28px);
    border: 1px solid rgba(68, 215, 208, 0.42);
    border-radius: 18px;
    padding: clamp(14px, 2vw, 22px);
    overflow: auto;
    background:
        radial-gradient(circle at 20% 10%, rgba(68, 215, 208, 0.14), transparent 34%),
        radial-gradient(circle at 78% 26%, rgba(246, 199, 74, 0.14), transparent 38%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.98), rgba(5, 5, 6, 0.95));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.64),
        0 0 48px rgba(68, 215, 208, 0.13),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
}

.jigsaw-modal__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.jigsaw-modal__portrait {
    width: 86px;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 247, 221, 0.72);
    border-radius: 999px;
    padding: 5px;
    background:
        radial-gradient(circle at 50% 50%, rgba(68, 215, 208, 0.26), transparent 64%),
        rgba(255, 247, 221, 0.92);
    box-shadow: 0 0 28px rgba(68, 215, 208, 0.22);
}

.jigsaw-modal__portrait img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.jigsaw-modal h2 {
    margin: 6px 0 0;
    color: #fff8df;
    font-size: clamp(1.8rem, 4vw, 2.65rem);
    line-height: 1;
}

.jigsaw-modal p:not(.eyebrow) {
    margin: 8px 0 0;
    color: #e8dec4;
    font-size: 0.95rem;
    line-height: 1.42;
}

.jigsaw-modal__timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 124px;
    border: 1px solid rgba(255, 230, 160, 0.4);
    border-radius: 999px;
    padding: 10px 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.2), transparent 68%),
        rgba(5, 5, 6, 0.54);
    color: var(--gold-soft);
    font-size: 0.9rem;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 0 20px rgba(246, 199, 74, 0.12);
}

.jigsaw-modal__timer.is-warning {
    border-color: rgba(246, 199, 74, 0.82);
    color: #fff1ad;
    box-shadow: 0 0 26px rgba(246, 199, 74, 0.26);
}

.jigsaw-modal__timer.is-critical,
.jigsaw-modal__timer.is-expired {
    border-color: rgba(220, 47, 39, 0.72);
    color: #ffd0cc;
    box-shadow: 0 0 28px rgba(220, 47, 39, 0.25);
}

.jigsaw-modal__timer.is-paused {
    opacity: 0.78;
}

.jigsaw-modal__reward {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(124, 227, 139, 0.28);
    border-radius: 12px;
    padding: 10px 12px;
    background:
        radial-gradient(circle at 0% 50%, rgba(124, 227, 139, 0.14), transparent 50%),
        rgba(5, 5, 6, 0.34);
}

.jigsaw-modal__reward strong {
    color: var(--gold-soft);
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.jigsaw-modal__reward span {
    color: #e8dec4;
    font-size: 0.84rem;
    font-weight: 760;
    line-height: 1.35;
}

.jigsaw-modal__arena {
    display: grid;
    grid-template-columns: minmax(360px, 0.96fr) minmax(280px, 0.64fr);
    gap: 14px;
    align-items: stretch;
}

.jigsaw-board {
    --jigsaw-cols: 4;
    --jigsaw-rows: 3;
    display: grid;
    grid-template-columns: repeat(var(--jigsaw-cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--jigsaw-rows), minmax(0, 1fr));
    gap: 5px;
    width: min(62svh, 100%, 620px);
    aspect-ratio: 4 / 3;
    justify-self: center;
    border: 1px solid rgba(68, 215, 208, 0.3);
    border-radius: 16px;
    padding: 10px;
    background:
        linear-gradient(90deg, rgba(68, 215, 208, 0.07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(246, 199, 74, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, rgba(68, 215, 208, 0.14), transparent 56%),
        rgba(5, 5, 6, 0.58);
    background-size: 32px 32px, 32px 32px, auto, auto;
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 247, 221, 0.06);
}

.jigsaw-slot {
    position: relative;
    display: grid;
    place-items: stretch;
    min-width: 0;
    min-height: 0;
    border: 1px dashed rgba(255, 230, 160, 0.28);
    border-radius: 8px;
    background: rgba(255, 247, 221, 0.045);
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.jigsaw-slot.is-empty::before {
    content: "";
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(68, 215, 208, 0.22);
    border-radius: 7px;
    background:
        radial-gradient(circle at 50% 50%, rgba(68, 215, 208, 0.14), transparent 58%),
        rgba(5, 5, 6, 0.22);
    pointer-events: none;
}

.jigsaw-slot.is-drop-ready {
    border-style: solid;
    border-color: rgba(68, 215, 208, 0.56);
    background:
        radial-gradient(circle at 50% 50%, rgba(68, 215, 208, 0.12), transparent 58%),
        rgba(255, 247, 221, 0.055);
    box-shadow:
        inset 0 0 18px rgba(68, 215, 208, 0.1),
        0 0 14px rgba(68, 215, 208, 0.08);
}

.jigsaw-slot.is-drop-ready::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 230, 160, 0.34);
    border-radius: 6px;
    pointer-events: none;
}

.jigsaw-slot.is-drop-ready:hover,
.jigsaw-slot.is-drop-ready:focus-visible {
    border-color: rgba(255, 230, 160, 0.82);
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 20px rgba(246, 199, 74, 0.11),
        0 0 18px rgba(246, 199, 74, 0.16);
}

.jigsaw-slot:focus-visible {
    outline: 2px solid rgba(68, 215, 208, 0.72);
    outline-offset: 2px;
}

.jigsaw-slot.is-correct {
    border-style: solid;
    border-color: rgba(124, 227, 139, 0.44);
    box-shadow: inset 0 0 16px rgba(124, 227, 139, 0.08);
}

.jigsaw-piece {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 247, 221, 0.18);
    border-radius: 7px;
    padding: 0;
    background-repeat: no-repeat;
    background-color: rgba(255, 247, 221, 0.08);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        opacity 150ms ease,
        transform 150ms ease,
        filter 150ms ease;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 247, 221, 0.06);
}

.jigsaw-piece:active {
    cursor: grabbing;
}

.jigsaw-piece.is-selected {
    border-color: rgba(246, 199, 74, 0.78);
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 0 0 3px rgba(246, 199, 74, 0.14),
        0 0 24px rgba(68, 215, 208, 0.24),
        0 12px 26px rgba(0, 0, 0, 0.34);
}

.jigsaw-piece.is-drag-origin {
    opacity: 0.28;
    filter: saturate(0.72);
}

.jigsaw-drag-ghost {
    position: fixed;
    z-index: 300;
    pointer-events: none;
    border-color: rgba(246, 199, 74, 0.86);
    opacity: 0.96;
    transform: scale(1.08);
    box-shadow:
        0 0 0 3px rgba(246, 199, 74, 0.16),
        0 0 28px rgba(68, 215, 208, 0.32),
        0 18px 34px rgba(0, 0, 0, 0.42);
}

.jigsaw-console {
    display: grid;
    align-content: start;
    gap: 12px;
    border: 1px solid rgba(255, 247, 221, 0.12);
    border-radius: 14px;
    padding: 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.12), transparent 48%),
        rgba(5, 5, 6, 0.42);
}

.jigsaw-console.is-success {
    border-color: rgba(124, 227, 139, 0.42);
    box-shadow: inset 0 0 28px rgba(124, 227, 139, 0.08);
}

.jigsaw-console.is-danger {
    border-color: rgba(220, 47, 39, 0.46);
    box-shadow: inset 0 0 28px rgba(220, 47, 39, 0.08);
}

.jigsaw-console.is-selecting {
    border-color: rgba(246, 199, 74, 0.42);
    box-shadow:
        inset 0 0 28px rgba(246, 199, 74, 0.08),
        0 0 22px rgba(68, 215, 208, 0.08);
}

.jigsaw-console strong {
    color: #fff8df;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-weight: 950;
}

.jigsaw-console p {
    margin: 0;
    color: #e8dec4;
    font-size: 0.92rem;
    line-height: 1.45;
}

.jigsaw-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.jigsaw-steps span {
    display: grid;
    gap: 4px;
    min-width: 0;
    border: 1px solid rgba(68, 215, 208, 0.18);
    border-radius: 10px;
    padding: 8px 7px;
    background: rgba(5, 5, 6, 0.34);
    color: #fff7dd;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.16;
    text-align: center;
}

.jigsaw-steps b {
    display: inline-grid;
    place-items: center;
    justify-self: center;
    width: 22px;
    aspect-ratio: 1;
    border-radius: 999px;
    background: rgba(246, 199, 74, 0.16);
    color: var(--gold);
    font-size: 0.72rem;
}

.jigsaw-tray {
    display: grid;
    grid-template-columns: repeat(3, minmax(58px, 1fr));
    gap: 8px;
    min-height: 190px;
    border: 1px solid rgba(68, 215, 208, 0.18);
    border-radius: 12px;
    padding: 10px;
    background: rgba(5, 5, 6, 0.34);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}

.jigsaw-tray.is-placement-mode {
    border-color: rgba(246, 199, 74, 0.36);
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.1), transparent 56%),
        rgba(5, 5, 6, 0.42);
    box-shadow: inset 0 0 20px rgba(246, 199, 74, 0.06);
}

.jigsaw-tray__empty {
    grid-column: 1 / -1;
    align-self: center;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.jigsaw-modal__actions {
    display: flex;
    justify-content: flex-end;
}

.jigsaw-modal__actions .primary-action,
.jigsaw-modal__actions .secondary-action {
    margin-top: 0;
}

.word-search-modal {
    position: fixed;
    inset: 0;
    z-index: 87;
    display: grid;
    place-items: center;
    padding: 18px;
}

.word-search-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(124, 227, 139, 0.18), transparent 34%),
        radial-gradient(circle at 70% 34%, rgba(68, 215, 208, 0.22), transparent 38%),
        rgba(5, 5, 6, 0.9);
    backdrop-filter: blur(8px);
}

.word-search-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(1080px, calc(100vw - 28px));
    max-height: calc(100svh - 28px);
    border: 1px solid rgba(68, 215, 208, 0.46);
    border-radius: 18px;
    padding: clamp(14px, 2vw, 22px);
    overflow: auto;
    background:
        radial-gradient(circle at 20% 10%, rgba(124, 227, 139, 0.13), transparent 34%),
        radial-gradient(circle at 78% 26%, rgba(68, 215, 208, 0.17), transparent 38%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.98), rgba(5, 5, 6, 0.95));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.66),
        0 0 52px rgba(68, 215, 208, 0.16),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
}

.word-search-modal__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.word-search-modal__portrait {
    width: 86px;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 247, 221, 0.72);
    border-radius: 999px;
    padding: 5px;
    background:
        radial-gradient(circle at 50% 50%, rgba(124, 227, 139, 0.25), transparent 64%),
        rgba(255, 247, 221, 0.92);
    box-shadow: 0 0 28px rgba(68, 215, 208, 0.24);
}

.word-search-modal__portrait img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.word-search-modal h2 {
    margin: 6px 0 0;
    color: #fff8df;
    font-size: clamp(1.8rem, 4vw, 2.65rem);
    line-height: 1;
}

.word-search-modal p:not(.eyebrow) {
    margin: 8px 0 0;
    color: #e8dec4;
    font-size: 0.95rem;
    line-height: 1.42;
}

.word-search-modal__timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 124px;
    border: 1px solid rgba(68, 215, 208, 0.46);
    border-radius: 999px;
    padding: 10px 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(68, 215, 208, 0.2), transparent 68%),
        rgba(5, 5, 6, 0.54);
    color: #dcffff;
    font-size: 0.9rem;
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: 0 0 20px rgba(68, 215, 208, 0.12);
}

.word-search-modal__timer.is-warning {
    border-color: rgba(246, 199, 74, 0.82);
    color: #fff1ad;
    box-shadow: 0 0 26px rgba(246, 199, 74, 0.26);
}

.word-search-modal__timer.is-critical,
.word-search-modal__timer.is-expired {
    border-color: rgba(220, 47, 39, 0.72);
    color: #ffd0cc;
    box-shadow: 0 0 28px rgba(220, 47, 39, 0.25);
}

.word-search-modal__timer.is-paused {
    opacity: 0.78;
}

.word-search-modal__reward {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(124, 227, 139, 0.28);
    border-radius: 12px;
    padding: 10px 12px;
    background:
        radial-gradient(circle at 0% 50%, rgba(68, 215, 208, 0.14), transparent 50%),
        rgba(5, 5, 6, 0.34);
}

.word-search-modal__reward strong {
    color: var(--gold-soft);
    font-size: 0.82rem;
    font-weight: 950;
    text-transform: uppercase;
}

.word-search-modal__reward span {
    color: #e8dec4;
    font-size: 0.84rem;
    font-weight: 760;
    line-height: 1.35;
}

.word-search-modal__arena {
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(280px, 0.58fr);
    gap: 14px;
    align-items: stretch;
}

.word-search-board {
    --word-cols: 12;
    --word-rows: 12;
    display: grid;
    grid-template-columns: repeat(var(--word-cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--word-rows), minmax(0, 1fr));
    gap: 4px;
    width: min(64svh, 100%, 620px);
    aspect-ratio: 1;
    justify-self: center;
    border: 1px solid rgba(68, 215, 208, 0.34);
    border-radius: 18px;
    padding: 12px;
    background:
        linear-gradient(90deg, rgba(68, 215, 208, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(124, 227, 139, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, rgba(68, 215, 208, 0.16), transparent 58%),
        rgba(5, 5, 6, 0.62);
    background-size: 30px 30px, 30px 30px, auto, auto;
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 247, 221, 0.06);
    user-select: none;
    touch-action: none;
}

.word-search-cell {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(255, 247, 221, 0.1);
    border-radius: 8px;
    padding: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 247, 221, 0.08), transparent 60%),
        rgba(255, 247, 221, 0.045);
    color: #fff8df;
    font-size: clamp(0.78rem, 1.6vw, 1.05rem);
    font-weight: 950;
    line-height: 1;
    cursor: crosshair;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.word-search-cell:hover,
.word-search-cell.is-preview {
    border-color: rgba(68, 215, 208, 0.6);
    background: rgba(68, 215, 208, 0.18);
    box-shadow: 0 0 18px rgba(68, 215, 208, 0.18);
}

.word-search-cell.is-start {
    border-color: rgba(255, 230, 160, 0.82);
    background: rgba(246, 199, 74, 0.18);
    box-shadow: 0 0 18px rgba(246, 199, 74, 0.18);
}

.word-search-cell.is-found {
    border-color: rgba(124, 227, 139, 0.72);
    background:
        linear-gradient(135deg, rgba(124, 227, 139, 0.3), rgba(68, 215, 208, 0.22)),
        rgba(5, 5, 6, 0.2);
    color: #edffdf;
    box-shadow: 0 0 20px rgba(124, 227, 139, 0.16);
}

.word-search-console {
    display: grid;
    align-content: start;
    gap: 12px;
    border: 1px solid rgba(255, 247, 221, 0.12);
    border-radius: 14px;
    padding: 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(68, 215, 208, 0.12), transparent 48%),
        rgba(5, 5, 6, 0.42);
}

.word-search-console.is-success {
    border-color: rgba(124, 227, 139, 0.42);
    box-shadow: inset 0 0 28px rgba(124, 227, 139, 0.08);
}

.word-search-console.is-danger {
    border-color: rgba(220, 47, 39, 0.46);
    box-shadow: inset 0 0 28px rgba(220, 47, 39, 0.08);
}

.word-search-console strong {
    color: #fff8df;
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-weight: 950;
}

.word-search-console p {
    margin: 0;
    color: #e8dec4;
    font-size: 0.92rem;
    line-height: 1.45;
}

.word-search-targets {
    display: grid;
    gap: 8px;
}

.word-search-target {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(68, 215, 208, 0.2);
    border-radius: 999px;
    padding: 8px 10px 8px 12px;
    background: rgba(5, 5, 6, 0.38);
    color: #fff8df;
    font-size: 0.86rem;
    font-weight: 900;
}

.word-search-target::after {
    content: "Buscando";
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.word-search-target.is-found {
    border-color: rgba(124, 227, 139, 0.5);
    color: #eaffdd;
    text-decoration: line-through;
    box-shadow: 0 0 20px rgba(124, 227, 139, 0.1);
}

.word-search-target.is-found::after {
    content: "Encontrado";
    color: var(--green);
}

.word-search-modal__actions {
    display: flex;
    justify-content: flex-end;
}

.word-search-modal__actions .primary-action,
.word-search-modal__actions .secondary-action {
    margin-top: 0;
}

.crossword-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: clamp(14px, 2vw, 28px);
}

.crossword-modal.is-hidden {
    display: none;
}

.crossword-modal__backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 28% 22%, rgba(68, 215, 208, 0.15), transparent 32%), rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(6px);
}

.crossword-modal__card {
    position: relative;
    width: min(980px, 100%);
    max-height: min(94svh, 820px);
    overflow: hidden;
    border: 1px solid rgba(246, 199, 74, 0.46);
    border-radius: 18px;
    padding: clamp(14px, 2vw, 22px);
    background:
        radial-gradient(circle at 16% 10%, rgba(246, 199, 74, 0.16), transparent 32%),
        radial-gradient(circle at 86% 22%, rgba(68, 215, 208, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(13, 21, 17, 0.98), rgba(5, 5, 6, 0.98));
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.58), 0 0 38px rgba(68, 215, 208, 0.13);
}

.crossword-modal__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(10px, 1.6vw, 16px);
    margin-bottom: 10px;
}

.crossword-modal__emblem {
    width: clamp(48px, 5.8vw, 64px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 230, 160, 0.55);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(255, 230, 160, 0.85) 0 13%, transparent 13% 26%, rgba(68, 215, 208, 0.78) 26% 39%, transparent 39% 52%, rgba(255, 230, 160, 0.85) 52% 65%, transparent 65% 78%, rgba(68, 215, 208, 0.78) 78% 91%, transparent 91% 100%),
        linear-gradient(0deg, transparent 0 16%, rgba(255, 230, 160, 0.26) 16% 28%, transparent 28% 42%, rgba(68, 215, 208, 0.26) 42% 56%, transparent 56% 70%, rgba(255, 230, 160, 0.26) 70% 82%, transparent 82% 100%),
        rgba(5, 5, 6, 0.86);
    box-shadow: 0 0 24px rgba(246, 199, 74, 0.18);
}

.crossword-modal h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.75rem, 3.2vw, 2.45rem);
    line-height: 1;
}

.crossword-modal p:not(.eyebrow) {
    margin: 4px 0 0;
    color: rgba(255, 247, 221, 0.82);
    font-weight: 650;
    line-height: 1.32;
}

.crossword-modal__timer {
    justify-self: end;
    border: 1px solid rgba(246, 199, 74, 0.48);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--gold-soft);
    background: rgba(5, 5, 6, 0.7);
    font-size: 0.9rem;
    font-weight: 950;
    white-space: nowrap;
}

.crossword-modal__timer.is-warning {
    color: #fff3bc;
    border-color: rgba(246, 199, 74, 0.75);
}

.crossword-modal__timer.is-critical,
.crossword-modal__timer.is-expired {
    color: #ffd1cf;
    border-color: rgba(220, 47, 39, 0.72);
    box-shadow: 0 0 20px rgba(220, 47, 39, 0.18);
}

.crossword-modal__timer.is-paused {
    opacity: 0.82;
}

.crossword-modal__reward {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(124, 227, 139, 0.38);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: rgba(10, 40, 25, 0.34);
    color: rgba(255, 247, 221, 0.9);
}

.crossword-modal__reward strong {
    color: var(--green);
    text-transform: uppercase;
    font-size: 0.78rem;
}

.crossword-modal__reward span {
    font-size: 0.93rem;
    font-weight: 800;
}

.crossword-modal__arena {
    display: grid;
    grid-template-columns: minmax(390px, 0.78fr) minmax(260px, 0.52fr);
    gap: 12px;
    align-items: stretch;
    min-height: 0;
}

.crossword-board {
    display: grid;
    grid-template-columns: repeat(var(--crossword-size), minmax(0, 1fr));
    gap: 3px;
    align-self: start;
    justify-self: center;
    width: min(100%, 500px);
    max-width: max(350px, calc(94svh - 315px));
    border: 1px solid rgba(68, 215, 208, 0.38);
    border-radius: 16px;
    padding: clamp(8px, 1.2vw, 11px);
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        rgba(2, 11, 10, 0.84);
    background-size: 24px 24px;
    box-shadow: inset 0 0 24px rgba(68, 215, 208, 0.1);
}

.crossword-cell {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    border: 1px solid rgba(255, 230, 160, 0.34);
    border-radius: 5px;
    background: radial-gradient(circle at 50% 25%, rgba(255, 230, 160, 0.12), transparent 58%), rgba(13, 34, 29, 0.92);
    box-shadow: inset 0 0 10px rgba(68, 215, 208, 0.08);
}

.crossword-cell.is-blocked {
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.48);
    box-shadow: none;
}

.crossword-cell.is-filled {
    border-color: rgba(68, 215, 208, 0.54);
}

.crossword-cell.is-correct {
    border-color: rgba(124, 227, 139, 0.62);
    box-shadow: inset 0 0 14px rgba(124, 227, 139, 0.12), 0 0 12px rgba(124, 227, 139, 0.1);
}

.crossword-cell.is-given {
    border-color: rgba(246, 199, 74, 0.78);
    background: radial-gradient(circle at 50% 28%, rgba(246, 199, 74, 0.2), transparent 62%), rgba(28, 27, 14, 0.95);
    box-shadow: inset 0 0 14px rgba(246, 199, 74, 0.15), 0 0 12px rgba(246, 199, 74, 0.12);
}

.crossword-cell__number {
    position: absolute;
    top: 2px;
    left: 3px;
    color: var(--gold);
    font-size: clamp(0.42rem, 0.7vw, 0.58rem);
    font-weight: 950;
    line-height: 1;
    pointer-events: none;
}

.crossword-cell input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    color: var(--text);
    background: transparent;
    text-align: center;
    text-transform: uppercase;
    font: 950 clamp(0.9rem, 1.7vw, 1.28rem) / 1 Inter, system-ui, sans-serif;
}

.crossword-cell input:disabled {
    opacity: 0.9;
}

.crossword-cell.is-given input {
    color: var(--gold-soft);
    text-shadow: 0 0 10px rgba(246, 199, 74, 0.34);
}

.crossword-console {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    border: 1px solid rgba(255, 247, 221, 0.14);
    border-radius: 16px;
    padding: 12px;
    background: rgba(5, 5, 6, 0.5);
}

.crossword-console.is-success {
    border-color: rgba(124, 227, 139, 0.48);
    box-shadow: inset 0 0 24px rgba(124, 227, 139, 0.08);
}

.crossword-console.is-danger {
    border-color: rgba(220, 47, 39, 0.48);
    box-shadow: inset 0 0 24px rgba(220, 47, 39, 0.08);
}

.crossword-console strong {
    color: var(--text);
    font-size: clamp(1rem, 1.6vw, 1.28rem);
    line-height: 1.05;
}

.crossword-console p {
    margin: 0;
    color: rgba(255, 247, 221, 0.78);
    font-size: 0.88rem;
    line-height: 1.32;
}

.crossword-clues {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
    overflow: auto;
    min-height: 0;
    padding-right: 2px;
}

.crossword-clue {
    border: 1px solid rgba(255, 247, 221, 0.1);
    border-radius: 9px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.035);
}

.crossword-clue strong {
    display: block;
    color: var(--gold-soft);
    font-size: 0.73rem;
    line-height: 1.2;
}

.crossword-clue span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 247, 221, 0.72);
    font-size: 0.74rem;
    line-height: 1.22;
}

.crossword-clue-answer {
    display: none;
}

.crossword-clue.is-complete {
    border-color: rgba(124, 227, 139, 0.45);
    background: rgba(124, 227, 139, 0.08);
}

.crossword-clue.is-complete strong {
    color: var(--green);
}

.crossword-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.crossword-modal__actions .primary-action,
.crossword-modal__actions .secondary-action {
    min-height: 42px;
}

.reflex-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: 14px;
}

.reflex-modal.is-hidden {
    display: none;
}

.reflex-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(68, 215, 208, 0.18), transparent 34%),
        rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(9px);
}

.reflex-modal__card {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    max-height: calc(100svh - 28px);
    overflow: hidden;
    border: 1px solid rgba(246, 199, 74, 0.52);
    border-radius: 16px;
    padding: 18px;
    background:
        radial-gradient(circle at 18% 12%, rgba(246, 199, 74, 0.14), transparent 34%),
        radial-gradient(circle at 76% 22%, rgba(68, 215, 208, 0.16), transparent 36%),
        linear-gradient(145deg, rgba(9, 17, 16, 0.97), rgba(5, 5, 6, 0.98));
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 36px rgba(68, 215, 208, 0.16);
}

.reflex-modal__head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.reflex-modal__bolt {
    position: relative;
    width: 50px;
    aspect-ratio: 1;
    border: 1px solid rgba(246, 199, 74, 0.48);
    border-radius: 16px;
    background:
        radial-gradient(circle, rgba(246, 199, 74, 0.28), transparent 58%),
        linear-gradient(145deg, rgba(68, 215, 208, 0.18), rgba(5, 5, 6, 0.92));
    box-shadow: 0 0 26px rgba(246, 199, 74, 0.28), inset 0 0 20px rgba(68, 215, 208, 0.14);
}

.reflex-modal__bolt::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 7px;
    width: 16px;
    height: 35px;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    clip-path: polygon(48% 0, 100% 0, 64% 42%, 100% 42%, 28% 100%, 43% 56%, 0 56%);
    filter: drop-shadow(0 0 8px rgba(246, 199, 74, 0.72));
}

.reflex-modal h2 {
    margin: 0 0 4px;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1;
}

.reflex-modal p:not(.eyebrow) {
    margin: 0;
    color: rgba(255, 247, 221, 0.82);
    line-height: 1.36;
}

.reflex-modal__timer {
    justify-self: end;
    min-width: 128px;
    border: 1px solid rgba(246, 199, 74, 0.46);
    border-radius: 999px;
    padding: 10px 14px;
    color: var(--gold-soft);
    font-family: BarlowCondensed, Inter, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
    background: rgba(5, 5, 6, 0.58);
}

.reflex-modal__timer.is-warning {
    border-color: rgba(246, 199, 74, 0.78);
    box-shadow: 0 0 18px rgba(246, 199, 74, 0.22);
}

.reflex-modal__timer.is-critical,
.reflex-modal__timer.is-expired {
    border-color: rgba(220, 47, 39, 0.74);
    color: #ffd5d2;
    box-shadow: 0 0 20px rgba(220, 47, 39, 0.24);
}

.reflex-modal__timer.is-paused {
    border-color: rgba(68, 215, 208, 0.62);
    color: #dcffff;
}

.reflex-modal__reward {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 8px 0 10px;
    border: 1px solid rgba(124, 227, 139, 0.36);
    border-radius: 12px;
    padding: 9px 11px;
    background: rgba(12, 33, 24, 0.54);
}

.reflex-modal__reward strong {
    color: var(--gold-soft);
    text-transform: uppercase;
    font-size: 0.82rem;
}

.reflex-modal__reward span {
    color: rgba(255, 247, 221, 0.88);
    font-weight: 760;
}

.reflex-modal__arena {
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) minmax(250px, 0.72fr);
    gap: 12px;
    align-items: stretch;
}

.reflex-board-panel,
.reflex-console {
    border: 1px solid rgba(68, 215, 208, 0.28);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 12%, rgba(68, 215, 208, 0.12), transparent 34%),
        rgba(5, 5, 6, 0.58);
}

.reflex-board-panel {
    padding: 10px;
}

.reflex-target-display {
    display: grid;
    place-items: center;
    min-height: 38px;
    margin-bottom: 8px;
    border: 1px solid rgba(246, 199, 74, 0.42);
    border-radius: 12px;
    color: var(--gold-soft);
    font-family: BarlowCondensed, Inter, sans-serif;
    font-size: clamp(1.55rem, 3.5vw, 2.55rem);
    font-weight: 950;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 50% 50%, rgba(246, 199, 74, 0.2), transparent 62%),
        rgba(4, 7, 7, 0.78);
    text-shadow: 0 0 16px rgba(246, 199, 74, 0.35);
}

.reflex-board-shell {
    --reflex-coord-gap: clamp(18px, 2.2vw, 23px);
    display: grid;
    grid-template-columns: var(--reflex-coord-gap) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--reflex-coord-gap);
    width: min(100%, 430px);
    aspect-ratio: 1;
    margin: 0 auto;
}

.reflex-rank-coords,
.reflex-file-coords {
    display: grid;
    color: rgba(255, 230, 160, 0.82);
    font-family: BarlowCondensed, Inter, sans-serif;
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}

.reflex-rank-coords {
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: repeat(8, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
}

.reflex-file-coords {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
}

.reflex-board {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 230, 160, 0.26);
    border-radius: 8px;
    background: #eee4d1;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.48), 0 18px 36px rgba(0, 0, 0, 0.34);
}

.reflex-cell {
    position: relative;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: #eee4d1;
    cursor: crosshair;
}

.reflex-cell.is-dark {
    background: #1a8e78;
}

.reflex-cell.is-hit {
    background:
        radial-gradient(circle, rgba(124, 227, 139, 0.98), rgba(26, 142, 120, 0.9));
}

.reflex-cell.is-miss {
    background:
        radial-gradient(circle, rgba(220, 47, 39, 0.9), rgba(15, 77, 67, 0.9));
}

.reflex-cell:disabled {
    cursor: default;
}

.reflex-console {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
}

.reflex-console.is-success {
    border-color: rgba(124, 227, 139, 0.52);
    box-shadow: inset 0 0 28px rgba(124, 227, 139, 0.08);
}

.reflex-console.is-danger {
    border-color: rgba(220, 47, 39, 0.52);
    box-shadow: inset 0 0 28px rgba(220, 47, 39, 0.08);
}

.reflex-console strong {
    color: var(--gold-soft);
    font-size: 1.25rem;
}

.reflex-console p {
    color: rgba(255, 247, 221, 0.78);
}

.reflex-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.reflex-stats span {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(255, 230, 160, 0.2);
    border-radius: 10px;
    padding: 10px;
    color: rgba(255, 247, 221, 0.68);
    background: rgba(5, 5, 6, 0.48);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 860;
}

.reflex-stats strong {
    color: #fff7dd;
    font-size: 1.45rem;
}

.reflex-penalty-die {
    display: grid;
    place-items: center;
    width: 76px;
    aspect-ratio: 1;
    justify-self: center;
    border: 1px solid rgba(246, 199, 74, 0.42);
    border-radius: 16px;
    color: #050506;
    font-size: 2.2rem;
    font-weight: 950;
    background: linear-gradient(145deg, #ffe98c, #d0a63a);
    box-shadow: 0 0 24px rgba(246, 199, 74, 0.28);
}

.reflex-penalty-die.is-hidden {
    display: none;
}

.reflex-penalty-die.is-rolling {
    animation: reflex-die-roll 0.7s ease-in-out;
}

.reflex-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}

.reflex-modal__actions .primary-action,
.reflex-modal__actions .secondary-action {
    min-width: min(230px, 100%);
}

.memory-modal {
    position: fixed;
    inset: 0;
    z-index: 112;
    display: grid;
    place-items: center;
    padding: 14px;
}

.memory-modal.is-hidden {
    display: none;
}

.memory-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 22%, rgba(246, 199, 74, 0.2), transparent 30%),
        radial-gradient(circle at 68% 60%, rgba(68, 215, 208, 0.18), transparent 40%),
        rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(9px);
}

.memory-modal__card {
    position: relative;
    z-index: 1;
    width: min(980px, 100%);
    max-height: calc(100svh - 28px);
    overflow: hidden;
    border: 1px solid rgba(246, 199, 74, 0.52);
    border-radius: 16px;
    padding: 18px;
    background:
        radial-gradient(circle at 18% 12%, rgba(246, 199, 74, 0.14), transparent 34%),
        radial-gradient(circle at 80% 18%, rgba(124, 227, 139, 0.13), transparent 34%),
        linear-gradient(145deg, rgba(9, 17, 16, 0.98), rgba(5, 5, 6, 0.99));
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.66), 0 0 36px rgba(68, 215, 208, 0.15);
}

.memory-modal__head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.memory-modal__emblem {
    width: 52px;
    aspect-ratio: 1;
    border: 1px solid rgba(246, 199, 74, 0.5);
    border-radius: 16px;
    background:
        linear-gradient(135deg, transparent 0 22%, rgba(68, 215, 208, 0.8) 22% 30%, transparent 30% 44%, rgba(246, 199, 74, 0.86) 44% 56%, transparent 56% 70%, rgba(124, 227, 139, 0.78) 70% 78%, transparent 78% 100%),
        radial-gradient(circle, rgba(246, 199, 74, 0.22), transparent 62%),
        rgba(5, 5, 6, 0.88);
    box-shadow: inset 0 0 18px rgba(68, 215, 208, 0.16), 0 0 26px rgba(246, 199, 74, 0.16);
}

.memory-modal h2 {
    margin: 0 0 4px;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    line-height: 1;
}

.memory-modal p:not(.eyebrow) {
    margin: 0;
    color: rgba(255, 247, 221, 0.82);
    line-height: 1.34;
}

.memory-modal__lives {
    justify-self: end;
    min-width: 108px;
    border: 1px solid rgba(246, 199, 74, 0.5);
    border-radius: 999px;
    padding: 9px 12px;
    color: var(--gold-soft);
    background: rgba(5, 5, 6, 0.64);
    font-family: BarlowCondensed, Inter, sans-serif;
    font-size: 1rem;
    font-weight: 950;
    text-align: center;
    white-space: nowrap;
}

.memory-modal__lives.is-danger {
    border-color: rgba(220, 47, 39, 0.78);
    color: #ffd5d2;
    box-shadow: 0 0 22px rgba(220, 47, 39, 0.22);
}

.memory-modal__reward {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 8px 0 10px;
    border: 1px solid rgba(124, 227, 139, 0.36);
    border-radius: 12px;
    padding: 9px 11px;
    background: rgba(12, 33, 24, 0.54);
}

.memory-modal__reward strong {
    color: var(--gold-soft);
    text-transform: uppercase;
    font-size: 0.82rem;
}

.memory-modal__reward span {
    color: rgba(255, 247, 221, 0.88);
    font-weight: 760;
}

.memory-modal__arena {
    display: grid;
    grid-template-columns: minmax(420px, 0.95fr) minmax(260px, 0.58fr);
    gap: 12px;
    align-items: stretch;
}

.memory-board,
.memory-console {
    border: 1px solid rgba(68, 215, 208, 0.28);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 12%, rgba(68, 215, 208, 0.12), transparent 34%),
        rgba(5, 5, 6, 0.58);
}

.memory-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.memory-card {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    aspect-ratio: 0.82;
    border: 1px solid rgba(255, 230, 160, 0.28);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 18%, rgba(68, 215, 208, 0.22), transparent 42%),
        linear-gradient(145deg, rgba(16, 35, 31, 0.95), rgba(5, 5, 6, 0.98));
    box-shadow: inset 0 0 20px rgba(68, 215, 208, 0.08), 0 8px 18px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.memory-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(246, 199, 74, 0.28);
    border-radius: 9px;
    background:
        linear-gradient(135deg, transparent 0 20%, rgba(246, 199, 74, 0.32) 20% 24%, transparent 24% 46%, rgba(68, 215, 208, 0.32) 46% 50%, transparent 50% 100%),
        rgba(255, 255, 255, 0.035);
    transition: opacity 0.18s ease;
}

.memory-card__back,
.memory-card__front {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.memory-card__back {
    color: var(--gold-soft);
    font-family: BarlowCondensed, Inter, sans-serif;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 950;
    text-shadow: 0 0 18px rgba(246, 199, 74, 0.32);
}

.memory-card__front {
    gap: 5px;
    padding: 8px;
    opacity: 0;
    transform: scale(0.94);
}

.memory-card__front img {
    width: min(76%, 82px);
    aspect-ratio: 1;
    object-fit: cover;
    border: 3px solid rgba(255, 247, 221, 0.9);
    border-radius: 999px;
    background: rgba(255, 247, 221, 0.86);
    box-shadow: 0 0 18px rgba(68, 215, 208, 0.2);
}

.memory-card__front span {
    max-width: 100%;
    color: var(--text);
    font-family: BarlowCondensed, Inter, sans-serif;
    font-size: clamp(0.78rem, 1.2vw, 0.98rem);
    font-weight: 950;
    line-height: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.memory-card.is-open,
.memory-card.is-matched {
    border-color: rgba(68, 215, 208, 0.62);
    background: radial-gradient(circle at 50% 28%, rgba(68, 215, 208, 0.18), transparent 60%), rgba(7, 22, 20, 0.94);
}

.memory-card.is-matched {
    border-color: rgba(124, 227, 139, 0.66);
    box-shadow: inset 0 0 22px rgba(124, 227, 139, 0.13), 0 0 18px rgba(124, 227, 139, 0.12);
}

.memory-card.is-open::before,
.memory-card.is-matched::before {
    opacity: 0;
}

.memory-card.is-open .memory-card__back,
.memory-card.is-matched .memory-card__back {
    opacity: 0;
    transform: scale(1.06);
}

.memory-card.is-open .memory-card__front,
.memory-card.is-matched .memory-card__front {
    opacity: 1;
    transform: scale(1);
}

.memory-card:disabled {
    cursor: default;
}

.memory-console {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    align-content: start;
    padding: 14px;
}

.memory-console.is-success {
    border-color: rgba(124, 227, 139, 0.52);
    box-shadow: inset 0 0 28px rgba(124, 227, 139, 0.08);
}

.memory-console.is-danger {
    border-color: rgba(220, 47, 39, 0.52);
    box-shadow: inset 0 0 28px rgba(220, 47, 39, 0.08);
}

.memory-console strong {
    color: var(--gold-soft);
    font-size: 1.25rem;
}

.memory-console p {
    color: rgba(255, 247, 221, 0.78);
}

.memory-progress {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.memory-progress span {
    border: 1px solid rgba(255, 230, 160, 0.2);
    border-radius: 10px;
    padding: 9px;
    color: rgba(255, 247, 221, 0.72);
    background: rgba(5, 5, 6, 0.48);
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 860;
}

.memory-progress strong {
    display: block;
    margin-top: 2px;
    color: var(--text);
    font-size: 1.25rem;
}

.memory-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.memory-modal__actions .primary-action,
.memory-modal__actions .secondary-action {
    min-width: min(230px, 100%);
}

.duel-modal {
    position: fixed;
    inset: 0;
    z-index: 88;
    display: grid;
    place-items: center;
    padding: 18px;
}

.duel-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 48% 28%, rgba(246, 199, 74, 0.2), transparent 34%),
        radial-gradient(circle at 58% 66%, rgba(68, 215, 208, 0.18), transparent 42%),
        rgba(5, 5, 6, 0.82);
    backdrop-filter: blur(8px);
}

.duel-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100svh - 32px);
    border: 1px solid rgba(246, 199, 74, 0.48);
    border-radius: 18px;
    padding: clamp(16px, 2.6vw, 24px);
    overflow: auto;
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 230, 160, 0.15), transparent 34%),
        radial-gradient(circle at 86% 22%, rgba(68, 215, 208, 0.14), transparent 40%),
        linear-gradient(145deg, rgba(8, 14, 15, 0.98), rgba(5, 5, 6, 0.96));
    box-shadow:
        0 34px 110px rgba(0, 0, 0, 0.66),
        0 0 70px rgba(68, 215, 208, 0.2),
        inset 0 1px 0 rgba(255, 247, 221, 0.14);
}

.duel-modal__head {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

.duel-modal__emblem {
    position: relative;
    width: 76px;
    aspect-ratio: 1;
    border: 1px solid rgba(68, 215, 208, 0.44);
    border-radius: 18px;
    background:
        radial-gradient(circle, rgba(255, 230, 160, 0.86) 0 12%, transparent 13%),
        conic-gradient(from 45deg, rgba(68, 215, 208, 0.16), rgba(246, 199, 74, 0.46), rgba(220, 47, 39, 0.24), rgba(68, 215, 208, 0.16)),
        rgba(5, 5, 6, 0.72);
    box-shadow:
        0 0 26px rgba(68, 215, 208, 0.26),
        inset 0 0 24px rgba(246, 199, 74, 0.18);
}

.duel-modal__emblem::before,
.duel-modal__emblem::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 11px;
    bottom: 11px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold-soft), var(--gold));
    box-shadow: 0 0 12px rgba(246, 199, 74, 0.46);
}

.duel-modal__emblem::before {
    transform: rotate(42deg);
}

.duel-modal__emblem::after {
    transform: rotate(-42deg);
}

.duel-modal h2 {
    margin: 4px 0 0;
    color: #fff8df;
    font-size: clamp(2rem, 5vw, 3.15rem);
    line-height: 0.96;
}

.duel-modal p:not(.eyebrow) {
    margin: 8px 0 0;
    color: #eadfc4;
    font-size: 0.98rem;
    line-height: 1.45;
}

.duel-modal__prize {
    justify-self: end;
    border: 1px solid rgba(124, 227, 139, 0.4);
    border-radius: 999px;
    padding: 9px 12px;
    color: #dffff1;
    background: rgba(10, 40, 28, 0.62);
    font-size: 0.82rem;
    font-weight: 950;
    white-space: nowrap;
}

.duel-rivals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.duel-rival-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 74px;
    border: 1px solid rgba(68, 215, 208, 0.34);
    border-radius: 14px;
    padding: 9px;
    color: var(--text);
    text-align: left;
    background:
        radial-gradient(circle at 18% 50%, rgba(68, 215, 208, 0.18), transparent 48%),
        rgba(7, 20, 18, 0.72);
    cursor: pointer;
}

.duel-rival-card:hover,
.duel-rival-card:focus-visible {
    border-color: rgba(246, 199, 74, 0.8);
    outline: none;
    box-shadow: 0 0 22px rgba(246, 199, 74, 0.18);
}

.duel-rival-card img,
.duel-roll-chip img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(68, 215, 208, 0.42));
}

.duel-rival-card strong,
.duel-roll-chip strong {
    display: block;
    color: #fff7dd;
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1.1;
}

.duel-rival-card small {
    display: block;
    margin-top: 3px;
    color: #ffe6a0;
    font-size: 0.75rem;
    font-weight: 850;
}

.duel-rolls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.duel-roll-chip {
    display: inline-grid;
    grid-template-columns: 48px auto;
    gap: 9px;
    align-items: center;
    min-width: min(220px, 100%);
    border: 1px solid rgba(255, 230, 160, 0.32);
    border-radius: 14px;
    padding: 8px 10px;
    background: rgba(5, 5, 6, 0.48);
}

.duel-die-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(246, 199, 74, 0.34);
    border-radius: 16px;
    padding: 12px 14px;
    background:
        radial-gradient(circle at 50% 44%, rgba(246, 199, 74, 0.16), transparent 48%),
        radial-gradient(circle at 50% 70%, rgba(68, 215, 208, 0.12), transparent 58%),
        rgba(5, 5, 6, 0.46);
}

.duel-die-panel span,
.duel-die-panel strong {
    color: #fff7dd;
    font-size: 0.9rem;
    font-weight: 950;
    line-height: 1.15;
}

.duel-die-panel span {
    color: #dcffff;
}

.duel-die-panel strong {
    justify-self: end;
    color: var(--gold-soft);
}

.duel-die {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 76px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 230, 160, 0.68);
    border-radius: 20px;
    background:
        linear-gradient(145deg, #fff4c8, #f6c74a 48%, #8c640e);
    color: #050506;
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.38),
        0 0 34px rgba(246, 199, 74, 0.32),
        0 0 42px rgba(68, 215, 208, 0.16),
        inset 0 2px 0 rgba(255, 255, 255, 0.48);
}

.duel-die .die-face i {
    width: 7px;
}

.duel-die.is-rolling {
    animation: duel-die-roll 820ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.duel-modal__notice {
    border: 1px solid rgba(68, 215, 208, 0.32);
    border-radius: 14px;
    padding: 13px 14px;
    background:
        radial-gradient(circle at 12% 0%, rgba(68, 215, 208, 0.15), transparent 56%),
        rgba(7, 18, 17, 0.72);
}

.duel-modal__notice strong {
    display: block;
    color: var(--gold-soft);
    font-size: 1rem;
    font-weight: 950;
}

.duel-modal__notice p {
    max-width: 58ch;
}

.duel-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.duel-modal__actions .primary-action,
.duel-modal__actions .secondary-action {
    min-width: min(210px, 100%);
}

.double-choice-panel {
    position: fixed;
    right: clamp(14px, 2vw, 28px);
    bottom: clamp(14px, 2vw, 28px);
    z-index: 125;
    width: min(430px, calc(100vw - 28px));
    pointer-events: none;
}

.double-choice-panel.is-hidden {
    display: none;
}

.double-choice-panel__card {
    pointer-events: auto;
    border: 1px solid rgba(246, 199, 74, 0.5);
    border-radius: 16px;
    padding: 14px;
    background:
        radial-gradient(circle at 16% 8%, rgba(246, 199, 74, 0.16), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(68, 215, 208, 0.18), transparent 36%),
        linear-gradient(145deg, rgba(9, 18, 17, 0.96), rgba(5, 5, 6, 0.98));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.52), 0 0 28px rgba(68, 215, 208, 0.14);
}

.double-choice-panel h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    line-height: 1;
}

.double-choice-panel p:not(.eyebrow) {
    margin: 6px 0 0;
    color: rgba(255, 247, 221, 0.8);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.32;
}

.double-choice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.double-choice-option {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 172px;
    border: 1px solid rgba(255, 247, 221, 0.12);
    border-radius: 13px;
    padding: 10px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 0 18px rgba(68, 215, 208, 0.06);
}

.double-choice-option.is-previewed {
    border-color: rgba(68, 215, 208, 0.72);
    box-shadow: inset 0 0 20px rgba(68, 215, 208, 0.12), 0 0 18px rgba(68, 215, 208, 0.18);
}

.double-choice-option.is-blocked {
    border-color: rgba(220, 47, 39, 0.48);
}

.double-choice-option__die {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    aspect-ratio: 1;
    border-radius: 12px;
    color: #050506;
    background: linear-gradient(145deg, var(--gold-soft), var(--gold));
    font-size: 1.35rem;
    font-weight: 950;
    box-shadow: 0 0 18px rgba(246, 199, 74, 0.22);
}

.double-choice-option strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.08;
}

.double-choice-option small {
    color: rgba(255, 247, 221, 0.66);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
}

.double-choice-option__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: auto;
}

.double-choice-option__actions button {
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(68, 215, 208, 0.42);
    color: var(--text);
    background: rgba(68, 215, 208, 0.12);
    font-weight: 900;
    cursor: pointer;
}

.double-choice-option__actions button[data-double-choice-select] {
    border-color: rgba(246, 199, 74, 0.62);
    color: #050506;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.double-choice-panel__hint {
    color: rgba(255, 230, 160, 0.8) !important;
    font-size: 0.78rem !important;
}

@keyframes reflex-die-roll {
    0% { transform: rotate(0deg) scale(1); }
    35% { transform: rotate(120deg) scale(1.08); }
    70% { transform: rotate(245deg) scale(0.96); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes duel-die-roll {
    0% { transform: rotate(0deg) scale(1); filter: brightness(1); }
    18% { transform: rotate(96deg) scale(1.1); filter: brightness(1.25); }
    42% { transform: rotate(210deg) scale(0.95); }
    68% { transform: rotate(315deg) scale(1.08); }
    100% { transform: rotate(360deg) scale(1); filter: brightness(1); }
}

@media (max-height: 760px) and (min-width: 760px) {
    .crossword-modal {
        padding: 8px;
    }

    .crossword-modal__card {
        max-height: calc(100svh - 16px);
        padding: 12px 14px;
    }

    .crossword-modal__head {
        margin-bottom: 6px;
    }

    .crossword-modal__emblem {
        width: 44px;
        border-radius: 12px;
    }

    .crossword-modal h2 {
        font-size: 1.65rem;
    }

    .crossword-modal p:not(.eyebrow) {
        font-size: 0.86rem;
        line-height: 1.22;
    }

    .crossword-modal__timer {
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    .crossword-modal__reward {
        padding: 6px 9px;
        margin-bottom: 8px;
    }

    .crossword-modal__arena {
        gap: 10px;
    }

    .crossword-board {
        max-width: 350px;
        gap: 2px;
        padding: 7px;
    }

    .crossword-cell input {
        font-size: 0.78rem;
    }

    .crossword-console {
        gap: 6px;
        padding: 10px;
    }

    .crossword-console strong {
        font-size: 0.98rem;
    }

    .crossword-console p {
        font-size: 0.8rem;
        line-height: 1.22;
    }

    .crossword-clues {
        gap: 5px;
    }

    .crossword-clue {
        padding: 4px 6px;
    }

    .crossword-clue strong,
    .crossword-clue span {
        font-size: 0.68rem;
        line-height: 1.14;
    }

    .crossword-modal__actions {
        margin-top: 8px;
    }

    .reflex-modal__card {
        overflow: auto;
        padding: 12px;
    }

    .reflex-board-shell {
        width: min(100%, 360px);
    }

    .reflex-modal__reward {
        margin: 6px 0 8px;
    }

    .reflex-target-display {
        min-height: 34px;
    }

    .memory-modal__card {
        overflow: auto;
        padding: 12px;
    }

    .memory-modal__head {
        grid-template-columns: 46px minmax(0, 1fr) auto;
    }

    .memory-modal__emblem {
        width: 44px;
        border-radius: 12px;
    }

    .memory-modal h2 {
        font-size: 1.65rem;
    }

    .memory-modal__reward {
        margin: 6px 0 8px;
    }

    .memory-board {
        gap: 7px;
        padding: 9px;
    }

    .memory-card__front img {
        width: min(68%, 68px);
    }
}

@keyframes puzzle-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes puzzle-board-impact {
    0% { transform: translate(0, 0) scale(1); filter: brightness(1); }
    16% { transform: translate(-9px, 5px) scale(1.006); filter: brightness(1.28); }
    30% { transform: translate(8px, -4px) scale(1.004); }
    45% { transform: translate(-5px, 3px) scale(1.002); }
    62% { transform: translate(3px, -2px) scale(1); }
    100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}

@keyframes puzzle-crash-alert {
    0% { opacity: 0; transform: translateX(-22%); }
    18% { opacity: 0.9; }
    48% { opacity: 0.48; transform: translateX(12%); }
    100% { opacity: 0; transform: translateX(28%); }
}

@keyframes puzzle-crash-board-flash {
    0% { opacity: 0; transform: scale(0.36); filter: blur(1px) brightness(1); }
    18% { opacity: 1; transform: scale(1.08); filter: blur(2px) brightness(1.35); }
    100% { opacity: 0.36; transform: scale(1.28); filter: blur(9px) brightness(1.05); }
}

@keyframes puzzle-crash-firefield {
    0% { opacity: 0; transform: scale(0.68); }
    32% { opacity: 0.92; transform: scale(1.03); }
    100% { opacity: 0.72; transform: scale(1.08); }
}

@keyframes puzzle-crash-firefield-pulse {
    from { filter: hue-rotate(-10deg) brightness(1); }
    to { filter: hue-rotate(10deg) brightness(1.18); }
}

@keyframes puzzle-crash-heat {
    0% { opacity: 0; transform: scale(0.82) skewX(0deg); }
    34% { opacity: 0.78; transform: scale(1.04) skewX(-1.5deg); }
    100% { opacity: 0.42; transform: scale(1.14) skewX(1.5deg); }
}

@keyframes puzzle-crash-board-smoke {
    0% { opacity: 0; transform: scale(0.74) translateY(18px); }
    45% { opacity: 0.72; transform: scale(1.04) translateY(-8px); }
    100% { opacity: 0.58; transform: scale(1.16) translateY(-24px); }
}

@keyframes puzzle-crash-trail {
    0% { opacity: 0; transform: translate(-220px, -170px) rotate(42deg) scaleX(0.55); }
    22% { opacity: 0.82; }
    72% { opacity: 0.9; transform: translate(-24px, -20px) rotate(42deg) scaleX(1); }
    100% { opacity: 0; transform: translate(-4px, -4px) rotate(42deg) scaleX(0.28); }
}

@keyframes puzzle-crash-ship {
    0% { opacity: 0; transform: translate(-235px, -188px) rotate(42deg) scale(0.7); }
    18% { opacity: 1; }
    72% { opacity: 1; transform: translate(-18px, -14px) rotate(42deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(82deg) scale(0.34); }
}

@keyframes puzzle-crash-flash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    16% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.7); }
}

@keyframes puzzle-crash-wave {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.15); }
    18% { opacity: 0.82; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

@keyframes puzzle-crash-shard {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(18deg) scale(0.5); }
    15% { opacity: 0.95; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--shard-x)), calc(-50% + var(--shard-y))) rotate(240deg) scale(0.15); }
}

@keyframes puzzle-crash-crater {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
    22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(12deg); }
    100% { opacity: 0.92; transform: translate(-50%, -50%) scale(0.86) rotate(28deg); }
}

@keyframes puzzle-crash-smoke {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42); }
    42% { opacity: 0.78; transform: translate(-50%, -58%) scale(0.96); }
    100% { opacity: 0.58; transform: translate(-50%, -64%) scale(1.18); }
}

@keyframes puzzle-crash-flame {
    0% { opacity: 0; transform: translate(calc(-50% + var(--flame-x)), calc(-50% + var(--flame-y) + 18px)) scale(0.25) rotate(-7deg); }
    54% { opacity: 1; transform: translate(calc(-50% + var(--flame-x)), calc(-50% + var(--flame-y) - 2px)) scale(calc(var(--flame-scale) * 1.12)) rotate(5deg); }
    100% { opacity: 0.92; transform: translate(calc(-50% + var(--flame-x)), calc(-50% + var(--flame-y))) scale(var(--flame-scale)) rotate(-3deg); }
}

@keyframes puzzle-crash-fire-breathe {
    from { filter: hue-rotate(-8deg) brightness(1.02); transform: translate(calc(-50% + var(--flame-x)), calc(-50% + var(--flame-y))) scale(var(--flame-scale)) rotate(-4deg); }
    to { filter: hue-rotate(8deg) brightness(1.22); transform: translate(calc(-50% + var(--flame-x)), calc(-50% + var(--flame-y) - 8px)) scale(calc(var(--flame-scale) * 1.08)) rotate(4deg); }
}

@keyframes puzzle-crash-board-flame {
    0% { opacity: 0; transform: translate(-50%, calc(-50% + 26px)) scale(0.28) rotate(-8deg); }
    48% { opacity: 1; transform: translate(-50%, calc(-50% - 4px)) scale(calc(var(--board-flame-scale) * 1.16)) rotate(5deg); }
    100% { opacity: 0.9; transform: translate(-50%, -50%) scale(var(--board-flame-scale)) rotate(-3deg); }
}

@keyframes puzzle-crash-board-fire-breathe {
    from { filter: hue-rotate(-12deg) brightness(1.04); transform: translate(-50%, -50%) scale(var(--board-flame-scale)) rotate(-5deg); }
    to { filter: hue-rotate(8deg) brightness(1.22); transform: translate(-50%, calc(-50% - 10px)) scale(calc(var(--board-flame-scale) * 1.1)) rotate(5deg); }
}

@keyframes puzzle-crash-label {
    0% { opacity: 0; transform: translate(-50%, calc(-50% + 100px)) scale(0.82); }
    100% { opacity: 1; transform: translate(-50%, calc(-50% + 82px)) scale(1); }
}

@keyframes puzzle-scoreboard-pop {
    0% { opacity: 0; transform: translate(calc(-50% - 78px), calc(-50% - 56px)) scale(0.62) rotate(-8deg); }
    42% { opacity: 1; transform: translate(calc(-50% - 88px), calc(-50% - 68px)) scale(1.08) rotate(4deg); }
    100% { opacity: 1; transform: translate(calc(-50% - 82px), calc(-50% - 62px)) scale(1) rotate(-2deg); }
}

@keyframes puzzle-attempt-emblem-pop {
    0% { opacity: 0; transform: translate(calc(-50% + 72px), calc(-50% - 58px)) scale(0.34) rotate(-22deg); }
    48% { opacity: 1; transform: translate(calc(-50% + 86px), calc(-50% - 82px)) scale(1.12) rotate(9deg); }
    100% { opacity: 1; transform: translate(calc(-50% + 80px), calc(-50% - 72px)) scale(1) rotate(5deg); }
}

@keyframes puzzle-score-pulse {
    0% { opacity: 0; transform: translate(calc(-50% + 74px), calc(-50% + 38px)) scale(0.42) rotate(-24deg); }
    45% { opacity: 1; transform: translate(calc(-50% + 92px), calc(-50% + 54px)) scale(1.08) rotate(15deg); }
    72% { opacity: 1; transform: translate(calc(-50% + 86px), calc(-50% + 50px)) scale(1) rotate(-8deg); }
    100% { opacity: 1; transform: translate(calc(-50% + 88px), calc(-50% + 52px)) scale(1) rotate(4deg); }
}

.token-modal {
    position: fixed;
    inset: 0;
    z-index: 84;
    display: grid;
    place-items: center;
    padding: 20px;
}

.token-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 34%, rgba(68, 215, 208, 0.18), transparent 34%),
        radial-gradient(circle at 50% 52%, rgba(246, 199, 74, 0.12), transparent 44%),
        rgba(5, 5, 6, 0.8);
    backdrop-filter: blur(8px);
}

.token-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    width: min(360px, calc(100vw - 32px));
    border: 1px solid rgba(246, 199, 74, 0.42);
    border-radius: 18px;
    padding: 26px 22px 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(68, 215, 208, 0.18), transparent 34%),
        radial-gradient(circle at 50% 52%, rgba(246, 199, 74, 0.13), transparent 48%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.98), rgba(5, 5, 6, 0.95));
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.58),
        0 0 40px rgba(68, 215, 208, 0.14),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
    text-align: center;
}

.token-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 247, 221, 0.18);
    border-radius: 50%;
    background: rgba(5, 5, 6, 0.72);
    color: var(--gold-soft);
    font-size: 1rem;
    font-weight: 950;
}

.token-modal__art {
    --token-color: var(--token-blue);
    display: grid;
    place-items: center;
    width: min(156px, 48vw);
    aspect-ratio: 1;
    margin: 8px 0 12px;
    border: 1px solid color-mix(in srgb, var(--token-color), #fff 32%);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--token-color), transparent 54%), transparent 66%),
        rgba(5, 5, 6, 0.54);
    box-shadow:
        0 20px 34px rgba(0, 0, 0, 0.38),
        0 0 28px color-mix(in srgb, var(--token-color), transparent 42%);
}

.token-modal__art img {
    width: 118%;
    height: 118%;
    object-fit: contain;
    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 12px color-mix(in srgb, var(--token-color), transparent 42%));
}

.token-modal__art.is-gold {
    --token-color: var(--token-yellow);
}

.token-modal__art.is-green {
    --token-color: var(--token-green);
}

.token-modal__art.is-red {
    --token-color: var(--token-red);
}

.token-modal__art.is-cyan {
    --token-color: var(--token-blue);
}

.token-modal h2 {
    margin: 8px 0 0;
    color: #fff8df;
    font-size: clamp(1.55rem, 5vw, 2.25rem);
    line-height: 1;
}

.token-modal strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-top: 12px;
    border: 1px solid rgba(68, 215, 208, 0.38);
    border-radius: 999px;
    padding: 7px 13px;
    background: rgba(68, 215, 208, 0.09);
    color: #dcffff;
    font-size: 0.82rem;
    font-weight: 950;
}

.champion-quiz-modal {
    position: fixed;
    inset: 0;
    z-index: 78;
    display: grid;
    place-items: center;
    padding: 20px;
}

.champion-quiz-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 28%, rgba(68, 215, 208, 0.18), transparent 32%),
        radial-gradient(circle at 50% 70%, rgba(246, 199, 74, 0.16), transparent 38%),
        rgba(5, 5, 6, 0.84);
    backdrop-filter: blur(8px);
}

.champion-quiz-modal__card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 16px;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100svh - 32px);
    border: 1px solid rgba(68, 215, 208, 0.42);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 28px);
    overflow: auto;
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.1), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(246, 199, 74, 0.18), transparent 31%),
        linear-gradient(145deg, rgba(8, 11, 15, 0.98), rgba(5, 5, 6, 0.96));
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.62),
        0 0 48px rgba(68, 215, 208, 0.18),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
}

.champion-quiz-modal__hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
}

.champion-quiz-modal__portrait {
    display: grid;
    place-items: center;
    width: clamp(74px, 12vw, 104px);
    aspect-ratio: 1;
    border: 1px solid rgba(246, 199, 74, 0.48);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 247, 221, 0.92), rgba(255, 230, 160, 0.62) 42%, rgba(68, 215, 208, 0.12) 70%),
        rgba(5, 5, 6, 0.72);
    box-shadow:
        0 18px 32px rgba(0, 0, 0, 0.42),
        0 0 26px rgba(246, 199, 74, 0.24);
    overflow: hidden;
}

.champion-quiz-modal__portrait img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.champion-quiz-modal h2 {
    margin: 2px 0 0;
    color: #fff8df;
    font-size: clamp(1.7rem, 5vw, 2.9rem);
    line-height: 0.95;
}

.champion-quiz-modal p {
    margin: 7px 0 0;
    color: #e8dec4;
    line-height: 1.45;
}

.champion-quiz-modal__reward {
    display: grid;
    gap: 5px;
    border: 1px solid rgba(246, 199, 74, 0.48);
    border-radius: 14px;
    padding: 13px 15px;
    background:
        linear-gradient(135deg, rgba(246, 199, 74, 0.18), rgba(124, 227, 139, 0.08)),
        rgba(5, 5, 6, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 247, 221, 0.12),
        0 0 28px rgba(246, 199, 74, 0.12);
}

.champion-quiz-modal__reward strong {
    color: #fff0b8;
    font-size: 0.92rem;
    font-weight: 950;
    text-transform: uppercase;
}

.champion-quiz-modal__reward span {
    color: #fff7dd;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.38;
}

.champion-quiz-modal__progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.champion-quiz-modal__progress span {
    min-width: 46px;
    border: 1px solid rgba(255, 247, 221, 0.16);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(5, 5, 6, 0.52);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 950;
    text-align: center;
}

.champion-quiz-modal__progress span.is-current {
    border-color: rgba(68, 215, 208, 0.58);
    color: #d9fcff;
    box-shadow: 0 0 18px rgba(68, 215, 208, 0.18);
}

.champion-quiz-modal__progress span.is-correct {
    border-color: rgba(124, 227, 139, 0.56);
    color: #d8ffdc;
}

.champion-quiz-modal__progress span.is-wrong {
    border-color: rgba(220, 47, 39, 0.56);
    color: #ffd1cf;
}

.champion-quiz-modal__question {
    display: block;
    border: 1px solid rgba(246, 199, 74, 0.28);
    border-radius: 14px;
    padding: 15px 16px;
    background: rgba(246, 199, 74, 0.08);
    color: #fff8df;
    font-size: clamp(1.08rem, 2.8vw, 1.42rem);
    line-height: 1.22;
}

.champion-quiz-modal__options {
    display: grid;
    gap: 10px;
}

.champion-quiz-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    width: 100%;
    border: 1px solid rgba(255, 247, 221, 0.16);
    border-radius: 12px;
    padding: 12px 13px;
    background:
        linear-gradient(135deg, rgba(68, 215, 208, 0.08), rgba(5, 5, 6, 0.66)),
        rgba(5, 5, 6, 0.68);
    color: var(--text);
    font-weight: 850;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.champion-quiz-option span:first-child {
    display: grid;
    place-items: center;
    width: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(246, 199, 74, 0.16);
    color: var(--gold-soft);
    font-size: 0.76rem;
    font-weight: 950;
}

.champion-quiz-option:hover,
.champion-quiz-option:focus-visible {
    border-color: rgba(68, 215, 208, 0.56);
    outline: none;
    box-shadow: 0 0 22px rgba(68, 215, 208, 0.14);
}

.champion-quiz-option.is-correct {
    border-color: rgba(124, 227, 139, 0.72);
    background:
        linear-gradient(135deg, rgba(124, 227, 139, 0.2), rgba(5, 5, 6, 0.66)),
        rgba(5, 5, 6, 0.68);
}

.champion-quiz-option.is-wrong {
    border-color: rgba(220, 47, 39, 0.72);
    background:
        linear-gradient(135deg, rgba(220, 47, 39, 0.18), rgba(5, 5, 6, 0.66)),
        rgba(5, 5, 6, 0.68);
}

.champion-quiz-option:disabled {
    cursor: default;
    opacity: 0.86;
}

.champion-quiz-modal__feedback {
    min-height: 44px;
    border: 1px solid rgba(255, 247, 221, 0.12);
    border-radius: 12px;
    padding: 11px 13px;
    background: rgba(5, 5, 6, 0.46);
    color: var(--gold-soft);
    font-weight: 850;
}

.champion-quiz-modal__feedback.is-success {
    border-color: rgba(124, 227, 139, 0.4);
    color: #d8ffdc;
}

.champion-quiz-modal__feedback.is-danger {
    border-color: rgba(220, 47, 39, 0.4);
    color: #ffd1cf;
}

.champion-quiz-modal__actions {
    display: flex;
    justify-content: flex-end;
}

.champion-quiz-modal__actions .primary-action,
.champion-quiz-modal__actions .secondary-action {
    margin-top: 0;
}

@media (max-width: 1500px) {
    .game-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .space-game-board {
        aspect-ratio: 16 / 9.4;
    }
}

@media (max-width: 760px) {
    .game-header,
    .goose-game {
        width: calc(100vw - 28px);
    }

    .game-header {
        padding-top: 14px;
    }

    .game-brand img {
        width: 42px;
        height: 42px;
    }

    .game-brand span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .prototype-pill {
        padding: 7px 9px;
        font-size: 0.66rem;
    }

    .game-header__actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .space-sound-toggle,
    .vc-sound-toggle {
        padding: 7px 9px;
        font-size: 0.66rem;
    }

    .space-music-control {
        gap: 6px;
        padding: 5px 7px;
    }

    .space-music-toggle {
        padding: 5px 8px;
        font-size: 0.62rem;
    }

    .space-music-volume input {
        width: 70px;
    }

    .game-intro,
    .table-titlebar {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .game-intro h1 {
        font-size: clamp(2.3rem, 12vw, 3.6rem);
    }

    .game-table {
        padding: 12px;
    }

    .space-game-board {
        width: 1120px;
        min-width: 1120px;
    }

    .central-command {
        left: 57%;
        top: 31.5%;
        width: 170px;
    }

    .turn-badge {
        min-height: 26px;
        padding-inline: 9px;
        font-size: 0.64rem;
    }

    .board-quick-actions {
        left: 2.2%;
        top: 37%;
        width: 132px;
        padding: 0;
    }

    .finish-relevo {
        left: 29.2%;
        top: 48.5%;
        width: 168px;
    }

    .finish-relevo img {
        flex-basis: 58px;
        width: 58px;
    }

    .setup-modal {
        padding: 12px;
    }

    .setup-modal__card {
        width: calc(100vw - 24px);
        border-radius: 14px;
        padding: 14px;
    }

    .setup-modal__hero {
        grid-template-columns: 1fr;
    }

    .setup-modal__art {
        width: 70px;
    }

    .setup-modal .mode-options,
    .setup-modal__actions {
        grid-template-columns: 1fr;
    }

    .online-setup-panel,
    .online-setup-panel[data-online-join-panel] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .online-room-size {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .online-room-size > span,
    .online-token-panel > span {
        grid-column: 1 / -1;
    }

    .online-token-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .online-token-choice {
        min-width: 0;
    }

    .online-lobby__head {
        display: grid;
        align-items: stretch;
    }

    .online-lobby__players {
        grid-template-columns: 1fr;
    }

    .setup-count-field,
    .setup-custom-select {
        max-width: none;
        width: 100%;
    }

    .setup-player-body {
        grid-template-columns: 1fr;
    }

    .setup-token-preview {
        min-height: 172px;
    }

    .setup-token-preview__art {
        width: 116px;
    }

    .winner-modal__actions {
        grid-template-columns: 1fr;
    }

    .winner-modal__token {
        width: 78px;
    }

    .rules-modal {
        padding: 12px;
    }

    .rules-modal__card {
        width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 14px;
        padding: 16px;
    }

    .rules-modal h2 {
        font-size: 1.85rem;
    }

    .rules-modal__intro {
        font-size: 0.92rem;
    }

    .rules-modal__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .rules-modal__item {
        min-height: auto;
        padding: 13px 13px 13px 50px;
    }

    .rules-modal__item p,
    .rules-modal__note {
        font-size: 0.84rem;
    }

    .rules-modal__actions {
        justify-content: stretch;
    }

    .rules-modal__actions .primary-action,
    .rules-modal__actions .secondary-action {
        width: 100%;
    }

    .double-choice-panel {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
    }

    .double-choice-panel__card {
        padding: 12px;
    }

    .double-choice-panel h2 {
        font-size: clamp(1.32rem, 7vw, 1.75rem);
    }

    .double-choice-panel p:not(.eyebrow) {
        font-size: 0.82rem;
        line-height: 1.24;
    }

    .double-choice-options {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 9px;
    }

    .double-choice-option {
        min-height: 0;
        gap: 7px;
        padding: 9px;
    }

    .double-choice-option small {
        font-size: 0.68rem;
    }

    .double-choice-option__actions button {
        min-height: 44px;
    }

    .comodin-modal {
        padding: 12px;
    }

    .comodin-modal__card {
        width: calc(100vw - 24px);
        border-radius: 14px;
        padding: 16px;
    }

    .comodin-modal__hero {
        grid-template-columns: 86px 1fr;
        gap: 12px;
    }

    .comodin-player-card {
        grid-template-columns: 42px 1fr;
    }

    .comodin-card-stack {
        grid-column: 1 / -1;
        justify-content: flex-start;
        min-width: 0;
    }

    .comodin-modal__actions {
        justify-content: stretch;
    }

    .comodin-modal__actions .primary-action,
    .comodin-modal__actions .secondary-action {
        width: 100%;
    }

    .turn-notice-modal {
        padding: 12px;
    }

    .turn-notice-modal__card {
        width: calc(100vw - 24px);
        border-radius: 14px;
        padding: 17px;
    }

    .turn-notice-modal__actions {
        justify-content: stretch;
    }

    .turn-notice-modal__actions .primary-action,
    .turn-notice-modal__actions .secondary-action {
        width: min(100%, 260px);
        flex: 1 1 150px;
    }

    .chance-modal {
        padding: 12px;
    }

    .chance-modal__card {
        width: calc(100vw - 24px);
        border-radius: 14px;
        padding: 17px;
    }

    .chance-modal__die-panel {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .chance-modal__die-panel > span,
    .chance-modal__die-panel > strong {
        justify-self: center;
        text-align: center;
    }

    .chance-die {
        width: 76px;
    }

    .chance-modal__actions .primary-action {
        width: 100%;
    }

    .info-tile-modal {
        padding: 12px;
    }

    .info-tile-modal__card {
        width: calc(100vw - 24px);
        border-radius: 14px;
        padding: 16px;
    }

    .info-tile-modal__collage {
        width: min(100%, 360px);
        aspect-ratio: 16 / 9;
        margin-bottom: 10px;
    }

    .info-tile-modal__actions {
        justify-content: stretch;
    }

    .info-tile-modal__actions .primary-action,
    .info-tile-modal__actions .secondary-action {
        width: 100%;
    }

    .space-puzzle-modal {
        padding: 10px;
    }

    .space-puzzle-modal__card {
        width: calc(100vw - 20px);
        border-radius: 14px;
        padding: 14px;
    }

    .space-puzzle-modal__head {
        grid-template-columns: 1fr;
    }

    .space-puzzle-modal__timer {
        width: fit-content;
        min-width: 0;
    }

    .space-puzzle-modal__arena {
        grid-template-columns: 1fr;
    }

    .space-puzzle-modal__board-frame {
        min-height: auto;
        padding: 8px;
    }

    .space-puzzle-modal__board {
        width: min(100%, 78svh);
    }

    .space-puzzle-modal__actions {
        justify-content: stretch;
    }

    .space-puzzle-modal__actions .primary-action,
    .space-puzzle-modal__actions .secondary-action {
        width: 100%;
    }

    .jigsaw-modal {
        padding: 10px;
    }

    .jigsaw-modal__card {
        width: calc(100vw - 20px);
        border-radius: 14px;
        padding: 14px;
    }

    .jigsaw-modal__head {
        grid-template-columns: 64px 1fr;
    }

    .jigsaw-modal__portrait {
        width: 64px;
    }

    .jigsaw-modal__timer {
        grid-column: 1 / -1;
        width: fit-content;
        min-width: 0;
    }

    .jigsaw-modal__arena {
        grid-template-columns: 1fr;
    }

    .jigsaw-board {
        position: relative;
        width: min(100%, 62svh);
        padding: 8px;
        gap: 4px;
    }

    .jigsaw-board.is-placement-mode::before {
        content: "Pieza seleccionada: toca un espacio iluminado";
        position: absolute;
        left: 50%;
        top: 7px;
        z-index: 3;
        max-width: calc(100% - 18px);
        transform: translateX(-50%);
        border: 1px solid rgba(255, 230, 160, 0.72);
        border-radius: 999px;
        padding: 6px 10px;
        background:
            radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.28), transparent 76%),
            rgba(5, 5, 6, 0.88);
        color: #fff7dd;
        font-size: 0.69rem;
        font-weight: 950;
        line-height: 1.1;
        text-align: center;
        pointer-events: none;
        box-shadow: 0 0 18px rgba(68, 215, 208, 0.2);
    }

    .jigsaw-steps {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 5px;
    }

    .jigsaw-steps span {
        padding: 7px 5px;
        font-size: 0.68rem;
    }

    .jigsaw-tray {
        grid-template-columns: repeat(4, minmax(44px, 1fr));
        min-height: 130px;
    }

    .jigsaw-modal__actions {
        justify-content: stretch;
    }

    .jigsaw-modal__actions .primary-action,
    .jigsaw-modal__actions .secondary-action {
        width: 100%;
    }

    .word-search-modal {
        padding: 10px;
    }

    .word-search-modal__card {
        width: calc(100vw - 20px);
        border-radius: 14px;
        padding: 14px;
    }

    .word-search-modal__head {
        grid-template-columns: 64px 1fr;
    }

    .word-search-modal__portrait {
        width: 64px;
    }

    .word-search-modal__timer {
        grid-column: 1 / -1;
        width: fit-content;
        min-width: 0;
    }

    .word-search-modal__arena {
        grid-template-columns: 1fr;
    }

    .word-search-board {
        width: min(100%, 62svh);
        padding: 8px;
        gap: 3px;
    }

    .word-search-cell {
        border-radius: 6px;
    }

    .word-search-modal__actions {
        justify-content: stretch;
    }

    .word-search-modal__actions .primary-action,
    .word-search-modal__actions .secondary-action {
        width: 100%;
    }

    .crossword-modal {
        padding: 10px;
    }

    .crossword-modal__card {
        width: calc(100vw - 20px);
        max-height: calc(100svh - 20px);
        overflow: auto;
        border-radius: 14px;
        padding: 14px;
    }

    .crossword-modal__head {
        grid-template-columns: 58px 1fr;
    }

    .crossword-modal__emblem {
        width: 58px;
        border-radius: 14px;
    }

    .crossword-modal__timer {
        grid-column: 1 / -1;
        width: fit-content;
        min-width: 0;
    }

    .crossword-modal__arena {
        grid-template-columns: 1fr;
    }

    .crossword-clues {
        grid-template-columns: 1fr;
    }

    .crossword-board {
        width: min(100%, 64svh);
        padding: 8px;
        gap: 3px;
    }

    .crossword-cell {
        border-radius: 4px;
    }

    .crossword-modal__actions {
        justify-content: stretch;
    }

    .crossword-modal__actions .primary-action,
    .crossword-modal__actions .secondary-action {
        width: 100%;
    }

    .reflex-modal {
        padding: 10px;
    }

    .reflex-modal__card {
        width: calc(100vw - 20px);
        max-height: calc(100svh - 20px);
        overflow: auto;
        border-radius: 14px;
        padding: 14px;
    }

    .reflex-modal__head {
        grid-template-columns: 58px 1fr;
    }

    .reflex-modal__bolt {
        width: 58px;
        border-radius: 14px;
    }

    .reflex-modal__bolt::before {
        left: 21px;
        top: 9px;
        height: 38px;
    }

    .reflex-modal__timer {
        grid-column: 1 / -1;
        width: fit-content;
        min-width: 0;
    }

    .reflex-modal__arena {
        grid-template-columns: 1fr;
    }

    .reflex-board-shell {
        --reflex-coord-gap: 18px;
        width: min(100%, 64svh);
    }

    .reflex-modal__actions {
        justify-content: stretch;
    }

    .reflex-modal__actions .primary-action,
    .reflex-modal__actions .secondary-action {
        width: 100%;
    }

    .memory-modal {
        padding: 10px;
    }

    .memory-modal__card {
        width: calc(100vw - 20px);
        max-height: calc(100svh - 20px);
        overflow: auto;
        border-radius: 14px;
        padding: 14px;
    }

    .memory-modal__head {
        grid-template-columns: 58px 1fr;
    }

    .memory-modal__emblem {
        width: 58px;
        border-radius: 14px;
    }

    .memory-modal__lives {
        grid-column: 1 / -1;
        justify-self: start;
        min-width: 0;
    }

    .memory-modal__arena {
        grid-template-columns: 1fr;
    }

    .memory-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        padding: 8px;
    }

    .memory-card__front img {
        width: min(68%, 62px);
    }

    .memory-modal__actions {
        justify-content: stretch;
    }

    .memory-modal__actions .primary-action,
    .memory-modal__actions .secondary-action {
        width: 100%;
    }

    .duel-modal {
        padding: 10px;
    }

    .duel-modal__card {
        width: calc(100vw - 20px);
        border-radius: 14px;
        padding: 14px;
    }

    .duel-modal__head {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .duel-modal__emblem {
        width: 58px;
        border-radius: 14px;
    }

    .duel-modal__prize {
        grid-column: 1 / -1;
        justify-self: start;
        white-space: normal;
    }

    .duel-rivals {
        grid-template-columns: 1fr;
    }

    .duel-die-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .duel-die-panel strong {
        justify-self: center;
    }

    .duel-die {
        width: 68px;
    }

    .duel-modal__actions {
        justify-content: stretch;
    }

    .duel-modal__actions .primary-action,
    .duel-modal__actions .secondary-action {
        width: 100%;
    }

    .token-modal {
        padding: 12px;
    }

    .token-modal__card {
        width: calc(100vw - 24px);
        border-radius: 14px;
        padding: 18px 16px;
    }

    .token-modal__art {
        width: 132px;
    }

    .champion-quiz-modal {
        padding: 12px;
    }

    .champion-quiz-modal__card {
        width: calc(100vw - 24px);
        border-radius: 14px;
        padding: 16px;
    }

    .champion-quiz-modal__hero {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .champion-quiz-option {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 11px;
    }

    .champion-quiz-modal__actions {
        justify-content: stretch;
    }

    .champion-quiz-modal__actions .primary-action,
    .champion-quiz-modal__actions .secondary-action {
        width: 100%;
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100svh;
        overflow: hidden;
    }

    @supports (height: 100dvh) {
        html,
        body {
            min-height: 100dvh;
        }
    }

    .mobile-orientation-gate {
        display: none;
    }

    .game-header {
        width: calc(100vw - 16px);
        min-height: 40px;
        padding: max(4px, env(safe-area-inset-top)) 0 0;
    }

    .game-brand {
        gap: 8px;
    }

    .game-brand img {
        width: 30px;
        height: 30px;
    }

    .game-brand strong {
        font-size: 0.82rem;
    }

    .game-brand small {
        font-size: 0.66rem;
    }

    .game-header__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        margin-left: auto;
        min-width: 0;
    }

    .game-header__actions .prototype-pill {
        display: none;
    }

    .game-header__actions .space-sound-toggle,
    .game-header__actions .space-music-toggle {
        min-height: 40px;
        padding: 7px 8px;
        font-size: 0.6rem;
    }

    .game-header__actions .space-music-control {
        display: grid;
        grid-template-columns: auto minmax(52px, 1fr);
        gap: 5px;
        max-width: min(48vw, 174px);
        padding: 2px 5px;
    }

    .game-header__actions .space-music-volume {
        min-height: 40px;
    }

    .game-header__actions .space-music-volume span {
        display: none;
    }

    .game-header__actions .space-music-volume input {
        width: 100%;
        min-height: 40px;
    }

    .goose-game {
        width: 100%;
        height: calc(100svh - 42px);
        margin: 0;
        padding: 6px 8px max(8px, env(safe-area-inset-bottom));
    }

    @supports (height: 100dvh) {
        .goose-game {
            height: calc(100dvh - 42px);
        }
    }

    .game-table {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        height: 100%;
        border-radius: 14px;
        padding: 6px;
        overflow: hidden;
    }

    .table-titlebar {
        margin-bottom: 5px;
    }

    .table-titlebar .eyebrow {
        font-size: 0.78rem;
    }

    .game-layout {
        display: none;
    }

    .mobile-game-shell {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 6px;
        min-height: 0;
    }

    .mobile-command-console {
        position: relative;
        z-index: 20;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 54px;
        grid-template-areas:
            "main die"
            "actions actions";
        align-items: center;
        gap: 5px;
        padding: 6px;
    }

    .mobile-command-console__main {
        grid-area: main;
    }

    .mobile-command-console__main .eyebrow {
        display: none;
    }

    .mobile-command-console__main strong {
        font-size: 0.86rem;
        line-height: 1.08;
    }

    .mobile-command-console .turn-badge {
        justify-content: flex-start;
        width: fit-content;
        max-width: 100%;
        min-height: 22px;
        padding: 3px 7px;
        font-size: 0.6rem;
    }

    .mobile-orbital-die {
        grid-area: die;
        width: 50px;
        border-radius: 15px;
    }

    .mobile-command-console__actions {
        grid-area: actions;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr 0.95fr;
        gap: 5px;
    }

    .mobile-command-console__actions .primary-action,
    .mobile-command-console__actions .secondary-action {
        min-height: 44px;
        padding: 7px 5px;
        font-size: 0.64rem;
    }

    .mobile-command-console__audio {
        display: none;
    }

    .mobile-command-console__audio .space-sound-toggle,
    .mobile-command-console__audio .space-music-toggle {
        min-height: 44px;
        padding: 8px 9px;
        font-size: 0.62rem;
    }

    .mobile-command-console__audio .space-music-control {
        display: grid;
        grid-template-columns: auto minmax(84px, 1fr);
        gap: 7px;
        flex: 1 1 auto;
        justify-content: space-between;
        min-width: 0;
        max-width: none;
        padding: 4px 7px;
    }

    .mobile-command-console__audio .space-music-volume {
        min-height: 44px;
    }

    .mobile-command-console__audio .space-music-volume span {
        display: none;
    }

    .mobile-command-console__audio .space-music-volume input {
        width: 100%;
        min-height: 30px;
    }

    .mobile-path-scroll {
        min-height: 0;
        border-radius: 16px;
    }

    .mobile-path-board {
        padding: 18px 8px 44px;
    }

    .mobile-path-grid {
        grid-auto-rows: minmax(112px, auto);
        gap: 18px 9px;
    }

    .mobile-tile {
        min-height: 112px;
    }

    .mobile-tile__label {
        font-size: clamp(0.68rem, 2.7vw, 0.78rem);
    }

    .mobile-tile__sub {
        font-size: clamp(0.52rem, 2.1vw, 0.6rem);
    }

    .mobile-route-ribbon {
        stroke-width: 30px;
    }

    .mobile-route-glow {
        stroke-width: 15px;
    }

    .setup-modal,
    .winner-modal,
    .rules-modal,
    .comodin-modal,
    .turn-notice-modal,
    .chance-modal,
    .info-tile-modal,
    .space-puzzle-modal,
    .jigsaw-modal,
    .word-search-modal,
    .crossword-modal,
    .reflex-modal,
    .memory-modal,
    .duel-modal,
    .token-modal,
    .champion-quiz-modal {
        padding: 8px;
    }

    .jigsaw-modal,
    .word-search-modal,
    .crossword-modal,
    .reflex-modal,
    .memory-modal {
        place-items: start center;
    }

    .setup-modal__card,
    .winner-modal__card,
    .rules-modal__card,
    .comodin-modal__card,
    .turn-notice-modal__card,
    .chance-modal__card,
    .info-tile-modal__card,
    .space-puzzle-modal__card,
    .jigsaw-modal__card,
    .word-search-modal__card,
    .crossword-modal__card,
    .reflex-modal__card,
    .memory-modal__card,
    .duel-modal__card,
    .token-modal__card,
    .champion-quiz-modal__card {
        width: calc(100vw - 16px);
        max-height: calc(100svh - 16px);
        overflow: auto;
        scroll-padding-bottom: 92px;
        border-radius: 16px;
    }

    @supports (height: 100dvh) {
        .setup-modal__card,
        .winner-modal__card,
        .rules-modal__card,
        .comodin-modal__card,
        .turn-notice-modal__card,
        .chance-modal__card,
        .info-tile-modal__card,
        .space-puzzle-modal__card,
        .jigsaw-modal__card,
        .word-search-modal__card,
        .crossword-modal__card,
        .reflex-modal__card,
        .memory-modal__card,
        .duel-modal__card,
        .token-modal__card,
        .champion-quiz-modal__card {
            max-height: calc(100dvh - 16px);
        }
    }

    .space-puzzle-modal__arena,
    .jigsaw-modal__arena,
    .word-search-modal__arena,
    .crossword-modal__arena,
    .reflex-modal__arena,
    .memory-modal__arena {
        grid-template-columns: 1fr;
    }

    .space-puzzle-modal__board-frame,
    .jigsaw-board,
    .word-search-board,
    .crossword-board,
    .reflex-board-shell,
    .memory-board {
        width: 100%;
        max-width: min(100%, 430px);
        margin-inline: auto;
    }

    .space-puzzle-modal__card {
        gap: 9px;
        padding: 14px;
    }

    .space-puzzle-modal__head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .space-puzzle-modal__head h2 {
        font-size: clamp(1.85rem, 8vw, 2.35rem);
    }

    .space-puzzle-modal__head p:not(.eyebrow) {
        font-size: 0.94rem;
        line-height: 1.34;
    }

    .space-puzzle-modal__timer {
        justify-self: start;
        padding: 9px 14px;
    }

    .space-puzzle-modal__meta,
    .space-puzzle-modal__reward {
        padding: 10px 12px;
    }

    .space-puzzle-modal__arena {
        gap: 10px;
    }

    .space-puzzle-modal__board-frame {
        min-height: 0;
        aspect-ratio: 1;
        padding: 8px;
    }

    .space-puzzle-modal__board {
        --puzzle-coord-gap: 20px;
        --puzzle-coord-edge: 7px;
        position: relative;
        display: block;
        width: min(100%, calc(100vw - 48px));
        max-width: 430px;
        aspect-ratio: 1;
        height: auto;
        min-height: 0;
        flex: 0 0 auto;
    }

    .space-puzzle-modal__board.cg-wrap,
    .space-puzzle-modal__board .cg-wrap {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        aspect-ratio: 1 !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .space-puzzle-modal__board cg-container {
        position: absolute !important;
        inset: var(--puzzle-coord-edge) var(--puzzle-coord-edge) var(--puzzle-coord-gap) var(--puzzle-coord-gap) !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }

    .space-puzzle-modal__board cg-board,
    .space-puzzle-modal__board .cg-wrap,
    .space-puzzle-modal__board cg-container {
        min-width: 0 !important;
        min-height: 0 !important;
    }

    .space-puzzle-modal__board cg-board {
        width: 100% !important;
        height: 100% !important;
    }

    .space-puzzle-modal__status {
        padding: 12px;
    }

    .jigsaw-console {
        gap: 9px;
        padding: 11px;
    }

    .jigsaw-steps {
        gap: 5px;
    }

    .jigsaw-steps span {
        min-height: 56px;
        padding: 7px 4px;
        font-size: 0.66rem;
    }

    .space-puzzle-modal__actions,
    .setup-modal__actions,
    .winner-modal__actions,
    .jigsaw-modal__actions,
    .word-search-modal__actions,
    .crossword-modal__actions,
    .reflex-modal__actions,
    .memory-modal__actions,
    .duel-modal__actions,
    .champion-quiz-modal__actions,
    .turn-notice-modal__actions,
    .chance-modal__actions,
    .info-tile-modal__actions,
    .rules-modal__actions,
    .comodin-modal__actions {
        position: sticky;
        bottom: max(0px, env(safe-area-inset-bottom));
        z-index: 5;
        justify-content: stretch;
        margin-inline: -2px;
        padding: 12px 2px 2px;
        background: linear-gradient(180deg, transparent, rgba(5, 5, 6, 0.94) 24%);
    }

    .info-tile-modal__actions {
        position: static;
        bottom: auto;
        z-index: auto;
        margin-inline: 0;
        padding: 0;
        background: transparent;
    }

    .crossword-modal__actions:not(:has(button:not(.is-hidden))),
    .reflex-modal__actions:not(:has(button:not(.is-hidden))),
    .memory-modal__actions:not(:has(button:not(.is-hidden))) {
        display: none;
    }

    .space-puzzle-modal__actions:not(.is-hidden) {
        position: sticky;
        top: 0;
        bottom: auto;
        z-index: 8;
        padding: 9px;
        background:
            linear-gradient(180deg, rgba(5, 5, 6, 0.98) 74%, rgba(5, 5, 6, 0)),
            radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.16), transparent 70%);
    }

    .jigsaw-modal.has-result-actions .jigsaw-modal__actions:not(.is-hidden),
    .word-search-modal.has-result-actions .word-search-modal__actions:not(.is-hidden),
    .crossword-modal.has-result-actions .crossword-modal__actions:not(.is-hidden),
    .reflex-modal.has-result-actions .reflex-modal__actions:not(.is-hidden),
    .memory-modal.has-result-actions .memory-modal__actions:not(.is-hidden),
    .jigsaw-modal__actions:not(.is-hidden):has([data-jigsaw-continue]:not(.is-hidden)),
    .word-search-modal__actions:not(.is-hidden):has([data-word-search-continue]:not(.is-hidden)),
    .crossword-modal__actions:not(.is-hidden):has([data-crossword-continue]:not(.is-hidden)),
    .reflex-modal__actions:not(.is-hidden):has([data-reflex-continue]:not(.is-hidden)),
    .memory-modal__actions:not(.is-hidden):has([data-memory-continue]:not(.is-hidden)) {
        order: -1;
        position: sticky;
        top: 0;
        bottom: auto;
        z-index: 8;
        margin: -4px -2px 0;
        padding: 9px 2px 11px;
        background:
            linear-gradient(180deg, rgba(5, 5, 6, 0.98) 74%, rgba(5, 5, 6, 0)),
            radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.15), transparent 72%);
    }

    .space-puzzle-modal.has-result-actions .space-puzzle-modal__card,
    .jigsaw-modal.has-result-actions .jigsaw-modal__card,
    .word-search-modal.has-result-actions .word-search-modal__card,
    .crossword-modal.has-result-actions .crossword-modal__card,
    .reflex-modal.has-result-actions .reflex-modal__card,
    .memory-modal.has-result-actions .memory-modal__card,
    .space-puzzle-modal__card:has(.space-puzzle-modal__actions:not(.is-hidden)),
    .jigsaw-modal__card:has(.jigsaw-modal__actions:not(.is-hidden) [data-jigsaw-continue]:not(.is-hidden)),
    .word-search-modal__card:has(.word-search-modal__actions:not(.is-hidden) [data-word-search-continue]:not(.is-hidden)),
    .crossword-modal__card:has(.crossword-modal__actions:not(.is-hidden) [data-crossword-continue]:not(.is-hidden)),
    .reflex-modal__card:has(.reflex-modal__actions:not(.is-hidden) [data-reflex-continue]:not(.is-hidden)),
    .memory-modal__card:has(.memory-modal__actions:not(.is-hidden) [data-memory-continue]:not(.is-hidden)) {
        padding-top: 76px;
        scroll-padding-top: 86px;
    }

    .space-puzzle-modal.has-result-actions .space-puzzle-modal__actions:not(.is-hidden),
    .jigsaw-modal.has-result-actions .jigsaw-modal__actions:not(.is-hidden),
    .word-search-modal.has-result-actions .word-search-modal__actions:not(.is-hidden),
    .crossword-modal.has-result-actions .crossword-modal__actions:not(.is-hidden),
    .reflex-modal.has-result-actions .reflex-modal__actions:not(.is-hidden),
    .memory-modal.has-result-actions .memory-modal__actions:not(.is-hidden),
    .space-puzzle-modal__actions:not(.is-hidden),
    .jigsaw-modal__actions:not(.is-hidden):has([data-jigsaw-continue]:not(.is-hidden)),
    .word-search-modal__actions:not(.is-hidden):has([data-word-search-continue]:not(.is-hidden)),
    .crossword-modal__actions:not(.is-hidden):has([data-crossword-continue]:not(.is-hidden)),
    .reflex-modal__actions:not(.is-hidden):has([data-reflex-continue]:not(.is-hidden)),
    .memory-modal__actions:not(.is-hidden):has([data-memory-continue]:not(.is-hidden)) {
        position: fixed;
        top: max(10px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        left: max(12px, env(safe-area-inset-left));
        z-index: 220;
        display: flex;
        max-width: 520px;
        margin: 0 auto;
        padding: 7px;
        border: 1px solid rgba(255, 230, 160, 0.34);
        border-radius: 16px;
        background:
            radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.2), transparent 72%),
            linear-gradient(135deg, rgba(5, 5, 6, 0.98), rgba(12, 28, 26, 0.98));
        box-shadow:
            0 18px 44px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(68, 215, 208, 0.16);
    }

    .space-puzzle-modal__actions .primary-action,
    .setup-modal__actions .primary-action,
    .winner-modal__actions .primary-action,
    .jigsaw-modal__actions .primary-action,
    .word-search-modal__actions .primary-action,
    .crossword-modal__actions .primary-action,
    .reflex-modal__actions .primary-action,
    .memory-modal__actions .primary-action,
    .duel-modal__actions .primary-action,
    .champion-quiz-modal__actions .primary-action,
    .turn-notice-modal__actions .primary-action,
    .chance-modal__actions .primary-action,
    .info-tile-modal__actions .primary-action,
    .rules-modal__actions .primary-action,
    .comodin-modal__actions .primary-action,
    .space-puzzle-modal__actions .secondary-action,
    .setup-modal__actions .secondary-action,
    .winner-modal__actions .secondary-action,
    .jigsaw-modal__actions .secondary-action,
    .word-search-modal__actions .secondary-action,
    .crossword-modal__actions .secondary-action,
    .reflex-modal__actions .secondary-action,
    .memory-modal__actions .secondary-action,
    .duel-modal__actions .secondary-action {
        width: 100%;
        min-height: 46px;
    }

    .crossword-modal__actions:has([data-crossword-start]:not(.is-hidden)),
    .reflex-modal__actions:has([data-reflex-start]:not(.is-hidden)),
    .memory-modal__actions:has([data-memory-start]:not(.is-hidden)) {
        order: 2;
        position: static;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    .crossword-modal__card,
    .reflex-modal__card,
    .memory-modal__card {
        display: flex;
        flex-direction: column;
    }

    .crossword-modal__head,
    .reflex-modal__head,
    .memory-modal__head {
        order: 0;
    }

    .crossword-modal__reward,
    .reflex-modal__reward,
    .memory-modal__reward {
        order: 1;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-modal__reward,
    .reflex-modal__card:has([data-reflex-start].is-hidden) .reflex-modal__reward,
    .memory-modal__card:has([data-memory-start].is-hidden) .memory-modal__reward {
        display: none;
    }

    .crossword-modal__arena,
    .reflex-modal__arena,
    .memory-modal__arena {
        order: 2;
    }

    .crossword-modal__card:has([data-crossword-start]:not(.is-hidden)) .crossword-modal__arena,
    .reflex-modal__card:has([data-reflex-start]:not(.is-hidden)) .reflex-modal__arena,
    .memory-modal__card:has([data-memory-start]:not(.is-hidden)) .memory-modal__arena {
        order: 3;
    }

    .rules-modal__note,
    .comodin-roster,
    .champion-quiz-modal__feedback {
        margin-bottom: 8px;
    }

    .duel-modal[data-duel-status="chooseRival"] .duel-rolls,
    .duel-modal[data-duel-status="chooseRival"] .duel-die-panel {
        display: none;
    }

    .duel-modal[data-duel-status="chooseRival"] .duel-modal__notice {
        margin-top: 2px;
    }

    .champion-quiz-modal__card {
        gap: 8px;
        padding: 12px;
        scroll-padding-bottom: 96px;
    }

    .champion-quiz-modal__hero {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
    }

    .champion-quiz-modal__portrait {
        width: 50px;
    }

    .champion-quiz-modal h2 {
        font-size: clamp(1.34rem, 5.8vw, 1.7rem);
        line-height: 1;
    }

    .champion-quiz-modal p {
        margin-top: 4px;
        font-size: 0.8rem;
        line-height: 1.24;
    }

    .champion-quiz-modal__reward,
    .champion-quiz-modal__question,
    .champion-quiz-modal__feedback {
        border-radius: 12px;
        padding: 8px 9px;
    }

    .champion-quiz-modal__reward strong {
        font-size: 0.78rem;
    }

    .champion-quiz-modal__reward span {
        font-size: 0.78rem;
        line-height: 1.22;
    }

    .champion-quiz-modal__progress {
        gap: 5px;
    }

    .champion-quiz-modal__progress span {
        min-width: 38px;
        padding: 4px 8px;
    }

    .champion-quiz-modal__question {
        font-size: 0.94rem;
        line-height: 1.14;
    }

    .champion-quiz-modal__options {
        gap: 7px;
    }

    .champion-quiz-option {
        gap: 7px;
        padding: 8px 9px;
        font-size: 0.84rem;
        line-height: 1.16;
    }

    .champion-quiz-option span:first-child {
        width: 24px;
    }

    .champion-quiz-modal__feedback {
        min-height: 0;
        margin-bottom: 12px;
        font-size: 0.76rem;
        line-height: 1.2;
    }

    .setup-modal__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .setup-modal__card {
        display: grid;
        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
        overflow: hidden;
    }

    .setup-modal__hero {
        padding-right: 52px;
    }

    .setup-modal__hero .eyebrow,
    .setup-modal__hero p:not(.eyebrow),
    .setup-modal__art,
    .setup-modal__hero-tools {
        display: none;
    }

    .setup-modal__settings {
        min-height: 0;
    }

    .setup-online,
    .online-lobby {
        min-height: 0;
        border: 1px solid rgba(68, 215, 208, 0.2);
        border-radius: 14px;
        padding: clamp(14px, 4vw, 18px);
        background:
            radial-gradient(circle at 18% 0%, rgba(68, 215, 208, 0.12), transparent 44%),
            rgba(5, 5, 6, 0.34);
        overflow: auto;
        overscroll-behavior: contain;
    }

    .online-setup-panel,
    .online-setup-panel[data-online-join-panel] {
        gap: 10px;
        padding: 2px;
    }

    .setup-online .setup-name-field {
        gap: 5px;
        min-width: 0;
    }

    .setup-online .setup-name-field input {
        min-height: 46px;
        border-radius: 12px;
        padding: 11px 16px;
        box-shadow:
            inset 0 0 0 1px rgba(68, 215, 208, 0.08),
            0 8px 18px rgba(0, 0, 0, 0.18);
    }

    .online-mode-tabs button,
    .online-room-size button,
    .online-token-choice {
        min-height: 44px;
    }

    .setup-roster {
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        padding-bottom: 8px;
    }

    .setup-modal__actions {
        position: static;
        bottom: auto;
        margin-inline: 0;
        padding: 8px 0 0;
        background: linear-gradient(180deg, rgba(5, 5, 6, 0), rgba(5, 5, 6, 0.92) 34%);
    }

    .setup-modal__card:has(.setup-token-preview.is-pending) {
        grid-template-rows: auto auto auto minmax(0, 1fr);
    }

    .setup-modal__card:has(.setup-token-preview.is-pending) .setup-modal__actions {
        display: none;
    }

    .setup-modal__hero-tools {
        display: none;
    }

    .setup-modal__close,
    .winner-modal__close,
    .rules-modal__close,
    .comodin-modal__close,
    .token-modal__close {
        min-width: 44px;
        min-height: 44px;
    }

    .setup-modal__actions [data-setup-next],
    .setup-modal__actions [data-start-game] {
        grid-column: 1 / -1;
    }

    .setup-modal .mode-options {
        gap: 7px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .setup-modal .mode-button {
        min-height: 64px;
        padding: 9px 7px;
    }

    .setup-modal .mode-button span {
        font-size: 0.72rem;
    }

    .setup-modal .mode-button small {
        font-size: 0.58rem;
    }

    .mode-button,
    .setup-select-button,
    .setup-name-field input,
    .setup-token-button,
    .champion-quiz-modal__options button {
        min-height: 44px;
    }

    .online-spectator-banner {
        margin-bottom: 8px;
        border-radius: 14px;
        padding: 7px 10px;
        font-size: 0.72rem;
        text-align: left;
    }

    .setup-token-preview:not(.is-pending) {
        display: none;
    }

    .setup-token-preview.is-pending {
        grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
        align-items: center;
        justify-items: stretch;
        gap: 8px;
        min-height: 0;
        padding: 8px;
        text-align: left;
    }

    .setup-token-preview.is-pending .setup-token-preview__art {
        grid-row: 1 / span 2;
        width: min(112px, 34vw);
        justify-self: center;
        border-radius: 16px;
    }

    .setup-token-preview.is-pending > strong {
        align-self: end;
        font-size: 0.8rem;
        line-height: 1.05;
    }

    .setup-token-preview.is-pending .setup-token-preview__actions {
        grid-column: 2;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .setup-token-preview.is-pending .setup-token-preview__actions .primary-action,
    .setup-token-preview.is-pending .setup-token-preview__actions .secondary-action {
        min-height: 40px;
        padding: 8px 9px;
        font-size: 0.68rem;
    }

    .jigsaw-modal__head,
    .word-search-modal__head,
    .crossword-modal__head,
    .reflex-modal__head,
    .memory-modal__head {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .rules-modal__card {
        padding: 12px;
        scroll-padding-bottom: 74px;
    }

    .rules-modal h2 {
        margin-right: 54px;
        font-size: clamp(1.56rem, 7.4vw, 1.98rem);
        line-height: 1.02;
    }

    .rules-modal__intro {
        margin-top: 8px;
        font-size: 0.82rem;
        line-height: 1.32;
    }

    .rules-modal__grid {
        gap: 7px;
        margin-top: 11px;
    }

    .rules-modal__item {
        padding: 10px 10px 10px 42px;
        border-radius: 12px;
    }

    .rules-modal__item span {
        top: 10px;
        left: 10px;
        width: 24px;
        font-size: 0.66rem;
    }

    .rules-modal__item strong {
        font-size: 0.9rem;
    }

    .rules-modal__item p,
    .rules-modal__note {
        font-size: 0.75rem;
        line-height: 1.28;
    }

    .rules-modal__item p {
        margin-top: 4px;
    }

    .rules-modal__note {
        display: none;
    }

    .jigsaw-modal__portrait,
    .word-search-modal__portrait,
    .crossword-modal__emblem,
    .reflex-modal__bolt,
    .memory-modal__emblem {
        display: none;
    }

    .jigsaw-modal__timer,
    .word-search-modal__timer,
    .crossword-modal__timer,
    .reflex-modal__timer,
    .memory-modal__lives {
        min-width: 96px;
        padding: 8px 10px;
        font-size: 0.78rem;
    }

    .word-search-modal h2,
    .crossword-modal h2,
    .memory-modal h2 {
        font-size: clamp(1.48rem, 6.4vw, 1.86rem);
        line-height: 1.02;
    }

    .word-search-modal__head p:not(.eyebrow),
    .crossword-modal__head p:not(.eyebrow),
    .memory-modal__head p:not(.eyebrow) {
        font-size: 0.82rem;
        line-height: 1.28;
    }

    .jigsaw-modal__reward,
    .word-search-modal__reward,
    .crossword-modal__reward,
    .reflex-modal__reward,
    .memory-modal__reward {
        padding: 8px 10px;
    }

    .jigsaw-modal__reward span,
    .word-search-modal__reward span,
    .crossword-modal__reward span,
    .reflex-modal__reward span,
    .memory-modal__reward span {
        font-size: 0.78rem;
    }

    .jigsaw-modal h2 {
        font-size: clamp(1.55rem, 7vw, 1.9rem);
        line-height: 1;
    }

    .jigsaw-modal__head p:not(.eyebrow) {
        display: none;
    }

    .jigsaw-modal__arena,
    .word-search-modal__arena,
    .crossword-modal__arena,
    .reflex-modal__arena,
    .memory-modal__arena {
        gap: 9px;
    }

    .jigsaw-console,
    .word-search-console,
    .crossword-console,
    .reflex-console,
    .memory-console {
        padding: 10px;
    }

    .crossword-console,
    .reflex-console,
    .memory-console {
        padding-bottom: 58px;
    }

    .jigsaw-board {
        order: 0;
    }

    .jigsaw-console {
        order: 1;
    }

    .jigsaw-modal h2 {
        font-size: clamp(1.48rem, 6.6vw, 1.82rem);
        line-height: 1.02;
    }

    .jigsaw-modal__head p:not(.eyebrow) {
        display: none;
    }

    .jigsaw-modal__card {
        gap: 8px;
        padding: 12px;
        overscroll-behavior: contain;
    }

    .jigsaw-modal__reward {
        padding: 7px 9px;
    }

    .jigsaw-modal__reward span {
        font-size: 0.72rem;
        line-height: 1.24;
    }

    .jigsaw-console > strong,
    .jigsaw-console > p {
        display: none;
    }

    .jigsaw-console::before {
        content: "Toca una pieza y luego un espacio del tablero.";
        display: block;
        color: var(--gold-soft);
        font-size: 0.78rem;
        font-weight: 900;
        line-height: 1.28;
        text-align: center;
    }

    .jigsaw-modal.has-result-actions .jigsaw-console,
    .jigsaw-modal__card:has(.jigsaw-modal__actions:not(.is-hidden) [data-jigsaw-continue]:not(.is-hidden)) .jigsaw-console {
        order: -2;
        gap: 6px;
        border-color: rgba(255, 230, 160, 0.28);
        background:
            radial-gradient(circle at 50% 0%, rgba(246, 199, 74, 0.14), transparent 56%),
            rgba(5, 5, 6, 0.62);
    }

    .jigsaw-modal.has-result-actions .jigsaw-console::before,
    .jigsaw-modal__card:has(.jigsaw-modal__actions:not(.is-hidden) [data-jigsaw-continue]:not(.is-hidden)) .jigsaw-console::before {
        display: none;
    }

    .jigsaw-modal.has-result-actions .jigsaw-console > strong,
    .jigsaw-modal.has-result-actions .jigsaw-console > p,
    .jigsaw-modal__card:has(.jigsaw-modal__actions:not(.is-hidden) [data-jigsaw-continue]:not(.is-hidden)) .jigsaw-console > strong,
    .jigsaw-modal__card:has(.jigsaw-modal__actions:not(.is-hidden) [data-jigsaw-continue]:not(.is-hidden)) .jigsaw-console > p {
        display: block;
    }

    .jigsaw-modal.has-result-actions .jigsaw-console > strong,
    .jigsaw-modal__card:has(.jigsaw-modal__actions:not(.is-hidden) [data-jigsaw-continue]:not(.is-hidden)) .jigsaw-console > strong {
        color: var(--gold-soft);
        font-size: 0.94rem;
        line-height: 1.08;
    }

    .jigsaw-modal.has-result-actions .jigsaw-console > p,
    .jigsaw-modal__card:has(.jigsaw-modal__actions:not(.is-hidden) [data-jigsaw-continue]:not(.is-hidden)) .jigsaw-console > p {
        color: var(--text);
        font-size: 0.78rem;
        line-height: 1.3;
    }

    .jigsaw-modal__card:has(.jigsaw-modal__actions:not(.is-hidden) [data-jigsaw-continue]:not(.is-hidden)) .jigsaw-tray,
    .jigsaw-modal__card:has(.jigsaw-modal__actions:not(.is-hidden) [data-jigsaw-continue]:not(.is-hidden)) .jigsaw-board {
        display: none;
    }

    .jigsaw-modal.has-result-actions .jigsaw-tray,
    .jigsaw-modal.has-result-actions .jigsaw-board {
        display: none;
    }

    .jigsaw-tray {
        position: relative;
        order: 0;
        grid-template-columns: repeat(4, minmax(54px, 1fr));
        min-height: 0;
        gap: 6px;
        padding: 25px 7px 7px;
        touch-action: none;
    }

    .jigsaw-tray::before,
    .jigsaw-board::before {
        position: absolute;
        top: 7px;
        left: 10px;
        color: rgba(255, 230, 160, 0.9);
        font-size: 0.62rem;
        font-weight: 950;
        letter-spacing: 0;
        text-transform: uppercase;
        pointer-events: none;
    }

    .jigsaw-tray::before {
        content: "Piezas";
    }

    .jigsaw-tray.is-placement-mode::before {
        content: "Pieza seleccionada";
        color: var(--gold-soft);
    }

    .jigsaw-board {
        position: relative;
        width: min(100%, calc(100vw - 42px));
        max-width: 430px;
        padding-top: 30px;
        touch-action: none;
    }

    .jigsaw-board::before {
        content: "Tablero";
    }

    .jigsaw-board.is-placement-mode::before {
        content: "Toca un espacio iluminado";
        color: var(--gold-soft);
    }

    .jigsaw-piece {
        min-height: 54px;
        border-width: 2px;
    }

    .jigsaw-slot {
        touch-action: none;
    }

    body.jigsaw-dragging .jigsaw-modal__card {
        overscroll-behavior: contain;
    }

    .jigsaw-piece.is-selected {
        transform: translateY(-3px) scale(1.08);
        border-color: rgba(255, 230, 160, 0.94);
        box-shadow:
            0 0 0 4px rgba(246, 199, 74, 0.18),
            0 0 26px rgba(68, 215, 208, 0.34),
            0 14px 30px rgba(0, 0, 0, 0.42);
    }

    .jigsaw-slot.is-drop-ready {
        border-color: rgba(255, 230, 160, 0.72);
        background:
            radial-gradient(circle at 50% 50%, rgba(246, 199, 74, 0.14), transparent 58%),
            rgba(68, 215, 208, 0.08);
    }

    .jigsaw-slot.is-drop-ready::after {
        inset: 4px;
        border-color: rgba(255, 230, 160, 0.68);
        box-shadow: inset 0 0 18px rgba(246, 199, 74, 0.1);
    }

    .jigsaw-steps {
        display: none;
    }

    .word-search-modal__card {
        width: 100vw;
        max-width: 100vw;
        padding-inline: 4px;
        border-radius: 14px;
    }

    .word-search-modal__reward,
    .word-search-console {
        margin-inline: 4px;
    }

    .word-search-board {
        width: min(calc(100vw - 20px), 390px);
        max-width: none;
        gap: 0;
        padding: 2px;
        border-radius: 13px;
    }

    .word-search-cell {
        border-radius: 6px;
        font-size: clamp(0.72rem, 3.2vw, 0.94rem);
    }

    .word-search-console p {
        font-size: 0.82rem;
    }

    .crossword-board {
        gap: 2px;
        padding: 7px;
        border-radius: 12px;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) {
        overflow: auto;
        overscroll-behavior: contain;
        scroll-padding-bottom: 72px;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-modal__arena {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        padding-bottom: 8px;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-board {
        width: min(100%, 330px);
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-console {
        gap: 6px;
        padding: 10px;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-console > p {
        font-size: 0.8rem;
        line-height: 1.24;
    }

    .crossword-cell {
        border-radius: 4px;
    }

    .crossword-cell input {
        font-size: clamp(0.74rem, 3vw, 1rem);
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-cell input {
        caret-color: transparent;
        pointer-events: none;
    }

    .crossword-clues {
        grid-template-columns: 1fr;
        gap: 8px;
        max-height: min(30svh, 240px);
        overflow: auto;
        padding-right: 3px;
        overscroll-behavior: contain;
    }

    .crossword-clue {
        padding: 8px;
    }

    .crossword-clue-answer {
        display: block;
        width: 100%;
        min-height: 44px;
        margin-top: 7px;
        border: 1px solid rgba(68, 215, 208, 0.32);
        border-radius: 10px;
        padding: 9px 10px;
        color: var(--text);
        background: rgba(5, 5, 6, 0.54);
        font: 950 0.96rem / 1 Inter, system-ui, sans-serif;
        text-transform: uppercase;
        letter-spacing: 0;
    }

    .crossword-clue-answer:focus-visible {
        outline: 2px solid rgba(68, 215, 208, 0.72);
        outline-offset: 2px;
    }

    .reflex-target-display {
        position: sticky;
        top: 0;
        z-index: 4;
        min-height: 44px;
        font-size: clamp(1.35rem, 8vw, 2.1rem);
    }

    .reflex-board-shell {
        width: min(100%, 370px);
    }

    .reflex-cell {
        min-width: 0;
        min-height: 0;
    }

    .memory-board {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding: 7px;
    }

    .memory-card {
        min-height: 74px;
        border-radius: 12px;
    }

    .memory-card__back,
    .memory-card__front {
        border-radius: 10px;
    }

    .memory-card__back {
        font-size: 0.82rem;
    }

    .word-search-modal__card,
    .crossword-modal__card,
    .reflex-modal__card,
    .memory-modal__card {
        gap: 7px;
        padding: 12px 10px;
    }

    .word-search-modal__head,
    .crossword-modal__head,
    .reflex-modal__head,
    .memory-modal__head {
        align-items: center;
    }

    .word-search-modal__head .eyebrow,
    .crossword-modal__head .eyebrow,
    .reflex-modal__head .eyebrow,
    .memory-modal__head .eyebrow {
        font-size: 0.7rem;
        line-height: 1.08;
    }

    .word-search-modal h2,
    .crossword-modal h2,
    .reflex-modal h2,
    .memory-modal h2 {
        font-size: clamp(1.3rem, 5.6vw, 1.62rem);
    }

    .word-search-modal__head p:not(.eyebrow),
    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-modal__head p:not(.eyebrow),
    .reflex-modal__card:has([data-reflex-start].is-hidden) .reflex-modal__head p:not(.eyebrow),
    .memory-modal__card:has([data-memory-start].is-hidden) .memory-modal__head p:not(.eyebrow) {
        display: none;
    }

    .word-search-modal__timer,
    .crossword-modal__timer,
    .reflex-modal__timer,
    .memory-modal__lives {
        min-width: 88px;
        padding: 7px 9px;
        font-size: 0.72rem;
    }

    .word-search-modal__reward,
    .crossword-modal__reward,
    .reflex-modal__reward,
    .memory-modal__reward {
        gap: 5px;
        padding: 7px 8px;
    }

    .word-search-modal__reward strong,
    .crossword-modal__reward strong,
    .reflex-modal__reward strong,
    .memory-modal__reward strong {
        font-size: 0.72rem;
    }

    .word-search-modal__reward span,
    .crossword-modal__reward span,
    .reflex-modal__reward span,
    .memory-modal__reward span {
        font-size: 0.72rem;
        line-height: 1.2;
    }

    .word-search-modal__arena {
        gap: 7px;
    }

    .word-search-console {
        gap: 7px;
        padding: 9px;
    }

    .word-search-console strong {
        font-size: 0.96rem;
        line-height: 1.1;
    }

    .word-search-console p {
        font-size: 0.76rem;
        line-height: 1.26;
    }

    .word-search-targets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .word-search-target {
        min-height: 38px;
        gap: 6px;
        padding: 7px 8px;
        border-radius: 12px;
        font-size: 0.74rem;
        line-height: 1.05;
    }

    .word-search-target::after {
        content: "";
        flex: 0 0 9px;
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: rgba(246, 199, 74, 0.84);
        box-shadow: 0 0 12px rgba(246, 199, 74, 0.38);
    }

    .word-search-target.is-found::after {
        content: "";
        background: rgba(124, 227, 139, 0.92);
        box-shadow: 0 0 12px rgba(124, 227, 139, 0.4);
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-modal__head,
    .reflex-modal__card:has([data-reflex-start].is-hidden) .reflex-modal__head,
    .memory-modal__card:has([data-memory-start].is-hidden) .memory-modal__head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-modal__arena,
    .reflex-modal__card:has([data-reflex-start].is-hidden) .reflex-modal__arena,
    .memory-modal__card:has([data-memory-start].is-hidden) .memory-modal__arena {
        gap: 7px;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-console,
    .reflex-modal__card:has([data-reflex-start].is-hidden) .reflex-console,
    .memory-modal__card:has([data-memory-start].is-hidden) .memory-console {
        padding: 9px;
        padding-bottom: 56px;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-console strong,
    .reflex-modal__card:has([data-reflex-start].is-hidden) .reflex-console strong,
    .memory-modal__card:has([data-memory-start].is-hidden) .memory-console strong {
        font-size: 1rem;
        line-height: 1.12;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-console p,
    .reflex-modal__card:has([data-reflex-start].is-hidden) .reflex-console p,
    .memory-modal__card:has([data-memory-start].is-hidden) .memory-console p {
        font-size: 0.8rem;
        line-height: 1.26;
    }

    .crossword-modal__card:has([data-crossword-start].is-hidden) .crossword-clues {
        max-height: min(42svh, 330px);
    }

    .memory-modal__card:has([data-memory-start].is-hidden) .memory-progress {
        gap: 7px;
    }

    .memory-modal__card:has([data-memory-start].is-hidden) .memory-progress span {
        min-height: 56px;
        padding: 8px;
    }
}

@media (max-width: 380px) and (orientation: portrait) {
    .mobile-path-grid {
        gap: 16px 7px;
    }

    .mobile-tile {
        min-height: 106px;
        border-radius: 12px;
        padding-inline: 5px;
    }

    .mobile-tile__core {
        width: 44px;
    }

    .mobile-tile.is-start .mobile-tile__core,
    .mobile-tile.is-champion .mobile-tile__core,
    .mobile-tile.is-crown .mobile-tile__core {
        width: 50px;
    }

    .mobile-tile.is-inicio .mobile-tile__tokens {
        --mobile-home-token-size: 44px;
    }

    .mobile-board-token {
        --mobile-token-size: 42px;
        --mobile-token-art-size: calc(var(--mobile-token-size) * 0.86);
    }

    .setup-modal__card {
        padding: 10px;
    }

    .setup-modal__hero h2 {
        margin-right: 46px;
        font-size: clamp(1.7rem, 8.2vw, 2rem);
        line-height: 1.02;
    }

    .setup-modal .mode-options {
        gap: 5px;
    }

    .setup-modal .mode-button {
        min-height: 54px;
        padding: 7px 6px;
    }

    .setup-select-button {
        min-height: 40px;
        padding: 8px 12px;
    }

    .setup-progress {
        gap: 6px;
        margin-top: 7px;
    }

    .setup-progress button {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 0.66rem;
    }

    .setup-player-card {
        padding: 9px;
    }

    .setup-player-title {
        gap: 7px;
    }

    .setup-player-title small {
        display: none;
    }

    .setup-name-field input {
        min-height: 40px;
        padding-block: 8px;
    }

    .setup-token-button {
        min-height: 44px;
        padding: 6px 5px;
    }

    .setup-token-preview:not(.is-pending) {
        display: none;
    }

    .setup-token-preview.is-pending {
        grid-template-columns: minmax(82px, 0.36fr) minmax(0, 1fr);
        gap: 6px;
        padding: 6px;
    }

    .setup-token-preview.is-pending .setup-token-preview__art {
        width: min(92px, 30vw);
        max-height: 104px;
        overflow: hidden;
    }

    .setup-token-preview.is-pending > strong {
        font-size: 0.72rem;
    }

    .setup-token-preview.is-pending .setup-token-preview__actions {
        gap: 5px;
    }

    .setup-token-preview.is-pending .setup-token-preview__actions .primary-action,
    .setup-token-preview.is-pending .setup-token-preview__actions .secondary-action {
        min-height: 36px;
        padding: 7px 8px;
        font-size: 0.64rem;
    }

    .setup-modal__actions .primary-action,
    .setup-modal__actions .secondary-action {
        min-height: 40px;
        padding: 8px 9px;
    }

    .word-search-modal {
        padding-inline: 0;
    }

    .word-search-modal__card {
        width: 100vw;
        max-width: 100vw;
        padding-inline: 0;
        border-inline-width: 0;
    }

    .word-search-modal__head,
    .word-search-modal__reward,
    .word-search-console {
        margin-inline: 10px;
    }

    .word-search-board {
        width: calc(100vw - 2px);
        padding: 0;
        gap: 0;
        border-radius: 11px;
    }

    .word-search-cell {
        border-radius: 4px;
    }
}

@media (max-width: 380px) and (max-height: 620px) and (orientation: portrait) {
    .word-search-modal__card {
        gap: 5px;
        padding-block: 8px;
    }

    .word-search-modal__head {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }

    .word-search-modal__portrait {
        display: none;
    }

    .word-search-modal h2 {
        margin-top: 2px;
        font-size: 1.42rem;
    }

    .word-search-modal__timer {
        min-width: 82px;
        padding: 6px 8px;
        font-size: 0.68rem;
    }

    .word-search-modal__reward {
        padding: 6px 8px;
    }

    .word-search-modal__reward strong {
        font-size: 0.66rem;
    }

    .word-search-modal__reward span {
        font-size: 0.66rem;
        line-height: 1.12;
    }

    .word-search-modal__arena {
        gap: 5px;
    }

    .word-search-board {
        width: min(calc(100vw - 28px), 292px);
        border-radius: 10px;
    }

    .word-search-cell {
        font-size: 0.72rem;
    }

    .word-search-console {
        gap: 5px;
        padding: 7px;
    }

    .word-search-console strong {
        font-size: 0.82rem;
    }

    .word-search-console p {
        display: none;
    }

    .word-search-targets {
        gap: 4px;
    }

    .word-search-target {
        min-height: 32px;
        padding: 5px 7px;
        font-size: 0.68rem;
    }

    .word-search-target::after {
        flex-basis: 7px;
        width: 7px;
        height: 7px;
    }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 960px) {
    html,
    body {
        min-width: 0;
        min-height: 100svh;
        overflow: hidden;
    }

    .game-header,
    .goose-game {
        display: none !important;
    }

    .mobile-orientation-gate {
        position: fixed;
        inset: 0;
        z-index: 120;
        display: grid !important;
        place-items: center;
        padding:
            max(16px, env(safe-area-inset-top))
            max(18px, env(safe-area-inset-right))
            max(16px, env(safe-area-inset-bottom))
            max(18px, env(safe-area-inset-left));
        background:
            radial-gradient(circle at 50% 18%, rgba(68, 215, 208, 0.2), transparent 34%),
            radial-gradient(circle at 50% 80%, rgba(246, 199, 74, 0.14), transparent 32%),
            rgba(5, 5, 6, 0.94);
        backdrop-filter: blur(10px);
    }

    .mobile-orientation-gate__device {
        transform: rotate(0deg);
    }

    .mobile-orientation-gate__card {
        gap: 8px;
        max-width: min(360px, calc(100vw - 32px));
        padding: 14px 18px;
    }

    .mobile-orientation-gate__device {
        width: 58px;
        border-radius: 14px;
    }

    .mobile-orientation-gate__card h2 {
        font-size: clamp(1.85rem, 6vw, 2.45rem);
    }

    .mobile-orientation-gate__card p:not(.eyebrow) {
        font-size: 0.86rem;
        line-height: 1.32;
    }

    .game-header {
        width: calc(100vw - 10px);
        min-height: 36px;
        padding-top: 4px;
        gap: 6px;
    }

    .game-brand img {
        width: 30px;
        height: 30px;
    }

    .game-brand span,
    .prototype-pill,
    .space-music-volume span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .game-header__actions {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .space-sound-toggle,
    .vc-sound-toggle,
    .space-music-toggle {
        min-height: 28px;
        padding: 5px 8px;
        font-size: 0.58rem;
        line-height: 1;
    }

    .space-music-control {
        gap: 4px;
        padding: 4px 6px;
    }

    .space-music-volume input {
        width: 54px;
    }

    .goose-game {
        width: calc(100vw - 10px);
        padding: 3px 0 0;
    }

    .game-table {
        padding: 4px;
        border-radius: 10px;
    }

    .table-titlebar {
        display: none;
    }

    .board-scroll {
        display: grid;
        place-items: center;
        height: calc(100svh - 48px);
        overflow: hidden;
        border-radius: 10px;
    }

    @supports (height: 100dvh) {
        .board-scroll {
            height: calc(100dvh - 48px);
        }
    }

    .space-game-board {
        --tile-size: min(42px, calc(100cqw / 16 - 4.5px), calc(100cqh / 10 - 3.5px));
        width: min(calc(100vw - 20px), calc((100svh - 54px) * 1.9875));
        min-width: 0;
        aspect-ratio: 16 / 8.05;
        border-width: 1px;
        border-radius: 12px;
    }

    @supports (height: 100dvh) {
        .space-game-board {
            width: min(calc(100vw - 20px), calc((100dvh - 54px) * 1.9875));
        }
    }

    .space-game-board::after {
        inset: 8px;
        border-radius: 8px;
    }

    .space-route-ribbon {
        stroke-width: clamp(24px, 4.2vw, 40px);
    }

    .space-route-glow {
        stroke-width: clamp(12px, 2vw, 22px);
        filter: blur(7px);
    }

    .space-route-line {
        stroke-width: clamp(3px, 0.46vw, 5px);
        stroke-dasharray: 12 9;
    }

    .board-nebula {
        inset: 17% 15% 18% 15%;
        border-radius: 16px;
    }

    .space-tile,
    .start-space {
        gap: 1px;
        border-radius: 8px;
        padding: 3px;
    }

    .space-tile:hover,
    .space-tile:focus-visible,
    .space-tile.is-selected,
    .start-space:hover,
    .start-space:focus-visible,
    .start-space.is-selected {
        transform: translate(-50%, calc(-50% - 2px));
    }

    .space-tile__step {
        top: 2px;
        left: 2px;
        padding: 1px 4px;
        font-size: clamp(0.42rem, 0.8cqw, 0.52rem);
    }

    .space-tile__core {
        width: 45%;
        box-shadow:
            0 0 0 3px rgba(68, 215, 208, 0.05),
            0 0 10px rgba(68, 215, 208, 0.14);
    }

    .space-tile.is-champion .space-tile__core {
        width: 50%;
    }

    .space-tile__copy {
        width: calc(100% + 6px);
        min-height: 19px;
        margin: 0 -3px -3px;
        border-radius: 0 0 7px 7px;
        padding: 2px 2px 3px;
    }

    .space-tile__label {
        font-size: clamp(0.48rem, 0.88cqw, 0.58rem);
    }

    .space-tile__sub {
        font-size: clamp(0.36rem, 0.68cqw, 0.44rem);
    }

    .start-space__core {
        width: 52%;
    }

    .start-boarding-light {
        top: calc(8.1% + (var(--tile-size) / 2) - 2px);
        width: clamp(74px, 10cqw, 118px);
        height: clamp(94px, 14cqw, 150px);
    }

    .finish-relevo {
        left: 29.2%;
        top: 48.5%;
        width: clamp(88px, 14cqw, 120px);
        gap: 3px;
    }

    .finish-relevo img {
        flex-basis: clamp(30px, 4.4cqw, 42px);
        width: clamp(30px, 4.4cqw, 42px);
    }

    .finish-relevo span {
        border-radius: 7px;
        padding: 3px 5px;
        font-size: clamp(0.38rem, 0.62cqw, 0.48rem);
    }

    .central-command {
        left: 57%;
        top: 31.5%;
        gap: 3px;
        width: min(116px, 16%);
        min-height: 70px;
        border-radius: 11px;
        padding: 5px;
    }

    .central-command .eyebrow {
        font-size: 0.42rem;
    }

    .central-command strong {
        font-size: clamp(0.62rem, 1.02cqw, 0.74rem);
    }

    .turn-badge {
        min-height: 18px;
        padding: 3px 6px;
        font-size: clamp(0.42rem, 0.68cqw, 0.5rem);
    }

    .orbital-die {
        width: 32px;
        border-radius: 10px;
    }

    .die-face {
        gap: 2px;
    }

    .die-face i {
        width: 3px;
    }

    .board-quick-actions {
        left: 2.1%;
        top: 37%;
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
        width: clamp(88px, 12.5cqw, 112px);
        padding: 0;
    }

    .board-quick-actions .primary-action,
    .board-quick-actions .secondary-action {
        min-height: 22px;
        border-radius: 6px;
        padding: 5px 4px;
        font-size: clamp(0.42rem, 0.66cqw, 0.5rem);
        line-height: 1.02;
    }

    .setup-modal,
    .winner-modal,
    .rules-modal,
    .comodin-modal,
    .turn-notice-modal,
    .chance-modal,
    .info-tile-modal,
    .space-puzzle-modal,
    .jigsaw-modal,
    .word-search-modal,
    .crossword-modal,
    .reflex-modal,
    .memory-modal,
    .duel-modal,
    .token-modal,
    .champion-quiz-modal {
        padding: 6px;
    }

    .setup-modal__card,
    .winner-modal__card,
    .rules-modal__card,
    .comodin-modal__card,
    .turn-notice-modal__card,
    .chance-modal__card,
    .info-tile-modal__card,
    .space-puzzle-modal__card,
    .jigsaw-modal__card,
    .word-search-modal__card,
    .crossword-modal__card,
    .reflex-modal__card,
    .memory-modal__card,
    .duel-modal__card,
    .token-modal__card,
    .champion-quiz-modal__card {
        width: min(96vw, 900px);
        max-height: calc(100svh - 12px);
        overflow: auto;
        border-radius: 12px;
        padding: 10px;
    }

    @supports (height: 100dvh) {
        .setup-modal__card,
        .winner-modal__card,
        .rules-modal__card,
        .comodin-modal__card,
        .turn-notice-modal__card,
        .chance-modal__card,
        .info-tile-modal__card,
        .space-puzzle-modal__card,
        .jigsaw-modal__card,
        .word-search-modal__card,
        .crossword-modal__card,
        .reflex-modal__card,
        .memory-modal__card,
        .duel-modal__card,
        .token-modal__card,
        .champion-quiz-modal__card {
            max-height: calc(100dvh - 12px);
        }
    }

    .setup-modal__hero,
    .setup-player-body,
    .space-puzzle-modal__arena,
    .jigsaw-modal__arena,
    .word-search-modal__arena,
    .crossword-modal__arena,
    .reflex-modal__arena,
    .memory-modal__arena,
    .duel-die-panel {
        gap: 8px;
    }

    .setup-modal__hero h2,
    .winner-modal h2,
    .rules-modal h2,
    .turn-notice-modal h2,
    .chance-modal h2,
    .info-tile-modal h2,
    .space-puzzle-modal h2,
    .jigsaw-modal h2,
    .word-search-modal h2,
    .crossword-modal h2,
    .reflex-modal h2,
    .memory-modal h2,
    .duel-modal h2,
    .champion-quiz-modal h2 {
        font-size: clamp(1.35rem, 3.6vw, 2rem);
        line-height: 0.98;
    }

    .setup-modal__hero p:not(.eyebrow),
    .winner-modal p:not(.eyebrow),
    .rules-modal__intro,
    .turn-notice-modal p:not(.eyebrow),
    .chance-modal p:not(.eyebrow),
    .info-tile-modal p:not(.eyebrow),
    .space-puzzle-modal p:not(.eyebrow),
    .jigsaw-modal p:not(.eyebrow),
    .word-search-modal p:not(.eyebrow),
    .crossword-modal p:not(.eyebrow),
    .reflex-modal p:not(.eyebrow),
    .memory-modal p:not(.eyebrow),
    .duel-modal p:not(.eyebrow),
    .champion-quiz-modal p:not(.eyebrow) {
        font-size: 0.78rem;
        line-height: 1.28;
    }

    .setup-modal__hero {
        grid-template-columns: minmax(0, 1fr) 56px;
        align-items: center;
        gap: 6px;
    }

    .setup-modal__hero .eyebrow,
    .setup-modal__hero p:not(.eyebrow),
    .setup-modal__hero-tools,
    .setup-modal__art {
        display: none;
    }

    .setup-modal__hero h2 {
        margin: 0;
        font-size: clamp(1.28rem, 3.4vw, 1.72rem);
    }

    .setup-modal__art {
        width: 56px;
    }

    .setup-modal__settings,
    .mode-options,
    .setup-roster,
    .setup-player-card,
    .setup-modal__actions {
        gap: 6px;
    }

    .setup-modal__settings {
        padding: 6px;
    }

    .setup-modal .mode-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 6px;
    }

    .mode-button {
        min-height: 44px;
        padding: 7px;
    }

    .mode-button span {
        font-size: 0.72rem;
    }

    .mode-button small {
        font-size: 0.62rem;
    }

    .setup-count-field {
        max-width: 190px;
    }

    .setup-select-button {
        min-height: 34px;
        padding: 6px 9px;
        font-size: 0.72rem;
    }

    .setup-progress {
        gap: 5px;
        margin-top: 6px;
    }

    .setup-progress span {
        padding: 5px 8px;
        font-size: 0.62rem;
    }

    .setup-roster {
        margin-top: 6px;
    }

    .setup-player-card {
        padding: 6px;
    }

    .setup-player-badge {
        width: 24px;
        height: 24px;
        font-size: 0.62rem;
    }

    .setup-player-title strong {
        font-size: 0.76rem;
    }

    .setup-player-title small {
        font-size: 0.62rem;
    }

    .setup-player-fields {
        gap: 6px;
    }

    .setup-name-field {
        gap: 3px;
    }

    .setup-name-field input {
        min-height: 38px;
        padding: 7px 9px;
    }

    .setup-online .setup-name-field input {
        min-height: 42px;
        border-radius: 11px;
        padding: 9px 13px;
    }

    .setup-token-button {
        min-height: 48px;
    }

    .setup-token-button img {
        width: 26px;
        height: 26px;
    }

    .setup-token-button span {
        font-size: 0.52rem;
    }

    .setup-token-preview {
        min-height: 112px;
    }

    .setup-token-preview__art {
        width: 84px;
    }

    .setup-modal__actions {
        grid-template-columns: minmax(92px, auto) minmax(92px, auto) minmax(150px, 1fr);
    }

    .setup-modal__actions .primary-action,
    .setup-modal__actions .secondary-action {
        min-height: 36px;
        padding: 7px 9px;
    }

    .setup-modal__card {
        display: grid;
        grid-template-columns: minmax(210px, 0.42fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 7px;
        overflow: hidden;
    }

    .setup-modal__hero {
        grid-column: 1;
        grid-row: 1;
        padding-right: 34px;
    }

    .setup-modal__close {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 4;
        min-height: 28px;
        padding: 4px 8px;
        font-size: 0.64rem;
    }

    .setup-modal__settings {
        grid-column: 1;
        grid-row: 2;
        min-height: 0;
        overflow: visible;
    }

    .setup-modal .mode-options {
        grid-template-columns: 1fr;
    }

    .online-setup-panel,
    .online-setup-panel[data-online-join-panel] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .online-token-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .online-lobby {
        gap: 6px;
        padding: 10px;
    }

    .online-lobby__head,
    .online-lobby__players {
        display: grid;
        grid-template-columns: 1fr;
    }

    .online-lobby h3 {
        font-size: 1.18rem;
    }

    .mode-button {
        min-height: 38px;
    }

    .setup-progress {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin-top: 0;
    }

    .setup-roster {
        grid-column: 2;
        grid-row: 2;
        min-height: 0;
        margin-top: 0;
        overflow: auto;
    }

    .setup-player-body {
        grid-template-columns: minmax(0, 1fr) minmax(132px, 0.34fr);
    }

    .setup-token-preview {
        min-height: 98px;
        padding: 6px;
    }

    .setup-token-preview__art {
        width: 74px;
        border-radius: 14px;
    }

    .setup-token-preview strong {
        font-size: 0.72rem;
    }

    .setup-modal__actions {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .winner-modal__card {
        max-width: 560px;
    }

    .winner-modal__art {
        min-height: 96px;
    }

    .winner-modal__podio {
        width: 104px;
    }

    .winner-modal__token {
        width: 64px;
    }

    .rules-modal__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .rules-modal__item {
        min-height: 0;
        padding: 10px 10px 10px 40px;
    }

    .rules-modal__item::before {
        left: 10px;
        top: 10px;
        width: 22px;
        height: 22px;
        font-size: 0.72rem;
    }

    .rules-modal__item p,
    .rules-modal__note {
        font-size: 0.72rem;
        line-height: 1.25;
    }

    .space-puzzle-modal__arena {
        grid-template-columns: minmax(220px, 0.82fr) minmax(180px, 0.7fr);
    }

    .space-puzzle-modal__board-frame {
        min-height: 0;
        padding: 6px;
    }

    .space-puzzle-modal__board {
        width: min(48svh, 280px);
    }

    .jigsaw-modal__arena,
    .word-search-modal__arena,
    .crossword-modal__arena,
    .reflex-modal__arena,
    .memory-modal__arena {
        grid-template-columns: minmax(230px, 0.86fr) minmax(190px, 0.7fr);
    }

    .jigsaw-board,
    .word-search-board,
    .crossword-board,
    .reflex-board-shell {
        width: min(58svh, 300px);
        padding: 6px;
    }

    .jigsaw-tray {
        grid-template-columns: repeat(4, minmax(38px, 1fr));
        min-height: 92px;
    }

    .word-search-cell,
    .crossword-cell input {
        min-height: 0;
        font-size: 0.72rem;
    }

    .crossword-clues {
        grid-template-columns: 1fr;
        max-height: 130px;
        overflow: auto;
    }

    .reflex-board-shell {
        --reflex-coord-gap: 16px;
    }

    .memory-board {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        padding: 6px;
    }

    .memory-card {
        min-height: 62px;
    }

    .memory-card__front img {
        width: min(66%, 48px);
    }

    .duel-rivals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .duel-die {
        width: 58px;
    }

    .token-modal__art {
        width: 104px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .space-route-line {
        animation: route-flow 16s linear infinite;
    }

    .space-tile.is-gem .space-tile__core,
    .space-tile.is-crown .space-tile__core,
    .orbital-die {
        animation: soft-pulse 3.4s ease-in-out infinite;
    }

    .start-space__core img {
        animation: hangar-breathe 4.6s ease-in-out infinite;
    }

    .start-boarding-light::before {
        animation: boarding-beam 4.8s ease-in-out infinite;
    }

    .start-boarding-light::after {
        animation: boarding-landing 4.8s ease-in-out infinite;
    }

    .finish-relevo img {
        animation: relevo-breathe 3.8s ease-in-out infinite;
    }

    .board-token.is-traveling img,
    .mobile-board-token.is-traveling img {
        animation: token-travel-bob 430ms cubic-bezier(0.36, 0, 0.2, 1) infinite;
    }

    .comodin-burst:not(.is-hidden):not(.requires-continue) .comodin-burst__card {
        animation: comodin-float 2.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .comodin-burst.requires-continue .comodin-burst__card {
        animation: comodin-modal-pop 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

@keyframes route-flow {
    to {
        stroke-dashoffset: -128;
    }
}

@keyframes soft-pulse {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.18);
    }
}

@keyframes token-travel-bob {
    0%,
    100% {
        transform: translateY(0) scale(var(--token-travel-scale, 1));
    }

    46% {
        transform: translateY(-5%) scale(calc(var(--token-travel-scale, 1) * 1.035));
    }
}

@keyframes die-roll {
    0% {
        transform: rotate(0deg) scale(1);
    }

    35% {
        transform: rotate(140deg) scale(0.94);
    }

    72% {
        transform: rotate(300deg) scale(1.08);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes hangar-breathe {
    0%,
    100% {
        transform: translateY(0);
        filter:
            drop-shadow(0 18px 30px rgba(0, 0, 0, 0.38))
            drop-shadow(0 0 20px rgba(68, 215, 208, 0.16));
    }

    50% {
        transform: translateY(-3px);
        filter:
            drop-shadow(0 20px 34px rgba(0, 0, 0, 0.42))
            drop-shadow(0 0 30px rgba(68, 215, 208, 0.28));
    }
}

@keyframes boarding-beam {
    0%,
    100% {
        opacity: 0.64;
        transform: translateX(-50%) scaleX(0.92);
    }

    50% {
        opacity: 0.9;
        transform: translateX(-50%) scaleX(1.04);
    }
}

@keyframes boarding-landing {
    0%,
    100% {
        opacity: 0.7;
        transform: translateX(-50%) scale(0.94);
    }

    50% {
        opacity: 0.96;
        transform: translateX(-50%) scale(1.05);
    }
}

@keyframes relevo-breathe {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

@keyframes comodin-float {
    0% {
        opacity: 0;
        transform: translateY(44px) scale(0.76) rotate(-7deg);
        filter: blur(3px);
    }

    18% {
        opacity: 1;
        transform: translateY(0) scale(1.04) rotate(2deg);
        filter: blur(0);
    }

    62% {
        opacity: 1;
        transform: translateY(-6px) scale(1) rotate(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-48px) scale(0.92) rotate(4deg);
    }
}

@keyframes comodin-modal-pop {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(0.86) rotate(-4deg);
        filter: blur(2px);
    }

    72% {
        opacity: 1;
        transform: translateY(-3px) scale(1.03) rotate(1deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
        filter: blur(0);
    }
}

/* Olimpiada de Mates overrides */
:root {
    --bg: #061a2a;
    --gold: #f5c84c;
    --gold-soft: #fff0a4;
    --cyan: #2ce4ff;
    --green: #49e878;
    --red: #ef3f35;
    --violet: #6e57ff;
    --text: #fff8df;
}

.space-backdrop img {
    filter: saturate(1.16) brightness(1.08);
}

body::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(6, 26, 42, 0.22) 42%, rgba(3, 12, 20, 0.58) 100%),
        radial-gradient(circle at 18% 18%, rgba(44, 228, 255, 0.18), transparent 26%),
        radial-gradient(circle at 78% 12%, rgba(245, 200, 76, 0.2), transparent 24%),
        radial-gradient(circle at 58% 76%, rgba(73, 232, 120, 0.12), transparent 32%);
}

body::after {
    opacity: 0.24;
}

.mobile-command-console__audio {
    display: none !important;
}

.prototype-pill {
    border-color: rgba(245, 200, 76, 0.66);
    background:
        linear-gradient(135deg, rgba(245, 200, 76, 0.28), rgba(44, 228, 255, 0.16)),
        rgba(6, 28, 42, 0.56);
    color: #fff7dd;
}

.game-header {
    padding-top: 6px;
}

.goose-game {
    padding-bottom: 12px;
}

.game-table {
    padding: clamp(8px, 1vw, 12px);
    background:
        linear-gradient(135deg, rgba(255, 247, 221, 0.08), rgba(44, 228, 255, 0.08)),
        rgba(6, 28, 42, 0.56);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(245, 200, 76, 0.26),
        inset 0 1px 0 rgba(255, 247, 221, 0.14);
}

.space-game-board {
    aspect-ratio: 16 / 7.72;
    background:
        radial-gradient(circle at 51% 42%, rgba(245, 200, 76, 0.1), transparent 25%),
        radial-gradient(circle at 20% 68%, rgba(44, 228, 255, 0.1), transparent 25%),
        radial-gradient(circle at 86% 26%, rgba(73, 232, 120, 0.08), transparent 24%),
        linear-gradient(90deg, rgba(239, 63, 53, 0.12), transparent 15%, transparent 84%, rgba(13, 99, 255, 0.1)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(4, 18, 26, 0.28) 56%, rgba(3, 8, 12, 0.42)),
        url("../images/olimpiada-arena-desktop-clean.webp") center / cover no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(255, 247, 221, 0.16),
        inset 0 0 72px rgba(255, 247, 221, 0.04),
        0 22px 54px rgba(0, 0, 0, 0.34);
}

.space-game-board::before {
    background:
        linear-gradient(rgba(255, 247, 221, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 247, 221, 0.028) 1px, transparent 1px),
        repeating-linear-gradient(90deg, transparent 0 7%, rgba(239, 63, 53, 0.06) 7% 7.35%, transparent 7.35% 14%),
        radial-gradient(circle at 4% 87%, rgba(245, 200, 76, 0.25), transparent 5%),
        radial-gradient(circle at 96% 12%, rgba(73, 232, 120, 0.18), transparent 6%);
    background-size:
        calc(100% / 16) calc(100% / 10),
        calc(100% / 16) calc(100% / 10),
        auto,
        auto,
        auto;
}

.space-game-board::after {
    border-color: rgba(44, 228, 255, 0.24);
    box-shadow:
        inset 0 0 0 1px rgba(245, 200, 76, 0.08),
        inset 0 0 46px rgba(245, 200, 76, 0.05);
}

.board-nebula {
    border-color: rgba(245, 200, 76, 0.28);
    background:
        repeating-linear-gradient(90deg, transparent 0 10%, rgba(245, 200, 76, 0.05) 10% 10.35%, transparent 10.35% 20%),
        linear-gradient(90deg, rgba(239, 63, 53, 0.08), transparent 18%, transparent 82%, rgba(13, 99, 255, 0.08)),
        radial-gradient(circle at 50% 42%, rgba(245, 200, 76, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(255, 247, 221, 0.065), rgba(5, 24, 30, 0.3));
}

.board-nebula::before,
.board-nebula::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0.72;
}

.board-nebula::before {
    left: 23%;
    top: 10.5%;
    width: min(29%, 350px);
    aspect-ratio: 460 / 210;
    border-radius: 999px;
    background: url("../images/game/aros-olimpicos.svg?v=20260711olimpiada-mate1") center / contain no-repeat;
    filter:
        drop-shadow(0 0 12px rgba(245, 200, 76, 0.24))
        drop-shadow(0 0 18px rgba(44, 228, 255, 0.16));
}

.board-nebula::after {
    right: 6%;
    bottom: 8%;
    width: min(18%, 210px);
    aspect-ratio: 5 / 3;
    border-radius: 999px;
    background:
        radial-gradient(circle at 20% 50%, rgba(245, 200, 76, 0.34), transparent 9%),
        radial-gradient(circle at 43% 36%, rgba(44, 228, 255, 0.22), transparent 7%),
        radial-gradient(circle at 64% 58%, rgba(73, 232, 120, 0.22), transparent 7%),
        linear-gradient(90deg, rgba(245, 200, 76, 0.18), rgba(239, 63, 53, 0.12), rgba(44, 228, 255, 0.1));
    clip-path: polygon(0 38%, 72% 38%, 100% 50%, 72% 62%, 0 62%);
}

.table-titlebar .eyebrow::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: -2px;
    background:
        radial-gradient(circle at 35% 30%, #fff8df, transparent 18%),
        linear-gradient(135deg, #f5c84c, #ef3f35);
    box-shadow: 0 0 16px rgba(245, 200, 76, 0.44);
}

.space-route-line {
    stroke-dasharray: 20 12;
    filter:
        drop-shadow(0 0 8px rgba(245, 200, 76, 0.28))
        drop-shadow(0 0 6px rgba(44, 228, 255, 0.26));
}

.space-tile {
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 247, 221, 0.2),
        0 0 22px rgba(245, 200, 76, 0.1);
}

.space-tile__copy {
    background:
        linear-gradient(180deg, rgba(7, 24, 30, 0.78), rgba(5, 12, 16, 0.88));
}

.dock-token,
.board-token,
.mobile-board-token {
    border-width: 3px;
    background:
        radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--token-rim), #fff 54%), transparent 23%),
        radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--token-color), transparent 6%), transparent 72%),
        linear-gradient(145deg, color-mix(in srgb, var(--token-color), #050506 22%), rgba(5, 5, 6, 0.66));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--token-rim), #fff 55%),
        0 0 18px color-mix(in srgb, var(--token-rim), transparent 0%),
        0 0 38px color-mix(in srgb, var(--token-color), transparent 10%),
        inset 0 0 20px color-mix(in srgb, var(--token-rim), transparent 34%);
}

.dock-token.is-cyan,
.board-token.is-cyan,
.mobile-board-token.is-cyan,
.setup-token-preview.is-cyan,
.winner-modal__token.is-cyan,
.token-modal__art.is-cyan {
    --token-color: #0d63ff;
    --token-rim: #7af6ff;
}

.dock-token.is-gold,
.board-token.is-gold,
.mobile-board-token.is-gold,
.setup-token-preview.is-gold,
.winner-modal__token.is-gold,
.token-modal__art.is-gold {
    --token-color: #ffd33f;
    --token-rim: #fff38b;
}

.dock-token.is-green,
.board-token.is-green,
.mobile-board-token.is-green,
.setup-token-preview.is-green,
.winner-modal__token.is-green,
.token-modal__art.is-green {
    --token-color: #22e76e;
    --token-rim: #8cffae;
}

.dock-token.is-red,
.board-token.is-red,
.mobile-board-token.is-red,
.setup-token-preview.is-red,
.winner-modal__token.is-red,
.token-modal__art.is-red {
    --token-color: #ff3131;
    --token-rim: #ff8177;
}

.space-tile.is-champion,
.space-tile.is-crown {
    border-color: rgba(245, 200, 76, 0.72);
}

.finish-relevo span {
    border-color: rgba(245, 200, 76, 0.42);
    background:
        radial-gradient(circle at 0% 50%, rgba(245, 200, 76, 0.2), transparent 62%),
        rgba(7, 30, 40, 0.7);
}

.central-command {
    border-color: rgba(245, 200, 76, 0.44);
    background:
        radial-gradient(circle at 50% 0%, rgba(245, 200, 76, 0.18), transparent 44%),
        linear-gradient(180deg, rgba(10, 40, 50, 0.82), rgba(5, 11, 14, 0.82));
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(44, 228, 255, 0.16),
        inset 0 1px 0 rgba(255, 247, 221, 0.12);
}

.orbital-die {
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 248, 223, 0.9), transparent 20%),
        linear-gradient(145deg, #fff0a4, #f5c84c 58%, #b76b1a);
}

.setup-modal__card,
.turn-notice-modal__card,
.champion-quiz-modal__card,
.space-puzzle-modal__card,
.jigsaw-modal__card,
.word-search-modal__card,
.crossword-modal__card,
.reflex-modal__card,
.memory-modal__card,
.duel-modal__card,
.rules-modal__card,
.comodin-modal__card,
.winner-modal__card {
    background:
        radial-gradient(circle at 82% 0%, rgba(245, 200, 76, 0.18), transparent 35%),
        radial-gradient(circle at 6% 14%, rgba(44, 228, 255, 0.14), transparent 32%),
        linear-gradient(145deg, rgba(10, 39, 48, 0.96), rgba(5, 9, 12, 0.96));
}

@media (min-width: 1100px) {
    html,
    body {
        min-height: 100svh;
    }

    .game-header {
        min-height: 48px;
    }

    .goose-game {
        width: min(1560px, calc(100vw - 28px));
        padding-top: 6px;
    }

    .space-game-board {
        max-height: calc(100svh - 112px);
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    .online-premium-gate {
        padding: 14px;
    }

    .online-premium-gate__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .online-member-identity {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .online-member-identity > span {
        grid-row: auto;
        border-right: 0;
        padding-right: 0;
    }

    .online-mode-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .space-game-board {
        aspect-ratio: auto;
    }

    .mobile-path-board {
        background:
            linear-gradient(rgba(255, 247, 221, 0.032) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 247, 221, 0.024) 1px, transparent 1px),
            radial-gradient(circle at 50% 0%, rgba(245, 200, 76, 0.16), transparent 24%),
            linear-gradient(rgba(255, 255, 255, 0.03), rgba(4, 18, 26, 0.32) 58%, rgba(3, 8, 12, 0.58)),
            url("../images/olimpiada-arena-mobile-clean.webp") top center / cover no-repeat;
    }
}