* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Jersey 10', sans-serif;
    background: linear-gradient(135deg, #1a0505 0%, #2d0a0a 50%, #1a0505 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20px;
    color: #F0E0C0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Optimized for 1920x1080 */
#game-wrapper {
    width: 100%;
    max-width: 1600px;
    padding: 10px 20px;
    overflow: visible;
}

.game-title {
    font-size: 3rem;
    text-align: center;
    color: #CC2200;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 20px rgba(204,34,0,0.3);
    margin-bottom: 15px;
    letter-spacing: 4px;
}

/* Control Panel */
#control-panel {
    text-align: center;
    margin-bottom: 20px;
}

.button-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.game-button {
    font-family: 'Jersey 10', sans-serif;
    font-size: 1.4rem;
    padding: 12px 30px;
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.game-button.tournament {
    background: linear-gradient(135deg, #D4A017 0%, #B8860B 100%);
    box-shadow: 0 4px 15px rgba(212, 160, 23, 0.4);
}

.game-button.tournament:hover {
    background: linear-gradient(135deg, #E8B020 0%, #CC9900 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 160, 23, 0.5);
}

.game-button.duel {
    background: #CC2200;
    box-shadow: 0 4px 15px rgba(204, 34, 0, 0.3);
}

.game-button.duel:hover {
    background: #AA1800;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(204, 34, 0, 0.4);
}

.game-button:active {
    transform: translateY(0);
}

.game-button:disabled {
    background: #663300 !important;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

.round-info {
    font-size: 1.1rem;
    margin-top: 10px;
    color: #D4A017;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.round-info.hidden {
    display: none;
}

#status-text {
    font-size: 1.2rem;
    margin-top: 10px;
    color: #CC2200;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Decor Settings */
#decor-settings {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.settings-label {
    font-size: 0.9rem;
    color: #C0A080;
}

.decor-btn {
    font-family: 'Jersey 10', sans-serif;
    font-size: 0.85rem;
    padding: 5px 12px;
    border: 2px solid #663300;
    background: #2d0a0a;
    color: #C0A080;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.decor-btn:hover {
    background: #3d1010;
}

.decor-btn.active {
    background: #CC2200;
    color: #FFFFFF;
    border-color: #CC2200;
}

/* Level Settings */
#level-settings {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Debug panel toggle button */
.debug-btn {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    background: #1a1a2e !important;
    border-color: #444 !important;
    color: #888 !important;
}
.debug-btn:hover { background: #2a2a3e !important; color: #aaa !important; }

/* Skill debug panel */
#skill-debug {
    background: rgba(10, 10, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 6px;
    font-family: 'Jersey 10', sans-serif;
    color: #FFFBEF;
}

.debug-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    flex-wrap: wrap;
    justify-content: center;
}
.debug-row:last-child { margin-bottom: 0; }

.debug-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #FFD080;
}

.dbg-select {
    background: rgba(38, 38, 38, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    color: #FFFBEF;
    font-family: 'Jersey 10', sans-serif;
    font-size: 0.75rem;
    padding: 2px 6px;
    cursor: pointer;
    max-width: 110px;
}

.level-select {
    font-family: 'Jersey 10', sans-serif;
    font-size: 0.9rem;
    padding: 5px 12px;
    border: 2px solid #663300;
    background: #2d0a0a;
    color: #C0A080;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.level-select:hover {
    background: #3d1010;
}

.level-select:focus {
    outline: none;
    border-color: #CC2200;
}

/* Game Arena - Optimized for 1920x1080 (16:9) */
#game-arena {
    position: relative;
    width: 100%;
    height: 400px;
    background: transparent;
    border-radius: 20px;
    overflow: visible;
    contain: layout;
}

/* Clouds - Background layer */
#cloud-container {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 260px;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.cloud {
    position: absolute;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    transform: scale(2);
    transform-origin: left center;
    opacity: 0.75;
    animation: cloud-drift linear infinite;
}

@keyframes cloud-drift {
    from { left: -200px; }
    to   { left: 110%; }
}

/* Terrain/Ground - Extends beyond arena edges */
#terrain {
    position: absolute;
    bottom: 0;
    left: -100px;
    right: -100px;
    height: 64px;
    display: flex;
    z-index: 1;
}

