:root{--ink:#224657;--muted:#728a92;--blue:#209bb4;--pink:#eb7690;--paper:#fbfcf4;--line:#e0e9e5}*{box-sizing:border-box}body{margin:0;background:#edf2e9;color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI','Noto Sans JP',sans-serif}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);padding:11px 16px;font-weight:750;transition:filter .12s,transform .12s}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffc653;outline-offset:3px}.hidden{display:none!important}.app{max-width:1120px;margin:auto;background:var(--paper);min-height:100dvh}.topbar{height:79px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;letter-spacing:1px;font-size:15px;font-weight:500;line-height:1.25}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:5px}.brandball{font-size:38px;color:var(--blue);transform:rotate(-35deg)}.top-actions{display:flex;gap:7px}.icon{width:37px;height:37px;border-radius:50%;padding:0;font-size:19px}.arena{position:relative;overflow:hidden;isolation:isolate;background:#f6daa0}canvas{display:block;width:100%;height:auto;max-height:72dvh;object-fit:contain}.home-panel{position:absolute;left:6%;top:9%;width:330px;padding:26px;background:#fffdf4f2;border:1px solid #ffffffc0;border-radius:24px;box-shadow:0 15px 40px #45676115}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:var(--blue);margin-bottom:15px}h1{font-size:40px;line-height:1.25;letter-spacing:-2px;margin:0 0 13px;font-weight:900}.title-dot{color:var(--pink)}.home-panel p{font-size:14px;line-height:1.8;margin:0 0 22px;color:#597781}.primary,.secondary{display:flex;justify-content:center;align-items:center;gap:20px;width:100%;padding:14px 19px;border-radius:13px;font-size:15px}.primary{background:var(--blue);color:white;border-color:var(--blue);box-shadow:0 3px 0 #187f96}.secondary{background:#fffdf4;border-color:#c8dcdf}.home-panel button{justify-content:space-between;margin-top:10px}.home-tags{display:flex;gap:8px;font-size:9px;font-weight:700;color:#839397;margin-top:19px}.home-tags span+span{border-left:1px solid #d9e3df;padding-left:8px}footer{display:flex;justify-content:space-between;padding:18px 30px;font-size:9px;letter-spacing:1.4px;color:#91a39e}.hud{display:flex;justify-content:center;align-items:center;position:relative;background:#fffdf5;min-height:80px;padding:9px 12px;gap:25px;flex-wrap:wrap}.team{width:145px;font-size:13px;font-weight:850}.team small{display:block;font-size:10px;min-height:15px;margin-top:5px}.me{text-align:right;color:#1698b1}.them{color:#df6b87}.score{display:flex;align-items:center;gap:14px;font-size:28px}.score strong{font-size:38px;min-width:42px;text-align:center}.score span{color:#c9d4d1}.match-meta{display:flex;justify-content:center;align-items:center;gap:10px;font-size:10px;color:var(--muted);width:100%;margin-top:-3px}.match-meta button{font-size:10px;padding:3px 9px;border-radius:7px}.notice{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:#fff9e9ec;border-radius:30px;padding:8px 19px;font-size:14px;font-weight:800;white-space:nowrap;box-shadow:0 3px 10px #556c5b12;pointer-events:none}.phase-hint{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);font-size:12px;background:#ffffffdb;padding:7px 16px;border-radius:20px;white-space:nowrap;pointer-events:none}.controls{display:flex;align-items:center;justify-content:center;gap:32px;padding:14px 20px;background:#fffdf5;user-select:none}.joystick{width:105px;height:105px;background:#eef4ed;border:1px solid #d9e8df;border-radius:50%;position:relative;touch-action:none}.joy-label{position:absolute;bottom:10px;text-align:center;width:100%;font-size:8px;letter-spacing:2px;color:#a4b9b0}.knob{position:absolute;top:28px;left:28px;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 4px 7px #3868591a;border:2px solid #c8e1db;pointer-events:none}.tactics{min-width:205px}.tiny{font-size:8px;letter-spacing:2px;color:#98aaa7;font-weight:800}.tactic-button{width:100%;display:flex;justify-content:space-between;gap:10px;padding:7px 11px;margin:4px 0 7px;border-radius:9px;font-size:13px}.tactic-button small{font-size:9px;color:#7e9699;align-self:center}.mini-actions{display:flex;gap:6px}.mini-actions button{font-size:11px;padding:6px 9px;flex:1;border-radius:9px}.mini-actions .active{background:#ffe6c4;border-color:#eebf7d}.action{width:106px;height:106px;border-radius:50%;background:#ef879b;border:6px solid #ffe5e8;box-shadow:0 4px 0 #d96886;color:white;display:flex;flex-direction:column;justify-content:center;padding:0;font-size:18px;touch-action:none}.action small{font-size:8px;letter-spacing:2px;margin-top:5px;opacity:.75}kbd{font:9px system-ui;border:1px solid #dce6e1;border-radius:4px;padding:1px 4px;color:#849991;background:#f9faf6}.key-help{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:10px;color:#81978e;padding:5px 10px 15px}dialog{width:min(460px,calc(100% - 24px));max-height:90dvh;overflow:auto;padding:30px;border:1px solid #e1e9df;border-radius:23px;color:var(--ink);background:#fffff7;box-shadow:0 24px 100px #194e5c25}dialog::backdrop{background:#20485765;backdrop-filter:blur(4px)}dialog h2{margin:0 0 12px;font-size:25px;letter-spacing:-.5px}dialog p{font-size:13px;color:#70868c;line-height:1.85}dialog>.primary,dialog>.secondary{margin-top:13px}.close{position:absolute;right:13px;top:12px;border:0;background:transparent;font-size:24px;padding:0 7px;color:#7d9699}.difficulty{display:grid;gap:8px;margin:22px 0}.difficulty button{display:flex;text-align:left;align-items:center;gap:15px;padding:11px 14px;background:#fff}.difficulty b{color:#9fc2c5;font-size:23px;font-weight:500}.difficulty span{font-size:13px}.difficulty small{display:block;font-weight:400;color:#8aa0a1;margin-top:3px;font-size:11px}.difficulty .selected{border-color:#4eb4bc;background:#e8f7f2;box-shadow:0 0 0 1px #4eb4bc}.difficulty button[data-level="4"]{background:#fbf3dc}.field{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:15px 0;gap:12px}select,input{border:1px solid #d7e4db;border-radius:9px;padding:9px;background:#fff;color:var(--ink)}input[type="checkbox"]{width:21px;height:21px;accent-color:var(--blue)}input[type="range"]{width:160px;accent-color:var(--blue)}.fine{font-size:11px!important;color:#92a29c!important}.divider{text-align:center;color:#96a7a6;font-size:11px;padding:20px 0 12px}.join-row{display:flex;gap:8px}.join-row input{min-width:0;width:100%;font-size:16px}.join-row button{width:auto;white-space:nowrap}.room-number{font-size:42px;letter-spacing:8px;margin:10px 0;font-weight:850}.ready-state{display:grid;gap:7px;font-size:12px;color:#6c8a8c;margin:15px 0}.status{color:#b36959;font-size:12px}.text-button{border:0;padding:8px 0;color:var(--blue);background:transparent}.help-steps b{display:block;color:#269bb2;margin-bottom:3px}.help-steps p{border-bottom:1px solid #e4ece3;padding-bottom:13px}.play-list{display:grid;gap:8px;margin-top:20px}.play-card{text-align:left;display:grid;grid-template-columns:1fr 110px;align-items:center}.play-card b{font-size:14px}.play-card small{display:block;font-size:10px;color:#8b9d9c;font-weight:400;margin-top:4px}.play-card svg{width:110px;height:44px}.result-score{font-size:64px;font-weight:900;letter-spacing:8px;color:var(--blue);margin:20px 0}body.playing .arena canvas{max-height:60dvh}body.playing footer{display:none}
@media(max-width:600px){.topbar{height:62px;padding:0 15px}.brand{font-size:12px}.brand small{font-size:8px}.brandball{font-size:30px}.top-actions{gap:5px}.icon{width:30px;height:30px;font-size:16px}.arena canvas{min-height:420px;object-fit:cover}.home-panel{left:7%;top:10%;width:270px;padding:22px}h1{font-size:33px}.home-panel p{font-size:12px;margin-bottom:15px}.home-tags{font-size:8px}footer{padding:15px;font-size:7px;letter-spacing:1px}body.playing .arena canvas{min-height:0;max-height:none;object-fit:contain}.hud{gap:14px;padding:6px 7px}.team{width:105px;font-size:11px}.score{gap:9px}.score strong{font-size:29px;min-width:29px}.match-meta{gap:6px;font-size:9px}.controls{padding:15px 8px;gap:12px}.joystick{width:87px;height:87px;flex-shrink:0}.knob{width:42px;height:42px;top:22px;left:22px}.action{width:89px;height:89px;flex-shrink:0;font-size:14px}.tactics{min-width:0;width:152px}.tactic-button{padding:8px;font-size:12px}.tactic-button small{font-size:8px}.mini-actions button{font-size:10px;padding:6px}.mini-actions kbd{display:none}.key-help{font-size:9px;gap:9px}.notice{font-size:11px;top:4px;padding:5px 12px}.phase-hint{font-size:9px;max-width:95%;white-space:normal;text-align:center;padding:5px 10px}.tiny{font-size:7px}dialog{padding:25px}.result-score{font-size:52px}}
@media(max-height:550px) and (orientation:landscape){body.playing .topbar{display:none}body.playing main{position:relative;padding-bottom:0}body.playing .hud{height:65px;min-height:65px;padding:2px}.hud .team small{display:none}body.playing .arena canvas{height:calc(100dvh - 65px);max-height:none;min-height:0;object-fit:contain}.controls{position:absolute;bottom:8px;left:0;right:0;background:none;justify-content:space-between;padding:0 12px;pointer-events:none}.controls>*{pointer-events:auto}.tactics{position:absolute;left:10px;bottom:106px;width:140px;background:#fffdf5d9;padding:5px;border-radius:12px}.action{width:86px;height:86px;font-size:14px}.joystick{width:87px;height:87px;background:#eef4edbb}.knob{top:22px;left:22px;width:42px;height:42px}.key-help{display:none!important}.home-panel{top:5%;left:6%;width:285px;padding:18px}h1{font-size:29px}.home-panel p{font-size:11px;margin-bottom:8px}.home-panel button{padding:10px}.home-tags{margin-top:12px}.arena canvas{min-height:350px}.topbar{height:58px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.action.ready-hit{background:#40bca4;border-color:#d4f2ca;box-shadow:0 4px 0 #2b957e}
/* v2: Always available play calls; no modal or pause to call a quick. */
.quick-bar{display:grid;grid-template-columns:1.1fr repeat(4,1fr) 1.3fr 1.6fr;gap:7px;padding:10px 20px;background:#fffdf5;border-bottom:1px solid #e8ede4;user-select:none}
.quick-call{min-height:48px;padding:8px 6px;display:flex;align-items:center;justify-content:center;gap:9px;touch-action:none;background:#eef8f6;border-color:#cde2dc;font-size:15px}
.quick-call.active{background:#209bb4;color:white;border-color:#209bb4;box-shadow:inset 0 -3px 0 #147e98}.quick-call.active kbd{color:#fff;border-color:#ffffff60;background:transparent}
.drop-call{background:#ffeedb;border-color:#f3d3af}.drop-call.active{background:#e88865;border-color:#e88865}
.tactic-summary{background:transparent;border:0;cursor:default}.tactic-summary small{color:#9aa9a1}
@media(max-width:600px){.quick-bar{padding:7px 7px;gap:4px}.quick-call{min-height:46px;padding:5px 2px;font-size:13px}.quick-call kbd{display:none}.quick-call:last-child{font-size:11px}.controls{padding-top:10px;padding-bottom:12px}.quick-call:nth-child(6){font-size:11px}.tactics{width:126px}.controls{gap:15px}}
@media(max-height:550px) and (orientation:landscape){body.playing .arena canvas{height:calc(100dvh - 123px)}.quick-bar{height:58px;padding:6px 10px}.quick-call{min-height:44px;font-size:13px}.controls{bottom:66px}.tactics{left:10px;bottom:97px;width:122px}.tactic-summary{font-size:11px}.quick-call kbd{display:none}}
@media(min-width:601px) and (min-height:551px){body.playing .arena canvas{max-height:calc(100dvh - 420px);min-height:260px}}

/* Touch surfaces must never open text selection or the iOS long-press callout. */
.controls,.controls *,.quick-bar,.quick-bar *,.arena,.arena *,.key-help,.key-help *{
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.controls button,.quick-bar button{touch-action:none}
.controls button *,.quick-bar button *,.joy-label{pointer-events:none}
.phase-hint{display:none!important}
@media(pointer:coarse){.joy-label,.action small,.key-help,.controls kbd,.quick-bar kbd{display:none!important}}

/* Native long-press/scroll suppression applies throughout the live control surfaces. */
#controls,#quickBar,#joystick,#joystick *{touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none}
body.playing .app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.playing dialog input,body.playing dialog textarea,body.playing .room-number{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}