:root{
    --wood:#3d2f23; --wood2:#5a4632; --wood3:#2a1f16; --woodhi:#6b543c;
    --parch:#f2e6c9; --parch2:#e6d5ae; --parch3:#d9c393;
    --ink:#33261a; --ink2:#6b5741; --gold:#e8a84a; --goldhi:#ffcf6e;
    --c-exp:#5ac8fa; --c-proj:#e8a84a; --c-skills:#4ade80; --c-edu:#c084fc; --c-contact:#f472b6;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{background:#1e2a1c;color:var(--parch);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;}
  #game-root{position:fixed;inset:0;overflow:hidden;}
  #world{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:pointer;}

  .px{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;}

  /* ── loading ── */
  #loading{position:fixed;inset:0;z-index:99;background:#2a1f16;display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:14px;color:var(--gold);font-size:13px;}
  #loading .blk{width:40px;height:40px;border:3px solid var(--wood2);position:relative;background:var(--wood);}
  #loading .blk::after{content:'';position:absolute;inset:6px;background:var(--gold);
    animation:ldpulse 1s steps(2) infinite;}
  @keyframes ldpulse{0%{opacity:.25}50%{opacity:1}100%{opacity:.25}}

  /* ── HUD ── */
  #hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;
    padding:7px 10px;background:var(--wood);border-bottom:3px solid var(--wood3);
    box-shadow:inset 0 1px 0 var(--woodhi);z-index:20;flex-wrap:wrap;}
  #hud-name{font-size:12px;color:var(--goldhi);font-weight:700;white-space:nowrap;text-decoration:none;display:inline-block;}
  #hud-name:hover,#hud-name:focus-visible{color:var(--goldhi);outline:none;text-decoration:underline;}
  #hud-name small{display:block;color:#c9b18a;font-weight:400;font-size:10px;letter-spacing:.06em;}
  #hud-spacer{flex:1;}
  .zone-btn{width:38px;height:38px;padding:0;border:2px solid var(--wood3);background:var(--wood2);
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:0;
    box-shadow:inset 0 1px 0 var(--woodhi);}
  .zone-btn canvas{width:32px;height:32px;display:block;image-rendering:pixelated;}
  .zone-btn:hover,.zone-btn:focus-visible{border-color:var(--zc);outline:none;box-shadow:0 0 0 1px var(--zc);}
  .zone-btn[data-visited="1"]{border-color:var(--zc);}
  #btn-cv{border:2px solid var(--gold);background:#7a5a1e;color:#ffe9bd;font-size:11px;font-weight:700;
    padding:9px 12px;cursor:pointer;border-radius:0;box-shadow:inset 0 1px 0 #ad8438;
    text-decoration:none;display:inline-block;}
  #btn-cv:hover,#btn-cv:focus-visible{background:var(--gold);color:var(--wood3);outline:none;}

  /* ── prompt ── */
  #prompt{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);z-index:15;display:none;
    background:var(--wood);border:2px solid var(--zc,#fff);box-shadow:0 0 0 2px var(--wood3),3px 3px 0 rgba(0,0,0,.4);
    padding:7px 12px;font-size:11px;color:var(--parch);pointer-events:none;white-space:nowrap;}
  #prompt b{color:var(--zc,#fff);}

  /* ── mobile enter button (thumb zone) ── */
  #btn-enter{display:none;position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:22;
    min-height:52px;padding:12px 28px;font-size:13px;font-weight:700;cursor:pointer;border-radius:0;
    background:#7a5a1e;color:#ffe9bd;border:3px solid var(--gold);
    box-shadow:0 0 0 2px var(--wood3),inset 0 1px 0 #ad8438,4px 4px 0 rgba(0,0,0,.4);
    font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;
    white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;touch-action:manipulation;}
  #btn-enter:active{background:var(--gold);color:var(--wood3);}

  /* ── quest log ── */
  #quest{position:absolute;left:10px;bottom:10px;z-index:18;background:var(--parch);color:var(--ink);
    border:3px solid var(--wood2);box-shadow:0 0 0 2px var(--wood3),4px 4px 0 rgba(0,0,0,.35);
    min-width:196px;max-width:230px;font-size:11px;}
  #quest-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;cursor:pointer;
    background:var(--wood);border:0;width:100%;color:var(--gold);font-size:10px;text-align:left;
    font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;}
  #quest-head .arrow{color:#c9b18a;}
  #quest-body{padding:6px 8px 8px;}
  #quest-body p{margin:0 0 6px;color:var(--ink2);}
  #quest ul{list-style:none;margin:0;padding:0;}
  #quest li{display:flex;align-items:center;gap:6px;padding:2px 0;color:var(--ink2);}
  #quest li .box{width:10px;height:10px;border:2px solid var(--parch3);flex:none;background:transparent;}
  #quest li[data-done="1"]{color:var(--ink);font-weight:600;}
  #quest li[data-done="1"] .box{background:var(--zc);border-color:var(--wood2);}
  #quest.collapsed #quest-body{display:none;}

  /* ── toasts ── */
  #toasts{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:40;display:flex;
    flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:max-content;max-width:92vw;}
  .toast{background:var(--parch);border:2px solid var(--wood2);box-shadow:0 0 0 2px var(--wood3),3px 3px 0 rgba(0,0,0,.35);
    color:var(--ink);padding:7px 14px;font-size:11px;animation:toastin .18s steps(3) both;}
  .toast .tick{color:#2c7a44;font-weight:700;}
  .toast button{pointer-events:auto;margin-left:10px;border:2px solid var(--wood2);background:var(--gold);color:var(--wood3);
    font-size:10px;padding:3px 8px;cursor:pointer;font-family:inherit;font-weight:700;}
  @keyframes toastin{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}

  /* ── zone panels ── */
  .modal-back{position:fixed;inset:0;background:rgba(30,20,10,.6);z-index:50;display:none;
    align-items:center;justify-content:center;padding:14px;}
  .modal-back.open{display:flex;}
  .panel{background:var(--parch);color:var(--ink);border:3px solid var(--wood2);width:min(620px,100%);
    max-height:min(78vh,640px);display:flex;flex-direction:column;
    box-shadow:0 0 0 3px var(--wood3),8px 8px 0 rgba(0,0,0,.4);}
  .panel-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--wood);
    border-bottom:3px solid var(--wood3);box-shadow:inset 0 1px 0 var(--woodhi);flex:none;}
  .panel-head .ic{width:22px;height:22px;flex:none;}
  .panel-head h2{margin:0;font-size:13px;color:var(--gold);flex:1;}
  .panel-close{border:2px solid var(--wood2);background:var(--parch);color:var(--ink);width:28px;height:28px;
    cursor:pointer;font-size:13px;line-height:1;font-family:inherit;flex:none;}
  .panel-close:hover,.panel-close:focus-visible{border-color:var(--zc);color:var(--wood3);background:var(--parch2);outline:none;}
  .panel-body{padding:12px 14px;overflow-y:auto;font-size:13px;line-height:1.5;}
  .panel-body h3{font-size:11px;color:#8a5a1e;margin:14px 0 6px;letter-spacing:.08em;text-transform:uppercase;
    font-family:ui-monospace,Menlo,Consolas,monospace;border-bottom:1px solid var(--parch3);padding-bottom:3px;}
  .panel-body h3:first-child{margin-top:0;}
  .panel-body a{color:#8a5a1e;}
  .job{margin:0 0 12px;padding-left:10px;border-left:3px solid var(--parch3);}
  .job b{display:block;font-size:13px;color:var(--ink);}
  .job .meta{color:var(--ink2);font-size:11px;margin:1px 0 4px;}
  .job ul{margin:4px 0 0;padding-left:16px;}
  .job li{margin:2px 0;color:var(--ink);}
  .tags{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 10px;}
  .tag{border:1px solid #b89b6a;background:var(--parch2);color:#4a3826;font-size:11px;padding:2px 7px;}
  .tag.hot{border-color:var(--wood2);background:#fff6dd;font-weight:600;}
  .proj{border:2px solid var(--parch3);background:#f7eed8;padding:10px 12px;margin:0 0 10px;}
  .proj b{font-size:14px;}
  .proj .aud{font-size:10px;color:#8a5a1e;border:1px solid #b89b6a;padding:1px 5px;margin-left:6px;
    vertical-align:2px;font-family:ui-monospace,monospace;}
  .proj p{margin:4px 0;color:var(--ink);}
  .proj .stack{color:var(--ink2);font-size:11px;}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
  .contact-card{border:2px solid var(--parch3);background:#f7eed8;padding:10px;}
  .contact-card b{color:#8a5a1e;font-size:12px;display:block;margin-bottom:4px;}
  .contact-card p{margin:0;font-size:12px;color:var(--ink2);}
  .clinks{list-style:none;margin:0;padding:0;}
  .clinks li{margin:6px 0;}
  .clinks a{color:var(--ink);text-decoration:none;border:2px solid var(--parch3);background:#f7eed8;display:flex;gap:8px;
    align-items:center;padding:7px 10px;}
  .clinks a:hover,.clinks a:focus-visible{border-color:var(--wood2);background:#fff6dd;outline:none;}
  .clinks svg{width:15px;height:15px;flex:none;}
  .note{color:var(--ink2);font-size:12px;}

  /* ── resume (formal, unchanged skin) ── */
  #resume{position:fixed;inset:0;z-index:80;background:#f4f1ea;color:#1d232e;display:none;overflow-y:auto;}
  #resume.open{display:block;}
  #resume-actions{position:sticky;top:0;display:flex;gap:8px;justify-content:flex-end;padding:10px 16px;
    background:#e9e4d8;border-bottom:1px solid #c9c2b2;z-index:2;}
  #resume-actions button{border:1px solid #1d232e;background:#fff;color:#1d232e;padding:7px 14px;font-size:13px;
    cursor:pointer;font-family:Georgia,serif;}
  #resume-actions button:hover{background:#1d232e;color:#fff;}
  #resume-doc{max-width:760px;margin:0 auto;padding:34px 28px 60px;background:#fff;min-height:100%;
    box-shadow:0 0 24px rgba(0,0,0,.12);}
  #resume-doc h1{font-family:Georgia,"Times New Roman",serif;font-size:30px;margin:0 0 2px;color:#111;}
  #resume-doc .subtitle{font-size:14px;color:#444;margin:0 0 6px;}
  #resume-doc .contacts{font-size:12px;color:#555;margin:0 0 4px;}
  #resume-doc .contacts a{color:#28527a;text-decoration:none;}
  #resume-doc h2{font-family:Georgia,"Times New Roman",serif;font-size:15px;color:#111;margin:22px 0 8px;
    padding-bottom:4px;border-bottom:1px solid #999;letter-spacing:.04em;text-transform:uppercase;}
  #resume-doc p,#resume-doc li{font-size:12.5px;line-height:1.55;color:#222;}
  #resume-doc .rjob{margin:0 0 12px;}
  #resume-doc .rjob-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
  #resume-doc .rjob-head b{font-size:13px;color:#111;}
  #resume-doc .rjob-head span{font-size:12px;color:#666;white-space:nowrap;}
  #resume-doc .rjob .org{font-size:12px;color:#444;font-style:italic;}
  #resume-doc ul{margin:4px 0 0;padding-left:18px;}
  #resume-doc li{margin:2px 0;}
  #resume-doc .skillrow{margin:3px 0;font-size:12.5px;}
  #resume-doc .skillrow b{color:#111;}

  @media (max-width:640px){
    #hud{padding:6px 8px;gap:6px;}
    #hud-name{font-size:11px;}
    #hud-name small{display:none;}
    .zone-btn{width:36px;height:36px;}
    .zone-btn canvas{width:28px;height:28px;}
    #btn-cv{padding:8px 10px;font-size:10px;}
    #quest{min-width:160px;max-width:180px;font-size:10px;left:8px;bottom:84px;}
    .modal-back{padding:0;}
    .panel{width:100%;max-height:100dvh;height:100dvh;border-width:0;border-top-width:3px;box-shadow:none;}
    .contact-grid{grid-template-columns:1fr;}
    #prompt{display:none !important;}
    #btn-enter:not([hidden]){display:block;}
  }

  @media (prefers-reduced-motion:reduce){
    .toast{animation:none;}
    #loading .blk::after{animation:none;opacity:1;}
  }

  @media print{
    body{overflow:visible;background:#fff;}
    #game-root,#hud,#quest,#toasts,#prompt,.modal-back,#resume-actions,#loading{display:none !important;}
    #resume{display:block !important;position:static;background:#fff;overflow:visible;}
    #resume-doc{box-shadow:none;max-width:100%;padding:0;margin:0;}
    #resume-doc a{color:#000;}
    #resume-doc h2{border-bottom-color:#000;}
  }