.terrain-left,
.terrain-middle,
.terrain-right {
    height: 64px;
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.terrain-left {
    width: 32px;
    flex-shrink: 0;
}

.terrain-middle {
    flex-grow: 1;
    background-repeat: repeat-x;
    background-size: 32px 64px;
}

.terrain-right {
    width: 32px;
    flex-shrink: 0;
}

/* Summer - Green terrain */
#terrain.season-green .terrain-left   { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/tile_set_terrain/green_terrrain_left.png'); }
#terrain.season-green .terrain-middle { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/tile_set_terrain/green_terrrain_center.png'); }
#terrain.season-green .terrain-right  { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/tile_set_terrain/green_terrrain_right.png'); }

/* Autumn - Yellow terrain */
#terrain.season-yellow .terrain-left   { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/tile_set_terrain/yellow_terrrain_left.png'); }
#terrain.season-yellow .terrain-middle { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/tile_set_terrain/yellow_terrrain_center.png'); }
#terrain.season-yellow .terrain-right  { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/tile_set_terrain/yellow_terrrain_right.png'); }

/* Winter - White/Snow terrain */
#terrain.season-white .terrain-left   { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/tile_set_terrain/white_terrrain_left.png'); }
#terrain.season-white .terrain-middle { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/tile_set_terrain/white_terrrain_center.png'); }
#terrain.season-white .terrain-right  { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/tile_set_terrain/white_terrrain_right.png'); }

/* Decor Container */
#decor-container {
    position: absolute;
    bottom: 0;
    left: -100px;
    right: -100px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

/* Decor Elements */
.decor-element {
    position: absolute;
    bottom: 63px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    z-index: 0;
    transform: scale(1.8);
    transform-origin: bottom center;
}

.decor-tree  { z-index: 2; }
.decor-plant { z-index: 3; }
.decor-center { z-index: 2; }

/* Samurai characters */
.knight {
    position: absolute;
    bottom: 64px;
    z-index: 5;
    transition: none;
}

.knight-left  { left: 50px; }
.knight-right { right: 50px; }

/* Samurai Sprite - sprite sheet, 96x64 per frame, scaled 3x */
/* Sprite naturally faces LEFT, so left samurai (faces right) needs to be flipped */
.samurai-sprite {
    width: 96px;
    height: 64px;
    display: block;
    background-size: 768px 1152px;
    background-repeat: no-repeat;
    background-position: 0 0;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    transform: scale(-3, 3);      /* Flip: left samurai faces right (toward center) */
    transform-origin: center bottom;
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3));
    position: relative;
    z-index: 1;
}

/* Right samurai already faces left (toward center) - no flip needed */
.knight-right .samurai-sprite {
    transform: scale(3, 3);
    transform-origin: center bottom;
}

