:root{
    --cream:#F6ECD8; --ink:#3A4356; --warm:#E8C98A; --teal:#4E7F79;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#0e1219;
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    color:var(--cream); -webkit-font-smoothing:antialiased;}
  #app{position:fixed;inset:0}
  canvas{display:block;width:100%;height:100%}

  /* ---------- title / loading card ---------- */
  #veil{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
    background:
      radial-gradient(120% 90% at 62% 18%, #F3DFB4 0%, #E3CFA6 22%, #A9BFC0 52%, #6E8C9E 76%, #3C5069 100%);
    transition:opacity 1.5s cubic-bezier(.4,0,.2,1);}
  #veil.gone{opacity:0;pointer-events:none}
  #veil:before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 55% at 50% 55%, rgba(0,0,0,0) 40%, rgba(30,40,60,.34) 100%);}
  .card{position:relative;text-align:center;padding:0 28px;max-width:660px}
  .kanji{font-size:13px;letter-spacing:.72em;opacity:.72;margin-bottom:20px;color:#2E3D52;
    text-indent:.72em}
  h1{font-size:clamp(34px,7.2vw,68px);font-weight:400;letter-spacing:.035em;line-height:1.02;
    color:#2C3A4E;text-shadow:0 1px 0 rgba(255,255,255,.35)}
  h1 em{font-style:italic;display:block;font-size:.42em;letter-spacing:.24em;margin-top:14px;
    opacity:.66;font-weight:400}
  .rule{width:78px;height:1px;background:#2C3A4E;opacity:.4;margin:26px auto}
  .blurb{font-size:14.5px;line-height:1.85;opacity:.78;color:#26364B;max-width:470px;margin:0 auto}
  .blurb b{font-weight:600}
  #bar{width:230px;height:2px;background:rgba(44,58,78,.2);margin:34px auto 12px;overflow:hidden;border-radius:2px}
  #barIn{height:100%;width:0%;background:linear-gradient(90deg,#4E7F79,#2C3A4E);transition:width .3s ease}
  #stat{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;color:#26364B;
    min-height:16px}
  #enter{margin-top:30px;display:none;cursor:pointer;border:1px solid rgba(44,58,78,.45);
    background:rgba(255,252,244,.34);color:#22303F;padding:14px 40px;border-radius:999px;
    font-family:inherit;font-size:13.5px;letter-spacing:.28em;text-transform:uppercase;
    transition:.35s;backdrop-filter:blur(3px)}
  #enter:hover{background:rgba(255,252,244,.72);letter-spacing:.34em}
  #enter.on{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* ---------- hud ---------- */
  #hud{position:fixed;left:0;right:0;bottom:0;z-index:20;pointer-events:none;
    padding:16px 20px;display:flex;justify-content:space-between;align-items:flex-end;
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    text-shadow:0 1px 3px rgba(20,26,38,.7);opacity:0;transition:opacity 1.2s}
  #hud.on{opacity:.62}
  #hud .k{opacity:.65}
  #keys span{display:inline-block;margin-right:14px}
  #keys b{font-weight:600;opacity:.95}
  #tele{text-align:right;font-variant-numeric:tabular-nums;line-height:1.75}
  #tele .v{opacity:.95}

  /* player world coordinates (debug / bug reports) */
  #coords{
    position:fixed; top:14px; right:16px; z-index:28; pointer-events:none;
    font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px;
    letter-spacing:.06em; line-height:1.55;
    color:#F6ECD8; text-shadow:0 1px 3px rgba(20,26,38,.75);
    background:rgba(20,27,38,.55); backdrop-filter:blur(10px);
    border:1px solid rgba(246,236,216,.14); border-radius:10px;
    padding:8px 12px; opacity:0; transition:opacity 1s;
    font-variant-numeric:tabular-nums; min-width:148px;
  }
  #coords.on{ opacity:.92 }
  #coords .lab{ opacity:.55; font-size:9px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:4px }
  #coords .row{ opacity:.95 }
  #coords .row b{ opacity:.55; font-weight:400; margin-right:6px }


  #panel{position:fixed;top:0;left:0;right:auto;z-index:25;width:288px;max-height:100vh;overflow-y:auto;
    padding:18px 20px 28px;
    background:rgba(20,27,38,.78);backdrop-filter:blur(14px);
    border-right:1px solid rgba(246,236,216,.12);border-bottom:1px solid rgba(246,236,216,.12);
    font-size:11px;letter-spacing:.1em;transform:translateX(-102%);transition:.5s cubic-bezier(.4,0,.2,1);
    border-bottom-right-radius:14px}
  #panel.on{transform:none}
  #panel .seg.wrap{flex-wrap:wrap;max-width:168px;justify-content:flex-end}
  #panel .seg.wrap button{margin-bottom:3px}
  #panel h3{font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.5;
    margin:0 0 12px;font-weight:400}
  #panel h3+h3{margin-top:18px}
  .row{display:flex;align-items:center;justify-content:space-between;margin:7px 0;gap:10px}
  .row label{opacity:.8;text-transform:uppercase;font-size:10px;letter-spacing:.14em}
  .row input[type=range]{width:104px;accent-color:#8FBEA8;background:transparent}
  .row select{background:rgba(246,236,216,.1);color:var(--cream);border:1px solid rgba(246,236,216,.2);
    border-radius:5px;padding:3px 6px;font-family:inherit;font-size:10.5px;letter-spacing:.1em}
  .row .val{opacity:.55;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
  .chk{width:13px;height:13px;accent-color:#8FBEA8}
  .seg{display:flex;gap:3px}
  .seg button{font-family:inherit;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
    padding:4px 7px;border-radius:5px;cursor:pointer;color:var(--cream);
    background:rgba(246,236,216,.08);border:1px solid rgba(246,236,216,.18);transition:.18s}
  .seg button:hover{background:rgba(246,236,216,.2)}
  .seg button.on{background:rgba(143,190,168,.34);border-color:rgba(143,190,168,.6)}
  #panel .note{opacity:.4;font-size:9.5px;line-height:1.7;margin-top:14px;letter-spacing:.06em;
    text-transform:none;font-style:italic}

  /* ---------- map switcher (M) ---------- */
  #mapPanel{
    position:fixed; top:50%; left:50%; z-index:32;
    width:min(420px, calc(100vw - 32px));
    transform:translate(-50%,-50%) scale(.96);
    opacity:0; pointer-events:none;
    background:rgba(18,24,34,.88); backdrop-filter:blur(16px);
    border:1px solid rgba(246,236,216,.14); border-radius:16px;
    padding:18px 18px 16px;
    box-shadow:0 18px 48px rgba(0,0,0,.45);
    transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  }
  #mapPanel.on{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1) }
  #mapPanel .mapHead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
  #mapPanel h3{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; opacity:.55; font-weight:400; margin:0 }
  #mapPanel .mapClose{
    width:28px; height:28px; border-radius:8px; cursor:pointer;
    border:1px solid rgba(246,236,216,.16); background:rgba(246,236,216,.06);
    color:var(--cream); font-size:18px; line-height:1; font-family:inherit;
  }
  #mapPanel .mapClose:hover{ background:rgba(246,236,216,.16) }
  #mapPanel .mapHint{ opacity:.45; font-size:11px; letter-spacing:.08em; margin:0 0 12px; text-transform:none }
  #mapPanel .mapNote{ opacity:.38; font-size:10px; letter-spacing:.08em; margin:12px 0 0; text-transform:none }
  #mapPanel .mapNote b{ opacity:.9 }
  .mapList{ display:flex; flex-direction:column; gap:8px }
  .mapCard{
    text-align:left; cursor:pointer; border-radius:12px; padding:12px 14px;
    border:1px solid rgba(246,236,216,.14); background:rgba(246,236,216,.05);
    color:var(--cream); font-family:inherit; transition:.18s;
  }
  .mapCard:hover{ background:rgba(246,236,216,.11); border-color:rgba(246,236,216,.28) }
  .mapCard.on{ background:rgba(143,190,168,.22); border-color:rgba(143,190,168,.55) }
  .mapCard .mapTitle{ font-size:15px; letter-spacing:.12em; margin-bottom:3px }
  .mapCard .mapEn{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; margin-bottom:6px }
  .mapCard .mapDesc{ font-size:11.5px; line-height:1.55; letter-spacing:.04em; opacity:.72; text-transform:none }
  .mapCard .mapBadge{
    display:inline-block; margin-top:8px; font-size:9px; letter-spacing:.2em; text-transform:uppercase;
    opacity:.7; padding:2px 8px; border-radius:999px; border:1px solid rgba(143,190,168,.4);
    background:rgba(143,190,168,.12);
  }

  #flash{position:fixed;inset:0;z-index:30;pointer-events:none;background:#F6ECD8;opacity:0;
    transition:opacity .5s}
  #toast{position:fixed;left:50%;top:34px;transform:translateX(-50%);z-index:26;
    background:rgba(20,27,38,.8);padding:9px 20px;border-radius:999px;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:.4s;backdrop-filter:blur(10px);
    border:1px solid rgba(246,236,216,.14);pointer-events:none}
  #toast.on{opacity:.9}
  #err{position:fixed;inset:0;z-index:60;display:none;padding:40px;background:#171d27;
    font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.7;
    color:#E8A0A0;white-space:pre-wrap;overflow:auto}

.dojin-runtime-back {
  position: fixed;
  z-index: 60;
  top: 1rem;
  left: 1rem;
  padding: .7rem .85rem;
  border: 1px solid rgba(246, 236, 216, .24);
  border-radius: 999px;
  background: rgba(20, 27, 38, .58);
  backdrop-filter: blur(12px);
  color: #f6ecd8;
  font: 500 10px/1 system-ui, sans-serif;
  letter-spacing: .14em;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.dojin-runtime-back:hover,
.dojin-runtime-back:focus-visible {
  border-color: rgba(246, 236, 216, .62);
  background: rgba(20, 27, 38, .78);
}
@media (max-width: 720px) {
  .dojin-runtime-back { top: .7rem; left: .7rem; }
}