/* =====================================================================
   Tennis Challenge 3D — styles
   Designed for a large touch screen: everything is sized in vmin so it
   stays readable from several meters away at any resolution.
   ===================================================================== */
:root {
    --blue: #1b6fd1;
    --blue-dark: #0f4a96;
    --green: #3cc45a;
    --yellow: #ffe14d;
    --pink: #ff4fb4;
    --red: #ff4a4a;
    --white: #ffffff;
    --ink: #0e2442;
    --panel: rgba(255, 255, 255, 0.94);
    --font: "Segoe UI", "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body, canvas {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #9fd8ff;
    font-family: var(--font);
    color: var(--ink);
}

body.hide-cursor:not(.mouse-mode), body.hide-cursor:not(.mouse-mode) * { cursor: none !important; }
body.hide-cursor.mouse-mode #game-container { cursor: crosshair; }

#app, #game-container {
    position: fixed;
    inset: 0;
}

#game-container canvas { display: block; width: 100%; height: 100%; }

#swipe-canvas, #fx-layer, #flash {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#swipe-canvas { z-index: 5; }
#fx-layer { z-index: 6; overflow: hidden; }
#flash { z-index: 7; background: #fff; opacity: 0; }

/* ------------------------------------------------------------------ HUD */
#hud {
    position: fixed;
    top: 1.6vmin;
    left: 50%;
    transform: translate(-50%, -150%);
    z-index: 10;
    display: flex;
    align-items: stretch;
    gap: 1vmin;
    /* Always fits between the two corner buttons, never overlaps them. */
    max-width: calc(100vw - 28vmin);
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(.2, 1.4, .4, 1);
}
#hud { transform-origin: 50% 0; }
body.hud-off #hud { display: none !important; }                 /* admin → Personalización → Marcador en pantalla */
#hud.visible { transform: translate(-50%, 0) scale(calc(0.85 * var(--hud-k, 1))); }      /* a little smaller: the game shows more */

.hud-box {
    flex: 0 1 auto;               /* grows with its content, never clips numbers */
    min-width: 11vmin;
    padding: 0.8vmin 1.8vmin 1vmin;
    background: #ffffff;          /* solid: nothing from the scene shows through */
    color: #0e2442;
    border-radius: 1.8vmin;
    box-shadow: 0 0.5vmin 0 rgba(10, 40, 80, 0.3), 0 0.8vmin 2.4vmin rgba(0, 0, 0, 0.18);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}
