* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "VT323", monospace;
  background:
    radial-gradient(ellipse at 50% 30%, #2f4a3a, #1c2e24 75%);
  color: #eaf2e4;
  -webkit-tap-highlight-color: transparent;
}

/* touch-action:none lets press-&-drag work as a joystick anywhere on the
   canvas on touch devices (otherwise the browser cancels the pointer) */
#app, #app canvas { position: fixed; inset: 0; display: block; touch-action: none; }

/* ---------- pixel window chrome ---------- */
.pixelbox {
  border: 3px solid #1c241c;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}

/* ---------- intro ---------- */
#intro {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 26, 20, .82);
  backdrop-filter: blur(3px);
  transition: opacity .4s, visibility .4s;
}
#intro.hide { opacity: 0; visibility: hidden; }
.intro-card {
  background: #f2f7ef;
  color: #24301f;
  border: 4px solid #1c241c;
  border-radius: 6px;
  box-shadow: 0 8px 0 rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.5);
  padding: 34px 40px 30px;
  max-width: 540px; margin: 16px;
  text-align: center;
  position: relative;
}
.plumbob-big { display: flex; justify-content: center; margin-bottom: 8px; }
.pb {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #7fed9a, #39d353 55%, #1f9c3a);
  transform: rotate(45deg);
  animation: pbspin 2.4s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(57,211,83,.8);
}
@keyframes pbspin {
  0%,100% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(225deg) scale(.9); }
}
.intro-kicker {
  font-family: "Press Start 2P", monospace;
  font-size: 9px; letter-spacing: .18em; color: #39a353;
}
.intro-card h1 {
  font-family: "Press Start 2P", monospace;
  font-size: 30px; margin: 12px 0 10px; color: #24301f;
  text-shadow: 3px 3px 0 #b8dcae;
}
.intro-sub {
  font-family: "Press Start 2P", monospace;
  font-size: 9px; color: #b0563a; margin-bottom: 16px; line-height: 1.8;
}
.intro-desc { font-size: 21px; line-height: 1.45; color: #3c4a34; }
#btn-start {
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  margin-top: 20px;
  background: linear-gradient(180deg, #4fd36b, #2fa84c);
  color: #fff;
  text-shadow: 1px 2px 0 rgba(0,0,0,.3);
  border: 3px solid #1c241c;
  border-radius: 4px;
  padding: 14px 34px;
  cursor: pointer;
  box-shadow: 0 5px 0 #1c5c2e;
  transition: transform .1s, box-shadow .1s;
}
#btn-start:hover { transform: translateY(-2px); }
#btn-start:active { transform: translateY(3px); box-shadow: 0 1px 0 #1c5c2e; }
.intro-hint { margin-top: 14px; font-size: 17px; color: #7a8a70; }
/* dark strip so the in-game controls show with their real colors */
.intro-controls {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: left;
  background: #24342a;
  border: 2px solid #1c241c; border-radius: 6px;
  padding: 13px 14px;
  font-size: 18px; line-height: 1.35; color: #dfeadb;
}
.intro-controls b { color: #9fe8b0; }
.ic-row { display: flex; gap: 13px; align-items: center; }
/* mini replica of the in-game virtual joystick */
.ic-joy {
  flex: 0 0 auto; position: relative;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(20, 30, 22, .35);
  border: 2px solid rgba(242, 247, 239, .55);
}
.ic-knob {
  position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(242, 247, 239, .92);
  border: 2px solid #1c241c;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}
/* mini replica of the in-game action button */
.ic-btn {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 20px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  border: 2px solid #1c241c;
  background: linear-gradient(180deg, #4fd36b, #2fa84c);
  box-shadow: 0 3px 0 #1c5c2e;
}

/* ---------- HUD ---------- */
#location {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 10;
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  background: rgba(20, 30, 22, .85);
  border: 2px solid rgba(57,211,83,.6);
  border-radius: 999px;
  padding: 10px 20px;
  pointer-events: none;
}
#location.pop { animation: pop .4s ease; }
@keyframes pop { 0% { transform: translateX(-50%) scale(.7); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

#clock {
  position: fixed; top: 14px; right: 16px; z-index: 10;
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  background: rgba(20, 30, 22, .85);
  border: 2px solid #3c4a3c;
  border-radius: 6px;
  padding: 9px 13px;
  color: #b8dcae;
}

#tooltip {
  position: fixed; z-index: 30; display: none;
  font-size: 19px;
  background: #f2f7ef; color: #24301f;
  border: 2px solid #1c241c;
  border-radius: 4px;
  padding: 3px 10px;
  pointer-events: none;
  box-shadow: 2px 3px 0 rgba(0,0,0,.35);
}

#hud {
  position: fixed; left: 14px; top: 12px; z-index: 10;
  display: flex; gap: 10px; align-items: center;
  background: rgba(20, 30, 22, .88);
  border: 3px solid #1c241c;
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.hud-ava { position: relative; width: 66px; height: 66px; flex: 0 0 auto; }
.hud-ava img {
  width: 66px; height: 66px; border-radius: 50%;
  border: 3px solid #39d353;
  object-fit: cover;
}
.hud-name { font-family: "Press Start 2P", monospace; font-size: 9px; color: #eaf2e4; }
.hud-role { font-size: 16px; color: #9cb894; margin: 2px 0 3px; }
.need { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #cfe2c6; }
.need span { width: 16px; }
.need .bar {
  width: 92px; height: 7px;
  background: #14201a;
  border: 1px solid #3c4a3c;
  border-radius: 4px;
  overflow: hidden;
}
.need .bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #39d353, #7fed9a);
  transition: width .6s;
}
.need .bar i.low { background: linear-gradient(90deg, #d35339, #ed9a7f); }

.hud-social { display: flex; gap: 9px; margin-left: 8px; }
.hs {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  font-size: 21px; color: #fff; text-decoration: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  border: 2px solid #1c241c;
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
  transition: transform .12s;
}
.hs:hover { transform: translateY(-2px); }

/* ---------- toast (Sims notification) ---------- */
#toast {
  position: fixed; top: 112px; right: 16px; z-index: 35;
  display: flex; gap: 10px; align-items: center;
  font-family: "VT323", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace;
  max-width: 340px;
  background: #f2f7ef; color: #24301f;
  border: 3px solid #1c241c;
  border-left: 8px solid #39d353;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 20px; line-height: 1.3;
  box-shadow: 0 6px 0 rgba(0,0,0,.35);
  transform: translateX(120%);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2);
}
#toast.show { transform: translateX(0); }
#toast-icon {
  font-size: 26px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ---------- OS windows ---------- */
.oswin {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 20, 14, .65);
  opacity: 0; visibility: hidden; transition: all .22s;
}
.oswin.show { opacity: 1; visibility: visible; }
.win {
  background: #f2f7ef;
  border: 4px solid #1c241c;
  border-radius: 8px;
  box-shadow: 0 10px 0 rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.55);
  width: min(960px, calc(100vw - 28px));
  transform: translateY(10px) scale(.97);
  transition: transform .22s;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.oswin.show .win { transform: translateY(0) scale(1); }

.win-bar {
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, #4fa8d3, #3283ab);
  color: #fff;
  padding: 9px 12px;
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  border-bottom: 3px solid #1c241c;
}
.win-bar.dark { background: linear-gradient(180deg, #3a3d4a, #23252e); }
.win-ico { font-size: 15px; }
.win-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .04em; }
.dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); }
.dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
.win-close {
  font-family: inherit; font-size: 10px;
  background: #ff5f57; color: #fff;
  border: 2px solid #1c241c; border-radius: 4px;
  width: 26px; height: 24px; cursor: pointer;
}
.win-close:hover { background: #e14840; }

.win-frame { background: #0e1216; }
.win-frame iframe {
  display: block; border: 0; width: 100%;
  height: min(60vh, 540px);
  background: #0e1216;
}
.win-foot {
  display: flex; justify-content: center; gap: 10px;
  padding: 10px;
  background: #e2ecdc;
  border-top: 3px solid #1c241c;
}
.win-note { font-size: 19px; color: #4a5a42; }
.pixel-btn {
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #4fa8d3, #3283ab);
  border: 3px solid #1c241c; border-radius: 4px;
  padding: 10px 16px;
  box-shadow: 0 4px 0 #1c4c60;
  transition: transform .1s;
}
.pixel-btn:hover { transform: translateY(-2px); }

/* ---------- VSCode window ---------- */
.win.vsc { width: min(1060px, calc(100vw - 24px)); }
.vsc-body {
  display: flex;
  background: #1e1f26;
  color: #cdd3de;
  height: min(66vh, 560px);
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
}
.vsc-activity {
  display: flex; flex-direction: column; gap: 4px;
  background: #17181d;
  padding: 10px 6px;
  border-right: 1px solid #2c2e38;
}
.act {
  font-size: 15px; padding: 7px; border-radius: 6px;
  opacity: .45; cursor: default;
}
.act.on { opacity: 1; background: #2c2e38; border-left: 2px solid #4fa8d3; }
.vsc-side {
  width: 190px; flex: 0 0 auto;
  background: #1a1b21;
  border-right: 1px solid #2c2e38;
  overflow-y: auto;
  font-size: 12.5px;
}
.vsc-side-h { padding: 10px 12px 6px; font-size: 10px; letter-spacing: .12em; color: #8a93a4; }
.vsc-folder { padding: 3px 12px; color: #aeb6c4; font-weight: 600; }
.vsc-folder.sub { padding-left: 20px; }
#vsc-files { list-style: none; }
#vsc-files li {
  padding: 3.5px 10px 3.5px 30px;
  cursor: pointer; white-space: nowrap;
  color: #9aa3b2;
}
#vsc-files li:hover { background: #23242c; color: #dfe4ec; }
#vsc-files li.active { background: #2c3040; color: #fff; }
#vsc-files .fi { margin-right: 6px; }
.vsc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vsc-tabs {
  display: flex; background: #17181d; border-bottom: 1px solid #2c2e38;
}
.vsc-tab-item {
  padding: 8px 18px; font-size: 12.5px;
  background: #1e1f26; color: #e8ecf2;
  border-right: 1px solid #2c2e38;
  border-top: 2px solid #4fa8d3;
}
.vsc-editor {
  flex: 1; display: flex; min-height: 0;
}
#vsc-code {
  flex: 1; overflow: auto;
  padding: 12px 0;
  font-size: 12.5px; line-height: 1.65;
}
#vsc-code .ln { white-space: pre; padding-right: 14px; }
#vsc-code .no {
  display: inline-block; width: 44px;
  text-align: right; padding-right: 16px;
  color: #4a4f5e; user-select: none;
}
#vsc-code .k { color: #c678dd; }
#vsc-code .t { color: #e5c07b; }
#vsc-code .s { color: #98c379; }
#vsc-code .c { color: #5c6370; font-style: italic; }
#vsc-code .f { color: #61afef; }
.vsc-preview {
  flex: 0 0 236px;
  border-left: 1px solid #2c2e38;
  background: #17181d;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
}
.vsc-prev-h { font-size: 10px; letter-spacing: .14em; color: #8a93a4; align-self: flex-start; }
/* iPhone-style frame around the app preview gif */
.vsc-phone {
  position: relative;
  width: 100%; flex: 1 1 0; min-height: 0;
  border: 3px solid #3a3f4c;
  border-radius: 22px;
  background: #0e1014;
  padding: 16px 7px 12px;
  overflow: hidden;
}
.vsc-phone::before { /* notch */
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 6px; border-radius: 3px; background: #3a3f4c; z-index: 3;
}
.vsc-phone::after { /* home indicator */
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 4px; border-radius: 2px; background: #3a3f4c; z-index: 3;
}
#vsc-gif {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: #0e1014;
  display: block;
}
.vsc-gif-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #0e1014;
  color: #8a93a4; font-size: 12px; letter-spacing: .08em;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.vsc-phone.loading .vsc-gif-loading { opacity: 1; visibility: visible; }
.vsc-spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid #2c2e38; border-top-color: #4fa8d3;
  animation: vscspin .8s linear infinite;
}
@keyframes vscspin { to { transform: rotate(360deg); } }
#vsc-link {
  font-size: 12px; color: #61afef; text-decoration: none;
  border: 1px solid #2c3e50; border-radius: 6px;
  padding: 6px 14px;
}
#vsc-link:hover { background: #23242c; }
.vsc-status {
  display: flex; gap: 16px; align-items: center;
  background: #3283ab; color: #eaf6ff;
  font-size: 11.5px;
  padding: 4px 12px;
}
.vsc-status .grow { flex: 1; }

/* ---------- wedding photo window ---------- */
.win.photowin { width: min(720px, calc(100vw - 28px)); }
.photo-body { background: #14181c; display: flex; justify-content: center; }
.photo-body img {
  max-width: 100%; max-height: min(66vh, 560px);
  display: block;
}

/* ---------- medium articles window ---------- */
#medium-list {
  background: #f6f3ea;
  max-height: min(58vh, 480px);
  overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.med-item {
  display: flex; flex-direction: row; align-items: center; gap: 13px;
  background: #fff;
  border: 2px solid #1c241c; border-left: 7px solid #39d353;
  border-radius: 8px;
  padding: 11px 14px;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
  transition: transform .1s;
}
.med-item:hover { transform: translateY(-2px); }
.med-thumb {
  width: 86px; height: 60px; object-fit: cover;
  border: 2px solid #1c241c; border-radius: 6px;
  background: #e2ecdc; flex: 0 0 auto;
}
.med-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.med-t { font-size: 19px; line-height: 1.25; color: #24301f; font-weight: bold; }
.med-d { font-size: 15px; color: #7a8a70; }

/* ---------- contact (phone) window ---------- */
.win.contact { width: min(420px, calc(100vw - 28px)); }
.contact-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px;
  background: #f2f7ef;
}
.cbtn {
  display: flex; align-items: center; gap: 14px;
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  color: #fff; text-decoration: none;
  border: 3px solid #1c241c; border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
  transition: transform .12s;
}
.cbtn:hover { transform: translateY(-2px); }
.cbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.ci {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.22);
  font-size: 13px;
}
.c-in { background: #0a66c2; }
.c-gh { background: #24292f; }
.c-gm { background: #d93b2f; }

/* ---------- VSCode mobile tabs (hidden on desktop) ---------- */
.vsc-mtabs { display: none; }

/* dark scrollbars inside the VSCode window */
.vsc-side, #vsc-code { scrollbar-width: thin; scrollbar-color: #3a3f4c #17181d; }
.vsc-side::-webkit-scrollbar, #vsc-code::-webkit-scrollbar { width: 10px; height: 10px; }
.vsc-side::-webkit-scrollbar-track, #vsc-code::-webkit-scrollbar-track { background: #17181d; }
.vsc-side::-webkit-scrollbar-thumb, #vsc-code::-webkit-scrollbar-thumb {
  background: #3a3f4c; border-radius: 6px; border: 2px solid #17181d;
}
.vsc-side::-webkit-scrollbar-thumb:hover, #vsc-code::-webkit-scrollbar-thumb:hover { background: #4a5060; }

/* ---------- BGM + Info HUD buttons ---------- */
.hud-social button.hs { cursor: pointer; padding: 0; }
.hs-bgm { background: linear-gradient(180deg, #38b2a3, #2a8a7e); }
.hs-bgm.off { filter: grayscale(1) brightness(.85); }
.hs-info { background: linear-gradient(180deg, #9a82d8, #7a5cc0); }
#bgm { position: fixed; left: -9999px; bottom: 0; width: 2px; height: 2px; overflow: hidden; }
#bgm iframe { width: 2px; height: 2px; border: 0; }

/* ---------- Pokedex (DEV·DEX) window ---------- */
.dex {
  width: min(560px, calc(100vw - 24px));
  background: linear-gradient(180deg, #e6413e, #c9302e);
  border: 4px solid #1c241c;
  border-radius: 12px;
  box-shadow: 0 10px 0 rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.25);
  display: flex; flex-direction: column;
  transform: translateY(10px) scale(.97);
  transition: transform .22s;
  overflow: hidden;
}
.oswin.show .dex { transform: translateY(0) scale(1); }
.dex-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.dex-lens {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 35%, #bfe6ff, #4fa8d3 45%, #1f5f8a);
  border: 3px solid #f2f7ef;
  animation: dexlens 3s ease-in-out infinite;
}
@keyframes dexlens {
  0%, 100% { box-shadow: 0 0 8px rgba(79,168,211,.5), inset -3px -4px 8px rgba(0,0,0,.35); }
  50% { box-shadow: 0 0 18px rgba(140,220,255,.95), inset -3px -4px 8px rgba(0,0,0,.35); }
}
.dex-lens-core { width: 12px; height: 12px; margin: 7px 0 0 7px; border-radius: 50%; background: rgba(255,255,255,.85); }
.dl { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(0,0,0,.4); flex: 0 0 auto; }
.dl.r { background: #ff6b5e; } .dl.y { background: #ffd93c; } .dl.g { background: #58e07a; }
.dex-title {
  flex: 1; font-family: "Press Start 2P", monospace; font-size: 11px;
  color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.35); letter-spacing: .08em;
}
.dex-tabs { display: flex; gap: 6px; padding: 6px 12px 0; }
.dex-tab {
  flex: 1; font-family: "Press Start 2P", monospace; font-size: 8px;
  color: #ffd9d4;
  background: #a02824;
  border: 2px solid #6e1a18; border-bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 10px 4px; cursor: pointer;
}
.dex-tab.on { background: #10281a; color: #7fed9a; border-color: #1c241c; }
.dex-screen {
  margin: 0 12px;
  height: min(56vh, 440px);
  background: #10281a;
  border: 4px solid #1c241c;
  border-radius: 0 0 8px 8px;
  display: flex;
  overflow: hidden;
}
.dex-pane {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  padding: 16px; overflow-y: auto;
}
.dex-pane[hidden] { display: none; }
.dex-photo {
  width: 110px; height: 110px; border-radius: 50%;
  border: 4px solid #39d353; object-fit: cover;
  box-shadow: 0 0 18px rgba(57,211,83,.35);
}
.dex-name { font-family: "Press Start 2P", monospace; font-size: 13px; color: #eaffe8; margin-top: 6px; }
.dex-role { font-family: "Press Start 2P", monospace; font-size: 8px; color: #7fed9a; }
.dex-about { font-size: 18px; line-height: 1.4; color: #bcd8c4; text-align: center; max-width: 420px; }
#dex-radar { width: 100%; max-width: 480px; height: auto; }
.dex-pane-cv { padding: 0; }
.dex-pane-cv iframe { flex: 1; width: 100%; border: 0; background: #0e1216; }
.dex-links { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; max-width: 440px; }
.dex-link {
  display: flex; align-items: center; gap: 11px;
  font-family: "Press Start 2P", monospace; font-size: 8px;
  color: #eaffe8; text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 2px solid #2c4434; border-radius: 8px;
  padding: 8px 11px;
  transition: transform .1s, background .1s, border-color .1s;
}
.dex-link:hover { transform: translateX(4px); background: rgba(57,211,83,.12); border-color: #39d353; }
.dli {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 7px;
  font-size: 7px; color: #fff;
  border: 2px solid rgba(0,0,0,.35);
}
.dex-foot { display: flex; align-items: center; gap: 8px; padding: 9px 14px 11px; }
.dex-dot { width: 10px; height: 10px; border-radius: 50%; background: #7e1f1d; border: 1px solid rgba(0,0,0,.3); }
.dex-note { font-size: 15px; color: #ffd9d4; margin-left: auto; }

/* ---------- touch controls ---------- */
#joystick, #btn-action, #btn-action2 { display: none; }
body.touch #joystick {
  display: block; position: fixed; left: 20px; bottom: 24px; z-index: 15;
  width: 124px; height: 124px; border-radius: 50%;
  background: rgba(20, 30, 22, .35);
  border: 3px solid rgba(242,247,239,.55);
  touch-action: none;
  opacity: .55;
  transition: opacity .15s;
}
/* while dragging anywhere on screen, the joystick re-anchors under the finger */
body.touch #joystick.drag {
  bottom: auto;
  opacity: .95;
}
#joyknob {
  position: absolute; left: 50%; top: 50%; margin: -27px 0 0 -27px;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(242,247,239,.92);
  border: 3px solid #1c241c;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  pointer-events: none;
}
body.touch #btn-action, body.touch #btn-action2 {
  position: fixed; right: 24px; bottom: 128px; z-index: 15;
  width: 74px; height: 74px; border-radius: 50%;
  font-size: 30px;
  align-items: center; justify-content: center;
  border: 3px solid #1c241c;
  background: linear-gradient(180deg, #4fd36b, #2fa84c);
  box-shadow: 0 6px 0 #1c5c2e, 0 8px 20px rgba(0,0,0,.35);
  transform: scale(0);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3);
  display: flex;
}
/* second button sits lower-left of the first, Game Boy A/B style */
body.touch #btn-action2 {
  right: 104px; bottom: 66px;
  width: 66px; height: 66px; font-size: 26px;
  background: linear-gradient(180deg, #f0b95a, #d8922e);
  box-shadow: 0 6px 0 #8a5c14, 0 8px 20px rgba(0,0,0,.35);
}
body.touch #btn-action.show, body.touch #btn-action2.show { transform: scale(1); }
body.touch #btn-action:active, body.touch #btn-action2:active { transform: scale(.92); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .hud-needs { display: none; }
  .intro-card h1 { font-size: 20px; }
  .intro-desc { font-size: 18px; }
}
/* VSCode window on phones: stacked layout, preview on top, files as chips */
@media (max-width: 700px) {
  #location { font-size: 8px; padding: 8px 12px; max-width: 44vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; left: auto; right: 74px; transform: none; }
  #location.pop { animation: none; }
  #hud { padding: 4px 12px 4px 4px; }
  .hud-ava { width: 58px; height: 58px; }
  .hud-ava img { width: 58px; height: 58px; }
  .need .bar { width: 66px; }
  .hs { width: 38px; height: 38px; font-size: 18px; }
  /* clock sits below the HUD card, with a clear vertical gap */
  #clock { font-size: 9px; padding: 7px 9px; top: 88px; left: 14px; right: auto; }
  #toast { max-width: 74vw; font-size: 17px; top: 108px; }
  .win.vsc { width: calc(100vw - 16px); height: min(88vh, 700px); }
  .vsc-body { flex-direction: column; flex: 1; height: auto; min-height: 0; }
  .vsc-main { min-height: 0; }
  .vsc-activity { display: none; }
  .vsc-side {
    width: 100%; flex: 0 0 auto;
    display: flex; align-items: center;
    overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid #2c2e38;
    -webkit-overflow-scrolling: touch;
  }
  .vsc-side-h, .vsc-folder { display: none; }
  #vsc-files { display: flex; flex-wrap: nowrap; }
  #vsc-files li { padding: 9px 12px; flex: 0 0 auto; }
  .vsc-tabs { display: none; }
  .vsc-mtabs {
    display: flex;
    background: #17181d;
    border-bottom: 1px solid #2c2e38;
  }
  .vsc-mtabs button {
    flex: 1;
    font-family: "Press Start 2P", monospace;
    font-size: 9px;
    color: #8a93a4;
    background: #17181d;
    border: 0; border-bottom: 3px solid transparent;
    padding: 12px 8px;
  }
  .vsc-mtabs button.on {
    color: #fff; background: #1e1f26;
    border-bottom-color: #4fa8d3;
  }
  .vsc-editor { flex-direction: column; min-height: 0; }
  .vsc-preview { display: none; }
  #vsc-code { font-size: 11px; }
  #vsc-code .no { width: 30px; padding-right: 10px; }
  /* preview tab: big gif */
  .vsc-editor.mview-gif #vsc-code { display: none; }
  .vsc-editor.mview-gif .vsc-preview {
    display: flex; flex: 1 1 0; width: 100%; min-height: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 10px;
    border-left: 0; overflow: hidden;
  }
  .vsc-editor.mview-gif .vsc-prev-h { display: none; }
  .vsc-editor.mview-gif .vsc-phone {
    flex: 1 1 0; min-height: 0; width: 100%;
  }
  .win-frame iframe { height: min(72vh, 640px); }
  #medium-list { max-height: min(70vh, 620px); }
  .photo-body img { max-height: min(72vh, 640px); }
  #hud { transform: scale(.85); transform-origin: top left; }
  .dex { width: calc(100vw - 16px); }
  .dex-screen { height: min(52vh, 420px); }
  .dex-tab { font-size: 7px; padding: 9px 2px; }
  .dex-links { grid-template-columns: 1fr; max-width: 320px; }
}

/* ---------- iframe window loading overlay ---------- */
.win-frame { position: relative; }
.win-load {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: radial-gradient(circle at 50% 42%, #1a2430, #0e1216 72%);
  transition: opacity .4s ease, visibility .4s;
}
.win-frame.ready .win-load { opacity: 0; visibility: hidden; }

/* a little book flipping its pages while the slides load */
.load-book { position: relative; width: 96px; height: 68px; perspective: 340px; }
.load-book i { position: absolute; display: block; border: 3px solid #1c241c; }
.load-book .lb-cover {
  inset: 0; border-radius: 5px;
  background: linear-gradient(180deg, #f2ead6, #ddd0b2);
  box-shadow: 0 5px 0 rgba(0,0,0,.45);
}
.load-book .lb-cover::after {
  content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 4px; margin-left: -2px; background: #1c241c;
}
.load-book .lb-page {
  left: 50%; top: 0; width: 48px; height: 100%;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(90deg, #fffdf6, #eee5cf);
  transform-origin: left center;
  animation: lbflip 1.5s ease-in-out infinite;
}
.load-book .lb-page.p2 { animation-delay: .75s; }
@keyframes lbflip {
  0%   { transform: rotateY(0deg); }
  55%  { transform: rotateY(-96deg); }
  100% { transform: rotateY(-179deg); }
}
.load-tx {
  font-family: "Press Start 2P", monospace;
  font-size: 10px; letter-spacing: .06em; color: #cfe6d8;
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.load-tx b { opacity: .2; animation: lbdot 1.2s ease-in-out infinite; }
.load-tx b:nth-of-type(2) { animation-delay: .18s; }
.load-tx b:nth-of-type(3) { animation-delay: .36s; }
@keyframes lbdot { 0%, 62%, 100% { opacity: .2; } 30% { opacity: 1; } }
.load-bar {
  width: 196px; height: 14px; overflow: hidden;
  background: #0a0e12; border: 2px solid #3c4a3c; border-radius: 3px;
}
.load-bar i {
  display: block; width: 38%; height: 100%;
  background: repeating-linear-gradient(90deg, #39d353 0 6px, #2aa843 6px 12px);
  animation: lbsweep 1.35s ease-in-out infinite;
}
@keyframes lbsweep { 0% { transform: translateX(-105%); } 100% { transform: translateX(268%); } }

/* ---------- DEV·DEX HUD icon micro-animation ---------- */
.hs { position: relative; }
.hs-ico { display: block; line-height: 1; transform-origin: 50% 62%; animation: dexWiggle 3.4s ease-in-out infinite; }
@keyframes dexWiggle {
  0%, 58%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  65% { transform: translateY(-3px) rotate(-11deg) scale(1.09); }
  72% { transform: translateY(-3px) rotate(9deg) scale(1.09); }
  80% { transform: translateY(-2px) rotate(-6deg) scale(1.04); }
  88% { transform: translateY(0) rotate(0deg) scale(1); }
}
.hs-info { animation: dexGlow 3.4s ease-in-out infinite; }
@keyframes dexGlow {
  0%, 58%, 100% { box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 0 rgba(178,150,255,0); }
  70% { box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 15px rgba(186,160,255,.95); }
  88% { box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 6px rgba(186,160,255,.4); }
}
.hs-ping {
  position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #58e07a; border: 2px solid #1c241c;
  animation: dexLed 1.7s ease-in-out infinite;
}
.hs-ping::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(88, 224, 122, .85);
  animation: dexPing 1.7s ease-out infinite;
}
@keyframes dexLed { 0%, 100% { background: #58e07a; } 50% { background: #b6ffc9; } }
@keyframes dexPing { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.7); opacity: 0; } }
.hs-info:hover .hs-ico { animation-duration: 1.1s; }
.hs-info:active .hs-ico { animation: none; transform: scale(.86); }
/* once the DEV·DEX has been opened the icon calms down to a slow idle bob */
.hs-info.seen { animation: none; box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.hs-info.seen .hs-ping { display: none; }
.hs-info.seen .hs-ico { animation: dexIdle 4.5s ease-in-out infinite; }
@keyframes dexIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .hs-ico, .hs-info, .hs-ping, .hs-ping::after,
  .load-book .lb-page, .load-bar i, .load-tx b { animation: none !important; }
  .load-tx b { opacity: 1; }
}