:root {
  --bg: #07130d;
  --bar: #120f0b;
  --brass: #d9b46a;
  --brass-dim: #8f7443;
  --ivory: #efe4c6;
  --red: #c4432f;
  --font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ivory); font-family: var(--font); overflow: hidden; user-select: none; }
body { display: flex; flex-direction: column; }

#bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding: 8px 16px;
  background: linear-gradient(#1d1810, #0e0b07);
  border-bottom: 1px solid #3c2f1a;
  box-shadow: 0 2px 10px rgba(0,0,0,.6);
  z-index: 2;
}
.brand { font-size: 20px; letter-spacing: .06em; color: var(--brass); margin-right: 6px; white-space: nowrap; }
.brand .suit { color: var(--brass); }
.brand .game { font-size: 14px; color: var(--ivory); opacity: .7; margin-left: 6px; font-style: italic; }
.group { display: flex; align-items: center; gap: 8px; }
label { font-size: 14px; color: var(--brass); opacity: .9; }

button, select {
  font-family: var(--font); font-size: 15px; color: var(--ivory);
  background: linear-gradient(#2b2317, #18130c);
  border: 1px solid var(--brass-dim); border-radius: 6px;
  padding: 6px 14px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
button:hover:not(:disabled), select:hover { border-color: var(--brass); color: #fff6dc; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: linear-gradient(#5a4219, #2f220c); border-color: var(--brass); color: #fff1cc; }
#btnNext { min-width: 9.5em; }
select option { background: #18130c; }
button.off { opacity: .55; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; padding: 6px 12px; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.seg button.on { background: linear-gradient(#6b4f1f, #3a2a0f); color: #fff; border-color: var(--brass); }
input[type=range] { width: 90px; accent-color: var(--brass); }

#stage { flex: 1; position: relative; min-height: 0; }
#stage canvas { display: block; width: 100%; height: 100%; }

#status {
  display: flex; gap: 28px; justify-content: center;
  padding: 5px 12px; font-size: 14px; letter-spacing: .04em;
  background: linear-gradient(#0e0b07, #18130c); color: var(--brass);
  border-top: 1px solid #3c2f1a;
}

#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--brass); background: var(--bg); z-index: 10; }

.overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 8, 5, .55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 5;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.panel {
  text-align: center; padding: 34px 48px 28px;
  background: radial-gradient(circle at 50% 30%, #1d2433, #07080c);
  border: 2px solid var(--brass); border-radius: 14px;
  box-shadow: 0 0 0 6px #0b0a08, 0 0 0 7px var(--brass-dim), 0 20px 60px rgba(0,0,0,.7);
}
.panel .title { font-size: 52px; color: var(--brass); letter-spacing: .08em; }
.panel .title.small { font-size: 30px; margin-bottom: 8px; }
.panel .sub { font-size: 18px; opacity: .8; margin: 4px 0 22px; font-style: italic; }
.panel .hint { margin-top: 16px; font-size: 13px; opacity: .6; }
button.big { font-size: 22px; padding: 10px 28px; }
.panel.help { text-align: left; max-width: 640px; }
.panel.help ul { margin: 0; padding-left: 20px; line-height: 1.55; font-size: 16px; }

/* A3 */
#gameSeg button { min-width: 6.2em; }
input[type=number] { width: 5.2em; font-family: var(--font); font-size: 15px; color: var(--ivory); background: #18130c;
  border: 1px solid var(--brass-dim); border-radius: 6px; padding: 5px 6px; }
button.toggle.on { background: linear-gradient(#6b4f1f, #3a2a0f); color: #fff; border-color: var(--brass); }
#btnRec { min-width: 6.6em; }
#btnRec.rec { background: linear-gradient(#7a1d14, #3b0b07); border-color: #e0634c; color: #fff; animation: recpulse 1.2s infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 10px #e0634c; } }
#stRec { color: #e8b7a8; }
#stRec.on { color: #ff6a50; }
#stRec:empty { display: none; }
.panel.help > div > b { color: var(--brass); }