/* ============================================================
   Pesca de la Suerte — default.css
   Lógica: móvil = pantalla < 700px ancho O < 700px alto
           desktop = pantalla >= 700px ancho Y >= 700px alto
   Sin JS, sin clases, puro CSS media query
   ============================================================ */

:root {
    --teal: #1f6b72;
    --sand: #f3dba3;
    --coral: #e0563e;
    --gold: #ffe16a;
    --navy: #0c2230;
    --white: #fdf6e8;
    --sardina: #3a6f96;
    --mero: #d9831f;
    --pargo: #c4221c;
    --game-w: 393px;
    --game-h: 851px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Trebuchet MS',sans-serif;
    background: #06343f;
    user-select: none;
}

/* ============================================================
   MÓVIL — defecto base (sin media query = aplica siempre)
   ============================================================ */
body {
    overflow: hidden;
    touch-action: none;
}

#phone-shell {
    display: none;
}

#phone-bar {
    display: none;
}

#phone-glare {
    display: none;
}

#phone-silent {
    display: none;
}

#phone-vol-up {
    display: none;
}

#phone-vol-down {
    display: none;
}

#phone-cam {
    display: none;
}

#game-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(#5fc6e8,#a8e2ec 45%,#0a5c72 75%);
}

/* ============================================================
   DESKTOP — pantalla grande con mouse
   Solo activa cuando el viewport es suficientemente grande
   ============================================================ */
@media screen and (min-width:900px) and (min-height:700px) and (hover:hover) and (pointer:fine) {
    body {
        overflow: auto;
        touch-action: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: radial-gradient(ellipse at 50% 40%, #0d3d4a 0%, #061820 100%);
    }

    #phone-shell {
        display: flex;
        position: relative;
        width: calc(var(--game-w) + 28px);
        height: calc(var(--game-h) + 72px);
        background: linear-gradient(160deg, #1a1a2e, #0f0f1a);
        border-radius: 44px;
        box-shadow: 0 0 0 1.5px #2a2a3e, 0 0 0 3px #111120, 0 30px 80px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.06);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 36px 14px 36px;
        flex-shrink: 0;
    }

        #phone-shell::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            width: 90px;
            height: 26px;
            background: #000;
            border-radius: 20px;
            box-shadow: 0 0 0 1.5px #1a1a2e;
            z-index: 10;
        }

        #phone-shell::after {
            content: '';
            position: absolute;
            right: -4px;
            top: 38%;
            width: 4px;
            height: 56px;
            background: linear-gradient(180deg, #2a2a3e, #1a1a28);
            border-radius: 0 3px 3px 0;
            box-shadow: 1px 0 4px rgba(0,0,0,0.5);
        }

    #phone-silent, #phone-vol-up, #phone-vol-down {
        display: block;
        position: absolute;
        left: -4px;
        width: 4px;
        background: linear-gradient(180deg, #2a2a3e, #1a1a28);
        border-radius: 3px 0 0 3px;
        box-shadow: -1px 0 4px rgba(0,0,0,0.5);
    }

    #phone-silent {
        top: 24%;
        height: 22px;
    }

    #phone-vol-up {
        top: 34%;
        height: 40px;
    }

    #phone-vol-down {
        top: 43%;
        height: 40px;
    }

    #phone-cam {
        display: block;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        background: #0a0a12;
        border-radius: 50%;
        border: 1.5px solid #1e1e30;
        z-index: 11;
        margin-left: 30px;
    }

    #game-root {
        position: relative !important;
        inset: auto !important;
        width: var(--game-w) !important;
        height: var(--game-h) !important;
        border-radius: 14px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
        overflow: hidden !important;
    }

    #phone-bar {
        display: block;
        width: 100px;
        height: 5px;
        background: rgba(255,255,255,0.25);
        border-radius: 4px;
        margin-top: 10px;
    }

    #phone-glare {
        display: block;
        position: absolute;
        top: 0;
        left: 10%;
        width: 30%;
        height: 55%;
        background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 70%);
        border-radius: 44px 0 0 0;
        pointer-events: none;
    }

    #wheel-stage {
        width: 360px;
        height: 360px;
    }
}

/* ============================================================
   UI DEL JUEGO — elementos dentro de #game-root
   ============================================================ */
#bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
    z-index: 0;
}

#topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    z-index: 50;
    background: linear-gradient(180deg,rgba(6,52,63,0.85),transparent);
}

    #topbar .brand {
        color: var(--white);
        font-weight: 800;
        font-size: 15px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }

#balance-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,225,106,0.5);
    border-radius: 20px;
    padding: 6px 14px;
    color: var(--gold);
    font-weight: 800;
    font-size: 14px;
}

#player-count {
    position: absolute;
    bottom: 6px;
    left: 10px;
    z-index: 49;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    letter-spacing: 0.3px;
    pointer-events: none;
    transition: opacity .5s;
}

    #player-count.pulse {
        animation: pcPulse .6s ease;
    }

@keyframes pcPulse {
    0%,100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

#sound-btn {
    position: absolute;
    top: 64px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 46;
}

#wheel-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

#wheel-stage {
    position: relative;
    width: min(86vw,380px);
    height: min(86vw,380px);
    margin-top: 54px;
}

#wheel-img {
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: rotate(0deg);
    display: block;
}

    #wheel-img svg {
        width: 100%;
        height: 100%;
        display: block;
    }

#pointer-img {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 54px;
    height: 60px;
    transform: translateX(-50%);
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

#status-text {
    margin-top: 10px;
    color: var(--white);
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    min-height: 22px;
    letter-spacing: 0.4px;
}

#countdown-wrap {
    position: absolute;
    top: 64px;
    right: 14px;
    width: 60px;
    height: 60px;
    z-index: 45;
    transition: opacity .3s ease;
}

    #countdown-wrap svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    #countdown-wrap circle.track {
        fill: none;
        stroke: rgba(255,255,255,0.25);
        stroke-width: 5;
    }

    #countdown-wrap circle.ring {
        fill: none;
        stroke: var(--gold);
        stroke-width: 5;
        stroke-linecap: round;
        transition: stroke-dashoffset .1s linear,stroke .2s ease;
    }

    #countdown-wrap.urgent circle.ring {
        stroke: var(--coral);
    }

#countdown-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 900;
    font-size: 18px;
}

#countdown-wrap.urgent #countdown-num {
    color: var(--coral);
}

#countdown-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    font-size: 9px;
    font-weight: 800;
    color: var(--white);
    opacity: 0.85;
    white-space: nowrap;
}

#bet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: linear-gradient(180deg,transparent,rgba(6,40,48,0.92) 30%,rgba(6,40,48,0.97));
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#total-bet-label {
    text-align: center;
    color: var(--white);
    font-size: 12px;
    opacity: 0.85;
}

    #total-bet-label b {
        color: var(--gold);
    }

#bet-slots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.bet-slot {
    flex: 1;
    max-width: 120px;
    border-radius: 12px;
    padding: 8px 4px 6px;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform .1s ease,border-color .15s;
}

    .bet-slot:active {
        transform: scale(0.97);
    }

    .bet-slot.sardina {
        background: linear-gradient(160deg,#4a86ac,#173d57);
    }

    .bet-slot.mero {
        background: linear-gradient(160deg,#f0a83a,#8a4a0c);
    }

    .bet-slot.pargo {
        background: linear-gradient(160deg,#e0564a,#6e0c0c);
    }

    .bet-slot.active-glow {
        border-color: var(--gold);
        box-shadow: 0 0 14px rgba(255,225,106,0.7);
    }

    .bet-slot .slot-name {
        color: #fff;
        font-weight: 800;
        font-size: 12.5px;
        display: block;
        margin-top: 2px;
    }

    .bet-slot .slot-mult {
        color: var(--gold);
        font-weight: 900;
        font-size: 11px;
    }

    .bet-slot .slot-amount {
        margin-top: 4px;
        background: rgba(0,0,0,0.35);
        border-radius: 10px;
        color: var(--gold);
        font-weight: 800;
        font-size: 12px;
        padding: 3px 6px;
        display: inline-block;
        min-width: 46px;
    }

    .bet-slot .slot-fishicon {
        width: 48px;
        height: 32px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    }

#bet-slots-side {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}

.bet-slot-side {
    flex: 1;
    max-width: 160px;
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform .1s ease,border-color .15s;
}

    .bet-slot-side:active {
        transform: scale(0.97);
    }

    .bet-slot-side.azul {
        background: linear-gradient(120deg,#3a6f96,#1f4a68);
    }

    .bet-slot-side.blanco {
        background: linear-gradient(120deg,#dce9ee,#b8cdd6);
    }

        .bet-slot-side.blanco .side-name {
            color: #173d57;
        }

    .bet-slot-side.active-glow {
        border-color: var(--gold);
        box-shadow: 0 0 14px rgba(255,225,106,0.7);
    }

    .bet-slot-side .side-name {
        color: #fff;
        font-weight: 800;
        font-size: 12px;
    }

    .bet-slot-side .side-mult {
        color: var(--gold);
        font-weight: 800;
        font-size: 10.5px;
        flex: 1;
        text-align: center;
    }

    .bet-slot-side.blanco .side-mult {
        color: #a8720a;
    }

    .bet-slot-side .slot-amount {
        background: rgba(0,0,0,0.35);
        border-radius: 8px;
        color: var(--gold);
        font-weight: 800;
        font-size: 11px;
        padding: 3px 6px;
        min-width: 38px;
        text-align: center;
    }

    .bet-slot-side.blanco .slot-amount {
        background: rgba(0,0,0,0.18);
        color: #7a4f00;
    }

#chip-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 2px 0;
}

.chip {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    border: 3px solid rgba(255,255,255,0.85);
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4),inset 0 2px 4px rgba(255,255,255,0.3);
    transition: transform .12s ease;
}

    .chip:active {
        transform: scale(0.9);
    }

    .chip.selected {
        transform: scale(1.15);
        box-shadow: 0 0 0 3px var(--gold),0 3px 8px rgba(0,0,0,0.5);
    }

    .chip[data-v="100"] {
        background: radial-gradient(circle at 35% 30%,#8fb8c4,#4a6a78);
    }

    .chip[data-v="500"] {
        background: radial-gradient(circle at 35% 30%,#e87a6a,#b5392a);
    }

    .chip[data-v="1000"] {
        background: radial-gradient(circle at 35% 30%,#6ec98a,#2c8a4e);
    }

    .chip[data-v="5000"] {
        background: radial-gradient(circle at 35% 30%,#f0c25a,#c4861a);
    }

    .chip[data-v="10000"] {
        background: radial-gradient(circle at 35% 30%,#b89af0,#6a3fae);
    }

#action-row {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.round-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .round-btn:active {
        transform: scale(0.9);
    }

#cycle-indicator {
    flex: 1;
    max-width: 240px;
    height: 54px;
    border-radius: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.4px;
    transition: background .25s,color .25s;
}

    #cycle-indicator.phase-betting {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        color: #5a3a00;
        box-shadow: 0 5px 0 #a87010,0 8px 14px rgba(0,0,0,0.35);
    }

    #cycle-indicator.phase-locked {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.75);
        border: 2px solid rgba(255,255,255,0.25);
    }

    #cycle-indicator .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: currentColor;
        animation: pulseDot 1s infinite;
    }

@keyframes pulseDot {
    0%,100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

#auto-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.auto-btn {
    flex: 1;
    max-width: 170px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 16px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 9px 6px;
    cursor: pointer;
}

    .auto-btn:active {
        transform: scale(0.96);
    }

    .auto-btn.active-auto {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        color: #5a3a00;
        border-color: transparent;
    }

#bet-panel.locked #bet-slots,
#bet-panel.locked #bet-slots-side,
#bet-panel.locked #chip-row {
    opacity: 0.5;
}

#bet-panel.locked .bet-slot,
#bet-panel.locked .bet-slot-side,
#bet-panel.locked .chip,
#bet-panel.locked .auto-btn,
#bet-panel.locked .round-btn {
    pointer-events: none;
    opacity: 0.4;
}

#aquarium-view {
    position: absolute;
    inset: 0;
    z-index: 55;
    display: none;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

    #aquarium-view.show {
        display: flex;
    }

