:root {
  --u: 2px;              /* one world unit in CSS pixels, set by main.js */
  --ink: #12203f;        /* PTIA navy ink */
  --paper: #f3eee3;      /* character-sheet cream */
  --sticky: #f7e27c;     /* sticky-note yellow */
  --teal: #2ec4b6;
  --orange: #f39237;
  --red: #e2483d;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #070b16; overflow: hidden; }
body { display: grid; place-items: center; font-family: 'Fredoka', system-ui, sans-serif; color: var(--paper); user-select: none; -webkit-user-select: none; touch-action: none; }
#stage { position: relative; overflow: hidden; background: #000; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
h1, h2, .big, .logo, #menuItems, .popup, #flash, td:first-child { font-family: 'Luckiest Guy', 'Fredoka', sans-serif; font-weight: normal; letter-spacing: .03em; }

/* ---------------------------------------------------------------- HUD */
#hud { position: absolute; left: 0; right: 0; top: 0; display: none; justify-content: space-between; align-items: flex-start;
  padding: calc(var(--u) * 6) calc(var(--u) * 10); gap: calc(var(--u) * 8); font-size: calc(var(--u) * 9); pointer-events: none;
  background: linear-gradient(rgba(10, 16, 34, .55), rgba(10, 16, 34, 0)); }
#hud.show { display: flex; }
#hud .cell { display: flex; flex-direction: column; gap: calc(var(--u) * 2); align-items: flex-start; text-shadow: 0 calc(var(--u) * 1) 0 var(--ink), 0 0 calc(var(--u) * 3) rgba(0,0,0,.6); }
#hud small { font-size: calc(var(--u) * 6); font-weight: 700; color: var(--sticky); letter-spacing: .08em; }
#hud .big { font-size: calc(var(--u) * 12); line-height: 1; }
#hud b { font-weight: normal; }
#hud .who { flex-direction: row; align-items: center; gap: calc(var(--u) * 5); }
#hud .face { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; overflow: hidden; background: var(--paper);
  border: calc(var(--u) * 2) solid var(--ink); box-shadow: 0 0 0 calc(var(--u) * 1) var(--teal); display: block; position: relative; }
#hud .face { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
#hud .face img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
#hud .ic { height: calc(var(--u) * 11); vertical-align: middle; margin-right: calc(var(--u) * 1); }
#hearts img { height: calc(var(--u) * 13); margin-right: calc(var(--u) * 1); filter: drop-shadow(0 calc(var(--u) * 1) 0 var(--ink)); transition: .2s; }
#hearts img.empty { filter: grayscale(1) brightness(.45); opacity: .7; }
#tokens { display: flex; gap: calc(var(--u) * 2); }
#tokens img { height: calc(var(--u) * 12); filter: grayscale(1) brightness(.5); opacity: .6; transition: .3s; }
#tokens img.got { filter: drop-shadow(0 0 calc(var(--u) * 2) #fff); opacity: 1; transform: scale(1.12); }
#time.hurry { color: var(--red); animation: blink .5s steps(2) infinite; }
#powers { position: absolute; left: calc(var(--u) * 10); top: calc(var(--u) * 40); display: flex; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 7); font-weight: 700; }
#powers span { display: flex; align-items: center; gap: calc(var(--u) * 3); background: rgba(18, 32, 63, .7); padding: calc(var(--u) * 2) calc(var(--u) * 5); border-radius: calc(var(--u) * 8); border: calc(var(--u) * 1) solid var(--teal); }
#powers img { height: calc(var(--u) * 13); }
#powers .charge { color: var(--teal); animation: blink .3s steps(2) infinite; }

/* ---------------------------------------------------------------- bubbles, popups, banners, fade */
#bubbles, #popups { position: absolute; inset: 0; pointer-events: none; }
.bubble { position: absolute; transform: translate(-50%, 0); max-width: calc(var(--u) * 180); width: max-content;
  padding: calc(var(--u) * 4) calc(var(--u) * 7); background: #fff; color: var(--ink); font-size: calc(var(--u) * 7.5); font-weight: 600; line-height: 1.3;
  border: calc(var(--u) * 1.6) solid var(--ink); border-radius: calc(var(--u) * 12); opacity: 0; transition: opacity .15s; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--u) * -7); transform: translateX(-50%);
  border: calc(var(--u) * 5) solid transparent; border-top: calc(var(--u) * 5) solid var(--ink); }
