/* 8888888                                         888            d8b               8888888         888                        888       .d8888b.   .d8888b.   .d8888b.  
/*  888                                           888            Y8P                 888           888                        888      d88P  Y88b d88P  Y88b d88P  Y88b 
/*  888                                           888                                888           888                        888      888    888 Y88b.      Y88b.      
/*  888  .d8888b   .d88b.  88888b.d88b.   .d88b.  888888 888d888 888  .d8888b        888  .d8888b  888  8888b.  88888b.   .d88888      888         "Y888b.    "Y888b.   
/*  888  88K      d88""88b 888 "888 "88b d8P  Y8b 888    888P"   888 d88P"           888  88K      888     "88b 888 "88b d88" 888      888            "Y88b.     "Y88b. 
/*  888  "Y8888b. 888  888 888  888  888 88888888 888    888     888 888             888  "Y8888b. 888 .d888888 888  888 888  888      888    888       "888       "888 
/*  888       ╳88 Y88..88P 888  888  888 Y8b.     Y88b.  888     888 Y88b.           888       ╳88 888 888  888 888  888 Y88b 888      Y88b  d88P Y88b  d88P Y88b  d88P 
/*8888888 88888P'  "Y88P"  888  888  888  "Y8888   "Y888 888     888  "Y8888P      8888888 88888P' 888 "Y888888 888  888  "Y88888       "Y8888P"   "Y8888P"   "Y8888P"  
  */                                                                                                                                                                    
                                                                                                                                                                      
 
:root {
    --gui-bg:        #8b5e34;
    --gui-bg-light:  #8b5e34;
    --gui-bg-dark:   #3b2007;
    --gui-border:    #523519;
    --gui-shadow:    #523519;
    --gui-accent:    #ffdf80;
    --gui-text:      #fff8e1;
    --gui-text-dim:  #a07850;
    --gui-active:    #6b4726;
    --gui-divider:   #523519;
    --gui-input-bg:  #3b2007;
    --gui-close-bg:  #555555;
    --gui-close-sh:  #333333;
    --gui-title-sh:  #523519;
    --gui-section-c: #ffdf80;
}

body.gui-theme-blue {
    --gui-bg:        #1e4070;
    --gui-bg-light:  #2a5490;
    --gui-bg-dark:   #0d2040;
    --gui-border:    #0a1830;
    --gui-shadow:    #0a1830;
    --gui-accent:    #80c8ff;
    --gui-text:      #e8f4ff;
    --gui-text-dim:  #5a8ab0;
    --gui-active:    #1e4f8a;
    --gui-divider:   #0a1830;
    --gui-input-bg:  #0d2040;
    --gui-close-bg:  #555555;
    --gui-close-sh:  #333333;
    --gui-title-sh:  #0a1830;
    --gui-section-c: #80c8ff;
}

body.gui-theme-green {
    --gui-bg:        #2e6020;
    --gui-bg-light:  #3e7a2a;
    --gui-bg-dark:   #0d3007;
    --gui-border:    #091f04;
    --gui-shadow:    #091f04;
    --gui-accent:    #a0e060;
    --gui-text:      #edffd8;
    --gui-text-dim:  #6a9a40;
    --gui-active:    #3a7020;
    --gui-divider:   #091f04;
    --gui-input-bg:  #0d3007;
    --gui-close-bg:  #555555;
    --gui-close-sh:  #333333;
    --gui-title-sh:  #091f04;
    --gui-section-c: #a0e060;
}

body {
    margin: 0;
    background: #aad6ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    font-family: 'Press Start 2P', cursive;
    
    user-select: none;
    -webkit-user-select: none;
}
.game-title-container {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    text-align: center;
}
.game-title {
    margin: 0;
    color: var(--gui-border);
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: transform 0.3s ease;
    display: inline-block;
}
#splash-text {
    position: absolute;
    top: 20px;
    right: -60px;
    color: #ffff00;
    font-size: 10px;
    text-shadow: 2px 2px #3f3f00;
    transform: rotate(-20deg);
    animation: splashBounce 0.5s infinite alternate;
    pointer-events: none;
    white-space: nowrap;
}
@keyframes splashBounce {
    from { transform: rotate(-20deg) scale(1); }
    to { transform: rotate(-20deg) scale(1.1); }
}
#offline-indicator {
    display: none;
    margin-top: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #ff4444;
    background: rgba(0, 0, 0, 0.55);
    border: 1.5px solid #ff4444;
    border-radius: 3px;
    padding: 4px 10px;
    letter-spacing: 1.5px;
    text-shadow: 0 0 6px #ff0000;
    animation: offlinePulse 1.4s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
}
#offline-indicator.visible {
    display: inline-block;
}
@keyframes offlinePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.game-title:hover { transform: scale(1.2); }
#minimap-container {
    position: absolute;
    top: 100px;
    right: 40px;
    width: 100px;
    height: 100px;
    background: var(--gui-bg);
    padding: 4px;
    border: 3px solid var(--gui-border);
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
    z-index: 999;
    image-rendering: pixelated;
}
#minimap {
    width: 100%;
    height: 100%;
    background: #aad6ff;
    display: block;
}
#stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-bottom: 200px; 
    z-index: 10;
}
#map {
    position: relative;
    image-rendering: pixelated;
    z-index: 10;
    transform-origin: center center;
    will-change: transform;
}
@keyframes islandFloat {
    0%   { transform: scale(var(--zoom-scale)) translate(var(--pan-x), calc(var(--y-offset) + var(--pan-y))); }
    50%  { transform: scale(var(--zoom-scale)) translate(var(--pan-x), calc(var(--y-offset) - 15px + var(--pan-y))); }
    100% { transform: scale(var(--zoom-scale)) translate(var(--pan-x), calc(var(--y-offset) + var(--pan-y))); }
}
@keyframes islandFloatLR {
    0%   { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 0px),  calc(var(--y-offset) + var(--pan-y))); }
    25%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) - 18px), calc(var(--y-offset) + var(--pan-y))); }
    50%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 0px),  calc(var(--y-offset) + var(--pan-y))); }
    75%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 18px), calc(var(--y-offset) + var(--pan-y))); }
    100% { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 0px),  calc(var(--y-offset) + var(--pan-y))); }
}
@keyframes islandSpin {
    0%   { transform: scale(var(--zoom-scale)) translate(var(--pan-x), calc(var(--y-offset) + var(--pan-y))) rotate(0deg); }
    100% { transform: scale(var(--zoom-scale)) translate(var(--pan-x), calc(var(--y-offset) + var(--pan-y))) rotate(360deg); }
}
@keyframes islandJiggle {
    0%   { transform: scale(var(--zoom-scale)) translate(var(--pan-x), calc(var(--y-offset) + var(--pan-y))) rotate(0deg); }
    15%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) - 6px), calc(var(--y-offset) + var(--pan-y))) rotate(-3deg); }
    30%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 6px), calc(var(--y-offset) + var(--pan-y))) rotate(3deg); }
    45%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) - 4px), calc(var(--y-offset) + var(--pan-y))) rotate(-2deg); }
    60%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 4px), calc(var(--y-offset) + var(--pan-y))) rotate(2deg); }
    75%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) - 2px), calc(var(--y-offset) + var(--pan-y))) rotate(-1deg); }
    100% { transform: scale(var(--zoom-scale)) translate(var(--pan-x), calc(var(--y-offset) + var(--pan-y))) rotate(0deg); }
}
.floating-island      { animation: islandFloat   3s ease-in-out infinite; }
.floating-island-lr   { animation: islandFloatLR 4s ease-in-out infinite; }
.floating-island-spin { animation: islandSpin    6s linear     infinite; }
.floating-island-jiggle { animation: islandJiggle 0.6s ease-in-out infinite; }

@keyframes islandShake {
    0%   { transform: scale(var(--zoom-scale)) translate(var(--pan-x), calc(var(--y-offset) + var(--pan-y))); }
    8%   { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) - 10px), calc(var(--y-offset) + var(--pan-y) - 6px)) rotate(-4deg); }
    16%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 10px), calc(var(--y-offset) + var(--pan-y) + 4px)) rotate(4deg); }
    24%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) - 8px), calc(var(--y-offset) + var(--pan-y) - 4px)) rotate(-3deg); }
    32%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 8px), calc(var(--y-offset) + var(--pan-y) + 2px)) rotate(3deg); }
    40%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) - 5px), calc(var(--y-offset) + var(--pan-y) - 2px)) rotate(-2deg); }
    50%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 5px), calc(var(--y-offset) + var(--pan-y) + 1px)) rotate(2deg); }
    60%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) - 3px), calc(var(--y-offset) + var(--pan-y))) rotate(-1deg); }
    70%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) + 3px), calc(var(--y-offset) + var(--pan-y))) rotate(1deg); }
    85%  { transform: scale(var(--zoom-scale)) translate(calc(var(--pan-x) - 1px), calc(var(--y-offset) + var(--pan-y))) rotate(0deg); }
    100% { transform: scale(var(--zoom-scale)) translate(var(--pan-x), calc(var(--y-offset) + var(--pan-y))); }
}
.island-shaking { animation: islandShake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

#float-popup-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.75); z-index: 4000;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
#float-popup-overlay.popup-visible { opacity: 1; display: flex; }
#float-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#float-popup-overlay.popup-visible #float-popup-wrapper { transform: scale(1.3) translateY(0); }
#float-popup-close-btn {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px; background: #7a2020;
    border: 4px solid var(--gui-border); box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s; z-index: 10; padding: 0; line-height: 1;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    cursor: pointer;
}
#float-popup-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#float-popup-close-btn:active { transform: scale(0.9); }
.popup-help-btn {
    position: absolute;
    top: -18px;
    right: 26px;
    width: 36px;
    height: 36px;
    background: #555555;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #333333;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    cursor: pointer;
}
.popup-help-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
.popup-help-btn:active { transform: scale(0.9); }
#help-info-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: all;
    background: rgba(0,0,0,0.45);
    align-items: center;
    justify-content: center;
}
#help-info-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#help-info-overlay.popup-visible #help-info-wrapper {
    transform: scale(1.3) translateY(0);
}
#help-info-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    cursor: pointer;
}
#help-info-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#help-info-close-btn:active { transform: scale(0.9); }
#help-info-popup {
    background: var(--gui-bg-light, #8b5e34);
    border: 4px solid var(--gui-border, #523519);
    box-shadow: 6px 6px 0 var(--gui-shadow, #523519);
    padding: 18px 20px 16px;
    width: 260px;
    font-family: 'Press Start 2P', monospace;
}
#help-info-title {
    font-size: 9px;
    color: var(--gui-accent, #ffdf80);
    text-shadow: 2px 2px 0 var(--gui-title-sh, #523519);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--gui-divider, #523519);
    text-transform: uppercase;
    letter-spacing: 1px;
}
#help-info-text {
    font-size: 6px;
    color: var(--gui-text, #fff8e1);
    line-height: 2.2;
    margin-bottom: 14px;
}

#float-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 18px 22px 20px 22px;
    display: flex; flex-direction: column; gap: 14px;
    width: 340px;
    font-family: 'Press Start 2P', cursive;
    clip-path: polygon(0% 6px, 6px 6px, 6px 0%, calc(100% - 6px) 0%, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0% calc(100% - 6px));
}
#float-popup h2 {
    margin: 0; color: var(--gui-text); font-size: 11px;
    text-shadow: 2px 2px var(--gui-title-sh); text-align: center; letter-spacing: 1px;
}
#float-mode-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.float-mode-card {
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-border);
    color: var(--gui-text-dim);
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    padding: 10px 4px 8px 4px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    transition: transform 0.1s, filter 0.1s, border-color 0.1s, color 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.float-mode-card:hover  { filter: brightness(1.25); transform: scale(1.06); }
.float-mode-card:active { transform: scale(0.93); }
.float-mode-card.active { border-color: var(--gui-accent); color: var(--gui-accent); background: var(--gui-active); }
.float-mode-icon  { font-size: 16px; line-height: 1; }
.float-mode-label { font-size: 6px; letter-spacing: 0.5px; text-align: center; line-height: 1.4; }
.tile {
    position: absolute;
    width: 24px;
    height: 24px;
    outline: 0.5px solid transparent; 
    -webkit-user-drag: none;
    filter: drop-shadow(3px 4px 2px rgba(0,0,0,0.20));
    transition: opacity 0.1s;
    will-change: transform, opacity;
}
.tile:hover { filter: brightness(1.2) drop-shadow(3px 4px 2px rgba(0,0,0,0.3)); }
#dock-container {
    position: fixed;
    bottom: 20px; 
    width: 100%; 
    height: 60px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    z-index: 100; 
    pointer-events: none;
}
#dock {
    position: relative; 
    pointer-events: auto; 
    width: 1200px; 
    height: 100%;
    background: url('./Assets/GUI/hotbar.png') no-repeat center;
    background-size: contain; 
    image-rendering: pixelated;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
}
#block-name-display {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gui-border);
    font-size: 12px;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    text-transform: uppercase;
}
.slot { 
    width: 60px; 
    height: 60px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
     
    z-index: 2; 
}
.slot img { 
    width: 34px; 
    height: 34px; 
    image-rendering: pixelated;
    transform-origin: bottom center;
}
.slot:hover img {
    animation: tile-place-rebound 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform-origin: bottom center;
}
.page-2 { display: none; }
#save-btn, #music-toggle, #float-toggle, #undo-btn, #redo-btn {
    position: absolute;
    width: 60px;
    height: 60px;
    
    image-rendering: pixelated;
    z-index: 5;
    transition: transform 0.1s ease, filter 0.1s ease;
}
#music-toggle { left: -75px; }
#float-toggle { left: -145px; }
#redo-btn { left: -215px; }
#undo-btn { left: -285px; }
#save-btn { left: -355px; }
#save-btn:hover, #music-toggle:hover, #float-toggle:hover, #undo-btn:hover, #redo-btn:hover { transform: scale(1.1); filter: brightness(1.1); }
#save-btn:active, #music-toggle:active, #float-toggle:active, #undo-btn:active, #redo-btn:active { transform: scale(0.9); }
#climate-menu {
    position: absolute;
    bottom: 70px;
    left: -215px;
    transform: translateX(-50%);
    background: var(--gui-border);
    border: 3px solid var(--gui-bg-dark);
    box-shadow: 4px 4px 0 var(--gui-bg-dark);
    padding: 10px;
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 200;
    width: 140px;
}
#climate-menu.open { display: flex; }
.climate-btn {
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-border);
    color: var(--gui-accent);
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    padding: 14px 4px;
    
    text-align: center;
    letter-spacing: 1px;
    transition: filter 0.1s, transform 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.climate-btn:hover { filter: brightness(1.4); transform: scale(1.04); }