#aquarium-bg {
    position: absolute;
    inset: 0;
    background: url('img/fondo-acuario.png') center center/cover no-repeat;
    filter: brightness(0.7);
}

#aquarium-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#aquarium-top {
    position: relative;
    z-index: 2;
    margin-top: 24px;
    text-align: center;
    padding: 0 20px;
}

    #aquarium-top h2 {
        color: var(--gold);
        font-size: 26px;
        font-weight: 900;
        margin: 0 0 4px;
        text-shadow: 0 0 20px rgba(255,225,106,0.6),0 2px 8px rgba(0,0,0,0.6);
    }

    #aquarium-top p {
        color: rgba(255,255,255,0.8);
        font-size: 13px;
        margin: 0;
    }

#aquarium-result {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(transparent,rgba(0,0,0,0.75) 30%,rgba(0,0,0,0.92));
    padding: 20px 24px 28px;
    text-align: center;
}

.aq-mult {
    font-size: 56px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(255,225,106,0.9);
    animation: glowP 0.8s ease infinite alternate;
    line-height: 1;
}

@keyframes glowP {
    from {
        text-shadow: 0 0 20px rgba(255,225,106,0.6);
    }

    to {
        text-shadow: 0 0 50px rgba(255,225,106,1),0 0 80px rgba(255,200,0,0.4);
    }
}

.aq-label {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin: 6px 0 8px;
    font-weight: 700;
}

.aq-prize {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
    opacity: 0;
    transition: opacity 0.5s;
}

    .aq-prize.show {
        opacity: 1;
    }

#aquarium-continue {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 24px;
    padding: 13px 36px;
    font-weight: 900;
    font-size: 16px;
    color: #5a3a00;
    box-shadow: 0 5px 0 #a87010;
    cursor: pointer;
}

#bet-summary-overlay {
    position: absolute;
    inset: 0;
    z-index: 52;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(6,30,38,0.5);
}

    #bet-summary-overlay.show {
        display: flex;
    }

#bet-summary-card {
    background: radial-gradient(circle at 30% 20%,#1a7a4a,#0a3a20);
    border: 6px solid #e8c984;
    border-radius: 50%;
    width: 210px;
    height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #8a6a32,0 12px 30px rgba(0,0,0,0.6);
    position: relative;
    gap: 4px;
    animation: chipIn 0.35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes chipIn {
    from {
        transform: scale(0.3) rotate(-15deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

#bet-summary-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(232,201,132,0.45);
}

.chip-label {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chip-amount {
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.chip-bets {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.7;
    white-space: pre-line;
}

#result-chip-overlay {
    position: absolute;
    inset: 0;
    z-index: 53;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

    #result-chip-overlay.show {
        display: flex;
    }

#result-chip-card {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 4px;
    animation: chipPop 0.4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes chipPop {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

#result-chip-card.win {
    background: radial-gradient(circle at 30% 20%,#c89020,#7a5010);
    border: 6px solid #fff3c0;
}

#result-chip-card.loss {
    background: radial-gradient(circle at 30% 20%,#4a1515,#1a0505);
    border: 6px solid rgba(255,100,80,0.4);
}

#result-chip-card.neutral {
    background: radial-gradient(circle at 30% 20%,#1a4a6a,#0a2a3a);
    border: 6px solid rgba(255,255,255,0.3);
}

#result-chip-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.25);
}

.rchip-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

.rchip-amount {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.rchip-detail {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    font-weight: 700;
    text-align: center;
}

#bonus-view {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    #bonus-view.show {
        display: flex;
    }

#bonus-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
}

#muelle-sign {
    display: none;
}

.muelle-text {
    display: inline-block;
    background: rgba(100,60,15,0.88);
    border: 3px solid #c8a050;
    border-radius: 8px;
    padding: 5px 16px;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    font-family: Georgia,serif;
}

#love-sign {
    position: absolute;
    bottom: 30%;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
    flex-wrap: wrap;
}

.love-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

#bonus-banner {
    margin-top: 50px;
    background: rgba(12,34,48,0.65);
    border: 1px solid var(--gold);
    border-radius: 14px;
    padding: 7px 16px;
    color: var(--gold);
    font-weight: 900;
    font-size: 13px;
    text-align: center;
    z-index: 5;
    position: relative;
    max-width: 92%;
}

#catch-zone {
    position: relative;
    flex: 1;
    width: 100%;
}

#pescador-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8%;
    width: 45%;
    max-width: 190px;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.3));
    z-index: 4;
    transform-origin: bottom center;
}

#line-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

#caught-fish {
    position: absolute;
    width: 28%;
    max-width: 160px;
    opacity: 0;
    transform: rotate(90deg) scale(0.1);
    transition: none;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.4));
    z-index: 4;
}

#mult-badge {
    position: absolute;
    background: linear-gradient(180deg,#fff3c0,#e0a82a);
    border: 3px solid #6e3d00;
    border-radius: 10px;
    padding: 6px 12px;
    font-weight: 900;
    font-size: 20px;
    color: #6e3d00;
    opacity: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    white-space: nowrap;
    z-index: 5;
}

#bonus-footer {
    width: 100%;
    padding: 12px 16px 18px;
    text-align: center;
    z-index: 5;
}

#bonus-total {
    color: var(--white);
    font-size: 14px;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

    #bonus-total b {
        color: var(--gold);
        font-size: 18px;
        white-space: nowrap;
    }

#bonus-continue {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 24px;
    padding: 13px 36px;
    font-weight: 900;
    font-size: 16px;
    color: #5a3a00;
    box-shadow: 0 5px 0 #a87010;
    cursor: pointer;
}

#win-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6,30,38,0.55);
}

    #win-overlay.show {
        display: flex;
    }

#win-card {
    background: linear-gradient(160deg,#0f7f95,#0a5c72);
    border: 3px solid var(--gold);
    border-radius: 22px;
    padding: 26px 30px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    max-width: 300px;
}

    #win-card .win-title {
        color: var(--gold);
        font-weight: 900;
        font-size: 20px;
        margin-bottom: 6px;
    }

    #win-card .win-amount {
        color: #fff;
        font-weight: 900;
        font-size: 32px;
        margin-bottom: 14px;
    }

    #win-card button {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        border: none;
        border-radius: 20px;
        padding: 11px 30px;
        font-weight: 900;
        font-size: 15px;
        color: #5a3a00;
        box-shadow: 0 4px 0 #a87010;
        cursor: pointer;
    }

#reload-overlay {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(6,30,38,0.92);
    display: none;
    align-items: center;
    justify-content: center;
}

    #reload-overlay.show {
        display: flex;
    }

#reload-card {
    background: linear-gradient(160deg,#0f7f95,#0a5c72);
    border: 3px solid var(--gold);
    border-radius: 22px;
    padding: 26px 24px;
    text-align: center;
    color: #fff;
    max-width: 300px;
    width: 90%;
}

    #reload-card h3 {
        color: var(--gold);
        font-size: 20px;
        margin: 0 0 10px;
        font-weight: 900;
    }

    #reload-card p {
        font-size: 13px;
        opacity: 0.9;
        margin: 0 0 16px;
    }

#reload-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.reload-opt {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 14px;
    padding: 12px 6px;
    font-weight: 800;
    color: #5a3a00;
    font-size: 13px;
    cursor: pointer;
}

#reload-custom-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

#reload-custom-input {
    flex: 1;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

    #reload-custom-input::placeholder {
        color: rgba(255,255,255,0.5);
    }

#reload-custom-btn {
    background: rgba(255,255,255,0.2);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

#autoplay-overlay {
    position: absolute;
    inset: 0;
    z-index: 96;
    background: rgba(6,30,38,0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

    #autoplay-overlay.show {
        display: flex;
    }

#autoplay-card {
    background: #0a5c72;
    border: 2px solid var(--gold);
    border-radius: 18px;
    padding: 22px 24px;
    text-align: center;
    color: #fff;
    max-width: 280px;
}

    #autoplay-card h3 {
        margin: 0 0 8px;
        color: var(--gold);
        font-size: 18px;
    }

    #autoplay-card p {
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.9;
        margin-bottom: 14px;
    }

#autoplay-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.autoplay-opt {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 14px;
    padding: 12px 6px;
    font-weight: 800;
    color: #5a3a00;
    cursor: pointer;
    font-size: 14px;
}

#autoplay-cancel {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 9px 22px;
    font-weight: 700;
    cursor: pointer;
}

#menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(6,30,38,0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

    #menu-overlay.show {
        display: flex;
    }

#menu-card {
    background: #0a5c72;
    border: 2px solid var(--gold);
    border-radius: 18px;
    padding: 24px 28px;
    text-align: center;
    color: #fff;
    max-width: 280px;
}

    #menu-card h3 {
        margin: 0 0 12px;
        color: var(--gold);
        font-size: 18px;
    }

    #menu-card p {
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.9;
        margin-bottom: 16px;
    }

    #menu-card button {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        border: none;
        border-radius: 18px;
        padding: 10px 24px;
        font-weight: 800;
        color: #5a3a00;
        cursor: pointer;
        margin: 4px;
    }

        #menu-card button.secondary {
            background: rgba(255,255,255,0.15);
            color: #fff;
        }

#toast {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12,34,48,0.9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s,transform .25s;
}

    #toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(4px);
    }

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0.9;
    z-index: 85;
    pointer-events: none;
}

/* ============================================================
   Pesca de la Suerte — default.css
   Lógica: móvil = pantalla < 700px ancho O < 700px alto
           desktop = pantalla >= 700px ancho Y >= 700px alto
   Sin JS, sin clases, puro CSS media query
   ============================================================ */

:root {
    --teal: #1f6b72;
    --sand: #f3dba3;
    --coral: #e0563e;
    --gold: #ffe16a;
    --navy: #0c2230;
    --white: #fdf6e8;
    --sardina: #3a6f96;
    --mero: #d9831f;
    --pargo: #c4221c;
    --game-w: 393px;
    --game-h: 851px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Trebuchet MS',sans-serif;
    background: #06343f;
    user-select: none;
}

/* ============================================================
   MÓVIL — defecto base (sin media query = aplica siempre)
   ============================================================ */
body {
    overflow: hidden;
    touch-action: none;
}

#phone-shell {
    display: none;
}

#phone-bar {
    display: none;
}

#phone-glare {
    display: none;
}

#phone-silent {
    display: none;
}

#phone-vol-up {
    display: none;
}

#phone-vol-down {
    display: none;
}

#phone-cam {
    display: none;
}

