/* ============================================================
   ALIVE - "Loomlight" visual system
   Warm pressed paper, ink linework, indigo night, ember accents.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --paper:        #efe4cf;
  --paper-2:      #e5d7bd;
  --ink:          #241d19;
  --ink-soft:     #4b3d33;

  --night:        #171a2b;
  --night-2:      #1e2238;
  --night-3:      #2a2f4a;
  --night-line:   #3b4165;

  --ember:        #d9622b;
  --gold:         #e0a836;
  --moss:         #6f8f4f;
  --blood:        #a8322c;
  --violet:       #7d6bb0;
  --bone:         #f3ead9;

  --ui-font: 'Inter', system-ui, sans-serif;
  --display: 'Cormorant Garamond', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --shadow-lift: 0 2px 0 rgba(0,0,0,.28), 0 10px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--night);
  color:var(--paper);
  font-family:var(--ui-font);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
.hidden{display:none !important}
canvas{display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- shared paper grain overlay ---------- */
.paper-grain{
  position:fixed;inset:0;pointer-events:none;z-index:900;
  opacity:.14;mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}
.paper-grain::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.5) 100%);
  mix-blend-mode:multiply;opacity:.7;
}

/* ============================================================
   TITLE SCREEN
   ============================================================ */
.screen{position:fixed;inset:0;z-index:500;overflow:hidden}
#titleCanvas{position:absolute;inset:0;width:100%;height:100%}
.title-inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  padding:24px;
}
.title-mark{text-align:center}
.game-title{
  font-family:var(--display);
  font-size:clamp(66px,12vw,152px);
  font-weight:700;letter-spacing:.30em;
  color:var(--bone);
  text-shadow:0 0 44px rgba(224,168,54,.22), 0 6px 30px rgba(0,0,0,.7);
  padding-left:.30em;
  line-height:.95;
}
.title-rule{
  width:min(560px,72vw);height:2px;margin:14px auto 12px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.7;
}
.tagline{
  font-family:var(--display);font-style:italic;
  font-size:clamp(15px,1.9vw,22px);
  color:#d9cbb1;letter-spacing:.04em;
}

