/* ============================================================
   css/ui-polish.css — additive professional fantasy UI polish
   Intent: visual-only refinement layered after game.css. Keep this
   stylesheet additive, low-specificity where possible, and safe for
   runtime game logic (especially modal positioning/scaling).
============================================================ */

:root{
  --ui-ink:#06040b;
  --ui-panel:rgba(13,9,22,.78);
  --ui-panel-strong:rgba(17,12,29,.88);
  --ui-glass-top:rgba(255,255,255,.105);
  --ui-glass-mid:rgba(180,145,255,.105);
  --ui-glass-bottom:rgba(0,0,0,.28);
  --ui-stroke:rgba(205,185,255,.30);
  --ui-stroke-soft:rgba(255,255,255,.12);
  --ui-gold:#f3c873;
  --ui-gold-soft:rgba(243,200,115,.26);
  --ui-gold-strong:rgba(243,200,115,.76);
  --ui-violet:#b89cff;
  --ui-violet-soft:rgba(184,156,255,.24);
  --ui-cyan-soft:rgba(103,232,249,.16);
  --ui-danger-soft:rgba(248,113,113,.22);
  --ui-focus-ring:rgba(243,200,115,.92);
  --ui-radius-sm:10px;
  --ui-radius-md:14px;
  --ui-radius-lg:18px;
  --ui-ease:cubic-bezier(.22,1,.36,1);
  --ui-shadow-soft:0 10px 24px rgba(0,0,0,.38);
  --ui-shadow-deep:0 20px 46px rgba(0,0,0,.52);
  --ui-inner-line:inset 0 0 0 1px var(--ui-stroke-soft);
}

/* Intentional keyboard navigation without the browser-default blue ring. */
:where(button,.btn,[role="button"],input,select,textarea,[tabindex]):focus{outline:none;}
:where(button,.btn,[role="button"],input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ui-focus-ring);
  outline-offset:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.85),0 0 0 5px rgba(243,200,115,.18),0 0 20px rgba(243,200,115,.28) !important;
}

/* Shared professional glass frame for major containers. */
.card,
.modal-card,
.stats-card,
.casino-card,
.tome-book{
  border-radius:var(--ui-radius-lg) !important;
  border-color:var(--ui-stroke) !important;
  background:
    linear-gradient(180deg,var(--ui-glass-top),rgba(255,255,255,0) 20%),
    radial-gradient(120% 120% at 50% -12%,var(--ui-violet-soft),transparent 58%),
    radial-gradient(90% 90% at 8% 0%,var(--ui-cyan-soft),transparent 48%),
    linear-gradient(155deg,var(--ui-panel-strong),var(--ui-panel)) !important;
  box-shadow:
    var(--ui-inner-line),
    inset 0 -24px 42px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.08),
    var(--ui-shadow-deep) !important;
  backdrop-filter:blur(8px) saturate(125%);
  -webkit-backdrop-filter:blur(8px) saturate(125%);
}
.card::before,
.modal-card::before,
.stats-card::before{
  border-radius:calc(var(--ui-radius-lg) - 5px) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 38%),radial-gradient(120% 130% at 50% -18%,rgba(243,200,115,.10),transparent 55%) !important;
  opacity:.72 !important;
}
.card::after,
.modal-card::after,
.stats-card::after{
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 28px rgba(0,0,0,.38),0 0 18px rgba(124,58,237,.13) !important;
}

