:root{
    --bg:#09111d;
    --panel:#0c1626;
    --text:#f4f7ff;
    --muted:#aab7cc;
    --green:#97f31f;
    --green2:#4fae12;
    --red:#ff4b39;
    --red2:#c81d14;
    --gold:#ffc93b;
    --gold2:#e28e00;
    --cream:#f4efe6;
    --ink:#162235;
}

*{box-sizing:border-box}
.hidden{display:none!important}

html,body{
    margin:0; height:100%;
    background: radial-gradient(circle at 50% 20%, #1a2741 0%, #0b1220 40%, #070c14 100%);
    font-family: Arial, Helvetica, sans-serif;
    color:var(--text);
    overflow:hidden;
    display:grid; place-items:center;
}

.game {
    position:relative;
    width:1280px; height:720px;
    touch-action:manipulation;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 20%),
        linear-gradient(180deg, #0a1120 0%, #142038 18%, #40283a 46%, #efb76f 64%, #6c5757 82%, #2a2330 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
    overflow: hidden;
}

/* Skyline silhouette */
.skyline {
    position:absolute; left:0; right:0; top:140px; height:90px; opacity:.34;
    background:
        linear-gradient(to right,
            transparent 0 1%, #0d1523 1% 4.5%, transparent 4.5% 7%,
            #0d1523 7% 11%, transparent 11% 13%,
            #0d1523 13% 18%, transparent 18% 20.5%,
            #0d1523 20.5% 23.5%, transparent 23.5% 25%,
            #0d1523 25% 30%, transparent 30% 33%,
            #0d1523 33% 37%, transparent 37% 41%,
            #0d1523 41% 45%, transparent 45% 49%,
            #0d1523 49% 53%, transparent 53% 57%,
            #0d1523 57% 60%, transparent 60% 65%,
            #0d1523 65% 69%, transparent 69% 74%,
            #0d1523 74% 79%, transparent 79% 82%,
            #0d1523 82% 85%, transparent 85% 88%,
            #0d1523 88% 92%, transparent 92% 95%,
            #0d1523 95% 99%, transparent 99% 100%
        );
    pointer-events: none;
    z-index: 0;
}

/* CRT overlay effects */
.scanlines, .vignette {
    position:absolute; inset:0; pointer-events:none; z-index: 10;
}
.scanlines {
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.06) 0px,
            rgba(255,255,255,.06) 2px,
            rgba(255,255,255,0) 3px,
            rgba(255,255,255,0) 33px
        );
    opacity:.25;
    mix-blend-mode:screen;
}
.vignette {
    background: radial-gradient(circle at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.38) 100%);
}

#game-container { position: absolute; inset: 0; z-index: 1; }

.ui-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: 24px 64px; }

.hud-top {
    display:grid; grid-template-columns: 1fr 150px 1fr; align-items:start;
}

