:root{
  --beta-glow:rgba(183,243,74,.18);
  --beta-orange:rgba(255,116,37,.22);
  --env-rain:.42;
  --env-window:1;
  --env-lamp:1;
  --env-sky:#08100c;
  --env-road:#202925;
  --env-ambient:#33453a;
}

/* The world owns the screen. The phone is an instrument panel, not a SaaS dashboard. */
.layout{grid-template-columns:minmax(0,1fr) 360px}
.phone{box-shadow:-22px 0 64px rgba(0,0,0,.28)}
.phone-top{background:rgba(8,11,9,.985);font-weight:800}
.quest{padding-top:18px;padding-bottom:16px}
.quest h1{font-size:25px;line-height:1;margin:7px 0 8px}
.quest p{font-size:10px;line-height:1.45;margin-bottom:12px}
.money strong{font-size:34px}.money span{font-size:16px}
.section{padding-top:14px;padding-bottom:14px}
.section button{min-height:42px}
.action-grid button{margin-top:5px}
.guide-grid{gap:6px}
.guide-card{cursor:pointer}
.guide-card:hover{border-color:#505b51}
.guide-card.active .guide-portrait{box-shadow:0 0 0 1px rgba(183,243,74,.18),0 0 22px rgba(183,243,74,.08)}

/* Atmosphere lives above Phaser but below interaction/UI. */
.world-atmosphere{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.72}
.rain{position:absolute;inset:-20%;background-image:repeating-linear-gradient(106deg,transparent 0 15px,rgba(178,204,184,.11) 16px,transparent 17px 34px);background-size:54px 54px;transform:translate3d(0,0,0);animation:rainDrift 5.8s linear infinite}
.rain-a{opacity:var(--env-rain)}
.rain-b{opacity:.18;background-size:78px 78px;animation-duration:8.6s;transform:translateX(26px)}
.city-glow{position:absolute;width:42vw;height:42vw;border-radius:50%;filter:blur(44px);opacity:.22}
.glow-a{left:-10%;bottom:-30%;background:radial-gradient(circle,rgba(255,116,37,.38),transparent 68%)}
.glow-b{right:-12%;top:-22%;background:radial-gradient(circle,rgba(183,243,74,.2),transparent 70%)}
.film-grain{position:absolute;inset:0;opacity:.12;background-image:radial-gradient(circle at 10% 10%,#fff 0 .5px,transparent .7px),radial-gradient(circle at 60% 35%,#fff 0 .45px,transparent .65px),radial-gradient(circle at 25% 70%,#fff 0 .4px,transparent .6px);background-size:9px 11px,13px 15px,17px 19px;mix-blend-mode:soft-light}
.city-build-note{position:absolute;left:18px;bottom:13px;z-index:4;font-size:6px;letter-spacing:.12em;color:#778078;background:rgba(5,8,6,.78);border-left:2px solid var(--orange);padding:6px 8px;pointer-events:none}
#game-root:before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--env-sky) 24%,transparent),transparent 42%);mix-blend-mode:multiply;opacity:.42}
#game-root:after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,10,7,.02),rgba(2,6,4,.15) 55%,rgba(0,0,0,.25)),radial-gradient(circle at 52% 53%,transparent 0 45%,rgba(0,0,0,.22) 100%)}
#game-root canvas{transition:filter .8s ease}

/* One East Side, multiple Toronto moods. QA can freeze these with ?phase=. */
html[data-phase="day"] #game-root canvas{filter:brightness(1.2) saturate(.86) contrast(.94)}
html[data-phase="day"] .world-atmosphere{opacity:.23;mix-blend-mode:soft-light}
html[data-phase="day"] .rain{opacity:.035}
html[data-phase="day"] .city-glow{opacity:.06}
html[data-phase="day"] .film-grain{opacity:.055}
html[data-phase="day"] #game-root:before{background:linear-gradient(180deg,rgba(190,204,174,.18),rgba(255,246,207,.04) 45%,transparent 70%);mix-blend-mode:screen;opacity:.85}
html[data-phase="dawn"] #game-root canvas{filter:brightness(1.04) saturate(.93) sepia(.06)}
html[data-phase="golden"] #game-root canvas{filter:brightness(.98) saturate(1.02) sepia(.08)}
html[data-phase="evening"] #game-root canvas{filter:brightness(.86) saturate(1.04) contrast(1.08)}
html[data-phase="night"] #game-root canvas{filter:brightness(.76) saturate(1.14) contrast(1.16)}
html[data-phase="night"] .world-atmosphere{opacity:.9}
html[data-phase="night"] .city-glow{opacity:.35}
html[data-phase="night"] .film-grain{opacity:.15}
html[data-phase="night"] #game-root:before{background:linear-gradient(180deg,rgba(4,11,8,.12),rgba(1,4,3,.26));mix-blend-mode:multiply;opacity:.9}

/* Give the HUD a slightly more physical instrument-panel hierarchy. */
.bar:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--lime) 22%,transparent 44%,transparent);opacity:.16;pointer-events:none}
.hud div{position:relative;padding-left:10px}
.hud div:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:#293029}
.hud div:first-child:before{background:var(--lime);opacity:.45}
.game-meta{box-shadow:0 8px 20px rgba(0,0,0,.12)}

/* Adult beta entry. Deliberately feels like entering a world, not a signup form. */
.entry-gate{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 70% 18%,rgba(183,243,74,.08),transparent 31%),radial-gradient(circle at 12% 82%,rgba(255,116,37,.09),transparent 34%),rgba(4,7,5,.94);backdrop-filter:blur(16px);transition:opacity .2s ease,transform .2s ease}
.entry-gate[hidden]{display:none}
.entry-gate.leaving{opacity:0;transform:scale(1.012);pointer-events:none}
.entry-card{width:min(520px,100%);position:relative;overflow:hidden;padding:30px;border:1px solid #3b443c;background:linear-gradient(180deg,rgba(19,25,20,.98),rgba(10,14,11,.99));box-shadow:0 38px 120px rgba(0,0,0,.72),0 0 0 1px rgba(183,243,74,.025) inset}
.entry-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0 72%,rgba(183,243,74,.035) 72% 73%,transparent 73%),repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.012) 28px)}
.entry-card>*{position:relative;z-index:1}
.entry-signal{display:flex;align-items:center;gap:9px;margin-bottom:25px;color:var(--lime);font-size:8px;letter-spacing:.12em}
.entry-signal .lock{display:inline-grid;place-items:center;min-width:38px;height:25px;border:1px solid #668531;background:rgba(183,243,74,.055);font-size:10px;font-weight:900}
.entry-card>small{display:block;color:#697169;font-size:8px;letter-spacing:.14em}
.entry-card h1{font-family:ui-sans-serif,system-ui,sans-serif;font-size:43px;line-height:.94;letter-spacing:-.065em;margin:9px 0 12px}
.entry-card>p{font-family:ui-sans-serif,system-ui,sans-serif;color:#969e95;font-size:12px;line-height:1.55;margin:0 0 20px}
.entry-field{display:grid;gap:7px;margin:20px 0 14px}
.entry-field>span{font-size:7px;letter-spacing:.13em;color:#7b847a}
.entry-field input{height:48px;border:1px solid #3b433c;background:#0b0f0c;color:var(--paper);padding:0 13px;outline:none;font-size:12px}
.entry-field input:focus{border-color:#71923a;box-shadow:0 0 0 3px rgba(183,243,74,.04)}
.entry-check{display:grid;grid-template-columns:19px minmax(0,1fr);gap:10px;align-items:start;padding:12px 0;border-top:1px solid #282f29;cursor:pointer}
.entry-check input{margin:2px 0 0;accent-color:#b7f34a;width:15px;height:15px}
.entry-check span{display:grid;gap:4px}
.entry-check strong{font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;color:#d8dcd3}
.entry-check em{font-style:normal;font-family:ui-sans-serif,system-ui,sans-serif;font-size:9px;line-height:1.45;color:#717a70}
.enter-beta{width:100%;height:50px;border:1px solid #86ad3d;background:var(--lime);color:#0a0e0b;margin-top:10px;font-weight:950;font-size:10px;letter-spacing:.08em;cursor:pointer;box-shadow:0 12px 30px rgba(183,243,74,.08)}
.enter-beta:disabled{background:#202620;border-color:#363d36;color:#626a62;box-shadow:none;cursor:not-allowed}
.entry-card .entry-foot{font-size:8px;line-height:1.5;color:#5e675e;margin:12px 0 0}

@keyframes rainDrift{from{transform:translate3d(-10px,-16px,0)}to{transform:translate3d(48px,70px,0)}}

@media(max-width:1180px){.layout{grid-template-columns:minmax(0,1fr) 350px}}

@media(max-width:900px){
  .world-atmosphere{opacity:.58}
  .city-build-note{left:10px;bottom:7px;max-width:58%;font-size:5px;line-height:1.45}
  .world-truth{bottom:29px}
  .mobile-nav{grid-template-columns:repeat(5,1fr)}
  .mobile-nav button{font-size:6px;letter-spacing:.07em}
  .mobile-nav button span{font-size:16px}
  .phone{top:42dvh;bottom:calc(65px + var(--safe-bottom));height:auto;max-height:none;border-radius:0;border-left:0;border-right:0;box-shadow:0 -18px 55px rgba(0,0,0,.72);transform:translateY(calc(100% + 70px));padding-bottom:14px}
  .phone.open{transform:translateY(0)}
  .phone-top{height:38px;border-radius:0}
  .quest{padding:13px 15px 12px}.quest h1{font-size:22px}.quest p{display:none}.money strong{font-size:29px}.money span{font-size:14px}
  .section{padding:12px 15px}.section button{min-height:44px}.action-grid button em{display:none}
  .guide-grid{grid-template-columns:1fr 1fr}.guide-card{grid-template-columns:38px minmax(0,1fr)}.guide-portrait{width:38px;height:38px}
  .entry-gate{padding:0;align-items:end}
  .entry-card{width:100%;max-height:92dvh;overflow:auto;border-left:0;border-right:0;border-bottom:0;border-radius:20px 20px 0 0;padding:25px 18px calc(22px + env(safe-area-inset-bottom,0px))}
  .entry-card h1{font-size:37px}
  .entry-card>p{font-size:11px}
  .entry-field input{height:50px;font-size:16px}
  .entry-check{padding:13px 0}.entry-check strong{font-size:12px}.entry-check em{font-size:10px}
  .enter-beta{height:54px}
}

@media(max-width:430px){
  .phone{top:40dvh}
  .world-title{display:none}
  .city-build-note{display:none}
}

@media(prefers-reduced-motion:reduce){.rain{animation:none}}