/* Rock-tema: sort læder, hot pink og sølvnitter. Fælles for storskærm og kontrol. */
:root{
  --leather:#0d0b0e;
  --tile:#1d181f;
  --tile-hi:#2b2330;
  --pink:#ff2e8a;
  --pink-soft:#ff8cc0;
  --chrome:#e9e7ec;
  --ink:#f6eef3;
  --muted:#b69fb0;
  --line:#3a2b36;
  --good:#46e0a0;
  --bad:#ff5a5a;
  --stud:radial-gradient(circle at 38% 35%, #ffffff 0 1.2px, #d9d7de 2px, #8d8a94 4px, #3c3a42 5.2px, transparent 5.8px);
  --f-display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --f-script:"Rock Salt","Segoe Script",cursive;
  --f-num:"Anton","Impact",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background-color:var(--leather);
  background-image:
    radial-gradient(90% 60% at 50% -10%,#ff2e8a2e 0%,transparent 60%),
    repeating-linear-gradient(45deg,#ffffff03 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-45deg,#00000040 0 1px,transparent 1px 4px);
  color:var(--ink);font-family:var(--f-body);font-size:15px;
  -webkit-tap-highlight-color:transparent;
}
[hidden]{display:none!important}
button{font-family:var(--f-body);font-weight:700;font-size:15px;border-radius:12px;border:1px solid var(--line);background:#ffffff0a;color:var(--ink);padding:10px 14px;cursor:pointer;touch-action:manipulation}
button:hover{background:#ff2e8a1f;border-color:#ff2e8a66}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--pink-soft);outline-offset:2px}
button.primary{background:var(--pink);color:#1a0010;border-color:var(--pink)}
button.primary:hover{background:var(--pink-soft)}
input,textarea{font-family:var(--f-body);color:var(--ink)}
.title{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 0 18px #ff2e8a66;margin:0;overflow-wrap:anywhere}
.tag{font-family:var(--f-script);color:var(--pink);transform:rotate(-1.5deg);transform-origin:left;display:inline-block}
.frame{border-radius:18px;padding:16px;
  background:
    var(--stud) 0 0/16px 16px repeat-x,
    var(--stud) 0 100%/16px 16px repeat-x,
    var(--stud) 0 0/16px 16px repeat-y,
    var(--stud) 100% 0/16px 16px repeat-y,
    linear-gradient(160deg,#2a2229,#120f13);
  box-shadow:0 0 0 1px #000,0 24px 60px #000c,0 0 40px #ff2e8a22}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;background:#000;padding:8px;border-radius:10px}
.cat{background:var(--pink);color:#16000c;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;line-height:1.15;overflow-wrap:anywhere;min-width:0}
.tile{position:relative;background:linear-gradient(180deg,var(--tile-hi),var(--tile));border:1px solid #ff2e8a44;border-radius:8px;font-family:var(--f-num);color:var(--pink);text-shadow:0 0 14px #ff2e8a88,0 3px 0 #000;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;padding:0;min-width:0;transition:transform .15s ease,box-shadow .15s,border-color .15s}
.tile::before,.tile::after{content:"";position:absolute;width:11px;height:11px;top:6px;background:var(--stud);background-size:11px 11px;transform:scale(.85)}
.tile::before{left:6px}.tile::after{right:6px}
.tile.used{background:#0c0a0d;border-color:#ffffff10;color:transparent;text-shadow:none}
.tile.used::before,.tile.used::after{opacity:.35}
.tile.live{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink),0 0 26px #ff2e8a88}
.score{font-family:var(--f-num);line-height:1;color:var(--chrome);font-variant-numeric:tabular-nums}
.score.neg{color:var(--bad)}
.studband{height:16px;background:var(--stud) 0 0/18px 16px repeat-x}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}