.hp-row { display:flex; align-items:center; gap:14px; margin-top: 8px; }
.bar {
    position:relative; height:22px; width:470px;
    background:#050910; border:2px solid rgba(207,214,230,.15);
    border-radius:3px; overflow:hidden;
    box-shadow: inset 0 0 18px rgba(255,255,255,.03);
}
.bar.small { height:12px; width:400px; }
.fill {
    position: absolute; inset: 0 auto 0 0;
    height: 100%; width: var(--w, 100%);
    background: linear-gradient(180deg,var(--c1),var(--c2));
    box-shadow: inset 0 0 8px rgba(255,255,255,.12);
    transition: width 0.15s ease-out;
}
.side { display:flex; flex-direction:column; gap:8px; }
.label {
    font-weight: 900; font-size: 28px;
    letter-spacing: .5px;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

/* Player name block with name and connection status underneath */
.player-name-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.side:first-child .player-name-block {
    align-items: flex-start;
}

/* Element icon next to player name */
.label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.element-icon {
    font-size: 20px;
    filter: drop-shadow(0 0 4px currentColor);
}
.element-icon.fire { color: #ff6600; }
.element-icon.thunder { color: #6699ff; }
.element-icon.ice { color: #66ddff; }

/* Connection status under name (dot and ping in same line) */
.connection-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
}

.connection-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    transition: background 0.3s ease;
}

.connection-status.connected .status-dot {
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.connection-status.disconnected .status-dot {
    background: var(--red);
    box-shadow: 0 0 6px var(--red);
}

.connection-status .status-text {
    color: var(--muted);
    font-family: 'Courier New', monospace;
    font-size: 10px;
}

.connection-status.connected .status-text {
    color: var(--green);
}

.connection-status.disconnected .status-text {
    color: var(--red);
}

/* Hide connection status in single player mode - but keep space for alignment */
.connection-status.hidden {
    visibility: hidden;
    opacity: 0;
}

.hp-tag, .energy-tag {
    font-size: 24px; font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    transition: all 0.3s ease;
}

/* Stats display */
.stats-row {
    display: flex; gap: 12px;
    margin-top: 10px;
    font-size: 14px;
}
.stat {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(0,0,0,.3);
    padding: 4px 10px;
    border-radius: 4px;
    min-width: 50px;
}
.stat-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.stat-value {
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
}

.timer {
    width:108px; height:108px; border-radius:50%; margin:auto;
    display:grid; place-items:center; background:rgba(5,9,15,.8);
    border:4px solid rgba(140,149,171,.32); font-size:54px; font-weight:900;
}

.lane-wrap {
    position: absolute; bottom: 80px; left: 16px; right: 16px; height: 72px;
    background: rgba(248,245,238,.92); border: 3px solid rgba(255,255,255,.38);
    pointer-events: auto; padding: 14px 16px;
    box-shadow: 0 14px 30px rgba(0,0,0,.28);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    z-index: 55;
}
.lane-wrap::-webkit-scrollbar {
    display: none;  /* Chrome/Safari */
}
.stream {
    font-size: 30px; color: var(--ink); font-weight: 900;
    white-space: nowrap;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}
.stream .special {
    color: #ffd44c;
    -webkit-text-stroke: 2px #9f4200;
    text-shadow: 0 0 16px rgba(255,206,82,.95);
    margin: 0 8px;
}
.stream .special-skill {
    margin: 0 2px;
    animation: pulse-special 0.5s ease-in-out infinite alternate;
}

/* Space indicator for special skills */
.stream .space-indicator {
    margin: 0 4px;
    padding: 2px 6px;
    background: rgba(255, 170, 0, 0.2);
    border-radius: 4px;
    font-weight: bold;
}

/* Fire element - orange/red */
.stream .special-fire {
    color: #ff8c42;
    -webkit-text-stroke: 2px #b02a00;
    text-shadow: 0 0 20px rgba(255,140,66,1), 0 0 40px rgba(255,100,0,0.8);
}

/* Thunder element - blue/white */
.stream .special-thunder {
    color: #aaddff;
    -webkit-text-stroke: 2px #4466aa;
    text-shadow: 0 0 20px rgba(150,200,255,1), 0 0 40px rgba(100,150,255,0.8);
}

/* Ice element - cyan/white */
.stream .special-ice {
    color: #88ddff;
    -webkit-text-stroke: 2px #4488aa;
    text-shadow: 0 0 20px rgba(100,200,255,1), 0 0 40px rgba(100,220,255,0.8);
}

@keyframes pulse-special {
    from { opacity: 0.9; }
    to { opacity: 1; }
}

/* Arrow characters in special patterns */
.stream .arrow-char {
    font-size: 22px;
    margin: 0 2px;
    text-shadow: 0 0 25px currentColor, 0 0 50px currentColor;
}
.typed {
    font-size: 20px; color: #243247; font-weight: 900;
    margin-top: 10px;
}
.cursor {
    display: inline-block;
    width: 3px; height: 20px; background: #243247;
    vertical-align: -4px;
    margin-left: 4px;
    animation: blink .8s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0 } }

/* Space reminder for completed special patterns */
.space-reminder-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10;
    border-radius: 0;
}
.space-reminder-text {
    color: #ff4b39;
    font-size: 32px;
    font-weight: 900;
    text-shadow: 0 0 20px #ff4b39, 0 0 40px #c81d14;
    animation: space-blink 0.4s steps(1) infinite;
    letter-spacing: 3px;
}
@keyframes space-blink { 50% { opacity: 0.4 } }

/* AI Lane - smaller, on right side */
.ai-lane-wrap {
    position: absolute; left: auto; right: 16px; bottom: 210px; width: 540px; height: 80px;
    background: rgba(30,20,25,.85); border: 2px solid rgba(255,75,57,.3);
    border-radius: 4px;
    pointer-events: none; padding: 12px 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    z-index: 55;
}
.ai-lane-wrap::-webkit-scrollbar {
    display: none;  /* Chrome/Safari */
}
.ai-lane-wrap .label {
    font-size: 14px; color: #ff4b39; font-weight: 900;
    text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 6px;
}
.ai-lane-wrap .stream {
    font-size: 18px; color: #aab7cc;
    white-space: nowrap;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.5px;
}
.ai-lane-wrap .stream .typed-char {
    color: #ff4b39;
}
.ai-lane-wrap .progress-bar {
    position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
    background: rgba(255,75,57,.2);
}
.ai-lane-wrap .progress-bar .progress {
    height: 100%; background: linear-gradient(90deg, #ff4b39, #ff8c7a);
    transition: width 0.1s ease-out;
}

/* Welcome Screen */
.welcome-screen, .gameover-screen {
    position: absolute; inset: 0; z-index: 100;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding-top: 30px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(151,243,31,.08) 0%, transparent 50%),
        linear-gradient(180deg, #060a12 0%, #0d1520 40%, #1a1a2e 100%);
    transition: opacity 0.5s ease-out;
    overflow-y: auto;
    pointer-events: auto;
}
.welcome-screen.hidden, .gameover-screen.hidden {
    opacity: 0; pointer-events: none;
}

/* Back to portal link */
.back-to-portal {
    position: absolute;
    top: 16px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    pointer-events: auto;
}
.back-to-portal:hover {
    color: rgba(255,255,255,.85);
    border-color: rgba(151,243,31,.4);
    background: rgba(151,243,31,.06);
}

/* Title Section */
.welcome-title {
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 4px;
    text-shadow: 0 0 30px rgba(151,243,31,.6);
}
.welcome-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,.4);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Name Input */
.name-input {
    width: 240px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    background: rgba(255,255,255,.05);
    border: 2px solid rgba(255,255,255,.15);
    border-radius: 6px;
    color: var(--text);
    outline: none;
    margin-bottom: 16px;
    transition: all 0.2s;
}
.name-input:focus {
    border-color: var(--green);
    background: rgba(151,243,31,.08);
}
.name-input::placeholder {
    color: rgba(255,255,255,.3);
    font-weight: 400;
}

/* Settings Container */
.settings-row {
    margin-bottom: 12px;
    width: 100%;
    max-width: 400px;
}
.setting-group {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 10px 16px;
}
.setting-label {
    font-size: 10px;
    color: rgba(255,255,255,.4);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
}

/* Mode Selection */
.mode-selection {
    margin-bottom: 12px;
}
.mode-options {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.mode-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255,255,255,.04);
    border: 2px solid rgba(255,255,255,.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.mode-btn:hover {
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.08);
}
.mode-btn.active {
    border-color: var(--green);
    background: rgba(151,243,31,.12);
    box-shadow: 0 0 20px rgba(151,243,31,.2);
}
.mode-icon {
    font-size: 20px;
}
.mode-text {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mode-btn.active .mode-text {
    color: var(--green);
}
    text-transform: uppercase;
    letter-spacing: 1px;
}
.mode-btn.active .mode-text {
    color: var(--green);
}

/* Inline settings row (Difficulty + Time side-by-side) */
.inline-settings {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}
.inline-setting {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.inline-setting.hidden {
    display: none;
}

/* Styled select dropdown */
.setting-select {
    width: 100%;
    padding: 10px 32px 10px 14px;
    background: rgba(255,255,255,.05);
    border: 2px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2397f31f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s, background-color 0.2s;
}
.setting-select:hover, .setting-select:focus {
    border-color: var(--green);
    background-color: rgba(151,243,31,.08);
    outline: none;
}
.setting-select option {
    background: #1a1a2e;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Settings Buttons (Difficulty, Time) */
.setting-options {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.setting-btn {
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,.05);
    border: 2px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    transition: all 0.25s;
    text-transform: uppercase;
    letter-spacing: 2px;
    min-width: 70px;
}
.setting-btn:hover {
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.9);
}
.setting-btn.active {
    border-color: var(--green);
    color: var(--green);
    background: rgba(151,243,31,.12);
    box-shadow: 0 0 15px rgba(151,243,31,.2);
}

/* Play Button */
.play-btn {
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    background: linear-gradient(180deg, var(--green) 0%, var(--green2) 100%);
    border: 2px solid transparent;
    border-radius: 6px;
    color: #050910;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(151,243,31,.35);
    transition: all 0.2s;
    margin-top: 0;
}
.play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(151,243,31,.5);
}
.play-btn:active {
    transform: translateY(1px);
}
.play-btn.hidden {
    display: none;
}

/* Style Selection Buttons */
.style-options {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.style-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255,255,255,.04);
    border: 2px solid rgba(255,255,255,.12);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.style-btn:hover {
    border-color: rgba(255,255,255,.25);
}
.style-btn.active {
    border-width: 2px;
}
.style-icon {
    font-size: 22px;
}
.style-name {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    text-transform: uppercase;
    letter-spacing: 1px;
}
    font-size: 9px;
    color: rgba(255,255,255,.4);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Fire style */
.style-btn[data-value="fire"]:hover {
    border-color: #ff6600;
    background: linear-gradient(180deg, rgba(255,102,0,.10) 0%, rgba(255,102,0,.03) 100%);
    box-shadow: 0 0 22px rgba(255,102,0,.25);
}
.style-btn[data-value="fire"].active {
    border-color: #ff7722;
    background: linear-gradient(180deg, rgba(255,102,0,.22) 0%, rgba(255,102,0,.08) 100%);
    box-shadow: 0 0 28px rgba(255,102,0,.55), 0 0 8px rgba(255,102,0,.3) inset;
}
.style-btn[data-value="fire"].active .style-name { color: #ffaa55; }

/* Thunder style */
.style-btn[data-value="thunder"]:hover {
    border-color: #6699ff;
    background: rgba(102,153,255,.10);
    box-shadow: 0 0 18px rgba(102,153,255,.22);
}
.style-btn[data-value="thunder"].active {
    border-color: #88aaff;
    background: rgba(102,153,255,.20);
    box-shadow: 0 0 24px rgba(102,153,255,.50), 0 0 8px rgba(102,153,255,.25) inset;
}
.style-btn[data-value="thunder"].active .style-name { color: #aaccff; }

/* Ice style */
.style-btn[data-value="ice"]:hover {
    border-color: #66ddff;
    background: rgba(102,221,255,.10);
    box-shadow: 0 0 18px rgba(102,221,255,.22);
}
.style-btn[data-value="ice"].active {
    border-color: #88eeff;
    background: rgba(102,221,255,.20);
    box-shadow: 0 0 24px rgba(102,221,255,.50), 0 0 8px rgba(102,221,255,.25) inset;
}
.style-btn[data-value="ice"].active .style-name { color: #ccffff; }

/* Locked style button */
.style-btn.locked {
    opacity: 0.5;
    cursor: pointer;
    position: relative;
}
.style-btn.locked:hover {
    border-color: rgba(255,255,255,.25);
}
.style-lock {
    font-size: 12px;
    display: none;
}
.style-btn.locked .style-lock {
    display: inline;
}

/* Unlock modal */
.unlock-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 100;
    align-items: center;
    justify-content: center;
}
.unlock-overlay.open { display: flex; }
.unlock-card {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    min-width: 280px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.unlock-card .unlock-icon { font-size: 40px; margin-bottom: 8px; }
.unlock-card .unlock-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.unlock-card .unlock-desc { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.unlock-card .unlock-cost { font-size: 14px; color: #fbbf24; font-weight: 700; margin-bottom: 6px; }
.unlock-card .unlock-level { font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 18px; }
.unlock-card .unlock-actions { display: flex; gap: 10px; justify-content: center; }
.unlock-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.unlock-btn.primary { background: #8b5cf6; color: #fff; }
.unlock-btn.primary:hover { background: #7c3aed; }
.unlock-btn.primary:disabled { background: #555; cursor: not-allowed; }
.unlock-btn.secondary { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.12); }
.unlock-btn.secondary:hover { background: rgba(255,255,255,.12); }
.unlock-error { font-size: 12px; color: #f87171; margin-top: 10px; }

/* Waiting Panel */
.waiting-panel {
    margin-top: 12px;
    padding: 16px;
    text-align: center;
}
.waiting-panel.hidden {
    display: none;
}
.join-game-info {
    font-size: 13px;
    color: #b8d4f8;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 6px 14px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.join-game-info.hidden { display: none; }

/* Locked settings rows — pointer-events off, visually dimmed */
.settings-row.options-locked,
.mode-options.options-locked {
    pointer-events: none;
    opacity: 0.45;
}
.waiting-text {
    font-size: 14px;
    color: var(--gold);
    animation: pulse-wait 1.5s ease-in-out infinite;
}
@keyframes pulse-wait {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Home Button */
.home-btn {
    padding: 10px 28px;
    font-size: 14px; font-weight: 900;
    text-transform: uppercase; letter-spacing: 2px;
    background: rgba(255,255,255,.1);
    border: 2px solid rgba(255,255,255,.3);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0;
}
.home-btn:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.5);
}

/* Game Over Buttons */
.gameover-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: stretch;
}

/* Countdown Screen */
.countdown-screen {
    position: absolute;
    inset: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(9,17,29,0.95);
    transition: opacity 0.3s ease-out;
}
.countdown-screen.hidden {
    opacity: 0;
    pointer-events: none;
}
.countdown-number {
    font-size: 120px;
    font-weight: 900;
    color: var(--green);
    text-shadow: 0 0 60px rgba(151,243,31,.6), 0 0 100px rgba(151,243,31,.3);
    animation: countdown-pulse 1s ease-in-out;
}
.countdown-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-top: 10px;
}

/* Pause Screen */
.pause-screen {
    position: absolute;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pause-screen.hidden {
    display: none;
}

.pause-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.pause-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.pause-title {
    font-size: 72px;
    font-weight: 900;
    color: var(--yellow);
    text-shadow: 0 0 40px rgba(255, 200, 50, 0.5);
    letter-spacing: 8px;
    animation: pause-pulse 2s ease-in-out infinite;
}

.pause-hint {
    font-size: 18px;
    color: var(--muted);
    margin-top: 20px;
    letter-spacing: 2px;
}

@keyframes pause-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes countdown-pulse {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Stats Table */
.stats-table {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 10px 18px;
    margin-top: 10px;
    min-width: 280px;
}
.stats-header {
    font-size: 11px;
    font-weight: 900;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-align: center;
}
.stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.stat-row:last-child {
    border-bottom: none;
}
.stat-row .stat-name {
    color: var(--muted);
    font-size: 12px;
}
.stat-row .stat-value {
    color: var(--text);
    font-weight: 700;
    font-size: 12px;
}

/* Mistakes Section */
.mistakes-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.mistakes-header {
    font-size: 10px;
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.mistakes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 280px;
}
.mistake-item {
    background: rgba(255,75,57,.15);
    border: 1px solid rgba(255,75,57,.3);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--red);
}
.mistakes-empty {
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
    padding: 8px 0;
    display: block;
}
}

/* Room Panel (2-Player Mode) */
.room-panel {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.room-panel.hidden {
    display: none;
}
.room-buttons {
    display: flex;
    gap: 8px;
}
.room-btn {
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(255,255,255,.05);
    border: 2px solid rgba(255,255,255,.2);
    border-radius: 6px;
    color: rgba(255,255,255,.9);
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.room-btn:hover {
    border-color: var(--gold);
    background: rgba(255,200,76,.1);
    color: var(--gold);
}
.room-btn.secondary {
    padding: 8px 16px;
    font-size: 10px;
    background: transparent;
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.5);
}
.room-btn.secondary:hover {
    border-color: var(--red);
    color: var(--red);
}
.room-create, .room-join {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.room-join-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.room-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.room-input-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.room-create.hidden, .room-join.hidden {
    display: none;
}
.room-code-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.room-code-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255,200,76,.1) 0%, rgba(255,200,76,.05) 100%);
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid rgba(255,200,76,.3);
}
.room-label {
    font-size: 9px;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
}
.room-code {
    font-size: 20px;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 6px;
    text-shadow: 0 0 16px rgba(255,200,76,.6);
}
.start-room-btn {
    background: var(--green) !important;
    color: #000 !important;
    border-color: var(--green) !important;
    font-weight: 900 !important;
}
.start-room-btn:hover {
    background: #5fffaa !important;
    box-shadow: 0 0 20px rgba(0,255,136,.4) !important;
}
.room-status {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
.room-status.connecting {
    color: var(--gold);
}
.room-status.connected {
    color: var(--green);
}
.room-status.error {
    color: var(--red);
}
.room-input {
    width: 130px;
    padding: 9px 14px;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
    background: rgba(255,200,76,.06);
    border: 2px solid rgba(255,200,76,.35);
    border-radius: 6px;
    color: var(--gold);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.room-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 18px rgba(255,200,76,.25);
}
.room-input::placeholder {
    color: rgba(255,200,76,.25);
    letter-spacing: 5px;
    font-size: 16px;
}
.room-connect-btn {
    background: rgba(255,200,76,.12) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    padding: 10px 18px !important;
}
.room-connect-btn:not(:disabled):hover {
    background: rgba(255,200,76,.25) !important;
    box-shadow: 0 0 16px rgba(255,200,76,.3) !important;
}
.room-connect-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.room-btn.secondary {
    padding: 10px 14px;
    font-size: 11px;
    background: transparent;
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.45);
    letter-spacing: 1px;
}
.room-btn.secondary:hover {
    border-color: var(--red);
    color: var(--red);
}

/* Game Over Screen */
.gameover-screen {
    background: rgba(9,17,29,.95);
}
.winner-text {
    font-size: 48px; font-weight: 900;
    margin-bottom: 8px;
    text-shadow: 0 0 30px currentColor;
}
.winner-text.player-win { color: var(--green); }
.winner-text.cpu-win { color: var(--red); }
.winner-text.draw { color: var(--gold); }
.final-hp {
    font-size: 18px; color: var(--muted);
    margin-bottom: 16px;
}
.final-hp span { color: var(--text); font-weight: 700; }

/* Replay Confirmation Dialog */
.replay-confirm, .replay-waiting {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(20,30,50,.95);
    border: 2px solid var(--gold);
    border-radius: 12px;
    padding: 24px 36px;
    text-align: center;
    z-index: 110;
}
.replay-confirm.hidden, .replay-waiting.hidden {
    display: none;
}
.replay-confirm-text, .replay-waiting-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}
.replay-confirm-timer, .replay-waiting-timer {
    font-size: 48px;
    font-weight: 900;
    color: var(--gold);
    margin-bottom: 16px;
}
.replay-confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.confirm-btn, .decline-btn, .cancel-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.confirm-btn {
    background: var(--green);
    color: #050910;
}
.confirm-btn:hover {
    background: #b8ff3f;
}
.decline-btn, .cancel-btn {
    background: rgba(255,255,255,.1);
    color: var(--text);
    border: 2px solid rgba(255,255,255,.3);
}
.decline-btn:hover, .cancel-btn:hover {
    background: rgba(255,255,255,.2);
}

/* Combat FX */
.fx-layer {
    position: absolute; inset: 0; z-index: 6;
    pointer-events: none;
}
.slash {
    position: absolute;
    width: 150px; height: 14px;
    background: linear-gradient(90deg, rgba(255,74,0,.1), rgba(255,74,0,.95), rgba(255,210,60,.75));
    filter: blur(.2px);
    box-shadow: 0 0 18px rgba(255,120,0,.7);
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease-out;
}
.slash.active {
    opacity: 1;
    transform: scale(1);
}
.spark {
    position: absolute;
    width: 70px; height: 70px;
    background:
        radial-gradient(circle, rgba(255,238,150,1) 0 18%, rgba(255,168,0,.95) 19% 28%, rgba(255,90,0,.8) 29% 38%, rgba(255,255,255,0) 39% 100%);
    clip-path: polygon(50% 0%, 59% 30%, 88% 12%, 70% 40%, 100% 50%, 70% 60%, 88% 88%, 59% 70%, 50% 100%, 41% 70%, 12% 88%, 30% 60%, 0% 50%, 30% 40%, 12% 12%, 41% 30%);
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease-out;
}
.spark.active {
    opacity: 1;
    transform: scale(1);
    animation: pulse .35s ease-in-out infinite alternate;
}
@keyframes pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.12); opacity: .5; }
}
.damage-number {
    position: absolute;
    font-size: 68px; font-weight: 900;
    color: #fff;
    -webkit-text-stroke: 6px #b02900;
    text-shadow: 0 0 18px rgba(255,176,0,.9);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-out;
}
.damage-number.active {
    opacity: 1;
    transform: translateY(-12px);
}
.letter-damage {
    position: absolute;
    font-size: 24px;
    font-weight: 900;
    color: #97f31f;
    text-shadow: 0 0 8px rgba(151, 243, 31, 0.8);
    opacity: 1;
    transform: translateY(0);
    animation: letter-damage-float 0.3s ease-out forwards;
    pointer-events: none;
    z-index: 100;
}
.letter-damage .combo-indicator {
    font-size: 14px;
    margin-left: 4px;
    opacity: 0.8;
}
.letter-damage.combo-level-1 {
    font-size: 28px;
    text-shadow: 0 0 12px rgba(151, 243, 31, 1);
}
.letter-damage.combo-level-2 {
    font-size: 32px;
    color: #ffdd44;
    text-shadow: 0 0 15px rgba(255, 221, 68, 1);
}
.letter-damage.combo-level-3 {
    font-size: 36px;
    color: #ff8844;
    text-shadow: 0 0 20px rgba(255, 136, 68, 1);
    animation: letter-damage-combo 0.4s ease-out forwards;
}
@keyframes letter-damage-float {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px) scale(0.8);
    }
}
@keyframes letter-damage-combo {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(1);
    }
}
.perfect-text {
    position: absolute;
    left: 50%; top: 180px; transform: translateX(-50%);
    font-size: 48px; font-weight: 900;
    color: #b9ff7a;
    -webkit-text-stroke: 6px #193321;
    text-shadow: 0 0 18px rgba(149,255,104,.85);
    opacity: 0;
    z-index: 7;
    pointer-events: none;
}
.perfect-text.active {
    opacity: 1;
    animation: glow .6s ease-in-out infinite alternate;
}
@keyframes glow {
    from { transform: translateX(-50%) scale(1); opacity: .9; }
    to { transform: translateX(-50%) scale(1.05); opacity: 1; }
}
.combo-text {
    position: absolute;
    left: 50%; top: 230px; transform: translateX(-50%);
    font-size: 28px; font-weight: 900;
    color: #ffd44c;
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
    opacity: 0;
    z-index: 7;
    pointer-events: none;
}
.combo-text.active { opacity: 1; }

