/* PORT PASS (입항증) - the homepage's visitor pass office. The terminal follows the spec's original design (pale
   shell, dark bezel, card slot, d-pad, orange A/B, SELECT/START). It lives bottom-right (~360x490),
   fades in where it is, and never covers the page: only the terminal and the card take clicks.
   The LCD is 160x144 scaled by whole numbers only (--k). */
@font-face { font-family:'Galmuri11'; src:url(fonts/galmuri11-sub.woff2) format('woff2'); font-display:swap; }  /* OFL, quiple */
@font-face { font-family:'Galmuri7'; src:url(fonts/galmuri7-latin.woff2) format('woff2'); font-display:swap; }

#ego {
  --k:2;
  --gb0:#0f380f; --gb1:#306230; --gb2:#8bac0f; --gb3:#9bbc0f;
  --shell:#d8d4c6; --shell-hi:#e7e4d9; --shell-lo:#b1ac9a; --bezel:#2b2f26; --bezel-ink:#8d927f;
  --accent:#c4552a; --accent-ink:#fff6ee;
  position:fixed; inset:0; z-index:18; pointer-events:none; color:var(--gb3);
  font-family:'Galmuri11', 'Malgun Gothic', sans-serif;
}
#ego[hidden] { display:none; }
#ego .egoStage { display:contents; }

/* the PORT PASS logo that flashes up on the click */
#ego .egoLogo {
  position:absolute; left:50%; top:40%; transform:translate(-50%, -50%); opacity:0;
  image-rendering:pixelated; filter:drop-shadow(0 0 10px rgba(155,188,15,.55)) drop-shadow(0 0 30px rgba(155,188,15,.25));
}
#ego.logo .egoLogo { animation:egoLogo 1.75s ease forwards; }
@keyframes egoLogo {
  0%   { opacity:0; transform:translate(-50%, -50%) scale(1.35); }
  12%  { opacity:1; transform:translate(-50%, -50%) scale(1); }
  17%  { opacity:.25; }
  21%  { opacity:1; }
  55%  { opacity:1; transform:translate(-50%, -50%) scale(1); }
  100% { opacity:0; transform:translate(-50%, -150%) scale(.55); }
}

/* ---- the terminal: docked bottom-right (placed by JS), transparent until the '?' is clicked ---- */
#ego .egoDevice {
  position:fixed; right:7vw; bottom:16px; pointer-events:auto; cursor:auto; outline:none;
  background:linear-gradient(180deg, var(--shell-hi), var(--shell));
  border-radius:20px 20px 26px 26px; padding:22px 9px 12px;
  box-shadow:inset 0 -5px 0 var(--shell-lo), inset 0 2px 0 #f5f3eb, 0 24px 50px -16px rgba(0,0,0,.85);
  opacity:0; transition:opacity 1.5s ease, bottom .6s cubic-bezier(.3,.8,.3,1);
}
#ego:not(.dev) .egoDevice { pointer-events:none; }
#ego.dev .egoDevice { opacity:1; }
#ego.out .egoDevice { opacity:0; transition-duration:.45s; }
#ego .egoX {   /* close, on the shell itself */
  position:absolute; top:6px; right:9px; width:18px; height:18px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--bezel); color:var(--bezel-ink); font:8px/18px 'Galmuri7', monospace; text-align:center;
}
#ego .egoX:hover { color:#e8ebdc; }
#ego.hasrec .egoX { display:none; }   /* once a pass exists the terminal is the scoreboard, always on */

#ego .egoSlot {
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:132px; height:5px; border-radius:3px; background:var(--bezel);
}
#ego .egoSlotOut {   /* the card comes out of the slot, upward */
  position:absolute; left:6px; right:6px; bottom:50%; aspect-ratio:256 / 162; overflow:hidden; pointer-events:none;
}
#ego .egoSlotOut canvas { display:block; width:100%; height:100%; image-rendering:pixelated; transform:translateY(102%); }
#ego .egoSlotOut.print canvas { transform:translateY(0); transition:transform 1.2s steps(16); }
#ego .egoSlotOut.taken canvas { transform:translateY(-12%); opacity:0; transition:transform .35s ease-out, opacity .3s ease-out; }   /* taken away as the big card appears */

