/* ==========================================================================
   TROPICAL FRUIT CRUSH - COMPLETE SINGLE-PLAYER STYLESHEET
   Zero-Scrollbar Adaptive Layout, 2-Depth Archipelago Map, Boss HUD & VFX
   ========================================================================== */

:root {
    --bg-ocean: #0077b6;
    --bg-sand: #ffe8d6;
    --primary-tropical: #ff7b00;
    --secondary-tropical: #06d6a0;
    --accent-gold: #ffd166;
    --accent-red: #ef476f;
    --wood-border: #7f4f24;
    --wood-dark: #582f0e;
    --tile-bg: rgba(255, 255, 255, 0.22);
    --tile-bg-hover: rgba(255, 255, 255, 0.38);
    --card-bg: rgba(255, 255, 255, 0.94);
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.25);
    --font-heading: 'Fredoka One', cursive, sans-serif;
    --font-body: 'Montserrat', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    font-family: var(--font-body);
    color: #333;
    background: linear-gradient(135deg, #0077b6 0%, #00b4d8 50%, #90e0ef 100%);
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Background Tropical Foliage Silhouette Accents */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.2) 0%, transparent 40%),
                radial-gradient(circle at 85% 85%, rgba(255, 183, 3, 0.18) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

/* Common Screen Views (Strictly constrained to 100dvh - Zero Scrollbars!) */
.screen-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: clamp(4px, 1.2vh, 12px);
    z-index: 1;
}

/* ==========================================================================
   MAIN MENU / MODE SELECTION
   ========================================================================== */
#modeSelection {
    justify-content: center;
}

.menu-card {
    background: var(--card-bg);
    border-radius: 28px;
    padding: clamp(20px, 3vh, 32px) clamp(16px, 3vw, 24px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    border: 5px solid #ffb703;
    width: min(92vw, 420px);
    text-align: center;
    backdrop-filter: blur(8px);
    animation: menuFadeIn 0.4s ease-out;
}

@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tropical-logo .logo-emoji {
    font-size: clamp(2rem, 4vh, 2.6rem);
    display: block;
    margin-bottom: 2px;
    animation: floatEmoji 3s ease-in-out infinite alternate;
}

@keyframes floatEmoji {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

.tropical-logo h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3.2vh, 2.2rem);
    line-height: 1.1;
    color: #2b2d42;
    text-transform: uppercase;
}

.tropical-logo h1 .highlight {
    color: var(--primary-tropical);
    text-shadow: 2px 2px 0 #ffd166;
}

.tropical-logo .tagline {
    font-size: 0.88rem;
    color: #666;
    font-weight: 600;
    margin-top: 4px;
    margin-bottom: clamp(14px, 2vh, 22px);
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.5vh, 14px);
    margin-bottom: clamp(14px, 2vh, 22px);
}

.btn-menu {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: clamp(10px, 1.8vh, 14px) 16px;
    border-radius: 18px;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-align: left;
}

.btn-menu:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.btn-menu:active {
    transform: translateY(1px);
}

.btn-menu .btn-icon {
    font-size: 1.8rem;
}

.btn-menu .btn-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    display: block;
    color: #ffffff;
}