/* Special Skill Effects */
.special-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ========================================
   FIRE - Expanding fiery explosion (CIRCLE)
   ======================================== */
.fireball {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: none;
    pointer-events: none;
    /* Multi-layer fiery explosion */
    background:
        radial-gradient(circle at 35% 35%, #ffffff 0%, transparent 15%),
        radial-gradient(circle at 50% 50%, #ffdd00 0%, transparent 40%),
        radial-gradient(circle at 45% 55%, #ff6600 0%, transparent 55%),
        radial-gradient(circle, #ff4500 0%, #cc2200 45%, transparent 75%);
    box-shadow:
        0 0 80px rgba(255,100,0,0.9),
        0 0 150px rgba(255,50,0,0.7),
        0 0 250px rgba(200,30,0,0.5),
        inset 0 0 80px rgba(255,220,50,0.6);
    border: 3px solid rgba(255,150,0,0.8);
}
.fireball.active {
    display: block !important;
    animation: fireball-boom 0.8s ease-out forwards;
}
@keyframes fireball-boom {
    0% { transform: scale(0.3); opacity: 1; }
    20% { transform: scale(1.0); opacity: 1; }
    40% { transform: scale(1.4); opacity: 0.9; }
    70% { transform: scale(2.0); opacity: 0.5; }
    100% { transform: scale(2.8); opacity: 0; }
}

/* ========================================
   THUNDER - Multiple jagged lightning bolts
   ======================================== */
.thunderbolt {
    position: absolute;
    width: 300px;
    height: 600px;
    display: none;
    pointer-events: none;
    z-index: 150;
}

/* Left bolt - simpler zigzag shape */
.thunderbolt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    transform: translateX(-50%);
    width: 80px;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(180,220,255,0.8) 50%,
        transparent 100%
    );
    clip-path: polygon(
        40% 0%, 60% 0%,
        80% 15%, 45% 20%,
        90% 40%, 30% 50%,
        70% 70%, 20% 85%,
        50% 100%, 40% 100%,
        10% 85%, 55% 70%,
        15% 50%, 75% 40%,
        10% 20%, 55% 15%
    );
    filter:
        drop-shadow(0 0 15px rgba(200,230,255,1))
        drop-shadow(0 0 30px rgba(150,200,255,0.8));
}

/* Center bolt - same zigzag shape */
.thunderbolt::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(180,220,255,0.8) 50%,
        transparent 100%
    );
    clip-path: polygon(
        40% 0%, 60% 0%,
        80% 15%, 45% 20%,
        90% 40%, 30% 50%,
        70% 70%, 20% 85%,
        50% 100%, 40% 100%,
        10% 85%, 55% 70%,
        15% 50%, 75% 40%,
        10% 20%, 55% 15%
    );
    filter:
        drop-shadow(0 0 15px rgba(200,230,255,1))
        drop-shadow(0 0 30px rgba(150,200,255,0.8));
}

