/* ===== Shared wood panel (Modern_UI_Style_1 look) ===== */
:root{
  --ui-ink:#4a3526; --ui-ink-soft:#6f5840; --ui-gold:#9c5a25;
  --ui-fill:#cdb389; --ui-frame:#b87b42; --ui-frame-d:#8a5a30; --ui-outline:#2f2b39;
}
.wood-panel{
  background:var(--ui-fill);
  border:5px solid var(--ui-frame);
  border-radius:16px;
  box-shadow:0 0 0 3px var(--ui-outline),
             inset 0 0 0 2px var(--ui-frame-d),
             inset 0 3px 0 2px rgba(255,255,255,.18),
             0 16px 30px rgba(0,0,0,.45);
}

/* ---------------- Dialogue (Modern UI wood) ---------------- */
#dialogue{position:absolute;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  width:min(720px,92vw);z-index:24;opacity:0;transition:opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1)}
#dialogue.in{opacity:1;transform:translateX(-50%) translateY(0)}
.dlg-main{position:relative;min-height:120px;padding:20px 28px 22px 138px;
  background:var(--ui-fill);border:5px solid var(--ui-frame);border-radius:18px;
  box-shadow:0 0 0 3px var(--ui-outline),inset 0 0 0 2px var(--ui-frame-d),
             inset 0 3px 0 2px rgba(255,255,255,.16),0 18px 34px rgba(0,0,0,.5)}
/* portrait: own square wood frame, neatly inset on the left */
.dlg-portrait{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:104px;height:104px;
  background:#b9a079;border:5px solid var(--ui-frame);border-radius:14px;
  box-shadow:0 0 0 3px var(--ui-outline),inset 0 0 0 2px var(--ui-frame-d);
  display:grid;place-items:center;overflow:hidden}
#dlgPortrait{width:80px;height:80px;image-rendering:pixelated}
/* name plate: own small wood panel attached top-left */
.dlg-name{position:absolute;top:-22px;left:18px;padding:5px 18px;
  font-size:20px;letter-spacing:1px;color:var(--ui-ink);font-weight:600;
  background:var(--ui-fill);border:4px solid var(--ui-frame);border-radius:12px;
  box-shadow:0 0 0 3px var(--ui-outline),inset 0 2px 0 rgba(255,255,255,.18)}
.dlg-body{display:flex;align-items:center;min-height:78px}
#dlgText{margin:0;font-size:20px;line-height:1.45;color:var(--ui-ink);font-weight:500;text-wrap:pretty}
#dlgText .cursor{color:var(--ui-gold);animation:blink .55s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dlg-close{position:absolute;top:8px;right:12px;width:28px;height:28px;font-size:16px;color:var(--ui-ink-soft);
  background:none;transition:color .2s, transform .2s}
.dlg-close:hover{color:#b5442f;transform:rotate(90deg) scale(1.1)}
.dlg-next{position:absolute;bottom:6px;right:14px;font-size:18px;color:var(--ui-gold);
  animation:bobN 1s ease-in-out infinite;opacity:0;transition:opacity .2s}
.dlg-next.show{opacity:1}
@keyframes bobN{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* choices: separate wood box, positioned above-right, with pointer */
.dlg-choices{position:absolute;right:6px;bottom:calc(100% + 16px);display:flex;flex-direction:column;gap:4px;
  padding:12px 16px;min-width:190px;
  background:var(--ui-fill);border:5px solid var(--ui-frame);border-radius:16px;
  box-shadow:0 0 0 3px var(--ui-outline),inset 0 0 0 2px var(--ui-frame-d),
             inset 0 3px 0 2px rgba(255,255,255,.16),0 14px 26px rgba(0,0,0,.5)}
.dlg-choice{position:relative;padding:7px 14px 7px 30px;font-size:18px;color:var(--ui-ink);font-weight:500;
  background:none;text-align:left;border-radius:8px;transition:color .15s, background .15s, transform .12s}
.dlg-choice::before{content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%) scale(0);
  border-left:9px solid var(--ui-gold);border-top:6px solid transparent;border-bottom:6px solid transparent;
  transition:transform .15s cubic-bezier(.22,1,.36,1)}
.dlg-choice:hover{color:var(--ui-gold);background:rgba(156,90,37,.12);transform:translateX(2px)}
.dlg-choice:hover::before{transform:translateY(-50%) scale(1)}
.dlg-choice .em{color:var(--ui-gold);font-weight:700}

/* ---------------- Centered content modal ---------------- */
#panelScrim{position:absolute;inset:0;z-index:34;background:rgba(8,7,5,.5);opacity:0;
  transition:opacity .42s ease;backdrop-filter:blur(3px)}
