/* =====================================================================
   MARIUS'S ISLAND · TOWN PANELS ("fiches")
   Drop-in: <link rel="stylesheet" href="panel.css"> + panels-data.js + panel.js
   Chrome matches proposals/map-v2: Press Start 2P + VT323, ink / bone /
   gold / blood, hard offset shadows, stepped (chunky) motion, body.night.
   Readability: Press Start never under 11px, VT323 body never under 20px
   (VT323 at 20px reads like a 14-15px sans; 16px is the floor asked).
   ===================================================================== */

.ip{
  /* palette shared with the map */
  --ink:#1a1420; --bone:#f3ead2; --gold:#ffc83d; --blood:#ff4566;
  /* day = paper panel, ink frame */
  --ip-bg:#f3ead2; --ip-tile:#fbf5e7; --ip-text:#1a1420; --ip-sub:#5b4d63;
  --ip-line:#1a1420; --ip-soft:rgba(26,20,32,.18); --ip-num:#1a1420;
  --ip-focus:#d4145a; --ip-fill-bg:#ffe1e6; --ip-fill-ink:#a1102f;
  --acc:#ffc83d;
  --acc-ink:color-mix(in oklab,var(--acc) 42%,#1a1420);   /* accent that reads on paper */
  --ip-ease:cubic-bezier(.23,1,.32,1);
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  font-family:'VT323',monospace;-webkit-font-smoothing:none;color:var(--ip-text);
}
body.night .ip{
  --ip-bg:#1a1420; --ip-tile:#231b2c; --ip-text:#f3ead2; --ip-sub:#b9adc8;
  --ip-line:#f3ead2; --ip-soft:rgba(243,234,210,.2); --ip-num:#ffc83d;
  --ip-focus:#ffc83d; --ip-fill-bg:#3a1020; --ip-fill-ink:#ff9fb1;
  --acc-ink:var(--acc);
}
.ip[hidden]{display:none}
.ip *{box-sizing:border-box}
.ip :focus-visible{outline:3px solid var(--ip-focus);outline-offset:2px}

/* dithered pixel backdrop: the map stays visible behind, dimmed */
.ip-backdrop{position:absolute;inset:0;cursor:pointer;
  background:
    repeating-conic-gradient(rgba(26,20,32,.42) 0 25%,transparent 0 50%) 0 0/4px 4px,
    rgba(26,20,32,.28);
  animation:ip-fade .16s linear both}
body.night .ip-backdrop{background:
    repeating-conic-gradient(rgba(6,8,24,.55) 0 25%,transparent 0 50%) 0 0/4px 4px,
    rgba(6,8,24,.35)}

/* ---------- window ---------- */
.ip-win{position:relative;display:flex;flex-direction:column;
  width:min(940px,calc(100vw - 48px));max-height:min(820px,calc(100dvh - 48px));outline:none;
  background:var(--ip-bg);border:3px solid var(--ink);
  box-shadow:8px 8px 0 0 var(--acc),8px 8px 0 3px var(--ink);
  animation:ip-pop .22s steps(4) both;container-type:inline-size;container-name:ipwin}
.ip.closing .ip-win{animation:ip-out .14s steps(3) both}
.ip.closing .ip-backdrop{animation:ip-fade .14s linear reverse both}
@keyframes ip-pop{from{transform:scale(.9) translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes ip-out{to{transform:scale(.94) translateY(6px);opacity:0}}
@keyframes ip-fade{from{opacity:0}}

/* title bar: always ink, like the map's plates */
.ip-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--ink);color:var(--bone);padding:9px 10px 9px 14px;border-bottom:3px solid var(--acc)}
.ip-file{font:400 11px/1.3 'Press Start 2P';letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-file b{font-weight:400;color:var(--acc)}
.ip-x{flex:none;font:400 11px/1 'Press Start 2P';color:var(--ink);background:var(--gold);border:2px solid var(--bone);
  padding:8px 10px 7px;cursor:pointer;min-height:36px;box-shadow:3px 3px 0 var(--blood);
  transition:transform .12s var(--ip-ease),box-shadow .12s var(--ip-ease)}
@media (hover:hover){.ip-x:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--blood)}}
.ip-x:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--blood)}
.ip-x .t{display:none}
@media (pointer:coarse){.ip-x .k{display:none}.ip-x .t{display:inline}}

