/* Moonch.io's look: the casual-game UI kit from the game-astro design
   folder (img/ui, img/icon) - soft gradient buttons with a deeper base,
   white rounded popups with a coloured ribbon title, navy status pills,
   flat white pictograms - and one font throughout, Rubik.

   The sprites are 9-sliced with border-image: the slice numbers are the
   kit's own spriteBorder (Unity's x/y/z/w = left/bottom/right/top), less a
   pixel or two so there is a middle to stretch. --k turns the kit's pixels
   into screen units. */
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-SemiBold.woff2') format('woff2'); font-display: swap; }

:root {
  --ink: #2b3561;          /* navy text */
  --ink-2: #6a7499;
  --navy: #2a3358;
  --paper: #ffffff;
  --cream: #f2f5fb;
  --line-c: #dfe5f2;
  --gold: #ffcf2e;
  --gold-d: #e8a300;
  --green: #3fd06a;
  --blue: #4f8cff;
  --red: #ff5a5a;
  --pink: #ff6fae;
  --purple: #a66bff;
  --grass: #7ed957;
  --f-title: 'Rubik', system-ui, sans-serif;
  --f-ui: 'Rubik', system-ui, sans-serif;
  --f-body: 'Rubik', system-ui, sans-serif;
  --u: min(1vw, 0.56vh);
  --k: calc(0.085 * var(--u));     /* one kit pixel */
  /* kept for the splash */
  --op: #ffc629; --op-l: #ffdb6b; --op-d: #d99a00; --line: calc(0.7 * var(--u));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #9fdcff;
  font-family: var(--f-ui); color: #fff;
  user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
.layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.hide { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; pointer-events: auto; padding: 0; }
/* light text over the 3D scene: a soft navy shadow so it reads anywhere */
.shade { text-shadow: 0 0.08em 0 rgba(30, 38, 80, 0.55), 0 0 0.3em rgba(30, 38, 80, 0.35); }

/* ---------- the OP splash (the studio's own look, kept) ---------- */
.op-face {
  position: relative; flex: none;
  width: calc(20 * var(--u)); aspect-ratio: 1; border-radius: 24%;
  background: linear-gradient(var(--op-l), var(--op) 45%);
  box-shadow: inset 0 calc(-1.2 * var(--u)) 0 var(--op-d), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.25);
}
.op-face::before, .op-face::after { content: ''; position: absolute; }
.op-face::before { inset: 13% 13% 20%; border-radius: 22%; background: #16181d; }
.op-face::after  { inset: 18% 18% 25%; border-radius: 18%; background: #fff; }
.op-face i { position: absolute; z-index: 1; top: 33%; width: 9.5%; height: 25%; border-radius: 99px; background: #16181d; animation: blink 4s infinite; }
.op-face i:first-child { left: 34.5%; }
.op-face i:last-child { left: 56%; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.op-face.big { width: calc(36 * var(--u)); }
#splash {
  position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(4 * var(--u));
  background: radial-gradient(circle at 50% 42%, var(--op-l), var(--op) 60%);
  transition: opacity 0.35s, visibility 0.35s;
}
#splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
#splash .op-face { animation: drop 0.6s cubic-bezier(.2,1.6,.4,1) both; box-shadow: inset 0 calc(-1.8 * var(--u)) 0 var(--op-d), 0 calc(2 * var(--u)) 0 #16181d; outline: var(--line) solid #16181d; }
@keyframes drop { from { transform: translateY(-30%) scale(0.6); opacity: 0; } }
.wordmark { font-family: var(--f-ui); font-size: calc(13 * var(--u)); color: #16181d; letter-spacing: 0.01em; }
.wordmark span { font-size: 0.7em; }
.wordmark b { color: #fff; paint-order: stroke fill; -webkit-text-stroke: calc(1.4 * var(--u)) #16181d; }
.dots { display: flex; gap: calc(2 * var(--u)); }
.dots i { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); border-radius: 50%; background: #16181d; animation: dot 0.9s infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 50% { transform: translateY(-60%); opacity: 0.4; } }

/* ---------- pictograms: the kit's white icons, tinted through a mask ---------- */
.ico {
  display: inline-block; flex: none; width: 1.25em; height: 1.25em; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.i-pause { --m: url('../img/icon/player_pause.png'); }
.i-play  { --m: url('../img/icon/player_play.png'); }
.i-music { --m: url('../img/icon/music_on.png'); }
.muted .i-music { --m: url('../img/icon/music_off.png'); }
.i-sound { --m: url('../img/icon/sound_on.png'); }
.muted .i-sound { --m: url('../img/icon/sound_off.png'); }
.i-help  { --m: url('../img/icon/mark_question.png'); }
.i-back  { --m: url('../img/icon/arrow_prev.png'); }
.i-cloth { --m: url('../img/icon/cloth.png'); }

/* ---------- buttons ---------- */
/* round icon button: the kit's white disc, a navy pictogram */
.icon {
  width: calc(12 * var(--u)); height: calc(12 * var(--u)); flex: none;
  background: url('../img/ui/circle.png') center / contain no-repeat;
  display: grid; place-items: center; color: var(--ink); font-size: calc(5.4 * var(--u));
  padding-bottom: calc(0.6 * var(--u)); transition: transform 0.08s;
}
.icon:active { transform: scale(0.92); }
.icon.muted { opacity: 0.75; }
.icon.muted .ico { color: #9aa3c0; }

/* the main button: a gradient pill on a deeper base, 9-sliced */
.btn {
  --img: url('../img/ui/btn_white.png');
  display: flex; align-items: center; justify-content: center; gap: calc(2 * var(--u));
  min-width: 70%; min-height: calc(14 * var(--u));
  border-style: solid; border-width: calc(30 * var(--k)) calc(44 * var(--k)) calc(38 * var(--k));
  border-image: var(--img) 67 46 69 46 fill / calc(67 * var(--k)) calc(46 * var(--k)) calc(69 * var(--k));
  padding: 0 calc(1 * var(--u));
  font-family: var(--f-ui); font-size: calc(6 * var(--u)); letter-spacing: 0.01em; line-height: 1;
  color: var(--ink); white-space: nowrap; transition: transform 0.08s, filter 0.08s;
}
.btn:active { transform: translateY(calc(0.5 * var(--u))) scale(0.98); filter: brightness(0.95); }
.btn[disabled] { filter: grayscale(0.8); opacity: 0.6; animation: none; }
.btn.green, .btn.blue, .btn.red, .btn.purple, .btn.pink, .btn.navy {
  color: #fff; text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.22);
}
.btn.green  { --img: url('../img/ui/btn_green.png'); }
.btn.blue   { --img: url('../img/ui/btn_blue.png'); }
.btn.red    { --img: url('../img/ui/btn_red.png'); }
.btn.purple { --img: url('../img/ui/btn_purple.png'); }
.btn.pink   { --img: url('../img/ui/btn_pink.png'); }
.btn.navy   { --img: url('../img/ui/btn_navy.png'); }
.btn.gold   { --img: url('../img/ui/btn_yellow.png'); color: #6b3d00; text-shadow: 0 0.06em 0 rgba(255, 255, 255, 0.5); animation: pulse 1.1s ease-in-out infinite; }
.btn.gray   { --img: url('../img/ui/btn_gray.png'); color: #fff; animation: none; }
@keyframes pulse { 50% { transform: scale(1.04); } }
.adIcon { height: 1.15em; width: auto; }
.link { background: none; color: var(--ink-2); font-family: var(--f-ui); font-size: calc(4.4 * var(--u)); padding: calc(1.5 * var(--u)); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- the status pill: navy, rounded, an icon at the left ---------- */
.pill {
  display: flex; align-items: center; gap: calc(1.4 * var(--u));
  border-style: solid; border-width: calc(1 * var(--u)) calc(3 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u));
  border-image: url('../img/ui/status_dark.png') 28 fill / calc(4 * var(--u));
  min-height: calc(9 * var(--u));
  color: #fff; font-family: var(--f-ui); font-size: calc(5 * var(--u));
}
.pill b { font-weight: normal; }
.coin { display: inline-block; flex: none; width: 1.35em; height: 1.35em; background: url('../img/icon/coin.png') center / contain no-repeat; }
.pill .coin { width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin: calc(-1.4 * var(--u)) 0 calc(-1.4 * var(--u)) calc(-1.6 * var(--u)); }

/* ---------- menu ---------- */
#menu {
  padding: calc(env(safe-area-inset-top) + 16 * var(--u)) 5vw calc(env(safe-area-inset-bottom) + 5 * var(--u));
  background: linear-gradient(rgba(20, 30, 70, 0.15), rgba(20, 30, 70, 0) 30%, rgba(20, 30, 70, 0) 55%, rgba(20, 30, 70, 0.4));
}
#menuTop { position: absolute; left: 3.5vw; top: calc(env(safe-area-inset-top) + 3 * var(--u)); display: flex; gap: calc(2 * var(--u)); }
#menuWallet { position: absolute; right: 3.5vw; top: calc(env(safe-area-inset-top) + 4.4 * var(--u)); }
#title {
  margin: 0; display: flex; align-items: baseline; font-family: var(--f-title); font-weight: normal; line-height: 1;
  animation: titleIn 0.5s cubic-bezier(.2,1.6,.4,1) both;
  filter: drop-shadow(0 calc(1 * var(--u)) 0 rgba(30, 38, 90, 0.55));
}
#title span { paint-order: stroke fill; -webkit-text-stroke: calc(1.6 * var(--u)) var(--navy); }
#title .moo { font-size: calc(16 * var(--u)); color: #fff; }
#title .io { font-size: calc(10 * var(--u)); color: var(--gold); }
@keyframes titleIn { from { transform: scale(0.5); opacity: 0; } }
#tagline {
  margin-top: calc(2.4 * var(--u)); padding: calc(1 * var(--u)) calc(3.6 * var(--u)); border-radius: 99px;
  background: rgba(42, 51, 88, 0.85); color: #b8ffa0; font-family: var(--f-ui); font-size: calc(3.6 * var(--u)); letter-spacing: 0.16em;
}
.brand {
  display: flex; align-items: center; gap: calc(1.4 * var(--u)); margin-top: calc(2.4 * var(--u));
  font-size: calc(3.6 * var(--u)); color: var(--ink);
  padding: calc(0.6 * var(--u)) calc(2.6 * var(--u)) calc(0.6 * var(--u)) calc(1.6 * var(--u));
  background: rgba(255, 255, 255, 0.88); border-radius: 99px;
}
.brand span { opacity: 0.6; font-size: 0.8em; }
.brand img { width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u)); }
.brand b { font-weight: normal; }
#menuCard {
  margin-top: auto; width: min(90vw, calc(92 * var(--u))); max-width: 480px;
  display: flex; flex-direction: column; align-items: center; gap: calc(2.4 * var(--u));
}
#nameIn {
  width: 100%; font-family: var(--f-ui); font-size: calc(5.2 * var(--u)); text-align: center; color: var(--ink);
  border-style: solid; border-width: calc(3 * var(--u)) calc(4 * var(--u));
  border-image: url('../img/ui/input.png') 40 fill / calc(4 * var(--u));
  background: none; outline: none; user-select: text; -webkit-user-select: text; touch-action: manipulation;
}
#nameIn::placeholder { color: #a5aec8; }
#menuCard .btn { width: 100%; }
#play { min-height: calc(18 * var(--u)); font-size: calc(9 * var(--u)); }
#best {
  display: flex; align-items: center; gap: calc(1.2 * var(--u));
  font-size: calc(4.4 * var(--u)); color: #fff;
}
#best img { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
#best b { color: var(--gold); font-weight: normal; font-family: var(--f-title); font-size: 1.15em; }
#best, .tag, #board, #feed, #toast { text-shadow: 0 0.08em 0 rgba(30, 38, 80, 0.6); }

/* ---------- in play ---------- */
#top {
  position: absolute; left: 0; right: 0; top: 0;
  padding: calc(env(safe-area-inset-top) + 2.4 * var(--u)) 3vw 0;
  display: none; align-items: flex-start; gap: calc(2 * var(--u));
}
body.playing #top { display: flex; }
#me { gap: calc(1 * var(--u)); padding-left: calc(2 * var(--u)); align-items: baseline; }
#me b { font-family: var(--f-title); font-size: calc(6.6 * var(--u)); line-height: 1; }
#me span { font-size: calc(3.4 * var(--u)); opacity: 0.7; }
#me i { font-style: normal; margin-left: calc(1.2 * var(--u)); font-size: calc(3.8 * var(--u)); padding: calc(0.3 * var(--u)) calc(1.8 * var(--u));
  border-radius: 99px; background: var(--green); color: #fff; align-self: center; }