/* Right bolt (third bolt) - same zigzag shape */
.thunderbolt-bolt3 {
    position: absolute;
    top: 0;
    left: 80%;
    transform: translateX(-50%);
    width: 80px;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(180,220,255,0.8) 50%,
        transparent 100%
    );
    clip-path: polygon(
        40% 0%, 60% 0%,
        80% 15%, 45% 20%,
        90% 40%, 30% 50%,
        70% 70%, 20% 85%,
        50% 100%, 40% 100%,
        10% 85%, 55% 70%,
        15% 50%, 75% 40%,
        10% 20%, 55% 15%
    );
    filter:
        drop-shadow(0 0 15px rgba(200,230,255,1))
        drop-shadow(0 0 30px rgba(150,200,255,0.8));
}

.thunderbolt.active {
    display: block !important;
    animation: thunder-strike 0.8s ease-out forwards;
}

@keyframes thunder-strike {
    0% {
        opacity: 0;
        transform: translateY(-150px) scaleY(0.3);
        filter: brightness(3);
    }
    5% {
        opacity: 1;
        transform: translateY(-50px) scaleY(0.8);
        filter: brightness(5);
    }
    15% {
        opacity: 0.3;
        filter: brightness(1);
    }
    25% {
        opacity: 1;
        transform: translateY(0) scaleY(1.1);
        filter: brightness(4);
    }
    35% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
        filter: brightness(3);
    }
    65% {
        opacity: 0.4;
    }
    80% {
        opacity: 0.8;
        filter: brightness(2);
    }
    100% {
        opacity: 0;
        transform: translateY(30px) scaleY(0.9);
    }
}

/* Lightning flash overlay for thunder */
.thunder-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(200,230,255,0.8) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 140;
}
.thunder-flash.active {
    animation: lightning-flash 0.5s ease-out;
}
@keyframes lightning-flash {
    0%, 100% { opacity: 0; }
    5%, 25%, 45% { opacity: 0.6; }
    15%, 35% { opacity: 0.2; }
}

/* ========================================
   ICE - Symmetrical Crystal Snowflake
   ======================================== */
.iceblast {
    position: absolute;
    width: 200px;
    height: 200px;
    display: none;
    pointer-events: none;
    /* 6-pointed star/snowflake - clean symmetrical shape */
    clip-path: polygon(
        50% 0%, 56% 32%, 100% 32%, 68% 52%,
        100% 68%, 56% 68%, 50% 100%,
        44% 68%, 0% 68%, 32% 52%,
        0% 32%, 44% 32%
    );
    background: linear-gradient(180deg,
        #ffffff 0%,
        #d0f0ff 30%,
        #80d0ff 60%,
        #40b0ff 100%
    );
    box-shadow:
        0 0 40px rgba(150,220,255,0.9),
        0 0 80px rgba(100,200,255,0.7),
        0 0 120px rgba(50,180,255,0.5),
        inset 0 0 30px rgba(255,255,255,0.5);
}
/* Inner crystal detail - smaller 6-pointed star */
.iceblast::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    clip-path: polygon(
        50% 0%, 56% 32%, 100% 32%, 68% 52%,
        100% 68%, 56% 68%, 50% 100%,
        44% 68%, 0% 68%, 32% 52%,
        0% 32%, 44% 32%
    );
    background: linear-gradient(180deg,
        rgba(255,255,255,1) 0%,
        rgba(200,240,255,0.9) 50%,
        rgba(150,220,255,0.7) 100%
    );
    box-shadow: 0 0 20px rgba(255,255,255,0.8);
}
/* Center hexagon glow */
.iceblast::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 25px rgba(255,255,255,1);
}
/* Tiny ice blooms - mini snowflakes flying outward */
.ice-bloom {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    /* Mini snowflake - same 6-pointed star shape */
    clip-path: polygon(
        50% 0%, 56% 32%, 100% 32%, 68% 52%,
        100% 68%, 56% 68%, 50% 100%,
        44% 68%, 0% 68%, 32% 52%,
        0% 32%, 44% 32%
    );
    background: linear-gradient(180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(180,230,255,0.8) 50%,
        rgba(120,200,255,0.6) 100%
    );
    box-shadow: 0 0 15px rgba(150,220,255,0.8);
}
/* Position each bloom to fly outward in different directions */
.ice-bloom-1 { --bloom-angle: 0deg; }
.ice-bloom-2 { --bloom-angle: 60deg; }
.ice-bloom-3 { --bloom-angle: 120deg; }
.ice-bloom-4 { --bloom-angle: 180deg; }
.ice-bloom-5 { --bloom-angle: 240deg; }
.ice-bloom-6 { --bloom-angle: 300deg; }

