/* NyxxBunny.studio — landscape, asset-driven. Character art = generated; UI chrome = CSS. */
:root{
  --bg:#0e0a16; --panel:#1b1227; --panel2:#241733; --line:#5a3f7e; --line2:#3a2b5e;
  --purple:#8b54ff; --purpleDeep:#5a2db5; --magenta:#c45cff; --lav:#c9b3ff;
  --white:#f3eeff; --dim:#b6a6d6; --bad:#ff4d70; --gold:#ffd98a;
  --W:1200px; --H:800px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; }
html,body{ height:100%; background:#06040a; overflow:hidden;
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  color:var(--white); user-select:none; -webkit-user-select:none; }
img{ -webkit-user-drag:none; }

#scaler{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; }
#stage{ position:relative; width:var(--W); height:var(--H); transform-origin:center center;
  background:#0a0710; overflow:hidden; box-shadow:0 0 0 3px #000, 0 0 60px rgba(120,60,255,.3); }
#stage.shake{ animation:shake .32s linear; }
@keyframes shake{ 0%,100%{transform:translate(0,0)} 20%{transform:translate(-8px,4px)}
  40%{transform:translate(7px,-5px)} 60%{transform:translate(-6px,-3px)} 80%{transform:translate(5px,4px)} }

.screen{ position:absolute; inset:0; display:none; }
.screen.show{ display:block; }

/* ---------- title ---------- */
#titleImg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hotspot{ position:absolute; left:13%; width:37%; background:transparent; border:0; cursor:pointer;
  border-radius:14px; transition:background .12s, box-shadow .12s; }
.hotspot:hover,.hotspot:focus{ background:rgba(201,179,255,.14); box-shadow:0 0 22px rgba(139,84,255,.45) inset; outline:none; }
#hsStart{ top:55.5%; height:10.1%; }
#hsBoard{ top:67.4%; height:10.1%; }
#hsHow{   top:79.3%; height:10.1%; }

/* ---------- game scene ---------- */
#bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(6,3,12,.5) 100%),
             linear-gradient(180deg, rgba(8,4,16,.5) 0%, transparent 18% 62%, rgba(8,4,16,.9) 100%); }

#clientWrap{ position:absolute; left:50%; bottom:120px; width:430px; height:600px;
  transform:translateX(-50%); }
.clientImg{ position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  max-width:100%; max-height:100%; filter:drop-shadow(0 14px 14px rgba(0,0,0,.5)); }
#clientDone{ opacity:0; transition:opacity .5s ease; }
#clientWrap.done #clientDone{ opacity:1; }
#clientWrap.enter{ animation:slideIn .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes slideIn{ from{ transform:translateX(-50%) translateY(40px); opacity:0 } to{ transform:translateX(-50%) translateY(0); opacity:1 } }
#sparkles{ position:absolute; inset:0; pointer-events:none; }

#nyxx{ position:absolute; left:14px; bottom:130px; height:184px;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.5)); transition:transform .15s; pointer-events:none; }
#nyxx.pop{ transform:scale(1.06); }

/* HUD */
#hud{ position:absolute; top:12px; left:14px; right:14px; height:52px; display:flex;
  align-items:center; gap:14px; padding:0 16px;
  background:linear-gradient(180deg, rgba(27,18,39,.92), rgba(15,10,22,.92));
  border:2px solid var(--line); border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.hud-block{ display:flex; flex-direction:column; line-height:1; min-width:78px; }
.hud-block.right{ margin-left:auto; align-items:flex-end; position:relative; }
.hud-label{ font-size:10px; letter-spacing:.22em; color:var(--dim); margin-bottom:3px; }
.hud-val{ font-size:22px; font-weight:800; color:var(--white); font-variant-numeric:tabular-nums; }
.combo{ position:absolute; top:-4px; right:0; transform:translateY(-100%); font-size:13px;
  font-weight:800; color:var(--magenta); opacity:0; transition:opacity .2s; }
.combo.show{ opacity:1; }
#patienceWrap{ flex:1; height:26px; position:relative; border-radius:14px; overflow:hidden;
  background:#120a1f; border:2px solid var(--line2); box-shadow:inset 0 2px 6px rgba(0,0,0,.6); }
#patienceFill{ position:absolute; inset:0; transform-origin:left center;
  background:linear-gradient(180deg,#a06bff,#6a32c8); transition:background .2s, transform .08s linear; }
#patienceText{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:.24em; font-weight:700; color:rgba(255,255,255,.9);
  text-shadow:0 1px 2px rgba(0,0,0,.7); }

/* WANTS — clean goth panel */
#wants{ position:absolute; top:74px; left:50%; transform:translateX(-50%);
  padding:8px 16px 10px; border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:7px;
  background:linear-gradient(180deg, rgba(36,23,51,.94), rgba(20,12,30,.94));
  border:2px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(201,179,255,.12); }
#wantsName{ font-size:12px; letter-spacing:.2em; font-weight:800; color:var(--lav); text-transform:uppercase; }
#wantsList{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.want{ position:relative; width:46px; height:46px; border-radius:10px; background:rgba(15,9,24,.6);
  border:2px solid var(--line2); display:flex; align-items:center; justify-content:center; }
.want img{ width:36px; height:36px; }
.want.done{ border-color:var(--purple); background:rgba(139,84,255,.22); }
.want .chk{ position:absolute; right:-6px; top:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--purple); color:#fff; font-size:12px; display:none; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.5); }
.want.done .chk{ display:flex; }

/* KIT — clean goth buttons */
#kit{ position:absolute; left:0; right:0; bottom:12px; height:112px; display:flex; gap:8px;
  align-items:center; justify-content:center; padding:0 16px; flex-wrap:nowrap; }
