/* Ei Gude, Wetzlar! The UI in the painted Clash look (2026-10-22): Lilita One for everything that shouts, Nunito Black
   for what you read, glossy rounded buttons with a dark outline and a 3D edge, navy panels with a gold rim, ribbons. */
:root {
  --u: 2px;
  --ink: #0b1026;
  --line: #10142a;
  --night: #161c3a;
  --gold: #f2c14e;
  --amber: #e8875b;
  --red: #e2302e;
  --cream: #f5ead2;
  --mute: #aab3d6;
  --purple: #c79bff;
  --display: "Lilita One", "Arial Black", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}
html, body {
  margin: 0;
  height: 100%;
  background: #05070f;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
body {
  box-sizing: border-box;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-weight: 800;
  color: var(--cream);
}
#stage {
  position: relative;
  width: calc(var(--u) * 270);
  height: calc(var(--u) * 480);
  overflow: hidden;
  background: var(--ink);
}
#c { position: absolute; inset: 0; width: 100%; height: 100%; }

/* outlined game type: a dark stroke behind the fill and a hard drop under it */
.ol, h1, h2, .btn, .card .nm, .rank, .score b, #board .s, #board .r, .tagline, .kick, .ribbon {
  -webkit-text-stroke: calc(var(--u) * 1.4) var(--line);
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * 1.3) 0 var(--line);
}

.ov {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 12);
  box-sizing: border-box;
  text-align: center;
}
.ov[hidden] { display: none; }
.ov.dim { background: radial-gradient(ellipse at 50% 40%, rgba(16, 22, 56, .72), rgba(5, 7, 18, .92)); }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
h2 { font-size: calc(var(--u) * 21); color: #fff; line-height: 1.05; }
.sub { margin: 0; font-size: calc(var(--u) * 9.6); line-height: 1.35; color: var(--cream); }
.rank { margin: 0; font-family: var(--display); font-size: calc(var(--u) * 14); color: var(--gold); }
.score { margin: 0; font-size: calc(var(--u) * 9.4); color: var(--mute); line-height: 1.5; }
.score b { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: calc(var(--u) * 21); }
.how { margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 8.6); line-height: 1.35; color: var(--mute); max-width: calc(var(--u) * 236); }

/* ribbon: the header strip of every panel */
.ribbon {
  position: relative;
  padding: calc(var(--u) * 4) calc(var(--u) * 18) calc(var(--u) * 5);
  background: linear-gradient(180deg, #5aa8ff 0%, #2f74e0 52%, #2160c4 53%, #1b4fa8 100%);
  border: calc(var(--u) * 1.4) solid var(--line);
  border-radius: calc(var(--u) * 5);
  box-shadow: inset 0 calc(var(--u) * 1.5) 0 rgba(255, 255, 255, .45), inset 0 calc(var(--u) * -2) 0 rgba(0, 0, 0, .25), 0 calc(var(--u) * 2) 0 var(--line);
  color: #fff;
  font-size: calc(var(--u) * 17);
}
.ribbon::before, .ribbon::after {   /* the folded ends */
  content: "";
  position: absolute;
  top: calc(var(--u) * 4);
  width: calc(var(--u) * 11);
  height: 100%;
  background: #1a3f86;
  border: calc(var(--u) * 1.4) solid var(--line);
}
.ribbon::before { left: calc(var(--u) * -11.5); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon::after { right: calc(var(--u) * -11.5); clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }

/* panel: navy with a gold rim, a soft light from the top */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 6);
  width: 100%;
  max-width: calc(var(--u) * 246);
  box-sizing: border-box;
  padding: calc(var(--u) * 18) calc(var(--u) * 12) calc(var(--u) * 13);
  margin-top: calc(var(--u) * 10);
  background: radial-gradient(ellipse at 50% 0%, rgba(110, 150, 255, .28), rgba(110, 150, 255, 0) 60%), linear-gradient(180deg, #24326e, #161f4a 70%, #121a3e);
  border: calc(var(--u) * 1.5) solid var(--line);
  border-radius: calc(var(--u) * 12);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.6) #d9a43a, inset 0 0 0 calc(var(--u) * 2.6) var(--line), inset 0 calc(var(--u) * 4) calc(var(--u) * 6) rgba(255, 255, 255, .08),
    0 calc(var(--u) * 3) 0 var(--line), 0 calc(var(--u) * 10) calc(var(--u) * 20) rgba(0, 0, 0, .55);
}
.panel.narrow { max-width: calc(var(--u) * 200); }
.panel > .ribbon:first-child, .panel > .dots + .tart + .ribbon { margin-top: 0; }
.panel > .ribbon:first-child { position: absolute; top: 0; translate: 0 -55%; white-space: nowrap; }
.panel.wide { max-width: calc(var(--u) * 254); }

