@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/press-start-2p-latin-400.woff2") format("woff2")}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/vt323-latin-400.woff2") format("woff2")}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0612;
  --text:#f0e6ff;
  --muted:rgba(232,210,255,.72);
  --pink:#ff4ecd;
  --cyan:#3df0ff;
  --green:#86efac;
  --green-mid:#4ade80;
  --green-deep:#14532d;
  --purple:#a855f7;
  --sea:#120a28;
  --land:#2c1b57;
  --land-line:#9b7fe0;
  --pixel:"Press Start 2P",ui-monospace,"SF Mono",Menlo,monospace;
  --display:"VT323","Courier New",ui-monospace,monospace;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
}

html{height:100%}
html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
body{user-select:none;-webkit-user-select:none}

#app{
  position:relative;
  height:calc(100vh - var(--rg-bar));
  height:calc(100dvh - var(--rg-bar));
  height:calc(var(--app-height,100dvh) - var(--rg-bar));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%,rgba(61,240,255,.12),transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 80%,rgba(255,78,205,.1),transparent 50%),
    radial-gradient(ellipse 45% 35% at 0% 70%,rgba(192,132,252,.12),transparent 50%),
    #0a0612;
}

/* ---- HUD ---- */
#hud{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.35rem max(.7rem,var(--safe-right)) .35rem max(.7rem,var(--safe-left));
  border-bottom:3px solid var(--green);
  box-shadow:0 3px 0 #0a2e18,0 8px 24px rgba(0,0,0,.35);
  background:linear-gradient(180deg,#2a1848 0%,#160c28 100%);
  z-index:5;
}
.hud-block{display:flex;flex-direction:column;align-items:flex-start;line-height:1;min-width:3.4rem}
.hud-block .label{font-family:var(--pixel);font-size:.5rem;color:var(--muted);letter-spacing:.06em}
.hud-block span:last-child{font-family:var(--display);font-size:1.6rem;color:var(--green);margin-top:.15rem}
.marquee{flex:1;text-align:center;font-family:var(--pixel);font-size:clamp(.5rem,1.3vw,.68rem);letter-spacing:.08em;color:var(--green);text-shadow:1px 1px 0 #0a2e18;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btn-menu{margin-left:auto}
.marquee+.hud-block{margin-left:0}

/* ---- Buttons ---- */
.btn{
  font-family:var(--pixel);
  font-size:.62rem;
  letter-spacing:.04em;
  line-height:1.3;
  min-height:44px;
  padding:.5rem .9rem;
  color:var(--text);
  background:#2a1a52;
  border:3px solid #fff;
  box-shadow:3px 3px 0 #3b0764;
  cursor:pointer;
  touch-action:manipulation;
  text-align:center;
}
.btn small{font-family:var(--pixel);font-size:.5rem;color:var(--pink)}
.btn:hover:not(:disabled){background:#3a2468}
.btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 #3b0764}
.btn.primary{background:var(--green-mid);color:#052e16;border-color:#fff;box-shadow:3px 3px 0 var(--green-deep)}
.btn.primary:hover:not(:disabled){background:var(--green)}
.btn.ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.55);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:focus-visible,.tool:focus-visible,.photo-btn:focus-visible,#map-wrap:focus-visible,a:focus-visible{outline:3px solid #ffd166;outline-offset:2px}

/* ---- Stage layout (portrait first) ---- */
#stage{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,44fr) minmax(0,56fr) auto;
  grid-template-areas:"photo" "map" "dock";
  gap:.45rem;
  padding:.45rem max(.5rem,var(--safe-right)) .3rem max(.5rem,var(--safe-left));
}
#photo-pane{grid-area:photo;position:relative;min-height:0;min-width:0;border:3px solid #fff;box-shadow:3px 3px 0 #3b0764;background:#000;overflow:hidden}
#map-pane{grid-area:map;position:relative;min-height:0;min-width:0}
#dock{grid-area:dock;min-width:0}

@media (min-aspect-ratio:10/9){
  #stage{
    grid-template-columns:minmax(0,41fr) minmax(0,59fr);
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"photo map" "dock map";
    column-gap:.7rem;
    row-gap:.5rem;
    padding:.6rem max(.7rem,var(--safe-right)) .4rem max(.7rem,var(--safe-left));
  }
}

