:root{
  --bg1:#0b0e18; --bg2:#161d33; --ink:#eef2fb; --sub:#93a2c4;
  --panel:#131a2e; --line:rgba(143,160,198,.18);
  --accent:#5ad1ff; --accent2:#ffd24d;
  --hit:#37dd97; --blow:#ffb547; --lose:#ff5d76;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  background:radial-gradient(130% 90% at 50% 0%, var(--bg2), var(--bg1) 70%);
  color:var(--ink); overflow-x:hidden;
}
#app{max-width:480px; margin:0 auto; min-height:100dvh; padding:18px 16px 40px;
  display:flex; flex-direction:column;}

.screen{display:none; flex-direction:column; gap:14px; flex:1;}
.screen.on{display:flex; animation:fade .2s ease;}
.screen.center{align-items:center; justify-content:center; text-align:center;}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1}}

h1,h2{font-weight:900; letter-spacing:.02em;}
h2{font-size:20px; margin-top:6px;}
.sub{font-size:12.5px; color:var(--sub); line-height:1.8;}
.dim{color:var(--sub); font-size:12px; line-height:1.8;}

.logo{font-size:clamp(34px,11vw,52px); line-height:1; text-align:center; margin-top:3vh;
  background:linear-gradient(180deg,#fff,var(--accent) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.logo span{color:var(--accent2); -webkit-text-fill-color:var(--accent2); margin:0 .12em; font-size:.7em; vertical-align:.12em;}
.tag{text-align:center; color:var(--sub); font-size:13px; margin-top:-2px;}

.namebox{display:flex; align-items:center; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap;}
.namebox label{font-size:12px; color:var(--sub);}
.namebox input{background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:9px 12px; font:600 15px inherit; width:190px; text-align:center;}

.menu{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.menu.row2,.menu.row3{flex-direction:row;}
.menu.row2 .btn,.menu.row3 .btn{flex:1;}
#s-title .menu{margin-top:6px;}
#s-title .menu.row2,#s-title .menu.row3{margin-top:4px;}
#s-title .menu.row3 .btn,#s-title .menu.row2 .btn.ghost{padding:10px 6px; font-size:13px;}

.btn{border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:12px; padding:13px 16px; font:800 15px inherit; cursor:pointer;
  transition:transform .06s, border-color .15s, background .15s;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.4; cursor:default;}
.btn.big{padding:16px; font-size:16px;}
.btn.primary{background:linear-gradient(180deg,#7fe0ff,#3aa8e6); color:#06202b; border-color:transparent;
  box-shadow:0 4px 0 #1c6f9c;}
.btn.primary:active{box-shadow:0 1px 0 #1c6f9c;}
.btn.ghost{background:transparent; color:var(--sub);}

.back{align-self:flex-start; background:none; border:none; color:var(--sub);
  font:700 13px inherit; cursor:pointer; padding:2px 0;}

.myrate{text-align:center; color:var(--sub); font-size:12px; margin-top:14px;}
.myrate b{color:var(--ink);}
.offnote{text-align:center; color:var(--lose); font-size:11px;}

/* レートカード */
.ratecard{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:20px; text-align:center;}
.big-elo{font-size:44px; font-weight:900; letter-spacing:.02em; color:var(--accent);}
.rc-title{font-size:14px; font-weight:800; margin-top:2px;}
.rc-line{font-size:12px; color:var(--sub); margin-top:6px;}

/* マッチング */
.spinner{width:44px; height:44px; border-radius:50%;
  border:4px solid var(--line); border-top-color:var(--accent); animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.matchmsg{font-size:15px; font-weight:800;}
.matchsub{font-size:12px; color:var(--sub);}

.hint{font-size:12px; color:var(--sub); line-height:1.8; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px;}
.hint b{color:var(--accent);}

/* スロット & キーパッド */
.slots{display:flex; gap:10px; justify-content:center; margin:4px 0;}
.slot{width:54px; height:64px; border-radius:12px; background:var(--panel);
  border:2px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:900; transition:border-color .15s, transform .1s;}
.slot.fill{border-color:var(--accent); color:var(--accent); background:rgba(90,209,255,.1);}
.slot.cursor{border-color:var(--accent2); animation:blink 1s step-start infinite;}
@keyframes blink{50%{border-color:var(--line)}}

.keypad{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:6px;}
.keypad button{padding:15px 0; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font:900 19px inherit; cursor:pointer;}
.keypad button:active{transform:translateY(1px);}
.keypad button.used{opacity:.22; pointer-events:none;}
.keypad button.act{grid-column:span 1; font-size:12px; font-weight:700; color:var(--sub);}

.status{text-align:center; font-size:12.5px; color:var(--accent2); min-height:18px; line-height:1.6;}

/* 対戦画面 */
.playtop{display:flex; align-items:center; gap:10px; justify-content:space-between;}
.badge{background:rgba(90,209,255,.14); color:var(--accent); font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:999px;}
.roundno{font-size:13px; color:var(--sub);}
.roundno b{color:var(--ink); font-size:16px;}
.timer{font-size:13px; font-weight:800; color:var(--sub); font-variant-numeric:tabular-nums;}
.timer.warn{color:var(--lose);}

/* 進捗バー(どっちがゴールに近いか) */
.progress{display:flex; gap:8px;}
.pg{flex:1; min-width:0; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:9px 10px;}
.pg.me{border-color:rgba(90,209,255,.45); background:linear-gradient(180deg,rgba(90,209,255,.08),transparent);}
.pg.opp{border-color:rgba(255,93,118,.4); background:linear-gradient(180deg,rgba(255,93,118,.07),transparent);}
.pg-top{display:flex; justify-content:space-between; align-items:baseline; gap:6px;}
.pg-name{font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pg.me .pg-name{color:var(--accent);}
.pg.opp .pg-name{color:var(--lose);}
.pg-sub{font-size:10px; color:var(--sub); white-space:nowrap; flex:none;}
.pg-bar{display:flex; gap:4px; margin:7px 0 5px;}
.pg-bar i{flex:1; height:12px; border-radius:4px; background:rgba(143,160,198,.16);
  transition:background .3s, box-shadow .3s;}
.pg-bar i.on{background:var(--hit); box-shadow:0 0 8px rgba(55,221,151,.55);}
.pg.opp .pg-bar i.on{background:var(--lose); box-shadow:0 0 8px rgba(255,93,118,.55);}
.pg-bar.close i.on{animation:pulseBar .8s ease-in-out infinite;}
@keyframes pulseBar{50%{filter:brightness(1.5)}}
.pg-foot{font-size:10.5px; color:var(--sub); line-height:1.5;}
.pg-foot b{color:var(--ink); font-weight:900; letter-spacing:.12em;}

/* ターンバナー */
.turnbar{border-radius:10px; padding:11px; text-align:center; font-size:14px; font-weight:900;
  border:1px solid transparent;}
.turnbar.go{background:rgba(55,221,151,.16); color:var(--hit); border-color:rgba(55,221,151,.5);
  animation:glow 1.6s ease-in-out infinite;}
.turnbar.wait{background:rgba(255,181,71,.13); color:var(--blow); border-color:rgba(255,181,71,.4);}
.turnbar.result{background:rgba(90,209,255,.16); color:var(--accent); border-color:rgba(90,209,255,.5);}
@keyframes glow{50%{box-shadow:0 0 16px rgba(55,221,151,.4)}}

/* 色の説明 */
.legend{display:flex; flex-wrap:wrap; gap:5px 12px; font-size:10.5px; color:var(--sub);
  justify-content:center;}
.legend span{display:flex; align-items:center; gap:5px;}
.sw{width:16px; height:16px; border-radius:4px; flex:none; display:inline-flex; align-items:center;
  justify-content:center; font-size:10px; font-weight:900; color:transparent; vertical-align:middle;}
.sw.hit{background:var(--hit);}
.sw.blow{background:var(--blow);}
.sw.miss{background:rgba(143,160,198,.2);}
.pip{width:12px; height:12px; border-radius:50%; flex:none; display:inline-block;}
.pip.h{background:var(--hit);}
.pip.b{background:var(--blow);}
.pip.m{background:rgba(143,160,198,.28);}

/* 履歴(ラウンドカード) */
.histwrap{max-height:34vh; overflow-y:auto; display:flex; flex-direction:column; gap:6px;
  padding-right:2px;}
.histwrap:empty::after{content:"まだ予想がありません"; color:var(--sub); font-size:12px; text-align:center; padding:12px;}
.round{display:flex; align-items:stretch; gap:6px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:6px 8px;}
.round.fresh{animation:pop .3s ease;}
@keyframes pop{from{transform:scale(.94); opacity:.4}}
.round .rn{font-size:11px; font-weight:900; color:var(--sub); align-self:center; width:22px; text-align:center; flex:none;}
.rside{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; align-items:center;
  padding:4px; border-radius:8px;}
.rside.win{background:rgba(55,221,151,.14);}
.rtiles{display:flex; gap:4px;}
.rtiles .t{width:27px; height:30px; border-radius:6px; display:flex; align-items:center;
  justify-content:center; font-size:16px; font-weight:900;
  background:rgba(255,255,255,.06); color:var(--ink); border:1.5px solid transparent;}
.rtiles.n5 .t{width:21px; height:26px; font-size:13px; border-radius:5px;}
.rtiles.n3 .t{width:30px; height:32px;}
.rtiles .t.hit{background:var(--hit); color:#05160d; border-color:#7ff0c0;
  box-shadow:0 0 8px rgba(55,221,151,.5);}
.rtiles .t.blow{background:var(--blow); color:#1c1400; border-color:#ffd7a0;}
.rtiles .t.miss{background:rgba(143,160,198,.14); color:var(--sub);}
.rside .none{font-size:11px; color:var(--sub); padding:10px 0;}
.rcap{font-size:9.5px; color:var(--sub); letter-spacing:.06em;}
.rside.win .rcap{color:var(--hit); font-weight:800;}

.dc{background:rgba(255,93,118,.1); border:1px solid rgba(255,93,118,.4); border-radius:12px; padding:12px; text-align:center;}
.dc p{font-size:13px; margin-bottom:8px;}
.dc .menu{flex-direction:row;}
.dc .menu .btn{flex:1; padding:10px;}

.inputzone{margin-top:2px;}
.inputzone.hide{display:none;}

.leavebtn{background:none; border:none; color:var(--sub); font:600 12px inherit;
  cursor:pointer; align-self:center; margin-top:4px; text-decoration:underline;}

/* 結果 */
.resultbig{font-size:56px; letter-spacing:.06em;}
.resultbig.win{color:var(--hit);}
.resultbig.lose{color:var(--lose);}
.resultbig.draw{color:var(--accent2);}
.resultsub{font-size:13px; color:var(--sub); line-height:1.7;}
.reveal{display:flex; gap:12px;}
.rv{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:10px 16px; display:flex; flex-direction:column; gap:3px; align-items:center;}
.rv span{font-size:10.5px; color:var(--sub);}
.rv b{color:var(--ink); font-size:22px; font-weight:900; letter-spacing:.16em;}
.reveal .rv:first-child b{color:var(--accent);}
.reveal .rv:last-child b{color:var(--lose);}
.elochg{font-size:15px; font-weight:800;}
.elochg .up{color:var(--hit);} .elochg .down{color:var(--lose);}

/* ランキング */
.ranklist{list-style:none; display:flex; flex-direction:column; gap:6px;}
.ranklist li{display:flex; align-items:center; gap:10px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px;}
.ranklist li.me{border-color:var(--accent);}
.ranklist .rk{font-weight:900; color:var(--sub); width:26px; text-align:center;}
.ranklist .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ranklist .el{font-weight:900; color:var(--accent);}
.ranklist .wl{font-size:11px; color:var(--sub); width:74px; text-align:right;}
.ranklist .loading,.ranklist .empty{justify-content:center; color:var(--sub);}

.help p{font-size:13px; line-height:1.9; margin-bottom:10px;}
.help ul{margin:0 0 10px 20px; font-size:13px; line-height:1.9;}
.help b{color:var(--accent);}

.ver{position:fixed; right:8px; bottom:6px; font-size:9px; letter-spacing:.12em; color:rgba(143,160,198,.4);}

/* ---- 設定セレクタ(桁数/重複) ---- */
.cfgbox{display:flex; flex-direction:column; gap:8px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:12px;}
.cfgrow{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sub);}
.cfgrow > span{flex:none; width:44px; font-weight:700;}
.seg{display:flex; gap:4px; flex:1;}
.seg button{flex:1; padding:8px 0; border-radius:8px; border:1px solid var(--line);
  background:transparent; color:var(--sub); font:800 13px inherit; cursor:pointer;}
.seg button.on{background:var(--accent); color:#06202b; border-color:transparent;}
.seg button:active{transform:translateY(1px);}

.btn.tiny{padding:8px 12px; font-size:12px; flex:none;}
.namebox .btn.tiny{margin-left:2px;}

/* ---- 候補ヘルパー ---- */
.helper{text-align:center; font-size:12px; color:var(--accent); background:rgba(90,209,255,.08);
  border:1px solid rgba(90,209,255,.22); border-radius:8px; padding:7px; line-height:1.6;}
.helper b{font-weight:900;}
.helper button{margin-left:8px; background:none; border:1px solid var(--line); color:var(--sub);
  border-radius:6px; padding:3px 8px; font:700 11px inherit; cursor:pointer;}

/* ---- スタンプ ---- */
.stamps{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
.stamps button{border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:999px; padding:7px 12px; font:700 12px inherit; cursor:pointer;}
.stamps button:active{transform:translateY(1px);}
.stampbubble{position:absolute; right:8px; top:-10px; background:var(--accent2); color:#1a1200;
  font-size:12px; font-weight:800; padding:5px 10px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.4);
  animation:bpop .3s ease;}
@keyframes bpop{from{transform:scale(.6) translateY(6px); opacity:0}}

/* ---- 実績 ---- */
.achgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px;}
.achcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 6px;
  text-align:center; opacity:.4;}
.achcard.got{opacity:1; border-color:rgba(55,221,151,.5); background:rgba(55,221,151,.08);}
.achcard .ic{font-size:24px;}
.achcard .an{font-size:11px; font-weight:800; margin-top:3px;}
.achcard .ad{font-size:9.5px; color:var(--sub); line-height:1.4; margin-top:2px;}

/* ---- 統計 ---- */
.statgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
.statcell{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center;}
.statcell .v{font-size:22px; font-weight:900; color:var(--accent);}
.statcell .k{font-size:10.5px; color:var(--sub); margin-top:2px;}
.statblock{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px;}
.statblock h4{font-size:12px; color:var(--sub); margin-bottom:8px; font-weight:800;}
.statblock .row{display:flex; justify-content:space-between; font-size:12px; padding:3px 0;}
.spark{width:100%; height:56px; display:block;}

/* ---- 設定 ---- */
.setlist{display:flex; flex-direction:column; gap:2px; margin-bottom:14px;}
.setrow{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:13px; font-weight:700; cursor:pointer;}
.setrow small{color:var(--sub); font-weight:400; font-size:11px;}
.setrow input{width:20px; height:20px; flex:none; accent-color:var(--accent);}

/* ---- デイリー ---- */
.mini{font-size:13px; font-weight:800; color:var(--sub); margin-top:6px;}
h3.mini{margin-top:10px;}
.daily-mine{background:rgba(55,221,151,.1); border:1px solid rgba(55,221,151,.4);
  border-radius:12px; padding:12px; text-align:center; font-size:13px; line-height:1.7;}
.daily-mine b{color:var(--hit); font-size:18px;}

/* ---- トースト ---- */
#toast{position:fixed; left:0; right:0; top:14px; z-index:9997; display:flex; flex-direction:column;
  align-items:center; gap:6px; pointer-events:none;}
#toast div{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:9px 16px; font-size:12.5px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.4);
  animation:tin .25s ease, tout .4s ease 2.6s forwards; max-width:90vw;}
#toast div.ach{border-color:rgba(55,221,151,.6); color:var(--hit);}
@keyframes tin{from{opacity:0; transform:translateY(-10px)}}
@keyframes tout{to{opacity:0; transform:translateY(-10px)}}

/* ---- 画面ゆれ ---- */
.fx-shake{animation:shk .5s ease;}
@keyframes shk{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px)} 40%,60%{transform:translateX(8px)}
}