:root{color-scheme:light;--color-bg: #ffffff;--color-surface: #f7f7f7;--color-text: #222222;--color-text-sub: #6a6a6a;--color-accent: #ff385c;--color-accent-active: #e00b41;--color-border: #dddddd;--color-border-soft: #ebebeb;--color-accent-contrast: #ffffff;--color-surface-2: #ffffff;--gradient-accent: linear-gradient(135deg, #ff385c 0%, #e00b41 100%);--color-success-bg: #eef7f0;--color-success-border: #b7dcc0;--color-success-text: #1c7a43;--color-danger-bg: #fdeeea;--color-danger-border: #f3c2b5;--color-danger-text: #c13515;--color-warning-bg: #fbf6ea;--color-warning-border: #ecd9a6;--color-warning-text: #8a6d1a;--color-accent-bg: #ffe9ee;--color-accent-border: #ffd1da;--color-accent-text: #c13515;--color-text-secondary: var(--color-text-sub);--color-surface-alt: var(--color-surface);--color-border-strong: var(--color-border);--color-success: var(--color-success-text);--color-danger: var(--color-danger-text);--font-sans: system-ui, "Hiragino Sans", "Segoe UI", Meiryo, sans-serif;--font-numeric: "SF Pro Display", "Helvetica Neue", "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;--fs-score: 2.2rem;--fs-emphasis: 1.2rem;--fs-base: 1rem;--fs-sm: .875rem;--tracking-tight: -.02em;--leading-tight: 1.15;--leading-normal: 1.6;--space-0: 2px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--space-8: 64px;--radius-xs: 4px;--radius-sm: 8px;--radius: 14px;--radius-lg: 20px;--radius-pill: 999px;--radius-md: var(--radius);--shadow-sm: 0 0 0 1px rgba(0, 0, 0, .02), 0 2px 6px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .1);--shadow-md: var(--shadow-sm);--shadow-lg: var(--shadow-sm);--shadow-card: var(--shadow-sm);--shadow-tile: 0 1px 1px rgba(0, 0, 0, .16), 0 2px 3px rgba(0, 0, 0, .12);--duration-fast: .12s;--duration: .2s;--ease-standard: cubic-bezier(.2, 0, 0, 1);font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg)}*{box-sizing:border-box}body{margin:0}#root{min-height:100svh}.app-layout{min-height:100svh;display:flex;flex-direction:column}.app-layout>main{flex:1 0 auto;width:100%}h1{font-size:var(--fs-emphasis);font-weight:600;margin:0;color:var(--color-text);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}h2{font-size:var(--fs-base);font-weight:600;margin:0;color:var(--color-text)}p{margin:0;line-height:var(--leading-normal)}a{color:var(--color-accent)}a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 18%,transparent)}.card{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-2)}.page-shell{max-width:640px;margin:0 auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-5)}@media (min-width: 640px){.page-shell{padding:var(--space-6) var(--space-4)}}.page-header{position:sticky;top:0;z-index:10;display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding:var(--space-1) 0;border-bottom:1px solid var(--color-border);background:var(--color-bg)}.page-header-link{display:flex;gap:var(--space-2)}.page-header-link-item{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--space-2);font-size:var(--fs-sm);color:var(--color-text-sub);text-decoration:none;white-space:nowrap;transition:color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.page-header-link-item:hover{color:var(--color-accent);text-decoration:underline}}.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-size:var(--fs-base);font-weight:500;padding:var(--space-3) var(--space-5);border:none;border-radius:var(--radius-sm);background:var(--gradient-accent);color:var(--color-accent-contrast);text-decoration:none;cursor:pointer;transition:box-shadow var(--duration) var(--ease-standard),background var(--duration) var(--ease-standard),transform var(--duration) var(--ease-standard)}@media (hover: hover){.btn-primary:hover{background:var(--color-accent-active);box-shadow:var(--shadow-sm)}}.btn-primary:active{background:var(--color-accent-active);transform:translateY(1px)}.btn-primary:disabled{background:var(--color-border);color:var(--color-text-sub);box-shadow:none;transform:none;cursor:not-allowed}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;font-size:var(--fs-base);font-weight:500;padding:var(--space-3) var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);text-decoration:none;cursor:pointer;transition:border-color var(--duration) var(--ease-standard),background var(--duration) var(--ease-standard),transform var(--duration) var(--ease-standard)}@media (hover: hover){.btn-secondary:hover{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 6%,var(--color-bg))}}.btn-secondary:active{transform:translateY(1px)}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.btn-primary,.btn-secondary,.quiz-choice-btn,.home-mode-card{transform:none!important}}.mj-tile-wrap{--mj-tile-h: 56px;--mj-tile-w: 42px;display:inline-flex;align-items:center;justify-content:center;width:var(--mj-tile-w);height:var(--mj-tile-h);vertical-align:bottom}.mj-tile-wrap.mj-tile-size-md{--mj-tile-w: min(42px, calc((min(100vw, 640px) - 78px) / 13));--mj-tile-h: calc(var(--mj-tile-w) * 4 / 3)}.mj-tile-wrap.mj-tile-size-sm{--mj-tile-h: 40px;--mj-tile-w: 30px}.mj-tile-wrap.mj-tile-size-lg{--mj-tile-h: 72px;--mj-tile-w: 54px}.mj-tile-wrap.mj-tile-rotated{width:var(--mj-tile-h);height:var(--mj-tile-w)}.mj-tile-inner{position:relative;width:var(--mj-tile-w);height:var(--mj-tile-h);filter:drop-shadow(var(--shadow-tile))}.mj-hand-display .mj-tile-inner,.dora-indicator-tiles .mj-tile-inner{border-radius:6px}.dora-indicator-tiles .mj-tile-inner{box-shadow:0 0 0 1.5px #5a4a3a59}.mj-hand-display .mj-tile-inner{box-shadow:0 0 0 1px #5a4a3a26}.mj-tile-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.mj-tile-mark{box-sizing:border-box;padding:7%;object-fit:contain}.mj-tile-rotated .mj-tile-inner{transform:rotate(90deg)}.mj-tile-row{display:inline-flex;align-items:flex-end;gap:4px}.mj-tile-row.mj-tile-row-gap-tight{gap:0}.mj-meld-group{display:inline-flex;align-items:flex-end;gap:1px;padding:0 4px}.mj-hand-display{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3);width:100%;overflow-x:auto;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1.5px solid var(--color-border);background:var(--color-surface);--mj-hand-tile-w: min(42px, calc((min(100vw, 640px) - 110px) / 13))}.mj-hand-display .mj-tile-wrap.mj-tile-size-md{--mj-tile-w: var(--mj-hand-tile-w);--mj-tile-h: calc(var(--mj-hand-tile-w) * 4 / 3)}.mj-hand-row{display:flex;align-items:flex-end;gap:10px}.mj-meld-row{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:10px;min-height:calc(var(--mj-hand-tile-w) * 4 / 3 + var(--space-3) + 1px);border-top:1px dotted var(--color-border);padding-top:var(--space-3)}@media (max-width: 639px){.mj-tile-row{gap:1px}.mj-hand-row,.mj-meld-row{gap:4px}.mj-meld-group{padding:0 2px}.mj-hand-display{gap:8px;--mj-hand-tile-w: min(42px, calc((min(100vw, 640px) - 76px) / 13))}}.app-footer{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2);border-top:1px solid var(--color-border);background:var(--color-bg)}.app-footer-nav{display:flex;gap:var(--space-4)}.app-footer-nav a{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--space-2);font-size:var(--fs-sm);color:var(--color-text-sub);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.app-footer-nav a:hover{color:var(--color-accent);text-decoration:underline}}.app-footer-copy{font-size:var(--fs-sm);color:var(--color-text-sub)}.quiz-conditions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-border);font-size:var(--fs-sm);color:var(--color-text-sub);letter-spacing:var(--tracking-tight)}.badge-label{font-size:var(--fs-sm);color:var(--color-text-sub)}.badge-value{font-weight:700;color:var(--color-text)}.badge--windset{gap:var(--space-0);align-items:baseline}.badge--windset .badge-value{font-size:var(--fs-base)}.badge-riichi{background:var(--color-danger-bg);border-color:var(--color-danger-border);color:var(--color-danger-text)}.badge-riichi{color:var(--color-danger-text)}.quiz-hand{overflow-x:auto;padding-bottom:var(--space-1)}.quiz-hand h2{margin:0 0 var(--space-2)}.quiz-tile-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:stretch}.win-indicator-section .tile-info-group,.dora-indicator-group{flex:1;justify-content:center}.dora-indicator-section,.win-indicator-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.dora-indicator-group{display:flex;flex-direction:column;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1.5px solid var(--color-success-border);background:var(--color-success-bg)}.dora-indicator-tiles{display:flex;gap:var(--space-4) var(--space-5)}@media (max-width: 639px){.dora-indicator-tiles{gap:var(--space-2) var(--space-3)}}.dora-indicator-tiles .tile-info-label{color:var(--color-success-text);font-weight:600}.tile-info-group{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.tile-info-slot{display:flex;align-items:center;justify-content:center}.dora-indicator-tiles .tile-info-slot{--slot-w: min(42px, calc((min(100vw, 640px) - 78px) / 13));min-width:var(--slot-w);min-height:calc(var(--slot-w) * 4 / 3)}.tile-info-group--tsumo,.tile-info-group--ron{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1.5px solid transparent}.tile-info-group--tsumo{background:#d9e6fa;border-color:#b3cdf2}.tile-info-group--ron{background:#ffd6de;border-color:var(--color-accent-border)}.tile-info-group--tsumo .mj-winning-label{color:#1c5aa8;font-weight:700}.tile-info-group--ron .mj-winning-label{color:var(--color-accent-text);font-weight:700}.tile-info-group--tsumo .mj-tile-inner{outline:2px solid #2f6fd0;outline-offset:1px;border-radius:3px}.tile-info-group--ron .mj-tile-inner{outline:2px solid var(--color-accent);outline-offset:1px;border-radius:3px}.tile-info-label{font-size:var(--fs-sm);color:var(--color-text-sub);white-space:nowrap}.tile-info-none{font-size:var(--fs-sm);color:var(--color-text-sub)}.quiz-answer{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--color-border)}.quiz-answer-label{margin:0;font-size:var(--fs-sm);color:var(--color-text-sub)}.quiz-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.quiz-choice-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:var(--space-3) var(--space-4);font-size:var(--fs-base);font-weight:600;font-family:var(--font-numeric);font-variant-numeric:tabular-nums;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);cursor:pointer;transition:border-color var(--duration) var(--ease-standard),background var(--duration) var(--ease-standard),box-shadow var(--duration) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}@media (hover: hover){.quiz-choice-btn:hover{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 8%,var(--color-bg));box-shadow:var(--shadow-sm)}}.quiz-choice-btn:active{transform:translateY(1px)}.quiz-skip{display:flex;justify-content:center}.result-verdict-row{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:var(--space-3);row-gap:var(--space-1)}.result-verdict{font-size:var(--fs-score);font-weight:700;line-height:var(--leading-tight);margin:0}.result-verdict.correct{color:var(--color-success-text)}.result-verdict.incorrect{color:var(--color-danger-text)}.result-answer{margin:0;font-size:var(--fs-score);font-weight:700;font-family:var(--font-numeric);font-variant-numeric:tabular-nums;color:var(--color-accent);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}.result-breakdown{display:flex;flex-direction:column;gap:var(--space-3)}.yaku-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.yaku-list li{display:flex;justify-content:space-between;font-size:var(--fs-emphasis);font-weight:600;font-family:var(--font-numeric);font-variant-numeric:tabular-nums;color:var(--color-text)}.calculation-line{margin:0;padding-top:var(--space-2);border-top:1px dashed var(--color-border);font-size:var(--fs-emphasis);font-weight:600;font-family:var(--font-numeric);font-variant-numeric:tabular-nums;text-align:right}.result-actions{display:flex;gap:var(--space-3)}.result-actions .btn-primary,.result-actions .btn-secondary{flex:1}.fu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.fu-list li{display:flex;justify-content:space-between;font-size:var(--fs-sm);font-family:var(--font-numeric);font-variant-numeric:tabular-nums;color:var(--color-text-sub)}.result-breakdown--primary .fu-list li{font-size:var(--fs-emphasis);font-weight:600;color:var(--color-text)}.result-breakdown--primary .meld-mark{position:relative}.result-breakdown--primary .meld-mark:before{content:"";position:absolute;left:-.9em;top:50%;transform:translateY(-50%);width:.6em;height:.6em;border-radius:50%;box-sizing:border-box;border:2px solid var(--meld-dot-color);background:var(--meld-dot-fill, transparent)}.result-breakdown--primary .meld-mark--ankou{--meld-dot-color: var(--color-success-text);--meld-dot-fill: var(--color-success-text)}.result-breakdown--primary .meld-mark--minkou{--meld-dot-color: var(--color-success-text)}.result-breakdown--primary .meld-mark--ankan{--meld-dot-color: var(--color-warning-text);--meld-dot-fill: var(--color-warning-text)}.result-breakdown--primary .meld-mark--minkan{--meld-dot-color: var(--color-warning-text)}.fu-note{margin:0;font-size:var(--fs-sm);color:var(--color-text-sub)}.result-alt{padding:var(--space-4);border-radius:var(--radius);background:var(--color-warning-bg);border:1px solid var(--color-warning-border)}.result-alt h2{margin:0 0 var(--space-1)}.result-alt p{margin:0;font-size:var(--fs-sm)}.home-page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);text-align:center;padding:var(--space-8) var(--space-4)}.home-hero{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.home-hero h1{font-size:var(--fs-emphasis);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight)}.home-hero p{max-width:32em;color:var(--color-text-sub)}.home-modes{display:grid;grid-template-columns:1fr;gap:var(--space-3);width:100%;max-width:520px}.home-mode-card{display:flex;flex-direction:row;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text);text-decoration:none;text-align:left;transition:border-color var(--duration) var(--ease-standard),background var(--duration) var(--ease-standard),box-shadow var(--duration) var(--ease-standard),transform var(--duration) var(--ease-standard)}@media (hover: hover){.home-mode-card:hover{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 6%,var(--color-bg));box-shadow:var(--shadow-sm)}}.home-mode-card:active{transform:translateY(1px)}.home-mode-icon{display:inline-flex;flex:none}.home-mode-body{display:flex;flex-direction:column;gap:var(--space-0)}.home-mode-title{font-size:var(--fs-base);font-weight:600;line-height:var(--leading-tight)}.home-mode-desc{font-size:var(--fs-sm);color:var(--color-text-sub)}@media (min-width: 480px){.home-modes{grid-template-columns:1fr 1fr}.home-mode-card--wide{grid-column:1 / -1}}.privacy-page{gap:var(--space-4)}.privacy-section{display:flex;flex-direction:column;gap:var(--space-2)}.privacy-section ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:var(--space-2);line-height:var(--leading-normal)}.privacy-date{font-size:var(--fs-sm);color:var(--color-text-sub)}.stats-summary{display:flex;gap:var(--space-4);flex-wrap:wrap}.stat-card{flex:1 1 120px;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-4)}.stat-card-label{font-size:var(--fs-sm);color:var(--color-text-sub)}.stat-card-value{font-size:var(--fs-emphasis);font-weight:600;font-family:var(--font-numeric);font-variant-numeric:tabular-nums;color:var(--color-text)}.stat-card-sub{font-size:var(--fs-sm);color:var(--color-text-sub);font-family:var(--font-numeric);font-variant-numeric:tabular-nums}.stats-page h2{margin:0 0 var(--space-3)}.tag-row-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}.tag-row-label{display:flex;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:var(--space-1);font-family:var(--font-numeric);font-variant-numeric:tabular-nums}.tag-row-bar-track{height:var(--space-2);border-radius:var(--radius-pill);background:var(--color-border);overflow:hidden}.tag-row-bar-fill{height:100%;background:var(--gradient-accent);border-radius:var(--radius-pill);transition:width var(--duration) var(--ease-standard)}.stats-reset{display:flex;justify-content:center;margin-top:var(--space-4)}.stats-reset-trigger{color:var(--color-danger-text)}@media (hover: hover){.stats-reset-trigger:hover{border-color:var(--color-danger-border);background:var(--color-danger-bg)}}