/* v27 · quiet studio interface. Court and tokens are intentionally untouched. */
:root { --ui-text:#202b2c; --ui-muted:#758184; --ui-border:#e3e9e8; --ui-soft:#f1f5f4; --button-active-text:#8b4428; }
.ui-icon { display:inline-block; width:21px; height:21px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; pointer-events:none; }
.topbar { padding:calc(env(safe-area-inset-top) + 14px) 22px 0; gap:8px 18px; background:#fff; box-shadow:none; border:0; }
.brand { gap:5px; }
.brand .app-signature { color:#758184; font-size:9px; letter-spacing:.16em; }
.brand #training-title { font-size:26px; font-weight:750; letter-spacing:-.055em; color:#202c2c; }
.brand #save-status { display:flex; align-items:center; gap:5px; font-size:10px; color:#7b8887; }
.brand #save-status::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
.timer { gap:3px; padding:0; background:transparent; border-radius:0; }
.timer strong { color:#273737; min-width:104px; font-size:38px; font-weight:650; letter-spacing:-.065em; padding-right:7px; }
.timer button { width:38px; min-width:38px; padding:0; border-radius:50%; color:#667575; background:transparent; }
.timer .timer-toggle { width:44px; height:44px; background:#f5dfd1; color:#8c4328; font-size:16px; }
.timer .timer-toggle.active { background:#f1ddce; box-shadow:none; border:0; }
.timer-settings summary { color:#647272; }
.timer-settings-content,.board-menu { border-color:#e3e9e6; background:#fff; border-radius:18px; box-shadow:0 12px 42px #1e3a3224; }
.mode-actions { gap:8px; padding:0; background:transparent; border:0; border-radius:0; backdrop-filter:none; }
.mode-actions > button { min-height:44px; color:#667674; padding-inline:9px; }
.mode-actions #toggle-display { background:#f2f6f3; color:#4b645a; border-radius:8px; font-weight:650; }
.mode-switch { display:flex; padding:0; gap:16px; border-radius:0; background:transparent; }
.mode-switch button { min-height:44px; padding:0 1px; background:transparent; border-radius:0; color:#919c99; font-weight:650; border-bottom:2px solid transparent; }
.mode-switch button.active { color:#2b3c36; background:transparent; box-shadow:none; border-bottom:2px solid #c47a53; }
.training-bar { padding:7px 18px; background:#fff; border-top:1px solid #eff2ef; border-bottom:1px solid #e5ebe7; gap:5px; }
.training-bar button,.training-bar select { border-radius:8px; background:transparent; color:#526661; font-weight:650; }
.training-bar select { max-width:none; font-size:13px; }
.training-bar .ui-icon { width:18px; height:18px; }
.training-bar #layout-restore { color:#8e502e; background:#faf0e7; border-radius:8px; }
.training-bar #board-manage { font-size:12px; color:#677974; }
.board-count { font-size:11px; color:#97a39b; padding-right:5px; }
.board-menu { width:210px; padding:8px; }
.board-menu button { border-radius:9px; font-weight:600; }
.board-menu button:active { background:#f0f5f0; }
/* Floating panel: one shell, minimal interior borders. */
.tool-panel { top:12px; right:12px; bottom:12px; width:var(--panel-width); border:1px solid #e3e9e6; border-radius:22px; padding:12px 16px 20px; background:#fdfefd; box-shadow:0 12px 46px #0d211f30; transform:translateX(calc(100% + 18px)); }
.tool-panel.open { transform:translateX(0); }
.panel-tabs { display:flex; justify-content:space-between; gap:0; padding:0; margin-bottom:18px; border-bottom:1px solid #e8eeea; border-radius:0; background:transparent; }
.panel-tabs .tab { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; min-height:52px; padding:6px 0; color:#87938d; font-size:13px; border:0; border-bottom:2px solid transparent; border-radius:0; }
.panel-tabs .tab.active { color:#344d40; background:transparent; border-bottom:2px solid #c97b54; box-shadow:none; }
.panel-tabs .ui-icon { width:18px; height:18px; }
.player-action-bar { gap:8px; }
.player-action-bar button { display:flex; justify-content:center; align-items:center; gap:7px; padding:8px 4px; background:#f0f5f1; border:0; border-radius:10px; color:#45614e; font-size:12px; font-weight:650; }
.player-action-bar button span { color:inherit; font-size:12px; padding:0; }
.player-action-bar .ui-icon { width:18px; height:18px; }
.clear-menu { padding-bottom:2px; border-color:#edf1ed; }
.clear-menu summary { font-size:12px; font-weight:600; color:#7a8980; }
.clear-menu summary span { font-size:11px; color:#97a399; }
.clear-options button { color:#7d6f65; font-weight:550; }
.position-group { gap:0; }
.position-group h3 { margin-bottom:4px; font-size:10px; color:#98a698; letter-spacing:.14em; }
.roster-list { gap:17px; }
.roster-player { min-height:46px; padding:7px 10px; border:0; border-bottom:1px solid #f0f3ee; border-radius:0; background:transparent; font-size:14px; font-weight:650; color:#344437; }
.roster-player.inserted { border-color:transparent; background:#f2f6ef; border-radius:9px; }
.roster-player .number { font-size:12px; font-weight:500; color:#8e9e8d; }
.roster-player .check { font-size:16px; color:#7a9474; }
.section-heading { margin:5px 1px 0; }
.section-heading h2 { color:#344437; font-size:13px; font-weight:700; }
.section-heading span { font-size:8px; font-weight:650; letter-spacing:.12em; color:#a2ada2; }
.tool-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.tool-grid .draw-mode,.tool-grid .draw-mode[data-tool="ballTrajectory"],.tool-grid .draw-mode[data-tool="eraser"] { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:76px; padding:10px 3px; background:#f4f7f2; border:1px solid transparent; border-radius:13px; color:#6a8069; }
.tool-grid .draw-mode .tool-label { width:auto; margin:0; font-size:11px; line-height:1.2; color:#687965; }
.tool-grid .draw-mode .ui-icon { width:23px; height:23px; }
.tool-grid .draw-mode[data-tool="laser"] { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:9px; grid-column:1 / -1; min-height:44px; padding:6px; background:transparent; border:1px solid #e9eee4; border-radius:10px; color:#7d8d77; }
.tool-grid .draw-mode.active { background:#f7eade; border-color:#edcfb9; box-shadow:none; color:#a26338; }
.tool-grid .draw-mode.active .tool-label { color:#9b633c; }
.color-row { justify-content:space-between; padding-block:2px; }
.color-row .color-chip { width:42px; min-width:42px; height:44px; background:transparent; border-radius:50%; }
.color-chip::before { width:22px; height:22px; border-color:#0002; }
.color-row .color-chip.active { background:transparent; box-shadow:none; transform:none; }
.color-chip.active::before { outline:1.5px solid #9aa88a; outline-offset:5px; }
.color-chip.active::after { display:none; }
.range-row { font-size:12px; color:#7e8c78; gap:10px; padding:9px 0 14px; border-bottom:1px solid #edf1e7; }
.range-row input { accent-color:#a4b29a; }
.draw-actions { gap:4px; }
.draw-actions button { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; padding:8px 1px; min-height:44px; background:transparent; font-size:11px; color:#718169; }
.draw-actions .ui-icon { width:18px; height:18px; }
.draw-actions button span { font-size:10px; }
.settings-page .panel-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.settings-page .panel-actions button { background:#f3f6f0; padding:8px 3px; border-radius:10px; font-size:12px; font-weight:600; color:#5f7357; }
.preset-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.preset-row button { background:#f1f5ed; font-weight:600; border-radius:9px; color:#6c805f; }
.setting-block { padding:12px; background:#f3f6ef; border-radius:12px; }
.setting-block h3 { font-size:12px; font-weight:600; color:#718267; }
.token-size-row { border-radius:8px; background:#e9eee4; }
.token-size-row button.active { color:#58704b; }
.settings-page > .danger { min-height:44px; padding:8px; text-align:left; border:0; border-top:1px solid #edf0e7; background:transparent; border-radius:0; color:#97745c; font-size:12px; font-weight:550; box-shadow:none; }
.quick-drawing-tools { bottom:calc(env(safe-area-inset-bottom) + 18px); padding:5px; gap:2px; background:#fcfef9f2; border:1px solid #e3eada; border-radius:18px; box-shadow:0 5px 25px #18301624; }
.quick-drawing-tools button { width:48px; min-width:48px; height:48px; border-radius:13px; color:#6d845e; }
.quick-drawing-tools svg { width:23px; height:23px; stroke-width:1.65; }
.quick-drawing-tools button.active { background:#eef3e6; color:#547338; }
.panel-toggle { min-width:34px; min-height:66px; padding:6px; border:1px solid #e0e7d5; border-radius:13px 0 0 13px; background:#fcfef8; color:#7b9164; right:0; font-size:12px; box-shadow:-3px 4px 16px #20321520; }
.action-dialog { background:#fff; border-radius:22px; border-color:#e2e9dc; }
.action-dialog h2 { color:#34442d; }
.action-dialog p { color:#7d8974; }
.dialog-buttons button { background:#f0f4e9; color:#748366; }
.dialog-buttons #action-submit { background:#ede3d2; color:#85633b; }
@media(max-width:480px) { .topbar { padding-left:12px; padding-right:12px; } .brand #training-title { font-size:21px; } .timer strong { font-size:29px; min-width:78px; padding-right:0; } .timer button { min-width:30px; width:30px; } .timer .timer-toggle { width:38px; } .mode-switch { gap:12px; } .training-bar { padding-inline:7px; } }

/* v28 roster management */
.manage-roster { display:flex; flex-direction:column; gap:5px; align-items:flex-start; padding:12px; border:1px solid #e0e8dc; border-radius:11px; background:#f7faf3; color:#456041; box-shadow:none; font-size:13px; font-weight:700; }
.manage-roster span { color:#71816a; font-size:10px; font-weight:500; }
.roster-dialog { width:min(700px,calc(100vw - 32px)); max-height:85dvh; padding:22px; border:1px solid #dce5d8; border-radius:22px; background:#fcfdf9; color:#34452f; box-shadow:0 20px 70px #1b301f40; touch-action:pan-y; }
.roster-dialog::backdrop { background:#17271e77; backdrop-filter:blur(4px); }
.roster-dialog-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.roster-dialog-header span { font-size:9px; letter-spacing:.15em; color:#87977c; }
.roster-dialog-header h2 { margin:5px 0 0; font-size:22px; }
.roster-dialog-header button { border:0; background:transparent; box-shadow:none; min-width:44px; min-height:44px; }
.roster-editor-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; }
.roster-directory { max-height:58dvh; overflow:auto; overscroll-behavior:contain; border-right:1px solid #e3eada; padding-right:14px; touch-action:pan-y; }
.roster-directory > button { width:100%; margin-bottom:8px; border:0; background:#eaf1e1; color:#53723d; box-shadow:none; font-size:12px; min-height:44px; }
.directory-player { display:flex; justify-content:space-between; gap:5px; align-items:center; width:100%; border:0; background:transparent; box-shadow:none; padding:10px 8px; min-height:46px; font-size:13px; border-radius:8px; color:#526448; }
.directory-player small { color:#718363; font-size:10px; font-weight:500; }
.directory-player.active { background:#eef3e5; border:0; color:#476332; box-shadow:none; }
.roster-form { display:grid; gap:10px; align-content:start; }
.portrait-edit { position:relative; width:112px; height:112px; justify-self:center; background:#edf2e5; border-radius:50%; overflow:hidden; display:grid; place-items:center; color:#879b70; }
.portrait-edit img { width:100%;height:100%;object-fit:cover;object-position:center top; }
.portrait-edit [hidden] { display:none; }
.photo-pick { position:relative; overflow:hidden; justify-self:center; padding:8px 18px; border-radius:9px; background:#eaf1df; color:#587339; font-size:12px; font-weight:700; cursor:pointer; min-height:40px; display:grid;place-items:center; }
.photo-pick input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.photo-reset { justify-self:center; font-size:11px; color:#78886a; background:transparent; border:0; box-shadow:none; min-height:35px; }
.roster-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.roster-fields label { display:grid; gap:6px; color:#718261; font-size:12px; }
.roster-fields label:first-child { grid-column:1 / -1; }
.roster-fields input,.roster-fields select { min-width:0; width:100%; padding:10px; min-height:44px; background:#fff; border:1px solid #d9e3ce; border-radius:9px; color:#34492c; font-size:16px; user-select:text; -webkit-user-select:text; }
#roster-message { min-height:36px; font-size:12px; line-height:1.6; color:#6e7f5d; margin:4px 0; }
#roster-submit { min-height:46px; background:#f2e3d0; color:#8e6035; border:0; box-shadow:none; }
@media(max-width:520px) { .roster-dialog { padding:16px; } .roster-editor-layout { grid-template-columns:1fr; gap:16px; } .roster-directory { max-height:130px; border-right:0; border-bottom:1px solid #e3eada; padding:0 0 10px; } #roster-directory-list { display:grid; grid-template-columns:1fr 1fr; } }

.roster-delete { min-height:44px; border:0; border-top:1px solid #e9e5dd; border-radius:0; background:transparent; color:#a14d38; box-shadow:none; font-size:12px; font-weight:600; margin-top:5px; }
.roster-delete[hidden] { display:none; }
.roster-empty { font-size:12px; line-height:1.7; color:#78856e; padding:10px 5px; }