/* Smooth, consistent interaction language for controls and compact segments. */
:where(.btn,button,.pill,.tag,.info-theme-btn){
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s var(--ui-ease),background .18s var(--ui-ease),box-shadow .18s var(--ui-ease),filter .18s var(--ui-ease),opacity .18s var(--ui-ease),transform .14s var(--ui-ease);
}
.btn,
button.pill,
.info-theme-btn{
  position:relative;
  isolation:isolate;
  border-radius:var(--ui-radius-md) !important;
  border-color:rgba(205,185,255,.42) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 36%),linear-gradient(155deg,rgba(31,20,49,.92),rgba(13,9,22,.95)) !important;
  box-shadow:var(--ui-inner-line),inset 0 -2px 0 rgba(0,0,0,.42),0 7px 16px rgba(0,0,0,.34) !important;
}
.btn::before,
button.pill::before,
.info-theme-btn::before{
  content:"";
  position:absolute;
  inset:1px 1px auto;
  height:42%;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0));
  opacity:.58;
  pointer-events:none;
  z-index:-1;
}
.btn:not(:disabled):not([aria-disabled="true"]):hover,
button.pill:not(:disabled):not([aria-disabled="true"]):hover,
.info-theme-btn:hover{
  border-color:rgba(243,200,115,.62) !important;
  filter:brightness(1.07) saturate(1.08);
  box-shadow:var(--ui-inner-line),inset 0 -2px 0 rgba(0,0,0,.36),0 10px 20px rgba(0,0,0,.40),0 0 16px rgba(184,156,255,.18) !important;
}
.btn:not(:disabled):not([aria-disabled="true"]):active,
button.pill:not(:disabled):not([aria-disabled="true"]):active,
.info-theme-btn:active{transform:translateY(1px) scale(.995);}
.btn:disabled,
button:disabled,
[aria-disabled="true"]{opacity:.52 !important;filter:saturate(.72) brightness(.86);box-shadow:var(--ui-inner-line) !important;}

.btn.buy,.start-btn,#shopPill,#adventurersTomeBtn{
  border-color:var(--ui-gold-strong) !important;
  color:#fff7dc !important;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 34%),linear-gradient(155deg,rgba(83,48,21,.88),rgba(35,22,33,.94)),radial-gradient(100% 160% at 50% -30%,var(--ui-gold-soft),transparent 62%) !important;
  box-shadow:inset 0 0 0 1px rgba(255,244,214,.22),inset 0 -2px 0 rgba(64,38,9,.75),0 0 0 1px rgba(120,75,24,.62),0 8px 18px rgba(0,0,0,.38),0 0 18px rgba(243,200,115,.16) !important;
}

.pill,.tag,.price-token,.gold-border,.name-display,.keypad-display,.window-title-chip,.small.hero-point-border{
  border-radius:999px !important;
  border-color:rgba(205,185,255,.36) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 -8px 16px rgba(0,0,0,.24),0 3px 10px rgba(0,0,0,.26) !important;
}
.price-token,#gp,#gph{color:#ffe6a3;text-shadow:0 0 10px rgba(243,200,115,.28),0 1px 0 rgba(0,0,0,.85);}

/* HUD polish: keep dungeon movement controls visually paired and align headings with panel text. */
#descendFloorBtn,
#rerollFloorBtn{
  border-color:rgba(205,185,255,.42) !important;
  color:var(--text) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 36%),linear-gradient(155deg,rgba(31,20,49,.92),rgba(13,9,22,.95)) !important;
  box-shadow:var(--ui-inner-line),inset 0 -2px 0 rgba(0,0,0,.42),0 7px 16px rgba(0,0,0,.34) !important;
}
#descendFloorBtn:not(:disabled):not([aria-disabled="true"]):hover,
#rerollFloorBtn:not(:disabled):not([aria-disabled="true"]):hover{
  border-color:rgba(243,200,115,.62) !important;
  box-shadow:var(--ui-inner-line),inset 0 -2px 0 rgba(0,0,0,.36),0 10px 20px rgba(0,0,0,.40),0 0 16px rgba(184,156,255,.18) !important;
}
.adventure-log-shell .log-title{
  color:var(--text);
}

/* Gold HUD: mirror the adventure-log gold glow and give the display a warm coin-lit frame. */
#heroGold.gold-border{
  border-color:var(--gold) !important;
  color:var(--gold);
  background:linear-gradient(180deg,rgba(90,54,9,.72),rgba(31,19,15,.96)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,244,214,.26),
    inset 0 0 10px rgba(251,191,36,.24),
    0 0 8px rgba(251,191,36,.72),
    0 0 18px rgba(251,191,36,.38) !important;
}
#heroGold #gp{
  color:var(--gold);
  text-shadow:0 0 4px rgba(251,191,36,.58),0 0 9px rgba(251,191,36,.32);
}