.ip-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 26px 26px;
  scrollbar-color:var(--ip-sub) transparent}

/* ---------- header ---------- */
.ip-head{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
/* stop marker = a French road milestone ("borne"): white post, coloured cap */
.ip-borne-w{padding:3px;filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink))}
body.night .ip-borne-w{filter:drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000)}
.ip-borne{width:60px;height:76px;position:relative;display:grid;place-items:end center;padding-bottom:13px;background:#fbf7ee;
  clip-path:polygon(30% 0,70% 0,70% 3px,82% 3px,82% 6px,90% 6px,90% 11px,100% 11px,100% 100%,0 100%,0 11px,10% 11px,10% 6px,18% 6px,18% 3px,30% 3px);
  font:400 18px/1 'Press Start 2P';color:var(--ink)}
.ip-borne::before{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:var(--acc);border-bottom:3px solid var(--ink)}
.ip-borne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(26,20,32,.16)}
.ip-borne.side::before{background:var(--blood)}
.ip-borne.side{font-size:24px;padding-bottom:10px}
.ip-icon{width:88px;height:88px;border:3px solid var(--ink);background:var(--ink);overflow:hidden;
  clip-path:polygon(9px 0,calc(100% - 9px) 0,calc(100% - 9px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 9px,100% 9px,100% calc(100% - 9px),calc(100% - 3px) calc(100% - 9px),calc(100% - 3px) calc(100% - 3px),calc(100% - 9px) calc(100% - 3px),calc(100% - 9px) 100%,9px 100%,9px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 9px),0 calc(100% - 9px),0 9px,3px 9px,3px 3px,9px 3px)}
.ip-icon img,.ip-icon svg{display:block;width:100%;height:100%;object-fit:cover}
.ip-icon svg{shape-rendering:crispEdges;image-rendering:pixelated}

.ip-level .town-m{display:none}
.ip-level{margin:2px 0 10px;font:400 11px/1.4 'Press Start 2P';color:var(--acc-ink);letter-spacing:.03em}
.ip-title{margin:0;font:400 clamp(22px,3.3cqi,32px)/1.15 'Press Start 2P';color:var(--ip-text);letter-spacing:.01em;text-wrap:balance}
.ip-role{margin:10px 0 0;font-size:27px;line-height:1.05;color:var(--ip-text)}
.ip-meta{margin:5px 0 0;font-size:23px;line-height:1.1;color:var(--ip-sub)}
.ip-meta::before{content:"";display:inline-block;width:8px;height:10px;margin-right:8px;vertical-align:1px;background:var(--acc-ink);
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 60%,50% 100%,0 60%,0 25%)}

.ip-hook{margin:20px 0 0;font-size:29px;line-height:1.08;max-width:56ch;color:var(--ip-text);text-wrap:pretty}

/* city strip (studio-level facts, clearly not "mine") */
.ip-strip{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;font-size:23px;color:var(--ip-sub)}
.ip-strip b{font:400 14px/1 'Press Start 2P';color:var(--ip-text);margin-right:6px}
.ip-strip span:first-child{font:400 11px/1 'Press Start 2P';color:var(--acc-ink)}

/* ---------- tabs ---------- */
.ip-tabs{display:flex;gap:8px;margin:24px 0 0;padding-bottom:0;border-bottom:3px solid var(--ip-line);overflow-x:auto;scrollbar-width:none}
.ip-tab{flex:none;font:400 11px/1.2 'Press Start 2P';color:var(--ip-text);background:transparent;border:3px solid var(--ip-line);border-bottom:0;
  padding:11px 12px 9px;cursor:pointer;min-height:40px;margin-bottom:-3px;transition:background-color .12s steps(2)}
.ip-tab[aria-selected="true"]{background:var(--acc);color:var(--ink);border-bottom:3px solid var(--acc)}
body.night .ip-tab[aria-selected="true"]{border-color:var(--acc)}
@media (hover:hover){.ip-tab[aria-selected="false"]:hover{background:var(--ip-soft)}}