.climate-btn.active { background: var(--gui-active); border-color: var(--gui-accent); color: #fff; }
#weather-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}
#selection-highlight {
    position: absolute; 
    width: 60px; 
    height: 60px;
    left: 0; 
    top: 0; 
    background: url('./Assets/GUI/selector.png') no-repeat center;
    background-size: contain; 
    image-rendering: pixelated;
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    pointer-events: none; 
    z-index: 1; 
    transform: scale(1.1);
}
#zoom-ui {
    position: fixed; 
    bottom: 20px; 
    right: 40px; 
    height: 60px;
    display: flex; 
    align-items: center; 
    gap: 10px; 
    z-index: 101;
}
.zoom-btn { 
    width: 25px; 
    height: 25px; 
    image-rendering: pixelated; 
     
    transition: transform 0.1s ease, opacity 0.2s ease;
}
.zoom-btn:active { transform: scale(0.8); }
#zoom-track {
    position: relative; 
    width: 200px; 
    height: 20px;
    background: url('./Assets/GUI/zoombar.png') no-repeat center;
    background-size: 100% 100%; 
    image-rendering: pixelated; 
    
}
#zoom-dot {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 25px; 
    height: 25px; 
    background: url('./Assets/GUI/zoomdot.png') no-repeat center;
    background-size: contain; 
    image-rendering: pixelated;
    transition: transform 0.15s ease-out, left 0.1s ease-out;
    pointer-events: auto;
}
#zoom-dot:hover {
    transform: translate(-50%, -50%) scale(1.2);
    
}
#save-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#save-popup-overlay.popup-visible { opacity: 1; }
#save-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    
}
#save-popup-overlay.popup-visible #save-popup-wrapper { transform: scale(1.3) translateY(0); }
#popup-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
}
#popup-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#popup-close-btn:active { transform: scale(0.9); }
#save-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 16px 18px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 90vw;
    image-rendering: pixelated;
    font-family: 'Press Start 2P', cursive;
}

#save-popup h2 {
    margin: 0;
    color: var(--gui-text);
    font-size: 13px;
    text-shadow: 2px 2px var(--gui-title-sh);
    text-align: center;
    letter-spacing: 1px;
}
#save-popup .popup-section-title { color: var(--gui-accent); font-size: 8px; margin-bottom: 6px; letter-spacing: 1px; }
.popup-divider { border: none; border-top: 2px dashed var(--gui-divider); margin: 2px 0; }
#save-popup textarea, #save-popup input[type=text] {
    width: 100%;
    box-sizing: border-box;
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-border);
    color: #adffa8;
    font-family: monospace;
    font-size: 11px;
    padding: 8px;
    resize: none;
    outline: none;
}
#popup-code-output { height: 80px; }
#save-popup .popup-row { display: flex; gap: 10px; margin-top: 8px; }
#save-popup .popup-row-right { display: flex; justify-content: flex-end; margin-top: 10px; }
#save-popup button {
    padding: 10px 16px;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    
    border: 3px solid var(--gui-border);
    transition: transform 0.1s, filter 0.1s;
}
#save-popup button:active { transform: scale(0.93); }
.btn-ok {
    background: #4a7021;
    color: #fff;
    min-width: 80px;
    padding: 10px 16px;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    
    border: 3px solid var(--gui-border);
    transition: transform 0.1s, filter 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.btn-ok:hover { filter: brightness(1.2); }
.btn-ok:active { transform: scale(0.93); }
.btn-paste { background: #2d5a7a; color: #fff; flex: 1; border: 3px solid #1a3d55 !important; }
.btn-paste:hover { filter: brightness(1.2); }
.btn-load { background: #1a6080; color: #fff; flex: 1; }
.btn-load:hover { filter: brightness(1.2); }
.btn-cancel { background: #7a2020; color: #fff; }
.btn-cancel:hover { filter: brightness(1.2); }
.btn-copy { background: var(--gui-border); color: var(--gui-accent); flex: 1; }
.btn-copy:hover { filter: brightness(1.3); }
.btn-qr { background: #1a4a6b; color: #adffa8; flex: 1; border: 3px solid #0d2e45 !important; }
.btn-qr:hover { filter: brightness(1.3); }
#save-popup-body { display: flex; gap: 0; align-items: stretch; }
#save-popup-left { display: flex; flex-direction: column; gap: 14px; width: 280px; }
#save-popup-right {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 220px;
    flex-shrink: 0;
    justify-content: space-between;
}
#save-popup-divider {
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        var(--gui-divider) 0px,
        var(--gui-divider) 6px,
        transparent 6px,
        transparent 10px
    );
    margin: 0 16px;
    flex-shrink: 0;
    align-self: stretch;
}
.btn-settings {
    background: #2d4a7a;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    border: 3px solid #1a2e55 !important;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    padding: 10px 16px;
    
    transition: transform 0.1s, filter 0.1s;
    letter-spacing: 1px;
}
.btn-settings:hover { filter: brightness(1.3); }
.btn-settings:active { transform: scale(0.93); }
.timp-btn {
    flex: 1;
    background: var(--gui-bg-dark);
    color: var(--gui-accent);
    box-sizing: border-box;
    border: 3px solid var(--gui-border);
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    padding: 14px 4px;
    
    transition: transform 0.1s, filter 0.1s;
    text-align: center;
    letter-spacing: 1px;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.timp-btn:hover { filter: brightness(1.3); }
.timp-btn:active { transform: scale(0.93); }
.timp-btn.active { background: #4a7021; color: #fff; border-color: #adffa8 !important; }
#tbtn-apus.active { background: #8b4513; color: var(--gui-accent); border-color: #ff9933 !important; }
#tbtn-noapte.active { background: #0d1b3e; color: #b0c8ff; border-color: #4a6fbf !important; }

#settings-popup-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.75); z-index: 4000;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
#settings-popup-overlay.popup-visible { opacity: 1; display: flex; }
#settings-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#settings-popup-overlay.popup-visible #settings-popup-wrapper { transform: scale(1.3) translateY(0); }
#settings-close-btn {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px; background: #7a2020;
    border: 4px solid var(--gui-border); box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
     display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s; z-index: 10; padding: 0; line-height: 1;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#settings-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#settings-close-btn:active { transform: scale(0.9); }
#settings-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 16px 18px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: auto;
    font-family: 'Press Start 2P', cursive;
}
#settings-popup h2 { margin: 0; color: var(--gui-text); font-size: 13px; text-shadow: 2px 2px var(--gui-title-sh); text-align: center; letter-spacing: 1px; }
#settings-popup-body { display: flex; flex-direction: row; gap: 0; align-items: stretch; }
#settings-left { display: flex; flex-direction: column; gap: 14px; width: 280px; }
#settings-divider {
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--gui-border) 0px, var(--gui-border) 6px, transparent 6px, transparent 10px);
    margin: 0 16px;
    flex-shrink: 0;
    align-self: stretch;
}
#settings-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 160px;
    flex-shrink: 0;
}
#settings-popup .popup-section-title { color: var(--gui-accent); font-size: 8px; margin-bottom: 6px; letter-spacing: 1px; }

.visual-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.visual-option-label {
    color: #e8d5b0;
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    letter-spacing: 1px;
}

.px-switch {
    position: relative;
    width: 36px;
    height: 16px;
    background: var(--gui-bg-dark);
    border: 2px solid var(--gui-border);
    
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
    clip-path: polygon(0% 2px, 2px 2px, 2px 0%, calc(100% - 2px) 0%, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0% calc(100% - 2px));
}
.px-switch.on { background: #4a7021; border-color: #adffa8; }
.px-switch-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 10px;
    height: 10px;
    background: var(--gui-accent);
    transition: left 0.15s;
    image-rendering: pixelated;
    clip-path: polygon(0% 2px, 2px 2px, 2px 0%, calc(100% - 2px) 0%, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0% calc(100% - 2px));
}
.px-switch.on .px-switch-thumb { left: 22px; }

#qr-popup-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.82); z-index: 5000;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.25s ease;
}
#qr-popup-overlay.popup-visible { opacity: 1; display: flex; }
#qr-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#qr-popup-overlay.popup-visible #qr-popup-wrapper { transform: scale(1.3) translateY(0); }
#qr-close-btn {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px; background: #7a2020;
    border: 4px solid var(--gui-border); box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
     display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s; z-index: 10; padding: 0; line-height: 1;
}
#qr-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#qr-close-btn:active { transform: scale(0.9); }
#qr-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 20px 14px 24px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: 'Press Start 2P', cursive;
    width: fit-content;
    box-sizing: border-box;
}
#qr-popup h2 {
    margin: 0;
    color: var(--gui-text);
    font-size: 13px;
    text-shadow: 2px 2px var(--gui-title-sh);
    text-align: center;
    letter-spacing: 2px;
}
#qr-subtitle {
    color: var(--gui-accent);
    font-size: 7px;
    text-align: center;
    letter-spacing: 1px;
    margin-top: -4px;
}
#qr-canvas-wrap {
    background: #fff;
    padding: 10px;
    border: 4px solid var(--gui-border);
    box-shadow: 4px 4px 0 var(--gui-bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
#qr-output { display: block; line-height: 0; pointer-events: none; }
#qr-output img { display: block; pointer-events: none; }
#qr-hint {
    color: #e8d5b0;
    font-size: 7px;
    letter-spacing: 1px;
    text-align: center;
    line-height: 2;
}
#island-shape-section { margin-bottom: 2px; }
#island-shape-grid { display: grid; grid-template-columns: repeat(16, 22px); column-gap: 8px; row-gap: 5px; margin-top: 6px; justify-content: center; }
.shape-cell {
    width: 22px; height: 22px; background: var(--gui-bg-dark); border: 1px solid var(--gui-active);
    transition: background 0.08s, border-color 0.08s; image-rendering: pixelated;
}
.shape-cell.current-size { background: #2d6b1a; border-color: #adffa8; }
.shape-cell.hovered { background: #b35a00; border-color: #ff9900; }
#shape-size-label { color: #adffa8; font-size: 7px; margin-top: 5px; letter-spacing: 1px; text-align: center; min-height: 11px; }
.btn-random { background: #6b2d8b; color: #fff; width: 100%; box-sizing: border-box; border: 3px solid #3a0f5a; }
.btn-random:hover { filter: brightness(1.3); }
.btn-random:active { transform: scale(0.93); }
.danger-zone { border: 2px dashed #7a2020; padding: 10px; }
.danger-zone .popup-section-title { color: #ff6060; }
.btn-danger { background: #7a2020; color: #fff; width: 100%; box-sizing: border-box; border: 3px solid #3b1010; }
.btn-danger:hover { filter: brightness(1.3); }
.btn-danger:active { transform: scale(0.93); }
#welcome-header-2 { text-align: center; flex-shrink: 0; margin-bottom: 4px; }
#welcome-header-2 h2 { margin: 0 0 7px 0; color: var(--gui-text); font-size: 14px; text-shadow: 2px 2px var(--gui-title-sh); letter-spacing: 2px; }

#zoom-reference {
    margin-top: 10px;
    border: 2px solid var(--gui-border);
    background: rgba(0,0,0,0.2);
    padding: 10px 14px;
    flex-shrink: 0;
}
.zoom-ref-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 6.5px;
    color: var(--gui-accent);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    line-height: 1.6;
}
.zoom-ref-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.zoom-ref-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
}
.zoom-ref-caption {
    font-family: 'Press Start 2P', cursive;
    font-size: 5.5px;
    color: #adffa8;
    letter-spacing: 0.5px;
}
.zoom-ref-img {
    width: 100%;
    max-height: 80px;
    object-fit: contain;
    image-rendering: pixelated;
    border: 2px solid var(--gui-border);
    display: block;
}
.zoom-ref-arrow {
    font-size: 14px;
    color: #ff9a3c;
    flex-shrink: 0;
    line-height: 1;
}

#zoom-notice-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #3b1a00 0%, #5a2d00 100%);
    border: 2px solid #ff9a3c;
    padding: 14px 16px;
    margin: 14px 0 0 0;
    flex-shrink: 0;
}
#zoom-notice-icon { width: 32px; height: 32px; image-rendering: pixelated; flex-shrink: 0; }
#zoom-notice-text { flex: 1; }
#zoom-notice-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: #ff9a3c;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
#zoom-notice-sub {
    font-family: 'Press Start 2P', cursive;
    font-size: 6px;
    color: #c9b99a;
    letter-spacing: 0.5px;
    line-height: 1.6;
}
#settings-scale-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 8px 0 0 0;
    flex-shrink: 0;
}
#zoom-slider-row,
#settings-scale-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0;
    flex-shrink: 0;
}
#settings-scale-row { margin: 8px 0 0 0; }
.zoom-step-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    width: 44px;
    height: 44px;
    background: #5a2d00;
    color: var(--gui-accent);
    border: 3px solid var(--gui-border);
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.1s, transform 0.1s;
    flex-shrink: 0;
    user-select: none;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.zoom-step-btn:hover { filter: brightness(1.35); }