/* Modals: polished stage without transform animation, preserving runtime layout logic. */
.modal:not(.hidden){
  background:radial-gradient(circle at 50% 12%,rgba(184,156,255,.20),rgba(3,2,7,.86) 62%),rgba(0,0,0,.66) !important;
  backdrop-filter:blur(5px) saturate(112%);
  -webkit-backdrop-filter:blur(5px) saturate(112%);
}
.modal:not(.hidden) > .modal-card{animation:uiModalFade .16s var(--ui-ease) both;}
.modal-card h2,.modal-card h3,.inventory-title,.shadowgate-title,.tome-title,.window-title-chip{
  letter-spacing:.025em;
  text-shadow:0 2px 0 rgba(0,0,0,.72),0 0 14px rgba(243,200,115,.14);
}
@keyframes uiModalFade{from{opacity:0;}to{opacity:1;}}

/* Scoped scrollbars: only real game panes, never every element globally. */
:where(.modal-card,.tome-page-body,.tome-page-list,.log,.inventory-list,.shop-list,.equipment-list,#infoContent){
  scrollbar-width:thin;
  scrollbar-color:rgba(184,156,255,.58) rgba(7,5,13,.70);
}
:where(.modal-card,.tome-page-body,.tome-page-list,.log,.inventory-list,.shop-list,.equipment-list,#infoContent)::-webkit-scrollbar{width:8px;height:8px;}
:where(.modal-card,.tome-page-body,.tome-page-list,.log,.inventory-list,.shop-list,.equipment-list,#infoContent)::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(7,5,13,.82),rgba(3,2,7,.92));border-radius:999px;}
:where(.modal-card,.tome-page-body,.tome-page-list,.log,.inventory-list,.shop-list,.equipment-list,#infoContent)::-webkit-scrollbar-thumb{border:1px solid rgba(7,5,13,.9);border-radius:999px;background:linear-gradient(180deg,rgba(216,180,254,.72),rgba(91,33,182,.78));}

.info-theme-btn[aria-pressed="true"]{outline:2px solid var(--ui-gold-strong);outline-offset:2px;box-shadow:0 0 0 4px rgba(243,200,115,.14),0 0 18px rgba(243,200,115,.26) !important;}

@media (prefers-reduced-motion: reduce){
  .modal:not(.hidden) > .modal-card{animation:none;}
  :where(.btn,button,.pill,.tag,.info-theme-btn){transition:none !important;}
}

/* Keep the Shop button's ornate format while marking the Idle Shop as open. */
#shopPill.idle-shop-open{
  border-color:#4ade80 !important;
  box-shadow:inset 0 0 0 1px rgba(220,252,231,.30),inset 0 -2px 0 rgba(20,83,45,.82),0 0 0 1px rgba(34,197,94,.70),0 8px 18px rgba(0,0,0,.38),0 0 18px rgba(74,222,128,.24) !important;
}

/* Shadow Lantern Casino: dark oakwood and UV-purple high-fantasy treatment. */
#diceModal{
  --casino-oak-950:#080504;
  --casino-oak-900:#120a07;
  --casino-oak-800:#1f110a;
  --casino-oak-700:#321b0e;
  --casino-oak-600:#4a2a16;
  --casino-ember:#a96f35;
  --casino-uv:#9b4dff;
  --casino-uv-bright:#c084fc;
  --casino-uv-deep:#3b0764;
  --casino-parchment:#efe2c4;
}

#diceModal:not(.hidden){
  background:
    radial-gradient(circle at 50% 16%, rgba(91,33,182,.24), transparent 34%),
    radial-gradient(circle at 16% 82%, rgba(74,35,16,.38), transparent 30%),
    rgba(0,0,0,.82) !important;
}

