/* ==============================
   Ковчег — Game Styles v3
   ============================== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-drag:none}
img{-webkit-user-drag:none;user-select:none;pointer-events:none}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;font-family:'Press Start 2P',monospace}
body{background:#000;overflow:hidden;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;font-family:'Press Start 2P',monospace}

/* ── Container 540x960 ── */
#game-container{position:relative;width:540px;height:960px;overflow:hidden;background:#000;image-rendering:pixelated}
@media(max-aspect-ratio:9/16){#game-container{width:100vw;height:calc(100vw*960/540)}}
@media(min-aspect-ratio:9/16){#game-container{height:100vh;width:calc(100vh*540/960)}}


/* ── Screens ── */
.screen{position:absolute;top:0;left:0;width:100%;height:100%;display:none;flex-direction:column;align-items:center;justify-content:center}
.screen.active{display:flex}

/* ══ Splash ══ */
#splash-screen{background:#000;z-index:100}
#splash-logo{width:80%;max-width:440px;opacity:0;image-rendering:pixelated;transition:opacity 2s ease-in}
#splash-logo.visible{opacity:1}
#splash-flash{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none;z-index:101}

/* ══ Menu ══ */
#menu-screen{background-size:cover;background-position:center;justify-content:flex-start;padding-top:8%}
#menu-logo{width:70%;max-width:380px;image-rendering:pixelated;margin-bottom:16px;animation:menuGlow 3s ease-in-out infinite alternate}
@keyframes menuGlow{0%{filter:brightness(1) drop-shadow(0 0 0 transparent)}100%{filter:brightness(1.1) drop-shadow(0 0 8px rgba(100,180,220,.3))}}
.menu-spacer{flex:1}
.menu-buttons{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:14%}

/* Buttons — native PNG ratio */
.game-btn{position:relative;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;width:auto;height:auto}
.game-btn img{image-rendering:pixelated;pointer-events:none;height:80px;width:auto}
.game-btn .btn-off{display:none}
.game-btn:active .btn-on{display:none}
.game-btn:active .btn-off{display:block}
.game-btn span{position:absolute;z-index:2;color:#c0d0d8;font-size:9px;text-shadow:1px 1px 0 #1a2a30;pointer-events:none;white-space:nowrap}

/* ══ Settings ══ */
#settings-modal{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:50;justify-content:center;align-items:center}
#settings-modal.active{display:flex}
.settings-box{width:75%;background:#3a4550;border:2px solid #ddd;border-radius:4px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px}
.settings-box h2{color:#e0e8ec;font-size:14px}
.settings-row{display:flex;align-items:center;gap:12px;color:#c0d0d8;font-size:10px}
.settings-row input[type="checkbox"]{width:20px;height:20px;accent-color:#5a8a5a}

/* ══ Login ══ */
#login-screen{background:#0a1520;gap:16px;padding:10%}
#login-screen h2{color:#c0d0d8;font-size:13px;text-align:center;line-height:1.8}
.login-field{display:flex;flex-direction:column;width:100%;gap:8px}
.login-field label{color:#8a9aa8;font-size:9px}
.login-field input{width:100%;padding:12px;background:#162030;border:2px solid #3a5060;color:#e0e8ec;font-size:12px;font-family:'Press Start 2P',monospace;outline:none;border-radius:2px;user-select:text;-webkit-user-select:text}
.login-field input:focus{border-color:#5a8ab0}
.login-buttons{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px}
#login-found-msg{color:#5a8a5a;font-size:8px;text-align:center;line-height:1.8;display:none}

/* ══ Prologue ══ */
#prologue-screen{background:#050a12;justify-content:flex-start;padding:0;overflow-y:auto;overflow-x:hidden}
.prologue-panels{display:flex;flex-direction:column;width:100%}
.prologue-panel{position:relative;width:100%;opacity:0;transform:translateY(20px);transition:opacity 1.2s ease,transform 1.2s ease}
.prologue-panel.visible{opacity:1;transform:translateY(0)}
.prologue-panel img{width:100%;display:block;image-rendering:pixelated}
.prologue-panel .panel-text{position:absolute;bottom:8%;color:#e0e8f0;font-size:9px;text-align:center;line-height:2;text-shadow:1px 1px 3px #000,0 0 8px #000;opacity:0;transition:opacity 1s ease .5s}
.prologue-panel.visible .panel-text{opacity:1}
.prologue-panel.blink-red img{animation:radarBlink 1.2s ease-in-out infinite alternate}
@keyframes radarBlink{0%{filter:none}100%{filter:brightness(1.3) saturate(1.4) hue-rotate(-5deg)}}
.prologue-footer{padding:24px 20px 60px;text-align:center;opacity:0;transition:opacity 1.5s ease}
.prologue-footer.visible{opacity:1}
.prologue-footer p{color:#8ab0c8;font-size:8px;line-height:2.2}
#prologue-tap-hint{position:fixed;bottom:2%;left:50%;transform:translateX(-50%);color:#4a6070;font-size:7px;animation:blink 1.5s infinite;z-index:10}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

/* ══ Desk (Screen 4) ══ */
#desk-screen{background:#0a1218;justify-content:flex-start;padding:0}
.desk-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;z-index:0}

/* Stats bar */
.stats-bar{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-around;padding:8px 12px;z-index:20;background:#000}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.stat-label{color:#8a9aa8;font-size:6px}
.stat-bar-outer{width:80px;height:14px;background:#111820;border:1px solid #3a5060}
.stat-bar-inner{height:100%;background:#d0d8e0;transition:width .5s ease}
.stat-bar-inner.low{background:#c04040}

/* Table */
.table-area{position:absolute;bottom:0;left:0;width:100%;z-index:10}
.table-area img.table-img{width:100%;image-rendering:pixelated;display:block}

/* Character — animations injected dynamically from db.json */
.character{position:absolute;z-index:8;image-rendering:pixelated;transition:left .8s ease-out}
.character.hidden{display:none}

/* Table items */
.table-item{position:absolute;z-index:12;image-rendering:pixelated;touch-action:none}
.table-document-item{z-index:11;cursor:pointer;pointer-events:auto}
.stamp-item{cursor:grab;pointer-events:auto}
.stamp-item:active{cursor:grabbing}

/* Document overlay — absolute positioning for each element */
#document-overlay{opacity:0;pointer-events:none;display:flex;position:absolute;top:0;left:0;width:100%;height:100%;z-index:30;background:rgba(0,0,0,.8);justify-content:center;align-items:center;flex-direction:column;touch-action:pan-y;transition:opacity 0.4s ease}
#document-overlay.active{opacity:1;pointer-events:auto}
.document-card{width:85%;height:80%;position:relative}
.document-card img.doc-bg{position:absolute;top:0;left:0;width:100%;height:100%;image-rendering:pixelated;object-fit:contain}
.doc-title{position:absolute;z-index:2;left:50%;transform:translateX(-50%);color:#1a2a30;font-size:9px;text-align:center;white-space:nowrap}
.doc-image{position:absolute;z-index:2;left:50%;transform:translateX(-50%);object-fit:contain;image-rendering:pixelated}
.doc-text{position:absolute;z-index:2;left:50%;transform:translateX(-50%);color:#2a3a40;font-size:7px;line-height:2;text-align:center}
.doc-hint{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);z-index:2;color:#7a9aaa;font-size:8px;animation:blink 1.5s infinite}

/* Document open/close animations */
@keyframes docSlideIn{0%{transform:translateY(100%) scale(.9);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes docSlideUp{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-120%) scale(.85);opacity:0}}

/* Dialogue */
.dialogue-box{display:none;position:absolute;bottom:0;left:0;width:100%;z-index:15;min-height:22%;cursor:pointer}
.dialogue-box.active{display:flex}
.dialogue-box img.dialogue-bg{position:absolute;width:100%;height:100%;image-rendering:pixelated;object-fit:fill}
.dialogue-content{position:relative;z-index:2;padding:20px 24px;width:100%}
.dialogue-name{font-size:9px;margin-bottom:8px}
.dialogue-text{color:#c0d0d8;font-size:8px;line-height:2}

/* Menu button (in-game) */
.ingame-menu-btn{position:absolute;bottom:8px;left:8px;z-index:25;background:rgba(0,0,0,.7);border:1px solid #3a5060;color:#8a9aa8;padding:6px 10px;font-size:7px;font-family:'Press Start 2P',monospace;cursor:pointer;border-radius:3px}
.ingame-menu-btn:hover{background:rgba(30,50,70,.9);color:#c0d0d8}

/* Swipe hint */
.swipe-hint{position:absolute;top:50%;z-index:18;color:#4a6070;font-size:24px;pointer-events:none}
.swipe-hint.right{right:4px;animation:nudge 1.5s infinite}
.swipe-hint.left{left:4px;animation:nudgeLeft 1.5s infinite}
@keyframes nudge{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:.8;transform:translateX(5px)}}
@keyframes nudgeLeft{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:.8;transform:translateX(-5px)}}

/* ══ Cabin (Screen 5) ══ */
#cabin-screen{background:#0a1218;justify-content:flex-start;padding:0;overflow:hidden}
.cabin-bg-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;z-index:0}

/* Lever area */
.lever-zone{position:absolute;bottom:6%;left:5%;z-index:5;cursor:pointer;width:22%;height:20%}
.lever-zone:active{filter:brightness(1.3)}

/* Music player */
.music-player{position:absolute;bottom:4%;right:4%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;width:55%}
.music-track-name{color:#8ab0c8;font-size:6px;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:3px}
.music-controls{display:flex;gap:6px;align-items:center}
.music-btn{background:rgba(0,0,0,.6);border:1px solid #3a5060;color:#8ab0c8;width:32px;height:28px;font-size:10px;cursor:pointer;border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P',monospace}
.music-btn:hover{background:rgba(30,50,70,.9);color:#c0d0d8}
.music-btn.active{border-color:#58a6ff;color:#58a6ff}

/* Money particles — physics handled by inline JS animation */
.money-sprite{position:absolute;z-index:10;pointer-events:none;image-rendering:pixelated;width:32px;height:32px;will-change:transform,opacity}
/* Fallback money emoji */
.money-particle{position:absolute;font-size:22px;z-index:10;pointer-events:none;will-change:transform,opacity}

/* ══ Game Over / Win ══ */
#gameover-screen,#win-screen{background:rgba(5,10,18,.95);z-index:200;gap:24px}
#gameover-screen h1{color:#c04040;font-size:16px;text-align:center}
#gameover-text{color:#8a9aa8;font-size:9px;text-align:center;line-height:2;padding:0 20px}
#win-screen h1{color:#5a8a5a;font-size:16px;text-align:center}
#win-text{color:#c0d8c0;font-size:9px;text-align:center;line-height:2.2;padding:0 20px}

/* Filter */
.filter-active{filter:sepia(.2) contrast(1.1) brightness(.95)}

/* Transitions */
.screen { transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease; transform: scale(1) translateX(0); opacity: 1; }
.screen.transition-out-left { transform: scale(0.85) translateX(-30%); opacity: 0; pointer-events: none; }
.screen.transition-out-right { transform: scale(0.85) translateX(30%); opacity: 0; pointer-events: none; }
.screen.transition-in-left { transform: scale(0.85) translateX(-30%); opacity: 0; pointer-events: none; }
.screen.transition-in-right { transform: scale(0.85) translateX(30%); opacity: 0; pointer-events: none; }
.screen.active { pointer-events: auto; }