#me.bump b { animation: bump 0.25s ease-out; }
@keyframes bump { 40% { transform: scale(1.22); color: #b8ffa0; } }
/* the coins picked up this run: beside the minimap, out of the crowded top row */
#runPill { position: absolute; left: calc(3vw + 30 * var(--u)); top: calc(env(safe-area-inset-top) + 17 * var(--u)); font-size: calc(4.6 * var(--u)); }
#board {
  list-style: none; margin: 0 0 0 auto; padding: calc(1.6 * var(--u)) calc(2.6 * var(--u));
  flex: none; border-radius: calc(3.4 * var(--u)); background: rgba(42, 51, 88, 0.72);
  font-size: calc(3.2 * var(--u));
}
#board li { display: flex; gap: calc(1.4 * var(--u)); line-height: 1.5; color: #fff; }
#board li em { font-style: normal; opacity: 0.6; width: 1.6em; }
#board li:nth-child(1) em { color: var(--gold); opacity: 1; }
#board li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(19 * var(--u)); min-width: calc(14 * var(--u)); }
#board li b { font-weight: normal; color: #c8f5b4; }
#board li.you { background: rgba(255, 207, 46, 0.22); border-radius: calc(1 * var(--u)); margin: 0 calc(-1 * var(--u)); padding: 0 calc(1 * var(--u)); }
#board li.you span, #board li.you b, #board li.you em { color: var(--gold); opacity: 1; }
#board li.gap { opacity: 0.5; justify-content: center; line-height: 0.8; }
#map {
  position: absolute; left: 3vw; top: calc(env(safe-area-inset-top) + 16 * var(--u));
  width: calc(26 * var(--u)); height: calc(26 * var(--u)); display: none; pointer-events: none;
  border-radius: 50%; box-shadow: 0 0 0 calc(0.8 * var(--u)) #fff, 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(30, 38, 80, 0.45);
}
body.playing #map { display: block; }
#buffs {
  position: absolute; left: 3vw; top: calc(env(safe-area-inset-top) + 45 * var(--u));
  display: none; flex-direction: column; gap: calc(1 * var(--u)); pointer-events: none;
}
body.playing #buffs { display: flex; }
.buff {
  position: relative; display: none; overflow: hidden; min-width: calc(26 * var(--u));
  padding: calc(0.8 * var(--u)) calc(2.4 * var(--u)); border-radius: 99px;
  background: rgba(42, 51, 88, 0.72); box-shadow: inset 0 0 0 calc(0.5 * var(--u)) rgba(255, 255, 255, 0.55);
  font-size: calc(3.4 * var(--u)); color: #fff; animation: buffIn 0.35s cubic-bezier(.2,1.6,.4,1);
}
.buff.on { display: block; }
.buff i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.buff span { position: relative; text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.35); }
.buff.pepper i { background: linear-gradient(#ff8a5c, #ff4a2a); }
.buff.bell i   { background: linear-gradient(#ffd84a, #e6a800); }
.buff.magnet i { background: linear-gradient(#7ab8ff, #3a7fe0); }
.buff.shroom i { background: linear-gradient(#ff7ad6, #d93ab0); }
.buff.cloak i  { background: linear-gradient(#b8a4ff, #7a62e8); }
.buff.low { animation: buffBlink 0.25s steps(2) infinite; }
@keyframes buffIn { from { transform: scale(0.4); opacity: 0; } }
@keyframes buffBlink { 50% { opacity: 0.4; } }
#feed {
  position: absolute; left: 3vw; top: calc(env(safe-area-inset-top) + 72 * var(--u));
  display: flex; flex-direction: column; gap: calc(0.8 * var(--u)); pointer-events: none;
  font-family: var(--f-body); font-size: calc(3.4 * var(--u));
}
#feed div { background: rgba(42, 51, 88, 0.72); color: #fff; padding: calc(0.6 * var(--u)) calc(2.4 * var(--u)); border-radius: 99px; animation: feed 4s both; align-self: flex-start; }
#feed div b { color: var(--gold); font-weight: normal; font-family: var(--f-ui); }
#feed div.mine { background: rgba(255, 207, 46, 0.92); color: var(--ink); text-shadow: none; }
#feed div.mine b { color: var(--ink); }
@keyframes feed { 0% { opacity: 0; transform: translateX(-20%); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

#stam {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 4 * var(--u));
  width: calc(36 * var(--u)); height: calc(3 * var(--u)); border-radius: 99px; overflow: hidden;
  background: rgba(42, 51, 88, 0.72); box-shadow: 0 0 0 calc(0.5 * var(--u)) #fff; display: none;
}
#stamFill { height: 100%; width: 100%; background: linear-gradient(#ffe36a, var(--gold-d)); border-radius: 99px; }
#stam.low #stamFill { background: #9aa3c0; }
body.playing.keys #stam { display: block; }

#edge { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; box-shadow: inset 0 0 calc(18 * var(--u)) calc(4 * var(--u)) rgba(255, 60, 60, 0.75); }
body.playing #edge.on { opacity: 1; animation: edgePulse 0.6s ease-in-out infinite alternate; }
@keyframes edgePulse { to { opacity: 0.55; } }

#tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tag {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  font-family: var(--f-ui); font-size: calc(3.2 * var(--u)); color: #fff;
  paint-order: stroke fill; -webkit-text-stroke: calc(0.6 * var(--u)) rgba(42, 51, 88, 0.85);
}
.tag.you { color: var(--gold); font-size: calc(3.8 * var(--u)); }

/* ---------- touch controls ---------- */
#stick {
  position: absolute; left: 0; top: 0; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: calc(-15 * var(--u)) 0 0 calc(-15 * var(--u));
  border-radius: 50%; background: rgba(42, 51, 88, 0.3); box-shadow: inset 0 0 0 calc(0.8 * var(--u)) rgba(255, 255, 255, 0.75);
  display: none; pointer-events: none;
}
#stick.on { display: block; }
#knob {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%;
  background: url('../img/ui/circle.png') center / contain no-repeat;
}
#bonk {
  position: absolute; right: calc(5vw + env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 8 * var(--u));
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; padding: 0 0 calc(1.6 * var(--u));
  background: url('../img/ui/circle_red.png') center / contain no-repeat; color: #fff;
  display: none; place-items: center; touch-action: none; transition: transform 0.06s;
}
body.playing.touch #bonk { display: grid; }
#bonk span { position: relative; font-family: var(--f-title); font-size: calc(6.4 * var(--u)); text-shadow: 0 0.08em 0 rgba(120, 0, 0, 0.45); }
#bonk svg { position: absolute; inset: calc(-3 * var(--u)); width: calc(100% + 6 * var(--u)); height: calc(100% + 6 * var(--u)); transform: rotate(-90deg); }
#bonk circle { fill: none; }
#bonk .track { stroke: rgba(42, 51, 88, 0.35); stroke-width: 5; }
#bonk .stam { stroke: var(--gold); stroke-width: 5; stroke-dasharray: 100 100; stroke-linecap: round; }
#bonk .charge { stroke: #fff; stroke-width: 7; stroke-dasharray: 0 100; stroke-linecap: round; }
#bonk.held { transform: scale(0.93); }
#bonk.tired { filter: grayscale(0.7) brightness(0.9); }

#hint { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 40 * var(--u)); text-align: center; pointer-events: none; display: none; }
body.playing #hint.on { display: block; animation: feed 7s both; }
#hint p { display: none; margin: 0 auto; width: fit-content; max-width: 86vw; padding: calc(1.6 * var(--u)) calc(3.6 * var(--u)); border-radius: calc(3 * var(--u));
  background: rgba(42, 51, 88, 0.8); color: #fff; font-family: var(--f-body); font-size: calc(4 * var(--u)); line-height: 1.35; }
#hint b { color: var(--gold); font-weight: normal; font-family: var(--f-ui); }
body.touch #hint .touch, body.keys #hint .keys { display: block; }

/* ---------- popups: a white card, a ribbon for its title ---------- */
#over, #pause, #adWait { background: rgba(20, 26, 56, 0.55); justify-content: center; }
.panel {
  position: relative; width: min(92vw, calc(96 * var(--u))); max-width: 520px;
  border-style: solid; border-width: calc(12 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  border-image: url('../img/ui/popup.png') 68 fill / calc(6 * var(--u));
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(2.6 * var(--u));
  color: var(--ink); animation: popIn 0.28s cubic-bezier(.2,1.6,.4,1);
}
@keyframes popIn { from { transform: scale(0.6); opacity: 0; } }
.ribbon {
  margin: calc(-20 * var(--u)) 0 calc(-1 * var(--u)); min-width: 82%; height: calc(17 * var(--u));
  display: flex; align-items: center; justify-content: center;
  border-style: solid; border-width: 0 calc(12 * var(--u)) calc(3 * var(--u));
  border-image: url('../img/ui/ribbon_red.png') 0 112 30 112 fill / 0 calc(12 * var(--u)) calc(3 * var(--u));
  font-family: var(--f-title); font-weight: normal; font-size: calc(8 * var(--u)); line-height: 1; color: #fff; white-space: nowrap;
  text-shadow: 0 0.06em 0 rgba(120, 0, 30, 0.4);
}
.ribbon.blue { border-image-source: url('../img/ui/ribbon_blue.png'); text-shadow: 0 0.06em 0 rgba(0, 30, 120, 0.4); }
.panel p { margin: 0; color: var(--ink-2); font-family: var(--f-body); font-size: calc(4.4 * var(--u)); max-width: 92%; }
.panel p b { color: var(--ink); font-family: var(--f-ui); font-weight: normal; }
.panel .btn { width: 100%; }
#over .col { display: flex; flex-direction: column; align-items: center; gap: calc(2.4 * var(--u)); width: 100%; }
#newBest {
  font-family: var(--f-ui); font-size: calc(4.6 * var(--u)); color: #6b3d00; background: linear-gradient(#ffe36a, var(--gold));
  padding: calc(0.8 * var(--u)) calc(3.4 * var(--u)); border-radius: 99px; box-shadow: 0 calc(0.6 * var(--u)) 0 var(--gold-d);
  animation: pulse 0.8s ease-in-out infinite;
}
#stats { display: flex; gap: calc(2 * var(--u)); width: 100%; }
#stats div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: calc(1.8 * var(--u)) calc(1 * var(--u)) calc(1.4 * var(--u));
  border-radius: calc(3 * var(--u)); background: var(--cream); box-shadow: inset 0 calc(-0.6 * var(--u)) 0 var(--line-c); }
#stats b { font-family: var(--f-title); font-weight: normal; font-size: calc(7.6 * var(--u)); line-height: 1.1; color: var(--blue); }
#stats div:first-child b { color: #f08a00; }
#stats div:nth-child(2) b { color: var(--red); }
#stats span { font-family: var(--f-body); font-size: calc(3.2 * var(--u)); color: var(--ink-2); }
#pay { width: 100%; display: flex; flex-direction: column; gap: calc(0.6 * var(--u));
  padding: calc(1.8 * var(--u)) calc(3.4 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--cream);
  font-family: var(--f-body); font-size: calc(3.8 * var(--u)); color: var(--ink-2); }
#pay div { display: flex; align-items: center; gap: calc(1.2 * var(--u)); }
#pay span { flex: 1; text-align: left; }
#pay b { font-family: var(--f-ui); font-weight: normal; color: var(--ink); }
#pay .total { margin-top: calc(0.4 * var(--u)); padding-top: calc(1 * var(--u)); border-top: calc(0.4 * var(--u)) dashed var(--line-c);
  font-family: var(--f-ui); font-size: calc(5.4 * var(--u)); color: var(--ink); }
#pay .total b { font-family: var(--f-title); color: #f08a00; font-size: 1.15em; }

/* ---------- banner, toast, floating text ---------- */
#banner {
  position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none;
  font-family: var(--f-title); font-size: calc(12 * var(--u)); color: #fff; opacity: 0;
  paint-order: stroke fill; -webkit-text-stroke: calc(1.4 * var(--u)) var(--navy);
  filter: drop-shadow(0 calc(0.8 * var(--u)) 0 rgba(30, 38, 90, 0.5));
}
#banner.show { animation: banner 1.2s cubic-bezier(.2,1.4,.4,1) both; }
#banner.ko { color: var(--gold); }
#banner.bad { color: #ff7a7a; }
#banner.item { color: #8cffa8; font-size: calc(9 * var(--u)); }
#banner.feed { color: #ffc070; }
#banner.pepper { color: #ff9a7a; }
#banner.bell { color: #ffd84a; }
#banner.magnet { color: #8ac8ff; }
#banner.shroom { color: #ff8ae0; }
#banner.cloak { color: #d9d0ff; }
@keyframes banner {
  0% { opacity: 0; transform: scale(2.2); }
  18% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(0.9) translateY(-30%); }
}
#toast {
  position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 30 * var(--u)); transform: translateX(-50%);
  padding: calc(1.2 * var(--u)) calc(3.6 * var(--u)); border-radius: 99px; background: rgba(42, 51, 88, 0.8); color: #fff;
  font-family: var(--f-body); font-size: calc(3.8 * var(--u)); white-space: nowrap; opacity: 0; pointer-events: none;
}
#toast b { color: #b8ffa0; font-weight: normal; font-family: var(--f-ui); }
#toast.show { animation: toast 2.6s both; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -40%); } 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
#pops { position: absolute; inset: 0; overflow: hidden; }
.pop {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--f-title); font-size: calc(6.4 * var(--u));
  transform: translate(-50%, -50%); will-change: transform, opacity;
  paint-order: stroke fill; -webkit-text-stroke: calc(0.9 * var(--u)) var(--navy); color: #fff;
}
.pop.good { color: #8cffa8; }
.pop.bad { color: #ff7a7a; }
.pop.gold { color: var(--gold); font-size: calc(8 * var(--u)); }
.pop.small { font-size: calc(4.6 * var(--u)); }

/* ---------- the wardrobe: the cow on show at the top, a sheet of cards below ---------- */
#wardrobe { justify-content: space-between; padding: 0; }
#wTop { display: flex; align-items: center; gap: calc(3 * var(--u)); width: 100%; padding: calc(env(safe-area-inset-top) + 3 * var(--u)) 4vw 0; }
#wTop h2 {
  margin: 0; flex: 1; font-family: var(--f-title); font-weight: normal; font-size: calc(8 * var(--u)); color: #fff;
  paint-order: stroke fill; -webkit-text-stroke: calc(1.2 * var(--u)) var(--navy);
}
#wSheet {
  width: 100%; height: 56%; display: flex; flex-direction: column; gap: calc(2.4 * var(--u));
  padding: calc(3.4 * var(--u)) 4vw calc(env(safe-area-inset-bottom) + 3 * var(--u));
  background: var(--cream); border-radius: calc(7 * var(--u)) calc(7 * var(--u)) 0 0;
  box-shadow: 0 calc(-1 * var(--u)) calc(3 * var(--u)) rgba(30, 38, 80, 0.25);
}
#wTabs { display: flex; gap: calc(1.4 * var(--u)); width: 100%; flex: none; }
.wtab {
  flex: 1; min-height: calc(10 * var(--u)); display: grid; place-items: center;
  border-style: solid; border-width: calc(2 * var(--u)) calc(1 * var(--u));
  border-image: url('../img/ui/tab.png') 47 49 fill / calc(3.6 * var(--u));
  font-family: var(--f-ui); font-size: calc(3.2 * var(--u)); color: var(--ink-2); white-space: nowrap;
}
.wtab.on { border-image-source: url('../img/ui/tab_on.png'); color: #fff; }
#wGrid {
  flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2.4 * var(--u));
  align-content: start; padding: calc(0.8 * var(--u)) calc(0.6 * var(--u)) calc(2 * var(--u)); touch-action: pan-y; -webkit-overflow-scrolling: touch;
}
.wcard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(0.4 * var(--u)); min-width: 0;
  padding: calc(1.2 * var(--u)) calc(1.2 * var(--u)) calc(1.6 * var(--u)); border-radius: calc(3.6 * var(--u));
  background: var(--paper); color: var(--ink); box-shadow: 0 calc(0.8 * var(--u)) 0 var(--line-c), 0 0 0 calc(0.4 * var(--u)) var(--line-c);
  transition: transform 0.08s;
}
.wcard:active { transform: translateY(calc(0.5 * var(--u))); }
.wcard img { width: 100%; aspect-ratio: 1; border-radius: calc(2.6 * var(--u)); background: radial-gradient(circle at 50% 65%, #d6f2c8, #a8dcff 75%); }
.wcard b { font-family: var(--f-ui); font-weight: normal; font-size: calc(3.5 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wcard span { display: flex; align-items: center; gap: calc(0.6 * var(--u)); font-family: var(--f-ui); font-size: calc(3 * var(--u)); color: var(--ink-2); }
/* a card not owned shows the cow in its true colours: the price says it is not yours yet */
.wcard.locked span { color: #f08a00; }
.wcard.worn { background: #eafbe2; box-shadow: 0 calc(0.8 * var(--u)) 0 #bfe8ab, 0 0 0 calc(0.5 * var(--u)) #9adf7f; }
.wcard.worn span { color: #2f9a3a; }
.wcard.sel { box-shadow: 0 calc(0.8 * var(--u)) 0 var(--gold-d), 0 0 0 calc(0.8 * var(--u)) var(--gold); }
#wButtons { display: flex; gap: calc(2.4 * var(--u)); width: 100%; flex: none; }
#wDice { min-width: 0; flex: 0 0 auto; width: calc(20 * var(--u)); }
#wDice img { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
#wAction { flex: 1; min-width: 0; font-size: calc(5 * var(--u)); }
#wAction.poor { --img: url('../img/ui/btn_gray.png'); color: #fff; animation: none; text-shadow: none; }
#wAction.shake { animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-4%); } 75% { transform: translateX(4%); } }

/* ---------- help ---------- */
#help { background: var(--cream); padding: 0; color: var(--ink); }
#helpTop { display: flex; align-items: center; gap: calc(3 * var(--u)); width: 100%;
  padding: calc(env(safe-area-inset-top) + 3 * var(--u)) 4vw calc(2.4 * var(--u));
  background: linear-gradient(#6f9cff, #4f7cf0); box-shadow: 0 calc(0.8 * var(--u)) 0 #3a5fc8; }
#helpTop h2 { margin: 0; flex: 1; font-family: var(--f-title); font-weight: normal; font-size: calc(7.6 * var(--u)); color: #fff; text-shadow: 0 0.06em 0 rgba(0, 20, 90, 0.35); }
#helpBody { flex: 1; width: 100%; max-width: 640px; overflow-y: auto; padding: calc(2 * var(--u)) 5vw calc(env(safe-area-inset-bottom) + 8 * var(--u));
  touch-action: pan-y; -webkit-overflow-scrolling: touch; user-select: text; -webkit-user-select: text; }
#helpBody section { margin-top: calc(4 * var(--u)); }
#helpBody h3 { margin: 0 0 calc(1.6 * var(--u)); font-family: var(--f-title); font-weight: normal; font-size: calc(5.6 * var(--u)); color: #3a6fe8; }
#helpBody p, #helpBody li { font-family: var(--f-body); font-size: calc(3.9 * var(--u)); line-height: 1.5; margin: 0 0 calc(1.2 * var(--u)); color: var(--ink); }
#helpBody ul { margin: 0; padding-left: 1.2em; }
#helpBody b { color: #e07a00; font-family: var(--f-ui); font-weight: normal; }
#helpBody .small { font-size: calc(3.4 * var(--u)); color: var(--ink-2); }
.hitem { display: flex; align-items: center; gap: calc(3 * var(--u)); padding: calc(1.8 * var(--u)); margin-bottom: calc(2 * var(--u));
  background: var(--paper); border-radius: calc(3.6 * var(--u)); box-shadow: 0 calc(0.8 * var(--u)) 0 var(--line-c), 0 0 0 calc(0.4 * var(--u)) var(--line-c); }
.hitem img { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; border-radius: calc(2.6 * var(--u)); background: radial-gradient(circle, #fff6d8, #f3e7c4 75%); }
.hitem div { flex: 1; }
.hitem div b { font-family: var(--f-ui) !important; font-size: calc(4.6 * var(--u)); color: var(--ink) !important; }
.hitem div p { margin: calc(0.4 * var(--u)) 0 0 !important; font-size: calc(3.5 * var(--u)) !important; color: var(--ink-2) !important; }
.hitem em { font-style: normal; font-family: var(--f-ui); font-size: calc(3.4 * var(--u)); color: #6b3d00; background: linear-gradient(#ffe36a, var(--gold));
  border-radius: 99px; padding: calc(0.5 * var(--u)) calc(2.2 * var(--u)); white-space: nowrap; box-shadow: 0 calc(0.4 * var(--u)) 0 var(--gold-d); }

/* ---------- landscape: the unit follows height; menus spread sideways ---------- */
@media (orientation: landscape) {
  :root { --u: min(0.6vw, 0.72vh); }
  #menu { padding-top: calc(env(safe-area-inset-top) + 10 * var(--u)); align-items: flex-start; padding-left: calc(6vw + env(safe-area-inset-left));
    background: linear-gradient(90deg, rgba(20, 30, 70, 0.3), rgba(20, 30, 70, 0) 40%, rgba(20, 30, 70, 0) 60%, rgba(20, 30, 70, 0.35)); }
  #menuTop { left: auto; right: 3.5vw; }
  #menuWallet { right: auto; left: calc(6vw + env(safe-area-inset-left)); top: auto; bottom: calc(env(safe-area-inset-bottom) + 5 * var(--u)); }
  #menuCard { position: absolute; right: calc(6vw + env(safe-area-inset-right)); bottom: calc(env(safe-area-inset-bottom) + 6 * var(--u)); width: calc(84 * var(--u)); }
  #title .moo { font-size: calc(20 * var(--u)); }
  #title .io { font-size: calc(13 * var(--u)); }
  #hint { bottom: calc(env(safe-area-inset-bottom) + 14 * var(--u)); }
  #bonk { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
  #wardrobe { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  #wTop { position: absolute; left: 0; top: 0; width: 45%; }
  #wSheet { margin-left: auto; width: 55%; height: 100%; border-radius: calc(7 * var(--u)) 0 0 calc(7 * var(--u)); padding-top: calc(env(safe-area-inset-top) + 3 * var(--u)); }
  #wGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* the end panel side by side: the verdict on the left, the pay and the buttons on the right */
  #over .panel { flex-direction: row; align-items: center; justify-content: center; gap: calc(6 * var(--u));
    width: min(94vw, 1100px); max-width: none; border-width: calc(10 * var(--u)) calc(11 * var(--u)) calc(9 * var(--u)); }
  /* columns may shrink below their content (a long ribbon title must not
     push them past the card's padding) */
  #over .col { flex: 1 1 0; min-width: 0; max-width: calc(110 * var(--u)); }
  #over #overL .ribbon { margin-top: 0; min-width: 0; width: 100%; font-size: calc(6.6 * var(--u)); }
  #over .btn { min-width: 0; }
  #over .btn { min-height: calc(13 * var(--u)); font-size: calc(5.4 * var(--u)); }
}
/* inside a card the pulse stays inside the padding */
.panel .btn.gold { animation-name: pulseSmall; }
@keyframes pulseSmall { 50% { transform: scale(1.02); } }
/* the touch button and the hint have no business over an open panel */
body:has(#over:not(.hide)) #bonk, body:has(#over:not(.hide)) #hint,
body:has(#pause:not(.hide)) #bonk, body:has(#pause:not(.hide)) #hint,
body:has(#over:not(.hide)) #toast, body:has(#over:not(.hide)) #feed, body:has(#over:not(.hide)) #banner { display: none !important; }
/* the tier of a designer's cow, on its card */
.wcard .tier { position: absolute; top: calc(1.6 * var(--u)); left: calc(1.6 * var(--u)); z-index: 1; font-style: normal;
  font-size: calc(2.4 * var(--u)); padding: calc(0.3 * var(--u)) calc(1.4 * var(--u)); border-radius: 99px; color: #fff; letter-spacing: 0.04em; }
.tier.t0 { background: #8a94b4; } .tier.t1 { background: #3fb85a; } .tier.t2 { background: #3a8cff; }
.tier.t3 { background: linear-gradient(90deg, #ff4a4a, #ffb02a, #3ad84a, #2a9aff, #a84aff); }
.tier.t4 { background: linear-gradient(#ffd23a, #e89a00); color: #5a3000; }
.wtab { font-size: calc(2.9 * var(--u)); }