.btn-menu .btn-sub {
    font-size: 0.74rem;
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.btn-adventure {
    background: linear-gradient(135deg, #38b000, #007200);
}

.btn-endless {
    background: linear-gradient(135deg, #00b4d8, #0077b6);
}

.btn-timed {
    background: linear-gradient(135deg, #ff7b00, #d90429);
}

.menu-bottom-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.btn-pill {
    background: #e9ecef;
    border: 2px solid #ced4da;
    border-radius: 20px;
    padding: 7px 18px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    font-family: var(--font-body);
    color: #495057;
}

.btn-pill:hover {
    background: #dee2e6;
    transform: translateY(-2px);
}

/* ==========================================================================
   2-DEPTH ARCHIPELAGO MAP (SEA CHART & ISLAND TRAVERSAL)
   ========================================================================== */
.map-header {
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
}

.btn-back-map {
    width: auto !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    background: var(--card-bg) !important;
    border: 2px solid #ffb703 !important;
    color: #582f0e !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

.map-header h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    text-align: center;
}

.high-map-container, .low-map-container {
    width: 100%;
    max-width: 650px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6px;
    overflow-y: auto;
}

.map-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.islands-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 480px;
}

.island-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 14px 18px;
    border: 3px solid #ffb703;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}

.island-card.unlocked:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.island-card.locked {
    filter: grayscale(0.5);
}

.island-badge {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    background: #ffea00;
    color: #582f0e;
    padding: 3px 8px;
    border-radius: 12px;
}

.island-art {
    font-size: 2.2rem;
    margin-bottom: 4px;
}

.island-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #2b2d42;
}

.island-desc {
    font-size: 0.75rem;
    color: #666;
    margin: 4px 0 8px 0;
}

.island-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 700;
}

.island-stars {
    color: #f77f00;
}

.island-status {
    color: #38b000;
}

/* Fog of War Mist Animation */
.fog-shroud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(40, 70, 100, 0.75);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.fog-mist {
    background: rgba(255, 255, 255, 0.25);
    padding: 6px 14px;
    border-radius: 20px;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 1px;
    animation: fogPulse 2.5s infinite alternate;
}

@keyframes fogPulse {
    0% { opacity: 0.7; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1.04); }
}

/* Low Map: Island Traversal View */
.trail-container {
    width: 100%;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.88);
    border: 4px solid #ffb703;
    border-radius: 24px;
    padding: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
    position: relative;
}

.trail-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.level-node {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 2px solid #ced4da;
    border-radius: 16px;
    padding: 10px 14px;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s, border-color 0.15s;
}

.level-node.unlocked {
    border-color: #38b000;
}

.level-node.unlocked:hover {
    transform: translateY(-2px);
    border-color: #ff7b00;
}

.level-node.current {
    border-color: #ff7b00;
    background: #fff9db;
    box-shadow: 0 0 12px rgba(255, 123, 0, 0.3);
}

.level-node.locked {
    opacity: 0.6;
    cursor: not-allowed;
    background: #f8f9fa;
}

.node-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffea00;
    border: 2px solid #ffb703;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #582f0e;
    position: relative;
}

.player-pin {
    position: absolute;
    top: -12px;
    right: -8px;
    font-size: 1.2rem;
    animation: pinBounce 0.8s ease-in-out infinite alternate;
}

@keyframes pinBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

.node-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.node-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #2b2d42;
}

.node-stars {
    font-size: 0.95rem;
    color: #ffb703;
}

.level-node.boss-node .node-circle {
    background: #d90429;
    border-color: #800f2f;
    color: #fff;
}

/* Interactive Easter Eggs on Map */
.map-easter-egg {
    position: absolute;
    bottom: 12px;
    right: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 234, 0, 0.3);
    border: 2px dashed #ffea00;
    transition: transform 0.2s;
}

.map-easter-egg:hover {
    transform: scale(1.15) rotate(10deg);
}

.map-easter-egg.uncollected .egg-icon {
    font-size: 1.6rem;
    animation: eggShimmer 1.5s infinite alternate;
}

.map-easter-egg.collected {
    border-style: solid;
    border-color: #38b000;
    opacity: 0.8;
}

@keyframes eggShimmer {
    0% { filter: drop-shadow(0 0 2px #fff); }
    100% { filter: drop-shadow(0 0 8px #ffea00); }
}

/* ==========================================================================
   GAME HEADER, BOSS HUD & STATS
   ========================================================================== */
#gameScreen {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
}

.game-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 6px;
    flex-shrink: 0;
}

.header-center h2 {
    font-family: var(--font-heading);
    font-size: clamp(0.95rem, 2vh, 1.15rem);
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    text-align: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid #ffb703;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: transform 0.15s;
}

.btn-circle:hover {
    transform: scale(1.1);
}

.wallet-badge {
    background: var(--card-bg);
    border: 2px solid #ffb703;
    border-radius: 20px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 0.88rem;
    color: #7f4f24;
}

/* Boss Battle HUD (Level 15) */
.boss-hud {
    width: 100%;
    background: rgba(30, 0, 50, 0.85);
    border: 2px solid #d90429;
    border-radius: 14px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.boss-hud.boss-hit-flash {
    background: rgba(217, 4, 41, 0.85);
}

.boss-avatar {
    font-size: 2rem;
    animation: krakenBob 2s infinite alternate ease-in-out;
}

@keyframes krakenBob {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px) scale(1.05); }
}

.boss-info {
    flex: 1;
}

.boss-name-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #fff;
    margin-bottom: 3px;
}