/* Color variants - sprite sheet per color */
.samurai-sprite.color-black  { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/character/Samurai Sheet black.png'); }
.samurai-sprite.color-blue   { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/character/Samurai Sheet blue.png'); }
.samurai-sprite.color-brown  { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/character/Samurai Sheet brown.png'); }
.samurai-sprite.color-green  { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/character/Samurai Sheet green.png'); }
.samurai-sprite.color-purple { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/character/Samurai Sheet purple.png'); }
.samurai-sprite.color-red    { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/character/Samurai Sheet red.png'); }
.samurai-sprite.color-white  { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/character/Samurai Sheet white.png'); }
.samurai-sprite.color-yellow { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/character/Samurai Sheet yellow.png'); }

/* ===========================================================
   HUD — Classic HUD (Figma node 788-257)
   Banner is a vertical panel above the sprite.
   Sprite visual height = 192px (3× scale of 64px DOM height).
   Banner sits above sprite: bottom anchor = 200px above knight div bottom.
   =========================================================== */

.knight-banner {
    position: absolute;
    bottom: 194px;           /* ~2px gap above sprite visual top (192px) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: opacity 0.3s ease, transform 0.5s ease;
}

/* Slide HUD outward when samurais meet in center */
.banner-shifted-left  { transform: translateX(calc(-50% - 100px)); }
.banner-shifted-right { transform: translateX(calc(-50% + 100px)); }

.knight-banner.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ── Row 1: Layer / Status-effect slots — hidden until icons are ready ── */
.hud-layers {
    display: none;  /* shown via JS when layers are active */
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    max-width: 150px;
}

.layer-slot {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(38, 38, 38, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.layer-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}


/* ── Row 2: Portrait + Name + Level — centered above all rows ── */
.hud-identity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hud-portrait {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 3px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Portrait faces toward center */
.knight-left  .hud-portrait { transform: scaleX(-1); }
.knight-right .hud-portrait { transform: scaleX(1);  }

.hud-nameblock {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.hud-nameblock { align-items: flex-start; }

.hud-username {
    font-family: 'Jersey 10', sans-serif;
    font-size: 0.95rem;
    color: #FFFBEF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
    line-height: 1;
}

.hud-userlevel {
    font-family: 'Jersey 10', sans-serif;
    font-size: 0.78rem;
    color: #D4A017;
    line-height: 1;
}

/* ── Row 3: HP Hearts (now inside banner — flow layout) ── */
.knight-hp {
    display: flex;
    align-items: center;
    /* Override any legacy absolute positioning */
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

.knight-hp .heart          { margin-left: -4px; }
.knight-hp .heart:first-child { margin-left: 0; }

.heart {
    width: 22px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    flex-shrink: 0;
}

.heart-empty { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/GUI/hp_bar/hp_bar_empty.png'); }
.heart-half  { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/GUI/hp_bar/hp_bar_1:2.png'); }
.heart-full  { background-image: url('https://cdn.lokyo.art/lsm2002/Assets/GUI/hp_bar/hp_bar_full.png'); }

/* ── Row 4: EXP + Energy stats ── */
.hud-stats {
    display: flex;
    gap: 8px;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 2px;
}

.stat-icon {
    width: 15px;
    height: 15px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.stat-value {
    font-family: 'Jersey 10', sans-serif;
    font-size: 0.85rem;
    color: #FFFBEF;
    line-height: 1;
}

/* ── Row 5: Skill slots ── */
.hud-skills {
    display: flex;
    gap: 4px;
    align-items: center;
}

.skill-slot {
    width: 36px;
    height: 36px;
    border-radius: 7px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(38, 38, 38, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.skill-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.skill-slot.locked {
    opacity: 0.22;
}

.skill-slot.slot-silenced {
    opacity: 0.3;
    filter: grayscale(100%);
}

.skill-lock-label {
    font-family: 'Jersey 10', sans-serif;
    font-size: 0.65rem;
    color: #FFFBEF;
    line-height: 1;
    pointer-events: none;
}

/* Emoji — positioned just above samurai head (sprite: 64px × scale(3) = 192px visual) */
.knight-emoji {
    position: absolute;
    bottom: 196px;
    left: 50%;
    transform: translateX(-50%) scale(2);
    width: 16px;
    height: 16px;
    background-image: url('https://cdn.lokyo.art/lsm2002/Assets/emoji.png');
    background-size: 304px 240px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    z-index: 11;
    background-position: 0 0;
}

.knight-emoji.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Emoji row animations */
.knight-emoji.emoji-row-0  { background-position-y: 0;     animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-1  { background-position-y: -16px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-2  { background-position-y: -32px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-3  { background-position-y: -48px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-4  { background-position-y: -64px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-5  { background-position-y: -80px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-6  { background-position-y: -96px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-7  { background-position-y: -112px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-8  { background-position-y: -128px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-9  { background-position-y: -144px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-10 { background-position-y: -160px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-11 { background-position-y: -176px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-12 { background-position-y: -192px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-13 { background-position-y: -208px; animation: emoji-scroll 1.5s steps(19) infinite; }
.knight-emoji.emoji-row-14 { background-position-y: -224px; animation: emoji-scroll 1.5s steps(19) infinite; }

@keyframes emoji-scroll {
    from { background-position-x: 0; }
    to   { background-position-x: -304px; }
}

/* ============================================================
   COMBAT TEXT - Ragnarok Online style floating hit indicators
   ============================================================ */
.combat-text {
    position: absolute;
    font-family: 'Jersey 10', sans-serif;
    font-weight: bold;
    pointer-events: none;
    z-index: 30;
    white-space: nowrap;
    transform: translateX(-50%);
    animation: combat-text-rise 1.3s ease-out forwards;
    transform-origin: center bottom;
    letter-spacing: 1px;
}

/* Damage number - big red/orange, outline */
.combat-text-damage {
    font-size: 3rem;
    color: #FF4422;
    text-shadow:
        2px  2px 0 #000,
       -2px -2px 0 #000,
        2px -2px 0 #000,
       -2px  2px 0 #000,
        0 0 12px rgba(255, 80, 0, 0.7);
}

/* Block text - cyan */
.combat-text-block {
    font-size: 1.9rem;
    color: #22EEFF;
    text-shadow:
        2px  2px 0 #000,
       -2px -2px 0 #000,
        2px -2px 0 #000,
       -2px  2px 0 #000,
        0 0 8px rgba(0, 200, 255, 0.5);
}

/* Flee/Dodge text - yellow-green */
.combat-text-flee {
    font-size: 1.9rem;
    color: #BBFF33;
    text-shadow:
        2px  2px 0 #000,
       -2px -2px 0 #000,
        2px -2px 0 #000,
       -2px  2px 0 #000,
        0 0 8px rgba(150, 255, 0, 0.5);
}

/* Heavy attack text - orange-gold */
.combat-text-heavy {
    font-size: 2.2rem;
    color: #FFB800;
    text-shadow:
        2px  2px 0 #000,
       -2px -2px 0 #000,
        2px -2px 0 #000,
       -2px  2px 0 #000,
        0 0 14px rgba(255, 160, 0, 0.8);
}

/* Heal text - green */
.combat-text-heal {
    font-size: 2rem;
    color: #44FF88;
    text-shadow:
        2px  2px 0 #000,
       -2px -2px 0 #000,
        2px -2px 0 #000,
       -2px  2px 0 #000,
        0 0 10px rgba(0, 255, 100, 0.7);
}

/* Status effect text - magenta/purple */
.combat-text-status {
    font-size: 1.6rem;
    color: #DD44FF;
    text-shadow:
        2px  2px 0 #000,
       -2px -2px 0 #000,
        2px -2px 0 #000,
       -2px  2px 0 #000,
        0 0 8px rgba(180, 0, 255, 0.6);
}

/* RO-style float: pop in big, drift straight up, fade near top */
@keyframes combat-text-rise {
    0%   { transform: translateX(-50%) translateY(0px)    scale(1.5);  opacity: 1; }
    12%  { transform: translateX(-50%) translateY(-12px)  scale(1.0);  opacity: 1; }
    65%  { transform: translateX(-50%) translateY(-75px)  scale(1.0);  opacity: 1; }
    85%  { transform: translateX(-50%) translateY(-95px)  scale(1.0);  opacity: 0.6; }
    100% { transform: translateX(-50%) translateY(-115px) scale(0.85); opacity: 0; }
}

/* ============================================================
   CHARACTER EFFECT OVERLAY
   Spritesheet: 5 frames × 80×64 px (400×64 total)
   Displayed at 3× scale matching samurai sprite
   ============================================================ */
.char-effect {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80px;
    height: 64px;
    transform: translateX(-50%) scale(3);
    transform-origin: center bottom;
    background-size: 400px 64px;
    background-repeat: no-repeat;
    background-position: 0 0;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 6;
}

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* ============================================================
   BATTLE TIMER — countdown shown at top-center during combat
   ============================================================ */
#battle-timer {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Jersey 10', sans-serif;
    font-size: 2.6rem;
    color: #FFFFFF;
    text-shadow: 0 0 8px #000000, 2px 2px 0 #000000;
    z-index: 20;
    min-width: 64px;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 8px;
    padding: 2px 14px;
    letter-spacing: 2px;
    pointer-events: none;
}

#battle-timer.timer-warning {
    color: #FF4422;
    animation: timer-pulse 0.5s ease-in-out infinite alternate;
}

#battle-timer.hidden {
    display: none;
}

@keyframes timer-pulse {
    from { transform: translateX(-50%) scale(1);    }
    to   { transform: translateX(-50%) scale(1.18); }
}

/* Result Panel */
.result-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(20, 5, 5, 0.95);
    border: 2px solid #CC2200;
    border-radius: 15px;
    padding: 25px 50px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 30px rgba(204,34,0,0.2);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.result-panel.hidden {
    display: none;
}

.result-panel.show {
    display: block;
    opacity: 1;
    animation: resultAppear 0.5s ease-out;
}

@keyframes resultAppear {
    0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

.result-title {
    font-size: 2rem;
    color: #CC2200;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(204,34,0,0.5);
}

.result-winner {
    font-size: 1.5rem;
    color: #D4A017;
    margin-bottom: 8px;
}

.result-subtitle {
    font-size: 1.2rem;
    color: #C0A080;
}

/* =============================================================
   PET SPRITES  (unlocked at Lv.10)
   Sheet: 192×64px — 2 rows × 32px tall
     Row 0 (top,    y=0):   idle animation, 4 frames × 32px wide
     Row 1 (bottom, y=32):  run  animation, 4 frames × 32px wide
   Clip wrapper (overflow:hidden) shows one 32×32 frame at a time.
   Accessories (back/hat) overlay on top of the base pet sprite.
   ============================================================= */

/* Clip wrapper — exactly one 32×32 frame visible */
.pet-clip {
    position: absolute;
    width: 32px;
    height: 32px;
    overflow: hidden;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
}

.pet-clip.hidden { display: none; }

/* Left knight: pet behind (to its left), faces right */
.knight-left .pet-clip {
    left: -70px;
    transform: scale(2.5);
    transform-origin: bottom left;
}

/* Right knight: pet behind (to its right), mirrored to face left */
.knight-right .pet-clip {
    left: 166px;
    transform: scale(-2.5, 2.5);
    transform-origin: bottom left;
}

/* Base pet + accessory: full sprite sheet dimensions */
.pet-img,
.pet-acc {
    width: 192px;  /* 4 frames × 32px per row = 128px; pad to 192 for safety */
    height: 64px;  /* 2 rows × 32px */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    position: absolute;
    top: 0;
    left: 0;
}

/* Accessory sits on top */
.pet-acc { z-index: 1; }
.pet-acc.hidden { display: none; }

/* Responsive */
@media (max-width: 768px) {
    .game-title {
        font-size: 2.5rem;
        letter-spacing: 4px;
    }

    #game-arena {
        height: 350px;
    }

    .result-title   { font-size: 2rem; }
    .result-winner  { font-size: 1.5rem; }
    .result-subtitle { font-size: 1.2rem; }
}