.hud-label { font-size: 1.7vmin; font-weight: 800; letter-spacing: 0.18em; color: var(--blue); white-space: nowrap; }
.hud-value {
    font-size: 4.6vmin; font-weight: 900; margin-top: 0.5vmin; white-space: nowrap;
    font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.hud-sub { font-size: 1.5vmin; font-weight: 900; letter-spacing: 0.12em; margin-top: 0.4vmin; white-space: nowrap; }
.hud-sub[data-difficulty="easy"] { color: #1d8a3a; }
.hud-sub[data-difficulty="medium"] { color: #b27a00; }
.hud-sub[data-difficulty="hard"] { color: #c02238; }
.hud-score { min-width: 18vmin; background: var(--blue); color: #fff; }
.hud-score .hud-label { color: var(--yellow); }
#hud-score.bump { animation: bump 0.25s ease-out; }
#hud-time-box.warning .hud-value { color: var(--red); animation: pulse 0.5s infinite alternate; }
#hud-combo { transition: transform 0.2s, background 0.2s; }
#hud-combo:not(.visible) .hud-value { color: #b9c4d4; }
#hud-combo.visible { background: var(--yellow); }
#hud-combo.super { background: linear-gradient(135deg, var(--pink), var(--yellow)); color: #fff; transform: scale(1.08); }
#hud-combo.super .hud-label { color: #fff; }

@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pulse { from { opacity: 1; } to { opacity: 0.5; } }

/* ------------------------------------------------------- corner buttons */
#corner-buttons { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.corner-btn {
    position: absolute;
    top: 2vmin;
    width: 9vmin;
    height: 9vmin;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0.5vmin 0 rgba(10, 40, 80, 0.25);
    pointer-events: auto;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.corner-btn svg { width: 55%; height: 55%; fill: var(--blue); stroke: var(--blue); }
.corner-btn.pressed { transform: scale(0.9); }
#btn-pause { left: 2vmin; display: none; }
#btn-fullscreen { right: 2vmin; }
body[data-state="PLAYING"] #btn-pause { display: grid; }
body[data-state="PLAYING"] #btn-fullscreen { opacity: 0.55; }

/* MENU pill (top-left) during countdown and game over: stops the auto-restart. */
.corner-pill {
    position: absolute; top: 2.4vmin; left: 2vmin;
    display: none;
    border: none; border-radius: 5vmin;
    padding: 1.6vmin 3.6vmin;
    background: rgba(255, 255, 255, 0.92); color: var(--blue);
    font-family: var(--font); font-weight: 900; font-size: 3vmin; letter-spacing: 0.08em;
    box-shadow: 0 0.5vmin 0 rgba(10, 40, 80, 0.25);
    pointer-events: auto; cursor: pointer;
}
.corner-pill.pressed { transform: scale(0.94); }
body[data-state="COUNTDOWN"] .corner-pill,
body[data-state="GAME_OVER"] .corner-pill { display: block; }

/* Buttons switched OFF in the admin panel are removed from the interface. */
.btn-off { display: none !important; }

/* -------------------------------------------------------------- screens */
.screen {
    position: fixed;
    inset: 0;
    z-index: 15;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    pointer-events: none;
}
.screen.visible { opacity: 1; visibility: visible; }
.screen.visible .panel { pointer-events: auto; }
#screen-loading, #screen-menu, #screen-howto, #screen-pause, #screen-results {
    background: radial-gradient(ellipse at center, rgba(10, 60, 130, 0.25), rgba(10, 40, 90, 0.55));
}
#screen-loading.visible, #screen-menu.visible, #screen-howto.visible, #screen-pause.visible, #screen-results.visible { pointer-events: auto; }
#screen-loading { background: linear-gradient(#5db6f5, #bfe7ff); }

.panel {
    background: var(--panel);
    border-radius: 4vmin;
    padding: 4.5vmin 7vmin;
    text-align: center;
    box-shadow: 0 1.2vmin 0 rgba(10, 40, 80, 0.25), 0 3vmin 8vmin rgba(0, 0, 0, 0.25);
    max-width: 92vw;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(.2, 1.5, .4, 1);
}
.screen.visible .panel { transform: scale(1); }

.title {
    margin: 0 0 1vmin;
    font-size: 9vmin;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--blue);
    text-shadow: 0 0.6vmin 0 var(--blue-dark), 0 1.2vmin 2vmin rgba(0, 0, 0, 0.2);
    -webkit-text-stroke: 0.2vmin #fff;
    line-height: 1;
}
h2 { margin: 0 0 2.5vmin; font-size: 7vmin; font-weight: 900; color: var(--blue); }
.tagline { font-size: 3vmin; font-weight: 700; margin: 0 0 3.5vmin; color: #35507a; }
.subtle { font-size: 2.2vmin; font-weight: 700; letter-spacing: 0.2em; color: #6b83a6; margin: 1.5vmin 0 0; }
#loading-error { color: var(--red); font-weight: 700; font-size: 2.4vmin; max-width: 70vmin; }

.logo-ball {
    width: 12vmin; height: 12vmin; margin: -11vmin auto 1.5vmin;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fbff9b, #d9ec1e 55%, #a8bd0c);
    box-shadow: 0 1.2vmin 2vmin rgba(0, 0, 0, 0.25);
    position: relative;
    animation: floaty 1.6s ease-in-out infinite;
}
.logo-ball::before, .logo-ball::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 0.8vmin solid rgba(255, 255, 255, 0.9);
    clip-path: inset(0 55% 0 0);
    transform: translateX(-38%);
}
.logo-ball::after { clip-path: inset(0 0 0 55%); transform: translateX(38%); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5vmin); } }

.loading-track { width: 60vmin; height: 2.4vmin; background: #d7e6f7; border-radius: 2vmin; overflow: hidden; margin: 3vmin auto 0; }
#loading-bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--green), var(--yellow)); transition: width 0.2s; }

/* -------------------------------------------------------------- buttons */
.btn {
    border: none;
    border-radius: 3vmin;
    font-family: var(--font);
    font-weight: 900;
    font-size: 3.6vmin;
    letter-spacing: 0.05em;
    padding: 2vmin 5vmin;
    cursor: pointer;
    color: #fff;
    transition: transform 0.08s;
    touch-action: manipulation;
}
.btn.pressed { transform: translateY(0.6vmin) scale(0.97); box-shadow: none !important; }
.btn-primary { background: linear-gradient(#4fdc6a, #22a845); box-shadow: 0 1vmin 0 #17803a; }
.btn-secondary { background: linear-gradient(#3d8fe8, #1b6fd1); box-shadow: 0 0.8vmin 0 var(--blue-dark); font-size: 3vmin; }
.btn-huge { font-size: 6.5vmin; padding: 2.6vmin 11vmin; border-radius: 4vmin; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.menu-row { display: flex; gap: 2vmin; justify-content: center; margin-top: 3vmin; }

.menu-panel .logo-ball { cursor: pointer; transition: box-shadow 3s linear; }
.menu-panel .logo-ball.holding { box-shadow: 0 0 0 1.4vmin rgba(27, 111, 209, 0.6), 0 1.2vmin 2vmin rgba(0, 0, 0, 0.25); }

/* ----------------------------------------------- menu selectors */
.menu-panel { padding-top: 3vmin; padding-bottom: 3.5vmin; }
.menu-panel .logo-ball { width: 7vmin; height: 7vmin; margin-top: -5.5vmin; margin-bottom: 0.6vmin; }
.menu-panel .title { font-size: 8vmin; }
.menu-panel .tagline { margin-bottom: 1.5vmin; }
.menu-panel .btn-huge { margin-top: 2.6vmin; }
.menu-panel .menu-row { margin-top: 2vmin; }
.select-group { margin-top: 1.4vmin; }
.select-group .subtle { display: block; margin: 0 0 0.8vmin; }
.chip-row { display: flex; gap: 1.2vmin; justify-content: center; flex-wrap: wrap; }
.chip {
    border: 0.4vmin solid var(--blue); background: #fff; color: var(--blue);
    font-family: var(--font); font-weight: 900; font-size: 2.6vmin;
    border-radius: 3vmin; padding: 0.8vmin 2.6vmin; cursor: pointer;
}
.chip.active { background: var(--blue); color: #fff; }
.chip-big { font-size: 3.2vmin; padding: 1.2vmin 4vmin; min-width: 18vmin; }

/* ----------------------------------------------- game cards (dynamic) */
.game-cards { display: grid; gap: 1.6vmin; justify-content: center; margin: 0 auto; max-width: 86vw; }
.game-card {
    --card-color: #1b6fd1;
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vmin;
    border: 0.5vmin solid transparent; border-radius: 2.6vmin; cursor: pointer;
    background: linear-gradient(145deg, var(--card-color), color-mix(in srgb, var(--card-color) 60%, #000));
    background-size: cover; background-position: center;
    color: #fff; font-family: var(--font); padding: 1.4vmin 2vmin; overflow: hidden;
    box-shadow: 0 0.8vmin 0 color-mix(in srgb, var(--card-color) 55%, #000), 0 1.4vmin 2.4vmin rgba(0, 0, 0, 0.2);
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
    touch-action: pan-x;
}
.game-card .game-icon { font-size: 5.5vmin; line-height: 1; filter: drop-shadow(0 0.4vmin 0.6vmin rgba(0, 0, 0, 0.3)); }
.game-card .game-name {
    font-size: 3vmin; font-weight: 900; letter-spacing: 0.04em; line-height: 1.05; text-align: center;
    text-shadow: 0 0.3vmin 0.8vmin rgba(0, 0, 0, 0.45);
}
.game-card.has-image { justify-content: flex-end; }
.game-card.active { border-color: #fff; outline: 0.6vmin solid var(--card-color); transform: translateY(-0.4vmin) scale(1.03); }
.game-card:not(.active) { filter: saturate(0.75) brightness(0.92); }
.game-card:active { transform: scale(0.97); }

/* 1 game: one big card */
.game-cards.count-1 { grid-template-columns: 44vmin; }
.game-cards.count-1 .game-card { height: 17vmin; flex-direction: row; gap: 2vmin; }
.game-cards.count-1 .game-card .game-name { font-size: 4.4vmin; }
/* 2-3 games: one row */
.game-cards.count-2 { grid-template-columns: repeat(2, 30vmin); }
.game-cards.count-3 { grid-template-columns: repeat(3, 25vmin); }
.game-cards.count-2 .game-card, .game-cards.count-3 .game-card { height: 17vmin; }
/* 4 games: 2x2 grid, horizontal cards to keep it short */
.game-cards.count-4 { grid-template-columns: repeat(2, 32vmin); gap: 1.2vmin 1.6vmin; }
.game-cards.count-4 .game-card { height: 10.5vmin; flex-direction: row; gap: 1.6vmin; }
.game-cards.count-4 .game-card .game-icon { font-size: 4.4vmin; }
/* 5+ games: a grid with every game in view (--cols / --rows come from the number of games) */
.game-cards.grid {
    --h: clamp(7.5vmin, calc(31vmin / var(--rows, 3)), 14vmin);
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 26vmin)); gap: 1.2vmin 1.4vmin; padding: 0.8vmin; max-width: min(92vw, 118vmin);
}
.game-cards.grid .game-card { height: var(--h); border-radius: 2vmin; padding: 0.8vmin 1.2vmin; touch-action: manipulation; }
.game-cards.grid .game-card .game-icon { font-size: calc(var(--h) * 0.36); }
.game-cards.grid .game-card .game-name { font-size: clamp(1.7vmin, calc(var(--h) * 0.2), 2.8vmin); }
.no-games { font-size: 3vmin; font-weight: 800; color: #c02238; margin: 1vmin 0 0; }
.btn:disabled { filter: grayscale(1); opacity: 0.5; animation: none; }
.diff-easy { border-color: #22a845; color: #1d8a3a; }
.diff-easy.active { background: #22a845; color: #fff; }
.diff-medium { border-color: #f0a500; color: #b27a00; }
.diff-medium.active { background: #f0a500; color: #fff; }
.diff-hard { border-color: #e0344b; color: #c02238; }
.diff-hard.active { background: #e0344b; color: #fff; }

/* ----------------------------------------------- client branding */
.brand-logo { display: block; max-width: 40vmin; max-height: 13vmin; margin: -2vmin auto 1.4vmin; object-fit: contain; }
.brand-logo-small { max-height: 8vmin; margin: 0 auto 0.6vmin; }
body.has-logo .menu-panel .logo-ball { display: none; }
[data-admin-hold].holding { outline: 0.6vmin solid rgba(27, 111, 209, 0.5); outline-offset: 0.6vmin; border-radius: 2vmin; }
#brand-watermark {
    position: fixed; right: 2vmin; bottom: 2vmin; z-index: 9;
    max-width: 18vmin; max-height: 9vmin; object-fit: contain;
    opacity: 0.9; pointer-events: none; display: none;
    filter: drop-shadow(0 0.4vmin 0.8vmin rgba(0, 0, 0, 0.35));
}
body.logo-in-game[data-state="PLAYING"] #brand-watermark,
body.logo-in-game[data-state="COUNTDOWN"] #brand-watermark { display: block; }

/* ----------------------------------------------- per-game content */
body:not([data-mode="tennis"]) .only-tennis,
body:not([data-mode="targets"]) .only-targets { display: none !important; }

/* Throw demo: a ball flies into a bullseye */
.tut-throw { position: relative; display: block; width: 36vmin; height: 20vmin; margin: 0 auto 1vmin; }
.tut-target {
    position: absolute; right: 2vmin; top: 1vmin; width: 13vmin; height: 13vmin; border-radius: 50%;
    background: radial-gradient(circle, #b0127a 0 12%, #fff 12% 22%, #f04fb4 22% 42%, #fff 42% 52%, #e0249a 52% 66%, #fff 66% 72%, transparent 73%);
    filter: drop-shadow(0 0.8vmin 1vmin rgba(0, 0, 0, 0.3));
    animation: tutTargetHit 1.4s ease-in-out infinite;
}
.tut-ball {
    position: absolute; left: 2vmin; bottom: 0; width: 7vmin; height: 7vmin; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fbff9b, #d9ec1e 60%, #a8bd0c);
    box-shadow: 0 0.6vmin 1vmin rgba(0, 0, 0, 0.3);
    animation: tutBallThrow 1.4s cubic-bezier(.3, .1, .6, 1) infinite;
}
@keyframes tutBallThrow {
    0% { transform: translate(0, 0) scale(1.3); opacity: 0; }
    10% { opacity: 1; }
    55% { transform: translate(22vmin, -10vmin) scale(0.7); opacity: 1; }
    65%, 100% { transform: translate(22vmin, -10vmin) scale(0.5); opacity: 0; }
}
@keyframes tutTargetHit { 0%, 50% { transform: scale(1); } 58% { transform: scale(1.25); } 70%, 100% { transform: scale(1); } }
.howto-demo.tut-throw { height: 18vmin; margin-bottom: 2vmin; }

/* Ball impact on the wall */
.impact-ripple {
    position: absolute; width: 12vmin; height: 12vmin; margin: -6vmin 0 0 -6vmin;
    border-radius: 50%; border: 0.9vmin solid #fff; pointer-events: none;
    animation: ripple 0.6s ease-out forwards;
}
.impact-ripple.hit { border-color: var(--yellow); box-shadow: 0 0 3vmin rgba(255, 225, 77, 0.8); }
.impact-ripple.miss { border-color: rgba(255, 255, 255, 0.85); }
@keyframes ripple { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

.hud-box.goal-done { background: var(--green); color: #fff; }
.hud-box.goal-done .hud-label { color: #eaffea; }

/* ----------------------------------------------- auto restart */
.res-meta { font-size: 2.6vmin; font-weight: 900; letter-spacing: 0.15em; color: var(--pink); margin: -0.5vmin 0 1vmin; }
.restart-bar { height: 1.4vmin; width: 60%; margin: 0 auto 1vmin; background: #d7e6f7; border-radius: 1vmin; overflow: hidden; visibility: hidden; }
.restart-bar.visible { visibility: visible; }
#restart-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--yellow)); }
.restart-text { font-size: 2.6vmin; font-weight: 800; color: #35507a; margin: 0 0 1.6vmin; min-height: 3vmin; }

/* -------------------------------------------------------------- how to */
.howto-panel { max-width: 110vmin; }
.howto-demo { position: relative; height: 22vmin; margin-bottom: 2vmin; }
.demo-ball {
    position: absolute; left: 50%; top: 2vmin; width: 7vmin; height: 7vmin; margin-left: -3.5vmin;
    border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbff9b, #d9ec1e 60%, #a8bd0c);
    box-shadow: 0 0 0 1vmin rgba(255, 240, 90, 0.5);
    animation: demoBall 2s ease-in-out infinite;
}
.demo-finger { position: absolute; left: 50%; top: 12vmin; font-size: 9vmin; margin-left: -4vmin; animation: demoFinger 2s ease-in-out infinite; }
@keyframes demoBall { 0%, 45% { transform: translate(0, 0) scale(1); } 60% { transform: translate(10vmin, -6vmin) scale(0.6); opacity: 1; } 100% { transform: translate(24vmin, -14vmin) scale(0.2); opacity: 0; } }
@keyframes demoFinger { 0%, 30% { transform: translate(-6vmin, 4vmin); opacity: 0.4; } 50% { transform: translate(6vmin, -6vmin); opacity: 1; } 100% { transform: translate(6vmin, -6vmin); opacity: 0; } }
.howto-steps { text-align: left; font-size: 3.2vmin; font-weight: 600; line-height: 1.5; margin: 0 auto; padding-left: 4vmin; max-width: 90vmin; }
.howto-steps b { color: var(--blue); }
.mouse-tip { display: none; font-size: 2.6vmin; color: #6b83a6; }
body.mouse-mode .mouse-tip { display: list-item; }

/* -------------------------------------------------- tutorial + countdown */
#tutorial {
    position: absolute; left: 50%; top: 58%;
    transform: translate(-50%, -50%) scale(0.8);
    text-align: center; opacity: 0; transition: opacity 0.25s, transform 0.3s;
}
#tutorial.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tut-gesture { position: relative; font-size: 14vmin; height: 18vmin; }
.tut-finger { display: inline-block; animation: tutFinger 1.1s ease-in-out infinite; filter: drop-shadow(0 1vmin 1vmin rgba(0, 0, 0, 0.3)); }
.tut-arrow { position: absolute; left: 58%; top: -6vmin; color: var(--yellow); font-weight: 900; -webkit-text-stroke: 0.4vmin var(--ink); animation: tutArrow 1.1s ease-in-out infinite; }
.tut-text {
    display: inline-block; margin-top: 2vmin; font-size: 7vmin; font-weight: 900; color: #fff; white-space: nowrap;
    background: var(--blue); padding: 1.5vmin 5vmin; border-radius: 3vmin;
    box-shadow: 0 1vmin 0 var(--blue-dark);
}
@keyframes tutFinger { 0% { transform: translate(-6vmin, 5vmin); opacity: 0.3; } 60% { transform: translate(6vmin, -5vmin); opacity: 1; } 100% { transform: translate(8vmin, -7vmin); opacity: 0; } }
@keyframes tutArrow { 0%, 30% { opacity: 0; transform: translate(-2vmin, 2vmin); } 70% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; } }

#count-number {
    font-size: 30vmin; font-weight: 900; color: #fff;
    -webkit-text-stroke: 0.8vmin var(--blue);
    text-shadow: 0 2vmin 0 var(--blue-dark), 0 3vmin 5vmin rgba(0, 0, 0, 0.3);
    opacity: 0;
}
#count-number.pop { animation: countPop 0.8s ease-out forwards; }
#count-number.go { color: var(--yellow); }
@keyframes countPop { 0% { transform: scale(2.2); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 75% { opacity: 1; } 100% { transform: scale(0.8); opacity: 0; } }

.gameover-text {
    font-size: 20vmin; font-weight: 900; color: var(--yellow);
    -webkit-text-stroke: 0.7vmin var(--ink);
    text-shadow: 0 2vmin 0 rgba(0, 0, 0, 0.25);
    animation: countPop 1.8s ease-out forwards;
}

/* -------------------------------------------------------------- results */
.results-panel { min-width: 80vmin; padding-top: 2.5vmin; padding-bottom: 2.5vmin; }
.results-panel h2 { margin-bottom: 0.6vmin; font-size: 5.2vmin; }
.results-panel .btn-huge { font-size: 4.8vmin; padding: 1.8vmin 8vmin; }
.results-panel .menu-row { margin-top: 1.6vmin; }
.results-panel .res-score { font-size: 10vmin; }
.results-panel .res-grid { margin-bottom: 1.6vmin; }
.results-panel .res-item b { font-size: 4.2vmin; }
.res-score-label { font-size: 2.4vmin; font-weight: 800; letter-spacing: 0.3em; color: #6b83a6; }
.res-score { font-size: 12vmin; font-weight: 900; color: var(--blue); line-height: 1; text-shadow: 0 0.8vmin 0 rgba(15, 74, 150, 0.25); }
.res-newbest { font-size: 3vmin; font-weight: 900; color: var(--pink); visibility: hidden; margin: 0.5vmin 0 1vmin; }
.res-newbest.visible { visibility: visible; animation: pulse 0.5s infinite alternate; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4vmin; margin: 0.5vmin 0 3vmin; }
.res-item { background: #eaf3ff; border-radius: 2vmin; padding: 1.4vmin 2vmin; display: flex; flex-direction: column; }
.res-item span { font-size: 1.9vmin; font-weight: 800; letter-spacing: 0.15em; color: #6b83a6; }
.res-item b { font-size: 5vmin; font-weight: 900; color: var(--ink); }

/* ------------------------------------------------------- floating text */
.float-text {
    position: absolute; left: 0; top: 0;
    font-weight: 900; white-space: nowrap; pointer-events: none;
    -webkit-text-stroke: 0.35vmin var(--ink);
    text-shadow: 0 0.6vmin 0 rgba(0, 0, 0, 0.25);
    will-change: transform, opacity;
}
.float-score { font-size: 6vmin; color: var(--yellow); }
.float-word { font-size: 5.5vmin; color: #fff; }
.float-bad { font-size: 5vmin; color: #ffd0d0; -webkit-text-stroke-color: #7a1020; }
.float-big { font-size: 10vmin; color: var(--yellow); }

.big-word {
    position: absolute; left: 50%; top: 40%;
    transform: translate(-50%, -50%);
    font-size: 12vmin; font-weight: 900; white-space: nowrap; pointer-events: none;
    -webkit-text-stroke: 0.6vmin var(--ink);
    text-shadow: 0 1.2vmin 0 rgba(0, 0, 0, 0.25);
    animation: bigWord 1s ease-out forwards;
}
.big-perfect { color: var(--yellow); }
.big-combo { color: #fff; top: 30%; font-size: 10vmin; }
.big-super { color: var(--pink); top: 30%; }
.big-bad { color: #ffb3b3; -webkit-text-stroke-color: #6b0d1c; top: 75%; font-size: 9vmin; }
@keyframes bigWord {
    0% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
    25% { transform: translate(-50%, -50%) scale(1.05); }
    70% { transform: translate(-50%, -55%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -70%) scale(1); opacity: 0; }
}

/* ---------------------------------------------------------------- debug */
#debug {
    position: fixed; left: 1vmin; bottom: 1vmin; z-index: 30;
    margin: 0; padding: 1vmin 1.4vmin;
    background: rgba(0, 0, 0, 0.7); color: #7dff9e;
    font: 12px/1.4 Consolas, monospace;
    border-radius: 6px; pointer-events: none;
    display: none; white-space: pre;
}

@media (max-aspect-ratio: 4/3) {
    .hud-box { min-width: 9vmin; padding: 0.7vmin 1.2vmin; }
    .hud-value { font-size: 3.6vmin; }
    .hud-label { font-size: 1.4vmin; letter-spacing: 0.1em; }
}

/* results without buttons (admin → Configuración global → Sistema): the same game restarts by itself */
body.no-result-btns #screen-results [data-action="replay"], body.no-result-btns #screen-results .menu-row, body.no-result-btns #results-idle,
body.no-result-btns #res-meta, body.no-result-btns #res-newbest, body.no-result-btns #screen-results .res-grid, body.no-result-btns #screen-results .restart-text { display: none !important; }     /* only the final score */

/* menu with the games grid: the rest of the panel gets compact so everything fits without scrolling */
.menu-panel:has(.game-cards.grid) { padding-top: 1.6vmin; padding-bottom: 2vmin; }
.menu-panel:has(.game-cards.grid) .title { font-size: 5.6vmin; }
.menu-panel:has(.game-cards.grid) .tagline { font-size: 2.2vmin; margin-bottom: 0.4vmin; }
.menu-panel:has(.game-cards.grid) .select-group { margin-top: 0.8vmin; }
.menu-panel:has(.game-cards.grid) .select-group .subtle { font-size: 1.7vmin; margin-bottom: 0.4vmin; }
.menu-panel:has(.game-cards.grid) .chip-big { font-size: 2.4vmin; padding: 0.8vmin 3vmin; }
.menu-panel:has(.game-cards.grid) .chip { font-size: 2vmin; padding-top: 0.6vmin; padding-bottom: 0.6vmin; }
.menu-panel:has(.game-cards.grid) .btn-huge { font-size: 4.6vmin; padding: 1.6vmin 9vmin; margin-top: 1.6vmin; }
.menu-panel:has(.game-cards.grid) .menu-row { margin-top: 1.2vmin; }