#game-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(#5fc6e8,#a8e2ec 45%,#0a5c72 75%);
}

/* ============================================================
   DESKTOP — pantalla grande con mouse
   Solo activa cuando el viewport es suficientemente grande
   ============================================================ */
@media screen and (min-width:900px) and (min-height:700px) and (hover:hover) and (pointer:fine) {
    body {
        overflow: auto;
        touch-action: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: radial-gradient(ellipse at 50% 40%, #0d3d4a 0%, #061820 100%);
    }

    #phone-shell {
        display: flex;
        position: relative;
        width: calc(var(--game-w) + 28px);
        height: calc(var(--game-h) + 72px);
        background: linear-gradient(160deg, #1a1a2e, #0f0f1a);
        border-radius: 44px;
        box-shadow: 0 0 0 1.5px #2a2a3e, 0 0 0 3px #111120, 0 30px 80px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.06);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 36px 14px 36px;
        flex-shrink: 0;
    }

        #phone-shell::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            width: 90px;
            height: 26px;
            background: #000;
            border-radius: 20px;
            box-shadow: 0 0 0 1.5px #1a1a2e;
            z-index: 10;
        }

        #phone-shell::after {
            content: '';
            position: absolute;
            right: -4px;
            top: 38%;
            width: 4px;
            height: 56px;
            background: linear-gradient(180deg, #2a2a3e, #1a1a28);
            border-radius: 0 3px 3px 0;
            box-shadow: 1px 0 4px rgba(0,0,0,0.5);
        }

    #phone-silent, #phone-vol-up, #phone-vol-down {
        display: block;
        position: absolute;
        left: -4px;
        width: 4px;
        background: linear-gradient(180deg, #2a2a3e, #1a1a28);
        border-radius: 3px 0 0 3px;
        box-shadow: -1px 0 4px rgba(0,0,0,0.5);
    }

    #phone-silent {
        top: 24%;
        height: 22px;
    }

    #phone-vol-up {
        top: 34%;
        height: 40px;
    }

    #phone-vol-down {
        top: 43%;
        height: 40px;
    }

    #phone-cam {
        display: block;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        background: #0a0a12;
        border-radius: 50%;
        border: 1.5px solid #1e1e30;
        z-index: 11;
        margin-left: 30px;
    }

    #game-root {
        position: relative !important;
        inset: auto !important;
        width: var(--game-w) !important;
        height: var(--game-h) !important;
        border-radius: 14px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
        overflow: hidden !important;
    }

    #phone-bar {
        display: block;
        width: 100px;
        height: 5px;
        background: rgba(255,255,255,0.25);
        border-radius: 4px;
        margin-top: 10px;
    }

    #phone-glare {
        display: block;
        position: absolute;
        top: 0;
        left: 10%;
        width: 30%;
        height: 55%;
        background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 70%);
        border-radius: 44px 0 0 0;
        pointer-events: none;
    }

    #wheel-stage {
        width: 360px;
        height: 360px;
    }
}

/* ============================================================
   UI DEL JUEGO — elementos dentro de #game-root
   ============================================================ */
#bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
    z-index: 0;
}

#topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    z-index: 50;
    background: linear-gradient(180deg,rgba(6,52,63,0.85),transparent);
}

    #topbar .brand {
        color: var(--white);
        font-weight: 800;
        font-size: 15px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }

#balance-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,225,106,0.5);
    border-radius: 20px;
    padding: 6px 14px;
    color: var(--gold);
    font-weight: 800;
    font-size: 14px;
}

#player-count {
    position: absolute;
    bottom: 6px;
    left: 10px;
    z-index: 49;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    letter-spacing: 0.3px;
    pointer-events: none;
    transition: opacity .5s;
}

    #player-count.pulse {
        animation: pcPulse .6s ease;
    }

@keyframes pcPulse {
    0%,100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

#sound-btn {
    position: absolute;
    top: 64px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 46;
}

#wheel-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

#wheel-stage {
    position: relative;
    width: min(86vw,380px);
    height: min(86vw,380px);
    margin-top: 54px;
}

#wheel-img {
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: rotate(0deg);
    display: block;
}

    #wheel-img svg {
        width: 100%;
        height: 100%;
        display: block;
    }

#pointer-img {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 54px;
    height: 60px;
    transform: translateX(-50%);
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

#status-text {
    margin-top: 10px;
    color: var(--white);
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    min-height: 22px;
    letter-spacing: 0.4px;
}

#countdown-wrap {
    position: absolute;
    top: 64px;
    right: 14px;
    width: 60px;
    height: 60px;
    z-index: 45;
    transition: opacity .3s ease;
}

    #countdown-wrap svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    #countdown-wrap circle.track {
        fill: none;
        stroke: rgba(255,255,255,0.25);
        stroke-width: 5;
    }

    #countdown-wrap circle.ring {
        fill: none;
        stroke: var(--gold);
        stroke-width: 5;
        stroke-linecap: round;
        transition: stroke-dashoffset .1s linear,stroke .2s ease;
    }

    #countdown-wrap.urgent circle.ring {
        stroke: var(--coral);
    }

#countdown-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 900;
    font-size: 18px;
}

#countdown-wrap.urgent #countdown-num {
    color: var(--coral);
}

#countdown-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    font-size: 9px;
    font-weight: 800;
    color: var(--white);
    opacity: 0.85;
    white-space: nowrap;
}

#bet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: linear-gradient(180deg,transparent,rgba(6,40,48,0.92) 30%,rgba(6,40,48,0.97));
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#total-bet-label {
    text-align: center;
    color: var(--white);
    font-size: 12px;
    opacity: 0.85;
}

    #total-bet-label b {
        color: var(--gold);
    }

#bet-slots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.bet-slot {
    flex: 1;
    max-width: 120px;
    border-radius: 12px;
    padding: 8px 4px 6px;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform .1s ease,border-color .15s;
}

    .bet-slot:active {
        transform: scale(0.97);
    }

    .bet-slot.sardina {
        background: linear-gradient(160deg,#4a86ac,#173d57);
    }

    .bet-slot.mero {
        background: linear-gradient(160deg,#f0a83a,#8a4a0c);
    }

    .bet-slot.pargo {
        background: linear-gradient(160deg,#e0564a,#6e0c0c);
    }

    .bet-slot.active-glow {
        border-color: var(--gold);
        box-shadow: 0 0 14px rgba(255,225,106,0.7);
    }

    .bet-slot .slot-name {
        color: #fff;
        font-weight: 800;
        font-size: 12.5px;
        display: block;
        margin-top: 2px;
    }

    .bet-slot .slot-mult {
        display: none;
    }

    .bet-slot .slot-amount {
        margin-top: 4px;
        background: rgba(0,0,0,0.35);
        border-radius: 10px;
        color: var(--gold);
        font-weight: 800;
        font-size: 12px;
        padding: 3px 6px;
        display: inline-block;
        min-width: 46px;
    }

    .bet-slot .slot-fishicon {
        width: 48px;
        height: 32px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    }

#bet-slots-side {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}

.bet-slot-side {
    flex: 1;
    max-width: 160px;
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform .1s ease,border-color .15s;
}

    .bet-slot-side:active {
        transform: scale(0.97);
    }

    .bet-slot-side.azul {
        background: linear-gradient(120deg,#3a6f96,#1f4a68);
    }

    .bet-slot-side.blanco {
        background: linear-gradient(120deg,#dce9ee,#b8cdd6);
    }

        .bet-slot-side.blanco .side-name {
            color: #173d57;
        }

    .bet-slot-side.active-glow {
        border-color: var(--gold);
        box-shadow: 0 0 14px rgba(255,225,106,0.7);
    }

    .bet-slot-side .side-name {
        color: #fff;
        font-weight: 800;
        font-size: 12px;
    }

    .bet-slot-side .side-mult {
        color: var(--gold);
        font-weight: 800;
        font-size: 10.5px;
        flex: 1;
        text-align: center;
    }

    .bet-slot-side.blanco .side-mult {
        color: #a8720a;
    }

    .bet-slot-side .slot-amount {
        background: rgba(0,0,0,0.35);
        border-radius: 8px;
        color: var(--gold);
        font-weight: 800;
        font-size: 11px;
        padding: 3px 6px;
        min-width: 38px;
        text-align: center;
    }

    .bet-slot-side.blanco .slot-amount {
        background: rgba(0,0,0,0.18);
        color: #7a4f00;
    }

#chip-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 2px 0;
}

.chip {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease;
    position: relative;
    overflow: hidden;
    /* Borde exterior doble — efecto ficha de casino */
    border: 2.5px solid rgba(255,255,255,0.9);
    outline: 1.5px solid rgba(0,0,0,0.35);
    outline-offset: -4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.25);
}
    /* Círculo interior decorativo */
    .chip::before {
        content: '';
        position: absolute;
        inset: 5px;
        border-radius: 50%;
        border: 1.5px dashed rgba(255,255,255,0.45);
        pointer-events: none;
    }
/* Texto del valor */
.chip-val {
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    line-height: 1;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 1;
}
/* Subtexto Casino Juangriego */
.chip-sub {
    font-size: 4.5px;
    font-weight: 800;
    color: rgba(255,255,255,0.80);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 1px;
}

.chip:active {
    transform: scale(0.9);
}

.chip.selected {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--gold),0 4px 10px rgba(0,0,0,0.5);
}

.chip[data-v="100"] {
    background: radial-gradient(circle at 35% 28%,#8fb8c4,#2e5a6a);
}

.chip[data-v="500"] {
    background: radial-gradient(circle at 35% 28%,#e87a6a,#8a2218);
}

.chip[data-v="1000"] {
    background: radial-gradient(circle at 35% 28%,#6ec98a,#1a6a38);
}

.chip[data-v="5000"] {
    background: radial-gradient(circle at 35% 28%,#f0c25a,#8a5a08);
}

.chip[data-v="10000"] {
    background: radial-gradient(circle at 35% 28%,#c8a8f8,#4a1a9e);
}

#action-row {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.round-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .round-btn:active {
        transform: scale(0.9);
    }

#cycle-indicator {
    flex: 1;
    max-width: 240px;
    height: 54px;
    border-radius: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.4px;
    transition: background .25s,color .25s;
}

    #cycle-indicator.phase-betting {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        color: #5a3a00;
        box-shadow: 0 5px 0 #a87010,0 8px 14px rgba(0,0,0,0.35);
    }

    #cycle-indicator.phase-locked {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.75);
        border: 2px solid rgba(255,255,255,0.25);
    }

    #cycle-indicator .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: currentColor;
        animation: pulseDot 1s infinite;
    }

@keyframes pulseDot {
    0%,100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

#auto-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.auto-btn {
    flex: 1;
    max-width: 170px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 16px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 9px 6px;
    cursor: pointer;
}

    .auto-btn:active {
        transform: scale(0.96);
    }

    .auto-btn.active-auto {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        color: #5a3a00;
        border-color: transparent;
    }

#bet-panel.locked #bet-slots,
#bet-panel.locked #bet-slots-side,
#bet-panel.locked #chip-row {
    opacity: 0.5;
}

#bet-panel.locked .bet-slot,
#bet-panel.locked .bet-slot-side,
#bet-panel.locked .chip,
#bet-panel.locked .auto-btn,
#bet-panel.locked .round-btn {
    pointer-events: none;
    opacity: 0.4;
}

