/* Ink Sky. Paper-and-ink look shared with Ink Nine, Ink Rally and Ink of Arms: white paper, black ink, no other colors. */
:root{
  --paper:#ffffff; --ink:#000000; --soft:#5c5c5c;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --ui:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1); --settle:cubic-bezier(.3,.7,.3,1);
  color-scheme:light; box-sizing:border-box;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#ffffff; --ink:#000000; --soft:#5c5c5c; } }
:root[data-theme="dark"]{ --paper:#ffffff; --ink:#000000; --soft:#5c5c5c; }
*,*::before,*::after{ box-sizing:inherit; }
html,body{ margin:0; height:100%; background:var(--paper); color:var(--ink); font-family:var(--ui); overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
button{ appearance:none; font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
[hidden]{ display:none !important; }
canvas#c{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.3,.78)}55%{transform:scale(.9,1.14)}78%{transform:scale(1.04,.97)}100%{transform:scale(1)}}
@keyframes cardIn{0%{transform:translateY(60vh) scale(.7,1.3)}55%{transform:translateY(-10px) scale(1.06,.94)}75%{transform:translateY(3px) scale(.98,1.02)}100%{transform:none}}
@keyframes pickIn{0%{opacity:0;transform:translateY(24px) scale(.9,1.12)}60%{opacity:1;transform:translateY(-3px) scale(1.03,.97)}100%{opacity:1;transform:none}}
@keyframes rowIn{0%{opacity:0;transform:translateX(-18px)}70%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:none}}
@keyframes trophyIn{0%{opacity:0;transform:translateY(-120px) scale(.7,1.3)}45%{opacity:1;transform:translateY(0) scale(1.25,.72)}62%{transform:translateY(-14px) scale(.9,1.12)}78%{transform:translateY(0) scale(1.06,.95)}100%{transform:none}}
@keyframes nope{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes pulse{0%,100%{transform:none}50%{transform:scale(1.08,.94)}}
@keyframes pop{0%{opacity:0;transform:translate(-50%,10px) scale(.6,1.3)}18%{opacity:1;transform:translate(-50%,-4px) scale(1.12,.9)}30%{transform:translate(-50%,0) scale(.97,1.03)}40%{transform:translate(-50%,0)}82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-14px)}}

.screen{ position:absolute; inset:0; display:none; flex-direction:column; max-width:480px; margin:0 auto; z-index:2;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 12px); }
.screen.on{ display:flex; }

/* ---------- shared pieces from Ink Nine / Ink Rally / Ink of Arms ---------- */
.panel{ background:var(--paper); border:2.5px solid var(--ink); border-radius:24px; box-shadow:7px 8px 0 var(--ink);
  padding:22px 18px 18px; width:min(440px,100%); text-align:center; animation:cardIn .6s var(--settle); }
.panel h2{ font-family:var(--display); font-weight:900; font-style:italic; font-size:34px; line-height:1.05; margin:0; }
.panel p{ margin:6px 0 16px; font-weight:700; color:var(--soft); line-height:1.4; }
.logo{ font-family:var(--display); font-style:italic; font-weight:900; font-size:52px; line-height:.95; letter-spacing:-.01em; margin:0 0 4px; }
.tag{ font-weight:800; font-size:16px; margin:10px 0 4px; color:var(--ink) !important; }
.btn{ appearance:none; border:2.5px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:14px; padding:13px 22px;
  font-family:var(--ui); font-weight:800; font-size:16px; cursor:pointer; width:100%; line-height:1.1; transition:transform .2s var(--spring); }
.btn small{ display:block; font-size:11px; font-weight:700; opacity:.8; margin-top:3px; }
.btn:active{ transform:scale(1.04,.9); }
.btn.ghost{ background:var(--paper); color:var(--ink); }
.btn:disabled{ opacity:.3; cursor:default; transform:none; }
.btn.dim{ background:var(--paper); color:var(--ink); border-style:dashed; }
.btn:focus-visible,.event:focus-visible,.linkbtn:focus-visible,.chip:focus-visible,.srow:focus-visible,.scanb:focus-visible,.pausebtn:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.linkbtn{ appearance:none; border:0; background:none; padding:2px 4px; font:inherit; font-weight:800; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; margin-top:6px; }
.how{ text-align:left; font-size:13px; font-weight:600; border:1.5px dashed var(--ink); border-radius:12px; padding:10px 12px; margin:0 0 14px; line-height:1.45; }
.how p{ margin:0 0 8px !important; color:var(--ink) !important; font-weight:600 !important; }
.how p:last-child{ margin:0 !important; }
.how b{ font-weight:800; }
.sub{ font-size:13px; font-weight:700; color:var(--soft); line-height:1.25; }
.story{ font-weight:600 !important; font-size:14px; line-height:1.35; color:var(--ink) !important; margin:10px 0 12px !important; }
.evn{ font-size:12px !important; font-weight:800 !important; color:var(--ink) !important; margin:0 0 4px !important; }
.foot-note{ font-size:12px; font-weight:600; color:var(--soft); margin-top:12px; }
.ver{ font-size:11.5px; font-weight:700; color:var(--soft); margin-top:6px; }
.halo{ text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff,0 0 9px #fff; }

/* ---------- home ---------- */
#title{ justify-content:flex-end; align-items:center; overflow:auto; }
.titlep{ margin-top:auto; }
@media (min-aspect-ratio:1/1){ #title{ max-width:none; align-items:flex-end; justify-content:center; padding-right:6vw; } .titlep{ margin:auto 0; } }
.events{ display:grid; gap:10px; margin:14px 0 10px; }
.event{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; text-align:left; border:2.5px solid var(--ink); border-radius:18px; padding:12px 14px;
  background:var(--paper); box-shadow:4px 5px 0 var(--ink); animation:pickIn .55s var(--settle) both; transition:transform .2s var(--spring); }
.event:active{ transform:scale(1.03,.94); }
.event.locked{ border-style:dashed; box-shadow:none; opacity:.55; cursor:default; }
.tw-wrap{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:50px; }
.tw-wrap svg{ width:34px; height:38px; }
.tw-wrap small{ font-size:10.5px; font-weight:800; }
.ev{ display:grid; gap:3px; }
.ev b{ font-family:var(--display); font-style:italic; font-weight:900; font-size:22px; line-height:1.05; }
.ev i{ font-style:normal; font-size:12px; font-weight:700; color:var(--soft); letter-spacing:.02em; }
.ev span{ font-size:13px; font-weight:600; line-height:1.35; }
.ev .saved strong{ font-weight:800; }

/* ---------- progress pips: one per star, and the core ---------- */
.prog{ display:flex; gap:6px; justify-content:center; align-items:center; margin:12px 0 4px; }
.prog.left{ justify-content:flex-start; margin:8px 0 0; }
.prog i{ width:12px; height:12px; border:2px solid var(--ink); border-radius:50%; background:var(--paper); }
.prog i.done{ background:var(--ink); }
.prog i.now{ background:var(--ink); transform:scale(1.35); }
.prog i.gap{ width:4px; border:0; background:none; }
.prog i.star{ border-radius:3px; transform:rotate(45deg); }
.prog i.star.now{ transform:rotate(45deg) scale(1.35); }
.charts{ display:flex; gap:6px; justify-content:center; margin:6px 0 10px; }
.charts i{ width:26px; height:26px; opacity:.25; }
.charts i.on{ opacity:1; animation:bump .5s ease-out; }
.charts svg{ width:100%; height:100%; }
.prog i.core{ width:18px; height:18px; border:0; background:none; display:grid; place-items:center; }
.prog i.core svg{ width:18px; height:18px; }
.prog i.core.now{ transform:scale(1.3); }

/* ---------- the HUD over the canvas ---------- */
.hud{ position:fixed; inset:0; z-index:5; pointer-events:none; display:flex; flex-direction:column; max-width:480px; margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px calc(env(safe-area-inset-bottom,0px) + 14px); }
.hud button{ pointer-events:auto; }
.htop{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; }
.pn{ display:flex; align-items:center; gap:6px; }
.wx svg{ width:26px; height:26px; display:block; }
.hn{ font-family:var(--display); font-weight:800; font-size:28px; line-height:1; letter-spacing:-.01em; }
#shud .hn{ font-style:italic; font-weight:900; }
.htop .sub{ margin-top:4px; }
.pausebtn{ width:44px; height:44px; border-radius:50%; border:2.5px solid var(--ink); background:var(--paper); color:var(--ink); box-shadow:3px 4px 0 var(--ink);
  display:grid; place-items:center; transition:transform .28s var(--spring); }
.pausebtn svg{ width:26px; height:26px; }
.pausebtn:active{ transform:scale(1.12,.86); }

.meters{ display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; margin-top:10px; }
.ml{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; font-weight:800; margin-bottom:3px; }
.ml b{ font-family:var(--display); font-weight:900; font-size:14px; font-variant-numeric:tabular-nums; }
.bar{ position:relative; height:13px; border:2px solid var(--ink); border-radius:999px; overflow:hidden; background:var(--paper); box-shadow:2px 3px 0 var(--ink); }
.bar i{ position:absolute; inset:0 auto 0 0; width:100%; background:var(--ink); transition:width .25s var(--settle); }
.bar.hatch i{ background:repeating-linear-gradient(-45deg,var(--ink) 0 2.5px,var(--paper) 2.5px 5px); border-right:2px solid var(--ink); }
.fuelbar{ margin-top:6px; height:11px; box-shadow:none; }
.alert{ display:flex; align-items:center; gap:3px; padding:3px 7px 3px 4px; border:2px solid var(--ink); border-radius:999px; background:var(--paper); height:24px; }
.alert svg{ width:20px; height:20px; }
.alert i{ width:7px; height:7px; border:1.5px solid var(--ink); border-radius:50%; }
.alert i.on{ background:var(--ink); }
.alert.hot{ background:var(--ink); animation:pulse .5s ease-in-out infinite; }
.alert.hot svg path{ fill:var(--paper); stroke:var(--paper); }
.alert.hot svg circle{ fill:var(--ink); }
.alert.hot i{ border-color:var(--paper); background:var(--paper); }

.hbot{ margin-top:auto; display:grid; gap:10px; }
.board.btn,.btn.board{ pointer-events:auto; width:auto; justify-self:center; padding:13px 26px; box-shadow:3px 4px 0 var(--ink); animation:pickIn .45s var(--settle) both; }
.chips{ display:grid; grid-template-columns:repeat(4,1fr) auto; gap:7px; align-items:end; }
.chip{ display:flex; flex-direction:column; align-items:center; gap:1px; border:2px solid var(--ink); border-radius:14px; background:var(--paper); box-shadow:3px 4px 0 var(--ink);
  padding:5px 2px 5px; transition:transform .2s var(--spring); min-width:0; }
.chip:active{ transform:scale(1.08,.88); }
.chip .ci svg{ width:22px; height:22px; display:block; }
.chip b{ font-family:var(--display); font-weight:900; font-size:18px; line-height:1; font-variant-numeric:tabular-nums; }
.chip small{ font-size:9.5px; font-weight:800; }
.chip.low{ background:var(--ink); color:var(--paper); animation:pulse .9s ease-in-out infinite; }
.chip.low svg path,.chip.low svg circle{ stroke:var(--paper); }
.chip.low svg [fill="#fff"]{ fill:var(--ink); }
.chip.low svg [fill="#000"]{ fill:var(--paper); }
.scanb{ position:relative; width:58px; height:58px; border-radius:50%; background:var(--ink); border:2.5px solid var(--ink); box-shadow:3px 4px 0 var(--ink);
  display:grid; place-items:center; transition:transform .2s var(--spring), opacity .2s; }
.scanb > svg:first-child{ width:32px; height:32px; }
.scanb > svg:first-child path,.scanb > svg:first-child circle{ stroke:var(--paper); }
.scanb > svg:first-child circle{ fill:var(--paper); }
.scanb .ring{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); pointer-events:none; }
.scanb.cool{ background:var(--paper); }
.scanb.cool > svg:first-child path,.scanb.cool > svg:first-child circle{ stroke:var(--ink); }
.scanb.cool > svg:first-child circle{ fill:var(--ink); }
.scanb.cool .ring circle{ stroke:var(--ink); }
.scanb:active{ transform:scale(1.12,.86); }

.wallet3{ display:grid; grid-template-columns:repeat(3,1fr); border:2px solid var(--ink); border-radius:14px; background:var(--paper); box-shadow:3px 4px 0 var(--ink); overflow:hidden; }
.wallet3 > div{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:6px; align-items:center; padding:7px 10px; border-left:1.5px solid var(--ink); }
.wallet3 > div:first-child{ border-left:0; }
.wallet3 span{ grid-row:span 2; }
.wallet3 span svg{ width:24px; height:24px; display:block; }
.wallet3 b{ font-family:var(--display); font-weight:900; font-size:20px; line-height:1; font-variant-numeric:tabular-nums; }
.wallet3 small{ font-size:10.5px; font-weight:800; }
.twobtn{ display:flex; gap:8px; } .twobtn .btn{ flex:1; }
#shud .twobtn .btn{ box-shadow:3px 4px 0 var(--ink); }

/* the goal bar under the meters: the next thing to do on this planet */
.goalbar{ display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:6px 10px 6px 6px; text-align:left; background:var(--paper); border:2px solid var(--ink);
  border-radius:12px; box-shadow:3px 4px 0 var(--ink); transition:transform .2s var(--spring); }
.goalbar:active{ transform:scale(1.03,.92); }
.goalbar .gn{ flex:none; background:var(--ink); color:var(--paper); border-radius:999px; padding:3px 8px; font-family:var(--display); font-weight:900; font-size:13px; font-variant-numeric:tabular-nums; }
.goalbar .gt{ font-size:13px; font-weight:800; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.goalbar.done{ border-style:dashed; box-shadow:none; }
.board .row.goal{ grid-template-columns:22px 1fr auto; }
.board .row.goal .tick{ width:20px; height:20px; border:2px solid var(--ink); border-radius:6px; display:grid; place-items:center; font-weight:900; font-size:13px; line-height:1; }
.board .row.goal.done .tick{ background:var(--ink); color:var(--paper); }
.board .row.goal.done .nm{ text-decoration:line-through; text-decoration-thickness:2px; }

/* ---------- floating things ---------- */
#fx{ position:fixed; inset:0; pointer-events:none; z-index:8; }
.float{ position:absolute; transform:translateX(-50%); font-family:var(--display); font-weight:900; font-size:17px; white-space:nowrap; pointer-events:none;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff; }
.float.m{ background:var(--ink); color:var(--paper); border-radius:999px; padding:3px 10px; font-size:14px; text-shadow:none; }
.callout{ position:fixed; left:50%; top:30%; z-index:9; pointer-events:none; text-align:center; opacity:0; transform:translate(-50%,0); width:max-content; max-width:92vw; }
.callout b{ display:block; font-family:var(--display); font-style:italic; font-weight:900; font-size:40px; line-height:1; text-shadow:0 0 3px #fff,0 0 5px #fff,0 0 9px #fff,0 0 14px #fff; }
.callout span{ display:inline-block; margin-top:8px; font-size:13px; font-weight:800; background:var(--ink); color:var(--paper); border-radius:999px; padding:5px 12px; }
.callout.go{ animation:pop 2.6s var(--settle) both; }
.hintb{ position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 164px); z-index:9; width:min(360px,calc(100vw - 32px)); transform:translate(-50%,-8px); opacity:0;
  background:var(--paper); border:2.5px solid var(--ink); border-radius:16px; box-shadow:4px 5px 0 var(--ink); padding:10px 14px; font-size:14px; font-weight:700; line-height:1.35; text-align:center;
  pointer-events:none; transition:opacity .25s, transform .35s var(--spring); }
.hintb.on{ opacity:1; transform:translate(-50%,0); }
.disc{ position:fixed; left:50%; top:calc(env(safe-area-inset-top,0px) + 10px); z-index:10; width:min(380px,calc(100vw - 24px)); transform:translate(-50%,-140%);
  display:grid; grid-template-columns:84px 1fr; gap:10px; align-items:center; text-align:left; background:var(--paper); border:2.5px solid var(--ink); border-radius:18px;
  box-shadow:4px 5px 0 var(--ink); padding:8px 12px 8px 8px; pointer-events:none; transition:transform .5s var(--spring); }
.disc.on{ transform:translate(-50%,0); }
.disc img{ width:84px; height:67px; border:2px solid var(--ink); border-radius:12px; object-fit:contain; }
.disc i{ font-style:normal; font-size:11.5px; font-weight:800; display:block; }
.disc b{ display:block; font-family:var(--display); font-style:italic; font-weight:900; font-size:21px; line-height:1.05; margin:2px 0; }
.disc small{ font-size:12.5px; font-weight:600; }

/* ---------- overlay cards ---------- */
.veil{ position:fixed; inset:0; z-index:30; display:none; overflow-y:auto; background:rgba(255,255,255,.78);
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px); }
.veil.on{ display:grid; }
.veil .panel{ margin:auto; }
.panel > .btn + .btn,.panel > .twobtn + .btn,.panel > .btn + .twobtn{ margin-top:8px; }
.board{ border:2px solid var(--ink); border-radius:14px; overflow:hidden; margin:0 0 14px; text-align:left; }
.board .row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:9px 12px; border-top:1.5px solid var(--ink); animation:rowIn .45s var(--settle) both; }
.board .row:first-child{ border-top:0; }
.board .row.me{ background:var(--ink); color:var(--paper); }
.board .row.me small{ color:var(--paper); }
.board .nm{ font-weight:800; font-size:14px; line-height:1.2; }
.board .nm small{ display:block; font-weight:600; font-size:12px; color:var(--soft); margin-top:2px; }
.board b{ font-family:var(--display); font-weight:900; font-size:20px; text-align:right; font-variant-numeric:tabular-nums; }
.board .ic svg{ width:26px; height:26px; display:block; }
.award{ display:grid; place-items:center; margin:4px 0 8px; }
.award .troph{ width:96px; height:106px; animation:trophyIn 1s var(--settle) both .2s; transform-origin:50% 100%; }
.award .troph svg{ width:100%; height:100%; }
.award p{ margin:6px 0 0 !important; font-family:var(--display); font-style:italic; font-weight:900; font-size:24px; color:var(--ink) !important; }
.relicHead{ display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; text-align:left; margin-bottom:12px; }
.relicHead .pimg{ width:64px; height:64px; }
.relicHead h2{ font-size:30px !important; }
.shoplist{ display:grid; gap:8px; }
.srow{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; border:2px solid var(--ink); border-radius:14px; padding:9px 10px; text-align:left; width:100%;
  background:var(--paper); box-shadow:3px 4px 0 var(--ink); animation:pickIn .5s var(--settle) both; transition:transform .2s var(--spring); }
.srow:active{ transform:scale(1.04,.92); }
.srow.off{ border-style:dashed; box-shadow:none; opacity:.5; }
.sid{ display:grid; place-items:center; border:2px solid var(--ink); border-radius:10px; width:44px; height:44px; }
.sid svg{ width:30px; height:30px; }
.relicHead .sid{ border:0; }
.sinfo b{ display:block; font-family:var(--display); font-style:italic; font-weight:900; font-size:18px; line-height:1.1; }
.sinfo small{ display:block; font-size:12.5px; font-weight:600; line-height:1.35; margin-top:2px; }
.rar{ display:flex; gap:3px; }
.rar i{ width:8px; height:8px; border-radius:50%; border:1.5px solid var(--ink); }
.rar i.on{ background:var(--ink); }

/* ---------- the catalog ---------- */
.catp{ border:2px solid var(--ink); border-radius:14px; margin:0 0 10px; padding:8px 10px 10px; text-align:left; animation:rowIn .45s var(--settle) both; }
.cath{ display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:center; margin-bottom:8px; }
.cath img{ width:40px; height:40px; }
.cath b{ display:block; font-family:var(--display); font-style:italic; font-weight:900; font-size:18px; line-height:1.1; }
.cath small{ font-size:12px; font-weight:700; color:var(--soft); }
.catg{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
.catg figure{ margin:0; text-align:center; }
.catg img,.catg .unk div{ width:100%; aspect-ratio:5/4; border:2px solid var(--ink); border-radius:10px; object-fit:contain; display:block; }
.catg .unk div{ border-style:dashed; display:grid; place-items:center; font-family:var(--display); font-style:italic; font-weight:900; font-size:26px; opacity:.5; }
.catg figcaption{ font-size:11px; font-weight:800; margin-top:3px; line-height:1.2; }
.catg .unk figcaption{ color:var(--soft); }

@media (prefers-reduced-motion: reduce){
  .panel,.event,.board .row,.srow,.award .troph,.catp,.chip.low,.alert.hot{ animation:none; }
  .callout.go{ animation-duration:2.6s; }
  .disc,.hintb,.btn,.chip{ transition:none; }
}