/* =====================================================================
   PRANAVI'S FARM — styles
   ===================================================================== */
:root {
  --ink: #3b2414; --ink-2: #6b4426; --ink-3: #8f6b48;
  --paper: #f8e7c2; --paper-2: #f0d7a4; --paper-3: #e2bf84; --paper-hi: #fff6de;
  --wood: #9c6b3c; --wood-d: #6e4423; --wood-dd: #48290f; --wood-l: #c99459; --wood-ll: #e3b47b;
  --gold: #f2c14e; --gold-d: #c98d1e; --gold-l: #ffe28a;
  --leaf: #5aa83a; --leaf-d: #3c7a2a; --berry: #d2493b; --berry-d: #9b3226; --blue: #4f86c6; --blue-d: #2f5a8f; --sky: #8fd3f5;
  --px: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --notch: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  --notch-lg: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #2f5228; color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55;
  overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
.pxi { display: inline-block; vertical-align: middle; image-rendering: pixelated; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------------- buttons ---------------- */
.btn {
  --b1: var(--gold); --b2: var(--gold-d); --b3: #8a5a0e; --bt: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--px); font-weight: 600; font-size: 16px; letter-spacing: .02em; line-height: 1;
  padding: 11px 16px 13px; border: 0; color: var(--bt); text-decoration: none; white-space: nowrap;
  background: var(--b1); clip-path: var(--notch);
  box-shadow: inset 0 -4px 0 var(--b2), inset 0 0 0 2px var(--b3), inset 0 2px 0 2px rgba(255,255,255,.35);
  transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 var(--b2), inset 0 0 0 2px var(--b3); }
.btn.green { --b1: #6dbb4f; --b2: #3f8a32; --b3: #2a5c22; --bt: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.btn.wood { --b1: var(--wood-l); --b2: var(--wood); --b3: var(--wood-dd); }
.btn.paper { --b1: var(--paper-hi); --b2: var(--paper-3); --b3: var(--wood); }
.btn.blue { --b1: #6fa1dc; --b2: var(--blue-d); --b3: #1f3d63; --bt: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.btn.red { --b1: #e2604f; --b2: var(--berry-d); --b3: #6b1f17; --bt: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.btn.sm { font-size: 14px; padding: 8px 11px 10px; gap: 6px; }
.btn.lg { font-size: 20px; padding: 14px 24px 17px; }
.btn[disabled] { filter: grayscale(.7) opacity(.6); pointer-events: none; }

.chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--px); font-size: 13px; line-height: 1; padding: 5px 8px 6px; background: var(--paper-hi); color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--paper-3); clip-path: var(--notch); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------- world ---------------- */
#app { position: fixed; inset: 0; overflow: hidden; }
#world { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
#world-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wlabel {
  position: absolute; left: 0; top: 0; pointer-events: auto; border: 0; display: flex; align-items: center; gap: 5px;
  font-family: var(--px); font-weight: 600; font-size: 14px; line-height: 1; padding: 5px 8px 7px; color: var(--ink);
  background: var(--paper-hi); clip-path: var(--notch);
  box-shadow: inset 0 0 0 2px var(--wood-d), inset 0 -3px 0 2px var(--paper-3);
  transition: filter .15s; white-space: nowrap; will-change: transform;
}
.wlabel::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 6px; height: 4px; margin-left: -3px; background: var(--wood-d); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.wlabel.hl, .wlabel.near, .wlabel:hover { filter: brightness(1.04) drop-shadow(0 0 0 #fff); background: #fff2b8; }
.wlabel.near .wl-t::after { content: " ▸"; }
#world-labels.night .wlabel { box-shadow: inset 0 0 0 2px var(--wood-d), inset 0 -3px 0 2px var(--paper-3), 0 0 14px rgba(255,210,120,.6); }
.wprompt { position: absolute; left: 0; top: 0; font-family: var(--px); font-size: 14px; color: #fff; background: rgba(40,22,10,.82); padding: 6px 10px 7px; clip-path: var(--notch); white-space: nowrap; }
.wprompt kbd { font-family: var(--px); background: var(--gold); color: var(--ink); padding: 1px 6px 2px; margin-right: 4px; box-shadow: inset 0 -2px 0 var(--gold-d); }
body.world-paused #world-labels { visibility: hidden; }

/* ---------------- HUD ---------------- */
.hud-box {
  background: var(--paper); clip-path: var(--notch);
  box-shadow: inset 0 0 0 3px var(--wood-dd), inset 0 0 0 6px var(--wood-l), inset 0 0 0 8px var(--wood-d), inset 0 -10px 0 8px rgba(0,0,0,.05);
}
#hud-left { position: fixed; left: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; z-index: 20; }
.nameplate { display: flex; align-items: center; gap: 10px; padding: 12px 16px 13px 12px; border: 0; text-align: left; }
.nameplate .np-face { width: 40px; height: 40px; object-fit: cover; image-rendering: auto; clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--wood-d); background: var(--wood-l); }
.nameplate .np-name { font-family: var(--px); font-weight: 700; font-size: 19px; line-height: 1.05; }
.nameplate .np-sub { font-family: var(--px); font-size: 13px; color: var(--ink-2); margin-top: 3px; }
#hud-right { position: fixed; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 20; }
.clock { padding: 12px 16px 12px; min-width: 168px; font-family: var(--px); text-align: right; }
.clock .c-date { font-size: 15px; font-weight: 600; }
.clock .c-time { font-size: 24px; font-weight: 700; line-height: 1.1; }
.clock .c-season { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.hud-row { display: flex; gap: 6px; align-items: center; }
.icon-btn { border: 0; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; }
.acorn-count { display: flex; align-items: center; gap: 6px; padding: 9px 13px 10px 10px; font-family: var(--px); font-weight: 700; font-size: 17px; border: 0; height: 46px; }
.acorn-count.bump { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.18) rotate(-4deg); } 60% { transform: scale(.96); } }

/* menu dropdown */
.menu-pop { position: fixed; right: 12px; top: 0; z-index: 60; width: 260px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.menu-pop[hidden] { display: none; }
.menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 9px 10px; font-family: var(--px); font-size: 16px; text-align: left; clip-path: var(--notch); }
.menu-pop button:hover, .menu-pop button:focus-visible { background: var(--paper-hi); }
.menu-pop .m-val { margin-left: auto; color: var(--ink-2); font-size: 14px; }
.menu-pop hr { border: 0; height: 2px; background: var(--paper-3); margin: 4px 0; }

/* toolbar */
#toolbar {
  position: fixed; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); z-index: 20;
  display: flex; gap: 4px; padding: 9px; max-width: calc(100vw - 16px);
}
.slot {
  position: relative; width: 58px; height: 58px; border: 0; padding: 0; display: grid; place-items: center;
  background: var(--paper-hi); clip-path: var(--notch);
  box-shadow: inset 0 0 0 2px var(--paper-3), inset 0 3px 0 2px rgba(0,0,0,.06);
  transition: transform .1s;
}
.slot .pxi { width: 36px; height: 36px; }
.slot .k { position: absolute; left: 5px; top: 3px; font-family: var(--px); font-size: 11px; color: var(--ink-3); }
.slot .tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none;
  font-family: var(--px); font-size: 14px; white-space: nowrap; background: var(--ink); color: var(--paper-hi); padding: 6px 9px 7px; transition: .12s; clip-path: var(--notch);
}
.slot:hover, .slot:focus-visible { box-shadow: inset 0 0 0 3px var(--berry), inset 0 3px 0 2px rgba(0,0,0,.06); transform: translateY(-2px); }
#toolbar:hover .slot:hover .tip, .slot:focus-visible .tip { opacity: 1; transform: translateX(-50%); }
.slot-wrap { position: relative; }
.slot-wrap .tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; font-family: var(--px); font-size: 14px; white-space: nowrap; background: var(--ink); color: var(--paper-hi); padding: 6px 9px 7px; transition: .12s; clip-path: var(--notch); z-index: 2; }
.slot-wrap:hover .tip, .slot-wrap:focus-within .tip { opacity: 1; transform: translateX(-50%); }
.slot.done::after { content: ""; position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; background: var(--leaf); box-shadow: 0 0 0 1px var(--leaf-d); }