#ego .egoBezel { background:var(--bezel); border-radius:10px; padding:7px 10px 10px; }
#ego .egoBezelTop {
  display:flex; align-items:center; gap:7px; margin-bottom:6px;
  font:8px 'Galmuri7', monospace; letter-spacing:.12em; color:var(--bezel-ink);
}
#ego .egoLed { width:6px; height:6px; border-radius:50%; background:#5e2c19; transition:background .2s, box-shadow .2s; }
#ego .egoDevice.focus .egoLed { background:var(--accent); box-shadow:0 0 6px var(--accent); }   /* lit = keys go here */
#ego .egoLcdWrap { position:relative; width:calc(160px * var(--k)); height:calc(144px * var(--k)); background:var(--gb3); }
#ego .egoLcdWrap canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
#ego .egoGhost { opacity:0; pointer-events:none; }
#ego .egoLcdWrap::after {   /* LCD pixel grid */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(15,56,15,.07) 0 1px, transparent 1px calc(var(--k) * 1px)),
    repeating-linear-gradient(90deg, rgba(15,56,15,.07) 0 1px, transparent 1px calc(var(--k) * 1px));
}
#ego .egoName {
  position:absolute; z-index:2; box-sizing:border-box;
  left:calc(16px * var(--k)); top:calc(52px * var(--k)); width:calc(128px * var(--k)); height:calc(20px * var(--k));
  font:calc(12px * var(--k)) 'Galmuri11', monospace; color:var(--gb0); caret-color:var(--gb0);
  background:transparent; border:0; outline:none; padding:0; text-align:center;
}
#ego .egoName[hidden] { display:none; }

#ego .egoBrand { display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; padding:0 2px; }
#ego .egoBrand b { font:16px 'Galmuri7', monospace; font-weight:normal; letter-spacing:.06em; color:var(--bezel); }
#ego .egoBrand span { font:8px 'Galmuri7', monospace; letter-spacing:.14em; color:#555c4d; }

#ego .egoControls { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding:0 6px 0 4px; }
#ego .egoDpad { display:grid; grid-template-columns:repeat(3, 32px); grid-template-rows:repeat(3, 32px); }
#ego .egoDpad button {
  border:0; background:var(--bezel); color:var(--bezel-ink); padding:0; cursor:pointer;
  display:grid; place-items:center; font-size:11px; line-height:1;
}
#ego .egoDpad .up { grid-area:1 / 2; border-radius:5px 5px 0 0; }
#ego .egoDpad .left { grid-area:2 / 1; border-radius:5px 0 0 5px; }
#ego .egoDpad .mid { grid-area:2 / 2; background:var(--bezel); }
#ego .egoDpad .right { grid-area:2 / 3; border-radius:0 5px 5px 0; }
#ego .egoDpad .down { grid-area:3 / 2; border-radius:0 0 5px 5px; }
#ego .egoDpad button:active, #ego .egoDpad button.pressed { background:#181b14; transform:translateY(1px); }
#ego .egoAB { display:flex; gap:14px; align-items:flex-start; }   /* A/B: the pressing buttons, bigger than the arrows */
#ego .egoAB .k, #ego .egoMeta .k { display:flex; flex-direction:column; align-items:center; gap:4px; }
#ego .egoAB button {
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); font:24px 'Galmuri7', monospace;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.22), 0 3px 0 var(--shell-lo);
}
#ego .egoAB button:active, #ego .egoAB button.pressed { transform:translateY(3px); box-shadow:inset 0 -1px 0 rgba(0,0,0,.22); }
#ego .egoAB small, #ego .egoMeta small { font:8px 'Galmuri7', monospace; letter-spacing:.12em; color:#555c4d; }
#ego .egoMeta { display:flex; justify-content:center; gap:26px; margin-top:10px; }
#ego .egoMeta button { width:56px; height:16px; border-radius:8px; border:0; background:#8a8676; cursor:pointer; padding:0; box-shadow:0 2px 0 var(--shell-lo); }
#ego .egoMeta button:active, #ego .egoMeta button.pressed { transform:translateY(2px); background:#6c685a; box-shadow:none; }

