/* Where in the world is... Neko design system: paper, plum, coral. */

:root{
  --bg:#f6f2ea; --bg2:#efe8dc; --ink:#241d33; --ink2:#5c5470; --ink3:#8b8299;
  --card:#ffffff; --line:#e3dacb;
  --plum:#3a2c5c; --plum-d:#241b3f; --plum-l:#5b3d7a;
  --coral:#ff8a5c; --coral-d:#e56a3c;
  --green:#2e9e6b; --green-bg:#e6f6ee; --red:#d9534f; --red-bg:#fdecec; --gold:#e6a935;
  --water:#bcd6ea;
  --r:16px; --r-lg:22px; --top:54px;
  --shadow:0 2px 10px rgba(36,27,63,.08); --shadow-lg:0 8px 28px rgba(36,27,63,.16);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#171327; --bg2:#1e1934; --ink:#f1ecf8; --ink2:#b6acc9; --ink3:#8b81a3;
    --card:#241d3c; --line:#362c55; --green-bg:#12301f; --red-bg:#38191a; --water:#23405a;
    --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-lg:0 8px 28px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,"Segoe UI",Roboto,"Noto Sans",system-ui,sans-serif;
  padding-top:calc(var(--top) + env(safe-area-inset-top));
  min-height:100dvh;display:flex;flex-direction:column;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:disabled{cursor:default}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em;line-height:1.2}
p{margin:.4em 0}
a{color:var(--coral-d)}

