:root{--color-primary:#1a73e8;--color-primary-hover:#1557b0;--color-primary-active:#104a9a;--color-primary-light:#e8f0fe;--color-bg:#f0f2f5;--color-surface:#fff;--color-text:#1a1a2e;--color-text-secondary:#4a4a5a;--color-text-muted:#6b7280;--color-text-stale:#5c5f6b;--color-border:#d1d5db;--color-border-hover:#9ca3af;--color-border-focus:#1a73e8;--color-success:#16803c;--color-success-bg:#ecfdf5;--color-success-border:#86efac;--color-danger:#c9302c;--color-danger-bg:#fef2f2;--color-danger-border:#fca5a5;--color-warning:#b45309;--color-warning-bg:#fffbeb;--color-warning-border:#fcd34d;--font-family:system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.5rem;--font-size-2xl:1.875rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height:1.6;--space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;--space-lg:1rem;--space-xl:1.5rem;--space-2xl:2rem;--space-3xl:3rem;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 2px 8px #00000014;--transition-fast:.15s ease;--transition-normal:.25s ease;--max-width:640px;--min-touch-target:44px}*,:before,:after{box-sizing:border-box}*{margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{max-width:var(--max-width);padding:var(--space-xl) var(--space-lg);min-height:100dvh;margin:0 auto}#app>section{gap:var(--space-xl);flex-direction:column;display:flex}h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text);text-align:center;letter-spacing:-.02em;padding-bottom:var(--space-sm);border-bottom:2px solid var(--color-primary)}.own-ttr-section,fieldset,#opponent-list,#summary-block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm)}.own-ttr-section{gap:var(--space-sm);flex-direction:column;display:flex}.own-ttr-section label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}input[type=text]{width:100%;padding:var(--space-md) var(--space-lg);font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text);background-color:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);min-height:var(--min-touch-target);outline:none;display:block}input[type=text]:hover{border-color:var(--color-border-hover)}input[type=text]:focus-visible{border-color:var(--color-border-focus);box-shadow:0 0 0 3px #1a73e833}input[type=text]::placeholder{color:var(--color-text-muted);font-weight:var(--font-weight-normal)}fieldset{gap:var(--space-md);border:1px solid var(--color-border);flex-direction:column;display:flex}fieldset legend{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;padding:0 var(--space-xs);margin-bottom:var(--space-sm)}fieldset>div{align-items:center;gap:var(--space-md);padding:var(--space-xs) 0;min-height:var(--min-touch-target);display:flex}fieldset input[type=checkbox]{appearance:none;width:var(--min-touch-target);height:var(--min-touch-target);min-width:var(--min-touch-target);min-height:var(--min-touch-target);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;display:inline-flex;position:relative}fieldset input[type=checkbox]:before{content:"";border:2px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);width:20px;height:20px;transition:background-color var(--transition-fast), border-color var(--transition-fast)}fieldset input[type=checkbox]:hover:before{border-color:var(--color-primary)}fieldset input[type=checkbox]:checked:before{background-color:var(--color-primary);border-color:var(--color-primary)}fieldset input[type=checkbox]:checked:after{content:"";border:2.5px solid #fff;border-width:0 2.5px 2.5px 0;width:6px;height:11px;position:absolute;top:50%;left:50%;transform:translate(-50%,-58%)rotate(45deg)}fieldset input[type=checkbox]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}fieldset label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer;line-height:1.5}button{font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);min-height:var(--min-touch-target);white-space:nowrap;-webkit-user-select:none;user-select:none;border:1.5px solid #0000;justify-content:center;align-items:center;line-height:1;text-decoration:none;display:inline-flex}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}#calculate-button{background-color:var(--color-primary);color:#fff;font-size:var(--font-size-base);padding:var(--space-md) var(--space-2xl);border-radius:var(--radius-md);flex:1}#calculate-button:hover:not(:disabled){background-color:var(--color-primary-hover)}#calculate-button:active:not(:disabled){background-color:var(--color-primary-active)}#reset-button{color:var(--color-text-secondary);border-color:var(--color-border);font-size:var(--font-size-base);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-md);background-color:#0000}#reset-button:hover{background-color:var(--color-bg);border-color:var(--color-border-hover);color:var(--color-text)}#reset-button:active{background-color:var(--color-border)}#add-opponent{color:var(--color-primary);border:1.5px dashed var(--color-primary);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);width:100%;font-size:var(--font-size-sm);margin-top:var(--space-sm);background-color:#0000}#add-opponent:hover{background-color:var(--color-primary-light);border-style:solid}#add-opponent:active{background-color:#1a73e826}.remove-opponent{color:var(--color-text-muted);border-radius:var(--radius-full);width:var(--min-touch-target);min-width:var(--min-touch-target);height:var(--min-touch-target);font-size:var(--font-size-lg);min-height:var(--min-touch-target);background-color:#0000;border:none;padding:0}.remove-opponent:hover{background-color:var(--color-danger-bg);color:var(--color-danger)}.remove-opponent:active{background-color:#c9302c26}button[data-won=true]{background-color:var(--color-success-bg);color:var(--color-success);border-color:var(--color-success-border);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.02em;padding:var(--space-sm) var(--space-md);min-width:60px;min-height:var(--min-touch-target)}button[data-won=true]:hover{background-color:#16803c26}button[data-won=false]{background-color:var(--color-danger-bg);color:var(--color-danger);border-color:var(--color-danger-border);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.02em;padding:var(--space-sm) var(--space-md);min-width:60px;min-height:var(--min-touch-target)}button[data-won=false]:hover{background-color:#c9302c26}.action-buttons{gap:var(--space-md);align-items:stretch;display:flex}#opponent-list{gap:var(--space-md);flex-direction:column;display:flex}.opponent-row{gap:var(--space-sm);padding:var(--space-lg);background-color:var(--color-bg);border-radius:var(--radius-md);transition:border-color var(--transition-fast);border:1px solid #0000;grid-template-columns:1fr auto;grid-template-areas:"label remove""input input""toggle toggle""expect expect";align-items:center;display:grid}.opponent-row:hover{border-color:var(--color-border)}.opponent-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);grid-area:label;align-self:center}.opponent-row>input[type=text]{grid-area:input}.opponent-row button[id^=opponent-won-]{grid-area:toggle;justify-self:start}.opponent-row .remove-opponent{grid-area:remove;place-self:center end}.win-expectation{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);padding:var(--space-xs) 0;grid-area:expect}#stale-indicator{align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background-color:var(--color-warning-bg);border:1px solid var(--color-warning-border);border-radius:var(--radius-md);color:var(--color-warning);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);display:flex}#stale-indicator:before{content:"⚠";font-size:var(--font-size-lg);flex-shrink:0;line-height:1}#summary-block.stale{border-left-color:var(--color-border)}#summary-block.stale .result-item{color:var(--color-text-muted)}.win-expectation.stale{color:var(--color-text-stale)}#summary-block{border-left:4px solid var(--color-primary);transition:opacity var(--transition-normal);flex-direction:column;gap:0;display:flex}.result-item{padding:var(--space-md) 0;border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium);display:block}.result-item:last-child{border-bottom:none}.result-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text)}@media (width>=480px){.opponent-row{gap:var(--space-sm) var(--space-md);grid-template-columns:auto 1fr auto auto;grid-template-areas:"label input toggle remove"".expect expect.";align-items:center}.opponent-row>input[type=text]{width:auto}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (forced-colors:active){button,input[type=text]{border:1px solid buttontext}fieldset input[type=checkbox]{appearance:auto}}@media print{body{color:#000;background:#fff}#app{max-width:100%;padding:0}.action-buttons,#add-opponent,.remove-opponent{display:none}.own-ttr-section,fieldset,#opponent-list,#summary-block{box-shadow:none;break-inside:avoid;border:1px solid #ccc}}dialog{border:1px solid var(--color-border);border-radius:var(--radius-lg);height:fit-content;padding:var(--space-xl);max-width:400px;width:calc(100% - var(--space-2xl) * 2);font-family:var(--font-family);color:var(--color-text);box-shadow:var(--shadow-md);margin:auto;position:fixed;inset:0}#reset-dialog h2{margin:0 0 var(--space-sm) 0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text)}dialog::backdrop{background-color:#0006}.dialog-actions{gap:var(--space-md);margin-top:var(--space-xl);justify-content:flex-end;display:flex}#confirm-reset{background-color:var(--color-danger);color:#fff;border-color:var(--color-danger)}#confirm-reset:hover{background-color:#a82824}#cancel-reset{color:var(--color-text-secondary);border-color:var(--color-border);background-color:#0000}#cancel-reset:hover{background-color:var(--color-bg);border-color:var(--color-border-hover)}