*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:#080a18;font-family:Arial,sans-serif;touch-action:none;-webkit-tap-highlight-color:transparent}
body{display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#263766,#080a18 72%)}
#wrap{position:relative;width:min(100vw,calc(100dvh * 16 / 9),1280px);height:min(100dvh,calc(100vw * 9 / 16),720px);aspect-ratio:16/9;box-shadow:0 30px 90px #000b;overflow:hidden;border-radius:12px}
canvas{display:block;width:100%;height:100%;cursor:pointer;object-fit:contain}
#sound{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));border:1px solid #ffffff66;background:#0c1029dd;color:#fff;border-radius:999px;width:48px;height:48px;font-size:21px;cursor:pointer;z-index:3}
#result-modal{position:fixed;inset:0;background:#040617ee;display:none;place-items:center;padding:clamp(10px,3vw,22px);color:#fff;z-index:5}
#result-modal.open{display:grid}.card{width:min(650px,94vw);max-height:92%;overflow:auto;background:#111731f5;border:2px solid #69f1df;border-radius:26px;padding:28px;box-shadow:0 25px 80px #000b}
.card h2{font-size:clamp(23px,4vw,34px);margin:0 0 6px;text-align:center}.card .summary{text-align:center;color:#b9c8e2;margin:0 0 22px}
#score-form{display:flex;gap:10px;margin-bottom:24px}#email{flex:1;min-width:0;border:1px solid #526080;background:#090d20;color:#fff;padding:14px 16px;border-radius:12px;font-size:16px}
.action{border:0;background:#69f1df;color:#081229;padding:13px 18px;border-radius:12px;font-weight:800;cursor:pointer}.secondary{background:#273052;color:#fff}
.board-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.board-title h3{margin:4px 0 10px}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:10px 8px;text-align:left;border-bottom:1px solid #ffffff18}th{color:#7ff8e7;font-size:12px;letter-spacing:1px}td:nth-child(1){width:38px}td:nth-child(3),th:nth-child(3){text-align:right}
#form-error{min-height:18px;color:#ff91a9;font-size:13px;margin:-14px 0 10px}.modal-actions{display:flex;justify-content:center;margin-top:20px}
@media(max-width:700px){#wrap{border-radius:0}.card{padding:18px;border-radius:18px}#score-form{margin-bottom:15px}.card .summary{margin-bottom:14px}th,td{padding:7px 6px}.modal-actions{margin-top:12px}}
@media(min-width:601px){
  body{display:block;padding:0}
  #wrap{width:100vw;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
  canvas{width:100%;height:100%;object-fit:fill}
}
@media(orientation:portrait) and (max-width:600px){
  body{display:block;padding:0}
  #wrap{width:100vw;height:100dvh;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
  canvas{width:100%;height:100%;object-fit:fill}
  #sound{width:42px;height:42px;right:10px;bottom:10px;font-size:18px}
  #result-modal{align-items:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
  .card{width:100%;max-width:520px;max-height:calc(100dvh - 24px);padding:20px 16px;border-radius:20px}
  #score-form{flex-direction:column;gap:9px}
  #email,.action{width:100%;min-height:46px}
  .modal-actions .action{width:auto;min-width:190px}
  table{font-size:13px;table-layout:fixed}
  th:nth-child(1),td:nth-child(1){width:34px}
  th:nth-child(2),td:nth-child(2){overflow-wrap:anywhere}
  th:nth-child(3),td:nth-child(3){width:65px}
}
@media(orientation:landscape) and (max-height:500px){.card{width:min(720px,94vw);padding:14px 22px}.card h2{font-size:24px}.card .summary{margin:2px 0 9px}#score-form{margin-bottom:8px}#form-error{margin:-5px 0 3px;min-height:14px}.board-title h3{margin:0 0 4px}th,td{padding:5px 7px}.modal-actions{margin-top:8px}.action{padding:9px 14px}}