/* ============================================================
   Chakravartin — Song of the Seven Rivers
   Global stylesheet.  Palette drawn from Indus-valley material
   culture: terracotta, sandstone, ochre, indigo, turmeric,
   madder-red, bronze, peepal-green, river-blue.
   ============================================================ */
@import url("../assets/font/font.css");

:root{
  --ink:        #120c07;
  --ink-2:      #1d1409;
  --terracotta: #a8492b;
  --terracotta-d:#6f2c19;
  --sandstone:  #d9bd8f;
  --sand-d:     #a48a5f;
  --ochre:      #c98b30;
  --gold:       #e8b449;
  --gold-l:     #f7d98b;
  --indigo:     #2c3d6b;
  --indigo-l:   #4e6aa8;
  --turmeric:   #e2a72c;
  --madder:     #8e2b2b;
  --peepal:     #4f7a3a;
  --river:      #3f8ea8;
  --bronze:     #8a6a34;
  --bone:       #efe3cd;

  --ui-scale: 1;
  --panel-bg: linear-gradient(180deg, rgba(26,17,9,.97), rgba(15,10,5,.98));
  --panel-border: 3px solid var(--bronze);
  --shadow: 0 6px 0 rgba(0,0,0,.45), 0 0 0 3px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ width:100%; height:100%; overflow:hidden; background:#080503; }
body{
  font-family:"Chakra", ui-monospace, "DejaVu Sans Mono", monospace;
  -webkit-font-smoothing:none; font-smooth:never;
  color:var(--bone);
  user-select:none; -webkit-user-select:none;
  touch-action:none;
  letter-spacing:0;
}
.hidden{ display:none !important; }
b{ color:var(--gold); font-weight:normal; }
i{ font-style:normal; }

/* ---------- viewport & canvas ---------- */
#viewport{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#080503; }
#scene{ image-rendering:pixelated; image-rendering:crisp-edges; display:block; }
#fx-vignette{
  position:fixed; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
#fx-flash{ position:fixed; inset:0; pointer-events:none; background:#fff; opacity:0; }

/* ---------- ui root ---------- */
#ui-root{ position:fixed; inset:0; pointer-events:none; font-size:16px; }
#ui-root > *{ pointer-events:none; }
.clickable{ pointer-events:auto; cursor:pointer; }

/* ornamental frame used by panels */
.panel{
  background:var(--panel-bg);
  border:var(--panel-border);
  box-shadow:var(--shadow);
  position:relative;
  padding:14px 18px;
}
.panel::before,.panel::after{
  content:""; position:absolute; width:10px; height:10px; background:var(--gold);
  clip-path:polygon(0 0,100% 0,0 100%);
}
.panel::before{ left:-3px; top:-3px; }
.panel::after{ right:-3px; bottom:-3px; transform:rotate(180deg); }
.panel-title{
  color:var(--gold); font-size:16px; letter-spacing:1px; text-transform:uppercase;
  border-bottom:2px solid rgba(138,106,52,.6); padding-bottom:6px; margin-bottom:10px;
}

/* ---------- boot ---------- */
#boot{ position:fixed; inset:0; background:#0b0703; display:flex; align-items:center; justify-content:center; z-index:50; transition:opacity .6s; }
#boot.gone{ opacity:0; pointer-events:none; }
.boot-inner{ text-align:center; }
.boot-wheel{
  width:96px;height:96px;margin:0 auto 22px;border-radius:50%;
  border:4px solid var(--gold); position:relative; animation:spin 9s linear infinite;
}
.boot-wheel::before{
  content:"";position:absolute;inset:12px;border-radius:50%;border:3px solid rgba(232,180,73,.45);
}
.boot-wheel::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 8%, var(--gold) 8% 9%, transparent 9% 16%, var(--gold) 16% 17%, transparent 17% 25%, var(--gold) 25% 26%, transparent 26% 33%, var(--gold) 33% 34%, transparent 34% 41%, var(--gold) 41% 42%, transparent 42% 50%, var(--gold) 50% 51%, transparent 51% 58%, var(--gold) 58% 59%, transparent 59% 66%, var(--gold) 66% 67%, transparent 67% 75%, var(--gold) 75% 76%, transparent 76% 83%, var(--gold) 83% 84%, transparent 84% 91%, var(--gold) 91% 92%, transparent 92%);
  -webkit-mask:radial-gradient(circle, transparent 52%, #000 53%);
          mask:radial-gradient(circle, transparent 52%, #000 53%);
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.boot-text{ color:var(--sandstone); font-size:16px; margin-bottom:14px; }
.boot-bar{ width:260px;height:10px;border:2px solid var(--bronze);margin:0 auto;background:#150e07; }
.boot-bar i{ display:block;height:100%;width:0;background:linear-gradient(90deg,var(--terracotta),var(--gold)); transition:width .25s; }

/* ---------- title screen ---------- */
#title-screen{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; transition:opacity .8s; }
#title-screen.gone{ opacity:0; pointer-events:none; }
.title-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(168,73,43,.45), transparent 60%),
    radial-gradient(ellipse at 50% -10%, rgba(232,180,73,.20), transparent 55%),
    linear-gradient(180deg,#0d0a12 0%, #1a1109 55%, #2a1a0c 100%);
}
.title-inner{ position:relative; text-align:center; padding:24px; max-width:860px; }
.title-mandala{
  width:210px;height:210px;margin:0 auto 8px;border-radius:50%;
  border:3px solid rgba(232,180,73,.75); position:relative; animation:spin 60s linear infinite;
  box-shadow:0 0 40px rgba(232,180,73,.25), inset 0 0 30px rgba(232,180,73,.18);
}
.title-mandala::before{ content:"";position:absolute;inset:24px;border-radius:50%;border:2px solid rgba(232,180,73,.45); }
.title-mandala::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 5.5%, rgba(232,180,73,.9) 5.5% 6.5%, transparent 6.5% 13.8%, rgba(232,180,73,.9) 13.8% 14.8%, transparent 14.8% 22.1%, rgba(232,180,73,.9) 22.1% 23.1%, transparent 23.1% 30.4%, rgba(232,180,73,.9) 30.4% 31.4%, transparent 31.4% 38.7%, rgba(232,180,73,.9) 38.7% 39.7%, transparent 39.7% 47%, rgba(232,180,73,.9) 47% 48%, transparent 48% 55.3%, rgba(232,180,73,.9) 55.3% 56.3%, transparent 56.3% 63.6%, rgba(232,180,73,.9) 63.6% 64.6%, transparent 64.6% 71.9%, rgba(232,180,73,.9) 71.9% 72.9%, transparent 72.9% 80.2%, rgba(232,180,73,.9) 80.2% 81.2%, transparent 81.2% 88.5%, rgba(232,180,73,.9) 88.5% 89.5%, transparent 89.5% 96.8%, rgba(232,180,73,.9) 96.8% 97.8%, transparent 97.8%);
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 61%);
          mask:radial-gradient(circle, transparent 60%, #000 61%);
}
.title-main{
  font-size:48px; letter-spacing:10px; color:var(--gold);
  text-shadow:0 4px 0 #5a3a12, 0 0 26px rgba(232,180,73,.45);
  margin-bottom:4px;
}
.title-sub{ font-size:16px; letter-spacing:5px; color:var(--sandstone); font-weight:normal; margin-bottom:18px; }
.title-tag{ font-size:16px; color:#c9b795; margin:0 auto 26px; max-width:620px; line-height:1.7; }
.title-menu{ display:flex; flex-direction:column; gap:10px; align-items:center; margin-bottom:26px; }
.title-btn{
  pointer-events:auto; cursor:pointer; min-width:280px; padding:12px 18px;
  background:linear-gradient(180deg, rgba(45,29,14,.95), rgba(24,15,7,.97));
  border:2px solid var(--bronze); color:var(--bone); font-size:16px; letter-spacing:2px;
  font-family:inherit; transition:transform .08s, border-color .12s, color .12s;
}
.title-btn:hover,.title-btn.sel{ border-color:var(--gold); color:var(--gold-l); transform:translateY(-2px); }
.title-btn[disabled]{ opacity:.4; cursor:default; }
.title-hint{ font-size:16px; color:#8d7a5c; margin-bottom:8px; }
.title-credit{ font-size:16px; color:#6c5b42; }

/* ---------- HUD ---------- */
#hud{ position:absolute; inset:0; }
.hud-party{ position:absolute; left:16px; top:16px; display:flex; flex-direction:column; gap:8px; }
.hud-card{
  display:flex; gap:10px; align-items:center;
  background:rgba(16,10,5,.72); border:2px solid rgba(138,106,52,.75);
  padding:6px 10px 6px 6px; min-width:230px;
}
.hud-portrait{ width:40px;height:40px; image-rendering:pixelated; border:2px solid rgba(0,0,0,.5); background:#241708; }
.hud-lines{ flex:1; }
.hud-name{ font-size:16px; color:var(--gold-l); margin-bottom:3px; }
.bar{ height:8px; background:#241708; border:1px solid #000; margin-bottom:3px; position:relative; overflow:hidden; }
.bar i{ display:block; height:100%; transition:width .25s; }
.bar.hp i{ background:linear-gradient(90deg,#c0392b,#e35d4b); }
.bar.mp i{ background:linear-gradient(90deg,#2f6ea8,#57a8d8); }
.bar.tapas i{ background:linear-gradient(90deg,#b3701d,#f0c14b); }
.hud-num{ font-size:16px; color:#b9a684; }

.hud-topright{ position:absolute; right:16px; top:16px; text-align:right; }
.hud-zone{ font-size:16px; color:var(--gold); letter-spacing:2px; text-shadow:0 2px 0 #000; }
.hud-time{ font-size:16px; color:#a9946d; }
.hud-objective{ margin-top:8px; font-size:16px; color:#cbbb99; max-width:320px; }
.hud-objective b{ color:var(--gold); }

.hud-minimap{ position:absolute; right:16px; bottom:16px; width:150px; height:150px; border:2px solid rgba(138,106,52,.8); background:rgba(10,7,3,.7); image-rendering:pixelated; }

#prompt{
  position:absolute; left:50%; bottom:22%; transform:translateX(-50%);
  background:rgba(16,10,5,.85); border:2px solid var(--gold); padding:8px 16px;
  font-size:16px; color:var(--gold-l); white-space:nowrap;
  animation:bob 1.6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,-4px);} }

/* ---------- dialogue ---------- */
#dialogue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:min(900px, 92vw); pointer-events:auto;
}
.dlg-box{
  background:var(--panel-bg); border:3px solid var(--bronze);
  box-shadow:var(--shadow); padding:16px 20px 18px; position:relative;
}
.dlg-box::before{
  content:""; position:absolute; inset:4px; border:1px solid rgba(232,180,73,.25); pointer-events:none;
}
.dlg-speaker{
  position:absolute; top:-16px; left:22px;
  background:linear-gradient(180deg,var(--terracotta),var(--terracotta-d));
  border:2px solid var(--gold); color:var(--gold-l); font-size:16px; padding:3px 14px; letter-spacing:2px;
}
.dlg-portrait{ float:left; width:88px;height:88px; margin:2px 16px 6px 0; image-rendering:pixelated; border:2px solid rgba(138,106,52,.8); background:#241708; }
.dlg-text{ font-size:16px; line-height:1.85; color:var(--bone); min-height:96px; }
.dlg-text em{ color:var(--gold-l); font-style:normal; }
.dlg-text .s{ color:var(--turmeric); }
.dlg-next{ position:absolute; right:14px; bottom:8px; color:var(--gold); font-size:16px; animation:bob2 1s infinite; }
@keyframes bob2{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(3px);} }
.dlg-choices{ margin-top:12px; display:flex; flex-direction:column; gap:6px; clear:both; }
.dlg-choice{
  pointer-events:auto; cursor:pointer; padding:7px 14px; font-size:16px;
  border:2px solid transparent; background:rgba(0,0,0,.28); color:#cbbb99;
}
.dlg-choice.sel{ border-color:var(--gold); color:var(--gold-l); background:rgba(168,73,43,.28); }
.dlg-choice .tag{ color:var(--peepal); }

/* ---------- battle ---------- */
#battle{ position:absolute; inset:0; }
.btl-enemies{ position:absolute; left:0; right:0; top:8%; display:flex; justify-content:center; gap:26px; }
.btl-enemy{ text-align:center; }
.btl-enemy .nm{ font-size:16px; color:#e0cba4; text-shadow:0 2px 0 #000; }
.btl-enemy .bar{ width:110px; }
.btl-enemy.targeted .nm{ color:var(--gold); }
.btl-enemy.targeted::after{ content:"▼"; display:block; color:var(--gold); font-size:16px; animation:bob2 .8s infinite; }

.btl-party{ position:absolute; left:16px; bottom:16px; display:flex; gap:10px; }
.btl-member{
  background:rgba(16,10,5,.85); border:2px solid rgba(138,106,52,.8); padding:8px 10px; min-width:190px;
}
.btl-member.active{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(232,180,73,.25); }
.btl-member.dead{ opacity:.45; }
.btl-member .nm{ font-size:16px; color:var(--gold-l); margin-bottom:4px; }

.btl-menu{
  position:absolute; right:16px; bottom:16px; width:300px;
  background:var(--panel-bg); border:3px solid var(--bronze); box-shadow:var(--shadow); padding:10px;
}
.btl-cmd{ pointer-events:auto; cursor:pointer; padding:6px 12px; font-size:16px; color:#cbbb99; border:2px solid transparent; display:flex; justify-content:space-between; }
.btl-cmd.sel{ border-color:var(--gold); color:var(--gold-l); background:rgba(168,73,43,.25); }
.btl-cmd .cost{ color:#7fa8c8; }
.btl-cmd.disabled{ opacity:.4; }
.btl-desc{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(138,106,52,.5); font-size:16px; color:#a99169; min-height:34px; }

.btl-banner{
  position:absolute; left:50%; top:38%; transform:translate(-50%,-50%);
  font-size:32px; letter-spacing:8px; color:var(--gold);
  text-shadow:0 4px 0 #000, 0 0 24px rgba(232,180,73,.6); white-space:nowrap;
}
.btl-timing{
  position:absolute; left:50%; bottom:34%; transform:translateX(-50%);
  width:280px; height:20px; border:2px solid var(--gold); background:rgba(0,0,0,.6);
}
.btl-timing .zone{ position:absolute; top:0; bottom:0; background:rgba(79,122,58,.85); }
.btl-timing .cursor{ position:absolute; top:-4px; bottom:-4px; width:4px; background:var(--gold-l); }
.btl-timing .lbl{ position:absolute; left:0; right:0; top:-22px; text-align:center; font-size:16px; color:var(--gold); }

.dmg-float{
  position:absolute; font-size:16px; color:#fff; text-shadow:0 2px 0 #000, 0 0 8px #000;
  animation:floatup 1.1s ease-out forwards; pointer-events:none; white-space:nowrap;
}
.dmg-float.crit{ color:#ffd86b; font-size:32px; }
.dmg-float.heal{ color:#8ce07a; }
.dmg-float.miss{ color:#bbb; }
.dmg-float.weak{ color:#ff9a4a; }
@keyframes floatup{ 0%{ transform:translate(-50%,0) scale(.6); opacity:0;} 15%{ transform:translate(-50%,-16px) scale(1.15); opacity:1;} 100%{ transform:translate(-50%,-62px) scale(1); opacity:0;} }

/* ---------- menu ---------- */
#menu{ position:absolute; inset:0; background:rgba(6,4,2,.82); pointer-events:auto; display:flex; }
.menu-wrap{ margin:auto; width:min(1000px,94vw); height:min(680px,92vh); display:flex; gap:14px; }
.menu-tabs{ width:190px; display:flex; flex-direction:column; gap:6px; }
.menu-tab{
  cursor:pointer; padding:11px 14px; font-size:16px; letter-spacing:2px; color:#a99169;
  background:linear-gradient(180deg, rgba(40,26,12,.9), rgba(20,13,6,.95)); border:2px solid rgba(138,106,52,.6);
}
.menu-tab.sel{ color:var(--gold-l); border-color:var(--gold); background:linear-gradient(180deg, rgba(90,48,20,.9), rgba(40,22,10,.95)); }
.menu-body{ flex:1; background:var(--panel-bg); border:3px solid var(--bronze); box-shadow:var(--shadow); padding:18px; overflow:auto; }
.menu-body::-webkit-scrollbar{ width:10px; }
.menu-body::-webkit-scrollbar-thumb{ background:var(--bronze); }
.menu-body h3{ color:var(--gold); font-size:16px; letter-spacing:2px; margin-bottom:12px; font-weight:normal; text-transform:uppercase; border-bottom:1px solid rgba(138,106,52,.5); padding-bottom:6px; }
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.item-row{ cursor:pointer; display:flex; justify-content:space-between; padding:7px 10px; border:2px solid transparent; font-size:16px; color:#cbbb99; background:rgba(0,0,0,.22); }
.item-row.sel{ border-color:var(--gold); color:var(--gold-l); }
.item-row .qty{ color:#8d7a5c; }
.char-panel{ display:flex; gap:16px; align-items:flex-start; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(138,106,52,.35); }
.char-portrait{ width:120px;height:120px; image-rendering:pixelated; border:2px solid rgba(138,106,52,.8); background:#241708; }
.stat-line{ display:flex; justify-content:space-between; font-size:16px; color:#cbbb99; padding:2px 0; }
.stat-line b{ color:var(--gold-l); }
.quest-card{ border-left:4px solid var(--gold); padding:10px 14px; margin-bottom:12px; background:rgba(0,0,0,.24); }
.quest-card.done{ border-left-color:var(--peepal); opacity:.7; }
.quest-card .qn{ color:var(--gold-l); font-size:16px; margin-bottom:5px; }
.quest-card .qd{ color:#b6a482; }
.quest-card p{ font-size:16px; color:#b6a482; line-height:1.7; }
.lore-entry{ margin-bottom:14px; }
.lore-entry .lt{ color:var(--gold-l); font-size:16px; }
.lore-entry .lb{ color:#b6a482; font-size:16px; line-height:1.7; }
.slider{ display:flex; align-items:center; gap:12px; font-size:16px; color:#cbbb99; padding:6px 0; }
.slider input{ flex:1; accent-color:var(--gold); }
.opt-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:16px; color:#cbbb99; border-bottom:1px solid rgba(138,106,52,.2); }
.opt-btn{ cursor:pointer; border:2px solid var(--bronze); background:rgba(0,0,0,.3); color:var(--gold-l); padding:4px 12px; font-family:inherit; font-size:16px; }
.opt-btn:hover{ border-color:var(--gold); }

/* ---------- toasts / subtitles ---------- */
#toast-layer{ position:absolute; left:50%; top:14%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background:rgba(16,10,5,.92); border:2px solid var(--gold); padding:8px 20px; font-size:16px; color:var(--gold-l);
  animation:toastin .4s ease-out; box-shadow:0 4px 0 rgba(0,0,0,.5);
}
.toast.quest{ border-color:var(--peepal); color:#b8e0a0; }
.toast.item{ border-color:var(--river); color:#a9dcec; }
@keyframes toastin{ from{ opacity:0; transform:translateY(-14px);} to{ opacity:1; transform:none;} }

#subtitle{
  position:absolute; left:50%; bottom:16%; transform:translateX(-50%);
  text-align:center; max-width:70vw; font-size:16px; color:var(--bone);
  text-shadow:0 2px 0 #000, 0 0 12px #000; line-height:1.8;
}
.chapter-card{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#0a0704; z-index:35; flex-direction:column; gap:12px; transition:opacity 1s;
}
.chapter-card .ck{ font-size:16px; letter-spacing:8px; color:var(--terracotta); }
.chapter-card .ct{ font-size:32px; letter-spacing:6px; color:var(--gold); text-shadow:0 4px 0 #000; }
.chapter-card .cs{ font-size:16px; color:#9c8a6b; max-width:620px; text-align:center; line-height:1.9; }
.chapter-card.gone{ opacity:0; pointer-events:none; }

@media (max-width:860px){
  .title-main{ font-size:34px; letter-spacing:5px; }
  .hud-minimap{ width:104px;height:104px; }
  .btl-menu{ width:220px; }
  .dlg-text{ min-height:70px; }
}


/* ============================================================
   Touch controls — only shown on devices that have a finger.
   A game that can be walked around but not talked to is not a
   game, so the phone build needs real buttons.
   ============================================================ */
#touch{ position:absolute; inset:0; pointer-events:none; }
#touch.on{ display:block; }

#tc-stick{
  position:absolute; left:0; bottom:0; width:50%; height:78%;
  pointer-events:auto; touch-action:none;
}
#tc-stick i{
  position:absolute; width:104px; height:104px; margin:-52px 0 0 -52px;
  border:3px solid rgba(232,180,73,.55); border-radius:50%;
  background:radial-gradient(circle, rgba(232,180,73,.20), rgba(0,0,0,.14) 70%);
  opacity:0; transition:opacity .15s; display:block;
}
#tc-stick.active i{ opacity:1; }

.tc-btn{
  position:absolute; pointer-events:auto; touch-action:none;
  border-radius:50%; border:3px solid var(--bronze);
  background:radial-gradient(circle at 35% 30%, rgba(60,38,18,.92), rgba(20,13,6,.95));
  color:var(--gold-l); font-family:inherit; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 0 rgba(0,0,0,.5); user-select:none;
  transition:transform .06s, border-color .06s, background .06s;
}
.tc-btn:active,.tc-btn.held{
  transform:translateY(3px) scale(.96);
  border-color:var(--gold);
  background:radial-gradient(circle at 35% 30%, rgba(140,74,28,.95), rgba(52,26,10,.95));
}
.tc-a   { right:26px;  bottom:104px; width:82px; height:82px; font-size:32px; }
.tc-b   { right:118px; bottom:46px;  width:62px; height:62px; }
.tc-run { right:26px;  bottom:26px;  width:62px; height:62px; }
.tc-menu{ right:26px;  top:26px;     width:56px; height:56px; }

@media (max-width:520px){
  .tc-a{ width:70px; height:70px; font-size:16px; bottom:92px; }
  .tc-b,.tc-run{ width:54px; height:54px; }
}
/* on a phone the HUD needs to keep clear of the buttons */
body.touch .hud-minimap{ right:auto; left:16px; bottom:16px; width:104px; height:104px; }

/* phone landscape: keep the HUD, the text and the thumbs out of each other's way */
body.touch .hud-topright{ padding-right: 84px; }
body.touch .hud-minimap{ left:16px; top:132px; bottom:auto; width:92px; height:92px; }
body.touch #dialogue{ left:16px; right:auto; transform:none; width:calc(100% - 220px); bottom:16px; }
body.touch .dlg-text{ min-height:60px; }
body.touch #prompt{ bottom:30%; }
body.touch .btl-menu{ right:110px; bottom:96px; }
body.touch .btl-party{ left:16px; bottom:16px; }