/**
 * Block Blast Builder - Mobile-First Game Styles
 *
 * @file        styles.css
 * @author      Mike Fairbrother <mike@fairbrother.me>
 * @copyright   2024-2026 Mike Fairbrother. All rights reserved.
 * @license     PROPRIETARY - No rights to copy, modify, distribute, or reuse
 *              any part of this code without explicit written permission from the author.
 */

:root {
    --bg-dark: #0f0c29;
    --bg-mid: #1a1640;
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --accent: #ffd93d;
    --accent-glow: rgba(255, 217, 61, 0.4);
    --danger: #ff4757;
    --success: #2ed573;
    --cell-bg: rgba(255, 255, 255, 0.06);
    --cell-radius: 4px;
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --tray-cell: 36px;
    --tray-slot-width: 120px;

    /* Block colors */
    --block-red: #ff4757;
    --block-orange: #ff9f43;
    --block-yellow: #ffd93d;
    --block-green: #2ed573;
    --block-cyan: #00d2ff;
    --block-blue: #5f7cff;
    --block-purple: #a55eea;
    --block-pink: #ff6b9d;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* ---- App container ---- */
#app {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    overflow: hidden;
    background: linear-gradient(170deg, #1a1640 0%, #0f0c29 40%, #1e1245 100%);
}

/* ---- Screen system ---- */
.screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.screen.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}
.screen-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    padding: 40px 24px;
    text-align: center;
    overflow-y: auto;
}

/* ---- Menu Screen ---- */
.game-logo {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
    width: 120px;
}
.logo-block {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    animation: logo-bounce 2s ease-in-out infinite;
}
.logo-block-1 { background: var(--block-red); animation-delay: 0s; }
.logo-block-2 { background: var(--block-cyan); animation-delay: 0.1s; }
.logo-block-3 { background: var(--block-yellow); animation-delay: 0.2s; }
.logo-block-4 { background: var(--block-green); animation-delay: 0.3s; }
.logo-block-5 { background: var(--block-purple); animation-delay: 0.4s; }

@keyframes logo-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.1); }
}

.game-title {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1;
    background: linear-gradient(135deg, #fff 0%, #ffd93d 50%, #ff6b6b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}
.game-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}
.menu-best {
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 24px;
    font-weight: 600;
}

/* ---- Buttons ---- */
.btn {
    display: block;
    width: 220px;
    padding: 16px 32px;
    border: none;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    letter-spacing: 0.5px;
}
.btn:active { transform: scale(0.95); }
.btn-primary {
    background: linear-gradient(135deg, #ffd93d, #ff9f43);
    color: #1a1640;
    box-shadow: 0 4px 20px rgba(255, 217, 61, 0.3);
}
.btn-primary:active { box-shadow: 0 2px 10px rgba(255, 217, 61, 0.2); }
.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    margin-top: 12px;
    font-size: 16px;
    padding: 12px 32px;
}

/* ---- Game Header ---- */
#screen-game { display: flex; flex-direction: column; }

#game-header {
    display: flex;
    align-items: center;
    padding: 10px 12px 6px;
    gap: 8px;
    min-height: 52px;
}
.icon-btn {
    font-size: 22px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}
.stat {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.stat-right { align-items: flex-end; }
.stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.stat-value {
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}
#combo-display {
    opacity: 0;
    transition: opacity 0.2s;
    text-align: center;
}
.combo-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent-glow);
}