.boss-counter {
    color: #ffb703;
    font-weight: 700;
}

.boss-hp-track {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    overflow: hidden;
}

.boss-hp-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #d90429, #ff7b00);
    transition: width 0.3s ease-out;
}

.boss-hp-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
    margin-top: 2px;
    font-weight: 700;
}

/* Game HUD */
.game-hud {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 6px;
    margin: 4px 0;
    flex-shrink: 0;
}

.hud-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 6px 8px;
    text-align: center;
    border: 2px solid #ffb703;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 58px;
}

.hud-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 800;
    color: #7f4f24;
}

.hud-val {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 2.4vh, 1.35rem);
    color: #2b2d42;
    line-height: 1.1;
}

.hud-highlight {
    color: var(--primary-tropical);
}

.hud-sub {
    font-size: 0.65rem;
    color: #777;
    font-weight: 600;
}

.obj-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    font-weight: 700;
    color: #333;
}

.obj-fruit-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.obj-fruit-item .mini-icon {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   ADAPTIVE BOARD (ZERO-SCROLL SIZING)
   ========================================================================== */
.board-area {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    min-height: 0; /* Important for flex-shrink */
}

.board-outer-frame {
    position: relative;
    /* Responsive constraint that guarantees zero vertical scrolling at any resolution! */
    width: min(90vw, calc(100dvh - 210px), 480px);
    height: min(90vw, calc(100dvh - 210px), 480px);
    background: linear-gradient(135deg, #7f4f24 0%, #582f0e 100%);
    border-radius: 18px;
    padding: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.35);
}

.grid-board {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 4px;
    background: rgba(0, 40, 80, 0.45);
    border-radius: 12px;
    padding: 4px;
    overflow: hidden;
    position: relative;
}

#fxCanvas {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    pointer-events: none;
    z-index: 5;
}

/* Board Tiles */
.tile {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tile-bg);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}

.tile:hover {
    background: var(--tile-bg-hover);
}

.tile.selected {
    background: rgba(255, 234, 0, 0.45);
    box-shadow: 0 0 10px #ffea00 inset;
    animation: pulseSelect 0.8s infinite alternate;
}

@keyframes pulseSelect {
    0% { transform: scale(0.96); }
    100% { transform: scale(1.04); }
}

/* Fruit Graphics */
.fruit-container {
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.15s ease;
}

.fruit-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    transition: transform 0.15s ease;
}

.tile.pop-clearing .fruit-container {
    transform: scale(1.3) rotate(15deg);
    opacity: 0;
    transition: transform 0.19s ease-out, opacity 0.19s ease-out;
}

/* ==========================================================================
   SPECIAL FRUITS & OVERLAYS (Restored from Phase 1)
   ========================================================================== */
.special-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Line Blasters (Striped) */
.laser-beam {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 8px #ffffff;
}

.laser-beam-h {
    width: 100%;
    height: 5px;
    top: calc(50% - 2.5px);
    left: 0;
    animation: pulseBeamH 1s infinite alternate;
}

.laser-beam-v {
    height: 100%;
    width: 5px;
    left: calc(50% - 2.5px);
    top: 0;
    animation: pulseBeamV 1s infinite alternate;
}

.arrow-h-left, .arrow-h-right, .arrow-v-up, .arrow-v-down {
    position: absolute;
    font-size: 0.65rem;
    color: #ffffff;
    text-shadow: 0 0 4px #ff7b00;
}

.arrow-h-left { left: 2px; }
.arrow-h-right { right: 2px; }
.arrow-v-up { top: 2px; }
.arrow-v-down { bottom: 2px; }

@keyframes pulseBeamH {
    0% { transform: scaleY(0.7); opacity: 0.7; }
    100% { transform: scaleY(1.4); opacity: 1; }
}

@keyframes pulseBeamV {
    0% { transform: scaleX(0.7); opacity: 0.7; }
    100% { transform: scaleX(1.4); opacity: 1; }
}

/* Bomb Overlay */
.bomb-spark {
    font-size: 1.3rem;
    animation: spinSpark 2s linear infinite;
}

