*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#05060c;color:#fff;font-family:"M PLUS 1p",sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#app canvas{display:block;position:fixed;inset:0}
.hide{display:none!important}
button{font-family:inherit;color:#fff;cursor:pointer;border:0;background:none}
.en,#logo,.mt,.big,#center .big,.rt,.vs,#ammoNum,#hpNum,.pts b{font-family:"Russo One","M PLUS 1p",sans-serif}

/* ---------- ロビー ---------- */
#menu{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr) min(560px,100%);grid-template-rows:auto auto 1fr;pointer-events:none}
#menu>*{pointer-events:auto}
#logo{grid-column:1;grid-row:1;padding:22px 30px 0;font-size:46px;letter-spacing:2px;line-height:1;text-shadow:0 4px 0 rgba(0,0,0,.4)}
#logo .b{color:#fff}#logo .r{color:#ff3a5a;margin-left:12px;text-shadow:0 0 24px rgba(255,40,80,.6),0 4px 0 rgba(0,0,0,.4)}
#prof{grid-column:1;grid-row:2;display:flex;align-items:center;gap:12px;margin:16px 30px;background:rgba(10,12,28,.72);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:10px 14px;width:max-content;backdrop-filter:blur(6px)}
#prof .lv{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#ffcf3a,#ff8a1a);color:#2a1400;font:900 22px "Russo One";display:grid;place-items:center;box-shadow:0 3px 0 #a04a00}
#prof .pn{font-weight:900;font-size:17px}
.xb{width:170px;height:8px;background:rgba(255,255,255,.12);border-radius:5px;overflow:hidden;margin-top:4px}.xb i{display:block;height:100%;background:linear-gradient(90deg,#30e0ff,#3a7aff);border-radius:5px}
#prof .xs{font-size:11px;opacity:.6;margin-top:2px}
.streak{margin-left:10px;text-align:center;padding:4px 10px;border-radius:10px;background:rgba(255,255,255,.06)}.streak b{font:900 22px "Russo One";display:block;line-height:1}.streak span{font-size:10px;opacity:.7}
.streak.hot{background:linear-gradient(135deg,#ff5a2a,#ff2a6a);box-shadow:0 0 18px rgba(255,80,40,.6)}
#nav{grid-column:2;grid-row:1;display:flex;gap:6px;padding:20px 20px 0;flex-wrap:wrap;justify-content:flex-end}
#nav button{padding:10px 16px;border-radius:10px;background:rgba(10,12,28,.7);border:1px solid rgba(255,255,255,.12);font-weight:800;font-size:14px;transition:.15s}
#nav button.on{background:#ff3a5a;border-color:#ff3a5a;box-shadow:0 4px 0 #9a1430}
#nav button:hover{transform:translateY(-1px)}
#panel{grid-column:2;grid-row:2/4;margin:12px 20px 20px;overflow:auto;padding-right:4px;scrollbar-width:thin}
#menu[data-tab=play] #panel{align-self:end}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{position:relative;text-align:left;padding:18px 18px 16px;border-radius:16px;min-height:132px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.35);transition:transform .12s}
.mode:hover{transform:translateY(-3px) scale(1.01)}.mode:active{transform:translateY(2px)}
.mode::after{content:"";position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;border:16px solid rgba(255,255,255,.12);transform:rotate(20deg);border-radius:18px}
.mode .mt{font-size:34px;line-height:1}.mode .mn{font-weight:900;font-size:17px;margin-top:4px}.mode .md{font-size:12px;opacity:.85;margin-top:6px;max-width:85%}
.m1{background:linear-gradient(135deg,#ff3a5a,#c0143a)}.m2{background:linear-gradient(135deg,#3a7aff,#1a3ab0)}.m3{background:linear-gradient(135deg,#9a3aff,#5a14c0)}.m4{background:linear-gradient(135deg,#1fae6a,#0e6a3e)}
.maprow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;background:rgba(10,12,28,.7);padding:10px;border-radius:12px}
.maprow>span{font-weight:900;font-size:13px;margin-right:6px;opacity:.8}
.chip{padding:8px 12px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:800;font-size:13px}
.chip.on{background:#fff;color:#111}.chip.lock,.lock{opacity:.45}.chip.danger{background:#5a1020;border-color:#ff3a5a;margin-top:20px}
.big2{padding:12px 16px;font-size:15px}
.big{display:block;width:100%;padding:14px;border-radius:12px;background:linear-gradient(#ffd23a,#ff9a1a);color:#2a1400;font-size:20px;box-shadow:0 5px 0 #a05000;margin-top:12px}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #a05000}
.loadmini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.lm{background:rgba(10,12,28,.7);border-radius:10px;padding:8px;text-align:center;font-size:11px;font-weight:800}.lm svg{width:100%;height:30px}
.hint{font-size:12px;opacity:.65;margin-top:10px;line-height:1.6;background:rgba(10,12,28,.6);padding:8px 10px;border-radius:10px}
.slots4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ls{background:rgba(10,12,28,.75);border:2px solid transparent;border-radius:12px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px}
.ls.on{border-color:#ff3a5a;background:rgba(255,58,90,.15)}.ls svg{width:100%;height:30px}.ls .sn{font-size:11px;opacity:.7;font-weight:800}.ls .wn{font-size:11px;font-weight:800}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.wc{position:relative;background:rgba(10,12,28,.75);border:2px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;font-size:12px}
.wc svg{width:100%;height:36px}.wc.on{border-color:#30e0ff;background:rgba(48,224,255,.12)}.wc em{font-style:normal;font-size:10px;opacity:.8;color:#ffcf3a}.wc em.e{color:#30ff9a}
.wd{margin-top:10px;background:rgba(10,12,28,.8);border-radius:14px;padding:14px}
.wt{font-weight:900;font-size:20px}.wt small{font:13px "Russo One";opacity:.5;margin-left:6px}.wdd{font-size:13px;opacity:.75;margin:4px 0 10px}
.st{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:8px;font-size:12px;font-weight:800;margin:4px 0}
.sb{height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}.sb i{display:block;height:100%;background:linear-gradient(90deg,#ff3a5a,#ffcf3a)}
.sk{margin-top:12px}.sh{font-weight:900;font-size:13px;opacity:.8;margin:12px 0 6px}
.skin{display:inline-flex;flex-direction:column;align-items:center;gap:3px;width:62px;margin:0 4px 6px 0;font-size:10px;font-weight:800}
.skin i{width:44px;height:28px;border-radius:7px;border:2px solid rgba(255,255,255,.2)}.skin.on i{border-color:#fff;box-shadow:0 0 0 2px #ff3a5a}
.s-base i{background:linear-gradient(135deg,#2c3038,#596270)}.s-camo i{background:radial-gradient(circle at 30% 40%,#3a4a26 20%,transparent 22%),radial-gradient(circle at 70% 60%,#2a2e1c 18%,transparent 20%),#5a6b3a}
.s-sakura i{background:radial-gradient(circle at 30% 50%,#ff9ac4 20%,transparent 22%),radial-gradient(circle at 70% 30%,#ff7ab0 15%,transparent 17%),#ffe4ef}
.s-arctic i{background:linear-gradient(90deg,#e8eef4 50%,#b8c6d4 50%);background-size:12px 12px}.s-neon i{background:linear-gradient(135deg,#0e0e18 40%,#00f0ff 40%,#00f0ff 60%,#ff20c8 60%)}
.s-gold i{background:linear-gradient(135deg,#a07010,#ffe080,#c89a20)}.s-lava i{background:linear-gradient(135deg,#1a0a06,#ff5a10,#1a0a06)}.s-diamond i{background:linear-gradient(135deg,#b8f4ff,#fff,#7ad8f0)}
.s-galaxy i{background:radial-gradient(circle at 70% 30%,#ff50c8,transparent 50%),linear-gradient(135deg,#1a0840,#3a1080)}.s-rainbow i{background:linear-gradient(90deg,red,orange,yellow,lime,cyan,blue,violet)}
.nm{display:flex;gap:8px;align-items:center;background:rgba(10,12,28,.75);padding:10px;border-radius:12px}.nm span{font-weight:900;font-size:13px}
input{font-family:inherit;font-weight:800;font-size:16px;padding:9px 12px;border-radius:9px;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);color:#fff;-webkit-user-select:text;user-select:text;min-width:0;flex:1}
.pre{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pc{display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(10,12,28,.75);border-radius:10px;padding:6px 2px;font-size:10px;font-weight:800}
.pc i{position:relative;width:26px;height:30px;border-radius:4px;margin-top:10px}.pc i b{position:absolute;left:5px;top:-10px;width:16px;height:12px;border-radius:3px}
.opts{display:flex;flex-wrap:wrap;gap:5px}.opts .chip{font-size:12px;padding:6px 9px}
.faces{display:grid;grid-template-columns:repeat(7,1fr)}.fc{display:flex;flex-direction:column;align-items:center;font-size:9px;font-weight:800;background:rgba(10,12,28,.75);border:2px solid transparent;border-radius:10px;padding:4px 2px}
.fc img{width:34px;height:34px}.fc.on{border-color:#ff3a5a}
.cr{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:8px;background:rgba(10,12,28,.6);padding:6px;border-radius:10px}.cr span{width:70px;font-size:12px;font-weight:900}
.cc{width:20px;height:20px;border-radius:5px;border:2px solid rgba(0,0,0,.4)}.cc.on{border-color:#fff;transform:scale(1.2)}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sbx{background:rgba(10,12,28,.8);border-radius:12px;padding:12px;text-align:center}.sbx b{display:block;font:900 26px "Russo One"}.sbx span{font-size:12px;opacity:.7;font-weight:800}
.sets{background:rgba(10,12,28,.8);border-radius:14px;padding:16px}.sets label{display:block;font-weight:900;margin:10px 0}.sets b{float:right}.sets input[type=range]{width:100%;margin-top:8px;padding:0}
.onl,.room{background:rgba(10,12,28,.85);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.row2{display:flex;gap:8px}.row2>*{flex:1}.err{color:#ff8a9a}
.room{align-items:center;text-align:center}.rc{font-weight:900;font-size:16px}.rc b{font:32px "Russo One";letter-spacing:6px;color:#ffcf3a;display:block;margin-top:4px}.rh{font-size:13px;opacity:.75}
.rps{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}.rp{padding:12px;border-radius:10px;font-weight:900}.rp.t0{background:rgba(58,122,255,.3)}.rp.t1{background:rgba(255,58,90,.3)}.rp.wait{opacity:.5}
.spin{width:44px;height:44px;border-radius:50%;border:5px solid rgba(255,255,255,.15);border-top-color:#ff3a5a;animation:sp 0.8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- 試合中 ---------- */
#hud{position:fixed;inset:0;pointer-events:none}
#score{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;gap:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
#score .side{padding:6px 14px;min-width:150px;background:rgba(10,12,28,.8)}#score .side.me{border-radius:12px 0 0 12px;text-align:right;border-left:4px solid #3a8aff}#score .side.op{border-radius:0 12px 12px 0;border-right:4px solid #ff3a5a}
#score .nm{font-weight:900;font-size:12px;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;gap:4px;margin-top:4px}.me .dots{justify-content:flex-end}.dots i{width:14px;height:8px;border-radius:3px;background:rgba(255,255,255,.18)}.me .dots i.on{background:#3a8aff;box-shadow:0 0 8px #3a8aff}.op .dots i.on{background:#ff3a5a;box-shadow:0 0 8px #ff3a5a}
.pts{display:flex;align-items:center;gap:8px;background:#141830;padding:0 12px}.pts b{font-size:30px}.pts .m{color:#7ab0ff}.pts .o{color:#ff7a8a}#timer{font:800 13px "Russo One";opacity:.7;min-width:38px;text-align:center}
#feed{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.fi{display:flex;align-items:center;gap:6px;background:rgba(10,12,28,.75);padding:4px 10px;border-radius:8px;font-weight:900;font-size:13px;transition:opacity .5s}.fi.mine{background:rgba(255,58,90,.35);border:1px solid rgba(255,90,120,.6)}.fi.out{opacity:0}.fi.sys{font-weight:700;opacity:.85}
.fi i svg{width:44px;height:18px;display:block}.fi .me{color:#ffe07a}.fi .ally{color:#7ab0ff}.fi .foe{color:#ff8a9a}.fi .hs{background:#ff3a5a;font-size:10px;padding:1px 4px;border-radius:4px}
#xhair{position:absolute;left:50%;top:50%;--gap:8px;transition:opacity .1s}
#xhair i{position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.55)}
#xhair .t,#xhair .b{width:2px;height:9px;left:-1px}#xhair .t{top:calc(-1*var(--gap) - 9px)}#xhair .b{top:var(--gap)}
#xhair .l,#xhair .r{height:2px;width:9px;top:-1px}#xhair .l{left:calc(-1*var(--gap) - 9px)}#xhair .r{left:var(--gap)}
#xhair .d{width:3px;height:3px;left:-1.5px;top:-1.5px;border-radius:50%}
#xhair.melee .t,#xhair.melee .b,#xhair.melee .l,#xhair.melee .r{opacity:.4}
#hitm{position:absolute;left:50%;top:50%;opacity:0}#hitm i{position:absolute;width:3px;height:11px;background:#fff;left:-1.5px;top:-5.5px}
#hitm i:nth-child(1){transform:rotate(45deg) translateY(-12px)}#hitm i:nth-child(2){transform:rotate(135deg) translateY(-12px)}#hitm i:nth-child(3){transform:rotate(225deg) translateY(-12px)}#hitm i:nth-child(4){transform:rotate(315deg) translateY(-12px)}
#hitm.show{animation:hm .28s ease-out}#hitm.head i{background:#ffcf3a}#hitm.kill i{background:#ff2a4a;height:15px}#hitm.kill.show{animation:hm .5s ease-out}
@keyframes hm{0%{opacity:1;transform:scale(1.5)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
#tags{position:absolute;inset:0}.tag{position:absolute;left:0;top:0;text-align:center;font-weight:900;font-size:14px;text-shadow:0 2px 3px #000;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:3px}
.tag.foe .tn{color:#ff8a9a}.tag.ally .tn{color:#8ab8ff}.tb{width:70px;height:6px;background:rgba(0,0,0,.6);border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.3)}.tb i{display:block;height:100%;background:#3aff8a;transition:width .15s}.tb i.low{background:#ff3a4a}.ally .tb i{background:#3a9aff}
#nums{position:absolute;inset:0}.num{position:absolute;left:0;top:0;font:900 22px "Russo One";color:#fff;text-shadow:0 2px 0 #000,0 0 6px rgba(0,0,0,.6);will-change:transform}
.num.head{color:#ffcf3a;font-size:30px}.num.heal{color:#3aff8a}
#dmgdir{position:absolute;left:50%;top:50%}.ddir{position:absolute;left:-60px;top:-160px;width:120px;height:120px;transform-origin:60px 160px;animation:dd 1.2s forwards}
.ddir::before{content:"";position:absolute;left:10px;top:0;width:100px;height:30px;border-radius:50%/100% 100% 0 0;border-top:8px solid rgba(255,40,60,.9);filter:drop-shadow(0 0 8px red)}@keyframes dd{to{opacity:0}}
#center{position:absolute;left:0;right:0;top:30%;text-align:center;animation:pop 2.2s forwards;pointer-events:none}
#center .big{font-size:64px;letter-spacing:2px;text-shadow:0 5px 0 rgba(0,0,0,.45),0 0 30px rgba(0,0,0,.4)}#center .small{font-weight:900;font-size:20px;margin-top:4px;text-shadow:0 2px 4px #000}
#center.count .big{font-size:110px;color:#ffcf3a}#center.count{animation:pop 1s forwards}#center.fight .big{color:#ff3a5a;font-size:96px}#center.win .big{color:#3aff9a}#center.lose .big{color:#ff4a6a}#center.draw .big{color:#ccc}
#center.elim{top:58%;animation:pop 1.5s forwards}#center.elim .big{font-size:26px;color:#ff3a5a;letter-spacing:4px}#center.elim .small{font-size:16px}
@keyframes pop{0%{transform:scale(1.6);opacity:0}12%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:0}}
#scope{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 50%,transparent 0,transparent 38vmin,rgba(0,0,0,.85) 38.3vmin,#000 40vmin)}
#scope .sc{position:absolute;left:50%;top:50%;width:76vmin;height:76vmin;transform:translate(-50%,-50%);background:linear-gradient(#000,#000) center/100% 2px no-repeat,linear-gradient(#000,#000) center/2px 100% no-repeat}
#scope .sc::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ff2a2a}
#vign{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(255,0,30,.75) 100%);transition:opacity .4s}
#lowhp{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(160,0,20,.8) 100%)}
#flashO{position:absolute;inset:0;background:#fff;opacity:0}
#hpBox{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;background:rgba(10,12,28,.75);padding:10px 16px;border-radius:14px;border-left:5px solid #3aff8a}
#hpBox .hl{font:900 13px "Russo One";opacity:.7}#hpNum{font-size:38px;min-width:72px}.hb{width:160px;height:12px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden}#hpBar{height:100%;background:linear-gradient(90deg,#3aff8a,#9aff3a);transition:width .15s}
#hpBox.mid{border-color:#ffcf3a}#hpBox.mid #hpBar{background:#ffcf3a}#hpBox.low{border-color:#ff3a4a;animation:lo .6s infinite alternate}#hpBox.low #hpBar{background:#ff3a4a}@keyframes lo{to{background:rgba(80,0,10,.8)}}
#ammoBox{position:absolute;right:20px;bottom:96px;text-align:right}#wName{font-weight:900;font-size:14px;opacity:.8}.am{text-shadow:0 3px 0 rgba(0,0,0,.4)}#ammoNum{font-size:46px}#ammoNum.low{color:#ff5a6a}#ammoMax{font:20px "Russo One";opacity:.6;margin-left:4px}
#reloadBar{width:150px;height:6px;background:rgba(255,255,255,.15);border-radius:3px;margin-left:auto;overflow:hidden}#reloadBar i{display:block;height:100%;background:#ffcf3a}
#slots{position:absolute;right:20px;bottom:20px;display:flex;gap:6px;pointer-events:auto}
.slot{position:relative;width:86px;height:62px;background:rgba(10,12,28,.7);border:2px solid rgba(255,255,255,.1);border-radius:10px;display:grid;place-items:center;transition:.12s}
.slot svg{width:72px;height:30px;opacity:.65}.slot.cur{border-color:#fff;background:rgba(255,255,255,.18);transform:translateY(-4px)}.slot.cur svg{opacity:1}.slot.empty{opacity:.35}.slot.nope{animation:no .3s}@keyframes no{50%{transform:translateX(4px);border-color:#ff3a4a}}
.slot .k{position:absolute;left:5px;top:2px;font:11px "Russo One";opacity:.6}.slot .cnt{position:absolute;right:6px;bottom:2px;font:14px "Russo One";color:#ffcf3a}
#killbox{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);background:rgba(20,6,12,.85);border:2px solid #ff3a5a;border-radius:14px;padding:12px 24px;text-align:center;animation:kb .3s}
@keyframes kb{from{transform:translate(-50%,30px);opacity:0}}.kt{font-weight:900;font-size:12px;opacity:.7}.kn{font:900 22px "M PLUS 1p";color:#ff8a9a}.kw{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:800}.kw svg{width:70px;height:26px}.khp{font-size:13px;margin-top:4px}.khp b{font:18px "Russo One";color:#3aff8a}
#pause,#versus,#results{position:fixed;inset:0;display:grid;place-items:center;background:rgba(4,5,12,.6);backdrop-filter:blur(4px)}
.pb{background:rgba(10,12,28,.92);padding:28px 36px;border-radius:18px;width:min(360px,90vw);text-align:center}.pt{font:44px "Russo One";margin-bottom:8px}.ph{font-size:12px;opacity:.5;margin-top:10px}.pb .chip{width:100%;margin-top:10px}
#versus{background:radial-gradient(ellipse at center,rgba(20,10,40,.5),rgba(0,0,0,.85));animation:vin .35s}@keyframes vin{from{opacity:0}}
.vmap{position:absolute;top:12%;left:0;right:0;text-align:center;font-weight:900;font-size:22px}.vmap small{display:block;font:14px "Russo One";opacity:.6;letter-spacing:4px}
.vrow{display:flex;align-items:center;gap:30px}.vt{display:flex;gap:14px}.vt.l{animation:sl .5s}.vt.r{animation:sr .5s}@keyframes sl{from{transform:translateX(-120px);opacity:0}}@keyframes sr{from{transform:translateX(120px);opacity:0}}
.vs{font-size:80px;color:#ffcf3a;text-shadow:0 0 30px rgba(255,200,40,.6),0 6px 0 #a05000;animation:vsz .5s .2s both}@keyframes vsz{from{transform:scale(3);opacity:0}}
.vc{width:170px;background:linear-gradient(#1a1e3a,#0e1020);border-radius:16px;padding:14px;text-align:center;border-bottom:5px solid #3a8aff}.vt.r .vc{border-color:#ff3a5a}
.vp{position:relative;width:90px;height:110px;margin:0 auto}.vp img{position:absolute;left:15px;top:0;width:60px;height:60px;border-radius:12px}.vp i{position:absolute;left:0;bottom:0;width:90px;height:46px;border-radius:12px 12px 4px 4px}
.vn{font-weight:900;font-size:15px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vl{display:flex;gap:2px;margin-top:6px}.vl svg{flex:1;height:18px;opacity:.75}
.vsk{position:absolute;bottom:14%;left:0;right:0;text-align:center;font-weight:900;opacity:.8}
.rbox{background:rgba(10,12,28,.94);border-radius:20px;padding:24px 28px;width:min(620px,94vw);text-align:center;animation:kb2 .4s}@keyframes kb2{from{transform:scale(.8);opacity:0}}
.rt{font-size:60px;line-height:1}.won .rt{color:#3aff9a;text-shadow:0 0 30px rgba(60,255,150,.5)}.lost .rt{color:#ff4a6a}
.rs{font:900 28px "Russo One";margin:4px 0 14px}.rbox table{width:100%;border-collapse:collapse;font-size:14px;font-weight:800}.rbox th{font-size:11px;opacity:.6;padding:4px}.rbox td{padding:7px 4px;border-top:1px solid rgba(255,255,255,.08)}
.rbox td:first-child{text-align:left}.rbox tr.t0 td:first-child{color:#8ab8ff}.rbox tr.t1 td:first-child{color:#ff8a9a}.rbox tr.me{background:rgba(255,255,255,.07)}
.rx{font:900 22px "Russo One";color:#30e0ff;margin-top:14px}.rx .hot{font:900 14px "M PLUS 1p";background:#ff3a5a;color:#fff;padding:3px 8px;border-radius:8px;margin-left:8px}
.rlv{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:6px;font-weight:900}.rlv .xb{width:240px}
.lvup{margin-top:10px;font:24px "Russo One";color:#ffcf3a;animation:lvp 1s infinite alternate}.lvup small{display:block;font:800 13px "M PLUS 1p";color:#fff;margin-top:4px}@keyframes lvp{to{transform:scale(1.06)}}
.rb{display:flex;gap:10px;margin-top:16px}.rb>*{flex:1;margin:0}
/* スマホ操作 */
#mob{display:none;position:fixed;inset:0;pointer-events:none}
body.mobile.ingame #mob,body.mobile.inlobby #mob{display:block}
body.inlobby #bPause{display:none}
body.inlobby #touchArea{z-index:0}
#touchArea{position:absolute;inset:0;pointer-events:auto}
#joy{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);left:110px;top:calc(100% - 150px);opacity:.6}
#joy.on{opacity:1}#joyKnob{position:absolute;left:30px;top:30px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.55)}
.tb{position:absolute;pointer-events:auto;border-radius:50%;background:rgba(10,12,28,.55);border:2px solid rgba(255,255,255,.3);font:900 13px "Russo One";display:grid;place-items:center;touch-action:none}
.tb.on{background:rgba(255,255,255,.35)}
#bFire{width:92px;height:92px;right:104px;bottom:58px;background:rgba(255,58,90,.5);border-color:#ff8a9a;font-size:18px}
#bAim{width:58px;height:58px;right:208px;bottom:84px}#bAim.lock{background:rgba(48,224,255,.5)}
#bJump{width:68px;height:68px;right:20px;bottom:136px}
#bCrouch{width:60px;height:60px;right:24px;bottom:54px;font:900 11px "M PLUS 1p"}
#bReload{width:48px;height:48px;right:200px;bottom:158px}
#bPause{width:44px;height:44px;left:14px;top:14px;border-radius:10px;font-size:14px}
body.mobile #slots{bottom:12px;right:auto;left:50%;transform:translateX(-50%)}body.mobile .slot{width:66px;height:48px}body.mobile .slot svg{width:54px}
body.mobile #ammoBox{bottom:auto;top:70px;right:14px}body.mobile #ammoNum{font-size:30px}
body.mobile #hpBox{left:auto;right:auto;bottom:auto;top:70px;left:14px;padding:6px 10px}body.mobile #hpNum{font-size:24px;min-width:44px}body.mobile .hb{width:90px}
body.mobile #feed{top:70px;right:50%;transform:translateX(50%);font-size:11px}body.mobile #feed .fi{font-size:11px}
body.mobile #score .side{min-width:90px;padding:4px 8px}body.mobile #score .nm{max-width:100px;font-size:10px}body.mobile .dots i{width:9px}
body.mobile #center .big{font-size:44px}body.mobile #center.count .big{font-size:80px}
@media (max-width:900px){
  #menu{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr}
  #logo{font-size:30px;padding:14px 16px 0}#prof{margin:10px 16px}#nav{grid-column:1;grid-row:3;justify-content:flex-start;padding:0 16px}
  #nav button{padding:8px 10px;font-size:12px}#panel{grid-column:1;grid-row:4;margin:10px 16px 16px}
  #menu[data-tab=play] #panel{align-self:end}
  .mode{min-height:100px;padding:12px}.mode .mt{font-size:24px}.mode .md{font-size:11px}
  .wgrid{grid-template-columns:repeat(3,1fr)}.pre{grid-template-columns:repeat(4,1fr)}.faces{grid-template-columns:repeat(5,1fr)}
  .vrow{flex-direction:column;gap:10px}.vc{width:130px;padding:8px}.vs{font-size:50px}.vp{transform:scale(.8)}
}
/* 横向きスマホ（高さが低い） */
@media (max-height:520px) and (min-width:600px){
  #menu{grid-template-columns:minmax(220px,34%) 1fr;grid-template-rows:auto auto 1fr}
  #logo{grid-column:1;grid-row:1;font-size:26px;padding:10px 14px 0}
  #prof{grid-column:1;grid-row:2;margin:8px 14px;padding:6px 10px;gap:8px}#prof .lv{width:34px;height:34px;font-size:17px}#prof .pn{font-size:14px}.xb{width:110px}.streak b{font-size:16px}
  #nav{grid-column:1;grid-row:3;align-self:start;justify-content:flex-start;padding:0 14px;gap:5px}#nav button{padding:7px 9px;font-size:12px}
  #panel{grid-column:2;grid-row:1/4;margin:10px 12px 10px 0;align-self:stretch!important}
  .mode{min-height:78px;padding:10px 12px}.mode .mt{font-size:22px}.mode .mn{font-size:13px}.mode .md{font-size:10px}.mode::after{width:80px;height:80px}
  .modes{gap:8px}.maprow{margin-top:8px;padding:6px}.loadmini{display:none}.hint{display:none}
  .chip{padding:6px 9px;font-size:12px}
  .wgrid{grid-template-columns:repeat(4,1fr)}.wc svg{height:26px}
  #versus .vc{width:120px;padding:8px}.vp{transform:scale(.75);margin:-10px auto}.vs{font-size:48px}.vmap{top:4%}.vsk{bottom:4%}
  .rbox{padding:12px 16px;max-height:96vh;overflow:auto}.rt{font-size:38px}.rs{font-size:20px;margin:2px 0 6px}.rbox td{padding:3px}.rx{margin-top:6px;font-size:16px}
}
#rotate{display:none}
@media (orientation:portrait){body.mobile.ingame #rotate{display:grid;position:fixed;inset:0;z-index:50;place-items:center;background:#0b0d1a;font-weight:900;font-size:20px;text-align:center;padding:30px}}

/* ロビーで歩く */
#menu[data-tab=""] #panel{display:none}
#panel{position:relative;background:rgba(8,10,24,.55);border-radius:18px;padding:12px;backdrop-filter:blur(6px)}
.pclose{position:sticky;top:0;float:right;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);font-size:20px;font-weight:900;z-index:3;margin:-4px -4px 6px 6px}
#menu[data-tab=play] #panel{align-self:start}
.keys{display:flex;align-items:center;gap:4px;margin-left:6px;padding:4px 10px;border-radius:10px;background:rgba(255,207,58,.12)}.keys b{font:900 20px "Russo One";color:#ffcf3a}.ki{width:22px;height:22px}
.rk{display:inline-flex;align-items:center;gap:2px;color:#ffcf3a;margin-left:10px}.rk .ki{width:20px;height:20px}
#padMsg{position:fixed;left:50%;bottom:16%;transform:translateX(-50%);background:rgba(8,10,24,.85);border-radius:14px;padding:12px 22px;font-weight:900;font-size:18px;display:flex;align-items:center;gap:10px;pointer-events:none;border:2px solid rgba(255,255,255,.2)}
#padMsg b{font:28px "Russo One"}#padMsg span{font:26px "Russo One";color:#ffcf3a;min-width:50px;text-align:right}
#lhint{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);font-size:12px;font-weight:800;opacity:.7;background:rgba(8,10,24,.6);padding:6px 14px;border-radius:10px;pointer-events:none;white-space:nowrap}
body:not(.inlobby) #lhint{display:none}
body.inlobby #lhint::after{content:"クリックで操作 ・ Esc でメニュー ・ 奥の射撃場で試し撃ち ・ 光る箱に入ると対戦スタート"}
body.mobile.inlobby #lhint::after{content:"奥の射撃場で試し撃ち ・ 光る箱に入ると対戦"}
body.mobile.inlobby #lhint{bottom:auto;top:54px}
.case{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}.ct{font-weight:900;font-size:22px}.cd{font-size:12px;opacity:.75}
.odds{display:flex;gap:10px;font-size:12px;font-weight:900}
.reel{position:relative;width:100%;height:150px;overflow:hidden;border-radius:14px;background:#0a0c1c;border:2px solid rgba(255,255,255,.12)}
.strip{display:flex;height:100%;will-change:transform}
.ci{flex:0 0 128px;margin:0 2px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:linear-gradient(180deg,rgba(255,255,255,.04),color-mix(in srgb,var(--rc) 30%,transparent));border-bottom:5px solid var(--rc);font-size:11px;font-weight:800}
.ci svg{width:100px;height:36px}.ci em{font-style:normal;color:var(--rc);font-size:11px}.cs i{display:block;width:40px;height:14px;border-radius:4px}
.mark{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:#ffcf3a;box-shadow:0 0 12px #ffcf3a}
.won{min-height:40px}.wonc{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:900;font-size:18px;padding:10px 18px;border-radius:12px;border:2px solid var(--rc);background:color-mix(in srgb,var(--rc) 18%,transparent);animation:kb2 .4s}
.wonc b{color:var(--rc);font-size:14px}.wonc small{font-size:12px;opacity:.8}
.big:disabled{filter:grayscale(1);opacity:.5}
.big .ki{width:22px;height:22px;vertical-align:middle}
.sh small{font-weight:700;opacity:.6;font-size:11px;margin-left:6px}
.hn{display:inline-flex;align-items:center;gap:5px;margin:0 3px}.hn img{width:20px;height:20px;border-radius:5px}
body.inlobby #menu #panel{max-height:calc(100vh - 140px)}
body.ingame:not(.inlobby) #lhint{display:none}
body.mobile.inlobby #hpBox{display:none}body.inlobby #score{display:none}
.lb{background:rgba(10,12,28,.85);border-radius:12px;padding:6px 10px;min-width:260px;border-top:3px solid #ffcf3a}
.lbt{font-weight:900;font-size:12px;display:flex;justify-content:space-between;opacity:.85;margin-bottom:3px}
.lr{display:flex;align-items:center;gap:6px;font-weight:900;font-size:13px;padding:2px 4px;border-radius:6px}.lr.me{background:rgba(255,207,58,.18)}
.lr b{font:14px "Russo One";width:16px;color:#ffcf3a}.lr img{width:20px;height:20px;border-radius:5px}.lr span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.lr em{font:16px "Russo One";font-style:normal}.lr small{font-size:10px;opacity:.6}
#center.gg .big{color:#ffcf3a;font-size:44px}
.vt{flex-wrap:wrap;justify-content:center;max-width:70vw}
.m5{background:linear-gradient(135deg,#ff9a20,#c05a00)}.m6{background:linear-gradient(135deg,#30c0ff,#0a6aa0)}