/* buttons: glossy, rounded, a dark outline and a coloured 3D edge (the Clash buttons) */
.btn {
  --c1: #ffe46a; --c2: #ffbf1c; --c3: #c47800;
  position: relative;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(var(--u) * 13);
  line-height: 1;
  color: #fff;
  letter-spacing: .02em;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c1) 46%, var(--c2) 54%, var(--c2) 100%);
  border: calc(var(--u) * 1.4) solid var(--line);
  border-radius: calc(var(--u) * 7);
  padding: calc(var(--u) * 6) calc(var(--u) * 14) calc(var(--u) * 8);
  box-shadow: inset 0 calc(var(--u) * -3) 0 var(--c3), inset 0 calc(var(--u) * 1.6) 0 rgba(255, 255, 255, .6),
    0 calc(var(--u) * 2.5) 0 var(--line), 0 calc(var(--u) * 5) calc(var(--u) * 6) rgba(0, 0, 0, .35);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .07s, box-shadow .07s, filter .07s;
}
.btn:active {
  transform: translateY(calc(var(--u) * 2)) scale(.98);
  box-shadow: inset 0 calc(var(--u) * -1.5) 0 var(--c3), inset 0 calc(var(--u) * 1.6) 0 rgba(255, 255, 255, .6), 0 calc(var(--u) * .5) 0 var(--line);
  filter: brightness(.96);
}
.btn:focus-visible { outline: calc(var(--u) * 1.5) solid #fff; outline-offset: calc(var(--u) * 2); }
.btn.big { font-size: calc(var(--u) * 17); padding: calc(var(--u) * 7) calc(var(--u) * 22) calc(var(--u) * 9); }
.btn.ghost, .c-blue { --c1: #8ad3ff; --c2: #3b93f0; --c3: #1d5bb0; }
.btn.small { font-size: calc(var(--u) * 10.5); padding: calc(var(--u) * 5) calc(var(--u) * 10) calc(var(--u) * 6); }
.c-red { --c1: #ff8f7c; --c2: #e8392f; --c3: #9e1d16; }
.c-green { --c1: #9df27a; --c2: #3cbf3f; --c3: #217d27; }
.c-teal { --c1: #7ff2d8; --c2: #1fb59f; --c3: #11786a; }
.c-cream { --c1: #a6dcff; --c2: #4a9bf0; --c3: #2563b8; }
.c-navy { --c1: #b3bddb; --c2: #6b7aa6; --c3: #3d4870; }
.btn svg { width: 1em; height: 1em; fill: #fff; flex: none; filter: drop-shadow(0 calc(var(--u) * 1) 0 var(--line)); }
.row { display: flex; gap: calc(var(--u) * 8); align-items: center; justify-content: center; margin-top: calc(var(--u) * 3); }

/* ---- the title ---- */
#title {
  justify-content: flex-start;
  padding: calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 7);
  gap: 0;
  background: linear-gradient(180deg, rgba(5, 8, 24, .35), rgba(5, 8, 24, 0) 26%, rgba(5, 8, 24, 0) 60%, rgba(5, 8, 24, .55) 72%, rgba(5, 8, 24, .9) 88%);
}
.kick { margin: 0; font-family: var(--display); font-size: calc(var(--u) * 9.5); color: var(--cream); letter-spacing: .04em; -webkit-text-stroke-width: calc(var(--u) * 1.1); }
.logo { display: flex; flex-direction: column; align-items: center; margin: calc(var(--u) * 7) 0 0; line-height: .82;
  -webkit-text-stroke: 0; text-shadow: none; transform: rotate(-4deg); animation: slamIn .55s cubic-bezier(.2, 1.7, .4, 1) .1s both; }
.logo .l1 { position: relative; z-index: 2; margin-bottom: calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 13) calc(var(--u) * 4);
  font-size: calc(var(--u) * 19); letter-spacing: .05em; color: #fff;
  background: linear-gradient(180deg, #ff6b5c 0%, #ff6b5c 48%, #e2302e 52%, #c4211f 100%);
  border: calc(var(--u) * 1.4) solid var(--line); border-radius: calc(var(--u) * 5); transform: rotate(-3deg);
  box-shadow: inset 0 calc(var(--u) * 1.5) 0 rgba(255, 255, 255, .45), 0 calc(var(--u) * 2.5) 0 var(--line);
  -webkit-text-stroke: calc(var(--u) * 1.3) var(--line); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * 1.3) 0 var(--line); }
.logo .l2 { position: relative; display: block; font-size: calc(var(--u) * 47); letter-spacing: .01em; animation: beat .536s ease-in-out .7s infinite alternate; }
.logo .l2 .g { position: relative; z-index: 1;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe56a 30%, #ffc21f 58%, #f08a12 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .l2::before { content: attr(data-t); position: absolute; inset: 0; z-index: 0; color: var(--line);
  -webkit-text-stroke: calc(var(--u) * 4.4) var(--line);
  text-shadow: 0 calc(var(--u) * 2) 0 #a8520f, 0 calc(var(--u) * 4) 0 #8a3f0b, 0 calc(var(--u) * 6) 0 #6e3009, 0 calc(var(--u) * 7) 0 var(--line),
    0 calc(var(--u) * 14) calc(var(--u) * 16) rgba(0, 0, 0, .6); }
@keyframes slamIn { 0% { transform: rotate(-4deg) scale(2.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-4deg) scale(1); opacity: 1; } }
@keyframes beat { from { transform: translateY(0) scale(1); } to { transform: translateY(calc(var(--u) * -2)) scale(1.03); } }
.tagline { position: relative; margin: calc(var(--u) * 12) 0 0; padding: calc(var(--u) * 4) calc(var(--u) * 16) calc(var(--u) * 5);
  font-family: var(--display); font-size: calc(var(--u) * 12.5); line-height: 1; color: #fff8e6;
  background: linear-gradient(180deg, #8a5cf0, #6a3fd0 50%, #5531b4 51%, #47279a); transform: rotate(2deg);
  border: calc(var(--u) * 1.4) solid var(--line); border-radius: calc(var(--u) * 4);
  box-shadow: inset 0 calc(var(--u) * 1.3) 0 rgba(255, 255, 255, .4), 0 calc(var(--u) * 2) 0 var(--line);
  animation: tagIn .45s cubic-bezier(.2, 1.6, .4, 1) .55s both; }
@keyframes tagIn { 0% { transform: rotate(2deg) translateY(calc(var(--u) * 10)) scale(.6); opacity: 0; } 100% { transform: rotate(2deg); opacity: 1; } }
.tbottom { margin-top: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); }
.btn.play { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 24); letter-spacing: .05em;
  padding: calc(var(--u) * 8) calc(var(--u) * 34) calc(var(--u) * 10) calc(var(--u) * 28);
  overflow: hidden; animation: playPulse 1.2s ease-in-out infinite; }
.btn.play svg { width: .8em; height: .8em; }
.btn.play::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 22%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg);
  animation: shine 2.6s ease-in-out infinite; }
@keyframes playPulse { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@keyframes shine { 0%, 55% { left: -40%; } 85%, 100% { left: 130%; } }
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 7); width: calc(var(--u) * 238); }
.tbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3);
  font-size: calc(var(--u) * 8.6); letter-spacing: 0; padding: calc(var(--u) * 6) calc(var(--u) * 2) calc(var(--u) * 7); }