.iceblast.active .ice-bloom {
    animation: ice-bloom-fly 0.8s ease-out forwards;
}
.iceblast.active .ice-bloom-1 { animation-delay: 0ms; }
.iceblast.active .ice-bloom-2 { animation-delay: 50ms; }
.iceblast.active .ice-bloom-3 { animation-delay: 100ms; }
.iceblast.active .ice-bloom-4 { animation-delay: 150ms; }
.iceblast.active .ice-bloom-5 { animation-delay: 200ms; }
.iceblast.active .ice-bloom-6 { animation-delay: 250ms; }

@keyframes ice-bloom-fly {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--bloom-angle)) translateY(0) scale(0.3);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--bloom-angle)) translateY(-120px) scale(0.7);
    }
}

.iceblast.active {
    display: block !important;
    animation: ice-crystal 0.8s ease-out forwards;
}
@keyframes ice-crystal {
    0% { transform: rotate(0deg) scale(0.4); opacity: 1; }
    30% { transform: rotate(30deg) scale(1.0); opacity: 1; }
    50% { transform: rotate(60deg) scale(1.2); opacity: 0.8; }
    80% { transform: rotate(90deg) scale(1.6); opacity: 0.4; }
    100% { transform: rotate(120deg) scale(2.0); opacity: 0; }
}

/* Screen flash for special */
.screen-flash {
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
}
.screen-flash.active {
    animation: flash 0.3s ease-out;
}
@keyframes flash {
    0% { opacity: 0.6; }
    100% { opacity: 0; }
}

/* ========== SLOW MOTION EFFECT ========== */
.game.slow-motion {
    /* Slow down all animations */
    animation-duration: 3s !important;
}

.game.slow-motion * {
    animation-duration: inherit !important;
    transition-duration: 0.5s !important;
}

/* Slow motion specific effects */
.game.slow-motion .fx-layer {
    transform: scale(1.05);
}

.game.slow-motion .fireball.active,
.game.slow-motion .thunderbolt.active,
.game.slow-motion .iceblast.active {
    animation-duration: 2s !important;
    animation-timing-function: ease-in-out !important;
}

/* Enhanced screen flash for slow-mo */
.game.slow-motion .screen-flash.active {
    animation: slow-flash 2s ease-out;
}

@keyframes slow-flash {
    0% { opacity: 0.8; background: var(--gold); }
    30% { opacity: 0.5; }
    70% { opacity: 0.3; }
    100% { opacity: 0; }
}

/* ========== CINEMATIC MODE ========== */

/* Cinematic screen dim - darkens background during special */
.game.cinematic-dim::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 50;
    pointer-events: none;
    animation: cinematic-dim-in 0.3s ease-out forwards;
}

@keyframes cinematic-dim-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* MAX phase - screen glow intensifies */
.game.cinematic-max::after {
    background: rgba(0, 0, 0, 0.3);
    animation: cinematic-pulse 0.4s ease-in-out infinite;
}

@keyframes cinematic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* MAX phase screen flash - pulsing glow */
.game.cinematic-max .screen-flash.active {
    animation: cinematic-max-flash 0.4s ease-in-out infinite;
}

@keyframes cinematic-max-flash {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* Death flash for KO victories */
@keyframes death-flash {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* Death flash overlay */
.death-flash {
    animation: death-flash 0.15s ease-out forwards;
}

/* Camera shake for impactful attacks */
.game.camera-shake {
    animation: shake 0.15s ease-out;
}

@keyframes shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(var(--shake-x, 8px), calc(var(--shake-x, 8px) * -0.5)); }
    40% { transform: translate(calc(var(--shake-x, 8px) * -1), var(--shake-x, 8px)); }
    60% { transform: translate(var(--shake-x, 8px), calc(var(--shake-x, 8px) * 0.5)); }
    80% { transform: translate(calc(var(--shake-x, 8px) * -0.5), calc(var(--shake-x, 8px) * -0.5)); }
}

/* Stronger shake for critical hits */
.game.camera-shake-strong {
    animation: shake-strong 0.2s ease-out;
}

@keyframes shake-strong {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(var(--shake-x, 12px), calc(var(--shake-x, 12px) * -0.7)); }
    30% { transform: translate(calc(var(--shake-x, 12px) * -1.2), var(--shake-x, 12px)); }
    45% { transform: translate(var(--shake-x, 12px), calc(var(--shake-x, 12px) * 0.7)); }
    60% { transform: translate(calc(var(--shake-x, 12px) * -0.8), calc(var(--shake-x, 12px) * -0.5)); }
    75% { transform: translate(var(--shake-x, 12px), calc(var(--shake-x, 12px) * 0.3)); }
    90% { transform: translate(calc(var(--shake-x, 12px) * -0.3), var(--shake-x, 12px)); }
}

/* Cinematic shake for special skill release - longer and more dramatic */
.game.camera-shake-cinematic {
    animation: shake-cinematic 0.5s ease-out;
}

@keyframes shake-cinematic {
    0%, 100% { transform: translate(0, 0); }
    5% { transform: translate(var(--shake-x, 18px), calc(var(--shake-x, 18px) * -0.8)); }
    10% { transform: translate(calc(var(--shake-x, 18px) * -1.3), var(--shake-x, 18px)); }
    15% { transform: translate(var(--shake-x, 18px), calc(var(--shake-x, 18px) * 0.9)); }
    20% { transform: translate(calc(var(--shake-x, 18px) * -1.1), calc(var(--shake-x, 18px) * -0.6)); }
    25% { transform: translate(var(--shake-x, 18px), calc(var(--shake-x, 18px) * 0.5)); }
    30% { transform: translate(calc(var(--shake-x, 18px) * -0.9), var(--shake-x, 18px)); }
    35% { transform: translate(var(--shake-x, 18px), calc(var(--shake-x, 18px) * -0.4)); }
    40% { transform: translate(calc(var(--shake-x, 18px) * -0.7), calc(var(--shake-x, 18px) * 0.3)); }
    50% { transform: translate(var(--shake-x, 15px), calc(var(--shake-x, 15px) * -0.5)); }
    60% { transform: translate(calc(var(--shake-x, 15px) * -0.6), var(--shake-x, 15px)); }
    70% { transform: translate(var(--shake-x, 12px), calc(var(--shake-x, 12px) * 0.3)); }
    80% { transform: translate(calc(var(--shake-x, 10px) * -0.4), calc(var(--shake-x, 10px) * -0.2)); }
    90% { transform: translate(var(--shake-x, 8px), calc(var(--shake-x, 8px) * 0.15)); }
}

/* End game winner text overlay */
.end-game-winner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    font-weight: 900;
    letter-spacing: 8px;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    z-index: 50;
    text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
    animation: winner-appear 0.5s ease-out forwards;
}

.end-game-winner-text.active {
    opacity: 1;
}

.end-game-winner-text.victory {
    color: #ffd700;
    text-shadow: 0 0 30px #ffd700, 0 0 60px #ff8c00, 0 0 90px #ff6600;
}

.end-game-winner-text.defeat {
    color: #ff4444;
    text-shadow: 0 0 30px #ff4444, 0 0 60px #cc0000, 0 0 90px #880000;
}

.end-game-winner-text.draw {
    color: #aaaaaa;
    text-shadow: 0 0 30px #aaaaaa, 0 0 60px #888888;
}

@keyframes winner-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* End game prompt */
.end-game-prompt {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--gold);
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
    text-shadow: 0 0 10px var(--gold);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 50;
}

.end-game-prompt.active {
    opacity: 1;
    animation: pulse-prompt 1.5s ease-in-out infinite;
}

