:root{
  --bg:#140a1e; --bg2:#0d0613; --panel:#1d1228; --panel2:#251732;
  --line:rgba(255,255,255,.10); --txt:#efe7f5; --dim:#a99bb8;
  --gold:#e8c463; --gold2:#f6dd8a; --wine:#7a2746; --royal:#6f4fb0;
  --faith:#7fb4ff; --people:#5fcf86; --army:#ff6a5a;
  --good:#56d364; --bad:#ff5a4d;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none}
body{display:flex;flex-direction:column;height:100dvh;
  background:
    radial-gradient(120% 70% at 50% -10%, #2a163e 0%, #150b20 46%, #0c0612 100%);}

/* ---------- top bar ---------- */
#topbar{display:flex;align-items:center;gap:7px;padding:max(7px,env(safe-area-inset-top)) 10px 7px;
  background:linear-gradient(180deg,rgba(28,16,40,.92),rgba(18,10,26,.82));
  border-bottom:1px solid rgba(232,196,99,.18);flex:0 0 auto;z-index:5;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#topbar .back{color:var(--dim);text-decoration:none;font-size:13px;font-weight:600;
  padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.05);white-space:nowrap}
#topbar .brand{font-weight:800;font-size:15px;letter-spacing:-.01em;display:flex;align-items:center;gap:5px;
  color:var(--gold2)}
#topbar .brand .ic{font-size:17px}
#topbar .spacer{flex:1}
.hud{font-size:12px;font-weight:700;background:rgba(255,255,255,.05);border:1px solid var(--line);
  padding:4px 7px;border-radius:9px;white-space:nowrap;font-variant-numeric:tabular-nums}
#monarchChip{color:#e9d7ff;max-width:34vw;overflow:hidden;text-overflow:ellipsis}
#reignChip{color:#cfe0ff}#dynChip{color:var(--gold2)}
#topbar button{width:31px;height:31px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--txt);font-size:14px;cursor:pointer;flex:0 0 auto}
@media (max-width:560px){
  #topbar .brand{font-size:13px}
  .hud{font-size:11px;padding:3px 6px}
}

/* ---------- meters ---------- */
#meters{display:flex;gap:10px;justify-content:center;align-items:flex-end;
  padding:12px 14px 4px;flex:0 0 auto}
.meter{display:flex;flex-direction:column;align-items:center;gap:6px;width:54px}
.mtrack{width:14px;height:90px;border-radius:9px;background:rgba(0,0,0,.4);
  border:1px solid var(--line);overflow:hidden;position:relative;display:flex;align-items:flex-end}