.bomb-ring {
    position: absolute;
    width: 110%;
    height: 110%;
    border-radius: 50%;
    border: 2px dashed #ffea00;
    animation: rotateRing 3s linear infinite;
}

@keyframes spinSpark {
    0% { transform: rotate(0deg) scale(0.9); }
    50% { transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(0.9); }
}

@keyframes rotateRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Rainbow Starfruit Glow */
.rainbow-svg {
    animation: rainbowGlow 2.5s infinite alternate;
}

@keyframes rainbowGlow {
    0% { filter: drop-shadow(0 0 6px #ff0055); transform: scale(1); }
    50% { filter: drop-shadow(0 0 10px #ffea00); transform: scale(1.08) rotate(5deg); }
    100% { filter: drop-shadow(0 0 6px #00bbf9); transform: scale(1); }
}

/* ==========================================================================
   COSMETIC SKINS & SPECIAL ANIMATIONS
   ========================================================================== */
/* Golden Tropic Skin */
.fruit-container.skin-golden .fruit-svg {
    filter: drop-shadow(0 0 4px #ffd700) drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}

/* Neon Luau Skin */
.fruit-container.skin-neon .fruit-svg {
    filter: drop-shadow(0 0 6px #00f5d4) drop-shadow(0 0 2px #ff0055);
}

/* Frozen & Locked Tiles */
.frozen-tile .ice-shroud {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: rgba(180, 230, 255, 0.65);
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: inset 0 0 8px #00b4d8, 0 0 4px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 2;
}

.frozen-tile .ice-shroud::after {
    content: '❄';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    color: #ffffff;
    text-shadow: 0 0 4px #0077b6;
}

/* Tentacle Hazard Tile */
.tentacle-tile .tentacle-shroud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(60, 0, 80, 0.6);
    border: 2px solid #9d0208;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.tentacle-icon {
    font-size: 1.2rem;
    animation: tentacleWriggle 1.2s infinite alternate ease-in-out;
}

@keyframes tentacleWriggle {
    0% { transform: rotate(-10deg) scale(0.9); }
    100% { transform: rotate(10deg) scale(1.1); }
}

/* Ice-locked shake when trying to swap a frozen fruit */
.tile.ice-locked-shake {
    animation: iceRattle 0.35s ease-in-out;
}

@keyframes iceRattle {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px) rotate(-3deg); }
    40%, 80% { transform: translateX(4px) rotate(3deg); }
}

/* Enhanced Special Fruit Detonation VFX */
.active-laser-sweep {
    position: absolute;
    background: linear-gradient(90deg, transparent, #ffffff, #ffea00, #ffffff, transparent);
    box-shadow: 0 0 16px #ffea00, 0 0 24px #fff;
    pointer-events: none;
    z-index: 10;
}

.sweep-h {
    left: 0;
    width: 100%;
    height: 14px;
    transform: translateY(-50%);
    animation: sweepH 0.35s ease-out forwards;
}

.sweep-v {
    top: 0;
    height: 100%;
    width: 14px;
    transform: translateX(-50%);
    animation: sweepV 0.35s ease-out forwards;
}

@keyframes sweepH {
    0% { transform: translateY(-50%) scaleY(0.4); opacity: 0.5; }
    50% { transform: translateY(-50%) scaleY(2.2); opacity: 1; }
    100% { transform: translateY(-50%) scaleY(0.2); opacity: 0; }
}

@keyframes sweepV {
    0% { transform: translateX(-50%) scaleX(0.4); opacity: 0.5; }
    50% { transform: translateX(-50%) scaleX(2.2); opacity: 1; }
    100% { transform: translateX(-50%) scaleX(0.2); opacity: 0; }
}

.active-bomb-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #ffea00;
    box-shadow: 0 0 18px #ff7b00;
    pointer-events: none;
    z-index: 10;
    animation: shockwaveExpand 0.4s ease-out forwards;
}

@keyframes shockwaveExpand {
    0% { width: 40px; height: 40px; opacity: 1; }
    100% { width: 180px; height: 180px; opacity: 0; border-width: 1px; }
}

.special-spawn-pulse {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 3px solid #00f5d4;
    box-shadow: 0 0 12px #00f5d4;
    pointer-events: none;
    animation: spawnPulse 0.5s ease-out forwards;
}

@keyframes spawnPulse {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ==========================================================================
   BOTTOM BOOSTERS BAR
   ========================================================================== */
.boosters-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
    padding-bottom: 4px;
    flex-shrink: 0;
}

.btn-booster {
    background: var(--card-bg);
    border: 2px solid #ffb703;
    border-radius: 14px;
    padding: 4px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s;
    font-family: var(--font-body);
}

.btn-booster:hover {
    transform: translateY(-2px);
}

.btn-booster .booster-icon {
    font-size: 1.25rem;
}

.btn-booster .booster-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #582f0e;
}

.booster-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--primary-tropical);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* ==========================================================================
   MODAL WINDOWS & STORY DIALOGUE
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 20, 40, 0.78);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: 12px;
}

.modal-panel {
    background: var(--card-bg);
    border-radius: 22px;
    border: 4px solid #ffb703;
    box-shadow: var(--shadow-soft);
    width: min(92vw, 440px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    from { transform: scale(0.88); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #ffea00;
    border-bottom: 2px solid #ffb703;
}

.modal-header h2 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #582f0e;
}

.modal-close {
    background: #ef476f;
    color: #fff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.modal-body {
    padding: 16px;
    overflow-y: auto;
}

/* Story Dialogue Modal */
.story-modal {
    width: min(92vw, 420px);
    padding: 0;
}

.story-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #ffea00;
    border-bottom: 2px solid #ffb703;
}

.story-header h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: #582f0e;
}

.btn-skip {
    background: none;
    border: none;
    color: #7f4f24;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
}

.story-body {
    display: flex;
    gap: 14px;
    padding: 18px 16px;
    align-items: flex-start;
}

.dialog-avatar {
    font-size: 2.8rem;
    background: #fff3bf;
    border: 2px solid #ffb703;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dialog-content {
    flex: 1;
}

.dialog-speaker {
    display: block;
    color: #ff7b00;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.dialog-text {
    font-size: 0.88rem;
    line-height: 1.4;
    color: #333;
}

.story-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* Tiki Shop Sections */
.shop-section-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: #7f4f24;
    margin: 12px 0 6px 0;
    border-bottom: 2px solid #ffea00;
    padding-bottom: 2px;
}

