/* CLOSED PARTY 2007 — стиль перенесён 1:1 из прототипа (closed-party-code-full.html).
   Шрифты подключены через <link> в index.html (Unbounded / Manrope / VT323). */

:root{
  --hot:#ff2e9a;--hot2:#ff7ac4;--cyan:#13e7e7;--ink:#1a0414;
  --cream:#fff0f8;--lilac:#c89bff;--gold:#ffd84d;--silver:#d8d8e8;
  --xp-blue:#2a5bd7;--xp-blue2:#3f7ff0;
  --shadow:0 8px 0 rgba(26,4,20,.9);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',sans-serif;color:var(--ink);min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 6%, #ff9ed6 0%, transparent 38%),
    radial-gradient(circle at 88% 4%, var(--cyan) 0%, transparent 34%),
    radial-gradient(circle at 50% 60%, var(--lilac) 0%, transparent 42%),
    radial-gradient(circle at 50% 100%, var(--gold) 0%, transparent 44%),
    var(--hot);
  background-attachment:fixed;
}
.display{font-family:'Unbounded',sans-serif;}
.pixel{font-family:'VT323',monospace;}

.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;}
.stars span{position:absolute;color:#fff;animation:tw 2.6s infinite;}
@keyframes tw{0%,100%{opacity:.15;transform:scale(.6) rotate(0);}50%{opacity:1;transform:scale(1.25) rotate(20deg);}}

.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:18px 14px 70px;}