#aquarium-view {
    position: absolute;
    inset: 0;
    z-index: 55;
    display: none;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

    #aquarium-view.show {
        display: flex;
    }

#aquarium-bg {
    position: absolute;
    inset: 0;
    background: url('img/fondo-acuario.png') center center/cover no-repeat;
    filter: brightness(0.7);
}

#aquarium-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#aquarium-top {
    position: relative;
    z-index: 2;
    margin-top: 24px;
    text-align: center;
    padding: 0 20px;
}

    #aquarium-top h2 {
        color: var(--gold);
        font-size: 26px;
        font-weight: 900;
        margin: 0 0 4px;
        text-shadow: 0 0 20px rgba(255,225,106,0.6),0 2px 8px rgba(0,0,0,0.6);
    }

    #aquarium-top p {
        color: rgba(255,255,255,0.8);
        font-size: 13px;
        margin: 0;
    }

#aquarium-result {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(transparent,rgba(0,0,0,0.75) 30%,rgba(0,0,0,0.92));
    padding: 20px 24px 28px;
    text-align: center;
}

.aq-mult {
    font-size: 56px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(255,225,106,0.9);
    animation: glowP 0.8s ease infinite alternate;
    line-height: 1;
}

@keyframes glowP {
    from {
        text-shadow: 0 0 20px rgba(255,225,106,0.6);
    }

    to {
        text-shadow: 0 0 50px rgba(255,225,106,1),0 0 80px rgba(255,200,0,0.4);
    }
}

.aq-label {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin: 6px 0 8px;
    font-weight: 700;
}

.aq-prize {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
    opacity: 0;
    transition: opacity 0.5s;
}

    .aq-prize.show {
        opacity: 1;
    }

#aquarium-continue {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 24px;
    padding: 13px 36px;
    font-weight: 900;
    font-size: 16px;
    color: #5a3a00;
    box-shadow: 0 5px 0 #a87010;
    cursor: pointer;
}

#bet-summary-overlay {
    position: absolute;
    inset: 0;
    z-index: 52;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(6,30,38,0.5);
}

    #bet-summary-overlay.show {
        display: flex;
    }

#bet-summary-card {
    background: radial-gradient(circle at 30% 20%,#1a7a4a,#0a3a20);
    border: 6px solid #e8c984;
    border-radius: 50%;
    width: 210px;
    height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #8a6a32,0 12px 30px rgba(0,0,0,0.6);
    position: relative;
    gap: 4px;
    animation: chipIn 0.35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes chipIn {
    from {
        transform: scale(0.3) rotate(-15deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

#bet-summary-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(232,201,132,0.45);
}

.chip-label {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chip-amount {
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.chip-bets {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.7;
    white-space: pre-line;
}

#result-chip-overlay {
    position: absolute;
    inset: 0;
    z-index: 53;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

    #result-chip-overlay.show {
        display: flex;
    }

#result-chip-card {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 4px;
    animation: chipPop 0.4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes chipPop {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

#result-chip-card.win {
    background: radial-gradient(circle at 30% 20%,#c89020,#7a5010);
    border: 6px solid #fff3c0;
}

#result-chip-card.loss {
    background: radial-gradient(circle at 30% 20%,#4a1515,#1a0505);
    border: 6px solid rgba(255,100,80,0.4);
}

#result-chip-card.neutral {
    background: radial-gradient(circle at 30% 20%,#1a4a6a,#0a2a3a);
    border: 6px solid rgba(255,255,255,0.3);
}

#result-chip-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.25);
}

.rchip-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

.rchip-amount {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.rchip-detail {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    font-weight: 700;
    text-align: center;
}

#bonus-view {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    #bonus-view.show {
        display: flex;
    }

#bonus-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
}

#muelle-sign {
    display: none;
}

.muelle-text {
    display: inline-block;
    background: rgba(100,60,15,0.88);
    border: 3px solid #c8a050;
    border-radius: 8px;
    padding: 5px 16px;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    font-family: Georgia,serif;
}

#love-sign {
    position: absolute;
    bottom: 30%;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
    flex-wrap: wrap;
}

.love-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

#bonus-banner {
    margin-top: 50px;
    background: rgba(12,34,48,0.65);
    border: 1px solid var(--gold);
    border-radius: 14px;
    padding: 7px 16px;
    color: var(--gold);
    font-weight: 900;
    font-size: 13px;
    text-align: center;
    z-index: 5;
    position: relative;
    max-width: 92%;
}

#catch-zone {
    position: relative;
    flex: 1;
    width: 100%;
}

#pescador-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8%;
    width: 45%;
    max-width: 190px;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.3));
    z-index: 4;
    transform-origin: bottom center;
}

#line-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

#caught-fish {
    position: absolute;
    width: 28%;
    max-width: 160px;
    opacity: 0;
    transform: rotate(90deg) scale(0.1);
    transition: none;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.4));
    z-index: 4;
}

#mult-badge {
    position: absolute;
    background: linear-gradient(180deg,#fff3c0,#e0a82a);
    border: 3px solid #6e3d00;
    border-radius: 10px;
    padding: 6px 12px;
    font-weight: 900;
    font-size: 20px;
    color: #6e3d00;
    opacity: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    white-space: nowrap;
    z-index: 5;
}

#bonus-footer {
    width: 100%;
    padding: 12px 16px 18px;
    text-align: center;
    z-index: 5;
}

#bonus-total {
    color: var(--white);
    font-size: 14px;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

    #bonus-total b {
        color: var(--gold);
        font-size: 18px;
        white-space: nowrap;
    }

#bonus-continue {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 24px;
    padding: 13px 36px;
    font-weight: 900;
    font-size: 16px;
    color: #5a3a00;
    box-shadow: 0 5px 0 #a87010;
    cursor: pointer;
}

#win-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6,30,38,0.55);
}

    #win-overlay.show {
        display: flex;
    }

#win-card {
    background: linear-gradient(160deg,#0f7f95,#0a5c72);
    border: 3px solid var(--gold);
    border-radius: 22px;
    padding: 26px 30px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    max-width: 300px;
}

    #win-card .win-title {
        color: var(--gold);
        font-weight: 900;
        font-size: 20px;
        margin-bottom: 6px;
    }

    #win-card .win-amount {
        color: #fff;
        font-weight: 900;
        font-size: 32px;
        margin-bottom: 14px;
    }

    #win-card button {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        border: none;
        border-radius: 20px;
        padding: 11px 30px;
        font-weight: 900;
        font-size: 15px;
        color: #5a3a00;
        box-shadow: 0 4px 0 #a87010;
        cursor: pointer;
    }

#reload-overlay {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(6,30,38,0.92);
    display: none;
    align-items: center;
    justify-content: center;
}

    #reload-overlay.show {
        display: flex;
    }

#reload-card {
    background: linear-gradient(160deg,#0f7f95,#0a5c72);
    border: 3px solid var(--gold);
    border-radius: 22px;
    padding: 26px 24px;
    text-align: center;
    color: #fff;
    max-width: 300px;
    width: 90%;
}

    #reload-card h3 {
        color: var(--gold);
        font-size: 20px;
        margin: 0 0 10px;
        font-weight: 900;
    }

    #reload-card p {
        font-size: 13px;
        opacity: 0.9;
        margin: 0 0 16px;
    }

#reload-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.reload-opt {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 14px;
    padding: 12px 6px;
    font-weight: 800;
    color: #5a3a00;
    font-size: 13px;
    cursor: pointer;
}

#reload-custom-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

#reload-custom-input {
    flex: 1;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

    #reload-custom-input::placeholder {
        color: rgba(255,255,255,0.5);
    }

#reload-custom-btn {
    background: rgba(255,255,255,0.2);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

#autoplay-overlay {
    position: absolute;
    inset: 0;
    z-index: 96;
    background: rgba(6,30,38,0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

    #autoplay-overlay.show {
        display: flex;
    }

#autoplay-card {
    background: #0a5c72;
    border: 2px solid var(--gold);
    border-radius: 18px;
    padding: 22px 24px;
    text-align: center;
    color: #fff;
    max-width: 280px;
}

    #autoplay-card h3 {
        margin: 0 0 8px;
        color: var(--gold);
        font-size: 18px;
    }

    #autoplay-card p {
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.9;
        margin-bottom: 14px;
    }

#autoplay-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.autoplay-opt {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 14px;
    padding: 12px 6px;
    font-weight: 800;
    color: #5a3a00;
    cursor: pointer;
    font-size: 14px;
}

#autoplay-cancel {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 9px 22px;
    font-weight: 700;
    cursor: pointer;
}

#menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(6,30,38,0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

    #menu-overlay.show {
        display: flex;
    }

#menu-card {
    background: #0a5c72;
    border: 2px solid var(--gold);
    border-radius: 18px;
    padding: 24px 28px;
    text-align: center;
    color: #fff;
    max-width: 280px;
}

    #menu-card h3 {
        margin: 0 0 12px;
        color: var(--gold);
        font-size: 18px;
    }

    #menu-card p {
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.9;
        margin-bottom: 16px;
    }

    #menu-card button {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        border: none;
        border-radius: 18px;
        padding: 10px 24px;
        font-weight: 800;
        color: #5a3a00;
        cursor: pointer;
        margin: 4px;
    }

        #menu-card button.secondary {
            background: rgba(255,255,255,0.15);
            color: #fff;
        }

#toast {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12,34,48,0.9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s,transform .25s;
}

    #toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(4px);
    }

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0.9;
    z-index: 85;
    pointer-events: none;
}

/* ============================================================
   Pesca de la Suerte — default.css
   Lógica: móvil = pantalla < 700px ancho O < 700px alto
           desktop = pantalla >= 700px ancho Y >= 700px alto
   Sin JS, sin clases, puro CSS media query
   ============================================================ */

:root {
    --teal: #1f6b72;
    --sand: #f3dba3;
    --coral: #e0563e;
    --gold: #ffe16a;
    --navy: #0c2230;
    --white: #fdf6e8;
    --sardina: #3a6f96;
    --mero: #d9831f;
    --pargo: #c4221c;
    --game-w: 393px;
    --game-h: 851px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Trebuchet MS',sans-serif;
    background: #06343f;
    user-select: none;
}

/* ============================================================
   MÓVIL — defecto base (sin media query = aplica siempre)
   ============================================================ */
body {
    overflow: hidden;
    touch-action: none;
}

#phone-shell {
    display: none;
}

#phone-bar {
    display: none;
}

#phone-glare {
    display: none;
}

#phone-silent {
    display: none;
}

#phone-vol-up {
    display: none;
}

#phone-vol-down {
    display: none;
}

#phone-cam {
    display: none;
}

#game-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(#5fc6e8,#a8e2ec 45%,#0a5c72 75%);
}

/* ============================================================
   DESKTOP — pantalla grande con mouse
   Solo activa cuando el viewport es suficientemente grande
   ============================================================ */