.zoom-step-btn:active { transform: scale(0.88); filter: brightness(0.85); }
#welcome-zoom-value, #settings-zoom-value {
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    color: #adffa8;
    min-width: 72px;
    text-align: center;
    background: rgba(0,0,0,0.25);
    border: 3px solid var(--gui-border);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#settings-scale-row .zoom-step-btn {
    font-size: 12px;
    width: 30px;
    height: 30px;
}
#settings-scale-row #settings-zoom-value {
    font-size: 8px;
    min-width: 50px;
    height: 30px;
}

#welcome-overlay {
    font-family: 'Press Start 2P', cursive;
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.68); z-index: 3000;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.35s ease;
}
#welcome-overlay.popup-visible { opacity: 1; }
#welcome-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#welcome-overlay.popup-visible #welcome-wrapper { transform: scale(1.3) translateY(0); }
#welcome-close-btn {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px; background: #7a2020;
    border: 4px solid var(--gui-border); box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
     display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s; z-index: 10; padding: 0;
}
#welcome-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#welcome-close-btn:active { transform: scale(0.9); }
#welcome-popup {
    background: var(--gui-bg-light); border: 4px solid var(--gui-border); box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 24px 28px 22px 28px; display: flex; flex-direction: column;
    gap: 0;
    width: min(620px, 92vw); max-height: 88vh; overflow: hidden;
    font-family: 'Press Start 2P', cursive;
}
#welcome-header { text-align: center; flex-shrink: 0; margin-bottom: 14px; }
#welcome-header h2 { margin: 0 0 7px 0; color: var(--gui-text); font-size: 14px; text-shadow: 2px 2px var(--gui-title-sh); letter-spacing: 2px; }
#welcome-header .sub { color: var(--gui-accent); font-size: 7px; letter-spacing: 1px; }
#welcome-header .sub a { color: #adffa8; text-decoration: none; }
#welcome-header .sub a:hover { text-decoration: underline; }
.wdivider { border: none; border-top: 2px dashed var(--gui-divider); margin: 0 0 14px 0; flex-shrink: 0; }

#welcome-slides {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#welcome-step-1 {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#welcome-step-1.slide-out {
    animation: step-exit-left 0.35s cubic-bezier(0.55, 0, 0.78, 0) both;
    pointer-events: none;
}
#welcome-step-2 {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
#welcome-step-2.slide-in {
    display: flex;
    animation: step-enter-from-right 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes step-exit-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-70px); }
}
@keyframes step-enter-from-right {
    from { opacity: 0; transform: translateX(70px); }
    to   { opacity: 1; transform: translateX(0); }
}
#welcome-readme-wrap { display: flex; flex-direction: column; border: 2px solid var(--gui-border); min-height: 0; flex: 1; overflow: hidden; }
#readme-titlebar {
    background: var(--gui-border); padding: 6px 12px; color: var(--gui-accent); font-size: 7px;
    letter-spacing: 1px; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
#readme-titlebar .rdot { width: 8px; height: 8px; background: #adffa8; display: inline-block; border: 1px solid var(--gui-bg-dark); flex-shrink: 0; }
#welcome-readme {
    background: transparent; color: #e8d5b0; font-family: 'Press Start 2P'; font-size: 10px;
    padding: 14px 16px; overflow-y: auto; min-height: 120px; max-height: 400px;
    line-height: 1.8; box-sizing: border-box;
}
#welcome-readme h1 { color: var(--gui-text); font-size: 14px; margin: 0 0 6px 0; border-bottom: 1px solid var(--gui-border); padding-bottom: 5px; font-family: 'Press Start 2P'; }
#welcome-readme h2 { color: var(--gui-text); font-size: 12px; margin: 12px 0 5px 0; border-bottom: 1px solid var(--gui-border); padding-bottom: 4px; font-family: 'Press Start 2P'; }
#welcome-readme h3 { color: var(--gui-accent); font-size: 9px; margin: 8px 0 4px 0; font-family: 'Press Start 2P'; }
#welcome-readme p { margin: 4px 0; }
#welcome-readme strong { color: #ffa657; }
#welcome-readme em { color: #c9b99a; }
#welcome-readme code { background: var(--gui-bg-dark); border: 1px solid var(--gui-border); padding: 1px 5px; color: #adffa8; }
#welcome-readme pre { background: var(--gui-bg-dark); border: 1px solid var(--gui-border); padding: 10px; overflow-x: auto; margin: 6px 0; }
#welcome-readme pre code { border: none; padding: 0; background: transparent; }
#welcome-readme ul, #welcome-readme ol { margin: 4px 0; padding-left: 20px; }
#welcome-readme li { margin-bottom: 3px; }
#welcome-readme a { color: #adffa8; }
#welcome-readme a:hover { text-decoration: underline; }
#welcome-readme hr { border: none; border-top: 1px dashed var(--gui-border); margin: 10px 0; }
#welcome-readme blockquote { border-left: 3px solid var(--gui-border); margin: 6px 0; padding: 4px 12px; color: #c9b99a; }
#welcome-readme img { max-width: 100%; border: 2px solid var(--gui-border); display: block; margin: 8px auto; }
#welcome-readme table { border-collapse: collapse; width: 100%; margin: 8px 0; font-family: 'Press Start 2P', cursive; font-size: 9px; }
#welcome-readme th { background: var(--gui-border); color: var(--gui-accent); padding: 6px 10px; border: 2px solid var(--gui-active); text-align: left; font-family: 'Press Start 2P'; }
#welcome-readme td { padding: 5px 10px; border: 1px solid var(--gui-active); color: #e8d5b0; vertical-align: top; }
#welcome-readme tr:nth-child(even) td { background: rgba(0,0,0,0.15); }
#welcome-readme tr:hover td { background: rgba(255,255,255,0.05); }
#readme-loading { color: var(--gui-accent); font-family: 'Press Start 2P', cursive; font-size: 8px; padding: 20px 16px; background: transparent; letter-spacing: 1px; }
#welcome-footer { display: flex; justify-content: flex-end; flex-shrink: 0; }
.btn-welcome-ok { padding: 10px 22px; font-family: 'Press Start 2P', cursive; font-size: 9px;  border: 3px solid var(--gui-border); background: #4a7021; color: #fff; transition: transform 0.1s, filter 0.1s; }
.btn-welcome-ok:hover { filter: brightness(1.2); }
.btn-welcome-ok:active { transform: scale(0.93); }
#fill-selected-btn {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--gui-border);
    border: 3px solid var(--gui-accent);
    box-shadow: 4px 4px 0 var(--gui-bg-dark);
    color: var(--gui-accent);
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 10px 18px;
    
    z-index: 500;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, filter 0.1s;
    white-space: nowrap;
    letter-spacing: 1px;
}
#fill-selected-btn.btn-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#fill-selected-btn:hover { filter: brightness(1.4); }
#fill-selected-btn:active { transform: translateX(-50%) scale(0.93); }
#selection-rect {
    position: fixed;
    border: 2px solid #996430;
    background: rgba(255, 223, 128, 0.15);
    pointer-events: none;
    z-index: 9000;
    display: none;
}
.tile.selected-tile {
    image-rendering: pixelated;
}


.grid-overlay-active .tile.grid-cell {
    /* It is bugged and i can't find out why*/
}

#grid-canvas {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99999;
    image-rendering: pixelated;
}

#selection-canvas {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 100000;
    image-rendering: pixelated;
}
#fill-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 7900;
    display: none;
    transition: background 0.25s ease;
    pointer-events: none;
}
#fill-overlay.overlay-visible { background: rgba(0, 0, 0, 0.45); pointer-events: all; }
#fill-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: 8000;
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-width: 456px;
    width: 456px;
    font-family: 'Press Start 2P', cursive;
    overflow: visible;
}
#fill-panel.panel-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#fill-panel-inner {
    background: var(--gui-bg);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 16px 18px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
}
#fill-panel h3 { margin: 0; color: var(--gui-text); font-size: 11px; text-shadow: 2px 2px var(--gui-title-sh); text-align: center; letter-spacing: 1px; }
#fill-panel-info { color: var(--gui-accent); font-size: 7px; text-align: center; letter-spacing: 1px; }
#fill-blocks-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    background: var(--gui-bg-dark);
    border: 2px solid var(--gui-border);
}
#fill-blocks-grid::-webkit-scrollbar { width: 6px; }
#fill-blocks-grid::-webkit-scrollbar-track { background: var(--gui-bg-dark); }
#fill-blocks-grid::-webkit-scrollbar-thumb { background: var(--gui-bg); border: 1px solid var(--gui-accent); }
.fill-block-btn {
    width: 48px; height: 48px; background: var(--gui-border); border: 2px solid var(--gui-bg-dark);
     display: flex; align-items: center; justify-content: center;
    transition: filter 0.1s, border-color 0.1s, transform 0.1s; position: relative;
}
.fill-block-btn:hover { filter: brightness(1.4); border-color: var(--gui-accent); transform: scale(1.1); z-index: 1; }
.fill-block-btn:active { transform: scale(0.9); }
.fill-block-btn img { width: 32px; height: 32px; image-rendering: pixelated; }
.fill-block-btn span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); color: var(--gui-accent); font-size: 5px; white-space: nowrap; display: none; }
.fill-block-btn:hover span { display: block; }
#fill-panel-actions { display: flex; gap: 10px; justify-content: flex-end; }
#fill-panel-actions button { padding: 8px 14px; font-family: 'Press Start 2P', cursive; font-size: 8px;  border: 3px solid var(--gui-border); transition: transform 0.1s, filter 0.1s; }
#fill-panel-actions button:active { transform: scale(0.93); }
#fill-panel-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px; height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
    line-height: 1;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s ease, transform 0.2s ease, filter 0.1s;
}
#fill-panel-close-btn.panel-visible {
    opacity: 1;
    transform: scale(1);
}
#fill-panel-close-btn:hover { filter: brightness(1.3); }
.pixel-corners {
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
.pixel-corners-sm {
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#minimap-container, #code-bar {
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#save-popup button, .btn-welcome-ok, .climate-btn, #fill-panel-actions button, .fill-block-btn,
#fill-selected-btn, #popup-close-btn, #welcome-close-btn, #fill-panel-close-btn, #code-bar button, #qr-close-btn,
#save-slots-close-btn, .save-slot-btn, .btn-save-slots {
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#welcome-readme::-webkit-scrollbar, #popup-code-output::-webkit-scrollbar, #popup-code-input::-webkit-scrollbar { width: 8px; height: 8px; }
#welcome-readme::-webkit-scrollbar-track, #popup-code-output::-webkit-scrollbar-track, #popup-code-input::-webkit-scrollbar-track { background: var(--gui-bg-dark); border: 1px solid var(--gui-border); }
#welcome-readme::-webkit-scrollbar-thumb, #popup-code-output::-webkit-scrollbar-thumb, #popup-code-input::-webkit-scrollbar-thumb { background: var(--gui-bg); border: 1px solid var(--gui-accent); image-rendering: pixelated; }
#welcome-readme::-webkit-scrollbar-thumb:hover, #popup-code-output::-webkit-scrollbar-thumb:hover, #popup-code-input::-webkit-scrollbar-thumb:hover { background: var(--gui-bg); }
#welcome-readme::-webkit-scrollbar-corner, #popup-code-output::-webkit-scrollbar-corner { background: var(--gui-bg-dark); }
#code-bar {
    display: none; position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%);
    background: var(--gui-border); border: 3px solid var(--gui-bg-dark); box-shadow: 4px 4px 0 var(--gui-bg-dark);
    padding: 8px 14px; align-items: center; gap: 12px; z-index: 500; font-family: 'Press Start 2P', cursive;
}
#code-bar span { color: var(--gui-accent); font-size: 8px; white-space: nowrap; }
#code-bar-value { width: 320px; background: var(--gui-bg-dark); border: 2px solid var(--gui-bg); color: #adffa8; font-family: monospace; font-size: 10px; padding: 5px 7px; outline: none; }
#code-bar button { background: var(--gui-bg); border: 2px solid var(--gui-border); color: var(--gui-accent); font-family: 'Press Start 2P', cursive; font-size: 7px; padding: 6px 10px;  white-space: nowrap; }
#code-bar button:hover { filter: brightness(1.3); }
#code-bar button:active { transform: scale(0.93); }
#save-toast {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-20px);
    background: var(--gui-border); color: #fff; font-family: 'Press Start 2P', cursive; font-size: 10px;
    padding: 10px 20px; border: 3px solid var(--gui-bg); opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease; z-index: 9999; pointer-events: none; white-space: nowrap;
}
#save-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 900px) {
    #dock { width: 900px; gap: 10px; }
    .slot { width: 50px; height: 50px; }
    .slot img { width: 28px; height: 28px; }
    #save-btn, #music-toggle, #float-toggle, #undo-btn, #redo-btn, #climate-toggle { width: 50px; height: 50px; }
    #music-toggle { left: -62px; } #float-toggle { left: -118px; } #climate-toggle { left: -174px; }
    #redo-btn { left: -230px; } #undo-btn { left: -286px; } #save-btn { left: -342px; }
    #selection-highlight { width: 50px; height: 50px; }
    #zoom-track { width: 140px; } #zoom-ui { right: 16px; gap: 6px; }
    .zoom-btn { width: 20px; height: 20px; }
    #save-popup { padding: 22px 24px 20px 24px; } #save-popup-right { width: 150px; }
}
@media (max-width: 680px) {
    #dock-container { bottom: 10px; height: 46px; } #dock { width: 700px; gap: 4px; }
    .slot { width: 38px; height: 38px; } .slot img { width: 22px; height: 22px; }
    #save-btn, #music-toggle, #float-toggle, #undo-btn, #redo-btn, #climate-toggle { width: 38px; height: 38px; }
    #music-toggle { left: -46px; } #float-toggle { left: -88px; } #climate-toggle { left: -130px; }
    #redo-btn { left: -172px; } #undo-btn { left: -214px; } #save-btn { left: -256px; }
    #selection-highlight { width: 38px; height: 38px; }
    #zoom-ui { bottom: 64px; right: 10px; gap: 5px; } #zoom-track { width: 100px; }
    .zoom-btn { width: 18px; height: 18px; } #block-name-display { font-size: 8px; top: -28px; }
    .game-title { font-size: 13px; } #minimap-container { top: 70px; right: 10px; width: 70px; height: 70px; }
    #save-popup-body { flex-direction: column; gap: 12px; }
    #save-popup-right { width: 100%; border-left: none; border-top: 2px dashed var(--gui-divider); padding-left: 0; padding-top: 12px; }
}
@media (max-width: 480px) {
    #dock-container { bottom: 6px; height: 36px; } #dock { width: 520px; gap: 2px; }
    .slot { width: 30px; height: 30px; } .slot img { width: 17px; height: 17px; }
    #save-btn, #music-toggle, #float-toggle, #undo-btn, #redo-btn, #climate-toggle { width: 30px; height: 30px; }
    #music-toggle { left: -36px; } #float-toggle { left: -68px; } #climate-toggle { left: -100px; }
    #redo-btn { left: -132px; } #undo-btn { left: -164px; } #save-btn { left: -196px; }
    #selection-highlight { width: 30px; height: 30px; }
    #zoom-ui { bottom: 52px; right: 6px; gap: 4px; } #zoom-track { width: 70px; }
    .zoom-btn { width: 15px; height: 15px; } #zoom-dot { width: 18px; height: 18px; }
    .game-title { font-size: 10px; } .game-title-container { top: 24px; }
    #minimap-container { top: 56px; right: 6px; width: 55px; height: 55px; }
    #save-popup { padding: 18px 16px; }
}

