/* Archmage Backgammon — tactical-RPG HUD (Phase 9). Dark-arcane brand. */
:root { --cinzel: 'Cinzel', serif; --spectral: 'Spectral', serif; --gold: #ffd54a; --dawn: #6fb4ff; --void: #9a6cff; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #05030a; overflow: hidden; color: #d9ccff; font-family: var(--spectral); }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

#hud-tl { position: fixed; left: 18px; top: 14px; pointer-events: none; text-shadow: 0 1px 6px #000; }
#title { font-family: var(--cinzel); font-weight: 900; letter-spacing: .14em; font-size: 18px; }
#title small { display: block; font-weight: 500; letter-spacing: .22em; opacity: .7; font-size: 11px; }
#arena { margin-top: 6px; font-size: 13px; opacity: .85; }
#mode { font-size: 12px; opacity: .65; font-style: italic; }

#hud-tc { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 1px 6px #000; }
#match-score { font-family: var(--cinzel); letter-spacing: .12em; font-size: 15px; }
#match-score #scoreW { color: var(--dawn); } #match-score #scoreB { color: var(--void); }
#match-target { font-size: 11px; opacity: .6; letter-spacing: .2em; }
#turn-banner { margin-top: 8px; font-family: var(--cinzel); font-weight: 700; letter-spacing: .18em; font-size: 14px; padding: 4px 16px; border-radius: 20px; display: inline-block; border: 1px solid; }
#turn-banner.you { color: #8effc0; border-color: #3fae78; box-shadow: 0 0 16px rgba(63,174,120,.4); }
#turn-banner.foe { color: #ff8a8a; border-color: #a85050; box-shadow: 0 0 16px rgba(168,80,80,.4); }

#wordmark-br { position: fixed; right: 20px; bottom: 58px; text-align: right; pointer-events: none; text-shadow: 0 1px 8px #000; }
.wm-title { font-family: var(--cinzel); font-weight: 900; letter-spacing: .12em; font-size: 19px; color: #ece4ff; }
.wm-arena { font-family: var(--cinzel); letter-spacing: .26em; font-size: 12px; color: var(--void); margin-top: 1px; }
.wm-mode { font-size: 9px; letter-spacing: .3em; opacity: .55; margin-top: 1px; }

#hud-tr { position: fixed; right: 18px; top: 14px; text-align: right; pointer-events: none; text-shadow: 0 1px 6px #000; }
.pip { font-size: 13px; } .pip .dawn { color: var(--dawn); } .pip .void { color: var(--void); } .pip b { font-family: var(--cinzel); }
#counters { margin-top: 4px; font-size: 11px; opacity: .8; }

#cube { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; border-radius: 12px;
  background: linear-gradient(160deg, #2a2440, #14111e); border: 1px solid #6c5cff; box-shadow: 0 0 18px rgba(124,92,255,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
#cube-val { font-family: var(--cinzel); font-weight: 900; font-size: 26px; color: #e7dcff; }
#cube-owner { font-size: 9px; letter-spacing: .15em; opacity: .8; }

#dice { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; display: flex; gap: 10px; align-items: center; font-family: var(--cinzel); }
#dice .die { width: 38px; height: 38px; border-radius: 8px; background: rgba(20,17,28,.85); border: 1px solid #6c5cff; color: #d9ccff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; box-shadow: 0 0 12px rgba(124,92,255,.5); }
#dice .die.used { opacity: .3; box-shadow: none; filter: grayscale(1); }
#dice .res { color: #b9a6ff; letter-spacing: .25em; font-size: 12px; margin-right: 6px; }
#dice .act { cursor: pointer; border-color: var(--gold); color: var(--gold); width: auto; padding: 0 12px; font-size: 13px; letter-spacing: .08em; box-shadow: 0 0 12px rgba(255,213,74,.4); }

#spells { position: fixed; left: 18px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; font-family: var(--cinzel); }
#spells .aether { color: #cfeaff; font-size: 13px; letter-spacing: .12em; margin-bottom: 2px; }
#spells .spell { width: 54px; height: 54px; border-radius: 10px; background: rgba(18,16,28,.88); border: 1px solid #5a4eb0; color: #e7dcff; font-size: 22px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 10px rgba(110,90,220,.35); }
#spells .spell small { font-size: 10px; opacity: .8; letter-spacing: 0; }
#spells .spell.armed { border-color: var(--gold); box-shadow: 0 0 16px rgba(255,213,74,.6); }
#spells .spell.off { opacity: .38; cursor: default; box-shadow: none; }

#lore { position: fixed; right: 18px; bottom: 150px; max-width: 240px; text-align: right; font-size: 12px; opacity: .82; line-height: 1.4; text-shadow: 0 1px 5px #000; }
#lore b { font-family: var(--cinzel); color: #e7dcff; letter-spacing: .06em; }
#status { position: fixed; right: 18px; bottom: 32px; font-size: 12px; font-style: italic; opacity: .75; text-shadow: 0 1px 5px #000; }
#help { position: fixed; left: 50%; transform: translateX(-50%); bottom: 4px; font-size: 11px; opacity: .45; }

#modal { position: fixed; inset: 0; background: rgba(4,2,10,.66); display: flex; align-items: center; justify-content: center; z-index: 20; }
.modal-box { background: linear-gradient(160deg, #1c1730, #100c1a); border: 1px solid #6c5cff; border-radius: 14px; padding: 26px 30px; text-align: center; box-shadow: 0 0 40px rgba(124,92,255,.4); }
#modal-text { font-size: 15px; margin-bottom: 16px; font-family: var(--cinzel); letter-spacing: .04em; }
.modal-actions { display: flex; gap: 14px; justify-content: center; }
.modal-actions button { padding: 9px 20px; border-radius: 9px; border: 1px solid #6c5cff; background: #1a1530; color: #e7dcff; font-family: var(--cinzel); cursor: pointer; letter-spacing: .06em; }
#btn-take { border-color: var(--gold); color: var(--gold); }

#menu { position: fixed; inset: 0; z-index: 30; background: radial-gradient(120% 90% at 50% 10%, #1a1140 0%, #0a0716 55%, #05030a 100%); display: flex; align-items: center; justify-content: center; }
.menu-inner { text-align: center; }
.brand { font-family: var(--cinzel); font-weight: 900; letter-spacing: .18em; font-size: 40px; color: #ece4ff; text-shadow: 0 0 30px rgba(124,92,255,.6); }
.brand span { display: block; font-size: 26px; letter-spacing: .42em; color: #b9a6ff; }
.tagline { font-style: italic; opacity: .7; letter-spacing: .3em; margin: 6px 0 28px; font-size: 13px; }
.group { margin: 14px 0; } .group label { display: block; font-size: 11px; letter-spacing: .25em; opacity: .55; margin-bottom: 7px; text-transform: uppercase; }
.opts { display: flex; gap: 10px; justify-content: center; }
.opts button { padding: 9px 16px; border-radius: 9px; border: 1px solid #3a3358; background: rgba(20,17,30,.7); color: #cfc4ee; font-family: var(--cinzel); cursor: pointer; letter-spacing: .05em; font-size: 13px; display: flex; flex-direction: column; align-items: center; }
.opts button small { font-size: 9px; opacity: .6; letter-spacing: 0; font-family: var(--spectral); }
.opts button.sel { border-color: var(--gold); color: #fff; box-shadow: 0 0 14px rgba(255,213,74,.35); }
#btn-start { margin-top: 26px; padding: 13px 30px; border-radius: 11px; border: 1px solid var(--gold); background: linear-gradient(160deg, #2a2140, #16101f); color: var(--gold); font-family: var(--cinzel); font-size: 16px; letter-spacing: .12em; cursor: pointer; box-shadow: 0 0 22px rgba(255,213,74,.35); }