.bubble.show { opacity: 1; }
.bubble b { color: #1d4fbf; }
.bubble.stan b { color: #5b2a9a; } .bubble.chard b { color: #8a5a1c; } .bubble.synthia b { color: #7b3fe4; } .bubble.gene b { color: #2f6f8f; }
.bubble.synthia { background: #f2ecff; }
.popup { position: absolute; transform: translate(-50%, 0); font-size: calc(var(--u) * 10); color: #fff;
  text-shadow: 0 calc(var(--u) * 1.5) 0 var(--ink); animation: rise .9s ease-out forwards; white-space: nowrap; }
.popup.big { font-size: calc(var(--u) * 17); color: var(--sticky); }
@keyframes rise { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 calc(var(--u) * -28); } }
#flash { position: absolute; left: 50%; top: calc(var(--u) * 58); transform: translate(-50%, calc(var(--u) * -8)) rotate(-1.5deg); opacity: 0;
  font-size: calc(var(--u) * 10); padding: calc(var(--u) * 5) calc(var(--u) * 10); background: var(--sticky); color: var(--ink);
  box-shadow: calc(var(--u) * 2) calc(var(--u) * 3) 0 rgba(0,0,0,.35); white-space: nowrap; transition: .25s; pointer-events: none; }
#flash.show { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); }
#fade { position: absolute; inset: 0; background: #050810; opacity: 0; pointer-events: none; transition: opacity .3s; }
#fade.on { opacity: 1; }

/* ---------------------------------------------------------------- screens */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 9);
  text-align: center; font-size: calc(var(--u) * 9); font-weight: 600; line-height: 1.4; padding: calc(var(--u) * 14); }
.screen.show { display: flex; }
#loading, #splash, #intro, #gameover { background: radial-gradient(circle at 50% 45%, #1b2c55, #070b16 70%); }
h1, h2 { margin: 0; }
h1 { font-size: calc(var(--u) * 26); }
h2 { font-size: calc(var(--u) * 20); color: var(--sticky); text-shadow: 0 calc(var(--u) * 2) 0 var(--ink); }
p { margin: 0; }
.dim { color: #8e9bc0; font-size: calc(var(--u) * 6.5); }
.tag { color: var(--teal); font-weight: 700; }
.note { background: var(--sticky); color: var(--ink); padding: calc(var(--u) * 5) calc(var(--u) * 10); transform: rotate(-1.5deg);
  box-shadow: calc(var(--u) * 2) calc(var(--u) * 3) 0 rgba(0,0,0,.35); max-width: calc(var(--u) * 360); font-size: calc(var(--u) * 9); }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.bar { width: calc(var(--u) * 220); height: calc(var(--u) * 10); border: calc(var(--u) * 2) solid var(--teal); border-radius: calc(var(--u) * 6); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--orange)); }
.portalbg { position: absolute; width: calc(var(--u) * 300); height: calc(var(--u) * 300); border-radius: 50%; top: 50%; left: 50%; translate: -50% -50%;
  background: url(assets/sprites/portal.webp) center / contain no-repeat; opacity: .28; animation: spin 14s linear infinite; z-index: -1; }
.screen { isolation: isolate; }
@keyframes spin { to { rotate: -360deg; } }

.logo { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4); }
.logo span { font-size: calc(var(--u) * 58); color: var(--ink); -webkit-text-stroke: calc(var(--u) * 2.5) var(--paper); paint-order: stroke fill;
  text-shadow: calc(var(--u) * 3) calc(var(--u) * 4) 0 rgba(0,0,0,.4); line-height: .95; }
.logo em { font-style: normal; font-size: calc(var(--u) * 13); background: var(--ink); border: calc(var(--u) * 2) solid var(--paper); padding: calc(var(--u) * 4) calc(var(--u) * 10); color: var(--paper); border-radius: calc(var(--u) * 6); }

.panel { background: var(--paper); color: var(--ink); border: calc(var(--u) * 2.5) solid var(--ink); border-radius: calc(var(--u) * 10);
  box-shadow: calc(var(--u) * 4) calc(var(--u) * 5) 0 rgba(0,0,0,.4); padding: calc(var(--u) * 10) calc(var(--u) * 16);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 7); }
