/* =======================
   Tavern Theme (Dark)
   Keeps layout intact – colors/visuals only
   ======================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=MedievalSharp&display=swap');

:root{
  --tavern-bg: #0f0d0a;
  --tavern-panel: #1b1410;
  --tavern-panel-2: #221912;
  --tavern-ink: #e8dcc5;
  --tavern-ink-dim: #cbbf9a;
  --tavern-ink-muted: #a7966e;
  --tavern-gold: #c7a35a;
  --tavern-gold-deep: #a17c2d;
  --tavern-ember: #f3b565;
  --tavern-ember-deep:#c47e2d;
  --tavern-shadow: rgba(0,0,0,.45);
  --ring: rgba(199,163,90,.25);
}

*{box-sizing:border-box}

html, body{
  height:100%;
}

body{
  margin:0;
  font-family: "Cinzel", "MedievalSharp", ui-serif, Georgia, serif;
  color: var(--tavern-ink);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(243,181,101,.06) 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(199,163,90,.05) 0%, transparent 70%),
    linear-gradient(180deg, #0b0907 0%, var(--tavern-bg) 40%, #0b0907 100%);
  background-attachment: fixed;
}

/* Generic section/panels */
.main-container{
  padding: 16px;
  gap: 16px;
}

.section, .dice-panel, .stats-box, .character-sheet, .dice-tray{
  background: linear-gradient(180deg, var(--tavern-panel) 0%, var(--tavern-panel-2) 100%);
  border: 1px solid rgba(199,163,90,.25);
  border-radius: 12px;
  box-shadow:
    0 8px 24px var(--tavern-shadow),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(2px);
}

/* Subtle parchment header style for any headings */
h1, h2, h3, h4{
  margin: .2em 0 .6em;
  color: var(--tavern-ember);
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  letter-spacing: .02em;
}

p, label, span, small{
  color: var(--tavern-ink-dim);
}

/* Inputs remain same size; only colors updated */




/* Dice buttons/controls keep dimensions; update visuals */
button, .btn{
  background: linear-gradient(180deg, var(--tavern-ember) 0%, var(--tavern-ember-deep) 100%);
  color: #2b1a09;
  border: 1px solid var(--tavern-gold-deep);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow:
    0 6px 16px rgba(243,181,101,.25),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}

button:hover, .btn:hover{
  filter: brightness(1.05);
  box-shadow:
    0 8px 22px rgba(243,181,101,.35),
    inset 0 1px 0 rgba(255,255,255,.3);
}

button:active, .btn:active{
  transform: translateY(1px);
}

/* Dice panel tiles */
.dice-panel{
  position: relative;
  overflow: hidden;
}

.dice-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--ring);
}

/* Character image retains size; add frame */
#character-img{
  display:block;
  border-radius: 10px;
  border: 1px solid rgba(199,163,90,.25);
  box-shadow: 0 6px 18px var(--tavern-shadow);
  background: #0b0907;
  object-fit: cover;
}

/* Upload area */
.char-picture{
  padding: 10px;
}

/* Dice tray / output */
.dice-tray, #dice-output{
  background: linear-gradient(180deg, #15100c 0%, #110d0a 100%);
  border: 1px dashed rgba(199,163,90,.3);
  border-radius: 10px;
  color: var(--tavern-ember);
  padding: 10px;
  white-space: pre-wrap;
}

/* Fine details */
hr{
  border: none;
  border-top: 1px solid rgba(199,163,90,.2);
  margin: 12px 0;
}

::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb{
  background: rgba(199,163,90,.35);
  border-radius: 8px;
}
::-webkit-scrollbar-track{
  background: #0d0a07;
}

/* Keep grid/flex as-is from original inline styles – DO NOT touch layout! */


/* Better contrast: lighter background, darker numbers */
input[type="number"] {
  background: #f6e7c9;       /* parchment tone */
  color: #2a2119;            /* deep tavern brown text */
  border: 1px solid rgba(199,163,90,.45);
  border-radius: 6px;
  padding-left: 6px;
  font-weight: 600;
}

input[type="number"]:focus {
  outline: none;
  border-color: #c7a35a;     /* golden glow on focus */
  box-shadow: 0 0 6px rgba(199,163,90,.4);
}