.setup-card{
  width:min(560px,94vw);
  background:linear-gradient(180deg, rgba(30,34,56,.94), rgba(19,22,38,.96));
  border:1px solid var(--night-line);
  border-radius:14px;
  padding:22px 22px 18px;
  box-shadow:var(--shadow-lift);
  backdrop-filter:blur(6px);
}
.setup-row{margin-bottom:16px}
.setup-row > label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#8d8bb0;margin-bottom:8px;
}
.seed-wrap{display:flex;gap:8px}
#seedInput{
  flex:1;background:rgba(18,20,34,.5);border:1px solid var(--night-line);border-radius:8px;
  color:var(--gold);font-family:var(--mono);font-size:14px;letter-spacing:.12em;
  padding:9px 12px;outline:none;
}
#seedInput:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(224,168,54,.13)}
.mini-btn{
  width:38px;border:1px solid var(--night-line);border-radius:8px;background:#191d31;
  font-size:17px;color:#b9b4d8;transition:.15s;
}
.mini-btn:hover{background:#232842;color:var(--gold);transform:rotate(90deg)}

.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:500;
  background:#181c2e;border:1px solid var(--night-line);color:#a9a5c6;transition:.15s;
}
.chip:hover{background:#222842;color:#e2dcf5}
.chip.active{background:linear-gradient(180deg,#3a3050,#2a2440);border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 2px rgba(224,168,54,.12)}

.preset-note{margin-top:7px;font-size:11px;color:#7f7ba0;font-style:italic;line-height:1.45}
.begin-btn{
  width:100%;margin-top:6px;padding:15px;border-radius:10px;
  font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:.10em;
  color:#1b1408;
  background:linear-gradient(180deg,#f0bb55,#d2902a);
  box-shadow:0 3px 0 #8f5d16, 0 10px 24px rgba(210,144,42,.28);
  transition:.12s;
}
.begin-btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.begin-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8f5d16}
.disclaimer{
  text-align:center;margin-top:12px;font-size:11.5px;color:#736f92;
  font-style:italic;letter-spacing:.03em;
}

/* ============================================================
   GAME SHELL
   ============================================================ */
#game{position:fixed;inset:0;display:flex;flex-direction:column}

#topbar{
  height:56px;flex:0 0 56px;display:flex;align-items:center;gap:16px;padding:0 14px;
  background:linear-gradient(180deg,#1d2137,#151827);
  border-bottom:1px solid var(--night-line);
  z-index:20;
}
.brand{
  font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:.24em;
  color:var(--gold);padding-left:.24em;cursor:pointer;flex:0 0 auto;
  text-shadow:0 0 22px rgba(224,168,54,.28);
}
.brand:hover{filter:brightness(1.15)}

.clock-cluster,.weather-cluster{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.sky-dial{width:46px;height:46px;border-radius:50%;overflow:hidden;border:1px solid var(--night-line);box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
.clock-text{line-height:1.25}
.clock-text > div:first-child{font-family:var(--mono);font-size:15px;font-weight:600;color:#efe7d4}
.clock-text > div:last-child{font-size:10.5px;color:#8b86ab;letter-spacing:.04em;white-space:nowrap}
.wx-icon{width:34px;height:34px;display:grid;place-items:center;font-size:21px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}

.stat-cluster{display:flex;gap:4px;margin-left:auto;flex-wrap:nowrap}
.stat{
  min-width:54px;text-align:center;padding:5px 8px;border-radius:8px;
  background:rgba(18,21,36,.5);border:1px solid #2b3050;
}
.stat .sv{display:block;font-family:var(--mono);font-size:15px;font-weight:600;color:#f0e6d2;transition:.2s}
.stat .sl{display:block;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:#7c789c;margin-top:1px}
.stat.flash .sv{color:var(--gold);text-shadow:0 0 12px rgba(224,168,54,.6);transform:scale(1.14)}

.speed-cluster{display:flex;gap:4px;align-items:center;flex:0 0 auto}
.spd,.icon-btn{
  min-width:36px;height:32px;padding:0 9px;border-radius:7px;
  background:#181c2e;border:1px solid var(--night-line);color:#a29dc2;
  font-size:12px;font-weight:600;transition:.12s;
}
.spd:hover,.icon-btn:hover{background:#252b45;color:#e6e0f7}
.spd.active{background:linear-gradient(180deg,#3a3050,#2a2440);border-color:var(--gold);color:var(--gold)}
.icon-btn.off{opacity:.4}

/* ---------- stage ---------- */
#stage{flex:1;display:flex;min-height:0}
#viewport{position:relative;flex:1;min-width:0;overflow:hidden;background:#0d1018;cursor:grab}
#viewport.dragging{cursor:grabbing}
#world{position:absolute;inset:0;width:100%;height:100%}

#viewTools{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:8}
.vt{
  width:34px;height:34px;border-radius:8px;font-size:14px;
  background:rgba(21,26,44,.8);border:1px solid #333a5c;color:#b6b0d4;
  backdrop-filter:blur(4px);transition:.12s;
}
.vt:hover{background:#252b45;color:var(--gold);border-color:var(--gold)}
.vt.on{background:#3a3050;color:var(--gold);border-color:var(--gold)}

#hoverTip{
  position:absolute;z-index:12;pointer-events:none;
  background:rgba(15,18,32,.95);border:1px solid #3a4066;border-radius:8px;
  padding:7px 10px;font-size:11.5px;line-height:1.45;max-width:230px;
  box-shadow:0 8px 22px rgba(0,0,0,.55);
}
#hoverTip .ht-name{font-weight:700;color:var(--gold);font-size:12.5px}
#hoverTip .ht-sub{color:#9a95bb;font-size:10.5px;margin-bottom:3px}
#hoverTip .ht-do{color:#dcd5f0;font-style:italic}

/* ---------- toasts ---------- */
#toastLayer{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:14;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(560px,80%)}
.toast{
  background:rgba(16,19,34,.95);border:1px solid #3d4470;border-left:4px solid var(--gold);
  border-radius:9px;padding:9px 15px;font-size:13px;color:#eee6d6;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  animation:toastIn .45s cubic-bezier(.2,1.2,.3,1) both;
  text-align:center;
}
.toast b{color:var(--gold)}
.toast.war{border-left-color:var(--blood);color:#ffd9d3}
.toast.war b{color:#ff9d92}
.toast.love{border-left-color:#e07ba0}
.toast.love b{color:#ffaecb}
.toast.build{border-left-color:var(--moss)}
.toast.faith{border-left-color:var(--violet)}
.toast.death{border-left-color:#6f7c93}
.toast.fade{animation:toastOut .5s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* ---------- epic banner ---------- */
#bannerLayer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:16}
.epic-banner{
  text-align:center;animation:epicIn .8s cubic-bezier(.15,1.1,.3,1) both;
  padding:26px 54px;
  background:radial-gradient(ellipse at center, rgba(10,10,20,.86), rgba(10,10,20,0) 72%);
}
.epic-banner .eb-kicker{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.epic-banner .eb-title{
  font-family:var(--display);font-size:clamp(32px,5.2vw,62px);font-weight:700;
  color:#fff6e2;letter-spacing:.06em;text-shadow:0 0 40px rgba(224,168,54,.55),0 6px 26px #000;
}
.epic-banner .eb-sub{font-family:var(--display);font-style:italic;font-size:19px;color:#d9cdb4;margin-top:6px}
.epic-banner.fade{animation:epicOut .9s ease forwards}
@keyframes epicIn{from{opacity:0;transform:scale(.86) translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes epicOut{to{opacity:0;transform:scale(1.06);filter:blur(4px)}}

#cinemaBars .bar{position:absolute;left:0;right:0;height:7%;background:#000;z-index:15;transition:height .6s}
#cinemaBars .bar.top{top:0}
#cinemaBars .bar.bottom{bottom:0}

/* ============================================================
   SIDEBAR
   ============================================================ */
#sidebar{
  flex:0 0 348px;display:flex;flex-direction:column;min-height:0;
  background-color:#12152a;
  border-left:1px solid var(--night-line);
}
.tabs{display:flex;flex:0 0 auto;border-bottom:1px solid var(--night-line);background:#161a2b}
.tab{
  flex:1;padding:11px 4px;font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#75718f;border-bottom:2px solid transparent;transition:.12s;
}
.tab:hover{color:#c2bce0}
.tab.active{color:var(--gold);border-bottom-color:var(--gold);background:#1c2136}
.tabpane{display:none;flex:1;min-height:0;flex-direction:column}
.tabpane.active{display:flex}

.filter-row{display:flex;gap:5px;padding:8px 9px;flex-wrap:wrap;border-bottom:1px solid #232845;flex:0 0 auto}
.fchip{
  padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  background:#191e31;border:1px solid #2c3252;color:#8e89ae;transition:.12s;
}
.fchip:hover{color:#ded8f5}
.fchip.active{background:#31294a;border-color:var(--gold);color:var(--gold)}

#feed,#chronicle,#tribeList,#soulCard{flex:1;overflow-y:auto;padding:8px 9px 40px}
#feed::-webkit-scrollbar,#chronicle::-webkit-scrollbar,#tribeList::-webkit-scrollbar,#soulCard::-webkit-scrollbar{width:8px}
#feed::-webkit-scrollbar-thumb,#chronicle::-webkit-scrollbar-thumb,#tribeList::-webkit-scrollbar-thumb,#soulCard::-webkit-scrollbar-thumb{background:#2f3556;border-radius:4px}
#feed::-webkit-scrollbar-track,#chronicle::-webkit-scrollbar-track{background:#0f1220}

.evt{
  display:flex;gap:8px;padding:7px 8px;margin-bottom:5px;border-radius:8px;
  background:#171b2d;border-left:3px solid #3a4066;
  font-size:12.2px;line-height:1.45;color:#cfc9e2;
  animation:evtIn .32s ease both;
}
.evt:hover{background:#1f2540}
.evt .ei{flex:0 0 17px;font-size:14px;line-height:1.25;text-align:center}
.evt .et b{color:#f0e3c6;font-weight:600}
.evt .ez{display:block;font-size:9.5px;color:#6f6b8c;font-family:var(--mono);margin-top:2px;letter-spacing:.04em}
.evt.clickable{cursor:pointer}
.evt.clickable:hover{border-left-color:var(--gold)}
@keyframes evtIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.evt.life{border-left-color:#5f9e6a}
.evt.build{border-left-color:var(--moss)}
.evt.war{border-left-color:var(--blood);background:#241a1d}
.evt.love{border-left-color:#d0709b}
.evt.faith{border-left-color:var(--violet)}
.evt.death{border-left-color:#66708a;background:#161a26}
.evt.big{background:linear-gradient(90deg,#2b2440,#171b2d);border-left-color:var(--gold)}
.evt.big .et b{color:var(--gold)}

.empty-note{padding:40px 22px;text-align:center;color:#6d6a8b;font-size:13px;font-style:italic;line-height:1.7}
.empty-note span{font-size:11px;opacity:.7}

/* ---------- soul card ---------- */
.soul-head{display:flex;gap:11px;align-items:center;padding:4px 2px 12px;border-bottom:1px solid #262b48;margin-bottom:10px}
.soul-portrait{width:64px;height:64px;border-radius:11px;background:#0e1120;border:1px solid #333a5c;flex:0 0 auto;overflow:hidden}
.soul-id h3{font-family:var(--display);font-size:23px;font-weight:600;color:#f4ead6;line-height:1.1}
.soul-id .sid-sub{font-size:11px;color:#918cb2;margin-top:2px}
.soul-id .sid-tribe{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.08em}

.soul-sec{margin-bottom:13px}
.soul-sec h4{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#6f6b8f;
  margin-bottom:6px;border-bottom:1px solid #22273f;padding-bottom:4px;
}
.thought{
  background:#1b1f34;border:1px solid #2d3352;border-radius:9px;padding:9px 11px;
  font-family:var(--display);font-style:italic;font-size:14.5px;color:#e7ddc6;line-height:1.5;
}
.thought::before{content:"\201C";color:var(--gold);font-size:19px;margin-right:1px}
.thought::after{content:"\201D";color:var(--gold);font-size:19px;margin-left:1px}

.bar-row{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:10.5px}
.bar-row .bl{flex:0 0 62px;color:#8e8aad;letter-spacing:.03em}
.bar-row .bt{display:block;flex:1;height:7px;border-radius:4px;background:#0f1222;overflow:hidden;border:1px solid #262b44}
.bar-row .bf{display:block;height:100%;border-radius:3px;transition:width .3s}
.bar-row .bn{flex:0 0 26px;text-align:right;font-family:var(--mono);color:#8e8aad;font-size:9.5px}

.trait-grid{display:flex;flex-wrap:wrap;gap:5px}
.trait{padding:3px 9px;border-radius:6px;font-size:10.5px;font-weight:600;background:#22273f;color:#bdb6da;border:1px solid #2f3556}
.trait.hi{background:#2f2a45;color:var(--gold);border-color:#5b4b2b}
.trait.lo{background:#241f2f;color:#8d86a8}

.rel-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;font-size:11.5px;cursor:pointer}
.rel-row:hover{background:#1e2338}
.rel-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.rel-name{flex:1;color:#ddd6ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel-kind{font-size:9.5px;color:#8a85aa;letter-spacing:.05em;text-transform:uppercase}
.rel-val{font-family:var(--mono);font-size:10px;width:32px;text-align:right}

.mem-item{font-size:11.5px;color:#a8a2c4;padding:4px 0;border-bottom:1px dashed #23283f;line-height:1.4}
.mem-item:last-child{border-bottom:none}
.mem-item .mt{color:#6d6a8b;font-family:var(--mono);font-size:9.5px}

/* ---------- tribes ---------- */
.tribe-card{
  background:#171b2d;border:1px solid #2a3050;border-radius:10px;padding:11px 12px;margin-bottom:9px;
  border-left-width:4px;border-left-style:solid;
}
.tribe-card h3{font-family:var(--display);font-size:19px;font-weight:600;color:#f2e8d3;letter-spacing:.02em}
.tribe-card .tc-sub{font-size:10.5px;color:#8b86ab;margin-top:1px;margin-bottom:8px}
.tc-stats{display:flex;gap:11px;flex-wrap:wrap;font-size:11px;color:#b4aed2;margin-bottom:7px}
.tc-stats b{color:#f0e5cd;font-family:var(--mono)}
.tc-vals{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.tc-war{font-size:11px;color:#e39089;background:#2a1b1d;border:1px solid #4a2a2a;border-radius:6px;padding:5px 8px;margin-top:4px}
.tc-ally{font-size:11px;color:#8fd0a0;background:#1a2a20;border:1px solid #2a4a34;border-radius:6px;padding:5px 8px;margin-top:4px}
.tc-leader{font-size:11.5px;color:#d9d1ef;margin-bottom:6px}
.tc-leader span{color:var(--gold);font-weight:600}

/* ---------- chronicle ---------- */
.chron-era{
  font-family:var(--display);font-size:15px;color:var(--gold);letter-spacing:.16em;
  text-transform:uppercase;margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid #33395c;
}
.chron-item{
  position:relative;padding:0 0 12px 18px;border-left:2px solid #2b3152;margin-left:5px;
  font-size:12.2px;color:#c9c3df;line-height:1.5;
}
.chron-item::before{
  content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px rgba(224,168,54,.6);
}
.chron-item .ct{display:block;font-family:var(--mono);font-size:9.5px;color:#6f6b8c;margin-bottom:2px;letter-spacing:.05em}
.chron-item b{color:#f2e6cc}

@media (max-width:1180px){
  #sidebar{flex-basis:300px}
  .stat-cluster .stat:nth-child(n+4){display:none}
}

/* ---------- controls card ---------- */
#helpCard{
  position:absolute;left:56px;bottom:12px;z-index:9;width:262px;
  background:rgba(16,19,34,.95);border:1px solid #3a4066;border-radius:10px;
  padding:13px 15px;box-shadow:0 12px 34px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  animation:helpIn .2s ease both;
}
@keyframes helpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#helpCard h4{
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:9px;
}
#helpCard dl{display:grid;grid-template-columns:74px 1fr;gap:4px 8px;font-size:11.5px}
#helpCard dt{color:#f0e3c6;font-weight:600;font-family:var(--mono);font-size:10.5px}
#helpCard dd{color:#a9a3c4}
#helpCard p{
  margin-top:11px;padding-top:9px;border-top:1px solid #2a3050;
  font-size:11px;font-style:italic;color:#7f7ba0;line-height:1.45;
}

.tc-status{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.tcs{
  padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.tcs.warn{background:#3a2f1c;color:#e0b45c;border:1px solid #5c4826}
.tcs.bad{background:#3a1d1d;color:#e88a80;border:1px solid #5e2c2c}

/* the setup card grew; never let it clip off a short screen */
.title-inner{overflow-y:auto;overflow-x:hidden}
@media (max-height:820px){
  .title-inner{justify-content:flex-start;padding-top:18px;gap:16px}
  .game-title{font-size:clamp(48px,8vw,86px)}
  .title-rule{margin:9px auto 7px}
  .tagline{font-size:15px}
  .setup-row{margin-bottom:11px}
  .setup-card{padding:16px 18px 14px}
  .begin-btn{padding:12px;font-size:20px}
}
@media (max-height:660px){
  .game-title{font-size:40px;letter-spacing:.22em}
  .tagline{display:none}
  .preset-note{display:none}
}