:root {
  --bg:#0f0d0a; --panel:#1a160f; --panel-2:#221c12; --line:#3a2f1d;
  --gold:#d4af37; --gold-soft:#e9cd6b; --gold-dim:#9c8233; --ink:#efe7d4; --muted:#a99c7e;
  --red:#b3322c; --blue:#2f6fb0; --green:#3f8e4f; --purple:#7d4ba3;
  --shadow:0 8px 28px rgba(0,0,0,.45);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { background:#070605; }
html,body { margin:0; }
body {
  position:relative; display:flex; flex-direction:column;
  height:100dvh; max-width:480px; margin:0 auto; overflow:hidden;
  background:radial-gradient(900px 500px at 50% -10%, #1b1610 0%, var(--bg) 60%);
  color:var(--ink); font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif;
}
@media (min-width:520px){ body{ border-left:1px solid #000; border-right:1px solid #000;
  box-shadow:0 0 0 1px #2a2118, 0 30px 80px rgba(0,0,0,.7); } }
h1,h2,h3 { font-family:"Cinzel",Georgia,serif; letter-spacing:.4px; }
button { font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--line); padding:9px 14px; transition:transform .06s, background .15s, border-color .15s; }
button:active { transform:translateY(1px); }
.primary { background:linear-gradient(#d8b441,#a9881f); color:#1a1408; border-color:#8a6c1a; font-weight:600; }
.ghost { background:transparent; color:var(--ink); }
.ghost:hover { border-color:var(--gold-dim); }
.wide { flex:1; }

/* Splash */
.splash { position:absolute; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(600px 400px at 50% 35%, #1d1710, #0c0a07); transition:opacity .6s ease; }
.splash.done { opacity:0; pointer-events:none; }
.splash-crest { width:120px; height:120px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); animation:rise .8s ease both; }
.splash-name { font-family:Cinzel,Georgia,serif; font-size:30px; letter-spacing:6px; color:var(--gold); animation:rise .8s .1s ease both; }
.splash-tag { font-size:10px; letter-spacing:4px; color:var(--gold-dim); }
.splash-bar { width:120px; height:3px; background:#2a2114; border-radius:3px; overflow:hidden; margin-top:10px; }
.splash-bar span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-dim),var(--gold-soft)); animation:fill 1.3s ease forwards; }
@keyframes rise { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes fill { to{ width:100% } }

/* App bar */
.appbar { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 16px;
  padding-top:max(12px, env(safe-area-inset-top)); background:linear-gradient(#15110b,#120f0a); border-bottom:1px solid var(--line); }
.appbar-crest { width:30px; height:30px; }
.appbar h1 { margin:0; font-size:19px; color:var(--gold); flex:1; }
.appbar-preview { display:none; font-size:9px; letter-spacing:1.5px; color:#120e05; background:var(--gold-soft); padding:3px 7px; border-radius:999px; font-family:Cinzel,Georgia,serif; }

/* Screens */
#app { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.screen { display:none; padding:14px 14px 26px; }
.screen.active { display:block; animation:fade .25s ease; }
@keyframes fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ---- PLAY (tracker) ---- */
.turnbar { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 12px; }
.turnbar button { width:40px; height:40px; padding:0; font-size:20px; }
.turn-readout { text-align:center; }
.round { display:block; font-size:11px; color:var(--muted); }
.phase { display:block; font-size:18px; color:var(--gold); font-weight:600; }
.phasehint { color:var(--gold-dim); font-size:12px; text-align:center; margin:8px 2px 4px; }
.board { display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.empty { text-align:center; color:var(--muted); padding:50px 16px; }
.empty .big { font-size:50px; opacity:.5; }
.play-actions { display:flex; gap:10px; margin-top:16px; }

.kingdom { background:linear-gradient(180deg,var(--panel),#16120c); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.k-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.k-flag { width:14px; height:24px; border-radius:2px; box-shadow:inset -3px 0 rgba(0,0,0,.35); }
.k-name { flex:1; background:transparent; border:none; color:var(--ink); font-family:Cinzel,Georgia,serif; font-size:17px; font-weight:600; padding:2px 4px; border-radius:6px; }
.k-name:focus { outline:1px solid var(--gold-dim); background:#0d0b07; }
.k-del { color:var(--muted); border:none; background:transparent; }
.k-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.stat { background:var(--panel-2); padding:10px; text-align:center; }
.stat .v { font-size:19px; color:var(--gold); font-weight:600; }
.stat .l { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.castle { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; gap:10px; border-bottom:1px solid var(--line); }
.castle .label { font-size:12px; color:var(--muted); }
.stepper { display:flex; align-items:center; gap:8px; }
.stepper button { width:34px; height:34px; padding:0; font-size:18px; line-height:1; }
.stepper .lvl { font-size:22px; color:var(--gold); min-width:30px; text-align:center; }
.section-title { display:flex; justify-content:space-between; padding:10px 14px 4px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.slots { color:var(--gold-dim); }
.districts { display:flex; flex-direction:column; gap:6px; padding:4px 14px 12px; }
.district { display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-left-width:4px; border-radius:9px; padding:8px 10px; }
.d-name { flex:1; } .d-name b { display:block; font-size:14px; } .d-name small { color:var(--muted); font-size:11px; }
.d-lvl { display:flex; align-items:center; gap:6px; } .d-lvl button { width:26px; height:26px; padding:0; } .d-lvl .n { min-width:18px; text-align:center; color:var(--gold); }
.d-prod { font-size:12px; color:var(--green); min-width:48px; text-align:right; }
.d-del { background:transparent; border:none; color:var(--muted); }
.army { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line); background:#120f0a; }
.army .chips { flex:1; } .army .chips b { color:var(--red); font-size:16px; } .army .chips small { color:var(--muted); display:block; font-size:11px; }
.addbtn { width:100%; }
.powerbar { display:flex; align-items:center; justify-content:space-between; padding:8px 14px 12px; background:#120f0a; font-size:13px; color:var(--muted); }
.powerbar b { color:var(--gold); }
.powerbar .stepper button { width:28px; height:28px; padding:0; }

/* Combat assistant */
.battle-body { padding:14px 16px 26px; }
.bt-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.bt-side { background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:12px; }
.bt-side h3 { margin:0 0 8px; font-size:14px; color:var(--gold-soft); }
.bt-side select, .bt-side input { width:100%; background:#0d0b07; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:7px 8px; font:inherit; font-size:14px; }
.bt-side label { display:block; font-size:11px; color:var(--muted); margin-top:8px; }
.bt-side label input { margin-top:3px; }
.bt-result { margin-top:14px; background:var(--panel); border:1px solid var(--gold-dim); border-radius:12px; padding:12px 14px; }
.bt-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); }
.bt-row span { color:var(--muted); } .bt-row b { color:var(--ink); } .bt-row i { color:var(--red); font-style:normal; font-size:13px; }
.bt-row.dead b { color:var(--red); text-decoration:line-through; }
.bt-verdict { text-align:center; color:var(--gold-soft); font-family:Cinzel,Georgia,serif; padding:12px 0 6px; }

/* ---- Generic doc screens ---- */
.doc { display:flex; flex-direction:column; gap:12px; }
.doc-card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.doc-card h3 { margin:0 0 6px; color:var(--gold-soft); font-size:16px; }
.doc-card p { margin:0; font-size:14px; line-height:1.5; color:var(--ink); }
.doc-link { display:block; text-align:center; color:var(--gold-soft); padding:12px; border:1px dashed var(--line); border-radius:12px; text-decoration:none; }
.banner { background:linear-gradient(90deg,#241c10,#1a160f); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13px; color:var(--gold-soft); text-align:center; }
.sub { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1.5px; margin:8px 2px 0; }
.muted-note { color:var(--muted); font-size:12px; font-style:italic; text-align:center; }

/* ---- ORDER (ranks) ---- */
.ranks { display:flex; flex-direction:column; gap:5px; }
.rank-row { display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; padding:9px 12px; }
.rank-row.current { border-color:var(--gold-dim); background:linear-gradient(90deg,#2a2114,#1a160f); box-shadow:0 0 0 1px var(--gold-dim) inset; }
.rk-ico { font-size:18px; width:24px; text-align:center; }
.rk-num { color:var(--gold-dim); font-family:Cinzel,Georgia,serif; font-size:12px; width:40px; }
.rk-name { flex:1; font-size:15px; }
.rk-you { font-size:10px; letter-spacing:1px; color:#120e05; background:var(--gold-soft); padding:2px 8px; border-radius:999px; }
.rk-done { color:var(--green); }
.badge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px; }
.badge-chip { background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:12px 6px; text-align:center; }
.badge-chip span { font-size:24px; display:block; filter:grayscale(.2); }
.badge-chip small { font-size:9px; color:var(--muted); display:block; margin-top:4px; line-height:1.1; }
.badge-chip.locked span { filter:grayscale(1) opacity(.5); }
.badge-chip.locked { opacity:.7; }

/* ---- BEASTS ---- */
.beasts { display:flex; flex-direction:column; gap:10px; }
.beast { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.beast-top { display:flex; align-items:center; gap:12px; }
.beast-ico { font-size:30px; }
.beast-top b { font-size:16px; color:var(--gold-soft); }
.stars { font-size:11px; color:var(--gold-dim); }
.beast-stats { display:flex; gap:14px; margin:10px 0 8px; font-size:14px; color:var(--ink); }
.beast-loot { font-size:12px; color:var(--green); background:#10130d; border:1px solid var(--line); border-radius:8px; padding:7px 9px; }

/* ---- PROFILE ---- */
.profile { text-align:center; padding:18px 0 8px; }
.pf-crest { width:84px; height:84px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.pf-name { font-family:Cinzel,Georgia,serif; font-size:20px; color:var(--gold); margin-top:6px; }
.pf-rank { color:var(--muted); font-size:14px; margin-top:2px; }
.pf-prog { height:8px; background:#2a2114; border-radius:6px; overflow:hidden; margin:12px 30px 4px; }
.pf-prog span { display:block; height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold-soft)); }
.pf-progtxt { font-size:11px; color:var(--muted); }
.pf-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0; }
.pf-stat { background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:12px 4px; text-align:center; }
.pf-stat b { font-size:20px; color:var(--gold); display:block; }
.pf-stat small { font-size:10px; color:var(--muted); }

/* ---- Tab bar ---- */
.tabbar { flex:0 0 auto; display:flex; background:linear-gradient(#15110b,#120f0a); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tab { flex:1; background:transparent; border:none; border-radius:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 2px 8px; color:var(--muted); }
.tab .ti { font-size:20px; filter:grayscale(.6) opacity(.8); }
.tab span:last-child { font-size:10px; letter-spacing:.5px; }
.tab.active { color:var(--gold-soft); }
.tab.active .ti { filter:none; transform:translateY(-1px); }
.tab.active::before { content:""; position:absolute; }

/* ---- Modal ---- */
.modal { position:absolute; inset:0; z-index:30; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; }
.modal.hidden { display:none; }
.sheet { background:var(--panel); border:1px solid var(--line); border-radius:18px 18px 0 0; width:100%; max-height:78%; overflow:auto; box-shadow:var(--shadow); }
.sheet-head { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--panel); border-bottom:1px solid var(--line); }
.sheet-head h2 { margin:0; font-size:17px; color:var(--gold); }
.district-list { display:flex; flex-direction:column; gap:8px; padding:14px 16px 28px; }
.pick { display:flex; align-items:center; gap:12px; text-align:left; width:100%; background:var(--panel-2); border:1px solid var(--line); border-left-width:5px; border-radius:11px; padding:12px; }
.pick:disabled { opacity:.38; }
.pick .swatch { width:10px; height:34px; border-radius:3px; }
.pick .meta { flex:1; } .pick .meta b { display:block; } .pick .meta small { color:var(--muted); }
.pick .req { font-size:11px; color:var(--gold-dim); }