#confirm-delete-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 6000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#confirm-delete-overlay.popup-visible { opacity: 1; }
#confirm-delete-wrapper {
    transform: scale(0.88) translateY(24px);
    transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#confirm-delete-overlay.popup-visible #confirm-delete-wrapper {
    transform: scale(1.3) translateY(0);
}
#confirm-delete-popup {
    background: var(--gui-bg);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-bg-dark);
    padding: 28px 30px 22px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 300px;
    font-family: 'Press Start 2P', cursive;
}
#confirm-delete-icon {
    font-size: 36px;
    line-height: 1;
    filter: drop-shadow(2px 2px 0 #3b1010);
}
#confirm-delete-popup h2 {
    margin: 0;
    color: #ff6060;
    font-size: 12px;
    text-shadow: 2px 2px #3b1010;
    text-align: center;
    letter-spacing: 1px;
}
#confirm-delete-msg {
    margin: 0;
    color: #e8d5b0;
    font-size: 7px;
    text-align: center;
    line-height: 2;
    letter-spacing: 0.5px;
}
#confirm-delete-btns {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}
.btn-cancel-del {
    flex: 1;
    padding: 10px 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    
    background: var(--gui-border);
    color: var(--gui-accent);
    border: 3px solid var(--gui-bg-dark);
    transition: transform 0.1s, filter 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.btn-cancel-del:hover { filter: brightness(1.3); }
.btn-cancel-del:active { transform: scale(0.93); }
.btn-confirm-del {
    flex: 1;
    padding: 10px 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    
    background: #7a2020;
    color: #fff;
    border: 3px solid #3b1010;
    transition: transform 0.1s, filter 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.btn-confirm-del:hover { filter: brightness(1.3); }
.btn-confirm-del:active { transform: scale(0.93); }

@keyframes starTwinkle {
    from { opacity: 0.2; transform: scale(0.8); }
    to   { opacity: 1;   transform: scale(1.2); }
}


#terraform-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
#terraform-label {
    color: var(--gui-accent);
    font-size: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}
#terraform-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.terraform-h-btn {
    width: 22px;
    height: 22px;
    background: var(--gui-border);
    color: var(--gui-accent);
    border: 2px solid var(--gui-bg-dark);
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    transition: filter 0.1s, transform 0.1s;
}
.terraform-h-btn:hover { filter: brightness(1.3); }
.terraform-h-btn:active { transform: scale(0.9); }
.terraform-h-btn.active {
    background: var(--gui-bg);
    color: var(--gui-text);
    border-color: var(--gui-accent);
}

#block-search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 7000;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#block-search-overlay.popup-visible { opacity: 1; }

#block-search-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.88);
    z-index: 7001;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: none;
}
#block-search-wrapper.popup-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
}

#block-search-popup {
    position: relative;
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 8px 8px 0 var(--gui-bg-dark);
    padding: 22px 22px 18px 22px;
    width: 560px;
    max-width: 95vw;
    max-height: 80vh;
    flex-direction: column;
    gap: 14px;
    font-family: 'Press Start 2P', cursive;
    overflow: visible;
}

#block-search-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 7002;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#block-search-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#block-search-close-btn:active { transform: scale(0.9); }

#block-search-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#block-search-header h2 {
    margin: 0;
    color: var(--gui-text);
    font-size: 13px;
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
    text-align: center;
}
#block-search-input-wrap {
    position: relative;
}
#block-search-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-border);
    color: var(--gui-accent);
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 10px 12px;
    outline: none;
    letter-spacing: 1px;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#block-search-input::placeholder { color: #8b7355; }
#block-search-input:focus { border-color: var(--gui-accent); }

#block-search-categories {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bsearch-cat-btn {
    background: var(--gui-bg-dark);
    border: 2px solid var(--gui-border);
    color: var(--gui-accent);
    font-family: 'Press Start 2P', cursive;
    font-size: 6px;
    padding: 6px 10px;
    
    letter-spacing: 1px;
    transition: filter 0.1s, transform 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.bsearch-cat-btn:hover { filter: brightness(1.3); }
.bsearch-cat-btn:active { transform: scale(0.93); }
.bsearch-cat-btn.active {
    background: var(--gui-bg);
    border-color: var(--gui-accent);
    color: var(--gui-text);
}

#block-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    overflow-y: auto;
    max-height: 340px;
    padding-right: 4px;
}
#block-search-grid::-webkit-scrollbar { width: 8px; }
#block-search-grid::-webkit-scrollbar-track { background: var(--gui-bg-dark); border: 1px solid var(--gui-border); }
#block-search-grid::-webkit-scrollbar-thumb { background: var(--gui-bg); border: 1px solid var(--gui-accent); }
#block-search-grid::-webkit-scrollbar-thumb:hover { background: var(--gui-bg); }

.bsearch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--gui-bg-dark);
    border: 2px solid var(--gui-border);
    padding: 10px 6px 8px;
    
    transition: filter 0.1s, transform 0.1s, border-color 0.1s;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
.bsearch-item:hover { filter: brightness(1.3); transform: scale(1.04); border-color: var(--gui-accent); }
.bsearch-item:active { transform: scale(0.95); }
.bsearch-item.selected { background: var(--gui-active); border-color: var(--gui-accent); }
.bsearch-item img {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
}
.bsearch-item-name {
    color: var(--gui-accent);
    font-size: 5px;
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1.6;
    word-break: break-word;
}
.bsearch-item-tag {
    color: var(--gui-bg);
    font-size: 4.5px;
    text-align: center;
    letter-spacing: 0.3px;
}
#block-search-empty {
    color: #8b7355;
    font-size: 8px;
    text-align: center;
    padding: 20px 0;
    letter-spacing: 1px;
    grid-column: 1 / -1;
}

.pixel-cloud {
    position: fixed;
    z-index: 2;
    pointer-events: none;
    background: var(--gui-text);
    image-rendering: pixelated;
    opacity: 0.82;
    clip-path: polygon(
        8px 40%, 8px 20%, 20% 20%, 20% 8px, 50% 8px, 50% 0%, 70% 0%, 70% 8px,
        85% 8px, 85% 20%, 100% 20%, 100% 80%, 85% 80%, 85% 100%, 15% 100%, 15% 80%, 0% 80%, 0% 40%
    );
    box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}


#island-biome-overlay,
#mountain-biome-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 6000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#island-biome-overlay.popup-visible,
#mountain-biome-overlay.popup-visible {
    opacity: 1;
}

#island-biome-wrapper,
#mountain-biome-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#island-biome-overlay.popup-visible #island-biome-wrapper,
#mountain-biome-overlay.popup-visible #mountain-biome-wrapper {
    transform: scale(1.3) translateY(0);
}

#island-biome-close-btn,
#mountain-biome-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#island-biome-close-btn:hover,
#mountain-biome-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#island-biome-close-btn:active,
#mountain-biome-close-btn:active { transform: scale(0.9); }

#island-biome-popup,
#mountain-biome-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 18px 18px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
}

#island-biome-popup h2,
#mountain-biome-popup h2 {
    margin: 0;
    color: var(--gui-text);
    font-size: 11px;
    text-shadow: 2px 2px var(--gui-title-sh);
    text-align: center;
    letter-spacing: 1px;
}

.biome-grid {
    display: grid;
    grid-template-columns: repeat(3, 130px);
    gap: 8px;
}

.biome-card {
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-border);
    padding: 12px 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: filter 0.1s, transform 0.1s, border-color 0.1s;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
.biome-card:hover {
    filter: brightness(1.35);
    transform: scale(1.04);
    border-color: var(--gui-accent);
}
.biome-card:active {
    transform: scale(0.95);
}

.biome-card-random {
    background: #2d1a5a;
    border-color: #5a3a8b;
    grid-column: span 3;
    flex-direction: row;
    justify-content: center;
    padding: 10px 12px;
    gap: 14px;
}
.biome-card-random:hover {
    border-color: #c48aff;
    background: #3a2070;
}

.biome-icon {
    font-size: 22px;
    line-height: 1;
    image-rendering: pixelated;
}

.biome-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    color: var(--gui-accent);
    letter-spacing: 1px;
    text-align: center;
}
.biome-card-random .biome-name {
    color: #c48aff;
    font-size: 8px;
}

.biome-desc {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px;
    color: var(--gui-bg);
    text-align: center;
    letter-spacing: 0.3px;
    line-height: 1.6;
}
.biome-card-random .biome-desc {
    color: #9b72cc;
}


#pointer-settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 7000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#pointer-settings-overlay.popup-visible { opacity: 1; }

#pointer-settings-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#pointer-settings-overlay.popup-visible #pointer-settings-wrapper {
    transform: scale(1.3) translateY(0);
}

#pointer-settings-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#pointer-settings-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#pointer-settings-close-btn:active { transform: scale(0.9); }


#pointer-settings-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 18px 22px 16px 22px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
}
#pointer-settings-popup h2 {
    margin: 0 0 16px 0;
    color: var(--gui-text);
    font-size: 10px;
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
}
#pointer-settings-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-pointer-settings {
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-bg);
    color: var(--gui-accent);
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    padding: 6px 12px;
    min-width: 40px;
    transition: filter 0.1s, transform 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.btn-pointer-settings:hover { filter: brightness(1.4); transform: scale(1.08); }
.btn-pointer-settings:active { transform: scale(0.92); }


#cursor-item-preview {
    position: fixed;
    pointer-events: none;
    z-index: 2147483646;
    image-rendering: pixelated;
    width: 32px;
    height: 32px;
    opacity: 0.5;
    display: none;
    will-change: transform;
}

.btn-info-settings {
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-bg);
    color: var(--gui-accent);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-style: italic;
    transition: filter 0.1s, transform 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.btn-info-settings:hover { filter: brightness(1.4); transform: scale(1.08); }
.btn-info-settings:active { transform: scale(0.92); }

.btn-info-about {
    background: #1a4a8a;
    border: 3px solid #3a7aff;
    color: #a8d8ff;
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-style: italic;
    transition: filter 0.1s, transform 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.btn-info-about:hover { filter: brightness(1.4); transform: scale(1.08); }
.btn-info-about:active { transform: scale(0.92); }

#about-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 7500;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#about-popup-overlay.popup-visible { opacity: 1; }

#about-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#about-popup-overlay.popup-visible #about-popup-wrapper {
    transform: scale(1.3) translateY(0);
}