@media screen and (min-width:900px) and (min-height:700px) and (hover:hover) and (pointer:fine) {
    body {
        overflow: auto;
        touch-action: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: radial-gradient(ellipse at 50% 40%, #0d3d4a 0%, #061820 100%);
    }

    #phone-shell {
        display: flex;
        position: relative;
        width: calc(var(--game-w) + 28px);
        height: calc(var(--game-h) + 72px);
        background: linear-gradient(160deg, #1a1a2e, #0f0f1a);
        border-radius: 44px;
        box-shadow: 0 0 0 1.5px #2a2a3e, 0 0 0 3px #111120, 0 30px 80px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.06);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 36px 14px 36px;
        flex-shrink: 0;
    }

        #phone-shell::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            width: 90px;
            height: 26px;
            background: #000;
            border-radius: 20px;
            box-shadow: 0 0 0 1.5px #1a1a2e;
            z-index: 10;
        }

        #phone-shell::after {
            content: '';
            position: absolute;
            right: -4px;
            top: 38%;
            width: 4px;
            height: 56px;
            background: linear-gradient(180deg, #2a2a3e, #1a1a28);
            border-radius: 0 3px 3px 0;
            box-shadow: 1px 0 4px rgba(0,0,0,0.5);
        }

    #phone-silent, #phone-vol-up, #phone-vol-down {
        display: block;
        position: absolute;
        left: -4px;
        width: 4px;
        background: linear-gradient(180deg, #2a2a3e, #1a1a28);
        border-radius: 3px 0 0 3px;
        box-shadow: -1px 0 4px rgba(0,0,0,0.5);
    }

    #phone-silent {
        top: 24%;
        height: 22px;
    }

    #phone-vol-up {
        top: 34%;
        height: 40px;
    }

    #phone-vol-down {
        top: 43%;
        height: 40px;
    }

    #phone-cam {
        display: block;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        background: #0a0a12;
        border-radius: 50%;
        border: 1.5px solid #1e1e30;
        z-index: 11;
        margin-left: 30px;
    }

    #game-root {
        position: relative !important;
        inset: auto !important;
        width: var(--game-w) !important;
        height: var(--game-h) !important;
        border-radius: 14px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
        overflow: hidden !important;
    }

    #phone-bar {
        display: block;
        width: 100px;
        height: 5px;
        background: rgba(255,255,255,0.25);
        border-radius: 4px;
        margin-top: 10px;
    }

    #phone-glare {
        display: block;
        position: absolute;
        top: 0;
        left: 10%;
        width: 30%;
        height: 55%;
        background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 70%);
        border-radius: 44px 0 0 0;
        pointer-events: none;
    }

    #wheel-stage {
        width: 360px;
        height: 360px;
    }
}

/* ============================================================
   UI DEL JUEGO — elementos dentro de #game-root
   ============================================================ */
#bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
    z-index: 0;
}

#topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    z-index: 50;
    background: linear-gradient(180deg,rgba(6,52,63,0.85),transparent);
}

    #topbar .brand {
        color: var(--white);
        font-weight: 800;
        font-size: 15px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }

#balance-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,225,106,0.5);
    border-radius: 20px;
    padding: 6px 14px;
    color: var(--gold);
    font-weight: 800;
    font-size: 14px;
}

#player-count {
    position: absolute;
    bottom: 6px;
    left: 10px;
    z-index: 49;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    letter-spacing: 0.3px;
    pointer-events: none;
    transition: opacity .5s;
}

    #player-count.pulse {
        animation: pcPulse .6s ease;
    }

@keyframes pcPulse {
    0%,100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

#sound-btn {
    position: absolute;
    top: 64px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 46;
}

#wheel-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

#wheel-stage {
    position: relative;
    width: min(86vw,380px);
    height: min(86vw,380px);
    margin-top: 54px;
}

#wheel-img {
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: rotate(0deg);
    display: block;
}

    #wheel-img svg {
        width: 100%;
        height: 100%;
        display: block;
    }

#pointer-img {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 54px;
    height: 60px;
    transform: translateX(-50%);
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

#status-text {
    margin-top: 10px;
    color: var(--white);
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    min-height: 22px;
    letter-spacing: 0.4px;
}

#countdown-wrap {
    position: absolute;
    top: 64px;
    right: 14px;
    width: 60px;
    height: 60px;
    z-index: 45;
    transition: opacity .3s ease;
}

    #countdown-wrap svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    #countdown-wrap circle.track {
        fill: none;
        stroke: rgba(255,255,255,0.25);
        stroke-width: 5;
    }

    #countdown-wrap circle.ring {
        fill: none;
        stroke: var(--gold);
        stroke-width: 5;
        stroke-linecap: round;
        transition: stroke-dashoffset .1s linear,stroke .2s ease;
    }

    #countdown-wrap.urgent circle.ring {
        stroke: var(--coral);
    }

#countdown-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 900;
    font-size: 18px;
}

#countdown-wrap.urgent #countdown-num {
    color: var(--coral);
}

#countdown-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    font-size: 9px;
    font-weight: 800;
    color: var(--white);
    opacity: 0.85;
    white-space: nowrap;
}

#bet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: linear-gradient(180deg,transparent,rgba(6,40,48,0.92) 30%,rgba(6,40,48,0.97));
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#total-bet-label {
    text-align: center;
    color: var(--white);
    font-size: 12px;
    opacity: 0.85;
}

    #total-bet-label b {
        color: var(--gold);
    }

#bet-slots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.bet-slot {
    flex: 1;
    max-width: 120px;
    border-radius: 12px;
    padding: 8px 4px 6px;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform .18s ease,border-color .15s,box-shadow .18s ease;
}

    .bet-slot:active {
        transform: scale(0.97);
    }

    .bet-slot.sardina {
        background: linear-gradient(160deg,#4a86ac,#173d57);
    }

    .bet-slot.mero {
        background: linear-gradient(160deg,#f0a83a,#8a4a0c);
    }

    .bet-slot.pargo {
        background: linear-gradient(160deg,#e0564a,#6e0c0c);
    }

    .bet-slot.active-glow {
        border-color: var(--gold);
        box-shadow: 0 0 14px rgba(255,225,106,0.7);
    }

    .bet-slot .slot-name {
        color: #fff;
        font-weight: 800;
        font-size: 12.5px;
        display: block;
        margin-top: 2px;
    }

    .bet-slot .slot-mult {
        display: none;
    }

    .bet-slot .slot-amount {
        margin-top: 4px;
        background: rgba(0,0,0,0.35);
        border-radius: 10px;
        color: var(--gold);
        font-weight: 800;
        font-size: 12px;
        padding: 3px 6px;
        display: inline-block;
        min-width: 46px;
    }

    .bet-slot .slot-fishicon {
        width: 48px;
        height: 32px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    }

#bet-slots-side {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}

.bet-slot-side {
    flex: 1;
    max-width: 160px;
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform .1s ease,border-color .15s;
}

    .bet-slot-side:active {
        transform: scale(0.97);
    }

    .bet-slot-side.azul {
        background: linear-gradient(120deg,#3a6f96,#1f4a68);
    }

    .bet-slot-side.blanco {
        background: linear-gradient(120deg,#dce9ee,#b8cdd6);
    }

        .bet-slot-side.blanco .side-name {
            color: #173d57;
        }

    .bet-slot-side.active-glow {
        border-color: var(--gold);
        box-shadow: 0 0 14px rgba(255,225,106,0.7);
    }

    .bet-slot-side .side-name {
        color: #fff;
        font-weight: 800;
        font-size: 12px;
    }

    .bet-slot-side .side-mult {
        color: var(--gold);
        font-weight: 800;
        font-size: 10.5px;
        flex: 1;
        text-align: center;
    }

    .bet-slot-side.blanco .side-mult {
        color: #a8720a;
    }

    .bet-slot-side .slot-amount {
        background: rgba(0,0,0,0.35);
        border-radius: 8px;
        color: var(--gold);
        font-weight: 800;
        font-size: 11px;
        padding: 3px 6px;
        min-width: 38px;
        text-align: center;
    }

    .bet-slot-side.blanco .slot-amount {
        background: rgba(0,0,0,0.18);
        color: #7a4f00;
    }

#chip-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 2px 0;
}

.chip {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease;
    position: relative;
    overflow: hidden;
    /* Borde exterior doble — efecto ficha de casino */
    border: 2.5px solid rgba(255,255,255,0.9);
    outline: 1.5px solid rgba(0,0,0,0.35);
    outline-offset: -4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.25);
}
    /* Círculo interior decorativo */
    .chip::before {
        content: '';
        position: absolute;
        inset: 5px;
        border-radius: 50%;
        border: 1.5px dashed rgba(255,255,255,0.45);
        pointer-events: none;
    }
/* Texto del valor */
.chip-val {
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    line-height: 1;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 1;
}
/* Subtexto Casino Juangriego */
.chip-sub {
    font-size: 4.5px;
    font-weight: 800;
    color: rgba(255,255,255,0.80);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 1px;
}

.chip:active {
    transform: scale(0.9);
}

.chip.selected {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--gold),0 4px 10px rgba(0,0,0,0.5);
}

.chip[data-v="100"] {
    background: radial-gradient(circle at 35% 28%,#8fb8c4,#2e5a6a);
}

.chip[data-v="500"] {
    background: radial-gradient(circle at 35% 28%,#e87a6a,#8a2218);
}

.chip[data-v="1000"] {
    background: radial-gradient(circle at 35% 28%,#6ec98a,#1a6a38);
}

.chip[data-v="5000"] {
    background: radial-gradient(circle at 35% 28%,#f0c25a,#8a5a08);
}

.chip[data-v="10000"] {
    background: radial-gradient(circle at 35% 28%,#c8a8f8,#4a1a9e);
}

#action-row {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.round-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .round-btn:active {
        transform: scale(0.9);
    }

#cycle-indicator {
    flex: 1;
    max-width: 240px;
    height: 54px;
    border-radius: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.4px;
    transition: background .25s,color .25s;
}

    #cycle-indicator.phase-betting {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        color: #5a3a00;
        box-shadow: 0 5px 0 #a87010,0 8px 14px rgba(0,0,0,0.35);
    }

    #cycle-indicator.phase-locked {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.75);
        border: 2px solid rgba(255,255,255,0.25);
    }

    #cycle-indicator .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: currentColor;
        animation: pulseDot 1s infinite;
    }

@keyframes pulseDot {
    0%,100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

#auto-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.auto-btn {
    flex: 1;
    max-width: 170px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 16px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 9px 6px;
    cursor: pointer;
}

    .auto-btn:active {
        transform: scale(0.96);
    }

    .auto-btn.active-auto {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        color: #5a3a00;
        border-color: transparent;
    }

#bet-panel.locked #bet-slots,
#bet-panel.locked #bet-slots-side,
#bet-panel.locked #chip-row {
    opacity: 0.5;
}

#bet-panel.locked .bet-slot,
#bet-panel.locked .bet-slot-side,
#bet-panel.locked .chip,
#bet-panel.locked .auto-btn,
#bet-panel.locked .round-btn {
    pointer-events: none;
    opacity: 0.4;
}

#aquarium-view {
    position: absolute;
    inset: 0;
    z-index: 55;
    display: none;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

    #aquarium-view.show {
        display: flex;
    }

#aquarium-bg {
    position: absolute;
    inset: 0;
    background: url('img/fondo-acuario.png') center center/cover no-repeat;
    filter: brightness(0.7);
}

#aquarium-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#aquarium-top {
    position: relative;
    z-index: 2;
    margin-top: 24px;
    text-align: center;
    padding: 0 20px;
}

    #aquarium-top h2 {
        color: var(--gold);
        font-size: 26px;
        font-weight: 900;
        margin: 0 0 4px;
        text-shadow: 0 0 20px rgba(255,225,106,0.6),0 2px 8px rgba(0,0,0,0.6);
    }

    #aquarium-top p {
        color: rgba(255,255,255,0.8);
        font-size: 13px;
        margin: 0;
    }

