:root {
  --u: 1px;               /* one logical game pixel, set from JS */
  --gold: #f2c14a;
  --gold-hi: #fff1b0;
  --gold-lo: #8a5a06;
  --jade: #2f9a5e;
  --jade-hi: #8fe8ac;
  --jade-lo: #0f4a2c;
  --stone: #3a2a18;
  --stone-hi: #5a4126;
  --ink: #fff4d6;
  --ink-dim: #e3cfa2;
  --bg: #0d1a10;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: radial-gradient(ellipse at center, #1d3322 0%, var(--bg) 70%);
  color: var(--ink);
  font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#stage {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--u) * 960);
  height: calc(var(--u) * 720);
  box-shadow: 0 0 calc(var(--u) * 40) rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
#cv, #gl { display: block; width: 100%; height: 100%; cursor: crosshair; }
#gl { position: absolute; inset: 0; }
#cv { position: relative; }

.hidden { display: none !important; }

#hudBtns { position: absolute; right: calc(var(--u) * 8); top: calc(var(--u) * 7); }
.iconbtn {
  width: calc(var(--u) * 38); height: calc(var(--u) * 38);
  border-radius: 50%;
  border: calc(var(--u) * 2) solid var(--gold);
  background: radial-gradient(circle at 35% 30%, var(--jade-hi), var(--jade) 45%, var(--jade-lo));
  display: grid; place-items: center; padding: 0; cursor: pointer;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0, 0, 0, 0.5);
}
.iconbtn svg { width: 55%; height: 55%; fill: #fff8e0; }
/* classic skin: the carved MENU plate in the top bar is the pause button */
.classic #hudBtns { right: calc(var(--u) * 26); top: calc(var(--u) * 2); }
.classic .iconbtn { width: calc(var(--u) * 88); height: calc(var(--u) * 31); border-radius: calc(var(--u) * 6); border: 0; background: transparent; box-shadow: none; }
.classic .iconbtn svg { display: none; }
.iconbtn:focus-visible, .btn:focus-visible, .chip:focus-visible, .card:focus-visible { outline: calc(var(--u) * 3) solid #fff; outline-offset: calc(var(--u) * 2); }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8, 14, 8, 0.55);
  animation: fade 0.25s ease-out;
}
#scrTitle { background: linear-gradient(180deg, rgba(5, 12, 6, 0.35), rgba(5, 12, 6, 0.65)); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.panel {
  position: relative;
  min-width: calc(var(--u) * 420);
  max-width: calc(var(--u) * 560);
  padding: calc(var(--u) * 26) calc(var(--u) * 34);
  border-radius: calc(var(--u) * 18);
  background:
    linear-gradient(180deg, rgba(255, 230, 170, 0.08), rgba(0, 0, 0, 0.2)),
    radial-gradient(ellipse at 30% 0%, var(--stone-hi), var(--stone) 70%);
  border: calc(var(--u) * 3) solid var(--gold);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 3) var(--gold-lo),
    inset 0 calc(var(--u) * 2) calc(var(--u) * 18) rgba(0, 0, 0, 0.5),
    0 calc(var(--u) * 10) calc(var(--u) * 40) rgba(0, 0, 0, 0.6);
  text-align: center;
}
.panel.wide { max-width: calc(var(--u) * 860); width: calc(var(--u) * 820); }
.panel::before, .panel::after {
  content: ""; position: absolute; top: calc(var(--u) * 10);
  width: calc(var(--u) * 14); height: calc(var(--u) * 14);
  background: radial-gradient(circle at 35% 35%, #ff8a7a, #c0261c 60%, #5a0a06);
  border-radius: 50%; border: calc(var(--u) * 2) solid var(--gold);
}
.panel::before { left: calc(var(--u) * 10); }
.panel::after { right: calc(var(--u) * 10); }

h1, h2, h3 { margin: 0; font-weight: 400; }
h2 {
  font-family: Bungee, "Arial Black", sans-serif;
  font-size: calc(var(--u) * 34);
  color: var(--gold);
  text-shadow: 0 calc(var(--u) * 3) 0 #4a2c02, 0 0 calc(var(--u) * 16) rgba(255, 200, 80, 0.35);
  letter-spacing: calc(var(--u) * 1);
}
h3 { font-size: calc(var(--u) * 20); font-weight: 800; color: var(--gold); margin: calc(var(--u) * 6) 0 calc(var(--u) * 4); }
.sub { font-size: calc(var(--u) * 18); color: var(--ink-dim); margin: calc(var(--u) * 6) 0 calc(var(--u) * 10); line-height: 1.35; }
.big {
  font-size: calc(var(--u) * 54); font-weight: 800; margin: calc(var(--u) * 6) 0 0;
  color: var(--gold-hi); text-shadow: 0 calc(var(--u) * 3) 0 #4a2c02;
}

.logo {
  font-family: Bungee, "Arial Black", sans-serif;
  font-size: calc(var(--u) * 84);
  line-height: 0.95;
  display: flex; flex-direction: column; align-items: center;
}
.logo span:first-child {
  background: linear-gradient(180deg, #e9fff0 0%, #7ee8a6 40%, #1f8a50 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(var(--u) * 4) 0 #0b3a20) drop-shadow(0 0 calc(var(--u) * 18) rgba(110, 240, 160, 0.45));
}
.logo span:last-child {
  background: linear-gradient(180deg, #fffbe0 0%, #f6c84a 45%, #a86e0a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(var(--u) * 4) 0 #4a2c02) drop-shadow(0 0 calc(var(--u) * 18) rgba(255, 200, 80, 0.4));
}
.tagline { font-size: calc(var(--u) * 21); color: var(--ink-dim); margin: calc(var(--u) * 8) 0 calc(var(--u) * 16); font-weight: 600; }

.menu { display: flex; flex-direction: column; gap: calc(var(--u) * 10); align-items: center; margin-top: calc(var(--u) * 14); }
.menu.row { flex-direction: row; justify-content: center; }
.btn {
  min-width: calc(var(--u) * 260);
  min-height: calc(var(--u) * 50);
  padding: calc(var(--u) * 8) calc(var(--u) * 26);
  font: 800 calc(var(--u) * 22) "Baloo 2", sans-serif;
  color: #fff8e6;
  border-radius: calc(var(--u) * 26);
  border: calc(var(--u) * 2) solid var(--gold);
  background: linear-gradient(180deg, #6b4a26, #3d2611);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 240, 200, 0.25), 0 calc(var(--u) * 4) 0 #1c1006, 0 calc(var(--u) * 6) calc(var(--u) * 12) rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.08s, filter 0.15s;
  text-shadow: 0 calc(var(--u) * 2) 0 rgba(0, 0, 0, 0.5);
}
.btn.primary { background: linear-gradient(180deg, #4fc884, #1f7a46 60%, #145a32); }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(calc(var(--u) * 3)); box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 240, 200, 0.25), 0 calc(var(--u) * 1) 0 #1c1006; }
.btn small { display: block; font-size: calc(var(--u) * 15); font-weight: 600; opacity: 0.9; line-height: 1.1; }

.toggles { display: flex; gap: calc(var(--u) * 10); justify-content: center; margin-top: calc(var(--u) * 14); }
.chip {
  font: 700 calc(var(--u) * 16) "Baloo 2", sans-serif;
  min-height: calc(var(--u) * 40);
  padding: calc(var(--u) * 6) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  border: calc(var(--u) * 2) solid rgba(242, 193, 74, 0.7);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  cursor: pointer;
}
.chip[aria-pressed="false"] { opacity: 0.6; text-decoration: line-through; }
.best { font-size: calc(var(--u) * 17); color: var(--ink-dim); margin: calc(var(--u) * 12) 0 0; min-height: 1em; }
.credit {
  position: absolute; bottom: calc(var(--u) * 10); left: 0; right: 0;
  text-align: center; font-size: calc(var(--u) * 14); color: rgba(255, 240, 210, 0.7); margin: 0;
}

/* temple progress */
.temples { display: flex; justify-content: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 16) 0 calc(var(--u) * 6); flex-wrap: wrap; }
.temple {
  width: calc(var(--u) * 138); padding: calc(var(--u) * 10) calc(var(--u) * 6) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 12);
  background: rgba(0, 0, 0, 0.3);
  border: calc(var(--u) * 2) solid rgba(242, 193, 74, 0.35);
}
.temple.current { border-color: var(--gold); box-shadow: 0 0 calc(var(--u) * 16) rgba(255, 210, 90, 0.35); }
.temple.locked { opacity: 0.45; }
.temple canvas { width: calc(var(--u) * 100); height: calc(var(--u) * 73); display: block; margin: 0 auto calc(var(--u) * 6); }
.temple .tname { font-size: calc(var(--u) * 16); font-weight: 800; color: var(--gold); line-height: 1.15; min-height: 2.3em; }
.stones { display: flex; justify-content: center; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 6); }
.stone {
  width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%;
  display: grid; place-items: center;
  font-size: calc(var(--u) * 15); font-weight: 800;
  background: #2a1d10; color: #8a7350; border: calc(var(--u) * 2) solid #5a4126;
}
.stone.done { background: radial-gradient(circle at 35% 30%, #fff1b0, var(--gold) 50%, var(--gold-lo)); color: #3a2205; border-color: #fff1b0; }
.stone.now { background: radial-gradient(circle at 35% 30%, var(--jade-hi), var(--jade) 50%, var(--jade-lo)); color: #fff; border-color: var(--gold); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 calc(var(--u) * 14) rgba(140, 240, 170, 0.9); } }

/* stats */
.stats { margin: calc(var(--u) * 14) auto 0; border-collapse: collapse; font-size: calc(var(--u) * 19); min-width: calc(var(--u) * 360); }
.stats td { padding: calc(var(--u) * 4) calc(var(--u) * 10); text-align: left; color: var(--ink-dim); }
.stats td:last-child { text-align: right; color: var(--gold-hi); font-weight: 800; }
.stats tr.total td { border-top: calc(var(--u) * 2) solid rgba(242, 193, 74, 0.4); font-size: calc(var(--u) * 23); color: var(--ink); }

/* gauntlet cards */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * 12); margin: calc(var(--u) * 10) 0; }
.card {
  padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 12);
  border: calc(var(--u) * 2) solid rgba(242, 193, 74, 0.5);
  background: rgba(0, 0, 0, 0.35); color: var(--ink);
  font: 700 calc(var(--u) * 16) "Baloo 2", sans-serif; cursor: pointer;
}
.card canvas { width: 100%; aspect-ratio: 4 / 3; display: block; border-radius: calc(var(--u) * 8); background: #241a0e; }
.card .cbest { display: block; font-size: calc(var(--u) * 13); color: var(--ink-dim); font-weight: 600; }
.card:hover { border-color: var(--gold); }
.card[disabled] { opacity: 0.4; cursor: not-allowed; }

/* players */
.hello { font-size: calc(var(--u) * 20); font-weight: 700; color: var(--ink); margin: calc(var(--u) * -6) 0 calc(var(--u) * 6); }
.link {
  font: 700 calc(var(--u) * 15) "Baloo 2", sans-serif; color: var(--jade-hi);
  background: none; border: 0; padding: calc(var(--u) * 4) calc(var(--u) * 6); cursor: pointer;
  text-decoration: underline; text-underline-offset: calc(var(--u) * 3);
}
.players { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 8) 0; max-height: calc(var(--u) * 300); overflow-y: auto; }
.pcard {
  position: relative; text-align: left;
  padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 12);
  border: calc(var(--u) * 2) solid rgba(242, 193, 74, 0.45); background: rgba(0, 0, 0, 0.35);
  color: var(--ink); cursor: pointer; font: 600 calc(var(--u) * 14) "Baloo 2", sans-serif; line-height: 1.3;
  min-height: calc(var(--u) * 74);
  width: calc(var(--u) * 240);
}
.pcard b { display: block; font-size: calc(var(--u) * 20); font-weight: 800; color: var(--gold); padding-right: calc(var(--u) * 30); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard span { display: block; color: var(--ink-dim); }
.pcard.current { border-color: var(--jade-hi); background: rgba(20, 70, 40, 0.45); box-shadow: 0 0 calc(var(--u) * 14) rgba(140, 240, 170, 0.35); }
.pcard .del {
  position: absolute; top: calc(var(--u) * 6); right: calc(var(--u) * 6);
  width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%;
  border: calc(var(--u) * 1.5) solid rgba(255, 140, 120, 0.6); background: rgba(80, 10, 6, 0.6); color: #ffcabd;
  font: 800 calc(var(--u) * 15) "Baloo 2", sans-serif; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.pcard.confirm { border-color: #ff8a6e; }
.pcard .ask { display: flex; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 6); }
.pcard .ask button { font: 800 calc(var(--u) * 14) "Baloo 2", sans-serif; padding: calc(var(--u) * 4) calc(var(--u) * 12); border-radius: calc(var(--u) * 14); border: 0; cursor: pointer; min-height: calc(var(--u) * 32); }
.pcard .ask .yes { background: #c0392b; color: #fff; }
.pcard .ask .no { background: rgba(255, 255, 255, 0.15); color: var(--ink); }
.addrow { display: flex; gap: calc(var(--u) * 10); justify-content: center; margin-top: calc(var(--u) * 6); }
.addrow input {
  width: calc(var(--u) * 360); min-height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 18); border-radius: calc(var(--u) * 26);
  border: calc(var(--u) * 2) solid var(--gold); background: rgba(0, 0, 0, 0.45); color: var(--ink);
  font: 700 calc(var(--u) * 20) "Baloo 2", sans-serif; outline: none; user-select: text; -webkit-user-select: text;
}
.addrow input:focus { box-shadow: 0 0 0 calc(var(--u) * 3) rgba(140, 240, 170, 0.6); }
.addrow .btn { min-width: calc(var(--u) * 120); }

/* settings */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 14); margin: calc(var(--u) * 6) 0 calc(var(--u) * 4); }
.mode {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 14);
  border: calc(var(--u) * 3) solid rgba(242, 193, 74, 0.35);
  background: rgba(0, 0, 0, 0.35); color: var(--ink); cursor: pointer;
  font: 600 calc(var(--u) * 15) "Baloo 2", sans-serif; line-height: 1.25;
}
.mode b { font-size: calc(var(--u) * 20); font-weight: 800; color: var(--gold); }
.mode em { font-style: normal; font-size: calc(var(--u) * 12); font-weight: 800; color: #10301c; background: var(--jade-hi); border-radius: calc(var(--u) * 10); padding: 0 calc(var(--u) * 8); margin-top: calc(var(--u) * -4); }
.mode span { color: var(--ink-dim); min-height: 2.5em; }
.mode canvas { width: 100%; aspect-ratio: 16 / 10; border-radius: calc(var(--u) * 8); background: #1a120a; }
.mode[aria-checked="true"] { border-color: var(--jade-hi); box-shadow: 0 0 calc(var(--u) * 18) rgba(140, 240, 170, 0.45); background: rgba(20, 70, 40, 0.45); }
.mode[disabled] { opacity: 0.45; cursor: not-allowed; }
.mode:focus-visible { outline: calc(var(--u) * 3) solid #fff; outline-offset: calc(var(--u) * 2); }
.sub.small { font-size: calc(var(--u) * 15); min-height: 1.3em; margin: calc(var(--u) * 4) 0; }

/* help */
.help .cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(var(--u) * 24); text-align: left; margin-top: calc(var(--u) * 10); }
.help ul { margin: 0; padding-left: calc(var(--u) * 20); font-size: calc(var(--u) * 16.5); line-height: 1.4; color: var(--ink); }
.help li { margin-bottom: calc(var(--u) * 4); }
.help .pows { list-style: none; padding: 0; }
.help .pows li { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 8); }
.powicon { width: calc(var(--u) * 44); height: calc(var(--u) * 44); flex: none; }

#rotate {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center; text-align: center;
  background: var(--bg); color: var(--ink); font-size: 20px; font-weight: 700;
}
#rotate svg { width: 64px; height: 64px; fill: var(--gold); animation: tilt 1.6s ease-in-out infinite; }
@keyframes tilt { 50% { transform: rotate(-90deg); } }

@media (prefers-reduced-motion: reduce) {
  .screen, .stone.now, #rotate svg { animation: none; }
  .btn { transition: none; }
}