/* Game shell: full-viewport column (top bar + stage). Engines size themselves to the stage with a ResizeObserver. */
.screen-game { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.game-shell { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.game-top {
    flex: none; z-index: 20; display: flex; align-items: center; gap: .75rem; height: calc(3.6rem + var(--safe-top)); padding: var(--safe-top) calc(var(--safe-right) + 1rem) 0 calc(var(--safe-left) + 1rem);
    background: var(--expo-surface); border-bottom: 1px solid var(--expo-line);
}
.game-exit { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; border: 1px solid var(--expo-line); background: var(--expo-surface); color: var(--expo-secondary); display: grid; place-items: center; }
.game-exit svg { width: 1.1rem; height: 1.1rem; }
.game-name { flex: 1; font-weight: 800; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-status { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--expo-secondary); font-size: 1rem; }
.game-content { flex: 1; min-height: 0; position: relative; }
.game-surface { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.stage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: clamp(.5rem, 1.6vmin, 1.5rem) calc(var(--safe-right) + clamp(.5rem, 1.6vmin, 1.5rem)) calc(var(--safe-bottom) + clamp(.5rem, 1.6vmin, 1.5rem)) calc(var(--safe-left) + clamp(.5rem, 1.6vmin, 1.5rem)); }
.stage.scroll { overflow-y: auto; align-items: flex-start; }
.game-loading, .game-blocked { text-align: center; padding: 4rem 1.25rem; color: var(--expo-muted); }
.game-blocked h2 { color: var(--expo-ink); font-weight: 800; font-size: 1.4rem; }
.spinner { width: 2.4rem; height: 2.4rem; margin: 0 auto .9rem; border-radius: 999px; border: .3rem solid var(--expo-line); border-top-color: var(--expo-secondary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Results overlay */
.results-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2600; display: flex; align-items: center; justify-content: center; padding: 1.4rem; background: rgba(8, 20, 48, .6); animation: fade-in .25s ease both; }
.results-card { width: 100%; max-width: 26rem; border-radius: 1.6rem; background: var(--expo-surface); color: var(--expo-ink); padding: 1.6rem 1.4rem; text-align: center; box-shadow: 0 1.5rem 3.8rem rgba(0, 0, 0, .4); animation: pop-in .35s cubic-bezier(.2, .9, .3, 1.2) both; max-height: 100%; overflow-y: auto; }
.results-card h2 { margin: 0; font-size: 1.1rem; color: var(--expo-muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.results-score { font-size: 4.2rem; font-weight: 900; line-height: 1.1; color: var(--expo-secondary); font-variant-numeric: tabular-nums; }
.results-score small { font-size: 1.1rem; color: var(--expo-muted); font-weight: 700; }
.results-new { display: inline-block; margin: .25rem 0 .6rem; padding: .25rem .8rem; border-radius: 999px; background: var(--expo-warn); color: #4a3200; font-weight: 800; font-size: .8rem; }
.results-lines { list-style: none; padding: 0; margin: .75rem 0; text-align: left; }
.results-lines li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px dashed var(--expo-line); }
.results-lines li span:first-child { color: var(--expo-muted); }
.results-lines li span:last-child { font-weight: 800; }
.results-total { margin: .9rem 0 1.1rem; font-weight: 700; }
.results-total strong { color: var(--expo-primary); font-size: 1.3rem; }
.results-card .btn-primary-xl { width: 100%; padding: .95rem 1.25rem; font-size: 1.1rem; }

/* Shared countdown bar */
.timer-row { display: flex; align-items: center; gap: .65rem; height: 1.6rem; }
.timer-bar { flex: 1; height: .65rem; border-radius: 999px; background: var(--expo-line); overflow: hidden; }
.timer-fill { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(1); background: var(--expo-grad); }
.timer-fill.urgent { background: var(--expo-bad); }
.timer-num { min-width: 2.2em; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* MCQ */
.mcq-card { width: min(92vw, 60rem); margin: auto; background: var(--expo-surface); border: 1px solid var(--expo-line); border-radius: 1.4rem; padding: clamp(1.1rem, 3vmin, 2.2rem); box-shadow: var(--expo-shadow); animation: mcq-in .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mcq-in { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: none; } }
.mcq-card .timer-row { margin-bottom: 1rem; }
.mcq-prompt { font-size: clamp(1.25rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 800; line-height: 1.3; margin-bottom: 1.25rem; }
.mcq-options { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .mcq-options { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.mcq-option {
    display: flex; align-items: center; justify-content: space-between; gap: .65rem; width: 100%; text-align: left; min-height: 4rem;
    padding: 1rem 1.15rem; border-radius: 1.1rem; border: 2px solid var(--expo-line); background: var(--expo-surface); font-weight: 600; font-size: clamp(1.02rem, .95rem + .5vw, 1.4rem);
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.mcq-option:active:not(:disabled) { transform: scale(.98); }
.mcq-option .mark { flex: none; width: 1.5rem; height: 1.5rem; opacity: 0; transition: opacity .2s ease; }
.mcq-option.correct { background: rgba(10, 207, 151, .15); border-color: var(--expo-good); }
.mcq-option.correct .mark { opacity: 1; color: var(--expo-good); }
.mcq-option.wrong { background: rgba(237, 85, 101, .13); border-color: var(--expo-bad); animation: shake .4s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-.5rem); } 40% { transform: translateX(.5rem); } 60% { transform: translateX(-.3rem); } 80% { transform: translateX(.3rem); } }

/* Memory */
.mem-board {
    display: grid; justify-content: center; align-content: center; padding: clamp(.5rem, 1.5vmin, 1rem);
    border-radius: 1.5rem; background: linear-gradient(160deg, rgba(255, 255, 255, .65), rgba(226, 236, 248, .55));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 .6rem 1.8rem rgba(24, 38, 64, .1);
}
.mem-card {
    position: relative; width: 100%; height: 100%; perspective: 900px; border: 0; padding: 0; background: none; cursor: pointer;
    animation: mem-deal .38s cubic-bezier(.2, .85, .3, 1.15) both;
}
@keyframes mem-deal { from { opacity: 0; transform: scale(.72) translateY(.6rem); } to { opacity: 1; transform: none; } }
@media (hover: hover) {
    .mem-card:hover:not(.flipped):not(.matched):not(.flipping) .mem-back {
        box-shadow: 0 .45rem 1.15rem rgba(24, 96, 154, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
    }
}
.mem-inner {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    transition: transform .58s cubic-bezier(.34, 1.35, .5, 1);
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
    transform: rotateY(0deg); will-change: transform;
}
.mem-card.flipped .mem-inner { transform: rotateY(180deg); }
.mem-card.flipping { z-index: 2; }
.mem-card.flipping .mem-face { box-shadow: 0 .7rem 1.6rem rgba(20, 35, 62, .32); }
.mem-face {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12%;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transform: rotateY(0deg) translateZ(1px);
    overflow: hidden; display: grid; place-items: center; container-type: size;
    transition: box-shadow .25s ease, background .25s ease;
}
.mem-back {
    background:
        radial-gradient(circle at 28% 26%, rgba(255, 255, 255, .26) 0 11%, transparent 12%),
        radial-gradient(circle at 74% 72%, rgba(255, 255, 255, .18) 0 17%, transparent 18%),
        linear-gradient(140deg, #1b6ec2 0%, #1c84c6 45%, #1ab394 100%);
    box-shadow: 0 .3rem .85rem rgba(24, 96, 154, .32), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.mem-back::before {
    content: ""; position: absolute; top: 8%; left: 8%; right: 8%; bottom: 8%; border-radius: 9%;
    border: 1.5px dashed rgba(255, 255, 255, .38); pointer-events: none;
}
.mem-back::after {
    content: ""; width: 46%; height: 46%;
    background: url("../img/TB-logo-256x256.png") center / contain no-repeat;
    filter: drop-shadow(0 2px 6px rgba(10, 40, 80, .35)); pointer-events: none;
}
.mem-front {
    transform: rotateY(180deg) translateZ(1px); background: linear-gradient(180deg, #fff 0%, #f7fafd 100%);
    box-shadow: 0 .3rem .85rem rgba(31, 41, 55, .16), inset 0 0 0 1.5px rgba(28, 132, 198, .16);
}
.mem-front img { width: 78%; height: 78%; object-fit: contain; pointer-events: none; }
.mem-card.matched .mem-front {
    background: linear-gradient(180deg, #f2fffb 0%, #e1faf1 100%);
    box-shadow: 0 0 0 .22rem var(--expo-good), 0 .35rem .95rem rgba(10, 207, 151, .28);
}
.mem-card.matched .mem-front::after {
    content: "\2713"; position: absolute; top: 6%; right: 6%; width: 18cqmin; height: 18cqmin; min-width: 1.1rem; min-height: 1.1rem;
    border-radius: 999px; background: var(--expo-good); color: #fff; font-weight: 900; font-size: 11cqmin;
    display: grid; place-items: center; line-height: 1; box-shadow: 0 2px 5px rgba(10, 207, 151, .45);
}
.mem-card.matched .mem-inner { animation: mem-pop .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes mem-pop { 0% { transform: rotateY(180deg) scale(1); } 50% { transform: rotateY(180deg) scale(1.1); } 100% { transform: rotateY(180deg) scale(1); } }
.mem-card.mismatch .mem-front {
    background: linear-gradient(180deg, #fff5f6 0%, #ffe6e9 100%);
    box-shadow: 0 0 0 .22rem var(--expo-bad), 0 .3rem .9rem rgba(237, 85, 101, .32);
}
.mem-card.mismatch .mem-front img { animation: mem-shake .36s ease; }
@keyframes mem-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8%); }
    50% { transform: translateX(8%); }
    75% { transform: translateX(-5%); }
}

/* Jigsaw */
.jig-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: 100%; }
.jig-wrap.landscape { flex-direction: row; }
.jig-board { position: relative; flex: none; touch-action: none; border-radius: .9rem; overflow: hidden; background: var(--expo-line); box-shadow: 0 .6rem 1.4rem rgba(31, 41, 55, .18); }
.jig-tile { position: absolute; top: 0; left: 0; background-repeat: no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); transition: transform .25s ease; touch-action: none; }
.jig-tile.selected { box-shadow: inset 0 0 0 .28rem var(--expo-warn); z-index: 5; }
.jig-tile.dragging { transition: none; z-index: 10; box-shadow: 0 .7rem 1.5rem rgba(0, 0, 0, .35), inset 0 0 0 2px #fff; opacity: .95; }
.jig-peek { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 20; }
.jig-peek.show { opacity: .88; }
.jig-side { display: flex; flex-direction: column; align-items: center; gap: .65rem; text-align: center; }
.jig-wrap.landscape .jig-side { width: 14rem; }
.jig-help { margin: 0; color: var(--expo-muted); font-size: .9rem; }
.jig-actions { display: flex; align-items: center; gap: .75rem; }
.btn-soft { border: 2px solid var(--expo-line); background: var(--expo-surface); border-radius: .9rem; padding: .6rem 1.2rem; font-weight: 700; color: var(--expo-secondary); }
.btn-soft:disabled { opacity: .5; }

/* Crossword */
.cw-layout { display: flex; flex-direction: column; gap: 1rem; width: 100%; min-height: 100%; }
.cw-layout.landscape { flex-direction: row; height: 100%; min-height: 0; }
.cw-main { display: flex; flex-direction: column; align-items: center; gap: .75rem; min-width: 0; }
.cw-layout.landscape .cw-main { flex: none; justify-content: center; }
.cw-side { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.cw-layout.landscape .cw-side { flex: 1; overflow-y: auto; padding-right: .25rem; }
.cw-clue-bar {
    position: sticky; top: 0; z-index: 15; width: 100%; padding: .65rem .9rem; border-radius: .9rem; background: var(--expo-secondary); color: #fff;
    min-height: 3.2rem; font-size: 1rem; line-height: 1.3; box-shadow: 0 .4rem .9rem rgba(28, 132, 198, .3);
}
.cw-clue-bar b { margin-right: .4rem; color: #d7f8ef; }
.cw-grid { display: grid; gap: 2px; width: max-content; }
.cw-cell { position: relative; background: transparent; }
.cw-cell.playable { background: var(--expo-surface); border-radius: .25rem; box-shadow: 0 1px 3px rgba(31, 41, 55, .25); }
.cw-cell.hl { background: #cfe6f7; }
.cw-cell.active { background: #ffe29a; }
.cw-num { position: absolute; top: 1px; left: 3px; font-size: .62rem; font-weight: 700; color: var(--expo-muted); pointer-events: none; line-height: 1; }
.cw-input { width: 100%; height: 100%; border: 0; background: transparent; text-align: center; text-transform: uppercase; font-weight: 800; color: #1f2937; padding: .3em 0 0; outline: none; caret-color: transparent; border-radius: .25rem; -webkit-user-select: text; user-select: text; font-size: inherit; }
.cw-lists { display: grid; gap: 1rem; }
.cw-layout.landscape .cw-lists { gap: 1.25rem; }
.cw-lists h3 { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--expo-muted); margin: 0 0 .4rem; }
.cw-clue { display: block; width: 100%; text-align: left; border: 1px solid var(--expo-line); background: var(--expo-surface); border-radius: .75rem; padding: .6rem .8rem; margin-bottom: .4rem; font-size: .95rem; }
.cw-clue.active { background: #cfe6f7; border-color: #9fcdea; }
.cw-clue b { color: var(--expo-secondary); margin-right: .4rem; }
.cw-submit .btn-primary-xl { width: 100%; padding: .95rem; font-size: 1.1rem; }

/* Guess Our Client */
.gc-layout { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; width: 100%; height: 100%; overflow-y: auto; }
.gc-layout.landscape { flex-direction: row; align-items: center; gap: 1.5rem; overflow-y: hidden; }
.gc-panel {
    display: flex; flex-direction: column; gap: .55rem; width: 100%; min-width: 0; flex: none;
    background: var(--expo-surface); border: 1px solid var(--expo-line); border-radius: 1.25rem;
    padding: clamp(.65rem, 1.6vmin, 1.15rem); box-shadow: var(--expo-shadow);
}
.gc-layout.landscape .gc-panel { flex: 1; max-width: 26rem; }
.gc-head { display: flex; flex-direction: column; gap: .3rem; }
.gc-badges { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.gc-badge {
    display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px;
    font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(28, 132, 198, .12); color: var(--expo-secondary); font-variant-numeric: tabular-nums;
}
.gc-badge-good { background: rgba(10, 207, 151, .14); color: #099a6e; }
.gc-prompt { font-weight: 800; font-size: clamp(.88rem, .82rem + .3vw, 1.08rem); color: var(--expo-ink); line-height: 1.2; }
.gc-viewport {
    position: relative; flex: none; overflow: hidden; border-radius: 1.5rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(26, 179, 148, .22) 0%, rgba(28, 132, 198, .14) 38%, rgba(15, 23, 42, 0) 70%),
        radial-gradient(circle at 20% 18%, rgba(56, 189, 248, .14) 0%, transparent 45%),
        linear-gradient(145deg, #0d1b2e 0%, #132844 55%, #0f2038 100%);
    box-shadow: 0 .8rem 2.2rem rgba(13, 27, 46, .35), inset 0 0 0 1px rgba(255, 255, 255, .1);
    -webkit-user-select: none; user-select: none;
}
.gc-orbit { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: opacity .55s ease, transform .55s ease; }
.gc-orbit.off { opacity: 0; transform: scale(.94); }
.gc-hub {
    position: absolute; top: 50%; left: 50%; width: 13%; height: 13%; transform: translate(-50%, -50%);
    border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #2dd4bf, #1c84c6 75%);
    color: #fff; font-weight: 900; font-size: clamp(1rem, 3vmin, 1.6rem);
    box-shadow: 0 0 1.4rem rgba(26, 179, 148, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
    animation: gc-hub-pulse 2.4s ease-in-out infinite; pointer-events: none;
}
@keyframes gc-hub-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 1.2rem rgba(26, 179, 148, .5), 0 0 0 0 rgba(26, 179, 148, .4); }
    50% { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 1.8rem rgba(26, 179, 148, .75), 0 0 0 10px rgba(26, 179, 148, 0); }
}
.gc-ring {
    position: absolute; top: 50%; left: 50%; border-radius: 50%;
    border: 1px dashed rgba(148, 197, 248, .22); box-sizing: border-box;
    animation: gc-spin 10s linear infinite; will-change: transform;
}
@keyframes gc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.gc-tile {
    position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
    background: #fff; border-radius: 26%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.gc-tile img { width: 100%; height: 100%; object-fit: contain; padding: 12%; box-sizing: border-box; pointer-events: none; }
.gc-orbit.frozen .gc-ring { animation-play-state: paused; }
.gc-orbit.still, .gc-orbit.still .gc-ring { animation: none; transition: none; }
.gc-focus {
    position: absolute; display: grid; place-items: center; background: #fff; border-radius: 11%;
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .48), 0 0 2.2rem rgba(26, 179, 148, .35);
    will-change: transform; z-index: 2;
}
.gc-focus img { width: 100%; height: 100%; object-fit: contain; padding: 10%; box-sizing: border-box; pointer-events: none; }
.gc-focus.ring::after { content: ""; position: absolute; top: -4%; left: -4%; right: -4%; bottom: -4%; border-radius: 13%; border: 3.5px solid var(--expo-primary); animation: gc-ring 1.1s ease-in-out infinite; }
@keyframes gc-ring { 0% { box-shadow: 0 0 0 0 rgba(26, 179, 148, .65); } 100% { box-shadow: 0 0 0 14px rgba(26, 179, 148, 0); } }
.gc-options { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; min-height: 6.8rem; align-content: start; }
.gc-layout.landscape .gc-options { grid-template-columns: 1fr; min-height: 0; }
.gc-option {
    display: flex; align-items: center; gap: .55rem; text-align: left; cursor: pointer;
    border: 2px solid var(--expo-line); background: var(--expo-surface); border-radius: .85rem; padding: .55rem .65rem; min-height: 3.1rem; font-weight: 700; font-size: clamp(.85rem, .8rem + .3vw, 1.08rem);
    opacity: 0; transform: translateY(.75rem); animation: gc-opt-in .35s ease forwards;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
@keyframes gc-opt-in { to { opacity: 1; transform: none; } }
@media (hover: hover) { .gc-option:hover:not(:disabled) { border-color: var(--expo-secondary); box-shadow: 0 .25rem .7rem rgba(28, 132, 198, .14); } }
.gc-option:active:not(:disabled) { transform: scale(.97); }
.gc-key {
    flex: none; width: 1.65rem; height: 1.65rem; border-radius: .5rem; display: grid; place-items: center;
    background: rgba(28, 132, 198, .12); color: var(--expo-secondary); font-weight: 800; font-size: .82rem;
    transition: background-color .2s ease, color .2s ease;
}
.gc-opt-label {
    flex: 1; min-width: 0; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gc-option.correct { background: rgba(10, 207, 151, .16); border-color: var(--expo-good); }
.gc-option.correct .gc-key { background: var(--expo-good); color: #fff; }
.gc-option.wrong { background: rgba(237, 85, 101, .13); border-color: var(--expo-bad); animation: shake .4s ease; opacity: 1; transform: none; }
.gc-option.wrong .gc-key { background: var(--expo-bad); color: #fff; }
.gc-timer { width: 100%; }
.gc-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; place-content: center; text-align: center; color: rgba(255, 255, 255, .75); background: #0f2038; z-index: 5; }

/* Jigsaw: placement cue and counters */
.jig-tile::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 0 .16rem rgba(10, 207, 151, .95); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.jig-tile::before { content: "\2713"; position: absolute; top: .2rem; right: .2rem; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: rgba(10, 207, 151, .95); color: #fff; font-size: .75rem; font-weight: 800; line-height: 1.15rem; text-align: center; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .3s ease; pointer-events: none; z-index: 1; }
.jig-tile.placed::after { opacity: 1; }
.jig-tile.placed::before { opacity: 1; transform: none; }
.jig-tile.dragging::after, .jig-tile.dragging::before { opacity: 0; }
.jig-placed { font-weight: 700; color: var(--expo-good); font-variant-numeric: tabular-nums; }