#aquarium-result {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(transparent,rgba(0,0,0,0.75) 30%,rgba(0,0,0,0.92));
    padding: 20px 24px 28px;
    text-align: center;
}

.aq-mult {
    font-size: 56px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(255,225,106,0.9);
    animation: glowP 0.8s ease infinite alternate;
    line-height: 1;
}

@keyframes glowP {
    from {
        text-shadow: 0 0 20px rgba(255,225,106,0.6);
    }

    to {
        text-shadow: 0 0 50px rgba(255,225,106,1),0 0 80px rgba(255,200,0,0.4);
    }
}

.aq-label {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin: 6px 0 8px;
    font-weight: 700;
}

.aq-prize {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
    opacity: 0;
    transition: opacity 0.5s;
}

    .aq-prize.show {
        opacity: 1;
    }

#aquarium-continue {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 24px;
    padding: 13px 36px;
    font-weight: 900;
    font-size: 16px;
    color: #5a3a00;
    box-shadow: 0 5px 0 #a87010;
    cursor: pointer;
}

#bet-summary-overlay {
    position: absolute;
    inset: 0;
    z-index: 52;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(6,30,38,0.5);
}

    #bet-summary-overlay.show {
        display: flex;
    }

#bet-summary-card {
    background: radial-gradient(circle at 30% 20%,#1a7a4a,#0a3a20);
    border: 6px solid #e8c984;
    border-radius: 50%;
    width: 210px;
    height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #8a6a32,0 12px 30px rgba(0,0,0,0.6);
    position: relative;
    gap: 4px;
    animation: chipIn 0.35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes chipIn {
    from {
        transform: scale(0.3) rotate(-15deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

#bet-summary-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(232,201,132,0.45);
}

.chip-label {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chip-amount {
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.chip-bets {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.7;
    white-space: pre-line;
}

#result-chip-overlay {
    position: absolute;
    inset: 0;
    z-index: 53;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

    #result-chip-overlay.show {
        display: flex;
    }

#result-chip-card {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 4px;
    animation: chipPop 0.4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes chipPop {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

#result-chip-card.win {
    background: radial-gradient(circle at 30% 20%,#c89020,#7a5010);
    border: 6px solid #fff3c0;
}

#result-chip-card.loss {
    background: radial-gradient(circle at 30% 20%,#4a1515,#1a0505);
    border: 6px solid rgba(255,100,80,0.4);
}

#result-chip-card.neutral {
    background: radial-gradient(circle at 30% 20%,#1a4a6a,#0a2a3a);
    border: 6px solid rgba(255,255,255,0.3);
}

#result-chip-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.25);
}

.rchip-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

.rchip-amount {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.rchip-detail {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    font-weight: 700;
    text-align: center;
}

#bonus-view {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    #bonus-view.show {
        display: flex;
    }

#bonus-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
}

#muelle-sign {
    display: none;
}

.muelle-text {
    display: inline-block;
    background: rgba(100,60,15,0.88);
    border: 3px solid #c8a050;
    border-radius: 8px;
    padding: 5px 16px;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    font-family: Georgia,serif;
}

#love-sign {
    position: absolute;
    bottom: 30%;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
    flex-wrap: wrap;
}

.love-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

#bonus-banner {
    margin-top: 50px;
    background: rgba(12,34,48,0.65);
    border: 1px solid var(--gold);
    border-radius: 14px;
    padding: 7px 16px;
    color: var(--gold);
    font-weight: 900;
    font-size: 13px;
    text-align: center;
    z-index: 5;
    position: relative;
    max-width: 92%;
}

#catch-zone {
    position: relative;
    flex: 1;
    width: 100%;
}

#pescador-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8%;
    width: 45%;
    max-width: 190px;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.3));
    z-index: 4;
    transform-origin: bottom center;
}

#line-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

#caught-fish {
    position: absolute;
    width: 28%;
    max-width: 160px;
    opacity: 0;
    transform: rotate(90deg) scale(0.1);
    transition: none;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.4));
    z-index: 4;
}

#mult-badge {
    position: absolute;
    background: linear-gradient(180deg,#fff3c0,#e0a82a);
    border: 3px solid #6e3d00;
    border-radius: 10px;
    padding: 6px 12px;
    font-weight: 900;
    font-size: 20px;
    color: #6e3d00;
    opacity: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    white-space: nowrap;
    z-index: 5;
}

#bonus-footer {
    width: 100%;
    padding: 12px 16px 18px;
    text-align: center;
    z-index: 5;
}

#bonus-total {
    color: var(--white);
    font-size: 14px;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

    #bonus-total b {
        color: var(--gold);
        font-size: 18px;
        white-space: nowrap;
    }

#bonus-continue {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 24px;
    padding: 13px 36px;
    font-weight: 900;
    font-size: 16px;
    color: #5a3a00;
    box-shadow: 0 5px 0 #a87010;
    cursor: pointer;
}

#win-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6,30,38,0.55);
}

    #win-overlay.show {
        display: flex;
    }

#win-card {
    background: linear-gradient(160deg,#0f7f95,#0a5c72);
    border: 3px solid var(--gold);
    border-radius: 22px;
    padding: 26px 30px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    max-width: 300px;
}

    #win-card .win-title {
        color: var(--gold);
        font-weight: 900;
        font-size: 20px;
        margin-bottom: 6px;
    }

    #win-card .win-amount {
        color: #fff;
        font-weight: 900;
        font-size: 32px;
        margin-bottom: 14px;
    }

    #win-card button {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        border: none;
        border-radius: 20px;
        padding: 11px 30px;
        font-weight: 900;
        font-size: 15px;
        color: #5a3a00;
        box-shadow: 0 4px 0 #a87010;
        cursor: pointer;
    }

#reload-overlay {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(6,30,38,0.92);
    display: none;
    align-items: center;
    justify-content: center;
}

    #reload-overlay.show {
        display: flex;
    }

#reload-card {
    background: linear-gradient(160deg,#0f7f95,#0a5c72);
    border: 3px solid var(--gold);
    border-radius: 22px;
    padding: 26px 24px;
    text-align: center;
    color: #fff;
    max-width: 300px;
    width: 90%;
}

    #reload-card h3 {
        color: var(--gold);
        font-size: 20px;
        margin: 0 0 10px;
        font-weight: 900;
    }

    #reload-card p {
        font-size: 13px;
        opacity: 0.9;
        margin: 0 0 16px;
    }

#reload-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.reload-opt {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 14px;
    padding: 12px 6px;
    font-weight: 800;
    color: #5a3a00;
    font-size: 13px;
    cursor: pointer;
}

#reload-custom-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

#reload-custom-input {
    flex: 1;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

    #reload-custom-input::placeholder {
        color: rgba(255,255,255,0.5);
    }

#reload-custom-btn {
    background: rgba(255,255,255,0.2);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

#autoplay-overlay {
    position: absolute;
    inset: 0;
    z-index: 96;
    background: rgba(6,30,38,0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

    #autoplay-overlay.show {
        display: flex;
    }

#autoplay-card {
    background: #0a5c72;
    border: 2px solid var(--gold);
    border-radius: 18px;
    padding: 22px 24px;
    text-align: center;
    color: #fff;
    max-width: 280px;
}

    #autoplay-card h3 {
        margin: 0 0 8px;
        color: var(--gold);
        font-size: 18px;
    }

    #autoplay-card p {
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.9;
        margin-bottom: 14px;
    }

#autoplay-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.autoplay-opt {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 14px;
    padding: 12px 6px;
    font-weight: 800;
    color: #5a3a00;
    cursor: pointer;
    font-size: 14px;
}

#autoplay-cancel {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 9px 22px;
    font-weight: 700;
    cursor: pointer;
}

#menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(6,30,38,0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

    #menu-overlay.show {
        display: flex;
    }

#menu-card {
    background: #0a5c72;
    border: 2px solid var(--gold);
    border-radius: 18px;
    padding: 24px 28px;
    text-align: center;
    color: #fff;
    max-width: 280px;
}

    #menu-card h3 {
        margin: 0 0 12px;
        color: var(--gold);
        font-size: 18px;
    }

    #menu-card p {
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.9;
        margin-bottom: 16px;
    }

    #menu-card button {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        border: none;
        border-radius: 18px;
        padding: 10px 24px;
        font-weight: 800;
        color: #5a3a00;
        cursor: pointer;
        margin: 4px;
    }

        #menu-card button.secondary {
            background: rgba(255,255,255,0.15);
            color: #fff;
        }

#toast {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12,34,48,0.9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s,transform .25s;
}

    #toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(4px);
    }

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0.9;
    z-index: 85;
    pointer-events: none;
}

/* ============================================================
   Pesca de la Suerte — default.css
   Lógica: móvil = pantalla < 700px ancho O < 700px alto
           desktop = pantalla >= 700px ancho Y >= 700px alto
   Sin JS, sin clases, puro CSS media query
   ============================================================ */

:root {
    --teal: #1f6b72;
    --sand: #f3dba3;
    --coral: #e0563e;
    --gold: #ffe16a;
    --navy: #0c2230;
    --white: #fdf6e8;
    --sardina: #3a6f96;
    --mero: #d9831f;
    --pargo: #c4221c;
    --game-w: 393px;
    --game-h: 851px;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Trebuchet MS',sans-serif;
    background: #06343f;
    user-select: none;
}

/* ============================================================
   MÓVIL — defecto base (sin media query = aplica siempre)
   ============================================================ */
body {
    overflow: hidden;
    touch-action: none;
}

#phone-shell {
    display: none;
}

#phone-bar {
    display: none;
}

#phone-glare {
    display: none;
}

#phone-silent {
    display: none;
}

#phone-vol-up {
    display: none;
}

#phone-vol-down {
    display: none;
}

#phone-cam {
    display: none;
}

#game-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(#5fc6e8,#a8e2ec 45%,#0a5c72 75%);
}

/* ============================================================
   DESKTOP — pantalla grande con mouse
   Solo activa cuando el viewport es suficientemente grande
   ============================================================ */
