:root{
  --bg:#090b09;
  --panel:#111510;
  --acid:#a6ff00;
  --green:#6dff76;
  --purple:#b04cff;
  --yellow:#ffd429;
  --red:#ff493d;
  --text:#f3f3ea;
  --muted:#a7ada3;
  --brown:#3b2617;
  --brown2:#5c3a20;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 10%,rgba(124,40,201,.13),transparent 35%),
    radial-gradient(circle at 80% 15%,rgba(106,255,58,.09),transparent 32%),
    radial-gradient(circle at top,#1a2117 0,#070807 58%,#020302 100%);
  color:var(--text);
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",system-ui,sans-serif;
}
body{
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
button,a{font:inherit}
button{cursor:pointer}
#app{
  width:100%;
  height:100svh;
  display:grid;
  place-items:center;
  padding:8px;
}
#gameShell{
  width:min(1180px,100%);
  height:min(100%,calc(100svh - 16px));
  display:flex;
  flex-direction:column;
  gap:8px;
}
#hud{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:8px;
  flex:0 0 auto;
}
.hud-block{
  background:linear-gradient(#171b15,#0b0d0b);
  border:1px solid #384034;
  border-radius:10px;
  padding:7px 12px;
  text-align:center;
  box-shadow:0 0 20px #000 inset;
}
.hud-block span{
  display:block;
  color:var(--yellow);
  font-size:clamp(.66rem,1.3vw,.9rem);
  letter-spacing:.08em;
}
.hud-block strong{font-size:clamp(1.05rem,2vw,1.55rem)}
.resistance{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
}
.resistance span{grid-column:1/-1}
.bar{
  height:15px;
  border:2px solid #636b5c;
  background:#070807;
  border-radius:4px;
  overflow:hidden;
}
.bar i{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg,#73ff21,#d7ff26);
  transition:width .2s;
}
.resistance strong{font-size:.98rem}
#viewportWrap{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:0;
  background:#000;
  border:2px solid #3d4637;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 70px #000;
}
#game{
  width:100%;
  height:100%;
  display:block;
  background:#090909;
  position:relative;
  z-index:0;
}
#viewportWrap::before,
#viewportWrap::after{
  content:"";
  position:absolute;
  left:-22%;
  width:144%;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
}
#viewportWrap::before{
  bottom:-10%;
  height:48%;
  opacity:.34;
  filter:blur(15px);
  background:
    radial-gradient(ellipse at 18% 72%,rgba(226,231,218,.28) 0 13%,transparent 35%),
    radial-gradient(ellipse at 48% 78%,rgba(193,201,188,.24) 0 15%,transparent 38%),
    radial-gradient(ellipse at 80% 68%,rgba(220,226,214,.26) 0 12%,transparent 34%),
    linear-gradient(to top,rgba(203,210,199,.20),rgba(203,210,199,.07) 48%,transparent 88%);
  animation:floorFogA 10s ease-in-out infinite alternate;
}
#viewportWrap::after{
  bottom:-16%;
  height:42%;
  opacity:.23;
  filter:blur(22px);
  background:
    radial-gradient(ellipse at 30% 82%,rgba(238,240,232,.30) 0 12%,transparent 37%),
    radial-gradient(ellipse at 67% 77%,rgba(185,193,181,.26) 0 15%,transparent 39%);
  animation:floorFogB 14s linear infinite alternate;
}
@keyframes floorFogA{
  from{transform:translate3d(-3%,1%,0) scaleX(1.02)}
  to{transform:translate3d(4%,-2%,0) scaleX(1.08)}
}
@keyframes floorFogB{
  from{transform:translate3d(5%,0,0) scaleX(1.06)}
  to{transform:translate3d(-4%,-3%,0) scaleX(1.12)}
}
#minimap{
  position:absolute;
  z-index:6;
  left:12px;
  top:12px;
  width:min(20vw,152px);
  height:min(20vw,152px);
  border:2px solid #7b6b53;
  background:#050505de;
  border-radius:8px;
  box-shadow:0 0 18px #000;
}
#reticle{
  position:absolute;
  z-index:6;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font:700 28px/1 monospace;
  color:#ebffad;
  text-shadow:0 1px 3px #000;
  pointer-events:none;
}
#eventFlash{
  position:absolute;
  z-index:7;
  left:50%;
  top:50%;
  width:min(92%,880px);
  transform:translate(-50%,-58%) scale(.88);
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  text-shadow:0 3px 0 #000,0 0 20px rgba(0,0,0,.45);
}
#eventFlash.visible{
  opacity:1;
  transform:translate(-50%,-58%) scale(1);
}
#eventFlash strong{
  display:block;
  font-size:clamp(1.8rem,5.5vw,4.4rem);
  line-height:.88;
  letter-spacing:.04em;
}
#eventFlash span{
  display:block;
  margin-top:8px;
  font-family:Arial,sans-serif;
  font-weight:700;
  font-size:clamp(.95rem,2.2vw,1.45rem);
}
#eventFlash.good strong{color:#d6ff52}
#eventFlash.good span{color:#f5ffd1}
#eventFlash.bad strong{color:#ffcb4d}
#eventFlash.bad span{color:#fff1c0}
#eventFlash.npc strong{color:#ff7768}
#eventFlash.npc span{color:#ffe1dc}
#eventFlash.clue strong{color:#bc8dff}
#eventFlash.clue span{color:#efe3ff}
#message{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:15px;
  transform:translateX(-50%);
  max-width:72%;
  padding:7px 12px;
  border-radius:7px;
  background:#050605c7;
  border:1px solid #394433;
  color:#f6f3dc;
  text-align:center;
  font-family:Arial,sans-serif;
  font-size:clamp(.72rem,1.45vw,.96rem);
  pointer-events:none;
}
.icon-btn{
  position:absolute;
  z-index:7;
  right:12px;
  top:12px;
  width:42px;
  height:42px;
  border:1px solid #69745f;
  background:#0b0e0ad9;
  color:#fff;
  border-radius:8px;
  font-size:1.3rem;
}
.icon-btn.second{top:62px}
.overlay{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  padding:12px;
  background:#040504e8;
  z-index:20;
  backdrop-filter:blur(8px);
}
.overlay.visible{display:grid}
#startScreen{
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 18%,rgba(176,76,255,.18),transparent 34%),
    radial-gradient(circle at 78% 22%,rgba(101,255,73,.16),transparent 34%),
    radial-gradient(circle at 50% 100%,rgba(111,255,89,.10),transparent 35%),
    linear-gradient(180deg,rgba(5,7,5,.82),rgba(4,5,4,.95));
}
#preloader{
  z-index:35;
  background:
    radial-gradient(circle at 24% 25%,rgba(162,70,255,.22),transparent 32%),
    radial-gradient(circle at 76% 20%,rgba(101,255,73,.20),transparent 30%),
    linear-gradient(180deg,rgba(2,4,3,.96),rgba(0,0,0,.98));
}
.panel{
  width:min(980px,96vw);
  border:1px solid #4a5841;
  background:linear-gradient(145deg,#171c14,#070907 65%);
  border-radius:18px;
  box-shadow:0 30px 90px #000;
}
.compact-panel{
  max-height:min(92svh,820px);
  overflow:hidden;
  padding:clamp(16px,2.6vw,28px);
}
.start-panel{
  position:relative;
  isolation:isolate;
  background-image:
    linear-gradient(115deg,rgba(7,10,8,.88),rgba(7,10,8,.64) 40%,rgba(4,4,4,.82) 100%),
    url('assets/img/hero.webp');
  background-size:cover;
  background-position:center;
  border-color:rgba(166,255,0,.35);
  box-shadow:0 30px 90px #000,0 0 0 1px rgba(111,255,89,.08),0 0 42px rgba(176,76,255,.12);
}
.start-panel::before,
.start-panel::after{
  content:"";
  position:absolute;
  inset:auto;
  pointer-events:none;
  z-index:-1;
  border-radius:999px;
  filter:blur(34px);
  opacity:.95;
}
.start-panel::before{
  left:-5%;
  bottom:-6%;
  width:42%;
  height:42%;
  background:radial-gradient(circle,rgba(111,255,89,.33) 0,rgba(111,255,89,.16) 35%,transparent 70%);
  animation:infernalGlowGreen 7s ease-in-out infinite alternate;
}
.start-panel::after{
  right:-4%;
  top:-8%;
  width:38%;
  height:38%;
  background:radial-gradient(circle,rgba(170,76,255,.34) 0,rgba(170,76,255,.16) 35%,transparent 72%);
  animation:infernalGlowPurple 6s ease-in-out infinite alternate;
}
.menu-fx,
.loader-smoke{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.smoke-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(42px);
  opacity:.46;
  animation:smokeFloat 16s ease-in-out infinite alternate;
}
.smoke-orb.purple{background:radial-gradient(circle,rgba(174,83,255,.55) 0,rgba(174,83,255,.26) 38%,transparent 72%)}
.smoke-orb.green{background:radial-gradient(circle,rgba(111,255,89,.52) 0,rgba(111,255,89,.24) 38%,transparent 74%)}
.smoke-orb.mix{background:radial-gradient(circle,rgba(206,255,92,.24) 0,rgba(166,76,255,.20) 40%,transparent 72%)}
.menu-fx .one{left:-6%;top:4%;width:36vw;height:36vw;animation-duration:20s}
.menu-fx .two{right:-8%;top:-6%;width:30vw;height:30vw;animation-duration:17s;animation-delay:-4s}
.menu-fx .three{left:18%;bottom:-8%;width:34vw;height:34vw;animation-duration:18s;animation-delay:-2s}
.menu-fx .four{right:10%;bottom:-10%;width:28vw;height:28vw;animation-duration:22s;animation-delay:-6s}
.menu-fx .five{left:44%;top:16%;width:24vw;height:24vw;animation-duration:19s;animation-delay:-8s}
.loader-smoke .a{left:8%;top:8%;width:28vw;height:28vw}
.loader-smoke .b{right:6%;top:10%;width:22vw;height:22vw;animation-delay:-3s}
.loader-smoke .c{left:14%;bottom:8%;width:24vw;height:24vw;animation-delay:-7s}
.loader-smoke .d{right:15%;bottom:2%;width:26vw;height:26vw;animation-delay:-5s}
@keyframes smokeFloat{
  0%{transform:translate3d(-3%,2%,0) scale(1)}
  50%{transform:translate3d(4%,-5%,0) scale(1.08)}
  100%{transform:translate3d(-2%,5%,0) scale(.96)}
}
@keyframes infernalGlowGreen{
  from{transform:scale(.92) translate3d(-2%,3%,0);opacity:.78}
  to{transform:scale(1.12) translate3d(3%,-2%,0);opacity:1}
}
@keyframes infernalGlowPurple{
  from{transform:scale(.94) translate3d(2%,-1%,0);opacity:.76}
  to{transform:scale(1.14) translate3d(-3%,2%,0);opacity:1}
}
@keyframes neonFlicker{
  0%,18%,22%,60%,100%{opacity:1;filter:drop-shadow(0 0 4px rgba(166,255,0,.16)) drop-shadow(0 0 18px rgba(166,255,0,.14))}
  20%,21%,62%{opacity:.86;filter:drop-shadow(0 0 2px rgba(166,255,0,.08))}
}
.eyebrow{color:var(--yellow);letter-spacing:.16em;margin:0 0 8px}
.title-chip{
  display:inline-flex;
  align-items:center;
  padding:7px 14px;
  border-radius:999px;
  margin-bottom:12px;
  background:linear-gradient(90deg,rgba(255,212,41,.20),rgba(166,255,0,.17));
  border:1px solid rgba(255,212,41,.34);
  color:#ffe66f;
  font-size:.98rem;
  letter-spacing:.14em;
  box-shadow:0 0 26px rgba(166,255,0,.08);
  text-shadow:0 0 8px rgba(255,212,41,.24);
}
.start-panel h1{
  margin:0;
  font-size:clamp(2.15rem,6.3vw,5.6rem);
  line-height:.82;
  text-shadow:0 5px 0 #000,0 0 34px rgba(166,255,0,.08);
  animation:neonFlicker 5.5s steps(1,end) infinite;
}
.start-panel h1 span{
  color:var(--acid);
  text-shadow:0 5px 0 #000,0 0 28px rgba(166,255,0,.16),0 0 38px rgba(166,255,0,.18);
}
.lead{
  max-width:760px;
  margin:.8rem 0 1rem;
  font-family:Arial,sans-serif;
  font-size:clamp(.95rem,1.8vw,1.18rem);
  color:#eef5e5;
}
.menu-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}
.menu-tags span{
  padding:7px 12px;
  border-radius:999px;
  font-size:.85rem;
  letter-spacing:.08em;
  color:#fff;
  background:linear-gradient(180deg,rgba(173,85,255,.28),rgba(81,33,130,.16));
  border:1px solid rgba(186,114,255,.34);
  box-shadow:0 0 18px rgba(176,76,255,.10);
  animation:infernalGlowPurple 8s ease-in-out infinite alternate;
}
.menu-tags span:nth-child(even){
  background:linear-gradient(180deg,rgba(120,255,89,.28),rgba(47,122,28,.16));
  border-color:rgba(120,255,89,.28);
  box-shadow:0 0 18px rgba(120,255,89,.10);
  animation:infernalGlowGreen 8s ease-in-out infinite alternate;
}
.rules-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:16px 0 18px;
}
.rules-grid>div{
  padding:12px;
  border:1px solid rgba(133,149,122,.30);
  background:linear-gradient(180deg,rgba(7,9,7,.72),rgba(7,9,7,.58));
  border-radius:12px;
  box-shadow:inset 0 0 20px rgba(0,0,0,.25),0 0 20px rgba(0,0,0,.10);
}
.rules-grid b{color:var(--yellow);display:block;margin-bottom:4px}
.rules-grid span{font-family:Arial,sans-serif;color:#e0e8d9;font-size:.92rem;line-height:1.32}
.menu-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.primary,
.back-button{
  border:0;
  padding:14px 22px;
  border-radius:11px;
  font-size:clamp(1rem,1.7vw,1.2rem);
  text-transform:uppercase;
}
.primary{
  background:linear-gradient(#caff34,#7bb800);
  color:#071000;
  box-shadow:0 5px 0 #3f6000,0 0 26px rgba(166,255,0,.16);
}
.primary:disabled{
  cursor:wait;
  background:linear-gradient(#809454,#556736);
  color:#dfe7c8;
  box-shadow:0 5px 0 #364224;
  opacity:.92;
}
.primary:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #3f6000}
.back-button{
  background:linear-gradient(180deg,#2b3127,#121611);
  color:#eef5e0;
  border:1px solid #505a4b;
}
.result-panel{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:18px;
  align-items:center;
}
.result-panel img{
  width:100%;
  max-height:min(55svh,430px);
  object-fit:cover;
  border-radius:12px;
  border:1px solid #596251;
  box-shadow:0 10px 35px #000;
}
.result-copy h2,.end-panel h2{
  font-size:clamp(1.8rem,4.4vw,4rem);
  line-height:.92;
  margin:.15em 0;
  color:var(--acid);
}
.result-copy p,.end-panel p{
  font-family:Arial,sans-serif;
  font-size:.98rem;
  line-height:1.42;
}
.effect{color:var(--yellow);font-weight:800}
.end-panel{text-align:center}
.end-panel #endStats{
  font-family:Arial,sans-serif;
  margin:16px auto;
  max-width:560px;
  padding:14px;
  background:#090b09;
  border:1px solid #384033;
  border-radius:10px;
}

.end-image{
  display:none;
  width:min(100%,720px);
  max-height:34svh;
  margin:0 auto 18px;
  object-fit:cover;
  border-radius:18px;
  border:2px solid rgba(182,199,255,.9);
  box-shadow:0 18px 40px rgba(17,40,77,.25), 0 0 0 4px rgba(255,255,255,.6) inset;
}
.end-panel.victory{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,247,255,.97)),
    repeating-linear-gradient(90deg, rgba(160,201,255,.17) 0 38px, rgba(255,255,255,.08) 38px 76px),
    repeating-linear-gradient(0deg, rgba(160,201,255,.16) 0 38px, rgba(255,255,255,.08) 38px 76px);
  border:2px solid #d6e6ff;
  box-shadow:0 32px 80px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.55) inset, 0 0 36px rgba(128,188,255,.20);
}
.end-panel.victory .end-image{display:block}
.end-panel.victory .eyebrow{color:#4675d8; text-shadow:none}
.end-panel.victory h2{color:#d2b100; text-shadow:0 2px 0 rgba(255,255,255,.8), 0 0 18px rgba(255,223,86,.22)}
.end-panel.victory p{color:#23344f}
.end-panel.victory #endStats{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(116,159,224,.55);
  color:#1f2b3c;
  box-shadow:0 8px 25px rgba(36,76,141,.08);
}
.end-panel.victory .back-button{background:linear-gradient(180deg,#f8fbff,#d9e7ff); border:1px solid #8eb1ed; color:#19325b}
.end-panel.victory .primary{box-shadow:0 5px 0 #9c8500,0 0 22px rgba(255,223,86,.20)}
.end-actions{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.loader-panel{
  position:relative;
  overflow:hidden;
  width:min(760px,94vw);
  padding:32px 24px;
  border-radius:22px;
  border:1px solid rgba(162,255,122,.22);
  background:linear-gradient(135deg,rgba(9,13,10,.88),rgba(7,8,7,.96));
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 36px rgba(166,255,0,.06);
  text-align:center;
}
.loader-panel h2{
  margin:0;
  line-height:.82;
  font-size:clamp(2rem,5vw,4.5rem);
  color:#f4f4eb;
  text-shadow:0 4px 0 #000;
}
.loader-panel h2 span{color:var(--acid)}
.loader-copy{
  position:relative;
  z-index:1;
  margin:14px auto 16px;
  max-width:640px;
  font-family:Arial,sans-serif;
  color:#e4eadf;
  font-size:1rem;
}
.loading-bar{
  position:relative;
  z-index:1;
  width:min(480px,86%);
  height:16px;
  margin:0 auto;
  border-radius:999px;
  border:1px solid rgba(171,255,120,.32);
  background:rgba(0,0,0,.4);
  overflow:hidden;
  box-shadow:inset 0 0 14px rgba(0,0,0,.55);
}
.loading-bar i{
  display:block;
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--purple),var(--acid),#f4ff93);
  box-shadow:0 0 24px rgba(176,76,255,.35),0 0 24px rgba(166,255,0,.28);
  transition:width .25s ease;
}
#mobileControls{
  display:none;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  flex:0 0 auto;
}
.pad{display:grid;gap:5px}
.move-pad{
  grid-template-columns:repeat(3,56px);
  grid-template-rows:repeat(2,52px);
}
.move-pad button:nth-child(1){grid-column:2}
.move-pad button:nth-child(2){grid-column:1;grid-row:2}
.move-pad button:nth-child(3){grid-column:2;grid-row:2}
.move-pad button:nth-child(4){grid-column:3;grid-row:2}
.pad button,.use-btn,.turn-btn{
  border:1px solid #65705c;
  background:linear-gradient(#22291e,#0f120e);
  color:#fff;
  border-radius:11px;
  min-height:52px;
  touch-action:none;
  -webkit-touch-callout:none;
}
.pad button,.use-btn{font-size:1.35rem}
.pad button.active,.use-btn:active,.use-btn.active,.turn-btn.active{
  background:#7fad17;
  color:#091000;
}
.use-btn{
  width:92px;
  height:92px;
  font-size:1rem;
  color:var(--yellow);
  font-weight:700;
  align-self:end;
}
.turn-btn{
  position:absolute;
  z-index:7;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:78px;
  font-size:1.6rem;
  display:none;
  background:linear-gradient(180deg,rgba(30,35,27,.78),rgba(10,12,9,.82));
  color:#eef2df;
}
.turn-left{left:10px}
.turn-right{right:10px}
@media(max-width:900px){
  .compact-panel{padding:18px}
  .start-panel h1{font-size:clamp(2rem,10.5vw,4.4rem)}
  .result-panel{grid-template-columns:1fr;gap:12px}
}
@media(max-width:780px){
  #app{padding:6px}
  #hud{grid-template-columns:.8fr 1.6fr .8fr;gap:4px}
  .hud-block{padding:5px 6px;border-radius:7px}
  .hud-block strong{font-size:1rem}
  .resistance strong{font-size:.9rem}
  #minimap{width:96px;height:96px;left:7px;top:7px}
  #message{bottom:6px;max-width:66%;font-size:.7rem;padding:5px 7px}
  .icon-btn{width:36px;height:36px;right:7px;top:7px}
  .icon-btn.second{top:49px}
  #mobileControls{
    display:flex;
    position:absolute;
    left:8px;
    right:8px;
    bottom:max(84px,env(safe-area-inset-bottom,0px) + 74px);
    z-index:8;
    pointer-events:none;
  }
  #mobileControls > *{pointer-events:auto}
  .turn-btn{display:grid;place-items:center}
  .turn-left{left:6px}
  .turn-right{right:6px}
  .rules-grid{grid-template-columns:1fr;gap:8px;margin:14px 0 16px}
  .lead{font-size:.94rem;line-height:1.35}
  .rules-grid span{font-size:.88rem}
  .primary{width:100%}
  .compact-panel{max-height:94svh;padding:16px}
  .result-panel img{max-height:30svh}
  .end-panel h2,.result-copy h2{font-size:clamp(1.6rem,8vw,2.7rem)}
  .title-chip{font-size:.88rem}
  .menu-tags span{font-size:.76rem;padding:6px 10px}
}
@media(max-height:760px){
  .compact-panel{padding:16px;max-height:94svh}
  .start-panel h1{font-size:clamp(1.9rem,5.5vw,4.3rem)}
  .lead{margin:.55rem 0 .85rem;font-size:.95rem}
  .rules-grid{margin:12px 0 14px}
  .rules-grid>div{padding:10px}
  .primary{padding:12px 18px}
}

@media(max-width:780px){
  #eventFlash{width:min(96%,92vw); transform:translate(-50%,-50%) scale(.92)}
  #eventFlash.visible{transform:translate(-50%,-50%) scale(1)}
  #eventFlash strong{font-size:clamp(1.5rem,8vw,2.7rem)}
  #eventFlash span{font-size:clamp(.88rem,3.2vw,1.05rem)}
}

/* Trucchi VirusChat */
.cheat-panel{
  position:absolute;
  z-index:16;
  top:10px;
  left:50%;
  transform:translate(-50%,-18px) scale(.96);
  width:min(720px,calc(100% - 150px));
  display:grid;
  grid-template-columns:auto 1fr 42px;
  gap:9px;
  align-items:center;
  padding:9px 10px 9px 13px;
  border-radius:12px;
  border:1px solid rgba(180,120,255,.72);
  background:linear-gradient(180deg,rgba(28,12,42,.96),rgba(7,8,8,.97));
  box-shadow:0 12px 38px rgba(0,0,0,.65),0 0 26px rgba(164,69,255,.20),inset 0 0 18px rgba(121,255,72,.05);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.cheat-panel.open{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
}
.cheat-label{
  color:#c59aff;
  letter-spacing:.12em;
  font-size:.86rem;
  white-space:nowrap;
  text-shadow:0 0 12px rgba(181,95,255,.35);
}
#cheatInput{
  min-width:0;
  height:40px;
  border:1px solid rgba(130,255,92,.38);
  border-radius:8px;
  outline:none;
  padding:0 12px;
  background:rgba(0,0,0,.65);
  color:#e9ffd9;
  font:700 1rem/1 Arial,sans-serif;
  box-shadow:inset 0 0 16px rgba(0,0,0,.65);
}
#cheatInput:focus{border-color:#9cff4c;box-shadow:0 0 0 2px rgba(156,255,76,.12),inset 0 0 16px rgba(0,0,0,.65)}
#cheatClose{
  width:40px;height:40px;border-radius:8px;border:1px solid #775092;
  background:#24122f;color:#fff;font-size:1.35rem;
}
.cheat-dir{
  position:absolute;
  z-index:15;
  top:70px;
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(780px,92%);
  max-height:64%;
  overflow:auto;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(7,6,9,.94);
  border:1px solid rgba(173,97,255,.52);
  color:#f4f0ff;
  font:600 .92rem/1.45 Arial,sans-serif;
  box-shadow:0 20px 50px rgba(0,0,0,.75),0 0 30px rgba(169,74,255,.12);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.cheat-dir.visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.cheat-dir b{color:#a9ff51}
.cheat-dir .cheat-title{display:block;color:#d7a8ff;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:1.3rem;letter-spacing:.08em;margin-bottom:6px}
.goal-star{
  position:absolute;
  z-index:8;
  top:13%;
  left:50%;
  display:none;
  transform:translateX(-50%);
  color:#fff36a;
  font-size:clamp(2.1rem,5vw,4.4rem);
  line-height:1;
  pointer-events:none;
  text-shadow:0 0 4px #fff,0 0 12px #ffe600,0 0 32px #ffc400,0 0 60px rgba(255,194,0,.62);
  animation:goalStarPulse .75s ease-in-out infinite alternate;
}
.goal-star.visible{display:block}
@keyframes goalStarPulse{from{transform:translateX(-50%) scale(.82) rotate(-8deg);opacity:.74}to{transform:translateX(-50%) scale(1.18) rotate(8deg);opacity:1}}
@media(max-width:780px){
  .cheat-panel{top:6px;width:calc(100% - 16px);grid-template-columns:1fr 40px;padding:8px}
  .cheat-label{grid-column:1/-1;font-size:.72rem;margin-left:3px}
  #cheatInput{height:38px;font-size:16px}
  #cheatClose{height:38px;width:38px}
  .cheat-dir{top:98px;max-height:54%;font-size:.82rem}
  .goal-star{top:15%;font-size:clamp(2rem,12vw,3.5rem)}
}