#about-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#about-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#about-close-btn:active { transform: scale(0.9); }

#about-popup {
    background: #1a2a4a;
    border: 4px solid #2a4a8a;
    box-shadow: 6px 6px 0 #0a1a3a;
    padding: 24px 28px 18px 28px;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
}

#about-icon {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    margin-bottom: 12px;
}

#about-title {
    margin: 0 0 6px 0;
    color: #a8d8ff;
    font-size: 11px;
    text-shadow: 2px 2px #0a1a3a;
    letter-spacing: 1px;
    text-align: center;
}

#about-version {
    color: #4a8aff;
    font-size: 7px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

#about-divider {
    width: 100%;
    height: 3px;
    background: #2a4a8a;
    margin-bottom: 14px;
}

#about-body {
    color: #6aacdd;
    font-size: 6px;
    line-height: 2;
    text-align: center;
    letter-spacing: 0.5px;
    min-height: 20px;
    width: 100%;
}

#graphics-settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 7000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#graphics-settings-overlay.popup-visible { opacity: 1; }

#graphics-settings-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#graphics-settings-overlay.popup-visible #graphics-settings-wrapper {
    transform: scale(1.3) translateY(0);
}

#graphics-settings-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#graphics-settings-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#graphics-settings-close-btn:active { transform: scale(0.9); }

#graphics-settings-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 18px 22px 16px 22px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
}
#graphics-settings-popup h2 {
    margin: 0 0 16px 0;
    color: var(--gui-text);
    font-size: 10px;
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
}
#graphics-settings-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#photo-filters-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 7100;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#photo-filters-overlay.popup-visible { opacity: 1; }

#photo-filters-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#photo-filters-overlay.popup-visible #photo-filters-wrapper {
    transform: scale(1.3) translateY(0);
}

#photo-filters-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#photo-filters-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#photo-filters-close-btn:active { transform: scale(0.9); }

#photo-filters-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 18px 22px 16px 22px;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
}
#photo-filters-popup h2 {
    margin: 0 0 16px 0;
    color: var(--gui-text);
    font-size: 10px;
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
}
#photo-filters-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.photo-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.photo-filter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    padding: 6px 4px 8px 4px;
    border: 3px solid var(--gui-border);
    background: var(--gui-bg-dark);
    transition: transform 0.1s, filter 0.1s, border-color 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.photo-filter-card:hover { filter: brightness(1.2); transform: scale(1.05); }
.photo-filter-card:active { transform: scale(0.93); }
.photo-filter-card.active {
    border-color: var(--gui-accent);
    background: var(--gui-active);
}
.photo-filter-preview {
    width: 44px;
    height: 44px;
    border: 2px solid var(--gui-border);
    image-rendering: pixelated;
    flex-shrink: 0;
    clip-path: polygon(0% 2px, 2px 2px, 2px 0%, calc(100% - 2px) 0%, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0% calc(100% - 2px));
}
.pf-preview-none {
    background:
        linear-gradient(135deg, #6db56d 0%, #6db56d 33%, #c4b470 33%, #c4b470 66%, #5b9fd4 66%, #5b9fd4 100%);
}
.pf-preview-gameboy {
    background:
        linear-gradient(135deg, #0f380f 0%, #0f380f 25%, #306230 25%, #306230 50%, #8bac0f 50%, #8bac0f 75%, #9bbc0f 75%, #9bbc0f 100%);
    filter: contrast(1.1) saturate(0) sepia(0.15) hue-rotate(80deg);
}
.pf-preview-crt {
    background:
        linear-gradient(135deg, #2a6040 0%, #2a6040 33%, #8a7a30 33%, #8a7a30 66%, #204060 66%, #204060 100%);
    filter: contrast(1.25) brightness(0.88) saturate(1.1);
}
.pf-preview-sepia {
    background:
        linear-gradient(135deg, #6db56d 0%, #6db56d 33%, #c4b470 33%, #c4b470 66%, #5b9fd4 66%, #5b9fd4 100%);
    filter: sepia(0.85) brightness(1.05) contrast(1.05);
}
.pf-preview-hc {
    background:
        linear-gradient(135deg, #6db56d 0%, #6db56d 33%, #c4b470 33%, #c4b470 66%, #5b9fd4 66%, #5b9fd4 100%);
    filter: contrast(2.2) brightness(1.1) saturate(1.3);
}
.photo-filter-name {
    font-family: 'Press Start 2P', cursive;
    font-size: 5px;
    color: var(--gui-text-dim);
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1.4;
}
.photo-filter-card.active .photo-filter-name {
    color: var(--gui-accent);
}

#photo-filter-crt {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.18) 2px,
        rgba(0, 0, 0, 0.18) 4px
    );
    mix-blend-mode: multiply;
}

#gui-settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 7200;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#gui-settings-overlay.popup-visible { opacity: 1; }

#gui-settings-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#gui-settings-overlay.popup-visible #gui-settings-wrapper {
    transform: scale(1.3) translateY(0);
}

#gui-settings-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#gui-settings-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#gui-settings-close-btn:active { transform: scale(0.9); }

#gui-settings-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 18px 22px 16px 22px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
}
#gui-settings-popup h2 {
    margin: 0 0 16px 0;
    color: var(--gui-text);
    font-size: 10px;
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
}
#gui-settings-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#gui-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.gui-theme-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-border);
    cursor: pointer;
    transition: filter 0.1s, transform 0.1s, border-color 0.15s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.gui-theme-card:hover { filter: brightness(1.3); transform: scale(1.05); }
.gui-theme-card:active { transform: scale(0.95); }
.gui-theme-card.selected { border-color: var(--gui-accent); background: var(--gui-active); }

.gui-theme-swatch {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.15);
    clip-path: polygon(0% 2px, 2px 2px, 2px 0%, calc(100% - 2px) 0%, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0% calc(100% - 2px));
}
.gui-swatch-auto    { background: linear-gradient(135deg, #9b6e3e 25%, #3a7aaa 50%, #4a7a3a 75%); }
.gui-swatch-default { background: #9b6e3e; }
.gui-swatch-blue    { background: #1a3a6a; }
.gui-swatch-green   { background: #2a5a2a; }

.gui-swatch-icon { font-size: 18px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5)); }

.gui-theme-name {
    color: var(--gui-accent);
    font-size: 6px;
    letter-spacing: 1px;
    text-align: center;
}
.gui-theme-desc {
    color: var(--gui-text-dim);
    font-size: 5px;
    text-align: center;
    letter-spacing: 0.5px;
}
.gui-theme-card.selected .gui-theme-desc { color: #ffc060; }

body { transition: background-color 1.5s ease; }
* { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; }

#explicit-warning-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 10000;
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
}
#explicit-warning-overlay.popup-visible { opacity: 1; display: flex; }

#explicit-warning-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
#explicit-warning-overlay.popup-visible #explicit-warning-wrapper {
    transform: scale(1.3) translateY(0);
}
#explicit-warning-close-btn {
    position: absolute;
    cursor: pointer;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#explicit-warning-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#explicit-warning-close-btn:active { transform: scale(0.9); }

#explicit-warning-popup {
    background: var(--gui-bg-light);
    border: 4px solid #8b1a1a;
    box-shadow: 6px 6px 0 #3b0808;
    padding: 26px 34px 24px 34px;
    width: min(420px, 94vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
    overflow: hidden;
}

#explicit-warning-icon-row {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
#explicit-warning-icon {
    width: 42px;
    height: 42px;
    image-rendering: pixelated;
    animation: expIconPulse 1.6s ease-in-out infinite;
}
@keyframes expIconPulse {
    0%,100% { filter: drop-shadow(0 0 3px rgba(255,60,60,0.4)); }
    50%      { filter: drop-shadow(0 0 10px rgba(255,60,60,0.95)); }
}
#explicit-warning-title {
    margin: 0 0 8px 0;
    color: #ff8888;
    font-size: 13px;
    text-shadow: 2px 2px #3b0000;
    letter-spacing: 1px;
    text-align: center;
}
#explicit-warning-subtitle {
    font-size: 8px;
    color: var(--gui-text-dim, #888);
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 2px solid #5a1010;
    width: 100%;
}
#explicit-warning-text {
    font-size: 7px;
    color: var(--gui-text-dim, #aaa);
    line-height: 2;
    text-align: center;
    margin: 0 0 18px 0;
}
#explicit-warning-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
}
#explicit-agree-btn {
    flex: 1;
    background: var(--gui-btn-bg, #3a2800);
    border: 2px solid #4caf50;
    color: #7fffc4;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 11px 8px;
    cursor: pointer;
    clip-path: polygon(0% 3px,3px 3px,3px 0%,calc(100% - 3px) 0%,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0% calc(100% - 3px));
    transition: filter 0.1s, transform 0.1s;
}
#explicit-agree-btn:hover { filter: brightness(1.25); }
#explicit-agree-btn:active { transform: scale(0.93); }
#explicit-decline-btn {
    flex: 1;
    background: var(--gui-btn-bg, #3a2800);
    border: 2px solid #8b1a1a;
    color: #ff8888;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    padding: 11px 8px;
    cursor: pointer;
    clip-path: polygon(0% 3px,3px 3px,3px 0%,calc(100% - 3px) 0%,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0% calc(100% - 3px));
    transition: filter 0.1s, transform 0.1s;
}
#explicit-decline-btn:hover { filter: brightness(1.25); }
#explicit-decline-btn:active { transform: scale(0.93); }


#community-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9998;
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
}
#community-overlay.popup-visible { opacity: 1; display: flex; }

#community-popup input,
#community-popup button,
#community-popup textarea {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

#community-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
#community-overlay.popup-visible #community-wrapper {
    transform: scale(1) translateY(0);
}

#community-close-btn {
    position: absolute;
    cursor: pointer;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
}
#community-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#community-close-btn:active { transform: scale(0.9); }
#community-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 0;
    width: 816px;
    height: 696px;
    display: flex;
    flex-direction: column;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
    overflow: hidden;
    position: relative;
}
#cm-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 22px 0 22px;
    flex-shrink: 0;
    position: relative;
}
#cm-title {
    margin: 0;
    color: var(--gui-text);
    font-size: 12px;
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
    text-align: center;
    flex: 1;
}

#cm-tab-account.cm-tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#cm-acct-tab-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 18px 14px 18px;
    gap: 0;
    height: 100%;
    overflow-y: auto;
}
#cm-acct-tab-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    width: 100%;
}
#cm-acct-tab-avatar-wrap {
    position: relative;
    width: 64px;
    height: 64px;
}
#cm-acct-tab-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--gui-divider, #3a2800);
    background: #1a1208;
    display: flex;
    align-items: center;
    justify-content: center;
}
#cm-acct-name {
    font-size: 17px;
    color: var(--gui-text, #ffdf80);
    text-shadow: 2px 2px var(--gui-title-sh, #1a1208);
    letter-spacing: 1px;
    text-align: center;
    word-break: break-all;
    line-height: 1.5;
}
.cm-acct-dash-divider {
    width: 100%;
    height: 0;
    border: none;
    border-top: 2px dashed var(--gui-divider, #3a2800);
    margin: 12px 0;
    opacity: 0.8;
}
#cm-acct-tab-maps-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
#cm-acct-tab-maps-label {
    font-size: 7px;
    color: var(--gui-accent, #ffdf80);
    letter-spacing: 0.5px;
}
#cm-acct-maps-count {
    font-size: 9px;
    color: #c8b89a;
}
#cm-acct-tab-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    margin-top: 4px;
}
#cm-auth-btn {
    background: #1a3a6a;
    border: 2px solid #2a5a9e;
    color: #a0d4ff;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    padding: 7px 10px;
    cursor: pointer;
    white-space: nowrap;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    transition: filter 0.1s;
    width: 100%;
}
#cm-auth-btn:hover { filter: brightness(1.2); }

#cm-delete-account-btn {
    background: #3a1010;
    border: 2px solid #aa2222;
    color: #ff8888;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    padding: 7px 10px;
    cursor: pointer;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    transition: filter 0.1s;
    width: 100%;
}
#cm-delete-account-btn:hover { filter: brightness(1.2); }
#cm-search-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 14px 22px 12px 22px;
    background: #0d0d00;
    border: 2px solid var(--gui-divider);
    flex-shrink: 0;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    transition: border-color 0.15s;
}
#cm-search-bar:focus-within {
    border-color: var(--gui-accent, #ffdf80);
}
#cm-search-icon {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #666;
    flex-shrink: 0;
}
#cm-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--gui-text, #ffdf80);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    padding: 10px 0;
    width: 100%;
}
#cm-search-input::placeholder { color: #555; }
#cm-search-clear {
    background: transparent;
    border: none;
    color: #666;
    font-size: 12px;
    padding: 0 10px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color 0.1s;
    clip-path: none;
    font-family: sans-serif;
}
#cm-search-clear:hover { color: #ffdf80; }