.ip-pane{animation:ip-fade .14s steps(2) both}
.ip-sub{margin:20px 0 0}
.ip-sub .ip-role{margin:0;font-size:26px}
.ip-sub .ip-meta{font-size:22px}
.ip-lead{margin:12px 0 0;font-size:26px;line-height:1.1;max-width:58ch;text-wrap:pretty}

/* ---------- body grid ---------- */
.ip-grid{display:grid;gap:26px;margin-top:24px}
@container ipwin (min-width:760px){.ip-grid{grid-template-columns:1.08fr 1fr}}
.ip-h{margin:0 0 12px;font:400 11px/1.2 'Press Start 2P';color:var(--ip-text);display:flex;align-items:center;gap:9px;letter-spacing:.03em}
.ip-h::before{content:"";width:8px;height:8px;background:var(--acc);outline:2px solid var(--ink);flex:none}

/* key numbers: big number first, label second */
.ip-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.ip-tile{background:var(--ip-tile);border:2px solid var(--ip-line);box-shadow:inset 0 4px 0 var(--acc);padding:16px 14px 12px;min-width:0}
.ip-num{display:grid;font:400 21px/1.2 'Press Start 2P';color:var(--ip-num);margin:0 0 8px;overflow-wrap:anywhere}
.ip-num>span{grid-area:1/1}
.ip-num .ghost{visibility:hidden}
.ip-lbl{display:block;font-size:23px;line-height:1.02;color:var(--ip-text)}
.ip-tile.wide{grid-column:1/-1}

/* what I did */
.ip-did{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.ip-did li{position:relative;padding-left:22px;font-size:24px;line-height:1.08;text-wrap:pretty}
.ip-did li::before{content:"";position:absolute;left:2px;top:8px;width:0;height:0;border:6px solid transparent;border-left:8px solid var(--acc-ink);border-right:0}

/* chips (tools, hit apps) */
.ip-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ip-chip{font-size:22px;line-height:1;padding:6px 10px 5px;border:2px solid var(--ip-line);background:var(--ip-tile);color:var(--ip-text)}
.ip-chip.hot{background:var(--acc);color:var(--ink);border-color:var(--ink)}
.ip-block{margin-top:26px}

/* [FILL] placeholders: impossible to miss */
.ip-fill{display:inline-block;padding:1px 7px 0;font:inherit;color:var(--ip-fill-ink);background:
  repeating-linear-gradient(135deg,var(--ip-fill-bg) 0 6px,transparent 6px 12px),var(--ip-tile);
  border:2px dashed var(--ip-fill-ink);line-height:1.15;white-space:nowrap}
.ip-num .ip-fill{font-size:.8em;padding:4px 8px 2px}

/* ---------- app cards (App District) ---------- */
.ip-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.ip-app{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;text-align:center;cursor:pointer;
  font:inherit;color:var(--ip-text);background:var(--ip-tile);border:2px solid var(--ip-line);padding:14px 10px 12px;
  box-shadow:3px 3px 0 var(--app,var(--acc));transition:transform .12s var(--ip-ease),box-shadow .12s var(--ip-ease)}
@media (hover:hover){.ip-app:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--app,var(--acc))}}
.ip-app:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--app,var(--acc))}
.ip-app .ip-icon{width:64px;height:64px;border-width:2px}
.ip-app .ip-status{justify-self:auto;margin-top:auto}
.ip-app-name{font:400 12px/1.25 'Press Start 2P'}
.ip-app-rev{grid-column:1/-1;font-size:22px;line-height:1;color:var(--ip-sub);margin-top:4px}
.ip-app-rev b{font:400 13px/1 'Press Start 2P';color:var(--ip-num);margin-right:6px}

