:root{--bg:#1c1c22;--panel:#26262e;--panel-edge:#33333d;--text:#fff;--muted:#a4a4b0;--red:#e01e29;--green:#2fbf71;--orange:#f5a524;--floor:#d9824b;--floor-free:#3a6ea5;--radius:12px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0}body{-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:16px;line-height:1.45}#app{flex-direction:column;max-width:560px;min-height:100dvh;margin:0 auto;display:flex}main{flex-direction:column;flex:1;gap:12px;padding:12px 16px 24px;display:flex}h1{margin:0;font-size:1.3rem}h2{margin:4px 0;font-size:1.25rem}h3{margin:0 0 6px;font-size:1.05rem}p{margin:0}a{color:var(--text)}.topbar{border-bottom:3px solid var(--red);background:var(--bg);z-index:1;align-items:center;gap:12px;padding:10px 16px;display:flex;position:sticky;top:0}.brand{flex:1;align-items:center;gap:10px;text-decoration:none;display:flex}.logo{border-radius:4px;height:30px}.lang{font-weight:700}footer{text-align:center;padding:16px}.muted{color:var(--muted)}.small{font-size:.85rem}.card{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px;display:flex}.card.center{text-align:center;align-items:center}.card.links{gap:8px}.banner{border-radius:var(--radius);background:var(--red);padding:12px 14px;font-weight:700;text-decoration:none;display:block}button{font:inherit;color:var(--text);background:var(--panel-edge);cursor:pointer;border:1px solid #0000;border-radius:10px;min-height:44px;padding:10px 14px}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--red);font-weight:700}button.big{padding:14px;font-size:1.1rem}button.danger{border-color:var(--red);color:#ff8a8f;background:0 0}button.link{min-height:0;color:var(--muted);background:0 0;border:none;padding:4px 0;text-decoration:underline}a.link{color:var(--muted);text-decoration:none}button.on{background:var(--text);color:var(--bg);font-weight:700}input,select,textarea{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--panel-edge);border-radius:8px;width:100%;padding:10px}.field{flex-direction:column;gap:6px;display:flex}.field>span{font-weight:600}.field.row{flex-direction:row;align-items:center;gap:10px}.field.row>span{flex:0 0 45%;font-weight:400}.toggle{align-items:center;gap:10px;min-height:44px;display:flex}.toggle input{width:22px;height:22px;accent-color:var(--red)}.segmented{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.segmented.four{grid-template-columns:repeat(2,1fr)}.pre{white-space:pre-wrap;overflow-wrap:anywhere}.roles{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.roles button{text-align:left}.actions{flex-direction:column;gap:8px;display:flex}.card.center .actions{align-self:stretch}.actions.spread{flex-direction:row;justify-content:space-between}.hint{color:var(--muted);text-align:center;font-size:.9rem}.path-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.cell-grid{flex-direction:column;gap:4px;width:100%;display:flex}.grid-row{text-align:left;background:0 0;border-radius:8px;grid-template-columns:5.5rem repeat(4,1fr);align-items:center;gap:4px;min-height:44px;padding:4px;display:grid}button.grid-row:hover{background:var(--panel-edge)}.grid-row.head .chip{text-align:center;text-overflow:ellipsis;white-space:nowrap;padding:2px 4px;font-size:.7rem;overflow:hidden}.row-label{font-size:.85rem}.row-label small{color:var(--muted);display:block}.grid-cell{background:var(--panel-edge);border-radius:6px;height:28px;display:inline-block}.grid-cell.absent{border:1px dashed var(--panel-edge);background:0 0}.grid-cell.learned{background:var(--orange)}.grid-cell.mastered{background:var(--green)}.grid-cell.gained{animation:.6s ease-out both cell-gain}@keyframes cell-gain{0%{filter:brightness(2);transform:scale(.4)}60%{transform:scale(1.25)}to{transform:scale(1)}}.legend{justify-content:center;align-items:center;gap:6px;margin-top:4px;display:flex}.legend .grid-cell{width:16px;height:16px}.celebrate{flex-direction:column;align-items:center;gap:4px;display:flex}.celebrate .burst{font-size:3rem;animation:.9s ease-out both burst}@keyframes burst{0%{opacity:0;transform:scale(0)rotate(-30deg)}60%{opacity:1;transform:scale(1.4)rotate(10deg)}to{transform:scale(1)rotate(0)}}@media (prefers-reduced-motion:reduce){.grid-cell.gained,.celebrate .burst{animation:none}}.team-list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.team-list a{background:var(--panel);border-radius:10px;padding:12px;text-decoration:none;display:block}.play-head{justify-content:space-between;align-items:center;gap:8px;font-size:.9rem;display:flex}.situation{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.situation .neutral{min-height:36px;margin-left:auto;padding:4px 12px}.chip{background:var(--panel-edge);border-radius:99px;padding:3px 10px;font-size:.85rem;font-weight:700}.chip.phase-receive{background:#3a6ea5}.chip.phase-attack{background:var(--red)}.chip.phase-serve{background:#7b4bb7}.chip.phase-base{background:#2d8a5b}.prompt{font-size:1.1rem;font-weight:600}.court{touch-action:none;-webkit-user-select:none;user-select:none;border-radius:var(--radius);width:100%;height:auto;display:block}.court.interactive{cursor:crosshair}.court.draggable{cursor:grab}.court .token.ghost circle{fill:none;stroke:#fff9;stroke-width:.05px;stroke-dasharray:.12 .08}.court .token.ghost text{fill:#fff9}.court .move-line{stroke:#ffffffb3;stroke-width:.06px}.court .free-zone{fill:var(--floor-free)}.court .floor{fill:var(--floor)}.court .line,.court .line-rect{stroke:#fff;stroke-width:.06px;fill:none}.court .net{fill:#f2f2f2}.court .post{fill:#999}.court .zones line{stroke:#ffffff59;stroke-width:.03px;stroke-dasharray:.2 .2}.court .zones text{fill:#ffffff47;text-anchor:middle;font-weight:800}.court .target{fill:#2fbf7147;stroke:var(--green);stroke-width:.06px;stroke-dasharray:.2 .12}.court .area-invalid{fill:var(--red);opacity:.5}.court .fault-line{stroke:var(--red);stroke-width:.1px;stroke-dasharray:.25 .15}.court .token circle{fill:var(--panel);stroke:#fff;stroke-width:.05px}.court .token text{fill:#fff;text-anchor:middle;pointer-events:none;font-weight:700}.court .partner-line{stroke:#ffd84d;stroke-width:.08px;stroke-dasharray:.25 .15}.court .token.user circle{fill:var(--red);stroke:#fff;stroke-width:.1px}.court .token.user.green circle{fill:var(--green)}.court .token.user.orange circle{fill:var(--orange)}.court .token.you circle{stroke-dasharray:.2 .1;stroke-width:.1px}.court .token.faulty circle{stroke:var(--red);stroke-width:.12px}.court .token.selected circle{stroke:#ffd84d;stroke-width:.14px}.feedback{border-radius:var(--radius);border:2px solid;flex-direction:column;gap:8px;padding:14px;display:flex}.feedback.green{border-color:var(--green);background:#2fbf711f}.feedback.orange{border-color:var(--orange);background:#f5a5241f}.feedback.red{border-color:var(--red);background:#e01e291f}.feedback .why{color:var(--muted)}.feedback-inline{font-weight:600}.feedback-inline.red{color:#ff8a8f}.feedback-inline.green{color:var(--green)}.feedback-inline.orange{color:var(--orange)}.share .qr{background:#fff;border-radius:8px;align-self:center;width:220px;padding:8px}.share .qr svg{width:100%;height:auto;display:block}.diagrams{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.diagrams figure{margin:0}.diagrams figcaption{text-align:center;color:var(--muted);font-size:.85rem}