:root{
  --bg:#0a0b16; --glass:rgba(255,255,255,.05); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.17);
  --text:#eef0ff; --muted:#9aa0c8;
  --accent:#8b6cff; --accent2:#e159ff; --accent3:#3ddbff;
  --green:#3ee08f; --warn:#ffb454; --danger:#ff5d6c;
  --grad:linear-gradient(135deg,#8b6cff,#e159ff);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(139,108,255,.30), transparent 60%),
    radial-gradient(820px 600px at 105% 2%, rgba(225,89,255,.18), transparent 55%),
    radial-gradient(760px 760px at 50% 118%, rgba(61,219,255,.12), transparent 60%),
    #0a0b16;
  background-attachment:fixed;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  display:flex;justify-content:center;
}
#app{width:100%;max-width:480px;min-height:100vh}
.wrap{padding:24px 18px 44px;display:flex;flex-direction:column;gap:14px;min-height:100vh;animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.center{align-items:center;text-align:center}
h1,h2{margin:0;font-weight:800;letter-spacing:-.02em}
.logo{font-size:38px;text-align:center;margin:16px 0 6px;font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(135deg,#ffffff,#cbbcff 45%,#e159ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(139,108,255,.45))}
.muted{color:var(--muted)}
.small{font-size:13px}

.card{background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);
  border-radius:22px;padding:18px;box-shadow:0 10px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06)}
.card-title{font-weight:700;margin-bottom:10px;letter-spacing:-.01em}

.btn{border:0;border-radius:18px;padding:16px;font-size:17px;font-weight:700;color:#fff;cursor:pointer;font-family:inherit;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.btn-primary{background:var(--grad);box-shadow:0 10px 26px rgba(139,108,255,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 12px 32px rgba(225,89,255,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-secondary{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.4;box-shadow:none;filter:none}
.big{width:100%;font-size:18px;padding:18px;margin-top:6px}
.link{background:none;border:0;color:#b9a9ff;font-size:15px;text-decoration:none;cursor:pointer;text-align:center;display:inline-block;padding:8px;font-family:inherit;transition:color .12s}
.link:hover{color:#d8ccff}
.back{align-self:flex-start;padding-left:0}
.row-links{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.warn{color:var(--warn);font-size:13px;min-height:1em;text-align:center}

input[type=range]{width:100%;accent-color:var(--accent);height:36px}
.text-input{width:100%;background:rgba(0,0,0,.30);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:15px;font-size:17px;font-family:inherit;transition:border-color .12s,box-shadow .12s}
.text-input::placeholder{color:#7b7fa6}
.text-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,108,255,.25)}
.stepper{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-weight:600}
.stepper>div{display:flex;align-items:center;gap:16px}
.rnd{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:22px;cursor:pointer;transition:transform .1s,background .12s}
.rnd:hover{background:rgba(255,255,255,.12)}
.rnd:active{transform:scale(.92)}
.civils-badge{margin-top:18px;text-align:center;background:rgba(61,219,255,.10);border:1px solid rgba(61,219,255,.30);border-radius:999px;padding:10px;font-weight:700;color:#8fe8ff}

.avatar{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:24px;box-shadow:0 0 0 2px rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.avatar.big-avatar{width:92px;height:92px;font-size:40px;margin:0 auto 8px;box-shadow:0 0 0 3px rgba(255,255,255,.16),0 10px 30px rgba(0,0,0,.5)}
.avatar.mini{width:32px;height:32px;font-size:14px;box-shadow:0 0 0 2px rgba(255,255,255,.12)}

.lb{display:flex;flex-direction:column}
.lb-row{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid rgba(255,255,255,.07)}
.lb-row:last-child{border-bottom:0}
.lb-row .rank{width:28px;text-align:center;font-weight:800;color:var(--muted);font-size:16px}
.lb-row .who{flex:1;font-weight:600}
.lb-row .pts{font-weight:800;color:var(--green)}

.word-card{background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:26px;padding:34px 18px;margin:8px 0;width:100%;box-shadow:0 0 50px rgba(139,108,255,.22),inset 0 1px 0 rgba(255,255,255,.07)}
.word-card.white{box-shadow:0 0 50px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.07)}
.word-card.civil{box-shadow:0 0 50px rgba(61,219,255,.22),inset 0 1px 0 rgba(255,255,255,.07)}
.word-card.infil{box-shadow:0 0 50px rgba(225,89,255,.24),inset 0 1px 0 rgba(255,255,255,.07)}
.word-label{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.word{font-size:42px;font-weight:900;margin-top:8px;word-break:break-word;line-height:1.05;letter-spacing:-.02em;
  background:linear-gradient(135deg,#ffffff,#dcd0ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(139,108,255,.4))}

.info-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.center-chip{align-self:center;margin:2px auto}

.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:8px 0}
.card-slot{aspect-ratio:3/4;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:inherit}
.card-slot.facedown{border:0;cursor:pointer;background:linear-gradient(155deg,#ffd86b,#f59e0b 60%,#e07d09);box-shadow:0 10px 24px rgba(245,158,11,.35),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 8px rgba(150,80,0,.3);transition:transform .14s ease,box-shadow .14s}
.card-slot.facedown:hover{box-shadow:0 14px 30px rgba(245,158,11,.5),inset 0 2px 0 rgba(255,255,255,.4)}
.card-slot.facedown:active{transform:scale(.95) rotate(-1deg)}
.cardback{font-size:46px;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(150,80,0,.5)}
.card-slot.opened{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
button.card-slot{cursor:pointer;color:var(--text)}
button.card-slot:active{transform:scale(.96)}
.slot-name{font-size:13px;font-weight:600;word-break:break-word;text-align:center;padding:0 4px}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:6px 0}
.pcell{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:15px 6px 13px;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pnum{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--grad);width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px rgba(139,108,255,.5)}
.pname{font-size:13px;margin-top:2px;word-break:break-word;text-align:center;font-weight:600}
.vote-cell{padding-top:20px}
.elim-btn{background:linear-gradient(135deg,#ff7a59,#ff4d6d);border:0;color:#fff;font-weight:700;font-size:13px;padding:8px 15px;border-radius:999px;cursor:pointer;box-shadow:0 6px 16px rgba(255,77,109,.45);font-family:inherit;transition:transform .1s,filter .1s}
.elim-btn:hover{filter:brightness(1.08)}
.elim-btn:active{transform:scale(.94)}

.win-title{font-size:32px;margin:16px 0;font-weight:900;letter-spacing:-.02em;filter:drop-shadow(0 0 20px rgba(139,108,255,.4))}
.pair-reveal{font-size:18px;margin-top:6px;font-weight:600}
.win-photo{margin:8px auto 4px;max-width:240px}
.win-photo img{width:100%;border-radius:20px;border:2px solid var(--accent2);box-shadow:0 0 44px rgba(225,89,255,.45);display:block}

.overlay{position:fixed;inset:0;background:rgba(6,7,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50;animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:rgba(28,30,54,.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--line-2);border-radius:24px;max-width:340px;width:100%;padding:24px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.6);animation:pop .2s cubic-bezier(.2,1.2,.4,1)}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal-title{font-size:20px;font-weight:800}
.modal-msg{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.5}
.modal-actions{display:flex;gap:10px;margin-top:20px}
.modal-btn{flex:1;border:0;border-radius:15px;padding:14px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .1s,filter .1s}
.modal-btn:active{transform:scale(.97)}
.modal-btn.cancel{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line)}
.modal-btn.ok{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(139,108,255,.45)}
.modal-btn.ok.danger{background:linear-gradient(135deg,#ff7a59,#ff4d6d);box-shadow:0 8px 20px rgba(255,77,109,.45)}

.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
details summary{cursor:pointer;color:var(--muted);font-weight:600}
details p{margin:10px 0 0}
label{display:block;color:var(--text)}

.turn-banner{background:var(--grad);border-radius:16px;padding:15px;text-align:center;font-size:18px;font-weight:700;box-shadow:0 10px 26px rgba(139,108,255,.45);animation:glow 2.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 10px 26px rgba(139,108,255,.35)}50%{box-shadow:0 12px 36px rgba(225,89,255,.55)}}
.picked-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:4px 0}
.mini-pick{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--muted);width:54px;text-align:center;word-break:break-word}
.mini-pick .avatar.mini{width:42px;height:42px;font-size:18px}

.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font-size:14px;color:var(--text)}
.switch-row input{width:22px;height:22px;accent-color:var(--accent);flex:0 0 auto}

.seg{display:flex;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:16px;padding:4px;gap:4px;margin:4px 0}
.seg-btn{flex:1;border:0;background:transparent;color:var(--muted);font-weight:700;padding:12px;border-radius:12px;cursor:pointer;font-family:inherit;font-size:15px;transition:background .14s,color .14s}
.seg-btn.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(139,108,255,.4)}
.topbar{display:flex;align-items:center;justify-content:space-between}
.del-btn{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;border-radius:11px;padding:7px 12px;cursor:pointer;font-size:15px;font-family:inherit;transition:background .12s,transform .1s}
.del-btn:hover{background:rgba(255,93,108,.25)}
.del-btn:active{transform:scale(.92)}
.mini-login{background:var(--grad);border:0;color:#fff;border-radius:11px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;box-shadow:0 4px 12px rgba(139,108,255,.4)}
.mini-login:active{transform:scale(.94)}

.confetti-box{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti-box i{position:absolute;top:-24px;border-radius:2px;opacity:.95;animation:confFall linear forwards}
@keyframes confFall{from{transform:translateY(0) rotate(var(--r,0deg))}to{transform:translateY(110vh) rotate(calc(var(--r,0deg) + 720deg))}}