/* REKTdRick.com brand tokens, typography and component treatments. */
:root {
  --background:258 14% 4%;--foreground:44 24% 95%;--card:256 13% 7%;
  --gold:42 82% 56%;--gold-bright:46 92% 70%;--gold-deep:36 70% 40%;
  --eth:264 72% 62%;--eth-deep:258 68% 34%;--border:254 11% 16%;
  --bg:hsl(var(--background));--paper:hsl(var(--foreground));--gold-color:hsl(var(--gold));
  --muted:hsl(250 16% 84%);--eth-color:hsl(var(--eth));--line:hsl(var(--gold)/.2);
  font-family:Archivo,Arial,sans-serif;
}
body{background-color:var(--bg);background-image:radial-gradient(circle at 20% 0%,hsl(var(--gold)/.09),transparent 55%),radial-gradient(circle at 85% 20%,hsl(var(--eth)/.13),transparent 60%);font-kerning:normal}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(hsl(44 30% 92%/.11) 1px,transparent 1px);background-size:3px 3px;z-index:-1}
.topbar{border-color:hsl(var(--gold)/.2);background:hsl(258 16% 4%/.55);max-width:1280px;min-height:92px}
.brand{gap:12px;letter-spacing:.005em}
.brand-badge{height:54px;width:54px;object-fit:contain;filter:drop-shadow(0 0 14px hsl(var(--gold)/.35))}
.brand-wordmark{font:400 26px/1 Anton,Archivo,sans-serif;display:block;text-transform:uppercase}
.brand small{color:hsl(var(--gold)/.8);font-family:"JetBrains Mono",monospace;font-size:8px;letter-spacing:2.6px;margin-top:7px}
.gold-metal,.rick-word{background:linear-gradient(177deg,hsl(var(--gold-bright)),hsl(var(--gold)) 34%,hsl(var(--gold-deep)) 52%,hsl(var(--gold)) 68%,hsl(var(--gold-bright)));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 hsl(258 40% 3%/.9))}
.edition{color:hsl(var(--gold-bright));font-size:9px;letter-spacing:1.3px;padding:10px 0;border-bottom:1px solid hsl(var(--gold)/.4)}
.edition:hover{color:white;border-color:hsl(var(--gold-bright))}
.icon-button,.secondary{border:1px solid hsl(var(--gold)/.42);background:transparent;color:hsl(var(--gold-bright));border-radius:0;font-family:"JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:1px}
.icon-button:hover,.secondary:hover:not(:disabled){background:hsl(var(--gold)/.09);border-color:hsl(var(--gold)/.8)}
.eyebrow{color:hsl(var(--gold)/.85);letter-spacing:1.8px;line-height:1.7}
.eyebrow span{background:hsl(var(--gold));box-shadow:0 0 12px hsl(var(--gold)/.35)}
h1{font-family:Anton,Archivo,sans-serif;font-weight:400;letter-spacing:.005em;transform:none;line-height:.99;font-size:82px;margin:22px 0}
.dash{font-size:.7em;letter-spacing:-.06em;margin-right:0;vertical-align:8%}
h2,.overlay-card h2{font-family:Anton,Archivo,sans-serif;font-weight:400;letter-spacing:.005em;text-transform:uppercase;line-height:1.12}
.tagline{color:hsl(250 16% 84%);line-height:1.7}
.intro-art{width:280px;height:230px;border:1px solid hsl(var(--gold)/.3);background:hsl(var(--card));margin:24px 0 25px;box-shadow:inset 0 1px hsl(var(--gold)/.14),0 0 0 1px #06050b99}
.orbit{inset:0;border:0;border-radius:0;transform:none;opacity:1;background:radial-gradient(58% 52% at 52% 46%,hsl(var(--eth)/.35),transparent 70%),radial-gradient(40% 38% at 60% 70%,hsl(var(--gold)/.22),transparent 72%)}
.intro-art svg{transform:none;left:48px;bottom:14px;height:212px;width:178px;filter:drop-shadow(0 6px 10px #040307)}
.art-label{transform:none;bottom:0;left:0;width:100%;text-align:center;background:#0b0910f2;color:hsl(var(--gold-bright));border-top:1px solid hsl(var(--gold)/.25);padding:9px 6px;font-size:8px;letter-spacing:1.6px;box-shadow:none}
.art-corner{position:absolute;width:19px;height:19px;border-color:hsl(var(--gold));border-style:solid;z-index:1}.top-left{left:-1px;top:-1px;border-width:2px 0 0 2px}.bottom-right{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.instructions h2{color:hsl(var(--gold)/.85);font:10px "JetBrains Mono",monospace;letter-spacing:2px}
.instructions p{color:var(--muted)}.instructions b{color:hsl(var(--gold-bright))}
.cabinet{border-color:hsl(var(--gold)/.38);border-radius:4px;background:hsl(var(--card));box-shadow:inset 0 1px hsl(var(--gold)/.14),0 0 0 1px #06050b99,0 24px 75px #0006}
.cabinet-top{background:linear-gradient(90deg,hsl(var(--gold)/.10),hsl(var(--eth)/.08));border-color:hsl(var(--gold)/.3);color:hsl(var(--gold-bright));letter-spacing:.85px}
.cabinet-top i{background:hsl(var(--gold));box-shadow:0 0 9px hsl(var(--gold)/.5)}
.scoreboard{background:#0d0b11}.scoreboard span{color:hsl(250 16% 78%)}
.scoreboard strong{color:hsl(var(--gold-bright));font-family:"JetBrains Mono",monospace;font-weight:700}
.scoreboard>div:nth-child(2){border-color:hsl(var(--gold)/.18)}.scoreboard>div:last-child strong{color:hsl(var(--gold))}
.time-track{background:hsl(var(--gold)/.12)}.time-track div{background:linear-gradient(90deg,hsl(var(--gold-deep)),hsl(var(--gold-bright)));box-shadow:0 0 12px hsl(var(--gold)/.2)}
.arena{background-color:hsl(var(--card));background-image:radial-gradient(hsl(44 30% 92%/.025) 1px,transparent 1px),radial-gradient(ellipse at 50% 45%,hsl(var(--eth-deep)/.26),transparent 80%);background-size:3px 3px,100% 100%}
.arena-status{color:hsl(250 16% 78%)}.arena-status span:last-child{color:hsl(var(--gold-bright))}
.hole:before{background:radial-gradient(ellipse at 50% 45%,#030206 45%,#0a0711 65%,#21152e 66%);box-shadow:0 3px 0 hsl(var(--gold)/.47),0 6px 0 #08060d,inset 0 4px 7px #000}
.hole:after{color:hsl(var(--gold)/.5)}.hole.up:before{box-shadow:0 3px 0 hsl(var(--gold)/.85),0 6px 0 #08060d,0 8px 15px hsl(var(--eth)/.11),inset 0 4px 7px #000}
.pop{color:hsl(var(--gold-bright));text-shadow:2px 3px #060409}
.overlay{background:hsl(258 30% 3%/.7)}.overlay-card{background:#100d17f5;border:1px solid hsl(var(--gold)/.4);border-radius:2px;box-shadow:inset 0 1px hsl(var(--gold)/.14),0 15px 65px #0008;transform:none}
.mini-label{color:hsl(var(--gold)/.85);font-family:"JetBrains Mono",monospace;letter-spacing:1.8px}
.overlay-card p{color:var(--muted)}.overlay-card .small-note{color:hsl(250 16% 72%)}
.primary{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:12px;letter-spacing:1.6px;color:#0b0812;background:linear-gradient(170deg,hsl(var(--gold-bright)),hsl(var(--gold)) 46%,hsl(var(--gold-deep)));border:1px solid hsl(var(--gold-bright)/.7);border-radius:0;box-shadow:none;transition:transform .18s,box-shadow .18s}
.primary:hover:not(:disabled){background:linear-gradient(170deg,hsl(var(--gold-bright)),hsl(var(--gold)) 46%,hsl(var(--gold-deep)));box-shadow:0 0 32px hsl(var(--gold)/.34);transform:translateY(-1px)}
.primary:active{transform:translateY(0);box-shadow:none}
.countdown{color:hsl(var(--gold-bright));background:hsl(258 30% 3%/.8);font-family:Anton,Archivo,sans-serif;font-weight:400;text-shadow:0 0 35px hsl(var(--gold)/.25)}
.controls{background:#0e0c13;border-color:hsl(var(--gold)/.2)}legend{color:hsl(var(--gold)/.8)}
.mode-buttons{background:#08070c;border:1px solid hsl(var(--gold)/.28);border-radius:0}
.mode-buttons button{border-radius:0;color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.mode-buttons .selected{background:hsl(var(--gold)/.13);color:hsl(var(--gold-bright));box-shadow:inset 0 0 0 1px hsl(var(--gold)/.5)}
.cabinet-bottom{background:#09070e;color:hsl(var(--gold)/.8);border-top:1px solid hsl(var(--gold)/.12)}.keyboard-hint{color:hsl(250 16% 68%)}
footer{border-color:hsl(var(--gold)/.2);color:hsl(250 16% 70%)}.footer-brand{color:hsl(var(--gold-bright));font:400 17px Anton,Archivo,sans-serif;letter-spacing:.8px}footer button{color:hsl(var(--gold-bright))}
dialog{background:hsl(var(--card));border-color:hsl(var(--gold)/.42);border-radius:4px;box-shadow:inset 0 1px hsl(var(--gold)/.14),0 24px 100px #0009}dialog::backdrop{background:#040307db}dialog p{color:var(--muted)}.close{color:hsl(var(--gold-bright))}
#results{color:hsl(var(--gold-bright));font-family:"JetBrains Mono",monospace}#results small{color:var(--muted)}
@media(max-width:1050px){h1{font-size:65px}.intro-art{width:240px}.intro-art svg{left:32px}.brand-wordmark{font-size:24px}}
@media(max-width:760px){.topbar{min-height:72px}.brand-badge{width:41px;height:41px}.brand-wordmark{font-size:23px}.brand small{font-size:7px;letter-spacing:1.8px;margin-top:5px}.icon-button{font-size:8px;letter-spacing:.6px}.eyebrow{font-size:7px;letter-spacing:1.4px}h1{font-size:44px;letter-spacing:.005em;transform:none;margin:13px 0 0;line-height:1.1}.dash{letter-spacing:-.06em;margin-right:0}.tagline{font-size:11px;margin-top:8px}.cabinet{border-radius:3px;box-shadow:inset 0 1px hsl(var(--gold)/.14),0 0 0 1px #06050b99,0 14px 40px #0005}.cabinet-top{letter-spacing:.25px}.overlay-card h2{font-size:28px}.mode-buttons button{font-size:9px;padding:10px 12px}.primary{font-size:11px;letter-spacing:1.2px}.secondary{font-size:10px;padding:11px}.footer-brand{font-size:14px}footer>span{display:none}}
@media(max-width:370px){h1{font-size:39px}.brand-wordmark{font-size:20px}.brand small{font-size:6px}.mode-buttons button{padding:10px}.overlay-card h2{font-size:25px}}
.music-panel{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px 22px;background:linear-gradient(100deg,hsl(var(--eth-deep)/.13),hsl(var(--card)));border-top:1px solid hsl(var(--gold)/.2)}
.music-disc{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid hsl(var(--gold)/.38);background:radial-gradient(circle,#191020 25%,#09070e 27%,#21162c 32%,#09070e 36%);color:hsl(var(--gold-bright));font-size:19px;transition:box-shadow .3s}
.music-panel.is-playing .music-disc{box-shadow:0 0 16px hsl(var(--gold)/.18);border-color:hsl(var(--gold)/.8)}
.music-info{min-width:0;display:flex;flex-direction:column;gap:5px}.music-label{font:8px "JetBrains Mono",monospace;letter-spacing:1.7px;color:hsl(var(--gold)/.8)}
.music-info strong{font:700 12px Archivo,Arial,sans-serif;color:hsl(var(--gold-bright));line-height:1.4;overflow-wrap:anywhere}
#music-status{font:8px/1.6 "JetBrains Mono",monospace;color:hsl(250 16% 75%)}
#music-toggle{font-size:9px;white-space:nowrap;min-height:36px;padding:9px 11px}
.music-volume{grid-column:2 / 4;display:flex;align-items:center;gap:10px;font:8px "JetBrains Mono",monospace;color:hsl(250 16% 75%)}
.music-volume label{text-transform:uppercase;letter-spacing:1px}.music-volume input{accent-color:hsl(var(--gold));width:112px;max-width:45%;margin:0;height:22px;cursor:pointer;touch-action:pan-x}.music-volume input:focus-visible{outline:2px solid hsl(var(--gold-bright));outline-offset:4px}.music-volume output{min-width:30px;color:hsl(var(--gold-bright))}
@media(max-width:760px){.music-panel{padding:13px 14px;grid-template-columns:28px minmax(0,1fr) auto;gap:9px}.music-disc{width:28px;height:28px;font-size:16px}.music-info strong{font-size:11px}.music-label{font-size:7px}#music-status{font-size:7px}#music-toggle{font-size:8px;padding:8px;letter-spacing:.3px}.music-volume{gap:8px}}
.impact {
  position: absolute;
  inset: 2% 8% 18%;
  pointer-events: none;
  z-index: 2;
}
.impact::before, .impact::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
}
.impact::before {
  background: repeating-conic-gradient(from 12deg, transparent 0deg 39deg, hsl(var(--gold-bright)) 39deg 42deg, transparent 42deg 60deg);
  -webkit-mask-image: radial-gradient(ellipse, transparent 55%, #000 57% 68%, transparent 70%);
  mask-image: radial-gradient(ellipse, transparent 55%, #000 57% 68%, transparent 70%);
}
.impact::after {
  inset: 9%;
  border: 2px solid hsl(var(--gold-bright)/.8);
}
.hole.hit .impact::before {
  animation: whack-burst 190ms ease-out;
}
.hole.hit .impact::after {
  animation: whack-ring 190ms ease-out;
}
@keyframes whack-burst {
  from { opacity: 1; transform: scale(.85) rotate(-8deg); }
  to { opacity: 0; transform: scale(1.18) rotate(8deg); }
}
@keyframes whack-ring {
  from { opacity: .85; transform: scale(.8); }
  to { opacity: 0; transform: scale(1.15); }
}
@media(prefers-reduced-motion:reduce) {
  .hole.hit .impact::before, .hole.hit .impact::after {
    animation: none;
  }
}