/* ---------- header: app name left, version pill right, nothing else up there ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:40;height:calc(var(--top) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 10px 0;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,var(--plum),var(--plum-d));color:#fff;
}
.brand{display:flex;align-items:center;gap:9px;min-width:0;flex:1;text-align:left;color:#fff;min-height:44px}
.brand-face{border-radius:9px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-en{font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:11px;color:#cdbff0;font-weight:600}
/* The update control. Small and muted; no glyph, because an arrow means data refresh. */
.ver-pill{flex:none;height:28px;padding:0 10px;border-radius:99px;border:1px solid rgba(255,255,255,.28);
  font-size:11.5px;font-weight:700;color:#cdbff0;font-variant-numeric:tabular-nums;min-width:44px}
.ver-pill:disabled{opacity:.7}
.ver-pill-new{background:var(--coral);border-color:var(--coral);color:#fff}

.view{flex:1;width:100%;max-width:860px;margin:0 auto;padding:12px 14px 20px;display:flex;flex-direction:column;gap:12px}
.foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom));font-size:11.5px;color:var(--ink3);display:flex;flex-direction:column;gap:2px;text-align:center}
body.ib-room .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:14px 16px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.spread{justify-content:space-between}
.sub{font-size:12.5px;color:var(--ink3);font-weight:600}
.hint{font-size:13px;color:var(--ink2);margin:2px 0 6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:12px;
  background:var(--plum);color:#fff;font-weight:700;font-size:14.5px;text-align:center}
.btn:disabled{opacity:.45}
.btn.coral{background:var(--coral-d)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.small{min-height:36px;padding:6px 12px;font-size:13px}
.btn.big{min-height:54px;font-size:17px}

/* Same link, words and style as MEOW Lingual; never in the header, never refresh-shaped. */
.coffee{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:99px;
  background:var(--coral);color:#fff;font-weight:700;font-size:13px;text-decoration:none}
.coffee:active{background:var(--coral-d)}

.back{width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:24px;line-height:1;flex:none;display:grid;place-items:center;box-shadow:var(--shadow)}
.lhead{display:flex;align-items:center;gap:12px}
.lhead h2{font-size:19px}

/* ---------- home ---------- */
.hero{border-radius:var(--r-lg);background:linear-gradient(135deg,var(--plum),var(--plum-l));color:#fff;padding:20px 18px}
.hero h1{font-size:26px}
.hero p{color:#e2d8f7;font-size:14.5px;margin-top:6px}
.modes{display:grid;gap:10px}
@media (min-width:640px){.modes{grid-template-columns:1fr 1fr}}
.modecard{display:flex;gap:14px;align-items:center;text-align:left;padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);min-height:88px}
.modeicon{width:48px;height:48px;border-radius:14px;background:var(--coral);color:#fff;font-size:26px;font-weight:800;display:grid;place-items:center;flex:none}
.modetxt{display:flex;flex-direction:column}
.modetxt strong{font-size:17px}
.modetxt span{font-size:13.5px;color:var(--ink2)}

/* ---------- friends ---------- */
.fgrid{display:grid;gap:10px}
@media (min-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
.fcard{display:flex;gap:12px;align-items:center;text-align:left;padding:10px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.fcard img{width:72px;height:90px;border-radius:12px;object-fit:cover;flex:none;background:var(--bg2)}
.ftxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ftxt strong{font-size:17px}
.ftxt span{font-size:13px;color:var(--ink2)}
.fcard.teaser{background:var(--bg2)}
.fcard.teaser strong{color:var(--ink2)}
.diff b{color:var(--coral-d)}
.fnote{font-weight:700;color:var(--ink)!important}

/* ---------- levels ---------- */
.lvls{display:grid;gap:8px}
.lvl{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);min-height:60px}
.lvl .num{width:34px;height:34px;border-radius:10px;background:var(--coral);color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
.lvl.locked{opacity:.55}
.lvl.locked .num{background:var(--bg2);color:var(--ink3)}
.lvl .meta{flex:1;display:flex;flex-direction:column;min-width:0}
.lvl .meta span{font-size:12.5px;color:var(--ink3)}
.lvl .lock{font-size:12px;color:var(--ink3);font-weight:700}
.later{box-shadow:none}
.stars{display:inline-flex;gap:1px;font-size:17px;color:var(--line)}
.stars i{font-style:normal}
.stars i.on{color:var(--gold)}

/* ---------- briefing ---------- */
.brief{display:flex;gap:14px;padding:12px;align-items:center}
.bphoto{width:110px;height:138px;border-radius:14px;object-fit:cover;flex:none;background:var(--bg2)}
.brief h1{font-size:21px}
.brief .zone{color:var(--ink2);font-size:14px}
.brief .catch{font-style:italic;color:var(--plum-l);font-weight:600}
@media (prefers-color-scheme: dark){.brief .catch{color:#cdbff0}}
.traits{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:8px 0}
.traits dt{font-weight:800;font-size:13.5px}
.traits dd{margin:0;font-size:13.5px;color:var(--ink2)}
.extra{margin:6px 0 0;padding-left:18px;font-size:13.5px;color:var(--ink2)}

/* ---------- the game: map above, panel below ---------- */
body[data-screen="game"] .view{max-width:none;padding:0;gap:0;height:calc(100dvh - var(--top) - env(safe-area-inset-top));flex:none}
body[data-screen="game"] .foot{padding:4px 10px calc(4px + env(safe-area-inset-bottom));font-size:10.5px}
body[data-screen="game"] .foot span+span{display:none}
body[data-screen="game"].ib-room .foot{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
.game{display:flex;flex-direction:column;height:100%;min-height:0}
.gbar{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--card);border-bottom:1px solid var(--line)}
.gbar img{width:34px;height:34px;border-radius:9px;object-fit:cover}
.gt{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.gt strong{font-size:15px}
.gt span{font-size:12px;color:var(--ink3)}
.dots{display:grid;grid-template-columns:repeat(5,9px);gap:4px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dots i.used{background:var(--plum-l)}
.dots i.now{background:var(--coral);box-shadow:0 0 0 2px rgba(255,138,92,.35)}
.mapwrap{position:relative;flex:1 1 auto;min-height:36vh;background:var(--bg2);overflow:hidden}
.board{position:absolute;inset:0}
.gmap{position:absolute;inset:0}
.plainboard{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch}
.hexsvg.plain{display:block;width:100%;height:100%}
.board.result .hexsvg.plain{height:auto}
.hexsvg.ongoogle{position:absolute;pointer-events:none;overflow:visible}
.mapmsg{position:absolute;left:8px;right:8px;top:8px;z-index:5;display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:8px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg);font-size:13px}
.mapwrap.has-msg .plainboard{top:76px}
.msgx{flex:none;width:36px;height:36px;font-size:22px;line-height:1;color:var(--ink3)}
.zoombtns{position:absolute;right:8px;bottom:8px;z-index:4;display:flex;flex-direction:column;gap:6px}
.zoombtns button{width:44px;height:44px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:22px;font-weight:700;box-shadow:var(--shadow)}
.panel{flex:0 0 auto;max-height:48vh;overflow:auto;padding:10px 12px 12px;background:var(--bg);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
body.ib-room .panel{padding-bottom:12px}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.tabs button{min-height:40px;border-radius:10px;background:var(--bg2);font-size:13px;font-weight:700;color:var(--ink2)}
.tabs button.on{background:var(--plum);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:38px;padding:6px 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:600}
.chip.on{background:var(--coral);border-color:var(--coral);color:#fff}
.chip:disabled{opacity:.4;text-decoration:line-through}
.qbody{display:flex;flex-direction:column;gap:6px}
.actions{display:flex;flex-direction:column;gap:6px}
.status{font-size:13.5px;color:var(--ink2);margin:0}
.tickets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ticket{min-height:54px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.ticket strong{font-size:14px}
.ticket span{font-size:11px;color:var(--ink3)}
.ticket.on{background:var(--green);border-color:var(--green);color:#fff}
.ticket.on span{color:#dff5ea}
.ticket:disabled{opacity:.4}
.doubt{display:flex;flex-direction:column;gap:6px}
.logbox summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--ink2);min-height:32px;display:flex;align-items:center}
.log{margin:4px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px}
.log li{padding:5px 8px;border-radius:8px;background:var(--card);border:1px solid var(--line)}
.log li.free{background:var(--green-bg)}
.log li.say{font-style:italic}
.yes{color:var(--green)}
.no{color:var(--red)}

/* Hexagons. Possible cells sit under plum fog; ruled-out cells are dimmed but still tappable. */
.hx{stroke:var(--plum);stroke-opacity:.35;stroke-width:1;fill:transparent;vector-effect:non-scaling-stroke}
.plain .hx-land{fill:#fff;fill-opacity:.55}
.hx-water{fill:none;stroke:none}
.plain .hx-water{fill:var(--water);fill-opacity:.7}
.hx.hx-fog{fill:var(--plum);fill-opacity:.32}
.hx.hx-out{fill:#8a8a8a;fill-opacity:.12;stroke-opacity:.18}
.plain .hx.hx-out{fill:#bdb6c8;fill-opacity:.35}
.hx.hx-miss{fill:var(--red);fill-opacity:.35}
.hx.hx-open{fill:#fff;fill-opacity:.06}
.hx.hx-area{fill:var(--coral);fill-opacity:.28}
.hx.hx-reach{fill:var(--green);fill-opacity:.38;stroke:var(--green);stroke-opacity:.95;stroke-width:1.5}
.hx.hx-sel{stroke:var(--coral-d);stroke-opacity:1;stroke-width:3.5}
.hx.hx-true{fill:var(--coral);fill-opacity:.9;stroke:#fff;stroke-opacity:1;stroke-width:2.5}
.trail{fill:none;stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.trail-friend{stroke:var(--coral-d)}
.trail-player{stroke:var(--plum-l);stroke-dasharray:7 5}
/* Only hexagons take taps; markers, trails and the outline sit on top without catching them. */
.hx-marks,.hx-trail{pointer-events:none}
.mk text{font-size:11px;font-weight:800;fill:#fff;pointer-events:none}
.mk circle{stroke:#fff;stroke-width:2}
.mk-player circle{fill:var(--plum)}
.mk-friend circle{fill:var(--coral-d)}
.mk-decoy circle{fill:#8b8299}
.mk-pin circle{fill:var(--green)}
.mk-anchor path{fill:var(--gold);stroke:#fff;stroke-width:1.5}
.mk-anchor text{fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;font-size:12px}
.plain .mk text{font-size:18px}
.plain .mk circle{transform:scale(1.6)}

/* ---------- result ---------- */
.resulthead{display:flex;gap:14px;align-items:flex-start}
.resulthead img{width:72px;height:90px;border-radius:12px;object-fit:cover;flex:none}
.resulthead h1{font-size:22px}
.resulthead.won h1{color:var(--green)}
.said{font-style:italic;color:var(--ink2)}
.ailine{margin:6px 0 0;padding:8px 10px;border-radius:10px;background:var(--bg2);font-size:14px}
.ailine small{display:block;color:var(--ink3);font-size:11.5px;margin-top:3px}
.board.result{position:relative;height:auto;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.board.result .plainboard{position:relative}
.facts{margin:0;padding-left:18px;font-size:14px}
.seed{font-size:12px;color:var(--ink3)}
.seed code{font-size:12px}
.row.wrap{flex-wrap:wrap}

.prose h3{font-size:16px;margin-top:10px}
.prose h3:first-child{margin-top:0}
.prose p,.prose li{font-size:14px;color:var(--ink2)}
.prose ul{padding-left:18px}

/* ---------- install bar, along the bottom ---------- */
.ib-bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;align-items:center;gap:12px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(36,27,63,.14);transform:translateY(120%);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.ib-bar.ib-up{transform:translateY(0)}
.ib-icon{width:42px;height:42px;border-radius:10px;flex:none}
.ib-text{flex:1;min-width:0}
.ib-title{font-size:14px;font-weight:700;line-height:1.25}
.ib-hint{font-size:12px;color:var(--ink3);line-height:1.35;margin-top:2px}
.ib-btn{flex:none;border-radius:99px;padding:10px 20px;font-size:14px;font-weight:700;color:#fff;background:var(--coral-d);min-height:44px}
.ib-btn:disabled{opacity:.55}
.ib-close{flex:none;font-size:24px;line-height:1;color:var(--ink3);padding:4px 8px;min-height:44px;min-width:44px}