/* HOBBIES.DSK: cream paper, hard pixel edges, hard offset shadows, no soft blur anywhere */
#world.w-HOBBIES{--ink:#2b2118;--paper:#efe3c6;--card:#fbf7ee;background:var(--paper);color:var(--ink);font-family:"VT323",ui-monospace,monospace;scrollbar-width:none}
#world.w-HOBBIES::-webkit-scrollbar{display:none}
.hb-track{position:relative}
.hb-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.hb-cv{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges}
.hb-o{position:absolute;left:0;top:0;visibility:hidden;will-change:transform}

/* chapter tag, top left (Eject owns the top right) */
.hb-tag{position:absolute;left:30px;top:calc(26px + env(safe-area-inset-top,0px));display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:10px;z-index:5;pointer-events:none;color:var(--ink);transition:color .4s}
.hb-tag .no{font-family:"Silkscreen",monospace;font-size:12px;background:var(--ink);color:var(--paper);padding:2px 5px;align-self:center;transition:background .4s,color .4s}
.hb-tag .ttl{font-size:clamp(30px,3vw,42px);line-height:.9}
.hb-tag .en{grid-column:2;font-family:"Silkscreen",monospace;font-size:10px;letter-spacing:.14em;opacity:.7}
.hb-tag small{grid-column:2;font-size:18px;margin-top:2px;opacity:0;transition:opacity .4s}
.hb-tag small::before{content:"+ "}
.hb-tag.swap .ttl{animation:hb-swap .42s steps(4)}
@keyframes hb-swap{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
.hb-tag.dark{color:#efe3c6}
.hb-tag.dark .no{background:#efe3c6;color:#262838}
.hb-hint{position:absolute;left:50%;bottom:calc(34px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-family:"Silkscreen",monospace;font-size:11px;letter-spacing:.2em;transition:opacity .4s}
.hb-hint span{animation:hb-blink 1.2s steps(1) infinite}
@keyframes hb-blink{50%{opacity:.35}}
.hb-grain{position:absolute;inset:-60px;background:var(--noise) 0 0/160px 160px;opacity:.13;mix-blend-mode:overlay;pointer-events:none;z-index:6;animation:hb-grain .5s steps(5) infinite}
@keyframes hb-grain{0%{transform:translate(0,0)}20%{transform:translate(-23px,17px)}40%{transform:translate(31px,-9px)}60%{transform:translate(-11px,-29px)}80%{transform:translate(19px,27px)}100%{transform:translate(0,0)}}
/* the dark rounded frame around the whole page */
.hb-frame{position:absolute;inset:10px;border-radius:18px;box-shadow:0 0 0 40px #17130f,inset 0 0 0 1px rgba(0,0,0,.35);pointer-events:none;z-index:7}
#world.w-HOBBIES.open ~ #eject{top:calc(22px + env(safe-area-inset-top,0px));right:26px;font-family:"Silkscreen",monospace}
.hb-boot{position:absolute;left:30px;top:calc(26px + env(safe-area-inset-top,0px));margin:0;z-index:5;font-family:"VT323",monospace;font-size:clamp(22px,2.2vw,30px);color:#5dff8f;text-shadow:0 0 10px rgba(93,255,143,.6);pointer-events:none}
.hb-flash,.hb-dark{position:absolute;inset:0;pointer-events:none;opacity:0}
.hb-flash{background:#fff;z-index:8}
.hb-dark{background:#000;z-index:9}

/* photo placeholders */
.hb-ph{width:var(--ph);margin:0;background:var(--card);border:2px solid var(--ink);padding:6px 6px 0;box-shadow:6px 6px 0 rgba(70,45,20,.22)}
.hb-ph .pic,.hb-port .pic,.pol .pic{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#d8c7a2 0 6px,#e6d8b8 6px 12px);font-family:"Silkscreen",monospace;font-size:11px;letter-spacing:.1em;color:#7a6548}
.hb-ph .pic{aspect-ratio:4/3}
.hb-ph figcaption{font-size:20px;line-height:1;padding:8px 2px 9px}

/* portholes: rounded window in a thick cabin frame, text on the other side */
.hb-port{width:var(--row);display:flex;align-items:center;gap:6%}
.hb-port.r{flex-direction:row-reverse;text-align:right}
.hb-port .win{flex:none;width:var(--win);aspect-ratio:.74;border-radius:44%/34%;background:#e8ecef;padding:calc(var(--win)*.09);box-shadow:inset -6px -6px 0 #c3cbd2,inset 6px 6px 0 #fff,0 0 0 2px #2b2118,8px 8px 0 rgba(40,70,100,.22);box-sizing:border-box}
.hb-port .pic{width:100%;height:100%;border-radius:40%/30%;background:linear-gradient(#9cc7ea 0 55%,#f4f0e6 55% 62%,#c9d9a8 62%);box-shadow:inset 0 0 0 3px #7f8c96;color:#3d5b74}
.hb-port .txt{max-width:30rem}
.hb-port small{font-family:"Silkscreen",monospace;font-size:11px;letter-spacing:.14em;opacity:.7}
.hb-port h3{margin:6px 0 8px;font-weight:400;font-size:clamp(34px,4vw,56px);line-height:.95}
.hb-port p{margin:0;font-size:21px;line-height:1.3}

/* instant photo: same component on the page and in the air */
.pol{container-type:inline-size;background:var(--card);border:2px solid var(--ink);padding:0;box-sizing:border-box;box-shadow:5px 5px 0 rgba(70,45,20,.22)}
.pol .pic{position:relative;margin:6cqw 6cqw 0;aspect-ratio:1;align-content:center;gap:4cqw;background:hsl(var(--h) 45% 62%);color:#fbf7ee;font-size:8cqw;overflow:hidden}
.pol .pic::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 4px)}
.pol .pic i{font-style:normal;font-family:"VT323",monospace;font-size:18cqw;line-height:.8}
.pol .pic b{font-weight:400;font-family:"Silkscreen",monospace;font-size:6cqw}
.pol>p{margin:0;height:18cqw;display:flex;align-items:center;justify-content:center;font-size:11cqw}
.pol .dev{position:absolute;inset:0;background:#3a2f28;z-index:1}
.hb-fall{z-index:4}

/* scrapbook */
.hb-nb{width:var(--bw);height:var(--bh);perspective:calc(var(--bw)*2.2);transform-origin:25% 50%;z-index:3}
.book{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.pg-base{position:absolute;left:0;top:0;width:50%;height:100%;box-shadow:0 0 0 calc(var(--bw)*.008) #1b1b1b,10px 10px 0 rgba(70,45,20,.2)}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
.leaf .f,.leaf .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf .b{transform:rotateY(180deg)}
.leaf .f::after,.leaf .b::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--sh,0);pointer-events:none}
.leaf.cover .f{box-shadow:0 0 0 calc(var(--bw)*.008) #1b1b1b}
.pg{position:absolute;inset:0;container-type:size;background:#f7f0de radial-gradient(circle,#d9cdb2 1px,transparent 1.5px) 0 0/calc(var(--bw)*.025) calc(var(--bw)*.025)}
.pg.l{box-shadow:inset -14px 0 0 -8px rgba(0,0,0,.08)}
.pg.r{box-shadow:inset 14px 0 0 -8px rgba(0,0,0,.08)}
.pg .pol{position:absolute;left:19%;top:8%;width:62%;transform:rotate(2deg)}
.pg.l .pol{transform:rotate(-2deg)}
.pg .pol::before,.pg .pol::after{content:"";position:absolute;width:24%;height:7%;background:rgba(242,177,52,.7);top:-3%;z-index:2}
.pg .pol::before{left:-6%;transform:rotate(-30deg)}
.pg .pol::after{right:-6%;transform:rotate(30deg)}
.pg .cap{position:absolute;left:10%;right:10%;bottom:6%;margin:0;font-size:6.4cqw;text-align:center}
.pg .cap b{font-weight:400;background:var(--ink);color:#f7f0de;padding:0 .3em}
.pg .pn{position:absolute;bottom:2.5%;font-family:"Silkscreen",monospace;font-size:3.6cqw;opacity:.5}
.pg.l .pn{left:5%}.pg.r .pn{right:5%}
.pg.fin{display:grid;place-content:center;text-align:center}
.pg.fin p{margin:0;font-family:"Silkscreen",monospace;font-size:12cqw}
.pg.fin .cap{position:static;font-family:"VT323",monospace;font-size:7cqw;margin-top:4%}
.shell{position:absolute;inset:0;background:#1b1b1b;display:grid;place-content:center;text-align:center;color:#d6b25a;box-shadow:0 0 0 calc(var(--bw)*.008) #1b1b1b;container-type:size}
.shell b{font-family:"Silkscreen",monospace;font-weight:700;font-size:16cqw;letter-spacing:.06em}
.shell span{font-family:"Silkscreen",monospace;font-size:4cqw;letter-spacing:.2em;opacity:.8}

/* console */
.hb-ns{width:var(--sw);z-index:3}
.hb-ns .scr{position:relative;z-index:2;background:#1b1b1b;padding:calc(var(--sw)*.035) calc(var(--sw)*.05);box-sizing:border-box;box-shadow:0 0 0 2px #0e0e0e,14px 14px 0 rgba(0,0,0,.3)}
.hb-ns .disp{position:relative;width:100%;height:100%;overflow:hidden;background:#101012;color:#eee;font-size:calc(var(--sw)*.03);line-height:1.1}
.hb-ns .jc{position:absolute;top:0;height:100%;width:calc(var(--sw)*.17);z-index:1;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.hb-ns .jc.l{right:100%;background:#0ab9e6;border-radius:calc(var(--sw)*.1) 0 0 calc(var(--sw)*.1)}
.hb-ns .jc.r{left:100%;background:#ff4554;border-radius:0 calc(var(--sw)*.1) calc(var(--sw)*.1) 0}
.hb-ns .jc i{position:absolute;left:50%;transform:translate(-50%,-50%)}
.hb-ns .stk{width:calc(var(--sw)*.07);aspect-ratio:1;border-radius:50%;background:#222;box-shadow:inset 0 0 0 calc(var(--sw)*.012) #3a3a3a}
.hb-ns .l .stk{top:28%}.hb-ns .r .stk{top:66%}
.hb-ns .dpad,.hb-ns .abxy{width:calc(var(--sw)*.025);aspect-ratio:1;border-radius:50%;background:#222;box-shadow:0 calc(var(--sw)*-.032) 0 #222,0 calc(var(--sw)*.032) 0 #222,calc(var(--sw)*-.032) 0 0 #222,calc(var(--sw)*.032) 0 0 #222}
.hb-ns .l .dpad{top:64%}.hb-ns .r .abxy{top:30%}
.hb-ns .ui{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0}
.hb-ns .bar{display:flex;align-items:center;gap:.6em;padding:3% 5% 0;font-family:"Silkscreen",monospace}
.hb-ns .bar em{flex:1}
.hb-ns .av{width:1.8em;aspect-ratio:1;border-radius:50%;background:#f2b134}
.hb-ns .bat{width:1.6em;height:.8em;border:2px solid #eee;box-sizing:border-box;background:linear-gradient(90deg,#eee 70%,transparent 70%)}
.hb-ns .row{display:flex;gap:calc(var(--sw)*.025);padding:4% 0 0 6%;transition:none;will-change:transform}
.hb-ns .tile{flex:none;width:calc(var(--sw)*.165);aspect-ratio:1;display:grid;place-items:center;background:hsl(var(--h) 55% 52%);background-image:linear-gradient(45deg,rgba(0,0,0,.12) 25%,transparent 25% 75%,rgba(0,0,0,.12) 75%),linear-gradient(45deg,rgba(0,0,0,.12) 25%,transparent 25% 75%,rgba(0,0,0,.12) 75%);background-size:calc(var(--sw)*.02) calc(var(--sw)*.02);background-position:0 0,calc(var(--sw)*.01) calc(var(--sw)*.01);font-family:"Silkscreen",monospace;font-size:calc(var(--sw)*.06);color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.3)}
.hb-ns .tile.sel{outline:calc(var(--sw)*.007) solid #2de0e6;outline-offset:calc(var(--sw)*.006);animation:hb-sel 1s steps(2) infinite}
@keyframes hb-sel{50%{outline-color:#9ff6f8}}
.hb-ns .info{padding:3% 6% 0}
.hb-ns .nm{display:block;font-weight:400;font-size:1.4em;color:#2de0e6;margin-bottom:.4em}
.hb-ns .rv{margin:0;line-height:1.15;opacity:.85}
.hb-ns .dock{display:flex;justify-content:center;gap:3%;margin-top:auto;padding-bottom:3%}
.hb-ns .dock i{width:4.5%;aspect-ratio:1;border-radius:50%;background:#43464f}
.hb-ns .logo{position:absolute;inset:0;display:grid;place-items:center;background:#e2412b;color:#fff;font-family:"Silkscreen",monospace;font-weight:700;font-size:calc(var(--sw)*.09);opacity:0}
.hb-ns .off{position:absolute;inset:0;background:#fff;opacity:0}

@media (max-aspect-ratio:9/10){
  .hb-port,.hb-port.r{flex-direction:column;text-align:center;gap:16px}
  .hb-port p{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.hb-grain,.hb-hint span,.hb-ns .tile.sel{animation:none}}