/* status chips */
.ip-status{justify-self:start;display:inline-flex;align-items:center;gap:7px;font:400 11px/1 'Press Start 2P';
  padding:6px 8px 5px;border:2px solid var(--ink);color:var(--ink);background:#bfe8ff}
.ip-status::before{content:"";width:6px;height:6px;background:var(--ink)}
.ip-status.live{background:#7bd36a}
.ip-status.live::before{animation:ip-blink 1s steps(1) infinite}
.ip-status.review{background:var(--gold)}
.ip-status.build{background:repeating-linear-gradient(135deg,#ffd76a 0 6px,#f3ead2 6px 12px)}
.ip-status.soon{background:#bfe8ff}
@keyframes ip-blink{50%{opacity:0}}

/* app panel */
.ip-appline{margin:18px 0 0;font-size:29px;line-height:1.08;max-width:46ch;text-wrap:pretty}
.ip-revtile{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:22px 0 0;padding:0;list-style:none}
.ip-asof{display:block;margin-top:6px;font-size:22px;color:var(--ip-sub)}
.ip-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}

/* ---------- buttons (map style) ---------- */
.ip-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px 9px;
  font:400 11px/1.2 'Press Start 2P';color:var(--bone);background:var(--ink);border:2px solid var(--bone);
  box-shadow:3px 3px 0 var(--acc);cursor:pointer;text-decoration:none;
  transition:transform .12s var(--ip-ease),box-shadow .12s var(--ip-ease)}
@media (hover:hover){.ip-btn:not([aria-disabled="true"]):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--acc)}}
.ip-btn:not([aria-disabled="true"]):active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--acc)}
.ip-btn.gold{background:var(--gold);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--blood)}
@media (hover:hover){.ip-btn.gold:not([aria-disabled="true"]):hover{box-shadow:4px 4px 0 var(--blood)}}
.ip-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}
.ip-btn .s{display:none}

/* ---------- footer ---------- */
.ip-foot{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 16px 14px;
  border-top:3px solid var(--ip-line);background:var(--ip-bg)}
.ip-foot .prev{justify-self:start}
.ip-foot .next{justify-self:end}
.ip-road{display:flex;align-items:center;gap:6px}
.ip-road i{width:10px;height:10px;border:2px solid var(--ip-line);background:transparent}
.ip-road i.on{background:var(--acc);border-color:var(--ink);outline:2px solid var(--ip-line);outline-offset:1px}
.ip-road i.done{background:var(--ip-line)}
.ip-road i.side{border-style:dashed}

