@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/silkscreen-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/silkscreen-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/vt323-latin-400-normal.woff2) format('woff2');}
/* Layout: one full-screen game. The city fills the screen with a GTA-style HUD on top; the story, the menu,
   the map, Hellstones and Mozart's files open as layers over it. Single dark (night) theme by design. */
:root {
  --night: #0d0f17;      /* Söder at night */
  --panel: #171a27;      /* camera-feed panels */
  --edge-hi: #3b4260;    /* bevel light edge */
  --edge-lo: #05060b;    /* bevel dark edge */
  --paper: #e9e4d7;      /* text, lit by streetlight */
  --muted: #9aa0b6;
  --sodium: #ffa53a;     /* the rebels: sodium streetlights, spray paint */
  --rose: #e99ab0;       /* Deftones haze */
  --fagel: #4aa3ff;      /* the oppressor: fågel.com blue */
  --rec: #ff4d4d;        /* REC, alarms */
  --cash: #7fe0a0;       /* money */
  --manila: #d6c69c;     /* case-file folders */
  --manila-ink: #1d180f;
  --f-px: 'Silkscreen', 'Courier New', monospace;
  --f-term: 'VT323', 'Courier New', monospace;
  --f-body: Verdana, Tahoma, 'DejaVu Sans', Geneva, sans-serif;
  --sl: max(10px, env(safe-area-inset-left, 0px));
  --sr: max(10px, env(safe-area-inset-right, 0px));
  --st: max(10px, env(safe-area-inset-top, 0px));
  --sb: max(10px, env(safe-area-inset-bottom, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; background: var(--night); color: var(--paper); font: 15px/1.5 var(--f-body); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
a { color: var(--sodium); }
:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app { position: fixed; inset: 0; overflow: hidden; background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'%3E%3Crect width='48' height='48' fill='%230d0f17'/%3E%3Crect x='6' y='8' width='1' height='3' fill='%231a1e30'/%3E%3Crect x='30' y='20' width='1' height='3' fill='%231a1e30'/%3E%3Crect x='18' y='38' width='1' height='3' fill='%23161a2a'/%3E%3Crect x='40' y='4' width='2' height='1' fill='%231f2438'/%3E%3Crect x='12' y='26' width='2' height='1' fill='%2320253b'/%3E%3Crect x='36' y='33' width='1' height='1' fill='%232a3050'/%3E%3Crect x='3' y='44' width='1' height='1' fill='%232a3050'/%3E%3Crect x='24' y='12' width='1' height='1' fill='%2322273d'/%3E%3C/svg%3E"); background-size: 48px 48px; }

/* ---------- pixel icons ---------- */
.ico { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-eye{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM1 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM11 6h1v1h-1zM1 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1z'/%3E%3C/svg%3E")}
.ico-book{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM1 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM10 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM1 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM10 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM1 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM10 6h1v1h-1zM1 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM10 8h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM10 9h1v1h-1z'/%3E%3C/svg%3E")}
.ico-file{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM1 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM9 2h1v1h-1zM10 2h1v1h-1zM1 3h1v1h-1zM10 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM10 4h1v1h-1zM1 5h1v1h-1zM10 5h1v1h-1zM1 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM1 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM10 8h1v1h-1zM1 9h1v1h-1zM10 9h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1zM10 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-car{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM2 3h1v1h-1zM5 3h1v1h-1zM9 3h1v1h-1zM1 4h1v1h-1zM5 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM10 6h1v1h-1zM11 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM11 7h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1z'/%3E%3C/svg%3E")}
.ico-tape{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M0 1h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM11 1h1v1h-1zM0 2h1v1h-1zM11 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM0 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM11 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM9 7h1v1h-1zM11 7h1v1h-1zM0 8h1v1h-1zM1 8h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM10 8h1v1h-1zM11 8h1v1h-1z'/%3E%3C/svg%3E")}
.ico-ticket{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM9 2h1v1h-1zM10 2h1v1h-1zM11 2h1v1h-1zM0 3h1v1h-1zM4 3h1v1h-1zM11 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM11 4h1v1h-1zM4 5h1v1h-1zM0 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM11 6h1v1h-1zM0 7h1v1h-1zM4 7h1v1h-1zM11 7h1v1h-1zM0 8h1v1h-1zM1 8h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM10 8h1v1h-1zM11 8h1v1h-1z'/%3E%3C/svg%3E")}
.ico-bird{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1z'/%3E%3C/svg%3E")}
.ico-spk{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM9 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM10 8h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM9 9h1v1h-1zM6 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-map{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M0 1h1v1h-1zM1 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM10 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM7 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM7 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM7 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM7 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM0 8h1v1h-1zM3 8h1v1h-1zM7 8h1v1h-1zM10 8h1v1h-1zM0 9h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1zM11 9h1v1h-1zM0 10h1v1h-1zM1 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-menu{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M0 1h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM11 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM9 2h1v1h-1zM10 2h1v1h-1zM11 2h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM10 6h1v1h-1zM11 6h1v1h-1zM0 9h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM10 9h1v1h-1zM11 9h1v1h-1zM0 10h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1zM10 10h1v1h-1zM11 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-phone{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1h-1zM4 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM7 0h1v1h-1zM8 0h1v1h-1zM2 1h1v1h-1zM9 1h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM9 2h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM7 3h1v1h-1zM9 3h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM7 4h1v1h-1zM9 4h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM9 5h1v1h-1zM2 6h1v1h-1zM9 6h1v1h-1zM2 7h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1zM9 7h1v1h-1zM2 8h1v1h-1zM9 8h1v1h-1zM2 9h1v1h-1zM4 9h1v1h-1zM6 9h1v1h-1zM9 9h1v1h-1zM2 10h1v1h-1zM9 10h1v1h-1zM3 11h1v1h-1zM4 11h1v1h-1zM5 11h1v1h-1zM6 11h1v1h-1zM7 11h1v1h-1zM8 11h1v1h-1z'/%3E%3C/svg%3E")}
.ico-heart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M2 1h1v1h-1zM3 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1z'/%3E%3C/svg%3E")}
.ico-cards{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM2 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM0 8h1v1h-1zM8 8h1v1h-1zM10 8h1v1h-1zM0 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM10 9h1v1h-1zM0 10h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-msg{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM0 2h1v1h-1zM11 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM0 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM11 6h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM2 8h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1z'/%3E%3C/svg%3E")}
.ico-mis{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h1v1h-1zM2 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM1 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM1 4h1v1h-1zM9 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1zM1 8h1v1h-1zM1 9h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h1v1h-1zM6 1h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM10 4h1v1h-1zM11 4h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM1 10h1v1h-1zM10 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M2 1h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM2 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-mute{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM9 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM8 7h1v1h-1zM11 7h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM6 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-reset{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM4 2h1v1h-1zM9 2h1v1h-1zM2 3h1v1h-1zM10 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM10 5h1v1h-1zM2 6h1v1h-1zM10 6h1v1h-1zM2 7h1v1h-1zM10 7h1v1h-1zM3 8h1v1h-1zM9 8h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1z'/%3E%3C/svg%3E")}
.ico-call{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h1v1h-1zM2 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM10 8h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM10 9h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1z'/%3E%3C/svg%3E")}
.ico-full{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM8 0h1v1h-1zM9 0h1v1h-1zM10 0h1v1h-1zM11 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM11 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM10 2h1v1h-1zM11 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM10 3h1v1h-1zM11 3h1v1h-1zM0 8h1v1h-1zM1 8h1v1h-1zM10 8h1v1h-1zM11 8h1v1h-1zM0 9h1v1h-1zM1 9h1v1h-1zM10 9h1v1h-1zM11 9h1v1h-1zM0 10h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM8 10h1v1h-1zM9 10h1v1h-1zM10 10h1v1h-1zM11 10h1v1h-1zM0 11h1v1h-1zM1 11h1v1h-1zM2 11h1v1h-1zM3 11h1v1h-1zM8 11h1v1h-1zM9 11h1v1h-1zM10 11h1v1h-1zM11 11h1v1h-1z'/%3E%3C/svg%3E")}
.ico-guitar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' shape-rendering='crispEdges'%3E%3Cpath d='M11 0h1v1h-1zM12 0h1v1h-1zM10 1h1v1h-1zM11 1h1v1h-1zM12 1h1v1h-1zM9 2h1v1h-1zM10 2h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM0 8h1v1h-1zM1 8h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM0 9h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM2 11h1v1h-1zM3 11h1v1h-1z'/%3E%3C/svg%3E")}
.ico-hand{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM9 3h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM10 6h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM10 7h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1zM4 11h1v1h-1zM5 11h1v1h-1zM6 11h1v1h-1zM7 11h1v1h-1zM8 11h1v1h-1z'/%3E%3C/svg%3E")}
.g-eyes{--eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM7 0h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM1 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM10 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM11 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM11 4h1v1h-1zM1 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM10 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1z'/%3E%3C/svg%3E")}
.g-guitar{--gt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' shape-rendering='crispEdges'%3E%3Cpath d='M11 0h1v1h-1zM12 0h1v1h-1zM10 1h1v1h-1zM11 1h1v1h-1zM12 1h1v1h-1zM9 2h1v1h-1zM10 2h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM0 8h1v1h-1zM1 8h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM0 9h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM2 11h1v1h-1zM3 11h1v1h-1z'/%3E%3C/svg%3E")}
.g-life i{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M2 1h1v1h-1zM3 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1z'/%3E%3C/svg%3E")}
.g-cards-ico{--cd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM2 2h1v1h-1zM9 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM8 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM0 8h1v1h-1zM8 8h1v1h-1zM10 8h1v1h-1zM0 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM10 9h1v1h-1zM0 10h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1z'/%3E%3C/svg%3E")}
.g-bx-ico{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM9 3h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM10 6h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM10 7h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM8 10h1v1h-1zM4 11h1v1h-1zM5 11h1v1h-1zM6 11h1v1h-1zM7 11h1v1h-1zM8 11h1v1h-1z'/%3E%3C/svg%3E")}
.ph-ico-sms{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM8 1h1v1h-1zM9 1h1v1h-1zM10 1h1v1h-1zM0 2h1v1h-1zM11 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM0 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM11 6h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM2 8h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1z'/%3E%3C/svg%3E")}
.ph-ico-mis{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h1v1h-1zM2 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM1 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM1 4h1v1h-1zM9 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1zM1 8h1v1h-1zM1 9h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1z'/%3E%3C/svg%3E")}
.ph-ico-fagel{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M6 2h1v1h-1zM7 2h1v1h-1zM8 2h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM8 3h1v1h-1zM9 3h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM9 7h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1z'/%3E%3C/svg%3E")}
.ph-ico-me{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h1v1h-1zM6 1h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM8 4h1v1h-1zM9 4h1v1h-1zM10 4h1v1h-1zM11 4h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM8 5h1v1h-1zM9 5h1v1h-1zM10 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM8 6h1v1h-1zM9 6h1v1h-1zM3 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM8 7h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM7 8h1v1h-1zM8 8h1v1h-1zM9 8h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM8 9h1v1h-1zM9 9h1v1h-1zM1 10h1v1h-1zM10 10h1v1h-1z'/%3E%3C/svg%3E")}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; font: 700 12px/1.1 var(--f-px); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; color: var(--paper); background: linear-gradient(#2b3149, #1b1f30); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); box-shadow: 0 0 0 1px #000; cursor: pointer; user-select: none; transition: transform .12s ease, filter .15s ease; }
.btn:hover { filter: brightness(1.18); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo); }
.btn:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.btn.sm { min-height: 36px; padding: 7px 11px; font-size: 11px; }
.btn.big { min-height: 52px; padding: 14px 22px; font-size: 14px; }
.btn-sodium { color: #1b1206; background: linear-gradient(#ffbf6b, #f0891b); border-color: #ffe0b5 #8a4807 #8a4807 #ffe0b5; }
.btn-ghost { background: rgba(13, 15, 23, .6); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.x { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); background: #232842; color: var(--paper); cursor: pointer; font: 700 14px var(--f-px); }
@keyframes blink { to { visibility: hidden; } }

/* ================= THE CITY ================= */
.game { position: absolute; inset: 0; overflow: hidden; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; background: #05060b; }
#g-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transition: filter .4s; }
#g-cv.gray { filter: grayscale(1) contrast(1.15) brightness(.75); }
.g-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--f-px); }
.g-hud button { pointer-events: auto; }
.g-tl { position: absolute; left: var(--sl); top: var(--st); display: grid; gap: 6px; justify-items: start; }
.g-radar { width: 96px; height: 96px; image-rendering: pixelated; border-radius: 50%; box-shadow: 0 0 0 2px #000, 3px 3px 0 rgba(0, 0, 0, .5); pointer-events: auto; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.g-radar:hover { transform: scale(1.05); box-shadow: 0 0 0 2px #000, 0 0 0 4px rgba(255, 226, 122, .55), 3px 3px 0 rgba(0, 0, 0, .5); }
.g-radar:active { transform: scale(.97); }
.g-radar:focus-visible { outline: 3px solid #ffe27a; outline-offset: 3px; }
.g-me { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; background: rgba(5, 6, 12, .75); font-size: 11px; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.g-me canvas { width: 24px; height: 26px; image-rendering: pixelated; background: #1b1f33; }
.g-me-t { display: grid; gap: 1px; }
.g-fame { display: flex; gap: 2px; }
.g-fame i { width: 7px; height: 7px; background: rgba(233, 228, 215, .22); clip-path: polygon(50% 0, 62% 38%, 100% 38%, 69% 60%, 80% 100%, 50% 75%, 20% 100%, 31% 60%, 0 38%, 38% 38%); }
.g-fame i.on { background: var(--rose); }
.g-fame.pop { animation: pop .5s ease; }
.g-aura { font: 700 10px var(--f-px); color: #ffe27a; letter-spacing: .04em; }
.g-aura.pop { animation: aurapop .7s ease; }
@keyframes aurapop { 30% { transform: scale(1.5); color: #fff; text-shadow: 0 0 8px #ffe27a, 0 0 16px #ffb030; } }
.g-life { display: flex; gap: 2px; padding: 2px 4px; background: rgba(5, 6, 12, .65); }
.g-life i { width: 13px; height: 13px; background: rgba(233, 228, 215, .2); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.g-life i.on { background: #ff4a6a; }
.g-life.pop i.on { animation: heart .5s ease; }
.g-life i.gain, .g-life.pop i.gain { animation: heartGain 1.1s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes heartGain { 0% { transform: scale(.1); background: #fff6c8; } 35% { transform: scale(1.9); background: #ffe27a; } 60% { transform: scale(.9); background: #ffb86a; } 80% { transform: scale(1.15); } 100% { transform: scale(1); background: #ff4a6a; } }
.g-heart-burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 30; }
.g-heart-burst i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; background: #ffe27a; box-shadow: 0 0 6px #ffd23a; opacity: 0; animation: heartBurst .8s ease-out both; animation-delay: inherit; transform: rotate(var(--a)); }
@keyframes heartBurst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-22px) scale(.4); } }
.g-gold { position: absolute; inset: 0; pointer-events: none; z-index: 8; opacity: 0; background: radial-gradient(ellipse at 50% 55%, rgba(255, 220, 120, .06), rgba(255, 196, 70, .2) 70%, rgba(255, 170, 40, .32)); mix-blend-mode: screen; }
.g-gold.on { animation: goldWash 3.4s ease-out both; }
@keyframes goldWash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .g-gold.on { animation-duration: 1.4s; } .g-life i.gain { animation: none; } }
@keyframes heart { 40% { transform: scale(1.4); background: #fff; } }
.g-phone { position: absolute; right: calc(var(--sr) + 21px); bottom: calc(var(--sb) + 94px); width: 42px; height: 79px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55)); transition: transform .12s ease; }
.g-phone canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.g-phone:hover { transform: translateY(-2px) rotate(-3deg); }
.g-phone:active { transform: scale(.94); }
.g-phone.ring { animation: phring .09s linear 10; }
.g-phone.wait { animation: phwait 1.2s ease-in-out infinite; }
@keyframes phwait { 0%, 100% { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 0 rgba(127, 224, 160, 0)); transform: none; } 50% { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 6px rgba(127, 224, 160, .9)); transform: translateY(-3px) rotate(-4deg); } }
.ph-app.hot { animation: phhot 1s ease-in-out infinite; }
@keyframes phhot { 50% { background: #10200a; color: #bfe0a0; } }
.ph-list li.has-call { grid-template-columns: 30px minmax(0, 1fr) auto; }
.ph-call { align-self: center; min-width: 34px; height: 34px; padding: 0 6px; font: 700 16px/1 var(--f-px); color: #10200a; background: rgba(255, 255, 255, .35); border: 2px solid #10200a; cursor: pointer; }
.ph-call .ico { width: 18px; height: 18px; display: block; }
.ph-call:disabled { font-size: 8px; text-transform: uppercase; }
a.ph-app { text-decoration: none; }
.ph-call.live { color: #10200a; background: #7fe0a0; animation: phhot 1s ease-in-out infinite; }
@keyframes phring { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
.game.touch .g-phone { right: calc(var(--sr) + 119px); bottom: calc(var(--sb) + 84px); }
#hud-phone .badge { position: absolute; right: -6px; top: -6px; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; font: 700 9px var(--f-px); color: #fff; background: var(--rec); border: 2px solid #000; }
.g-tr { position: absolute; right: var(--sr); top: var(--st); display: grid; justify-items: end; gap: 2px; text-shadow: 2px 2px 0 #000; }
.g-btns { display: flex; gap: 6px; margin-bottom: 4px; }
.g-btns button { width: 42px; height: 38px; display: grid; place-items: center; color: var(--paper); background: rgba(13, 15, 23, .85); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); cursor: pointer; }
.g-btns .ico { width: 18px; height: 18px; }
.g-where { font: 17px/1 var(--f-term); color: var(--paper); opacity: .78; letter-spacing: .06em; text-transform: uppercase; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.g-where.new { animation: wherein .6s ease; }
@keyframes wherein { from { opacity: 0; transform: translateY(-4px); } to { opacity: .78; transform: none; } }
.g-where:empty { display: none; }
.g-clock { font: 34px/1 var(--f-term); color: var(--paper); font-variant-numeric: tabular-nums; }
.g-money { font: 30px/1 var(--f-term); color: var(--cash); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.g-money.pop { animation: pop .4s ease; }
@keyframes pop { 40% { transform: scale(1.25); color: #fff; } }
.g-files { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--manila); }
.g-files .ico { width: 14px; height: 14px; }
.g-eyes { display: flex; gap: 3px; margin-top: 3px; }
.g-eyes i { width: 15px; height: 10px; background: rgba(233, 228, 215, .25); -webkit-mask: var(--eye) center / contain no-repeat; mask: var(--eye) center / contain no-repeat; }
.g-eyes i.on { background: var(--rec); }
.g-eyes.hot i.on { animation: eyehot .5s steps(2) infinite; }
@keyframes eyehot { 50% { background: var(--fagel); } }
.g-safe { position: absolute; left: 50%; top: calc(var(--st) + 6px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 10px; font: 700 9px var(--f-px); letter-spacing: .08em; text-transform: uppercase; color: #1b1206; background: linear-gradient(#ffd8a0, #ffb060); border: 2px solid #000; box-shadow: 0 0 18px rgba(255, 170, 90, .55), 3px 3px 0 rgba(0, 0, 0, .5); white-space: nowrap; }
.g-safe i { width: 8px; height: 8px; border-radius: 50%; background: #3ad08a; box-shadow: 0 0 6px #3ad08a; }
.g-safe span { font: 15px/1 var(--f-term); letter-spacing: 0; text-transform: none; }
.g-sms { position: relative; margin-top: 2px; max-width: min(330px, 60vw); padding: 8px 10px; background: rgba(8, 9, 16, .93); border: 2px solid var(--sodium); box-shadow: 3px 3px 0 #000; display: grid; gap: 2px; }
.g-sms b { font-size: 10px; color: var(--sodium); letter-spacing: .08em; }
.g-sms b::before { content: '✉ SMS FRÅN '; color: var(--muted); }
.g-sms { grid-template-columns: 40px minmax(0, 1fr); column-gap: 9px; align-items: start; }
.g-sms > div { display: grid; gap: 2px; min-width: 0; }
.g-sms canvas { width: 40px; height: 43px; image-rendering: pixelated; border: 2px solid #000; background: #13261a; }
.g-sms[data-app="djungel"] { border-color: #3fa862; }
.g-sms.call { animation: smscall 1.1s ease-in-out infinite; }
.g-sms.call > div::after { content: 'kolla luren'; margin-top: 3px; font: 700 9px var(--f-px); letter-spacing: .12em; text-transform: uppercase; color: #7fe0a0; opacity: .8; justify-self: start; }
@keyframes smscall { 50% { box-shadow: 3px 3px 0 #000, 0 0 0 3px rgba(127, 224, 160, .45); } }
.g-goal.in { animation: goalin .6s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes goalin { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 60% { opacity: 1; transform: translateY(-3px) scale(1.05); } }
.g-sms[data-app="djungel"] b { color: #7fe0a0; }
.g-sms[data-app="djungel"] b::before { content: 'DJUNGELTELEGRAFEN · '; color: #3fa862; }
.g-sms[data-app="whatsdata"] { border-color: var(--fagel); }
.g-sms[data-app="whatsdata"] b { color: #9fd0ff; }
.g-sms[data-app="whatsdata"] b::before { content: 'WHATSDATA? · '; color: var(--fagel); }
.g-sms[data-app="whatsdata"] canvas { background: #0b1a33; }
.g-sms span { font: 20px/1.15 var(--f-term); color: var(--paper); }
.g-sms.pop { animation: smsin .35s ease both; }
@keyframes smsin { from { transform: translateX(-20px); opacity: 0; } }
.g-goal-row { position: absolute; left: 50%; bottom: var(--sb); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; max-width: calc(100% - 300px); }
.g-goal { font-size: 11px; color: #ffd23a; background: rgba(5, 6, 12, .82); padding: 7px 11px; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.g-goal:empty { display: none; }
.g-timer { font: 44px/1 var(--f-term); color: var(--paper); text-shadow: 2px 2px 0 #000; font-variant-numeric: tabular-nums; }
.g-timer.low { color: var(--rec); }
.g-prompt { position: absolute; left: 50%; bottom: calc(var(--sb) + 44px); transform: translateX(-50%); font: 18px/1.1 var(--f-term); color: rgba(244, 238, 222, .9); background: rgba(5, 6, 12, .36); padding: 3px 9px; border-radius: 3px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .8); white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.g-toast { position: absolute; left: 50%; top: 26%; transform: translate(-50%, 0) scale(.6); opacity: 0; font: 700 clamp(18px, 3.2vw, 32px)/1.1 var(--f-px); text-transform: uppercase; text-align: center; color: var(--paper); text-shadow: 3px 3px 0 #000, -1px -1px 0 #000; white-space: normal; width: max-content; max-width: min(92%, 900px); text-wrap: balance; transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.g-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.g-toast.sodium { color: var(--sodium); } .g-toast.fagel { color: var(--fagel); } .g-toast.rec { color: var(--rec); } .g-toast.rose { color: var(--rose); }
.g-toast.aura { color: #ffe27a; text-shadow: 3px 3px 0 #000, 0 0 12px rgba(255, 210, 90, .8); }
.g-meter { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; font-size: 10px; color: var(--fagel); text-transform: uppercase; letter-spacing: .1em; text-shadow: 1px 1px 0 #000; }
.g-meter i { width: 160px; height: 9px; background: rgba(5, 6, 12, .8); border: 1px solid var(--fagel); position: relative; }
.g-meter i::after { content: ''; position: absolute; inset: 0; width: calc(var(--m, 0) * 100%); background: linear-gradient(90deg, var(--fagel), var(--rec)); }
.g-hint { position: absolute; left: 50%; bottom: calc(var(--sb) + 84px); transform: translateX(-50%); font: 18px var(--f-term); color: var(--paper); background: rgba(5, 6, 12, .8); padding: 6px 10px; width: max-content; max-width: min(820px, calc(100% - 380px)); text-align: center; line-height: 1.5; }
.g-hint .k { font: 700 10px var(--f-px); color: #1b1206; background: var(--sodium); padding: 2px 5px; margin: 0 2px 0 8px; }
.g-hint .k:first-child { margin-left: 0; }

/* the guitar button: hidden until the guitar is found */
.g-guitar { position: absolute; right: var(--sr); bottom: var(--sb); width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; cursor: pointer; font: 700 11px var(--f-px); text-transform: uppercase; color: #1b1206; background: radial-gradient(circle at 35% 30%, #ffd08a, #ff8a2a 60%, #b8520c); border: 3px solid #000; box-shadow: 4px 4px 0 rgba(0, 0, 0, .5), inset -3px -3px 0 rgba(0, 0, 0, .25); }
.g-guitar-ico { width: 30px; height: 30px; background: #1b1206; -webkit-mask: var(--gt) center / contain no-repeat; mask: var(--gt) center / contain no-repeat; }
.g-guitar:active { transform: scale(.94); }
.g-guitar.cool { filter: saturate(.4) brightness(.8); }
.g-guitar.new { animation: gnew 1.2s cubic-bezier(.2, .9, .3, 1.4) both, gcall 1s ease 1.2s 3; }
@keyframes gnew { 0% { transform: scale(0) rotate(-180deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }
.g-guitar.call { animation: gcall .55s ease 6; }
@keyframes gcall { 50% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(255, 165, 58, .45), 0 0 30px 10px rgba(255, 165, 58, .55); } }
.g-joy, .g-tb { display: none; }
.game.touch .g-joy { display: block; position: absolute; left: calc(var(--sl) + 6px); bottom: calc(var(--sb) + 6px); width: 128px; height: 128px; border-radius: 50%; background: rgba(233, 228, 215, .08); border: 2px solid rgba(233, 228, 215, .3); pointer-events: auto; touch-action: none; }
.g-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(233, 228, 215, .35); border: 2px solid rgba(233, 228, 215, .6); }
.game.touch .g-tb { display: grid; place-items: center; position: absolute; border-radius: 50%; font: 700 10px var(--f-px); text-transform: uppercase; border: 3px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); touch-action: none; }
.g-bx { right: calc(var(--sr) + 106px); bottom: calc(var(--sb) + 6px); width: 68px; height: 68px; background: var(--fagel); color: #06131f; font-size: 24px !important; }
.g-bx:active { transform: scale(.94); }
/* the business cards (Vinterfestivalen) */
.g-cardsbtn { position: absolute; right: calc(var(--sr) + 14px); bottom: calc(var(--sb) + 110px); display: grid; justify-items: center; gap: 1px; padding: 6px 8px 4px; cursor: pointer; font: 700 9px var(--f-px); text-transform: uppercase; color: #16161c; background: linear-gradient(#f0ffa0, #d8ff3a); border: 3px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
.g-cardsbtn b { font: 18px/1 var(--f-term); }
.g-cards-ico { width: 20px; height: 20px; background: #16161c; -webkit-mask: var(--cd) center / contain no-repeat; mask: var(--cd) center / contain no-repeat; }
.g-cardsbtn:active { transform: scale(.94); }
.g-cardsbtn.new { animation: gnew 1.2s cubic-bezier(.2, .9, .3, 1.4) both; }
.game:not(.touch) .g-cardsbtn { right: calc(var(--sr) + 96px); bottom: var(--sb); }
.game.touch .g-goal-row { bottom: calc(var(--sb) + 172px); max-width: 92%; }
.game.touch .g-prompt { bottom: calc(var(--sb) + 210px); }
.game.touch .g-hint { display: none; }
.game:not(.touch) .g-guitar { width: 84px; height: 84px; }
/* a button you have not unlocked yet: grey, scanlines and a little static, so you know something will be here */
.g-guitar.locked { cursor: default; color: transparent; background: radial-gradient(circle at 35% 30%, #5a5d66, #34363d 60%, #1f2025); box-shadow: 4px 4px 0 rgba(0, 0, 0, .5), inset -3px -3px 0 rgba(0, 0, 0, .3); overflow: hidden; }
.g-guitar.locked > * { visibility: hidden; }
.g-guitar.locked::after, .g-phone.locked::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px); animation: lockscan 1.6s steps(6) infinite; }
.g-guitar.locked::before { content: '· · ·'; visibility: visible; position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px var(--f-px); color: #8a8e9a; letter-spacing: .1em; animation: lockblink 2.4s steps(2) infinite; }
.g-guitar.locked:active { transform: none; }
.g-phone.locked { cursor: default; filter: grayscale(1) brightness(.7) drop-shadow(3px 3px 0 rgba(0, 0, 0, .55)); }
.g-phone.locked::after { inset: 2px 3px; border-radius: 6px; }
.g-phone.locked:hover, .g-phone.locked:active { transform: none; }
.g-phone.unlock, .g-guitar.unlock { animation: gnew 1.2s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes lockscan { to { background-position: 0 6px; } }
@keyframes lockblink { 50% { opacity: .35; } }

/* talking on the street */
.g-talk { --tag: var(--sodium); position: absolute; z-index: 5; left: 50%; bottom: var(--sb); transform: translateX(-50%); width: min(760px, calc(100% - 20px)); display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 12px; background: rgba(8, 9, 16, .95); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); border-top: 3px solid var(--tag); box-shadow: 4px 4px 0 #000; cursor: pointer; animation: talkin .22s ease-out both; }
/* a new line slides in a little from the right (it keeps its own centring) */
@keyframes talkin { from { opacity: 0; transform: translateX(calc(-50% + 14px)); } to { opacity: 1; transform: translateX(-50%); } }
.g-talk canvas { width: 72px; height: 78px; image-rendering: pixelated; background: linear-gradient(#1b1f33, #0b0c15); align-self: start; }
.g-talk-t b { font: 700 12px var(--f-px); text-transform: uppercase; color: var(--tag); letter-spacing: .08em; }
.g-talk-t p { margin: 4px 0 0; font: 23px/1.18 var(--f-term); min-height: 2.4em; }
.g-talk-opts { grid-column: 1 / -1; display: grid; gap: 6px; }
/* the bird button's picture inside a prompt: Tryck [fågel] för att … */
.k-bird { display: inline-block; vertical-align: -0.3em; width: 1.7em; height: 1.45em; margin: 0 .25em; padding: 2px 3px; background: var(--fagel); border: 2px solid #000; border-radius: 50%; box-shadow: 2px 2px 0 rgba(0,0,0,.45); }
.k-bird svg { display: block; width: 100%; height: 100%; }
.g-prompt .k-bird { width: 1.45em; height: 1.2em; padding: 1px 2px; border-width: 1px; box-shadow: none; vertical-align: -0.25em; }
.g-prompt .k-e { margin-right: .3em; font: 700 10px var(--f-px); color: #1b1206; background: var(--sodium); padding: 2px 5px; vertical-align: .1em; }
.g-hint .k-bird { margin-left: 8px; }
/* the answers open up under the question: the box grows */
.g-talk-opts.grow { animation: optsgrow .38s cubic-bezier(.2, .8, .2, 1) both; overflow: hidden; }
.g-talk-opts.grow .g-opt { animation: optin .3s ease-out both; } .g-talk-opts.grow .g-opt:nth-child(2) { animation-delay: .08s; } .g-talk-opts.grow .g-opt:nth-child(3) { animation-delay: .16s; }
@keyframes optsgrow { from { max-height: 0; opacity: 0; } to { max-height: 340px; opacity: 1; } }
@keyframes optin { from { opacity: 0; transform: translateY(6px); } }
/* a choice that matters: one small line about how they are right now, above the question */
.g-talk-t .g-talk-info { margin: 1px 0 3px; min-height: 0; font: italic 14px/1.25 var(--f-term); color: var(--muted); opacity: .9; }
/* what a choice did: small numbers rising over the dialogue box (-10 AURA, +1 BANDSPEL) */
.g-fx { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--sb) + 150px); transform: translateX(-50%); display: flex; gap: 10px; pointer-events: none; }
.g-fx span { font: 700 13px var(--f-px); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; background: rgba(8, 9, 16, .85); border: 2px solid currentColor; box-shadow: 3px 3px 0 #000; animation: fxrise 5.2s ease-out forwards; }
.g-fx span.up { color: #7fe0a0; } .g-fx span.down { color: #ff7a7a; } .g-fx span.odd { color: var(--sodium); }
@keyframes fxrise { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
.g-opt { text-align: left; padding: 8px 12px; font: 21px/1.15 var(--f-term); color: var(--paper); background: #161a2a; border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); cursor: pointer; }
.g-opt:hover, .g-opt:focus-visible { background: #22283e; color: #ffe27a; }
.g-ov { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 16px; background: rgba(5, 6, 12, .72); }
.g-big { margin: 0; font: 700 clamp(32px, 7vw, 68px)/1 var(--f-px); text-transform: uppercase; text-shadow: 4px 4px 0 #000; }
.g-big.bad { color: var(--rec); }
.g-over-text { margin: 0; max-width: 44ch; text-shadow: 1px 1px 0 #000; }

/* ================= THE STORY ================= */
.cin { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: #000; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.cin-stage { position: relative; flex: 1; min-height: 0; cursor: pointer; }
.cin-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.cin-stage canvas.cut { animation: cut .35s steps(3) both; }
@keyframes cut { 0% { opacity: 0; filter: brightness(3); } 100% { opacity: 1; filter: none; } }
.cin-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px); }
.cin-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; pointer-events: none; }
#cin-card-kicker { font: 700 12px var(--f-px); letter-spacing: .24em; text-transform: uppercase; color: var(--rose); }
#cin-card-no { font: 700 clamp(14px, 2.2vw, 20px) var(--f-px); letter-spacing: .3em; text-transform: uppercase; color: var(--sodium); }
#cin-card-name { font: 700 clamp(36px, 8vw, 96px)/1 var(--f-px); text-transform: uppercase; color: var(--paper); text-shadow: 4px 0 rgba(255, 77, 77, .55), -4px 0 rgba(74, 163, 255, .55), 0 6px 0 #000; }
.cin-card.in span { animation: cardin .9s cubic-bezier(.2, .8, .2, 1) both; }
.cin-card.in span:nth-child(2) { animation-delay: .3s; }
.cin-card.in span:nth-child(3) { animation-delay: .6s; }
@keyframes cardin { from { opacity: 0; letter-spacing: .6em; filter: blur(4px); } }
.cin-strip { --tag: var(--sodium); display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; width: min(900px, 100%); margin: 0 auto; min-height: 112px; padding: 12px max(16px, env(safe-area-inset-left, 0px)) 6px max(16px, env(safe-area-inset-right, 0px)); border-top: 3px solid var(--tag); background: #0b0c15; cursor: pointer; }
.cin-strip.cap { grid-template-columns: minmax(0, 1fr); }
.cin-strip.empty { border-top-color: transparent; background: #000; }
.cin-strip canvas { width: 72px; height: 78px; image-rendering: pixelated; background: linear-gradient(#1b1f33, #0b0c15); }
.cin-say b { display: block; font: 700 12px var(--f-px); text-transform: uppercase; letter-spacing: .08em; color: var(--tag); }
.cin-say b:empty { display: none; }
.cin-say p { margin: 4px 0 0; font: 25px/1.18 var(--f-term); color: var(--paper); min-height: 2.36em; }
.cin-strip.cap .cin-say p { color: #f3e7cf; }
.cin-strip.cap .cin-say p::before { content: '▌ '; color: var(--sodium); }
.cin-bar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; width: min(900px, 100%); margin: 0 auto; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); background: #0b0c15; }
.cin.search .cin-bar { background: #0b0c15; }
.cin-next { min-width: 180px; }
.cin-skip { margin-right: auto; background: none; border: 0; color: var(--muted); font: 700 11px var(--f-px); text-transform: uppercase; text-decoration: underline; cursor: pointer; padding: 10px 4px; }

/* ================= TITLE ================= */
.screen { position: absolute; inset: 0; z-index: 15; }
.title > canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.title::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .2) 2px 3px), linear-gradient(90deg, rgba(5, 6, 12, .85), rgba(5, 6, 12, .2) 70%); }
.title-in { position: absolute; z-index: 2; left: max(24px, env(safe-area-inset-left, 0px) + 16px); right: 16px; bottom: max(28px, env(safe-area-inset-bottom, 0px) + 16px); max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.eyebrow { margin: 0; font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .16em; color: var(--rose); }
.title h1 { margin: 14px 0 0; padding-top: .1em; line-height: 0; transform: rotate(-4deg); transform-origin: left bottom; }
.logo-img { display: block; width: clamp(260px, 44vw, 620px); height: auto; image-rendering: pixelated; filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, .45)); }
.t-who { display: flex; align-items: center; gap: 10px; font: 20px var(--f-term); }
.t-who canvas { width: 48px; height: 52px; image-rendering: pixelated; background: #1b1f33; border: 2px solid var(--edge-hi); }
.t-pick { margin: 6px 0 0; font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.t-slots { display: grid; gap: 8px; width: min(460px, 100%); }
.t-slot { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; text-align: left; color: var(--paper); background: rgba(13, 15, 23, .82); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); box-shadow: 0 0 0 1px #000; cursor: pointer; transition: transform .12s ease, filter .15s ease; }
.t-slot:hover { filter: brightness(1.15); transform: translateX(3px); }
.t-slot.cur { border-left: 4px solid var(--sodium); }
.t-slot canvas { width: 48px; height: 52px; image-rendering: pixelated; background: #1b1f33; border: 2px solid #000; }
.t-slot .t-empty { width: 48px; height: 52px; display: grid; place-items: center; font: 700 20px var(--f-px); color: #4a4f66; background: repeating-linear-gradient(-45deg, #13151f 0 6px, #181b28 6px 12px); border: 2px solid #000; }
.t-slot b { display: block; font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: var(--sodium); }
.t-slot span { display: block; font: 19px/1.15 var(--f-term); }
.t-slot small { display: block; font-size: 12px; color: var(--muted); }
.t-slot .t-go { font: 700 11px var(--f-px); text-transform: uppercase; color: #1b1206; background: var(--sodium); padding: 6px 9px; border: 2px solid #000; white-space: nowrap; }
.t-slot.empty .t-go { color: var(--paper); background: #232842; }
.t-del { justify-self: start; background: none; border: 0; padding: 2px 0 6px; color: var(--muted); font: 700 10px var(--f-px); text-transform: uppercase; text-decoration: underline; cursor: pointer; }
.t-ask { display: grid; gap: 8px; padding: 10px 12px; background: rgba(5, 6, 12, .92); border: 2px solid var(--rec); }
.t-ask p { margin: 0; font-size: 14px; }
.t-ask .cta { display: flex; gap: 8px; flex-wrap: wrap; }
.t-reset { background: none; border: 0; color: var(--muted); font: 700 11px var(--f-px); text-transform: uppercase; text-decoration: underline; cursor: pointer; padding: 8px 0; }
.t-confirm { padding: 12px 14px; background: rgba(5, 6, 12, .9); border: 2px solid var(--rec); display: grid; gap: 10px; }
.t-confirm p { margin: 0; }

/* ================= WHO ARE YOU ================= */
.select { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow-y: auto; background: radial-gradient(ellipse at 50% 40%, #1d2236, #07080d 70%); padding: var(--st) var(--sr) var(--sb) var(--sl); }
.s-cam { display: flex; justify-content: space-between; padding: 4px 6px; font: 19px var(--f-term); text-transform: uppercase; color: var(--muted); }
.rec-dot { color: var(--rec); animation: blink 1.2s steps(2, start) infinite; }
.select h2 { margin: 6px 0 0; text-align: center; font: 700 clamp(30px, 6vw, 56px)/1 var(--f-px); text-transform: uppercase; text-shadow: 3px 0 rgba(255, 77, 77, .5), -3px 0 rgba(74, 163, 255, .5); }
.s-wall { position: relative; align-self: center; width: min(980px, 100%); margin: 0 auto; padding: 18px 8px 0; background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(233, 228, 215, .12) 39px 40px); }
.s-lines { position: absolute; left: 4px; top: 18px; display: grid; gap: 22px; font: 16px/1 var(--f-term); color: rgba(233, 228, 215, .35); }
.s-row { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; align-items: end; }
.s-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 2px 8px; cursor: pointer; background: transparent; border: 0; position: relative; transition: transform .2s ease; }
.s-hero canvas { width: 96px; height: 192px; image-rendering: pixelated; max-width: 100%; height: auto; aspect-ratio: 1 / 2; }
.s-hero.on { transform: translateY(-6px); }
.s-hero.on::before { content: ''; position: absolute; inset: -18px 6% 30px; background: radial-gradient(ellipse at 50% 0%, rgba(255, 220, 150, .35), transparent 70%); pointer-events: none; }
.s-plate { font: 700 11px var(--f-px); text-transform: uppercase; color: var(--muted); background: #0b0c15; padding: 4px 6px; border: 1px solid var(--edge-hi); }
.s-hero.on .s-plate { color: #1b1206; background: var(--sodium); border-color: #000; }
.s-info { width: min(720px, 100%); margin: 14px auto 6px; padding: 14px 16px; background: rgba(8, 9, 16, .9); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: start; }
.s-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; grid-column: 1 / -1; }
.s-head b { font: 700 24px var(--f-px); text-transform: uppercase; }
.s-head span { font: 20px var(--f-term); color: var(--rose); text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.s-info p { margin: 0; color: #c9cbd6; max-width: 56ch; }
.s-stats { margin: 0; display: grid; grid-template-columns: auto auto; gap: 4px 10px; align-items: center; font: 18px var(--f-term); }
.s-stats dt { color: var(--muted); }
.s-stats dd { margin: 0; display: flex; gap: 3px; }
.s-stats i { width: 12px; height: 10px; background: #262a40; }
.s-stats i.on { background: var(--sodium); }
#s-go { grid-column: 1 / -1; justify-self: start; }

/* ================= PANELS (menu, map, shop, files) ================= */
.panel-screen { position: absolute; inset: 0; z-index: 18; display: grid; place-items: center; overflow-y: auto; padding: var(--st) var(--sr) var(--sb) var(--sl); background: rgba(3, 4, 10, .78); }
.panel { width: min(460px, 100%); background: var(--panel); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); box-shadow: 0 0 0 1px #000, 8px 8px 0 rgba(0, 0, 0, .45); animation: smsin .25s ease both; }
.panel.wide { width: min(920px, 100%); }
.panel > div:not(.panel-bar), .panel > p, .panel > ul { margin: 14px; }
.panel-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: linear-gradient(90deg, #232842, #151826); border-bottom: 2px solid var(--edge-lo); }
.panel-bar > span:first-child { color: var(--paper); }
.mn-list { display: grid; gap: 8px; }
.mn-list .btn { width: 100%; justify-content: flex-start; }
/* the pause menu: what you are doing now, one big "go on", then everything else as icon tiles, settings last */
.mn-panel { width: min(520px, 100%); }
.mn-bar-r { display: flex; align-items: center; gap: 10px; }
.mn-bar-r .x { width: 30px; height: 30px; font-size: 12px; }
#mn-clock { font: 700 11px var(--f-px); color: var(--muted); }
.mn-brief { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 12px; margin-bottom: 10px; background: #0b0c15; border: 2px solid #000; border-left: 3px solid var(--sodium); }
.mn-brief .ico { width: 22px; height: 22px; color: var(--sodium); }
.mn-brief b { display: block; font: 700 12px/1.3 var(--f-px); text-transform: uppercase; letter-spacing: .05em; color: var(--paper); }
.mn-brief span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.mn-go { width: 100%; }
.mn-go .ico { width: 14px; height: 14px; }
.mn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.mn-tile { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 0; min-height: 92px; padding: 12px 6px 10px; text-align: center; color: var(--paper); background: linear-gradient(#2b3149, #1b1f30); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); box-shadow: 0 0 0 1px #000; cursor: pointer; user-select: none; transition: transform .12s ease, filter .15s ease; }
.mn-tile:hover { filter: brightness(1.18); transform: translateY(-1px); }
.mn-tile:active { transform: translateY(1px); border-color: var(--edge-lo) var(--edge-hi) var(--edge-hi) var(--edge-lo); }
.mn-tile .ico { width: 26px; height: 26px; margin-bottom: 2px; color: var(--sodium); }
.mn-tile b { font: 700 11px/1.2 var(--f-px); text-transform: uppercase; letter-spacing: .04em; }
.mn-tile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.25; color: var(--muted); }
.mn-tile kbd { position: absolute; top: 5px; right: 5px; padding: 1px 4px; font: 700 9px var(--f-px); color: #1b1206; background: var(--sodium); opacity: .8; }
.mn-dot { position: absolute; top: 6px; left: 6px; min-width: 16px; height: 16px; padding: 0 3px; display: grid; place-items: center; font: 700 9px var(--f-px); font-style: normal; color: #fff; background: var(--rec); border: 2px solid #000; }
.mn-set { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 2px dashed #262b40; }
.mn-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; font: 700 10px var(--f-px); text-transform: uppercase; letter-spacing: .05em; color: var(--paper); background: #131623; border: 2px solid #2c3250; cursor: pointer; }
.mn-ver { margin: 14px 0 0; font: 700 9px var(--f-px); letter-spacing: .06em; text-transform: uppercase; color: #6b7090; }
.mn-chip:hover { border-color: var(--edge-hi); }
.mn-chip .ico { width: 14px; height: 14px; }
.mn-chip[aria-pressed="false"] { color: var(--muted); }
.mn-chip.danger { margin-left: auto; color: #ff9a9a; border-color: #4a2330; }
@media (hover: none) { .mn-tile kbd { display: none; } }
@media (max-width: 440px) { .mn-tile { min-height: 84px; } .mn-tile b { font-size: 10px; letter-spacing: 0; } .mn-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-chip { justify-content: center; gap: 5px; padding: 8px 4px; font-size: 9px; letter-spacing: .02em; } .mn-chip.danger { margin-left: 0; } .mn-vol { grid-column: 1 / -1; } .mn-vol input { flex: 1; width: auto; } }
.mn-note { color: #c9cbd6; margin: 0 0 12px; }
.mn-rows { display: grid; gap: 8px; margin-bottom: 12px; }
.mn-row { display: grid; gap: 2px; text-align: left; padding: 10px 12px; cursor: pointer; background: linear-gradient(#20253a, #161927); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); }
.mn-row b { font: 700 12px var(--f-px); text-transform: uppercase; }
.mn-row span { font-size: 13px; color: var(--muted); }
.mn-row.locked { opacity: .55; cursor: default; background: repeating-linear-gradient(-45deg, #161927 0 10px, #1b1e2e 10px 20px); }
.mini-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 18px 8px; margin: 18px 0 14px; }
.mini-file { position: relative; display: grid; gap: 4px; justify-items: center; padding: 6px 4px; cursor: pointer; color: var(--manila-ink); background: linear-gradient(170deg, #e0d1a8, var(--manila)); border: 1px solid #8f7d4f; box-shadow: 3px 3px 0 #000; font: 700 9px var(--f-px); text-transform: uppercase; }
.mini-file::before { content: attr(data-subj); position: absolute; left: -1px; top: -13px; padding: 2px 6px 1px; font: 700 8px var(--f-px); background: #e0d1a8; border: 1px solid #8f7d4f; border-bottom: 0; }
.mini-file canvas { width: 48px; height: 52px; image-rendering: pixelated; }
.mini-file.unknown { opacity: .5; cursor: default; }
.ticket { position: relative; display: grid; gap: 10px; margin: 6px 0 16px; padding: 16px 16px 14px 28px; color: #1b1710; background: #ece5d2; box-shadow: 5px 5px 0 #000; }
.ticket::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; border-left: 3px dotted #b8ad90; }
.ticket-k { margin: 0; display: flex; justify-content: space-between; font: 700 10px var(--f-px); text-transform: uppercase; letter-spacing: .1em; color: #b3242a; }
.ticket label { font: 700 12px var(--f-px); text-transform: uppercase; }
.ticket-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ticket input { flex: 1; min-width: 140px; padding: 6px 10px; font: 30px/1 var(--f-term); letter-spacing: .12em; text-transform: uppercase; color: #1b1710; background: #fff9ea; border: 2px solid; border-color: #6b5f45 #fff #fff #6b5f45; }
.code-msg { margin: 0; min-height: 1.2em; font: 19px/1.2 var(--f-term); }
.code-msg.ok { color: #1f6a3a; } .code-msg.bad { color: #b3242a; }
.ticket-note { margin: 0; font-size: 12px; color: #6b5f45; }

/* map */
.map-wrap { overflow: auto; background: #05060b; border: 2px solid var(--edge-lo); touch-action: pan-x pan-y; cursor: grab; overscroll-behavior: contain; }
.map-wrap.drag { cursor: grabbing; }
.map-zoom { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 8px; }
.map-zoom button { width: 28px; height: 28px; font: 700 16px var(--f-px); color: #14161c; background: #ffd23a; border: 0; box-shadow: 2px 2px 0 #000; cursor: pointer; }
.map-zoom button:disabled { opacity: .35; cursor: default; }
.map-zoom b { min-width: 30px; text-align: center; font: 700 10px var(--f-px); color: #ffd23a; }
.map-wrap canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.zones { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.zones li { display: grid; gap: 2px; padding: 8px 10px; border-left: 6px solid var(--z); background: #10121c; }
.zones b { font: 700 11px var(--f-px); text-transform: uppercase; color: var(--z); }
.zones span { font-size: 13px; color: #c9cbd6; }

/* Hellstones */
.shop { background: linear-gradient(#1d1a14, #12100c); border-color: #6a5a2a #050403 #050403 #6a5a2a; }
.shop-bar { background: linear-gradient(90deg, #3a2e12, #1a1508); }
.shop-bar > span:first-child { color: #f0c850; font-size: 13px; }
.shop-money { margin-left: auto; font: 32px/1 var(--f-term); color: var(--cash); }
.shop-owner { font: 24px/1.25 var(--f-term); color: #e8d9a8; }
.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; }
.shop-tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.shop-tabs button { padding: 10px 16px; font: 700 14px var(--f-px); text-transform: uppercase; cursor: pointer; color: #c9b88c; background: #1a160c; border: 2px solid #3a2e12; }
.shop-tabs button.on { color: #1b1206; background: #f0c850; border-color: #000; }
.shop-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.item { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px; background: linear-gradient(#26200f, #1a160c); border: 2px solid #3a2e12; }
.item-art { display: grid; place-items: center; min-height: 196px; background: radial-gradient(ellipse at 50% 35%, #4a3c1c, #120f08 75%); border: 2px solid #0a0804; box-shadow: inset 0 0 18px rgba(0, 0, 0, .7); }
.item-art canvas { width: 144px; height: 192px; image-rendering: pixelated; filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, .55)); transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.k-amps .item-art canvas { width: 168px; height: 192px; }
.item:hover .item-art canvas { transform: translateY(-3px) rotate(-1deg); }
.item-t { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.item-t b { font: 700 18px/1.2 var(--f-px); text-transform: uppercase; color: #f0e2b8; overflow-wrap: anywhere; hyphens: auto; }
.item-t p { margin: 0; font: 16px/1.45 var(--f-body); color: #d6c69c; }
.item-rare { font: 700 11px var(--f-px); font-style: normal; text-transform: uppercase; letter-spacing: .1em; color: #e8e3d6; background: #16161c; border: 1px solid #e8e3d6; padding: 2px 6px; align-self: start; }
.item-fx { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.item-fx li { font: 700 12px/1.25 var(--f-px); text-transform: uppercase; color: #1b1206; background: #f0c850; padding: 5px 8px; }
.item-buy { margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.item-price { font: 32px/1 var(--f-term); color: var(--cash); white-space: nowrap; }
.item-buy .btn.xs { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.item-price.poor { color: #ff4a4a; }
.btn.xs { min-height: 30px; padding: 5px 10px; font-size: 10px; }
.item.owned { border-color: #6a5a2a; }
.item.using { border-color: var(--cash); box-shadow: 0 0 0 1px var(--cash) inset; }
.item.rare { background: linear-gradient(#1c1c22, #0e0e12); border-color: #e8e3d6; }
.item.rare .item-art { background: radial-gradient(ellipse at 50% 35%, #2a2a34, #0a0a0e 75%); }
.item.bought::after { content: 'Köpt'; position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-10deg) scale(.5); padding: 4px 10px; font: 700 18px var(--f-px); text-transform: uppercase; color: var(--cash); border: 3px solid var(--cash); background: rgba(5, 6, 12, .85); animation: stamp .45s cubic-bezier(.2, .9, .3, 1.5) forwards; }
.rig-board { width: 100%; height: auto; image-rendering: pixelated; border: 2px solid #3a2e12; }
@keyframes stamp { to { transform: translate(-50%, -50%) rotate(-10deg) scale(1); } }
.rig { padding: 12px; background: #0b0c15; border: 2px solid #3a2e12; display: grid; gap: 8px; align-content: start; }
.rig h3 { margin: 0; font: 700 13px var(--f-px); text-transform: uppercase; color: #f0c850; }
.rig-name { margin: 0; font: 18px/1.15 var(--f-term); color: var(--paper); }
.rig-bars { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; margin: 0; font: 17px var(--f-term); }
.rig-bars dt { color: var(--muted); }
.rig-bars dd { margin: 0; height: 9px; background: #262a40; }
.rig-bars i { display: block; height: 100%; width: var(--v); background: linear-gradient(90deg, var(--sodium), var(--rose)); transition: width .4s ease; }
.rig-k { margin: 6px 0 0; font: 700 10px var(--f-px); text-transform: uppercase; color: var(--muted); }
.rig-zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rig-zones li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; color: #c9cbd6; }
.rig-zones b { font: 24px/1 var(--f-term); color: var(--z); text-align: right; }

/* a file */
.files-screen { z-index: 19; }
.file-box { position: relative; width: min(760px, 100%); color: var(--manila-ink); background: linear-gradient(170deg, #e2d3ab, var(--manila) 55%, #c7b68a); border: 1px solid #8f7d4f; box-shadow: 8px 8px 0 #000; }
.file-box.in { animation: filein .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.file-box.new { animation: filenew .7s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes filein { from { transform: translateY(30px) rotate(2deg); opacity: 0; } }
@keyframes filenew { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 70% { transform: scale(1.04) rotate(1deg); opacity: 1; } 100% { transform: none; } }
.m-tab { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font: 700 11px var(--f-px); letter-spacing: .1em; border-bottom: 1px dashed #8f7d4f; }
.m-tab .x { border-color: #f0e4c4 #6b5a32 #6b5a32 #f0e4c4; background: #cbb987; color: var(--manila-ink); }
.m-body { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 20px; padding: 18px; }
.m-photo { position: relative; align-self: start; background: #0b0c15; border: 3px solid #1d180f; box-shadow: 3px 3px 0 rgba(0, 0, 0, .3); transform: rotate(-1.5deg); }
.m-photo canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.m-ts { position: absolute; left: 6px; bottom: 4px; font: 16px var(--f-term); color: #e9e4d7; text-shadow: 1px 1px 0 #000; }
.m-text h3 { margin: 0; font: 700 26px var(--f-px); text-transform: uppercase; }
.m-role { margin: 2px 0 12px; color: #4a3f28; }
.m-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0 0 14px; font: 21px/1.15 var(--f-term); }
.m-dl dt { font: 700 10px/2 var(--f-px); text-transform: uppercase; color: #5a4c2c; }
.m-dl dd { margin: 0; }
.m-loy { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.bar { flex: 1; max-width: 160px; height: 9px; background: #9a8858; border: 1px solid #5a4c2c; }
.bar i { display: block; height: 100%; width: var(--v, 0%); background: var(--fagel); transition: width .12s; }
.bar.full i { background: #1d4f9a; }
.m-note { margin: 0 0 12px; padding: 10px 12px; background: rgba(255, 255, 255, .35); border-left: 4px solid #b3242a; font: 21px/1.2 var(--f-term); }
.m-note b { display: block; font: 700 10px var(--f-px); text-transform: uppercase; color: #b3242a; margin-bottom: 4px; }
.m-quote { margin: 0; font: italic 15px/1.5 Georgia, 'Times New Roman', serif; }
.m-quote::before, .m-quote::after { content: '”'; }
.m-log { margin: 12px 0 0; padding: 8px 10px; font: 19px/1.2 var(--f-term); background: #1d180f; color: #ffe27a; }
.m-stamp { position: absolute; right: 18px; top: 48px; transform: rotate(9deg); font: 700 14px var(--f-px); text-transform: uppercase; color: #b3242a; border: 3px solid #b3242a; padding: 3px 8px; opacity: .8; pointer-events: none; }
.file-box.new .m-stamp, .file-box.in .m-stamp { animation: slam .4s cubic-bezier(.2, .9, .3, 1.6) .55s both; }
@keyframes slam { from { transform: rotate(9deg) scale(3); opacity: 0; } }

/* ---------- the phone ---------- */
.phone-screen { background: rgba(3, 4, 10, .55); }
.phone { width: 260px; max-width: calc(100vw - 24px); padding: 14px 12px 12px; background: linear-gradient(160deg, #3a3e4a, #1a1c24 60%, #101118); border: 3px solid #050507; border-radius: 26px 26px 34px 34px; box-shadow: 0 0 0 2px #5a5e6a inset, 10px 12px 0 rgba(0, 0, 0, .5); }
.phone.in { animation: phonein .45s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes phonein { from { transform: translateY(120%) rotate(8deg); } }
.ph-top { display: grid; place-items: center; height: 14px; }
.ph-speaker { width: 50px; height: 4px; border-radius: 2px; background: #050507; }
.ph-screen { margin-top: 6px; min-height: 300px; max-height: min(420px, 62vh); overflow-y: auto; padding: 8px; color: #10200a; background: linear-gradient(#bfe0a0, #9ec880); border: 3px solid #050507; box-shadow: inset 0 0 0 2px #6a8a50; font: 18px/1.15 var(--f-term); }
.ph-bar { display: flex; justify-content: space-between; font: 700 9px var(--f-px); text-transform: uppercase; border-bottom: 2px solid #2a4a1a; padding-bottom: 3px; margin-bottom: 8px; }
.ph-screen h3 { margin: 0 0 6px; font: 700 12px var(--f-px); text-transform: uppercase; }
.ph-view { display: grid; gap: 6px; }
.ph-app { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px; text-align: left; font: 700 11px var(--f-px); text-transform: uppercase; color: #10200a; background: rgba(255, 255, 255, .25); border: 2px solid #2a4a1a; cursor: pointer; }
.ph-app:hover, .ph-app:focus-visible { background: #10200a; color: #bfe0a0; }
.ph-ico { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ph-n { margin-left: auto; min-width: 18px; text-align: center; color: #fff; background: #c02020; padding: 1px 4px; font-size: 9px; }
.ph-appcv { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.ph-apphead { display: flex; gap: 8px; align-items: center; margin: -2px -2px 6px; padding: 6px; color: #e8f3ff; }
.ph-apphead canvas { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
.ph-apphead h3 { margin: 0; color: inherit; }
.ph-apphead .ph-small { margin: 1px 0 0; color: inherit; opacity: .85; font-size: 12px; line-height: 1.2; }
#ph-sms[data-app="djungel"] .ph-apphead { background: #1d5a36; }
#ph-sms[data-app="whatsdata"] .ph-apphead { background: #0d3a6e; }
.ph-data { margin: 0 0 6px; padding: 4px 6px; font: 700 9px var(--f-px); text-transform: uppercase; color: #e8f3ff; background: repeating-linear-gradient(-45deg, #0d3a6e 0 6px, #123f78 6px 12px); }
.ph-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; align-items: start; }
.ph-list li.ph-empty { display: block; }
.ph-face { width: 30px; height: 32px; image-rendering: pixelated; border: 2px solid #10200a; }
.ph-seen { margin: 2px 0 0; font: 700 8px var(--f-px); text-transform: uppercase; color: #2a6fd0; }
.ph-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ph-list li { --tag: #10200a; padding: 5px 6px; background: rgba(255, 255, 255, .25); border-left: 4px solid var(--tag); }
.ph-list li.new { background: rgba(255, 255, 255, .5); }
.ph-from { margin: 0; display: flex; justify-content: space-between; font: 700 9px var(--f-px); text-transform: uppercase; }
.ph-txt { margin: 2px 0 0; }
.ph-empty, .ph-small { margin: 0; opacity: .75; font-size: 16px; }
.ph-cur { padding: 6px; background: #10200a; color: #bfe0a0; display: grid; gap: 2px; }
.ph-cur b { font: 700 12px var(--f-px); text-transform: uppercase; }
.ph-cur p { margin: 0; }
.ph-k { font: 700 9px var(--f-px); text-transform: uppercase; opacity: .8; }
.ph-done { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ph-done li::before { content: '○ '; } .ph-done li.done::before { content: '✓ '; } .ph-done li.now::before { content: '▶ '; }
.ph-done li.todo { opacity: .55; }
.ph-fagel-h { color: #0b2450; }
.ph-link { display: block; padding: 8px; text-align: center; font: 700 11px var(--f-px); text-transform: uppercase; text-decoration: none; color: #e8f3ff; background: #0b2450; border: 2px solid #050507; }
.ph-link.ghost { color: #0b2450; background: rgba(255, 255, 255, .3); }
.ph-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ph-posts li { display: flex; gap: 6px; align-items: center; padding: 4px; background: rgba(255, 255, 255, .3); }
.ph-posts canvas { width: 36px; height: 39px; image-rendering: pixelated; background: #10200a; flex: none; }
.ph-posts b { display: block; font: 700 9px var(--f-px); }
.ph-row { margin: 0; display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed #2a4a1a; padding: 2px 0; }
.ph-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ph-k { min-height: 38px; font: 700 10px var(--f-px); text-transform: uppercase; color: #e8e3d6; background: linear-gradient(#4a4e5a, #2a2c34); border: 2px solid #050507; border-radius: 10px; cursor: pointer; }
.ph-k:active { transform: translateY(1px); }

/* ---------- the metro ---------- */
.metro { width: min(560px, 100%); }
.metro-bar { background: linear-gradient(90deg, #0b2a5a, #0a1428); }
.metro-nocov { color: var(--rose) !important; }
.metro-here { font: 20px/1.2 var(--f-term); color: #c9d8f0; }
.metro-list { list-style: none; padding: 0; display: grid; gap: 8px; margin: 0 14px 12px; }
.metro-list li { padding: 8px 10px; background: #10142a; border: 2px solid #1e2a50; display: grid; gap: 6px; }
.metro-list li.here { border-color: var(--fagel); }
.mt-st { display: flex; align-items: center; gap: 8px; }
.mt-st b { font: 700 12px var(--f-px); text-transform: uppercase; }
.mt-st em { margin-left: auto; font: 700 9px var(--f-px); font-style: normal; text-transform: uppercase; color: var(--fagel); }
.mt-lines { display: flex; gap: 2px; }
.mt-lines i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #000; }
.mt-note { margin: 0; font: 17px var(--f-term); color: var(--muted); }
.mt-exits { display: flex; flex-wrap: wrap; gap: 6px; }
#metro-back { margin: 0 14px 14px; }

/* ---------- Söderbar ---------- */
.bar-screen { background: rgba(3, 4, 10, .85); }
.bar-box { width: min(880px, 100%); background: #10140f; border: 2px solid; border-color: #2a6a4a #050403 #050403 #2a6a4a; box-shadow: 8px 8px 0 rgba(0, 0, 0, .45); animation: smsin .25s ease both; }
.bar-bar { background: linear-gradient(90deg, #0e4a2e, #08200f); }
.bar-bar > span:first-child { color: #5af0a8; }
.bar-money { margin-left: auto; font: 20px/1 var(--f-term); color: var(--cash); text-transform: none; letter-spacing: 0; }
.bar-stage { position: relative; }
.bar-stage canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: default; }
.bar-hud { position: absolute; top: 8px; right: 10px; display: flex; gap: 10px; font: 28px/1 var(--f-term); color: #ffe27a; text-shadow: 2px 2px 0 #000; }
.bar-say { margin: 10px 14px; min-height: 2.4em; font: 22px/1.2 var(--f-term); color: #e8e3d6; }
.bar-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 14px 14px; }

/* ---------- the stage ---------- */
.stage-screen { position: absolute; inset: 0; z-index: 22; display: grid; place-items: center; background: #000; }
.stage-screen canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; touch-action: none; outline: none; }
.st-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; text-align: center; background: rgba(3, 3, 8, .78); }
.st-over h2 { margin: 0; font: 700 clamp(26px, 6vw, 56px)/1 var(--f-px); text-transform: uppercase; color: #e99ab0; text-shadow: 4px 4px 0 #000; }
.st-over p { margin: 0; max-width: 46ch; font: 22px/1.2 var(--f-term); color: var(--paper); }
.st-songs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 520px; }
.st-song { padding: 7px 10px; font: 19px var(--f-term); color: var(--paper); background: #161a2a; border: 2px solid #2a3050; cursor: pointer; }
.st-song.on { color: #1b1206; background: #ffe27a; border-color: #000; }

.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; margin: 0; max-width: min(440px, calc(100vw - 32px)); padding: 10px 14px; text-align: center; font: 20px/1.2 var(--f-term); background: #10121c; border: 2px solid var(--sodium); box-shadow: 4px 4px 0 #000; transition: opacity .2s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .g-radar { width: 72px; height: 72px; }
  .g-clock { font-size: 26px; }
  .g-where { font-size: 14px; max-width: 52vw; }
  .g-money { font-size: 24px; }
  .g-sms { width: calc(100vw - var(--sl) - var(--sr)); max-width: none; padding: 6px 8px; }
  .g-sms span { font-size: 18px; }
  .g-safe { top: auto; bottom: calc(var(--sb) + 200px); max-width: 80vw; padding: 4px 8px; }
  .g-safe b { overflow: hidden; text-overflow: ellipsis; }
  .g-safe span { display: none; }
  .g-toast { top: 31%; font-size: 17px; white-space: normal; width: 90%; }
  .g-goal-row { max-width: 92%; }
  .g-talk { grid-template-columns: 56px minmax(0, 1fr); bottom: var(--sb); }
  .g-talk canvas { width: 56px; height: 61px; }
  .g-talk .btn { grid-column: 1 / -1; }
  .g-talk-t p { font-size: 21px; }
  .cin-strip { grid-template-columns: 56px minmax(0, 1fr); min-height: 120px; }
  .cin-strip canvas { width: 56px; height: 61px; }
  .cin-say p { font-size: 22px; }
  .cin-next { flex: 1; }
  .s-row { gap: 0; }
  .s-hero { padding: 6px 0; }
  .s-plate { font-size: 9px; padding: 3px 4px; }
  .s-info { grid-template-columns: minmax(0, 1fr); }
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-items { grid-template-columns: minmax(0, 1fr); }
  .item { grid-template-columns: 110px minmax(0, 1fr); }
  .item-art { min-height: 150px; }
  .item-art canvas { width: 96px; height: 128px; }
  .k-amps .item-art canvas { width: 104px; height: 119px; }
  .g-cardsbtn { right: calc(var(--sr) + 14px); bottom: calc(var(--sb) + 110px); }
  .m-body { grid-template-columns: minmax(0, 1fr); }
  .m-photo { width: 140px; }
  .panel > div:not(.panel-bar), .panel > p, .panel > ul { margin: 12px; }
}
@media (orientation: portrait) and (max-width: 900px) {
  .cin { justify-content: center; }
  .cin-stage { flex: 0 1 auto; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100% - 250px); margin-top: auto; }
  .cin-bar { margin-top: auto; }
  .cin-strip { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Fryshuset: the gig board ---------- */
.hq { width: min(620px, 100%); }
.hq-bar { background: linear-gradient(90deg, #5a3208, #1e1408); }
.hq-money { margin-left: auto; color: var(--cash) !important; font: 22px/1 var(--f-term); }
.hq-next { display: grid; gap: 6px; padding: 10px 12px; background: #10142a; border: 2px solid #3a2a10; }
.hq-next b { font: 700 13px var(--f-px); text-transform: uppercase; color: #ffa53a; }
.hq-folk { font: 19px/1.15 var(--f-term); color: var(--paper); }
.hq-aura { font: 18px var(--f-term); color: #ffe27a; }
.hq-fill { height: 10px; background: #05060b; border: 2px solid #000; }
.hq-fill i { display: block; height: 100%; background: linear-gradient(90deg, #ffa53a, #ffe27a); min-width: 2px; }
.hq-stats { display: grid; gap: 8px; }
.hq-stat { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.hq-stat b { font: 700 11px var(--f-px); text-transform: uppercase; color: var(--paper); }
.hq-stat em { font: 18px var(--f-term); font-style: normal; color: #ffe27a; justify-self: end; }
.hq-stat small { grid-column: 1 / -1; font: 16px/1.1 var(--f-term); color: var(--muted); }
.hq-bar10 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.hq-bar10 i { height: 10px; background: #1a1e30; border: 1px solid #000; }
.hq-bar10 i.on.songs { background: #9adcf8; } .hq-bar10 i.on.gear { background: #ffa53a; } .hq-bar10 i.on.live { background: #e99ab0; }
.hq-setlist { margin: 2px 0 0; font: 16px/1.15 var(--f-term); color: #c9d8f0; }
.hq-h { margin: 14px 14px 6px; font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .08em; color: #ffa53a; }
.panel > ul.hq-needs, .panel > ul.hq-ups, .panel > ul.hq-tips { list-style: none; padding: 0; display: grid; gap: 6px; margin: 0 14px; }
.hq-needs li, .hq-ups li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 9px; background: #10142a; border: 2px solid #1e2a50; }
.hq-ups li { grid-template-columns: 1fr auto; }
.hq-needs li.done, .hq-ups li.have { border-color: #2a5a3a; opacity: .8; }
.hq-needs li.you { opacity: .55; }
.hq-needs b, .hq-ups b { display: block; font: 700 11px var(--f-px); text-transform: uppercase; color: var(--paper); }
.hq-needs span, .hq-ups span { display: block; font: 17px/1.1 var(--f-term); color: var(--muted); }
.hq-ups small { display: block; font: 16px var(--f-term); color: #ffe27a; }
.hq-needs em, .hq-ups em { font: 700 10px var(--f-px); font-style: normal; color: #3ad08a; }
.hq-needs li:not(.done) em { color: #ffa53a; }
.hq-face { width: 30px; height: 30px; image-rendering: pixelated; background: #05060b; border: 2px solid #000; }
.hq-demos { display: grid; gap: 6px; }
.hq-small { margin: 0; font: 17px/1.15 var(--f-term); color: var(--muted); }
.hq-demolist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.hq-demolist li { padding: 3px 8px; font: 17px var(--f-term); background: #1a2a1a; border: 1px solid #2a5a3a; color: #bff0c8; }
.hq-demolist li.none { background: none; border: 0; color: var(--muted); padding: 0; }
.hq-code { display: flex; gap: 6px; }
.hq-code input { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; font: 20px var(--f-term); color: var(--paper); background: #05060b; border: 2px solid #2a3050; text-transform: uppercase; }
.hq-msg { margin: 0; min-height: 1.1em; font: 17px var(--f-term); }
.hq-msg.ok { color: #3ad08a; } .hq-msg.bad { color: var(--rose); }
.hq-fagel { justify-self: start; }
.hq-tips li { font: 17px/1.15 var(--f-term); color: var(--paper); padding-left: 14px; position: relative; }
.hq-tips li::before { content: '✦'; position: absolute; left: 0; color: #ffe27a; }
.panel > ul.hq-tips { margin-bottom: 16px; }
.st-song.locked { opacity: .5; cursor: default; border-style: dashed; }

/* desktop: the touch buttons are on screen too, smaller, with the key in the corner */
.g-key { display: none; }
.g-bx-ico { display: block; width: 36px; height: 30px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(255,255,255,.35)); } .g-bx-ico svg { display: block; }
.game:not(.touch) .g-key { display: block; position: absolute; top: -7px; left: -7px; z-index: 2; min-width: 18px; padding: 3px 4px 2px; font: 700 8px/1 var(--f-px); letter-spacing: .04em; text-align: center; color: #e8e3d6; background: #14161c; border: 2px solid #000; box-shadow: inset 0 -2px 0 #2a2e3a, 2px 2px 0 rgba(0, 0, 0, .5); pointer-events: none; }
.game:not(.touch) .g-guitar { width: 64px; height: 64px; font-size: 9px; gap: 1px; }
.game:not(.touch) .g-guitar-ico { width: 22px; height: 22px; }
.game:not(.touch) .g-guitar .g-key { top: -4px; left: -4px; }
.game:not(.touch) .g-bx { display: grid; place-items: center; position: absolute; right: calc(var(--sr) + 78px); bottom: calc(var(--sb) + 6px); width: 50px; height: 50px; border-radius: 50%; border: 3px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); cursor: pointer; }
.game:not(.touch) .g-bx .g-bx-t { display: none; }
.game:not(.touch) .g-bx-ico { width: 28px; height: 24px; }
.game:not(.touch) .g-bx .g-key { top: -8px; left: -14px; }
.game:not(.touch) .g-phone { right: calc(var(--sr) + 16px); bottom: calc(var(--sb) + 78px); width: 32px; height: 60px; }
.game:not(.touch) .g-phone .g-key { top: -6px; left: -12px; }
.game:not(.touch) .g-cardsbtn { right: calc(var(--sr) + 144px); bottom: calc(var(--sb) + 4px); padding: 4px 6px 3px; font-size: 8px; }
.game:not(.touch) .g-cardsbtn b { font-size: 15px; }
.game:not(.touch) .g-cards-ico { width: 16px; height: 16px; }

/* the sound button: always there (title, story, game). Pulses when the browser still holds the sound back. */
.snd-fab { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: 50; width: 40px; height: 36px; display: grid; place-items: center; color: var(--paper); background: rgba(13, 15, 23, .8); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); cursor: pointer; padding: 0; }
.snd-fab .ico { width: 18px; height: 18px; }
body:has(#game:not([hidden])) .snd-fab { display: none; }
.snd-fab.blocked, #hud-snd.blocked { color: var(--sodium); animation: sndpulse 1.2s ease-in-out infinite; }
.snd-fab[aria-pressed="false"], #hud-snd[aria-pressed="false"] { color: #8b8f9c; }
@keyframes sndpulse { 50% { box-shadow: 0 0 0 3px rgba(255, 170, 60, .45); } }
@media (prefers-reduced-motion: reduce) { .snd-fab.blocked, #hud-snd.blocked { animation: none; } }
.g-talk.ringing #g-talk-text { color: #7fe0a0; letter-spacing: .08em; }
.hq-how { margin: 0 14px 4px; }

/* the volume pop-up under the sound button: mute + a pixel slider */
.snd-pop { position: fixed; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; background: rgba(13, 15, 23, .96); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); box-shadow: 4px 4px 0 #000; }
.snd-pop[hidden] { display: none; }
.snd-mute { width: 34px; height: 30px; display: grid; place-items: center; padding: 0; color: var(--paper); background: #1a1d29; border: 2px solid #2c3142; cursor: pointer; }
.snd-mute .ico { width: 16px; height: 16px; }
.snd-mute[aria-pressed="true"] { color: #8b8f9c; }
.snd-vol { -webkit-appearance: none; appearance: none; width: 150px; height: 26px; background: transparent; cursor: pointer; margin: 0; }
.snd-vol::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--sodium) var(--v, 80%), #2a2e3d var(--v, 80%)); border: 2px solid #0a0b10; }
.snd-vol::-moz-range-track { height: 8px; background: #2a2e3d; border: 2px solid #0a0b10; }
.snd-vol::-moz-range-progress { height: 8px; background: var(--sodium); }
.snd-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 20px; margin-top: -8px; background: var(--paper); border: 2px solid #0a0b10; border-radius: 0; }
.snd-vol::-moz-range-thumb { width: 12px; height: 18px; background: var(--paper); border: 2px solid #0a0b10; border-radius: 0; }
.snd-vol:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }
.snd-vol-t { min-width: 3ch; text-align: right; font: 700 11px var(--f-px); color: var(--paper); }
.snd-pop.off .snd-vol, .snd-pop.off .snd-vol-t { opacity: .45; }

/* the intro film: one canvas, letterboxed 16:9, pixels kept sharp; the title in the game's own type */
.film { position: fixed; inset: 0; z-index: 40; background: #000; display: grid; place-items: center; overflow: hidden; }
.film[hidden] { display: none; }
.film canvas { width: min(100vw, calc(100vh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; image-rendering: pixelated; display: block; }
/* the last shot (the title): the whole screen on every device, cropped to fill */
.film.full canvas { width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; object-fit: cover; }
.film-title { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); font: 700 clamp(40px, 8vw, 96px)/1 var(--f-px); text-transform: uppercase; color: var(--sodium); white-space: nowrap; text-align: center;
  text-shadow: 4px 4px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 10px 12px 0 rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; will-change: opacity, transform; }
@media (max-width: 560px) { .film-title { white-space: normal; width: 90vw; } }
.film-skip { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); font: 700 11px var(--f-px); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); background: rgba(0, 0, 0, .55); border: 2px solid #2c3142; padding: 8px 12px; cursor: pointer; opacity: .7; }
.film-skip:hover, .film-skip:focus-visible { opacity: 1; }
/* the veteran's films: who is speaking over the caption, and the band's speech bubbles round the screen */
.film-who { position: absolute; left: 50%; top: min(calc(50% + min(56.25vw, 100%) / 2 - 12px), calc(100% - env(safe-area-inset-bottom, 0px) - 6.2em)); transform: translateX(-50%); margin: 0; font: 700 11px var(--f-px); letter-spacing: .18em; text-transform: uppercase; color: var(--rose); text-shadow: 2px 2px 0 #000; opacity: 0; pointer-events: none; }
.film-bubbles { position: absolute; inset: 0; pointer-events: none; }
.film-bub { position: absolute; max-width: 34%; padding: 8px 12px 10px; background: #f4f0e6; color: #111; border: 3px solid #000; box-shadow: 4px 4px 0 #000; transform: scale(.4) rotate(-4deg); opacity: 0; transition: transform .28s cubic-bezier(.2, 1.6, .4, 1), opacity .2s; }
.film-bub.in { transform: scale(1) rotate(-2deg); opacity: 1; }
/* the tail: a little triangle at the bottom, so it reads as someone speaking */
.film-bub::before, .film-bub::after { content: ''; position: absolute; left: 22px; width: 0; height: 0; border-style: solid; }
.film-bub::before { bottom: -17px; border-width: 17px 14px 0 0; border-color: #000 transparent transparent transparent; }
.film-bub::after { bottom: -11px; left: 25px; border-width: 11px 9px 0 0; border-color: #f4f0e6 transparent transparent transparent; }
.film-bub:nth-child(even)::before { left: auto; right: 22px; border-width: 17px 0 0 14px; }
.film-bub:nth-child(even)::after { left: auto; right: 25px; border-width: 11px 0 0 9px; }
.film-bub:nth-child(even).in { transform: scale(1) rotate(2deg); }
.film-bub b { display: block; font: 700 9px var(--f-px); letter-spacing: .12em; text-transform: uppercase; color: var(--tag, #c02020); text-shadow: 1px 1px 0 #000; margin-bottom: 2px; }
.film-bub span { font: 700 clamp(16px, 2.6vw, 30px)/1.05 var(--f-px); text-transform: uppercase; }
/* a shout: a jagged burst instead of a box (no tail) */
.film-bub.tagg { background: none; border: 0; box-shadow: none; padding: 16px 22px; text-align: center; }
.film-bub.tagg::before, .film-bub.tagg::after { left: -22px; right: -22px; top: -22px; bottom: -22px; width: auto; height: auto; border: 0; z-index: -1; clip-path: polygon(50.0% 0.0%, 56.0% 8.4%, 64.1% 2.0%, 67.0% 12.7%, 77.0% 7.9%, 76.2% 19.8%, 87.8% 17.3%, 87.0% 26.2%, 95.5% 29.2%, 91.3% 37.9%, 99.5% 42.9%, 92.0% 50.0%, 99.5% 57.1%, 89.3% 61.6%, 95.5% 70.8%, 83.7% 71.6%, 87.8% 82.7%, 78.8% 83.3%, 77.0% 92.1%, 67.9% 89.1%, 64.1% 98.0%, 56.0% 91.6%, 50.0% 100.0%, 44.2% 90.6%, 35.9% 98.0%, 33.4% 86.4%, 23.0% 92.1%, 21.2% 83.3%, 12.2% 82.7%, 13.8% 73.2%, 4.5% 70.8%, 9.7% 61.8%, 0.5% 57.1%, 9.0% 50.0%, 0.5% 42.9%, 11.6% 38.7%, 4.5% 29.2%, 13.0% 26.2%, 12.2% 17.3%, 21.8% 17.5%, 23.0% 7.9%, 32.6% 11.8%, 35.9% 2.0%, 44.2% 9.4%); }
.film-bub.tagg::before { background: #000; }
.film-bub.tagg::after { left: -15px; right: -15px; top: -15px; bottom: -15px; background: #fff6a8; }
.film-bub.tagg span { font-size: clamp(18px, 3vw, 34px); }
/* all five at once: a big box, tails drawn as an svg behind it (one to each of them) */
.film-bub.alla { max-width: 60%; text-align: center; padding: 10px 18px 12px; transform: scale(.4); z-index: 2; }
.film-bub.alla.in { transform: scale(1) rotate(0deg); }
.film-bub.alla::before, .film-bub.alla::after { display: none; }
.film-bub.alla span { font-size: clamp(16px, 3.4vw, 40px); }
.film-tails { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .2s .12s; z-index: 1; overflow: visible; }
.film-tails.in { opacity: 1; }
.film-tails polygon { fill: #f4f0e6; stroke: #000; stroke-width: 3; stroke-linejoin: round; }
/* round: a soft question, an ellipse */
.film-bub.rund { border-radius: 50%; padding: 18px 36px 20px; text-align: center; max-width: 27%; }
.film-bub.rund span { font-size: clamp(12px, 2vw, 24px); }
@media (max-width: 640px) {
  .film-bub { max-width: 46%; padding: 6px 9px 8px; }
  .film-bub span { font-size: clamp(12px, 3.8vw, 18px); }
  .film-bub.tagg span { font-size: clamp(13px, 4.2vw, 20px); }
  .film-bub.rund { max-width: 56%; padding: 14px 24px 16px; }
  .film-bub.rund span { font-size: clamp(11px, 3.2vw, 16px); }
}
.film-bub.rund::before { left: 32%; } .film-bub.rund::after { left: calc(32% + 3px); }
.film-bub.rund:nth-child(even)::before { left: auto; right: 32%; } .film-bub.rund:nth-child(even)::after { left: auto; right: calc(32% + 3px); }
/* Lex comes up to the camera in the room (Inside.tell): the same bubble, over the game */
.tell-bubs { position: fixed; z-index: 30; }
/* Lex up to the camera: no interface at all */
body.telling .g-hud, body.telling .ed-ui, body.telling .g-fx, body.telling .g-sms { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
/* a talk, a story card, a film: the mission text, prompts and action buttons step away (the top corners stay) */
body.g-busy .g-goal-row, body.g-busy .g-prompt, body.g-busy .g-hint, body.g-busy .g-safe, body.g-busy .g-meter, body.g-busy .g-joy,
body.g-busy .g-bx, body.g-busy .g-phone, body.g-busy .g-cardsbtn, body.g-busy .g-billsbtn, body.g-busy .g-guitar { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s; }
.tell-bubs .film-bub { max-width: min(52vw, 440px); }
/* a call in a room ("Där är du!"): small, the tail in the middle, pointing down at whoever says it */
.say-wrap { z-index: 6; }
.film-bub.say-bub { padding: 5px 10px 6px; max-width: min(46vw, 260px); white-space: nowrap; }
.film-bub.say-bub span { font-size: clamp(11px, 1.5vw, 17px); }
.film-bub.say-bub::before { left: calc(50% - 8px); border-width: 14px 8px 0 8px; bottom: -14px; border-color: #000 transparent transparent transparent; }
.film-bub.say-bub::after { left: calc(50% - 5px); border-width: 9px 5px 0 5px; bottom: -8px; border-color: #f4f0e6 transparent transparent transparent; }
.film-bub.say-bub.in { transform: scale(1) rotate(-1deg); }
/* a chapter's name over its film (Kapitel 3: Bedrägeriet) */
.film-chap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; pointer-events: none; }
.film-chap span { opacity: 0; transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1); transform: translateY(8px); }
.film-chap.in span { opacity: 1; transform: none; }
.film-chap.in span:nth-child(2) { transition-delay: .35s; }
.film-chap.in span:nth-child(3) { transition-delay: .7s; }
#film-chap-k { font: 700 12px var(--f-px); letter-spacing: .24em; text-transform: uppercase; color: var(--rose); text-shadow: 2px 2px 0 #000; }
#film-chap-no { font: 700 clamp(14px, 2.2vw, 20px) var(--f-px); letter-spacing: .3em; text-transform: uppercase; color: var(--sodium); text-shadow: 2px 2px 0 #000; }
#film-chap-name { font: 700 clamp(36px, 8vw, 96px)/1 var(--f-px); text-transform: uppercase; color: var(--paper); text-shadow: 4px 0 rgba(255, 77, 77, .55), -4px 0 rgba(74, 163, 255, .55), 0 6px 0 #000; }

/* the band is over (Fishking left): lightning, then a retry from just before the conversation */
.g-quit { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(2, 3, 8, .88); }
.g-quit[hidden] { display: none; }
.g-quit.flash { animation: quitflash 1.4s ease-out; }
@keyframes quitflash { 0% { background: rgba(230, 240, 255, .95); } 8% { background: rgba(2, 3, 8, .9); } 14% { background: rgba(220, 230, 255, .8); } 30% { background: rgba(2, 3, 8, .88); } }
.g-quit-in { max-width: 520px; padding: 24px; text-align: center; }
.g-quit h2 { margin: 0 0 12px; font: 700 clamp(20px, 4vw, 34px)/1.1 var(--f-px); color: #ff5a5a; text-transform: uppercase; text-shadow: 3px 3px 0 #000; }
.g-quit p { margin: 0 0 18px; font: 19px/1.3 var(--f-term); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .g-quit.flash { animation: none; } }

/* ---------- the poster press (Fryshuset) and the print ---------- */
.pp { width: min(640px, 100%); }
.pp-bar { background: linear-gradient(90deg, #6a1e3a, #1e1408); }
.panel > div.pp-body { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.pp-cv { width: 216px; height: 300px; image-rendering: pixelated; border: 3px solid #000; box-shadow: 6px 6px 0 rgba(0, 0, 0, .5); background: #000; }
.pp-opts { display: grid; gap: 6px; min-width: 0; }
.pp-opts .hq-h { margin: 6px 0 0; }
.pp-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; font: 17px/1 var(--f-term); color: var(--paper); background: #10142a; border: 2px solid #2a3050; cursor: pointer; }
.pp-chip i { width: 12px; height: 12px; border: 1px solid #000; }
.pp-chip.on { color: #16161c; background: #ffe27a; border-color: #000; }
.pp-chip:focus-visible { outline: 2px solid #ffe27a; outline-offset: 2px; }
#pp-run { align-items: stretch; flex-wrap: nowrap; }
.pp-chip.pp-step { min-width: 58px; justify-content: center; font-size: 20px; padding: 8px 10px; }
.pp-chip.pp-step:hover:not(:disabled) { border-color: #ffe27a; }
.pp-chip.pp-step:disabled { opacity: .35; cursor: default; }
.pp-count { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 10px; background: #0a0d1e; border: 2px solid #2a3050; min-width: 96px; }
.pp-count b { font: 24px/1 var(--f-term); color: #ffe27a; }
.pp-count small { font: 15px/1 var(--f-term); color: var(--paper); opacity: .8; }
.pp-print { margin-top: 10px; justify-self: start; }
.pp-print:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) { .panel > div.pp-body { grid-template-columns: 1fr; justify-items: center; } .pp-cv { width: 162px; height: 225px; } .pp-opts { width: 100%; } }
.print-screen { position: absolute; inset: 0; z-index: 30; background: #000; display: grid; place-items: center; cursor: pointer; }
.print-cv { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.print-cap { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: min(720px, 90vw); margin: 0; text-align: center; font: 22px/1.25 var(--f-term); color: var(--paper); opacity: 0; transition: opacity .6s; text-shadow: 2px 2px 0 #000; }
.print-cap.show { opacity: .92; }
.g-billsbtn { position: absolute; right: calc(var(--sr) + 180px); bottom: calc(var(--sb) + 8px); display: grid; justify-items: center; gap: 1px; padding: 6px 8px 4px; cursor: pointer; font: 700 9px var(--f-px); text-transform: uppercase; color: #16161c; background: linear-gradient(#ffd0e0, #e0457a); border: 3px solid #000; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
.g-billsbtn b { font: 18px/1 var(--f-term); }
.g-bills-ico { width: 16px; height: 20px; background: #efe6d2; border: 2px solid #16161c; box-shadow: inset 0 -5px 0 #2a5fae; }
.g-billsbtn:active { transform: scale(.94); }
.g-billsbtn.new { animation: gnew 1.2s cubic-bezier(.2, .9, .3, 1.4) both; }
.game:not(.touch) .g-billsbtn { right: calc(var(--sr) + 214px); bottom: calc(var(--sb) + 4px); padding: 4px 6px 3px; font-size: 8px; }
.game:not(.touch) .g-billsbtn b { font-size: 15px; }

.film-title .logo-img { width: clamp(280px, 58vw, 900px); margin: 0 auto; }
.film-cap { position: absolute; left: 50%; top: min(calc(50% + min(56.25vw, 100%) / 2 + 14px), calc(100% - env(safe-area-inset-bottom, 0px) - 4.5em)); transform: translateX(-50%); width: min(900px, 88vw); margin: 0; text-align: center; font: 26px/1.25 var(--f-term); color: #ffe27a; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(0, 0, 0, .8); opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .film-cap { font-size: 19px; } }

/* ---------- a gig: soundcheck panel and the numbers after (concert.js) ---------- */
.concert { cursor: default; }
.concert .print-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-panel { position: absolute; right: max(16px, 3vw); top: 50%; transform: translateY(-50%); width: min(420px, calc(100vw - 32px)); max-height: 86vh; overflow-y: auto; display: grid; gap: 6px; padding: 14px 16px; background: rgba(10, 12, 22, .9); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); box-shadow: 8px 8px 0 rgba(0, 0, 0, .5); }
.cc-panel[hidden] { display: none; }
.cc-h { margin: 0; font: 700 14px var(--f-px); text-transform: uppercase; letter-spacing: .08em; color: #ffa53a; }
.cc-info { margin: 0; font: 20px/1.2 var(--f-term); color: #ffe27a; }
.cc-q { margin: 8px 0 2px; font: 20px var(--f-term); color: #9adcf8; letter-spacing: .04em; }
.cc-panel .btn { justify-self: start; margin-top: 6px; }
.cc-res { left: 50%; right: auto; top: auto; bottom: 7%; transform: translateX(-50%); }
.cc-rl { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 3px; }
.cc-rl li { display: flex; justify-content: space-between; gap: 12px; font: 19px/1.2 var(--f-term); color: var(--paper); border-bottom: 1px dashed #2a3050; padding-bottom: 2px; }
.cc-rl b { font-weight: normal; color: #ffe27a; }
.cc-rl b.bad { color: #ff7a7a; } .cc-rl b.big { color: #3ad08a; }
.cc-say { margin: 4px 0 0; font: 18px/1.25 var(--f-term); color: #c9c2b2; }
@media (max-width: 700px) { .cc-panel { top: auto; bottom: 8px; transform: none; right: 8px; max-height: 58vh; } .cc-res { left: 8px; transform: none; } }

/* a part of the gig board that just opened */
.hq-h.nytt::after, .hq-stats.nytt::before { content: 'NYTT'; margin-left: 8px; padding: 1px 5px; font: 700 9px var(--f-px); color: #16161c; background: #ffe27a; vertical-align: middle; animation: nyttp 1.4s ease-in-out infinite; }
.hq-stats.nytt::before { display: inline-block; margin: 0 0 4px; }
@keyframes nyttp { 50% { opacity: .55; } }
.hq-tip1 { margin: 6px 14px 14px; color: #9aa0b6; }

/* a slow fade to black between scenes */
.fade-black { position: fixed; inset: 0; z-index: 70; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.8s ease; }
.fade-black.on { opacity: 1; pointer-events: auto; }
/* "Vem är du?" comes in: the camera label first, then the title glitches in, then the line-up steps forward one by one */
.select.enter .s-cam { animation: selcam .8s steps(4) both; }
.select.enter h2 { animation: seltitle 1.4s .3s cubic-bezier(.2, .8, .2, 1) both; }
.select.enter .s-hero { animation: selhero .7s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(.9s + var(--i, 0) * .14s); }
.select.enter .s-info { animation: selinfo .8s 1.8s ease both; }
@keyframes selcam { from { opacity: 0; } }
@keyframes seltitle { 0% { opacity: 0; letter-spacing: .6em; filter: blur(4px); } 40% { opacity: 1; } 60% { transform: translateX(-3px); } 70% { transform: translateX(3px); } 100% { letter-spacing: normal; filter: none; } }
@keyframes selhero { from { opacity: 0; transform: translateY(26px); } }
@keyframes selinfo { from { opacity: 0; transform: translateY(10px); } }

/* ---------- VIKTIG DIALOG ---------- */
.keyd { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; align-content: center; gap: 14px; padding: 16px; background: radial-gradient(ellipse at 50% 40%, rgba(40, 10, 20, .88), rgba(3, 3, 8, .96)); overflow-y: auto; }
.keyd[hidden] { display: none; }
.kd-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.keyd.in .kd-flash { animation: kdflash .5s ease-out; }
@keyframes kdflash { 0% { opacity: .55; } 100% { opacity: 0; } }
.kd-h { margin: 0; font: 700 clamp(28px, 6vw, 60px)/1 var(--f-px); text-transform: uppercase; letter-spacing: .12em; color: #ffe27a; text-shadow: 4px 0 rgba(255, 60, 90, .7), -4px 0 rgba(74, 163, 255, .6), 0 0 24px rgba(255, 120, 60, .5); }
.keyd.in .kd-h { animation: kdtitle 1.1s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes kdtitle { 0% { transform: scale(2.6); opacity: 0; filter: blur(6px); } 35% { transform: scale(.94); opacity: 1; filter: none; } 45% { transform: translateX(-6px); } 55% { transform: translateX(6px); } 70% { transform: none; } 100% { transform: none; } }
.kd-box { width: min(720px, 100%); display: grid; gap: 12px; padding: 16px 18px; background: rgba(10, 12, 22, .92); border: 2px solid #ffa53a; box-shadow: 0 0 0 1px #000, 8px 8px 0 rgba(0, 0, 0, .5); }
.keyd.in .kd-box { animation: kdbox .7s .7s ease both; }
@keyframes kdbox { from { opacity: 0; transform: translateY(16px); } }
.kd-who { display: flex; gap: 12px; align-items: center; }
.kd-who canvas { width: 72px; height: 78px; image-rendering: pixelated; background: #14161c; border: 2px solid #000; flex: none; }
.kd-who b { font: 700 13px var(--f-px); text-transform: uppercase; color: #ffa53a; }
.kd-who p { margin: 4px 0 0; font: 19px/1.25 var(--f-term); color: #c9c2b2; }
.kd-ask { margin: 0; font: 24px/1.25 var(--f-term); color: var(--paper); border-left: 4px solid #ffe066; padding-left: 10px; }
.kd-opts { display: grid; gap: 10px; }
.kd-opt { display: grid; gap: 4px; text-align: left; padding: 10px 12px; cursor: pointer; background: #10142a; border: 2px solid #2a3050; color: var(--paper); }
.kd-opt b { font: 20px/1.2 var(--f-term); color: #ffe27a; }
.kd-opt span { font: 18px/1.25 var(--f-term); color: #9aa0b6; }
.kd-opt:hover, .kd-opt:focus-visible { border-color: #ffa53a; background: #181d38; outline: none; }
.kd-res { display: grid; gap: 8px; animation: kdbox .6s ease both; }
.kd-res h3 { margin: 0; font: 700 18px var(--f-px); text-transform: uppercase; color: #3ad08a; letter-spacing: .06em; }
.kd-res p { margin: 0; font: 20px/1.3 var(--f-term); color: var(--paper); }
.kd-res .btn { justify-self: start; }

/* ---------- Textläget (Haralds redigering) ---------- */
.ed-pen { position: fixed; z-index: 9000; left: var(--sl); top: 44%; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 48px; min-height: 48px; padding: 6px 8px; font: 700 9px var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: #1b1206; background: linear-gradient(#ffbf6b, #f0891b); border: 2px solid; border-color: #ffe0b5 #8a4807 #8a4807 #ffe0b5; box-shadow: 0 0 0 1px #000, 3px 3px 0 #000; cursor: pointer; opacity: .82; }
.ed-pen span { font-size: 18px; line-height: 1; }
.ed-bmbtn { position: fixed; z-index: 9000; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 48px; min-height: 44px; padding: 5px 8px; font: 700 9px var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: var(--paper); background: #1a2238; border: 2px solid; border-color: #4a5a8a #0a0e1a #0a0e1a #4a5a8a; box-shadow: 0 0 0 1px #000, 3px 3px 0 #000; cursor: pointer; opacity: .85; }
.ed-bmbtn span { font-size: 16px; line-height: 1; } .ed-bmbtn:hover { opacity: 1; }
.bm-row-new { display: flex; gap: 8px; } .bm-row-new input { flex: 1; min-width: 0; padding: 8px 10px; font: 16px var(--f-body); color: var(--paper); background: #0b0d15; border: 2px solid #2c3250; }
.bm-row-new input:focus { border-color: var(--sodium); outline: none; }
.bm-r b { display: block; color: var(--paper); font: 700 15px var(--f-body); }
.bm-r.auto b { color: var(--muted); }
.bm-btns { display: flex; gap: 6px; margin-top: 6px; }

.ed-pen { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ed-pen.lift { opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 2px #fff, 6px 8px 0 #000; cursor: grabbing; }
.t-edit { align-self: flex-start; }
body:has(#title:not([hidden])) .ed-pen { top: auto; bottom: max(28px, env(safe-area-inset-bottom, 0px) + 16px); left: max(196px, env(safe-area-inset-left, 0px) + 188px); }
.ed-pen:hover, .ed-pen.on { opacity: 1; }
.ed-pen.on { background: var(--paper); border-color: #fff #777 #777 #fff; }
.ed-bar { position: fixed; z-index: 9001; left: 50%; top: var(--st); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); padding: 8px 10px; font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .05em; color: #1b1206; background: var(--sodium); border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
.ed-bar button { font: 700 10px var(--f-px); text-transform: uppercase; min-height: 32px; padding: 4px 10px; color: var(--paper); background: #131623; border: 2px solid #000; cursor: pointer; }
body.ed-picking * { cursor: text !important; }
body.ed-picking .ed-ui, body.ed-picking .ed-ui * { cursor: pointer !important; }
.ed-hover { outline: 2px dashed var(--sodium) !important; outline-offset: 3px; background-color: rgba(255, 165, 58, .14) !important; }
.ed-panel { position: fixed; inset: 0; z-index: 9002; display: grid; place-items: center; padding: var(--st) var(--sr) var(--sb) var(--sl); background: rgba(5, 6, 11, .72); }
.ed-card { width: min(560px, 100%); max-height: 100%; overflow: auto; padding: 14px; background: var(--panel); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); box-shadow: 0 0 0 1px #000, 6px 6px 0 #000; }
.ed-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ed-head b { font: 700 13px var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: var(--sodium); }
.ed-x { width: 36px; height: 36px; color: var(--paper); background: none; border: 0; font-size: 18px; cursor: pointer; }
.ed-where { margin: 0 0 10px; font: 18px/1.1 var(--f-term); color: var(--muted); }
.ed-l { display: block; margin-bottom: 4px; font: 700 10px var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ed-card textarea { width: 100%; min-height: 96px; padding: 10px; font: 16px/1.45 var(--f-body); color: var(--paper); background: #0b0d15; border: 2px solid #2c3250; resize: vertical; }
.ed-vars { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #2c3250; }
.ed-adapt { display: flex; gap: 8px; align-items: center; margin: 6px 0 4px; font-size: 14px; color: var(--paper); cursor: pointer; }
.ed-adapt input { width: 18px; height: 18px; accent-color: var(--sodium); }
.ed-var-l { margin-top: 8px; opacity: .8; }
.ed-vars textarea { min-height: 54px; font-size: 14px; }
.ed-card textarea:focus { border-color: var(--sodium); outline: none; }
.ed-tip { margin: 8px 0 0; font-size: 13px; color: var(--rose); }
.ed-orig { margin-top: 10px; font-size: 13px; color: var(--muted); }
.ed-orig summary { cursor: pointer; font: 700 10px var(--f-px); text-transform: uppercase; letter-spacing: .06em; }
.ed-orig p { margin: 6px 0 0; padding: 8px; background: #0b0d15; }
.ed-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ed-note { margin: 10px 0 0; font-size: 13px; color: var(--sodium); }
.ed-list { display: grid; gap: 8px; max-height: 55vh; overflow: auto; }
.ed-row { display: grid; gap: 4px; padding: 8px; background: #0b0d15; border-left: 3px solid var(--sodium); font-size: 13px; }
.ed-row small { font: 15px/1 var(--f-term); color: var(--muted); }
.ed-row del { color: var(--muted); text-decoration-color: var(--rec); }
.ed-row ins { color: var(--paper); text-decoration: none; }
.ed-row .btn { justify-self: start; min-height: 32px; padding: 4px 10px; font-size: 10px; }
.ed-lines { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #2c3250; }
.ed-danger { color: #ffd8d8; background: linear-gradient(#5a1c22, #3a1016); border-color: #a04048 #200608 #200608 #a04048; }
.ed-after { margin: 0 0 10px; font-size: 13px; color: var(--muted); font-style: italic; }
.ed-card select { width: 100%; min-height: 40px; margin-bottom: 10px; padding: 6px 8px; font: 15px var(--f-body); color: var(--paper); background: #0b0d15; border: 2px solid #2c3250; }
.ed-row.add { border-left-color: var(--cash); }
.ed-row.del { border-left-color: var(--rec); }
.ed-row.lost { border-left-color: var(--muted); opacity: .75; }
/* picking a text: words that normally let taps through (the HUD, cards, captions) can be tapped */
body.ed-picking .g-hud *, body.ed-picking .cin-card, body.ed-picking .cin-card *, body.ed-picking .toast, body.ed-picking .film-cap, body.ed-picking .film-chap, body.ed-picking .film-chap *, body.ed-picking .film-bub, body.ed-picking .film-bub * { pointer-events: auto !important; }

/* ---------- the live set: loadout extras and the controls on stage ---------- */
.cc-note { margin: 0; font: 16px/1.2 var(--f-term); color: var(--muted); }
.cc-note:empty { display: none; }
.cc-vibes { display: grid; gap: 2px; margin: 8px 0 0; font: 16px/1.2 var(--f-term); color: #c9c2b2; }
.cc-vibes span { display: flex; align-items: center; gap: 6px; }
.cc-vibes i { width: 10px; height: 10px; border: 1px solid #000; flex: none; }
.cc-live { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(980px, calc(100vw - 20px)); display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; pointer-events: none; }
.cc-live[hidden] { display: none; }
.lv-row { display: flex; gap: 6px; pointer-events: auto; }
.lv-row[hidden] { display: none; }
.lv-btn, .lv-ped, .lv-gtr { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 76px; min-height: 56px; padding: 6px 8px 8px; font: 700 10px var(--f-px); text-transform: uppercase; letter-spacing: .04em; color: var(--paper); background: rgba(10, 12, 22, .66); border: 2px solid rgba(42, 48, 80, .8); border-bottom: 4px solid var(--v, #888); cursor: pointer; touch-action: manipulation; backdrop-filter: blur(2px); user-select: none; -webkit-user-select: none; }
.lv-btn kbd, .lv-ped kbd, .lv-gtr kbd { font: 700 11px var(--f-px); color: #16161c; background: var(--v, #ffe27a); padding: 1px 5px; }
.lv-btn.hit { transform: translateY(2px); background: #2a3050; }
.lv-ped { min-width: 64px; border-top: 6px solid var(--p, #888); }
.lv-ped.on { background: #2a2414; box-shadow: 0 0 0 2px var(--p, #888), 0 0 14px var(--p, #888); }
.lv-ped.on kbd::after { content: ' PÅ'; }
.lv-gtr { min-width: 92px; border-bottom-color: #c9c2b2; }
@media (max-width: 640px) { .lv-btn, .lv-ped, .lv-gtr { min-width: 0; flex: 1 1 0; min-height: 50px; font-size: 9px; padding: 5px 4px 7px; } .lv-row { flex: 1 1 100%; } }
/* the coach during the soundcheck: under the score bar, never over the buttons */
.concert .print-cap { bottom: auto; top: max(12%, calc(50% - 28.125vw + 40px)); background: rgba(5, 6, 12, .72); padding: 6px 10px; }

/* ---------- Revolten: raid banners, the money flying in, the stores under the map ---------- */
.g-banner { --bc: #ffd23a; position: absolute; z-index: 9; left: 50%; top: 22%; transform: translate(-50%, -50%) scale(.2) rotate(-4deg); opacity: 0; pointer-events: none; display: grid; justify-items: center; gap: 8px; width: max-content; max-width: 94%; text-align: center; }
.g-banner b { font: 700 clamp(26px, 6vw, 64px)/1 var(--f-px); text-transform: uppercase; letter-spacing: .02em; color: #fff; text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 24px var(--bc), 0 0 48px var(--bc); white-space: normal; text-wrap: balance; }
.g-banner span { font: 700 clamp(11px, 1.8vw, 18px)/1.2 var(--f-px); text-transform: uppercase; letter-spacing: .08em; color: var(--bc); padding: 6px 12px; background: rgba(5, 6, 12, .88); border: 3px solid currentColor; box-shadow: 4px 4px 0 #000; }
.g-banner.in { animation: bannerIn .55s cubic-bezier(.2, 1.7, .4, 1) forwards; }
.g-banner.out { animation: bannerOut .4s ease-in forwards; }
.g-banner.win b { color: #ffe27a; animation: bannerGlow 1s ease-in-out infinite alternate; }
.g-banner.win::before { content: ''; position: absolute; inset: -40% -20%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 226, 122, .35), transparent 70%); animation: bannerRays 2.4s linear infinite; }
.g-banner.fail { --bc: #ff4a4a; } .g-banner.fail b { color: #ffb0b0; }
.g-banner.start b { animation: bannerSiren .5s steps(1) infinite; }
.g-banner.wave { top: 18%; } .g-banner.wave b { font-size: clamp(22px, 4.4vw, 44px); color: #ffd23a; }
@keyframes bannerIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(6deg); filter: blur(4px); } 60% { opacity: 1; filter: none; } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-1.5deg); } }
@keyframes bannerOut { to { opacity: 0; transform: translate(-50%, -62%) scale(.9) rotate(-1.5deg); } }
@keyframes bannerGlow { from { text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 18px #ffd23a, 0 0 36px #ff7ac8; } to { text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 34px #ffe27a, 0 0 70px #ff7ac8; } }
@keyframes bannerRays { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } to { transform: rotate(360deg) scale(1); } }
@keyframes bannerSiren { 0% { text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 30px #ff2a2a, 0 0 60px #ff2a2a; } 50% { text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 30px #2a5aff, 0 0 60px #2a5aff; } }
.g-cash { position: absolute; z-index: 10; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(.4); opacity: 0; pointer-events: none; }
.g-cash b { position: relative; z-index: 1; display: block; font: 700 clamp(40px, 9vw, 76px)/1 var(--f-term); color: var(--cash); font-variant-numeric: tabular-nums; letter-spacing: .03em; text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 22px rgba(127, 224, 160, .9), 0 0 50px rgba(127, 224, 160, .55); white-space: nowrap; }
.g-cash i { position: absolute; left: 50%; top: 50%; width: 260%; height: 300%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(127, 224, 160, .32), rgba(255, 226, 122, .12) 55%, transparent 75%); animation: cashPulse .5s ease-in-out infinite alternate; }
.g-cash.in { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.g-cash.done b { animation: cashDone .35s ease-out; }
.g-cash.fly { transition: transform .38s cubic-bezier(.6, 0, .9, .5), opacity .38s ease-in; opacity: .9; }
.g-cash.fly i { opacity: 0; transition: opacity .2s; }
@keyframes cashPulse { from { opacity: .7; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes cashDone { 0% { transform: scale(1); } 40% { transform: scale(1.22); color: #fff; } 100% { transform: scale(1); } }
.g-cash-ring { position: absolute; z-index: 10; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 3px solid var(--cash); border-radius: 50%; pointer-events: none; animation: cashRing .6s ease-out forwards; }
@keyframes cashRing { to { transform: scale(7); opacity: 0; border-width: 1px; } }
.g-cash-bit { position: absolute; z-index: 10; width: 5px; height: 5px; margin: -2px 0 0 -2px; background: var(--cash); box-shadow: 1px 1px 0 #000; pointer-events: none; animation: cashBit .7s cubic-bezier(.1, .8, .3, 1) forwards; }
.g-cash-bit.w { background: #ffe27a; }
@keyframes cashBit { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.g-money.land { animation: moneyLand .5s cubic-bezier(.2, 1.8, .4, 1); text-shadow: 0 0 14px rgba(127, 224, 160, .9); }
@keyframes moneyLand { 0% { transform: scale(1.6); color: #fff; } 100% { transform: scale(1); } }
.zones li.stores { grid-column: 1 / -1; }
.store-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 6px; }
.store-btn { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 7px 9px; background: #181a24; color: #e8e3d6; border: 2px solid #000; border-left: 6px solid var(--c); box-shadow: 2px 2px 0 rgba(0, 0, 0, .5); cursor: pointer; font: inherit; }
.store-btn b { font: 700 11px var(--f-px); color: var(--c); text-transform: uppercase; }
.store-btn i { font: 700 10px var(--f-px); font-style: normal; color: var(--t); text-transform: uppercase; }
.store-btn span { grid-column: 1 / -1; font-size: 12px; color: #a9abb6; }
.store-btn:hover, .store-btn:focus-visible { background: #22263a; }
.store-btn.way { outline: 3px solid #ff7ac8; outline-offset: -1px; }
.store-btn.way span { color: #ff9ad6; }
.store-btn.done { opacity: .55; cursor: default; border-left-color: #7fe0a0; }
@media (max-width: 600px) { .g-banner { top: 30%; } .g-banner.wave { top: 27%; } }
@media (prefers-reduced-motion: reduce) { .g-banner.in, .g-banner.out, .g-cash i, .g-banner.win::before { animation-duration: .01s; } }

/* the Lex Lyx / Fryshuset cinematic: no skipping, a pause button instead; the pause menu over the film, only what makes sense there */
.cine-pause { display: none; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: 47; align-items: center; gap: 6px; padding: 8px 12px; font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: var(--paper); background: rgba(13, 15, 23, .82); border: 2px solid; border-color: var(--edge-hi) var(--edge-lo) var(--edge-lo) var(--edge-hi); box-shadow: 3px 3px 0 #000; cursor: pointer; }
.cine-pause:hover, .cine-pause:focus-visible { background: #22263a; }
body.cine-lock .cine-pause { display: inline-flex; }
body.cine-lock .film-skip { display: none !important; }
body:has(#menu:not([hidden])) .cine-pause { display: none; }
#menu.cine { position: fixed; z-index: 48; }
#menu.cine .mn-grid, #menu.cine #mn-saves, #menu.cine #mn-reset, #menu.cine #mn-clock { display: none; }
.mn-vol { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.mn-vol input { width: 110px; accent-color: var(--sodium); }
.mn-vol output { min-width: 2.2em; font: 700 11px var(--f-px); text-align: right; }

/* ---------- the HUD's aura and bandspel (under the money), and the reward animations ---------- */
.g-aura { display: none; }
.g-stat { display: inline-flex; align-items: baseline; gap: 6px; font: 20px/1 var(--f-term); font-variant-numeric: tabular-nums; letter-spacing: .03em; text-shadow: 2px 2px 0 #000; transform-origin: 100% 50%; }
.g-stat small { font: 700 8px var(--f-px); text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.g-stat .gs-ic { width: 11px; height: 11px; align-self: center; filter: drop-shadow(1px 1px 0 #000); }
.g-stat.aura { color: #ffe27a; } .g-stat.live { color: #ff8ad0; }
.g-money.tick.up, .g-stat.tick.up { animation: hudTick .5s cubic-bezier(.2, 1.8, .4, 1); }
.g-money.tick.down, .g-stat.tick.down { animation: hudDown .45s ease; }
@keyframes hudTick { 0% { transform: scale(1); } 35% { transform: scale(1.22); filter: brightness(1.6) drop-shadow(0 0 6px currentColor); } 100% { transform: scale(1); } }
@keyframes hudDown { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); color: #ff7a7a; } 60% { transform: translateX(2px); color: #ff7a7a; } }
.g-stat.land { animation: statLand .6s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes statLand { 0% { transform: scale(1.8); filter: brightness(2) drop-shadow(0 0 10px currentColor); } 100% { transform: scale(1); } }
@media (max-width: 600px) { .g-stat { font-size: 16px; } .g-stat small { font-size: 7px; } }

.g-rew { position: absolute; z-index: 10; left: 50%; top: 44%; transform: translate(-50%, -50%) scale(.4); opacity: 0; pointer-events: none; display: grid; justify-items: center; }
.g-rew > b { position: relative; z-index: 2; display: block; font: 700 clamp(40px, 9vw, 76px)/1 var(--f-term); font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; }
.g-rew > small { position: relative; z-index: 2; margin-top: 2px; font: 700 clamp(12px, 2vw, 18px)/1 var(--f-px); text-transform: uppercase; letter-spacing: .2em; text-shadow: 2px 2px 0 #000; }
.g-rew.in { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.g-rew.fly { transition: transform .38s cubic-bezier(.6, 0, .9, .5), opacity .38s ease-in; opacity: .9; }
.g-rew.fly .gb-fx { opacity: 0; transition: opacity .15s; }
.gb-fx { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; }
/* money: green, a soft glow */
.g-rew.money > b { color: var(--cash); text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 22px rgba(127, 224, 160, .9), 0 0 50px rgba(127, 224, 160, .55); }
.g-rew.money.done > b { animation: cashDone .35s ease-out; }
.gb-glow { position: absolute; left: 0; top: 0; width: 420px; height: 220px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(127, 224, 160, .32), rgba(255, 226, 122, .12) 55%, transparent 75%); animation: cashPulse .5s ease-in-out infinite alternate; }
/* aura: cool and hard. A black slash cuts in, the number in white-gold with a red/cyan split, shards fly out, a star turns */
.g-rew.aura > b { color: #fff6d8; text-shadow: 3px 0 0 rgba(255, 40, 110, .85), -3px 0 0 rgba(40, 230, 255, .85), 4px 4px 0 #000, 0 0 26px rgba(255, 226, 122, .8); font-style: italic; }
.g-rew.aura > small { color: #ffe27a; }
.g-rew.aura.glitch > b { animation: auraGlitch .12s steps(2) 1; }
.g-rew.aura.done > b { animation: auraDone .45s cubic-bezier(.2, 1.8, .4, 1); }
.gb-slash { position: absolute; left: 0; top: 0; width: 520px; height: 74px; transform: translate(-50%, -50%) skewX(-24deg) scaleX(0); background: linear-gradient(90deg, transparent, rgba(4, 4, 10, .92) 12%, rgba(4, 4, 10, .92) 88%, transparent); border-top: 2px solid #ffe27a; border-bottom: 2px solid #ff3a8a; animation: auraSlash .4s cubic-bezier(.2, 1, .3, 1) forwards; }
.gb-star { position: absolute; left: 0; top: 0; width: 150px; height: 150px; transform: translate(-50%, -50%); background: conic-gradient(from 0deg, transparent 0 40deg, rgba(255, 226, 122, .35) 45deg, transparent 50deg 130deg, rgba(255, 226, 122, .35) 135deg, transparent 140deg 220deg, rgba(255, 226, 122, .35) 225deg, transparent 230deg 310deg, rgba(255, 226, 122, .35) 315deg, transparent 320deg); border-radius: 50%; animation: auraSpin 1.6s linear infinite; filter: blur(.5px); }
.gb-shard { position: absolute; left: 0; top: 0; width: 26px; height: 3px; background: linear-gradient(90deg, #fff, #ffe27a); transform-origin: 0 50%; opacity: 0; animation: auraShard .7s var(--d) cubic-bezier(.1, .8, .3, 1) forwards; box-shadow: 0 0 6px #ffe27a; }
@keyframes auraSlash { 0% { transform: translate(-50%, -50%) skewX(-24deg) scaleX(0); } 100% { transform: translate(-50%, -50%) skewX(-24deg) scaleX(1); } }
@keyframes auraSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes auraShard { 0% { opacity: 1; transform: rotate(var(--a)) translateX(20px) scaleX(.3); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(150px) scaleX(1.4); } }
@keyframes auraGlitch { 0% { transform: translate(-3px, 1px) skewX(-8deg); } 50% { transform: translate(3px, -1px) skewX(6deg); clip-path: inset(10% 0 40% 0); } 100% { transform: none; } }
@keyframes auraDone { 0% { transform: scale(1); } 40% { transform: scale(1.25) skewX(-6deg); color: #fff; } 100% { transform: scale(1); } }
/* bandspel: warm, an equaliser that bounces behind the number, notes rising */
.g-rew.live > b { color: #ffd0ec; text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 22px rgba(255, 122, 200, .9), 0 0 48px rgba(255, 184, 106, .5); }
.g-rew.live > small { color: #ff8ad0; }
.g-rew.live.done > b { animation: liveDone .5s cubic-bezier(.2, 1.8, .4, 1); }
.gb-eq { position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; gap: 6px; height: 120px; transform: translate(-50%, -62%); opacity: .85; }
.gb-eq i { display: block; width: 14px; height: var(--h); background: linear-gradient(0deg, #ff5ab0, #ffb86a 70%, #fff2c0); box-shadow: 0 0 10px rgba(255, 122, 200, .6), 2px 2px 0 #000; animation: liveEq .32s var(--d) ease-in-out infinite alternate; transform-origin: 50% 100%; }
.gb-note { position: absolute; left: var(--x); top: 10px; font: 22px/1 serif; font-style: normal; color: #ffd0ec; text-shadow: 2px 2px 0 #000, 0 0 10px #ff7ac8; opacity: 0; animation: liveNote 1.2s var(--d) ease-out forwards; }
@keyframes liveEq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes liveNote { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-110px) rotate(-14deg) scale(1.1); } }
@keyframes liveDone { 0% { transform: scale(1); } 30% { transform: scale(1.3) rotate(-3deg); } 60% { transform: scale(.95) rotate(2deg); } 100% { transform: scale(1); } }
.g-cash-ring.aura { border-color: #ffe27a; border-radius: 0; transform: rotate(45deg); }
.g-cash-ring.live { border-color: #ff8ad0; }
/* notifications from the phone and the apps, sliding down at the top */
.g-notifs { position: absolute; z-index: 11; left: 50%; top: calc(var(--st, 0px) + 12px); transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, 92%); pointer-events: none; }
.g-notif { --nc: #8fd3c7; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 9px 12px 9px 9px; background: rgba(12, 14, 22, .94); border: 2px solid #000; border-left: 5px solid var(--nc); box-shadow: 4px 4px 0 rgba(0, 0, 0, .6), 0 0 24px rgba(0, 0, 0, .4); transform: translateY(-140%); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; }
.g-notif.in { transform: none; opacity: 1; }
.g-notif.out { transform: translateY(-40%); opacity: 0; transition: transform .4s ease-in, opacity .4s; }
.g-notif.fagel { --nc: #4aa3ff; } .g-notif.kvitter { --nc: #ff7ac8; }
.gn-ic { width: 40px; height: 40px; display: grid; place-items: center; background: #1a1e2c; border: 2px solid #000; overflow: hidden; }
.gn-ic canvas { width: 36px; height: 39px; image-rendering: pixelated; }
.gn-ic span { font: 700 18px var(--f-px); color: var(--nc); }
.gn-t { display: grid; gap: 2px; min-width: 0; }
.gn-t small { font: 700 9px var(--f-px); text-transform: uppercase; letter-spacing: .1em; color: var(--nc); }
.gn-t b { font: 700 13px var(--f-px); color: #fff; text-transform: none; }
.gn-t span { font-size: 13px; color: #c9cbd6; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .gb-eq i, .gb-star, .gb-glow { animation: none; } }

/* the clock under the place name is gone from the HUD */
.g-tr .g-clock { display: none; }

/* the phone: notifications, the fågel.com icon */
.ph-fagel-ico { border: 1px solid #10200a; }
.ph-notifs li.ph-nt { grid-template-columns: 28px 1fr; }
.ph-nt-t { margin: 1px 0 0; font: 700 10px var(--f-px); text-transform: none; color: #10200a; }
.ph-glyph { display: grid; place-items: center; width: 24px; height: 26px; font: 700 12px var(--f-px); color: #fff; background: #2a4a1a; }
.ph-glyph.tip { background: #c8901a; } .ph-glyph.done { background: #2f8a4e; } .ph-glyph.mission { background: #8a2a1a; font-size: 6px; } .ph-glyph.kvitter { background: #c0306a; } .ph-glyph.fagel { background: #2a5fae; }
img.ph-face { width: 24px; height: 26px; object-fit: cover; image-rendering: pixelated; }
.ph-appimg { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }

/* Twang: the dialogue box over the held film; Harald's video over the film */
.g-talk.over-film { position: fixed; z-index: 45; bottom: calc(var(--sb) + 8px); }
.film-video { position: absolute; inset: 0; z-index: 3; background: transparent; display: grid; place-items: center; opacity: 0; transition: opacity .6s ease; }
.film-video.ready { background: #000; }
.film-video:not(.ready) video { opacity: 0; }
.film-video.in { opacity: 1; }
.film-video video { width: min(100vw, calc(100vh * 16 / 9)); max-height: 100vh; aspect-ratio: 16 / 9; display: block; background: #000; }
.film-video-ph { margin: 0; font: 700 clamp(14px, 2.4vw, 22px) var(--f-px); letter-spacing: .2em; text-transform: uppercase; color: var(--sodium); text-shadow: 2px 2px 0 #000; }
/* Textläget: reactions per line (Twang) */
.ed-moods { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #2c3250; }
.ed-mood-row { display: grid; gap: 10px; }
.ed-mood { display: grid; gap: 4px; font-size: 14px; color: var(--paper); }
.ed-mood b { font: 700 10px var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: var(--sodium); }
.ed-mood select, #ed-who { min-height: 40px; padding: 6px 8px; font: 15px var(--f-body); color: var(--paper); background: #0b0d15; border: 2px solid #2c3250; }
.ed-moods .ed-tip { color: var(--muted); }
.ed-row.mood { border-left-color: var(--sodium); }
/* Textläget: the whole conversation */
.ed-talk { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #2c3250; }
.ed-talk-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; display: grid; gap: 4px; }
.ed-tl { display: grid; grid-template-columns: minmax(0, 1fr); }
.ed-tl-go { display: grid; gap: 2px; text-align: left; padding: 6px 8px; font: 14px/1.35 var(--f-body); color: var(--paper); background: #0b0d15; border: 2px solid #2c3250; cursor: pointer; }
.ed-tl-go b { font: 700 10px var(--f-px); text-transform: uppercase; letter-spacing: .06em; }
.ed-tl-go small { font-size: 12px; color: var(--sodium); }
.ed-tl.said .ed-tl-go { opacity: .55; }
.ed-tl.said .ed-tl-go b::before { content: '✓ '; }
.ed-tl.me .ed-tl-go { border-color: var(--sodium); cursor: default; }
.ed-tl-ins { display: flex; justify-content: center; align-items: center; height: 22px; position: relative; }
.ed-tl-ins::before { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; border-top: 1px dashed #2c3250; }
.ed-tl-add { position: relative; width: 34px; height: 22px; padding: 0; font: 700 16px/1 var(--f-px); color: var(--cash); background: #0b0d15; border: 2px solid #2c3250; cursor: pointer; }
.ed-tl-add:hover, .ed-tl-go:hover { border-color: var(--edge-hi); }

/* Textläget: the face beside the words, all reactions as a list of chips */
.ed-in-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.ed-in-row canvas { width: 72px; height: 78px; image-rendering: pixelated; background: #0b0d15; border: 2px solid #2c3250; }
.ed-in-row canvas[hidden] { display: none; }
.ed-in-row:has(canvas[hidden]) { grid-template-columns: minmax(0, 1fr); }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-chip { min-height: 34px; padding: 4px 10px; font: 14px var(--f-body); color: var(--paper); background: #0b0d15; border: 2px solid #2c3250; cursor: pointer; }
.ed-chip:hover { border-color: var(--edge-hi); }
.ed-chip.on { color: #0b0d15; background: var(--sodium); border-color: var(--sodium); font-weight: 700; }
/* a loss: cold, falling, draining */
.g-rew.neg > b { color: #c8ccd8; font-style: normal; text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 18px rgba(255, 70, 90, .75), 0 0 40px rgba(60, 70, 110, .6); }
.g-rew.neg > small { color: #ff6a7a; }
.g-rew.neg.done > b { animation: lossDone .5s ease-in; }
@keyframes lossDone { 0% { transform: translateY(0); } 40% { transform: translateY(6px) scale(.96); } 100% { transform: translateY(0) scale(1); } }
.gb-drop { position: absolute; left: calc(50% + var(--x)); top: 50%; width: 3px; height: 9px; background: #ff5a6e; box-shadow: 0 0 6px rgba(255, 90, 110, .8); opacity: 0; animation: gbDrop 1.1s var(--d) ease-in infinite; }
@keyframes gbDrop { 0% { opacity: 0; transform: translateY(-30px); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(60px); } }
.g-cash-ring.neg { border-color: #ff5a6e !important; }
.g-cash-bit.neg { background: #8a8ea0 !important; }

/* "Vem är du?": the band's name in yellow with its bird beside it (the drawing as it is, not pixelated) */
.s-brand { display: flex; justify-content: center; align-items: center; gap: .45em; margin: clamp(4px, 1.2vh, 14px) 0 clamp(6px, 1.4vh, 16px); font: 700 clamp(18px, 3.4vw, 34px)/1 var(--f-px); letter-spacing: .12em; text-transform: uppercase; color: #ffd23a; text-shadow: 3px 3px 0 #000; }
.s-brand img { height: 2.3em; width: auto; image-rendering: auto; filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 6px rgba(255, 210, 58, .55)); animation: sbGlowImg 3.6s ease-in-out infinite; }
/* it floats slowly up and down and glows a little; now and then a star glints somewhere on the words */
.s-bob { position: relative; display: inline-flex; align-items: center; gap: .45em; animation: sbBob 3.6s ease-in-out infinite; }
.s-brand-t { text-shadow: 3px 3px 0 #000, 0 0 10px rgba(255, 210, 58, .55), 0 0 22px rgba(255, 170, 40, .3); animation: sbGlow 3.6s ease-in-out infinite; }
@keyframes sbBob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@keyframes sbGlow { 0%, 100% { text-shadow: 3px 3px 0 #000, 0 0 8px rgba(255, 210, 58, .45), 0 0 18px rgba(255, 170, 40, .22); } 50% { text-shadow: 3px 3px 0 #000, 0 0 14px rgba(255, 220, 90, .8), 0 0 30px rgba(255, 170, 40, .45); } }
@keyframes sbGlowImg { 0%, 100% { filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 4px rgba(255, 210, 58, .4)); } 50% { filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 10px rgba(255, 220, 90, .8)); } }
.sb-star { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none; animation: sbStar .9s ease-out both; }
.sb-star::before, .sb-star::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; box-shadow: 0 0 6px #fff, 0 0 12px rgba(255, 220, 90, .9); transform: translate(-50%, -50%); }
.sb-star::before { width: 2px; height: 18px; }
.sb-star::after { width: 18px; height: 2px; }
@keyframes sbStar { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 35% { opacity: 1; transform: scale(1) rotate(20deg); } 100% { opacity: 0; transform: scale(.3) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .s-bob, .s-brand-t, .s-brand img { animation: none; } .sb-star { display: none; } }
.select.enter .s-brand { animation: selinfo .8s .1s ease both; }

/* "En historia om FÅGELPERSPEKTIV [logo]" under the big EMIGRERA SÖDER logo */
.t-brand { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: clamp(8px, 1.6vh, 18px); font: 700 clamp(16px, 2.6vw, 28px)/1 var(--f-px); letter-spacing: .12em; text-transform: uppercase; color: #f0a850; white-space: nowrap; }
.t-brand-pre { font-size: .55em; letter-spacing: .2em; color: var(--paper, #e8e3d6); text-shadow: 2px 2px 0 #000; }
.t-brand-row { display: flex; align-items: center; gap: .45em; margin-top: -.55em; }
.t-brand-t { text-shadow: 3px 3px 0 #000, 0 0 10px rgba(240, 150, 60, .45); }
.t-brand img { height: 2.1em; width: auto; image-rendering: auto; filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 6px rgba(240, 150, 60, .45)); }
.film-title .t-brand { font-size: clamp(16px, 2.4vw, 30px); }

/* the part of Söder you just walked into: small, up by the radar */
.g-zone { position: absolute; left: calc(var(--sl) + 108px); top: calc(var(--st) + 6px); display: grid; gap: 2px; padding: 5px 9px 6px; background: rgba(8, 9, 16, .88); border-left: 3px solid var(--zc, #8fd3c7); box-shadow: 2px 2px 0 #000; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; pointer-events: none; max-width: calc(100% - var(--sl) - var(--sr) - 230px); }
.g-zone.show { opacity: 1; transform: none; }
.g-zone b { font: 700 11px/1.1 var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: var(--zc, #8fd3c7); }
.g-zone span { font: 16px/1 var(--f-term); color: var(--paper); }
.g-zone.rec { --zc: var(--rec); } .g-zone.sodium { --zc: var(--sodium); } .g-zone.calm { --zc: #8fd3c7; }
@media (max-width: 560px) { .g-zone { left: calc(var(--sl) + 104px); max-width: calc(100% - var(--sl) - 104px - 150px); } }

/* Hellstones: everything a size up, easier to read */
.shop-bar { font-size: 14px; padding: 10px 14px; }
.shop-money { white-space: nowrap; }
.rig-name { font-size: 22px; }
.rig-bars { font-size: 21px; gap: 8px 12px; }
.rig-bars dd { height: 11px; }
.rig-k { font-size: 12px; }
.rig-zones li { font-size: 15px; }
.rig-zones b { font-size: 28px; }
.rig .btn { font-size: 13px; min-height: 42px; }
@media (max-width: 560px) { .shop-bar { font-size: 12px; } .shop-money { font-size: 26px; } }

/* the poster and card buttons on a computer: up over the bird button, clear of the goal line along the bottom */
.game:not(.touch) .g-billsbtn { right: calc(var(--sr) + 112px); bottom: calc(var(--sb) + 84px); }
.game:not(.touch) .g-cardsbtn { right: calc(var(--sr) + 172px); bottom: calc(var(--sb) + 84px); }

/* *ord* in dialogue: bold, a soft warm glow that breathes a little */
.em-glow { font: inherit; font-weight: 700; text-transform: none; letter-spacing: inherit; display: inline; color: #fff4dc; text-shadow: 0 0 3px rgba(255, 214, 140, .55), 0 0 9px rgba(255, 190, 110, .25); animation: emGlow 2.4s ease-in-out infinite; }
@keyframes emGlow { 0%, 100% { text-shadow: 0 0 2px rgba(255, 214, 140, .45), 0 0 6px rgba(255, 190, 110, .18); } 50% { text-shadow: 0 0 4px rgba(255, 220, 150, .75), 0 0 12px rgba(255, 190, 110, .35); } }
/* **ord**: also in italics (the pixel font has none, so it is slanted) */
.em-it { font-style: italic; display: inline-block; transform: skewX(-12deg); }
@media (prefers-reduced-motion: reduce) { .em-glow { animation: none; } }

/* a goal you have not got round to: glows softly and gives a small nudge every few seconds */
.g-goal.nag { animation: goalNag 3.2s ease-in-out infinite; }
@keyframes goalNag {
  0%, 62%, 100% { transform: none; box-shadow: 0 0 0 1px rgba(255, 210, 58, .25), 0 0 10px rgba(255, 210, 58, .18); text-shadow: 0 0 4px rgba(255, 210, 58, .35); }
  70% { transform: scale(1.07) rotate(-1deg); box-shadow: 0 0 0 1px rgba(255, 210, 58, .7), 0 0 22px rgba(255, 210, 58, .5); text-shadow: 0 0 8px rgba(255, 220, 90, .9); }
  76% { transform: scale(1.05) rotate(1deg); }
  84% { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .g-goal.nag { animation: none; box-shadow: 0 0 12px rgba(255, 210, 58, .4); } }

/* a caption in the dialogue box (no one talking): no face, the text takes the room */
.g-talk.nar { grid-template-columns: 1fr auto; }
.g-talk.nar canvas { display: none; }

/* before the soundcheck: how to play, in the middle of the screen (concert.js howto) */
.cc-how { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(4, 5, 10, .72); padding: 16px; animation: howin .25s ease-out both; }
.cc-how.out { animation: howout .2s ease-in both; }
@keyframes howin { from { opacity: 0; } }
@keyframes howout { to { opacity: 0; } }
.cc-how-in { width: min(560px, 100%); background: rgba(10, 11, 20, .97); border: 2px solid; border-color: var(--edge-hi, #3a3e52) var(--edge-lo, #0a0b10) var(--edge-lo, #0a0b10) var(--edge-hi, #3a3e52); border-top: 3px solid #ffa53a; box-shadow: 6px 6px 0 #000; padding: 20px 22px 22px; text-align: center; display: grid; justify-items: center; gap: 14px; }
.cc-how-in h2 { margin: 0; font: 700 18px var(--f-px); letter-spacing: .1em; text-transform: uppercase; color: #ffa53a; }
.cc-how-in p { margin: 0; font: 22px/1.25 var(--f-term); color: var(--paper, #e8e3d6); max-width: 30em; }
.cc-how-in p b { color: #ffe27a; font-weight: 400; }
.cc-keys { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cc-k { display: grid; justify-items: center; gap: 6px; }
.cc-cap { width: 58px; height: 58px; display: grid; place-items: center; font: 700 24px var(--f-px); color: #14161c; background: linear-gradient(#f4f0e6, #cfc8b8); border: 2px solid #0a0b10; border-bottom-width: 7px; border-radius: 6px; box-shadow: 0 0 0 2px var(--kc), 0 4px 0 #000; transition: transform .08s, border-bottom-width .08s, box-shadow .08s; }
.cc-k.on .cc-cap { transform: translateY(5px); border-bottom-width: 2px; box-shadow: 0 0 0 2px var(--kc), 0 0 18px var(--kc); }
.cc-keys.touch .cc-cap { width: 54px; height: 22px; border-radius: 50%; background: transparent; border: 3px solid var(--kc); box-shadow: none; }
.cc-keys.touch .cc-k.on .cc-cap { transform: none; background: var(--kc); box-shadow: 0 0 16px var(--kc); }
.cc-k small { font: 700 9px var(--f-px); letter-spacing: .06em; text-transform: uppercase; color: var(--kc); }
.cc-demo { width: 186px; height: 144px; image-rendering: pixelated; }
.cc-how-in .btn { font-size: 13px; }
.cc-or { font: 15px var(--f-term); color: #6a4a1a; text-transform: none; letter-spacing: 0; }
@media (max-width: 560px) { .cc-cap { width: 48px; height: 48px; font-size: 20px; } .cc-keys { gap: 10px; } .cc-how-in p { font-size: 19px; } }
@media (max-height: 520px) { .cc-how { padding: 8px; overflow-y: auto; place-items: start center; } .cc-how-in { padding: 12px 16px 14px; gap: 9px; } .cc-demo { display: none; } .cc-how-in p { font-size: 18px; } }

/* sms cards leaving: a soft slide and fade, one after the other (smsLeave) */
.g-sms.leave { animation: smsout .36s cubic-bezier(.4, 0, .6, 1) both; pointer-events: none; }
@keyframes smsout { to { transform: translateX(-26px); opacity: 0; } }

/* a tip in the middle of the screen: the heading in the pixel font, the explanation under it in the easy one */
.g-toast.has-body { display: grid; justify-items: center; gap: 10px; width: min(620px, 92%); white-space: normal; }
.g-toast.has-body b { font: inherit; text-wrap: balance; }
.g-toast.has-body span { font: 400 clamp(19px, 2.2vw, 25px)/1.25 var(--f-term); text-transform: none; letter-spacing: 0; color: var(--paper); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 0 0 8px rgba(0, 0, 0, .8); max-width: 30em; }

/* the big banners' line under the heading: the easy-to-read font too */
.g-banner span { font: 400 clamp(17px, 2.2vw, 24px)/1.2 var(--f-term); text-transform: none; letter-spacing: 0; }

/* the TIPS button on an sms (and by the goal): it glows and blinks a little */
.g-sms.tips { border-color: #ffd23a; grid-template-columns: 40px minmax(0, 1fr) auto; }
.g-sms.tips > .g-sms-tip { align-self: center; margin: 0; pointer-events: auto; font-size: 11px; padding: 8px 10px 7px; }
.ph-call.ph-tips { font: 700 10px/1 var(--f-px); letter-spacing: .1em; text-transform: uppercase; color: #1b1206; background: linear-gradient(#ffe27a, #f0a83a); border-color: #1b1206; animation: phhot 1s ease-in-out infinite; }
.g-sms-tip, .g-goal-tip { justify-self: start; margin-top: 5px; padding: 4px 10px 3px; font: 700 10px var(--f-px); letter-spacing: .12em; text-transform: uppercase; color: #1b1206; background: linear-gradient(#ffe27a, #f0a83a); border: 2px solid #000; box-shadow: 2px 2px 0 #000; cursor: pointer; pointer-events: auto; animation: tipglow 1.3s ease-in-out infinite; }
.g-sms-tip:hover, .g-goal-tip:hover { filter: brightness(1.12); }
@keyframes tipglow { 0%, 100% { box-shadow: 2px 2px 0 #000, 0 0 0 rgba(255, 210, 58, 0); filter: none; } 45% { box-shadow: 2px 2px 0 #000, 0 0 14px rgba(255, 210, 58, .85); } 55% { filter: brightness(1.25); } }
.g-goal-tip { margin-top: 0; font-size: 9px; }
@media (prefers-reduced-motion: reduce) { .g-sms-tip, .g-goal-tip { animation: none; box-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 210, 58, .6); } }
/* the tips window: big, in the middle, the game paused behind it */
.g-tipswin { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(4, 5, 10, .74); pointer-events: auto; animation: howin .25s ease-out both; overflow-y: auto; }
.g-tipswin.out { animation: howout .2s ease-in both; }
.tw-in { width: min(640px, 100%); background: rgba(10, 11, 20, .97); border: 2px solid; border-color: var(--edge-hi, #3a3e52) var(--edge-lo, #0a0b10) var(--edge-lo, #0a0b10) var(--edge-hi, #3a3e52); border-top: 3px solid #ffd23a; box-shadow: 6px 6px 0 #000; padding: 20px 22px 22px; display: grid; gap: 12px; }
.tw-in h2 { margin: 0; font: 700 18px var(--f-px); letter-spacing: .1em; text-transform: uppercase; color: #ffd23a; }
.tw-intro { margin: 0; font: 21px/1.25 var(--f-term); color: var(--paper, #e8e3d6); }
.tw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.tw-it { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 9px 10px; background: rgba(255, 255, 255, .03); border-left: 3px solid #ffd23a; animation: optin .3s ease-out both; }
.tw-ic { width: 34px; height: 34px; display: grid; place-items: center; font: 700 15px var(--f-px); font-style: normal; color: #14161c; background: #ffd23a; box-shadow: 2px 2px 0 #000; }
.tw-ic.gig { background: #ff7ac8; } .tw-ic.cam { background: #4aa3ff; } .tw-ic.bird { background: #7fe0a0; } .tw-ic.board { background: #ffa53a; } .tw-ic.shop { background: #e8e3d6; }
.tw-it b { display: block; font: 700 11px var(--f-px); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 2px 0 4px; }
.tw-it span { font: 19px/1.22 var(--f-term); color: #c9c2b2; }
.tw-in .btn { justify-self: start; }
@media (max-width: 560px) { .tw-intro { font-size: 18px; } .tw-it span { font-size: 17px; } }

/* the metro: the station nearest to where you are going glows, with a small "Närmst!" */
#metro-list li.near { position: relative; box-shadow: 0 0 0 2px #ffd23a, 0 0 18px rgba(255, 210, 58, .45); animation: mtnear 1.6s ease-in-out infinite; }
@keyframes mtnear { 50% { box-shadow: 0 0 0 2px #ffe27a, 0 0 28px rgba(255, 210, 58, .7); } }
#metro-list .mt-near { margin-left: 8px; padding: 2px 6px; font: 700 9px var(--f-px); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #1b1206; background: #ffd23a; box-shadow: 2px 2px 0 #000; display: inline-block; animation: mtnearTag .9s ease-in-out infinite alternate; }
@keyframes mtnearTag { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-3px) rotate(2deg); } }
#metro-list .btn.near { outline: 2px solid #ffe27a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #metro-list li.near, #metro-list .mt-near { animation: none; } }

/* the map: where you are, a pulsing ring with DU over it */
.map-inner { position: relative; }
.map-me { position: absolute; width: 0; height: 0; pointer-events: none; }
.map-me i { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #000, 0 0 12px rgba(255, 255, 255, .6); animation: mapme 1.4s ease-out infinite; }
.map-me i::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #ffd23a; box-shadow: 0 0 8px #ffd23a; animation: mapmeDot 1.4s ease-in-out infinite; }
.map-me b { position: absolute; left: -11px; top: -34px; padding: 1px 4px; font: 700 9px var(--f-px); letter-spacing: .08em; color: #14161c; background: #ffd23a; box-shadow: 2px 2px 0 #000; animation: mapmeTag 1.4s ease-in-out infinite; }
@keyframes mapme { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes mapmeDot { 50% { transform: scale(.7); } }
@keyframes mapmeTag { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .map-me i, .map-me i::after, .map-me b { animation: none; } }

/* ---- v176: grey by default; only what matters for the story is red ---- */
.g-sms, .g-sms[data-app="djungel"], .g-sms[data-app="whatsdata"], .g-sms.tips { border-color: #5c606e; }
.g-sms b, .g-sms[data-app="djungel"] b, .g-sms[data-app="whatsdata"] b { color: #c9ccd6; }
.g-sms b::before, .g-sms[data-app="djungel"] b::before, .g-sms[data-app="whatsdata"] b::before { color: #8a8e9a; }
.g-sms.story, .g-sms.story[data-app] { border-color: #ff4d4d; box-shadow: 3px 3px 0 #000, 0 0 12px rgba(255, 77, 77, .35); }
.g-sms.story b, .g-sms.story[data-app] b { color: #ff9a9a; }
.g-sms.story b::before, .g-sms.story[data-app] b::before { color: #ff4d4d; }
.g-notif, .g-notif.fagel, .g-notif.kvitter { --nc: #9a9eaa; }
.g-notif.important { --nc: #ff4d4d; }
.ph-n.grey { background: #6a6e7a; }

/* ---- v181: the soundcheck pick screen: icons, little gear in the chips, a live sound meter, the stage visible on phones ---- */
.cc-panel .hq-h { display: flex; align-items: center; gap: 8px; }
.cc-ic { width: 24px; height: 24px; image-rendering: pixelated; flex: none; filter: drop-shadow(2px 2px 0 #000); }
#cc-pick:not([hidden]) { animation: ccPanelIn .45s cubic-bezier(.2, .9, .3, 1.1) both; }
#cc-pick:not([hidden]) > * { animation: ccRowIn .4s ease-out both; }
#cc-pick > :nth-child(2) { animation-delay: .05s; } #cc-pick > :nth-child(3), #cc-pick > :nth-child(4) { animation-delay: .1s; }
#cc-pick > :nth-child(5), #cc-pick > :nth-child(6) { animation-delay: .15s; } #cc-pick > :nth-child(7), #cc-pick > :nth-child(8) { animation-delay: .2s; }
#cc-pick > :nth-child(9), #cc-pick > :nth-child(10), #cc-pick > :nth-child(11), #cc-pick > :nth-child(12) { animation-delay: .25s; }
#cc-pick > :nth-last-child(-n+4) { animation-delay: .3s; }
@keyframes ccPanelIn { from { opacity: 0; transform: translateY(calc(-50% + 30px)); } }
@keyframes ccRowIn { from { opacity: 0; transform: translateX(14px); } }
/* a pedal in its chip: a little stomp box with a knob, the LED blinks when it is on the board */
.pp-chip.cc-pch i { position: relative; width: 14px; height: 17px; border: 2px solid #000; border-radius: 2px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .35); }
.pp-chip.cc-pch i::before { content: ''; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; border-radius: 50%; background: #e8e3d6; box-shadow: 0 0 0 1px #000; }
.pp-chip.cc-pch i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 2px; height: 2px; background: #5a1a1a; }
.pp-chip.cc-pch.on i::after { background: #ff3a3a; box-shadow: 0 0 4px #ff3a3a; animation: ccLed .8s steps(2) infinite; }
@keyframes ccLed { 50% { background: #7a1a1a; box-shadow: none; } }
/* a guitar in its chip: a small body and neck in the guitar's colour */
.pp-chip.cc-gch i { width: 12px; height: 18px; border: none; clip-path: polygon(40% 0, 60% 0, 60% 45%, 90% 55%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 10% 55%, 40% 45%); }
.pp-chip.on.cc-gch i { animation: ccStrum .5s ease-in-out infinite alternate; }
@keyframes ccStrum { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.pp-chip.hit { animation: ccHit .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ccHit { 0% { transform: scale(.85); } 45% { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(255, 226, 122, .5); } 100% { transform: scale(1); } }
/* @@G2 a chip you switch on: a shine sweeps across it */
#cc-pick .pp-chip { position: relative; overflow: hidden; }
#cc-pick .pp-chip.hit.on::after { content: ''; position: absolute; top: -2px; bottom: -2px; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-20deg); animation: ccShine .5s ease-out forwards; pointer-events: none; }
@keyframes ccShine { to { left: 120%; } }
@media (prefers-reduced-motion: reduce) { #cc-pick .pp-chip.hit.on::after { animation: none; display: none; } }
/* the sound meter */
.cc-q { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-q b { font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .12em; color: #9adcf8; }
.cc-meter { display: inline-flex; gap: 3px; padding: 4px; background: #05060c; border: 2px solid #000; box-shadow: inset 0 0 0 1px #2a3050; }
.cc-meter i { width: 10px; height: 16px; background: #1a1e30; transition: background .25s, box-shadow .25s; }
.cc-meter i.on { background: #3ad08a; box-shadow: 0 0 6px rgba(58, 208, 138, .55); }
.cc-meter i.on.mid { background: #ffe27a; box-shadow: 0 0 6px rgba(255, 226, 122, .55); }
.cc-meter i.on.hot { background: #ff5a4a; box-shadow: 0 0 6px rgba(255, 90, 74, .6); }
.cc-meter.live i.on { animation: ccVu .5s ease-in-out infinite alternate; }
.cc-meter.live i.on:nth-child(3n) { animation-duration: .37s; } .cc-meter.live i.on:nth-child(3n+1) { animation-duration: .61s; }
@keyframes ccVu { from { opacity: 1; } to { opacity: .55; } }
.cc-mix { font: 18px var(--f-term); color: #9adcf8; }
.cc-vibes span { padding: 2px 0; }
.cc-vibes i { border-radius: 50%; box-shadow: 0 0 6px currentColor; }
/* phones: the stage on top, uncovered, the choices under it */
@media (max-width: 700px) {
  .concert.picking .print-cv { inset: 0 0 auto 0; height: calc(56.25vw + 10px); top: max(env(safe-area-inset-top, 0px), 8px); }
  .concert.picking #cc-pick { left: 0; right: 0; bottom: 0; top: calc(56.25vw + 18px + env(safe-area-inset-top, 0px)); width: auto; max-height: none; transform: none; border-left: 0; border-right: 0; border-bottom: 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .concert.picking #cc-pick:not([hidden]) { animation-name: ccPanelUp; }
  .concert.picking #cc-go { position: sticky; bottom: 0; justify-self: stretch; z-index: 2; box-shadow: 0 -6px 10px rgba(10, 12, 22, .9); }
  .concert.picking .cc-q { margin-bottom: 14px; }
}
/* wider screens: the stage to the left of the panel, all of it in view */
@media (min-width: 701px) { .concert.picking .print-cv { right: auto; width: calc(100% - min(460px, 40vw) - 3vw); } }
@keyframes ccPanelUp { from { opacity: 0; transform: translateY(40px); } }
@media (prefers-reduced-motion: reduce) { #cc-pick:not([hidden]), #cc-pick:not([hidden]) > *, .pp-chip.hit, .cc-meter.live i.on, .pp-chip.on.cc-gch i, .pp-chip.cc-pch.on i::after { animation: none !important; } }

/* ---- a new pedal: it drops in over the shop, gets stomped, waves and notes come out ---- */
.pedal-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(10, 12, 22, .62), rgba(10, 12, 22, .9)); animation: ppBg .25s ease-out both; }
.pedal-pop.out { opacity: 0; transition: opacity .35s; }
.pedal-pop .pp-stage { position: relative; width: 144px; height: 192px; display: grid; place-items: center; }
.pedal-pop canvas { width: 144px; height: 192px; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 #000); animation: ppDrop .62s cubic-bezier(.3, 1.5, .5, 1) both, ppStomp .2s .38s ease-in-out 1; }
.pedal-pop .pp-led { position: absolute; left: 50%; top: 18%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #ff3a3a; opacity: 0; box-shadow: 0 0 10px 4px rgba(255, 58, 58, .8); animation: ppLed .9s .4s steps(2) 3 both; }
.pedal-pop .pp-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 3px solid var(--pc); border-radius: 50%; opacity: 0; animation: ppRing .8s ease-out both; }
.pedal-pop .pp-note { position: absolute; left: 50%; top: 40%; font: 700 22px var(--f-term); font-style: normal; color: var(--pc); text-shadow: 2px 2px 0 #000; opacity: 0; animation: ppNote 1.3s ease-out both; }
.pedal-pop b { font: 700 20px var(--f-px); text-transform: uppercase; letter-spacing: .1em; color: #ffe27a; text-shadow: 3px 3px 0 #000; animation: ppText .45s .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.pedal-pop span { font: 22px var(--f-term); color: var(--paper); text-shadow: 2px 2px 0 #000; animation: ppText .45s .55s ease-out both; }
@keyframes ppBg { from { opacity: 0; } }
@keyframes ppDrop { 0% { transform: translateY(-260px) rotate(-14deg); } 70% { transform: translateY(0) rotate(3deg); } 100% { transform: none; } }
@keyframes ppStomp { 50% { transform: scale(1.08, .86) translateY(10px); } }
@keyframes ppLed { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } }
@keyframes ppRing { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes ppNote { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -130px) scale(1.2) rotate(12deg); } }
@keyframes ppText { from { opacity: 0; transform: translateY(14px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .pedal-pop *, .pedal-pop { animation-duration: .01s !important; } }

/* ---- a file found: the folder pops up, gets stamped, flies to the counter ---- */
.g-file-fx { position: absolute; z-index: 12; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.3); opacity: 0; display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.g-file-fx.in { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .2s, transform .4s cubic-bezier(.2, 1.6, .4, 1); }
.g-file-fx.fly { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.12); opacity: .85; transition: transform .42s cubic-bezier(.6, 0, .9, .5), opacity .42s ease-in; }
.g-file-fx.fly strong, .g-file-fx.fly small, .g-file-fx.fly .gf-spark { opacity: 0; transition: opacity .12s; }
.gf-folder { position: relative; width: 132px; height: 96px; background: linear-gradient(#e6d6a8, #d6c69c); border: 3px solid #000; box-shadow: 5px 5px 0 #000, 0 0 30px rgba(214, 198, 156, .55); animation: gfWob 1.4s ease-in-out .2s; }
.gf-tab { position: absolute; left: 10px; top: -14px; width: 46px; height: 12px; background: #d6c69c; border: 3px solid #000; border-bottom: 0; }
.gf-subj { position: absolute; left: 10px; top: 10px; font: 700 10px var(--f-px); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #3a2a14; }
.gf-lines { position: absolute; left: 10px; right: 12px; top: 30px; height: 40px; background: repeating-linear-gradient(#3a2a1433 0 2px, transparent 2px 9px); }
.gf-stamp { position: absolute; right: 6px; bottom: 10px; padding: 3px 8px; font: 700 15px var(--f-px); text-transform: uppercase; letter-spacing: .12em; color: #c02020; border: 3px solid #c02020; transform: rotate(-14deg) scale(2.4); opacity: 0; animation: gfStamp .22s .52s cubic-bezier(.5, 0, .7, 1) forwards; }
.g-file-fx strong { font: 700 clamp(20px, 3.4vw, 30px)/1 var(--f-px); text-transform: uppercase; letter-spacing: .08em; color: var(--manila, #d6c69c); text-shadow: 3px 3px 0 #000, 0 0 16px rgba(214, 198, 156, .7); margin-top: 8px; }
.g-file-fx small { font: 20px/1 var(--f-term); color: var(--paper); text-shadow: 2px 2px 0 #000; }
.gf-spark { position: absolute; left: 50%; top: 48px; width: 4px; height: 12px; margin-left: -2px; background: #ffe27a; box-shadow: 0 0 6px #ffd23a; opacity: 0; transform-origin: 50% 0; animation: gfSpark .6s ease-out both; }
@keyframes gfStamp { 0% { opacity: 0; transform: rotate(-14deg) scale(2.4); } 100% { opacity: 1; transform: rotate(-14deg) scale(1); } }
@keyframes gfWob { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } }
@keyframes gfSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(30px) scaleY(.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(110px) scaleY(1); } }
.g-files.land { animation: gfLand .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gfLand { 0% { transform: scale(1); } 35% { transform: scale(1.5); filter: drop-shadow(0 0 8px #ffe27a); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gf-folder, .gf-stamp, .gf-spark { animation: none !important; opacity: 1; transform: none; } .gf-spark { display: none; } }

/* ---- buying: the money goes, then the thing lands with its own moment ---- */
.pedal-pop .pp-minus { position: absolute; transform: translate(-50%, 0); font: 700 26px var(--f-term); font-style: normal; color: #ff6a5a; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255, 90, 74, .7); animation: ppMinus 1.3s ease-out both; white-space: nowrap; }
.pedal-pop .pp-coin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c0, #ffd23a 45%, #c8901a); border: 2px solid #6a4a0a; box-shadow: 0 0 6px rgba(255, 210, 58, .7); opacity: 0; animation: ppCoin .75s cubic-bezier(.5, 0, .7, 1) both; }
.shop-money.spend { color: #ff6a5a !important; animation: ppSpend .2s steps(2) 3; }
@keyframes ppMinus { 0% { opacity: 0; transform: translate(-50%, -6px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 46px) scale(1); } }
@keyframes ppCoin { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 45% { transform: translate(calc(var(--tx) * .45), calc(var(--ty) * .45 + var(--arc))) scale(1.1) rotateY(180deg); } 92% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.5) rotateY(360deg); } }
@keyframes ppSpend { 50% { transform: translateX(2px); } }
/* the thing comes in after the coins */
.pedal-pop canvas { animation-delay: .5s, .88s; }
.pedal-pop .pp-led { animation-delay: .9s; }
.pedal-pop b { animation-delay: .95s; } .pedal-pop span { animation-delay: 1.05s; }
.pedal-pop .pp-fx { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 2px 0 0; animation: ppText .45s 1.15s ease-out both; }
.pedal-pop .pp-fx i { font: 700 10px var(--f-px); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: #16161c; background: #ffe27a; padding: 4px 7px 3px; box-shadow: 2px 2px 0 #000; }
/* an amp: heavy, lands with a boom and the speaker pumps */
.pedal-pop.k-amp canvas { width: 168px; height: 192px; animation: ppDrop .5s .5s cubic-bezier(.6, 0, .9, .6) both, ppBoom .5s 1s ease-out 2; }
@keyframes ppBoom { 0% { transform: scale(1); } 20% { transform: scale(1.1, .94); } 100% { transform: scale(1); } }
.pp-shake { animation: ppShake .4s steps(6); }
@keyframes ppShake { 0%, 100% { transform: none; } 20% { transform: translate(4px, -2px); } 40% { transform: translate(-4px, 2px); } 60% { transform: translate(3px, 1px); } 80% { transform: translate(-2px, -1px); } }
/* a guitar: swings in and gets strummed */
.pedal-pop.k-gtr canvas { animation: ppSwing .7s .5s cubic-bezier(.3, 1.4, .5, 1) both, ppStrum .12s 1s ease-in-out 6 alternate; }
@keyframes ppSwing { 0% { transform: translateY(-240px) rotate(-60deg); } 100% { transform: none; } }
@keyframes ppStrum { from { transform: rotate(-2deg); } to { transform: rotate(2deg) translateX(1px); } }
/* clothes: spin in, then a shine sweeps over */
.pedal-pop.k-clo canvas { animation: ppSpin .8s .5s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes ppSpin { 0% { transform: translateY(-200px) rotateY(0) scale(.6); } 70% { transform: translateY(0) rotateY(720deg) scale(1.05); } 100% { transform: rotateY(720deg) scale(1); } }
.pedal-pop .pp-shine { position: absolute; inset: 18% 12%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .32) 50%, transparent 60%); background-size: 300% 100%; background-position: 120% 0; mix-blend-mode: screen; animation: ppShine .7s 1.25s ease-in-out both; pointer-events: none; }
@keyframes ppShine { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .pedal-pop .pp-coin, .pp-shake { animation: none !important; display: none; } }

/* ---- the gig board: tabs, locked stages, people, the band's guided tour ---- */
.hq-tabs { display: flex; gap: 6px; margin: 8px 0 4px; border-bottom: 2px solid #1e2a50; }
.hq-tabs[hidden] { display: none; }
.hq-tabs button { padding: 8px 14px 6px; font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: #10142a; border: 2px solid #1e2a50; border-bottom: 0; cursor: pointer; }
.hq-tabs button.on { color: #16161c; background: #ffe27a; border-color: #000; }
.hq-off { display: none !important; }
.hq-book li.locked { opacity: .78; border-style: dashed; }
.hq-lock { color: #ff7a7a !important; }
.hq-req { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; font: 16px/1.2 var(--f-term); }
.hq-req li { background: none !important; border: 0 !important; padding: 0 !important; display: block !important; }
.hq-req li.ok { color: #7fe0a0; } .hq-req li.no { color: #ff8a7a; }
.hq-folk li { grid-template-columns: auto 1fr auto !important; }
.hq-folk li em { font: 700 10px var(--f-px); font-style: normal; letter-spacing: .08em; color: #9adcf8; }
.hq-folk li.have em { color: #7fe0a0; }
.hq-tour { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(760px, calc(100vw - 20px)); z-index: 80; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 12px; background: rgba(8, 9, 16, .96); border: 2px solid; border-color: var(--edge-hi, #3a3f5a) var(--edge-lo, #0a0b12) var(--edge-lo, #0a0b12) var(--edge-hi, #3a3f5a); border-top: 3px solid var(--tag, #ffa53a); box-shadow: 4px 4px 0 #000, 0 -10px 30px rgba(0, 0, 0, .5); }
#hqv.touring .panel { padding-bottom: 130px; }
.hq-tour[hidden] { display: none; }
.hq-tour.in { animation: hqTourIn .22s ease-out; }
@keyframes hqTourIn { from { transform: translate(-50%, 14px); opacity: 0; } }
.hq-tour canvas { width: 72px; height: 78px; image-rendering: pixelated; background: linear-gradient(#1b1f33, #0b0c15); align-self: start; }
.hq-tour b { font: 700 12px var(--f-px); text-transform: uppercase; letter-spacing: .08em; color: var(--tag, #ffa53a); }
.hq-tour p { margin: 4px 0 0; font: 23px/1.18 var(--f-term); color: var(--paper); min-height: 2.4em; }
@media (max-width: 560px) { .hq-tour { grid-template-columns: 56px minmax(0, 1fr); bottom: 8px; } .hq-tour canvas { width: 56px; height: 61px; } .hq-tour p { font-size: 19px; } .hq-tour .btn { grid-column: 1 / -1; justify-self: end; } }

/* ---------- the till after a booked gig: the big number in the middle, the costs smash into it ---------- */
.tally { position: fixed; inset: 0; z-index: 9000; background: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, .5), rgba(0, 0, 0, .8)); cursor: pointer; animation: tallyIn .25s ease-out; }
.tally.out { opacity: 0; transition: opacity .35s; }
@keyframes tallyIn { from { opacity: 0; } }
.tally .g-rew { top: 40%; }
.tally .tally-main.hit > b { animation: tallyHit .4s ease-out; }
@keyframes tallyHit { 0% { transform: none; color: #ff6a6a; } 20% { transform: translate(-7px, 3px) scale(.94); color: #ff4a4a; } 45% { transform: translate(6px, -2px) scale(1.04); } 70% { transform: translate(-3px, 1px); } 100% { transform: none; } }
.tally .tally-main.home > small { color: #ffe27a; }
.tally .tally-main.neg > b { color: #ff7a7a; text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 22px rgba(255, 70, 70, .8); }
.tally-cost { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%) scale(.4); opacity: 0; display: grid; justify-items: center; pointer-events: none; }
.tally-cost.in { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity .15s, transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.tally-cost > b { font: 700 clamp(28px, 6vw, 52px)/1 var(--f-term); font-variant-numeric: tabular-nums; color: #ff5a5a; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 0 0 18px rgba(255, 60, 60, .8); white-space: nowrap; }
.tally-cost > small { margin-top: 4px; font: 700 clamp(11px, 1.8vw, 16px)/1 var(--f-px); letter-spacing: .14em; text-transform: uppercase; color: #ffb0b0; text-shadow: 2px 2px 0 #000; }
.tally-cost.in.smash { transform: translate(-50%, calc(-50% + var(--dy, -120px))) scale(.45); opacity: .2; transition: transform .23s cubic-bezier(.7, 0, 1, .6), opacity .23s ease-in; }

/* ---------- big money: flashier from 1 000, 5 000 and 10 000 kr ---------- */
.g-rew.money.t1 > b { color: #fff3a8; text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 26px rgba(255, 210, 60, .95), 0 0 60px rgba(127, 224, 160, .7); }
.g-rew.money.t1.done > b { animation: cashBig1 .5s cubic-bezier(.2, 1.8, .4, 1); }
.g-rew.money.t2 > b { color: #ffe27a; font-size: clamp(48px, 11vw, 92px); text-shadow: 4px 4px 0 #000, -3px -3px 0 #000, 0 0 30px rgba(255, 200, 40, 1), 0 0 80px rgba(255, 140, 40, .8); }
.g-rew.money.t2.done > b { animation: cashBig2 .6s cubic-bezier(.2, 1.8, .4, 1); }
.g-rew.money.t3 > b { font-size: clamp(54px, 13vw, 110px); animation: cashRainbow .5s linear infinite; text-shadow: 5px 5px 0 #000, -3px -3px 0 #000, 0 0 34px rgba(255, 255, 255, .95), 0 0 100px rgba(255, 120, 220, .9); }
.g-rew.money.t3.done > b { animation: cashRainbow .5s linear infinite, cashBig2 .7s cubic-bezier(.2, 1.8, .4, 1); }
.g-rew.money.t2 .gb-glow, .g-rew.money.t3 .gb-glow { width: 640px; height: 340px; background: radial-gradient(closest-side, rgba(255, 220, 90, .45), rgba(255, 140, 60, .18) 55%, transparent 75%); }
@keyframes cashBig1 { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-2deg); color: #fff; } 100% { transform: scale(1); } }
@keyframes cashBig2 { 0% { transform: scale(1); } 30% { transform: scale(1.55) rotate(3deg); color: #fff; } 60% { transform: scale(.92) rotate(-2deg); } 100% { transform: scale(1); } }
@keyframes cashRainbow { 0% { color: #ffe27a; } 25% { color: #7fe0a0; } 50% { color: #9adcf8; } 75% { color: #ff9ad8; } 100% { color: #ffe27a; } }
.cash-storm { position: fixed; inset: 0; z-index: 9500; pointer-events: none; overflow: hidden; }
.cash-storm.out { opacity: 0; transition: opacity .55s; }
.cs-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(255, 236, 140, .55), rgba(255, 200, 60, .12) 60%, transparent 80%); animation: csFlash .7s ease-out forwards; }
.cash-storm.t2 .cs-flash { animation: csFlash .5s ease-out 2 forwards; }
.cash-storm.t3 .cs-flash { animation: csStrobe .9s steps(1) forwards; }
@keyframes csFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes csStrobe { 0% { opacity: .95; background: rgba(255, 255, 255, .7); } 15% { opacity: 0; } 30% { opacity: .7; background: rgba(255, 220, 80, .5); } 45% { opacity: 0; } 60% { opacity: .6; background: rgba(255, 120, 220, .45); } 75%, 100% { opacity: 0; } }
.cs-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(rgba(255, 226, 122, .22) 0 8deg, transparent 8deg 20deg); animation: csRays 2.4s linear forwards; -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%); mask: radial-gradient(closest-side, #000 20%, transparent 70%); }
.cash-storm.t3 .cs-rays { background: repeating-conic-gradient(rgba(255, 226, 122, .3) 0 6deg, transparent 6deg 12deg, rgba(255, 120, 220, .25) 12deg 18deg, transparent 18deg 24deg); animation-duration: 3.4s; }
@keyframes csRays { from { transform: rotate(0) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: rotate(80deg) scale(1.1); opacity: 0; } }
.cs-coin { position: absolute; top: -24px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c0, #ffd23a 45%, #c89a1a 75%); box-shadow: 0 0 0 2px #6a4a0a, 0 0 10px rgba(255, 210, 60, .8); animation: csCoin var(--t, 1.2s) cubic-bezier(.4, 0, .9, .6) var(--d, 0s) forwards; opacity: 0; }
.cs-coin.note { border-radius: 2px; width: 22px; height: 12px; background: linear-gradient(#bfe8c8, #7fc890); box-shadow: 0 0 0 2px #2a5a3a; }
@keyframes csCoin { 0% { opacity: 1; transform: translateY(0) rotate(0) scale(var(--s, 1)); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(110vh) rotate(var(--r, 360deg)) scale(var(--s, 1)); } }
.cs-jack { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); font: 700 clamp(30px, 7vw, 64px)/1 var(--f-px); letter-spacing: .12em; color: #ffe27a; text-shadow: 4px 4px 0 #000, 0 0 24px rgba(255, 200, 40, .9); white-space: nowrap; animation: csJack .5s cubic-bezier(.2, 1.8, .4, 1) both, csWobble .35s ease-in-out .5s infinite alternate; }
.cash-storm.t3 .cs-jack { animation: csJack .5s cubic-bezier(.2, 1.8, .4, 1) both, csWobble .25s ease-in-out .5s infinite alternate, cashRainbow .4s linear infinite; font-size: clamp(36px, 9vw, 84px); }
@keyframes csJack { from { transform: translate(-50%, -50%) scale(3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes csWobble { from { transform: translate(-50%, -50%) rotate(-3deg) scale(1); } to { transform: translate(-50%, -50%) rotate(3deg) scale(1.08); } }
body.cash-shake { animation: cashShake .8s linear; }
@keyframes cashShake { 0%, 100% { transform: none; } 10% { transform: translate(-6px, 3px); } 20% { transform: translate(5px, -4px); } 30% { transform: translate(-4px, -2px); } 40% { transform: translate(4px, 3px); } 55% { transform: translate(-3px, 1px); } 70% { transform: translate(2px, -2px); } 85% { transform: translate(-1px, 1px); } }
@media (prefers-reduced-motion: reduce) { .cs-rays, .cs-coin { display: none; } body.cash-shake { animation: none; } }

/* ---------- the board: songs as cassettes, the gear drawn; a tooltip says what each one is ---------- */
.hq-icons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.hq-ic { position: relative; padding: 4px; background: #0e0f18; border: 2px solid #23263a; box-shadow: 2px 2px 0 #000; cursor: help; line-height: 0; transition: transform .12s, border-color .12s; }
.hq-ic:hover, .hq-ic:focus-visible { transform: translateY(-2px); border-color: #ffd23a; outline: none; }
.hq-ic canvas { image-rendering: pixelated; display: block; }
.hq-icons.songs canvas { width: 44px; height: 30px; }
.hq-icons.gear canvas { width: 48px; height: 64px; }
.hq-icons.gear .amps canvas { width: 56px; height: 64px; }
.hq-ic.used { border-color: #5a7a4a; }
.hq-ic.locked canvas { opacity: .55; }
.hq-ic.locked .q { position: absolute; inset: 0; display: grid; place-items: center; font: 700 16px var(--f-px); font-style: normal; color: #8a8ea8; text-shadow: 2px 2px 0 #000; }
.hq-tipbox { position: fixed; z-index: 9800; max-width: 260px; padding: 8px 10px; background: rgba(8, 9, 16, .97); border: 2px solid #ffd23a; box-shadow: 3px 3px 0 #000; pointer-events: none; display: grid; gap: 3px; }
.hq-tipbox[hidden] { display: none; }
.hq-tipbox b { font: 700 11px var(--f-px); text-transform: uppercase; letter-spacing: .06em; color: #ffd23a; }
.hq-tipbox span { font: 17px/1.15 var(--f-term); color: var(--paper); }
#hq-booklist li.teaser b { color: #8a8ea8; }
#hq-booklist li.unknown { border-style: dashed; opacity: .8; }
#hq-booklist li.unknown em { font-size: 22px; color: #ffd23a; }
#hq-booklist li.hq-last { display: block; padding: 6px 10px; border: 0; background: none; font: 17px var(--f-term); color: #9adcf8; }
.tally-cost.bonus > b { color: #ffe27a; text-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 0 0 18px rgba(255, 210, 60, .85); }
.tally-cost.bonus > small { color: #fff3c0; }
.g-rew ~ .tally-cost { z-index: 11; }

/* a fine: the money counts up red and crashes into the corner */
.g-rew.money.neg > b { color: #ff5a6a; text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 0 0 22px rgba(255, 60, 80, .9), 0 0 50px rgba(255, 40, 60, .55); }
.g-cash-ring.money.neg { border-color: #ff5a6a; }
.cc-meter.x2 i { width: 7px; }
.cc-max { display: block; color: #ffe27a; font-size: 12px; margin-top: 4px; }

/* the phone, bigger: easier to read and tap */
.phone { width: min(400px, calc(100vw - 24px)); padding: 16px 14px 14px; }
.ph-screen { min-height: 380px; max-height: min(600px, 76vh); padding: 10px; }
.ph-app { font-size: 13px; padding: 11px 10px; }
.ph-appcv { width: 26px; height: 26px; }
.ph-bar { font-size: 11px; }
.ph-screen h3 { font-size: 14px; }
.ph-from { font-size: 11px; }
#cc-pick .pp-chip { touch-action: none; user-select: none; -webkit-user-select: none; }

/* the next gig on the board: name, a stage picture, how full, KÖR GIGET */
.hq-next { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.hq-next-l { display: grid; gap: 6px; min-width: 0; }
.hq-next-k { font: 700 10px var(--f-px); text-transform: uppercase; letter-spacing: .1em; color: #ffa53a; }
.hq-next b.hq-next-n { font: 700 18px var(--f-px); color: #fff3d8; text-transform: uppercase; text-shadow: 0 0 14px rgba(255, 165, 58, .5); }
.hq-next-pic { width: 240px; height: 96px; image-rendering: pixelated; border: 2px solid #000; box-shadow: 0 0 0 1px #3a2a10, 0 0 22px rgba(255, 120, 60, .25); background: #05060c; }
.hq-fill { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; height: auto; background: none; border: 0; }
.hq-fill-m { display: inline-flex; gap: 2px; padding: 3px; background: #05060c; border: 2px solid #000; }
.hq-fill-m i { width: 9px; height: 12px; background: #1a1e30; }
.hq-fill-m i.on { background: #3ad08a; } .hq-fill-m i.on.mid { background: #ffe27a; } .hq-fill-m i.on.hot { background: #ff5a4a; }
.hq-fill em { font: 18px var(--f-term); font-style: normal; color: var(--paper); }
.hq-go { justify-self: start; }
.hq-going { font: 700 11px var(--f-px); font-style: normal; text-transform: uppercase; color: #7fe0a0; }
.hq-stats-line { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.hq-num { font: 700 22px/1 var(--f-term); white-space: nowrap; }
.hq-num.aura { color: #fff6d8; font-style: italic; text-shadow: 2px 0 0 rgba(255, 40, 110, .85), -2px 0 0 rgba(40, 230, 255, .85), 2px 2px 0 #000, 0 0 14px rgba(255, 226, 122, .7); }
.hq-num.fans { color: #ffb0c8; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255, 120, 160, .6); }
.hq-num.live { color: #ffd0ec; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255, 122, 200, .8), 0 0 26px rgba(255, 184, 106, .4); }
@media (max-width: 560px) { .hq-next { grid-template-columns: 1fr; } .hq-next-pic { width: 100%; height: auto; } }
.cc-meter.x4 i { width: 4px; gap: 1px; }
.cc-meter.x4 { gap: 1px; }

/* ---------- @@G1 the fat buy (dear gear): bigger, rays, a flash, a quake; every dear guitar its own moment (app.js popFx) ---------- */
.pedal-pop canvas.pp-fxcv { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; pointer-events: none; z-index: 0; filter: none; animation: none; }
.pedal-pop > .pp-stage, .pedal-pop > b, .pedal-pop > span, .pedal-pop > .pp-fx { position: relative; z-index: 1; }
.pedal-pop > .pp-minus, .pedal-pop > .pp-coin { z-index: 2; }
.pedal-pop.fat1 .pp-stage { scale: 1.12; }
.pedal-pop.fat2 .pp-stage { scale: 1.28; margin: 14px 0 18px; }
.pedal-pop.fat3 .pp-stage { scale: 1.45; margin: 30px 0 34px; }
.pedal-pop.fat4 .pp-stage { scale: 1.62; margin: 44px 0 48px; }
.pedal-pop.fat3 b, .pedal-pop.fat4 b { font-size: 28px; }
.pedal-pop.fat4 b { background: linear-gradient(90deg, #ffe27a, #fff6d0, #ffb86a, #ffe27a); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(3px 3px 0 #000); animation: ppText .45s .95s cubic-bezier(.2, 1.6, .4, 1) both, ppGold 1.6s 1.3s linear infinite; }
.pedal-pop.fat3 span, .pedal-pop.fat4 span { font-size: 28px; }
.pedal-pop .pp-rays { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--pc) 0 7deg, transparent 7deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); opacity: 0; animation: ppRays 3.6s .85s linear both; }
.pedal-pop.fat4 .pp-rays, .pedal-pop.gfx-folk .pp-rays { width: 760px; height: 760px; margin: -380px 0 0 -380px; }
.pedal-pop .pp-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 3; animation: ppFlash .5s .9s ease-out both; }
.pedal-pop.fat2 .pp-flash { animation-duration: .35s; }
.pedal-pop.gfx-shock .pp-flash { background: #2a0a14; }
.pedal-pop.gfx-stars .pp-flash { background: #9ab0ff; }
.pedal-pop.gfx-fire .pp-flash { background: #ff8a1a; }
.pedal-pop.gfx-arrow .pp-flash { background: #c8f03a; }
.pedal-pop.pp-quake .pp-stage, .pedal-pop.pp-quake b { animation: ppQuake .5s steps(8) 1; }
.pedal-pop.gfx-wobble canvas:not(.pp-fxcv) { animation: ppSwing .7s .5s cubic-bezier(.3, 1.4, .5, 1) both, ppWob .22s 1s ease-in-out 8 alternate; }
.pedal-pop.gfx-slam canvas:not(.pp-fxcv) { animation: ppSlam .5s .45s cubic-bezier(.7, 0, 1, .6) both, ppStrum .12s 1s ease-in-out 4 alternate; }
.pedal-pop.gfx-glow canvas:not(.pp-fxcv) { filter: drop-shadow(4px 4px 0 #000) drop-shadow(0 0 14px rgba(255, 184, 106, .9)); }
.pedal-pop.gfx-fire canvas:not(.pp-fxcv) { filter: drop-shadow(4px 4px 0 #000) drop-shadow(0 0 16px rgba(255, 106, 26, .95)); }
.pedal-pop.gfx-stars canvas:not(.pp-fxcv) { filter: drop-shadow(4px 4px 0 #000) drop-shadow(0 0 12px rgba(154, 176, 255, .9)); }
.pedal-pop.gfx-folk canvas:not(.pp-fxcv) { filter: drop-shadow(4px 4px 0 #000) drop-shadow(0 0 18px rgba(255, 226, 122, .95)); }
.pedal-pop.gfx-shock canvas:not(.pp-fxcv) { filter: drop-shadow(4px 4px 0 #000) drop-shadow(0 0 10px rgba(122, 26, 42, .95)); }
@keyframes ppRays { 0% { opacity: 0; transform: rotate(0) scale(.4); } 12% { opacity: .55; transform: rotate(20deg) scale(1); } 80% { opacity: .4; } 100% { opacity: 0; transform: rotate(110deg) scale(1.05); } }
@keyframes ppFlash { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }
@keyframes ppQuake { 0%, 100% { transform: none; } 12% { transform: translate(-7px, 4px); } 25% { transform: translate(6px, -5px); } 37% { transform: translate(-5px, -3px); } 50% { transform: translate(5px, 4px); } 62% { transform: translate(-3px, 2px); } 75% { transform: translate(2px, -2px); } }
@keyframes ppWob { from { transform: skewX(-8deg) rotate(-3deg); } to { transform: skewX(8deg) rotate(3deg); } }
@keyframes ppSlam { 0% { transform: translateY(-120vh) scale(1.2); } 85% { transform: translateY(6px) scaleY(.86); } 100% { transform: none; } }
@keyframes ppGold { to { background-position: 300% 0; } }
/* the locked dear guitars at Hellstones */
.item.locked { opacity: .62; filter: grayscale(.75); }
.item.locked .item-art canvas { filter: brightness(.55); }
.item-tier.t-debaser { color: #c8f03a; border-color: #c8f03a; }
.item-tier.t-zinken { color: #ffe27a; border-color: #ffe27a; background: #2a1a08; }
@media (prefers-reduced-motion: reduce) { .pedal-pop .pp-rays, .pedal-pop .pp-flash, .pedal-pop.pp-quake .pp-stage { animation: none !important; display: none; } }
/* @@G4 Vinterfestivalen night: go early, the booking vibe, drunk at the party, the eyelids */
.hq-early { font: 15px var(--f-term); font-style: normal; color: #ffb0a0; }
.hq-vibe { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.hq-vibe-k { width: 100%; font: 700 9px var(--f-px); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hq-vibe em { font: 16px var(--f-term); font-style: normal; color: var(--paper); }
.g-lids { position: absolute; inset: 0; pointer-events: none; z-index: 40; --lid: 0; --ld: .25s; }
.g-lids i { position: absolute; left: -5%; right: -5%; height: calc(var(--lid) * 52%); background: #000; transition: height var(--ld) ease-in-out; }
.g-lids .lt { top: 0; border-radius: 0 0 50% 50% / 0 0 30% 30%; }
.g-lids .lb { bottom: 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
.g-drunk #g-cv { animation: gDrunk 3.2s ease-in-out infinite; }
@keyframes gDrunk { 0% { transform: rotate(-1.4deg) translate(-6px, 2px) scale(1.03); } 50% { transform: rotate(1.6deg) translate(7px, -4px) scale(1.05); } 100% { transform: rotate(-1.4deg) translate(-6px, 2px) scale(1.03); } }
.g-drunk.g-zoomout #g-cv { animation: gZoomOut 2.4s ease-in forwards; }
@keyframes gZoomOut { from { transform: rotate(1deg) scale(1.04); filter: none; } to { transform: rotate(-6deg) scale(.45); filter: blur(3px) brightness(.4); } }
@media (prefers-reduced-motion: reduce) { .g-drunk #g-cv, .g-drunk.g-zoomout #g-cv { animation: none; } }
.hq-ups .hq-vibe .hq-fill-m { display: inline-flex; gap: 2px; padding: 3px; background: #05060c; border: 2px solid #000; }
.hq-ups .hq-vibe .hq-fill-m i { display: block; width: 9px; height: 12px; background: #1a1e30; }
.hq-ups .hq-vibe .hq-fill-m i.on { background: #3ad08a; } .hq-ups .hq-vibe .hq-fill-m i.on.mid { background: #ffe27a; } .hq-ups .hq-vibe .hq-fill-m i.on.hot { background: #ff5a4a; }
.hq-ups .hq-vibe small.hq-vibe-k { font: 700 9px var(--f-px); color: var(--muted); }
.hq-ups .hq-vibe em { font: 16px var(--f-term); font-style: normal; color: var(--paper); }

/* @@H2 the till: the dark clears while what is left flies up into the corner */
.tally.clear { background: transparent; transition: background .35s; }
.tally .tally-main.fly { transition: transform .46s cubic-bezier(.6, 0, .9, .5), opacity .46s ease-in; opacity: .95; }
.tally .tally-main.fly .gb-fx { opacity: 0; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .tally .tally-main.fly { transition: none; } }
/* ---------- @@H1 who has bought a ticket (the soundcheck panel) ---------- */
.cc-who { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 2px; }
.cc-who-g { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 5px; font: 700 9px var(--f-px); letter-spacing: .06em; text-transform: uppercase; color: #c9c2b2; background: rgba(5, 6, 12, .6); border: 1px solid #000; box-shadow: 2px 2px 0 #000; }
.cc-who-g i { width: 8px; height: 8px; background: var(--c); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .3); }
.cc-who-g em { font: 16px/1 var(--f-term); font-style: normal; color: var(--c); }
/* @@H3 the legendary found guitar: the shop's mystery card, the find moment's ability line, its tier badge */
.item.mystery { background: linear-gradient(135deg, #0a0e1e, #10142a); border-color: #2a3a7a; }
.item.mystery .item-t b { letter-spacing: .3em; color: #7ac8ff; }
.item-tier.t-legend { color: #3affc8; border-color: #3affc8; background: #06141a; }
.pedal-pop.pp-find b { background: linear-gradient(90deg, #3affc8, #7ac8ff, #aa6eff, #3affc8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ppGold 2.4s linear infinite; }
.pedal-pop .pp-ability { position: relative; z-index: 1; display: grid; gap: 4px; justify-items: center; max-width: 440px; margin: 10px auto 0; padding: 8px 12px; text-align: center; background: rgba(4, 10, 24, .82); border: 2px solid #3affc8; box-shadow: 0 0 18px rgba(58, 255, 200, .35); animation: ppAb .5s 1.6s both; }
.pedal-pop .pp-ability b { font: 700 11px var(--f-px); letter-spacing: .1em; text-transform: uppercase; color: #3affc8; }
.pedal-pop .pp-ability i { font: 17px var(--f-term); font-style: normal; color: #e8f3ff; }
@keyframes ppAb { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pedal-pop.pp-find b, .pedal-pop .pp-ability { animation: none; } }

/* the phone: narrower (like a real phone), still tall enough to read */
.phone { width: min(300px, calc(100vw - 40px)); }
#phone .ph-view { grid-template-columns: minmax(0, 1fr); }
#phone .ph-app { min-width: 0; font-size: 11px; letter-spacing: .02em; overflow: hidden; }
#phone .ph-app .ph-n { flex: none; }

/* SPLASH: a black screen with the bird and a small bar for about a second before the game (so it does not feel too fast).
   The bar fills by itself (CSS); App.start ends it after about 1 s, gate.js restarts it after the password. */
.splash { position: fixed; inset: 0; z-index: 9900; display: grid; place-content: center; justify-items: center; gap: 26px; background: #000; transition: opacity .2s ease; }
.splash.out { opacity: 0; pointer-events: none; }
.splash img { width: 128px; height: 128px; image-rendering: pixelated; animation: sp-bob .55s steps(2, jump-none) infinite alternate; }
.sp-bar { width: 132px; height: 6px; padding: 1px; border: 2px solid #3a3a3a; background: #000; box-sizing: content-box; }
.sp-bar i { display: block; height: 100%; background: #fff; transform-origin: left center; transform: scaleX(0); animation: sp-fill .8s cubic-bezier(.35, .5, .45, 1) forwards; }
@keyframes sp-fill { from { transform: scaleX(0); } to { transform: scaleX(.9); } }
@keyframes sp-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .splash img { animation: none; } }