/* Multiplier badge */
.multiplier-badge {
    font-size: 18px;
    font-weight: 800;
    color: #1a1640;
    background: linear-gradient(135deg, #ffd93d, #ff9f43);
    padding: 2px 10px;
    border-radius: 10px;
    line-height: 1.3;
    transition: transform 0.2s ease, opacity 0.3s ease;
}
.multiplier-badge.pop {
    animation: multiplier-pop 0.3s ease-out;
}
@keyframes multiplier-pop {
    0%   { transform: scale(0.7); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.multiplier-badge.hot {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    color: #fff;
}

.combo-pop { animation: combo-pop 0.3s ease-out; }
@keyframes combo-pop {
    0% { transform: scale(0.5); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ---- Board ---- */
#board-wrapper {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 8px 0;
    position: relative;
    overflow: hidden;
    min-height: 0;
}
#board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 3px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 6px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
    aspect-ratio: 1;
    width: 100%;
    max-width: 380px;
    max-height: calc(100% - 4px);
    position: relative;
    z-index: 1;
}
.board-cell {
    background: var(--cell-bg);
    border-radius: var(--cell-radius);
    aspect-ratio: 1;
    position: relative;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Placed block */
.board-cell.filled {
    border-radius: 5px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Preview highlights */
.board-cell.preview-valid {
    background: rgba(46, 213, 115, 0.3);
    box-shadow: inset 0 0 8px rgba(46, 213, 115, 0.2);
}
.board-cell.preview-invalid {
    background: rgba(255, 71, 87, 0.25);
    box-shadow: inset 0 0 8px rgba(255, 71, 87, 0.2);
}

/* Clear animation */
.board-cell.clearing {
    animation: cell-clear 0.4s ease-out forwards;
    pointer-events: none;
}
@keyframes cell-clear {
    0%   { transform: scale(1);   opacity: 1; }
    40%  { transform: scale(1.3); opacity: 0.8; }
    100% { transform: scale(0);   opacity: 0; }
}

/* Placement animation */
.board-cell.just-placed {
    animation: cell-place 0.25s ease-out;
}
@keyframes cell-place {
    0%   { transform: scale(0.6); opacity: 0.5; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1);   opacity: 1; }
}

/* Ghost hint (AI suggestion) */
.board-cell.ghost-hint {
    background: rgba(255, 217, 61, 0.3) !important;
    box-shadow: inset 0 0 10px rgba(255, 217, 61, 0.4), 0 0 6px rgba(255, 217, 61, 0.3);
    animation: ghost-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes ghost-pulse {
    0%   { box-shadow: inset 0 0 10px rgba(255, 217, 61, 0.4), 0 0 6px rgba(255, 217, 61, 0.3); }
    100% { box-shadow: inset 0 0 16px rgba(255, 217, 61, 0.6), 0 0 12px rgba(255, 217, 61, 0.5); }
}

/* ---- Streak Glow (fire border around board) ---- */
.streak-glow {
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.streak-glow:not(.hidden) {
    opacity: 1;
    animation: streak-burn 1.2s ease-in-out infinite alternate;
}
.streak-glow[data-level="3"] { box-shadow: 0 0 15px 3px rgba(255, 159, 67, 0.4); }
.streak-glow[data-level="4"] { box-shadow: 0 0 20px 5px rgba(255, 107, 107, 0.5); }
.streak-glow[data-level="5"] { box-shadow: 0 0 25px 6px rgba(255, 71, 87, 0.6); }
.streak-glow[data-level="6"] { box-shadow: 0 0 30px 8px rgba(255, 71, 87, 0.7); }
.streak-glow[data-level="7"] { box-shadow: 0 0 35px 10px rgba(255, 50, 50, 0.8); }
.streak-glow[data-level="8"] { box-shadow: 0 0 40px 12px rgba(255, 30, 30, 0.9), 0 0 60px 20px rgba(255, 100, 0, 0.4); }

@keyframes streak-burn {
    0%   { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.01); filter: brightness(1.15); }
}

/* ---- Freeze visual (icy board) ---- */
#board-wrapper.freeze-active #board {
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 210, 255, 0.4), inset 0 0 40px rgba(0, 210, 255, 0.15);
    border: 2px solid rgba(0, 210, 255, 0.3);
}
#board-wrapper.freeze-active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 210, 255, 0.08) 100%);
    animation: freeze-shimmer 2s ease-in-out infinite alternate;
}
@keyframes freeze-shimmer {
    0%   { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ---- Shape Tray ---- */
#shape-tray {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 8px 14px;
    min-height: 130px;
    flex-shrink: 0;
    touch-action: none;
}

/* ---- Mode Indicator ---- */
.mode-indicator {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    padding: 4px 0;
    background: rgba(255,217,61,0.1);
    border-radius: 8px;
    margin: 0 16px;
}

.shape-option {
    --shape-cell-size: var(--tray-cell);
    display: grid;
    gap: 3px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast),
                background var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    touch-action: none;
    width: min(100%, var(--tray-slot-width));
    min-width: 0;
    justify-content: center;
    align-content: center;
}
.shape-option:active {
    transform: scale(0.95);
}
.shape-option.selected {
    border-color: var(--accent);
    background: rgba(255, 217, 61, 0.08);
    box-shadow: 0 0 16px var(--accent-glow);
    transform: scale(1.05);
}
.shape-option.used {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.shape-cell {
    width: var(--shape-cell-size);
    height: var(--shape-cell-size);
    border-radius: 4px;
}
.shape-cell.filled {
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
.shape-cell.empty {
    background: transparent;
}

/* ---- Special shapes (bomb, color, freeze) ---- */
.special-shape {
    position: relative;
}
.special-shape.special-bomb {
    border-color: rgba(255, 71, 87, 0.5);
    background: rgba(255, 71, 87, 0.1);
    animation: special-glow-bomb 1.5s ease-in-out infinite alternate;
}
.special-shape.special-color {
    border-color: rgba(165, 94, 234, 0.5);
    background: rgba(165, 94, 234, 0.1);
    animation: special-glow-color 1.5s ease-in-out infinite alternate;
}
.special-shape.special-freeze {
    border-color: rgba(0, 210, 255, 0.5);
    background: rgba(0, 210, 255, 0.1);
    animation: special-glow-freeze 1.5s ease-in-out infinite alternate;
}

@keyframes special-glow-bomb {
    0%   { box-shadow: 0 0 8px rgba(255, 71, 87, 0.3); }
    100% { box-shadow: 0 0 16px rgba(255, 71, 87, 0.6); }
}
@keyframes special-glow-color {
    0%   { box-shadow: 0 0 8px rgba(165, 94, 234, 0.3); }
    100% { box-shadow: 0 0 16px rgba(165, 94, 234, 0.6); }
}
@keyframes special-glow-freeze {
    0%   { box-shadow: 0 0 8px rgba(0, 210, 255, 0.3); }
    100% { box-shadow: 0 0 16px rgba(0, 210, 255, 0.6); }
}

.special-cell {
    position: relative;
}
.special-cell-bomb {
    border-radius: 50%;
}
.special-cell-color {
    border-radius: 50%;
    background: conic-gradient(#ff4757, #ff9f43, #ffd93d, #2ed573, #00d2ff, #5f7cff, #a55eea, #ff4757) !important;
}
.special-cell-freeze {
    border-radius: 6px;
}

.special-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

/* ---- Drag Ghost ---- */
.drag-ghost {
    --drag-cell-size: 36px;
    position: fixed;
    display: grid;
    gap: 3px;
    pointer-events: none;
    z-index: 100;
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
    transition: opacity 0.1s ease;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}
.drag-ghost .shape-cell {
    width: var(--drag-cell-size);
    height: var(--drag-cell-size);
    border-radius: 5px;
}
.drag-ghost .shape-cell.filled {
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.drag-ghost .special-icon {
    font-size: 22px;
}
.shape-option.dragging {
    opacity: 0.3;
    transform: scale(0.9);
}

/* ---- Power-up area ---- */
#powerup-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 16px 0;
    flex-shrink: 0;
}
#powerup-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
#powerup-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #a55eea, #ff6b9d);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.powerup-btn {
    background: linear-gradient(135deg, #a55eea, #ff6b9d);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    animation: powerup-pulse 1.5s ease-in-out infinite;
    transition: transform 0.15s ease;
}
.powerup-btn:active {
    transform: scale(0.92);
}
@keyframes powerup-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(165, 94, 234, 0.4); }
    50%      { box-shadow: 0 0 16px rgba(255, 107, 157, 0.6); }
}

/* ---- Power-up overlay ---- */
.powerup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 41, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
.powerup-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
}
.powerup-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 8px;
}
.powerup-choice {
    width: 220px;
    padding: 14px 20px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.powerup-choice:active {
    transform: scale(0.95);
}
.powerup-choice:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
}
.powerup-cancel {
    margin-top: 4px;
    padding: 10px 24px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.powerup-cancel:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Power-up board selection mode */
#board.powerup-select-row .board-cell:hover {
    background: rgba(255, 71, 87, 0.35);
    box-shadow: inset 0 0 10px rgba(255, 71, 87, 0.3);
}
#board.powerup-select-col .board-cell:hover {
    background: rgba(95, 124, 255, 0.35);
    box-shadow: inset 0 0 10px rgba(95, 124, 255, 0.3);
}
#board.powerup-select-row,
#board.powerup-select-col {
    cursor: crosshair;
}