.kit-btn{ position:relative; flex:0 1 92px; min-width:70px; height:100px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:linear-gradient(180deg, var(--panel2), #160e26); border:2px solid var(--line);
  border-radius:14px; box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(201,179,255,.15);
  transition:transform .08s, border-color .12s, filter .12s; }
.kit-btn:hover{ border-color:var(--purple); }
.kit-btn:active{ transform:translateY(2px) scale(.97); }
.kit-btn.used{ filter:grayscale(.8) brightness(.55); pointer-events:none; border-color:var(--line2); }
.kit-btn img{ width:58px; height:58px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.kit-btn .lbl{ font-size:10px; font-weight:700; letter-spacing:.02em; color:var(--white);
  text-shadow:0 1px 2px #000; max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kit-btn.wrong{ animation:wrongShake .3s; border-color:var(--bad); }
@keyframes wrongShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* popups / fx */
#popups{ position:absolute; inset:0; pointer-events:none; }
.pop{ position:absolute; transform:translateX(-50%); font-weight:800;
  text-shadow:0 2px 6px rgba(0,0,0,.8); animation:floatUp 1s ease forwards; white-space:nowrap; }
@keyframes floatUp{ from{ opacity:1 } to{ opacity:0; transform:translate(-50%,-46px) } }
.sparkle{ position:absolute; width:8px; height:8px; border-radius:2px; pointer-events:none;
  animation:spark .7s ease forwards; }
@keyframes spark{ from{opacity:1; transform:translate(0,0) scale(1)} to{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.3)} }
#flash{ position:absolute; inset:0; background:var(--bad); opacity:0; pointer-events:none; }
#flash.go{ animation:flash .35s ease; }
@keyframes flash{ from{opacity:.4} to{opacity:0} }

/* ---------- overlays / modals (dark goth cards) ---------- */
.overlay{ position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(8,4,16,.72); backdrop-filter:blur(2px); z-index:20; padding:20px; }
.overlay.show{ display:flex; }
.card{ width:min(540px,92%); padding:30px 30px 24px; text-align:center;
  background:linear-gradient(180deg,var(--panel2),var(--panel)); color:var(--white);
  border:2px solid var(--line); border-radius:18px;
  box-shadow:0 16px 50px rgba(0,0,0,.6), inset 0 0 0 1px rgba(201,179,255,.1); }
.card h2{ font-size:26px; letter-spacing:.04em; color:#fff; margin-bottom:10px; }
.card .sub{ color:var(--dim); font-size:13px; margin:4px 0; min-height:16px; }
.how-list{ text-align:left; margin:6px auto 18px; padding-left:18px; font-size:14px; color:#e7defb; max-width:430px; }
.how-list li{ margin:7px 0; } .how-list b{ color:var(--magenta); }
.over-score{ font-size:17px; margin:4px 0 8px; }
.over-score span{ color:var(--magenta); font-weight:800; font-size:26px; }

.btn{ appearance:none; cursor:pointer; color:var(--white); font:700 15px/1 inherit; padding:0 20px; height:48px;
  min-width:96px; border:2px solid var(--line); border-radius:12px; background:var(--panel2);
  transition:transform .08s, border-color .12s, filter .12s; }
.btn:hover{ border-color:var(--purple); }
.btn:active{ transform:translateY(2px) scale(.98); }
.btn-primary{ background:linear-gradient(180deg,var(--purple),var(--purpleDeep)); border-color:var(--magenta);
  text-shadow:0 1px 2px rgba(0,0,0,.4); }
.btn-primary:hover{ border-color:#fff; filter:brightness(1.08); }
.btn-ghost{ background:none; border-color:transparent; color:var(--dim); height:44px; min-width:0; }
.btn-ghost:hover{ color:var(--white); border-color:var(--line); }
.row{ display:flex; gap:10px; margin-top:16px; justify-content:center; }

.board-list{ list-style:none; counter-reset:rank; margin:8px auto 4px; padding:0; text-align:left;
  max-height:42vh; overflow:auto; max-width:430px; }
.board-list li{ counter-increment:rank; display:flex; align-items:center; gap:10px; padding:7px 10px;
  border-radius:8px; font-size:15px; }
.board-list li::before{ content:counter(rank); width:26px; text-align:right; color:var(--dim); font-weight:800; }
.board-list li:nth-child(odd){ background:rgba(255,255,255,.04); }
.board-list li .nm{ flex:1; letter-spacing:.04em; font-weight:700; }
.board-list li .sc{ font-weight:800; color:var(--magenta); }
.board-list li.me{ background:rgba(139,84,255,.2); outline:2px solid var(--purple); }
.muted{ color:var(--dim); }
.name-row{ display:flex; gap:8px; margin:8px auto 0; max-width:420px; }
#nameInput{ flex:1; min-width:0; height:48px; padding:0 14px; border-radius:10px; border:2px solid var(--line);
  background:#100a1c; color:#fff; font:800 16px/1 inherit; letter-spacing:.1em; text-transform:uppercase; outline:none; }
#nameInput:focus{ border-color:var(--purple); }

.iconbtn{ position:absolute; top:12px; right:12px; width:38px; height:38px; border-radius:10px; z-index:30;
  border:2px solid var(--line); background:rgba(20,12,34,.8); color:var(--white); font-size:16px; cursor:pointer; }
.iconbtn.off{ color:var(--dim); }

#rotate{ position:absolute; inset:0; display:none; z-index:50; background:#0a0710;
  flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-size:22px; font-weight:800; letter-spacing:.06em; gap:8px; color:var(--lav); }
#rotate small{ font-size:13px; color:var(--dim); font-weight:600; }
body.portrait #rotate{ display:flex; }