@media screen and (min-width:900px) and (min-height:700px) and (hover:hover) and (pointer:fine) {
    body {
        overflow: auto;
        touch-action: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: radial-gradient(ellipse at 50% 40%, #0d3d4a 0%, #061820 100%);
    }

    #phone-shell {
        display: flex;
        position: relative;
        width: calc(var(--game-w) + 28px);
        height: calc(var(--game-h) + 72px);
        background: linear-gradient(160deg, #1a1a2e, #0f0f1a);
        border-radius: 44px;
        box-shadow: 0 0 0 1.5px #2a2a3e, 0 0 0 3px #111120, 0 30px 80px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.06);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 36px 14px 36px;
        flex-shrink: 0;
    }

        #phone-shell::before {
            content: '';
            position: absolute;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            width: 90px;
            height: 26px;
            background: #000;
            border-radius: 20px;
            box-shadow: 0 0 0 1.5px #1a1a2e;
            z-index: 10;
        }

        #phone-shell::after {
            content: '';
            position: absolute;
            right: -4px;
            top: 38%;
            width: 4px;
            height: 56px;
            background: linear-gradient(180deg, #2a2a3e, #1a1a28);
            border-radius: 0 3px 3px 0;
            box-shadow: 1px 0 4px rgba(0,0,0,0.5);
        }

    #phone-silent, #phone-vol-up, #phone-vol-down {
        display: block;
        position: absolute;
        left: -4px;
        width: 4px;
        background: linear-gradient(180deg, #2a2a3e, #1a1a28);
        border-radius: 3px 0 0 3px;
        box-shadow: -1px 0 4px rgba(0,0,0,0.5);
    }

    #phone-silent {
        top: 24%;
        height: 22px;
    }

    #phone-vol-up {
        top: 34%;
        height: 40px;
    }

    #phone-vol-down {
        top: 43%;
        height: 40px;
    }

    #phone-cam {
        display: block;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        background: #0a0a12;
        border-radius: 50%;
        border: 1.5px solid #1e1e30;
        z-index: 11;
        margin-left: 30px;
    }

    #game-root {
        position: relative !important;
        inset: auto !important;
        width: var(--game-w) !important;
        height: var(--game-h) !important;
        border-radius: 14px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
        overflow: hidden !important;
    }

    #phone-bar {
        display: block;
        width: 100px;
        height: 5px;
        background: rgba(255,255,255,0.25);
        border-radius: 4px;
        margin-top: 10px;
    }

    #phone-glare {
        display: block;
        position: absolute;
        top: 0;
        left: 10%;
        width: 30%;
        height: 55%;
        background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 70%);
        border-radius: 44px 0 0 0;
        pointer-events: none;
    }

    #wheel-stage {
        width: 360px;
        height: 360px;
    }
}

/* ============================================================
   UI DEL JUEGO — elementos dentro de #game-root
   ============================================================ */
#bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
    z-index: 0;
}

#topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    z-index: 50;
    background: linear-gradient(180deg,rgba(6,52,63,0.85),transparent);
}

    #topbar .brand {
        color: var(--white);
        font-weight: 800;
        font-size: 15px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }

#balance-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,225,106,0.5);
    border-radius: 20px;
    padding: 6px 14px;
    color: var(--gold);
    font-weight: 800;
    font-size: 14px;
}

#player-count {
    position: absolute;
    bottom: 6px;
    left: 10px;
    z-index: 49;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    font-weight: 700;
    letter-spacing: 0.3px;
    pointer-events: none;
    transition: opacity .5s;
}

    #player-count.pulse {
        animation: pcPulse .6s ease;
    }

@keyframes pcPulse {
    0%,100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

#sound-btn {
    position: absolute;
    top: 64px;
    left: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 46;
}

#wheel-view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}

#wheel-stage {
    position: relative;
    width: min(86vw,380px);
    height: min(86vw,380px);
    margin-top: 54px;
}

#wheel-img {
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: rotate(0deg);
    display: block;
}

    #wheel-img svg {
        width: 100%;
        height: 100%;
        display: block;
    }

#pointer-img {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 54px;
    height: 60px;
    transform: translateX(-50%);
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

#status-text {
    margin-top: 10px;
    color: var(--white);
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    min-height: 22px;
    letter-spacing: 0.4px;
}

#countdown-wrap {
    position: absolute;
    top: 64px;
    right: 14px;
    width: 60px;
    height: 60px;
    z-index: 45;
    transition: opacity .3s ease;
}

    #countdown-wrap svg {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    #countdown-wrap circle.track {
        fill: none;
        stroke: rgba(255,255,255,0.25);
        stroke-width: 5;
    }

    #countdown-wrap circle.ring {
        fill: none;
        stroke: var(--gold);
        stroke-width: 5;
        stroke-linecap: round;
        transition: stroke-dashoffset .1s linear,stroke .2s ease;
    }

    #countdown-wrap.urgent circle.ring {
        stroke: var(--coral);
    }

#countdown-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 900;
    font-size: 18px;
}

#countdown-wrap.urgent #countdown-num {
    color: var(--coral);
}

#countdown-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    font-size: 9px;
    font-weight: 800;
    color: var(--white);
    opacity: 0.85;
    white-space: nowrap;
}

#bet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: linear-gradient(180deg,transparent,rgba(6,40,48,0.92) 30%,rgba(6,40,48,0.97));
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#total-bet-label {
    text-align: center;
    color: var(--white);
    font-size: 12px;
    opacity: 0.85;
}

    #total-bet-label b {
        color: var(--gold);
    }

#bet-slots {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.bet-slot {
    flex: 1;
    max-width: 120px;
    border-radius: 12px;
    padding: 8px 4px 6px;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform .18s ease,border-color .15s,box-shadow .18s ease;
}

    .bet-slot:active {
        transform: scale(0.97);
    }

    .bet-slot.sardina {
        background: linear-gradient(160deg,#4a86ac,#173d57);
    }

    .bet-slot.mero {
        background: linear-gradient(160deg,#f0a83a,#8a4a0c);
    }

    .bet-slot.pargo {
        background: linear-gradient(160deg,#e0564a,#6e0c0c);
    }

    .bet-slot.active-glow {
        border-color: var(--gold);
        box-shadow: 0 0 14px rgba(255,225,106,0.7);
    }

    .bet-slot .slot-name {
        color: #fff;
        font-weight: 800;
        font-size: 12.5px;
        display: block;
        margin-top: 2px;
    }

    .bet-slot .slot-mult {
        display: none;
    }

    .bet-slot .slot-amount {
        margin-top: 4px;
        background: rgba(0,0,0,0.35);
        border-radius: 10px;
        color: var(--gold);
        font-weight: 800;
        font-size: 12px;
        padding: 3px 6px;
        display: inline-block;
        min-width: 46px;
    }

    .bet-slot .slot-fishicon {
        width: 48px;
        height: 32px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    }

#bet-slots-side {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}

.bet-slot-side {
    flex: 1;
    max-width: 160px;
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: transform .1s ease,border-color .15s;
}

    .bet-slot-side:active {
        transform: scale(0.97);
    }

    .bet-slot-side.azul {
        background: linear-gradient(120deg,#3a6f96,#1f4a68);
    }

    .bet-slot-side.blanco {
        background: linear-gradient(120deg,#dce9ee,#b8cdd6);
    }

        .bet-slot-side.blanco .side-name {
            color: #173d57;
        }

    .bet-slot-side.active-glow {
        border-color: var(--gold);
        box-shadow: 0 0 14px rgba(255,225,106,0.7);
    }

    .bet-slot-side .side-name {
        color: #fff;
        font-weight: 800;
        font-size: 12px;
    }

    .bet-slot-side .side-mult {
        color: var(--gold);
        font-weight: 800;
        font-size: 10.5px;
        flex: 1;
        text-align: center;
    }

    .bet-slot-side.blanco .side-mult {
        color: #a8720a;
    }

    .bet-slot-side .slot-amount {
        background: rgba(0,0,0,0.35);
        border-radius: 8px;
        color: var(--gold);
        font-weight: 800;
        font-size: 11px;
        padding: 3px 6px;
        min-width: 38px;
        text-align: center;
    }

    .bet-slot-side.blanco .slot-amount {
        background: rgba(0,0,0,0.18);
        color: #7a4f00;
    }

#chip-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 2px 0;
}

.chip {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease;
    position: relative;
    overflow: hidden;
    /* Borde exterior doble — efecto ficha de casino */
    border: 2.5px solid rgba(255,255,255,0.9);
    outline: 1.5px solid rgba(0,0,0,0.35);
    outline-offset: -4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.25);
}
    /* Círculo interior decorativo */
    .chip::before {
        content: '';
        position: absolute;
        inset: 5px;
        border-radius: 50%;
        border: 1.5px dashed rgba(255,255,255,0.45);
        pointer-events: none;
    }
/* Texto del valor */
.chip-val {
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    line-height: 1;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 1;
}
/* Subtexto Casino Juangriego */
.chip-sub {
    font-size: 4.5px;
    font-weight: 800;
    color: rgba(255,255,255,0.80);
    text-transform: uppercase;
    letter-spacing: 0.2px;
    line-height: 1;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 1px;
}

.chip:active {
    transform: scale(0.9);
}

.chip.selected {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--gold),0 4px 10px rgba(0,0,0,0.5);
}

.chip[data-v="100"] {
    background: radial-gradient(circle at 35% 28%,#8fb8c4,#2e5a6a);
}

.chip[data-v="500"] {
    background: radial-gradient(circle at 35% 28%,#e87a6a,#8a2218);
}

.chip[data-v="1000"] {
    background: radial-gradient(circle at 35% 28%,#6ec98a,#1a6a38);
}

.chip[data-v="5000"] {
    background: radial-gradient(circle at 35% 28%,#f0c25a,#8a5a08);
}

.chip[data-v="10000"] {
    background: radial-gradient(circle at 35% 28%,#c8a8f8,#4a1a9e);
}

#action-row {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.round-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .round-btn:active {
        transform: scale(0.9);
    }

#cycle-indicator {
    flex: 1;
    max-width: 240px;
    height: 54px;
    border-radius: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.4px;
    transition: background .25s,color .25s;
}

    #cycle-indicator.phase-betting {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        color: #5a3a00;
        box-shadow: 0 5px 0 #a87010,0 8px 14px rgba(0,0,0,0.35);
    }

    #cycle-indicator.phase-locked {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.75);
        border: 2px solid rgba(255,255,255,0.25);
    }

    #cycle-indicator .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: currentColor;
        animation: pulseDot 1s infinite;
    }

@keyframes pulseDot {
    0%,100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

#auto-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.auto-btn {
    flex: 1;
    max-width: 170px;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 16px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 9px 6px;
    cursor: pointer;
}

    .auto-btn:active {
        transform: scale(0.96);
    }

    .auto-btn.active-auto {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        color: #5a3a00;
        border-color: transparent;
    }

#bet-panel.locked #bet-slots,
#bet-panel.locked #bet-slots-side,
#bet-panel.locked #chip-row {
    opacity: 0.5;
}

#bet-panel.locked .bet-slot,
#bet-panel.locked .bet-slot-side,
#bet-panel.locked .chip,
#bet-panel.locked .auto-btn,
#bet-panel.locked .round-btn {
    pointer-events: none;
    opacity: 0.4;
}

#aquarium-view {
    position: absolute;
    inset: 0;
    z-index: 55;
    display: none;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

    #aquarium-view.show {
        display: flex;
    }

#aquarium-bg {
    position: absolute;
    inset: 0;
    background: url('img/fondo-acuario.png') center center/cover no-repeat;
    filter: brightness(0.7);
}

#aquarium-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#aquarium-top {
    position: relative;
    z-index: 2;
    margin-top: 24px;
    text-align: center;
    padding: 0 20px;
}

    #aquarium-top h2 {
        color: var(--gold);
        font-size: 26px;
        font-weight: 900;
        margin: 0 0 4px;
        text-shadow: 0 0 20px rgba(255,225,106,0.6),0 2px 8px rgba(0,0,0,0.6);
    }

    #aquarium-top p {
        color: rgba(255,255,255,0.8);
        font-size: 13px;
        margin: 0;
    }

#aquarium-result {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    background: linear-gradient(transparent,rgba(0,0,0,0.75) 30%,rgba(0,0,0,0.92));
    padding: 20px 24px 28px;
    text-align: center;
}

.aq-mult {
    font-size: 56px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(255,225,106,0.9);
    animation: glowP 0.8s ease infinite alternate;
    line-height: 1;
}

