/* Rock-poster display fonts (SIL Open Font License, self-hosted) */
@font-face { font-family: 'Metal Mania'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/metal-mania-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/bebas-neue-latin-400-normal.woff2) format('woff2'); }
:root { --rock: "Metal Mania", Impact, sans-serif; --cond: "Bebas Neue", Impact, sans-serif; --ink: #f3ead2; --ink-soft: #c9bda3; --gold: #c9a227; --gold-2: #e7c46a; --bg: #120c08; --panel: #1d140d; --serif: "Cormorant Garamond", Georgia, serif; --mono: "Space Mono", ui-monospace, monospace; }
* { box-sizing: border-box; }
html { touch-action: manipulation; }
html { background: #0b0705; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(ellipse at top, #2a1a10, #0b0705 70%) fixed; color: var(--ink); font-family: var(--serif); }
.stage { margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 10px 20px; }
[hidden] { display: none !important; }
.btn { font: 700 .82rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1.5px solid var(--gold); padding: .6rem 1rem; cursor: pointer; }
.btn:hover, .btn[aria-pressed="true"] { background: rgba(201,162,39,.25); }
.btn.gold { background: linear-gradient(#e7c46a, #a8842a); color: #1a1108; border-color: #e7c46a; }
.btn.big { font-size: 1.05rem; padding: .85rem 2.4rem; }
.btn:disabled { opacity: .4; cursor: default; }
.btn:focus-visible, .card:focus-visible, .gear:focus-visible { outline: 3px solid #8fe6ff; outline-offset: 2px; }
.select { max-width: 1100px; margin: 0 auto; text-align: center; }
.eyebrow { font: 700 .75rem var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin: .6rem 0 0; }
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); margin: .1rem 0; color: var(--gold-2); text-shadow: 0 3px 0 #000, 0 0 24px rgba(201,162,39,.35); letter-spacing: .02em; }
.tag { margin: 0 0 1rem; color: var(--ink-soft); font-style: italic; font-size: 1.2rem; }
.modes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.seg { display: inline-flex; } .seg .btn + .btn { border-left: 0; }
.step { min-height: 1.5em; margin: .9rem 0 .5rem; font-size: 1.15rem; color: var(--gold-2); }
.roster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.card { position: relative; background: linear-gradient(#2a1d12, #150e09); border: 2px solid #4a3620; padding: 6px 4px 8px; cursor: pointer; color: var(--ink); display: flex; flex-direction: column; align-items: center; transition: transform .12s, border-color .12s; }
.card:hover { transform: translateY(-3px); border-color: var(--gold); }
.card canvas { width: 100%; max-width: 150px; height: auto; aspect-ratio: 150 / 170; }
.card .nm { font: 700 1rem/1.1 var(--serif); margin-top: 2px; } .card small { display: block; font: italic 400 .8rem var(--serif); color: var(--ink-soft); }
.card.p1 { border-color: #e7c46a; box-shadow: 0 0 0 2px #e7c46a, 0 0 22px rgba(231,196,106,.5); } .card.p1::before { content: "P1"; }
.card.p2 { border-color: #ff6a5a; box-shadow: 0 0 0 2px #ff6a5a, 0 0 22px rgba(255,106,90,.5); } .card.p2::before { content: "P2"; }
.card.p1::before, .card.p2::before { position: absolute; top: 4px; left: 6px; font: 700 .75rem var(--mono); background: #000; padding: 1px 5px; }
.card.p1.p2::before { content: "P1 · P2"; }
.go { display: flex; gap: 12px; justify-content: center; margin: 1.1rem 0; }
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; font-size: 1rem; line-height: 1.55; }
.howto > div { background: rgba(0,0,0,.3); border: 1px solid #4a3620; padding: 10px 12px; }
kbd { font: 700 .75rem var(--mono); border: 1px solid var(--gold); padding: 0 .35em; margin: 0 .1em; }
.safety { max-width: 760px; margin: 1rem auto 0; font-size: .95rem; color: var(--ink-soft); }
.links { margin-top: .8rem; } .links a { color: var(--gold-2); }
.fightscr { display: flex; flex-direction: column; align-items: center; }
.arena { position: relative; margin: 0 auto; border: 2px solid var(--gold); box-shadow: 0 20px 60px rgba(0,0,0,.6); touch-action: none; user-select: none; -webkit-user-select: none; }
#cv { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.gear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--gold); background: rgba(18,12,8,.75); color: var(--ink); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; padding: 0; }
.gear { top: auto; bottom: 8px; transform: none; }
.menu, .result { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(8,5,3,.6); }
.menu { flex-direction: column; gap: 8px; } .menu .btn { min-width: 240px; }
.set-h { font: 700 .9rem var(--mono); letter-spacing: .35em; color: var(--gold); margin: 0 0 4px; text-transform: uppercase; }
.res-card { background: var(--panel); border: 1px solid var(--gold); outline: 1px solid #4a3620; outline-offset: -7px; padding: clamp(14px, 3vw, 30px); text-align: center; max-width: 560px; }
.res-k { font: 700 .8rem var(--mono); letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin: 0; }
.res-card h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: .2rem 0; color: var(--gold-2); }
.res-q { font-style: italic; font-size: 1.2rem; color: var(--ink); } .res-s { color: var(--ink-soft); }
.res-b { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
@media (max-width: 760px) { .roster { grid-template-columns: repeat(3, 1fr); } .howto { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.sub { margin: -.2rem 0 .3rem; font: 700 .85rem var(--mono); letter-spacing: .4em; text-transform: uppercase; color: var(--ink-soft); }

.stage-row { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; }
.stage-row[hidden] { display: none; }
.stage-row label { font: 700 .78rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.stage-row select { font: 600 1rem var(--serif); color: var(--ink); background: var(--panel); border: 1.5px solid var(--gold); padding: .45rem .8rem; }
.stage-row select:focus-visible { outline: 3px solid #8fe6ff; outline-offset: 2px; }
.res-end { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; text-align: left; margin: .6rem 0 .9rem; }
.res-end[hidden] { display: none; }
.res-end canvas { grid-row: span 2; width: 92px; height: auto; }
.res-end p { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.4; }

/* rock / fight-game typography */
h1 { font-family: var(--rock); font-weight: 400; letter-spacing: .03em; }
.res-card h2 { font-family: var(--rock); font-weight: 400; }
.btn, .eyebrow, .sub, .set-h, .res-k, .stage-row label, .card.p1::before, .card.p2::before, .touch button { font-family: var(--cond); font-weight: 400; letter-spacing: .14em; }
.btn { font-size: 1.05rem; } .btn.big { font-size: 1.4rem; letter-spacing: .18em; }
.eyebrow { font-size: 1rem; } .sub { font-size: 1.15rem; } .set-h, .res-k { font-size: 1.1rem; } .stage-row label { font-size: 1rem; }
.card .nm { font-family: var(--cond); font-weight: 400; font-size: 1.25rem; letter-spacing: .06em; }
.step { font-family: var(--cond); font-size: 1.45rem; letter-spacing: .08em; }

/* ---- touch controls, Roman style: shield joystick, plaque buttons, gold coin attacks ---- */
.touch { display: none; width: 100%; max-width: 560px; margin: 8px auto 0; justify-content: space-between; align-items: center; gap: 6px; padding: 4px; touch-action: none; user-select: none; -webkit-user-select: none; --s: min(118px, 31vw); --m: min(56px, 14.6vw); }
body.touchy .touch { display: flex; }
.touch button { -webkit-tap-highlight-color: transparent; touch-action: none; border: 0; padding: 0; cursor: pointer; }
.touch .on { filter: brightness(1.4) saturate(1.2); transform: scale(.93); }
/* the shield: scutum red, bronze rings, gold rim, a gold umbo that follows your thumb */
.stick { position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 50%; touch-action: none;
  background: radial-gradient(circle, transparent 0 60%, rgba(0,0,0,.35) 61% 62%, transparent 63%),
    radial-gradient(circle, #a8321f 0 47%, #6e1a10 48% 63%, #d4ad48 64% 67%, #7a1f14 68% 85%, #f0d27a 86% 90%, #8a6418 91% 96%, #3b2708 97%);
  box-shadow: 0 5px 12px rgba(0,0,0,.65), inset 0 0 12px rgba(0,0,0,.5); }
.stick::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(#f6dc8a 0 4deg, transparent 4deg 22.5deg); -webkit-mask: radial-gradient(circle closest-side, transparent 0 79%, #000 80% 86%, transparent 87%); mask: radial-gradient(circle closest-side, transparent 0 79%, #000 80% 86%, transparent 87%); }
.stick::after { content: ''; position: absolute; inset: 13%; border-radius: 50%; border: 1.5px dashed rgba(240,210,122,.55); pointer-events: none; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 38% 32%, #fff6cf, #ecc85e 30%, #b28a2c 62%, #5e4110 100%); box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 0 0 2px #6b4a12, inset 0 0 0 5px rgba(255,236,170,.35); }
.stick .knob::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e7c46a 60%, #8a6418); }
/* plaques: a gilded frame with a dark marble panel */
.plaques { display: flex; flex-direction: column; gap: 5px; flex: 1; max-width: 120px; }
.plq { height: calc(var(--m) * .62); border-radius: 3px; color: #f6e7bf; font: 700 .7rem/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 0 #000;
  background: linear-gradient(90deg, #8a6418, #f0d27a 4%, #8a6418 8%, transparent 8% 92%, #8a6418 92%, #f0d27a 96%, #8a6418), linear-gradient(#f0d27a, #a8842a 12%, #3a2712 14% 86%, #a8842a 88%, #f0d27a);
  box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 0 0 1px #4a3208; }
.plq.red { color: #fff1c9; background: linear-gradient(90deg, #8a6418, #f0d27a 4%, #8a6418 8%, transparent 8% 92%, #8a6418 92%, #f0d27a 96%, #8a6418), linear-gradient(#f0d27a, #a8842a 12%, #8e2416 14% 86%, #a8842a 88%, #f0d27a); }
.plq.cyan { color: #bff1ff; }
/* gold coins: a bronze-rimmed medallion with a crimson field */
.medals { display: grid; grid-template-columns: repeat(2, var(--m)); gap: 5px 6px; flex: none; }
.med { width: var(--m); height: var(--m); border-radius: 50%; color: #ffe9b0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-shadow: 0 1px 0 #000;
  background: radial-gradient(circle, #8e2416 0 54%, #f0d27a 55% 58%, #5e1a10 59% 66%, transparent 67%), radial-gradient(circle at 38% 30%, #fff3c4, #e2bd56 40%, #9a7220 75%, #4e360c);
  box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 0 0 1.5px #4e360c; }
.med b { font: 700 1.15rem/1 var(--serif); letter-spacing: .04em; }
.med small { font: 700 .48rem/1 var(--mono); letter-spacing: .12em; opacity: .9; }
.touch .hint { display: none; }
@media (orientation: portrait) {
  body.touchy .stage { padding-left: 6px; padding-right: 6px; }
  body.touchy .touch .hint { display: block; position: absolute; left: 0; right: 0; top: 100%; margin-top: 6px; text-align: center; font: italic .95rem var(--serif); color: var(--ink-soft); }
  body.touchy .touch { position: relative; margin-bottom: 30px; }
}
/* phone held sideways: the controls float over the bottom of the arena, like an arcade HUD */
@media (orientation: landscape) and (max-height: 520px) {
  body.touchy .touch { position: fixed; left: 0; right: 0; bottom: 8px; max-width: none; padding: 0 14px; align-items: flex-end; pointer-events: none; --s: min(104px, 27vh); --m: min(50px, 13vh); }
  body.touchy .touch > * { pointer-events: auto; opacity: .88; }
  body.touchy .plaques { flex-direction: row; max-width: none; flex: none; gap: 6px; align-self: flex-end; }
  body.touchy .plq { width: 92px; }
  .stage { padding-top: 4px; }
  body.touchy .stage { padding: 2px 0 0; }
  body.touchy .arena { box-shadow: none; }
  body.touchy .gear { position: fixed; top: 84px; right: 10px; left: auto; bottom: auto; transform: none; width: 34px; height: 34px; font-size: 1.05rem; opacity: .85; }
}
/* short screens (phones sideways): a compact results card so the arena shows around it */
@media (max-height: 520px) {
  .res-card { padding: 10px 18px; max-width: 460px; }
  .res-card h2 { font-size: 1.7rem; margin: 0; }
  .res-q { font-size: 1rem; margin: .2rem 0; } .res-s { font-size: .9rem; margin: .2rem 0 .5rem; }
  .res-b .btn { font-size: .9rem; padding: .45rem .8rem; }
  .res-end { margin: .3rem 0; } .res-end canvas { width: 60px; } .res-end p { font-size: .88rem; }
  .menu .btn { padding: .4rem .9rem; }
}

/* Return to the author page: a bronze arena plaque with a gold sheen that sweeps across it. It sits in the page flow below the links, so it never covers text. */
.home-row { margin: 1.2rem 0 .6rem; }
.home { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.6rem; overflow: hidden; isolation: isolate;
  font: 400 1.15rem/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: #1a1108;
  background: linear-gradient(#f1d585, #c9a227 48%, #8a6a1e 52%, #c9a227); border: 2px solid #e7c46a; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  text-shadow: 0 1px 0 rgba(255,240,200,.6); transition: transform .12s, filter .2s; }
.home::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 35%, rgba(255,250,225,.75) 50%, transparent 65%); transform: translateX(-120%); animation: home-sheen 3.6s ease-in-out infinite; }
.home:hover { transform: translateY(-2px); filter: brightness(1.12) drop-shadow(0 0 12px rgba(231,196,106,.6)); }
.home:focus-visible { outline: 3px solid #8fe6ff; outline-offset: 3px; }
@keyframes home-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.menu-home { min-width: 240px; text-align: center; text-decoration: none; font-family: var(--cond); font-weight: 400; font-size: 1.05rem; letter-spacing: .14em; }
@media (max-width: 520px) { .home { font-size: .95rem; padding: .7rem 1.2rem; letter-spacing: .1em; } }
@media (max-height: 520px) { .menu-home { padding: .4rem .9rem; } }
@media (prefers-reduced-motion: reduce) { .home::after { animation: none; display: none; } }