*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; background:#0d0a1f; color:#fff;
  font-family:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none; }
canvas{ position:fixed; inset:0; width:100%; height:100%; display:block; }
[hidden]{ display:none !important; }
button{ font:inherit; color:#fff; cursor:pointer; }

/* ---- HUD ---- */
#hud{ position:fixed; inset:0; pointer-events:none; }
#hud button{ pointer-events:auto; }
.bar.top{ position:absolute; left:0; right:0; top:0; display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 0; text-shadow:0 1px 6px #000; }
.room b{ font-weight:400; font-size:20px; }
.net{ display:block; font-size:11px; opacity:.7; font-family:system-ui,sans-serif; margin-top:2px; }
.net.off{ color:#ff8a8a; opacity:1; }
.count{ display:flex; gap:12px; font-size:13px; font-family:system-ui,sans-serif; opacity:.9; }
.count b{ font-family:"Dela Gothic One",sans-serif; font-weight:400; font-size:18px; font-variant-numeric:tabular-nums; }

.players{ position:absolute; left:16px; top:calc(env(safe-area-inset-top) + 58px); display:flex; flex-direction:column; gap:4px;
  font-size:12px; font-family:system-ui,sans-serif; }
.players span{ display:flex; align-items:center; gap:6px; text-shadow:0 1px 4px #000; }
.players i{ width:10px; height:10px; border-radius:3px; display:inline-block; }

.log{ position:absolute; left:0; right:0; top:calc(env(safe-area-inset-top) + 60px); display:flex; flex-direction:column; align-items:center; gap:6px; padding:0 16px; }
.log p{ max-width:100%; font-size:14px; padding:6px 14px; border-radius:999px; background:rgba(13,10,31,.7); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.15); animation:logIn .25s ease-out; transition:opacity .6s; text-align:center; }
.log p.big{ font-size:16px; border-color:#ff4f7b; box-shadow:0 0 18px rgba(255,79,123,.5); }
.log p em{ font-style:normal; color:#ffd04a; }
.log p.out{ opacity:0; }
@keyframes logIn{ from{ transform:translateY(-8px); opacity:0; } }

.hit{ position:absolute; left:0; right:0; top:30%; text-align:center; line-height:1; transition:opacity .5s; }
.hit b{ font-weight:400; font-size:72px; color:#fff; text-shadow:0 0 20px #ff4f7b, 0 0 50px #ffb83f; font-variant-numeric:tabular-nums; }
.hit small{ display:block; font-size:20px; color:#ffd04a; margin-top:4px; letter-spacing:.1em; }
.hit.pop b{ animation:pop .12s ease-out; }
.hit.fade{ opacity:0; }
@keyframes pop{ 0%{ transform:scale(1.25); } 100%{ transform:scale(1); } }

.tools{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom) + 14px);
  display:flex; gap:6px; padding:6px; border-radius:20px; background:rgba(13,10,31,.75); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14); }
.mode{ width:76px; padding:8px 0 7px; border-radius:14px; border:none; background:transparent; font-size:13px; opacity:.7; }
.mode i{ display:block; font-style:normal; font-size:18px; line-height:1.2; margin-bottom:2px; }
.mode.on{ background:linear-gradient(135deg,#ff4f7b,#ff9a3c); opacity:1; box-shadow:0 0 16px rgba(255,79,123,.5); }
.menu{ position:absolute; right:12px; bottom:calc(env(safe-area-inset-bottom) + 92px); display:flex; flex-direction:column; gap:6px; }
.menu button{ font-size:12px; padding:8px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(13,10,31,.7); backdrop-filter:blur(4px); }
.menu button:active,.mode:active{ transform:scale(.95); }
.help{ position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 84px); text-align:center; font-size:12px;
  font-family:system-ui,sans-serif; opacity:.6; text-shadow:0 1px 4px #000; }

/* 他の人のカーソル */
#labels{ position:fixed; inset:0; pointer-events:none; overflow:hidden; }
#labels span{ position:absolute; left:0; top:0; font-size:11px; font-family:system-ui,sans-serif; white-space:nowrap;
  padding:2px 7px; border-radius:999px; color:#0d0a1f; font-weight:700; transform:translate(-50%,-140%); transition:opacity .4s; }
#labels span::after{ content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:inherit; }

/* ---- 画面 ---- */
.screen{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:24px 16px; text-align:center; background:radial-gradient(ellipse at center, rgba(13,10,31,.35), rgba(13,10,31,.85)); }
h1{ font-size:clamp(52px,16vw,104px); line-height:1.05; font-weight:400; }
h1 span{ display:block; }
h1 .b{ font-size:.6em; color:#ffd04a; text-shadow:0 0 22px rgba(255,200,70,.8); }
h1 .d{ color:#ff4f7b; text-shadow:0 0 26px rgba(255,79,123,.9); letter-spacing:.04em; }
.tag{ font-size:17px; opacity:.9; }
.name{ font-size:14px; display:flex; align-items:center; gap:8px; margin-top:6px; }
input{ font:inherit; font-size:16px; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
  border-radius:12px; padding:10px 12px; width:180px; outline:none; user-select:text; -webkit-user-select:text; }
input:focus{ border-color:#ff4f7b; }
.btns{ display:flex; flex-direction:column; gap:10px; width:min(300px,100%); margin-top:6px; }
.btn{ font-size:17px; padding:14px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(20,12,40,.6); }
.btn.main{ border:none; background:linear-gradient(90deg,#ff4f7b,#ff9a3c); box-shadow:0 0 24px rgba(255,79,123,.55); font-size:19px; }
.btn:active{ transform:scale(.96); }
.join{ display:flex; gap:8px; }
.join input{ flex:1; width:auto; min-width:0; text-transform:uppercase; text-align:center; letter-spacing:.15em; }
.join .btn{ padding:10px 20px; }
.hint{ font-size:12px; opacity:.6; font-family:system-ui,sans-serif; }

/* スマホでは参加者は色だけ並べる（真ん中のお知らせと重ならないように） */
@media (max-width:600px){
  .players{ flex-direction:row; flex-wrap:wrap; max-width:110px; }
  .players span{ font-size:0; gap:0; }
  .log{ top:calc(env(safe-area-inset-top) + 84px); }
}