.shop-balance {
    background: #fff3bf;
    padding: 8px 14px;
    font-weight: 700;
    color: #7f4f24;
    text-align: center;
}

.shop-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.shop-item-icon {
    font-size: 1.8rem;
}

.shop-item-info {
    flex: 1;
}

.shop-item-info h4 {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    color: #2b2d42;
}

.shop-item-info p {
    font-size: 0.72rem;
    color: #666;
}

.btn-buy {
    background: linear-gradient(135deg, #ffb703, #fb8500);
    border: none;
    border-radius: 12px;
    padding: 6px 12px;
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.btn-buy.equipped {
    background: #38b000;
}

.btn-buy.owned {
    background: #0077b6;
}

/* Outcome Modals */
.outcome-modal {
    text-align: center;
    padding: 24px 20px;
    align-items: center;
}

.outcome-trophy {
    font-size: 3rem;
    margin-bottom: 4px;
    animation: trophyBounce 0.8s ease-in-out infinite alternate;
}

@keyframes trophyBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-6px); }
}

.outcome-modal h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: #2b2d42;
}

.stars-display {
    font-size: 2.2rem;
    color: #ffb703;
    margin: 6px 0;
    letter-spacing: 3px;
}

.outcome-score, .outcome-reward {
    font-size: 0.95rem;
    color: #555;
    margin: 3px 0;
}

.timed-best-tag {
    color: #ff7b00;
    font-weight: 800;
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.outcome-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    width: 100%;
}

.btn-primary, .btn-secondary {
    flex: 1;
    padding: 10px 14px;
    border-radius: 14px;
    border: none;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.88rem;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, #38b000, #007200);
    color: #fff;
}

.btn-secondary {
    background: #e9ecef;
    color: #495057;
}

/* Achievement Live Toast */
.achievement-banner {
    position: fixed;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffd166, #ffb703);
    color: #582f0e;
    padding: 10px 20px;
    border-radius: 30px;
    border: 3px solid #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    font-weight: 800;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.achievement-banner.show {
    top: 16px;
}