:root {
  --s: 1;              /* CSS px per logical game px, set by main.js */
  --ink: #06243b;
  --gold: #ffd23f;
  --gold-dk: #e08a00;
  --sea: #0b4f7c;
  --foam: #e9fbff;
  --coral: #ff6b8b;
  --font: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #021626;
  font-family: var(--font);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#stage {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 720px;
  overflow: hidden;
  border-radius: calc(var(--s) * 10px);
  box-shadow: 0 0 60px rgba(0, 0, 0, .6);
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
#game.playing { cursor: none; }
.hidden { display: none !important; }

/* ---------- shared screens ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--foam);
  font-size: calc(var(--s) * 22px);
}
button { font-family: var(--font); cursor: pointer; }
.bigbtn {
  font-size: calc(var(--s) * 34px); font-weight: 800;
  padding: calc(var(--s) * 6px) calc(var(--s) * 38px) calc(var(--s) * 2px);
  margin: calc(var(--s) * 8px);
  min-width: calc(var(--s) * 280px);
  color: #5a2a00;
  background: linear-gradient(#fff3a6, var(--gold) 45%, var(--gold-dk));
  border: calc(var(--s) * 4px) solid #fff7c9;
  border-radius: 999px;
  box-shadow: 0 calc(var(--s) * 6px) 0 #a85d00, 0 calc(var(--s) * 10px) calc(var(--s) * 24px) rgba(0,0,0,.45);
  transition: transform .12s;
}
.bigbtn:hover, .bigbtn:focus-visible { transform: translateY(calc(var(--s) * -3px)) scale(1.03); outline: none; }
.bigbtn:active { transform: translateY(calc(var(--s) * 3px)); box-shadow: 0 calc(var(--s) * 2px) 0 #a85d00; }
.bigbtn.alt {
  color: #e9fbff;
  background: linear-gradient(#5fd4ff, #1d8fd0 50%, #0b5f99);
  border-color: #bff0ff;
  box-shadow: 0 calc(var(--s) * 6px) 0 #063a61, 0 calc(var(--s) * 10px) calc(var(--s) * 24px) rgba(0,0,0,.45);
}
.smallbtn {
  font-size: calc(var(--s) * 24px); font-weight: 700;
  color: var(--foam);
  background: rgba(4, 40, 70, .65);
  border: calc(var(--s) * 3px) solid rgba(190, 240, 255, .55);
  border-radius: 999px;
  padding: calc(var(--s) * 2px) calc(var(--s) * 22px) 0;
}
.smallbtn:hover { background: rgba(20, 90, 140, .8); }
.smallbtn.mode { margin-top: calc(var(--s) * 8px); }
.mode-hint { font-size: calc(var(--s) * 18px); margin-top: calc(var(--s) * 4px); opacity: .9; text-shadow: 0 2px 4px #000; }
.map-tools { display: flex; align-items: center; gap: calc(var(--s) * 14px); }
.map-tools .smallbtn.mode { margin-top: 0; font-size: calc(var(--s) * 20px); }

/* ---------- title ---------- */
#title { background: radial-gradient(ellipse at 50% 40%, rgba(2, 30, 60, .0), rgba(2, 20, 40, .55)); }
.logo { text-align: center; line-height: .82; margin-bottom: calc(var(--s) * 26px); filter: drop-shadow(0 calc(var(--s) * 8px) calc(var(--s) * 10px) rgba(0,0,0,.5)); }
/* outline via stacked drop-shadows: -webkit-text-stroke draws the font's inner contours */
.logo-top, .logo-bot {
  font-weight: 800; letter-spacing: calc(var(--s) * 4px);
  --o: calc(var(--s) * 4px);
  filter: drop-shadow(var(--o) 0 0 #062a48) drop-shadow(calc(var(--o) * -1) 0 0 #062a48)
          drop-shadow(0 var(--o) 0 #062a48) drop-shadow(0 calc(var(--o) * -1) 0 #062a48);
}
.logo-top { font-size: calc(var(--s) * 116px); letter-spacing: calc(var(--s) * 10px); color: #bfe9ff;
  background: linear-gradient(#ffffff, #8fd8ff 55%, #2a8fd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-bot { font-size: calc(var(--s) * 132px); transform: rotate(-4deg); margin-top: calc(var(--s) * -6px);
  background: linear-gradient(#ffe36b, #ff9a1f 50%, #e8401c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-sub { font-size: calc(var(--s) * 36px); font-weight: 700; color: #fff; margin-top: calc(var(--s) * 18px); text-shadow: 0 calc(var(--s) * 3px) 0 #062a48; }
.menu { display: flex; flex-direction: column; align-items: center; }
.hint { position: absolute; bottom: calc(var(--s) * 18px); font-size: calc(var(--s) * 20px); opacity: .85; text-shadow: 0 2px 4px #000; }

/* ---------- map ---------- */
#map { justify-content: flex-start; padding: 0; }
#mapCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#mapNodes { position: absolute; inset: 0; }
.map-head { position: absolute; top: calc(var(--s) * 10px); left: calc(var(--s) * 16px); right: calc(var(--s) * 16px);
  display: flex; align-items: center; justify-content: space-between; }
.map-head h2 { margin: 0; font-size: calc(var(--s) * 40px); font-weight: 800; color: var(--gold); text-shadow: 0 calc(var(--s) * 3px) 0 #062a48, 0 0 calc(var(--s) * 8px) rgba(0,0,0,.4); }
.map-tools { display: flex; align-items: center; gap: calc(var(--s) * 12px); }
.map-score { text-align: right; font-size: calc(var(--s) * 20px); color: #062a48; font-weight: 700; }
.mnode {
  position: absolute; transform: translate(-50%, -50%);
  width: calc(var(--s) * 44px); height: calc(var(--s) * 44px); border-radius: 50%; padding: 0;
  font-size: calc(var(--s) * 19px); font-weight: 800; color: #0b3a66; line-height: 1;
  border: calc(var(--s) * 3px) solid #ffffff;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d6ecff 55%, #8fbde6);
  box-shadow: 0 calc(var(--s) * 3px) calc(var(--s) * 6px) rgba(0, 10, 30, .45);
}
.mnode:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.15); }
.mnode.done { color: #5a2a00; border-color: #fff7c9; background: radial-gradient(circle at 35% 30%, #fff8c4, var(--gold) 50%, var(--gold-dk)); }
.mnode.current { animation: nodePulse 1.2s ease-in-out infinite; border-color: #ffe14d; }
.mnode.boss { width: calc(var(--s) * 60px); height: calc(var(--s) * 60px); font-size: calc(var(--s) * 22px); color: #fff;
  background: radial-gradient(circle at 35% 30%, #ffd1d1, #ff5c5c 50%, #b3001b); }
.mnode:disabled { cursor: default; width: calc(var(--s) * 30px); height: calc(var(--s) * 30px); font-size: calc(var(--s) * 13px);
  color: rgba(255, 255, 255, .45); border-color: rgba(255, 255, 255, .3); background: rgba(6, 18, 40, .7); box-shadow: none; }
@keyframes nodePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 225, 77, .85); } 50% { box-shadow: 0 0 0 calc(var(--s) * 12px) rgba(255, 225, 77, 0); } }
.marker { position: absolute; width: calc(var(--s) * 84px); pointer-events: none; transform: translate(-50%, -118%);
  animation: bob 1.4s ease-in-out infinite; filter: drop-shadow(0 calc(var(--s) * 4px) calc(var(--s) * 4px) rgba(0,0,0,.4)); }
@keyframes bob { 0%, 100% { transform: translate(-50%, -118%); } 50% { transform: translate(-50%, -132%); } }

/* ---------- settings ---------- */
.card.wide { width: calc(var(--s) * 1080px); }
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--s) * 12px); margin: calc(var(--s) * 10px) 0; width: 100%; }
.mode-tile {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: calc(var(--s) * 2px);
  padding: calc(var(--s) * 12px) calc(var(--s) * 14px); border-radius: calc(var(--s) * 20px); color: var(--foam);
  background: rgba(4, 40, 70, .6); border: calc(var(--s) * 3px) solid rgba(190, 240, 255, .3);
}
.mode-tile:hover { background: rgba(20, 80, 130, .7); }
.mode-tile.sel { border-color: var(--gold); background: linear-gradient(rgba(60, 140, 200, .75), rgba(10, 60, 110, .8)); box-shadow: 0 0 calc(var(--s) * 18px) rgba(255, 210, 63, .5); }
.mode-tile b { font-size: calc(var(--s) * 30px); line-height: 1.05; color: var(--gold); }
.mode-tile small { font-size: calc(var(--s) * 17px); color: #9fe6ff; font-weight: 700; }
.mode-tile p { margin: calc(var(--s) * 4px) 0; font-size: calc(var(--s) * 16px); line-height: 1.25; }
.mode-tile em { font-size: calc(var(--s) * 15px); opacity: .85; margin-top: auto; }
.pips { display: flex; gap: calc(var(--s) * 4px); }
.pips i { width: calc(var(--s) * 12px); height: calc(var(--s) * 12px); border-radius: 50%; background: rgba(255,255,255,.2); }
.pips i.on { background: #ff7a5a; }
.setrow { display: flex; align-items: center; gap: calc(var(--s) * 14px); font-size: calc(var(--s) * 24px); margin: calc(var(--s) * 4px) 0; }
.card p.note { font-size: calc(var(--s) * 18px); opacity: .85; }
.welcome { font-size: calc(var(--s) * 34px); font-weight: 800; color: #fff3b0; margin-bottom: calc(var(--s) * 6px);
  text-shadow: 0 calc(var(--s) * 3px) 0 #062a48, 0 0 calc(var(--s) * 10px) rgba(0,0,0,.4); min-height: calc(var(--s) * 10px); }
.name-input {
  font-family: var(--font); font-weight: 800; text-align: center;
  font-size: max(16px, calc(var(--s) * 40px)); width: calc(var(--s) * 460px); margin: calc(var(--s) * 8px) 0;
  padding: calc(var(--s) * 8px) calc(var(--s) * 18px) calc(var(--s) * 4px);
  color: #062a48; background: #f2fbff; border: calc(var(--s) * 4px) solid var(--gold); border-radius: 999px;
  -webkit-user-select: text; user-select: text; touch-action: manipulation; outline: none;
}
.name-input:focus { box-shadow: 0 0 0 calc(var(--s) * 6px) rgba(255, 210, 63, .45); }
.pname { color: var(--gold); }
.resume-info { font-size: calc(var(--s) * 19px); margin: calc(var(--s) * -4px) 0 calc(var(--s) * 2px); text-shadow: 0 2px 4px #000; min-height: calc(var(--s) * 4px); }

/* ---------- cards ---------- */
#card { background: rgba(2, 18, 36, .45); }
.card {
  width: calc(var(--s) * 860px); max-height: 92%;
  padding: calc(var(--s) * 26px) calc(var(--s) * 40px) calc(var(--s) * 28px);
  border-radius: calc(var(--s) * 34px);
  background: linear-gradient(rgba(16, 104, 160, .94), rgba(6, 52, 96, .96));
  border: calc(var(--s) * 5px) solid rgba(190, 240, 255, .7);
  box-shadow: 0 calc(var(--s) * 18px) calc(var(--s) * 50px) rgba(0,0,0,.55), inset 0 0 calc(var(--s) * 40px) rgba(140, 220, 255, .25);
  text-align: center; color: var(--foam);
  display: flex; flex-direction: column; align-items: center;
  animation: pop .35s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.card .kicker { font-size: calc(var(--s) * 24px); font-weight: 700; color: #9fe6ff; letter-spacing: calc(var(--s) * 2px); text-transform: uppercase; }
.card h1 { margin: calc(var(--s) * 2px) 0 0; font-size: calc(var(--s) * 58px); line-height: 1.05; font-weight: 800; color: var(--gold); text-shadow: 0 calc(var(--s) * 4px) 0 #062a48; }
.card h1 small { display: block; font-size: calc(var(--s) * 24px); color: #cdeeff; font-style: italic; font-weight: 500; text-shadow: none; }
.card p { margin: calc(var(--s) * 8px) 0; font-size: calc(var(--s) * 26px); line-height: 1.3; }
.card p.tip { font-size: calc(var(--s) * 24px); color: #fff3b0; }
.card img.portrait.mini { height: calc(var(--s) * 84px); }
.card img.portrait:not(.mini) { height: calc(var(--s) * 200px); margin: calc(var(--s) * 4px) 0; filter: drop-shadow(0 calc(var(--s) * 10px) calc(var(--s) * 10px) rgba(0,0,0,.45)); }
.card .row { display: flex; gap: calc(var(--s) * 10px); justify-content: center; flex-wrap: wrap; margin-top: calc(var(--s) * 10px); }
.card .row .bigbtn { min-width: calc(var(--s) * 220px); font-size: calc(var(--s) * 30px); }
.stats { display: grid; grid-template-columns: auto auto; gap: calc(var(--s) * 2px) calc(var(--s) * 28px); font-size: calc(var(--s) * 28px); margin: calc(var(--s) * 8px) 0; text-align: left; }
.stats b { color: var(--gold); text-align: right; }
.legend { display: flex; gap: calc(var(--s) * 18px); justify-content: center; align-items: center; flex-wrap: wrap; margin: calc(var(--s) * 4px) 0; }
.legend figure { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: calc(var(--s) * 18px); }
.legend img { height: calc(var(--s) * 56px); }
.legend .no { color: #ff9a9a; }
.legend .yes { color: #a8ffbf; }

/* ---------- in-game buttons ---------- */
#hudbtns { position: absolute; right: calc(var(--s) * 14px); bottom: calc(var(--s) * 12px); display: flex; gap: calc(var(--s) * 10px); }
.iconbtn {
  width: calc(var(--s) * 54px); height: calc(var(--s) * 54px); border-radius: 50%;
  font-size: calc(var(--s) * 24px); font-weight: 800; color: #fff; padding: 0;
  background: rgba(4, 40, 70, .55); border: calc(var(--s) * 3px) solid rgba(190, 240, 255, .6);
}
.iconbtn.off { opacity: .45; text-decoration: line-through; }