:root{
  --night:#120d1c; --plum:#2a1838; --violet:#7b4fc4; --amber:#f2b45a; --teal:#5fd3c4; --parch:#efe2c4; --ink:#2b1d14; --fg:#f4ead8; --muted:#b9a9c9;
  --display:"Cinzel Decorative","Cinzel",Georgia,serif; --head:"Cinzel",Georgia,serif; --body:"Alegreya Sans",system-ui,sans-serif; --chalk:"Cabin Sketch","Comic Sans MS",cursive;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--fg);font-family:var(--body);font-size:16px;overflow:hidden;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.screen{position:fixed;inset:0;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

/* intro */
#intro{background:#000;z-index:50}
#intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#tapStart{position:relative;z-index:2;background:none;border:1px solid #6b5a3a;color:#e9d7ae;padding:14px 26px;border-radius:999px;font-family:var(--head);letter-spacing:.12em;text-transform:uppercase;font-size:14px}
#skipIntro{position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:3;background:rgba(0,0,0,.4);border:1px solid #4a3f2c;color:#cbb88f;border-radius:999px;padding:8px 16px;font-size:13px;letter-spacing:.08em}

/* menu */
#menu{z-index:40;background:radial-gradient(120% 90% at 50% 20%,rgba(42,24,56,.55),rgba(10,7,16,.92) 70%),url(/hall/hall.webp) center/cover no-repeat}
.menuWrap{display:grid;gap:26px;justify-items:center;text-align:center;max-width:640px;width:100%}
.gameTitle{font-family:var(--display);font-size:clamp(30px,7vw,64px);line-height:1.02;color:#f6dfa3;text-shadow:0 0 24px rgba(242,180,90,.45),0 2px 0 #4a2a0e;text-wrap:balance;margin:0}
.studio{font-family:var(--head);letter-spacing:.32em;text-transform:uppercase;font-size:12px;color:var(--muted)}
.beta{font-size:12px;color:var(--muted);margin:0;letter-spacing:.1em}
.choices{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.seal{width:150px;height:150px;border:none;display:grid;place-items:center;align-content:center;gap:4px;font-family:var(--head);font-weight:700;font-size:17px;letter-spacing:.06em;color:#fff7e8;text-shadow:0 1px 2px rgba(0,0,0,.6);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),transparent 30%),radial-gradient(circle,var(--c1),var(--c2));
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.35),inset 0 6px 10px rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.5);
  clip-path:polygon(50% 0,61% 3%,72% 1%,80% 8%,91% 10%,94% 21%,100% 30%,98% 41%,100% 52%,96% 62%,98% 73%,90% 81%,86% 92%,75% 94%,64% 100%,53% 97%,42% 100%,32% 95%,21% 96%,14% 87%,5% 80%,5% 69%,0 58%,3% 47%,0 36%,6% 27%,8% 16%,19% 10%,27% 3%,38% 3%);transition:transform .18s}
.seal:hover{transform:scale(1.05)} .seal:active{transform:scale(.92)}
.seal small{font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.02em;opacity:.85}
.seal.host{--c1:#8d5ad6;--c2:#4b2683} .seal.join{--c1:#3fb3a6;--c2:#1c615c}
.card{background:linear-gradient(#f3e7cb,#e6d3ab);color:var(--ink);border-radius:6px;padding:22px clamp(16px,4vw,28px);box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 40px rgba(120,80,30,.25);width:min(440px,100%);display:grid;gap:14px;text-align:left}
.card h2{font-family:var(--head);margin:0;font-size:22px;color:#4a2a63}
.card label{font-weight:700;font-size:14px;display:grid;gap:6px}
.card input{font:inherit;font-size:18px;padding:10px 12px;border-radius:4px;border:1px solid #b79a66;background:#fffaf0;color:var(--ink);width:100%}
#codeIn{font-family:var(--chalk);font-size:34px;letter-spacing:.3em;text-transform:uppercase;text-align:center;background:#2c3437;color:#f3f1e8;border-color:#3d4549}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border:none;border-radius:999px;padding:11px 20px;font-weight:700;background:#4a2a63;color:#fff4e0}
.btn.ghost{background:transparent;color:#4a2a63;border:1px solid #4a2a63}
.btn.ghostLight{background:rgba(18,12,28,.7);border:1px solid var(--amber);color:var(--fg)}
.btn.dark{background:#2a1d3a;border:1px solid var(--amber)}
.btn.amber{background:var(--amber);color:#2a1a07}
.err{color:#9b2d20;font-size:14px;min-height:1em;margin:0}
.hint{font-size:13px;color:#6b5a44;margin:0}

/* creator */
#creator{z-index:30;background:radial-gradient(90% 80% at 30% 40%,rgba(60,32,80,.75),rgba(10,7,16,.96)),url(/hall/hall.webp) center/cover;overflow:auto;place-items:start center}
.creatorGrid{display:grid;grid-template-columns:minmax(240px,380px) minmax(0,1fr);gap:24px;align-items:start;width:min(1100px,100%);padding-block:8px}
.mirror{display:grid;gap:10px;justify-items:center;position:sticky;top:0}
.mirrorFrame{position:relative;width:100%;max-width:380px;aspect-ratio:396/960;max-height:calc(100dvh - 120px);border-radius:18px;background:radial-gradient(ellipse at 50% 85%,rgba(242,180,90,.18),transparent 55%),radial-gradient(ellipse at 50% 30%,#3a2350,#160f22 70%);border:1px solid #3f2d55;overflow:hidden;touch-action:none;margin-inline:auto}
#bodyView{width:100%;height:100%;display:block;cursor:grab}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-family:var(--head);letter-spacing:.1em}
.mirrorBtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.controls{display:grid;gap:12px;min-width:0}
.nameRow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.nameRow b{font-family:var(--head);font-size:22px;color:#f6dfa3}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{border:1px solid #5b4673;background:rgba(30,18,44,.8);border-radius:999px;padding:7px 14px;font-size:14px}
.tab[aria-selected="true"]{background:var(--violet);border-color:var(--violet)}
.tab.adultTab{border-color:#c0506e}
.tab.adultTab[aria-selected="true"]{background:#a8354f;border-color:#a8354f}
.panel{background:rgba(22,14,32,.88);border:1px solid #3f2d55;border-radius:12px;padding:16px;display:grid;gap:14px;min-width:0;max-height:calc(100dvh - 220px);overflow:auto}
.tiles{display:flex;flex-wrap:wrap;gap:10px}
.tile{width:84px;border-radius:12px;border:2px solid transparent;background:#2a1d3a;display:grid;place-items:center;padding:4px;overflow:hidden;gap:2px;font-size:11px;color:var(--muted);text-align:center}
.tile canvas,.tile img{width:100%;height:auto;display:block;border-radius:8px}
.tile[aria-pressed="true"]{border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,180,90,.25);color:var(--fg)}
.tile.wide{width:110px}
.swatch{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.15);padding:0}
.swatch[aria-pressed="true"]{outline:3px solid var(--amber);outline-offset:2px}
.swatch.none{background:repeating-linear-gradient(45deg,#3a2a4a 0 6px,#2a1d3a 6px 12px)}
.slider{display:grid;grid-template-columns:110px 1fr 74px;gap:10px;align-items:center;font-size:14px;color:var(--muted)}
.slider input[type=range]{accent-color:var(--violet);width:100%}
.slider input[type=number]{width:74px;background:#120d1c;border:1px solid #5b4673;color:var(--fg);border-radius:6px;padding:5px 6px;font:inherit}
.toggleRow{display:flex;align-items:center;gap:10px;font-size:15px}
.toggleRow input{width:20px;height:20px;accent-color:var(--violet)}
.sectionLabel{font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--muted)}
.small{font-size:12px;color:var(--muted);margin:0}
.packHead{font-family:var(--head);font-size:13px;color:#f6dfa3;margin-top:4px}
.adultNote{border:1px solid #a8354f;background:rgba(168,53,79,.12);border-radius:10px;padding:10px 12px;font-size:13px}
.saveRow{justify-content:flex-end}
@media (max-width:760px){
  .creatorGrid{grid-template-columns:1fr}
  .creatorGrid{gap:12px}
  .mirror{position:sticky;top:calc(-1 * max(16px,env(safe-area-inset-top)));z-index:3;background:linear-gradient(#1a1126 85%,rgba(26,17,38,0));padding-block:6px 10px;margin-inline:-16px;width:calc(100% + 32px)}
  .mirrorFrame{max-width:none;width:auto;height:34dvh;aspect-ratio:396/960}
  .mirrorBtns .chip{padding:6px 12px;font-size:12px}
  .saveRow{position:sticky;bottom:calc(-1 * max(16px,env(safe-area-inset-bottom)));background:linear-gradient(rgba(18,12,28,0),#120d1c 30%);padding-block:14px 12px;z-index:3;justify-content:center}
  .panel{max-height:none}
  .slider{grid-template-columns:90px 1fr 64px}
}

/* portraits */
.pframe{position:relative}
.pframe canvas{display:block;width:100%;height:auto}

/* lobby */
#lobby{z-index:10;padding:0;display:block;overflow:hidden;background:#0b0811}
#hallBack{position:absolute;inset:-40px;background:url(/hall/hall_small.webp) center/cover;filter:blur(18px) brightness(.45) saturate(1.1)}
#viewport{position:absolute;inset:0;overflow:hidden;touch-action:none}
#stage{position:absolute;left:0;top:0;width:1920px;height:1097px;transform-origin:0 0;will-change:transform;box-shadow:0 0 120px 40px rgba(0,0,0,.6)}
#stage.anim{transition:transform .9s cubic-bezier(.65,0,.35,1)}
#stage img.layer{position:absolute;pointer-events:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out}
.glow{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,190,100,.55),rgba(255,160,60,.15) 40%,transparent 70%);animation:flick 2.2s infinite alternate}
@keyframes flick{0%{opacity:.75;transform:scale(1)}30%{opacity:.95}55%{opacity:.7;transform:scale(1.04)}100%{opacity:.9;transform:scale(.98)}}
#wallPlane{position:absolute;left:0;top:0;width:1000px;height:560px;transform-origin:0 0;pointer-events:none;z-index:3}
#wallSlots{position:absolute;inset:0}
.slot{position:absolute;pointer-events:auto;cursor:pointer;transition:transform .3s}
.slot:hover{transform:scale(1.04)}
.slot canvas{width:100%;height:100%;display:block}
.slot .plate{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);min-width:72%;padding:3px 10px 4px;background:url() ,linear-gradient(#e8c67a,#a7792e);color:#2a1a07;font-family:var(--head);font-weight:700;text-align:center;border-radius:4px;white-space:nowrap;box-shadow:0 3px 4px rgba(0,0,0,.55);font-size:15px;max-width:120%;overflow:hidden;text-overflow:ellipsis}
.slot .plate .hostMark{color:#7b1f2f;margin-right:4px}
.slot.off canvas{filter:saturate(.35) brightness(.55)}
.slot .zz{position:absolute;left:0;right:0;top:30%;text-align:center;font-family:var(--head);font-size:30px;color:#cfc3ff;letter-spacing:.2em;animation:zz 2.4s ease-in-out infinite;text-shadow:0 2px 6px #000}
@keyframes zz{50%{transform:translateY(-8px);opacity:.6}}
.slot.pending canvas{opacity:.55}
.slot .pend{position:absolute;left:0;right:0;top:40%;text-align:center;font-size:14px;color:#f6dfa3;text-shadow:0 2px 4px #000}
#slate{position:absolute;left:1517px;top:338px;width:216px;height:312px;display:grid;place-items:center;align-content:center;gap:6px;text-align:center;pointer-events:none}
#slate .lbl{font-family:var(--chalk);font-size:22px;color:rgba(240,240,232,.7)}
#slate .code{font-family:var(--chalk);font-size:62px;letter-spacing:6px;color:#f4f2ea;text-shadow:0 0 6px rgba(255,255,255,.35)}
#slate .url{font-family:var(--chalk);font-size:15px;color:rgba(240,240,232,.6);word-break:break-all;padding:0 10px}
#qr{position:absolute;left:1592px;top:672px;width:80px;height:80px;background:#f6efe0;padding:4px;border-radius:4px;box-shadow:0 0 14px rgba(95,211,196,.6)}
#qr svg{width:100%;height:100%;display:block}
.hot{position:absolute;border-radius:40%;background:transparent;border:none;padding:0;z-index:2}
.hot:hover{background:radial-gradient(circle,rgba(255,240,200,.12),transparent 70%)}
.fx{position:absolute;pointer-events:none;font-size:28px}
.creature{position:absolute;pointer-events:auto;cursor:pointer;background:none;border:none;padding:0;z-index:4}
#bat{width:60px;top:120px;left:-80px}
#spider{left:1295px;top:0;width:34px}
#spider .thread{position:absolute;left:16px;top:-600px;width:2px;height:600px;background:rgba(230,230,240,.5)}
#rat{width:74px;top:1035px;left:-120px}

.hud{position:fixed;z-index:20;display:flex;gap:8px;flex-wrap:wrap}
#focusBar{left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));justify-content:center;width:max-content;max-width:calc(100% - 24px)}
.chip{border:1px solid rgba(242,180,90,.5);background:rgba(18,12,28,.8);backdrop-filter:blur(6px);border-radius:999px;padding:9px 15px;font-family:var(--head);font-size:13px;letter-spacing:.06em}
.chip[aria-pressed="true"]{background:var(--amber);color:#2a1a07}
#topBar{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));justify-content:space-between;align-items:center;pointer-events:none}
#topBar > *{pointer-events:auto}
.roomTag{font-family:var(--head);font-size:13px;letter-spacing:.1em;background:rgba(18,12,28,.8);border:1px solid #3f2d55;border-radius:999px;padding:8px 14px}
.roomTag b{color:#f6dfa3;font-size:16px;letter-spacing:.2em}
#players{position:fixed;z-index:19;left:calc(12px + env(safe-area-inset-left));top:calc(60px + env(safe-area-inset-top));display:grid;gap:4px;font-size:13px;background:rgba(18,12,28,.72);border:1px solid #3f2d55;border-radius:12px;padding:8px 12px;max-height:calc(100% - 140px);overflow:auto;min-width:150px}
#players .p{display:flex;gap:8px;align-items:center}
#players .dot{width:9px;height:9px;border-radius:50%}
#players .p.off{opacity:.55}
#toast{position:fixed;z-index:60;left:50%;top:calc(60px + env(safe-area-inset-top));transform:translate(-50%,-20px);opacity:0;transition:.35s;background:var(--parch);color:var(--ink);padding:10px 18px;border-radius:999px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100% - 32px);text-align:center;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
#netState{position:fixed;z-index:61;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#7b1f2f;color:#fff;border-radius:999px;padding:8px 16px;font-size:14px}
#settings{position:fixed;z-index:45;right:calc(12px + env(safe-area-inset-right));top:calc(60px + env(safe-area-inset-top));width:min(340px,calc(100% - 24px));background:rgba(18,12,28,.96);border:1px solid #3f2d55;border-radius:12px;padding:16px;display:grid;gap:12px}
#settings h3{margin:0;font-family:var(--head);color:#f6dfa3}
@media (max-aspect-ratio:13/10){
  #players{left:50%;transform:translateX(-50%);top:calc(104px + env(safe-area-inset-top));display:flex;flex-wrap:wrap;gap:4px 12px;max-width:calc(100% - 24px);justify-content:center}
  #toast{top:calc(150px + env(safe-area-inset-top))}
  #focusBar .chip{padding:8px 11px;font-size:12px}
}

/* grimoire overlay */
#book{position:fixed;inset:0;z-index:35;display:grid;place-items:center;background:rgba(8,5,14,.7);padding:16px}
.spread{width:min(860px,100%);display:grid;grid-template-columns:1fr 1fr;background:var(--cover);padding:14px;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.7);animation:open .6s cubic-bezier(.2,.8,.2,1)}
@keyframes open{from{transform:perspective(1200px) rotateY(-35deg) scale(.85);opacity:0}}
@media (max-width:640px){.spread{grid-template-columns:1fr}.spread .pg.left{display:none}}
.pg{background:linear-gradient(90deg,#e7d6b2,#f3e6c8 12%,#f1e3c4);color:var(--ink);padding:22px;min-height:360px;display:grid;align-content:start;gap:12px}
.pg.left{background:linear-gradient(270deg,#e2cfa8,#f3e6c8 12%,#f1e3c4)}
.pg h3{font-family:var(--head);margin:0;color:var(--bookc);font-size:22px}
.pg .window{aspect-ratio:16/9;border-radius:10px;background:var(--win);display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:20px;text-shadow:0 2px 6px rgba(0,0,0,.6);border:3px solid var(--bookc);text-align:center;padding:8px}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px}
.meta span{border:1px solid var(--bookc);border-radius:999px;padding:3px 10px}
.list{display:grid;gap:6px}
.list button{text-align:left;background:none;border:none;border-bottom:1px dashed #b49a6b;padding:6px 0;font-family:var(--head);font-size:15px;color:var(--ink)}
.list button[aria-current="true"]{color:var(--bookc);font-weight:700}
.closeBook{justify-self:end}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}