/* ---- the issued card, enlarged beside the terminal (placed by JS) - no veil, the page stays live ---- */
#ego .egoView {
  position:fixed; right:0; bottom:16px; pointer-events:auto; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0; transform:translateY(14px) scale(.94); transform-origin:100% 100%;
  transition:opacity .3s, transform .45s cubic-bezier(.2,.9,.25,1.1);
}
#ego .egoView[hidden] { display:none; }
#ego .egoView.on { opacity:1; transform:none; }
#ego .egoCardBig {
  width:512px; height:auto; aspect-ratio:256 / 162; image-rendering:pixelated; border-radius:6px;
  box-shadow:0 20px 50px -15px rgba(0,0,0,.9), 0 0 0 1px rgba(155,188,15,.25);
}
#ego .egoViewBtns { display:flex; gap:10px; }
#ego .egoViewBtns button {
  cursor:pointer; font:12px 'Galmuri11', monospace; letter-spacing:.06em;
  color:var(--gb0); background:var(--gb3); border:2px solid var(--gb0); border-radius:4px; padding:7px 14px;
  box-shadow:0 3px 0 var(--gb1);
}
#ego .egoViewBtns button:hover { background:var(--gb2); }
#ego .egoViewBtns button:active { transform:translateY(2px); box-shadow:0 1px 0 var(--gb1); }

