/* ==========================================================================
   WHO DID THE CRIME? — Kuwait Codes Detective Academy
   Self-contained: system font stacks only, all art inline SVG/CSS.
   ========================================================================== */

:root{
  --night-1:#070a12;
  --night-2:#0d1322;
  --night-3:#131c31;
  --asphalt:#11151f;
  --ink:#eef1f8;
  --dim:#93a0b8;
  --gold:#f5c518;
  --gold-deep:#d9a400;
  --danger:#ff5d6c;
  --ok:#3ddc84;
  --note:#ffe583;
  --note-edge:#e3c14f;
  --paper:#f4ead2;
  --font-display:"Arial Black","Arial Bold",Impact,system-ui,sans-serif;
  --font-body:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-type:"Courier New",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1400px 700px at 50% -12%, #1c2742 0%, transparent 55%),
    radial-gradient(1000px 550px at 12% 108%, #16223c 0%, transparent 50%),
    radial-gradient(1000px 550px at 88% 108%, #101a30 0%, transparent 50%),
    var(--night-1);
  min-height:100vh;
  display:flex;flex-direction:column;
  overflow-x:hidden;
}

/* ---------- atmosphere overlays ---------- */
.fx-grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;
  transform:translateZ(0); /* rasterize the feTurbulence tile once, not per frame */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.fx-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:59;
  background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ==========================================================================
   HUD
   ========================================================================== */
.hud{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,3.5vw,36px);
  background:linear-gradient(180deg, rgba(7,10,18,.92), rgba(7,10,18,.55) 80%, transparent);
}
.hud-brand{display:flex;align-items:center;gap:14px;min-width:0}
.hud-badge{width:46px;height:46px;flex:0 0 auto;filter:drop-shadow(0 4px 10px rgba(245,197,24,.25))}
.hud-badge svg{width:100%;height:100%}
.hud h1{
  font-family:var(--font-display);
  font-size:clamp(17px,2.6vw,26px);
  letter-spacing:2.5px;line-height:1;
  text-shadow:0 2px 0 #000, 0 0 26px rgba(245,197,24,.18);
}
.hud h1 .q{color:var(--gold)}
.hud-sub{color:var(--dim);font-size:clamp(10.5px,1.3vw,12.5px);letter-spacing:1px;margin-top:5px}
.hud-sub b{color:var(--gold)}
.hud-status{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.hud-counter{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;padding:8px 16px;
  backdrop-filter:blur(6px);
}
.hud-counter-label{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)}
.hud-count{font-family:var(--font-type);font-weight:700;font-size:16px}
.hud-count b{color:var(--gold);font-size:20px}
.pips{display:flex;gap:6px}
.pip{
  width:10px;height:10px;border-radius:50%;
  background:#232c41;border:1px solid #35415f;
  transition:all .35s ease;
}
.pip.lit{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 10px rgba(245,197,24,.7);
  transform:scale(1.15);
}
.btn-reset{
  font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.8px;
  color:var(--danger);background:rgba(255,93,108,.07);
  border:1px solid rgba(255,93,108,.35);border-radius:999px;
  padding:9px 16px;cursor:pointer;transition:all .15s;
}
.btn-reset:hover{background:rgba(255,93,108,.16);box-shadow:0 0 14px rgba(255,93,108,.2)}

/* ==========================================================================
   SCENE
   ========================================================================== */
.scene-wrap{flex:1;display:flex;padding:6px clamp(10px,2.5vw,28px) 0;z-index:5}
.scene{
  position:relative;flex:1;min-height:clamp(430px,58vh,640px);
  border-radius:18px;overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 30%, #1a2440 0%, transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(255,255,255,.016) 118px 120px),
    repeating-linear-gradient(0deg, transparent 0 118px, rgba(255,255,255,.016) 118px 120px),
    linear-gradient(180deg, var(--night-2) 0%, var(--asphalt) 70%, #0a0d15 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 40px 90px rgba(0,0,0,.5) inset, 0 10px 50px rgba(0,0,0,.45);
}

/* --- floodlights --- */
.floodlight{
  position:absolute;top:-12%;width:52%;height:120%;
  pointer-events:none;mix-blend-mode:screen;opacity:.8;
  animation:flicker 7s infinite;
  will-change:opacity;
}
.fl-left{
  left:-8%;
  background:conic-gradient(from 128deg at 8% 0%, transparent 0deg, rgba(180,205,255,.15) 14deg, rgba(180,205,255,.05) 30deg, transparent 42deg);
}
.fl-right{
  right:-8%;
  background:conic-gradient(from 196deg at 92% 0%, transparent 0deg, rgba(255,226,160,.05) 12deg, rgba(255,226,160,.14) 28deg, transparent 42deg);
  animation-delay:2.3s;
}
.light-pool{
  position:absolute;left:50%;top:52%;width:60%;height:52%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(190,210,255,.10) 0%, transparent 70%);
}
@keyframes flicker{
  0%,100%{opacity:.8} 3%{opacity:.55} 5%{opacity:.85}
  47%{opacity:.8} 49%{opacity:.6} 50%{opacity:.82} 82%{opacity:.75}
}

/* --- police tape --- */
.tape{
  position:absolute;left:-4%;width:108%;height:44px;
  display:flex;align-items:center;overflow:hidden;
  background:repeating-linear-gradient(-45deg, var(--gold) 0 26px, #101010 26px 52px);
  box-shadow:0 8px 22px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  z-index:8;
  will-change:transform; /* keep the infinite sway on its own compositor layer */
}
.tape::before{
  content:"";position:absolute;inset:5px 0;
  background:var(--gold);
}
.tape-text{
  position:relative;white-space:nowrap;
  font-family:var(--font-display);font-size:17px;letter-spacing:3px;color:#0d0d0d;
  width:200%;animation:tape-scroll 60s linear infinite;
  will-change:transform;
}
.tape-top{top:26px;transform:rotate(-2.4deg);animation:sway 9s ease-in-out infinite}
.tape-bottom{bottom:30px;transform:rotate(1.6deg);animation:sway2 11s ease-in-out infinite}
@keyframes tape-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sway{0%,100%{transform:rotate(-2.4deg) translateY(0)}50%{transform:rotate(-2.1deg) translateY(3px)}}
@keyframes sway2{0%,100%{transform:rotate(1.6deg) translateY(0)}50%{transform:rotate(1.9deg) translateY(-3px)}}

/* --- chalk outline --- */
.chalk{
  position:absolute;left:50%;top:52%;width:clamp(190px,24vw,300px);
  transform:translate(-50%,-50%) rotate(6deg);
  filter:drop-shadow(0 0 14px rgba(233,237,245,.12));
}

/* --- cones --- */
.cone{position:absolute;width:clamp(44px,5.5vw,72px);filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.cone-1{left:7%;bottom:14%}
.cone-2{right:9%;top:20%;width:clamp(36px,4.2vw,56px)}

/* --- clue decals --- */
.decal{position:absolute;pointer-events:none}
.decal-blood{left:17%;top:32%;width:clamp(70px,9vw,120px)}
.decal-wrench{right:16%;bottom:26%;width:clamp(84px,10vw,140px)}
.decal-prints{left:31%;bottom:9%;width:clamp(48px,6vw,80px);transform:rotate(24deg)}

/* --- numbered tents --- */
.tent{
  position:absolute;z-index:9;
  width:52px;padding:5px 0 4px;text-align:center;
  background:linear-gradient(180deg,#ffdf49,var(--gold-deep));
  clip-path:polygon(50% 0, 100% 78%, 100% 100%, 0 100%, 0 78%);
  color:#161000;filter:drop-shadow(0 5px 6px rgba(0,0,0,.5));
}
.tent span{display:block;font-family:var(--font-display);font-size:19px;line-height:1;margin-top:12px}
.tent small{display:block;font-size:6.5px;font-weight:700;letter-spacing:1.5px}
.tent-1{left:23.5%;top:44%;transform:rotate(-7deg)}
.tent-2{right:24%;bottom:37%;transform:rotate(5deg)}
.tent-3{left:38.5%;bottom:20%;transform:rotate(-3deg)}

/* --- evidence sticky-note cards --- */
.cards{position:absolute;inset:0;z-index:10}
.card{
  position:absolute;width:clamp(150px,16.5vw,196px);
  padding:34px 16px 16px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg,#fff0a1 0%,var(--note) 60%,#f4d95e 100%);
  border:none;border-radius:3px;
  color:#332a05;font-family:var(--font-body);
  box-shadow:0 14px 26px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .2s;
}
.card::before{ /* tape strip on top */
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:74px;height:22px;background:rgba(240,240,235,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.card::after{ /* folded corner */
  content:"";position:absolute;right:0;bottom:0;
  border-style:solid;border-width:0 0 22px 22px;
  border-color:transparent transparent rgba(0,0,0,.14) transparent;
}
.card-1{left:9%;top:22%;transform:rotate(-4deg)}
.card-2{right:6.5%;top:38%;transform:rotate(3.4deg)}
.card-3{left:44%;bottom:9%;transform:rotate(-2deg)}
.card:hover:not(.is-locked){
  transform:rotate(0) translateY(-7px) scale(1.04);
  box-shadow:0 26px 44px rgba(0,0,0,.6), 0 0 0 2px var(--gold), 0 0 32px rgba(245,197,24,.28);
  z-index:12;
}
.card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.card-kicker{
  display:block;font-size:9px;font-weight:800;letter-spacing:2.4px;color:#8a6d00;
}
.card-title{
  display:block;font-family:var(--font-display);font-size:clamp(17px,1.9vw,22px);
  letter-spacing:1px;margin:4px 0 2px;
}
.card-tag{
  display:inline-block;margin:2px 0 8px;padding:2px 10px;border-radius:999px;
  background:#161000;color:var(--gold);font-size:9.5px;font-weight:800;letter-spacing:2px;
}
.card-state{
  display:block;font-family:var(--font-type);font-size:11.5px;font-weight:700;
  color:#5c4a08;min-height:16px;
}
/* locked */
.card.is-locked{
  cursor:not-allowed;
  background:linear-gradient(180deg,#d9d9d2 0%,#c9c9c1 60%,#b9b9b0 100%);
  color:#4c4c46;filter:saturate(.35) brightness(.82);
}
.card.is-locked .card-kicker{color:#6b6b62}
.card.is-locked .card-tag{background:#3a3a34;color:#cfcfc6}
.card.is-locked .card-state{color:#5c5c53}
.card-lock{
  position:absolute;top:-14px;right:-12px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:#20242f;border:2px solid #444d63;box-shadow:0 4px 10px rgba(0,0,0,.5);
}
/* solved */
.card.is-solved{
  background:linear-gradient(180deg,#d8ffe9 0%,#b9f4d2 60%,#9fe8bf 100%);
  cursor:default;
}
.card.is-solved .card-kicker{color:#1c7a45}
.card.is-solved .card-state{color:#136336}
.card.is-solved .card-tag{background:#0d3b23;color:#7dfab0}
.card-check{
  position:absolute;top:-14px;right:-12px;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:19px;color:#04240f;
  background:var(--ok);border:2px solid #d8ffe9;box-shadow:0 4px 12px rgba(61,220,132,.5);
  animation:pop-in .4s cubic-bezier(.2,1.6,.4,1);
}
/* sealed (evidence 3 placeholder) */
.card.is-sealed{
  background:linear-gradient(180deg,#e7d6ff 0%,#d3b9f6 60%,#bd9df0 100%);
  color:#2f1b4d;cursor:pointer;filter:none;
}
.card.is-sealed .card-kicker{color:#6a3fa8}
.card.is-sealed .card-tag{background:#2a1747;color:#d9beff}
.card.is-sealed .card-state{color:#4b2b7a}
.card.is-sealed.is-locked{cursor:not-allowed;filter:saturate(.3) brightness(.8)}
@keyframes pop-in{from{transform:scale(0)}to{transform:scale(1)}}

/* card unlock moment */
.card.just-unlocked{animation:unlock-glow 1.4s ease}
@keyframes unlock-glow{
  0%{box-shadow:0 0 0 0 rgba(245,197,24,.0)}
  35%{box-shadow:0 0 0 6px rgba(245,197,24,.55), 0 0 60px rgba(245,197,24,.5)}
  100%{box-shadow:0 14px 26px rgba(0,0,0,.5)}
}

/* ==========================================================================
   CODE TRAY
   ========================================================================== */
.tray{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;
  padding:16px clamp(14px,3vw,32px) 20px;
}
.tray-label{
  font-family:var(--font-display);font-size:13px;letter-spacing:3px;color:var(--dim);
}
.tray-slots{display:flex;gap:8px}
.slot{
  min-width:92px;text-align:center;padding:9px 12px;
  font-family:var(--font-type);font-weight:700;font-size:15px;letter-spacing:1px;
  color:#5a6580;
  background:rgba(255,255,255,.04);border:1px dashed #33405e;border-radius:9px;
}
.slot i{font-style:normal;filter:blur(2.5px);opacity:.6}
.slot.is-filled{
  color:var(--gold);border:1px solid var(--gold-deep);
  background:rgba(245,197,24,.08);
  text-shadow:0 0 14px rgba(245,197,24,.45);
  animation:pop-in .35s cubic-bezier(.2,1.5,.4,1);
}
.tray-hint{font-size:11.5px;color:#5a6580;letter-spacing:.4px}

/* ==========================================================================
   MODAL — the case folder
   ========================================================================== */
.overlay{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(4,6,12,.72);backdrop-filter:blur(7px);
  animation:fade-in .22s ease;
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.folder{
  position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;
  background:linear-gradient(180deg,#fdf6e3 0%,var(--paper) 100%);
  color:#241d0c;border-radius:6px 14px 14px 14px;
  padding:30px 32px 30px;
  box-shadow:0 50px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5);
  animation:folder-in .32s cubic-bezier(.2,1.3,.4,1);
}
@keyframes folder-in{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.folder-tab{
  position:absolute;top:-15px;left:22px;
  background:#c9a84c;color:#241d0c;border-radius:6px 6px 0 0;
  font-family:var(--font-display);font-size:11px;letter-spacing:2.5px;
  padding:6px 18px 4px;box-shadow:0 -2px 6px rgba(0,0,0,.25);
}
.folder-close{
  position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid #cbb98a;background:transparent;color:#7a6a3d;font-size:15px;
  cursor:pointer;transition:all .15s;
}
.folder-close:hover{background:#241d0c;color:var(--paper)}
.folder-kicker{
  display:block;font-family:var(--font-type);font-weight:700;font-size:12px;
  letter-spacing:2.5px;color:#8f7423;text-transform:uppercase;
}
.folder h2{
  font-family:var(--font-display);font-size:clamp(20px,3.4vw,27px);
  letter-spacing:1px;margin:8px 0 2px;
}
.folder-question{
  font-family:var(--font-type);font-size:15px;font-weight:700;line-height:1.6;
  margin:16px 0;padding-bottom:16px;border-bottom:2px dashed #d6c691;
}
.folder-hint{
  display:flex;gap:12px;align-items:flex-start;
  background:linear-gradient(180deg,#fff3b5,#ffe583);
  border-radius:3px;padding:13px 16px;margin:14px 0;
  box-shadow:0 5px 12px rgba(0,0,0,.14);
  transform:rotate(-.5deg);
  font-size:13.5px;line-height:1.55;color:#4d3d05;
}
.folder-hint b{
  font-family:var(--font-display);font-size:10px;letter-spacing:2px;
  background:#241d0c;color:var(--note);padding:3px 8px;border-radius:3px;flex:0 0 auto;
  margin-top:1px;
}
.folder-artifact{
  display:inline-flex;align-items:center;gap:8px;margin:4px 0 6px;
  font-weight:700;font-size:14px;color:#1a4f8f;text-decoration:none;
  border:2px solid #1a4f8f;border-radius:9px;padding:10px 16px;
  transition:all .15s;
}
.folder-artifact:hover{background:#1a4f8f;color:#fdf6e3}
.folder-form{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.folder-form input{
  flex:1;min-width:200px;
  font-family:var(--font-type);font-weight:700;font-size:15px;
  padding:12px 14px;border-radius:9px;border:2px solid #b8a566;background:#fffdf4;
  color:#241d0c;outline:none;transition:border-color .15s, box-shadow .15s;
}
.folder-form input:focus{border-color:#8f7423;box-shadow:0 0 0 3px rgba(143,116,35,.18)}
.folder-form button{
  font-family:var(--font-body);font-weight:800;font-size:13.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:#171000;cursor:pointer;
  background:linear-gradient(180deg,#ffd94a,var(--gold-deep));
  border:none;border-radius:9px;padding:12px 20px;
  box-shadow:0 6px 16px rgba(217,164,0,.35);
  transition:transform .12s, filter .12s;
}
.folder-form button:hover{filter:brightness(1.07)}
.folder-form button:active{transform:translateY(1px)}
.folder-form button:disabled{opacity:.55;cursor:wait}

/* stamps */
.stamp{
  font-family:var(--font-display);letter-spacing:3px;
  border:4px solid currentColor;border-radius:8px;padding:6px 16px;
  text-transform:uppercase;pointer-events:none;
}
.stamp-no{
  position:absolute;right:26px;bottom:88px;color:#c22333;font-size:20px;
  transform:rotate(-14deg) scale(0);opacity:0;
}
.stamp-no.show{animation:stamp-hit .55s cubic-bezier(.2,1.6,.4,1) forwards}
.stamp-yes{
  display:inline-block;color:#177a43;font-size:22px;
  transform:rotate(-8deg);
  animation:stamp-hit .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes stamp-hit{
  0%{transform:rotate(-14deg) scale(2.6);opacity:0}
  60%{transform:rotate(-11deg) scale(.95);opacity:1}
  100%{transform:rotate(-12deg) scale(1);opacity:1}
}

/* shake on wrong answer */
.folder.shake{animation:shake .45s ease}
@keyframes shake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)}
}

/* reveal (success view) */
.reveal{text-align:center;padding-top:8px}
.reveal-label{
  font-family:var(--font-type);font-weight:700;font-size:12px;letter-spacing:2px;
  color:#177a43;margin:14px 0 12px;
}
.fragment-chip{
  display:inline-block;position:relative;
  font-family:var(--font-type);font-weight:700;font-size:clamp(22px,5vw,30px);letter-spacing:2px;
  color:#241d0c;background:#fff;
  padding:14px 26px;margin-bottom:16px;
  clip-path:polygon(2% 8%, 12% 0, 30% 6%, 52% 0, 74% 7%, 90% 2%, 100% 12%, 97% 55%, 100% 88%, 84% 100%, 60% 94%, 38% 100%, 16% 95%, 0 100%, 3% 60%);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  animation:frag-reveal .7s cubic-bezier(.2,1.4,.4,1);
}
@keyframes frag-reveal{
  0%{transform:scale(.4) rotate(-6deg);opacity:0;filter:blur(6px)}
  100%{transform:none;opacity:1;filter:none}
}
.btn-continue{
  display:inline-block;font-weight:800;font-size:13.5px;letter-spacing:1px;
  color:#fdf6e3;background:#241d0c;border:none;border-radius:9px;
  padding:12px 22px;cursor:pointer;transition:all .15s;
}
.btn-continue:hover{background:#3d3218;transform:translateY(-1px)}

/* sealed view */
.sealed{text-align:center;padding:10px 0 4px}
.sealed-seal{font-size:44px;margin-bottom:8px}
.sealed-title{
  font-family:var(--font-display);font-size:16px;letter-spacing:2px;color:#5b3a8f;
}
.sealed-text{font-size:14px;line-height:1.65;color:#4a4130;margin:10px 0 18px}

/* ==========================================================================
   FINALE
   ========================================================================== */
.finale{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,6,12,.88);backdrop-filter:blur(9px);
  animation:fade-in .35s ease;
}
.finale-card{
  position:relative;text-align:center;width:min(620px,100%);
  background:linear-gradient(180deg,#141b2e,#0d1322);
  border:1px solid rgba(245,197,24,.35);border-radius:20px;
  padding:44px 34px 38px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 60px 140px rgba(0,0,0,.8), 0 0 90px rgba(245,197,24,.12);
  animation:folder-in .45s cubic-bezier(.2,1.3,.4,1);
}
.finale-badge{font-size:52px;animation:badge-bounce 1.1s cubic-bezier(.2,1.6,.4,1)}
@keyframes badge-bounce{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.finale h2{
  font-family:var(--font-display);font-size:clamp(28px,6vw,44px);letter-spacing:4px;
  color:var(--gold);text-shadow:0 0 34px rgba(245,197,24,.45);margin:10px 0 8px;
}
.finale-sub{color:var(--dim);font-size:14.5px;margin-bottom:22px}
.finale-code{
  font-family:var(--font-type);font-weight:700;font-size:clamp(19px,3.8vw,28px);letter-spacing:1.5px;
  color:var(--ink);background:#070a12;
  border:1px dashed #3b4964;border-radius:12px;padding:18px 14px;
  user-select:all;word-break:break-all;
  box-shadow:0 0 30px rgba(245,197,24,.1) inset;
}
.finale-actions{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.btn-copy{
  font-weight:800;font-size:14px;letter-spacing:1px;color:#171000;cursor:pointer;
  background:linear-gradient(180deg,#ffd94a,var(--gold-deep));
  border:none;border-radius:10px;padding:13px 24px;
  box-shadow:0 8px 22px rgba(217,164,0,.35);transition:transform .12s, filter .12s;
}
.btn-copy:hover{filter:brightness(1.07)} .btn-copy:active{transform:translateY(1px)}

/* confetti */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{
  position:absolute;top:-4vh;width:9px;height:15px;border-radius:2px;opacity:.9;
  animation:confetti-fall linear infinite;
}
@keyframes confetti-fall{
  0%{transform:translateY(-6vh) rotate(0) rotateY(0)}
  100%{transform:translateY(106vh) rotate(720deg) rotateY(540deg)}
}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:95;
  background:#1c2233;color:var(--ink);font-size:14px;font-weight:600;
  border:1px solid #34405f;border-left:4px solid var(--danger);
  border-radius:11px;padding:13px 20px;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  animation:toast-in .3s cubic-bezier(.2,1.4,.4,1);
  max-width:min(440px,92vw);
}
.toast.good{border-left-color:var(--ok)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .hud{flex-direction:column;align-items:flex-start;gap:10px}
  .hud-status{width:100%;justify-content:space-between}
}
@media (max-width:720px){
  .scene{min-height:0;height:auto;padding:86px 14px 64px;overflow:visible}
  .chalk{width:170px;top:44%}
  .cards{position:static;display:grid;grid-template-columns:1fr;gap:26px;justify-items:center}
  .card,.card-1,.card-2,.card-3{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:min(300px,86vw)}
  .card-1{transform:rotate(-1.6deg)} .card-2{transform:rotate(1.4deg)} .card-3{transform:rotate(-1deg)}
  .decal-blood{left:6%;top:20%} .decal-wrench{right:4%;bottom:36%} .decal-prints{left:8%;bottom:8%}
  .tent-1{left:6%;top:38%} .tent-2{right:5%;bottom:52%} .tent-3{left:12%;bottom:22%}
  .cone-2{top:12%}
  .stamp-no{bottom:auto;top:40%}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .tape-text{animation:none}
  .confetti{display:none}
}