#cm-content-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 22px 12px 22px;
    display: flex;
    flex-direction: column;
    position: relative;
}
#cm-tab-browse.cm-tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
#cm-tab-upload.cm-tab-content {
    flex: 0 0 auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#cm-maps-list {
    flex: 1;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding-right: 6px;
    padding-bottom: 4px;
}
#cm-maps-list::-webkit-scrollbar { width: 8px; height: 8px; }
#cm-maps-list::-webkit-scrollbar-track { background: var(--gui-bg-dark); border: 1px solid var(--gui-border); }
#cm-maps-list::-webkit-scrollbar-thumb { background: var(--gui-bg); border: 1px solid var(--gui-accent); image-rendering: pixelated; }
#cm-maps-list::-webkit-scrollbar-thumb:hover { background: var(--gui-bg); }

#cm-tabs {
    display: flex;
    gap: 0;
    flex-shrink: 0;
    border-top: 3px solid var(--gui-border);
    margin-top: auto;
    background: var(--gui-bg-dark, #1a1208);
    position: relative;
}
.cm-tab {
    flex: 1;
    background: var(--gui-bg-dark, #1a1208);
    border: none;
    border-right: 2px solid var(--gui-border);
    color: var(--gui-text-dim, #666);
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    padding: 10px 10px 10px 10px;
    cursor: pointer;
    clip-path: none;
    transition: color 0.15s, background 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}
.cm-tab:last-child { border-right: none; }
.cm-tab:hover { color: #c8b89a; filter: brightness(1.2); }
.cm-tab-active {
    background: var(--gui-bg-light);
    color: var(--gui-text, #ffdf80);
    transform: translateY(-6px);
    border-top: 3px solid var(--gui-accent, #ffdf80);
    margin-top: -3px;
    z-index: 2;
}
.cm-tab-active:hover { filter: none; }
.cm-tab-icon {
    width: 24px;
    height: 24px;
    display: block;
    image-rendering: pixelated;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.cm-tab-active .cm-tab-icon { opacity: 1; }
.cm-tab span {
    display: block;
    line-height: 1;
}

#community-popup button {
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    transition: transform 0.1s, filter 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#community-popup button:active { transform: scale(0.93); }

#community-popup .popup-section-title {
    color: var(--gui-accent, #ffdf80);
    font-size: 11px;
    margin-bottom: 7px;
    letter-spacing: 1px;
}

.cm-map-card {
    background: var(--gui-popup-section, #241a00);
    border: 2px solid var(--gui-divider);
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-shrink: 0;
    overflow: hidden;
    clip-path: polygon(0% 4px, 4px 4px, 4px 0%, calc(100% - 4px) 0%, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0% calc(100% - 4px));
    transition: border-color 0.15s;
}
.cm-map-card:hover { border-color: var(--gui-accent, #ffdf80); }

.cm-map-thumb {
    width: 90px;
    height: 68px;
    flex-shrink: 0;
    display: block;
    image-rendering: pixelated;
    border-right: 2px solid var(--gui-divider);
}

.cm-map-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 4px;
    overflow: hidden;
    min-width: 0;
}
.cm-map-name {
    font-size: 9px;
    color: var(--gui-text, #ffdf80);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cm-map-author {
    font-size: 7px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cm-map-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}
.cm-map-actions .btn-load {
    font-size: 7px;
    padding: 6px 12px;
    flex: unset;
    border: 2px solid #0d3a50;
    background: #0a2a3a;
    color: #7fd4f8;
}
.cm-map-actions .btn-load:hover { filter: brightness(1.3); }

.cm-map-actions .btn-danger {
    width: auto;
    padding: 6px 8px;
    font-size: 7px;
    background: #3a1010;
    border: 2px solid #aa2222;
    color: #ff8888;
}
.cm-loading {
    text-align: center;
    color: #666;
    font-size: 9px;
    padding: 36px;
    font-family: 'Press Start 2P', monospace;
}

#cm-map-name {
    width: 100%;
    box-sizing: border-box;
    background: #0d0d00;
    border: 2px solid var(--gui-divider);
    color: var(--gui-text, #ffdf80);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    padding: 10px;
    outline: none;
    margin-bottom: 7px;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.cm-hint {
    font-size: 7px;
    color: #888;
    font-family: 'Press Start 2P', monospace;
    margin-bottom: 5px;
}
#cm-save-status {
    font-size: 8px;
    text-align: center;
    min-height: 18px;
    margin-top: 5px;
    font-family: 'Press Start 2P', monospace;
    color: var(--gui-accent, #ffdf80);
}
#cm-tab-upload .btn-qr {
    width: auto;
    align-self: flex-start;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 9px 16px;
    font-size: 8px;
}

#music-popup-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.75); z-index: 4000;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
#music-popup-overlay.popup-visible { opacity: 1; display: flex; }
#music-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#music-popup-overlay.popup-visible #music-popup-wrapper { transform: scale(1.3) translateY(0); }
#music-popup-close-btn {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px; background: #7a2020;
    border: 4px solid var(--gui-border); box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s; z-index: 10; padding: 0; line-height: 1;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    cursor: pointer;
}
#music-popup-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#music-popup-close-btn:active { transform: scale(0.9); }
#music-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 16px 18px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 380px;
    font-family: 'Press Start 2P', cursive;
    clip-path: polygon(0% 6px, 6px 6px, 6px 0%, calc(100% - 6px) 0%, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0% calc(100% - 6px));
}
#music-popup h2 {
    margin: 0; color: var(--gui-text); font-size: 11px;
    text-shadow: 2px 2px var(--gui-title-sh); text-align: center; letter-spacing: 1px;
}

#volume-bar-row {
    align-items: center;
}
#music-volume-ui {
    display: flex;
    align-items: center;
    gap: 6px;
}
#music-volume-track {
    position: relative;
    width: 160px;
    height: 16px;
    background: url('./Assets/GUI/zoombar.png') no-repeat center;
    background-size: 100% 100%;
    image-rendering: pixelated;
    flex-shrink: 0;
    cursor: pointer;
}
#music-volume-dot {
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: url('./Assets/GUI/zoomdot.png') no-repeat center;
    background-size: contain;
    image-rendering: pixelated;
    transition: left 0.1s ease-out;
    pointer-events: none;
}

#float-speed-bar-row {
    align-items: center;
}
#float-speed-ui {
    display: flex;
    align-items: center;
    gap: 6px;
}
#float-speed-track {
    position: relative;
    width: 160px;
    height: 16px;
    background: url('./Assets/GUI/zoombar.png') no-repeat center;
    background-size: 100% 100%;
    image-rendering: pixelated;
    flex-shrink: 0;
    cursor: pointer;
}
#float-speed-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: url('./Assets/GUI/zoomdot.png') no-repeat center;
    background-size: contain;
    image-rendering: pixelated;
    transition: left 0.1s ease-out;
    pointer-events: none;
}

.btn-embed {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-border);
    color: var(--gui-accent);
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    cursor: pointer;
    transition: filter 0.1s, transform 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.btn-embed:hover { filter: brightness(1.25); }
.btn-embed:active { transform: scale(0.93); }

#embed-popup-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 5100;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.25s ease;
}
#embed-popup-overlay.popup-visible { opacity: 1; display: flex; }

#embed-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#embed-popup-overlay.popup-visible #embed-popup-wrapper {
    transform: scale(1.3) translateY(0);
}

#embed-popup-close-btn {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; padding: 0; line-height: 1;
    transition: transform 0.1s, filter 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#embed-popup-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#embed-popup-close-btn:active { transform: scale(0.9); }

#embed-popup {
    background: var(--gui-bg);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 18px 22px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 400px;
    max-width: 94vw;
    box-sizing: border-box;
    font-family: 'Press Start 2P', cursive;
    clip-path: polygon(0% 6px, 6px 6px, 6px 0%, calc(100% - 6px) 0%, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0% calc(100% - 6px));
}
#embed-popup h2 {
    margin: 0;
    color: var(--gui-text);
    font-size: 12px;
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
}
#embed-code-output {
    width: 100%;
    box-sizing: border-box;
    height: 100px;
    background: var(--gui-input-bg);
    color: var(--gui-accent);
    border: 2px solid var(--gui-border);
    padding: 10px;
    font-family: 'Press Start 2P', cursive;
    font-size: 6px;
    line-height: 1.8;
    resize: none;
    outline: none;
    display: block;
}
#embed-code-output:focus { border-color: var(--gui-accent); }

.embed-btn-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#embed-popup .embed-btn-col button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    border: 3px solid var(--gui-border);
    cursor: pointer;
    transition: filter 0.1s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#embed-popup .embed-btn-col button:hover { filter: brightness(1.25); }
#embed-popup .embed-btn-col button:active { transform: scale(0.93); }

#embed-preview-wrap {
    width: 100%;
    box-sizing: border-box;
    height: 190px;
    background: var(--gui-bg-dark);
    border: 2px solid var(--gui-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#embed-preview-hint {
    color: var(--gui-accent);
    font-size: 7px;
    letter-spacing: 1px;
    text-align: center;
    line-height: 2.2;
}
#embed-popup .popup-section-title { color: var(--gui-accent); font-size: 8px; margin-bottom: 6px; letter-spacing: 1px; }
#embed-preview-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}



#analytics-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#analytics-popup-overlay.popup-visible { opacity: 1; display: flex; }

#analytics-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#analytics-popup-overlay.popup-visible #analytics-popup-wrapper {
    transform: scale(1.3) translateY(0);
}

#analytics-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 10;
    background: #7a2020;
    color: var(--gui-text, #fff8e1);
    border: 4px solid var(--gui-border, #523519);
    box-shadow: 3px 3px 0 #3b1010;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    transition: filter 0.1s, transform 0.1s;
}
#analytics-close-btn:hover  { filter: brightness(1.3); transform: scale(1.1); }
#analytics-close-btn:active { transform: scale(0.9); }

#analytics-popup {
    background: var(--gui-bg, #8b5e34);
    border: 3px solid var(--gui-border, #523519);
    padding: 20px 22px 18px;
    min-width: 320px;
    max-width: 440px;
    width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 4px 4px 0 var(--gui-shadow, #523519);
    overflow: hidden;
    clip-path: polygon(0% 6px, 6px 6px, 6px 0%, calc(100% - 6px) 0%, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0% calc(100% - 6px));
}

#analytics-popup h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--gui-text, #fff8e1);
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 0 var(--gui-title-sh, #523519);
    letter-spacing: 1px;
}

#analytics-summary-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    justify-content: space-between;
}

.analytics-stat-box {
    flex: 1;
    background: var(--gui-bg-dark, #3b2007);
    border: 2px solid var(--gui-border, #523519);
    border-radius: 2px;
    padding: 8px 4px 7px;
    text-align: center;
}

.analytics-stat-num {
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    color: var(--gui-accent, #ffdf80);
    text-shadow: 1px 1px 0 var(--gui-shadow, #523519);
    line-height: 1.2;
    margin-bottom: 5px;
}

.analytics-stat-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 5px;
    color: var(--gui-text-dim, #a07850);
    letter-spacing: 0.5px;
    line-height: 1.5;
}

#analytics-popup .popup-section-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--gui-accent, #ffdf80);
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 var(--gui-title-sh, #523519);
}

#analytics-list {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 4px;
    max-height: 260px;
}

#analytics-list::-webkit-scrollbar { width: 5px; }
#analytics-list::-webkit-scrollbar-track { background: var(--gui-bg-dark, #3b2007); border-radius: 2px; }
#analytics-list::-webkit-scrollbar-thumb { background: var(--gui-border, #523519); border-radius: 2px; }

.analytics-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gui-bg-dark, #3b2007);
    border: 1.5px solid var(--gui-border, #523519);
    border-radius: 2px;
    padding: 5px 8px;
}

.analytics-icon {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.analytics-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.analytics-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--gui-text, #fff8e1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-bar-wrap {
    height: 4px;
    background: var(--gui-active, #6b4726);
    border-radius: 1px;
    overflow: hidden;
}

.analytics-bar {
    height: 100%;
    background: var(--gui-accent, #ffdf80);
    border-radius: 1px;
    transition: width 0.4s ease;
}

.analytics-count {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--gui-accent, #ffdf80);
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

.analytics-pct {
    font-size: 6px;
    color: var(--gui-text-dim, #a07850);
}
@keyframes tile-place-rebound {
    0%   { transform: scaleX(1.0)  scaleY(1.0); }
    18%  { transform: scaleX(1.12) scaleY(0.88); }
    40%  { transform: scaleX(0.94) scaleY(1.10); }
    62%  { transform: scaleX(1.05) scaleY(0.96); }
    80%  { transform: scaleX(0.98) scaleY(1.03); }
    100% { transform: scaleX(1.0)  scaleY(1.0); }
}
.tile-place-anim {
    animation: tile-place-rebound 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform-origin: bottom center;
}

#one-by-one-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 5000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.28s ease;
}
#one-by-one-overlay.popup-visible { opacity: 1; }

#one-by-one-wrapper {
    transform: scale(0.88) translateY(24px);
    transition: transform 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#one-by-one-overlay.popup-visible #one-by-one-wrapper {
    transform: scale(1.3) translateY(0);
}

#one-by-one-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 28px 32px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 280px;
    max-width: 340px;
    font-family: 'Press Start 2P', cursive;
    text-align: center;
    clip-path: polygon(0% 6px, 6px 6px, 6px 0%, calc(100% - 6px) 0%, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0% calc(100% - 6px));
}

#one-by-one-title {
    margin: 0;
    color: var(--gui-accent);
    font-size: 13px;
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
}

#one-by-one-msg {
    margin: 0;
    color: var(--gui-text);
    font-size: 8px;
    line-height: 1.8;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

#one-by-one-ok-btn {
    margin-top: 6px;
    background: #4a7021;
    color: #fff;
    border: 3px solid var(--gui-border);
    box-shadow: 3px 3px 0 var(--gui-shadow);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    padding: 10px 28px;
    letter-spacing: 1px;
    cursor: pointer;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    transition: transform 0.1s, filter 0.1s;
}
#one-by-one-ok-btn:hover  { filter: brightness(1.2); transform: scale(1.06); }
#one-by-one-ok-btn:active { transform: scale(0.92); }
#radial-menu-overlay {
    position: fixed; inset: 0; z-index: 9998;
    pointer-events: none;
}
#radial-menu-overlay.radial-visible { pointer-events: all; }

#radial-menu {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 300px; height: 300px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    pointer-events: none;
    image-rendering: pixelated;
}
#radial-menu-overlay.radial-visible #radial-menu {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

#radial-svg {
    position: absolute; top: 0; left: 0;
    image-rendering: pixelated;
}

#radial-labels {
    position: absolute; top: 0; left: 0;
    width: 300px; height: 300px;
    pointer-events: none;
}

