/* /var/www/texasgames/public/game.css  -- Steampunk theme */
:root {
  --bg: #140e09;
  --panel: rgba(34, 24, 15, 0.86);
  --ink: #f3e6c6;
  --muted: #b39b73;
  --brass: #cf9b54;
  --brass-2: #f0c46a;
  --copper: #b5651d;
  --gold: #f6d488;
  --verdigris: #5fae93;
  --danger: #d4612f;
  --line: rgba(207, 155, 84, 0.30);
  --p0: #e0584f;
  --p1: #5fb87a;
  --p2: #5aa0d8;
  --p3: #e8a23c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; min-height: 100%;
  color: var(--ink);
  font-family: "Crimson Text", Georgia, serif;
  font-size: 18px;
}

body {
  background:
    radial-gradient(900px 600px at 50% -8%, rgba(240, 196, 106, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(15, 10, 6, 0.78), rgba(12, 8, 4, 0.93)),
    url("assets/sp_bg.png") center/cover fixed no-repeat,
    var(--bg);
}

#cabinet { max-width: 580px; margin: 0 auto; padding: 22px 20px 48px; min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- header / brand ---------- */
header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 2px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 46px; height: 46px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.6)); animation: gearspin 18s linear infinite; }
@keyframes gearspin { to { transform: rotate(360deg); } }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text .name {
  font-family: "Cinzel", serif; font-weight: 900; letter-spacing: 2px; font-size: 21px;
  background: linear-gradient(180deg, var(--brass-2), var(--copper));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.brand-text .tag { font-family: "Special Elite", monospace; font-size: 10.5px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; margin-top: 4px; }
.meta { font-family: "Special Elite", monospace; font-size: 11.5px; color: var(--muted); text-align: right; line-height: 1.7; }
.meta a { color: var(--brass-2); text-decoration: none; }

/* ---------- stage card (brass-framed panel) ---------- */
.stagewrap {
  position: relative;
  background:
    linear-gradient(180deg, rgba(46,33,20,.7), rgba(24,16,9,.85)),
    url("assets/sp_panel.png") center/cover;
  border: 2px solid var(--brass);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 0 0 4px rgba(20,14,8,.6), inset 0 2px 12px rgba(0,0,0,.5);
  padding: 36px 26px; overflow: hidden; flex: 1;
  display: flex; align-items: center; justify-content: center;
}
/* corner rivets */
.stagewrap::before {
  content: ""; position: absolute; inset: 10px; border-radius: 10px; pointer-events: none;
  border: 1px solid rgba(240,196,106,.2);
  background:
    radial-gradient(circle at 0 0, var(--brass-2) 2.5px, transparent 3px),
    radial-gradient(circle at 100% 0, var(--brass-2) 2.5px, transparent 3px),
    radial-gradient(circle at 0 100%, var(--brass-2) 2.5px, transparent 3px),
    radial-gradient(circle at 100% 100%, var(--brass-2) 2.5px, transparent 3px);
  background-repeat: no-repeat;
}

.stage { display: none; width: 100%; text-align: center; position: relative; z-index: 2; }
.stage.active { display: block; animation: pop .34s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.lead { font-family: "Cinzel", serif; font-size: 20px; font-weight: 700; letter-spacing: .5px; margin: 4px 0 18px; color: var(--gold); }
.sub { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 14px auto; max-width: 40ch; }
.sub em { color: var(--ink); font-style: italic; }
.msg { color: var(--danger); min-height: 18px; font-size: 14px; font-family: "Special Elite", monospace; }

/* ---------- prize / result ---------- */
.prize {
  position: relative; z-index: 2;
  font-family: "Cinzel", serif; font-size: 78px; font-weight: 900;
  background: linear-gradient(180deg, #ffe7ab, var(--brass), var(--copper));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(240,196,106,.45));
  margin: 6px 0 2px; animation: prizePop .45s cubic-bezier(.2,.9,.2,1.2);
}
.prize::after { content: "\00d7"; font-family: "Crimson Text"; -webkit-text-fill-color: var(--brass); font-size: 34px; opacity: .7; margin-left: 6px; }
@keyframes prizePop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

#resultBurst {
  position: absolute; top: 50%; left: 50%; width: 155%; max-width: 700px;
  transform: translate(-50%, -55%); mix-blend-mode: screen; opacity: 0; pointer-events: none; z-index: 1;
}
#stage-result.active #resultBurst.show { animation: burstIn 1.1s ease-out forwards; }
@keyframes burstIn {
  0% { opacity: 0; transform: translate(-50%, -55%) scale(.3) rotate(-8deg); }
  40% { opacity: .95; } 100% { opacity: .55; transform: translate(-50%, -55%) scale(1) rotate(0); }
}

/* ---------- buttons (brass plates) ---------- */
button.big {
  font-family: "Cinzel", serif; font-size: 17px; font-weight: 700; letter-spacing: 2px;
  padding: 15px 42px; border: 1px solid #6e4a1e; border-radius: 12px;
  background: linear-gradient(180deg, #e9c178 0%, #c8923f 45%, #9c6a28 100%);
  color: #2a1804; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,200,.7), inset 0 -2px 4px rgba(80,50,15,.6);
  text-shadow: 0 1px 0 rgba(255,240,200,.4);
  transition: transform .08s ease, filter .2s, box-shadow .2s; margin-top: 14px;
}
button.big:hover { filter: brightness(1.07); box-shadow: 0 10px 26px rgba(240,196,106,.4), inset 0 1px 0 rgba(255,240,200,.7); }
button.big:active { transform: translateY(2px) scale(.99); }
button.big.gold { background: linear-gradient(180deg, #ffe7ab, #e8b24b 45%, #b5781f); animation: gpulse 1.8s ease-in-out infinite; }
@keyframes gpulse { 0%,100% { box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,200,.7); } 50% { box-shadow: 0 8px 34px rgba(246,212,136,.7), inset 0 1px 0 rgba(255,240,200,.8); } }
button.big:disabled { filter: grayscale(.5) brightness(.7); cursor: default; animation: none; }

button.link { display: block; margin: 16px auto 0; background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font-family: "Special Elite", monospace; font-size: 13px; }
button.link:hover { color: var(--ink); }

/* ---------- nudge gauge ---------- */
#needle { width: 100%; height: auto; margin: 6px 0 4px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)); }

/* ---------- spinning medallion ---------- */
#coin {
  width: 138px; height: 138px; border-radius: 50%; display: block; margin: 0 auto 20px;
  box-shadow: 0 0 44px rgba(240,196,106,.4), 0 12px 30px rgba(0,0,0,.6), inset 0 0 0 3px rgba(110,74,30,.5);
  animation: coinSpin 7s linear infinite; will-change: transform;
}
@keyframes coinSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

/* ---------- valve pads ---------- */
#pads {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 348px; margin: 16px auto; padding: 18px;
  border-radius: 14px;
  background: linear-gradient(rgba(20,14,8,.5), rgba(20,14,8,.72)), url("assets/sp_panel.png") center/cover;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.7), 0 10px 26px rgba(0,0,0,.5); border: 2px solid #6e4a1e;
}
.pad {
  aspect-ratio: 1/1; border: 1px solid #6e4a1e; border-radius: 14px; cursor: pointer;
  opacity: .62; position: relative; overflow: hidden; background: #0d0905;
  transition: opacity .12s, transform .07s, box-shadow .14s;
}
.pad .gem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .12s; }
.pad::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 47%, transparent 32%, rgba(8,5,2,.45) 64%, rgba(8,5,2,.85) 100%); }
.pad[data-pad="0"] { --glow: var(--p0); }
.pad[data-pad="1"] { --glow: var(--p1); }
.pad[data-pad="2"] { --glow: var(--p2); }
.pad[data-pad="3"] { --glow: var(--p3); }
.pad.lit { opacity: 1; box-shadow: 0 0 40px var(--glow), inset 0 0 22px rgba(255,225,160,.18); transform: scale(1.05); }
.pad.lit .gem { filter: brightness(1.45) saturate(1.3); }
.pad:active { transform: scale(.96); }
#pads.locked .pad { cursor: default; }