/* photo */
.photo-btn{display:block;position:absolute;inset:0;width:100%;height:100%;background:#000;border:0;cursor:zoom-in;padding:0}
#photo{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.photo-zoom{position:absolute;right:.4rem;top:.4rem;font-family:var(--pixel);font-size:.45rem;color:#fff;background:rgba(10,6,18,.78);padding:.35rem .45rem;border:2px solid rgba(255,255,255,.7)}
.hint-bubble{
  position:absolute;left:.4rem;right:.4rem;bottom:.4rem;
  display:flex;align-items:center;gap:.55rem;
  padding:.45rem .55rem;
  background:#fff8dc;color:#1c1917;
  border:3px solid #1c1917;box-shadow:3px 3px 0 rgba(0,0,0,.4);
  font-size:.82rem;line-height:1.3;
  max-height:60%;overflow:auto;
}
.hint-bubble[hidden]{display:none}
.hint-bubble{cursor:pointer}
.hint-bubble.collapsed{right:auto;padding:.25rem;gap:0}
.hint-bubble.collapsed p{display:none}
.hint-bubble:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
.hint-bubble .hb-x{flex:0 0 auto;align-self:flex-start;font-family:var(--pixel);font-size:.5rem;color:#57534e}
.hint-bubble.collapsed .hb-x{display:none}
.hint-bubble p{user-select:text;-webkit-user-select:text}

/* ---- Squipy (same look as the other Squipy games) ---- */
.squipy-avatar{
  flex:0 0 auto;
  width:3.4rem;height:3.4rem;
  background:linear-gradient(160deg,#e9d5ff,#a855f7 50%,#5b21b6);
  border:3px solid #fff;
  box-shadow:3px 3px 0 #3b0764,0 0 16px rgba(168,85,247,.5);
  display:grid;place-items:center;
  animation:sq-bob 1.2s steps(2,end) infinite;
}
.squipy-avatar.small{width:2.5rem;height:2.5rem;font-size:.75rem;animation:none}
.squipy-avatar.big{width:5.4rem;height:5.4rem;font-size:1.6rem}
.squipy-avatar{font-size:1rem}
@keyframes sq-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.sq-face{position:relative;width:1.65em;height:1.1em}
.sq-face .brow{position:absolute;top:-.05em;width:.42em;height:.1em;background:#0f172a}
.sq-face .brow.left{left:.12em}.sq-face .brow.right{right:.12em}
.sq-face .eye{position:absolute;top:.14em;width:.3em;height:.3em;background:#0f172a}
.sq-face .eye.left{left:.14em}.sq-face .eye.right{right:.14em}
.sq-face .eye::after{content:"";position:absolute;top:.04em;right:.04em;width:.08em;height:.08em;background:rgba(255,255,255,.7)}
.sq-face .mouth{position:absolute;left:50%;bottom:0;width:.65em;height:.22em;border-bottom:2.5px solid #0f172a;transform:translateX(-50%)}
.sq-face .cheek{position:absolute;bottom:.22em;width:.22em;height:.14em;background:rgba(244,114,182,.7);opacity:.7}
.sq-face .cheek.left{left:-.04em}.sq-face .cheek.right{right:-.04em}
.squipy-avatar[data-mood="think"] .brow.left{transform:rotate(12deg)}
.squipy-avatar[data-mood="think"] .brow.right{transform:rotate(-12deg)}
.squipy-avatar[data-mood="think"] .eye{height:.1em;top:.26em}
.squipy-avatar[data-mood="think"] .eye::after{display:none}
.squipy-avatar[data-mood="hype"] .eye{width:.38em;height:.38em;top:.06em;background:#fff;box-shadow:inset 0 0 0 .08em #0f172a}
.squipy-avatar[data-mood="hype"] .eye::after{top:.1em;right:.08em;width:.1em;height:.1em;background:#0f172a}
.squipy-avatar[data-mood="hype"] .mouth{width:.48em;height:.45em;border:2.5px solid #0f172a;bottom:-.08em}

/* ---- Map ---- */
#map-wrap{position:absolute;inset:0;border:3px solid #fff;box-shadow:3px 3px 0 #3b0764;background:var(--sea);overflow:hidden;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
#map-wrap.is-reveal{cursor:grab}
#map{display:block;width:100%;height:100%;touch-action:none}
#map .state{fill:var(--land);stroke:var(--land-line);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#map .inset-box{fill:rgba(255,255,255,.03);stroke:rgba(155,127,224,.65);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
#map .lbl{font-family:var(--pixel);fill:rgba(232,210,255,.55);font-size:9px;text-anchor:middle;pointer-events:none}
#map .lbl.st{font-size:8px;fill:rgba(232,210,255,.5)}
#map .lbl.inset{fill:rgba(232,210,255,.75)}
#map .dc{fill:#ffd166;stroke:#1c1917;stroke-width:1;vector-effect:non-scaling-stroke}
#map .pin-guess .pin-body{fill:var(--pink);stroke:#fff;stroke-width:2}
#map .pin-truth .pin-body{fill:var(--green-mid);stroke:#fff;stroke-width:2}
#map .pin-dot{fill:#fff}
#map .line{stroke:#fff;stroke-width:2.5;stroke-dasharray:7 6;fill:none;vector-effect:non-scaling-stroke}
#map .crosshair line{stroke:var(--cyan);stroke-width:2;vector-effect:non-scaling-stroke}
#map .crosshair circle{fill:none;stroke:var(--cyan);stroke-width:2;vector-effect:non-scaling-stroke}
.map-tools{position:absolute;right:.4rem;top:.4rem;display:flex;flex-direction:column;gap:.35rem}
.tool{width:44px;height:44px;font-family:var(--pixel);font-size:.9rem;line-height:1;color:#fff;background:rgba(10,6,18,.85);border:2px solid rgba(255,255,255,.8);cursor:pointer;touch-action:manipulation}
.tool:hover{background:#3a2468}
.map-hint{position:absolute;right:.5rem;bottom:.4rem;max-width:42%;text-align:right;font-family:var(--pixel);font-size:.45rem;line-height:1.5;color:var(--muted);text-shadow:0 1px 2px #000;pointer-events:none}

/* ---- Dock ---- */
#dock{padding:0 0 var(--safe-bottom)}
.dock-guess{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.dock-guess[hidden],.dock-result[hidden]{display:none}
.dock-note{grid-column:1/-1;font-family:var(--pixel);font-size:.45rem;line-height:1.5;color:var(--muted);text-align:center}
.dock-result{display:grid;grid-template-columns:1fr auto;gap:.15rem .6rem;align-items:center;padding:.1rem 0}
.dock-result p{min-width:0}
.res-place{grid-column:1/-1;font-family:var(--display);font-size:1.45rem;line-height:1.05;color:var(--green)}
.res-score{font-size:.92rem;line-height:1.25}
.res-score strong{color:var(--pink)}
.res-credit{grid-column:1/-1;font-size:.7rem;line-height:1.35;color:var(--muted);user-select:text;-webkit-user-select:text}
.res-credit a{color:var(--cyan)}
.dock-result .btn{grid-column:2;grid-row:2 / span 1}

/* ---- Footer bar ---- */
.footer-bar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:.1rem max(.8rem,var(--safe-right)) calc(.15rem + var(--safe-bottom)) max(.8rem,var(--safe-left));font-family:var(--pixel);font-size:.4rem;color:rgba(232,210,255,.5)}
.footer-bar p{line-height:1.6}

/* ---- Overlays ---- */
.overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:.8rem max(.8rem,var(--safe-right)) .8rem max(.8rem,var(--safe-left));background:rgba(6,3,14,.82)}
.overlay[hidden]{display:none}
.panel{width:min(34rem,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:1rem 1.1rem 1.1rem;background:linear-gradient(180deg,#2a1848,#160c28);border:3px solid #fff;box-shadow:5px 5px 0 #3b0764;text-align:center;user-select:text;-webkit-user-select:text}
.panel-tag{font-family:var(--pixel);font-size:.55rem;color:var(--pink);letter-spacing:.08em;margin-bottom:.4rem}
.panel h1,.panel h2{font-family:var(--pixel);font-size:clamp(.95rem,3.2vw,1.35rem);line-height:1.35;color:var(--green);margin-bottom:.5rem;text-shadow:2px 2px 0 #0a2e18}
.panel .lead{font-size:.95rem;line-height:1.45;margin:.4rem 0 .6rem;color:var(--text)}
.panel ul.how{list-style:none;text-align:left;font-size:.88rem;line-height:1.4;margin:.4rem auto .7rem;max-width:26rem}
.panel ul.how li{padding-left:1.3rem;position:relative;margin-bottom:.3rem}
.panel ul.how li::before{content:"◆";position:absolute;left:0;color:var(--pink);font-size:.7rem;top:.15rem}
.panel .actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.7rem}
.panel .actions .btn{flex:1 1 9rem}
.panel .best{font-family:var(--pixel);font-size:.5rem;line-height:1.7;color:var(--muted);margin-top:.5rem}
.panel .best strong{color:#ffd166}
.panel a{color:var(--cyan)}
.panel a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;color:var(--text)}
.rating{display:flex;align-items:center;gap:.8rem;text-align:left;margin:.5rem 0}
.rating .quote{font-size:.95rem;line-height:1.35}
.rating .quote b{display:block;font-family:var(--pixel);font-size:.6rem;color:#ffd166;margin-bottom:.3rem;line-height:1.5}
.final{font-family:var(--display);font-size:3rem;line-height:1;color:var(--green)}
.final small{font-size:1.4rem;color:var(--muted)}
.recap{list-style:none;margin:.5rem 0 .2rem;text-align:left;font-size:.82rem}
.recap li{display:grid;grid-template-columns:1.4rem minmax(0,1fr) auto;gap:.5rem;padding:.3rem .2rem;border-bottom:1px solid rgba(255,255,255,.12);align-items:baseline}
.recap .n{font-family:var(--pixel);font-size:.55rem;color:var(--pink)}
.recap .pl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recap .pl small{color:var(--muted)}
.recap .pt{font-family:var(--display);font-size:1.15rem;color:var(--green)}
.credits-list{list-style:none;text-align:left;margin:.5rem 0;font-size:.8rem;line-height:1.4}
.credits-list li{padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.credits-list b{color:var(--green)}
.credits-list .links{display:block;color:var(--muted)}
.fine{font-size:.74rem;line-height:1.4;color:var(--muted);text-align:left}

/* lightbox */
.lightbox{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.94);display:grid;place-items:center;padding:.5rem}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;min-width:0;min-height:0}
.lb-close{position:absolute;top:max(.5rem,var(--safe-top));right:max(.5rem,var(--safe-right))}

/* ---- Short landscape phones ---- */
@media (max-height:480px) and (min-aspect-ratio:10/9){
  #hud{padding-block:.2rem}
  .hud-block span:last-child{font-size:1.3rem}
  .marquee{display:none}
  .btn{min-height:40px;padding:.3rem .5rem;font-size:.55rem}
  .dock-guess{grid-template-columns:1fr 1fr;gap:.35rem}
  .dock-note{display:none}
  .res-place{font-size:1.2rem}
  .res-score{font-size:.8rem}
  .res-credit{font-size:.62rem;line-height:1.25}
  .hint-bubble{font-size:.72rem;padding:.3rem .4rem;gap:.4rem}
  .squipy-avatar.small{width:2rem;height:2rem;font-size:.6rem}
  .photo-zoom{display:none}
  .footer-bar{display:none}
  .panel{padding:.6rem .8rem .7rem}
  .squipy-avatar.big{width:3.6rem;height:3.6rem;font-size:1.05rem}
  .final{font-size:2.2rem}
  .map-hint{display:none}
  .tool{width:38px;height:38px}
  .map-tools{gap:.25rem}
  #stage{padding-block:.35rem .3rem}
}
@media (max-width:420px) and (max-aspect-ratio:10/9){
  .hud-block{min-width:0}
  .marquee{font-size:.45rem;letter-spacing:0}
  .btn{padding:.4rem .5rem;font-size:.55rem}
  .res-place{font-size:1.25rem}
}
@media (max-aspect-ratio:10/9){
  .map-hint{display:none}
}
@media (max-height:640px) and (max-aspect-ratio:10/9){
  .dock-note{display:none}
  .footer-bar{display:none}
  .res-credit{font-size:.64rem}
}

@media (prefers-reduced-motion:reduce){
  .squipy-avatar{animation:none}
  *{scroll-behavior:auto!important}
}