/* ---------- contact: sudo hire marius ---------- */
/* ---------- contact: HARBOUR NOTICE BOARD (wooden board on two posts, on the quay) ---------- */
.ip-scroll.ip-harbour{padding:0}
.ip-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ip-scene{position:relative;padding:56px 32px 0;overflow:hidden;
  background:linear-gradient(180deg,#8fd0ee 0,#c6eaf6 58%,#46a6bb 58%,#46a6bb 60%,#2874a0 60%)}
.ip-scene::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;
  box-shadow:60px 18px #fff,140px 40px #fff,230px 14px #cfd8ff,330px 30px #fff,410px 12px #fff,520px 44px #cfd8ff,610px 22px #fff,700px 36px #fff,790px 16px #fff,860px 48px #cfd8ff,96px 64px #fff,470px 70px #fff}
body.night .ip-scene{background:linear-gradient(180deg,#0e1736 0,#1b2a5a 58%,#244a7a 58%,#244a7a 60%,#11296b 60%)}
body.night .ip-scene::before{opacity:1}

.ip-board{position:relative;max-width:800px;margin:0 auto;padding:46px 28px 30px;
  background:
    repeating-linear-gradient(180deg,transparent 0 52px,#5a3520 52px 55px),
    repeating-linear-gradient(90deg,transparent 0 37px,rgba(90,53,32,.18) 37px 39px,transparent 39px 83px),
    linear-gradient(90deg,#9b6a3e,#a8744a 32%,#94623a 68%,#a06d43);
  border:6px solid #4a2c18;box-shadow:inset 0 0 0 3px #b8875a,inset 0 -8px 0 3px #7a4c2a,0 6px 0 rgba(26,20,32,.3)}
/* little roof */
.ip-board::before{content:"";position:absolute;left:-22px;right:-22px;top:-26px;height:18px;background:#5a3520;border:3px solid #3a2212;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 100%,0 100%)}
body.night .ip-board::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 100% 8%,rgba(255,200,61,.28),transparent 60%),rgba(12,16,44,.32)}
.ip-board-head{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:2;background:#6b4226;border:3px solid #3a2212;
  padding:8px 14px 7px;box-shadow:inset 0 2px 0 #8a5a34}
.ip-board-head span{font:400 12px/1 'Press Start 2P';color:#f3ead2;letter-spacing:.08em}

.ip-notes{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr 1fr;gap:28px 30px;align-items:start}
.ip-note{position:relative;display:block;margin:0;padding:30px 18px 16px;color:#1a1420;background:#fbf5e7;text-decoration:none;
  box-shadow:3px 4px 0 rgba(26,20,32,.38);transform:rotate(var(--r,0deg));transform-origin:50% 10px;
  transition:transform .18s var(--ip-ease),box-shadow .18s var(--ip-ease)}
.ip-note::after{content:"";position:absolute;right:0;bottom:0;width:14px;height:14px;background:linear-gradient(135deg,rgba(26,20,32,.22) 50%,transparent 50%)}
.ip-note.n1{--r:-2deg}
.ip-note.n2{--r:1.6deg;background:#fff2bf}
.ip-note.n3{--r:2.4deg;background:#e6f0f6}
.ip-note.n4{--r:-1.6deg;background:#f5e8ee}
@media (hover:hover){.ip-note:hover{transform:translateY(-5px) rotate(calc(var(--r) * .4));box-shadow:6px 10px 0 rgba(26,20,32,.28)}}
.ip-note:focus-within,.ip-note-link:focus-visible{transform:translateY(-5px) rotate(calc(var(--r) * .4))}
.ip-note.flap{animation:ip-flap .32s steps(6) both}
@keyframes ip-flap{0%{transform:rotate(var(--r))}25%{transform:translateY(-8px) rotate(calc(var(--r) - 10deg))}55%{transform:translateY(-4px) rotate(calc(var(--r) + 7deg))}80%{transform:translateY(-2px) rotate(calc(var(--r) - 3deg))}100%{transform:rotate(var(--r))}}
/* pin + tape */
.ip-note .pin{position:absolute;top:8px;left:50%;width:12px;height:12px;margin-left:-6px;background:#ff4566;
  box-shadow:inset 3px 3px 0 #ff9fb1,inset -3px -3px 0 #b3203d,0 0 0 2px #1a1420,2px 3px 0 2px rgba(26,20,32,.3)}
.ip-note .pin.tape{top:-6px;width:70px;height:20px;margin-left:-35px;transform:rotate(-4deg);box-shadow:none;
  background:repeating-linear-gradient(90deg,rgba(243,234,210,.82) 0 6px,rgba(225,214,184,.82) 6px 8px)}
.ip-note-k{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:400 12px/1.3 'Press Start 2P';color:#1a1420}
.ip-note.n1 .ip-note-k{font-size:22px;color:#b3203d;letter-spacing:.06em;margin-bottom:12px}
.ip-note-big{margin:0;font-size:34px;line-height:.95;color:#1a1420}
.ip-note-s{margin:10px 0 0;font-size:23px;line-height:1.05;color:#5b4d63}
.ip-note-mail{margin:0;font-size:29px;line-height:1;overflow-wrap:anywhere;color:#1a1420}
.ip-note-url{display:block;font-size:25px;line-height:1.05;color:#1a1420;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:break-word}
.ip-note .ip-ext{width:10px;height:10px;color:#1a1420}
.ip-note-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.ip-nbtn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 12px 9px;font:400 11px/1 'Press Start 2P';
  color:#1a1420;background:#fbf7ee;border:2px solid #1a1420;box-shadow:3px 3px 0 #1a1420;cursor:pointer;text-decoration:none;
  transition:transform .12s var(--ip-ease),box-shadow .12s var(--ip-ease)}
.ip-nbtn.gold{background:var(--gold);box-shadow:3px 3px 0 var(--blood)}
@media (hover:hover){.ip-nbtn:hover{transform:translate(-1px,-1px)}}
.ip-nbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1a1420}
.ip-note :focus-visible,.ip-note-link:focus-visible{outline:3px solid #d4145a;outline-offset:3px}
/* HIRED? stamp, after WRITE ME */
.ip-stamp{position:absolute;right:12px;bottom:14px;font:400 17px/1 'Press Start 2P';color:#d4145a;border:3px solid #d4145a;padding:8px 8px 6px;
  transform:rotate(-14deg);opacity:.88;pointer-events:none}
.ip-stamp[hidden]{display:none}
.ip-stamp.hit{animation:ip-stamp .26s steps(3) both}
@keyframes ip-stamp{from{transform:rotate(-14deg) scale(1.9);opacity:0}}

/* lantern on the right edge: off by day, lit at night */
.ip-lantern{position:absolute;right:-30px;top:12px;z-index:2;width:22px;height:34px;transform:scale(1.45);transform-origin:100% 0}
.ip-lantern::before{content:"";position:absolute;left:-10px;top:4px;width:18px;height:4px;background:#2a1e22}
.ip-lantern i{position:absolute;left:2px;top:8px;width:18px;height:22px;background:#9fb0b8;border:3px solid #2a1e22;
  box-shadow:inset 0 3px 0 #c9d4da}
.ip-lantern i::before{content:"";position:absolute;left:3px;top:-11px;width:6px;height:6px;border:3px solid #2a1e22;border-bottom:0}
body.night .ip-lantern i{background:#ffd36b;box-shadow:inset 0 3px 0 #fff2bf,0 0 0 6px rgba(255,200,61,.18),0 0 46px 22px rgba(255,190,70,.38);animation:ip-flicker 2.6s steps(1) infinite}
@keyframes ip-flicker{0%,100%{opacity:1}43%{opacity:.86}46%{opacity:1}71%{opacity:.92}}

/* seagull: flies in, lands on the roof, looks around; click = squawk */
.ip-gull{position:absolute;top:-66px;left:16%;z-index:3;width:80px;height:40px;padding:0;border:0;background:none;cursor:pointer;
  animation:ip-gull-in 1.4s steps(14) .4s both}
.ip-gull svg{display:block;width:80px;height:40px;shape-rendering:crispEdges;animation:ip-look 7s steps(1) 3s infinite}
.ip-gull .up{animation:ip-wing-a .24s steps(1) .4s 6 both}
.ip-gull .down{opacity:0;animation:ip-wing-b .24s steps(1) .4s 6 both}
.ip-gull .sit{animation:ip-sit 1.8s steps(1) both}
@keyframes ip-gull-in{from{transform:translate(340px,-120px)}to{transform:none}}
@keyframes ip-wing-a{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
@keyframes ip-wing-b{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes ip-sit{0%{opacity:0}100%{opacity:1}}
@keyframes ip-look{0%{transform:none}78%{transform:scaleX(-1)}92%{transform:none}}
.ip-gull.hop{animation:ip-hop .3s steps(3)}
@keyframes ip-hop{50%{transform:translateY(-8px)}}
.ip-gull:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ip-gull-say{position:absolute;bottom:calc(100% + 8px);left:0;white-space:nowrap;font:400 11px/1.2 'Press Start 2P';color:#1a1420;
  background:#fbf7ee;border:2px solid #1a1420;box-shadow:2px 2px 0 #1a1420;padding:7px 8px 6px}
.ip-gull-say[hidden]{display:none}

/* posts, quay, water */
.ip-posts{position:relative;max-width:800px;height:40px;margin:0 auto}
.ip-posts i{position:absolute;top:0;bottom:0;width:20px;background:linear-gradient(90deg,#6b4226 0 5px,#8a5a34 5px 15px,#5a3520 15px);border:3px solid #3a2212;border-top:0}
.ip-posts i:first-child{left:13%}
.ip-posts i:last-child{right:13%}
.ip-quay{height:34px;margin:0 -32px;border-top:3px solid #cfc8b8;
  background:
    linear-gradient(#6f6a60,#6f6a60) 0 15px/100% 3px no-repeat,
    repeating-linear-gradient(90deg,#a39d90 0 42px,#6f6a60 42px 45px) 0 0/100% 15px no-repeat,
    repeating-linear-gradient(90deg,#958f82 0 42px,#6f6a60 42px 45px) 22px 18px/100% 16px no-repeat,#8a8478}
.ip-water{height:26px;margin:0 -32px;background:repeating-linear-gradient(90deg,transparent 0 24px,#8ad3e0 24px 34px,transparent 34px 70px) 0 9px/100% 2px no-repeat,#2874a0;
  animation:ip-drift 3s steps(6) infinite}
@keyframes ip-drift{to{background-position:70px 9px,0 0}}
body.night .ip-quay{filter:brightness(.62) saturate(.8)}
body.night .ip-water{background-color:#11296b;background-image:repeating-linear-gradient(90deg,transparent 0 24px,#3c5a9a 24px 34px,transparent 34px 70px)}

/* about / start card */
.ip-index{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ip-index button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;cursor:pointer;
  font:inherit;font-size:23px;color:var(--ip-text);background:var(--ip-tile);border:2px solid var(--ip-line);padding:9px 12px;min-height:48px;
  transition:transform .12s var(--ip-ease)}
.ip-index button b{font:400 11px/1 'Press Start 2P';color:var(--ink);background:var(--c);border:2px solid var(--ink);padding:6px 6px 5px;min-width:36px;text-align:center}
.ip-index button em{font-style:normal;font:400 11px/1.2 'Press Start 2P'}
.ip-index button span{color:var(--ip-sub)}
@media (hover:hover){.ip-index button:hover{transform:translateX(3px)}}

/* hire button in every title bar */
.ip-bhire{flex:none;margin-left:auto;font:400 11px/1 'Press Start 2P';color:var(--gold);background:transparent;border:2px solid var(--gold);
  padding:8px 9px 7px;min-height:36px;cursor:pointer;transition:background-color .12s steps(2),color .12s steps(2)}
@media (hover:hover){.ip-bhire:hover{background:var(--gold);color:var(--ink)}}
.ip-bhire:active{transform:translate(1px,1px)}
.ip-bar .ip-x{margin-left:0}

/* fixed HIRE MARIUS button (map + preview), bottom-left, hidden while a panel is open */
.ip-hire{position:fixed;z-index:11;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:11px 13px 10px;font:400 11px/1 'Press Start 2P';
  color:var(--ink,#1a1420);background:var(--gold,#ffc83d);border:2px solid var(--ink,#1a1420);box-shadow:3px 3px 0 var(--blood,#ff4566);cursor:pointer;
  animation:ip-hire-in .3s steps(3) .8s both;transition:transform .12s cubic-bezier(.23,1,.32,1),box-shadow .12s cubic-bezier(.23,1,.32,1)}
.ip-hire .a{display:inline-block;animation:ip-nudge 3.6s steps(1) 2s infinite}
@media (hover:hover){.ip-hire:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--blood,#ff4566)}}
.ip-hire:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--blood,#ff4566)}
.ip-hire:focus-visible{outline:3px solid var(--bone,#f3ead2);outline-offset:2px}
html.ip-open .ip-hire{visibility:hidden}
/* phone + map town bar: the button lives in the bar (#jump) as its last cell */
.ip-hire-slot{display:none}
@media (max-width:699px){
  html.ip-has-slot .ip-hire{display:none}
  .ip-hire-slot{display:inline-flex;align-items:center;justify-content:center;gap:8px;order:99;
    font:400 11px/1 'Press Start 2P'!important;color:var(--ink,#1a1420)!important;background:var(--gold,#ffc83d)!important;
    border:2px solid var(--ink,#1a1420)!important;box-shadow:2px 2px 0 var(--blood,#ff4566)!important;min-height:32px!important;padding:7px 8px 6px!important;cursor:pointer}
  .ip-hire-slot:active{transform:translate(2px,2px)}
}
@keyframes ip-hire-in{from{transform:translateY(16px);opacity:0}}
@keyframes ip-nudge{0%,88%{transform:none}92%{transform:translateX(3px)}96%{transform:none}98%{transform:translateX(3px)}}

/* chips that are links (the 4 hit apps) */
.ip-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--ip-line);
  transition:transform .12s var(--ip-ease),box-shadow .12s var(--ip-ease)}
.ip-ext{width:9px;height:9px;flex:none;background:currentColor;clip-path:polygon(30% 0,100% 0,100% 70%,78% 70%,78% 37%,16% 100%,0 84%,63% 22%,30% 22%)}
@media (hover:hover){.ip-link:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ip-line);text-decoration:underline;text-underline-offset:3px}}
.ip-link:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ip-line)}
.ip-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* app panel (Paul's app window): sub · pitch, status row, screenshots strip */
.ip-pitch{color:var(--ip-sub)}
.ip-appmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:12px}
.ip-appmeta .ip-meta{margin:0}
.ip-store{min-height:38px;padding:8px 11px 7px}
.ip-solo{margin-top:20px}
.ip-shots{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 12px;margin-top:18px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-color:var(--ip-sub) transparent}
.ip-shots img{height:min(440px,52dvh);width:auto;flex:none;scroll-snap-align:start;border:2px solid var(--ip-line);background:var(--ip-tile);box-shadow:4px 4px 0 var(--acc)}

/* ---------- phone: full screen ---------- */
@media (max-width:700px){
  .ip{place-items:stretch}
  .ip-win{width:100%;max-height:none;height:100dvh;border:0;box-shadow:none;
    padding-top:env(safe-area-inset-top);animation-name:ip-rise}
  .ip.closing .ip-win{animation-name:ip-sink}
  .ip-scroll{padding:18px 16px 22px}
  /* header: milestone beside level + title, then role/meta use the full width */
  .ip-head{gap:0 14px}
  .ip-head>div:last-child{display:contents}
  .ip-head>.ip-borne-w,.ip-head>.ip-icon{grid-row:1/3}
  .ip-level,.ip-title{grid-column:2}
  .ip-level{align-self:end}
  .ip-head .ip-role,.ip-head .ip-meta,.ip-head>div:last-child>div{grid-column:1/-1}
  .ip-head .ip-role{margin-top:14px}
  .ip-borne{width:50px;height:62px;font-size:15px;padding-bottom:10px}
  .ip-file .town{display:none}
  .ip-level .town-m{display:block;margin-bottom:4px;color:var(--ip-text)}
  .ip-tab{padding:10px 9px 8px}
  .ip-icon{width:72px;height:72px}
  .ip-title{font-size:21px}
  .ip-role{font-size:24px}
  .ip-hook,.ip-appline{font-size:25px}
  .ip-lead{font-size:23px}
  .ip-nums{grid-template-columns:1fr 1fr;gap:8px}
  .ip-tile{padding:13px 10px 10px}
  .ip-num{font-size:16px}
  .ip-lbl{font-size:21px}
  .ip-did li{font-size:22px}
  .ip-apps{grid-template-columns:1fr 1fr}
  .ip-foot{padding:10px 12px calc(12px + env(safe-area-inset-bottom));gap:8px}
  .ip-btn{padding:10px 10px 9px}
  .ip-btn .l{display:none}
  .ip-btn .s{display:inline}
  .ip-file{font-size:11px}
  .ip-shots img{height:min(420px,56dvh)}
  .ip-scene{padding:58px 14px 0}
  .ip-board{padding:40px 14px 24px;border-width:5px}
  .ip-board::before{left:-14px;right:-14px}
  .ip-notes{grid-template-columns:1fr;gap:26px}
  .ip-note{padding:28px 14px 14px}
  .ip-note.n1 .ip-note-k{font-size:18px}
  .ip-note-big{font-size:30px}
  .ip-note-mail{font-size:26px}
  .ip-gull{left:8%;top:-58px;width:64px;height:32px}
  .ip-gull svg{width:64px;height:32px}
  .ip-note-url{font-size:23px}
  .ip-lantern{right:-20px;transform:scale(1.2)}
  .ip-quay,.ip-water{margin:0 -14px}
}
@keyframes ip-rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes ip-sink{to{transform:translateY(24px);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .ip-win,.ip-pane{animation:ip-fade .12s linear both!important}
  .ip.closing .ip-win{animation:ip-fade .1s linear reverse both!important}
  .ip-status.live::before{animation:none}
  .ip-hire,.ip-hire .a{animation:none!important}
  .ip-gull,.ip-gull svg,.ip-gull .up,.ip-gull .down,.ip-gull .sit,.ip-water,.ip-lantern i,.ip-note.flap,.ip-stamp.hit{animation:none!important}
  .ip-gull .up,.ip-gull .down{opacity:0}
  .ip-note{transition:none}
  .ip-btn,.ip-app,.ip-index button,.ip-x{transition:none}
}