:root{--ink:#173547;--ink-soft:#2f5966;--line:#b7c9c8;--accent:#17868d;--danger:#b43b2f;--font-body:"Nunito", "Avenir Next", "Trebuchet MS", sans-serif;--font-display:"Bree Serif", "Rockwell", "Georgia", serif;font-family:var(--font-body);color:var(--ink-soft);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:500;line-height:1.45}*{box-sizing:border-box}body{background:radial-gradient(circle at 12% 12%,#fade856b,#0000 42%),radial-gradient(circle at 88% 84%,#4ab8a057,#0000 46%),linear-gradient(#f4f8ef,#e8f1e5 35%,#d8ebd6 100%);min-width:320px;min-height:100vh;margin:0}#root{min-height:100vh}.app-shell{gap:1rem;width:min(960px,100% - 2rem);margin:1.25rem auto 2rem;display:grid}.app-header{padding:1.25rem 1.25rem .5rem}.game-active .app-header{padding:.4rem 1.25rem .2rem}.game-active .kicker{display:none}.game-active h1{margin:0;font-size:1.1rem}.game-active .subtitle{display:none}.kicker{font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0;font-size:.86rem}h1{font-family:var(--font-display);letter-spacing:.01em;color:var(--ink);margin:.35rem 0 .4rem;font-size:clamp(2rem,5vw,3rem);line-height:1}.subtitle{color:var(--ink-soft);margin:0;font-size:1rem}.panel{border:1px solid var(--line);background:linear-gradient(#ffffffd6,#fbf2d9e0);border-radius:20px;padding:1.15rem;box-shadow:0 14px 34px #1133451f}.panel h2{font-family:var(--font-display);color:var(--ink);margin:0 0 .8rem;font-size:clamp(1.3rem,2.4vw,1.8rem)}.mode-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;display:grid}.mode-card{background:#ffffffc2;border:1px solid #12384d24;border-radius:14px;gap:.45rem;padding:.9rem;display:grid}.mode-card h3{color:var(--ink);font-family:var(--font-display);margin:0;font-size:1.2rem}.mode-card p{color:var(--ink-soft);margin:0}.tag{width:fit-content;color:var(--danger);background:#c634241f;border-radius:999px;padding:.2rem .55rem;font-size:.84rem;font-weight:700;display:inline-flex}.instructions{border-top:1px dashed var(--line);margin-top:1rem;padding-top:.85rem}.instructions h3{color:var(--ink);font-family:var(--font-display);margin:0 0 .35rem}.instructions ol{color:var(--ink-soft);gap:.35rem;margin:0;padding-left:1.1rem;display:grid}.game-topbar{justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.75rem;display:flex}.game-topbar .game-meta{margin-bottom:0}.exit-btn{flex-shrink:0;padding:.35rem .7rem;font-size:.85rem}.game-meta{flex-wrap:wrap;gap:.55rem;margin-bottom:.75rem;display:flex}.game-meta p{border:1px solid var(--line);color:var(--ink-soft);background:#fffc;border-radius:999px;margin:0;padding:.2rem .6rem;font-size:.9rem}.meta-mode{font-weight:600}.option-list{gap:.55rem;display:grid}.scenario{font-family:var(--font-display);color:var(--ink);margin:0 0 .5rem;font-size:clamp(1rem,2.2vw,1.5rem)}.diamond-legend{flex-wrap:wrap;gap:1rem;margin-bottom:.55rem;display:flex}.legend-home{flex-wrap:wrap;gap:1rem;margin-top:.6rem;display:flex}.legend-batter{color:#7c3aed;font-size:.85rem;font-weight:700}.legend-runner{color:#e05c2a;font-size:.85rem;font-weight:700}.legend-fielder{color:var(--accent);font-size:.85rem;font-weight:700}.diamond-wrap{aspect-ratio:320/380;width:100%;max-width:320px;margin:0 auto;position:relative}.diamond-svg{background:#1e641e2e;border-radius:14px;width:100%;height:100%;display:block}.base-buttons{pointer-events:none;position:absolute;inset:0}.base-btn{pointer-events:all;min-width:52px;color:var(--ink);cursor:pointer;text-align:center;background:#ffffffeb;border:2px solid #12384d38;border-radius:8px;padding:.3rem .45rem;font-size:.82rem;font-weight:800;line-height:1.1;transition:background .16s,border-color .16s,transform .12s,box-shadow .16s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 8px #11334524}.base-btn:hover:not(:disabled){border-color:var(--accent);background:#17868d1f;transform:translate(-50%,-50%)scale(1.08);box-shadow:0 4px 14px #17868d38}.base-btn.selected,.base-btn.selected:hover{outline-offset:-4px;color:#fff;background:#17868d;border-color:#0f5f65;outline:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 4px 16px #17868d80}.base-btn.correct{color:#fff;background:#1a5faf;border-color:#134a8a;animation:.4s pulse-correct;box-shadow:0 0 0 3px #1a5faf59}.base-btn.wrong{color:#fff;background:#b45309;border-color:#8a3f07;box-shadow:0 0 0 3px #b4530959}.base-btn:disabled{cursor:not-allowed;opacity:.7}@keyframes pulse-correct{0%{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.18)}to{transform:translate(-50%,-50%)scale(1)}}.feedback-correct{color:#1a5faf!important}.feedback-wrong{color:#b45309!important}.option{text-align:left;border:1px solid var(--line);width:100%;color:var(--ink);cursor:pointer;background:#ffffffe6;border-radius:12px;padding:.8rem .85rem;font-size:1rem;transition:transform .18s,box-shadow .18s,border-color .18s}.option:hover{transform:translateY(-1px);box-shadow:0 9px 16px #13384c1f}.option.selected{border-color:var(--accent);background:#17868d14;box-shadow:inset 0 0 0 1px #17868d4d}.feedback-wrap{margin-top:.9rem}.feedback,.explanation{color:var(--ink-soft);margin:0}.feedback{color:var(--ink);font-weight:700}.explanation{margin-top:.35rem}.actions{flex-wrap:wrap;gap:.6rem;margin-top:1rem;display:flex}button{cursor:pointer;border:none;border-radius:12px;padding:.6rem .95rem;font-size:.95rem;font-weight:700}button:disabled{opacity:.6;cursor:not-allowed}.action{background:var(--accent);color:#effcff}.ghost{border:1px solid var(--line);color:var(--ink);background:#fffc}.score-panel{text-align:center}.score-number{font-family:var(--font-display);color:var(--ink);margin:0;font-size:clamp(2.1rem,8vw,3.2rem)}.score-message{color:var(--ink-soft);margin-top:.35rem}.score-panel .actions{justify-content:center}.modal-overlay{z-index:100;background:#0a19239e;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal{border:1px solid var(--line);background:linear-gradient(#fffffff7,#fbf2d9fc);border-radius:20px;gap:.8rem;width:100%;max-width:380px;padding:1.4rem;display:grid;box-shadow:0 20px 50px #11334547}.modal-title{font-family:var(--font-display);color:var(--danger);margin:0;font-size:1.5rem}.modal-title--ok{color:var(--accent)}.modal-correct{color:var(--ink);margin:0;font-size:1rem}.modal-explanation{color:var(--ink-soft);margin:0;font-size:.95rem}.modal-continue{width:100%;padding:.75rem;font-size:1rem}@media (width<=640px){.app-shell{gap:.5rem;width:min(960px,100% - 1rem);margin-top:.4rem}.app-header{padding:.9rem .9rem .25rem}.panel{border-radius:16px;padding:.9rem}.game-active .app-header{display:none}.game-panel{padding:.65rem .75rem}.game-topbar{margin-bottom:.5rem}.meta-mode{display:none}.game-meta p{padding:.15rem .45rem;font-size:.8rem}.scenario{margin-bottom:.35rem;font-size:.95rem}.diamond-legend{display:none}.diamond-wrap{max-width:100%}.feedback-wrap{margin-top:.5rem}.actions{margin-top:.6rem}}