/* ---- Score Popup ---- */
.score-popup {
    position: fixed;
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 20;
    animation: score-float 0.9s ease-out forwards;
    white-space: nowrap;
    transform: translateX(-50%);
}
.score-popup.big-combo {
    font-size: 26px;
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}
@keyframes score-float {
    0%   { transform: translateX(-50%) translateY(0) scale(0.5); opacity: 0; }
    20%  { transform: translateX(-50%) translateY(-10px) scale(1.1); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-60px) scale(0.9); opacity: 0; }
}

/* Combo text overlay */
.combo-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 32px;
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 20px var(--accent-glow), 0 2px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 30;
    white-space: nowrap;
    animation: combo-burst 0.8s ease-out forwards;
}
@keyframes combo-burst {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

/* ---- Particles ---- */
#particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    overflow: hidden;
}
.particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    animation: particle-fly 0.65s ease-out forwards;
    z-index: 200;
}
@keyframes particle-fly {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* Perfect placement popup */
.perfect-popup {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 22px;
    font-weight: 900;
    color: var(--success);
    text-shadow: 0 0 16px rgba(46, 213, 115, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 30;
    white-space: nowrap;
    animation: combo-burst 0.8s ease-out forwards;
}

/* Screen shake */
.shake { animation: shake 0.3s ease-out; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(1px); }
}

/* ---- Emoji Explosions ---- */
#emoji-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.emoji-explosion {
    position: absolute;
    font-size: 120px;
    animation: emoji-fly 1.1s ease-out forwards;
    pointer-events: none;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4));
}
@keyframes emoji-fly {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    15%  { transform: scale(1.4) rotate(5deg); opacity: 1; }
    40%  { transform: scale(1.1) rotate(-3deg); opacity: 1; }
    70%  { transform: scale(1.05) rotate(0deg); opacity: 0.9; }
    100% { transform: scale(2) rotate(8deg); opacity: 0; }
}

