:root {
    --stage-w: 720;
    --stage-h: 432;
    --bg: #000;
    --cell-bg: #f0f8ff;
    --cell-border: #0044aa;
    --yellow: #ffe600;
    --pink: #ff44cc;
    --cyan: #44ffff;
    --green: #44ff44;
    --btn-green: #44dd44;
    --btn-purple: #cc66ff;
    --btn-red: #ee2222;
    --btn-maroon: #662222;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    background: var(--bg);
    color: #fff;
    min-height: 100vh;
}

.hidden { display: none !important; }

/* ===== AUTH ===== */
.auth-panel {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #000;
}

.auth-box {
    width: 100%;
    max-width: 400px;
    background: #111;
    border: 2px solid var(--yellow);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.auth-logo { max-width: 100%; border-radius: 6px; margin-bottom: 8px; }
.auth-box h1 { color: var(--yellow); margin: 0 0 6px; font-size: 1.2rem; }
.auth-tabs { display: flex; gap: 6px; margin: 10px 0; }
.auth-tab {
    flex: 1; padding: 8px; border-radius: 4px; border: 1px solid #555;
    background: #222; color: #ccc; cursor: pointer; font-weight: 700;
}
.auth-tab.active { background: var(--yellow); color: #000; }
.auth-form input {
    width: 100%; margin: 6px 0; padding: 10px; border-radius: 4px;
    border: 1px solid #444; background: #111; color: #fff;
}
.btn-primary {
    width: 100%; margin-top: 6px; padding: 10px; border: none; border-radius: 4px;
    background: var(--yellow); color: #000; font-weight: 800; cursor: pointer;
}
.msg { color: #ffb347; min-height: 16px; margin-top: 6px; font-size: 0.8rem; }

/* ===== STAGE Cherry Master 720x432 ===== */
.game-panel {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: var(--bg);
}

.game-stage {
    position: relative;
    width: min(calc(100vw - 12px), calc((100vh - 12px) * var(--stage-w) / var(--stage-h)));
    aspect-ratio: var(--stage-w) / var(--stage-h);
    background: var(--bg);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    user-select: none;
    container-type: size;
    container-name: stage;
}

.btn-exit {
    position: absolute;
    top: calc(4 / var(--stage-h) * 100%);
    right: calc(4 / var(--stage-w) * 100%);
    z-index: 60;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    background: rgba(80, 0, 80, 0.85);
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
    font-size: 12px;
}

/* ---- Painel esquerdo ---- */
.side-panel {
    flex: 0 0 calc(178 / var(--stage-w) * 100%);
    width: calc(178 / var(--stage-w) * 100%);
    padding: calc(8 / var(--stage-h) * 100%) calc(6 / var(--stage-w) * 100%);
    display: flex;
    flex-direction: column;
    gap: calc(4 / var(--stage-h) * 100%);
    font-size: calc(10 / var(--stage-w) * 100cqw);
    line-height: 1.2;
    overflow: hidden;
}

.sp-line { font-weight: 900; letter-spacing: 0.3px; }
.sp-all-fruit { color: var(--pink); }
.sp-all-fruit span { color: var(--yellow); }
.sp-bonus { color: var(--yellow); font-size: calc(11 / var(--stage-w) * 100cqw); }
.sp-bonus strong { font-size: calc(13 / var(--stage-w) * 100cqw); }
.sp-888 .pink { color: var(--pink); font-size: calc(14 / var(--stage-w) * 100cqw); }
.sp-888 strong { color: var(--yellow); font-size: calc(13 / var(--stage-w) * 100cqw); }
.sp-min { color: #ccc; font-size: calc(8 / var(--stage-w) * 100cqw); margin-top: 2px; }

.sp-diamond {
    width: calc(56 / var(--stage-w) * 100%);
    max-width: 56px;
    margin: calc(4 / var(--stage-h) * 100%) 0;
    image-rendering: pixelated;
}

.sp-diamond-text {
    color: #fff;
    font-size: calc(8 / var(--stage-w) * 100cqw);
    line-height: 1.25;
}

.sp-diamond-text .pink { color: var(--pink); font-weight: 900; font-size: calc(10 / var(--stage-w) * 100cqw); }
.sp-diamond-text .yellow { color: var(--yellow); }

.bonus-count {
    display: inline-block;
    background: var(--yellow);
    color: #000;
    font-weight: 900;
    padding: 0 4px;
    border-radius: 2px;
    margin-left: 2px;
}

.sp-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: calc(4 / var(--stage-h) * 100%) 0;
}

.sp-bars img {
    height: calc(16 / var(--stage-h) * 100%);
    min-height: 12px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.sp-double {
    background: transparent;
    border: none;
    color: #fff;
    font-weight: 900;
    font-size: calc(10 / var(--stage-w) * 100cqw);
    line-height: 1.1;
    cursor: pointer;
    text-align: left;
    padding: calc(4 / var(--stage-h) * 100%) 0;
    text-shadow: 2px 0 var(--pink), -1px 0 var(--green);
    font-family: inherit;
}

.sp-double:hover { color: var(--yellow); }

.sp-stats {
    margin-top: auto;
    font-size: calc(8 / var(--stage-w) * 100cqw);
    color: var(--cyan);
    padding-bottom: calc(4 / var(--stage-h) * 100%);
}

.sp-stats div:last-child { color: #fff; }

/* ---- Area central ---- */
.play-area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: calc(8 / var(--stage-h) * 100%) calc(4 / var(--stage-w) * 100%);
}

.grid-wrap {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    gap: calc(3 / var(--stage-w) * 100%);
}

.line-bets-left {
    flex: 0 0 calc(26 / var(--stage-w) * 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: calc(22 / var(--stage-h) * 100%);
    padding-bottom: calc(8 / var(--stage-h) * 100%);
    gap: calc(6 / var(--stage-h) * 100%);
}

.line-bet {
    width: 100%;
    min-width: 20px;
    height: calc(20 / var(--stage-h) * 100%);
    min-height: 16px;
    background: var(--pink);
    border: 1px solid #ff88dd;
    color: var(--yellow);
    font-weight: 900;
    font-size: calc(10 / var(--stage-w) * 100cqw);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.25);
}

.line-bet.diag { opacity: 0.88; }
.line-bet:active { transform: scale(0.95); }

.grid-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.line-bets-top {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0 calc(8 / var(--stage-w) * 100%);
    margin-bottom: calc(3 / var(--stage-h) * 100%);
    gap: calc(4 / var(--stage-w) * 100%);
}

.line-bets-top .line-bet {
    flex: 1;
    max-width: calc(36 / var(--stage-w) * 100%);
}

.slot-grid {
    position: relative;
    flex: 1;
    min-height: 0;
    border: 3px solid var(--cell-border);
    background: var(--cell-bg);
    box-shadow: inset 0 0 0 1px #0066cc;
}

.paylines-draw {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
}

.paylines-draw polyline {
    fill: none;
    stroke: #ff0000;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.95;
    filter: drop-shadow(0 0 3px #ff4444);
}

.reels-viewport {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    z-index: 10;
    overflow: hidden;
}

.reel-col {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-right: 2px solid var(--cell-border);
    background: var(--cell-bg);
}

.reel-col:last-child { border-right: none; }

.reel-strip {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    will-change: transform;
}

.reel-strip.spin-mode {
    display: flex;
    flex-direction: column;
    grid-template-rows: unset;
    height: auto;
    bottom: auto;
    top: 0;
    min-height: 100%;
}

.symbol {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cell-bg);
    border-bottom: 1px solid rgba(0, 68, 170, 0.35);
}

.reel-strip.spin-mode .symbol {
    flex: 0 0 auto;
    overflow: hidden;
}

.symbol:last-child { border-bottom: none; }

.sym-img {
    width: 88%;
    height: 88%;
    max-width: 100%;
    max-height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.sym-img.sym-melancia { filter: hue-rotate(80deg) saturate(1.4); }

.symbol.win .sym-img {
    filter: drop-shadow(0 0 6px var(--yellow));
    animation: winPulse 0.4s ease-in-out infinite alternate;
}

@keyframes winPulse {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.reel-col.spinning { background: #d8ecfa; }
.reel-col.spinning .sym-img { animation: blurSpin 0.08s steps(2) infinite; }

@keyframes blurSpin {
    50% { opacity: 0.65; }
}

/* ---- Footer ---- */
.footer-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: calc(6 / var(--stage-h) * 100%) calc(2 / var(--stage-w) * 100%) 0;
    min-height: calc(40 / var(--stage-h) * 100%);
    flex-shrink: 0;
}

.credits-display {
    cursor: pointer;
    flex: 1;
}

.credits-display span {
    font-size: calc(24 / var(--stage-w) * 100cqw);
    font-weight: 900;
    color: var(--yellow);
    text-shadow: 0 0 8px rgba(255, 230, 0, 0.5);
    letter-spacing: 1px;
}

.msg-center {
    flex: 1.2;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: calc(28 / var(--stage-h) * 100%);
    justify-content: center;
}

#msg-main {
    font-size: calc(12 / var(--stage-w) * 100cqw);
    font-weight: 900;
    color: var(--green);
    text-shadow: 0 0 6px rgba(68, 255, 68, 0.6);
}

#msg-sub {
    font-size: calc(10 / var(--stage-w) * 100cqw);
    color: var(--yellow);
}

.bet-win-display {
    flex: 1;
    text-align: right;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: calc(6 / var(--stage-w) * 100%);
}

.win-val {
    font-size: calc(14 / var(--stage-w) * 100cqw);
    color: #fff;
    font-weight: 700;
}

.bet-val {
    font-size: calc(24 / var(--stage-w) * 100cqw);
    font-weight: 900;
    color: var(--yellow);
}

/* ---- Painel direito (controles) ---- */
.control-panel {
    flex: 0 0 calc(118 / var(--stage-w) * 100%);
    width: calc(118 / var(--stage-w) * 100%);
    display: flex;
    flex-direction: column;
    gap: calc(5 / var(--stage-h) * 100%);
    padding: calc(8 / var(--stage-h) * 100%) calc(6 / var(--stage-w) * 100%) calc(8 / var(--stage-h) * 100%) calc(4 / var(--stage-w) * 100%);
}

.ctrl-btn {
    width: 100%;
    min-height: 24px;
    height: calc(28 / var(--stage-h) * 100%);
    border: 2px solid rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    font-family: 'Arial Black', Impact, Arial, sans-serif;
    font-size: calc(9 / var(--stage-w) * 100cqw);
    font-weight: 900;
    color: #000;
    cursor: pointer;
    padding: calc(4 / var(--stage-h) * 100%) 2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
    letter-spacing: 0.3px;
}

.ctrl-btn:active:not(:disabled) { transform: scale(0.96); }
.ctrl-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ctrl-menu { background: var(--btn-green); }
.ctrl-play { background: var(--btn-purple); }
.ctrl-stop-all { background: var(--btn-red); color: #fff; text-shadow: none; }
.ctrl-stop { background: var(--btn-red); color: #fff; text-shadow: none; }
.ctrl-stop:disabled { background: var(--btn-maroon); }
.ctrl-start {
    background: var(--btn-green);
    margin-top: auto;
    min-height: calc(32 / var(--stage-h) * 100%);
    font-size: calc(10 / var(--stage-w) * 100cqw);
}

.play-counter {
    text-align: center;
    font-size: calc(18 / var(--stage-w) * 100cqw);
    font-weight: 900;
    color: var(--yellow);
    text-shadow: 0 0 6px rgba(255, 230, 0, 0.45);
    letter-spacing: 2px;
    padding-top: calc(2 / var(--stage-h) * 100%);
}

.dog-overlay {
    position: absolute;
    left: calc(200 / var(--stage-w) * 100%);
    top: calc(120 / var(--stage-h) * 100%);
    width: calc(100 / var(--stage-w) * 100%);
    z-index: 50;
    pointer-events: none;
}

.dog-overlay img {
    width: 100%;
    image-rendering: pixelated;
}

@media (max-width: 560px) {
    .game-panel { padding: 0; }
    .game-stage { width: 100vw; border-radius: 0; }
    .side-panel { font-size: 8px; }
    .ctrl-btn { font-size: 7px; min-height: 20px; }
}