/* Dhemetra Game UI — Gothic 2000s fantasy, mobile-first
   NOTE: this overrides the main site style.css on purpose.
*/

:root{
  --gold: rgba(201,168,106,1);
  --gold2: rgba(215,188,133,1);
  --line: rgba(201,168,106,.22);
  --line2: rgba(201,168,106,.32);
  --ink: rgba(0,0,0,.18);
  --bgA: rgba(22,18,16,.94);
  --bgB: rgba(14,11,10,.90);
  --parchA: rgba(35,28,22,.92);
  --parchB: rgba(18,14,12,.88);
}

html{color-scheme:dark;}
.game-shell{max-width:1120px;margin:0 auto;padding:18px 14px 72px;position:relative;z-index:2;color:#f7efe1}
.game-shell a{color:#f7efe1}
.game-shell .small.muted{color:rgba(242,232,219,.78)}

/* ====== ORNAMENTS / CARDS ====== */
.hero, .card, .scene, .side, .modal-card{
  position:relative;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(201,168,106,.12), transparent 60%),
    radial-gradient(700px 320px at 80% 20%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, var(--bgA), var(--bgB));
  box-shadow:
    0 10px 28px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.hero{padding:18px}
.hero h1{
  margin:0;
  font-family:"UnifrakturCook",cursive;
  font-size:54px;
  letter-spacing:.02em;
  line-height:1;
  text-shadow:0 8px 22px rgba(0,0,0,.55);
}
.hero p{margin:10px 0 0;opacity:.88;max-width:74ch;line-height:1.5}

.card{padding:16px}
.card h2{
  margin:0 0 10px;
  font-family:"Cinzel",serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:14px;
  opacity:.92;
}

/* little corner runes */
.hero:before,.card:before,.scene:before,.modal-card:before{
  content:"";
  position:absolute;inset:10px;
  border-radius:14px;
  border:1px dashed rgba(201,168,106,.16);
  pointer-events:none;
  mask-image: linear-gradient(black, black);
}
.hero:after,.card:after,.scene:after,.modal-card:after{
  content:"✦";
  position:absolute;
  top:12px;right:16px;
  opacity:.22;
  font-size:14px;
  color:var(--gold2);
  pointer-events:none;
}

/* ====== TOPBAR ====== */
.game-topbar{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 14px;border-radius:18px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 360px at 15% 0%, rgba(201,168,106,.12), transparent 55%),
    linear-gradient(180deg, var(--bgA), var(--bgB));
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

.place{
  font-family:"Cinzel",serif;font-weight:900;letter-spacing:.10em;
  text-transform:uppercase;
}

.clock{
  margin-top:8px;
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.clock-time{
  font-family:"Cinzel",serif;
  font-weight:900;
  font-size:34px;
  letter-spacing:.08em;
  text-shadow: 0 0 18px rgba(201,168,106,.20), 0 2px 0 #000;
}
.clock-sub{
  opacity:.85;
  font-family:"Cinzel",serif;
  letter-spacing:.12em;
  font-size:12px;
  text-transform:uppercase;
}
@media(max-width:520px){
  .clock-time{font-size:30px}
}

.time{
  opacity:.85;margin-top:4px;
  font-family:"Cinzel",serif;letter-spacing:.14em;
  font-size:12px;
}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(201,168,106,.22);
  background:rgba(0,0,0,.18);
  font-size:12px
}
.badge b{letter-spacing:.02em}

/* Progress bars */
.progress{height:10px;border-radius:999px;overflow:hidden;border:1px solid var(--line);background:rgba(0,0,0,.22)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg, rgba(201,168,106,.95), rgba(215,188,133,.7))}
.progress-row{display:grid;grid-template-columns:92px 1fr 74px;gap:10px;align-items:center;margin-top:10px}

/* ====== MAIN LAYOUT (focus on actions) ====== */
.game-grid{display:grid;gap:16px;margin-top:16px}
@media(min-width:980px){.game-grid{grid-template-columns:1fr}}
/* we removed the right sidebar; keep the scene full width */

.scene{padding:18px}
.scene h2{
  margin:0 0 10px;
  font-family:"Cinzel",serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:13px;
  opacity:.92
}
.scene .text{white-space:pre-line;font-size:1.08rem;line-height:1.58}

/* ====== CHOICES ====== */
.choices{display:grid;gap:12px;margin-top:14px}
@media(min-width:760px){.choices{grid-template-columns:1fr 1fr}}

.choice-card{
  border-radius:18px;padding:14px;
  border:1px solid rgba(201,168,106,.22);
  background:
    radial-gradient(520px 260px at 20% 20%, rgba(201,168,106,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.choice-card .cap{
  opacity:.85;font-family:"Cinzel",serif;letter-spacing:.14em;
  text-transform:uppercase;font-size:11px;
  display:flex;justify-content:space-between;gap:10px
}
.choice-card .desc{
  margin-top:10px;opacity:.88;font-size:13px;line-height:1.45;
  padding:10px 10px;border-radius:14px;
  border:1px dashed rgba(201,168,106,.22);
  background:rgba(0,0,0,.18)
}
.chips{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(201,168,106,.22);
  background:rgba(0,0,0,.22);
  font-size:12px;white-space:nowrap
}
.chip i{width:8px;height:8px;border-radius:99px;background:rgba(201,168,106,.9);display:inline-block}
.chip.danger i{background:rgba(255,120,120,.9)}
.chip.warn i{background:rgba(255,196,92,.9)}

.choice-card button,
.btn-link{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(201,168,106,.30);
  background:
    radial-gradient(520px 260px at 20% 20%, rgba(201,168,106,.14), transparent 60%),
    linear-gradient(180deg, rgba(201,168,106,.18), rgba(0,0,0,.12));
  color:#f7efe1;
  font-family:"Cinzel",serif;
  font-weight:900;
  letter-spacing:.10em;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.choice-card button:hover,
.btn-link:hover{filter:brightness(1.06)}
.choice-card button[disabled]{opacity:.5;cursor:not-allowed}

/* ====== INPUTS (dark parchment) ====== */
/* high specificity to override site style.css */
.game-shell input,
.game-shell select,
.game-shell textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(201,168,106,.28);
  background:
    linear-gradient(180deg, rgba(35,28,22,.92), rgba(18,14,12,.90)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,.02) 2px 4px);
  color:#f2e8db;
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -10px 30px rgba(0,0,0,.25);
}
.game-shell input::placeholder{color:rgba(242,232,219,.55)}
.game-shell input:focus,
.game-shell select:focus,
.game-shell textarea:focus{
  border-color:rgba(215,188,133,.60);
  box-shadow:
    0 0 0 3px rgba(201,168,106,.10),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.game-shell select{
  appearance:none;
  background-image:
    linear-gradient(180deg, rgba(35,28,22,.92), rgba(18,14,12,.90)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,.02) 2px 4px),
    radial-gradient(circle at 92% 50%, rgba(201,168,106,.80) 0 2px, transparent 3px),
    linear-gradient(45deg, transparent 50%, rgba(201,168,106,.85) 50%),
    linear-gradient(-45deg, transparent 50%, rgba(201,168,106,.85) 50%);
  background-position:
    0 0,
    0 0,
    right 14px center,
    right 10px center,
    right 6px center;
  background-size:
    auto,
    auto,
    6px 6px,
    8px 8px,
    8px 8px;
  background-repeat:no-repeat;
  padding-right:42px;
}
.small.muted{opacity:.75;font-size:12px}

/* ====== ALLOCATOR ====== */
.alloc{display:grid;gap:12px;margin-top:12px}
.alloc-head{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-radius:14px;border:1px dashed rgba(201,168,106,.22);
  background:rgba(0,0,0,.18)
}
.alloc-row{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:12px;border-radius:16px;
  border:1px solid rgba(201,168,106,.18);
  background:rgba(0,0,0,.14)
}
.alloc-row .meta{display:flex;flex-direction:column;gap:4px}
.alloc-row .meta b{font-family:"Cinzel",serif;letter-spacing:.12em}
.alloc-row .meta span{opacity:.75;font-size:12px}
.alloc-row .ctrl{display:flex;align-items:center;gap:10px}
.stepper{
  width:38px;height:38px;border-radius:12px;
  border:1px solid rgba(201,168,106,.28);
  background:
    radial-gradient(220px 120px at 30% 30%, rgba(201,168,106,.12), transparent 60%),
    rgba(0,0,0,.20);
  color:#f2e8db;cursor:pointer;font-size:18px;line-height:1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.stepper:hover{filter:brightness(1.08)}
.stepper[disabled]{opacity:.45;cursor:not-allowed}
.value{min-width:34px;text-align:center;font-family:"Cinzel",serif;font-weight:900;letter-spacing:.10em}

/* ====== MODAL (storia azioni) ====== */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.62);
  display:none;
  align-items:center;justify-content:center;
  padding:16px;
  z-index:50;
}
.modal.open{display:flex}
.modal-card{
  width:min(980px, 100%);
  max-height:min(78vh, 720px);
  padding:16px;
}
.modal-head{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  margin-bottom:10px
}
.modal-head h3{
  margin:0;
  font-family:"Cinzel",serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:13px;
}
.modal-close{
  width:auto;min-width:44px;
  padding:10px 12px;border-radius:12px;
}
.log{
  max-height:calc(78vh - 120px);
  overflow:auto;
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(201,168,106,.14);
  background:rgba(0,0,0,.18)
}
.log .entry{padding:8px 0;border-bottom:1px dashed rgba(201,168,106,.16)}
.log .t{opacity:.8;font-family:"Cinzel",serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.log .m{margin-top:4px;white-space:pre-line}

/* ====== DEATH ====== */
.death{text-align:center;padding:34px 16px}
.death h1{margin:0;font-family:"UnifrakturCook",cursive;font-size:72px;line-height:1;text-shadow:0 10px 26px rgba(0,0,0,.55)}