#panelScrim.in{opacity:1}

#panel{position:absolute;inset:0;z-index:35;display:grid;place-items:center;padding:clamp(14px,4vh,40px);
  opacity:0;pointer-events:none;transition:opacity .28s ease}
#panel.in{opacity:1;pointer-events:auto}

.panel-card{position:relative;width:min(620px,100%);max-height:min(840px,92vh);
  display:flex;flex-direction:column;
  background:linear-gradient(168deg,#d4bb91 0%,#c5aa7c 100%);
  border:5px solid var(--ui-frame);border-radius:20px;
  box-shadow:0 0 0 3px var(--ui-outline),
             inset 0 0 0 2px var(--ui-frame-d),
             inset 0 3px 0 2px rgba(255,255,255,.18),
             0 28px 60px rgba(0,0,0,.55);
  transform:scale(.95) translateY(12px);
  transition:transform .46s cubic-bezier(.22,1,.36,1)}
#panel.in .panel-card{transform:scale(1) translateY(0)}

.panel-close{position:absolute;top:13px;right:13px;z-index:4;width:34px;height:34px;border-radius:10px;
  font-size:14px;color:var(--ui-ink-soft);background:rgba(74,53,38,.1);display:grid;place-items:center;
  transition:background .2s, color .2s, transform .3s cubic-bezier(.22,1,.36,1)}
.panel-close:hover{background:#b5442f;color:#fff;transform:rotate(90deg)}
.panel-close:focus-visible{outline:2px solid var(--ui-gold);outline-offset:2px}

#panelInner{overflow-y:auto;overflow-x:hidden;padding:34px 36px 32px;
  scrollbar-width:thin;scrollbar-color:rgba(156,90,37,.45) transparent}
#panelInner::-webkit-scrollbar{width:9px}
#panelInner::-webkit-scrollbar-thumb{background:rgba(156,90,37,.4);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
#panelInner::-webkit-scrollbar-thumb:hover{background:rgba(156,90,37,.6);background-clip:padding-box}

@keyframes pnRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* shared header bits */
.pn-kicker{font-family:'Silkscreen',monospace;font-size:11px;letter-spacing:3px;color:var(--ui-gold);
  text-transform:uppercase;margin-bottom:10px}
.pn-title{font-size:33px;line-height:1.06;margin:0 0 12px;color:#392815;letter-spacing:.3px}
.pn-lead{font-size:17px;line-height:1.55;color:var(--ui-ink-soft);margin:0 0 24px;max-width:46ch}
.panel-card>#panelInner>.pn-kicker{animation:pnRise .5s ease both}
.pn-title{animation:pnRise .5s ease .05s both}
.pn-lead{animation:pnRise .5s ease .1s both}

.pn-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.pn-tag{font-size:12.5px;line-height:1;padding:6px 11px;border-radius:8px;
  background:rgba(156,90,37,.12);color:#6e431d;border:1px solid rgba(156,90,37,.26)}

/* ===== About ===== */
.ab-hero{display:flex;align-items:center;gap:20px;margin-bottom:22px;animation:pnRise .5s ease both}
.ab-photo{flex:none;width:120px;height:120px;border-radius:50%;overflow:hidden;
  border:4px solid var(--ui-frame);
  box-shadow:0 0 0 3px var(--ui-outline),0 12px 24px rgba(0,0,0,.4)}
.ab-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ab-id .pn-kicker{margin-bottom:6px;animation:none}
.ab-name{font-size:26px;line-height:1.12;margin:0 0 5px;color:#392815;letter-spacing:.2px}
.ab-role{margin:0;font-size:15.5px;font-weight:600;color:var(--ui-gold)}
.ab-loc{margin:5px 0 0;font-size:13.5px;color:var(--ui-ink-soft);display:flex;align-items:center;gap:7px}
.ab-loc::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 3px rgba(105,176,106,.22)}
.ab-tagline{font-size:20px;line-height:1.4;color:#3a2a1c;font-weight:600;margin:0 0 13px;
  letter-spacing:.2px;animation:pnRise .5s ease .07s both}
.ab-bio{font-size:15.5px;line-height:1.62;color:var(--ui-ink);margin:0 0 22px;max-width:60ch;
  animation:pnRise .5s ease .13s both}
.ab-facts{margin:0 0 22px;padding:0;animation:pnRise .5s ease .19s both}
.ab-fact{display:grid;grid-template-columns:108px 1fr;gap:16px;padding:13px 2px;
  border-top:1px solid rgba(74,53,38,.16)}
.ab-fact:last-child{border-bottom:1px solid rgba(74,53,38,.16)}
.ab-fact dt{font-family:'Silkscreen',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ui-gold);padding-top:3px;margin:0}
.ab-fact dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ui-ink)}
.ab-skills{animation:pnRise .5s ease .25s both}
.ab-skills-h{display:block;font-family:'Silkscreen',monospace;font-size:10px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--ui-gold);margin-bottom:11px}

