:root{
  --ink:#0d0a0c;
  --wood:#2a1a16;
  --wood-2:#3d2620;
  --ember:#e0803a;
  --ember-2:#ffb15c;
  --gold:#d9a441;
  --blood:#6d1f22;
  --parch:#e8d8bc;
  --parch-dim:#a8977c;
  --line:rgba(217,164,65,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#0a0709;
  color:var(--parch);
  font-family:"IBM Plex Sans Thai",system-ui,-apple-system,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

/* ---------- stage ---------- */
#stage{position:fixed;inset:0;display:grid;place-items:center;background:#070506}
#game,#overlay{
  position:absolute;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
#game{cursor:pointer}
#overlay{pointer-events:none;image-rendering:auto}

/* ---------- screens ---------- */
.screen{
  position:fixed;inset:0;z-index:20;
  display:grid;place-items:center;
  padding:16px;
  background:radial-gradient(ellipse at 50% 40%,rgba(60,26,14,.55),rgba(6,4,5,.94) 70%);
  backdrop-filter:blur(3px);
  overflow-y:auto;
}
.screen.hidden{display:none}

.panel{
  width:min(760px,100%);
  background:linear-gradient(#20141199,#140d0ff2),var(--wood);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 0 0 1px #000a,0 24px 60px -20px #000,inset 0 1px 0 #ffffff0d;
  padding:26px 26px 22px;
}
.panel.narrow,.menu-panel{width:min(520px,100%)}

h1{
  font-size:clamp(22px,4.4vw,34px);
  letter-spacing:.22em;
  font-weight:600;
  color:var(--gold);
  text-align:center;
  text-shadow:0 0 18px #d9a44133;
}
h2{font-size:20px;letter-spacing:.14em;color:var(--gold);font-weight:600;text-align:center}
.sub{
  text-align:center;font-size:12.5px;color:var(--parch-dim);
  margin-top:6px;margin-bottom:20px;letter-spacing:.03em;
}

/* ---------- creator ---------- */
.creator-body{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}

.preview-wrap{
  flex:0 0 168px;
  position:relative;
  display:grid;place-items:end center;
  height:250px;
  background:linear-gradient(#1a0f0d,#0e0808);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.preview-wrap::before{
  content:"";position:absolute;left:50%;top:26px;translate:-50% 0;
  width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,128,58,.20),transparent 68%);
}
#preview{position:relative;image-rendering:pixelated;margin-bottom:26px;width:144px;height:261px}
.preview-floor{position:absolute;bottom:0;left:0;right:0;height:26px;background:linear-gradient(#3d2620,#241512);border-top:1px solid #00000066}

.controls{flex:1 1 300px;min-width:280px;display:flex;flex-direction:column;gap:11px}
.row{display:flex;align-items:center;gap:12px}
.row>label{flex:0 0 102px;font-size:12px;color:var(--parch-dim);letter-spacing:.03em}

input#nick{
  flex:1;background:#0d0808;border:1px solid var(--line);color:var(--parch);
  padding:9px 11px;border-radius:3px;font:inherit;font-size:14px;outline:none;
}
input#nick:focus{border-color:var(--gold);box-shadow:0 0 0 3px #d9a4411a}

.picker{display:flex;gap:6px;flex-wrap:wrap}
.picker button{
  width:32px;height:32px;border-radius:3px;cursor:pointer;
  background:#0d0808;border:1px solid #ffffff14;color:var(--parch-dim);
  font:inherit;font-size:12px;transition:.12s;
}
.picker button:hover{border-color:#ffffff33;color:var(--parch)}
.picker button.on{border-color:var(--gold);background:#d9a4411f;color:var(--gold)}

.swatches{display:flex;gap:5px;flex-wrap:wrap}
.swatches button{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:1px solid #00000066;box-shadow:0 0 0 1px #ffffff14;transition:.12s;
}
.swatches button:hover{transform:scale(1.14)}
.swatches button.on{box-shadow:0 0 0 2px var(--gold);transform:scale(1.14)}

.actions{margin-top:8px;gap:10px}
.actions>button{flex:1}

button.primary,button.ghost{
  font:inherit;font-size:14px;letter-spacing:.08em;cursor:pointer;
  padding:11px 16px;border-radius:3px;transition:.14s;
}
button.primary{
  background:linear-gradient(#8a3020,#5d1d14);
  border:1px solid #c8703c66;color:#ffe6c8;
  box-shadow:inset 0 1px 0 #ffffff1f;
}
button.primary:hover{background:linear-gradient(#a43a26,#71241a);border-color:#e0803a}
button.ghost{background:#ffffff08;border:1px solid var(--line);color:var(--parch-dim)}
button.ghost:hover{color:var(--parch);border-color:var(--gold)}
button.wide{width:100%;margin-top:16px}
button.hidden{display:none}

/* ---------- menu ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
.menu-item{
  display:flex;align-items:center;gap:10px;text-align:left;
  background:#ffffff07;border:1px solid #ffffff12;border-radius:3px;
  padding:9px 10px;cursor:pointer;font:inherit;color:var(--parch);transition:.12s;
}
.menu-item:hover{background:#d9a4411a;border-color:var(--gold)}
.menu-item.poor{opacity:.45}
.menu-item.poor .mi-price{color:#c8392f}
.menu-item canvas{image-rendering:pixelated;width:32px;height:32px;flex:0 0 32px}
.menu-item .mi-name{font-size:13px;line-height:1.25}
.menu-item .mi-price{font-size:11px;color:var(--parch-dim)}

/* ---------- hud ---------- */
#hud{
  position:fixed;inset:auto 0 0 0;z-index:15;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;pointer-events:none;
  background:linear-gradient(transparent,#0a0709cc);
}
#hud.hidden{display:none}
.hud-left{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--parch-dim)}
.hud-right{display:flex;gap:8px;pointer-events:auto}
.hud-btn{
  width:34px;height:34px;border-radius:3px;cursor:pointer;
  background:#150d0dcc;border:1px solid var(--line);color:var(--gold);
  font:inherit;font-size:15px;transition:.12s;
}
.hud-btn:hover{background:#d9a4411f}
.hud-btn.off{color:#5c4f42;border-color:#ffffff12}

.net-dot{width:7px;height:7px;border-radius:50%;background:#7a6a55;box-shadow:0 0 6px #0000}
.net-dot.live{background:#5fbf6a;box-shadow:0 0 7px #5fbf6a99}
.net-dot.solo{background:#c08a3a}

h2.spaced{margin-top:20px}
.help-list{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--parch-dim);line-height:1.5}
.help-list b{color:var(--gold);font-weight:600}

/* ---------- chat ---------- */
/* Anchored to the bottom, clear of the HUD strip. The column order still
   puts the log above the input, so new lines appear right where the eye
   already is when typing. */
#chat{
  position:fixed;left:12px;bottom:56px;z-index:14;
  width:min(280px,38vw);
  display:flex;flex-direction:column;
  background:#120c0ee6;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 12px 40px -16px #000;
  backdrop-filter:blur(4px);
  overflow:hidden;
}
#chat.hidden{display:none}
.chat-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 10px;font-size:11.5px;letter-spacing:.1em;color:var(--gold);
  border-bottom:1px solid var(--line);background:#ffffff06;
}
.chat-head button{
  background:none;border:none;color:var(--parch-dim);cursor:pointer;
  font:inherit;font-size:15px;line-height:1;padding:0 4px;
}
.chat-head button:hover{color:var(--gold)}
#chat-log{
  height:min(230px,26vh);overflow-y:auto;padding:8px 10px;
  display:flex;flex-direction:column;gap:5px;
  font-size:12.5px;line-height:1.45;scrollbar-width:thin;
}
#chat-log::-webkit-scrollbar{width:5px}
#chat-log::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}
.chat-line{word-break:break-word;color:var(--parch)}
.chat-nick{color:var(--gold);margin-right:6px;font-weight:600}
.chat-line.mine .chat-nick{color:#e8a35c}
.chat-line.system{color:#7c6f5e;font-style:italic;font-size:11.5px}
.chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
#chat-input{
  flex:1;min-width:0;background:#0d0808;border:1px solid var(--line);
  color:var(--parch);padding:7px 9px;border-radius:3px;font:inherit;font-size:12.5px;outline:none;
}
#chat-input:focus{border-color:var(--gold)}
#chat-send{
  background:#ffffff08;border:1px solid var(--line);color:var(--parch-dim);
  border-radius:3px;padding:0 11px;font:inherit;font-size:12px;cursor:pointer;
}
#chat-send:hover{color:var(--gold);border-color:var(--gold)}
#chat.collapsed #chat-log,#chat.collapsed .chat-form{display:none}

/* ---------- arcade (minigame stage) ---------- */
.arcade-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
#mini{
  image-rendering:pixelated;
  width:min(92vw,900px);height:auto;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:3px;
  box-shadow:0 0 0 1px #000a,0 26px 70px -24px #000;
  background:#0d0a0c;
}
.arcade-bar{
  display:flex;align-items:center;gap:14px;
  width:min(92vw,900px);justify-content:space-between;
  font-size:12.5px;color:var(--parch-dim);letter-spacing:.06em;
}
button.small{padding:7px 14px;font-size:12.5px}
.duel-touch{display:flex;gap:8px;width:min(92vw,900px)}

/* on-screen controls for the minigames; the room's walk pad is covered
   by the arcade screen, so each game carries its own */
.pad-grid{display:grid;gap:8px;width:min(92vw,900px)}
.pad-grid.hidden{display:none}
#fight-touch{grid-template-columns:repeat(6,1fr)}
#audition-touch{grid-template-columns:repeat(4,1fr)}
#volley-touch{grid-template-columns:1fr 1fr 2fr}
#hoop-touch{grid-template-columns:1fr 1fr 3fr}
#grill-touch{grid-template-columns:1fr 1fr 1fr}

/* the grill keeps its shop beside the fire, so you can buy another
   skewer without leaving the circle */
.stage-row{display:flex;gap:10px;align-items:flex-start;width:min(92vw,900px)}
/* below this the side panel would starve the fire, so it drops underneath */
@media (max-width:760px){
  .stage-row{flex-direction:column;align-items:stretch}
  .stage-row #mini{width:100%}
  #grill-panel{flex:none;max-height:190px}
}
.stage-row #mini{flex:1 1 auto;width:auto;min-width:0}
#grill-panel{
  flex:0 0 190px;max-height:calc(min(92vw,900px)*0.5625);overflow-y:auto;
  background:#120c0ee6;border:1px solid var(--line);border-radius:3px;padding:8px;
}
#grill-panel.hidden{display:none}
#grill-panel h3{font-size:11.5px;letter-spacing:.1em;color:var(--gold);margin-bottom:7px;text-align:center;font-weight:600}
.grill-item{
  display:flex;justify-content:space-between;gap:6px;width:100%;
  background:#ffffff07;border:1px solid #ffffff12;border-radius:3px;
  padding:6px 8px;margin-bottom:4px;cursor:pointer;font:inherit;font-size:12px;color:var(--parch);
}
.grill-item:hover{background:#d9a4411a;border-color:var(--gold)}
.grill-item.poor{opacity:.4}
.grill-item span:last-child{color:var(--gold)}
.pad-btn{
  padding:18px 0;font:inherit;font-size:15px;cursor:pointer;touch-action:none;
  background:#150d0dcc;border:1px solid var(--line);color:var(--parch);
  border-radius:4px;user-select:none;
}
.pad-btn:active{background:#d9a4412e;border-color:var(--gold)}
.pad-btn.hit{background:#5d1d14cc;border-color:#c8703c66;color:#ffe6c8}
.pad-btn.hit:active{background:#a43a26}
@media (min-width:900px) and (pointer:fine){
  .pad-grid{display:none !important}
}
.duel-touch.hidden{display:none}
.duel-touch button{
  flex:1;padding:14px 0;font:inherit;font-size:14px;cursor:pointer;
  background:#150d0dcc;border:1px solid var(--line);color:var(--parch);border-radius:3px;
}
.duel-touch button:active{background:#d9a4412e;border-color:var(--gold)}

/* ---------- art credits ---------- */
.credits-body{max-height:56vh;overflow-y:auto;font-size:12.5px;line-height:1.6;color:var(--parch-dim)}
.credits-body h3{color:var(--gold);font-size:12px;letter-spacing:.1em;margin:14px 0 6px;font-weight:600}
.credits-body h3:first-child{margin-top:0}
.credits-body p{margin-bottom:8px}
.credits-body ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px}
.credits-body li{color:var(--parch)}
.credits-body a{color:#9db7d4;word-break:break-all}
.credits-note{
  margin-top:12px;padding:9px 11px;border-left:2px solid var(--gold);
  background:#ffffff06;color:var(--parch);font-size:12px;
}

/* ---------- purse ---------- */
#purse{
  position:fixed;right:14px;top:12px;z-index:15;
  font-size:14px;font-weight:600;color:var(--gold);letter-spacing:.06em;
  background:#120c0ecc;border:1px solid var(--line);border-radius:3px;
  padding:6px 12px;pointer-events:none;
}
#purse.hidden{display:none}
#purse.flash{color:#fff2cf;border-color:var(--gold)}

/* ---------- song picker ---------- */
.song-list{display:flex;flex-direction:column;gap:8px}
.song-item{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  background:#ffffff07;border:1px solid #ffffff12;border-radius:3px;
  padding:12px 14px;cursor:pointer;font:inherit;color:var(--parch);transition:.12s;
}
.song-item:hover{background:#d9a4411a;border-color:var(--gold)}
.song-disc{
  flex:0 0 26px;height:26px;border-radius:50%;
  background:radial-gradient(circle,#0d0808 0 22%,var(--gold) 23% 30%,#241a14 31% 100%);
  border:1px solid #00000066;
}
.song-item .si-name{font-size:14px;font-weight:600}
.song-item .si-meta{font-size:11.5px;color:var(--parch-dim);margin-top:1px}
.song-item .si-bpm{margin-left:auto;font-size:11.5px;color:var(--gold)}

/* ---------- results ---------- */
.res-body{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.res-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 12px;background:#ffffff07;border:1px solid #ffffff10;border-radius:3px;
  font-size:13px;
}
.res-row b{color:var(--gold);font-size:15px;font-weight:600}
.res-row.big{padding:14px 12px}
.res-row.big b{font-size:26px;letter-spacing:.04em}
.res-note{font-size:11.5px;color:var(--parch-dim);text-align:center;margin-top:4px}

/* ---------- ranking ---------- */
.rank-body{max-height:52vh;overflow-y:auto;display:flex;flex-direction:column;gap:3px}
.rank-row{
  display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:3px;font-size:13px;
  background:#ffffff05;border:1px solid transparent;
}
.rank-row.head{background:none;color:var(--parch-dim);font-size:11px;letter-spacing:.08em}
.rank-row.me{background:#d9a4411a;border-color:var(--gold)}
.rank-pos{color:var(--gold);font-weight:600;text-align:right}
.rank-row .rank-pos.medal{font-size:15px}
.rank-score{color:var(--parch);font-weight:600;text-align:right;min-width:64px}
.rank-time{color:var(--parch-dim);text-align:right;min-width:58px;font-size:12px}
.rank-empty{text-align:center;color:var(--parch-dim);font-size:13px;padding:26px 0}

/* ---------- poke popover ---------- */
#poke{
  position:fixed;z-index:17;transform:translate(-50%,-100%);
  background:#150d0ff2;border:1px solid var(--gold);border-radius:4px;
  padding:8px;display:flex;flex-direction:column;gap:6px;align-items:stretch;
  box-shadow:0 10px 30px -10px #000;
}
#poke.hidden{display:none}
.poke-name{font-size:12px;color:var(--gold);text-align:center;padding:0 6px}
#poke button{
  background:linear-gradient(#8a3020,#5d1d14);border:1px solid #c8703c66;
  color:#ffe6c8;border-radius:3px;padding:7px 14px;font:inherit;font-size:12.5px;cursor:pointer;
}
#poke button:hover:not(:disabled){background:linear-gradient(#a43a26,#71241a)}
#poke button:disabled{
  background:#ffffff08;border-color:#ffffff14;color:#6b5f52;cursor:not-allowed;
}
#poke.busy .poke-name{color:var(--parch-dim)}

/* ---------- scene ribbon ---------- */
#where{
  position:fixed;left:50%;top:14px;translate:-50% 0;z-index:13;
  font-size:12px;letter-spacing:.16em;color:var(--gold);
  background:#120c0ecc;border:1px solid var(--line);border-radius:3px;
  padding:5px 14px;pointer-events:none;
}
#where.hidden{display:none}

/* ---------- touch pad ---------- */
#touch{
  position:fixed;left:0;right:0;bottom:54px;z-index:16;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:10px;padding:0 16px;pointer-events:none;
}
#btn-jump{margin-right:auto;margin-left:10px}
#touch.hidden{display:none}
.pad{
  pointer-events:auto;
  width:64px;height:64px;border-radius:50%;
  background:#150d0dcc;border:1px solid var(--line);color:var(--gold);
  font-size:22px;cursor:pointer;touch-action:none;
  backdrop-filter:blur(2px);
}
.pad:active{background:#d9a4412e;border-color:var(--gold)}

#yt-host{position:fixed;width:1px;height:1px;opacity:.01;pointer-events:none;left:-10px;top:-10px}

@media (max-width:640px){
  /* clear the on-screen walk pad, which sits at bottom:54px */
  #chat{bottom:128px;width:calc(100% - 24px)}
  #chat-log{height:min(150px,20vh)}
  .panel{padding:20px 16px 18px}
  .creator-body{gap:16px}
  .preview-wrap{flex:1 1 100%;height:220px}
  #preview{width:96px;height:174px}
  .row>label{flex:0 0 52px;font-size:11.5px}
}

/* ---- the town store ------------------------------------------------ */
.store-panel{width:min(94vw,460px)}
.store-tabs{display:flex;gap:8px;margin:10px 0 12px}
.store-tabs .tab{
  flex:1;padding:8px 0;font:inherit;font-size:13px;cursor:pointer;
  background:#ffffff08;border:1px solid var(--line);border-radius:3px;color:var(--parch-dim);
}
.store-tabs .tab.on{background:#d9a4411f;border-color:var(--gold);color:var(--gold)}
.store-list{display:flex;flex-direction:column;gap:5px;max-height:46vh;overflow-y:auto}
.store-row{
  display:flex;align-items:center;gap:10px;width:100%;
  background:#ffffff07;border:1px solid #ffffff12;border-radius:3px;
  padding:8px 10px;font:inherit;font-size:13px;color:var(--parch);cursor:pointer;text-align:left;
}
.store-row:hover:not(:disabled){background:#d9a4411a;border-color:var(--gold)}
.store-row:disabled{opacity:.4;cursor:default}
.store-row .sr-name{flex:1}
.store-row .sr-qty{color:var(--parch-dim);font-size:12px}
.store-row .sr-price{color:var(--gold);min-width:64px;text-align:right}
.store-row .sr-swatch{width:12px;height:12px;border-radius:2px;flex:0 0 12px;border:1px solid #0006}

/* ---- the mine ------------------------------------------------------ */
.mine-panel{width:min(94vw,420px)}
.mine-stats{display:flex;flex-direction:column;gap:6px;margin:12px 0 10px}
.mine-stats > div{display:flex;justify-content:space-between;font-size:13px}
.ms-label{color:var(--parch-dim)}
.ms-value{color:var(--gold);font-weight:600}
.mine-bar{height:8px;background:#ffffff10;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-bottom:12px}
.mine-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#8a5a2b,#d9a441)}
.mine-loot{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;min-height:0;
  font-size:12.5px;color:var(--parch);
}
.mine-loot .ml{background:#ffffff08;border:1px solid #ffffff14;border-radius:3px;padding:4px 8px}
.mine-loot .ml b{color:var(--gold)}
.mine-panel .ghost{margin-top:6px}

/* ---- digging ------------------------------------------------------- */
#dig{
  position:fixed;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;
  background:#120c0ee6;border:1px solid var(--gold);border-radius:4px;
  padding:8px 12px;font-size:13px;color:var(--parch);z-index:40;
}
#dig.hidden{display:none}
#dig #dig-text{white-space:nowrap}
#dig button{white-space:nowrap;flex:0 0 auto}
#dig b{color:var(--gold)}