.panel h2 { color: var(--ink); text-shadow: none; }
.panel.wide { min-width: calc(var(--u) * 440); }
table { border-collapse: collapse; font-size: calc(var(--u) * 8); }
td { padding: calc(var(--u) * 2.5) calc(var(--u) * 7); text-align: left; }
td:first-child { text-align: right; color: #5b2a9a; font-size: calc(var(--u) * 9); }

#menu { justify-content: flex-end; padding-bottom: calc(var(--u) * 10); }
.panel.menu { padding: calc(var(--u) * 6) calc(var(--u) * 16); flex-direction: row; }
#menuItems { list-style: none; margin: 0; padding: 0; display: flex; gap: calc(var(--u) * 20); font-size: calc(var(--u) * 14); }
#menuItems li { cursor: pointer; display: flex; align-items: center; gap: calc(var(--u) * 4); color: #7d86a6; white-space: nowrap; }
#menuItems li img { height: calc(var(--u) * 15); visibility: hidden; }
#menuItems li.sel { color: var(--ink); }
#menuItems li.sel img { visibility: visible; animation: bob .6s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(calc(var(--u) * -2)) rotate(-8deg); } }
#menu .hi { position: absolute; top: calc(var(--u) * 8); right: calc(var(--u) * 12); font-size: calc(var(--u) * 8); color: var(--sticky); font-family: 'Luckiest Guy'; text-shadow: 0 calc(var(--u) * 1) 0 var(--ink); }
#menu .hi b { color: #fff; font-weight: normal; }
#menu .foot { width: 100%; display: flex; justify-content: space-between; font-size: calc(var(--u) * 6.5); color: #b7c1de; }

#controls { background: rgba(6, 10, 22, .65); }
.legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 5) calc(var(--u) * 12); font-size: calc(var(--u) * 7); text-align: left; }
.legend span { display: flex; align-items: center; gap: calc(var(--u) * 4); }
.legend img { height: calc(var(--u) * 18); width: calc(var(--u) * 18); object-fit: contain; }

#intro h2 { font-size: calc(var(--u) * 26); }
#intro .lives { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 16); font-family: 'Luckiest Guy'; }
#intro .lives img { height: calc(var(--u) * 80); }
#clear { background: rgba(6, 10, 22, .5); }
.stack img { height: calc(var(--u) * 13); vertical-align: middle; margin-left: calc(var(--u) * 2); filter: grayscale(1) brightness(.5); }
.stack img.got { filter: none; }
.go { color: var(--red); -webkit-text-stroke: calc(var(--u) * 1.5) var(--paper); paint-order: stroke fill; font-size: calc(var(--u) * 40); }

.overlay { position: absolute; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.45); }
.overlay.show { display: grid; }

/* ---------------------------------------------------------------- touch */
#touch { display: none; }
body.touch #touch { display: block; }
#touch button { position: absolute; bottom: calc(var(--u) * 10); width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%;
  background: rgba(255,255,255,.16); border: calc(var(--u) * 2) solid rgba(255,255,255,.45); color: #fff; font: inherit; font-family: 'Luckiest Guy'; font-size: calc(var(--u) * 13); touch-action: none; }
#touch button.on { background: rgba(46,196,182,.5); }
#touch [data-a=left] { left: calc(var(--u) * 10); }
#touch [data-a=right] { left: calc(var(--u) * 112); }
#touch .dn { left: calc(var(--u) * 61); bottom: calc(var(--u) * 4); width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
#touch .a { right: calc(var(--u) * 10); bottom: calc(var(--u) * 30); }
#touch .b { right: calc(var(--u) * 62); bottom: calc(var(--u) * 8); }
#touch .c { right: calc(var(--u) * 114); bottom: calc(var(--u) * 8); font-size: calc(var(--u) * 9); }
#touch .small { width: calc(var(--u) * 28); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 5); top: calc(var(--u) * 54); right: calc(var(--u) * 8); bottom: auto; font-size: calc(var(--u) * 8); }

/* site-nav:start (stripped from the downloadable copy) */
.site-back {
  position: fixed; left: 12px; bottom: 12px; z-index: 50; padding: 6px 12px; border-radius: 8px;
  font: 600 13px "Fredoka", system-ui, sans-serif; color: var(--ink); text-decoration: none;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 3px 0 rgba(0,0,0,.35);
}
.site-back:hover { background: var(--sticky); }
.site-back:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
body.touch .site-back { bottom: auto; top: 12px; left: auto; right: 12px; }
/* site-nav:end */