/* ==========================================================================
   KTK v3 MENUS SKIN (presentation only). Loaded last on index.html and
   menu-royal-siege.html so every menu, modal and overlay matches the splash:
   forged-gold primary buttons, dark ember glass panels with a thin gold rim,
   Cinzel serif headings, forged crest branding. Transform/opacity only for
   motion; no brightness flashes; reduced motion honored.
   ========================================================================== */
:root{
  --v3m-gold:#e9c574;--v3m-gold-b:#fbe3a0;--v3m-gold-d:#7a5a22;
  --v3m-ink:#f1e6cf;--v3m-mute:rgba(236,220,186,.72);
  --v3m-glass:linear-gradient(180deg,rgba(26,16,12,.94),rgba(10,7,7,.96));
  --v3m-rim:rgba(233,197,116,.42);
}

/* ---------- PANELS ---------- */
.royal-options-panel,.royal-exit-confirm>div,.royal-exit-confirm .royal-exit-panel,
#scene-training article,#scene-online article,#scene-rules article,#scene-leaders article,
.online-panel,.board-panel,.cosmetics-card,.audio-mixer-card,.modal-card,.rules-card,.tutorial-card{
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(255,110,40,.10),transparent 60%),
    var(--v3m-glass)!important;
  border:1px solid var(--v3m-rim)!important;
  border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.10),inset 0 0 0 1px rgba(0,0,0,.6),
    0 18px 48px rgba(0,0,0,.6),0 0 34px rgba(255,110,40,.10)!important;
  color:var(--v3m-ink);
}
/* forged crest stamp on every panel heading block */
#scene-training article .icon,#scene-online article .icon,#scene-rules article .icon,#scene-leaders article .icon{
  width:64px!important;height:64px!important;margin:0 auto 10px!important;border:0!important;border-radius:0!important;
  background:url("../../assets/ui/lfg-crest-forged.png") center/contain no-repeat!important;
  color:transparent!important;font-size:0!important;box-shadow:none!important;
  filter:drop-shadow(0 0 10px rgba(255,120,40,.45)) drop-shadow(0 3px 4px rgba(0,0,0,.7));
}
#scene-training article .icon::before,#scene-training article .icon::after,
#scene-online article .icon::before,#scene-online article .icon::after,
#scene-rules article .icon::before,#scene-rules article .icon::after,
#scene-leaders article .icon::before,#scene-leaders article .icon::after{display:none!important}