/* ---------- sound toggle ---------- */
#sound { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 3px 8px; font-size: 11px; cursor: pointer; font-family: "Special Elite", monospace; }
#sound:hover { color: var(--ink); }

/* ---------- footer / howto ---------- */
footer { margin-top: 22px; }
#log {
  background: rgba(10,6,3,.66); border: 1px solid var(--line); border-radius: 8px; color: #9c8456;
  font-family: "Special Elite", monospace; font-size: 11px; line-height: 1.6; padding: 10px 12px;
  max-height: 120px; overflow: auto; white-space: pre-wrap; text-align: left;
}
.howto {
  margin-top: 22px; text-align: left;
  background: linear-gradient(rgba(34,24,15,.85), rgba(22,15,8,.9)), url("assets/sp_panel.png") center/cover;
  border: 2px solid var(--brass); border-radius: 14px; padding: 22px 24px;
  box-shadow: inset 0 0 0 4px rgba(20,14,8,.5);
}
.howto h2 { font-family: "Cinzel", serif; color: var(--gold); font-size: 18px; letter-spacing: 1px; margin: 0 0 6px; }
.howto h3 { font-family: "Cinzel", serif; color: var(--brass-2); font-size: 15px; margin: 18px 0 6px; }
.howto-sub { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.howto-steps { color: var(--ink); font-size: 15.5px; line-height: 1.65; padding-left: 20px; margin: 0; }
.howto-steps li { margin-bottom: 8px; }
.howto-cases ul { color: var(--ink); font-size: 15px; line-height: 1.65; padding-left: 20px; margin: 0; }
.howto-cases li { margin-bottom: 5px; }
.howto-foot { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 18px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.howto strong { color: var(--ink); }
.howto-foot strong { color: var(--brass-2); }

@media (max-width: 480px) { .prize { font-size: 62px; } .stagewrap { padding: 28px 18px; } }