#diceModal .dice-menu-card{
  border-color:rgba(155,77,255,.54) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    radial-gradient(120% 80% at 50% -8%, rgba(155,77,255,.22), transparent 45%),
    radial-gradient(90% 80% at 50% 112%, rgba(74,42,22,.38), transparent 52%),
    linear-gradient(135deg, var(--casino-oak-900), var(--casino-oak-950) 42%, #16091f 73%, var(--casino-oak-800)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(239,226,196,.08),
    inset 0 20px 42px rgba(169,111,53,.08),
    inset 0 -36px 68px rgba(0,0,0,.66),
    0 28px 70px rgba(0,0,0,.68),
    0 0 48px rgba(155,77,255,.26),
    0 0 0 1px rgba(0,0,0,.78) !important;
}

#diceModal .dice-menu-card::before{
  border-color:rgba(192,132,252,.28) !important;
  box-shadow:
    inset 0 0 18px rgba(155,77,255,.10),
    0 0 20px rgba(155,77,255,.13) !important;
}

#diceModal .casino-card{
  border-color:rgba(155,77,255,.46) !important;
  background:
    linear-gradient(90deg, rgba(239,226,196,.026) 0 1px, transparent 1px 15px),
    radial-gradient(110% 85% at 50% -18%, rgba(155,77,255,.20), transparent 54%),
    linear-gradient(180deg, rgba(50,27,14,.96), rgba(18,10,7,.99) 48%, rgba(12,6,18,.99) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(239,226,196,.075),
    inset 0 16px 30px rgba(169,111,53,.08),
    inset 0 -22px 38px rgba(0,0,0,.56),
    0 14px 30px rgba(0,0,0,.46),
    0 0 25px rgba(155,77,255,.20) !important;
}

#diceModal .casino-card::before{
  border-color:rgba(169,111,53,.34) !important;
  box-shadow:inset 0 0 20px rgba(155,77,255,.08) !important;
}

#diceModal .window-title-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  text-align:center !important;
}

#diceModal #diceTitle{
  min-height:54px !important;
  font-size:clamp(20px, 7vw, 38px) !important;
  letter-spacing:clamp(.035em, .9vw, .08em) !important;
  line-height:1.02 !important;
  padding-inline:clamp(12px, 4vw, 22px) !important;
  text-transform:uppercase !important;
}

#diceModal .casino-section-title-chip{
  min-height:0 !important;
  width:fit-content !important;
  max-width:calc(100% - 12px) !important;
  font-size:clamp(12px, 3.8vw, 16px) !important;
  line-height:1.12 !important;
  letter-spacing:.035em !important;
  padding:8px 14px !important;
  text-transform:none !important;
}

/* Refined Shadow Lantern title treatment: dark graphite plate with a small UV-purple radial edge glow. */
#diceModal #diceTitle.casino-main-title{
  position:relative !important;
  min-width:0 !important;
  min-height:34px !important;
  padding:7px clamp(16px, 3.3vw, 26px) 8px !important;
  border:1px solid rgba(124,58,237,.52) !important;
  border-radius:16px !important;
  color:#3f3f46 !important;
  background:
    radial-gradient(74% 100% at 50% 50%, rgba(126,34,206,.24), transparent 58%),
    linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #1d1d22, #111116 48%, #1a1023 100%) !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#3f3f46 !important;
  -webkit-text-stroke:.45px rgba(218,214,226,.22) !important;
  font-size:clamp(17px, 4.2vw, 24px) !important;
  letter-spacing:clamp(.045em, .75vw, .08em) !important;
  line-height:1 !important;
  filter:none !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.9),
    0 0 4px rgba(216,180,254,.34),
    0 0 10px rgba(126,34,206,.46) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.055),
    inset 0 10px 20px rgba(255,255,255,.025),
    inset 0 -14px 24px rgba(0,0,0,.62),
    0 0 0 1px rgba(0,0,0,.72),
    0 0 10px rgba(126,34,206,.30),
    0 0 18px rgba(76,29,149,.20) !important;
}

