:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#e2e8f0;background-color:#0b1120;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(1200px 600px at 50% -10%,#15233f,#0b1120)}button{font-family:inherit}button:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}.start{max-width:520px;margin:0 auto;padding:2rem 1rem 3rem;text-align:center}.start__title{font-size:4rem;font-weight:800;letter-spacing:-.04em;margin:.5rem 0 0;background:linear-gradient(120deg,#38bdf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}.start__tagline{color:#94a3b8;margin:.25rem 0 2rem}.start__section{margin-bottom:2rem}.start__heading{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:.75rem}.start__modes,.start__formations{display:grid;gap:.75rem}.start__modes,.start__formations{grid-template-columns:1fr 1fr}.mode-btn,.formation-btn{display:flex;flex-direction:column;gap:.25rem;padding:.9rem;border-radius:.75rem;border:1px solid #334155;background:#1e293b;color:#e2e8f0;cursor:pointer;font-size:1rem;transition:border-color .15s,transform .05s}.mode-btn:hover,.formation-btn:hover{border-color:#38bdf8}.formation-btn:active{transform:scale(.98)}.mode-btn.is-active{border-color:#38bdf8;background:#0f3a4d}.mode-btn__hint{font-size:.7rem;color:#94a3b8}.formation-btn__id{font-size:1.4rem;font-weight:700}.formation-btn__shape{font-size:.75rem;color:#94a3b8}.pitch{position:relative;width:100%;max-width:460px;aspect-ratio:3 / 4;margin:0 auto;border-radius:.75rem;background:linear-gradient(180deg,#15803d,#166534);border:2px solid #14532d;overflow:hidden}.pitch__halfway{position:absolute;left:0;right:0;top:50%;height:2px;background:#ffffff40}.pitch__circle{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.25);border-radius:50%}.slot{position:absolute;transform:translate(-50%,50%);width:84px;text-align:center;color:#fff}.slot__bucket{display:inline-grid;place-items:center;width:44px;height:44px;margin:0 auto;border-radius:50%;border:2px dashed rgba(255,255,255,.5);font-size:.75rem;font-weight:700;background:#0003}.slot.is-current .slot__bucket{border-style:solid;border-color:#fde047;box-shadow:0 0 0 4px #fde04759;animation:slot-pulse 1.2s ease-in-out infinite}@keyframes slot-pulse{50%{box-shadow:0 0 0 8px #fde04726}}.slot__player{display:flex;flex-direction:column;gap:1px;background:#020617c7;border-radius:.4rem;padding:3px 5px}.slot__name{font-size:.72rem;font-weight:700;line-height:1.1}.slot__club{font-size:.6rem;color:#cbd5e1}.slot__stats{font-size:.58rem;color:#93c5fd}.slot__moves{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}.slot__move{padding:1px 5px;border-radius:.3rem;border:1px solid #475569;background:#1e293b;color:#fde047;font-size:.58rem;font-weight:700;cursor:pointer;line-height:1.3}.slot__move:hover{border-color:#fde047;background:#2a3650}.machine{text-align:center}.machine__turn{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;margin-bottom:.6rem}.machine__reels{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.reel{display:flex;flex-direction:column;gap:2px;padding:.7rem;border-radius:.6rem;background:#0f172a;border:1px solid #334155;animation:reel-settle .35s ease}@keyframes reel-settle{0%{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}.reel__label{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.reel__value{font-size:1.2rem;font-weight:700;color:#f8fafc}.machine__need{color:#cbd5e1}.machine__hint{margin:.6rem 0 0;font-size:.72rem;color:#64748b}.picker__pos{display:inline-grid;place-items:center;min-width:2.2rem;padding:1px 4px;margin-right:.45rem;border-radius:.3rem;font-size:.6rem;font-weight:800;letter-spacing:.03em;vertical-align:middle;color:#0b1120}.picker__pos--GK{background:#fcd34d}.picker__pos--DEF{background:#93c5fd}.picker__pos--MID{background:#86efac}.picker__pos--FWD{background:#fca5a5}.picker{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem;max-height:320px;overflow-y:auto}.picker__empty{color:#fca5a5;text-align:center;margin-top:1rem}.picker__item{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-areas:"name rating" "stats rating";gap:0 .5rem;align-items:center;text-align:left;padding:.6rem .8rem;border-radius:.55rem;border:1px solid #334155;background:#1e293b;color:#e2e8f0;cursor:pointer}.picker__item:hover{border-color:#38bdf8;background:#243449}.picker__name{grid-area:name;font-weight:600}.picker__stats{grid-area:stats;display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}.statchip{display:inline-flex;align-items:baseline;gap:.25rem;padding:1px 6px;border-radius:.3rem;background:#0f172a;border:1px solid #283449;font-size:.64rem}.statchip__label{color:#94a3b8}.statchip__value{color:#e2e8f0;font-weight:700}.picker__rating{grid-area:rating;display:flex;gap:.3rem}.chip{font-size:.62rem;font-weight:700;padding:2px 6px;border-radius:.35rem}.chip--atk{background:#7c2d12;color:#fed7aa}.chip--def{background:#1e3a8a;color:#bfdbfe}.rerolls{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}.reroll-btn{padding:.6rem;border-radius:.55rem;border:1px solid #334155;background:#1e293b;color:#e2e8f0;cursor:pointer;font-size:.9rem}.reroll-btn:hover:not(:disabled){border-color:#a78bfa}.reroll-btn:disabled{opacity:.4;cursor:not-allowed}.reroll-btn__count{display:inline-grid;place-items:center;min-width:1.3rem;height:1.3rem;margin-left:.3rem;border-radius:50%;background:#0f172a;font-size:.75rem;font-weight:700}.result{max-width:420px;margin:0 auto;text-align:center;padding:1.5rem;border-radius:1rem;background:#0f172a;border:1px solid #334155}.result--perfect{border-color:#facc15;box-shadow:0 0 40px #facc1540}.result__perfect{font-size:4.5rem;font-weight:900;letter-spacing:-.04em;background:linear-gradient(120deg,#fde047,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}.result__perfect-sub{color:#fde68a;margin-bottom:.5rem}.result__record{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.stat{padding:.75rem 0;border-radius:.6rem;background:#1e293b}.stat__value{display:block;font-size:2rem;font-weight:800}.stat__label{font-size:.75rem;color:#94a3b8}.stat--win .stat__value{color:#4ade80}.stat--draw .stat__value{color:#cbd5e1}.stat--loss .stat__value{color:#f87171}.result__points{margin:1rem 0;color:#cbd5e1;font-weight:600}.result__bars{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}.barrow{display:grid;grid-template-columns:64px 1fr 32px;align-items:center;gap:.5rem}.barrow__label{font-size:.72rem;color:#94a3b8;text-align:left}.barrow__num{font-size:.8rem;font-weight:700}.bartrack{height:10px;border-radius:5px;background:#1e293b;overflow:hidden}.bar{height:100%;border-radius:5px;transition:width .6s ease}.bar--atk{background:linear-gradient(90deg,#fb923c,#ef4444)}.bar--def{background:linear-gradient(90deg,#60a5fa,#2563eb)}.result__totals{margin:.4rem 0 .2rem;padding:.7rem .8rem;border:1px solid #283449;border-radius:.6rem;background:#0f172a}.result__totals-head{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#94a3b8;margin-bottom:.5rem}.result__totals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:.5rem .4rem}.total{display:flex;flex-direction:column;align-items:center;gap:1px}.total__value{font-size:1.05rem;font-weight:800;color:#f8fafc}.total__label{font-size:.6rem;color:#94a3b8;text-align:center}.result__actions{display:flex;gap:.6rem;justify-content:center}.result__copy,.result__again{padding:.6rem 1.2rem;border-radius:.55rem;border:1px solid #334155;background:#1e293b;color:#e2e8f0;cursor:pointer;font-size:.9rem}.result__copy:hover,.result__again:hover{border-color:#38bdf8}.app{width:100%;max-width:980px;margin:0 auto;padding:1.5rem 1rem 4rem}.app__header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}.app__brand{font-size:1.4rem;font-weight:800;letter-spacing:-.03em}.app__mode-tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8}.play{display:grid;gap:1.5rem;grid-template-columns:1fr}@media (min-width: 820px){.play{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}.play__panel{background:#0f172a;border:1px solid #1e293b;border-radius:1rem;padding:1.25rem}.play__done{padding-top:2rem}