/* ===== PJ Stadium Badminton — styles ===== */
:root{
  --sky:#8fd3ff; --sky2:#dff4ff;
  --court:#2e9e5b;
  --ink:#1b2a41; --paper:#ffffff;
  --pop:#ff5d8f; --sun:#ffd23f; --mint:#3ddc97; --blue:#4ea8ff; --purple:#9b5de5;
  --shadow:0 10px 0 rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Fredoka",system-ui,sans-serif;color:var(--ink);background:#101b2d;
  display:flex;align-items:center;justify-content:center;overflow:hidden}

/* the game is designed at 960x540 and scaled with transform to fit the window (see fitFrame in main.js) */
.frame{width:960px;height:540px;flex:none;border-radius:28px;overflow:hidden;position:relative;
  transform:scale(var(--s,1));transform-origin:center;
  box-shadow:0 30px 60px rgba(0,0,0,.45);background:linear-gradient(var(--sky2),var(--sky))}
.screen{display:none;position:absolute;inset:0}
.screen.active{display:block}

/* buttons */
.btn{font:inherit;font-weight:700;font-size:20px;border:0;border-radius:18px;padding:12px 22px;cursor:pointer;color:#fff;box-shadow:var(--shadow);transition:transform .1s}
.btn:active{transform:translateY(6px);box-shadow:0 4px 0 rgba(0,0,0,.18)}
.btn.pink{background:var(--pop)} .btn.blue{background:var(--blue)} .btn.mint{background:var(--mint);color:var(--ink)} .btn.purple{background:var(--purple)} .btn.sun{background:var(--sun);color:var(--ink)}
.btn.small{font-size:16px;padding:10px 18px;border-radius:14px;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.btn.off{filter:grayscale(1) brightness(.9)}

/* ---------- HOME ---------- */
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:20px;position:relative}
.home .title h1{font-size:64px}
.crowd{position:absolute;inset:auto 0 0 0;height:38%;opacity:.55;background:
    radial-gradient(circle at 10% 30%, #ff9f1c 6px, transparent 7px),
    radial-gradient(circle at 25% 60%, #ff5d8f 6px, transparent 7px),
    radial-gradient(circle at 40% 25%, #4ea8ff 6px, transparent 7px),
    radial-gradient(circle at 55% 65%, #3ddc97 6px, transparent 7px),
    radial-gradient(circle at 70% 30%, #ffd23f 6px, transparent 7px),
    radial-gradient(circle at 85% 60%, #9b5de5 6px, transparent 7px),
    radial-gradient(circle at 95% 20%, #ff9f1c 6px, transparent 7px);
  background-size:120px 60px}
.stand{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(#5b6b86,#3b4a63);clip-path:polygon(0 100%,0 40%,100% 10%,100% 100%)}
.title{position:relative;z-index:1;text-align:center}
.title h1{margin:0;font-size:72px;line-height:1;letter-spacing:2px;color:#fff;text-shadow:0 6px 0 #d9376e,0 12px 0 rgba(0,0,0,.25)}
.title p{margin:6px 0 0;font-size:24px;font-weight:600}
.name{position:relative;z-index:1;display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:6px 16px 6px 8px;box-shadow:var(--shadow);width:min(480px,90%)}
.name input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:22px;font-weight:600;color:var(--ink);background:transparent}
.name small{color:#8a97ab;font-weight:600;white-space:nowrap}
.avatar{width:44px;height:44px;border-radius:50%;background:#eef3fa;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center}
.avatar svg{width:100%;height:100%}
.row{position:relative;z-index:1;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.chips{position:relative;z-index:1;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.75);padding:8px 12px;border-radius:999px}
.chip{font-weight:700;padding:6px 14px;border-radius:999px;background:#fff;cursor:pointer;user-select:none}
.chip.on{background:var(--sun)}
.corner{position:absolute;top:16px;right:16px;z-index:2;display:flex;gap:10px}
.notice{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:#101b2d;color:#fff;font-weight:600;padding:8px 18px;border-radius:12px;opacity:0;transition:opacity .3s;z-index:3;pointer-events:none}
.notice.show{opacity:1}

/* ---------- COLOURING ROOM ---------- */
.colour{height:100%;display:grid;grid-template-columns:1.25fr 1fr;gap:18px;padding:22px;background:linear-gradient(135deg,#ffe5f1,#e5f3ff)}
.panel{background:#fff;border-radius:22px;padding:14px 18px;box-shadow:var(--shadow);overflow:auto}
.panel h3{margin:0 0 8px;font-size:22px}
.opt{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.opt label{width:92px;font-weight:700;font-size:15px;flex:none}
.hint{font-size:14px;color:#8a97ab;font-weight:600}
.swatches{display:flex;gap:7px;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:10px;border:3px solid #fff;box-shadow:0 0 0 2px #d4dbe6;cursor:pointer}
.sw.on{box-shadow:0 0 0 3px var(--ink)}
.chip.sm{font-size:14px;padding:5px 12px;box-shadow:0 0 0 2px #d4dbe6}
.hairs{display:flex;gap:5px;flex-wrap:wrap}
.hair{width:40px;height:40px;border-radius:12px;background:#f3f6fb;cursor:pointer;box-shadow:0 0 0 2px #d4dbe6;overflow:hidden}
.hair.on{box-shadow:0 0 0 3px var(--ink);background:#fff6c2}
.hair svg{width:100%;height:100%}
.num{width:70px;font:inherit;font-weight:700;font-size:18px;border:3px solid #d4dbe6;border-radius:10px;padding:4px 8px;text-align:center}
.preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.preview p{margin:0;font-weight:600;color:#8a97ab;font-size:14px}
.preview-row{display:flex;align-items:center;gap:6px}
.preview-row b{font-size:13px;color:#8a97ab;display:block;text-align:center}

/* ---------- COURT ---------- */
.court-wrap{position:absolute;inset:0;background:linear-gradient(#bfe8ff 0 45%, #5b6b86 45% 46%, #46546c 46% 58%, #e9c38c 58% 60%, var(--court) 60%)}
.wall{position:absolute;top:45%;left:0;right:0;height:13%;background:repeating-linear-gradient(90deg,#4a5a75 0 60px,#52627f 60px 120px)}
.crowd{animation:bob 1.3s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.banner{position:absolute;top:33%;left:50%;transform:translateX(-50%);background:#101b2d;color:var(--sun);font-weight:700;font-size:34px;letter-spacing:6px;padding:6px 32px;border-radius:10px;border:4px solid var(--sun)}
#court{position:absolute;inset:0;width:100%;height:100%}
.score{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;background:#101b2d;color:#fff;border-radius:18px;padding:8px 18px;box-shadow:var(--shadow)}
.score:empty{display:none}
.score .p{display:flex;flex-direction:column;align-items:center;min-width:120px}
.score .p b{font-size:16px;opacity:.9} .score .p span{font-size:36px;line-height:1;font-weight:700}
.score .mid{font-size:14px;opacity:.8;text-align:center}
.dots{display:flex;gap:5px;margin-top:4px}
.dots i{width:12px;height:12px;border-radius:50%;background:#3a4a63;border:2px solid #6c7d9b}
.dots i.won{background:var(--sun);border-color:var(--sun)}
.toast{font-size:64px;font-weight:700;color:#fff;text-shadow:0 6px 0 var(--pop),0 10px 20px rgba(0,0,0,.4);animation:pop .6s ease-out infinite alternate}
.toast.small{font-size:40px}
@keyframes pop{from{transform:scale(.96)}to{transform:scale(1.04)}}
.hud{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:18px;background:rgba(16,27,45,.75);color:#fff;padding:6px 16px;border-radius:14px;font-weight:600;font-size:14px;white-space:nowrap}
.hud kbd{background:#fff;color:var(--ink);border-radius:6px;padding:1px 7px;font:inherit;font-weight:700}
.corner-btn{position:absolute;top:14px;left:14px}
.overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(16,27,45,.5);z-index:4}
.overlay.show{display:flex}
.overlay .info{margin:0;background:rgba(255,255,255,.9);padding:6px 18px;border-radius:12px;font-weight:600;font-size:18px}
.score.static{position:static;transform:none}
.panel.dialog{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(520px,92%);text-align:center}
.panel.dialog .name{width:100%}
.panel.dialog kbd{background:#eef3fa;border-radius:6px;padding:1px 7px;font:inherit;font-weight:700}
.online-step{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.joinrow{display:flex;gap:8px;align-items:center;width:100%}
.joinrow .name{flex:1}
.joinrow input{text-transform:uppercase;letter-spacing:4px}
.status{min-height:24px;line-height:1.5}
.status .code{display:block;font-size:48px;letter-spacing:10px;color:var(--pop);margin:4px 0}

/* ---------- WINNER ---------- */
.win{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #fff6c2, #ffd23f 45%, #ff9f1c)}
.win.sad{background:radial-gradient(circle at 50% 30%, #e5f3ff, #8fd3ff 45%, #4ea8ff)}
.win h2{margin:0;font-size:50px;color:#fff;text-shadow:0 5px 0 #d9376e,0 10px 0 rgba(0,0,0,.2);position:relative;animation:pop .7s ease-in-out infinite alternate}
.win p{margin:0;font-size:20px;font-weight:600;position:relative}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.prizes{display:flex;gap:40px;align-items:flex-end;position:relative;animation:rise .8s ease-out}
.prizes .sparkle{animation:twinkle 1s ease-in-out infinite alternate}
.win .row{position:relative}
.win .big{font-size:120px;line-height:1}
@keyframes rise{from{transform:translateY(60px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes twinkle{from{opacity:.2}to{opacity:1}}

/* ---------- touch controls (phones / tablets) ---------- */
.touch{display:none;position:absolute;bottom:16px;gap:14px;z-index:3}
.touch.left{left:18px} .touch.right{right:18px}
.touch button{width:74px;height:74px;border-radius:50%;border:0;font-size:30px;font-weight:700;color:#fff;
  background:rgba(16,27,45,.55);box-shadow:0 0 0 3px rgba(255,255,255,.6);touch-action:none;user-select:none;-webkit-user-select:none}
.touch button.hit{background:rgba(255,93,143,.8);width:90px;height:90px;font-size:40px}
.touch button.down{transform:scale(.92);background:rgba(255,210,63,.9);color:var(--ink)}
@media (pointer:coarse){
  .touch{display:flex}
  .hud{display:none}
}

/* ---------- portrait phones: ask to rotate ---------- */
.rotate{display:none;position:fixed;inset:0;z-index:50;background:#101b2d;color:#fff;align-items:center;justify-content:center;text-align:center;font-size:28px;font-weight:700;line-height:1.5;padding:30px}
@media (orientation:portrait) and (max-width:900px){ .rotate{display:flex} }
@media (orientation:portrait) and (max-width:900px){ .rotate div::first-line{font-size:80px} }