#diceModal #diceTitle.casino-main-title::before{
  inset:4px !important;
  border-color:rgba(169,111,53,.40) !important;
  border-radius:13px !important;
  background:radial-gradient(72% 120% at 50% 50%, rgba(126,34,206,.18), transparent 62%), linear-gradient(135deg, rgba(63,63,70,.24), rgba(24,12,36,.16), rgba(8,8,12,.34)) !important;
}

#diceModal #diceTitle.casino-main-title::after{
  content:"" !important;
  inset:-2px !important;
  transform:none !important;
  z-index:-2 !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border-radius:inherit !important;
  background:radial-gradient(70% 90% at 50% 50%, rgba(126,34,206,.42), rgba(88,28,135,.24) 52%, transparent 74%) !important;
  filter:blur(3px) !important;
}

#diceModal .casino-section-title-chip{
  border-color:rgba(192,132,252,.50) !important;
  color:#e9d5ff !important;
  background:
    linear-gradient(90deg, rgba(239,226,196,.045) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, var(--casino-oak-700), var(--casino-oak-950) 55%, #1a0927) !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#e9d5ff !important;
  -webkit-text-stroke:0 !important;
  font-size:clamp(11px, 3.2vw, 14px) !important;
  line-height:1.12 !important;
  letter-spacing:.04em !important;
  padding:7px 13px !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    0 0 7px rgba(192,132,252,.48),
    0 0 15px rgba(155,77,255,.28) !important;
  filter:none !important;
  box-shadow:
    inset 0 0 0 1px rgba(239,226,196,.07),
    inset 0 -9px 16px rgba(0,0,0,.46),
    0 0 0 1px rgba(0,0,0,.55),
    0 0 15px rgba(155,77,255,.20) !important;
}

#diceModal .casino-section-title-chip::before{
  inset:3px !important;
  border-color:rgba(169,111,53,.32) !important;
  background:linear-gradient(135deg, rgba(50,27,14,.48), rgba(155,77,255,.10), rgba(8,5,4,.36)) !important;
}

#diceModal .casino-section-title-chip::after{
  background:linear-gradient(135deg, rgba(155,77,255,.26), rgba(18,10,7,.96), rgba(192,132,252,.16)) !important;
}

#diceModal .casino-title-kicker{
  color:var(--casino-uv-bright);
  -webkit-text-fill-color:var(--casino-uv-bright);
  font-size:.78em;
  letter-spacing:.08em;
  text-shadow:0 0 8px rgba(192,132,252,.58), 0 0 15px rgba(155,77,255,.30);
}

/* Adventure Log depth: each nested container steps darker as it moves inward. */
#adventureLogPanel.card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,0) 22%),
    radial-gradient(120% 95% at 50% -16%,rgba(148,163,184,.24),transparent 62%),
    linear-gradient(155deg,rgba(17,24,39,.96),rgba(8,13,24,.94)) !important;
}
#adventureLogPanel .log-header{
  border:1px solid rgba(37,99,235,.54);
  border-radius:13px;
  padding:6px;
  background:linear-gradient(155deg,rgba(9,18,34,.9),rgba(7,13,26,.86)) !important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14),inset 0 -14px 24px rgba(0,0,0,.28) !important;
}
#adventureLogPanel .button-panel-container,
#adventureLogPanel #dunChecklist{
  background:linear-gradient(155deg,rgba(7,14,28,.94),rgba(5,10,20,.9)) !important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.13),0 6px 14px rgba(2,6,23,.32),0 0 13px rgba(56,189,248,.11) !important;
}
#adventureLogPanel .adventure-log-shell{
  background:linear-gradient(155deg,rgba(5,11,23,.96),rgba(3,7,15,.94)) !important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.12),0 8px 16px rgba(2,6,23,.42),0 0 14px rgba(56,189,248,.1) !important;
}
#adventureLogPanel .gscrollWrap{
  background:linear-gradient(155deg,rgba(3,7,14,.98),rgba(1,3,8,.96));
  border-radius:9px;
}
#adventureLogPanel .log{
  background:linear-gradient(180deg,rgba(2,5,11,.98),rgba(0,2,6,.98));
}