:root {
  --bg: #0b1a24;
  --ice: #b8dce8;
  --ice-deep: #3a6a7a;
  --frost: #e8f6fb;
  --gold: #e6c35c;
  --wheat: #d4a84b;
  --birch: #7cb87a;
  --soil-loose: #8b6a45;
  --soil-wet: #4a6b3a;
  --sprout: #9fd46a;
  --seedling: #6cb84a;
  --ear: #e8c04a;
  --suma: #f0c27a;
  --foe: #9fd0e8;
  --danger: #e07070;
  --panel: rgba(12, 28, 38, 0.92);
  --w: 390px;
  --h: 844px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: #050d12;
  color: var(--frost);
  font-family: "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#app {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.stage {
  width: var(--w); height: var(--h);
  max-height: 100dvh;
  position: relative;
  background: linear-gradient(180deg, #0a1620 0%, #132a36 40%, #1a3340 100%);
  overflow: hidden;
  box-shadow: 0 0 0 2px #2a4a58, 0 12px 40px rgba(0,0,0,.5);
}
.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center;
}
.screen.active { display: flex; }

/* Title */
.aurora {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 70% 10%, rgba(80,220,180,.25), transparent 60%),
    radial-gradient(ellipse 60% 30% at 20% 20%, rgba(120,160,255,.2), transparent 55%),
    linear-gradient(180deg, #071018 0%, #0f2430 45%, #1a3a2a 100%);
  pointer-events: none;
}
.title-block { position: relative; margin-top: 72px; text-align: center; z-index: 1; }
.rune-frame {
  letter-spacing: .4em; color: var(--ice); opacity: .7; font-size: 14px;
  animation: runePulse 1.36s ease-in-out infinite;
}
@keyframes runePulse { 0%,100%{opacity:.45} 50%{opacity:1} }
.title-block h1 {
  margin-top: 10px; font-size: 30px; font-weight: 800;
  color: var(--frost);
  text-shadow: 0 2px 0 #1a3040, 0 0 18px rgba(180,220,255,.35);
  letter-spacing: .08em;
}
.subtitle { margin-top: 8px; color: var(--ice); opacity: .75; font-size: 13px; }
.title-mid { position: relative; margin-top: 36px; width: 260px; height: 180px; z-index: 1; }
.maypole {
  position: absolute; left: 50%; top: 10px; width: 10px; height: 110px;
  margin-left: -5px; background: linear-gradient(#c9a36a,#8a6a3a);
  border-radius: 4px;
}
.maypole::before {
  content: ""; position: absolute; top: -6px; left: -28px; width: 66px; height: 18px;
  background: conic-gradient(from 0deg, #e07070, #e6c35c, #7cb87a, #6a9fd4, #e07070);
  border-radius: 50%; opacity: .85;
}
.wrestlers {
  position: absolute; bottom: 36px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 28px;
}
.suma-mini, .foe-mini {
  width: 42px; height: 52px; border-radius: 14px 14px 10px 10px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px; font-size: 12px; font-weight: 700;
}
.suma-mini { background: linear-gradient(#f5d9a8,#c48a4a); color: #3a2810; }
.foe-mini { background: linear-gradient(#d8f0fa,#6aa8c8); color: #103040; }
.sprout-hint {
  position: absolute; bottom: 4px; left: 0; right: 0; text-align: center;
  font-size: 11px; color: var(--sprout); opacity: .85;
}
.btn-drum {
  position: relative; z-index: 2; margin-top: 28px;
  min-width: 168px; height: 56px; border: none; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, #d4a06a 0%, #a86a3a 55%, #6a3e20 100%);
  color: #2a1808; font-size: 20px; font-weight: 800; letter-spacing: .25em;
  box-shadow: inset 0 0 0 4px #5a3018, 0 6px 0 #3a2010, 0 10px 20px rgba(0,0,0,.35);
  cursor: pointer;
}
.btn-drum:active { transform: translateY(3px); box-shadow: inset 0 0 0 4px #5a3018, 0 2px 0 #3a2010; }
.btn-drum.small { min-width: 120px; height: 44px; font-size: 15px; letter-spacing: .12em; }
.title-row {
  position: relative; z-index: 2; margin-top: 18px;
  display: flex; gap: 16px;
}
.btn-ghost {
  background: transparent; border: 1px solid rgba(184,220,232,.35);
  color: var(--ice); padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer;
}
.btn-ghost:disabled { opacity: .35; cursor: not-allowed; }
.btn-icon {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: var(--frost); width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
}

/* Intro */
#screen-intro { justify-content: center; background: #071018; }
.intro-panel {
  width: 340px; padding: 24px 18px; background: var(--panel);
  border: 1px solid rgba(184,220,232,.25); border-radius: 14px;
}
.intro-art {
  height: 160px; border-radius: 10px; margin-bottom: 16px;
  background: linear-gradient(135deg, #1a3048, #2a5080 40%, #1a4030);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}
.intro-text { font-size: 15px; line-height: 1.6; min-height: 72px; }
.intro-actions { margin-top: 18px; display: flex; gap: 12px; justify-content: center; align-items: center; }

/* Match HUD */
#screen-match { background: linear-gradient(180deg, #0c1c28, #163040 50%, #1a2a28); }
.hud-top {
  width: 100%; padding: 10px 12px 4px;
  display: flex; align-items: flex-start; gap: 8px;
}
.vitality-wrap { flex: 1; }
.vitality-label { font-size: 12px; color: var(--gold); margin-bottom: 4px; }
.vitality-bar {
  position: relative; height: 14px; border-radius: 7px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(230,195,92,.4); overflow: hidden;
}
.vitality-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #6cb84a, #e8c04a);
  transition: width .12s linear;
}
.wake-mark {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--gold); box-shadow: 0 0 6px var(--gold);
}
.wake-hint { font-size: 11px; color: rgba(230,195,92,.7); margin-top: 2px; }
.field-wrap { position: relative; width: 390px; height: 480px; }
#field-canvas { display: block; width: 390px; height: 480px; }
.toast {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  background: rgba(10,20,28,.88); border: 1px solid rgba(184,220,232,.35);
  padding: 6px 12px; border-radius: 8px; font-size: 12px; white-space: nowrap;
  pointer-events: none; z-index: 5;
}
.toast.hidden { display: none; }
.hud-mid {
  width: 100%; padding: 4px 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.stat-chip {
  font-size: 12px; background: rgba(240,194,122,.12);
  border: 1px solid rgba(240,194,122,.35); padding: 4px 8px; border-radius: 8px;
  min-width: 88px; text-align: center;
}
.stat-chip.foe {
  background: rgba(159,208,232,.12); border-color: rgba(159,208,232,.35);
}
.drum-ring-wrap { position: relative; width: 88px; height: 88px; }
#drum-canvas { display: block; }
.judge-flash {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; pointer-events: none; opacity: 0;
}
.judge-flash.show { animation: flashJudge .35s ease-out; }
@keyframes flashJudge {
  0% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1); }
}
.hint-line {
  width: 100%; text-align: center; font-size: 12px;
  color: rgba(232,246,251,.75); min-height: 20px; padding: 0 10px;
}
.touch-zone {
  position: absolute; left: 0; right: 0; bottom: 0; height: 260px;
  background: linear-gradient(180deg, rgba(8,18,24,.15), rgba(8,18,24,.72));
  border-top: 1px solid rgba(184,220,232,.2);
  touch-action: none;
}
.touch-label {
  position: absolute; top: 8px; left: 0; right: 0; text-align: center;
  font-size: 11px; color: rgba(184,220,232,.45); pointer-events: none;
}
.touch-stick {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; border: 2px solid rgba(230,195,92,.7);
  background: rgba(230,195,92,.2); pointer-events: none;
}
.touch-stick.hidden { display: none; }

.overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 20;
}
.overlay.hidden { display: none; }
.overlay-card {
  width: 300px; padding: 22px 18px; background: var(--panel);
  border: 1px solid rgba(184,220,232,.3); border-radius: 14px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.overlay-card h2 { font-size: 20px; }
.settings-card label {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; gap: 10px;
}
.settings-card input[type="range"] { width: 140px; }
.settings-card input[type="number"] { width: 72px; background: #102028; color: var(--frost); border: 1px solid #3a5a68; border-radius: 4px; padding: 4px; }
.muted { font-size: 11px; color: rgba(184,220,232,.55); }

/* Result */
#screen-result { justify-content: center; background: rgba(5,12,18,.95); }
.result-card {
  width: 320px; padding: 28px 20px; background: var(--panel);
  border: 1px solid rgba(230,195,92,.35); border-radius: 16px; text-align: center;
}
.result-card h2 { font-size: 24px; margin-bottom: 10px; color: var(--gold); }
.result-big { font-size: 18px; margin: 8px 0; }
.result-stars { color: var(--wheat); margin-bottom: 10px; letter-spacing: .15em; }
.result-line { font-size: 13px; line-height: 1.5; color: var(--ice); margin: 8px 0; }
.result-foe { font-size: 13px; color: var(--foe); font-style: italic; margin: 10px 0 16px; }
.result-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }


/* —— Formal art wiring (07W) —— */
.title-bg {
  position: absolute; inset: 0;
  background: url("../assets/bg/title_screen.webp") center/cover no-repeat;
  opacity: 1; pointer-events: none; z-index: 0;
}
.art-ready .aurora { opacity: 0.25; mix-blend-mode: screen; }
.art-ready .title-block, .art-ready .title-mid, .art-ready .btn-drum, .art-ready .title-row { position: relative; z-index: 2; }
.art-ready .title-block h1 { text-shadow: 0 2px 8px rgba(0,0,0,.75), 0 0 18px rgba(180,220,255,.35); }
.art-ready .title-mid .maypole,
.art-ready .title-mid .wrestlers { opacity: .35; }
.btn-art-pause {
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: url("../assets/ui/ui_pause_btn.webp") center/contain no-repeat;
  background-color: transparent; color: transparent; text-indent: -999px; overflow: hidden;
}
.vitality-bar {
  background-image: url("../assets/ui/ui_vitality_frame.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: rgba(8,20,28,.55);
  border: none;
  height: 22px;
}
.art-settle {
  /* layout hole handled by .result-card.art-settle + .settle-fill (F-079) */
  background-image: url("../assets/ui/settle_card.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
#btn-settings.btn-ghost {
  background-image: url("../assets/ui/ui_settings_btn.webp");
  background-size: 28px 28px;
  background-position: 10px center;
  background-repeat: no-repeat;
  padding-left: 40px;
}

/* contract13 art wiring — fallbacks keep playability */
.art-ready .vitality-fill {
  background-image: url("../assets/ui/ui_vitality_fill.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
}
.art-ready .wake-mark {
  width: 14px; margin-left: -6px;
  background: url("../assets/ui/ui_awaken_marker.webp") center/contain no-repeat;
  box-shadow: none;
}
.art-ready .intro-panel,
.art-ready #pause-overlay .overlay-card {
  background-image: url("../assets/ui/panel_stone_large.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: rgba(12, 28, 38, 0.55);
}
/* settings / settle: dedicated fill+hole rules below (F-079); do not stretch panel over controls */
.art-ready .title-block h1 {
  background-image: url("../assets/ui/title_plaque.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 14px 28px;
}
.art-ready .btn-drum {
  background-image: url("../assets/ui/btn_primary_default.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  box-shadow: none;
  color: #1a2a20;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.art-ready .btn-drum:active {
  background-image: url("../assets/ui/btn_primary_pressed.webp");
  transform: translateY(2px);
}
.art-ready .btn-drum:disabled {
  background-image: url("../assets/ui/btn_primary_disabled.webp");
  opacity: 1; filter: none;
}
.art-ready .btn-ghost {
  background-image: url("../assets/ui/btn_secondary_default.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-color: transparent;
}
.art-ready .btn-ghost:active {
  background-image: url("../assets/ui/btn_secondary_pressed.webp");
}
.art-ready .btn-ghost:disabled {
  background-image: url("../assets/ui/btn_secondary_disabled.webp");
  opacity: 1;
}
.art-ready .result-stars {
  min-height: 28px;
  background-image: url("../assets/ui/icon_rune_rating.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}
.art-ready .rune-frame {
  background-image: url("../assets/ui/ui_bound_stone.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* —— Layout polish (F-040/044/069/079/082/083/172; no PNG edits) —— */

/* Title: keep mother art clear; dock controls at bottom (F-172 overflow: move chrome, not shrink art) */
#screen-title {
  justify-content: flex-start;
}
.title-dock {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.title-dock > * { pointer-events: auto; }
.field-pick-bar {
  width: 100%;
  max-width: 360px;
  padding: 6px 8px 8px;
  border-radius: 12px;
  background: rgba(4, 12, 18, 0.92);
  border: 1px solid rgba(184, 220, 232, 0.35);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.field-pick-bar.compact {
  margin-top: 8px;
  padding: 6px 8px 8px;
  background: rgba(8, 18, 26, 0.72);
}
.field-pick-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(230, 195, 92, 0.9);
}
.field-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: 100%;
}
.field-chip {
  min-width: 58px;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 8px;
  border: 1px solid rgba(184, 220, 232, 0.35);
  background: rgba(16, 36, 48, 0.92);
  color: var(--frost);
  cursor: pointer;
}
.field-chip.current {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: rgba(230, 195, 92, 0.7);
  color: #fff4c8;
}
.field-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: rgba(184, 220, 232, 0.55);
}
/* field chips stay flat readable chips — secondary btn PNG has crossbars (F-082) */
.art-ready .field-chip {
  background-image: none;
  background: rgba(10, 24, 34, 0.94);
  border: 1px solid rgba(230, 195, 92, 0.35);
  color: #e8f6fb;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.art-ready .field-chip:disabled {
  background: rgba(10, 24, 34, 0.55);
  color: rgba(184, 220, 232, 0.5);
  opacity: 1;
}
.art-ready .field-chip.current {
  outline-color: #e6c35c;
  background: rgba(40, 56, 28, 0.95);
  border-color: #e6c35c;
  color: #fff4c8;
}

.art-ready .title-block {
  margin-top: 48px;
}
.art-ready .title-mid {
  display: none; /* mother art already shows wrestlers; avoid mid-screen clutter */
}
.art-ready .title-dock .btn-drum {
  margin-top: 0;
  min-width: 180px;
  height: 58px;
}
.art-ready .title-row {
  margin-top: 0;
}
.art-ready #btn-settings.btn-ghost {
  background-image: url("../assets/ui/btn_secondary_default.webp"), url("../assets/ui/ui_settings_btn.webp");
  background-size: 100% 100%, 22px 22px;
  background-position: center, 10px center;
  background-repeat: no-repeat, no-repeat;
  padding-left: 36px;
  color: #1a2a20;
}

/* Match: keep touch hint below drum, not over it (F-069 / F-172) */
.touch-zone {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 14px;
}
.touch-label {
  position: static;
  margin-top: 0;
  padding: 0 12px;
  font-size: 11px;
  color: rgba(184, 220, 232, 0.7);
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  z-index: 2;
}
.hud-mid {
  position: relative;
  z-index: 3;
}
.hint-line {
  position: relative;
  z-index: 2;
  margin-bottom: 2px;
}

/* Result: frame → fill → text (F-040/069/079/082); solid settle tablet needs paper fill */
#screen-result {
  justify-content: center;
  align-items: center;
  background: rgba(5, 12, 18, 0.96);
  z-index: 30; /* above match when switched; F-070 exclusive via .active */
}
.result-card.art-settle {
  position: relative;
  width: 340px;
  max-height: 780px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: transparent;
  background-image: url("../assets/ui/settle_card.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  box-shadow: none;
  overflow: hidden;
}
.settle-fill {
  position: relative;
  z-index: 1;
  /* solid paper over solid settle tablet so carved bars cannot cut glyphs (F-069/079/082) */
  margin: 18% 17% 16%;
  padding: 12px 10px 10px;
  border-radius: 12px;
  background: #0b1820;
  border: 1px solid rgba(184, 220, 232, 0.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-height: 580px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.settle-fill h2 {
  font-size: 22px;
  margin: 0 0 2px;
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
}
.settle-fill .result-big {
  font-size: 16px;
  margin: 0;
  color: var(--frost);
}
.settle-fill .result-stars {
  margin: 2px 0 4px;
  color: var(--wheat);
  min-height: 28px;
}
.settle-fill .result-line {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ice);
  margin: 0;
}
.settle-fill .result-foe {
  font-size: 12px;
  color: #b8e0f0;
  font-style: italic;
  margin: 4px 0;
}
.settle-fill .muted {
  color: rgba(200, 230, 240, 0.7);
}
.settle-fill .result-actions {
  width: 100%;
  margin-top: 6px;
  gap: 8px;
}
.settle-fill .btn-drum {
  margin-top: 0;
  min-width: 150px;
  height: 48px;
  font-size: 15px;
  letter-spacing: 0.12em;
}
.settle-fill .btn-ghost {
  min-width: 120px;
}

/* Settings: hollow panel frame; content in measured hole (~20% side / 27% vertical) */
#screen-settings {
  justify-content: center;
  align-items: center;
  background: rgba(5, 12, 18, 0.96);
  z-index: 30;
}
.settings-shell {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 12px;
}
.settings-card.art-panel,
.art-ready .settings-card {
  position: relative;
  width: 360px;
  min-height: 420px;
  padding: 0;
  gap: 0;
  background-color: transparent;
  background-image: url("../assets/ui/panel_stone_large.webp");
  /* keep panel near-native aspect; hole aligns with opaque fill */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.panel-fill {
  position: absolute;
  z-index: 1;
  /* measured hollow ≈ 20% sides, 27% top/bottom of square panel */
  left: 21%;
  right: 21%;
  top: 28%;
  bottom: 28%;
  padding: 10px 12px 12px;
  border-radius: 10px;
  background: #0b1820;
  border: 1px solid rgba(184, 220, 232, 0.28);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.panel-fill h2 {
  font-size: 18px;
  color: var(--frost);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.panel-fill label {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 10px;
  color: var(--frost);
}
.panel-fill input[type="range"] { width: 130px; }
.panel-fill input[type="number"] {
  width: 72px;
  background: #102028;
  color: var(--frost);
  border: 1px solid #3a5a68;
  border-radius: 4px;
  padding: 4px;
}
.panel-fill .muted {
  width: 100%;
  text-align: left;
  color: rgba(200, 230, 240, 0.65);
}
.panel-fill .btn-drum {
  margin-top: 4px;
  min-width: 132px;
  height: 46px;
  font-size: 15px;
  letter-spacing: 0.12em;
}

/* Intro / pause: keep prior panel art, ensure children above bg (F-069) */
.art-ready .intro-panel,
.art-ready #pause-overlay .overlay-card {
  background-color: rgba(8, 18, 26, 0.72);
}
.art-ready .intro-panel > *,
.art-ready #pause-overlay .overlay-card > * {
  position: relative;
  z-index: 1;
}

/* Stage single contain scale host (F-172): logic canvas stays 390×844 */
#app { overflow: hidden; }
.stage {
  transform-origin: center center;
  flex-shrink: 0;
}

.art-ready .title-dock .btn-drum {
  position: relative;
  z-index: 5;
  color: #1a2a20 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.art-ready .title-dock .btn-ghost {
  color: #1a2a20;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  min-height: 40px;
}



/* Round-3 polish: readable actions inside fills (F-079/082); keep title art buttons */
.settle-fill .btn-drum,
.panel-fill .btn-drum {
  background-image: none !important;
  background: linear-gradient(180deg, #d4a06a 0%, #a86a3a 55%, #6a3e20 100%);
  color: #2a1808 !important;
  text-shadow: none;
  box-shadow: inset 0 0 0 3px #5a3018, 0 4px 0 #3a2010;
  border-radius: 999px;
  min-width: 168px;
  height: 48px;
  padding: 0 18px;
  letter-spacing: 0.14em;
}
.settle-fill .btn-drum:active,
.panel-fill .btn-drum:active {
  background-image: none !important;
  transform: translateY(2px);
}
.settle-fill .btn-ghost,
.panel-fill .btn-ghost {
  background-image: none !important;
  background: rgba(16, 36, 48, 0.95);
  border: 1px solid rgba(184, 220, 232, 0.4);
  color: var(--frost) !important;
  text-shadow: none;
  min-width: 140px;
  padding: 10px 14px;
}

/* Settings: widen hole — panel ropes intrude; use safer inset + taller card */
.settings-card.art-panel,
.art-ready .settings-card {
  width: 350px;
  min-height: 460px;
}
.panel-fill {
  left: 24%;
  right: 24%;
  top: 30%;
  bottom: 26%;
  padding: 14px 12px 12px;
  gap: 10px;
  justify-content: flex-start;
}
.panel-fill h2 {
  margin-top: 2px;
  margin-bottom: 4px;
  font-size: 20px;
  line-height: 1.2;
}
.panel-fill label {
  font-size: 12px;
  flex-wrap: nowrap;
}
.panel-fill input[type="range"] { width: 118px; flex-shrink: 0; }

/* Title dock: lift Start above mother baked gear; keep field bar compact */
.title-dock {
  bottom: 18px;
  gap: 6px;
}
.art-ready .title-dock .btn-drum {
  margin-bottom: 4px;
  min-width: 190px;
  height: 62px;
  font-size: 22px;
}
.art-ready .title-row .btn-ghost {
  min-width: 110px;
  background-color: rgba(8,18,26,.75);
}

/* Match: park beat hint ABOVE drum row, not under it */
#screen-match .hint-line {
  order: 0;
}
#screen-match .hud-mid {
  order: 1;
}
#screen-match .field-wrap { order: -1; }
#screen-match .hud-top { order: -2; }
#screen-match {
  /* flex children: hud-top, field, hud-mid, hint, touch — reorder via absolute hint */
}
.hint-line {
  position: relative;
  z-index: 4;
  margin: 2px 0 0;
  padding: 2px 10px;
  font-size: 12px;
  color: #e8f6fb;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  background: rgba(6,14,20,.55);
}
.touch-label {
  margin-top: 8px;
  padding-bottom: 4px;
}


/* Round-4 polish */
.settle-fill .btn-drum,
.panel-fill .btn-drum {
  background: linear-gradient(180deg, #f0d090 0%, #d4a04a 45%, #a86a28 100%) !important;
  color: #2a1808 !important;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: inset 0 0 0 3px #6a3e18, 0 4px 0 #3a2010, 0 6px 14px rgba(0,0,0,.35);
}
.settle-fill .btn-ghost,
.panel-fill .btn-ghost {
  background: rgba(20, 44, 58, 0.98) !important;
  color: #e8f6fb !important;
  border: 1px solid rgba(184, 220, 232, 0.55) !important;
}

/* Settings: opaque working card; panel art as behind ornament (contain, not stretch-warp) */
.settings-shell { padding: 12px; }
.settings-card.art-panel,
.art-ready .settings-card {
  width: 300px;
  min-height: 0;
  padding: 0;
  background-color: transparent;
  background-image: none;
  border: none;
  overflow: visible;
}
.settings-card.art-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  background: url("../assets/ui/panel_stone_large.webp") center / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.panel-fill {
  position: relative;
  left: auto; right: auto; top: auto; bottom: auto;
  margin: 0;
  width: 260px;
  min-height: 240px;
  padding: 16px 14px 14px;
  background: #0b1820;
  border: 1px solid rgba(184, 220, 232, 0.35);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  z-index: 1;
}

/* Title: field bar sits on bottom banner; Start raised */
.title-dock { bottom: 14px; }
.field-pick-bar {
  max-width: 340px;
  background: rgba(4, 10, 16, 0.94);
}
.art-ready .title-dock .btn-drum {
  margin-top: 2px;
  background-image: none !important;
  background: linear-gradient(180deg, #f0d090 0%, #d4a04a 45%, #a86a28 100%) !important;
  color: #2a1808 !important;
  box-shadow: inset 0 0 0 4px #6a3e18, 0 6px 0 #3a2010, 0 10px 20px rgba(0,0,0,.4);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.art-ready .title-row .btn-ghost {
  background-image: none !important;
  background: rgba(8, 18, 26, 0.9) !important;
  border: 1px solid rgba(184, 220, 232, 0.45);
  color: #e8f6fb !important;
}

/* Match hint: keep above drum with clear gap */
#hint-line.hint-line {
  margin: 0 0 6px;
  padding: 4px 12px;
  max-width: 360px;
  border-radius: 8px;
}
.hud-mid { margin-top: 2px; }
.touch-zone { height: 220px; }
.field-wrap .hint-line {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 360px;
  margin: 0;
  z-index: 6;
  pointer-events: none;
  background: rgba(6, 14, 20, 0.72);
  border: 1px solid rgba(184, 220, 232, 0.25);
}


/* Round-5: hint at top of field; settle art ring more visible */
.field-wrap .hint-line {
  top: 10px;
  bottom: auto;
  background: rgba(6, 14, 20, 0.78);
}
.result-card.art-settle {
  width: 350px;
  min-height: 520px;
  background-image: url("../assets/ui/settle_card.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: 0;
  justify-content: center;
}
.settle-fill {
  margin: 14% 15% 12%;
}
.settings-card.art-panel::before {
  width: 420px;
  height: 420px;
  opacity: 1;
}
.panel-fill {
  width: 268px;
  min-height: 260px;
}