:root { --sky:#8ecbff; --grass:#5d9b3a; --dirt:#8a5a35; }
* { box-sizing:border-box; }

body {
  margin:0; min-height:100vh; overflow:hidden;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  background:#0b1230;
  user-select:none; -webkit-user-select:none; touch-action:none;
  -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; overscroll-behavior:none;
}
[hidden] { display:none !important; }
/* The whole scene lives in #world so the screen shake moves it as one piece. It is
   oversized by 40px on every side so shake and rotation never reveal an edge. The HUD
   sits outside it and stays still. Nothing in it is position:fixed. */
#world { position:fixed; inset:-40px; padding:40px 40px 0;
         background:linear-gradient(var(--sky-top,#8ecbff), var(--sky-bot,#cfeeff) 62%, var(--grass) 62% 66%, var(--dirt) 66%); }
h1, .sub { position:relative; z-index:1; }
h1 { text-align:center; margin:18px 0 0; color:#fff; text-shadow:3px 3px 0 #0006; font-size:clamp(1.6rem,5vw,2.8rem); }
.sub { text-align:center; color:#fff; text-shadow:2px 2px 0 #0006; margin:6px 0; }

/* Character */
#stage { position:absolute; left:50%; top:62%; transform:translate(-50%,-100%); cursor:pointer; }
#body { transform-origin:50% 100%; will-change:transform; }
#verity { position:relative; width:min(40vw,200px); aspect-ratio:1; }
#skinImg { display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
#face { position:absolute; inset:0; width:100%; height:100%; }


/* HUD */
#meter { position:fixed; left:50%; bottom:calc(56px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); width:min(70vw,320px); height:16px;
         background:#0008; border:2px solid #fff; }
#fill { height:100%; width:0; background:#9acd32; transition:width .15s linear; }
#count, #hint { position:fixed; bottom:max(12px, env(safe-area-inset-bottom)); color:#fff; background:#0008; padding:6px 12px; font-size:.85rem; }
#count { left:12px; }
#hint { right:12px; }


/* Gas particles are drawn on one canvas (js/puffs.js), above Verity, below the HUD */
#gasCanvas { position:absolute; left:0; top:0; z-index:3; pointer-events:none; }
#stage { z-index:2; }
#meter, #count, #hint, #combo { z-index:4; }
#statsPanel, #shopPanel, .leftPanel { z-index:5; }
#topBtns { max-width:100vw; }
#bank { z-index:4; }

/* Combo readout */
#combo { position:fixed; top:176px; left:50%; transform:translateX(-50%); text-align:center; color:#fff;
         text-shadow:3px 3px 0 #0007; opacity:0; transition:opacity .2s; pointer-events:none; }
#combo.on { opacity:1; }
#comboText { font-weight:700; font-size:clamp(1.4rem,5vw,2.4rem); }
#comboText.pop { animation:pop .25s; }
@keyframes pop { 50% { transform:scale(1.35); } }
#comboBar { width:160px; height:8px; margin:6px auto 0; background:#0007; }
#comboFill { height:100%; width:100%; background:#ffd92e; }

/* Sky: sun, moon and stars ride behind Verity, clipped at the horizon (62% of the scene) */
#sky { position:absolute; left:0; right:0; top:0; height:62%; overflow:hidden; pointer-events:none; z-index:0; }
#stars { position:absolute; inset:0; opacity:0; transition:opacity 3s; }
.star { position:absolute; width:2px; height:2px; background:#fff; }
#sun, #moon { position:absolute; border-radius:50%; transform:translate(-50%,-50%); }
#sun { width:clamp(44px,10vmin,76px); aspect-ratio:1; }
#moon { width:clamp(34px,7vmin,56px); aspect-ratio:1; overflow:hidden; }
#sun img, #moon img { position:absolute; inset:0; width:100%; height:100%; user-select:none; -webkit-user-drag:none; }
#moonShade { position:absolute; inset:0; border-radius:50%; background:#0e1736; }

/* Eyes water as the room fills with gas */

/* Toast, flash */
#flash { position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0;
         background:radial-gradient(circle at 50% 70%, #fff, #e4ff8a 45%, #7dae1c); }
#toast { position:fixed; left:50%; top:38%; z-index:6; pointer-events:none; opacity:0; width:max-content; max-width:92vw; text-align:center;
         transform:translate(-50%,-50%); font-weight:700; font-size:clamp(1.3rem,6vw,3rem); color:#fff;
         text-shadow:3px 3px 0 #0008; }
#toast.show { animation:toast 1.4s ease-out forwards; }
@keyframes toast { 0% { opacity:0; } 12% { opacity:1; } 80% { opacity:1; } 100% { opacity:0; } }

/* Stats */
#topBtns { position:fixed; top:max(12px, env(safe-area-inset-top)); right:12px; z-index:5; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:calc(100vw - 24px); }
#topBtns button { background:#0008; color:#fff; border:0; padding:6px 12px; font:inherit; font-size:.85rem; cursor:pointer; }
#statsPanel, .leftPanel { position:fixed; top:calc(max(12px, env(safe-area-inset-top)) + 36px); left:12px; width:min(260px,80vw);
              background:#000c; color:#fff; padding:10px 14px; font-size:.85rem; }
#statsPanel div, .leftPanel .row, .leftPanel .clip { display:flex; justify-content:space-between; gap:16px; padding:2px 0; }
#statsPanel button { margin-top:8px; font:inherit; font-size:.75rem; background:#fff2; color:#fff; border:0; padding:4px 10px; cursor:pointer; }

/* Bank */
#bank { position:fixed; top:96px; left:50%; transform:translateX(-50%); text-align:center; color:#fff;
        text-shadow:2px 2px 0 #0008; pointer-events:none; white-space:nowrap; }
#bankNum { font-weight:700; font-size:clamp(1.3rem,5vw,2rem); }
#bankRate { font-size:.8rem; opacity:.9; }
#frenzy { margin-top:2px; font-weight:700; color:#ffe27a; }

/* Shop */
#shopPanel { position:fixed; right:0; top:calc(max(12px, env(safe-area-inset-top)) + 36px); bottom:max(48px, env(safe-area-inset-bottom));
             width:min(340px,100vw); overflow-y:auto; background:#000d; color:#fff; padding:10px; font-size:.85rem;
             overscroll-behavior:contain; touch-action:pan-y; }
.shopHead { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.buyN button { font:inherit; font-size:.75rem; background:#fff2; color:#fff; border:0; padding:3px 8px; margin-left:4px; cursor:pointer; }
.buyN button.on { background:#9acd32; color:#000; }
.shopSec { margin:10px 0 4px; opacity:.7; text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; }
.none { opacity:.6; padding:4px 0; }
.gen, .up { display:grid; width:100%; margin-bottom:4px; padding:7px 9px; border:0; color:#fff; font:inherit; text-align:left;
            background:#2c3a1a; cursor:pointer; gap:0 8px; }
.gen { grid-template-columns:1fr auto; }
.gen .gname { font-weight:700; }
.gen .gown { text-align:right; opacity:.8; }
.gen .gcost { color:#c9f27a; }
.gen .grate { text-align:right; opacity:.6; font-size:.75rem; }
.up { grid-template-columns:1fr auto; background:#3a3218; }
.up .ucost { color:#ffe27a; }
.up .udesc { grid-column:1 / -1; opacity:.7; font-size:.75rem; }
.gen.off, .up.off { opacity:.45; }
.gen:not(.off):hover, .up:not(.off):hover { filter:brightness(1.25); }
.shopFoot { margin-top:12px; display:flex; gap:6px; }
.shopFoot button { font:inherit; font-size:.75rem; background:#fff2; color:#fff; border:0; padding:4px 10px; cursor:pointer; }

/* Floating gain text, golden cloud */
.float { position:fixed; z-index:4; pointer-events:none; color:#fff; font-weight:700; text-shadow:2px 2px 0 #0008; }
.golden { position:fixed; z-index:5; width:clamp(56px,11vmin,84px); aspect-ratio:1; border:0; border-radius:50%;
          background:center/contain no-repeat; cursor:pointer;
          transform:translate(-50%,-50%); animation:goldenLife 13s linear forwards; }
@keyframes goldenLife { 0% { opacity:0; } 4% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; } }

/* Poop */
#poops { position:absolute; inset:0; z-index:2; pointer-events:none; }
.poop img { display:block; width:100%; height:100%; user-select:none; -webkit-user-drag:none; }
.poop { position:absolute; width:34px; height:30px; padding:0; border:0; background:none; cursor:pointer; pointer-events:auto; }

/* Left panels: clips, about */
.leftPanel { top:calc(max(12px, env(safe-area-inset-top)) + 36px); left:12px; width:min(300px,86vw); max-height:70vh; overflow-y:auto;
             background:#000d; color:#fff; padding:10px 14px; font-size:.8rem; line-height:1.45; }
.leftPanel p { margin:6px 0; }
.leftPanel a { color:#c9f27a; }
.leftPanel .small { opacity:.7; }
.leftPanel .row { align-items:center; gap:8px; padding:3px 0; }
.leftPanel .row input[type=range] { flex:1; }
.leftPanel .clip { align-items:center; gap:6px; padding:3px 0; }
.leftPanel .clip span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leftPanel button, .pick { font:inherit; font-size:.75rem; background:#fff2; color:#fff; border:0; padding:3px 8px; cursor:pointer; }
.pick { display:inline-block; margin:4px 0 6px; padding:5px 10px; }
.check { display:flex; gap:8px; align-items:center; margin:6px 0; }
.up.own { background:#2c3a1a; }
#notice { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom, 0px)); z-index:4;
          width:min(92vw,520px); background:#000d; color:#fff; padding:8px 12px; font-size:.75rem; display:flex; gap:8px; align-items:center; }
#notice span { flex:1; }
#notice button { font:inherit; font-size:.75rem; background:#fff2; color:#fff; border:0; padding:4px 10px; cursor:pointer; }
#dropHint { position:fixed; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; pointer-events:none;
            background:#000a; color:#fff; font-size:clamp(1.2rem,4vw,2rem); font-weight:700; }

/* Weather: clouds and dimming live in the sky box, fog and rain/snow over the scene */
#clouds, #dim { position:absolute; inset:0; pointer-events:none; }
#dim { background:#0b1230; opacity:0; transition:opacity 4s; }
.cloud { position:absolute; left:-30%; filter:brightness(var(--cloud-b,1)); animation:cloudDrift linear infinite; user-select:none; -webkit-user-drag:none; }
@keyframes cloudDrift { from { transform:translateX(0); } to { transform:translateX(160vw); } }
#fog { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 4s;
       background:linear-gradient(rgba(220,228,236,.65), rgba(220,228,236,.25)); }
#weatherCanvas { position:absolute; inset:0; z-index:1; pointer-events:none; }

/* Achievements and ascension */
#statsPanel { max-height:70vh; overflow-y:auto; }
.ach { display:flex; flex-direction:column; padding:3px 0; opacity:.45; }
.ach.on { opacity:1; }
.ach .adesc { font-size:.7rem; opacity:.7; }
.ascend { margin-top:4px; padding:8px 10px; background:#2a2250; }
.ascend b { color:#d9c8ff; }
.ascend button { margin-top:6px; width:100%; font:inherit; font-size:.8rem; background:#6a4fd0; color:#fff; border:0; padding:6px; cursor:pointer; }
.ascend button:disabled { opacity:.4; cursor:default; }

/* About corner button, dialogs (about, admin) */
.cornerBtn { position:fixed; top:max(12px, env(safe-area-inset-top)); left:12px; z-index:5; background:#0006; color:#fff; border:0;
             padding:6px 12px; font:inherit; font-size:.8rem; cursor:pointer; opacity:.8; }
#modalBackdrop { position:fixed; inset:0; z-index:8; background:#0008; }
.modal { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:9; width:min(92vw,520px); max-height:84vh; overflow-y:auto;
         background:#0b0f1ae6; color:#fff; padding:12px 16px; font-size:.8rem; line-height:1.45; }
.modal p { margin:6px 0; }
.modal a { color:#c9f27a; }
.modal .small { opacity:.7; }
.modal .shopHead button, .modal .row button, .modal form button { font:inherit; font-size:.75rem; background:#fff2; color:#fff; border:0; padding:4px 10px; cursor:pointer; }
.modal .row { display:flex; align-items:center; gap:6px; padding:3px 0; }
.modal .row.wrap { flex-wrap:wrap; }
.modal .row span { flex:1; }
.modal input, .modal select { font:inherit; font-size:.8rem; background:#fff1; color:#fff; border:1px solid #fff3; padding:4px 6px; min-width:0; }
.modal select option { color:#000; }
.modal .check { display:flex; gap:8px; align-items:center; margin:6px 0; }

.linkBtn { font:inherit; font-size:.8rem; background:none; border:0; color:#c9f27a; text-decoration:underline; cursor:pointer; padding:0; }
.modal label { opacity:.85; }
:focus-visible { outline:2px solid #c9f27a; outline-offset:2px; }
.modal .row label { flex:1; }

/* Narrow screens: keep the title clear of the button row */
@media (max-width:640px) {
  h1 { margin-top:48px; }
  #bank { top:140px; }
  #combo { top:214px; }
}