/* PROMPT RAIDERS — pixel/voxel hacker theme. No CDN: fonts are bundled in /fonts. */
@font-face{font-family:"PressStart";src:url("../fonts/PressStart2P-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"VT323";src:url("../fonts/VT323-Regular.ttf") format("truetype");font-display:swap}

:root{--bg:#081410;--panel:#0F1E18;--panel2:#13261E;--line:#1F3D30;--neon:#00FF9C;--cyan:#36E3FF;--red:#FF2E54;--amber:#FFC53D;--violet:#B388FF;--white:#EAFBF3;--mut:#86A096;--dim:#5C746A}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--white);font-family:"VT323","Consolas",ui-monospace,Menlo,monospace;font-size:19px;
 background-image:radial-gradient(rgba(0,255,156,.05) 1px,transparent 1px);background-size:22px 22px;
 -webkit-font-smoothing:none;image-rendering:pixelated}
.wrap{max-width:1100px;margin:0 auto;padding:18px}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0}to{opacity:1}}
.center{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}

/* display font for headings */
h1.logo,.kick,.btn,.vault .num,.bhead,.clab,.state,.board-list .pos{font-family:"PressStart","Arial Black",sans-serif}
h1.logo{font-size:clamp(26px,6.4vw,58px);letter-spacing:1px;margin:0;line-height:1.25}
h1.logo .a{color:var(--neon)} h1.logo .b{color:var(--cyan)}
.tag{color:var(--mut);max-width:660px;font-size:21px}
.kick{color:var(--neon);font-weight:bold;letter-spacing:2px;font-size:11px}

/* glitch title */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;clip-path:inset(0);opacity:.7}
.glitch::before{color:var(--red);animation:gl1 2.6s infinite linear alternate}
.glitch::after{color:var(--cyan);animation:gl2 3.4s infinite linear alternate}
@keyframes gl1{0%,92%,100%{transform:translate(0);clip-path:inset(0 0 100% 0)}93%{transform:translate(-3px,1px);clip-path:inset(20% 0 40% 0)}96%{transform:translate(2px,-1px);clip-path:inset(60% 0 10% 0)}}
@keyframes gl2{0%,90%,100%{transform:translate(0);clip-path:inset(0 0 100% 0)}91%{transform:translate(3px,-1px);clip-path:inset(10% 0 70% 0)}95%{transform:translate(-2px,1px);clip-path:inset(50% 0 20% 0)}}

.btn{cursor:pointer;border:2px solid var(--neon);background:transparent;color:var(--neon);
 font-weight:bold;padding:13px 20px;border-radius:8px;letter-spacing:1px;text-transform:uppercase;font-size:12px;transition:.12s}
.btn:hover{background:var(--neon);color:var(--bg)}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.btn.cyan{border-color:var(--cyan);color:var(--cyan)} .btn.cyan:hover{background:var(--cyan);color:var(--bg)}
.btn.small{padding:8px 11px;font-size:10px}
.btn:disabled{opacity:.4;cursor:not-allowed}
input,textarea{font-family:"VT323",monospace;background:var(--panel2);border:1px solid var(--line);color:var(--white);border-radius:8px;padding:12px;font-size:21px}
input:focus,textarea:focus{outline:2px solid var(--cyan)}
#handle{width:300px;text-align:center}