@keyframes pulse-prompt {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

/* ===== STATS TICKER (above lane-wrap) ===== */
.stats-ticker {
    position: absolute;
    bottom: 198px;   /* 80 (lane bottom) + 112 (lane height) + 6 gap */
    left: 60px;
    right: 60px;
    height: 28px;
    pointer-events: none;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.stats-ticker.visible { opacity: 1; }

.stats-ticker-item {
    position: absolute;
    left: 0;   /* JS overrides this to cursor X relative to ticker */
    top: 0;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: rgba(5, 9, 15, 0.72);
    border: 1px solid rgba(207, 214, 230, 0.14);
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);   /* center pill on cursor */
    opacity: 0;
    transition: opacity 0.35s ease;
}
.stats-ticker-item.active { opacity: 1; }
.stats-ticker-stat-label { font-size: 11px; color: var(--muted); letter-spacing: 2px; min-width: 36px; text-align: right; }
.stats-ticker-divider { font-size: 11px; color: var(--muted); opacity: 0.5; }
.stats-ticker-you { color: var(--text); }
.stats-ticker-cpu { color: var(--muted); }
.stats-ticker-item.you-winning .stats-ticker-you { color: var(--green); }
.stats-ticker-item.you-losing  .stats-ticker-you { color: var(--red); }
.stats-ticker-item.cpu-energy-full .stats-ticker-cpu { color: var(--gold); text-shadow: 0 0 8px rgba(255,212,76,0.7); }

/* ===== EVENT FLASH (inside lane-wrap, at top center) ===== */
.event-flash {
    position: absolute;
    top: 4px;
    left: 0;   /* JS overrides this to cursor X relative to lane-wrap */
    transform: translateX(-50%);   /* center pill on cursor */
    height: 20px;
    padding: 0 14px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.event-flash.visible { opacity: 1; }
.event-flash.danger     { background: rgba(220, 50, 50, 0.85); color: #fff; border: 1px solid rgba(255,80,80,0.6); }
.event-flash.alert      { background: rgba(200, 120, 30, 0.80); color: #fff; border: 1px solid rgba(255,160,60,0.6); }
.event-flash.warning    { background: rgba(30, 20, 0, 0.85); color: var(--gold); border: 1px solid rgba(255,212,76,0.6); animation: flash-pulse 0.6s ease-in-out infinite alternate; }
.event-flash.opportunity{ background: rgba(20, 80, 30, 0.85); color: var(--green); border: 1px solid rgba(80,200,80,0.5); }
.event-flash.power      { background: rgba(30, 20, 0, 0.80); color: var(--gold); border: 1px solid rgba(255,212,76,0.4); }

@keyframes flash-pulse {
    from { box-shadow: none; }
    to   { box-shadow: 0 0 10px rgba(255,212,76,0.6); }
}

/* ===== END GAME PROGRESSION DISPLAY (COMPACT) ===== */
.progression-section {
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.progression-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.progression-item-compact {
    text-align: center;
}

.progression-item-compact .prog-label {
    font-size: 8px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.progression-item-compact .prog-value {
    font-size: 24px;
    font-weight: 900;
    color: var(--green);
}

.achievements-unlocked {
    margin-top: 10px;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 6px;
    margin-top: 6px;
}

.achievement-item:first-child { margin-top: 0; }

.achievement-emoji { font-size: 16px; }
.achievement-name { font-size: 11px; font-weight: 700; color: var(--gold); }
.achievement-xp { font-size: 10px; color: var(--green); margin-left: auto; }

.levelup-banner {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(59, 130, 246, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 20px 40px;
    text-align: center;
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.4);
}

.levelup-banner.active {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}

.levelup-banner .levelup-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 4px;
}

.levelup-banner .levelup-new {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.levelup-banner .levelup-xp {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6px;
}

/* ── Mobile Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .welcome-screen, .gameover-screen {
        overflow-y: auto;
        padding-top: 16px;
        padding-left: 12px;
        padding-right: 12px;
    }
    /* Back button: flow above title instead of absolute overlap */
    .back-to-portal {
        position: static;
        align-self: flex-start;
        margin-bottom: 4px;
    }
    .welcome-title { font-size: clamp(24px, 7vw, 42px); letter-spacing: 3px; margin-bottom: 0; }
    .welcome-subtitle { font-size: 10px; letter-spacing: 2px; margin-bottom: 10px; }
    .name-input { width: 200px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }
    .settings-row { max-width: 320px; }
    .setting-group { padding: 8px 10px; }
    .setting-label { font-size: 9px; margin-bottom: 6px; }
    .setting-options { gap: 6px; flex-wrap: wrap; }
    .setting-btn { padding: 8px 12px; font-size: 10px; min-width: 55px; letter-spacing: 1px; }
    .mode-options { gap: 8px; }
    .mode-btn { padding: 10px 14px; gap: 6px; }
    .mode-icon { font-size: 16px; }
    .mode-text { font-size: 11px; letter-spacing: 0; }
    .play-btn { padding: 10px 28px; font-size: 14px; letter-spacing: 2px; margin-top: 10px; }
    .style-options { gap: 8px; flex-wrap: wrap; }
    .style-btn { padding: 10px 12px; }
    .style-icon { font-size: 18px; }
    .style-name { font-size: 10px; }
    .style-lock { font-size: 10px; }
    /* Game over */
    .gameover-screen { padding-top: 12px; }
    .winner-text { font-size: 28px; }
    .final-hp { font-size: 14px; }
}

/* ── Beam Clash UI ──────────────────────────────────── */
.beam-clash-ui {
    position: absolute; inset: 0; z-index: 5;
    pointer-events: none;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.beam-clash-ui.hidden { display: none; }

.accuracy-gate {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding: 12px 24px;
    background: rgba(0,0,0,.7);
    border: 2px solid rgba(255,255,255,.2);
    border-radius: 12px;
    animation: accuracyPop .3s ease-out;
}
.accuracy-gate.hidden { display: none; }
.accuracy-gate.pass { border-color: var(--green); }
.accuracy-gate.fail { border-color: var(--red); }
.accuracy-value {
    font-size: 32px; font-weight: 900; color: #fff;
}
.accuracy-result {
    font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.accuracy-gate.pass .accuracy-result { color: var(--green); }
.accuracy-gate.fail .accuracy-result { color: var(--red); }

.round-result {
    font-size: 36px; font-weight: 900; letter-spacing: 4px;
    text-transform: uppercase; color: #fff;
    text-shadow: 0 0 30px rgba(151,243,31,.8);
    animation: roundResultPop .5s ease-out;
}
.round-result.hidden { display: none; }
.round-result.direct-hit {
    color: var(--red);
    text-shadow: 0 0 30px rgba(255,75,57,.8);
}

.mode-lock {
    font-size: 10px;
    margin-left: 2px;
}

@keyframes accuracyPop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes roundResultPop {
    from { transform: scale(1.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ========================================
   BEAM CLASH — Element-specific beams
   ======================================== */
.beam {
    position: absolute;
    height: 20px;
    display: none;
    pointer-events: none;
    border-radius: 4px;
    z-index: 5;
    transition: width 0.05s linear, left 0.05s linear;
}

.beam.active { display: block; }

/* --- Fire beam: warm gradient with flickering glow --- */
.beam-fire {
    background:
        linear-gradient(90deg,
            rgba(255,255,255,0.9) 0%,
            #ffdd00 10%,
            #ff8800 40%,
            #ff4400 70%,
            #cc2200 100%);
    box-shadow:
        0 0 15px rgba(255,100,0,0.8),
        0 0 40px rgba(255,60,0,0.5),
        0 0 80px rgba(200,30,0,0.3),
        inset 0 0 10px rgba(255,220,50,0.4);
    animation: beam-fire-pulse 0.15s ease-in-out infinite alternate;
}
#beam-enemy.beam-fire {
    background:
        linear-gradient(270deg,
            rgba(255,255,255,0.9) 0%,
            #ffdd00 10%,
            #ff8800 40%,
            #ff4400 70%,
            #cc2200 100%);
}

@keyframes beam-fire-pulse {
    0%   { filter: brightness(1); box-shadow: 0 0 15px rgba(255,100,0,0.8), 0 0 40px rgba(255,60,0,0.5), 0 0 80px rgba(200,30,0,0.3); }
    100% { filter: brightness(1.3); box-shadow: 0 0 25px rgba(255,100,0,1), 0 0 60px rgba(255,60,0,0.7), 0 0 100px rgba(200,30,0,0.4); }
}

/* --- Ice beam: crystalline with shimmer --- */
.beam-ice {
    background:
        linear-gradient(90deg,
            rgba(255,255,255,0.95) 0%,
            #aaeeff 15%,
            #66ddff 40%,
            #3399dd 70%,
            #1166aa 100%);
    box-shadow:
        0 0 15px rgba(100,200,255,0.8),
        0 0 40px rgba(50,150,255,0.5),
        0 0 80px rgba(30,100,200,0.3),
        inset 0 0 10px rgba(200,240,255,0.5);
    clip-path: polygon(0% 15%, 3% 0%, 97% 0%, 100% 15%, 100% 85%, 97% 100%, 3% 100%, 0% 85%);
    animation: beam-ice-shimmer 0.3s ease-in-out infinite alternate;
}
#beam-enemy.beam-ice {
    background:
        linear-gradient(270deg,
            rgba(255,255,255,0.95) 0%,
            #aaeeff 15%,
            #66ddff 40%,
            #3399dd 70%,
            #1166aa 100%);
}

@keyframes beam-ice-shimmer {
    0%   { filter: brightness(1) saturate(1); }
    100% { filter: brightness(1.15) saturate(1.3); }
}

/* --- Thunder beam: crackling electrical storm --- */
/* ===== THUNDER BEAM — fire-style smooth beam in electric colors ===== */
.beam-thunder {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.95) 0%,
        #eef0ff 8%,
        #aabbff 30%,
        #7799ff 55%,
        #4455dd 80%,
        #2233aa 100%);
    box-shadow:
        0 0 15px rgba(180,200,255,0.9),
        0 0 35px rgba(130,155,255,0.8),
        0 0 65px rgba(90,110,220,0.5),
        0 0 110px rgba(60,80,200,0.25),
        inset 0 0 10px rgba(220,230,255,0.5);
    animation: beam-thunder-pulse 0.18s ease-in-out infinite alternate;
}
#beam-enemy.beam-thunder {
    background: linear-gradient(270deg,
        rgba(255,255,255,0.95) 0%,
        #eef0ff 8%,
        #aabbff 30%,
        #7799ff 55%,
        #4455dd 80%,
        #2233aa 100%);
}

@keyframes beam-thunder-pulse {
    0% {
        filter: brightness(1);
        box-shadow: 0 0 15px rgba(180,200,255,0.9), 0 0 35px rgba(130,155,255,0.8), 0 0 65px rgba(90,110,220,0.5);
    }
    100% {
        filter: brightness(1.35);
        box-shadow: 0 0 22px rgba(180,200,255,1), 0 0 50px rgba(130,155,255,1), 0 0 90px rgba(90,110,220,0.7), 0 0 130px rgba(60,80,200,0.35);
    }
}

/* --- Clash point: glowing sphere at collision --- */
.beam-clash-point {
    position: absolute;
    width: 40px;
    height: 40px;
    display: none;
    pointer-events: none;
    border-radius: 50%;
    z-index: 6;
    background:
        radial-gradient(circle at 40% 40%,
            #ffffff 0%,
            rgba(255,255,255,0.8) 20%,
            rgba(255,220,150,0.4) 50%,
            transparent 70%);
    box-shadow:
        0 0 20px rgba(255,255,255,0.9),
        0 0 50px rgba(255,200,100,0.6),
        0 0 80px rgba(255,150,50,0.3);
    animation: clash-pulse 0.2s ease-in-out infinite alternate;
}

.beam-clash-point.active { display: block; }

@keyframes clash-pulse {
    0%   { transform: scale(1); box-shadow: 0 0 20px rgba(255,255,255,0.9), 0 0 50px rgba(255,200,100,0.6); }
    100% { transform: scale(1.3); box-shadow: 0 0 30px rgba(255,255,255,1), 0 0 70px rgba(255,200,100,0.8), 0 0 100px rgba(255,150,50,0.4); }
}

/* --- Energy Orbs: glowing spheres at beam origins --- */
.beam-orb {
    position: absolute;
    width: 36px;
    height: 36px;
    display: none;
    pointer-events: none;
    border-radius: 50%;
    z-index: 7;
    will-change: transform, width, height;
    transition: width 0.1s linear, height 0.1s linear;
}
.beam-orb.active { display: block; }

/* ===== FIRE ORB — DANGEROUS FLAME BALL ===== */
.beam-orb-player.beam-fire {
    background: radial-gradient(circle at 65% 40%,
        #ffffff 0%, #fff5a0 8%, #ffcc00 20%,
        #ff6600 45%, #dd2200 75%, #990000 100%);
    box-shadow:
        0 0 0 2px rgba(255,200,0,0.7),
        0 0 12px rgba(255,180,0,1),
        0 0 30px rgba(255,100,0,0.9),
        0 0 65px rgba(255,60,0,0.7),
        0 0 110px rgba(200,20,0,0.4),
        inset 0 0 8px rgba(255,240,100,0.6);
    overflow: visible;
    animation: fire-orb-flicker 0.12s steps(1) infinite alternate;
}
.beam-orb-enemy.beam-fire {
    background: radial-gradient(circle at 35% 40%,
        #ffffff 0%, #fff5a0 8%, #ffcc00 20%,
        #ff6600 45%, #dd2200 75%, #990000 100%);
    box-shadow:
        0 0 0 2px rgba(255,200,0,0.7),
        0 0 12px rgba(255,180,0,1),
        0 0 30px rgba(255,100,0,0.9),
        0 0 65px rgba(255,60,0,0.7),
        0 0 110px rgba(200,20,0,0.4),
    overflow: visible;
    animation: fire-orb-flicker 0.12s steps(1) infinite alternate;
}
/* Flame corona — breathing heat halo */
.beam-orb-player.beam-fire::before,
.beam-orb-enemy.beam-fire::before {
    content: '';
    position: absolute;
    inset: -38%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,160,0,0.30) 20%,
        rgba(255,80,0,0.18)  52%,
        rgba(200,20,0,0.07)  74%,
        transparent 92%);
    animation: fire-corona-breathe 0.35s ease-in-out infinite alternate;
    pointer-events: none;
}
/* Flame tongue spikes — irregular star */
.beam-orb-player.beam-fire::after,
.beam-orb-enemy.beam-fire::after {
    content: '';
    position: absolute;
    inset: -28%;
    clip-path: polygon(
        50%  2%,  57% 33%, 82% 12%, 67% 42%,
        100% 50%, 68% 58%, 88% 88%, 53% 68%,
        50% 100%, 47% 68%, 12% 88%, 32% 58%,
        0%  50%,  33% 42%, 18% 12%, 43% 33%
    );
    background: linear-gradient(to bottom,
        rgba(255,240,80,0.75)  0%,
        rgba(255,140,0,0.55)  45%,
        rgba(255,50,0,0.30)  100%);
    animation: fire-spike-flicker 0.15s steps(2) infinite alternate;
    pointer-events: none;
}
@keyframes fire-orb-flicker {
    0%   { filter: brightness(1.3) saturate(1.2); }
    100% { filter: brightness(2.4) saturate(1.6); }
}
@keyframes fire-corona-breathe {
    0%   { transform: scale(1);    opacity: 0.85; }
    100% { transform: scale(1.35); opacity: 0.40; }
}
@keyframes fire-spike-flicker {
    0%   { transform: scale(1)    rotate(-6deg); opacity: 0.65; }
    100% { transform: scale(1.15) rotate(6deg);  opacity: 1.00; }
}

/* ===== THUNDER ORB — PLASMA BALL OVERHAUL ===== */
.beam-orb-player.beam-thunder,
.beam-orb-enemy.beam-thunder {
    background: radial-gradient(circle at 50% 50%,
        #ffffff    0%,
        #ffffd0    7%,
        #c8d8ff   20%,
        #8899ee   45%,
        #4422bb   70%,
        #0d0040  100%);
    box-shadow:
        0 0 0 2px rgba(255,255,200,0.85),
        0 0 10px rgba(255,255,170,1),
        0 0 24px rgba(190,205,255,0.98),
        0 0 52px rgba(130,145,255,0.82),
        0 0 95px rgba(90,60,215,0.5),
        0 0 150px rgba(60,40,180,0.22),
        inset 0 0 14px rgba(200,215,255,0.7);
    overflow: visible;
    animation: thunder-orb-plasma 0.09s steps(1) infinite alternate;
}
/* Outer electric corona ring — pulses larger */
.beam-orb-player.beam-thunder::before,
.beam-orb-enemy.beam-thunder::before {
    content: '';
    position: absolute;
    inset: -40%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(200,215,255,0.14) 35%,
        rgba(150,165,255,0.07) 60%,
        transparent 72%);
    animation: thunder-corona-pulse 0.13s steps(1) infinite alternate;
    pointer-events: none;
}
/* Crackling discharge spikes — 8-point star that rotates jerkily */
.beam-orb-player.beam-thunder::after,
.beam-orb-enemy.beam-thunder::after {
    content: '';
    position: absolute;
    inset: -22%;
    clip-path: polygon(
        50%  0%, 54% 40%, 100% 29%, 63% 50%,
        92%  95%, 50% 62%, 8%  95%, 37% 50%,
        0%  29%, 46% 40%
    );
    background: rgba(190, 210, 255, 0.3);
    animation: thunder-spike-snap 0.17s steps(4) infinite;
    pointer-events: none;
}

@keyframes thunder-orb-plasma {
    0%   { filter: brightness(1.5) saturate(1.2); }
    100% { filter: brightness(3.2) saturate(1.7); }
}
@keyframes thunder-corona-pulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    100% { transform: scale(1.25); opacity: 0.35; }
}
@keyframes thunder-spike-snap {
    0%   { transform: rotate(0deg)   scale(1);    opacity: 0.55; }
    25%  { transform: rotate(45deg)  scale(1.1);  opacity: 0.8; }
    50%  { transform: rotate(90deg)  scale(0.95); opacity: 0.45; }
    75%  { transform: rotate(150deg) scale(1.12); opacity: 0.75; }
    100% { transform: rotate(180deg) scale(1);    opacity: 0.55; }
}

/* ===== ICE ORB — COLD SNOWFLAKE CRYSTAL ===== */
.beam-orb-player.beam-ice {
    background: radial-gradient(circle at 65% 40%,
        #ffffff 0%, #e8f8ff 10%, #99ddff 25%,
        #44aaee 55%, #0055bb 80%, #001f66 100%);
    box-shadow:
        0 0 0 2px rgba(180,230,255,0.7),
        0 0 12px rgba(140,210,255,1),
        0 0 30px rgba(80,170,255,0.85),
        0 0 65px rgba(40,110,220,0.6),
        inset 0 0 8px rgba(200,240,255,0.7);
    overflow: visible;
    animation: ice-crystal-pulse 0.7s ease-in-out infinite alternate;
}
.beam-orb-enemy.beam-ice {
    background: radial-gradient(circle at 35% 40%,
        #ffffff 0%, #e8f8ff 10%, #99ddff 25%,
        #44aaee 55%, #0055bb 80%, #001f66 100%);
    box-shadow:
        0 0 0 2px rgba(180,230,255,0.7),
        0 0 12px rgba(140,210,255,1),
        0 0 30px rgba(80,170,255,0.85),
        0 0 110px rgba(20,60,180,0.3),
        inset 0 0 8px rgba(200,240,255,0.7);
    overflow: visible;
    animation: ice-crystal-pulse 0.7s ease-in-out infinite alternate;
}
/* Frost halo ring */
.beam-orb-player.beam-ice::before,
.beam-orb-enemy.beam-ice::before {
    content: '';
    position: absolute;
    inset: -32%;
    border-radius: 50%;
    border: 1px solid rgba(160,220,255,0.25);
    background: radial-gradient(circle,
        transparent 42%,
        rgba(140,210,255,0.18) 63%,
        rgba(80,160,255,0.08) 80%,
        transparent 96%);
    animation: ice-halo-breathe 0.9s ease-in-out infinite alternate;
    pointer-events: none;
}
/* 6-point snowflake crystal arms */
.beam-orb-player.beam-ice::after,
.beam-orb-enemy.beam-ice::after {
    content: '';
    position: absolute;
    inset: -22%;
    clip-path: polygon(
        50% 0%,    56% 39.6%, 93.3% 25%, 62% 50%,
        93.3% 75%, 56% 60.4%, 50% 100%, 44% 60.4%,
        6.7%  75%, 38% 50%,   6.7%  25%, 44% 39.6%
    );
    background: linear-gradient(135deg,
        rgba(220,245,255,0.85) 0%,
        rgba(140,210,255,0.65) 45%,
        rgba(80,150,240,0.45) 100%);
    animation: ice-crystal-spin 5s linear infinite;
    pointer-events: none;
}
@keyframes ice-crystal-pulse {
    0%   { filter: brightness(1.0) saturate(1.1); }
    100% { filter: brightness(1.55) saturate(1.35); }
}
@keyframes ice-halo-breathe {
    0%   { transform: scale(1);    opacity: 0.7; }
    100% { transform: scale(1.28); opacity: 0.25; }
}
@keyframes ice-crystal-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Orb burst animation on special word completion */
.beam-orb.orb-burst {
    animation: orb-burst-anim 0.4s ease-out;
    --burst-scale: 2.2;
}
/* Compact orb after first release — smaller but shinier */
.beam-orb.orb-compact {
    filter: brightness(1.6) saturate(1.4);
    animation: orb-compact-glow 0.5s ease-in-out infinite alternate;
}
.beam-orb.orb-compact.beam-fire {
    box-shadow:
        0 0 0 2px rgba(255,210,0,0.85),
        0 0 18px rgba(255,190,0,1),
        0 0 45px rgba(255,110,0,0.95),
        0 0 85px rgba(255,60,0,0.7),
        0 0 130px rgba(200,20,0,0.4),
        inset 0 0 12px rgba(255,240,100,0.85);
}
.beam-orb.orb-compact.beam-thunder {
    box-shadow:
        0 0 0 2px rgba(255,255,220,0.9),
        0 0 14px rgba(255,255,200,1),
        0 0 32px rgba(190,205,255,1),
        0 0 65px rgba(130,150,255,0.9),
        0 0 110px rgba(90,110,220,0.6),
        inset 0 0 6px rgba(255,255,240,1),
        inset 0 0 18px rgba(200,215,255,0.8);
}
.beam-orb.orb-compact.beam-ice {
    box-shadow:
        0 0 0 2px rgba(190,235,255,0.85),
        0 0 18px rgba(150,215,255,1),
        0 0 45px rgba(90,175,255,0.9),
        0 0 85px rgba(45,115,225,0.65),
        0 0 130px rgba(20,65,185,0.35),
        inset 0 0 12px rgba(210,245,255,0.9);
}
@keyframes orb-compact-glow {
    0%   { filter: brightness(1.4) saturate(1.3); }
    100% { filter: brightness(1.8) saturate(1.6); }
}
@keyframes orb-burst-anim {
    0%   { transform: scale(1); filter: brightness(1); }
    30%  { transform: scale(var(--burst-scale, 2.2)); filter: brightness(2.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Pushing Orb: secondary orb that travels along beam toward opponent */
.beam-orb-push {
    position: absolute;
    width: 48px;
    height: 48px;
    display: none;
    pointer-events: none;
    border-radius: 50%;
    z-index: 8;
    will-change: transform, left, top, width, height;
    transition: width 0.08s linear, height 0.08s linear;
}
.beam-orb-push.active { display: block; }

.beam-orb-push-player.beam-fire {
    background: radial-gradient(circle at 55% 45%, #ffffff 0%, #fff5a0 10%, #ffcc00 25%, #ff6600 55%, #cc2200 100%);
    box-shadow: 0 0 14px rgba(255,200,0,1), 0 0 32px rgba(255,110,0,0.9), 0 0 60px rgba(255,60,0,0.65), 0 0 95px rgba(200,20,0,0.35);
}
.beam-orb-push-enemy.beam-fire {
    background: radial-gradient(circle at 45% 45%, #ffffff 0%, #fff5a0 10%, #ffcc00 25%, #ff6600 55%, #cc2200 100%);
    box-shadow: 0 0 14px rgba(255,200,0,1), 0 0 32px rgba(255,110,0,0.9), 0 0 60px rgba(255,60,0,0.65), 0 0 95px rgba(200,20,0,0.35);
}
.beam-orb-push-player.beam-thunder,
.beam-orb-push-enemy.beam-thunder {
    background: radial-gradient(circle at 50% 50%,
        #ffffff  0%,
        #eef0ff 12%,
        #aabbff 32%,
        #7799ff 58%,
        #4455dd 80%,
        #2233aa 100%);
    box-shadow:
        0 0 18px rgba(180,200,255,1),
        0 0 40px rgba(130,155,255,0.85),
        0 0 75px rgba(90,110,220,0.55),
        0 0 120px rgba(60,80,200,0.28),
        inset 0 0 8px rgba(220,230,255,0.6);
    animation: beam-thunder-pulse 0.18s ease-in-out infinite alternate;
}
.beam-orb-push-player.beam-ice {
    background: radial-gradient(circle at 55% 45%, #ffffff 0%, #e8f8ff 12%, #88ccff 28%, #44aaee 58%, #0055bb 100%);
    box-shadow: 0 0 14px rgba(180,230,255,1), 0 0 32px rgba(90,175,255,0.85), 0 0 60px rgba(45,115,225,0.6), 0 0 95px rgba(20,65,185,0.3);
}
.beam-orb-push-enemy.beam-ice {
    background: radial-gradient(circle at 45% 45%, #ffffff 0%, #e8f8ff 12%, #88ccff 28%, #44aaee 58%, #0055bb 100%);
    box-shadow: 0 0 14px rgba(180,230,255,1), 0 0 32px rgba(90,175,255,0.85), 0 0 60px rgba(45,115,225,0.6), 0 0 95px rgba(20,65,185,0.3);
}

/* Pushing orb burst animation */
.beam-orb-push.orb-burst {
    animation: orb-push-burst-anim 0.4s ease-out;
    --burst-scale: 1.5;
}
@keyframes orb-push-burst-anim {
    0%   { transform: scale(1); filter: brightness(1); }
    30%  { transform: scale(var(--burst-scale, 1.5)); filter: brightness(2.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Beam power pulse on re-release */
.beam.beam-pulse {
    animation: beam-pulse-anim 0.3s ease-out;
}
@keyframes beam-pulse-anim {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(3); }
    100% { filter: brightness(1); }
}

/* EN bar pulse on letter/word/sentence gain */
.fill.pulse {
    animation: en-bar-pulse 0.2s ease-out;
}
@keyframes en-bar-pulse {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(2); }
    100% { filter: brightness(1); }
}