*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{--purple:#802EC6;--blue:#0066FF;--cyan:#00B7F9;--red:#FF3D3D;--yellow:#FFD700;--green:#00CC44;--white:#fff;--black:#000;}
body{background:#1a1a2e;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;font-family:Calibri,sans-serif;padding:20px 16px;gap:16px;}
.phone{width:375px;min-height:700px;background:#000;border:5px solid var(--purple);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 0 1px #5a1a8a,0 0 32px rgba(128,46,198,.55),0 0 72px rgba(0,102,255,.18);position:relative;}
.screen{display:none;flex-direction:column;flex:1;}
.screen.active{display:flex;}
/* Welcome */
#s-welcome{background:#000;align-items:center;padding-bottom:28px;}
.welcome-title{font-size:36px;font-weight:700;color:#fff;text-align:center;margin-top:28px;margin-bottom:18px;}
.logo-frame{width:310px;height:310px;border:4px solid var(--purple);border-radius:10px;overflow:hidden;flex-shrink:0;}
.logo-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.tagline{font-size:22px;font-weight:700;color:#fff;text-align:center;margin-top:22px;line-height:1.35;}
.room-row{display:flex;align-items:center;gap:12px;margin-top:24px;}
.room-label{font-size:18px;font-weight:700;color:var(--red);}
.room-input{background:#000;border:2px solid #fff;border-radius:6px;color:#fff;font-family:Calibri,sans-serif;font-size:16px;padding:6px 12px;width:100px;outline:none;text-align:center;}
.room-input::placeholder{color:rgba(255,255,255,.4);}
.btn-row{display:flex;gap:20px;margin-top:22px;}
/* Standard screens */
.std-screen{flex-direction:column;flex:1;background:#000;}
.top-gap{background:#000;height:28px;flex-shrink:0;}
.banner{background:var(--purple);display:flex;align-items:center;flex-shrink:0;height:44px;position:relative;}
.logo-sm{width:68px;height:68px;flex-shrink:0;border:3px solid #fff;border-radius:4px;overflow:hidden;position:relative;z-index:2;margin-left:16px;}
.logo-sm img{width:100%;height:100%;object-fit:cover;display:block;}
.banner-title{font-family:Calibri,sans-serif;font-size:26px;font-weight:700;color:#fff;position:absolute;left:0;right:0;text-align:center;pointer-events:none;}
.mid-gap{background:#000;height:18px;flex-shrink:0;}
.inner{flex:1;background:#000;margin:0 16px 16px 16px;border:4px solid var(--blue);border-radius:6px;display:flex;flex-direction:column;padding:14px 12px;overflow-y:auto;}
/* Buttons */
.btn{font-family:Calibri,sans-serif;font-size:18px;font-weight:700;color:#fff;border:none;border-radius:8px;padding:10px 28px;cursor:pointer;letter-spacing:.3px;transition:opacity .15s;}
.btn:active{opacity:.8;}
.btn-cyan{background:var(--cyan);}
.btn-red{background:var(--red);}
.btn-blue{background:var(--blue);}
.btn-purple{background:var(--purple);}
.btn-yellow{background:var(--yellow);color:#000;}
.btn-green{background:var(--green);}
.btn-full{width:100%;margin-top:10px;}
.btn-sm{font-size:14px;padding:7px 16px;}
/* Form */
.field-label{font-size:16px;font-weight:700;color:var(--red);margin-top:12px;margin-bottom:4px;}
.field-row{display:flex;align-items:center;gap:8px;}
.field-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--blue);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.field-check.done{background:var(--blue);}
input[type=text],input[type=email],input[type=tel]{flex:1;background:#000;border:2px solid var(--blue);border-radius:6px;color:#fff;font-family:Calibri,sans-serif;font-size:15px;padding:8px 10px;outline:none;}
input::placeholder{color:rgba(255,255,255,.35);font-style:italic;}
#invite-message::placeholder{font-style:italic;color:rgba(255,255,255,.5);}
.avail-box{text-align:center;border:2px solid #fff;border-radius:6px;padding:6px 14px;font-weight:700;font-size:15px;margin:8px auto;display:none;}
/* Instructions */
.inst-h{font-size:17px;font-weight:700;color:var(--cyan);margin-bottom:4px;margin-top:10px;}
.inst-p{font-size:14px;color:#ddd;line-height:1.5;margin-bottom:6px;}
.pts-table{width:100%;border-collapse:collapse;margin-top:8px;}
.pts-table th{background:var(--blue);color:#fff;padding:6px;font-size:14px;}
.pts-table td{border:1px solid #333;color:#fff;text-align:center;padding:5px;font-size:14px;}
/* Host room */
.section-title{font-size:18px;font-weight:700;color:#fff;text-align:center;margin-bottom:8px;}
.generate-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.room-display{flex:1;background:#000;border:2px solid #fff;border-radius:6px;color:var(--cyan);font-size:18px;font-weight:700;padding:6px 10px;text-align:center;font-style:italic;}
.invite-box{background:#000;border:2px solid var(--blue);border-radius:6px;padding:8px;margin-bottom:8px;font-size:13px;color:#aaa;line-height:1.7;}
.invite-box b{color:#fff;}
.copy-btn-wrap{display:flex;justify-content:flex-end;margin-top:4px;}
.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0;}
.level-btn{font-family:Calibri,sans-serif;font-size:14px;font-weight:700;color:#fff;border:none;border-radius:6px;padding:8px 4px;cursor:pointer;}
.level-btn.easy{background:var(--cyan);color:#000;}
.level-btn.medium{background:var(--blue);}
.level-btn.difficult{background:var(--red);}
.level-btn.selected{outline:3px solid #fff;}
.preset-display{border:2px solid var(--blue);border-radius:6px;padding:10px;margin:8px 0;text-align:center;}
.preset-name{font-size:17px;font-weight:700;color:#fff;margin-bottom:6px;}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.preset-stat{font-size:14px;color:#ccc;}
.preset-stat span{color:var(--cyan);font-weight:700;}
.preset-input{width:52px;background:var(--blue);border:none;border-radius:4px;
  color:#fff;font-family:Calibri,sans-serif;font-size:14px;font-weight:700;
  padding:2px 6px;text-align:center;outline:none;}
.edit-row{display:flex;gap:8px;justify-content:center;margin-top:6px;}
/* Waiting room */
.wr-controls{display:flex;gap:10px;margin-bottom:12px;}
.countdown-col{display:flex;flex-direction:column;gap:6px;}
.countdown-btn{font-family:Calibri,sans-serif;font-size:16px;font-weight:700;color:#fff;border:none;border-radius:6px;padding:8px 14px;cursor:pointer;transition:background .3s;}
.cb-ready{background:var(--red);}
.cb-set{background:var(--yellow);color:#000;}
.cb-go{background:var(--green);}
.cb-dim{background:#333;color:#555;}
.players-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;}
.player-cell{border:2px solid var(--blue);border-radius:6px;padding:7px 8px;font-size:14px;font-weight:700;color:#fff;text-align:center;}
.player-cell.host-position{border:3px solid #FF8C00;background:rgba(255,140,0,.15);color:#FF8C00;font-weight:700;}
.player-cell.empty-slot{background:rgba(0,102,255,.15);border:2px solid var(--blue);color:#555;font-size:13px;font-weight:700;}
.player-cell.occupied{background:rgba(0,102,255,.25);border:2px solid var(--blue);color:#fff;font-weight:700;}
.player-cell.ready{background:rgba(0,183,249,.25);color:#fff;border-color:var(--cyan);border-style:solid;}
.player-cell.host{border-color:var(--purple);background:rgba(128,46,198,.2);color:#fff;}
.chat-label{font-size:16px;font-weight:700;color:var(--red);margin-bottom:6px;}
.chat-box{border:2px solid var(--blue);border-radius:6px;background:#000;padding:8px;min-height:80px;max-height:110px;overflow-y:auto;margin-bottom:8px;font-size:13px;line-height:1.6;}
.chat-msg{color:#ccc;}
.chat-msg b{color:var(--cyan);}
.chat-input-row{display:flex;gap:8px;}
.chat-input{flex:1;background:#000;border:2px solid var(--blue);border-radius:6px;color:#fff;font-family:Calibri,sans-serif;font-size:14px;padding:7px 10px;outline:none;}
/* Game */
.round-header{text-align:center;margin-bottom:4px;}
.round-num{font-size:22px;font-weight:700;color:#fff;}
.timer-display{font-size:26px;font-weight:700;color:var(--yellow);}
.word-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:8px 0;}
.word-cell{border:2px solid var(--blue);border-radius:5px;padding:7px 4px;text-align:center;font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:background .15s;user-select:none;}
.word-cell.bonus{background:rgba(128,46,198,.4);border-color:var(--purple);color:var(--cyan);}
.word-cell.selected{background:rgba(0,102,255,.5);border-color:var(--cyan);}
.link-col-label{font-size:14px;font-weight:700;color:var(--red);}
.link-row{display:flex;gap:10px;align-items:flex-end;margin-bottom:8px;}
.link-col{display:flex;flex-direction:column;gap:4px;flex:1;}
.selected-words-display{background:#000;border:2px solid var(--blue);border-radius:6px;padding:7px 10px;font-size:14px;font-weight:700;color:var(--yellow);min-height:36px;}
.link-word-input{background:#000;border:2px solid var(--blue);border-radius:6px;color:var(--yellow);font-family:Calibri,sans-serif;font-size:14px;font-weight:700;padding:7px 10px;outline:none;width:100%;}
/* Scoring */
.round-complete{font-size:20px;font-weight:700;color:#fff;text-align:center;margin-bottom:12px;}
.player-section{margin-bottom:18px;border:none;border-radius:8px;padding:10px;background:rgba(0,102,255,.08);}
.player-name-hdr{font-size:18px;font-weight:700;color:#FF8C00;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid rgba(255,140,0,.3);}
.score-table{width:100%;border-collapse:collapse;font-size:13px;}
.score-table th{background:var(--blue);color:#fff;padding:5px 4px;text-align:center;}
.score-table td{border:1px solid #333;color:#fff;padding:5px 4px;text-align:center;}
.score-table td.link-word{color:var(--cyan);font-weight:700;}
.challenge-btn{width:24px;height:24px;border-radius:50%;border:2px solid var(--blue);background:transparent;color:var(--cyan);font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:auto;}
.challenge-btn.challenged{background:var(--red);border-color:var(--red);color:#fff;}
/* Challenge */
.defense-title{font-size:18px;font-weight:700;color:#fff;text-align:center;margin-bottom:10px;}
.challenge-row{border:2px solid #FF8C00;border-radius:6px;padding:8px;margin-bottom:10px;}
.ch-words{font-size:13px;color:#fff;margin-bottom:4px;}
.ch-link{font-size:14px;font-weight:700;color:var(--cyan);margin-bottom:6px;}
.ch-defense-input{width:100%;background:#000;border:2px solid var(--blue);border-radius:6px;color:#fff;font-family:Calibri,sans-serif;font-size:13px;padding:6px 8px;outline:none;margin-bottom:8px;}
.ch-vote-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.verdict-box{flex:1;text-align:center;font-weight:700;font-size:14px;border:2px solid #333;border-radius:6px;padding:5px;color:#555;min-width:60px;}
.verdict-box.accept{border-color:var(--green);color:var(--green);}
.verdict-box.reject{border-color:var(--red);color:var(--red);}
/* Leaderboard */
.lb-title{font-size:20px;font-weight:700;color:#fff;text-align:center;margin-bottom:12px;}
.lb-table{width:100%;border-collapse:collapse;font-size:14px;}
.lb-table th{background:var(--red);color:#fff;padding:7px 5px;text-align:center;}
.lb-table td{border:1px solid #333;color:#fff;padding:6px 5px;text-align:center;}
.lb-table td:first-child{background:rgba(128,46,198,.3);font-weight:700;}
/* Winner */
.winner-inner{flex:1;display:flex;flex-direction:column;align-items:center;background:#000;padding:20px 24px 28px;}
.winner-game-title{font-size:32px;font-weight:700;color:var(--red);text-align:center;margin-top:10px;}
.trophy{font-size:72px;text-align:center;margin:8px 0 4px;}
.champion-label{font-size:22px;font-weight:700;color:#fff;text-align:center;margin-bottom:10px;}
.winner-name-box{background:var(--red);border-radius:8px;padding:10px 32px;font-size:20px;font-weight:700;color:#fff;margin-bottom:16px;}
.winner-table{width:85%;border-collapse:collapse;font-size:14px;margin-bottom:20px;}
.winner-table th{background:var(--red);color:#fff;padding:7px;text-align:center;}
.winner-table td{border:1px solid #333;color:#fff;padding:6px 5px;text-align:center;font-weight:700;}
.winner-table td:first-child{color:#888;}
/* Utilities */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--cyan);color:#000;font-weight:700;font-size:15px;padding:10px 24px;border-radius:20px;display:none;z-index:999;font-family:Calibri,sans-serif;white-space:nowrap;}
#loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:1000;flex-direction:column;gap:16px;}
.spinner{width:48px;height:48px;border:5px solid #333;border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.inner::-webkit-scrollbar{width:4px;}
.inner::-webkit-scrollbar-track{background:#000;}
.inner::-webkit-scrollbar-thumb{background:var(--purple);border-radius:2px;}