:root{color:#eef8f7;font-synthesis:none;background:#052d3a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 70% 0,#0d596a 0,#0000 38%),linear-gradient(145deg,#063c4b,#031e29);min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}main{flex-direction:column;min-height:100vh;display:flex}header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#042833cc;border-bottom:1px solid #fff2;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,58px);display:flex}h1{letter-spacing:-.04em;margin:2px 0 0;font-size:clamp(25px,3vw,42px)}h1 em{color:#ffd06a;vertical-align:top;font-size:.45em;font-style:normal}.eyebrow{letter-spacing:.15em;text-transform:uppercase;color:#81ced2;font-size:12px;font-weight:800}.teacher-link,.back{color:#d9eeee;background:#ffffff12;border:1px solid #fff2;border-radius:99px;padding:9px 13px;text-decoration:none}.card{background:#073746dd;border:1px solid #ffffff24;border-radius:24px;width:min(900px,100% - 28px);margin:6vh auto;padding:clamp(20px,4vw,42px);box-shadow:0 25px 70px #00151d99}.card h2{margin:8px 0 12px;font-size:clamp(24px,4vw,38px)}.join{text-align:center;width:min(620px,100% - 28px)}.join form{gap:10px;margin:26px 0;display:flex}.join input{text-align:center;text-transform:uppercase;letter-spacing:.18em;flex:1;min-width:0;font-size:24px;font-weight:900}.join button,.primary{color:#18333a;background:#ffd06a;border:0;border-radius:12px;padding:13px 20px;font-weight:900}input{color:#fff;background:#052c38;border:1px solid #ffffff36;border-radius:12px;padding:13px}.error{z-index:10;color:#fff;background:#bd4350;border-radius:12px;padding:12px 18px;position:fixed;top:90px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0008}.characters{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:22px 0;display:grid}.characters button{color:#fff;background:#ffffff0c;border:1px solid #ffffff25;border-radius:10px;padding:12px}.characters button.selected{color:#173640;background:#ffd06a;border-color:#ffd06a;font-weight:900}.initial{text-align:center;width:70px;margin:8px 0 20px;display:block}.team-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.team{background:#041f29aa;border-radius:16px;padding:15px}.team h3{margin:0 0 12px}.team-A{border-top:4px solid #ea6067}.team-B{border-top:4px solid #1ba7ba}.player{border-bottom:1px solid #ffffff13;justify-content:space-between;padding:9px 0;display:flex}.player b{text-transform:uppercase;color:#87ced2;font-size:11px}.ready{width:100%;margin:22px 0 0}.hint{text-align:center;color:#acd0d1;font-size:13px}.play{flex-direction:column;flex:1;min-height:0;display:flex}.roster-strip{background:#001b24aa;grid-template-columns:1fr 1fr;gap:10px;padding:8px clamp(12px,3vw,40px);display:grid}.roster-strip>div{align-items:center;gap:6px;display:flex;overflow:auto}.roster-strip>div:last-child{justify-content:flex-end}.roster-strip span{white-space:nowrap;background:#ffffff0d;border-radius:30px;padding:5px 8px;font-size:11px}.roster-strip span.active{color:#173640;background:#ffd06a;font-weight:900}.game-status{grid-template-columns:1fr auto auto;align-items:center;gap:18px;padding:10px clamp(12px,3vw,40px);display:grid}.game-status>div:first-child{align-items:center;gap:16px;display:flex}.game-status span{color:#a9d0d2}.clock{color:#70d3d7;font-size:25px;font-weight:900}.clock.warning{color:#ffd158;animation:.7s infinite alternate pulse}.ship{align-items:center;gap:7px;font-size:13px;display:flex}.ship span{color:#7ad3d7;font-size:20px;display:inline-block}.court{touch-action:none;border-radius:16px;width:calc(100% - 24px);height:min(55vw,520px);min-height:280px;margin:0 12px;display:block;box-shadow:0 14px 45px #001821}.court.enabled{outline:3px solid #ffd06a66}.result{text-align:center;background:#052f3df2;border:2px solid #ffd06a;border-radius:24px;place-content:center;display:grid;position:fixed;top:35%;bottom:35%;left:20%;right:20%}.result p{margin:0;font-size:36px}footer{text-align:center;color:#6fa6aa;margin-top:auto;padding:14px;font-size:11px}@keyframes pulse{to{transform:scale(1.08)}}@media (max-width:650px){header{padding:10px 14px}header .eyebrow{display:none}.teacher-link{font-size:12px}.card{margin:3vh auto}.team-grid,.roster-strip{grid-template-columns:1fr}.roster-strip>div:last-child{justify-content:flex-start}.game-status{grid-template-columns:1fr auto;gap:6px;padding:6px 10px}.game-status>div:first-child{display:block}.game-status>div:first-child span{font-size:11px;display:block}.ship{grid-column:1/-1;justify-content:center}.court{height:62vh;min-height:450px}.join form{display:grid}.result{top:30%;bottom:30%;left:8%;right:8%}}