.mfill{width:100%;height:50%;border-radius:0 0 8px 8px;transition:height .45s cubic-bezier(.2,.8,.2,1),background .3s}
.meter[data-k=faith]  .mfill{background:linear-gradient(180deg,#a9cdff,#5f93ff)}
.meter[data-k=people] .mfill{background:linear-gradient(180deg,#8ee6a8,#46b56b)}
.meter[data-k=army]   .mfill{background:linear-gradient(180deg,#ff9286,#e34635)}
.meter[data-k=gold]   .mfill{background:linear-gradient(180deg,#f7dd92,#e0ab39)}
.micon{font-size:19px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.meter.warn .mtrack{box-shadow:0 0 0 2px rgba(255,90,77,.55),0 0 14px rgba(255,90,77,.5);
  animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
/* drag preview arrows on icons */
.meter .pv{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:900;
  opacity:0;transition:opacity .12s}
.meter.pv-up .pv{opacity:1;color:var(--good)}
.meter.pv-dn .pv{opacity:1;color:var(--bad)}

/* ---------- stage / card ---------- */
#stage{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;
  padding:6px 16px 0;min-height:0}
#card{position:relative;width:min(82vw,330px);max-height:100%;
  background:linear-gradient(170deg,#2a1c3a,#1c1228);
  border:1px solid rgba(232,196,99,.28);border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  padding:20px 20px 22px;display:flex;flex-direction:column;align-items:center;
  will-change:transform;touch-action:none;cursor:grab}
#card.grab{cursor:grabbing}
#card::before{content:"";position:absolute;inset:6px;border-radius:15px;
  border:1px solid rgba(232,196,99,.14);pointer-events:none}
.portrait{width:104px;height:104px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,#4a3565,#2a1c3a);
  border:2px solid rgba(232,196,99,.45);box-shadow:0 8px 22px rgba(0,0,0,.5);margin-top:4px}
.portrait .pemoji{font-size:54px;line-height:1}
.portrait.f-faith {border-color:#7fb4ff;background:radial-gradient(circle at 50% 35%,#2e3f63,#1a2236)}
.portrait.f-people{border-color:#5fcf86;background:radial-gradient(circle at 50% 35%,#274a35,#16271d)}
.portrait.f-army  {border-color:#ff6a5a;background:radial-gradient(circle at 50% 35%,#552a2a,#2a1717)}
.portrait.f-court {border-color:#caa6ff;background:radial-gradient(circle at 50% 35%,#3d2a5c,#211633)}
.portrait.f-foreign{border-color:#56d8c8;background:radial-gradient(circle at 50% 35%,#1f4a47,#13302d)}
.portrait.f-mystic{border-color:#d98bff;background:radial-gradient(circle at 50% 35%,#43275c,#241334)}
.portrait.f-people .pemoji{}
.speaker{margin:11px 0 3px;text-align:center}
.speaker .sname{display:block;font-weight:800;font-size:16px;color:var(--gold2);letter-spacing:-.01em}
.speaker .stitle{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}
.dilemma{margin:9px 2px 0;text-align:center;font-size:15px;line-height:1.5;color:#ece3f4;
  font-weight:500;min-height:3em;display:flex;align-items:center}
.cardstamp{position:absolute;top:14px;font-size:12px;font-weight:900;letter-spacing:.04em;
  padding:5px 12px;border-radius:8px;border:2px solid;opacity:0;transform:rotate(-12deg);
  transition:opacity .08s}
.cardstamp.show{opacity:.92}
.cardstamp.yes{right:14px;color:var(--good);border-color:var(--good)}
.cardstamp.no {left:14px;color:var(--bad);border-color:var(--bad)}

.swipearrows{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:space-between;
  padding:0 8px;pointer-events:none;color:var(--dim);font-size:15px;opacity:.5}
.swipearrows .ar{animation:nudge 1.6s ease-in-out infinite}
.swipearrows .ar.r{animation-delay:.8s}
@keyframes nudge{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(4px);opacity:.7}}
.swipearrows .ar.l{animation-name:nudgeL}
@keyframes nudgeL{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(-4px);opacity:.7}}

/* choice hint text appearing while dragging */
.choicehint{position:absolute;top:50%;transform:translateY(-50%);max-width:34vw;
  font-weight:800;font-size:16px;line-height:1.3;opacity:0;transition:opacity .12s;pointer-events:none;z-index:1}
.choicehint.left {left:14px;text-align:left;color:#ff9c8f}
.choicehint.right{right:14px;text-align:right;color:#9fe6b4}

/* ---------- actions ---------- */
#actions{flex:0 0 auto;display:flex;gap:12px;padding:10px 16px max(12px,env(safe-area-inset-bottom))}
.actbtn{flex:1;min-width:0;padding:14px 12px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--txt);font-size:14px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;line-height:1.25;
  transition:transform .08s,background .15s}
.actbtn:active{transform:scale(.97)}
#btnL{border-color:rgba(255,108,90,.4)}#btnL .alab{color:#ffb3a8}
#btnR{border-color:rgba(95,207,134,.4)}#btnR .alab{color:#aef0c4}
.actbtn .alab{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);
  background:rgba(20,12,30,.94);border:1px solid rgba(232,196,99,.3);color:#f2ead9;
  padding:10px 16px;border-radius:12px;font-size:13.5px;font-weight:600;max-width:84vw;text-align:center;
  z-index:40;opacity:0;transition:opacity .25s,transform .25s;box-shadow:0 10px 30px rgba(0,0,0,.5);pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(8,4,12,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.overlay[hidden]{display:none}
.obox{width:100%;max-width:380px;max-height:90vh;overflow:auto;
  background:linear-gradient(170deg,#241634,#160d20);color:var(--txt);
  border:1px solid rgba(232,196,99,.3);border-radius:20px;padding:24px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);text-align:center}
.obox h1{font-size:23px;margin:0 0 4px;color:var(--gold2);letter-spacing:-.02em}
.obox h2{font-size:19px;margin:0 0 12px;color:var(--gold2)}
.obox .crest{font-size:60px;line-height:1;margin:4px 0 10px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.obox .lead{font-size:14px;color:var(--dim);line-height:1.6;margin:0 0 6px}
.obox .deathline{font-size:15px;color:#ffb3a8;font-weight:700;line-height:1.5;margin:10px 0}
.obox .statline{font-size:14px;color:#ece3f4;line-height:1.7;margin:12px 0;font-variant-numeric:tabular-nums}
.obox .statline b{color:var(--gold2);font-size:18px}
.obox .relics{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0}
.obox .relics span{font-size:12px;background:rgba(232,196,99,.12);border:1px solid rgba(232,196,99,.3);
  border-radius:20px;padding:4px 10px;color:var(--gold2)}
.bigbtn{display:block;width:100%;margin:14px 0 0;padding:15px;border:0;border-radius:14px;cursor:pointer;
  font-size:16px;font-weight:800;color:#1a1020;
  background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 8px 22px rgba(232,196,99,.3)}
.bigbtn:active{transform:scale(.98)}
.bigbtn.ghost{background:transparent;color:var(--dim);box-shadow:none;border:1px solid var(--line);font-weight:700;font-size:14px}

.startpick{display:flex;flex-direction:column;gap:9px;margin:14px 0 4px;text-align:left}
.startpick .opt{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;transition:.12s}
.startpick .opt:active{transform:scale(.99)}
.startpick .opt.sel{border-color:var(--gold);background:rgba(232,196,99,.1)}
.startpick .opt .e{font-size:30px;flex:0 0 auto}
.startpick .opt .tx{min-width:0}
.startpick .opt .tx b{display:block;font-size:14.5px;color:var(--gold2)}
.startpick .opt .tx small{display:block;font-size:12px;color:var(--dim);line-height:1.45;margin-top:2px}

.helpbox{text-align:left}
.helpbox h2{text-align:center}
.helpbox ul{margin:0;padding-left:18px}
.helpbox li{font-size:13.5px;line-height:1.65;color:#ddd2ea;margin-bottom:8px}
.helpbox b{color:var(--gold2)}

/* relics ribbon during play */
#relicbar{position:fixed;left:8px;bottom:max(76px,calc(env(safe-area-inset-bottom) + 70px));z-index:30;
  display:flex;flex-direction:column;gap:5px;pointer-events:none}
#relicbar span{font-size:18px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  background:rgba(232,196,99,.12);border:1px solid rgba(232,196,99,.3);border-radius:9px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center}

@media (max-height:680px){
  #meters{padding-top:8px}.mtrack{height:74px}
  .portrait{width:88px;height:88px}.portrait .pemoji{font-size:46px}
  .dilemma{font-size:14px}
}