/* ---------- TYPE ---------- */
.royal-options-panel h2,.royal-exit-confirm h2,
.scene.secondary h2,.setup h1,.setup h2,
.online-panel h2,.board-panel h2,.cosmetics-card h2,.audio-mixer-card h2,.modal-card h2,.rules-card h2,.tutorial-card h2{
  font-family:"Cinzel",Georgia,serif!important;font-weight:800!important;letter-spacing:.06em!important;
  background:linear-gradient(180deg,#fff3cf 0%,#f0cf86 38%,#c8913f 70%,#9a6424 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  text-shadow:none!important;filter:drop-shadow(0 2px 0 rgba(0,0,0,.65)) drop-shadow(0 0 14px rgba(255,120,40,.18));
}
.royal-options-panel .kicker,.scene .kicker,.online-panel .kicker,.modal-card .kicker,
.audio-mixer-card .kicker,.cosmetics-card .kicker,.rules-card .kicker{
  font-family:"Cinzel",Georgia,serif;letter-spacing:.38em!important;color:rgba(240,214,150,.9)!important;
}
/* main menu title: same metallic gold as the splash title */
.main-scene .hero h1,.main-scene .hero h1 span{
  background:linear-gradient(180deg,#fff3cf 0%,#f0cf86 34%,#c8913f 66%,#8d5a1f 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  -webkit-text-fill-color:transparent!important;text-shadow:none!important;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(255,110,40,.22));
}
.main-scene .hero h1 span{background:linear-gradient(180deg,#ffd9a6 0%,#e98a4a 40%,#b2441c 75%,#6e1f0c 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important}
.v3m-crest{display:block;width:clamp(64px,7vw,104px);height:auto;margin:0 0 12px -4px;
  filter:drop-shadow(0 0 14px rgba(255,120,40,.5)) drop-shadow(0 4px 6px rgba(0,0,0,.8));
  animation:v3m-crest-breathe 5.5s ease-in-out infinite alternate;will-change:opacity}
.v3m-brand{display:inline-flex;align-items:center;gap:10px}
.v3m-brand img{width:26px;height:26px;filter:drop-shadow(0 0 6px rgba(255,120,40,.45))}
@keyframes v3m-crest-breathe{from{opacity:.86}to{opacity:1}}

/* ---------- PRIMARY: forged gold (matches splash PLAY) ---------- */
.march,#btn-start-play,.btn-begin,#modal-btn-rematch,#modal-btn,.audio-mixer-return,#btn-rules-close-2,
#btn-online-login,#btn-online-wait,#btn-tutorial-next,#btn-tutorial-done,#options-close,#exit-to-lfg{
  font-family:"Cinzel",Georgia,serif!important;font-weight:800!important;letter-spacing:.2em!important;text-transform:uppercase;
  color:#2b1505!important;border:1px solid rgba(255,231,166,.85)!important;border-radius:10px!important;
  background:linear-gradient(180deg,#fbe3a0 0%,#efc66b 28%,#cf963b 55%,#a9681f 100%)!important;
  text-shadow:0 1px 0 rgba(255,240,200,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 6px rgba(110,50,8,.45),
    0 0 0 1px rgba(50,24,4,.85),0 6px 16px rgba(0,0,0,.55),0 0 18px rgba(255,130,40,.22)!important;
  filter:none!important;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease!important;
}
.march:hover,.march:focus-visible,#btn-start-play:hover,.btn-begin:hover,#modal-btn-rematch:hover,#modal-btn:hover,
.audio-mixer-return:hover,#btn-rules-close-2:hover,#btn-online-login:hover,#btn-online-wait:hover,
#btn-tutorial-next:hover,#btn-tutorial-done:hover,#options-close:hover,#exit-to-lfg:hover{
  transform:translateY(-1px) scale(1.025);filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 6px rgba(110,50,8,.45),
    0 0 0 1px rgba(50,24,4,.85),0 8px 20px rgba(0,0,0,.55),0 0 26px rgba(255,140,50,.42)!important}
.march:active,#btn-start-play:active,.btn-begin:active,#modal-btn-rematch:active,.audio-mixer-return:active{transform:translateY(1px) scale(.985)}
.march:focus-visible{outline:2px solid rgba(255,231,166,.9);outline-offset:3px}

/* ---------- SECONDARY: dark glass, gold rim ---------- */
.revise,#exit-close-game,#exit-cancel,#modal-btn-quit,#btn-forfeit-cancel,#btn-tutorial-back,
.online-panel button.secondary,.board-panel button.secondary,.royal-option-row button,.audio-channel-toggle{
  font-family:"Cinzel",Georgia,serif!important;font-weight:700!important;letter-spacing:.14em!important;
  color:var(--v3m-gold-b)!important;border:1px solid var(--v3m-rim)!important;border-radius:10px!important;
  background:linear-gradient(180deg,rgba(48,32,20,.9),rgba(18,12,10,.95))!important;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.12),0 4px 10px rgba(0,0,0,.45)!important;text-shadow:none!important;filter:none!important;
  transition:transform .16s ease,border-color .2s ease!important}
.revise:hover,#exit-close-game:hover,#exit-cancel:hover,#modal-btn-quit:hover,#btn-forfeit-cancel:hover,
.online-panel button.secondary:hover,.royal-option-row button:hover,.audio-channel-toggle:hover{transform:translateY(-1px);border-color:rgba(251,227,160,.8)!important}

/* ---------- DANGER: ember red, same shape ---------- */
#btn-forfeit-confirm,.royal-exit-command{
  font-family:"Cinzel",Georgia,serif!important;font-weight:800!important;letter-spacing:.16em!important;
  color:#fff1dc!important;border:1px solid rgba(255,170,120,.6)!important;border-radius:10px!important;
  background:linear-gradient(180deg,#c9502a 0%,#9c2c14 55%,#651807 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,210,170,.4),0 0 0 1px rgba(40,8,2,.9),0 6px 14px rgba(0,0,0,.5)!important;filter:none!important}

/* ---------- MAIN MENU ORDERS ---------- */
.main-scene .order{border-radius:10px;transition:transform .16s ease,background-color .2s ease}
.main-scene .order b{font-family:"Cinzel",Georgia,serif}
.main-scene .order:hover,.main-scene .order:focus-visible{transform:translateX(4px)}
.main-scene .order.primary b{background:linear-gradient(180deg,#fff3cf,#e9c574 55%,#b9822f);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- FORM CONTROLS inside menus ---------- */
.online-panel input,.online-panel select,.board-panel select{
  background:rgba(8,6,6,.85)!important;border:1px solid rgba(233,197,116,.32)!important;border-radius:8px!important;color:var(--v3m-ink)!important}
.online-panel input:focus,.online-panel select:focus{outline:none;border-color:rgba(251,227,160,.85)!important;box-shadow:0 0 0 3px rgba(255,140,50,.18)}
.royal-options-panel input[type=range],.audio-mixer-card input[type=range]{accent-color:#e3a64c}

/* ---------- MODAL BACKDROPS: dark ember, not flat black ---------- */
.royal-options,.royal-exit-confirm,.modal,.cosmetics-modal,.audio-mixer{
  background:radial-gradient(ellipse at 50% 55%,rgba(90,30,10,.35),rgba(0,0,0,.82) 70%)!important}

@media (prefers-reduced-motion: reduce){
  .v3m-crest{animation:none!important}
  .march,.revise,.main-scene .order,#btn-start-play,.btn-begin{transition:none!important}
  .march:hover,.main-scene .order:hover{transform:none!important}
}