@keyframes glowP {
    from {
        text-shadow: 0 0 20px rgba(255,225,106,0.6);
    }

    to {
        text-shadow: 0 0 50px rgba(255,225,106,1),0 0 80px rgba(255,200,0,0.4);
    }
}

.aq-label {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin: 6px 0 8px;
    font-weight: 700;
}

.aq-prize {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
    opacity: 0;
    transition: opacity 0.5s;
}

    .aq-prize.show {
        opacity: 1;
    }

#aquarium-continue {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 24px;
    padding: 13px 36px;
    font-weight: 900;
    font-size: 16px;
    color: #5a3a00;
    box-shadow: 0 5px 0 #a87010;
    cursor: pointer;
}

#bet-summary-overlay {
    position: absolute;
    inset: 0;
    z-index: 52;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(6,30,38,0.5);
}

    #bet-summary-overlay.show {
        display: flex;
    }

#bet-summary-card {
    background: radial-gradient(circle at 30% 20%,#1a7a4a,#0a3a20);
    border: 6px solid #e8c984;
    border-radius: 50%;
    width: 210px;
    height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #8a6a32,0 12px 30px rgba(0,0,0,0.6);
    position: relative;
    gap: 4px;
    animation: chipIn 0.35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes chipIn {
    from {
        transform: scale(0.3) rotate(-15deg);
        opacity: 0;
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

#bet-summary-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(232,201,132,0.45);
}

.chip-label {
    color: var(--gold);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.chip-amount {
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.chip-bets {
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.7;
    white-space: pre-line;
}

#result-chip-overlay {
    position: absolute;
    inset: 0;
    z-index: 53;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

    #result-chip-overlay.show {
        display: flex;
    }

#result-chip-card {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 4px;
    animation: chipPop 0.4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes chipPop {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

#result-chip-card.win {
    background: radial-gradient(circle at 30% 20%,#c89020,#7a5010);
    border: 6px solid #fff3c0;
}

#result-chip-card.loss {
    background: radial-gradient(circle at 30% 20%,#4a1515,#1a0505);
    border: 6px solid rgba(255,100,80,0.4);
}

#result-chip-card.neutral {
    background: radial-gradient(circle at 30% 20%,#1a4a6a,#0a2a3a);
    border: 6px solid rgba(255,255,255,0.3);
}

#result-chip-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.25);
}

.rchip-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

.rchip-amount {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.rchip-detail {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    font-weight: 700;
    text-align: center;
}

#bonus-view {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

    #bonus-view.show {
        display: flex;
    }

#bonus-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center bottom;
}

#muelle-sign {
    display: none;
}

.muelle-text {
    display: inline-block;
    background: rgba(100,60,15,0.88);
    border: 3px solid #c8a050;
    border-radius: 8px;
    padding: 5px 16px;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    font-family: Georgia,serif;
}

#love-sign {
    position: absolute;
    bottom: 30%;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
    flex-wrap: wrap;
}

.love-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

#bonus-banner {
    margin-top: 50px;
    background: rgba(12,34,48,0.65);
    border: 1px solid var(--gold);
    border-radius: 14px;
    padding: 7px 16px;
    color: var(--gold);
    font-weight: 900;
    font-size: 13px;
    text-align: center;
    z-index: 5;
    position: relative;
    max-width: 92%;
}

#catch-zone {
    position: relative;
    flex: 1;
    width: 100%;
}

#pescador-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8%;
    width: 45%;
    max-width: 190px;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.3));
    z-index: 4;
    transform-origin: bottom center;
}

#line-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

#caught-fish {
    position: absolute;
    width: 28%;
    max-width: 160px;
    opacity: 0;
    transform: rotate(90deg) scale(0.1);
    transition: none;
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.4));
    z-index: 4;
}

#mult-badge {
    position: absolute;
    background: linear-gradient(180deg,#fff3c0,#e0a82a);
    border: 3px solid #6e3d00;
    border-radius: 10px;
    padding: 6px 12px;
    font-weight: 900;
    font-size: 20px;
    color: #6e3d00;
    opacity: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    white-space: nowrap;
    z-index: 5;
}

#bonus-footer {
    width: 100%;
    padding: 12px 16px 18px;
    text-align: center;
    z-index: 5;
}

#bonus-total {
    color: var(--white);
    font-size: 14px;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

    #bonus-total b {
        color: var(--gold);
        font-size: 18px;
        white-space: nowrap;
    }

#bonus-continue {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 24px;
    padding: 13px 36px;
    font-weight: 900;
    font-size: 16px;
    color: #5a3a00;
    box-shadow: 0 5px 0 #a87010;
    cursor: pointer;
}

#win-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0.7), rgba(0,0,0,0.85));
    backdrop-filter: blur(2px);
}

    #win-overlay.show {
        display: flex;
        animation: winFadeIn .35s ease;
    }

@keyframes winFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#win-card {
    position: relative;
    overflow: hidden;
    width: 290px;
    border-radius: 24px;
    padding: 0;
    text-align: center;
    /* Sombra dorada exterior — sensación de oro */
    box-shadow: 0 0 0 2px rgba(255,225,106,0.9), 0 0 0 5px rgba(180,130,20,0.5), 0 0 40px rgba(255,200,50,0.4), 0 20px 50px rgba(0,0,0,0.7);
    animation: cardPop .45s cubic-bezier(.34,1.56,.64,1);
}

@keyframes cardPop {
    from {
        transform: scale(0.5) translateY(40px);
        opacity: 0
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1
    }
}

/* Franja superior dorada */
#win-card-header {
    background: linear-gradient(135deg,#c8980a 0%,#ffe16a 40%,#f0c030 60%,#a87010 100%);
    padding: 14px 20px 10px;
    position: relative;
}

    #win-card-header::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,transparent,rgba(255,225,106,0.8),transparent);
    }

/* Destellos decorativos en la cabecera */
#win-card-stars {
    font-size: 18px;
    letter-spacing: 6px;
    margin-bottom: 4px;
    filter: drop-shadow(0 0 4px rgba(255,230,100,0.8));
}

.win-title {
    font-family: 'Trebuchet MS',sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 3px;
    color: #5a3a00;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Cuerpo de la tarjeta */
#win-card-body {
    padding: 20px 24px 22px;
    position: relative;
}
    /* Patrón de fondo sutil */
    #win-card-body::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04) 1px, transparent 1px), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.04) 1px, transparent 1px);
        background-size: 24px 24px;
        pointer-events: none;
    }

#win-fish-icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 8px currentColor);
    animation: fishBounce 0.8s ease infinite alternate;
}

@keyframes fishBounce {
    from {
        transform: translateY(0) scale(1)
    }

    to {
        transform: translateY(-5px) scale(1.08)
    }
}

.win-amount {
    font-family: 'Trebuchet MS',sans-serif;
    font-weight: 900;
    font-size: 34px;
    color: #fff;
    text-shadow: 0 0 20px rgba(255,225,106,0.6), 0 2px 8px rgba(0,0,0,0.5);
    margin: 6px 0 4px;
    line-height: 1;
}

.win-amount-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Línea divisora dorada */
#win-divider {
    height: 1px;
    margin: 0 20px 16px;
    background: linear-gradient(90deg,transparent,rgba(255,225,106,0.5),transparent);
}

#win-close-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 0 auto;
    background: linear-gradient(180deg,#ffe16a 0%,#f0c030 50%,#c8980a 100%);
    border: none;
    border-radius: 16px;
    padding: 13px 20px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 1px;
    color: #4a2800;
    text-transform: uppercase;
    box-shadow: 0 5px 0 #8a6000, 0 8px 16px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
}

    #win-close-btn:active {
        transform: translateY(3px);
        box-shadow: 0 2px 0 #8a6000, 0 4px 8px rgba(0,0,0,0.3);
    }

/* Destellos de esquina */
.win-corner {
    position: absolute;
    font-size: 16px;
    opacity: 0.7;
}

    .win-corner.tl {
        top: 8px;
        left: 10px;
    }

    .win-corner.tr {
        top: 8px;
        right: 10px;
    }

#reload-overlay {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(6,30,38,0.92);
    display: none;
    align-items: center;
    justify-content: center;
}

    #reload-overlay.show {
        display: flex;
    }

#reload-card {
    background: linear-gradient(160deg,#0f7f95,#0a5c72);
    border: 3px solid var(--gold);
    border-radius: 22px;
    padding: 26px 24px;
    text-align: center;
    color: #fff;
    max-width: 300px;
    width: 90%;
}

    #reload-card h3 {
        color: var(--gold);
        font-size: 20px;
        margin: 0 0 10px;
        font-weight: 900;
    }

    #reload-card p {
        font-size: 13px;
        opacity: 0.9;
        margin: 0 0 16px;
    }

#reload-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.reload-opt {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 14px;
    padding: 12px 6px;
    font-weight: 800;
    color: #5a3a00;
    font-size: 13px;
    cursor: pointer;
}

#reload-custom-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

#reload-custom-input {
    flex: 1;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

    #reload-custom-input::placeholder {
        color: rgba(255,255,255,0.5);
    }

#reload-custom-btn {
    background: rgba(255,255,255,0.2);
    border: 1.5px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    padding: 10px 14px;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

#autoplay-overlay {
    position: absolute;
    inset: 0;
    z-index: 96;
    background: rgba(6,30,38,0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

    #autoplay-overlay.show {
        display: flex;
    }

#autoplay-card {
    background: #0a5c72;
    border: 2px solid var(--gold);
    border-radius: 18px;
    padding: 22px 24px;
    text-align: center;
    color: #fff;
    max-width: 280px;
}

    #autoplay-card h3 {
        margin: 0 0 8px;
        color: var(--gold);
        font-size: 18px;
    }

    #autoplay-card p {
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.9;
        margin-bottom: 14px;
    }

#autoplay-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.autoplay-opt {
    background: linear-gradient(180deg,#ffe16a,#e0a82a);
    border: none;
    border-radius: 14px;
    padding: 12px 6px;
    font-weight: 800;
    color: #5a3a00;
    cursor: pointer;
    font-size: 14px;
}

#autoplay-cancel {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 9px 22px;
    font-weight: 700;
    cursor: pointer;
}

#menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12,34,48,0.55);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 95;
    background: rgba(6,30,38,0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

    #menu-overlay.show {
        display: flex;
    }

#menu-card {
    background: #0a5c72;
    border: 2px solid var(--gold);
    border-radius: 18px;
    padding: 24px 28px;
    text-align: center;
    color: #fff;
    max-width: 280px;
}

    #menu-card h3 {
        margin: 0 0 12px;
        color: var(--gold);
        font-size: 18px;
    }

    #menu-card p {
        font-size: 13px;
        line-height: 1.5;
        opacity: 0.9;
        margin-bottom: 16px;
    }

    #menu-card button {
        background: linear-gradient(180deg,#ffe16a,#e0a82a);
        border: none;
        border-radius: 18px;
        padding: 10px 24px;
        font-weight: 800;
        color: #5a3a00;
        cursor: pointer;
        margin: 4px;
    }

        #menu-card button.secondary {
            background: rgba(255,255,255,0.15);
            color: #fff;
        }

#toast {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12,34,48,0.9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s,transform .25s;
}

    #toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(4px);
    }

.confetti-piece {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0.9;
    z-index: 85;
    pointer-events: none;
}