.tbtn svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
#soundBtn .off { display: none; }
#soundBtn.muted .on { display: none; }
#soundBtn.muted .off { display: inline; }
/* Marvin's teaser: legendary purple when free, grey slate with a lock until then */
.tbtn.wide { flex-direction: row; gap: calc(var(--u) * 7); width: calc(var(--u) * 238); box-sizing: border-box; font-size: calc(var(--u) * 12); padding: calc(var(--u) * 5) calc(var(--u) * 10) calc(var(--u) * 7); }
.c-metal { --c1: #d6b4ff; --c2: #8247e0; --c3: #4c2296; animation: legendGlow 1.6s ease-in-out infinite; }
@keyframes legendGlow {
  0%, 100% { box-shadow: inset 0 calc(var(--u) * -3) 0 var(--c3), inset 0 calc(var(--u) * 1.6) 0 rgba(255, 255, 255, .6), 0 calc(var(--u) * 2.5) 0 var(--line), 0 0 calc(var(--u) * 6) rgba(199, 120, 255, .55); }
  50% { box-shadow: inset 0 calc(var(--u) * -3) 0 var(--c3), inset 0 calc(var(--u) * 1.6) 0 rgba(255, 255, 255, .6), 0 calc(var(--u) * 2.5) 0 var(--line), 0 0 calc(var(--u) * 14) rgba(255, 120, 230, .9); }
}
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes legend { to { --spin: 360deg; } }
.c-metal img { width: calc(var(--u) * 19); height: calc(var(--u) * 19); border-radius: 50%; background: radial-gradient(#ffe1a0, #b06cff);
  border: calc(var(--u) * 1.2) solid var(--line); }
.c-metal .lock { display: none; }
.c-metal.locked { --c1: #8d95b4; --c2: #555d7e; --c3: #343a55; color: #e7eaf6; }
.c-metal.locked { animation: none; }
.c-metal.locked img { display: none; }
.c-metal.locked .lock { display: inline; width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.nope { animation: nope .35s ease-in-out; }
@keyframes nope { 0%, 100% { translate: 0; } 25% { translate: calc(var(--u) * -4) 0; } 75% { translate: calc(var(--u) * 4) 0; } }
.credit { font-family: var(--body); font-weight: 800; font-size: calc(var(--u) * 7.6); color: rgba(245, 234, 210, .72); text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); touch-action: manipulation; }
.credit:hover, .credit:active { color: var(--gold); text-decoration: underline; }
#end > .credit { position: absolute; bottom: calc(var(--u) * 4); right: calc(var(--u) * 7); }

/* ---- character select: Clash Royale cards ---- */
#select { justify-content: flex-start; padding: calc(var(--u) * 14) calc(var(--u) * 9) calc(var(--u) * 10); overflow-y: auto;
  background: radial-gradient(ellipse at 50% 30%, rgba(20, 30, 72, .78), rgba(5, 7, 18, .94)); }
#select > .ribbon { margin-bottom: calc(var(--u) * 4); }
.selsub { margin: calc(var(--u) * -2) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 9); }
#cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); width: 100%; }
.card {
  --f1: #7ee6ff; --f2: #1a8fc0;
  position: relative;
  font-family: var(--body);
  font-weight: 800;
  color: var(--cream);
  background: linear-gradient(180deg, #3a58b0 0%, #2a3f88 34%, #1c2a60 100%);
  border: calc(var(--u) * 1.4) solid var(--line);
  border-radius: calc(var(--u) * 9);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.2) rgba(255, 255, 255, .16), inset 0 calc(var(--u) * 1.6) 0 rgba(255, 255, 255, .28),
    0 calc(var(--u) * 2.5) 0 var(--line), 0 calc(var(--u) * 6) calc(var(--u) * 8) rgba(0, 0, 0, .4);
  padding: calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * 6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  cursor: pointer;
  touch-action: manipulation;
  text-align: center;
  transition: transform .08s;
}
.card:active { transform: scale(.97); }
.card:focus-visible { outline: calc(var(--u) * 1.5) solid #fff; outline-offset: calc(var(--u) * 1.5); }
.card[data-id="yannick"] { --f1: #ff9d8a; --f2: #c42a20; }
.card[data-id="santiago"] { --f1: #a6f27c; --f2: #2f9a33; }
.card[data-id="dario"] { --f1: #ffe27a; --f2: #d98a12; }
.card img { width: calc(var(--u) * 46); height: calc(var(--u) * 46); object-fit: cover; object-position: 50% 10%;
  background: radial-gradient(circle at 50% 35%, var(--f1), var(--f2) 75%);
  border: calc(var(--u) * 1.4) solid var(--line); border-radius: calc(var(--u) * 8);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.2) rgba(255, 255, 255, .35), 0 calc(var(--u) * 2) 0 var(--line); }
.card .nm { font-family: var(--display); font-size: calc(var(--u) * 15); line-height: 1; color: #fff; margin-top: calc(var(--u) * 1.5); }
.card .hd { font-size: calc(var(--u) * 7.4); color: var(--mute); line-height: 1.1; }
.card .tt { font-family: var(--display); font-size: calc(var(--u) * 8.6); color: var(--gold); line-height: 1; padding: calc(var(--u) * 2) calc(var(--u) * 6) calc(var(--u) * 2.5);
  background: rgba(8, 12, 32, .55); border-radius: calc(var(--u) * 9); }
.card .pk { font-size: calc(var(--u) * 7.6); line-height: 1.25; color: var(--cream); min-height: calc(var(--u) * 19); }
.card .qk { font-size: calc(var(--u) * 7.6); line-height: 1.25; color: #8ef06a; min-height: calc(var(--u) * 19); }
.card .st { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 1.6) calc(var(--u) * 4); align-items: center;
  font-size: calc(var(--u) * 7); color: var(--mute); text-align: left; margin-top: calc(var(--u) * 1); }
.card .bar { height: calc(var(--u) * 4); background: rgba(5, 8, 24, .65); border-radius: calc(var(--u) * 2); position: relative; overflow: hidden;
  box-shadow: 0 0 0 calc(var(--u) * .8) var(--line); }
.card .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: calc(var(--u) * 2);
  background: linear-gradient(180deg, #ffe46a, #f7a51c); box-shadow: inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, .45); }
.card .bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 19%, rgba(5, 8, 24, .7) 19% 20%); }
/* the secret one: a wide legendary strip */
.card.secret { grid-column: 1 / -1; display: grid; grid-template-columns: calc(var(--u) * 44) 1fr; grid-auto-rows: min-content;
  column-gap: calc(var(--u) * 9); row-gap: calc(var(--u) * 1.5); text-align: left; align-items: center; justify-items: start;
  padding: calc(var(--u) * 5) calc(var(--u) * 8) calc(var(--u) * 6);
  border: calc(var(--u) * 2.2) solid transparent;
  background: linear-gradient(135deg, #5b2fb0 0%, #3a1f7a 45%, #22164a 100%) padding-box,
    conic-gradient(from var(--spin, 0deg), #ff5ad1, #ffd23a, #5ae0ff, #a46bff, #ff5ad1) border-box;
  box-shadow: 0 0 0 calc(var(--u) * 1.2) var(--line), 0 calc(var(--u) * 2.5) 0 calc(var(--u) * 1.2) var(--line), 0 0 calc(var(--u) * 12) rgba(199, 120, 255, .45);
  animation: legend 3s linear infinite; }
.card.secret img { grid-row: 1 / span 6; align-self: center; width: calc(var(--u) * 44); height: calc(var(--u) * 44);
  background: radial-gradient(circle at 50% 35%, #ffe1a0, #9a4cff 80%); }
.card.secret .st { display: none; }
.card.secret .tt { color: var(--purple); }
.card.secret .pk, .card.secret .qk { min-height: 0; line-height: 1.2; }
.card.secret.locked { background: linear-gradient(135deg, #3a4064, #262b48 60%, #1b1f38) padding-box, linear-gradient(135deg, #6a6f92, #3a3f60) border-box;
  box-shadow: 0 0 0 calc(var(--u) * 1.2) var(--line), 0 calc(var(--u) * 2.5) 0 calc(var(--u) * 1.2) var(--line); cursor: default; animation: none; }
.card.secret.locked img { filter: brightness(0) drop-shadow(0 0 calc(var(--u) * 3) rgba(199, 155, 255, .9)); background: radial-gradient(circle at 50% 35%, #6b5a9a, #2b2450 80%); }
.card.secret.locked .nm { color: var(--purple); letter-spacing: .12em; }
.card.secret.locked::after { content: ""; position: absolute; left: calc(var(--u) * 32); top: calc(var(--u) * 3); width: calc(var(--u) * 16); height: calc(var(--u) * 16);
  background: no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 10V7.5a5 5 0 0 1 10 0V10h.5A2.5 2.5 0 0 1 20 12.5v7a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 19.5v-7A2.5 2.5 0 0 1 6.5 10zm3 0h4V7.5a2 2 0 0 0-4 0z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ffd23a, #e08a12);
  border: calc(var(--u) * 1.2) solid var(--line); border-radius: 50%; }

/* ---- tutorial ---- */
#tut .panel { gap: calc(var(--u) * 7); padding-top: calc(var(--u) * 12); }
.dots { display: flex; gap: calc(var(--u) * 4); }
.dots i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: rgba(245, 234, 210, .22); box-shadow: 0 0 0 calc(var(--u) * .9) var(--line); }
.dots i.on { background: var(--gold); box-shadow: 0 0 0 calc(var(--u) * .9) var(--line), 0 0 calc(var(--u) * 5) rgba(242, 193, 78, .8); }
.tart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  width: 100%;
  height: calc(var(--u) * 112);
  border-radius: calc(var(--u) * 9);
  background: radial-gradient(ellipse at 50% 60%, rgba(120, 170, 255, .32), rgba(120, 170, 255, 0) 68%), rgba(5, 8, 24, .45);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.2) rgba(255, 255, 255, .08);
}
.tart img { height: calc(var(--u) * var(--h, 30) * .9); width: auto; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 2) rgba(0, 0, 0, .5)); }
.tart .arrow { align-self: center; color: var(--gold); font-family: var(--display); font-size: calc(var(--u) * 20); -webkit-text-stroke: calc(var(--u) * 1.2) var(--line); paint-order: stroke fill; }
.tart .walk { position: relative; width: calc(var(--u) * 150); height: calc(var(--u) * 100); display: flex; align-items: flex-end; justify-content: center; }
.tart .walk img { animation: follow 2s ease-in-out infinite; }
.tart .finger {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -4);
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  margin-left: calc(var(--u) * -8);
  border-radius: 50%;
  background: rgba(242, 193, 78, .35);
  box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--gold), 0 0 calc(var(--u) * 8) rgba(242, 193, 78, .7);
  animation: follow 2s ease-in-out infinite;
}
@keyframes follow { 0%, 100% { transform: translateX(calc(var(--u) * -40)); } 50% { transform: translateX(calc(var(--u) * 40)); } }
.tart .pegel { align-self: center; width: calc(var(--u) * 60); height: calc(var(--u) * 9); background: rgba(5, 8, 24, .7); position: relative; border-radius: calc(var(--u) * 5);
  box-shadow: 0 0 0 calc(var(--u) * 1.2) var(--line); overflow: hidden; }
.tart .pegel i { position: absolute; inset: 0 auto 0 0; border-radius: calc(var(--u) * 5); background: linear-gradient(90deg, #ffd23a, #f08a2a 55%, #e2302e); animation: fill 2.4s ease-in-out infinite; }
@keyframes fill { 0% { width: 5%; } 70%, 100% { width: 100%; } }
.tart .box { width: calc(var(--u) * 18); height: calc(var(--u) * 50); background: linear-gradient(90deg, #a7adb6, #7b828c); border: calc(var(--u) * 1.2) solid var(--line);
  border-radius: calc(var(--u) * 2); position: relative; overflow: hidden; }
.tart .box::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #ff4fa3 0 calc(var(--u) * 4), #38e0c8 calc(var(--u) * 4) calc(var(--u) * 8)); animation: spray 2.4s steps(10) infinite; }
@keyframes spray { 0%, 15% { clip-path: inset(100% 0 0 0); } 65%, 100% { clip-path: inset(0 0 0 0); } }
#tut .ribbon { font-size: calc(var(--u) * 16); }
.tutt { max-width: calc(var(--u) * 222); line-height: 1.35; min-height: calc(var(--u) * 44); font-size: calc(var(--u) * 9.2); }

/* ---- dice ---- */
.ov.dice { background: radial-gradient(ellipse at 50% 40%, rgba(16, 22, 56, .7), rgba(5, 7, 18, .93)); }
#dice .panel { gap: calc(var(--u) * 5); padding-top: calc(var(--u) * 10); }
.dface { width: calc(var(--u) * 54); height: calc(var(--u) * 54); object-fit: cover; object-position: 50% 10%; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ff9d8a, #c42a20 78%); border: calc(var(--u) * 1.5) solid var(--line);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.2) rgba(255, 255, 255, .35), 0 calc(var(--u) * 2) 0 var(--line); margin-top: calc(var(--u) * -34); }
#dice .ribbon { font-size: calc(var(--u) * 15); }
.die {
  width: calc(var(--u) * 58);
  height: calc(var(--u) * 58);
  margin: calc(var(--u) * 5) 0 calc(var(--u) * 2);
  padding: calc(var(--u) * 8);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: radial-gradient(circle at 30% 25%, #ffffff, #f3ead6 55%, #d8cbad);
  border: calc(var(--u) * 1.5) solid var(--line);
  border-radius: calc(var(--u) * 12);
  box-shadow: inset 0 calc(var(--u) * -3.5) 0 #c2b28d, inset 0 calc(var(--u) * 2) 0 #fff, 0 calc(var(--u) * 3) 0 var(--line), 0 calc(var(--u) * 8) calc(var(--u) * 10) rgba(0, 0, 0, .45);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .06s;
}
.die:active { transform: scale(.96); }
.die i { width: calc(var(--u) * 9); height: calc(var(--u) * 9); place-self: center; border-radius: 50%; }
.die i.on { background: radial-gradient(circle at 35% 30%, #4a5280, var(--ink) 70%); box-shadow: inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, .25); }
#diceRes { min-height: calc(var(--u) * 17); }
.rules {
  display: grid;
  grid-template-columns: auto auto;
  gap: calc(var(--u) * 2) calc(var(--u) * 7);
  margin: 0;
  padding: calc(var(--u) * 5) calc(var(--u) * 9);
  font-size: calc(var(--u) * 8.4);
  text-align: left;
  background: rgba(5, 8, 24, .5);
  border-radius: calc(var(--u) * 7);
}
.rules dt { color: var(--gold); text-align: right; font-family: var(--display); }
.rules dd { margin: 0; color: var(--cream); }

/* ---- end screen ---- */
#end .panel { gap: calc(var(--u) * 5); padding-top: calc(var(--u) * 17); }
#endHead { font-size: calc(var(--u) * 15.5); }
#endSub { font-size: calc(var(--u) * 8.8); max-width: calc(var(--u) * 222); }
#endRank { padding: calc(var(--u) * 2) calc(var(--u) * 12) calc(var(--u) * 3); background: rgba(5, 8, 24, .5); border-radius: calc(var(--u) * 10); font-size: calc(var(--u) * 12.5); }
#endStats {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: calc(var(--u) * 2.4) calc(var(--u) * 6);
  margin: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 10);
  font-size: calc(var(--u) * 8.6);
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: rgba(5, 8, 24, .5);
  border-radius: calc(var(--u) * 8);
  box-shadow: inset 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .4);
}
#endStats dt { color: var(--mute); }
#endStats dd { margin: 0; color: #fff; text-align: right; font-family: var(--display); }
.unlock { margin: 0; padding: calc(var(--u) * 5) calc(var(--u) * 10) calc(var(--u) * 6); font-size: calc(var(--u) * 8.6); line-height: 1.3; color: #fff;
  background: linear-gradient(135deg, #7b43d6, #4c2296); border: calc(var(--u) * 1.3) solid var(--line); border-radius: calc(var(--u) * 7);
  box-shadow: inset 0 calc(var(--u) * 1.3) 0 rgba(255, 255, 255, .35), 0 0 calc(var(--u) * 10) rgba(199, 155, 255, .7); animation: unlockGlow 1.2s ease-in-out infinite; }
.unlock b { display: block; font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 11); color: #ffe46a;
  -webkit-text-stroke: calc(var(--u) * 1.1) var(--line); paint-order: stroke fill; }
.unlock[hidden] { display: none; }
@keyframes unlockGlow { 50% { box-shadow: inset 0 calc(var(--u) * 1.3) 0 rgba(255, 255, 255, .35), 0 0 calc(var(--u) * 18) rgba(199, 155, 255, 1); } }
.name { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); margin: 0; }
.name[hidden] { display: none; }
.name label { font-size: calc(var(--u) * 8.4); color: var(--mute); }
.name .row { margin-top: 0; }
#nameIn {
  font-family: var(--display);
  font-size: calc(var(--u) * 13);
  width: calc(var(--u) * 122);
  padding: calc(var(--u) * 5) calc(var(--u) * 8);
  background: #fff8e6;
  color: var(--ink);
  border: calc(var(--u) * 1.4) solid var(--line);
  border-radius: calc(var(--u) * 7);
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(0, 0, 0, .15);
  -webkit-user-select: text;
  user-select: text;
}
#nameIn::placeholder { color: #9a8f78; }
#nameIn:focus { outline: 0; box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(0, 0, 0, .15), 0 0 0 calc(var(--u) * 1.5) var(--gold); }

/* ---- highscores ---- */
#scores .panel { gap: calc(var(--u) * 5); }
#board {
  list-style: none;
  margin: calc(var(--u) * 2) 0 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: calc(var(--u) * 3);
  counter-reset: none;
}
#board li {
  display: grid;
  grid-template-columns: calc(var(--u) * 17) calc(var(--u) * 20) 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 5);
  background: linear-gradient(180deg, #33478f, #26346c);
  border: calc(var(--u) * 1.2) solid var(--line);
  border-radius: calc(var(--u) * 7);
  box-shadow: inset 0 calc(var(--u) * 1.2) 0 rgba(255, 255, 255, .18);
  padding: calc(var(--u) * 3) calc(var(--u) * 7) calc(var(--u) * 3) calc(var(--u) * 4);
  font-size: calc(var(--u) * 11);
  text-align: left;
  line-height: 1;
}
#board li.me { background: linear-gradient(180deg, #ffd85a, #e8a51c); color: var(--ink); }
#board li.me .n small { color: #6a4a10; }
#board li.gap { background: transparent; border: 0; box-shadow: none; color: var(--mute); display: block; text-align: center; padding: 0; }
#board .r { font-family: var(--display); color: #fff; text-align: center; width: calc(var(--u) * 17); height: calc(var(--u) * 17); line-height: calc(var(--u) * 17);
  border-radius: 50%; background: #1b2550; font-size: calc(var(--u) * 9.5); -webkit-text-stroke-width: calc(var(--u) * 1); }
#board li:nth-child(1) .r { background: radial-gradient(circle at 35% 30%, #fff2a8, #f2b21c 60%, #b77a08); }
#board li:nth-child(2) .r { background: radial-gradient(circle at 35% 30%, #ffffff, #c4cbe0 60%, #7d86a6); }
#board li:nth-child(3) .r { background: radial-gradient(circle at 35% 30%, #ffd2a8, #d98a4c 60%, #8f4f1f); }
#board img { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; object-fit: cover; background: radial-gradient(#ffe27a, #d98a12);
  border: calc(var(--u) * 1) solid var(--line); }
#board .n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--display); color: #fff; -webkit-text-stroke: calc(var(--u) * 1) var(--line); paint-order: stroke fill; }
#board li.me .n { color: var(--ink); -webkit-text-stroke: 0; }
#board .n small { display: block; margin-top: calc(var(--u) * 1.5); color: var(--mute); font-family: var(--body); font-size: calc(var(--u) * 7.4); -webkit-text-stroke: 0; }
#board .s { font-family: var(--display); color: var(--gold); font-size: calc(var(--u) * 12); }
#board li.me .s { color: #fff; }

/* ---- the "hold it upright" guard ---- */
#turn {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: radial-gradient(ellipse at 50% 40%, #1d2a66, #070a1c);
  color: var(--gold);
  text-align: center;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.2;
  --u: 1.6px;
}
#turn svg { width: 64px; height: 64px; color: #fff; animation: turn 1.6s ease-in-out infinite; filter: drop-shadow(0 3px 0 #10142a); }
#turn p { margin: 0; }
#turn .small { font-family: var(--body); font-size: 15px; color: var(--cream); }
@keyframes turn { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 540px) {
  #turn { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .logo, .logo .l2, .tagline, .btn.play, .btn.play::after, .c-metal, .card.secret, .nope, .unlock,
  .tart .walk img, .tart .finger, .tart .pegel i, .tart .box::after, #turn svg { animation: none; }
}

/* ---- five cards on one phone screen: compact layout ---- */
#select { padding-top: calc(var(--u) * 11); gap: calc(var(--u) * 4); }
#select > .ribbon { margin-bottom: calc(var(--u) * 2); font-size: calc(var(--u) * 15.5); }
#cards { gap: calc(var(--u) * 5); }
.card { padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 5); gap: calc(var(--u) * 1.2); }
.card img { width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: calc(var(--u) * 7); }
.card .nm { font-size: calc(var(--u) * 13.5); margin-top: calc(var(--u) * .5); }
.card .tt { font-size: calc(var(--u) * 7.8); }
.card .pk, .card .qk { font-size: calc(var(--u) * 7.1); line-height: 1.18; min-height: 0; }
.card .st { grid-template-columns: auto 1fr auto 1fr; gap: calc(var(--u) * 1.6) calc(var(--u) * 2.5); font-size: calc(var(--u) * 6.1); margin-top: auto; padding-top: calc(var(--u) * 1); }
.card .bar { height: calc(var(--u) * 3.6); }
.card.secret { column-gap: calc(var(--u) * 8); row-gap: calc(var(--u) * 1); padding: calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * 5); }
.card.secret img { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.card.secret .pk, .card.secret .qk { font-size: calc(var(--u) * 6.9); }
.card.secret.locked::after { left: calc(var(--u) * 30); top: calc(var(--u) * 2); }
.card.secret.locked img { background: none; border-color: transparent; box-shadow: none;
  filter: brightness(0) drop-shadow(0 0 calc(var(--u) * 2) rgba(199, 155, 255, .95)) drop-shadow(0 0 calc(var(--u) * 5) rgba(199, 155, 255, .6)); }