
:root {
  --bg:#07101d;
  --panel:rgba(10,18,32,.88);
  --cyan:#00ffe1;
  --purple:#7c3aed;
  --gold:#ffd166;
  --text:#fff;
  --muted:#b8c7d9;
  --danger:#ff4d7d;
  --good:#52ffa8;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at top left,rgba(0,255,225,.12),transparent 30%),radial-gradient(circle at top right,rgba(124,58,237,.14),transparent 32%),linear-gradient(180deg,#07101d,#04070d);color:var(--text);font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}
a{color:inherit}
.eggy-pool-nav{width:100%;position:sticky;top:0;z-index:99999;background:linear-gradient(180deg,rgba(7,12,20,.96),rgba(10,16,28,.92));border-bottom:1px solid rgba(0,255,225,.16);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.eggy-pool-nav-inner{width:100%;max-width:1400px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.pool-nav-logo{color:var(--cyan);font-size:22px;font-weight:900;letter-spacing:1px;text-decoration:none;text-shadow:0 0 14px rgba(0,255,225,.35)}
.pool-nav-links{display:flex;align-items:center;gap:14px}
.pool-nav-links a{position:relative;padding:10px 16px;border-radius:14px;color:#fff;text-decoration:none;font-weight:800;font-size:15px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);transition:.22s ease}
.pool-nav-links a:hover{color:#081018;background:linear-gradient(135deg,var(--cyan),var(--purple));border-color:rgba(0,255,225,.4);transform:translateY(-2px);box-shadow:0 0 20px rgba(0,255,225,.22)}
.page{width:min(1450px,calc(100% - 24px));margin:18px auto 40px}
.hero{border:1px solid rgba(0,255,225,.16);background:linear-gradient(145deg,rgba(0,255,225,.08),rgba(124,58,237,.09)),rgba(255,255,255,.04);border-radius:26px;padding:24px;box-shadow:0 20px 70px rgba(0,0,0,.35)}
.hero h1{margin:0 0 8px;color:var(--cyan);font-size:clamp(32px,5vw,62px);letter-spacing:1px;text-shadow:0 0 22px rgba(0,255,225,.25)}
.hero p{color:var(--muted);font-size:17px;margin:0}
.card{background:var(--panel);border:1px solid rgba(0,255,225,.14);border-radius:22px;padding:16px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.btn,button{border:0;border-radius:14px;padding:11px 15px;background:linear-gradient(135deg,var(--cyan),var(--purple));color:#07101d;font-weight:900;cursor:pointer;transition:.18s ease}
.btn:hover,button:hover{transform:translateY(-1px);box-shadow:0 0 22px rgba(0,255,225,.2)}
button.secondary,.btn.secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12)}
button.danger{background:linear-gradient(135deg,#ff4d7d,#ff9f1c);color:#15060a}
button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
input,select{width:100%;background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(0,255,225,.18);border-radius:14px;padding:13px 14px;outline:none;font-weight:700}
.panel-title{margin:0 0 12px;color:var(--cyan);font-size:18px}
.status-line{color:var(--muted);font-size:13px;margin:8px 0 0}
.entry-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
.nick-box{display:grid;gap:12px}
.lobby-grid{display:grid;grid-template-columns:310px 1fr 360px;gap:16px;margin-top:18px;align-items:start}
.player-list,.challenge-list{display:grid;gap:9px}
.player-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-radius:14px;background:rgba(255,255,255,.09);border:1px solid rgba(0,255,225,.15);color:#fff;font-weight:900;text-shadow:0 0 10px rgba(0,255,225,.22);cursor:pointer}
.player-item:hover,.player-item.selected{background:rgba(0,255,225,.13);border-color:rgba(0,255,225,.55)}
.player-meta{color:var(--good);font-size:11px;font-weight:800}
.challenge-item,.chat-line{padding:11px;border-radius:14px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.08)}
.challenge-item small{display:block;color:var(--muted);margin-top:4px}
.chat-box{min-height:430px;max-height:58vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.20);border-radius:18px;padding:12px}
.chat-line b{color:var(--cyan)}
.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.room-grid{display:grid;grid-template-columns:1fr 330px;gap:16px;margin-top:18px}
.pool-hud{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;align-items:center;gap:12px;background:rgba(0,0,0,.5);border:1px solid rgba(0,255,225,.18);border-radius:18px;padding:14px 18px;backdrop-filter:blur(12px);box-shadow:0 0 25px rgba(0,255,225,.08);color:#fff;margin-bottom:14px}
.hud-pill{background:rgba(255,255,255,.06);border:1px solid rgba(0,255,225,.12);border-radius:14px;padding:10px 12px;text-align:center;font-weight:900}
.hud-pill small{display:block;color:var(--muted);font-size:11px;font-weight:700;margin-bottom:2px}
.turn-active{color:var(--good);text-shadow:0 0 12px rgba(82,255,168,.24)}
.turn-wait{color:var(--gold)}
.pool-stage{position:relative;width:100%;display:flex;justify-content:center;align-items:center;padding:30px}
.table-light{position:absolute;width:70%;height:120px;top:0;background:radial-gradient(circle,rgba(0,255,225,.18),transparent 70%);filter:blur(35px);pointer-events:none}
.pool-table-shell{position:relative;padding:24px;border-radius:34px;background:linear-gradient(145deg,#4f2d12,#2e1607);box-shadow:inset 0 3px 12px rgba(255,255,255,.08),inset 0 -6px 16px rgba(0,0,0,.55),0 0 40px rgba(0,255,225,.10),0 24px 60px rgba(0,0,0,.65);width:100%}
#poolCanvas{display:block;width:100%;max-width:1100px;aspect-ratio:2/1;border-radius:20px;background:radial-gradient(circle at top,rgba(255,255,255,.08),transparent 40%),linear-gradient(180deg,#0f7a4f,#09593a);box-shadow:inset 0 0 40px rgba(0,0,0,.45),inset 0 0 80px rgba(0,0,0,.35);touch-action:none}
.table-overlay{position:absolute;inset:24px;border-radius:20px;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.012),rgba(255,255,255,.012) 2px,transparent 2px,transparent 6px);pointer-events:none}
.notice{margin-top:10px;color:var(--muted);font-size:13px}
.rule-box{display:grid;gap:8px;margin-bottom:12px}
.rule-row{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06)}
.rule-row b{color:#fff}
.rule-row span{color:var(--cyan);font-weight:900}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:100000;padding:16px}
.modal.show{display:flex}
.modal-card{width:min(460px,100%);background:#0b1424;border:1px solid rgba(0,255,225,.22);border-radius:22px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.modal-card h3{margin:0 0 8px;color:var(--cyan)}
@media(max-width:1000px){.entry-grid,.lobby-grid,.room-grid{grid-template-columns:1fr}.chat-box{min-height:260px;max-height:360px}.pool-hud{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.eggy-pool-nav-inner{flex-direction:column;align-items:stretch;gap:12px}.pool-nav-logo{text-align:center}.pool-nav-links{width:100%;justify-content:center;flex-wrap:wrap}.pool-nav-links a{flex:1 1 auto;text-align:center}.page{width:min(100% - 12px,1450px);margin-top:8px}.hero{padding:16px}.pool-stage{padding:8px}.pool-table-shell{padding:12px;border-radius:22px}#poolCanvas{border-radius:14px}.pool-hud{grid-template-columns:1fr;text-align:center}}