/* ===== Experience ===== */
.xp-list{list-style:none;margin:0;padding:0}
.xp-row{display:flex;gap:16px;padding:18px 0;border-top:1px solid rgba(74,53,38,.16);
  animation:pnRise .5s ease both;animation-delay:var(--d)}
.xp-row:first-child{border-top:none;padding-top:4px}
.xp-logo{flex:none;width:48px;height:48px;border-radius:11px;overflow:hidden;background:#f3ead9;
  box-shadow:0 0 0 1px rgba(74,53,38,.18),0 4px 10px rgba(0,0,0,.16)}
.xp-logo img{width:100%;height:100%;object-fit:cover;display:block}
.xp-body{flex:1;min-width:0}
.xp-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.xp-role{margin:0;font-size:18px;line-height:1.2;color:#392815}
.xp-period{margin-left:auto;font-family:'Silkscreen',monospace;font-size:9.5px;letter-spacing:.4px;
  color:var(--ui-ink-soft);white-space:nowrap}
.xp-company{font-size:14px;font-weight:600;color:var(--ui-gold);margin:3px 0 7px}
.xp-desc{margin:0;font-size:14.5px;line-height:1.55;color:var(--ui-ink-soft);max-width:56ch}

/* ===== Projects ===== */
.pj-list{list-style:none;margin:0;padding:0}
.pj-row{display:flex;gap:18px;padding:17px 0;border-top:1px solid rgba(74,53,38,.16);
  animation:pnRise .5s ease both;animation-delay:var(--d)}
.pj-row:first-child{border-top:none;padding-top:4px}
.pj-num{flex:none;width:30px;padding-top:4px;font-family:'Silkscreen',monospace;font-size:13px;
  color:var(--ui-gold);letter-spacing:.5px;font-variant-numeric:tabular-nums}
.pj-body{flex:1;min-width:0}
.pj-title{margin:0 0 4px;font-size:18px;line-height:1.25;color:#392815}
.pj-link{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:5px;
  transition:color .2s ease}
.pj-link:hover{color:var(--ui-gold)}
.pj-link:focus-visible{outline:2px solid var(--ui-gold);outline-offset:3px;border-radius:4px}
.pj-ext{font-size:.72em;color:var(--ui-gold);opacity:.42;transform:translateY(-1px);
  transition:opacity .2s ease, transform .2s ease}
.pj-link:hover .pj-ext,.pj-link:focus-visible .pj-ext{opacity:1;transform:translate(2px,-3px)}
.pj-desc{margin:0;font-size:14.5px;line-height:1.55;color:var(--ui-ink-soft);max-width:58ch}

/* ===== Contact ===== */
.ct-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ct-row{animation:pnRise .5s ease both;animation-delay:var(--d)}
.ct-link{display:flex;align-items:center;gap:15px;padding:13px 15px;border-radius:13px;text-decoration:none;
  background:rgba(74,53,38,.06);border:1px solid rgba(74,53,38,.14);
  transition:transform .22s cubic-bezier(.22,1,.36,1), background .22s, border-color .22s, box-shadow .22s}
.ct-link:hover{transform:translateY(-2px);background:rgba(156,90,37,.1);border-color:rgba(156,90,37,.4);
  box-shadow:0 8px 18px rgba(0,0,0,.16)}
.ct-link:focus-visible{outline:2px solid var(--ui-gold);outline-offset:2px}
.ct-ic{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:rgba(156,90,37,.14);color:var(--ui-gold);transition:background .22s, color .22s}
.ct-ic svg{width:21px;height:21px;fill:currentColor;display:block}
.ct-link:hover .ct-ic{background:var(--ui-gold);color:#f4e3c4}
.ct-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.ct-label{font-size:15px;font-weight:600;color:#3a2a1c}
.ct-val{font-size:13px;color:var(--ui-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-go{margin-left:auto;flex:none;font-size:17px;color:var(--ui-gold);opacity:0;transform:translateX(-6px);
  transition:opacity .22s, transform .22s}
.ct-link:hover .ct-go{opacity:1;transform:translateX(0)}

@media(max-width:560px){
  #panelInner{padding:26px 22px 26px}
  .pn-title{font-size:27px}
  .ab-photo{width:96px;height:96px}
  .ab-name{font-size:22px}
  .ab-tagline{font-size:18px}
  .ab-fact{grid-template-columns:1fr;gap:3px}
  .pj-row,.xp-row{gap:13px}
}
@media(max-width:430px){
  .ab-hero{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .panel-card,.pn-kicker,.pn-title,.pn-lead,.ab-hero,.ab-tagline,.ab-bio,.ab-facts,.ab-skills,
  .xp-row,.pj-row,.ct-row{animation:none !important}
  #panel.in .panel-card{transform:none}
  .panel-close:hover{transform:none}
  .ct-link,.ct-go,.ct-ic,.pj-link,.pj-ext{transition:none}
}

/* ---------------- Map modal ---------------- */
#mapModal{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(6,9,15,.6);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease}
#mapModal.in{opacity:1}
.map-card{width:min(620px,94vw);padding:22px 26px 24px;text-align:center;
  background:var(--ui-fill);border:6px solid var(--ui-frame);border-radius:20px;
  box-shadow:0 0 0 3px var(--ui-outline),inset 0 0 0 2px var(--ui-frame-d),
             inset 0 3px 0 2px rgba(255,255,255,.16),0 20px 40px rgba(0,0,0,.55);
  transform:scale(.92);transition:transform .35s cubic-bezier(.22,1,.36,1)}
#mapModal.in .map-card{transform:scale(1)}
.map-head{margin-bottom:16px}
.map-kicker{display:inline-block;font-family:'Silkscreen',monospace;font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--ui-frame-d);opacity:.85;margin-bottom:2px}
.map-title{margin:0;font-size:27px;color:var(--ui-gold);letter-spacing:1px;font-weight:700;line-height:1.1}
.map-sub{margin:3px 0 0;font-size:13px;color:var(--ui-ink-soft);letter-spacing:.4px}

/* ----- floor plan ----- */
.map-plan{position:relative;width:100%;aspect-ratio:142/96;margin:0 auto 18px;
  border-radius:14px;background:
    repeating-linear-gradient(0deg,transparent 0 23px,rgba(231,200,150,.05) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(231,200,150,.05) 23px 24px),
    radial-gradient(120% 120% at 50% 30%,#2c2114 0%,#221a10 60%,#1b150d 100%);
  box-shadow:inset 0 0 0 2px var(--ui-frame-d),inset 0 0 24px rgba(0,0,0,.5),0 4px 0 rgba(0,0,0,.25)}
.map-plan::after{content:"";position:absolute;top:11px;right:13px;width:42px;height:42px;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23e7a33e'%3E%3Ccircle%20cx='24'%20cy='25'%20r='15'%20stroke-width='1.5'%20opacity='.45'/%3E%3Cpath%20d='M24%2010%20L28%2025%20L24%2040%20L20%2025%20Z'%20fill='%23e7a33e'%20stroke='none'/%3E%3Cpath%20d='M9%2025%20L24%2021%20L39%2025%20L24%2029%20Z'%20fill='%23e7a33e'%20stroke='none'%20opacity='.4'/%3E%3Ctext%20x='24'%20y='8'%20font-size='9'%20fill='%23e7a33e'%20stroke='none'%20text-anchor='middle'%20font-family='monospace'%20font-weight='bold'%3EN%3C/text%3E%3C/svg%3E") center/contain no-repeat}

.map-room{position:absolute;padding:0;margin:0;background:none;border:none;text-align:left;
  display:flex;flex-direction:column;color:var(--ui-ink);z-index:2;font-family:inherit}
.map-room.r-gym   {left:35%;top:3%; width:30%;height:42%}
.map-room.r-game  {left:2%; top:55%;width:30%;height:42%}
.map-room.r-lounge{left:35%;top:55%;width:30%;height:42%}
.map-room.r-music {left:68%;top:55%;width:30%;height:42%}

.mr-frame{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:9px;
  border:2px solid var(--ui-outline);outline:2px solid var(--rc);outline-offset:-2px;
  background:radial-gradient(120% 120% at 50% 35%,#2a2014 0%,#221a10 70%,#1b150d 100%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 5px 12px rgba(0,0,0,.5);
  transition:transform .18s ease, box-shadow .2s ease}
.mr-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.mr-frame::after{content:"";position:absolute;inset:0;border-radius:7px;pointer-events:none;
  box-shadow:inset 0 0 18px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.08)}

.mr-plate{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;
  padding:4px 6px;border-radius:7px;background:rgba(35,26,16,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.mr-ic{width:16px;height:16px;flex:none;color:var(--rc);filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.mr-ic svg{width:100%;height:100%;display:block;fill:currentColor}
.mr-name{font-size:14px;font-weight:600;letter-spacing:.4px;color:var(--cream);white-space:nowrap}

/* travel affordance on the clickable rooms */
.map-room button,.map-room{cursor:default}
button.map-room{cursor:pointer}
.mr-go{position:absolute;left:50%;bottom:8px;transform:translate(-50%,8px);z-index:3;
  display:flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.6px;color:#3a2410;
  background:linear-gradient(160deg,var(--accent),#d59a37);box-shadow:0 3px 0 #9c6f1e;
  opacity:0;transition:opacity .18s ease, transform .18s ease;white-space:nowrap}
.mr-arrow{font-size:13px;line-height:1}
button.map-room:hover .mr-frame,button.map-room:focus-visible .mr-frame{transform:translateY(-4px);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.3),0 10px 20px rgba(0,0,0,.55),0 0 0 2px var(--rc)}
button.map-room:hover .mr-go,button.map-room:focus-visible .mr-go{opacity:1;transform:translate(-50%,0)}
button.map-room:hover .mr-frame::after,button.map-room:focus-visible .mr-frame::after{box-shadow:inset 0 0 18px rgba(0,0,0,.15)}
button.map-room:active .mr-frame{transform:translateY(-1px)}
.map-room:focus-visible{outline:none}

/* current room: gold glow + avatar */
.map-room.here .mr-frame{border-color:var(--ui-gold);outline-color:var(--ui-gold);
  box-shadow:inset 0 0 0 2px rgba(156,90,37,.5),0 0 0 2px rgba(231,163,62,.55),0 0 22px rgba(231,163,62,.45);
  animation:mrPulse 2.2s ease-in-out infinite}
@keyframes mrPulse{0%,100%{box-shadow:inset 0 0 0 2px rgba(156,90,37,.5),0 0 0 2px rgba(231,163,62,.5),0 0 16px rgba(231,163,62,.35)}
  50%{box-shadow:inset 0 0 0 2px rgba(156,90,37,.5),0 0 0 3px rgba(231,163,62,.75),0 0 26px rgba(231,163,62,.6)}}
.map-room.here .mr-plate{background:rgba(156,90,37,.4);box-shadow:inset 0 0 0 1px rgba(231,163,62,.4)}
.mr-here{position:absolute;top:6px;left:6px;z-index:3;padding:2px 8px;border-radius:6px;white-space:nowrap;
  font-family:'Silkscreen',monospace;font-size:9px;letter-spacing:1px;color:#3a2410;
  background:linear-gradient(160deg,var(--accent),#d59a37);box-shadow:0 2px 0 #9c6f1e}

/* doorway connectors (under the rooms, so the frames read as walls with a gap) */
.map-link{position:absolute;z-index:1;background:#6a4a2c;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.map-link .ml-jamb{position:absolute;background:var(--ui-gold)}
.map-link.l-gym  {left:47.5%;top:42%;width:5%;height:15%}
.map-link.l-game {left:30%;  top:71%;width:7%;height:8%}
.map-link.l-music{left:63%;  top:71%;width:7%;height:8%}
.map-link.l-gym .ml-jamb{top:0;bottom:0;width:2px}
.map-link.l-gym .ml-jamb:first-child{left:0}
.map-link.l-gym .ml-jamb:last-child{right:0}
.map-link.l-game .ml-jamb,.map-link.l-music .ml-jamb{left:0;right:0;height:2px}
.map-link.l-game .ml-jamb:first-child,.map-link.l-music .ml-jamb:first-child{top:0}
.map-link.l-game .ml-jamb:last-child,.map-link.l-music .ml-jamb:last-child{bottom:0}

.map-close{padding:10px 24px;font-size:17px;color:#3a2410;border-radius:10px;background:linear-gradient(160deg,var(--accent),#d59a37);box-shadow:0 4px 0 #9c6f1e;transition:transform .15s, box-shadow .15s}
.map-close:hover{transform:translateY(-2px);box-shadow:0 6px 0 #9c6f1e}
.map-close:active{transform:translateY(2px);box-shadow:0 1px 0 #9c6f1e}

@media(max-width:560px){
  .map-card{padding:20px 16px 22px}
  .map-plan{aspect-ratio:120/104}
  .map-plan::after{width:32px;height:32px;top:8px;right:9px}
  .map-room.r-gym{left:34%;top:2%; width:32%;height:32%}
  .map-room.r-game{left:1%; top:40%;width:32%;height:32%}
  .map-room.r-lounge{left:34%;top:40%;width:32%;height:32%}
  .map-room.r-music{left:67%;top:40%;width:32%;height:32%}
  .map-link.l-gym{left:47%;top:31%;width:6%;height:11%}
  .map-link.l-game{left:31%;top:53%;width:5%;height:7%}
  .map-link.l-music{left:64%;top:53%;width:5%;height:7%}
  .mr-plate{padding:3px 4px;gap:5px;margin-top:5px}
  .mr-ic{width:13px;height:13px}
  .mr-name{font-size:11px}
  .mr-here{font-size:8px;padding:2px 5px;top:4px;left:4px}
  .mr-go{font-size:11px;padding:3px 11px}
}

/* ---------------- Activity overlay ---------------- */
#activity{position:absolute;inset:0;z-index:38;display:grid;place-items:center;background:rgba(6,9,15,.72);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .35s ease}
#activity.in{opacity:1}
#activityInner{transform:scale(.94) translateY(10px);transition:transform .4s cubic-bezier(.22,1,.36,1);max-width:96vw;max-height:92vh}
#activity.in #activityInner{transform:scale(1) translateY(0)}

/* ---------------- Touch controls ---------------- */
#touch{position:absolute;inset:0;z-index:10;pointer-events:none;display:none}
body.touch #touch{display:block}
#dpad{position:absolute;left:18px;bottom:18px;width:150px;height:150px}
.db{position:absolute;width:50px;height:50px;font-size:18px;color:var(--cream);pointer-events:auto;
  background:linear-gradient(180deg,rgba(35,49,74,.85),rgba(22,31,48,.85));border:2px solid rgba(231,163,62,.4);border-radius:10px;
  display:grid;place-items:center}
.db:active{background:rgba(231,163,62,.4)}
.dbu{left:50px;top:0}.dbl{left:0;top:50px}.dbd{left:50px;top:100px}.dbr{left:100px;top:50px}
#actBtn{position:absolute;right:24px;bottom:42px;width:78px;height:78px;border-radius:50%;font-size:26px;color:#3a2410;pointer-events:auto;
  background:radial-gradient(circle at 40% 35%,var(--accent),#c2872c);border:3px solid #8a6520;box-shadow:0 6px 0 #6e4f18}
#actBtn:active{transform:translateY(3px);box-shadow:0 3px 0 #6e4f18}

/* ---------------- Loader ---------------- */
#loader{position:absolute;inset:0;z-index:60;overflow:hidden;background:#070910}
#loadCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.load-overlay{position:absolute;inset:0;display:grid;place-items:end center;padding-bottom:7vh;
  background:radial-gradient(120% 100% at 50% 38%, rgba(7,9,16,.05) 0%, rgba(7,9,16,.55) 60%, rgba(7,9,16,.86) 100%)}
.load-card{text-align:center;padding:10px 30px;animation:cardUp .8s cubic-bezier(.22,1,.36,1)}
@keyframes cardUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.load-kicker{font-size:15px;letter-spacing:6px;color:var(--accent);margin-bottom:10px;font-family:'Silkscreen',monospace;opacity:.9}
.load-title{margin:0;font-size:clamp(48px,10vw,108px);line-height:.95;letter-spacing:4px;color:#fff;
  text-shadow:0 4px 0 #6e4f18, 0 8px 30px rgba(0,0,0,.7)}
.load-sub{font-size:clamp(16px,2.4vw,22px);color:#c8d3e6;margin:14px 0 30px}
.load-bar{width:min(420px,76vw);height:14px;margin:0 auto;border-radius:10px;background:rgba(255,255,255,.08);
  border:2px solid rgba(231,163,62,.4);overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.load-fill{height:100%;width:0%;border-radius:8px;background:linear-gradient(90deg,#d59a37,var(--accent));transition:width .3s ease;
  box-shadow:0 0 14px rgba(231,163,62,.6)}
.load-status{margin-top:14px;font-size:15px;letter-spacing:3px;color:#9fb0c9;font-family:'Silkscreen',monospace}
.load-enter{margin-top:24px;padding:16px 40px;font-size:24px;letter-spacing:2px;color:#3a2410;border-radius:14px;
  background:linear-gradient(160deg,var(--accent),#d59a37);box-shadow:0 6px 0 #9c6f1e;animation:enterPulse 1.6s ease-in-out infinite}
.load-enter:hover{transform:translateY(-2px)}
.load-enter:active{transform:translateY(3px);box-shadow:0 3px 0 #9c6f1e;animation:none}
@keyframes enterPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.load-controls{margin-top:26px;font-size:14px;letter-spacing:1px;color:#6f7d94}
#loader.out{opacity:0;transition:opacity .6s ease;pointer-events:none}