/* ---- XP-style window chrome ---- */
.win{background:var(--cream);border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin:16px 0;}
.win-bar{background:linear-gradient(var(--xp-blue2),var(--xp-blue));color:#fff;display:flex;align-items:center;justify-content:space-between;padding:7px 12px;font-weight:800;font-size:13px;}
.win-bar .dots{display:flex;gap:5px;}
.win-bar .dots i{width:13px;height:13px;border-radius:3px;border:1px solid rgba(255,255,255,.7);display:inline-block;}
.win-bar .dots i.c{background:#ff5f57;}.win-bar .dots i.m{background:#febc2e;}.win-bar .dots i.x{background:#28c840;}
.win-body{padding:20px;}

/* ---- masthead ---- */
.cover-top{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;}
.cover-top .edition{background:var(--gold);padding:4px 10px;border-radius:20px;transform:rotate(6deg);border:2px solid var(--ink);}
.masthead{font-family:'Unbounded';font-weight:900;font-size:clamp(46px,16vw,84px);line-height:.82;letter-spacing:-3px;
  color:#fff;text-transform:lowercase;margin:8px 0 2px;text-shadow:4px 4px 0 var(--ink),8px 8px 0 var(--cyan);-webkit-text-stroke:2px var(--ink);}
.cover-sub{display:inline-block;background:var(--ink);color:var(--cyan);font-weight:800;font-size:13px;padding:7px 14px;
  border-radius:30px;text-transform:uppercase;letter-spacing:1px;margin:10px 0;transform:rotate(-2deg);}

.about p{font-weight:600;font-size:14px;line-height:1.6;margin-bottom:10px;}
.about p:last-child{margin-bottom:0;}
.about .kick{background:var(--gold);padding:2px 6px;border-radius:6px;font-weight:800;}

/* ---- login ---- */
.login-title{display:block;font-family:'Unbounded';font-size:16px;color:var(--hot);text-transform:uppercase;margin-bottom:6px;}
.login-hint{font-size:13px;font-weight:600;opacity:.75;margin-bottom:14px;}
.code-row{display:flex;gap:10px;}
.code-input{flex:1;font-family:'VT323',monospace;font-size:26px;letter-spacing:3px;text-transform:uppercase;
  background:#fff;border:2px solid var(--ink);border-radius:12px;padding:10px 14px;outline:none;color:var(--ink);min-width:0;}
.code-input:focus{box-shadow:0 0 0 3px var(--cyan);}
.btn{font-family:'Unbounded';font-weight:700;font-size:14px;border:2px solid var(--ink);border-radius:12px;cursor:pointer;
  padding:0 18px;text-transform:uppercase;letter-spacing:.5px;
  background:linear-gradient(var(--hot2),var(--hot));color:#fff;box-shadow:3px 3px 0 var(--ink);transition:transform .08s;}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.btn:disabled{opacity:.6;cursor:default;}
.btn.block{width:100%;padding:14px;margin-top:8px;}
.err-msg{background:#ffd6e6;border:2px dashed var(--hot);border-radius:12px;color:#991d50;font-weight:700;font-size:13px;
  padding:12px;margin-top:14px;line-height:1.5;display:none;}
.err-msg.show{display:block;animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

/* ---- character card ---- */
.card{background:var(--cream);border:3px solid var(--ink);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;margin:16px 0;}
.card-head{background:var(--ink);padding:22px 22px 26px;position:relative;overflow:hidden;}
.card-head::after{content:"★";position:absolute;right:-10px;bottom:-22px;font-size:120px;color:var(--hot);opacity:.35;}
.real-name{color:var(--hot2);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:1px;}
.you-are{color:var(--cyan);font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-top:8px;}
.char-name{font-family:'Unbounded';font-weight:900;color:#fff;font-size:clamp(28px,8vw,44px);line-height:.95;margin:6px 0;text-shadow:3px 3px 0 var(--hot);}
.proto{display:inline-block;background:var(--hot);color:#fff;font-weight:800;font-size:13px;padding:5px 13px;border-radius:20px;border:2px solid #fff;}
.card-body{padding:6px 4px;}

.field{border:2px solid var(--ink);border-radius:16px;padding:14px 16px;margin:14px;background:#fff;}
.field.tint-pink{background:#fff2f8;}
.field.tint-cyan{background:#e7fdfd;}
.field.tint-gold{background:#fff8e3;}
.field .lbl{display:inline-flex;align-items:center;gap:7px;font-family:'Unbounded';font-size:12px;text-transform:uppercase;color:var(--hot);margin-bottom:8px;letter-spacing:.5px;}
.field .lbl .emo{font-size:15px;}
.field p{font-weight:600;font-size:14px;line-height:1.55;}
.field.secret{border-style:dashed;border-color:var(--hot);background:#fff2f8;}
.field.secret .lbl{color:#991d50;}
.field.goal{border-color:#0f6e56;background:#e7fdf6;}
.field.goal .lbl{color:#0f6e56;}

/* ---- locked-плашка (drip): показывается, пока роль не раскрыта ---- */
.locked-note{margin:14px;border:2px dashed #b8860b;border-radius:16px;padding:20px 16px;text-align:center;
  display:flex;flex-direction:column;gap:8px;align-items:center;
  background:repeating-linear-gradient(45deg,#fff6da,#fff6da 14px,#ffedb4 14px,#ffedb4 28px);}
.locked-note .lock-emo{font-size:30px;}
.locked-note b{font-family:'Unbounded';font-size:13px;text-transform:uppercase;color:#8a6a00;letter-spacing:.5px;line-height:1.3;}
.locked-note span{font-size:13px;font-weight:600;color:#6b5300;line-height:1.5;max-width:340px;}

.gallery{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;}
.pola{background:#fff;border:2px solid var(--ink);border-radius:9px;padding:6px 6px 18px;
  box-shadow:3px 3px 0 rgba(26,4,20,.5);position:relative;flex:1 1 90px;max-width:130px;transform:rotate(-2deg);}
.pola:nth-child(even){transform:rotate(2deg);}
.pola img{display:block;width:100%;height:150px;object-fit:cover;border-radius:4px;background:var(--hot2);}
.pola .cap{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-family:'Unbounded';font-size:8px;letter-spacing:.5px;color:var(--hot);text-transform:uppercase;}
.pola .tape{position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-4deg);background:var(--cyan);border:1px solid var(--ink);width:40px;height:13px;opacity:.85;border-radius:2px;}
.gallery-hint{font-size:11px;font-weight:600;opacity:.65;margin-top:8px;font-style:italic;}
.rules{margin:14px;font-size:13px;font-weight:600;line-height:1.55;background:rgba(26,4,20,.06);border-radius:14px;padding:14px 16px;}
.rules b{display:block;font-family:'Unbounded';font-size:12px;text-transform:uppercase;color:var(--hot);margin-bottom:6px;}

.ack{margin:14px;}
.ack .btn{width:100%;background:linear-gradient(var(--cyan),#0bbcbc);}
.ack-done{margin:14px;text-align:center;background:#e7fdf6;border:2px solid #0f6e56;border-radius:16px;padding:16px;color:#0f6e56;font-weight:800;display:none;}
.ack-done.show{display:block;}
.logout{display:block;text-align:center;margin:14px;color:var(--ink);font-weight:700;font-size:12px;text-decoration:underline;opacity:.7;cursor:pointer;}
.logout:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px;}

.foot{text-align:center;color:#fff;font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-top:30px;opacity:.85;}
@media (prefers-reduced-motion:reduce){.stars span{animation:none;}html{scroll-behavior:auto;}.btn{transition:none;}}