.hud{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 4px;margin-bottom:12px;flex-wrap:wrap;gap:8px}
.hud .meta{color:var(--dim);font-size:17px;letter-spacing:1px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hud b{color:var(--neon)}

/* hub grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
.vault{position:relative;background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--neon);border-radius:12px;
 padding:16px;cursor:pointer;transition:.12s;min-height:158px;display:flex;flex-direction:column;gap:6px}
.vault:hover{transform:translateY(-3px)}
.vault:focus-visible{outline:3px solid var(--cyan)}
.vault .num{color:var(--neon);font-size:10px;letter-spacing:1px}
.vault .nm{font-family:"PressStart",sans-serif;font-size:13px;line-height:1.4}
.vault .sp{font-size:40px;line-height:1}
.vault .tech{color:var(--mut);font-size:16px}
.vault.locked{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.vault.cleared{border-top-color:var(--amber)}
.vault .done{position:absolute;top:10px;right:12px;color:var(--amber);font-weight:bold}

/* vault play */
.chatwrap{display:grid;grid-template-columns:1fr;gap:12px}
.stage{display:flex;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.guardian{width:88px;height:88px;flex:0 0 88px;display:flex;align-items:center;justify-content:center;border-radius:12px;
 background:radial-gradient(circle at 50% 40%,rgba(0,255,156,.18),transparent 70%);box-shadow:inset 0 0 0 2px var(--line);transition:.2s}
.guardian .sprite{font-size:54px;line-height:1;animation:bob 2.6s ease-in-out infinite}
.guardian[data-state="nervous"]{box-shadow:inset 0 0 0 2px var(--amber);background:radial-gradient(circle at 50% 40%,rgba(255,197,61,.22),transparent 70%)}
.guardian[data-state="nervous"] .sprite{animation:bob 1.1s ease-in-out infinite}
.guardian[data-state="rattled"]{box-shadow:inset 0 0 0 2px var(--red);background:radial-gradient(circle at 50% 40%,rgba(255,46,84,.28),transparent 70%)}
.guardian[data-state="rattled"] .sprite{animation:jitter .12s steps(2) infinite}
.guardian[data-state="breached"]{filter:grayscale(1) brightness(.6)}
.guardian[data-state="breached"] .sprite{animation:shatter .6s forwards}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes jitter{0%{transform:translate(-2px,1px) rotate(-2deg)}100%{transform:translate(2px,-1px) rotate(2deg)}}
@keyframes shatter{0%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(.4) rotate(25deg);opacity:.15}}
.gmeta{flex:1;min-width:0}
.gmeta .nm{font-family:"PressStart",sans-serif;font-size:16px;line-height:1.4}
.gmeta .ps{color:var(--mut);font-size:17px}
.toolchip{display:inline-block;margin-top:6px;background:#0a2230;border:1px solid var(--cyan);color:var(--cyan);border-radius:6px;padding:3px 8px;font-size:14px}
.toolchip.fire{animation:toolfire .5s;border-color:var(--neon);color:var(--neon)}
@keyframes toolfire{0%,100%{transform:scale(1)}40%{transform:scale(1.12);box-shadow:0 0 18px var(--neon)}}
.composure{margin-top:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clab{font-size:9px;color:var(--dim);letter-spacing:1px}
.composure .bar{flex:1;min-width:120px;height:12px;background:#0a0f12;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.composure .bar i{display:block;height:100%;width:100%;background:var(--neon);transition:width .35s ease,background .35s ease}
.state{font-size:9px;letter-spacing:1px;color:var(--mut);white-space:nowrap}
.state .dot{font-size:12px}

.log{background:#0A0F12;border:1px solid var(--line);border-radius:12px;padding:14px;height:42vh;min-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:9px 13px;border-radius:10px;white-space:pre-wrap;line-height:1.35;font-size:20px}
.msg.you{align-self:flex-end;background:#13314a;color:#dcefff;border:1px solid #1d4a6e}
.msg.bot{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.msg.hit{border-color:var(--neon);box-shadow:0 0 0 1px var(--neon)}
.msg.blocked{border-color:var(--red);color:#ffd7df}
.msg.sys{align-self:center;color:var(--amber);font-size:16px;background:none;border:1px dashed var(--line);border-radius:8px}
.caret::after{content:"▋";color:var(--neon);animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.row{display:flex;gap:10px}
.row input{flex:1}
.docp{background:var(--panel2);border:1px dashed var(--amber);border-radius:10px;padding:10px}
.docp textarea{width:100%;height:92px;resize:vertical}
.docp .lbl{color:var(--amber);font-size:15px;font-weight:bold;letter-spacing:1px;margin-bottom:6px}

/* modal / debrief */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:18px;z-index:20}
.modal.show{display:flex}
.card{background:var(--panel);border:1px solid var(--neon);border-radius:16px;max-width:640px;width:100%;padding:24px;box-shadow:0 0 40px rgba(0,255,156,.15);max-height:92vh;overflow-y:auto}
.card h2{font-family:"PressStart",sans-serif;font-size:18px;margin:.3em 0;color:var(--neon)}
.card .flag{font-family:"PressStart",sans-serif;font-size:18px;color:var(--amber);letter-spacing:1px;margin:10px 0}
.card .lab{color:var(--cyan);font-weight:bold;letter-spacing:1px;font-size:14px;margin-top:12px}
.card p{color:var(--white);margin:4px 0;font-size:19px}
.card .kick{font-size:11px}
.card .newbadge{display:inline-flex;align-items:center;gap:8px;background:#1b1605;border:1px solid var(--amber);color:var(--amber);border-radius:8px;padding:6px 10px;margin:6px 6px 0 0;font-size:15px}

/* badges */
.badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 4px;max-width:720px}
.badge{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:16px;min-width:140px}
.badge .ic{font-size:24px}
.badge.locked{opacity:.35;filter:grayscale(1)}
.badge .bn{font-family:"PressStart",sans-serif;font-size:9px;display:block;margin-bottom:2px}
.badge .bd{color:var(--mut);font-size:14px}

/* share card */
.sharecard{width:100%;max-width:600px;height:auto;border:1px solid var(--line);border-radius:12px;image-rendering:auto;margin:6px 0}

/* board / projector */
.boardgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media(max-width:820px){.boardgrid{grid-template-columns:1fr}}
.bhead{font-size:13px;color:var(--cyan);letter-spacing:1px;margin:4px 0 10px}
.leaderboard,.ticker{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.board-list{list-style:none;margin:0;padding:0}
.board-list li{display:flex;align-items:center;gap:12px;padding:10px;border-bottom:1px solid var(--line);font-size:20px}
.board-list li .pos{font-size:13px;color:var(--amber);width:34px}
.board-list li .who{flex:1;color:var(--white)}
.board-list li .sc{color:var(--neon)}
.board-list li.me{background:#0d2018;border-radius:8px}
.board-list li:nth-child(1) .pos{color:#ffd54a}
.breach-feed{list-style:none;margin:0;padding:0}
.breach-feed li{padding:8px 4px;border-bottom:1px dashed var(--line);font-size:18px;color:var(--mut)}
.breach-feed li b{color:var(--cyan)}

/* fx */
.flash{position:fixed;inset:0;background:var(--neon);opacity:0;pointer-events:none;z-index:15}
.flash.go{animation:breach .5s ease}
@keyframes breach{0%{opacity:0}20%{opacity:.55}100%{opacity:0}}
.shake{animation:sh .42s}@keyframes sh{0%,100%{transform:translate(0)}25%{transform:translate(-7px,2px)}50%{transform:translate(6px,-3px)}75%{transform:translate(-4px,3px)}}
.particles{position:fixed;inset:0;pointer-events:none;z-index:16;overflow:hidden}
.shard{position:fixed;width:10px;height:10px;border-radius:2px;will-change:transform,opacity}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:14;opacity:.5;
 background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.18) 2px 4px)}
.gateerr{color:var(--red);font-size:18px;letter-spacing:1px}
.oathbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;max-width:560px;text-align:left}
.oathbox li{margin:6px 0;color:var(--mut)}
.oathcheck{display:flex;gap:10px;align-items:center;margin-top:12px;color:var(--white)}
.oathcheck input{width:22px;height:22px}
.foot{color:var(--dim);font-size:15px;text-align:center;margin-top:18px;letter-spacing:1px}

@media(prefers-reduced-motion:reduce){
  .flash.go,.shake,.screen,.guardian .sprite,.glitch::before,.glitch::after,.shard,.caret::after,.toolchip.fire{animation:none!important}
  .guardian .sprite{transform:none!important}
}