/* ---- Screen Flash (board clear nuke) ---- */
.screen-flash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    pointer-events: none;
    z-index: 40;
    animation: flash-out 0.5s ease-out forwards;
}
@keyframes flash-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Daily Challenge ---- */
.daily-info {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 10px;
    font-weight: 600;
}
.daily-badge {
    font-size: 14px;
    font-weight: 700;
    color: #00d2ff;
    background: rgba(0, 210, 255, 0.12);
    padding: 4px 16px;
    border-radius: 16px;
    margin-bottom: 12px;
}

/* ---- Game Over Screen ---- */
.gameover-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
}
#new-best-badge {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(255, 217, 61, 0.15);
    padding: 6px 20px;
    border-radius: 20px;
    margin-bottom: 16px;
    animation: badge-pop 0.5s ease-out;
}
@keyframes badge-pop {
    0%  { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
.hidden { display: none !important; }

.final-score-block, .final-best-block { margin-bottom: 6px; }
.final-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}
.final-value {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.final-value-small {
    font-size: 26px;
    color: var(--text-secondary);
}
.final-stats {
    display: flex;
    gap: 24px;
    margin: 20px 0 16px;
}
.final-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.final-stat-num {
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.final-stat-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.motivation-text {
    font-size: 15px;
    font-weight: 600;
    color: #ff6b6b;
    margin-bottom: 20px;
    animation: badge-pop 0.5s ease-out 0.3s both;
}

/* ---- Responsive ---- */
@media (min-width: 421px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #080620;
    }
    #app {
        border-radius: 24px;
        box-shadow: 0 0 60px rgba(30, 20, 80, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.05);
        max-height: 900px;
    }
}

.pwa-standalone #screen-game #shape-tray {
    padding-bottom: 14px;
}