.hint-bubble {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 19; padding: 10px 14px 11px;
  font-family: var(--px); font-size: 15px; text-align: center; max-width: calc(100vw - 24px); animation: float 3s ease-in-out infinite;
}
.hint-bubble[hidden] { display: none; }
@keyframes float { 50% { transform: translate(-50%, -4px); } }

/* ---------------- toasts ---------------- */
#toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 11px 12px; font-family: var(--px); font-size: 16px; background: var(--paper);
  clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--wood-dd), inset 0 0 0 5px var(--wood-l);
  transform: translateY(-20px); opacity: 0; transition: .3s cubic-bezier(.2,1.4,.4,1);
}
.toast.in { transform: none; opacity: 1; }
.toast.gold { background: #fff1b8; box-shadow: inset 0 0 0 3px var(--gold-d), inset 0 0 0 5px var(--gold); }

/* ---------------- title screen ---------------- */
#title { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: #8fd3f5; transition: opacity .6s, visibility .6s; }
#title.gone { opacity: 0; visibility: hidden; }
#title canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.title-card { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 32px)); text-align: center; }
.title-sign { display: inline-block; position: relative; padding: 22px 28px 26px; animation: sway 6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes sway { 50% { transform: rotate(-.6deg); } }
.title-sign .board {
  padding: 18px 26px 20px; background: var(--wood-l);
  background-image: repeating-linear-gradient(180deg, transparent 0 26px, rgba(0,0,0,.14) 26px 28px), linear-gradient(var(--wood-ll), var(--wood-l));
  clip-path: var(--notch-lg); box-shadow: inset 0 0 0 4px var(--wood-dd), inset 0 0 0 7px var(--wood-ll), inset 0 -10px 0 7px rgba(0,0,0,.08);
}
.title-name {
  font-family: var(--px); font-weight: 700; font-size: clamp(38px, 8.4vw, 86px); line-height: .95; margin: 0; color: var(--gold-l); letter-spacing: .02em;
  text-shadow: 3px 0 0 var(--wood-dd), -3px 0 0 var(--wood-dd), 0 3px 0 var(--wood-dd), 0 -3px 0 var(--wood-dd), 3px 3px 0 var(--wood-dd), -3px 3px 0 var(--wood-dd), 3px -3px 0 var(--wood-dd), -3px -3px 0 var(--wood-dd), 0 7px 0 var(--wood-dd), 3px 7px 0 var(--wood-dd), -3px 7px 0 var(--wood-dd);
}
.title-sub { display: inline-block; font-family: var(--px); font-weight: 600; font-size: clamp(15px, 2.4vw, 21px); color: var(--paper-hi); margin-top: 10px; padding: 7px 14px 9px; background: var(--wood-d); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--wood-dd), inset 0 -3px 0 2px rgba(0,0,0,.15); text-shadow: 0 2px 0 var(--wood-dd); }
.title-ropes::before, .title-ropes::after { content: ""; position: absolute; top: -60px; width: 4px; height: 70px; background: repeating-linear-gradient(180deg, #d9b98a 0 4px, #a8875c 4px 8px); }
.title-ropes::before { left: 22%; } .title-ropes::after { right: 22%; }
.title-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.title-tip { margin: 18px auto 0; display: inline-block; padding: 10px 14px 11px; font-family: var(--px); font-size: 15px; max-width: 560px; }
.title-tip .pxi { margin: -3px 4px 0 0; }
.title-foot { position: absolute; left: 0; right: 0; bottom: calc(14px + var(--safe-b)); text-align: center; font-family: var(--px); font-size: 14px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.press-start { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------------- panels ---------------- */
#panel-root { position: fixed; inset: 0; z-index: 50; display: none; }
#panel-root.open { display: block; }
.panel-backdrop { position: absolute; inset: 0; background: rgba(28,14,4,.55); backdrop-filter: blur(2px); animation: fadein .2s; }
@keyframes fadein { from { opacity: 0; } }
.panel-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 10px 0 rgba(0,0,0,.35)); animation: pop .28s cubic-bezier(.2,1.3,.4,1); }
@keyframes pop { from { transform: translate(-50%, -46%) scale(.94); opacity: 0; } }
.panel {
  width: min(1080px, calc(100vw - 28px)); height: min(800px, calc(100dvh - 28px)); display: flex; flex-direction: column;
  padding: 0 14px 14px; clip-path: var(--notch-lg);
  background: var(--wood); background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.12) 0 2px, transparent 2px 16px), linear-gradient(#ab7843, #8f6034);
  box-shadow: inset 0 0 0 4px var(--wood-dd), inset 0 0 0 7px var(--wood-ll), inset 0 0 0 9px var(--wood-d);
}
.panel.auto-h { height: auto; max-height: min(800px, calc(100dvh - 28px)); }
.panel.narrow { width: min(620px, calc(100vw - 28px)); }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 4px 12px 8px; color: var(--paper-hi); }
.panel-head .ph-ic { display: grid; place-items: center; width: 44px; height: 44px; background: var(--paper); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--wood-dd); }
.panel-head h2 { margin: 0; font-family: var(--px); font-weight: 700; font-size: 26px; line-height: 1; text-shadow: 0 3px 0 var(--wood-dd); }
.panel-head .ph-sub { font-family: var(--px); font-size: 14px; opacity: .9; margin-top: 4px; text-shadow: 0 2px 0 var(--wood-dd); }
.panel-head .ph-spacer { flex: 1; }
.panel-head .x { border: 0; width: 44px; height: 44px; display: grid; place-items: center; background: var(--berry); clip-path: var(--notch); box-shadow: inset 0 -4px 0 var(--berry-d), inset 0 0 0 2px #6b1f17; }
.panel-head .x .pxi { filter: brightness(0) invert(1); }
.panel-head .x:hover { filter: brightness(1.1); }
.panel-head .back { margin-right: 4px; }
.panel-body {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; position: relative;
  background: var(--paper); clip-path: var(--notch);
  background-image: radial-gradient(rgba(150,100,40,.07) 1px, transparent 1.5px), radial-gradient(rgba(150,100,40,.05) 1px, transparent 1.5px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px;
  box-shadow: inset 0 0 0 3px var(--paper-3), inset 0 6px 0 3px rgba(0,0,0,.05);
  scrollbar-width: thin; scrollbar-color: var(--wood) var(--paper-2);
}
.panel-body.flush { padding: 0; overflow: hidden; }
.pad { padding: 26px 30px 34px; }
.panel-body h3 { font-family: var(--px); font-weight: 700; font-size: 22px; margin: 0 0 10px; line-height: 1.15; }
.panel-body h4 { font-family: var(--px); font-weight: 600; font-size: 18px; margin: 0 0 6px; }
.panel-body p { margin: 0 0 12px; }
.panel-body ul { margin: 0 0 12px; padding-left: 20px; }
.panel-body li { margin-bottom: 6px; }
.panel-body li::marker { color: var(--leaf-d); }
.lead { font-size: 17px; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.kicker { font-family: var(--px); font-size: 14px; color: var(--leaf-d); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.card {
  background: var(--paper-hi); clip-path: var(--notch); padding: 18px 20px;
  box-shadow: inset 0 0 0 2px var(--paper-3), inset 0 -4px 0 2px rgba(0,0,0,.04);
}
.divider { height: 6px; margin: 22px 0; background: repeating-linear-gradient(90deg, var(--paper-3) 0 10px, transparent 10px 16px); }

/* hidden acorn buttons */
.secret { border: 0; background: transparent; padding: 4px; display: inline-grid; place-items: center; cursor: pointer; position: relative; }
.secret .pxi { transition: transform .2s; }
.secret:hover .pxi { transform: rotate(-12deg) scale(1.1); }
.secret.found { opacity: .25; pointer-events: none; }
.glint { position: absolute; width: 8px; height: 8px; right: 0; top: 0; pointer-events: none; animation: glint 2.6s infinite; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@keyframes glint { 0%, 80%, 100% { transform: scale(0); } 88% { transform: scale(1.3) rotate(45deg); } }

/* ---------------- ABOUT ---------------- */
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: 30px; }
.polaroid { position: relative; background: #fffaf0; padding: 12px 12px 46px; transform: rotate(-2deg); box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 0 0 2px #e7d6b6; margin: 8px 6px 18px; }
.polaroid img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; background: #ddd; }
.polaroid .cap { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--px); font-size: 17px; }
.polaroid .tape { position: absolute; left: 50%; top: -10px; width: 90px; height: 24px; margin-left: -45px; background: rgba(242,193,78,.6); transform: rotate(3deg); }
.statsheet { padding: 14px 16px; }
.stat { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; padding: 7px 0; border-bottom: 2px dashed var(--paper-3); }
.stat:last-child { border-bottom: 0; }
.stat .s-l { font-family: var(--px); font-size: 13px; color: var(--ink-3); line-height: 1.1; }
.stat .s-v { font-weight: 700; font-size: 15px; line-height: 1.3; }
.about-main .hello { font-family: var(--px); font-weight: 700; font-size: 34px; line-height: 1.05; margin: 4px 0 14px; }
.lookfor { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 18px; padding: 14px 16px; background: #e9f5d8; clip-path: var(--notch); box-shadow: inset 0 0 0 2px #b9d99a; }
.lookfor b { font-family: var(--px); font-weight: 600; }
.fireside { margin-top: 26px; }
.fireside details { background: var(--paper-hi); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--paper-3); margin-bottom: 8px; }
.fireside summary { list-style: none; cursor: pointer; padding: 13px 16px 13px 44px; font-family: var(--px); font-weight: 600; font-size: 17px; position: relative; }
.fireside summary::-webkit-details-marker { display: none; }
.fireside summary::before { content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--berry); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .15s; }
.fireside details[open] summary::before { transform: rotate(90deg); }
.fireside details p { padding: 0 18px 16px 44px; margin: 0; }
.bookshelf { display: flex; align-items: flex-end; gap: 2px; margin-top: 18px; padding: 8px 10px 0; height: 56px; background: var(--wood-d); box-shadow: inset 0 -8px 0 var(--wood-dd), inset 0 0 0 3px var(--wood-dd); width: max-content; }
.bookshelf i { display: block; width: 12px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.bookshelf .secret { padding: 0 3px 8px; }

/* ---------------- PROJECTS (barn) ---------------- */
.barn-bg { background-color: #f3dfb4; background-image: repeating-linear-gradient(90deg, rgba(120,70,30,.07) 0 2px, transparent 2px 48px); }
.featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; padding: 0; overflow: hidden; margin-bottom: 26px; }
.featured .f-img { position: relative; min-height: 280px; background: #222 center/cover no-repeat; }
.featured .f-img .ribbon-tag { position: absolute; left: 14px; top: 14px; }
.featured .f-body { padding: 24px 26px; }
.ribbon-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--px); font-weight: 600; font-size: 13px; color: #fff; background: var(--berry); padding: 5px 10px 6px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%); padding-right: 16px; }
.crate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.crate {
  position: relative; border: 0; text-align: left; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #c99459;
  background-image: repeating-linear-gradient(180deg, transparent 0 22px, rgba(0,0,0,.14) 22px 24px);
  clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--wood-dd), inset 0 0 0 6px #ddb07a;
  transition: transform .15s;
}
.crate:hover { transform: translateY(-3px) rotate(-.4deg); }
.crate .c-win { height: 140px; background: #2b2b2b center/cover no-repeat; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--wood-dd); display: grid; place-items: center; overflow: hidden; }
.crate .c-win { position: relative; }
.crate .c-win canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.crate .c-label { background: var(--paper-hi); padding: 10px 12px 12px; clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--paper-3); flex: 1; }
.crate .c-title { font-family: var(--px); font-weight: 700; font-size: 18px; line-height: 1.1; }
.crate .c-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.35; }
.crate .chips { margin-top: 8px; }
.crate .chip { font-size: 12px; padding: 4px 6px 5px; }
.haybale { margin-top: 26px; display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-family: var(--px); font-size: 14px; }
.haybale .secret { width: 74px; height: 50px; background: #e8c35a; clip-path: var(--notch); box-shadow: inset 0 0 0 3px #a8822a, inset 0 -6px 0 3px #d1a940; background-image: repeating-linear-gradient(100deg, transparent 0 5px, rgba(160,120,30,.4) 5px 7px); }
.proj-hero { width: 100%; border: 0; padding: 0; position: relative; height: 300px; background: #2b2b2b center/cover no-repeat; clip-path: var(--notch); margin-bottom: 20px; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; }
.proj-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.proj-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-2); font-family: var(--px); font-size: 15px; margin: 6px 0 14px; }
.proj-sec { margin-top: 24px; }
.proj-sec h4 { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.proj-sec h4::before { content: ""; width: 10px; height: 10px; background: var(--leaf); box-shadow: 0 0 0 2px var(--leaf-d); }
.formula { font-family: var(--px); font-size: 19px; background: var(--ink); color: var(--gold-l); padding: 12px 16px 13px; clip-path: var(--notch); margin: 4px 0 12px; overflow-x: auto; white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.statbox { background: var(--paper-hi); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--paper-3); padding: 12px 14px; }
.statbox b { display: block; font-family: var(--px); font-size: 26px; line-height: 1.05; color: var(--leaf-d); }
.statbox span { font-size: 13.5px; color: var(--ink-2); line-height: 1.3; display: block; margin-top: 4px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.thumb { border: 0; padding: 0; background: #fff; clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--paper-3); text-align: left; cursor: zoom-in; overflow: hidden; }
.thumb img { display: block; width: 100%; height: 120px; object-fit: cover; }
.thumb span { display: block; font-size: 12.5px; line-height: 1.3; padding: 7px 9px 9px; color: var(--ink-2); }
.thumbs.wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.thumbs.wide img { height: 170px; object-fit: contain; background: #fff; }
.credits { font-size: 14px; color: var(--ink-3); margin-top: 18px; }

/* ---------------- RESUME (noticeboard) ---------------- */
.cork { background: #c58b52; background-image: radial-gradient(rgba(90,50,20,.35) 1px, transparent 1.6px), radial-gradient(rgba(255,230,190,.25) 1px, transparent 1.6px); background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px; }
.notes { columns: 2 320px; column-gap: 22px; }
.note { break-inside: avoid; position: relative; background: #fffaf0; padding: 26px 22px 20px; margin: 0 0 24px; box-shadow: 0 5px 0 rgba(60,30,10,.25); }
.note:nth-child(3n+1) { transform: rotate(-1.1deg); } .note:nth-child(3n+2) { transform: rotate(.9deg); } .note:nth-child(3n) { transform: rotate(-.4deg); }
.note.yellow { background: #fff1a8; } .note.pink { background: #ffd8e2; } .note.green { background: #dcf2c7; } .note.blue { background: #d8ebff; }
.note .pin { position: absolute; left: 50%; top: -8px; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, var(--berry) 55%, var(--berry-d)); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.note .pin.secret { width: 26px; height: 26px; margin-left: -13px; top: -12px; border-radius: 0; background: none; box-shadow: none; padding: 0; }
.note h3 { font-size: 21px; }
.note .item { margin-bottom: 12px; }
.note .item b { font-family: var(--px); font-weight: 600; font-size: 16.5px; display: block; line-height: 1.2; }
.note .item span { font-size: 14.5px; color: var(--ink-2); }
.resume-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.resume-btns .rb { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.resume-btns .rb-l { font-family: var(--px); font-size: 15px; flex-basis: 100%; }
.wanted { text-align: center; background: #f3e2b8 !important; border: 3px solid #8a5a2b; }
.wanted .w-title { font-family: var(--px); font-weight: 700; font-size: 38px; letter-spacing: .1em; line-height: 1; color: #6b3416; }
.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hl-grid b { font-family: var(--px); font-size: 22px; color: var(--berry-d); display: block; line-height: 1.1; }
.hl-grid span { font-size: 13px; color: var(--ink-2); line-height: 1.25; display: block; }

/* ---------------- CERTS (fair booth) ---------------- */
.awning { height: 34px; background: repeating-linear-gradient(90deg, #d9473f 0 40px, #f4ecd8 40px 80px); position: relative; }
.awning::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; background: radial-gradient(circle at 20px 0, #d9473f 19px, transparent 20px) 0 0 / 80px 14px repeat-x, radial-gradient(circle at 60px 0, #f4ecd8 19px, transparent 20px) 0 0 / 80px 14px repeat-x; }
.booth-intro { padding-top: 34px; }
.ribbons { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.rcard { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; }
.rcard .rosette { width: 84px; }
.rcard .r-title { font-family: var(--px); font-weight: 700; font-size: 18px; line-height: 1.15; }
.rcard .r-iss { font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.rcard .r-meta { font-family: var(--px); font-size: 13px; color: var(--ink-3); margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.nw { white-space: nowrap; }
.rcard .r-note { font-size: 14px; margin: 8px 0 10px; }
.rcard .r-img { display: block; width: 100%; border: 0; padding: 0; margin-top: 10px; cursor: zoom-in; clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--paper-3); background: #fff; }
.rcard .r-img img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: 50% 30%; }
.prize { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-family: var(--px); font-size: 14px; color: var(--ink-3); }

/* ---------------- HOBBIES (greenhouse) ---------------- */
.glasshouse { background-color: #dff3ef; background-image: linear-gradient(rgba(255,255,255,.75) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.75) 2px, transparent 2px), linear-gradient(135deg, rgba(255,255,255,.35) 0 30%, transparent 30% 45%, rgba(255,255,255,.25) 45% 52%, transparent 52%); background-size: 120px 90px, 120px 90px, 100% 100%; }
.shelf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 18px; }
.pot { border: 0; background: transparent; padding: 0; display: flex; flex-direction: column; align-items: center; position: relative; }
.pot .plant { width: 112px; height: 140px; image-rendering: pixelated; }
.pot .tag { margin-top: -6px; font-family: var(--px); font-weight: 600; font-size: 15px; background: var(--paper-hi); padding: 5px 10px 6px; clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--wood); }
.pot::after { content: ""; position: absolute; left: -9px; right: -9px; top: 138px; height: 10px; background: var(--wood); box-shadow: inset 0 -3px 0 var(--wood-d); z-index: -1; }
.pot.bloomed .tag { background: #fff1b8; }
.pot:hover .plant { transform: translateY(-2px); }
.hobby-note { margin-top: 24px; min-height: 100px; display: flex; gap: 16px; align-items: center; }
.hobby-note .hn-ic { flex: none; width: 70px; height: 88px; image-rendering: pixelated; }
.hobby-note h4 { font-size: 22px; }

/* ---------------- SKILLS (night sky) ---------------- */
.sky-wrap { position: absolute; inset: 0; background: #0c1230; overflow: hidden; }
.sky-wrap canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.sky-labels { position: absolute; inset: 0; pointer-events: none; }
.cname { position: absolute; transform: translate(-50%, 0); pointer-events: auto; border: 0; background: transparent; text-align: center; color: #e9ecff; font-family: var(--px); padding: 2px 6px; }
.cname b { display: block; font-size: 16px; font-weight: 600; text-shadow: 0 0 8px rgba(160,180,255,.6); }
.cname span { display: block; font-size: 12.5px; opacity: .7; }
.cname:hover b, .cname.on b { color: var(--gold-l); }
.sky-tip { position: absolute; z-index: 3; min-width: 200px; max-width: 280px; padding: 12px 14px 13px; background: rgba(16,22,58,.94); color: #eef0ff; clip-path: var(--notch); box-shadow: inset 0 0 0 2px #5767b8; pointer-events: none; font-size: 14px; }
.sky-tip b { font-family: var(--px); font-size: 18px; display: block; }
.sky-tip .pips { margin: 6px 0; display: flex; gap: 3px; }
.sky-tip .pips i { width: 14px; height: 8px; background: #2a3470; }
.sky-tip .pips i.on { background: var(--gold); }
.sky-tip .g { font-family: var(--px); font-size: 12.5px; opacity: .7; }
.sky-ui { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 10px; align-items: flex-end; justify-content: space-between; pointer-events: none; flex-wrap: wrap; }
.sky-ui > * { pointer-events: auto; }
.sky-hint { font-family: var(--px); font-size: 14px; color: #cfd6ff; background: rgba(10,14,40,.7); padding: 8px 12px 9px; clip-path: var(--notch); }
.sky-list { position: absolute; inset: 0; overflow: auto; background: rgba(10,14,40,.94); color: #eef0ff; padding: 26px 30px 90px; display: none; }
.sky-list.on { display: block; }
.sky-list h4 { font-family: var(--px); color: var(--gold-l); font-size: 20px; margin: 18px 0 8px; }
.skill-row { display: grid; grid-template-columns: minmax(150px, 230px) 120px 1fr; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px dashed #36407c; font-size: 14.5px; }
.skill-row .bar { display: flex; gap: 3px; } .skill-row .bar i { height: 9px; flex: 1; background: #2a3470; } .skill-row .bar i.on { background: var(--gold); }
.skill-row .u { color: #aab3e8; font-size: 13px; }

/* ---------------- EXPERIENCE (road) ---------------- */
.road-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--paper); }
.road-stage { position: relative; height: 46%; min-height: 220px; overflow: hidden; background: #8fd3f5; touch-action: pan-y; cursor: grab; }
.road-stage canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.road-tags { position: absolute; inset: 0; pointer-events: none; }
.road-tag { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: auto; border: 0; background: transparent; padding: 0; }
.road-tag .rt-board { background: var(--paper-hi); padding: 5px; clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--wood-dd); }
.road-tag img { display: block; width: 74px; height: 40px; object-fit: contain; background: #fff; }
.road-tag .rt-name { font-family: var(--px); font-size: 13px; font-weight: 600; background: var(--wood-d); color: var(--paper-hi); padding: 3px 7px 4px; clip-path: var(--notch); white-space: nowrap; margin-top: -2px; }
.road-tag.cur .rt-board { box-shadow: inset 0 0 0 3px var(--berry); }
.road-tag.cur .rt-name { background: var(--berry); }
.year-tag { position: absolute; transform: translate(-50%, 0); font-family: var(--px); font-weight: 700; font-size: 16px; color: var(--paper-hi); background: var(--wood-d); padding: 4px 9px 5px; clip-path: var(--notch); }
.road-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paper-2); box-shadow: inset 0 3px 0 rgba(0,0,0,.08); flex-wrap: wrap; }
.road-dots { display: flex; align-items: center; flex: 1; min-width: 180px; gap: 0; position: relative; height: 28px; }
.road-dots::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, var(--wood) 0 8px, transparent 8px 12px); }
.road-dots .rd { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 0; padding: 0; background: var(--paper-hi); clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--wood-d); }
.road-dots .rd.done { background: var(--leaf); }
.road-dots .rd.cur { background: var(--berry); box-shadow: inset 0 0 0 3px var(--berry-d); transform: scale(1.2); }
.road-dots .rd-cart { position: absolute; top: 50%; width: 22px; height: 22px; margin: -18px 0 0 -11px; pointer-events: none; transition: left .1s linear; }
.road-card-wrap { flex: 1; min-height: 0; overflow: auto; padding: 20px 26px 26px; }
.road-card { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: start; }
.road-card .logo { width: 110px; height: 110px; background: #fff center/contain no-repeat; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--paper-3); }
.road-card .role { font-family: var(--px); font-weight: 700; font-size: 24px; line-height: 1.1; }
.road-card .org { font-weight: 700; color: var(--ink-2); margin-top: 3px; }
.road-card .when { font-family: var(--px); font-size: 15px; color: var(--leaf-d); margin: 4px 0 10px; }
.journal { margin-top: 12px; padding: 12px 14px; background: #fff1b8; clip-path: var(--notch); box-shadow: inset 0 0 0 2px #e2c35c; font-size: 14.5px; }
.journal b { font-family: var(--px); font-weight: 600; display: block; margin-bottom: 2px; }
.road-intro { text-align: center; max-width: 560px; margin: 10px auto; }
.road-intro .big { font-family: var(--px); font-size: 26px; font-weight: 700; }
.timeline-list { display: none; }
.road-wrap.list .road-stage, .road-wrap.list .road-card-wrap { display: none; }
.road-wrap.list .timeline-list { display: block; flex: 1; overflow: auto; padding: 22px 26px; }
.tl-item { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 16px 0; border-bottom: 2px dashed var(--paper-3); }
.tl-item img { width: 74px; height: 74px; object-fit: contain; background: #fff; clip-path: var(--notch); }

/* ---------------- CONTACT (mailbox) ---------------- */
.mail-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: start; }
.letter { position: relative; background: #fffdf5; padding: 26px 26px 22px; box-shadow: 0 6px 0 rgba(0,0,0,.15), 0 0 0 2px #eadcbc; transform-origin: 50% 50%; }
.letter .stamp { position: absolute; right: 18px; top: 16px; width: 64px; height: 76px; padding: 6px; background: #fff; border: 0; box-shadow: 0 0 0 2px #e2cfa8; clip-path: polygon(0 4%, 4% 0, 12% 4%, 20% 0, 28% 4%, 36% 0, 44% 4%, 52% 0, 60% 4%, 68% 0, 76% 4%, 84% 0, 92% 4%, 100% 0, 100% 100%, 92% 96%, 84% 100%, 76% 96%, 68% 100%, 60% 96%, 52% 100%, 44% 96%, 36% 100%, 28% 96%, 20% 100%, 12% 96%, 4% 100%, 0 96%); }
.letter .stamp .st-in { width: 100%; height: 100%; display: grid; place-items: center; background: #cfe8f5; }
.letter label { display: block; font-family: var(--px); font-size: 14px; color: var(--ink-3); margin: 0 0 4px; }
.letter .to { font-family: var(--px); font-size: 20px; margin: 0 0 18px; }
.letter input, .letter textarea { width: 100%; border: 0; background: transparent; font: 600 16px/1.5 var(--body); color: var(--ink); padding: 6px 4px; margin-bottom: 16px; outline: none; border-bottom: 2px dashed #c9d9e8; }
.letter textarea { background-image: repeating-linear-gradient(180deg, transparent 0 23px, #e3edf6 23px 24px); background-position: 0 6px; }
.letter input:focus, .letter textarea:focus { background: rgba(242,193,78,.12); }
.letter textarea { resize: vertical; min-height: 165px; }
.letter .sig { font-family: var(--px); color: var(--ink-3); font-size: 14px; }
.letter.folding { animation: fold .7s forwards; }
@keyframes fold { 40% { transform: scaleY(.25) rotate(-2deg); } 100% { transform: scale(.08) translateY(-300px); opacity: 0; } }
.routes .card { margin-bottom: 12px; }
.route { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px dashed var(--paper-3); text-decoration: none; }
.route:last-child { border-bottom: 0; }
.route .r-t { font-family: var(--px); font-weight: 600; font-size: 16px; display: block; }
.route .r-s { font-size: 14px; color: var(--ink-2); word-break: break-all; }
.route:hover .r-t { color: var(--berry-d); }
.pigeon-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.pigeon-layer canvas { position: absolute; image-rendering: pixelated; }
.sent-note { display: none; }
.sent .sent-note { display: block; }
.copy-ok { color: var(--leaf-d); font-family: var(--px); font-size: 14px; }

/* ---------------- Journal / VIP ---------------- */
.journal-list { display: grid; gap: 8px; }
.jrow { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--paper-hi); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--paper-3); }
.jrow.got { background: #fff1b8; }
.jrow .pxi.dim { filter: grayscale(1) opacity(.35); }
.jrow b { font-family: var(--px); font-weight: 600; display: block; }
.jrow span { font-size: 14px; color: var(--ink-2); }
.progress { height: 14px; background: var(--paper-2); clip-path: var(--notch); box-shadow: inset 0 0 0 2px var(--paper-3); margin: 6px 0 18px; overflow: hidden; }
.progress i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, var(--gold-d) 10px 12px); }

.vip-wrap { padding: 28px 24px 30px; display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; }
.ticket {
  position: relative; width: min(560px, 100%); padding: 26px 30px 24px 30px; color: #5a3708;
  background: linear-gradient(135deg, #ffe58f, #f6c445 40%, #ffe9a6 55%, #e9ac2c);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 16px, #000 17px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 16px, #000 17px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 16px, #000 17px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 16px, #000 17px) right / 51% 100% no-repeat;
  box-shadow: inset 0 0 0 4px #b77d14, inset 0 0 0 8px #ffe9a6, inset 0 0 0 10px #b77d14;
  animation: shine 4s linear infinite; background-size: 200% 200%;
}
@keyframes shine { 50% { background-position: 100% 100%; } }
.ticket .t-top { display: flex; justify-content: space-between; font-family: var(--px); font-size: 14px; letter-spacing: .12em; }
.ticket .t-title { font-family: var(--px); font-weight: 700; font-size: clamp(26px, 5vw, 38px); line-height: 1; margin: 12px 0 4px; text-align: center; }
.ticket .t-sub { text-align: center; font-family: var(--px); font-size: 17px; }
.ticket .t-note { margin: 16px 0 6px; font-size: 15.5px; line-height: 1.5; text-align: center; }
.ticket .t-sign { text-align: right; font-family: var(--px); font-size: 18px; }
.ticket .t-perf { position: absolute; top: 14px; bottom: 14px; right: 116px; border-right: 3px dashed rgba(120,70,10,.35); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 120; }

/* ---------------- QUICK VIEW ---------------- */
#quick { position: fixed; inset: 0; z-index: 90; overflow: auto; background: #f4ead6; color: #2f2117; font-family: var(--body); }
#quick[hidden] { display: none; }
.qv-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--wood-d); color: var(--paper-hi); font-family: var(--px); box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.qv-top .grow { flex: 1; }
.qv { max-width: 920px; margin: 0 auto; padding: 36px 22px 80px; }
.qv-head { display: grid; grid-template-columns: 140px 1fr; gap: 26px; align-items: center; margin-bottom: 26px; }
.qv-head img { width: 140px; height: 140px; object-fit: cover; object-position: 50% 30%; clip-path: var(--notch-lg); }
.qv-head h1 { font-family: var(--px); font-size: 44px; line-height: 1; margin: 0 0 6px; }
.qv-head .t { font-size: 18px; font-weight: 700; color: #6b4426; }
.qv-head .m { margin-top: 6px; color: #6b5a48; }
.qv h2 { font-family: var(--px); font-size: 26px; margin: 38px 0 14px; padding-bottom: 8px; border-bottom: 3px solid #e2c99c; }
.qv-item { margin-bottom: 20px; }
.qv-item .h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.qv-item .h b { font-size: 17.5px; }
.qv-item .h span { font-family: var(--px); color: #6b5a48; font-size: 14.5px; }
.qv-item .o { color: #6b4426; font-weight: 700; }
.qv-item ul { margin: 6px 0 0; padding-left: 20px; } .qv-item li { margin-bottom: 4px; }
.qv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.qv-card { background: #fffaf0; padding: 14px 16px; clip-path: var(--notch); box-shadow: inset 0 0 0 2px #e6d3ad; }
.qv-card b { display: block; font-size: 16px; }
.qv-card p { margin: 4px 0 0; font-size: 14.5px; color: #4b3a2a; }
.qv-skills .g { margin-bottom: 10px; } .qv-skills .g b { font-family: var(--px); margin-right: 6px; }
.qv a { color: #9b3226; }

/* ---------------- lightbox ---------------- */
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(20,10,4,.88); display: grid; place-items: center; padding: 60px 70px; }
.lightbox[hidden] { display: none; }
.lb-frame { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--paper); padding: 10px; clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--wood-dd); }
.lb-frame img { max-width: min(1200px, calc(100vw - 160px)); max-height: calc(100dvh - 190px); object-fit: contain; background: #fff; display: block; margin: 0 auto; }
.lb-bar { display: flex; gap: 12px; align-items: center; padding: 10px 4px 2px; font-size: 14.5px; flex-wrap: wrap; }
.lb-cap { flex: 1; min-width: 160px; }
.lb-count { font-family: var(--px); color: var(--ink-3); }
.lb-open { font-family: var(--px); font-size: 14px; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.lb-btn { position: absolute; border: 0; width: 52px; height: 52px; display: grid; place-items: center; background: var(--paper); clip-path: var(--notch); box-shadow: inset 0 0 0 3px var(--wood-dd), inset 0 -4px 0 3px var(--paper-3); }
.lb-prev { left: 10px; top: 50%; margin-top: -26px; } .lb-next { right: 10px; top: 50%; margin-top: -26px; } .lb-close { right: 10px; top: 10px; }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-side { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: start; }
  .featured { grid-template-columns: 1fr; }
  .featured .f-img { min-height: 210px; }
  .mail-grid { grid-template-columns: 1fr; }
  .shelf-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .panel-wrap { left: 0; top: 0; right: 0; bottom: 0; transform: none; animation: none; filter: none; }
  .panel, .panel.auto-h, .panel.narrow { width: 100vw; height: 100dvh; max-height: none; clip-path: none; padding: 0 8px calc(8px + var(--safe-b)); }
  .panel-head { padding: 10px 2px 8px 4px; gap: 10px; }
  .panel-head h2 { font-size: 21px; }
  .panel-head .ph-ic { width: 38px; height: 38px; }
  .panel-head .ph-sub { font-size: 12.5px; }
  .pad { padding: 18px 16px 26px; }
  .about-side { grid-template-columns: 1fr; }
  .polaroid { max-width: 260px; margin: 8px auto 18px; }
  .about-main .hello { font-size: 28px; }
  .shelf-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; }
  .crate-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .crate { padding: 8px; }
  .crate .c-win { height: 96px; }
  .crate .c-title { font-size: 15.5px; }
  .crate .c-sub { display: none; }
  .crate .chips { display: none; }
  .proj-hero { height: 210px; }
  .road-card { grid-template-columns: 1fr; gap: 10px; }
  .road-card .logo { width: 84px; height: 60px; }
  .road-card-wrap { padding: 14px 16px 20px; }
  .road-stage { height: 40%; min-height: 200px; }
  .road-bar { gap: 8px; padding: 8px 10px; }
  .road-dots { order: -1; flex-basis: 100%; }
  .road-bar [data-a="first"] { display: none; }
  .road-bar .btn { flex: 1; }
  .rcard { grid-template-columns: 60px 1fr; }
  .rcard .rosette { width: 60px; }
  .ribbons { grid-template-columns: 1fr; }
  .skill-row { grid-template-columns: 1fr 90px; } .skill-row .u { grid-column: 1 / -1; }
  .qv-top { padding: 8px 10px; gap: 8px; } .qv-label { display: none; }
  .qv-head { grid-template-columns: 90px 1fr; gap: 16px; } .qv-head img { width: 90px; height: 90px; } .qv-head h1 { font-size: 32px; }
  .lightbox { padding: 64px 8px 70px; }
  .lb-frame img { max-width: calc(100vw - 36px); }
  .lb-prev, .lb-next { top: auto; bottom: 8px; margin: 0; }
  #hud-left { left: 8px; top: 8px; } #hud-right { right: 8px; top: 8px; }
  .nameplate { padding: 8px 10px 9px 8px; gap: 8px; }
  .nameplate .np-face { width: 32px; height: 32px; }
  .nameplate .np-name { font-size: 15px; }
  .nameplate .np-sub { font-size: 11.5px; }
  .clock { min-width: 0; padding: 8px 11px 9px; }
  .clock .c-date { font-size: 12.5px; } .clock .c-time { font-size: 18px; } .clock .c-season { font-size: 11.5px; }
  .icon-btn, .acorn-count { height: 40px; } .icon-btn { width: 40px; }
  .acorn-count { font-size: 15px; padding: 7px 10px 8px 8px; }
  #toolbar { gap: 2px; padding: 6px; }
  .slot { width: calc((100vw - 44px) / 8); height: calc((100vw - 44px) / 8); max-width: 48px; max-height: 48px; }
  .slot .pxi { width: 28px; height: 28px; }
  .slot .k { display: none; }
  .hint-bubble { bottom: calc(76px + var(--safe-b)); font-size: 13.5px; }
  .title-card { top: 46%; }
  .title-sign { padding: 14px 6px 18px; }
  .title-sign .board { padding: 14px 16px 16px; }
  .notes { columns: 1; }
}
@media (max-width: 380px) {
  .nameplate .np-sub { display: none; }
}
@media (hover: none) { .slot-wrap .tip { display: none; } .title-foot { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  body { overflow: visible; background: #fff; }
  #app, #title, #panel-root, #toasts, .qv-top { display: none !important; }
  #quick { position: static; display: block !important; background: #fff; }
}