/* ---- the entrance: '?' in the middle of the first screen (dropped in after the intro) ---- */
#feed .hero { position:relative; }
#egoStart { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
#egoStart .egoQ {
  display:flex; flex-direction:column; align-items:center; gap:12px; padding:10px; cursor:pointer; pointer-events:auto;
  background:none; border:0; opacity:0; transform:translateY(-90px);
}
#egoStart .egoQ canvas {
  width:80px; height:112px; image-rendering:pixelated;
  filter:drop-shadow(0 0 10px rgba(155,188,15,.35)); transition:filter .2s;
}
#egoStart .egoQ:hover canvas { filter:brightness(1.3) drop-shadow(0 0 14px rgba(155,188,15,.7)); }
#egoStart .egoQi { position:relative; display:block; }
#egoStart .egoQ canvas.egoQm {   /* the question mark itself glows, just slightly */
  position:absolute; left:0; top:0; animation:egoQGlow 3.2s ease-in-out infinite;
}
#egoStart.issued .egoQm { display:none; }
@keyframes egoQGlow {
  0%, 100% { filter:drop-shadow(0 0 1px rgba(222,255,120,.25)); }
  50%      { filter:brightness(1.12) drop-shadow(0 0 4px rgba(222,255,120,.6)); }
}
#egoStart.here .egoQ { animation:egoDrop .75s cubic-bezier(.3,1.35,.5,1) forwards, egoIdle 1.2s steps(1) .9s infinite; }
#egoStart.gone .egoQ { animation:egoGone .35s ease forwards; pointer-events:none; }
@keyframes egoDrop { 0% { opacity:0; transform:translateY(-90px); } 60% { opacity:1; transform:translateY(6px); } 100% { opacity:1; transform:none; } }
@keyframes egoIdle { 0%, 100% { opacity:1; transform:none; } 50% { opacity:1; transform:translateY(-4px); } }
@keyframes egoGone { 0% { opacity:1; transform:none; } 40% { opacity:1; transform:translateY(-10px) scale(1.06); } 100% { opacity:0; transform:translateY(-24px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { #egoStart.here .egoQ { animation:none; opacity:1; transform:none; } }

/* ---- the end of the random feed: the visitors' wall ---- */
#egoEnd { min-height:80vh; display:flex; align-items:center; justify-content:center; padding:8vh 16px 22vh; box-sizing:border-box; }
@media (min-width:900px) { #egoEnd { padding-right:calc(7vw + 382px); padding-left:4vw; } }   /* clear of the always-on scoreboard */
#egoEnd .egoWall {
  width:min(960px, 100%); padding:22px 22px 26px; box-sizing:border-box;
  background:rgba(0,0,0,.55); border:1px solid rgba(155,188,15,.35); color:rgba(255,255,255,.8);
}
#egoEnd .egoWall header { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
#egoEnd .egoWall header b { font:16px 'Galmuri7', monospace; font-weight:normal; letter-spacing:.3em; color:#9bbc0f; }
#egoEnd .egoWall header small { font:12px 'Galmuri11', sans-serif; color:rgba(255,255,255,.5); }
#egoEnd .egoWallGrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; }
#egoEnd .egoWallCard {
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; column-gap:8px; align-items:center;
  padding:8px; background:rgba(155,188,15,.06); border:1px solid rgba(155,188,15,.18);
}
#egoEnd .egoWallCard canvas { grid-row:1 / 4; width:40px; height:56px; image-rendering:pixelated; }
#egoEnd .egoWallCard .rk { font:8px 'Galmuri7', monospace; color:rgba(255,255,255,.45); letter-spacing:.1em; }
#egoEnd .egoWallCard .nm { font:12px 'Galmuri11', sans-serif; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#egoEnd .egoWallCard .sc { font:16px 'Galmuri7', monospace; color:#9bbc0f; }
#egoEnd .egoWallCard.me { background:rgba(155,188,15,.2); border-color:#9bbc0f; }
#egoEnd .egoWallCard.me .rk { color:#9bbc0f; }

/* ---- other visitors, roaming the screen ---- */
.egoRoam { position:fixed; left:0; top:0; width:60px; height:84px; z-index:17; pointer-events:none; will-change:transform; }
.egoRoam canvas { display:block; width:60px; height:84px; image-rendering:pixelated; }
.egoRoam .egoBub {
  position:absolute; left:50%; bottom:100%; transform:translate(-50%, 4px); opacity:0; font-style:normal; white-space:nowrap;
  line-height:0; background:#e9f0d0; border:2px solid #0f380f; padding:4px 7px; border-radius:8px;
  transition:opacity .15s;
}
.egoRoam .egoBub canvas { display:block; image-rendering:pixelated; }   /* they speak in shapes */
.egoRoam .egoBub.on { opacity:1; }
.egoRoam .egoBub.think { border-radius:999px; }
.egoRoam .egoBub.think::after { content:''; position:absolute; left:40%; top:100%; width:6px; height:6px; margin-top:3px; border-radius:50%; background:#e9f0d0; border:2px solid #0f380f; }
.egoRoam .egoBub.mad { background:#ffd2d2; color:#7a0f1f; border-color:#7a0f1f; }

/* ---- a heart over the character when it is clicked ---- */
.egoHeart {
  position:fixed; z-index:20; width:28px; height:24px; image-rendering:pixelated; pointer-events:none;
  animation:egoHeart 1.05s ease-out forwards;
}
@keyframes egoHeart { 0% { opacity:0; transform:translateY(6px) scale(.6); } 15% { opacity:1; transform:translateY(0) scale(1.1); } 100% { opacity:0; transform:translateY(-46px) scale(1); } }

/* ---- companion ---- */
#egoComp { position:fixed; left:0; top:0; width:60px; height:84px; pointer-events:none; z-index:19; will-change:transform; }
#egoComp[hidden] { display:none; }
#egoComp canvas { display:block; width:60px; height:84px; image-rendering:pixelated; }


/* ---- the club vs the AI window: cracks on the glass, the glass falls, the frame stays empty ---- */
#aiWin .egoCracks {
  position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;
  clip-path:polygon(16.3% -0.2%, 91.55% 5.16%, 90.78% 84.3%, 17.75% 97.5%);
  fill:none; stroke:rgba(255,255,255,.85); stroke-width:1.2; filter:drop-shadow(0 0 1px rgba(0,0,0,.6));
}
#aiWin.egoShatter .tint, #aiWin.egoShatter .refl, #aiWin.egoShatter .sheen, #aiWin.egoShatter .egoCracks {
  transition:transform .8s cubic-bezier(.5,0,.9,.5), opacity .8s; transform:translateY(60px) rotate(2deg); opacity:0;
}
#aiWin.egoBroken .tint, #aiWin.egoBroken .refl, #aiWin.egoBroken .sheen { display:none; }
#aiWin.egoBroken { cursor:pointer; }

/* ---- beyond the glass (the artist's drawings go here) ---- */
#egoBeyond {
  position:fixed; inset:0; z-index:30; background:#050505; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .5s;
}
#egoBeyond[hidden] { display:none; }
#egoBeyond.on { opacity:1; }
#egoBeyond .egoBeyondIn { display:flex; flex-direction:column; align-items:center; gap:12px; color:rgba(255,255,255,.75); }
#egoBeyond .egoBeyondIn b { font:16px 'Galmuri7', monospace; font-weight:normal; letter-spacing:.3em; }
#egoBeyond .egoBeyondIn small { font:12px 'Galmuri11', sans-serif; color:rgba(255,255,255,.45); }
#egoBeyond .egoBeyondX {
  position:absolute; top:16px; right:18px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:none; color:rgba(255,255,255,.7); font:8px 'Galmuri7', monospace; cursor:pointer;
}

/* ---- the whole set off and on (after a pass is issued): squeezed to a line, a dot, black, and back ---- */
#egoTv { position:fixed; inset:0; z-index:45; pointer-events:auto; cursor:default; }
#egoTv[hidden] { display:none; }
#egoTv i { position:absolute; left:0; right:0; display:block; }
#egoTv .t { top:0; height:50.5%; background:#000; transform:scaleY(0); transform-origin:50% 0; }
#egoTv .b { bottom:0; height:50.5%; background:#000; transform:scaleY(0); transform-origin:50% 100%; }
#egoTv .ln { top:50%; height:3px; margin-top:-1px; background:#fff; box-shadow:0 0 18px 4px rgba(215,225,255,.7); opacity:0; }
#egoTv .fl { top:0; bottom:0; background:#eef2ff; opacity:0; }

/* ---- things between the posts (coffee, a drink, water, paper, a letter): picked up with the character next to them ---- */
#feed .fcard { position:relative; }   /* an item sits in the gap below a post, inside it, so it scrolls along */
.egoItem {
  position:absolute; z-index:2; padding:0; border:0; background:none; cursor:pointer; line-height:0;
  filter:drop-shadow(0 0 6px rgba(155,188,15,.3));
  animation:egoItemIn .6s cubic-bezier(.3,1.35,.5,1) both, egoItemBob 1.6s steps(1) .6s infinite;
  transition:filter .2s, opacity .08s;
}
.egoItem canvas { display:block; image-rendering:pixelated; }
.egoItem.near { filter:brightness(1.3) drop-shadow(0 0 10px rgba(155,188,15,.8)); }   /* within the character's reach */
.egoItem.dim { opacity:.15; }
.egoItem.got { animation:egoItemGot .5s ease-out forwards; pointer-events:none; }
.egoItem.gone { animation:egoItemGone .5s ease-in forwards; pointer-events:none; }
@keyframes egoItemIn { 0% { opacity:0; transform:translateY(-46px); } 60% { opacity:1; transform:translateY(4px); } 100% { opacity:1; transform:none; } }
@keyframes egoItemBob { 0%, 100% { transform:none; } 50% { transform:translateY(-3px); } }
@keyframes egoItemGot { 0% { opacity:1; transform:none; } 30% { opacity:1; transform:translateY(-8px) scale(1.15); } 100% { opacity:0; transform:translateY(-34px) scale(.6); } }
@keyframes egoItemGone { to { opacity:0; transform:scale(.4); } }
.egoItemPts {
  position:absolute; z-index:2; font:16px 'Galmuri7', monospace; color:#9bbc0f; text-shadow:0 0 6px rgba(0,0,0,.85);
  pointer-events:none; white-space:nowrap; animation:egoItemPts .9s ease-out forwards;
}
@keyframes egoItemPts { 0% { opacity:0; transform:translate(-50%, 0); } 15% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -40px); } }
@media (prefers-reduced-motion: reduce) { .egoItem { animation:none; } }

