/* MULTIPLAYER PSYCH — UI System / ARCADE LAB © 2025 */
:root {
  --void:#050510;--cyan:#00F5FF;--pink:#FF2DA6;--purple:#7A5CFF;
  --lime:#C7FF4D;--orange:#FF8800;--text:#F0F0FF;--silver:#8888AA;
  --orb:'Orbitron',monospace;--mono:'Space Mono',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--void);font-family:var(--orb);color:var(--text);user-select:none;-webkit-user-select:none;}
#bg-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0;}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:60;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,245,255,0.01) 2px,rgba(0,245,255,0.01) 4px);}
.grain{position:fixed;inset:0;pointer-events:none;z-index:59;opacity:0.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px;}
.screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;}
.screen.hidden{display:none;}
.center-screen{align-items:center;justify-content:center;}
.panel{display:flex;flex-direction:column;align-items:center;text-align:center;background:rgba(5,5,20,0.92);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(0,245,255,0.1);border-radius:20px;padding:44px 52px;max-width:540px;width:92%;position:relative;overflow:hidden;}
.panel::before{content:'';position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,rgba(0,245,255,0.25),transparent 50%,rgba(255,45,166,0.12));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.panel.wide{max-width:700px;}
.eyebrow{font-size:9px;letter-spacing:4px;color:rgba(0,245,255,0.4);margin-bottom:20px;text-transform:uppercase;}
.big-title{font-size:40px;font-weight:900;letter-spacing:4px;color:var(--text);line-height:1.1;margin-bottom:28px;text-shadow:0 0 30px rgba(0,245,255,0.25);}
.logo{margin-bottom:28px;}
.logo-sub{font-size:18px;font-weight:600;letter-spacing:12px;color:rgba(255,255,255,0.5);line-height:1;}
.logo-main{font-size:72px;font-weight:900;letter-spacing:8px;line-height:1;background:linear-gradient(135deg,var(--cyan) 10%,var(--purple) 55%,var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 24px rgba(0,245,255,0.4));}
.logo-tag{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,0.2);letter-spacing:3px;margin-top:8px;}
.field-group{width:100%;margin-bottom:16px;text-align:left;}
.field-label{display:block;font-size:8px;letter-spacing:3px;color:rgba(255,255,255,0.3);margin-bottom:7px;}
.opt-tag{color:rgba(255,255,255,0.15);font-size:7px;}
.inp{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:12px 16px;color:var(--text);font-family:var(--orb);font-size:13px;letter-spacing:2px;outline:none;transition:border-color 0.2s,box-shadow 0.2s;}
.inp::placeholder{color:rgba(255,255,255,0.2);}
.inp:focus{border-color:rgba(0,245,255,0.45);box-shadow:0 0 0 3px rgba(0,245,255,0.08);}
.inp.mono{font-family:var(--mono);letter-spacing:6px;text-transform:uppercase;text-align:center;font-size:18px;}
.btn{font-family:var(--orb);font-size:11px;font-weight:700;letter-spacing:4px;border:none;border-radius:10px;padding:15px 32px;cursor:pointer;transition:all 0.2s ease;width:100%;margin-bottom:12px;}
.btn.primary{background:linear-gradient(135deg,rgba(0,245,255,0.15),rgba(122,92,255,0.15));border:1px solid rgba(0,245,255,0.4);color:var(--cyan);}
.btn.primary:hover{background:linear-gradient(135deg,rgba(0,245,255,0.25),rgba(122,92,255,0.25));box-shadow:0 0 28px rgba(0,245,255,0.2);transform:translateY(-2px);}
.btn.hidden{display:none;}
.err-msg{font-family:var(--mono);font-size:11px;color:#FF4444;margin-top:8px;}
.err-msg.hidden{display:none;}
.flavor-row{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,0.25);margin-top:8px;}
.flavor-dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.lobby-top{width:100%;margin-bottom:20px;}
.room-code-row{display:flex;align-items:center;gap:12px;background:rgba(0,245,255,0.05);border:1px solid rgba(0,245,255,0.15);border-radius:12px;padding:12px 18px;margin-top:10px;}
.rc-label{font-size:8px;letter-spacing:3px;color:rgba(0,245,255,0.45);}
.rc-val{font-size:24px;font-weight:900;letter-spacing:8px;color:var(--cyan);flex:1;text-align:center;text-shadow:0 0 16px rgba(0,245,255,0.4);}
.copy-btn{font-family:var(--orb);font-size:8px;letter-spacing:2px;color:rgba(0,245,255,0.5);background:rgba(0,245,255,0.08);border:1px solid rgba(0,245,255,0.2);border-radius:6px;padding:5px 10px;cursor:pointer;transition:all 0.2s;}
.copy-btn:hover{background:rgba(0,245,255,0.15);color:var(--cyan);}
.player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px;width:100%;min-height:80px;margin-bottom:16px;}
.player-card{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:10px 14px;transition:border-color 0.3s;}
.player-card.me{border-color:rgba(0,245,255,0.25);background:rgba(0,245,255,0.05);}
.pc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.pc-name{font-size:11px;letter-spacing:1px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pc-host{font-size:8px;color:var(--lime);letter-spacing:1px;}
.lobby-footer{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:9px;letter-spacing:2px;color:rgba(255,255,255,0.3);margin-bottom:14px;}
.seq-preview{width:100%;border-top:1px solid rgba(255,255,255,0.06);padding-top:16px;margin-top:4px;}
.seq-label{font-size:8px;letter-spacing:3px;color:rgba(255,255,255,0.2);margin-bottom:10px;}
.seq-list{display:flex;justify-content:center;gap:24px;}
.seq-item{display:flex;align-items:center;gap:6px;font-size:10px;color:rgba(255,255,255,0.4);}
.seq-n{color:var(--cyan);font-size:8px;}
.intro-wrap{text-align:center;}
.intro-idx{font-size:11px;letter-spacing:5px;color:rgba(0,245,255,0.4);margin-bottom:14px;}
.intro-name{font-size:clamp(42px,8vw,80px);font-weight:900;letter-spacing:6px;background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;filter:drop-shadow(0 0 30px rgba(0,245,255,0.4));}
.intro-desc{font-family:var(--mono);font-size:14px;color:rgba(255,255,255,0.45);line-height:1.6;max-width:460px;margin:0 auto 28px;}
.intro-bar-wrap{width:300px;height:3px;background:rgba(255,255,255,0.08);border-radius:2px;margin:0 auto;overflow:hidden;}
.intro-bar{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--purple));border-radius:2px;transition:width 0.1s linear;}
.game-header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;z-index:20;background:rgba(5,5,16,0.85);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.06);}
.gh-block{min-width:160px;}
.gh-block.right{text-align:right;}
.gh-label{font-size:8px;letter-spacing:3px;color:rgba(255,255,255,0.28);margin-bottom:4px;}
.gh-val{font-size:22px;font-weight:700;color:var(--text);letter-spacing:2px;}
.gh-center{display:flex;flex-direction:column;align-items:center;gap:4px;}
.score-col{display:flex;flex-direction:column;gap:3px;}
.sc-row{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:11px;}
.sc-dot{width:7px;height:7px;border-radius:50%;}
.sc-name{color:rgba(255,255,255,0.5);font-size:9px;}
.sc-pts{color:var(--text);font-weight:700;min-width:38px;text-align:right;}
.sync-arena{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding-top:70px;}
#sync-canvas{cursor:pointer;}
.sync-msg{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:rgba(255,255,255,0.4);}
.result-pop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(28px,5vw,52px);font-weight:900;letter-spacing:6px;pointer-events:none;z-index:25;animation:popIn 0.3s ease;}
.result-pop.hidden{display:none;}
@keyframes popIn{from{transform:translate(-50%,-50%) scale(0.5);opacity:0;}to{transform:translate(-50%,-50%) scale(1);opacity:1;}}
.click-rings{position:fixed;inset:0;pointer-events:none;z-index:22;}
.cr-item{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:crExpand 0.7s ease forwards;}
@keyframes crExpand{from{opacity:0.9;transform:translate(-50%,-50%) scale(0.1);}to{opacity:0;transform:translate(-50%,-50%) scale(3);}}
.trust-body{position:fixed;inset:0;padding-top:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;}
.trust-history-wrap{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:600px;}
.th-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px 16px;font-size:10px;letter-spacing:1px;color:rgba(255,255,255,0.4);text-align:center;}
.th-r{font-size:8px;color:rgba(255,255,255,0.25);margin-bottom:4px;}
.th-nums{font-size:16px;font-weight:700;}
.trust-choice-panel{display:flex;align-items:center;gap:24px;max-width:700px;width:95%;}
.choice-card{flex:1;display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,0.03);border:2px solid rgba(255,255,255,0.08);border-radius:16px;padding:28px 20px;cursor:pointer;transition:all 0.25s ease;position:relative;overflow:hidden;}
.choice-card.cooperate:hover{border-color:rgba(0,245,255,0.5);background:rgba(0,245,255,0.07);box-shadow:0 0 30px rgba(0,245,255,0.15);transform:translateY(-3px);}
.choice-card.defect:hover{border-color:rgba(255,45,166,0.5);background:rgba(255,45,166,0.07);box-shadow:0 0 30px rgba(255,45,166,0.15);transform:translateY(-3px);}
.choice-card.selected.cooperate{border-color:var(--cyan);background:rgba(0,245,255,0.12);box-shadow:0 0 40px rgba(0,245,255,0.2);}
.choice-card.selected.defect{border-color:var(--pink);background:rgba(255,45,166,0.12);box-shadow:0 0 40px rgba(255,45,166,0.2);}
.choice-card.locked{opacity:0.45;pointer-events:none;}
.cc-icon{font-size:40px;margin-bottom:12px;}
.cc-name{font-size:14px;font-weight:700;letter-spacing:3px;margin-bottom:8px;}
.choice-card.cooperate .cc-name{color:var(--cyan);}
.choice-card.defect .cc-name{color:var(--pink);}
.cc-desc{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,0.35);line-height:1.6;text-align:center;margin-bottom:10px;}
.cc-pts{font-size:9px;letter-spacing:1px;color:rgba(255,255,255,0.22);font-family:var(--mono);}
.vs-divider{font-size:14px;font-weight:900;color:rgba(255,255,255,0.2);flex-shrink:0;}
.trust-reveal{max-width:700px;width:95%;background:rgba(5,5,20,0.9);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px;text-align:center;}
.trust-reveal.hidden{display:none;}
.tr-headline{font-size:20px;font-weight:700;letter-spacing:4px;margin-bottom:16px;}
.tr-players{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:16px;}
.tr-player{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.04);border-radius:8px;padding:8px 14px;}
.tr-p-dot{width:8px;height:8px;border-radius:50%;}
.tr-p-name{font-size:10px;color:rgba(255,255,255,0.5);}
.tr-p-choice{font-size:12px;font-weight:700;letter-spacing:2px;}
.tr-insight{margin-top:12px;border-top:1px solid rgba(255,255,255,0.08);padding-top:14px;}
.tr-i-tag{font-size:10px;letter-spacing:3px;margin-bottom:6px;}
.tr-i-text{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,0.4);line-height:1.7;}
.timer-ring{position:relative;width:72px;height:72px;}
.timer-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.tr-bg{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:5;}
.tr-arc{fill:none;stroke:var(--cyan);stroke-width:5;stroke-linecap:round;stroke-dasharray:214;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke 0.3s;}
.tr-secs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--text);}
.trust-status{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,0.35);letter-spacing:2px;}
.hive-canvas{position:fixed;inset:0;width:100vw;height:100vh;}
.hive-clock{font-size:36px;font-weight:900;color:var(--cyan);text-shadow:0 0 20px var(--cyan);letter-spacing:4px;}
.sync-track{width:100px;height:5px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin:4px 0;margin-left:auto;}
.sync-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan));border-radius:3px;transition:width 0.3s;width:0%;}
.hive-controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:25;}
.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px;}
.dpad-btn{width:52px;height:52px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.5);font-size:16px;cursor:pointer;transition:all 0.1s;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.dpad-btn:active,.dpad-btn.pressed{background:rgba(0,245,255,0.15);border-color:rgba(0,245,255,0.5);color:var(--cyan);box-shadow:0 0 16px rgba(0,245,255,0.2);}
#hb-up{grid-column:2;grid-row:1;}
#hb-left{grid-column:1;grid-row:2;}
.dpad-center{grid-column:2;grid-row:2;background:transparent;border:none;}
#hb-right{grid-column:3;grid-row:2;}
#hb-down{grid-column:2;grid-row:3;}
.hive-key-hint{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,0.2);letter-spacing:2px;}
.me-score-list{display:flex;flex-direction:column;gap:10px;width:100%;margin-bottom:20px;}
.me-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:10px 16px;}
.me-rank{font-size:14px;font-weight:900;color:rgba(255,255,255,0.2);min-width:24px;}
.me-rank.gold{color:var(--lime);text-shadow:0 0 10px var(--lime);}
.me-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.me-name{flex:1;font-size:12px;letter-spacing:1px;color:var(--text);text-align:left;}
.me-pts{font-size:18px;font-weight:700;color:var(--cyan);letter-spacing:2px;}
.me-next-msg{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,0.25);letter-spacing:2px;}
.results-page{display:flex;flex-direction:column;align-items:center;width:100%;max-width:900px;padding:80px 24px 40px;overflow-y:auto;max-height:100vh;}
.results-header{text-align:center;margin-bottom:36px;}
.results-title{font-size:clamp(36px,6vw,60px);font-weight:900;letter-spacing:5px;line-height:1.1;margin-top:8px;background:linear-gradient(135deg,var(--cyan),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;width:100%;margin-bottom:32px;}
.result-card{background:rgba(5,5,20,0.9);border-radius:16px;padding:24px;border:1px solid rgba(255,255,255,0.07);position:relative;overflow:hidden;transition:transform 0.2s;}
.result-card:hover{transform:translateY(-3px);}
.result-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-color,var(--cyan));}
.rc-rank{font-size:11px;letter-spacing:3px;color:rgba(255,255,255,0.25);margin-bottom:6px;}
.rc-name{font-size:18px;font-weight:700;letter-spacing:2px;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.rc-name-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.rc-archetype{font-size:13px;font-weight:700;letter-spacing:3px;color:var(--card-color,var(--cyan));text-shadow:0 0 12px var(--card-color,var(--cyan));margin-bottom:8px;}
.rc-trait{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,0.38);line-height:1.7;margin-bottom:16px;}
.rc-score{font-size:28px;font-weight:900;color:var(--text);letter-spacing:3px;}
.rc-score-lbl{font-size:8px;letter-spacing:2px;color:rgba(255,255,255,0.25);margin-top:2px;}
.winner-badge{position:absolute;top:14px;right:14px;font-size:8px;letter-spacing:2px;color:var(--lime);background:rgba(199,255,77,0.1);border:1px solid rgba(199,255,77,0.25);border-radius:12px;padding:3px 8px;}
.notif{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:rgba(5,5,20,0.95);border:1px solid rgba(0,245,255,0.3);border-radius:10px;padding:12px 24px;font-size:12px;letter-spacing:2px;color:var(--cyan);z-index:100;white-space:nowrap;animation:notifIn 0.3s ease;box-shadow:0 0 20px rgba(0,245,255,0.15);}
.notif.hidden{display:none;}
@keyframes notifIn{from{opacity:0;transform:translateX(-50%) translateY(-10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.host-banner{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(255,45,166,0.9);backdrop-filter:blur(8px);text-align:center;padding:14px;font-size:12px;letter-spacing:3px;color:#fff;animation:slideDown 0.3s ease;}
.host-banner.hidden{display:none;}
@keyframes slideDown{from{transform:translateY(-100%);}to{transform:translateY(0);}}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,245,255,0.3);border-radius:2px;}
@media(max-width:600px){.logo-main{font-size:52px;}.panel{padding:28px 20px;}.trust-choice-panel{flex-direction:column;}.game-header{padding:10px 14px;}.gh-block{min-width:100px;}.gh-val{font-size:18px;}}