:root{
  --bg:#07090f; --ink:#e9f2ff; --dim:#7d8aa3; --line:rgba(255,255,255,.12);
  --g:#3dff9a; --p:#ff4f9a; --y:#ffd23f; --panel:rgba(14,19,32,.82);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif; -webkit-tap-highlight-color:transparent; }
body{ overflow-x:hidden; }
[hidden]{ display:none !important; }
button,input{ font:inherit; color:inherit; }
button{ cursor:pointer; }

.bg{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(61,255,154,.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 110%, rgba(255,79,154,.14), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    var(--bg); }

.screen{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  padding:calc(env(safe-area-inset-top) + 24px) 16px calc(env(safe-area-inset-bottom) + 24px); text-align:center; }

/* ---- タイトル ---- */
h1{ font-family:"Dela Gothic One",sans-serif; font-weight:400; line-height:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
h1 .a{ font-size:clamp(28px,8vw,44px); color:var(--g); text-shadow:0 0 18px rgba(61,255,154,.6); letter-spacing:.08em; }
h1 .b{ font-size:clamp(64px,20vw,112px); background:linear-gradient(180deg,#fff,#ffb3d4 55%,var(--p)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,79,154,.55)); }
.tag{ font-size:15px; color:var(--dim); letter-spacing:.1em; }
.name{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--dim); }
input{ background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:16px; outline:none; }
input:focus{ border-color:var(--g); box-shadow:0 0 0 3px rgba(61,255,154,.2); }
#name{ width:180px; }
.btns{ display:flex; flex-direction:column; gap:10px; width:min(320px,100%); }
.btns.row{ flex-direction:row; flex-wrap:wrap; justify-content:center; width:auto; }
.join{ display:flex; gap:8px; }
.join input{ flex:1; min-width:0; text-transform:uppercase; letter-spacing:.15em; }
.btn{ border:1px solid var(--line); background:rgba(255,255,255,.06); border-radius:14px; padding:12px 18px; font-size:15px; font-weight:700; transition:transform .08s, background .2s; }
.btn:hover{ background:rgba(255,255,255,.12); }
.btn:active{ transform:scale(.96); }
.btn.main{ border:none; color:#04140b; background:linear-gradient(135deg,var(--g),#a6ffcf); box-shadow:0 0 22px rgba(61,255,154,.35); }
.btn.small{ padding:8px 14px; font-size:13px; border-radius:10px; }
.btn.big{ font-size:20px; padding:16px 40px; }
.btn.on{ background:linear-gradient(135deg,var(--p),#ffb36b); color:#1a0410; box-shadow:0 0 22px rgba(255,79,154,.45); }
.cpu{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; color:var(--dim); }
.cpuBtns{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.hint{ font-size:12px; color:var(--dim); line-height:1.8; max-width:460px; }
.best{ font-size:13px; color:var(--y); }

/* ---- 待合 ---- */
#lobby{ justify-content:flex-start; }
.roomHead{ width:min(560px,100%); display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; }
.roomHead b{ font-family:"Dela Gothic One",sans-serif; font-weight:400; font-size:22px; }
.net{ display:block; font-size:12px; color:var(--dim); margin-top:2px; }
.net.off{ color:#ff8a8a; }
.headBtns{ display:flex; gap:6px; }
.lobbyList{ list-style:none; width:min(560px,100%); display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.lobbyList li{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--panel); border:1px solid var(--line); text-align:left; }
.lobbyList i{ width:14px; height:14px; border-radius:4px; flex:none; }
.lobbyList .nm{ flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lobbyList .st{ font-size:12px; color:var(--dim); }
.lobbyList .st.ok{ color:var(--g); font-weight:700; }
.lobbyMsg{ font-size:13px; color:var(--dim); line-height:1.8; min-height:3.6em; margin-top:8px; }

/* ---- 試合 ---- */
.race{ justify-content:flex-start; gap:12px; }
.arena{ display:block; width:min(720px,100%); height:clamp(190px,34vh,280px); border-radius:18px; border:1px solid var(--line);
  background:radial-gradient(ellipse 70% 90% at 50% 50%, rgba(61,255,154,.06), transparent 70%), rgba(5,7,12,.85); }
/* 波動砲のゲージ */
.gauge{ position:relative; width:min(720px,100%); height:30px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; padding:0 14px; font-size:12px; font-weight:700; }
.gauge i{ position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,rgba(61,255,154,.25),var(--g)); box-shadow:0 0 18px rgba(61,255,154,.6); transition:width .08s; }
.gauge span{ position:relative; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.gauge .gs{ color:var(--dim); font-family:"JetBrains Mono",monospace; font-weight:500; }
.gauge.big{ border-color:var(--y); box-shadow:0 0 16px rgba(255,210,63,.35); }
.gauge.big i{ background:linear-gradient(90deg,#ff4f9a,#ffd23f,#3dff9a,#4fc8ff,#b47bff); background-size:200% 100%; animation:rainbow 1s linear infinite; }
.gauge.big .gs{ color:var(--y); }
.gauge.shoot{ animation:shoot .35s ease-out; }
@keyframes rainbow{ to{ background-position:200% 0; } }
@keyframes shoot{ 0%{ transform:scale(1.04); box-shadow:0 0 40px var(--g); } 100%{ transform:none; } }
#timer.hurry{ color:var(--p); font-weight:700; }
body.hurt .bg{ animation:hurt .35s ease-out; }
@keyframes hurt{ 0%{ background-color:#5a0f24; } 100%{ background-color:var(--bg); } }
.raceBar{ width:min(720px,100%); display:flex; justify-content:space-between; align-items:center; gap:12px; font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--dim); }
.card{ position:relative; width:min(720px,100%); padding:clamp(18px,4vw,32px) 16px; border-radius:22px; background:var(--panel); border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,.45); overflow:hidden; display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.show{ font-family:"Dela Gothic One",sans-serif; font-size:clamp(24px,6.5vw,44px); line-height:1.3; word-break:keep-all; overflow-wrap:anywhere; }
.kana{ font-size:clamp(14px,3.6vw,18px); color:var(--dim); letter-spacing:.06em; }
.kana b{ color:var(--g); font-weight:400; }
.roma{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:clamp(18px,4.8vw,28px); letter-spacing:.04em; overflow-wrap:anywhere; }
.roma .t{ color:var(--g); text-shadow:0 0 10px rgba(61,255,154,.5); }
.roma .r{ color:#5d6a82; }
.roma u{ color:var(--ink); text-underline-offset:6px; text-decoration-color:var(--g); text-decoration-thickness:2px; }
.card.miss{ animation:shake .18s; border-color:var(--p); }
@keyframes shake{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.slash{ position:absolute; left:-10%; right:-10%; top:50%; height:4px; background:linear-gradient(90deg,transparent,#fff,var(--g),transparent);
  transform:rotate(-8deg) scaleX(0); opacity:0; pointer-events:none; box-shadow:0 0 20px var(--g); }
.card.cut .slash{ animation:slash .32s ease-out; }
@keyframes slash{ 0%{ transform:rotate(-8deg) scaleX(0); opacity:1; } 60%{ opacity:1; } 100%{ transform:rotate(-8deg) scaleX(1); opacity:0; } }
.quit{ background:none; border:1px solid var(--line); border-radius:8px; padding:3px 10px; font-size:12px; color:var(--dim); font-family:inherit; }
.raceMsg{ font-family:"Dela Gothic One",sans-serif; font-size:20px; color:var(--g); min-height:1.5em; text-shadow:0 0 14px rgba(61,255,154,.7); }
.raceMsg.big{ color:var(--y); text-shadow:0 0 16px rgba(255,210,63,.8); }
.raceMsg.ko{ color:var(--p); text-shadow:0 0 16px rgba(255,79,154,.8); }
.raceMsg.pop{ animation:pop .3s ease-out; }
.ime{ font-size:13px; color:#1a0410; background:var(--y); padding:6px 12px; border-radius:999px; }
/* スマホのキーボードを出すための入力欄。見えないけれど、タップで焦点を受け取れる */
.keys{ position:fixed; left:0; bottom:0; width:1px; height:1px; opacity:0; border:none; padding:0; font-size:16px; }
.count{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(7,9,15,.6);
  font-family:"Dela Gothic One",sans-serif; font-size:clamp(90px,30vw,180px); color:var(--g); text-shadow:0 0 40px rgba(61,255,154,.8); }
.count.go{ color:var(--p); text-shadow:0 0 40px rgba(255,79,154,.8); }
.count span{ animation:pop .5s ease-out; }
@keyframes pop{ 0%{ transform:scale(1.6); opacity:0; } 100%{ transform:scale(1); opacity:1; } }

/* ---- 結果 ---- */
h2{ font-family:"Dela Gothic One",sans-serif; font-weight:400; font-size:clamp(40px,12vw,72px); color:var(--y); text-shadow:0 0 24px rgba(255,210,63,.5); }
.resList{ list-style:none; width:min(560px,100%); display:flex; flex-direction:column; gap:8px; }
.resList li{ display:grid; grid-template-columns:2.2em minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:12px 16px; border-radius:14px; background:var(--panel); border:1px solid var(--line); text-align:left; }
.resList li.me{ border-color:var(--g); box-shadow:0 0 18px rgba(61,255,154,.25); }
.resList .rk{ grid-row:span 2; font-family:"Dela Gothic One",sans-serif; font-size:24px; text-align:center; }
.resList li:first-child .rk{ color:var(--y); }
.resList .nm{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:8px; }
.resList .nm i{ width:10px; height:10px; border-radius:3px; flex:none; }
.resList .tm{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:18px; text-align:right; }
.resList .tm.ko{ color:var(--p); }
.resList .sub{ grid-column:2 / 4; font-size:12px; color:var(--dim); }

@media (max-width:480px){
  .btns.row .btn{ flex:1 1 40%; }
}