@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root{--navy:#101b3d;--ink:#17213e;--muted:#71809f;--df:#347ee8;--dm:#17b7a5;--am:#f3ae32;--fw:#f05283}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% 0%,#253d78 0,#121d40 45%,#0b1430 100%);color:#fff;font-family:'Noto Sans JP',sans-serif;min-height:100vh}.app{max-width:1180px;margin:auto;padding:18px 24px 12px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.brand{display:flex;gap:10px;align-items:center}.brandball{font-size:34px;filter:drop-shadow(0 3px 6px #0005)}.brand b{display:block;font:900 21px 'Barlow Condensed',sans-serif;letter-spacing:1.3px}.brand small{font:700 9px 'Barlow Condensed',sans-serif;letter-spacing:2px;color:#91a6d5}.wallet{background:#26365f;border:1px solid #53658d;border-radius:30px;padding:8px 15px;color:#ffda72}.matchbar{display:grid;grid-template-columns:1fr 1.1fr 1fr;align-items:center;background:linear-gradient(110deg,#f05283,#bf376e 48%,#286fd4 52%,#347ee8);border:1px solid #ffffff38;border-radius:18px;padding:12px 22px;box-shadow:0 10px 30px #0003}.team{display:flex;flex-direction:column;gap:2px}.team small{font:800 10px 'Barlow Condensed';letter-spacing:2px;opacity:.8}.team strong{font:900 17px 'Barlow Condensed';letter-spacing:1px}.away{text-align:right}.scoreboard{text-align:center;background:#101a39d9;border:1px solid #ffffff38;border-radius:12px;padding:5px 12px}.score{display:flex;justify-content:center;align-items:center;gap:18px;font:900 36px 'Barlow Condensed';line-height:1}.score span{color:#8b9abe;font-size:25px}.clock{font:800 17px 'Barlow Condensed';color:#ffdb75;letter-spacing:1px}.status{font-size:9px;letter-spacing:1.4px;color:#aab8d8}.main{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;margin-top:20px}.playarea,.statcard,.eventcard,.rules{background:#f8faff;color:var(--ink);border-radius:18px;box-shadow:0 12px 35px #0003}.playarea{padding:18px 20px 14px}.panelhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.eyebrow{font:800 10px 'Barlow Condensed';letter-spacing:2px;color:#7889ad}.panelhead h1{font-size:17px;margin:2px 0 0;font-weight:900}.start,.overlaycard button{border:0;background:linear-gradient(135deg,#ffb83e,#f47b36);color:#24172a;font-weight:900;padding:11px 18px;border-radius:12px;box-shadow:0 4px 0 #bc562d;cursor:pointer}.start:disabled{opacity:.55;cursor:default}.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:13px}.legenditem{display:flex;align-items:center;gap:7px;background:#edf1f9;border-radius:9px;padding:7px 8px;min-width:0}.swatch{width:13px;height:28px;border-radius:5px;flex:none}.swatch.df{background:var(--df)}.swatch.dm{background:var(--dm)}.swatch.am{background:var(--am)}.swatch.fw{background:var(--fw)}.legenditem b{display:block;font-size:10px;white-space:nowrap}.legenditem small{display:block;font-size:8px;color:#7a87a1;white-space:nowrap}.boardwrap{position:relative;max-width:590px;margin:auto;background:linear-gradient(145deg,#dbe6f7,#c6d5ed);border:7px solid #24365f;border-radius:17px;padding:8px;box-shadow:inset 0 2px 8px #fff,0 8px 16px #26385d35}.board{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;aspect-ratio:1}.tile{border:0;border-radius:10px;color:#fff;font:900 clamp(19px,3.2vw,29px) 'Barlow Condensed',sans-serif;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;box-shadow:inset 0 2px 0 #ffffff65,inset 0 -4px 0 #0002,0 2px 3px #1a2a4930;transition:transform .12s,filter .12s;user-select:none}.tile:after{content:"";position:absolute;inset:4px;border:1px solid #ffffff38;border-radius:7px;pointer-events:none}.tile.df{background:linear-gradient(145deg,#559aff,#2365ca)}.tile.dm{background:linear-gradient(145deg,#38d6c1,#07988e)}.tile.am{background:linear-gradient(145deg,#ffd36a,#e79516);color:#49300b}.tile.fw{background:linear-gradient(145deg,#ff80a5,#d8326c)}.tile.selected{outline:4px solid #fff;transform:scale(.91);filter:brightness(1.15);z-index:2}.tile.empty{visibility:hidden}.tile.pop{animation:pop .22s ease}@keyframes pop{50%{transform:scale(.72);opacity:.4}}.overlay{position:absolute;inset:0;background:#101b3dd9;display:flex;align-items:center;justify-content:center;border-radius:10px;padding:20px}.overlay.hidden{display:none}.overlaycard{background:#fff;color:#17213e;border-radius:18px;text-align:center;padding:24px 26px;max-width:330px;box-shadow:0 15px 50px #0006}.bigball{font-size:44px}.overlaycard h2{font-size:20px;margin:5px 0}.overlaycard p{font-size:12px;line-height:1.8;color:#697797;margin:7px 0 17px}.hint{text-align:center;font-size:11px;color:#7d8cac;margin:10px 0 0}.side{display:flex;flex-direction:column;gap:13px}.statcard,.eventcard,.rules{padding:15px}.cardtitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.cardtitle span,.logtitle{font:900 12px 'Barlow Condensed';letter-spacing:1.7px;color:#526589}.cardtitle small{font-size:9px;color:#8c98b1}.powerrow{display:flex;align-items:center;gap:10px;margin:12px 0}.powericon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:20px}.attackicon{background:#ffedf2;color:#e84c7c}.defendicon{background:#e8f0ff;color:#347ee8}.powerinfo{flex:1;display:grid;grid-template-columns:1fr auto;gap:2px 8px}.powerinfo b{font-size:11px}.powerinfo strong{font:900 21px 'Barlow Condensed';text-align:right}.meter{grid-column:1/3;height:7px;border-radius:10px;background:#e8edf5;overflow:hidden}.meter i{display:block;height:100%;width:0;border-radius:10px;transition:width .25s}.attackmeter{background:linear-gradient(90deg,#f05283,#ff9c73)}.defensemeter{background:linear-gradient(90deg,#347ee8,#38c9d4)}.powercap{font-size:9px;color:#8995ad;text-align:right}.event{background:#edf2fa;border-radius:10px;padding:12px;font-size:12px;font-weight:800;line-height:1.6;min-height:58px}.logtitle{margin:14px 0 7px}.log{height:105px;overflow:auto;font-size:10px;color:#667491;line-height:1.6}.log p{margin:3px 0;border-bottom:1px solid #edf0f6;padding-bottom:4px}.log .goal{color:#e34a76;font-weight:900}.log .save{color:#2478d8;font-weight:900}.rules{font-size:10px;line-height:1.8;color:#6f7d99}.rules b{font-size:12px;color:#26365e}.rules p{margin:6px 0 0}footer{font:700 10px 'Barlow Condensed';letter-spacing:2px;color:#7284b0;text-align:center;padding:15px}footer span{margin-left:10px;color:#f4bd59}
@media(max-width:800px){.app{padding:12px 12px 8px}.main{grid-template-columns:1fr;gap:12px}.side{display:grid;grid-template-columns:1fr 1fr}.rules{grid-column:1/-1}.playarea{padding:13px 12px}.boardwrap{max-width:540px}.legend{gap:4px}.legenditem{padding:6px 4px;gap:5px}.legenditem b{font-size:9px}.legenditem small{font-size:7px}.matchbar{padding:10px 12px}.team strong{font-size:14px}.score{font-size:32px}}@media(max-width:480px){.side{grid-template-columns:1fr}.rules{grid-column:auto}.panelhead h1{font-size:14px}.start{padding:9px 12px;font-size:11px}.legenditem{flex-direction:column;align-items:flex-start;gap:3px}.swatch{height:5px;width:100%}.legenditem small{font-size:7px}.board{gap:4px}.boardwrap{padding:6px;border-width:5px}.tile{border-radius:7px}.tile:after{inset:3px;border-radius:5px}.team strong{font-size:12px}.team small{font-size:8px}.score{gap:10px;font-size:29px}.clock{font-size:15px}.status{font-size:8px}}
.gauges{display:grid;gap:7px;max-width:590px;margin:0 auto 11px}.glabel{display:flex;justify-content:space-between;font-size:11px;font-weight:800;margin-bottom:3px}.glabel span{font:800 13px 'Barlow Condensed';color:#526589}.gbar{height:13px;background:#e3e9f3;border-radius:10px;overflow:hidden}.gbar i{display:block;height:100%;width:0;border-radius:10px}.gauge.my i{background:linear-gradient(90deg,#347ee8,#4fd1ff)}.gauge.opp i{background:linear-gradient(90deg,#f05283,#ff7a59)}.gauge.opp.danger .gbar{animation:danger .4s infinite alternate}@keyframes danger{to{box-shadow:0 0 0 3px #f0528366}}.totalrow{display:flex;align-items:baseline;gap:7px;border-top:1px solid #e8edf5;padding-top:10px;margin-top:4px}.totalrow b{font-size:11px}.totalrow small{font-size:9px;color:#8c98b1}.totalrow strong{margin-left:auto;font:900 24px 'Barlow Condensed';color:#e79516}
.board{overflow:hidden}.boardwrap{overflow:visible}
.tile.clearing{animation:clr .33s ease-in forwards;z-index:3}.tile.bigclear{animation:clrbig .44s ease-in forwards;z-index:3}
@keyframes clr{0%{transform:scale(1)}35%{transform:scale(1.2);filter:brightness(1.9);box-shadow:0 0 16px 5px #fff}100%{transform:scale(0);opacity:0}}
@keyframes clrbig{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-8deg);filter:brightness(2.2);box-shadow:0 0 26px 10px #ffd84a}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(0) rotate(30deg);opacity:0}}
.tile.drop{animation:drop calc(.14s + var(--fall)*.07s) ease-in both}
@keyframes drop{0%{transform:translateY(calc(var(--fall)*-110%))}82%{transform:translateY(6%)}100%{transform:none}}
.fx{position:absolute;inset:0;pointer-events:none;z-index:20;display:flex;align-items:center;justify-content:center}
.popfx{position:absolute;text-align:center;font:900 34px 'Barlow Condensed',sans-serif;color:#fff;-webkit-text-stroke:2px #24365f;text-shadow:0 4px 0 #24365f,0 0 20px #fff8;animation:popfx 1s ease-out forwards;white-space:nowrap}
.popfx small{display:block;font-size:14px;-webkit-text-stroke:0;color:#24365f;background:#fffe;border-radius:20px;padding:2px 10px;margin-top:4px;text-shadow:none}
.popfx.lv0{font-size:24px;color:#ffe27a}.popfx.lv2{font-size:44px;color:#ffd84a}.popfx.lv3{font-size:54px;color:#ff9d3c}.popfx.lv4{font-size:62px;color:#ff5d8f}
.popfx.goal{font-size:72px;color:#ffd84a}.popfx.lose{font-size:56px;color:#ff6b8f}.popfx.save,.popfx.miss{font-size:46px;color:#7cc4ff}
@keyframes popfx{0%{transform:scale(.3);opacity:0}18%{transform:scale(1.25);opacity:1}35%{transform:scale(1)}75%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
.shake1{animation:shk .3s}.shake2{animation:shk2 .45s}
@keyframes shk{25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}
@keyframes shk2{15%{transform:translate(-9px,4px) rotate(-1deg)}35%{transform:translate(8px,-5px) rotate(1deg)}55%{transform:translate(-6px,3px)}75%{transform:translate(4px,-2px)}}
.pitch{position:relative;max-width:590px;height:64px;margin:0 auto 6px;border-radius:12px;background:repeating-linear-gradient(90deg,#2f9e55 0 10%,#2a914d 10% 20%);border:2px solid #24365f;overflow:hidden}
.pitch.alert{box-shadow:0 0 0 3px #f05283aa;animation:danger .4s infinite alternate}
.halfway{position:absolute;left:50%;top:0;bottom:0;border-left:2px solid #ffffff80}
.pitch .goal{position:absolute;top:18px;width:7px;height:28px;background:#fff;border-radius:2px}.gl{left:0}.gr{right:0}
.pitch.shotme .gr{animation:gflash .6s 2}.pitch.shotopp .gl{animation:gflash .6s 2}
@keyframes gflash{50%{background:#ffd84a;box-shadow:0 0 18px 8px #ffd84a}}
.runner{position:absolute;display:flex;align-items:center;gap:1px;transition:left .1s linear;transform:translateX(-50%)}
.runner.me{top:7px}.runner.op{bottom:7px}
.runner span{width:16px;height:16px;border-radius:50%;border:2px solid #fff;animation:bob .35s infinite alternate}
.runner.me span{background:#347ee8}.runner.op span{background:#f05283}.runner i{font-size:11px;font-style:normal;animation:bob .35s .17s infinite alternate}
@keyframes bob{to{transform:translateY(-3px)}}
.pitchmsg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:900;color:#fff;background:#0006;border-radius:20px;padding:2px 10px;white-space:nowrap}
.nextatk{max-width:590px;margin:0 auto 6px;font-size:11px;font-weight:800;color:#e34a76;text-align:center}
.ladder{display:grid;gap:2px;margin:6px 0}.ladder div{display:grid;grid-template-columns:22px 1fr auto;gap:6px;font-size:10px;color:#9aa6bd;padding:2px 6px;border-radius:6px}.ladder b{font-family:'Barlow Condensed'}.ladder em{font-style:normal}
.ladder .done{color:#526589}.ladder .on{background:#ffedf2;color:#e34a76;font-weight:900}
.concede{font-size:10px;color:#347ee8;font-weight:800;text-align:right}
.opplist{display:grid;gap:6px;text-align:left}.opplist button{border:2px solid #dfe6f2;background:#f4f7fc;border-radius:10px;padding:7px 10px;cursor:pointer;color:#17213e}.opplist button.cur{border-color:#f47b36}.opplist b{display:flex;justify-content:space-between;font-size:12px}.opplist em{font-style:normal;font-size:10px;color:#f47b36}.opplist small{font-size:9px;color:#6f7d99}
@media(max-width:480px){.popfx{font-size:28px}.popfx.lv2{font-size:34px}.popfx.lv3{font-size:40px}.popfx.lv4,.popfx.goal{font-size:48px}.overlaycard{padding:16px}}
/* v0.6 コンパクト化 */
.app{padding:8px 14px 8px}.header{margin-bottom:6px}.brandball{font-size:22px}.brand b{font-size:16px}.brand small{display:none}.wallet{padding:4px 11px;font-size:12px}
.matchbar{padding:5px 14px;border-radius:12px}.team small{display:none}.team strong{font-size:14px}.scoreboard{padding:2px 10px}.score{font-size:26px;gap:12px}.score span{font-size:18px}.clock{font-size:14px}.status{display:none}
.main{margin-top:8px}.playarea{padding:10px 12px 8px}.panelhead,.legend{display:none}
.pitch{height:58px;margin-bottom:3px}.circle{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid #ffffff80;border-radius:50%}
.pl{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;display:grid;place-items:center;font-size:12px;line-height:1;border:2px solid #fff;box-shadow:0 2px 3px #0004;transition:left .3s linear,top .3s linear;z-index:2}
.pl.me{background:#347ee8}.pl.op{background:#f05283}
.ball{position:absolute;font-size:12px;margin:-7px 0 0 -7px;transition:left .3s linear,top .3s linear;z-index:3}
.pitchinfo{max-width:590px;margin:0 auto 4px;display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:800;color:#526589}.pitchinfo #nextAtk{color:#e34a76;text-align:right}
.gauges{gap:3px;margin-bottom:6px}.gauge{display:grid;grid-template-columns:88px 1fr 64px;align-items:center;gap:6px}.glabel{display:contents}.glabel b{grid-column:1;grid-row:1;font-size:11px}.glabel span{grid-column:3;grid-row:1;text-align:right;font-size:12px}.gbar{grid-column:2;grid-row:1;height:11px}
.boardwrap{max-width:min(560px,calc(100vh - 290px));max-width:min(560px,calc(100svh - 290px));min-width:260px;padding:6px;border-width:5px}
.hint{margin-top:5px}
@media(max-width:480px){.app{padding:6px 8px}.boardwrap{max-width:min(100%,calc(100svh - 270px))}.pitch{height:52px}.pl{width:20px;height:20px;margin:-10px 0 0 -10px;font-size:11px}.gauge{grid-template-columns:78px 1fr 58px}}
/* v0.7 ドラッグ・スワイプ */
.board{touch-action:none}.tile{-webkit-tap-highlight-color:transparent}
.tile.dragging{z-index:6;transition:none;box-shadow:0 10px 18px #0006;filter:brightness(1.12)}
.tile.moving{transition:transform .18s cubic-bezier(.3,1.3,.6,1);z-index:5}
.tile.landed{animation:land .28s ease-out}@keyframes land{0%{transform:scale(1.2);filter:brightness(1.5)}55%{transform:scale(.9)}100%{transform:none}}
.tile.nope{animation:nope .3s}@keyframes nope{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* v0.8 チャンス／ピンチゲージ */
.gauge.pinch,.gauge.chance{max-width:590px;margin:0 auto 4px;grid-template-columns:110px 1fr 58px}
.gauge.chance{margin:6px auto 3px}
.gauge.pinch .gbar,.gauge.chance .gbar{height:16px;border-radius:9px;position:relative}
.gauge.chance .gbar i{background:linear-gradient(90deg,#f3ae32,#ff7a2f);transition:width .35s cubic-bezier(.3,1.4,.6,1)}
.gauge.pinch .gbar i{background:linear-gradient(90deg,#b33a5c,#f05283);transition:width .12s linear}
.gauge.chance.hot .gbar{box-shadow:0 0 0 3px #ffd84a,0 0 14px #ffb83e;animation:hot .5s infinite alternate}
@keyframes hot{to{box-shadow:0 0 0 3px #fff3b0,0 0 24px #ffd84a}}
.gauge.pinch.danger .gbar{animation:danger .3s infinite alternate}
.gauge.bump .gbar{animation:gbump .3s}@keyframes gbump{40%{transform:scaleY(1.5)}}
.glabel b{white-space:nowrap}
.spark{position:fixed;width:11px;height:11px;border-radius:50%;pointer-events:none;z-index:50}
.spark.ch{background:radial-gradient(#fff,#ffcf4a 45%,#ff8a2f);box-shadow:0 0 10px #ffcf4a}
.spark.pb{background:radial-gradient(#fff,#6fb6ff 45%,#347ee8);box-shadow:0 0 10px #6fb6ff}
.quality{max-width:590px;margin:0 auto}
.qbar{position:relative;height:20px;border-radius:7px;background:#e3e9f3;overflow:hidden}
.qbar>i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#9fd0ff,#347ee8 50%,#8a5cf6);transition:width .3s}
.qseg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.qseg span{border-right:2px solid #fff;font-size:9px;font-weight:900;color:#24365fb0;display:grid;place-items:center;white-space:nowrap}
.qseg span.on{color:#fff;text-shadow:0 1px 2px #0008;outline:2px solid #ffd84a;outline-offset:-2px;border-radius:5px}
.qbar.bump{animation:gbump .35s}
.qinfo{display:flex;justify-content:space-between;gap:6px;font-size:10px;font-weight:800;color:#e34a76;margin-top:2px}.qinfo #toNext{color:#526589}
.badges{display:flex;flex-wrap:wrap;gap:3px;min-height:17px;margin-top:2px}.badges span{font-size:9px;font-weight:800;background:#24365f;color:#fff;border-radius:10px;padding:1px 7px}.badges .empty{background:none;color:#9aa6bd}
.popfx.lvup{font-size:40px;color:#9fe0ff}
body.pinchmode .app{box-shadow:inset 0 0 0 4px #f05283;animation:danger .3s infinite alternate}
.boardwrap{max-width:min(540px,calc(100vh - 360px));max-width:min(540px,calc(100svh - 360px))}
.hint{display:none}
@media(max-width:480px){.boardwrap{max-width:min(100%,calc(100svh - 335px))}.gauge.pinch,.gauge.chance{grid-template-columns:100px 1fr 52px}.pitch{height:48px}}
.popfx{white-space:normal;max-width:96%;line-height:1}.popfx.lvup{top:68%;font-size:30px}.popfx small{white-space:nowrap}
.glabel span{white-space:nowrap}
@media(max-width:480px){.popfx.lv2,.popfx.lv3,.popfx.lv4{font-size:34px}.popfx.lvup{font-size:24px}.gauge.pinch,.gauge.chance{grid-template-columns:96px 1fr 62px}.glabel span{font-size:11px}}
/* v0.9 Lv別シュート */
.qseg{grid-template-columns:repeat(3,1fr)}.qseg span{font-size:10px}
.ladder div{grid-template-columns:1fr auto 32px;align-items:center}.ladder small{font-size:8px;color:#9aa6bd}
.ladder .lvhead{display:block;font:900 10px 'Barlow Condensed';letter-spacing:1px;color:#526589;background:#edf1f9;margin-top:3px}.ladder .lvhead.on{background:#24365f;color:#fff}
.pl.gkp{width:18px;height:18px;margin:-9px 0 0 -9px;font-size:10px;border-color:#ffd84a}
/* v1.0 ピンチはピッチで表示 */
.gauge.chance{margin:3px auto 2px}
.gauge.chance .gbar i{background:linear-gradient(90deg,#ffd36a,#f3ae32 45%,#f05283)}
.gauge.chance.fade .gbar i{filter:grayscale(.7) brightness(.85)}
.gauge.chance.fade .glabel b:after{content:" ↓停滞中";color:#8995ad;font-size:9px}
.glabel span#chancePct{width:auto}
.quality{margin-bottom:5px}
.qbar>i{background:linear-gradient(90deg,#ffe7a3,#f3ae32 60%,#e79516)}
.dzone{position:absolute;left:0;top:0;bottom:0;width:42%;background:linear-gradient(90deg,#3b1d6acc,#3b1d6a00);opacity:0;pointer-events:none;transition:opacity .3s}
.pitch.alert .dzone{animation:dz .45s infinite alternate}@keyframes dz{to{filter:brightness(1.6)}}
.pitch.alert{box-shadow:0 0 0 3px #347ee8;animation:none}
.pbanner{position:absolute;left:50%;top:3px;transform:translate(-50%,-140%);z-index:6;background:#347ee8;color:#fff;font-size:11px;font-weight:900;padding:2px 10px;border-radius:12px;white-space:nowrap;box-shadow:0 2px 6px #0005;transition:transform .2s}
.pbanner b{background:#fff;color:#347ee8;border-radius:5px;padding:0 4px}.pbanner span{font-size:10px;opacity:.9}
.pbanner.show{transform:translate(-50%,0);animation:pb .5s infinite alternate}@keyframes pb{to{background:#1f5fc0}}
.board.wantdf .tile.df{animation:wantdf .5s infinite alternate}@keyframes wantdf{to{filter:brightness(1.35);box-shadow:0 0 0 3px #fff,0 0 14px #6fb6ff}}
.tile.hintmv{animation:hintmv .6s infinite alternate}@keyframes hintmv{to{transform:scale(.9) rotate(-4deg);filter:brightness(1.25)}}
body.pinchmode .app{box-shadow:inset 0 0 0 4px #347ee8}
.spark{width:12px;height:12px}.spark.fw{background:radial-gradient(#fff,#ff80a5 45%,#d8326c);box-shadow:0 0 10px #ff80a5}.spark.am{background:radial-gradient(#fff,#ffd36a 45%,#e79516);box-shadow:0 0 10px #ffd36a}.spark.dm{background:radial-gradient(#fff,#38d6c1 45%,#07988e);box-shadow:0 0 10px #38d6c1}.spark.df{background:radial-gradient(#fff,#559aff 45%,#2365ca);box-shadow:0 0 10px #559aff}
.boardwrap{max-width:min(540px,calc(100vh - 330px));max-width:min(540px,calc(100svh - 330px))}
@media(max-width:480px){.boardwrap{max-width:min(100%,calc(100svh - 315px))}.pbanner{font-size:10px}}
/* v1.1 */
.gauge.chance{grid-template-columns:auto 1fr auto}
.lvchip{display:inline-block;font:900 13px 'Barlow Condensed',sans-serif;color:#fff;border-radius:8px;padding:1px 8px;letter-spacing:1px}
.lvchip.l1{background:#e7a516}.lvchip.l2{background:#f0703a}.lvchip.l3{background:linear-gradient(90deg,#f05283,#8a5cf6,#347ee8);animation:l3 1s infinite alternate}@keyframes l3{to{filter:brightness(1.3)}}
.gauge.chance .gbar{height:20px;position:relative}
.gauge.chance .gbar em{position:absolute;left:8px;top:0;bottom:0;display:flex;align-items:center;font-style:normal;font-size:11px;font-weight:900;color:#24365f;text-shadow:0 0 3px #fff,0 0 3px #fff;white-space:nowrap}
.gauge.chance[data-lv="1"] .gbar i{background:linear-gradient(90deg,#ffe7a3,#f3ae32)}
.gauge.chance[data-lv="2"] .gbar i{background:linear-gradient(90deg,#ffc56a,#f0703a 60%,#f05283)}
.gauge.chance[data-lv="3"] .gbar i{background:linear-gradient(90deg,#f05283,#8a5cf6,#347ee8,#38d6c1);background-size:200% 100%;animation:rainbow 1.2s linear infinite}@keyframes rainbow{to{background-position:200% 0}}
.gauge.chance.bump{animation:gbump2 .35s}@keyframes gbump2{40%{transform:scale(1.04)}}
.qinfo{max-width:590px;margin:0 auto 5px}.qinfo #nextShot{color:#526589;font-weight:800}
.shields{position:absolute;left:8px;bottom:2px;font-size:11px;letter-spacing:-2px;z-index:4;filter:drop-shadow(0 1px 1px #0008)}.shields.bump{animation:gbump .4s}
.pinchfx{position:absolute;left:50%;top:-4px;transform:translate(-50%,-50%) scale(0);z-index:25;pointer-events:none;font:900 30px 'Noto Sans JP',sans-serif;color:#ffe14a;-webkit-text-stroke:2px #3b1d6a;text-shadow:0 3px 0 #3b1d6a;white-space:nowrap;transition:transform .2s}
.pinchfx.show{transform:translate(-50%,-50%) scale(1);animation:pinchfx .45s infinite alternate}@keyframes pinchfx{to{transform:translate(-50%,-50%) scale(1.15) rotate(-3deg);color:#fff}}
body.pinchmode .app{box-shadow:inset 0 0 0 6px #6a2ccf,inset 0 0 50px #6a2ccf99}
.tile.ultraclear{animation:clrultra .56s ease-in forwards;z-index:4}@keyframes clrultra{0%{transform:scale(1)}25%{transform:scale(1.5) rotate(-12deg);filter:brightness(2.6);box-shadow:0 0 34px 14px #fff}55%{transform:scale(1.35) rotate(12deg);box-shadow:0 0 40px 18px #ffd84a}100%{transform:scale(0) rotate(90deg);opacity:0}}
.boardwrap.flash:before{content:"";position:absolute;inset:-7px;border-radius:17px;background:radial-gradient(#fff,#fff0 70%);z-index:15;pointer-events:none;animation:bflash .5s ease-out forwards}@keyframes bflash{0%{opacity:.95}100%{opacity:0}}
.shake3{animation:shk3 .6s}@keyframes shk3{10%{transform:translate(-12px,6px) rotate(-2deg)}30%{transform:translate(11px,-7px) rotate(2deg)}50%{transform:translate(-9px,5px) rotate(-1deg)}70%{transform:translate(6px,-3px)}90%{transform:translate(-3px,2px)}}
.popfx.lv5{font-size:64px;color:#fff;-webkit-text-stroke:3px #8a5cf6;text-shadow:0 0 20px #ffd84a,0 4px 0 #8a5cf6}
.pitch.netshake .gr{animation:net .15s 6 alternate}@keyframes net{to{transform:scaleX(2.2);background:#ffd84a}}
.splash{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;text-align:center}
.splash.show{display:flex;animation:spl .3s ease-out}@keyframes spl{from{opacity:0}}
.splash .big{font:900 min(22vw,130px) 'Barlow Condensed','Noto Sans JP',sans-serif;line-height:1;color:#fff;-webkit-text-stroke:3px #24365f;text-shadow:0 6px 0 #24365f,0 0 40px #fff8;animation:bigin .6s cubic-bezier(.2,1.6,.4,1) both}@keyframes bigin{from{transform:scale(3) rotate(-8deg);opacity:0}}
.splash small{display:block;margin-top:8px;font-size:16px;font-weight:900;color:#fff;background:#24365fcc;border-radius:20px;padding:3px 16px;animation:bigin .6s .15s both}
.splash .sc{font:900 40px 'Barlow Condensed';color:#ffd84a;margin-top:6px;text-shadow:0 3px 0 #24365f}
.splash .vs{font-size:14px;font-weight:900;color:#fff;margin-bottom:8px;background:#0008;padding:3px 14px;border-radius:14px}.splash .vs i{color:#ffd84a;margin:0 6px}
.splash.kickoff{background:radial-gradient(#2f9e55ee,#123a24ee)}.splash.kickoff .big{color:#ffd84a}
.splash.goal{background:radial-gradient(#ffd84acc,#f47b36cc 60%,#24365fee);animation:goalbg .25s 4 alternate}@keyframes goalbg{to{filter:brightness(1.4)}}.splash.goal .big{font-size:min(28vw,170px);color:#ffd84a}
.splash.lose{background:#1a1030dd}.splash.lose .big{color:#b9a8ff;font-size:min(16vw,90px)}
.splash.timeup{background:radial-gradient(#24365fee,#0b1430f5)}.splash.timeup .big{color:#ffd84a}
.splash.counter{background:none}
.cutin{width:130%;transform:rotate(-6deg);background:linear-gradient(90deg,#f05283,#f3ae32);padding:14px 0;box-shadow:0 8px 30px #0006;animation:cut 1.1s ease-in-out forwards}
.cutin b{display:block;font-size:min(9vw,46px);font-weight:900;color:#fff;-webkit-text-stroke:2px #24365f;text-shadow:0 4px 0 #24365f}.cutin small{background:none;animation:none;font-size:14px}
@keyframes cut{0%{transform:translateX(100%) rotate(-6deg)}20%,80%{transform:translateX(0) rotate(-6deg)}100%{transform:translateX(-100%) rotate(-6deg)}}
.conf{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:conf 1.6s ease-in forwards}@keyframes conf{to{transform:translate(var(--dx),110vh) rotate(720deg)}}
.overlaycard{max-height:92%;overflow:auto}
.lgtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:6px}.lgtabs button{border:2px solid #dfe6f2;background:#f4f7fc;border-radius:9px;padding:5px;font:900 16px 'Barlow Condensed';color:#24365f;cursor:pointer}.lgtabs button small{display:block;font:700 9px 'Noto Sans JP';color:#8995ad}.lgtabs button.on{background:#24365f;color:#fff;border-color:#24365f}.lgtabs button.on small{color:#cdd8ef}
.opplist{max-height:210px;overflow:auto;grid-template-columns:1fr 1fr}.opplist button{padding:5px 7px}.opplist b{font-size:10.5px;gap:4px;align-items:center}.opplist em{font-size:8px;white-space:nowrap}
.overlay{padding:8px}
.pinchfx{width:max-content;top:0}
/* v1.2 盤面最大・実況テロップ */
.header{display:none}
.pitchinfo{display:none}
.pitch{height:62px}
.telop{position:absolute;left:0;right:0;bottom:0;z-index:7;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(90deg,#0b1430e6,#0b1430a0);padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateY(100%);transition:transform .2s}
.telop.show{transform:none;animation:telop 3s forwards}@keyframes telop{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:.75}}
.telop b{font-size:13px;margin-right:4px}.telop.atk b{color:#ffd36a}.telop.def b{color:#c9b3ff}.telop.def{background:linear-gradient(90deg,#3b1d6ae6,#3b1d6aa0)}.telop.def2 b{color:#8fd0ff}
.shields{bottom:16px}
.pinchfx{top:50%;font-size:24px;z-index:8}
.splash.counter{justify-content:flex-start;padding-top:70px}
.popfx{animation-duration:.75s;opacity:.92}
.qinfo{margin:4px auto 0;font-size:10px}
.boardwrap{max-width:min(560px,calc(100vh - 175px));max-width:min(560px,calc(100svh - 175px))}
@media(max-width:600px){
 .app{padding:4px 4px 8px}
 .matchbar{padding:2px 8px;border-radius:9px}.team strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scoreboard{padding:0 8px}.score{font-size:21px;gap:8px}.score span{font-size:14px}.clock{font-size:12px}
 .main{margin-top:4px;gap:8px}.playarea{padding:4px;border-radius:12px}
 .pitch{height:60px;margin-bottom:3px;border-radius:9px}
 .gauge.chance{margin:2px 0 3px}
 .boardwrap{max-width:100%!important;min-width:0;width:100%;border-width:3px;padding:3px;border-radius:12px}
 .board{gap:3px}.tile{border-radius:8px;font-size:clamp(18px,6vw,28px)}
}
.pitch{height:74px}@media(max-width:600px){.pitch{height:76px}.pbanner{font-size:9.5px;padding:1px 8px}}
.matchbar{position:relative}.sndbtn{position:absolute;left:50%;bottom:-2px;transform:translate(78px,0);border:0;background:#101a39cc;color:#fff;border-radius:50%;width:26px;height:26px;font-size:13px;cursor:pointer;z-index:3}@media(max-width:600px){.sndbtn{width:22px;height:22px;font-size:11px;transform:translate(62px,-2px)}}
.sndbtn{transform:translate(-104px,0)}@media(max-width:600px){.sndbtn{transform:translate(-84px,-2px)}}
/* v1.4 プレス・ゴール演出 */
.tile.x{background:repeating-linear-gradient(45deg,#4a4f63 0 8px,#3b3f50 8px 16px);color:#fff;font-size:clamp(18px,6vw,28px);cursor:not-allowed;box-shadow:inset 0 0 0 2px #f05283aa}
.splash.goal{background:radial-gradient(#fff3b0f0,#ffb83ef0 45%,#f05283f0 80%);animation:none}
.splash .rays{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(#ffffff55 0 10deg,#fff0 10deg 20deg);animation:rays 6s linear infinite;z-index:-1}@keyframes rays{to{transform:rotate(360deg)}}
.splash .gflash{position:absolute;inset:0;background:#fff;animation:gflash2 .45s ease-out forwards;z-index:5}@keyframes gflash2{to{opacity:0}}
.splash.goal .big{font-size:min(30vw,190px);color:#ffd84a;-webkit-text-stroke:4px #24365f;text-shadow:0 8px 0 #24365f,0 0 60px #fff;animation:goalbig .9s cubic-bezier(.2,1.8,.4,1) both,goalpulse .5s .9s infinite alternate}
@keyframes goalbig{0%{transform:scale(4) rotate(-12deg);opacity:0}60%{transform:scale(.9) rotate(3deg);opacity:1}100%{transform:none}}@keyframes goalpulse{to{transform:scale(1.08) rotate(-2deg)}}
.splash .scorer{font-size:20px;font-weight:900;color:#fff;background:#24365f;border-radius:24px;padding:4px 18px;margin-top:6px;animation:bigin .6s .3s both}
.splash.goal .sc{font-size:56px}.splash.goal .sc span{display:inline-block;color:#fff;animation:scnum .6s .6s cubic-bezier(.2,2,.4,1) both}@keyframes scnum{from{transform:scale(3);opacity:0}}
.goalshake{animation:shk3 .6s 2}
.scorepop{display:inline-block;color:#ffd84a;animation:scnum .5s cubic-bezier(.2,2,.4,1),goalpulse .4s .5s infinite alternate}
.pitch.celebrate .pl.me{animation:jump .3s infinite alternate}@keyframes jump{to{transform:translateY(-8px)}}
.pitch .goal{top:50%;margin-top:-16px;height:32px}
.splash.goal .big{font-size:min(25vw,190px)}
/* v1.5 盾・チーム名・ランキング */
.gauge.chance{grid-template-columns:auto 1fr auto auto}
.guard{grid-column:4;grid-row:1;display:flex;align-items:center;gap:1px;background:#e8f0ff;border:2px solid #347ee8;border-radius:9px;padding:0 5px;height:24px}
.guard small{font-size:9px;font-weight:900;color:#347ee8;margin-right:2px}
.guard i{font-style:normal;font-size:15px;filter:grayscale(1) opacity(.25);transition:filter .2s,transform .2s}.guard i.on{filter:drop-shadow(0 0 3px #6fb6ff);transform:scale(1.08)}
.guard.bump{animation:gbump2 .4s}.guard.full{background:#d6e7ff;box-shadow:0 0 8px #6fb6ff}
.guard.empty{border-color:#8a5cf6;background:#f1eaff;animation:danger .35s infinite alternate}
.gauge.chance .glabel span#chancePct{grid-column:3}
@media(max-width:600px){.guard{padding:0 3px;height:22px}.guard i{font-size:12px}.guard small{display:none}.gauge.chance .glabel span#chancePct{font-size:10px}}
.tnbox{border:2px solid #f3ae32;background:#fff8e6;border-radius:10px;padding:6px 8px;margin:4px 0 6px;text-align:left}.tnbox b{font-size:11px;color:#b57400}
.tnrow{display:flex;gap:5px;margin-top:3px}.tnrow input{flex:1;min-width:0;border:1px solid #dfc48a;border-radius:7px;padding:6px 8px;font-size:15px;font-weight:800}.tnrow button{border:0;background:#f3ae32;color:#fff;border-radius:7px;width:36px;font-size:17px;cursor:pointer}
.step2{font-size:11px;font-weight:900;color:#526589;text-align:left;margin:2px 0 4px}
.rkbtn{margin-top:7px;width:100%;border:0;background:#24365f;color:#fff;border-radius:9px;padding:7px;font-weight:900;cursor:pointer}
.rkbox,.rkres{text-align:left}.rkbox:not(.open){display:none}.lgtabs.mini{margin:6px 0 4px}.lgtabs.mini button{padding:3px;font-size:13px}
.rkhead{font-size:11px;font-weight:900;color:#24365f;margin:6px 0 3px}.rknote{font-size:11px;color:#8995ad;margin:6px 0}
.rklist{list-style:none;margin:0;padding:0;max-height:200px;overflow:auto}.rklist li{display:grid;grid-template-columns:22px 1fr auto 34px;gap:5px;align-items:center;font-size:11px;padding:3px 4px;border-bottom:1px solid #edf0f6}
.rklist li b{font-family:'Barlow Condensed';font-size:14px;color:#f47b36;text-align:center}.rklist li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.rklist small{display:block;font-weight:400;color:#8995ad;font-size:9px}.rklist em{font-style:normal;font-weight:900}.rklist i{font-style:normal;color:#8995ad;text-align:right}
.rklist li.mine{background:#fff3d6}
.rkme{font-size:13px;color:#24365f;background:#fff3d6;border-radius:8px;padding:5px 8px;margin-bottom:4px}.rkme b{color:#f47b36}
.popfx.lv1{font-size:26px;color:#cfd8ea}
.splash .big.gola{font-size:min(17vw,110px);color:#fff;-webkit-text-stroke:4px #8a5cf6;text-shadow:0 8px 0 #8a5cf6,0 0 60px #ffd84a;white-space:nowrap}
.splash .scorer{font-size:22px}
.overlay{position:fixed;inset:0;z-index:60;border-radius:0;background:#101b3de6}.overlaycard{max-height:94vh;width:min(420px,94vw);max-width:none}.opplist{max-height:none}@media(max-width:600px){.bigball{display:none}.overlaycard h2{font-size:17px}.overlaycard p{margin:2px 0 6px}}
/* v1.6 */
.gauge.chance{grid-template-columns:auto 1fr auto}
.guard{max-width:590px;margin:0 auto 5px;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;background:linear-gradient(90deg,#e3eeff,#f4f8ff);border:2px solid #347ee8;border-radius:11px;grid-column:auto;grid-row:auto}
.guard b{font-size:12px;color:#1f5fc0;white-space:nowrap}
.guard .gs{display:flex;gap:3px}.guard .gs i{font-style:normal;font-size:23px;line-height:1;filter:grayscale(1) opacity(.22);transition:filter .25s,transform .25s}
.guard .gs i.on{filter:drop-shadow(0 0 4px #4f9dff);transform:scale(1.05)}
.guard em{margin-left:auto;font-style:normal;font-size:10px;font-weight:800;color:#526589;white-space:nowrap}
.guard.warn{border-color:#8a5cf6;animation:gwarn .45s infinite alternate}@keyframes gwarn{to{box-shadow:0 0 0 3px #8a5cf655}}
.guard .gs i.brk{animation:brk .9s ease-out}@keyframes brk{0%{filter:none;transform:scale(1.4)}15%{filter:drop-shadow(0 0 8px #ff3b6b) brightness(2);transform:scale(1.5) rotate(-10deg)}30%{filter:none;transform:scale(1.2) rotate(8deg)}45%{filter:drop-shadow(0 0 8px #ff3b6b) brightness(2)}60%{filter:none}100%{filter:grayscale(1) opacity(.22);transform:scale(.8) rotate(25deg) translateY(4px)}}
.guard.hit{animation:ghit .5s}@keyframes ghit{20%{transform:translateX(-6px);background:#ffe1ea}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@media(max-width:600px){.guard{height:32px;gap:6px;padding:0 8px}.guard .gs i{font-size:21px}}
/* ゴール：背景を透かす */
.splash.goal{background:radial-gradient(#fff3b070,#ffb83e55 45%,#f0528340 80%)}
.splash .rays{background:repeating-conic-gradient(#ffffff33 0 10deg,#fff0 10deg 20deg)}
.splash .gflash{animation:gflash3 .4s ease-out forwards}@keyframes gflash3{from{opacity:.6}to{opacity:0}}
.splash.lose{background:#1a103099}
/* 4個以上・5個以上 */
.popfx .cnt{font-size:1.45em;color:#fff;-webkit-text-stroke:2px #f05283;margin-right:2px}
.beam{position:absolute;z-index:12;pointer-events:none;border-radius:12px;animation:beam .7s ease-out forwards}
.beam.l4{background:linear-gradient(90deg,#fff0,#fff8,#ffd84acc,#fff8,#fff0);box-shadow:0 0 18px 6px #ffd84a99}
.beam.vt.l4{background:linear-gradient(180deg,#fff0,#fff8,#ffd84acc,#fff8,#fff0)}
.beam.l5,.beam.l6{background:linear-gradient(90deg,#ff80a5cc,#ffd84aee,#6fb6ffcc);box-shadow:0 0 26px 10px #ffd84aaa,0 0 50px 18px #ff80a566}
.beam.vt.l5,.beam.vt.l6{background:linear-gradient(180deg,#ff80a5cc,#ffd84aee,#6fb6ffcc)}
@keyframes beam{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.08);opacity:1}100%{transform:scale(1.25);opacity:0}}
.shard{position:fixed;width:9px;height:9px;background:#ffd84a;transform:rotate(45deg);z-index:50;pointer-events:none;box-shadow:0 0 8px #fff}
/* 連鎖カウンター：半透明の斜めバンド */
.splash.counter{padding-top:58px}
.cutin{width:140%;padding:7px 0;background:linear-gradient(90deg,#f0528300,#f05283bb 18%,#f3ae32bb 82%,#f3ae3200);backdrop-filter:blur(2px);border-top:2px solid #fff9;border-bottom:2px solid #fff9;box-shadow:none;position:relative}
.cutin:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#fff0 0 30px,#ffffff33 30px 34px);animation:speed .3s linear infinite}@keyframes speed{to{background-position:-68px 0}}
.cutin b{position:relative;font-size:min(8vw,38px)}.cutin b:before{content:"⚡ "}.cutin b:after{content:" ⚡"}.cutin small{position:relative;font-size:12px;padding:0}
/* 一時停止 */
.pausebtn{position:absolute;left:50%;bottom:-2px;transform:translate(76px,0);border:0;background:#101a39cc;color:#fff;border-radius:50%;width:26px;height:26px;font-size:12px;cursor:pointer;z-index:3}
@media(max-width:600px){.pausebtn{width:22px;height:22px;font-size:10px;transform:translate(60px,-2px)}}
.menu{position:fixed;inset:0;z-index:90;background:#0b1430cc;display:none;align-items:center;justify-content:center}.menu.show{display:flex}
.menucard{background:#fff;border-radius:16px;padding:16px;width:min(300px,86vw);display:grid;gap:8px;text-align:center;color:#17213e}.menucard b{font-size:17px}
.menucard button{border:0;border-radius:10px;padding:11px;font-size:15px;font-weight:900;cursor:pointer;background:#edf1f9;color:#24365f}.menucard #mResume{background:linear-gradient(135deg,#ffb83e,#f47b36);color:#24172a}.menucard small{font-size:10px;color:#8995ad}
.backsite{display:block;margin-top:8px;font-size:11px;color:#526589;text-align:center}
.pausebtn{font-weight:900;font-family:sans-serif}