@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DM+Sans:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a14;--bg-2: #0e1026;--panel: #14162b;--panel-2: #1f2241;--text: #e5e7ff;--muted: #8c90b0;--accent: #f2d14f;--accent-2: #6cf1c8;--danger: #ff6b6b;--border: #25294a;--shadow: 0 18px 50px rgba(0, 0, 0, .35);--title: "Press Start 2P", monospace;--sans: "DM Sans", system-ui, -apple-system, sans-serif}body{font-family:var(--sans);background:radial-gradient(circle at 20% 20%,#1c1f3c 0,transparent 28%),radial-gradient(circle at 80% 0%,#1a1d35 0,transparent 25%),linear-gradient(135deg,#090a12,#08081b 50%,#0a0d20);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}.page-shell{position:relative;width:100%;max-width:1200px;min-height:calc(100vh - 4rem)}.bg-aurora,.bg-grid{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:24px}.bg-aurora{background:radial-gradient(ellipse at 10% 10%,rgba(95,234,255,.14),transparent 40%),radial-gradient(ellipse at 80% 0%,rgba(255,244,134,.12),transparent 35%),radial-gradient(ellipse at 50% 80%,rgba(144,124,255,.12),transparent 40%);filter:blur(4px)}.bg-grid{background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:24px 24px;opacity:.5}.content{position:relative;z-index:1;background:linear-gradient(180deg,#13152be6,#0b0c17e6);border:2px solid var(--border);border-radius:20px;padding:2rem;box-shadow:var(--shadow)}.hero{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;margin-bottom:1.5rem}.hero-crest{position:relative;width:92px;height:92px}.crest-shield{width:100%;height:100%;border-radius:16px;background:linear-gradient(135deg,#1c2042,#0f1126);border:3px solid #2f355e;display:grid;place-items:center;font-family:var(--title);color:var(--accent);font-size:.9rem;letter-spacing:1px;box-shadow:0 0 0 4px #0a0b1b,0 14px 30px #00000059}.crest-pulse{position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;border:1px dashed rgba(255,255,255,.14);border-radius:20px;animation:spin 14s linear infinite}.hero-copy h1{font-family:var(--title);font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.6;margin-bottom:.5rem}.eyebrow{text-transform:uppercase;letter-spacing:.2em;color:var(--accent-2);font-size:.7rem;margin-bottom:.5rem}.subtitle{color:var(--muted);line-height:1.5;max-width:760px}.hero-meta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.75rem}.hero-flags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.flag{background:#ffffff0a;border:1px solid var(--border);color:var(--text);padding:.4rem .8rem;border-radius:10px;font-size:.85rem;letter-spacing:.03em}.flag.accent{background:#f2d14f1f;border-color:#f2d14f80;color:var(--accent)}.stat-badge{min-width:120px;padding:.9rem;background:var(--panel);border:2px solid #1f223f;border-radius:12px;box-shadow:0 10px 30px #00000059,inset 0 0 0 2px #ffffff05}.stat-badge .label{color:var(--muted);font-size:.85rem;margin-bottom:.15rem}.stat-badge .value{font-family:var(--title);color:var(--accent);font-size:.95rem}.arena{margin-top:1.5rem}.board{display:grid;grid-template-columns:1.1fr 1fr;gap:.9rem}.board.room-board{grid-template-columns:1.1fr 1fr;grid-auto-rows:minmax(0,auto)}.pixel-card{background:linear-gradient(145deg,var(--panel),var(--panel-2));border:2px solid #1d1f3a;border-radius:16px;padding:1.05rem;box-shadow:0 12px 25px #0006,inset 0 0 0 2px #ffffff08;position:relative;overflow:hidden}.pixel-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 30%);pointer-events:none}.panel{display:flex;flex-direction:column;gap:1rem}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.chip{border-radius:12px;border:1px solid rgba(255,255,255,.08);padding:.4rem .7rem;font-size:.85rem;color:var(--text);background:#ffffff0a;letter-spacing:.02em}.chip.accent{color:#1c1700;background:var(--accent);border-color:#0003}.chip.ghost{color:var(--muted);background:#ffffff05;border-color:#ffffff0a}.crystal-wrap{background:radial-gradient(circle at 30% 20%,rgba(108,241,200,.12),transparent 45%),radial-gradient(circle at 80% 20%,rgba(242,209,79,.18),transparent 35%),linear-gradient(180deg,#ffffff05,#00000026);border-radius:14px;border:1px solid rgba(255,255,255,.06);padding:1rem}.timer-crystal{position:relative;display:grid;place-items:center;padding:1.5rem;margin-bottom:.75rem;background:radial-gradient(circle at 50% 30%,#6cf1c82e,#0f1125e6);border-radius:12px;border:2px solid #2c3056;overflow:hidden}.crystal-glow{position:absolute;width:160%;height:160%;background:conic-gradient(from 90deg,#f2d14f1f,#6cf1c833,#f2d14f1f);animation:slow-rotate 12s linear infinite;opacity:.4}.crystal-glow.active{opacity:.7;animation-duration:8s}.time-display{position:relative;font-family:var(--title);font-size:2.6rem;color:#f8f9ff;text-shadow:0 0 18px rgba(108,241,200,.8)}.mode-label{position:relative;margin-top:.3rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.phase-track{width:100%;height:12px;background:#ffffff14;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}.phase-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .2s ease}.phase-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem;margin-top:.4rem}.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}.btn{font-family:var(--sans);font-weight:700;letter-spacing:.03em;padding:.85rem 1rem;border:2px solid #1f223f;background:var(--panel-2);color:var(--text);border-radius:12px;cursor:pointer;transition:transform .1s ease,box-shadow .2s ease,background .2s ease}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 20px #00000040}.btn-primary{background:linear-gradient(135deg,#f2d14f,#ffb347);color:#1a1300;border-color:#ffd86b}.btn-secondary{background:linear-gradient(135deg,#1f6b5f,#1b4d4f);border-color:#2b8574}.btn-tertiary{background:#ffffff0a;border-color:#ffffff14}.btn-small{padding:.55rem .8rem;font-size:.9rem}.btn-battle{margin-top:1rem;width:100%;background:linear-gradient(135deg,#6cf1c8,#5ac2ff);color:#08101a;border-color:#77ffe3}.phase-tags{display:flex;gap:.5rem;flex-wrap:wrap}.castle-grounds{display:flex;flex-direction:column;gap:.75rem}.castle-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:.4rem}.brick{position:relative;border:2px solid #242845;background:linear-gradient(145deg,#161a33,#0f1126);color:var(--muted);text-align:center;padding:.75rem .5rem;border-radius:10px;font-family:var(--title);font-size:.8rem;transition:all .2s ease;overflow:hidden}.brick:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);opacity:0;transition:opacity .2s ease}.brick.built{color:#1e1800;background:linear-gradient(135deg,#f2d14f,#ffb347);border-color:#f8e07a;box-shadow:0 8px 20px #f2d14f59}.brick.built:after{opacity:1}.banner{text-align:center;color:var(--muted);font-size:.95rem;padding:.65rem;border-radius:12px;border:1px dashed rgba(255,255,255,.08);background:#ffffff05}.orders-panel .orders-list{list-style:none;display:grid;gap:.45rem;color:var(--muted)}.orders-panel .orders-list li{padding-left:1rem;position:relative}.orders-panel .orders-list li:before{content:"✦";position:absolute;left:0;color:var(--accent);font-size:.8rem;top:.1rem}.room-meta{grid-column:span 2}.room-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.connection-status{font-size:.9rem;color:#64f4ac}.connection-status.disconnected{color:var(--muted)}.builders-panel{grid-column:span 2}.participants-list{display:flex;flex-direction:column;gap:.6rem}.participant-item{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.85rem;background:#ffffff05;border:1px solid rgba(255,255,255,.04);border-radius:12px;transition:transform .1s ease,border-color .2s ease}.participant-item.current-user{border-color:var(--accent);background:#f2d14f14}.participant-item:hover{transform:translateY(-1px)}.avatar{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#2b2f52,#1e213f);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;font-family:var(--title);color:var(--accent);font-size:.9rem}.participant-meta{display:flex;flex-direction:column;gap:.35rem}.name-row{display:flex;gap:.5rem;align-items:center}.participant-name{font-weight:700}.title-chip{font-size:.8rem;padding:.2rem .5rem;border-radius:8px;background:#f2d14f29;color:var(--accent);border:1px solid rgba(242,209,79,.4)}.title-chip.ghost{background:#ffffff0f;color:var(--muted);border-color:#ffffff1a}.brick-meter{position:relative;width:100%;height:8px;background:#ffffff0f;border-radius:10px;overflow:hidden}.brick-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#6cf1c8,#5ac2ff)}.participant-count{font-family:var(--title);color:#f2d14f;font-size:1.1rem}.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;align-items:center;justify-content:center;z-index:1000}.modal.show{display:flex}.modal-content{background:var(--panel);padding:2rem;border-radius:16px;border:2px solid #1f223f;box-shadow:var(--shadow);max-width:420px;width:90%}.modal-content h2{font-family:var(--title);font-size:1.1rem;margin-bottom:.6rem}.modal-content p{color:var(--muted);margin-bottom:1rem}.modal-content input{width:100%;padding:.85rem;font-size:1rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#ffffff0a;color:var(--text);margin-bottom:1rem}.modal-content input:focus{outline:2px solid var(--accent);border-color:var(--accent)}.modal-actions{display:flex;gap:.5rem;justify-content:flex-end}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slow-rotate{to{transform:rotate(360deg)}}@media (max-width: 960px){.hero{grid-template-columns:1fr}.hero-right{justify-content:flex-start}.board{grid-template-columns:1fr;gap:.75rem}.room-meta,.builders-panel{grid-column:span 1}body{padding:1.25rem}.pixel-card{padding:.95rem}}@media (max-width: 640px){.controls-grid{grid-template-columns:1fr}.hero-copy h1{font-size:1rem}.crest-shield{width:80px;height:80px}.content{padding:1.25rem}.flag,.chip{font-size:.8rem}.stat-badge{min-width:auto}}