/* ---- the line under the wall (past 100 points): chat, or the right words ---- */
#egoEnd .egoChat { display:flex; align-items:center; gap:6px; margin-top:16px; }
#egoEnd .egoChat[hidden] { display:none; }
#egoEnd .egoChat span { font:12px 'Galmuri7', monospace; color:rgba(155,188,15,.55); }
#egoEnd .egoChat input {
  width:20em; height:18px; padding:0 2px; border:0; border-bottom:1px solid rgba(155,188,15,.35); border-radius:0;
  background:transparent; outline:none; cursor:text;
  font:12px 'Galmuri11', sans-serif; color:rgba(255,255,255,.85); caret-color:#9bbc0f;
}
#egoEnd .egoChat input:focus { border-bottom-color:rgba(155,188,15,.8); }
#egoEnd .egoChat.ok input { animation:egoChatOk .7s ease-out; }
@keyframes egoChatOk { 0% { border-bottom-color:#d6ff5a; box-shadow:0 2px 12px -2px rgba(155,188,15,.9); } 100% { border-bottom-color:rgba(155,188,15,.8); box-shadow:none; } }
/* what the character says */
#egoComp .egoSay {
  position:absolute; left:50%; bottom:100%; transform:translate(-50%, 2px); opacity:0; white-space:nowrap; font-style:normal;
  font:12px 'Galmuri11', sans-serif; color:#0f380f; background:#e9f0d0; border:2px solid #0f380f; padding:2px 8px; border-radius:8px;
  transition:opacity .15s;
}
#egoComp .egoSay.on { opacity:1; }
/* the giant */
#egoComp canvas { transition:width .45s steps(4), height .45s steps(4), margin .45s steps(4); }
#egoComp.big canvas { width:120px; height:168px; margin:-84px 0 0 -30px; }
#egoComp.big .egoSay { bottom:calc(100% + 84px); }

/* ---- the club: a canvas behind the body, leaning out at an angle; the swing's arc; +10 per visitor sent flying ---- */
#egoComp .egoMe { position:relative; }   /* painted over the club */
#egoComp .egoClub {
  position:absolute; left:-39px; top:-6px; width:138px; height:114px;
  transition:width .45s steps(4), height .45s steps(4), left .45s steps(4), top .45s steps(4);
}
#egoComp.big .egoClub { left:-108px; top:-96px; width:276px; height:228px; margin:0; }
.egoSwoosh {
  position:fixed; z-index:18; pointer-events:none; border-radius:50%; box-sizing:border-box;
  border:2px solid transparent; border-top-color:rgba(255,255,255,.55); border-right-color:rgba(255,255,255,.3);
  opacity:0; animation:egoSwoosh .36s ease-out forwards;
}
@keyframes egoSwoosh {
  0%   { opacity:0; transform:translate(-50%, -50%) scaleX(var(--f)) rotate(-70deg); }
  35%  { opacity:.9; }
  100% { opacity:0; transform:translate(-50%, -50%) scaleX(var(--f)) rotate(10deg); }
}
.egoHitPts { position:fixed; z-index:20; }

/* ---- ghosts: they make up the roaming crowd while real visitors are few ---- */
.egoRoam.ghost canvas { opacity:.75; filter:drop-shadow(0 0 6px rgba(155,188,15,.5)); }