/* Island Tribe Manager — shared game theme.
   Extracted from the approved preview (v4). Castaway-chief aesthetic:
   wood + parchment panels, coral/amber accents, mobile-first. */

:root{
  --ocean-deep:#0c2f33;--ocean:#114b4a;--jungle:#1d6b54;
  --leaf:#7fb86b;--leaf-dark:#4f8f4a;
  --parch:#f4e6c8;--parch2:#ecd8b0;
  --bark:#6b4524;--bark2:#8c6239;--rope:#c79a5b;
  --coral:#e8643c;--coral2:#c44a28;--amber:#f0a830;
  --berry:#9c5bb0;--ink:#3a2a1a;--muted:#6a5640;
  --good:#6aa84f;--shadow:rgba(12,30,28,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
html,body{overflow-x:hidden;max-width:100%}
body{
  font-family:'Nunito',sans-serif;color:var(--ink);min-height:100vh;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(127,184,107,.18),transparent 55%),
    linear-gradient(180deg,var(--ocean-deep) 0%,var(--ocean) 45%,var(--jungle) 100%);
  background-attachment:fixed;padding:12px;
}
.shell{max-width:640px;margin:0 auto}

/* ── TOPBAR ── */
.topbar{
  position:relative;
  background:linear-gradient(180deg,var(--bark2),var(--bark));
  border:3px solid #4f3115;border-radius:14px;padding:10px 14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  box-shadow:0 6px 0 #3a2410,0 12px 20px var(--shadow);
  color:#f6ead2;margin-bottom:10px;
}
.topbar::before,.topbar::after{
  content:"";position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9b877,#7a5424);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.5);transform:translateY(-50%);
}
.topbar::before{left:7px}.topbar::after{right:7px}
.crest{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:grid;place-items:center;font-size:22px;
  background:radial-gradient(circle at 40% 30%,#2a8f6b,#114b4a);border:2px solid #0c3330;}
.topbar-id{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:6px}
.topbar-id-text{min-width:0;flex:1 1 auto}
.world-name{font-family:'Lilita One',cursive;font-size:18px;color:#fbf1da;text-shadow:0 2px 0 rgba(0,0,0,.3);line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.world-sub{font-size:10px;color:#e3c89a;font-weight:700;margin-top:2px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
.day-clock{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,.2);border:2px solid #4f3115;border-radius:24px;padding:6px 12px 6px 8px;
  flex:0 0 auto;}
.sun{font-size:16px;display:inline-block;animation:spin 28s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.day-num{font-family:'Lilita One',cursive;font-size:18px;color:#ffe7a6;line-height:1}
.day-lbl{font-size:9px;letter-spacing:1.5px;color:#e3c89a;font-weight:800;text-transform:uppercase}
.pause-btn{
  background:linear-gradient(180deg,#f0a830,#d3851c);border:2px solid #8a5410;
  color:#43280a;font-weight:800;font-family:'Nunito';padding:7px 12px;
  border-radius:24px;cursor:pointer;font-size:12px;
  box-shadow:0 3px 0 #8a5410;transition:transform .08s,box-shadow .08s;
  white-space:nowrap;
}
.pause-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a5410}
.skip-btn{
  background:linear-gradient(180deg,#2a8f6b,#176149);border:2px solid #0c3330;
  color:#eafff4;font-weight:800;font-family:'Nunito';padding:7px 12px;
  border-radius:24px;cursor:pointer;font-size:12px;
  box-shadow:0 3px 0 #0c3330;transition:transform .08s,box-shadow .08s;
  white-space:nowrap;
}
.skip-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #0c3330}
.stats-btn{
  background:linear-gradient(180deg,#4a90c4,#2c618f);border:2px solid #1c3f5c;
  color:#eaf6ff;font-weight:800;font-family:'Nunito';padding:7px 12px;
  border-radius:24px;cursor:pointer;font-size:12px;
  box-shadow:0 3px 0 #1c3f5c;transition:transform .08s,box-shadow .08s;
  white-space:nowrap;
}
.stats-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #1c3f5c}

/* ── DAY PROGRESS ── */
.dpwrap{
  background:linear-gradient(180deg,var(--parch),var(--parch2));
  border:2.5px solid var(--bark);border-radius:12px;padding:9px 12px;margin-bottom:10px;
  box-shadow:0 4px 0 rgba(107,69,36,.4),inset 0 1px 0 rgba(255,255,255,.5);
}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dp-title{font-family:'Lilita One',cursive;font-size:12px;color:var(--ink)}
.dp-time{font-size:10px;font-weight:800;color:var(--muted)}
.dp-bar{height:13px;background:rgba(107,69,36,.18);border-radius:20px;overflow:hidden;position:relative}
.dp-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--amber),var(--coral));transition:width .9s linear;position:relative}
.dp-fill::after{content:"☀️";position:absolute;right:-3px;top:50%;transform:translateY(-50%);font-size:13px}
.dp-phases{display:flex;justify-content:space-between;margin-top:4px}
.dp-phase{font-size:9px;font-weight:800;color:var(--muted)}

/* ── RESOURCES ── */
.resources{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.token{
  background:linear-gradient(180deg,var(--parch),var(--parch2));
  border:2.5px solid var(--bark);border-radius:12px;padding:9px 11px;
  display:flex;align-items:center;gap:9px;position:relative;
  box-shadow:0 4px 0 rgba(107,69,36,.4),inset 0 1px 0 rgba(255,255,255,.5);
}
.token .ic{font-size:20px;flex:0 0 auto}
.token .lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:800}
.token .val{font-family:'Lilita One',cursive;font-size:17px;color:var(--ink);line-height:1.1}
.token .val .cap{font-size:12px;color:var(--ink);font-weight:800;font-family:'Nunito',sans-serif}
.token .bar{height:4px;border-radius:6px;background:rgba(107,69,36,.2);margin-top:4px;overflow:hidden}
.token .fill{height:100%;border-radius:6px}
.token.warn{border-color:var(--coral2);animation:wpulse 1.8s ease-in-out infinite}
@keyframes wpulse{0%,100%{box-shadow:0 4px 0 rgba(196,74,40,.4)}50%{box-shadow:0 4px 0 rgba(196,74,40,.4),0 0 0 3px rgba(232,100,60,.18)}}
.wtag{position:absolute;top:-8px;right:7px;background:var(--coral);color:#fff;font-size:8px;font-weight:800;padding:2px 6px;border-radius:16px}
.token.glow{animation:tokenglow .5s ease}
@keyframes tokenglow{0%{box-shadow:0 4px 0 rgba(107,69,36,.4),0 0 0 0 rgba(106,168,79,.6)}50%{box-shadow:0 4px 0 rgba(107,69,36,.4),0 0 0 4px rgba(106,168,79,.45)}100%{box-shadow:0 4px 0 rgba(107,69,36,.4),0 0 0 0 rgba(106,168,79,0)}}

/* ── PANEL ── */
.panel{
  background:linear-gradient(180deg,var(--parch),var(--parch2));
  border:3px solid var(--bark);border-radius:16px;padding:13px;margin-bottom:10px;
  box-shadow:0 6px 0 rgba(107,69,36,.4),inset 0 1px 0 rgba(255,255,255,.4);
}
.panel-head{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  width:100%;background:none;border:none;padding:0;font:inherit;text-align:left;color:inherit}
.panel-title{font-family:'Lilita One',cursive;font-size:16px;color:var(--ink)}
.count-pill{background:var(--jungle);color:#eafff0;font-weight:800;font-size:11px;padding:2px 9px;border-radius:16px;border:2px solid #0c3a2e}
.panel-toggle{margin-left:auto;font-size:11px;color:var(--muted);font-weight:800;display:flex;align-items:center;gap:4px}
.panel-chevron{font-size:12px;transition:transform .2s}
.panel-body{overflow:hidden;transition:max-height .3s ease}

/* ── TRIBE TABLE ── */
.tribe-table{width:100%;border-collapse:collapse;margin-top:11px}
.tribe-table th{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:800;padding:0 6px 6px;text-align:left}
.tribe-table td{padding:5px 6px;vertical-align:middle;font-size:12px;font-weight:700}
.tribe-table tr:not(:last-child) td{border-bottom:1px solid rgba(107,69,36,.1)}
.tribe-table tr{cursor:pointer;transition:background .1s;border-radius:8px}
.tribe-table tr:hover td{background:rgba(107,69,36,.06)}
.tribe-table tr:hover td:first-child{border-radius:8px 0 0 8px}
.tribe-table tr:hover td:last-child{border-radius:0 8px 8px 0}
.t-ava{font-size:18px;width:28px;text-align:center}
.t-name{font-family:'Lilita One',cursive;font-size:13px}
.t-meta{font-size:10px;color:var(--muted);font-weight:700;margin-top:1px}
.t-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;border:1.5px solid #0c3a2e;background:var(--ocean);color:#dff6ee;white-space:nowrap}
.t-badge.idle{background:#a08a63;border-color:#6b5836;color:#fff}
.t-badge.preg{background:var(--berry);border-color:#6e3a80}
.t-badge.kid{background:var(--leaf-dark);border-color:#2f6b2c}
.t-lv{background:rgba(255,255,255,.22);padding:0 4px;border-radius:4px;font-size:9px}
.hp-bar{width:40px;height:6px;background:rgba(107,69,36,.2);border-radius:6px;overflow:hidden;display:inline-block}
.hp-fill{height:100%;border-radius:6px}
.t-warn{color:var(--coral2);font-size:13px}

/* ── JOURNAL ── */
.journal{
  background:linear-gradient(180deg,#fbf3df,#f3e6c4);
  border:3px solid var(--bark);border-radius:16px;padding:13px;margin-bottom:10px;
  box-shadow:0 6px 0 rgba(107,69,36,.4),inset 0 1px 0 rgba(255,255,255,.5);
}
.journal-head{font-family:'Lilita One',cursive;font-size:15px;color:var(--ink);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.journal-hint{font-size:10px;font-weight:700;color:var(--muted);margin-left:auto}
.jrow{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;cursor:pointer;border:1.5px solid transparent;margin-bottom:4px;transition:background .12s}
.jrow:hover{background:rgba(107,69,36,.08);border-color:rgba(107,69,36,.18)}
.jday{font-size:9px;font-weight:800;color:var(--coral2);background:rgba(232,100,60,.12);padding:2px 7px;border-radius:16px;white-space:nowrap;flex:0 0 auto}
.jsummary{font-size:12px;font-weight:600;color:#473320;flex:1;line-height:1.3}
.jbadges{display:flex;gap:3px}
.jbadge{font-size:10px;background:rgba(107,69,36,.1);border-radius:5px;padding:1px 5px}
.jmore{font-size:13px;color:var(--muted);font-weight:700}

/* ── NAV TABS ── */
.navtabs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:10px}
.tab{
  background:linear-gradient(180deg,var(--parch),var(--parch2));
  border:2.5px solid var(--bark);border-radius:12px;padding:9px 4px;cursor:pointer;
  text-align:center;box-shadow:0 4px 0 rgba(107,69,36,.4);transition:transform .09s,box-shadow .09s;
  font:inherit;color:inherit;width:100%;
}
.tab:hover{transform:translateY(-2px)}
.tab:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(107,69,36,.4)}
.t-ic{font-size:19px;display:block;margin-bottom:2px}
.t-lbl{font-family:'Lilita One',cursive;font-size:10px;color:var(--ink);display:block;line-height:1.2}
.t-sub{font-size:9px;color:var(--muted);font-weight:700;display:block}

/* ── OVERLAY & MODAL ── */
.overlay{
  position:fixed;inset:0;background:rgba(8,24,22,.72);backdrop-filter:blur(3px);
  display:none;align-items:flex-end;justify-content:center;z-index:50;
  padding:0;
}
.overlay.on{display:flex;animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:540px;max-height:85vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--parch),var(--parch2));
  border:3px solid var(--bark);border-radius:20px 20px 0 0;padding:16px;
  box-shadow:0 -8px 32px rgba(0,0,0,.4);
  animation:slideup .22s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes slideup{from{transform:translateY(60px);opacity:.3}to{transform:translateY(0);opacity:1}}
.modal-drag{width:40px;height:4px;background:rgba(107,69,36,.3);border-radius:4px;margin:0 auto 12px}
.m-head{display:flex;align-items:center;gap:11px;border-bottom:2px dashed rgba(107,69,36,.3);padding-bottom:11px;margin-bottom:11px}
.m-head>div{flex:1;min-width:0}
.m-ava{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:26px;
  background:radial-gradient(circle at 38% 30%,#fff,#f0dcae);border:2.5px solid var(--rope);flex:0 0 48px}
.m-name{font-family:'Lilita One',cursive;font-size:20px;color:var(--ink);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
.m-meta{font-size:11px;font-weight:700;color:var(--muted);margin-top:3px}
.m-edit-btn{flex:0 0 auto;background:none;border:none;font-size:13px;cursor:pointer;opacity:.6;padding:0}
.m-edit-btn:hover{opacity:1}
.edit-panel{background:rgba(107,69,36,.06);border:1.5px dashed rgba(107,69,36,.3);border-radius:10px;padding:10px;margin-bottom:11px}
.edit-name-input{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;font-weight:700;
  padding:8px 10px;border-radius:8px;border:1.5px solid rgba(107,69,36,.3);background:#fffdf8;color:var(--ink)}
.avatar-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.avopt{width:36px;height:36px;border-radius:9px;border:2px solid rgba(107,69,36,.22);background:#fffdf8;
  font-size:18px;display:grid;place-items:center;cursor:pointer}
.avopt.on{border-color:var(--ocean);background:rgba(20,120,100,.15)}
.edit-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.m-nav{flex:0 0 32px;width:32px;height:32px;border-radius:50%;border:2px solid var(--rope);
  background:rgba(107,69,36,.08);color:var(--ink);font-size:18px;font-weight:700;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .1s}
.m-nav:hover{background:rgba(107,69,36,.18)}
.m-nav:active{transform:scale(.92)}
.m-tabs{display:flex;gap:5px;margin-bottom:11px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.m-tabs::-webkit-scrollbar{display:none}
.mtab{background:rgba(107,69,36,.1);border:1.5px solid rgba(107,69,36,.22);border-radius:8px;
  padding:6px 11px;font-weight:800;font-size:11px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.mtab.on{background:var(--ocean);color:#dff6ee;border-color:#0c3a2e}
.m-sec{display:none}.m-sec.on{display:block}

/* stats row */
.stat-row{display:flex;gap:7px;margin-bottom:11px}
.stat-box{flex:1;background:rgba(107,69,36,.09);border-radius:10px;padding:7px;text-align:center}
.stat-box .sv{font-family:'Lilita One',cursive;font-size:16px}
.stat-box .sl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}

/* section title */
.stitle{font-family:'Lilita One',cursive;font-size:12px;color:var(--ink);margin:10px 0 6px}

/* traits */
.trait{display:inline-flex;align-items:center;gap:4px;background:#fff7e6;border:1.5px solid var(--rope);
  border-radius:8px;padding:3px 8px;font-size:11px;font-weight:700;margin:0 4px 4px 0}
.trait.hidden{background:rgba(107,69,36,.07);border-style:dashed;color:var(--muted);font-style:italic}

/* skills */
.skill-row{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.sk-nm{font-weight:800;font-size:11px;width:72px}
.sk-lv{font-size:9px;font-weight:800;background:var(--ocean);color:#dff6ee;padding:1px 6px;border-radius:5px}
.sk-track{flex:1;height:6px;background:rgba(107,69,36,.18);border-radius:6px;overflow:hidden}
.sk-fill{height:100%;background:linear-gradient(90deg,var(--leaf),var(--leaf-dark))}

/* job buttons */
.jobs{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.jbtn{background:linear-gradient(180deg,#fff7e6,#efdcb2);border:2px solid var(--bark);border-radius:9px;
  padding:7px 11px;font-weight:800;font-size:12px;cursor:pointer;color:var(--ink);
  box-shadow:0 3px 0 rgba(107,69,36,.35);}
.jbtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(107,69,36,.35)}
.jbtn.on{background:linear-gradient(180deg,var(--coral),var(--coral2));color:#fff;border-color:#8a3318}
.jbtn:disabled{opacity:.45;cursor:not-allowed}
.jbtn.locked{box-shadow:none}
.jbtn .jrate{font-size:10px;font-weight:700;opacity:.75;margin-left:3px}
.jbtn .jlock{font-size:10px;margin-left:4px}

/* family tree */
.ftree{background:rgba(107,69,36,.06);border:1.5px solid rgba(107,69,36,.2);border-radius:11px;padding:11px}
.ft-row{display:flex;align-items:flex-start;gap:9px;margin-bottom:8px}
.ft-row:last-child{margin-bottom:0}
.ft-role{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--muted);width:60px;flex:0 0 60px;padding-top:4px}
.ft-members{display:flex;flex-wrap:wrap;gap:6px}
.ft-person{display:flex;align-items:center;gap:5px;background:#fff7e6;border:1.5px solid var(--rope);border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700}
.ft-none{font-size:11px;color:var(--muted);font-style:italic;font-weight:600;padding-top:4px}
.ft-div{height:1px;background:rgba(107,69,36,.15);margin:8px 0}

/* history */
.hlog{border:1.5px solid rgba(107,69,36,.22);border-radius:9px;overflow:hidden}
.hentry{display:flex;align-items:flex-start;gap:7px;padding:7px 9px;border-bottom:1px solid rgba(107,69,36,.09)}
.hentry:last-child{border-bottom:none}
.h-day{font-size:9px;font-weight:800;color:var(--coral2);background:rgba(232,100,60,.1);padding:1px 5px;border-radius:8px;white-space:nowrap;flex:0 0 auto;margin-top:1px}
.h-txt{flex:1;font-size:12px;font-weight:600;color:var(--ink);line-height:1.35}
.h-res{font-size:10px;font-weight:800;padding:1px 6px;border-radius:7px;white-space:nowrap;flex:0 0 auto}
.h-res.pos{background:rgba(106,168,79,.18);color:var(--leaf-dark)}
.h-res.neg{background:rgba(232,100,60,.15);color:var(--coral2)}
.h-res.neu{background:rgba(107,69,36,.1);color:var(--muted)}

/* marriage */
.marry-pair{display:grid;grid-template-columns:1fr 36px 1fr;gap:7px;align-items:center;margin-bottom:11px}
.pick-slot{border:2px dashed rgba(107,69,36,.35);border-radius:11px;padding:10px;text-align:center;min-height:80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:rgba(107,69,36,.03);}
.pick-slot.filled{border-style:solid;border-color:var(--bark);background:rgba(255,247,230,.7)}
.slot-ava{font-size:24px}.slot-name{font-family:'Lilita One',cursive;font-size:13px}
.slot-meta{font-size:10px;color:var(--muted);font-weight:700}
.slot-empty{font-size:11px;color:var(--muted);font-style:italic;font-weight:600}
.heart{font-size:24px;text-align:center}
.marry-btn{width:100%;background:linear-gradient(180deg,#e84060,#b82040);color:#fff;
  border:2.5px solid #801030;border-radius:11px;padding:11px;font-family:'Lilita One',cursive;
  font-size:15px;cursor:pointer;box-shadow:0 4px 0 #801030;
  display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:12px;}
.marry-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #801030}
.marry-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pick-item{display:flex;align-items:center;gap:7px;background:rgba(107,69,36,.06);
  border:1.5px solid rgba(107,69,36,.22);border-radius:9px;padding:7px 9px;cursor:pointer;}
.pick-item:hover{background:rgba(107,69,36,.13);border-color:var(--bark)}
.pick-item.taken{opacity:.4;cursor:not-allowed;pointer-events:none}
.pi-ava{font-size:19px}.pi-name{font-family:'Lilita One',cursive;font-size:12px;line-height:1}
.pi-meta{font-size:10px;color:var(--muted);font-weight:700}

/* buildings */
.build-card{border:2px solid rgba(107,69,36,.25);border-radius:11px;padding:10px;margin-bottom:8px;background:rgba(107,69,36,.03)}
.build-card.prog{border-color:var(--amber);background:rgba(240,168,48,.05)}
.build-card.done{border-color:var(--good);background:rgba(106,168,79,.05)}
.bc-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.bc-ic{font-size:22px}.bc-name{font-family:'Lilita One',cursive;font-size:14px}
.bc-desc{font-size:10px;color:var(--muted);font-weight:700;margin-top:1px}
.bc-badge{margin-left:auto;font-size:10px;font-weight:800;padding:3px 9px;border-radius:16px;white-space:nowrap}
.bc-badge.done{background:rgba(106,168,79,.2);color:var(--leaf-dark)}
.bc-badge.prog{background:rgba(240,168,48,.2);color:#8a6000}
.bp-bg{height:13px;background:rgba(107,69,36,.17);border-radius:16px;overflow:hidden;position:relative;margin-bottom:5px}
.bp-bar{height:100%;border-radius:16px;background:linear-gradient(90deg,var(--leaf-dark),var(--leaf))}
.bp-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--ink)}
.bp-info{font-size:11px;color:var(--muted);font-weight:700;display:flex;gap:10px}
.add-btn{width:100%;background:linear-gradient(180deg,var(--jungle),#144d3b);color:#eafff0;
  border:2px solid #0c3a2e;border-radius:11px;padding:10px;font-family:'Lilita One',cursive;font-size:14px;
  cursor:pointer;box-shadow:0 4px 0 #0a3028;display:flex;align-items:center;justify-content:center;gap:7px;}
.add-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0a3028}

/* build pick overlay (stacked) */
.build-opt{border:2px solid rgba(107,69,36,.25);border-radius:11px;padding:10px;margin-bottom:7px;background:rgba(107,69,36,.03);cursor:pointer}
.build-opt:hover{background:rgba(107,69,36,.1);border-color:var(--bark)}
.build-opt.locked{opacity:.45;cursor:not-allowed}
.bo-top{display:flex;align-items:center;gap:9px}
.bo-ic{font-size:22px}.bo-nm{font-family:'Lilita One',cursive;font-size:13px}
.bo-ds{font-size:10px;color:var(--muted);font-weight:700;margin-top:2px}
.bo-cost{font-size:10px;font-weight:800;color:var(--bark2);margin-top:5px}

/* skip-days picker */
.skip-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}
.skip-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid rgba(107,69,36,.25);border-radius:11px;padding:12px 6px;background:rgba(107,69,36,.03);cursor:pointer;transition:background .15s,border-color .15s}
.skip-opt:hover{background:rgba(107,69,36,.12);border-color:var(--bark)}
.skip-opt:active{transform:translateY(2px)}
.skip-opt-num{font-family:'Lilita One',cursive;font-size:22px;color:var(--bark2);line-height:1}
.skip-opt-lbl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
@media(max-width:360px){.skip-picker{grid-template-columns:repeat(3,1fr)}.skip-opt-num{font-size:18px}}

/* tech */
.tech-branch{margin-bottom:11px}
.tb-title{font-family:'Lilita One',cursive;font-size:12px;color:var(--jungle);margin-bottom:5px}
.tech-item{display:flex;align-items:center;gap:7px;border:1.5px solid rgba(107,69,36,.22);
  border-radius:8px;padding:7px 9px;margin-bottom:4px;background:rgba(107,69,36,.03);font-size:11px;font-weight:700;cursor:pointer}
.tech-item.done{background:rgba(106,168,79,.14);border-color:var(--good)}
.tech-item.avail{background:rgba(255,247,230,.9);border-color:var(--rope)}
.tech-item.expanded{border-color:var(--jungle);border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
.ti-name{flex:1 1 auto;min-width:0}
.ti-prereq{font-size:9.5px;font-weight:600;color:var(--muted);text-transform:none}
.ti-cost{margin-left:auto;font-size:10px;font-weight:800;color:var(--berry);flex:0 0 auto}
.ti-detail{border:1.5px solid var(--jungle);border-top:none;border-radius:0 0 8px 8px;
  padding:8px 9px;margin-bottom:4px;background:rgba(255,255,255,.5)}
.ti-detail-desc{font-size:10.5px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:6px}
.ti-detail .unlock-btn{width:100%}
.ti-cost.done{color:var(--good)}
.unlock-btn{padding:3px 9px;background:linear-gradient(180deg,var(--berry),#7a3a8e);color:#fff;
  border:1.5px solid #5a2068;border-radius:7px;font-size:10px;font-weight:800;cursor:pointer;box-shadow:0 2px 0 #5a2068;flex:0 0 auto}

/* ach & memorial */
.ach{display:flex;align-items:center;gap:9px;border:1.5px solid rgba(107,69,36,.22);
  border-radius:10px;padding:8px 10px;margin-bottom:6px;background:rgba(107,69,36,.04)}
.ach.done{background:rgba(240,168,48,.13);border-color:var(--amber)}
.a-nm{font-weight:800;font-size:12px}.a-ds{font-size:10px;color:var(--muted);font-weight:600}
.a-st{margin-left:auto;font-size:16px}
.grave{display:flex;gap:9px;border:1.5px solid rgba(107,69,36,.25);border-radius:10px;padding:9px 11px;margin-bottom:7px;background:rgba(58,42,26,.04)}
.g-nm{font-family:'Lilita One',cursive;font-size:13px}
.g-meta{font-size:10px;font-weight:800;color:var(--coral2);margin-top:1px}
.g-legacy{font-size:11px;color:#5a4226;margin-top:3px;line-height:1.4;font-weight:600}

/* journal detail */
.jd-entry{display:flex;gap:8px;padding:7px 0;border-bottom:1px dashed rgba(107,69,36,.18)}
.jd-entry:last-child{border:none}
.jd-ic{font-size:16px;flex:0 0 auto}.jd-txt{font-size:12px;font-weight:600;line-height:1.4;flex:1}
.jd-res{font-size:10px;font-weight:800;padding:1px 7px;border-radius:7px;white-space:nowrap;flex:0 0 auto}
.jd-res.pos{background:rgba(106,168,79,.2);color:var(--leaf-dark)}
.jd-res.neg{background:rgba(232,100,60,.15);color:var(--coral2)}
.jd-res.neu{background:rgba(107,69,36,.1);color:var(--muted)}

/* generic helpers */
.closebar{display:flex;justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:1.5px dashed rgba(107,69,36,.25)}
.closebtn{background:var(--bark);color:#f6ead2;border:none;border-radius:9px;padding:8px 16px;font-weight:800;cursor:pointer;font-family:'Nunito';box-shadow:0 3px 0 #3a2410}
.closebtn:active{transform:translateY(2px)}
.notebox{background:rgba(232,100,60,.09);border:1.5px solid var(--coral);border-radius:9px;padding:7px 10px;font-size:11px;font-weight:700;color:var(--coral2);margin-bottom:9px}
.greenbox{background:rgba(106,168,79,.1);border:1.5px solid var(--good);border-radius:9px;padding:7px 10px;font-size:11px;font-weight:700;color:var(--leaf-dark);margin-bottom:9px}
.amberbox{background:rgba(240,168,48,.1);border:1.5px solid var(--amber);border-radius:9px;padding:7px 10px;font-size:11px;font-weight:700;color:#7a5800;margin-bottom:9px}
.thought-bubble{background:#fffdf8;border:1.5px dashed rgba(107,69,36,.35);border-radius:12px;
  padding:9px 12px;font-size:12px;font-style:italic;font-weight:700;color:var(--ink);margin-bottom:9px;
  line-height:1.4}
.divider{height:1px;background:rgba(107,69,36,.18);border:none;margin:9px 0}
.prev-flag{text-align:center;font-size:9px;color:#cfe6d8;font-weight:700;letter-spacing:1px;margin-bottom:12px;text-transform:uppercase;opacity:.55}

/* ── FOOTER / LOBBY + DONATE ── */
.app-footer{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:14px;padding:4px 0 2px}
.lobby-btn,.donate-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  border-radius:14px;
  color:#fff;font-weight:900;font-family:'Nunito',sans-serif;font-size:13px;
  padding:10px 22px;text-decoration:none;white-space:nowrap;
  box-shadow:0 4px 10px var(--shadow);transition:filter .12s,transform .12s;
}
.lobby-btn{
  background:linear-gradient(180deg,#2a8f6b,#176149);
  border:2.5px solid #0c3330;border-bottom:5px solid #0a2724;
}
.donate-btn{
  background:linear-gradient(180deg,#8a5a2e,#6b4524);
  border:2.5px solid #5c3317;border-bottom:5px solid #3d2010;
}
.lobby-btn:hover,.donate-btn:hover{filter:brightness(1.12);transform:translateY(-2px)}
.lobby-btn:active,.donate-btn:active{transform:translateY(1px);filter:brightness(.95)}

@media(min-width:480px){
  .resources{grid-template-columns:repeat(4,1fr)}
  .overlay{align-items:center;padding:16px}
  .modal{border-radius:20px;max-height:85vh}
  @keyframes slideup{from{transform:scale(.92);opacity:.3}to{transform:scale(1);opacity:1}}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── NARROW TOPBAR (day-clock + Jeda + Lewati don't fit one row) ── */
@media(max-width:420px){
  .topbar-right{flex:1 0 100%;margin-left:0;margin-top:8px;justify-content:space-between}
  .pause-btn,.skip-btn,.stats-btn{padding:6px 9px;font-size:11px}
  .day-clock{padding:5px 9px 5px 7px}
}

/* ── MOBILE TIGHT (≤360px) ── */
@media(max-width:360px){
  .navtabs{overflow-x:auto;white-space:nowrap;display:flex;-webkit-overflow-scrolling:touch}
  .navtabs::-webkit-scrollbar{display:none}
  .navtabs .tab{flex:0 0 86px;white-space:normal}
  .tribe-table .t-hp,.tribe-table td.t-hp-cell{display:none}
  .pause-btn,.skip-btn,.stats-btn{padding:6px 8px;font-size:10px}
  .lobby-btn,.donate-btn{padding:8px 16px;font-size:12px}
}

/* ── FOCUS VISIBILITY (keyboard nav) ── */
.tab:focus-visible,.jrow:focus-visible,.tribe-table tr:focus-visible,
.pause-btn:focus-visible,.skip-btn:focus-visible,.stats-btn:focus-visible,.panel-toggle:focus-visible,.closebtn:focus-visible,
.jbtn:focus-visible,.mtab:focus-visible,.unlock-btn:focus-visible,.skip-opt:focus-visible,
.add-btn:focus-visible,.marry-btn:focus-visible,.donate-btn:focus-visible,.lobby-btn:focus-visible{
  outline:3px solid var(--jungle);outline-offset:2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   AUTH / WORLDS / ONBOARDING / GAME OVER — shared extra components
   (built on the same castaway-chief design tokens above)
   ═══════════════════════════════════════════════════════════════════════ */

.center-wrap{max-width:440px;margin:0 auto;padding-top:6vh}
.brand-hero{text-align:center;margin-bottom:18px}
.brand-hero .brand-ic{font-size:54px;line-height:1}
.brand-hero h1{font-family:'Lilita One',cursive;font-size:30px;color:#fbf1da;text-shadow:0 3px 0 rgba(0,0,0,.35);margin-top:6px}
.brand-hero p{color:#cfe6d8;font-weight:700;font-size:13px;margin-top:4px}

.card{
  background:linear-gradient(180deg,var(--parch),var(--parch2));
  border:3px solid var(--bark);border-radius:18px;padding:20px;
  box-shadow:0 8px 0 rgba(107,69,36,.4),inset 0 1px 0 rgba(255,255,255,.4);
}
.card h2{font-family:'Lilita One',cursive;font-size:20px;margin-bottom:14px;color:var(--ink)}

.field{margin-bottom:13px}
.field label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:5px}
.field input{
  width:100%;border:2px solid var(--bark);border-radius:10px;padding:10px 12px;
  font-family:'Nunito';font-size:14px;font-weight:700;color:var(--ink);
  background:#fff7e6;
}
.field input:focus{outline:none;border-color:var(--jungle);box-shadow:0 0 0 3px rgba(29,107,84,.15)}
.field .err{color:var(--coral2);font-size:11px;font-weight:700;margin-top:4px}

.checkbox-field label{
  display:flex;align-items:center;gap:8px;text-transform:none;font-size:12px;
  font-weight:700;color:var(--ink);letter-spacing:normal;
}
.checkbox-field input[type="checkbox"]{width:auto;accent-color:var(--jungle)}

.btn-primary{
  width:100%;background:linear-gradient(180deg,var(--jungle),#144d3b);color:#eafff0;
  border:2.5px solid #0c3a2e;border-radius:12px;padding:12px;font-family:'Lilita One',cursive;
  font-size:16px;cursor:pointer;box-shadow:0 5px 0 #0a3028;transition:transform .08s,box-shadow .08s;
}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #0a3028}
.btn-amber{
  background:linear-gradient(180deg,var(--amber),#d3851c);color:#43280a;border-color:#8a5410;box-shadow:0 5px 0 #8a5410;
}
.btn-amber:active{box-shadow:0 2px 0 #8a5410}

.muted-link{display:block;text-align:center;margin-top:14px;color:#cfe6d8;font-weight:700;font-size:13px;text-decoration:none}
.muted-link:hover{text-decoration:underline}

/* world list */
.world-card{
  background:linear-gradient(180deg,var(--parch),var(--parch2));
  border:3px solid var(--bark);border-radius:16px;padding:14px;margin-bottom:11px;
  box-shadow:0 6px 0 rgba(107,69,36,.4);display:flex;align-items:center;gap:13px;
}
.world-card.over{border-color:var(--coral2);opacity:.92}
.world-card .wc-ic{font-size:30px}
.world-card .wc-name{font-family:'Lilita One',cursive;font-size:17px;color:var(--ink)}
.world-card .wc-meta{font-size:12px;font-weight:700;color:var(--muted);margin-top:2px}
.world-card .wc-actions{margin-left:auto;display:flex;gap:7px;flex-shrink:0}
.wc-btn{border:2px solid var(--bark);border-radius:9px;padding:7px 13px;font-weight:800;font-size:12px;cursor:pointer;font-family:'Nunito';text-decoration:none;display:inline-block;box-shadow:0 3px 0 rgba(107,69,36,.4)}
.wc-btn.play{background:linear-gradient(180deg,var(--jungle),#144d3b);color:#eafff0;border-color:#0c3a2e}
.wc-btn.del{background:#fff7e6;color:var(--coral2)}
.wc-btn:active{transform:translateY(2px)}

/* ── LEADERBOARD ── */
.lb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.lb-tab{
  background:linear-gradient(180deg,var(--parch),var(--parch2));
  border:2.5px solid var(--bark);border-radius:12px;padding:9px 4px;cursor:pointer;
  text-align:center;box-shadow:0 4px 0 rgba(107,69,36,.4);transition:transform .09s,box-shadow .09s;
  text-decoration:none;color:inherit;display:block;
}
.lb-tab:hover{transform:translateY(-2px)}
.lb-tab:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(107,69,36,.4)}
.lb-tab.active{background:linear-gradient(180deg,var(--jungle),#144d3b);border-color:#0c3a2e}
.lb-tab.active .t-lbl{color:#eafff0}
.lb-tab.active .t-sub{color:#bfe8d6}
.lb-table{width:100%;border-collapse:collapse;margin-top:6px}
.lb-table th{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:800;padding:0 8px 8px;text-align:left;white-space:nowrap}
.lb-table td{padding:8px;vertical-align:middle;font-size:12px;font-weight:700;white-space:nowrap}
.lb-table tr:not(:last-child) td{border-bottom:1px solid rgba(107,69,36,.12)}
.lb-table .lb-world,.lb-table .lb-player{font-family:'Lilita One',cursive;font-size:13px;color:var(--ink);white-space:normal}
.lb-table .lb-res{font-size:11px;font-weight:700}
.lb-rank{font-family:'Lilita One',cursive;font-size:15px;color:var(--ink)}
.lb-rank.gold{color:#d3851c}
.lb-rank.silver{color:#7a8a93}
.lb-rank.bronze{color:#a85a2e}
.lb-status{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;padding:3px 8px;border-radius:8px;border:1.5px solid #0c3a2e;background:var(--ocean);color:#dff6ee;white-space:nowrap}
.lb-status.active{background:var(--jungle);border-color:#0c3a2e}
.lb-status.gameover{background:var(--coral2);border-color:#7a2c16;color:#fff}
.lb-status.deleted{background:#6a5640;border-color:#4a3a26;color:#fff}

/* ── AMBIENT BACKSOUND TOGGLE ── */
.ambient-toggle{
  position:fixed;right:14px;bottom:14px;z-index:40;
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(180deg,#8a5a2e,#6b4524);
  border:2.5px solid #5c3317;color:#fff;font-size:18px;cursor:pointer;
  box-shadow:0 4px 0 #3d2010,0 6px 14px rgba(0,0,0,.35);
  transition:transform .12s,box-shadow .12s,filter .12s;
  display:grid;place-items:center;
}
.ambient-toggle:hover{filter:brightness(1.12);transform:translateY(-2px)}
.ambient-toggle:active{transform:translateY(1px);box-shadow:0 2px 0 #3d2010}
.ambient-toggle:focus-visible{outline:3px solid var(--jungle);outline-offset:2px}
.ambient-toggle-disabled{opacity:.45;cursor:not-allowed;filter:none!important;transform:none!important}

/* onboarding story */
.story-wrap{max-width:520px;margin:0 auto;padding-top:4vh}
.story-card{
  background:linear-gradient(180deg,#fbf3df,#f3e6c4);
  border:3px solid var(--bark);border-radius:20px;padding:24px;
  box-shadow:0 10px 0 rgba(107,69,36,.45),inset 0 1px 0 rgba(255,255,255,.5);
}
.story-scene{font-size:46px;text-align:center;margin-bottom:14px}
.story-text{font-size:15px;line-height:1.7;color:#473320;font-weight:600;min-height:160px}
.story-text p{margin-bottom:12px;opacity:0;transform:translateY(8px);animation:storyfade .5s ease forwards}
.story-text p:nth-child(1){animation-delay:.1s}
.story-text p:nth-child(2){animation-delay:.7s}
.story-text p:nth-child(3){animation-delay:1.3s}
.story-text p:nth-child(4){animation-delay:1.9s}
@keyframes storyfade{to{opacity:1;transform:translateY(0)}}
.story-dots{display:flex;gap:6px;justify-content:center;margin:18px 0}
.story-dot{width:9px;height:9px;border-radius:50%;background:rgba(107,69,36,.25)}
.story-dot.on{background:var(--coral)}
.story-actions{display:flex;gap:10px;margin-top:6px}
.story-actions button{flex:1}
.btn-ghost{background:transparent;border:2px solid var(--bark);border-radius:12px;padding:11px;font-weight:800;cursor:pointer;font-family:'Nunito';color:var(--ink)}

/* game over */
.gameover-wrap{max-width:480px;margin:0 auto;padding-top:5vh;text-align:center}
.go-skull{font-size:60px}
.go-title{font-family:'Lilita One',cursive;font-size:30px;color:#f6d5cc;text-shadow:0 3px 0 rgba(0,0,0,.4);margin:6px 0}
.go-reason{color:#e9c4bb;font-weight:700;font-size:14px;margin-bottom:18px}
.go-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.go-stat{background:rgba(255,247,230,.92);border:2px solid var(--bark);border-radius:12px;padding:11px}
.go-stat .v{font-family:'Lilita One',cursive;font-size:22px;color:var(--ink)}
.go-stat .l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.go-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* flash */
.flash{background:rgba(106,168,79,.9);color:#fff;border-radius:10px;padding:10px 14px;font-weight:700;font-size:13px;margin-bottom:12px;text-align:center}

/* ── Achievements list (rendered by game.js) ── */
.ach-item{display:flex;gap:11px;align-items:flex-start;padding:11px;border-radius:12px;margin-bottom:8px;border:2px solid var(--bark)}
.ach-item.got{background:linear-gradient(180deg,#fff8e6,#ffeec4)}
.ach-item.locked{background:rgba(107,69,36,.06);opacity:.72}
.ach-ic{font-size:24px;flex-shrink:0}
.ach-nm{font-family:'Lilita One',cursive;font-size:15px;color:var(--ink)}
.ach-ds{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:1px}
.ach-day{font-size:10px;font-weight:800;color:var(--leaf-dark);margin-top:3px}

/* ── Stats popup (rendered by game.js) ── */
.stat-section{margin-bottom:14px}
.stat-title{font-family:'Lilita One',cursive;font-size:14px;color:var(--ink);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.stat-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px dashed rgba(107,69,36,.18);font-size:12.5px}
.stat-row:last-child{border-bottom:none}
.stat-row .sr-label{color:var(--muted);font-weight:700;flex:1;min-width:0}
.stat-row .sr-value{color:var(--ink);font-weight:800;text-align:right;white-space:nowrap}
.stat-row.total{border-top:2px dashed rgba(107,69,36,.3);border-bottom:none;margin-top:2px;padding-top:8px}
.stat-row.total .sr-label,.stat-row.total .sr-value{color:var(--ink);font-size:13px}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
@media(max-width:360px){.stat-grid{grid-template-columns:1fr}}
.stat-pill{background:rgba(107,69,36,.06);border:1.5px solid rgba(107,69,36,.2);border-radius:9px;padding:7px 9px}
.stat-pill .sp-v{font-family:'Lilita One',cursive;font-size:16px;color:var(--ink);line-height:1.1}
.stat-pill .sp-l{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}