.radial-label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: 'Press Start 2P', cursive;
    font-size: 6px;
    color: var(--gui-text-dim, #a07850);
    text-align: center;
    line-height: 1.6;
    user-select: none;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.5px;
}
.radial-label-hov { color: var(--gui-bg-dark, #3b2007) !important; text-shadow: none; }
.radial-ico { display: block; font-size: 18px; margin-bottom: 3px; }
#brush-popup-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.75); z-index: 10000;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
#brush-popup-overlay.popup-visible { opacity: 1; display: flex; }

#brush-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#brush-popup-overlay.popup-visible #brush-popup-wrapper {
    transform: scale(1.3) translateY(0);
}

#brush-popup-close {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border, #523519);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s; z-index: 10; padding: 0; line-height: 1;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    cursor: pointer;
}
#brush-popup-close:hover  { filter: brightness(1.3); transform: scale(1.1); }
#brush-popup-close:active { transform: scale(0.9); }

#brush-popup {
    background: var(--gui-bg-light, #8b5e34);
    border: 4px solid var(--gui-border, #523519);
    box-shadow: 6px 6px 0 var(--gui-shadow, #523519);
    padding: 18px 22px 20px 22px;
    display: flex; flex-direction: column; gap: 14px;
    width: 300px;
    font-family: 'Press Start 2P', cursive;
    clip-path: polygon(0% 6px, 6px 6px, 6px 0%, calc(100% - 6px) 0%, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0% calc(100% - 6px));
}
#brush-popup h2 {
    margin: 0; color: var(--gui-text, #fff8e1); font-size: 11px;
    text-shadow: 2px 2px var(--gui-title-sh, #523519); text-align: center; letter-spacing: 1px;
}
#brush-size-grid {
    display: flex; flex-direction: row; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.brush-sz-btn {
    background: var(--gui-bg-dark, #3b2007);
    border: 3px solid var(--gui-border, #523519);
    color: var(--gui-text-dim, #a07850);
    font-family: 'Press Start 2P', cursive; font-size: 8px;
    cursor: pointer; padding: 10px 12px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s, border-color 0.1s, color 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    min-width: 48px;
}
.brush-sz-btn:hover  { filter: brightness(1.25); transform: scale(1.06); }
.brush-sz-btn:active { transform: scale(0.93); }
.brush-sz-btn.active { border-color: var(--gui-accent, #ffdf80); color: var(--gui-accent, #ffdf80); background: var(--gui-active, #6b4726); }

#brush-preview-wrap {
    display: flex; justify-content: center;
}
#brush-preview-canvas {
    image-rendering: pixelated;
    border: 3px solid var(--gui-border, #523519);
    background: var(--gui-bg-dark, #3b2007);
    display: block;
}

#mirror-popup-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.75); z-index: 10000;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
#mirror-popup-overlay.popup-visible { opacity: 1; display: flex; }

#mirror-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#mirror-popup-overlay.popup-visible #mirror-popup-wrapper {
    transform: scale(1.3) translateY(0);
}

#mirror-popup-close {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border, #523519);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s; z-index: 10; padding: 0; line-height: 1;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    cursor: pointer;
}
#mirror-popup-close:hover  { filter: brightness(1.3); transform: scale(1.1); }
#mirror-popup-close:active { transform: scale(0.9); }

#mirror-popup {
    background: var(--gui-bg-light, #8b5e34);
    border: 4px solid var(--gui-border, #523519);
    box-shadow: 6px 6px 0 var(--gui-shadow, #523519);
    padding: 18px 22px 20px 22px;
    display: flex; flex-direction: column; gap: 14px;
    width: 340px;
    font-family: 'Press Start 2P', cursive;
    clip-path: polygon(0% 6px, 6px 6px, 6px 0%, calc(100% - 6px) 0%, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0% calc(100% - 6px));
}
#mirror-popup h2 {
    margin: 0; color: var(--gui-text, #fff8e1); font-size: 11px;
    text-shadow: 2px 2px var(--gui-title-sh, #523519); text-align: center; letter-spacing: 1px;
}
#mirror-mode-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.mirror-card {
    background: var(--gui-bg-dark, #3b2007);
    border: 3px solid var(--gui-border, #523519);
    color: var(--gui-text-dim, #a07850);
    font-family: 'Press Start 2P', cursive;
    cursor: pointer; padding: 10px 4px 8px 4px;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    transition: transform 0.1s, filter 0.1s, border-color 0.1s, color 0.1s;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.mirror-card:hover  { filter: brightness(1.25); transform: scale(1.06); }
.mirror-card:active { transform: scale(0.93); }
.mirror-card.active { border-color: var(--gui-accent, #ffdf80); color: var(--gui-accent, #ffdf80); background: var(--gui-active, #6b4726); }
.mirror-card-icon  { font-size: 18px; line-height: 1; }
.mirror-card-label { font-size: 6px; letter-spacing: 0.5px; text-align: center; line-height: 1.4; }

#mirror-status {
    font-size: 7px; color: var(--gui-text-dim, #a07850); text-align: center; letter-spacing: 0.5px;
}
#mirror-active-name { color: var(--gui-accent, #ffdf80); }
.radial-label-active { color: var(--gui-accent, #ffdf80) !important; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }

#notfound-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 10001;
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
}
#notfound-overlay.popup-visible { opacity: 1; display: flex; }

#notfound-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
#notfound-overlay.popup-visible #notfound-wrapper {
    transform: scale(1.3) translateY(0);
}

#notfound-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 30px 40px 28px;
    width: min(400px, 94vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
    text-align: center;
}

#notfound-code {
    font-size: 52px;
    color: #ff6b6b;
    text-shadow: 4px 4px #3b0000, 6px 6px 0 rgba(0,0,0,0.4);
    letter-spacing: 6px;
    margin-bottom: 18px;
    line-height: 1;
}

#notfound-icon-row {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}
.notfound-block {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    animation: notfoundBounce 0.8s ease-in-out infinite alternate;
}
@keyframes notfoundBounce {
    from { transform: translateY(0px);   filter: brightness(1); }
    to   { transform: translateY(-8px);  filter: brightness(1.3); }
}

#notfound-title {
    font-size: 12px;
    color: var(--gui-text, #ffdf80);
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
    margin: 0 0 12px 0;
}

#notfound-text {
    font-size: 7px;
    color: var(--gui-text-dim, #aaa);
    line-height: 2;
    margin: 0 0 14px 0;
}

#notfound-hash-preview {
    font-size: 6px;
    color: #ff8888;
    background: var(--gui-popup-section, #241a00);
    border: 2px solid #5a1010;
    padding: 6px 10px;
    margin-bottom: 18px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    clip-path: polygon(0% 3px,3px 3px,3px 0%,calc(100% - 3px) 0%,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0% calc(100% - 3px));
}
#notfound-hash-preview:empty { display: none; }

#notfound-btn {
    background: var(--gui-btn-bg, #3a2800);
    border: 2px solid var(--gui-accent, #ffdf80);
    color: var(--gui-accent, #ffdf80);
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    padding: 12px 24px;
    cursor: pointer;
    clip-path: polygon(0% 3px,3px 3px,3px 0%,calc(100% - 3px) 0%,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0% calc(100% - 3px));
    transition: filter 0.1s, transform 0.1s;
}
#notfound-btn:hover { filter: brightness(1.25); }
#notfound-btn:active { transform: scale(0.93); }
#grid-res-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 10002;
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
}
#grid-res-overlay.popup-visible { opacity: 1; display: flex; }

#grid-res-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
#grid-res-overlay.popup-visible #grid-res-wrapper {
    transform: scale(1.3) translateY(0);
}

#grid-res-close-btn {
    position: absolute;
    top: -18px; right: -18px;
    width: 36px; height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10; padding: 0; line-height: 1;
    clip-path: polygon(0% 4px,4px 4px,4px 0%,calc(100% - 4px) 0%,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0% calc(100% - 4px));
}
#grid-res-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#grid-res-close-btn:active { transform: scale(0.9); }

#grid-res-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 28px 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
    min-width: min(420px, 92vw);
}
#grid-res-popup h2 {
    margin: 0 0 16px 0;
    color: var(--gui-text);
    font-size: 11px;
    text-shadow: 2px 2px var(--gui-title-sh);
    letter-spacing: 1px;
    text-align: center;
}
#grid-res-presets-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    width: 100%;
    justify-content: center;
}
.grid-res-divider-label {
    font-size: 7px;
    color: var(--gui-text-dim, #666);
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-align: center;
}
#grid-res-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
#grid-res-label {
    font-size: 8px;
    color: var(--gui-text-dim, #888);
    white-space: nowrap;
}
#grid-res-label span {
    color: #adffa8;
}
#grid-res-btn {
    background: var(--gui-btn-bg, #3a2800);
    border: 2px solid var(--gui-accent, #ffdf80);
    color: var(--gui-accent, #ffdf80);
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    padding: 8px 12px;
    cursor: pointer;
    clip-path: polygon(0% 3px,3px 3px,3px 0%,calc(100% - 3px) 0%,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0% calc(100% - 3px));
    transition: filter 0.1s, transform 0.1s;
    white-space: nowrap;
}
#grid-res-btn:hover { filter: brightness(1.25); }
#grid-res-btn:active { transform: scale(0.93); }
.shape-preset-btn {
    background: var(--gui-btn-bg, #3a2800);
    border: 2px solid var(--gui-divider);
    color: var(--gui-text-dim, #aaa);
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    padding: 8px 12px;
    cursor: pointer;
    clip-path: polygon(0% 3px,3px 3px,3px 0%,calc(100% - 3px) 0%,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0% calc(100% - 3px));
    transition: filter 0.1s, transform 0.1s, border-color 0.1s, color 0.1s;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}
.shape-preset-btn:hover {
    border-color: var(--gui-accent, #ffdf80);
    color: var(--gui-accent, #ffdf80);
    filter: brightness(1.2);
}
.shape-preset-btn:active { transform: scale(0.93); }
#shape-presets-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    width: 100%;
}
#shape-perf-disclaimer {
    font-size: 6px;
    color: #ff9900;
    letter-spacing: 0.5px;
    line-height: 1.8;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
#shape-perf-icon {
    font-size: 10px;
    line-height: 1;
}

body.presentation-mode .game-title-container,
body.presentation-mode #minimap-container,
body.presentation-mode #dock-container,
body.presentation-mode #zoom-ui,
body.presentation-mode #code-bar,
body.presentation-mode #block-name-display {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
body:not(.presentation-mode) .game-title-container,
body:not(.presentation-mode) #minimap-container,
body:not(.presentation-mode) #dock-container,
body:not(.presentation-mode) #zoom-ui,
body:not(.presentation-mode) #code-bar,
body:not(.presentation-mode) #block-name-display {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.4s ease;
}

#keybindings-popup-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.78); z-index: 5500;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
#keybindings-popup-overlay.popup-visible { opacity: 1; display: flex; }
#keybindings-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#keybindings-popup-overlay.popup-visible #keybindings-popup-wrapper {
    transform: scale(1.3) translateY(0);
}
#keybindings-close-btn {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px; background: #7a2020;
    border: 4px solid var(--gui-border); box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s; z-index: 10; padding: 0; line-height: 1;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#keybindings-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#keybindings-close-btn:active { transform: scale(0.9); }
#keybindings-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 16px 18px 14px 18px;
    display: flex; flex-direction: column; gap: 10px;
    width: 320px;
    font-family: 'Press Start 2P', cursive;
}
#keybindings-popup h2 {
    margin: 0; color: var(--gui-text); font-size: 13px;
    text-shadow: 2px 2px var(--gui-title-sh); text-align: center; letter-spacing: 1px;
}
#keybindings-subtitle {
    color: #a89070; font-size: 6px; text-align: center; letter-spacing: 1px;
    font-family: 'Press Start 2P', cursive;
}
#keybindings-list {
    display: flex; flex-direction: column; gap: 5px;
    max-height: 300px; overflow-y: auto;
    padding-right: 2px;
}
#keybindings-list::-webkit-scrollbar { width: 4px; }
#keybindings-list::-webkit-scrollbar-track { background: var(--gui-bg-dark); }
#keybindings-list::-webkit-scrollbar-thumb { background: var(--gui-border); }

.kb-row {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 6px;
    background: var(--gui-bg-dark);
    border: 2px solid var(--gui-border);
    clip-path: polygon(0% 2px, 2px 2px, 2px 0%, calc(100% - 2px) 0%, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0% calc(100% - 2px));
}
.kb-label {
    color: #e8d5b0; font-size: 7px; letter-spacing: 1px;
    font-family: 'Press Start 2P', cursive;
    flex: 1;
}
.kb-desc {
    color: #a89070; font-size: 6px; letter-spacing: 0.5px;
    font-family: 'Press Start 2P', cursive;
    flex: 1; text-align: center;
}
.kb-key-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px;
    min-width: 48px;
    height: 22px;
    background: var(--gui-bg-light);
    border: 2px solid var(--gui-accent);
    color: var(--gui-accent);
    padding: 0 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    clip-path: polygon(0% 2px, 2px 2px, 2px 0%, calc(100% - 2px) 0%, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0% calc(100% - 2px));
    display: flex; align-items: center; justify-content: center;
}
.kb-key-btn:hover { background: var(--gui-accent); color: #1a1208; }
.kb-key-btn.listening {
    background: #7a2020;
    border-color: #ff6060;
    color: #fff;
    animation: kb-blink 0.5s steps(1) infinite;
}
@keyframes kb-blink {
    0%  { border-color: #ff6060; }
    50% { border-color: #7a2020; }
}
.kb-key-btn.conflict {
    border-color: #ff9900;
    color: #ff9900;
}
.kb-conflict-badge {
    color: #ff9900; font-size: 6px; font-family: 'Press Start 2P', cursive;
    text-align: center; letter-spacing: 0.5px; min-height: 9px;
}
#keybindings-actions {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
#keybindings-reset-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 7px; letter-spacing: 1px;
    background: #3a2a10; border: 2px solid var(--gui-border); color: #c8a860;
    padding: 6px 10px; cursor: pointer;
    transition: filter 0.1s, transform 0.1s;
    clip-path: polygon(0% 2px, 2px 2px, 2px 0%, calc(100% - 2px) 0%, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0% calc(100% - 2px));
}
#keybindings-reset-btn:hover { filter: brightness(1.3); transform: scale(1.04); }
#keybindings-reset-btn:active { transform: scale(0.96); }
#fun-popup-overlay,
#island-emoji-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.75); z-index: 6000;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
#fun-popup-overlay.popup-visible,
#island-emoji-overlay.popup-visible { opacity: 1; display: flex; }

#fun-popup-wrapper,
#island-emoji-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#fun-popup-overlay.popup-visible #fun-popup-wrapper,
#island-emoji-overlay.popup-visible #island-emoji-wrapper {
    transform: scale(1.3) translateY(0);
}

#fun-popup-close-btn,
#island-emoji-close-btn {
    position: absolute; top: -18px; right: -18px;
    width: 36px; height: 36px; background: #7a2020;
    border: 4px solid var(--gui-border); box-shadow: 3px 3px 0 #3b1010;
    color: #fff; font-family: 'Press Start 2P', cursive; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, filter 0.1s; z-index: 10; padding: 0; line-height: 1;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    cursor: pointer;
}
#fun-popup-close-btn:hover,
#island-emoji-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#fun-popup-close-btn:active,
#island-emoji-close-btn:active { transform: scale(0.9); }

#fun-popup,
#island-emoji-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-shadow);
    padding: 18px 18px 16px 18px;
    display: flex; flex-direction: column; gap: 14px;
    font-family: 'Press Start 2P', cursive;
    image-rendering: pixelated;
    clip-path: polygon(0% 6px, 6px 6px, 6px 0%, calc(100% - 6px) 0%, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0% calc(100% - 6px));
}
#fun-popup h2,
#island-emoji-popup h2 {
    margin: 0; color: var(--gui-text); font-size: 11px;
    text-shadow: 2px 2px var(--gui-title-sh); text-align: center; letter-spacing: 1px;
}

#fun-popup-grid {
    grid-template-columns: repeat(3, 110px);
}
.fun-emoji-card {
    background: #1a3a1a;
    border-color: #2a6a2a;
}
.fun-emoji-card:hover { border-color: #6aff6a; }
.fun-emoji-card .biome-name { color: #6aff6a; }
.fun-emoji-card .biome-desc { color: #4a9a4a; }
#island-emoji-popup { width: 320px; }
#island-emoji-body { display: flex; flex-direction: column; gap: 10px; }
#island-emoji-grid {
    background: var(--gui-bg-dark);
    border: 3px solid var(--gui-border);
    padding: 12px 16px;
    font-size: 18px; line-height: 1.3;
    text-align: center;
    white-space: pre; min-height: 44px;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    overflow-x: auto;
}
#island-emoji-actions {
    grid-template-columns: repeat(2, 1fr);
}
.biome-card-copy {
    background: #1a2a4a;
    border-color: #2a4a8a;
}
.biome-card-copy:hover { border-color: var(--gui-accent); }
.biome-card-copy .biome-name { color: var(--gui-accent); }
.biome-card-copy .biome-desc { color: #5a7aaa; }
#achievements-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 10002;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#achievements-popup-overlay.popup-visible { opacity: 1; display: flex; }

#achievements-popup-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#achievements-popup-overlay.popup-visible #achievements-popup-wrapper {
    transform: scale(1.3) translateY(0);
}

#achievements-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    z-index: 10;
    background: #7a2020;
    color: var(--gui-text, #fff8e1);
    border: 4px solid var(--gui-border, #523519);
    box-shadow: 3px 3px 0 #3b1010;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    transition: filter 0.1s, transform 0.1s;
}
#achievements-close-btn:hover  { filter: brightness(1.3); transform: scale(1.1); }
#achievements-close-btn:active { transform: scale(0.9); }

#achievements-popup {
    background: var(--gui-bg, #8b5e34);
    border: 3px solid var(--gui-border, #523519);
    padding: 20px 22px 18px;
    min-width: 340px;
    max-width: 480px;
    width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 4px 4px 0 var(--gui-shadow, #523519);
    overflow: hidden;
    clip-path: polygon(0% 6px, 6px 6px, 6px 0%, calc(100% - 6px) 0%, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0% calc(100% - 6px));
}

#achievements-popup h2 {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--gui-text, #fff8e1);
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 0 var(--gui-title-sh, #523519);
    letter-spacing: 1px;
}
#ach-progress-bar-wrap {
    position: relative;
    background: var(--gui-bg-dark, #3b2007);
    border: 2px solid var(--gui-border, #523519);
    height: 18px;
    margin: 8px 0 6px;
    overflow: hidden;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
#ach-progress-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, var(--gui-accent, #ffdf80) 0%, #ffa040 100%);
    transition: width 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#ach-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--gui-bg-dark, #3b2007);
    mix-blend-mode: difference;
    letter-spacing: 1px;
    filter: invert(1);
}
#ach-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 4px;
}
#ach-list::-webkit-scrollbar { width: 6px; }
#ach-list::-webkit-scrollbar-track { background: var(--gui-bg-dark, #3b2007); }
#ach-list::-webkit-scrollbar-thumb { background: var(--gui-border, #523519); border: 1px solid var(--gui-accent, #ffdf80); }

.ach-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: var(--gui-bg-dark, #3b2007);
    border: 2px solid var(--gui-border, #523519);
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
    transition: filter 0.15s;
}
.ach-row.unlocked {
    border-color: var(--gui-accent, #ffdf80);
    background: var(--gui-bg, #8b5e34);
    box-shadow: 0 0 0 1px var(--gui-accent, #ffdf80) inset;
}
.ach-row.locked {
    opacity: 0.48;
    filter: saturate(0.3);
}
.ach-icon-wrap {
    min-width: 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gui-bg-dark, #3b2007);
    border: 2px solid var(--gui-border, #523519);
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.ach-icon-wrap img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
}
.ach-icon-wrap .ach-lock-icon {
    font-size: 18px;
    filter: grayscale(1) brightness(0.5);
}
.ach-info { flex: 1; min-width: 0; }
.ach-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 7.5px;
    color: var(--gui-accent, #ffdf80);
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    text-shadow: 1px 1px 0 var(--gui-title-sh, #523519);
}
.ach-row.locked .ach-title { color: var(--gui-text-dim, #a07850); }
.ach-desc {
    font-family: 'Press Start 2P', monospace;
    font-size: 5.5px;
    color: var(--gui-text-dim, #a07850);
    line-height: 1.7;
}
.ach-badge {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    white-space: nowrap;
    padding: 4px 7px;
    clip-path: polygon(0% 3px, 3px 3px, 3px 0%, calc(100% - 3px) 0%, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0% calc(100% - 3px));
}
.ach-badge.done {
    background: #1a3a10;
    border: 2px solid #4aaa20;
    color: #8aff40;
}
.ach-badge.pending {
    background: var(--gui-bg-dark, #3b2007);
    border: 2px solid var(--gui-border, #523519);
    color: var(--gui-border, #523519);
}
#ach-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: flex;
    align-items: stretch;
    gap: 0;
    clip-path: polygon(0% 5px, 5px 5px, 5px 0%, calc(100% - 5px) 0%, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0% calc(100% - 5px));
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
    min-width: 240px;
    max-width: 88vw;
}
#ach-toast.toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
#ach-toast-sidebar {
    background: var(--gui-accent, #ffdf80);
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
}
#ach-toast-sidebar img {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
}
#ach-toast-body {
    background: var(--gui-bg-dark, #1e1006);
    border: 3px solid var(--gui-accent, #ffdf80);
    border-left: none;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    flex: 1;
}
#ach-toast-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 5.5px;
    color: var(--gui-text-dim, #a07840);
    letter-spacing: 1.5px;
}
#ach-toast-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--gui-accent, #ffdf80);
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 0 #3b2007;
}
#save-slots-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 10010;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.22s ease;
}
#save-slots-overlay.popup-visible { opacity: 1; display: flex; }
#save-slots-wrapper {
    position: relative;
    transform: scale(0.88) translateY(24px);
    transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#save-slots-overlay.popup-visible #save-slots-wrapper { transform: scale(1.3) translateY(0); }
#save-slots-close-btn {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background: #7a2020;
    border: 4px solid var(--gui-border);
    box-shadow: 3px 3px 0 #3b1010;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, filter 0.1s;
    z-index: 10;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}
#save-slots-close-btn:hover { filter: brightness(1.3); transform: scale(1.1); }
#save-slots-close-btn:active { transform: scale(0.9); }
#save-slots-popup {
    background: var(--gui-bg-light);
    border: 4px solid var(--gui-border);
    box-shadow: 6px 6px 0 var(--gui-bg-dark, #1a1208);
    padding: 22px 24px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 420px;
    max-width: 98vw;
    font-family: 'Press Start 2P', monospace;
}
#save-slots-popup h2 {
    color: var(--gui-accent, #ffdf80);
    font-size: 12px;
    text-shadow: 2px 2px var(--gui-bg-dark, #1a1208);
    margin: 0;
    letter-spacing: 1px;
}
#save-slots-grid {
    display: flex;
    flex-direction: row;
    gap: 14px;
    margin-top: 14px;
    justify-content: center;
}
.save-slot-card {
    background: var(--gui-bg-dark, #1a1208);
    border: 3px solid var(--gui-border, #6b4c2a);
    padding: 10px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 130px;
    transition: border-color 0.15s;
}
.save-slot-card:hover { border-color: var(--gui-accent, #ffdf80); }
.save-slot-thumb-wrap {
    position: relative;
    width: 120px; height: 80px;
    background: #0d0a05;
    border: 2px solid #3a2a14;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.save-slot-thumb {
    width: 120px; height: 80px;
    image-rendering: pixelated;
    display: block;
}
.save-slot-empty-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #5a4020;
    letter-spacing: 1px;
    pointer-events: none;
}
.save-slot-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--gui-accent, #ffdf80);
    letter-spacing: 1px;
    text-align: center;
}
.save-slot-meta {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: #8a6a3a;
    letter-spacing: 0.5px;
    text-align: center;
    min-height: 10px;
}
.save-slot-btns {
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: 100%;
}
.save-slot-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    border: 2px solid;
    cursor: pointer;
    padding: 4px 3px;
    flex: 1;
    transition: filter 0.15s, transform 0.1s;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: nowrap;
}
.save-slot-btn:active { transform: scale(0.93); }
.save-slot-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.save-slot-btn.save { background: #1a4a2a; border-color: #2a8a4a; color: #a0ffb8; }
.save-slot-btn.save:hover:not(:disabled) { filter: brightness(1.3); }
.save-slot-btn.load { background: #1a3a5c; border-color: #2a6a9e; color: #a0d4ff; }
.save-slot-btn.load:hover:not(:disabled) { filter: brightness(1.3); }
.save-slot-btn.del { background: #4a1a1a; border-color: #9e2a2a; color: #ffa0a0; flex: 0 0 26px; }
.save-slot-btn.del:hover:not(:disabled) { filter: brightness(1.3); }
.btn-save-slots {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    padding: 8px 12px;
    border: 3px solid #4a7a5c;
    background: #1a3a2a;
    color: #80ffb0;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    letter-spacing: 0.5px;
    text-align: left;
}
.btn-save-slots:hover { filter: brightness(1.3); }
.btn-save-slots:active { transform: scale(0.95); }