/* Dialogs, guide, results */
.modal{border:0;padding:0;border-radius:18px;background:#fbfaf4;color:var(--ink);width:min(760px,calc(100% - 32px));max-height:90dvh;box-shadow:0 25px 100px #132e4255;overscroll-behavior:contain}
.modal::backdrop{background:#173b3b7a;backdrop-filter:blur(7px)}
.modal-body{padding:28px 32px 32px}
.modal-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.modal-heading h2{font-family:var(--serif);font-size:25px;line-height:1.5;letter-spacing:.04em}
.modal-heading>div>.section-kicker{margin-bottom:5px}
.modal-heading>.icon-button{border:1px solid #e0e3d5}
.modal-intro{font-size:12px;line-height:1.9;color:#83907b;margin-top:14px}
.modal-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-top:22px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.modal-tab{font-size:12px;padding:12px 15px 11px;border-bottom:2px solid transparent;color:#949c87;white-space:nowrap}
.modal-tab.selected{color:var(--green);border-bottom-color:var(--green);font-weight:600}
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rule-card{border:1px solid #e1e5d6;border-radius:9px;padding:16px;background:#fffdf7}
.rule-card h3{font-size:12px;font-weight:600;display:flex;gap:7px;align-items:center}
.rule-card h3 .rule-num{font-family:Georgia,serif;font-size:17px;color:#b8aa8a}
.rule-card p{font-size:11px;line-height:1.9;color:#829077;margin-top:8px}
.rules-note{border-left:3px solid #ce9699;background:#f6eae5;border-radius:0 6px 6px 0;padding:12px 15px;font-size:11px;color:#a07975;line-height:1.9;margin:17px 0}
.rule-table{width:100%;border-collapse:collapse;font-size:11px;line-height:1.65;margin-top:12px}
.rule-table th,.rule-table td{text-align:left;border-bottom:1px solid #e3e6d9;padding:10px 12px;vertical-align:top}
.rule-table th{font-weight:600;color:#5b755d;background:#edf0e4}
.rule-table td:first-child{color:#849078;min-width:95px}
.rule-table td{color:#687e65}
.rules-section-title{font-family:var(--serif);font-size:18px;margin:24px 0 12px}
.details-box{border:1px solid #e1e5d5;border-radius:7px;padding:12px 14px;margin-top:10px}
.details-box summary{font-size:12px;cursor:pointer;font-weight:600}
.details-box p,.details-box li{font-size:11px;line-height:1.9;color:#7b8b72;margin-top:8px}
.details-box ul{padding-left:17px;margin:8px 0 0}
.source-list{padding-left:18px;margin:10px 0 0}
.source-list li{font-size:11px;line-height:2.1;color:#839376}
.source-list a{color:#577857;text-underline-offset:3px}
.credit-text{font-size:10px;line-height:1.9;color:#93a087;margin-top:20px}
.yaku-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.filter-button{font-size:10px;border-radius:5px;padding:6px 12px;background:#e9eedf;color:#809174}
.filter-button.selected{background:var(--green);color:#fbf7e8}
.yaku-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.yaku-card{padding:13px 15px;border:1px solid #e1e6d7;background:#fffdf8;border-radius:8px}
.yaku-card-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.yaku-card h3{font-size:12px;font-weight:600}
.han-label{font-size:9px;color:#b08069;background:#f6ebe1;padding:3px 6px;border-radius:4px;white-space:nowrap}
.yaku-card p{font-size:10px;line-height:1.75;color:#8a987c;margin-top:8px}
.yaku-tag{display:inline-block;font-size:8px;border:1px solid #dde3d0;padding:1px 5px;border-radius:3px;color:#95a388;margin-top:6px}
.yaku-search{width:100%;background:#fffef7;border:1px solid #dce4d1;border-radius:7px;padding:10px 13px;margin-bottom:13px;font-size:12px;color:var(--green)}
.guide-top{display:flex;justify-content:space-between;align-items:center;margin-top:25px}
.guide-top span{font-family:Georgia,serif;color:#acb797;font-size:12px;letter-spacing:.13em}
.guide-content{padding:25px 0 15px}
.guide-content h3{font-family:var(--serif);font-size:24px;line-height:1.6;margin-bottom:17px}
.guide-content p{font-size:12px;line-height:2;color:#7e8e73;margin-top:15px}
.guide-example{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;background:#edf2e5;border-radius:12px;padding:25px 14px;margin:20px 0}
.example-group{text-align:center}
.example-group>div{display:flex;gap:2px}
.example-group .mahjong-tile{width:32px}
.example-group small{display:block;margin-top:12px;color:#8b997d;font-size:10px}
.guide-actions{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:16px}
.secondary-button{border:1px solid #cdd8c1;padding:12px 20px;border-radius:7px;font-size:12px;min-height:42px;color:#71856a}
.secondary-button:hover{background:#eaf0df}
.guide-dots{display:flex;gap:6px}
.guide-dots>i{width:6px;height:6px;background:#d8decf;border-radius:50%}
.guide-dots>i.active{background:#73946c;width:18px;border-radius:6px}
.guide-actions .primary-button{font-size:12px;min-height:43px;padding:12px 19px;gap:23px}
.settings-list{display:flex;flex-direction:column;gap:0;margin-top:20px}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:18px;border-top:1px solid #e4e8d9}
.setting-row:first-child{border:0}
.setting-row strong{display:block;font-size:12px;font-weight:600}
.setting-row p{font-size:10px;color:#8b9980;margin-top:7px;line-height:1.7}
.setting-row select{border:1px solid #d7dfca;background:#fffef6;color:#6c8461;padding:8px;border-radius:6px;font-size:11px;max-width:160px}
.setting-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--green)}
.settings-footer{border-top:1px solid var(--line);padding-top:18px;font-size:10px;color:#99a489;line-height:1.8}
.records-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:25px}
.record-box{background:#eef2e5;border-radius:10px;padding:18px;text-align:center}
.record-box strong{display:block;font-family:Georgia,serif;font-size:34px;font-weight:400;color:#5c7e52}
.record-box small{display:block;font-size:10px;color:#93a581;margin-top:7px}
.record-history{list-style:none;padding:0;margin-top:24px}
.record-history li{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line);font-size:11px;color:#8b9b7f}
.record-history b{font-family:var(--serif);font-size:17px;color:#69815b;min-width:38px}
.record-history small{font-size:9px;line-height:1.8}
.record-empty{text-align:center;font-family:var(--serif);padding:30px 0;color:#94a582;line-height:2}
.records-note{font-size:10px;color:#9aaa8b;line-height:1.8;margin-top:17px}
.result-hero{display:flex;align-items:center;gap:24px;padding:28px 32px;background:linear-gradient(100deg,#f6e4e2,#f8f2e3);border-bottom:1px solid #e7ded3;position:relative;overflow:hidden}
.result-hero:after{content:'✿';position:absolute;right:15px;top:-20px;font-size:180px;color:#dca9a51a;pointer-events:none}
.result-hero .avatar{height:88px;width:88px;border:3px solid #fffdf4;box-shadow:0 0 0 1px #ddac9d;z-index:1}
.result-hero h2{font-family:var(--serif);font-size:38px;font-weight:800;color:#ae7379;letter-spacing:.14em}
.result-hero small{font-size:10px;color:#ba9190;letter-spacing:.1em}
.result-hero p{font-size:12px;margin-top:8px;color:#a28b7c}
.result-points{margin-left:auto;z-index:1;text-align:right}
.result-points b{display:block;font-family:Georgia,serif;font-size:38px;color:#8e7655;font-weight:400;white-space:nowrap}
.result-points span{font-size:11px;color:#a9947c}
.result-hand{display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap;padding:21px 0 15px}
.result-hand>.mahjong-tile{width:32px}
.result-hand .meld-group{margin-left:8px}
.result-hand .meld-group .mahjong-tile{width:30px}
.result-yaku{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:8px 0 20px}
.result-yaku>span{font-size:11px;border:1px solid #dddcc9;padding:6px 11px;border-radius:5px;background:#fffdf4;color:#819073}
.result-yaku b{font-size:10px;margin-left:10px;font-weight:400;color:#bd9266}
.result-breakdown{display:flex;justify-content:space-between;background:#edf0e4;padding:13px 17px;border-radius:7px;font-size:11px;color:#7c9270;margin-bottom:15px}
.result-deltas{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.result-deltas.three{grid-template-columns:repeat(3,1fr)}
.delta-card{background:#fffdf6;border:1px solid #e2e6d5;border-radius:9px;padding:13px 10px;text-align:center}
.delta-card .avatar{width:36px;height:36px;margin:0 auto 7px;border-color:#e5d4bf}
.delta-card>span{display:block;font-size:10px;color:#829675}
.delta-card strong{font-family:Georgia,serif;font-size:21px;display:block;font-weight:400;margin-top:8px}
.delta-card small{font-family:Georgia,serif;font-size:13px;display:block;color:#97a284;margin-top:4px}
.delta-card .positive{color:#698d56}
.delta-card .negative{color:#b77d7c}
.result-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:26px}
.result-footer .primary-button{font-size:13px;padding:14px 20px;min-height:47px;gap:25px}
.result-close-hint{font-size:10px;color:#96a488;margin-top:15px;text-align:center}
.hint-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:18px 0}
.hint-tiles .mahjong-tile{width:35px}
.hint-text{font-size:12px;line-height:1.9;color:#7c9273;margin:15px 0}
.confirm-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:25px}
.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);max-width:calc(100% - 32px);background:#254c42ee;color:#fff9eb;padding:12px 22px;border:1px solid #acc19433;border-radius:9px;font-size:12px;line-height:1.7;box-shadow:0 8px 30px #1f3a3633;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;white-space:pre-line;text-align:center}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.noscript{padding:24px;background:#fff0db;text-align:center}
.fatal-error{margin:30px auto;max-width:600px;padding:24px;border:1px solid #d6b193;border-radius:10px;background:#fff5e6;line-height:1.8;font-size:13px}
.fatal-error button{border:1px solid #c8a986;border-radius:6px;padding:10px 16px;margin-top:14px}

/* Parchment panels keep long rules and results legible over the dark table. */
.modal { overflow:auto; --green:#365b63; --line:#dbd7c8; border:1px solid #d5bc89; border-radius:7px; background:linear-gradient(120deg,#fffaf0,#f1eddf); width:min(800px,calc(100% - 32px)); max-height:92dvh; box-shadow:0 24px 100px #030b26aa,0 0 0 4px #c2ac7e25; color:#2f414a; }
.modal::backdrop { background:#050f22b8; backdrop-filter:blur(8px); }
.modal-body { padding:27px 32px 30px; }
.modal-heading { border-bottom:1px solid #cdb88d75; padding-bottom:18px; }
.modal-heading h2 { font-size:25px; letter-spacing:.08em; color:#334652; }
.modal-heading .section-kicker { color:#af9263; font-size:8px; }
.modal-heading>.icon-button { background:#e8e3d5; border-color:#c5bda9; color:#66717a; border-radius:3px; width:34px; height:34px; }
.modal .text-button { color:#6f7b77; }
.modal-intro,.rule-card p,.details-box p,.details-box li,.yaku-card p,.guide-content p,.setting-row p,.settings-footer,.records-note,.credit-text,.hint-text { color:#637078; }
.modal-intro { font-size:12px; }
.modal-tabs { border-color:#d6c7ab; gap:5px; margin-top:19px; margin-bottom:18px; }
.modal-tab { color:#718084; font-size:12px; }
.modal-tab.selected { color:#334d5b; border-bottom-color:#be9754; background:#ddcbaa23; }
.rule-card,.yaku-card,.details-box,.delta-card { border-color:#d9d5c6; border-radius:4px; background:#fffcf5; }
.rule-card p,.details-box p,.details-box li { font-size:12px; }
.rule-card h3,.yaku-card h3 { color:#425964; }
.rules-note { background:#eee4d5; color:#826b50; border-left-color:#c5a86c; border-radius:0 3px 3px 0; font-size:12px; }
.rule-table { font-size:11px; line-height:1.75; }
.rule-table th { background:#e9e5d9; color:#536776; }
.rule-table td,.rule-table td:first-child { color:#657278; }
.rule-table th,.rule-table td { border-color:#ded8c9; }
.rules-section-title { color:#3c5360; }
.source-list li,.source-list a { color:#5b7985; }
.yaku-card p { font-size:11px; }
.han-label { background:#f0e4cc; color:#98763d; border-radius:3px; }
.yaku-tag { color:#92967f; border-color:#d6d4bf; }
.yaku-search { border-radius:4px; border-color:#d3ccb9; color:#3f5966; }
.filter-button { color:#6d7a7b; background:#e8e5da; border-radius:3px; }
.filter-button.selected { background:#324e60; color:#f4e2bb; }
.guide-example { background:#e1e8e3; border:1px solid #d3dcce; border-radius:5px; }
.guide-content h3 { color:#3f5965; }
.guide-content p { font-size:13px; }
.secondary-button { color:#64737b; border-color:#c4c5b9; border-radius:4px; }
.secondary-button:hover { background:#e3e8df; }
.setting-row strong { color:#435b67; font-size:13px; }
.setting-row p { font-size:11px; }
.setting-row select { color:#4d6473; border-color:#c8c9bd; }
.setting-row input[type=checkbox] { accent-color:#3b5f6d; }
.music-settings { margin-top:22px; padding:0 19px 15px; border:1px solid #d7c9ad; border-radius:6px; background:linear-gradient(135deg,#eee8d9,#f6f2e8); }
.music-settings .setting-row { padding:17px 0 13px; }
.music-settings .setting-row input { flex-shrink:0; }
.music-now-playing { display:flex; align-items:center; gap:12px; min-width:0; padding:12px 14px; border:1px solid #e1d8c4; border-radius:4px; background:#fffdf5b3; }
.music-symbol { font:26px Georgia,serif; color:#aa8852; }
.music-track { flex:1; min-width:0; }
.music-track small { display:block; font-size:8px; letter-spacing:.12em; color:#91836c; margin-bottom:5px; }
.music-track strong { display:block; font:600 16px var(--serif); color:#465b65; }
.music-status { font-size:10px; color:#7d8078; white-space:nowrap; }
.music-status[data-state=playing] { color:#426b61; }
.music-volume-row { display:flex; align-items:center; gap:14px; margin-top:12px; }
.music-volume-row label { font-size:11px; color:#526774; flex-shrink:0; }
.music-volume-row input { flex:1; min-width:0; height:34px; margin:0; accent-color:#526c77; cursor:pointer; }
.music-volume-row output { width:37px; color:#536774; text-align:right; font-size:12px; font-variant-numeric:tabular-nums; }
.music-note { color:#727d7f; font-size:10px; line-height:1.7; margin-top:3px; }
.music-retry { margin-left:9px; padding:5px 8px; text-decoration:underline; color:#405c6e; }
.music-settings + .settings-list { margin-top:6px; }
.music-credits { margin-top:12px; padding-top:10px; border-top:1px solid #d9cfbb; color:#727d7f; font-size:10px; line-height:1.8; }
.music-credits summary { cursor:pointer; color:#566c76; width:fit-content; }
.music-credits p { margin-top:7px; }
.music-credits ul { padding-left:16px; margin-top:7px; }
.music-credits a { color:#486879; text-decoration:underline; text-underline-offset:2px; }
.music-credits li>span { margin-left:7px; color:#808477; }
.settings-footer { font-size:11px; }
.record-box { background:#e5e9df; border:1px solid #d7dcce; border-radius:5px; }
.record-box strong { color:#446272; }
.record-box small { color:#79847d; }
.record-history li { color:#6d7c82; }
.record-history b { color:#537083; }
.record-empty { color:#7c887f; }
.result-hero { background:linear-gradient(110deg,#273e54,#172a40); border-bottom:3px solid #cdb176; color:#f7e3be; padding:28px 32px; }
.result-hero:after { color:#dab98214; }
.result-hero h2 { color:#f4d899; text-shadow:0 2px 2px #020d2588; }
.result-hero small { color:#b7b3a3; }
.result-hero p { color:#cad3d5; }
.result-hero .avatar { border-color:#e7c481; border-radius:5px; box-shadow:0 0 0 1px #edd4a640,0 4px 16px #071328; }
.result-points b { color:#ffe3a2; }
.result-points span { color:#becad0; }
.result-yaku>span { border-radius:3px; border-color:#d8d0bc; color:#647177; }
.result-yaku b { color:#a58445; }
.result-breakdown { border-radius:4px; background:#e2e7dc; color:#586e75; }
.delta-card>span,.delta-card small { color:#7b8889; }
.delta-card .positive { color:#397f65; } .delta-card .negative { color:#ad6170; }
.delta-card .avatar { border-radius:4px; }
.result-close-hint { color:#7e8d8e; }
.scoreboard-modal-list { margin:20px 0 10px; border-top:1px solid #d9d5c6; }
.score-row { display:flex; align-items:center; gap:17px; padding:16px 5px; border-bottom:1px solid #d9d5c6; }
.score-rank { width:25px; font:26px Georgia,serif; text-align:center; color:#9f967f; }
.score-row:first-child .score-rank { color:#ba934a; }
.score-row .avatar { width:43px; height:48px; border-radius:4px; box-shadow:none; border-color:#c7b68e; }
.score-player { font:600 15px var(--serif); color:#4c6270; }
.score-player>small { display:block; font:10px var(--sans); color:#929683; margin-top:6px; }
.score-row>strong { margin-left:auto; font:27px Georgia,serif; color:#365b6e; font-variant-numeric:tabular-nums; }
.score-row.is-you { background:#e4e8db65; }
.score-row.is-you>strong { color:#427863; }
.modal-event-log { list-style:none; margin:15px 0 20px; padding:0; }
.modal-event-log li { display:flex; align-items:center; gap:13px; color:#6c7c84; font-size:12px; line-height:1.7; border-bottom:1px solid #dedacb; padding:11px 0; }
.modal-event-log .avatar { width:29px; height:33px; border-radius:3px; border-width:1px; box-shadow:none; }
.modal-event-log .log-event-major { color:#ae7854; font-weight:600; }
.meld-choices { display:flex; flex-wrap:wrap; align-items:stretch; gap:16px; margin:22px 0 8px; }
.meld-choices .action-btn { flex:1; min-width:135px; padding:13px 16px 16px; }
.meld-choices .action-btn .inline-meld { display:flex; gap:3px; margin-top:12px; }
.meld-choices .inline-meld .mahjong-tile { width:27px; }
.ura-tile { width:22px; }
.toast { background:#162c44f5; border-color:#d7bc794d; border-radius:4px; color:#f4e6c9; box-shadow:0 8px 28px #06112766; }
.noscript { color:#453f35; }
@media(max-width:600px) {
  .modal { width:calc(100% - 22px); max-height:94dvh; border-radius:5px; }
  .modal-body { padding:20px 19px 23px; }
  .modal-heading { padding-bottom:14px; gap:12px; }
  .modal-heading h2 { font-size:21px; }
  .modal-heading .section-kicker { font-size:7px; }
  .modal-intro { font-size:12px; }
  .modal-tabs { gap:0; } .modal-tab { font-size:11px; padding:11px 9px; }
  .rules-grid { grid-template-columns:1fr; gap:9px; }
  .rule-card { padding:14px; } .rule-card p { font-size:12px; }
  .rule-table { font-size:10px; } .rule-table th,.rule-table td { padding:9px 7px; } .rule-table td:first-child { min-width:68px; }
  .yaku-grid { gap:8px; } .yaku-card { padding:12px 10px; } .yaku-card h3 { font-size:11px; } .yaku-card p { font-size:11px; } .yaku-card-top { flex-wrap:wrap; gap:5px; }
  .filter-button { font-size:10px; padding:7px 10px; }
  .guide-content h3 { font-size:22px; } .guide-content p { font-size:12px; }
  .guide-example { padding:21px 10px; gap:10px; } .example-group .mahjong-tile { width:25px; }
  .guide-actions { gap:10px; } .guide-actions .primary-button,.guide-actions .secondary-button { font-size:11px; padding:12px 15px; gap:14px; }
  .setting-row { gap:13px; padding:17px 0; } .setting-row strong { font-size:12px; } .setting-row p { font-size:10px; } .setting-row select { max-width:118px; font-size:10px; }
  .music-settings { padding:0 12px 12px; margin-top:18px; } .music-now-playing { padding:11px 10px; gap:9px; } .music-track strong { font-size:14px; } .music-status { font-size:9px; } .music-volume-row { gap:10px; }
  .records-grid { gap:9px; } .record-box { padding:17px 10px; } .record-box strong { font-size:29px; } .record-box small { font-size:9px; }
  .result-hero { padding:23px 19px; gap:12px; } .result-hero .avatar { width:55px; height:62px; border-width:2px; } .result-hero h2 { font-size:26px; letter-spacing:.04em; } .result-hero p { font-size:10px; } .result-hero small { font-size:8px; }
  .result-points b { font-size:27px; } .result-points span { font-size:9px; }
  .result-hand { gap:2px; } .result-hand>.mahjong-tile { width:21px; } .result-hand .meld-group .mahjong-tile { width:20px; } .result-hand .meld-group { margin-left:3px; } .result-hand .drawn-tile { margin-left:7px; }
  .result-yaku { gap:5px; } .result-yaku>span { font-size:10px; padding:5px 8px; } .result-yaku b { margin-left:6px; font-size:9px; }
  .result-breakdown { padding:12px; font-size:10px; }
  .result-deltas { gap:6px; } .delta-card { padding:12px 4px; } .delta-card .avatar { width:30px; height:34px; } .delta-card>span { font-size:8px; } .delta-card strong { font-size:18px; } .delta-card small { font-size:11px; }
  .result-footer { gap:10px; } .result-footer .primary-button { font-size:12px; padding:13px 17px; gap:17px; } .result-footer .secondary-button { font-size:11px; padding:11px 13px; }
  .score-row { gap:12px; padding:15px 2px; } .score-rank { width:18px; font-size:22px; } .score-row .avatar { width:36px; height:42px; } .score-player { font-size:13px; } .score-player>small { font-size:9px; } .score-row>strong { font-size:24px; }
  .confirm-actions { gap:10px; } .confirm-actions>.primary-button,.confirm-actions>.secondary-button { font-size:11px; padding:13px; gap:10px; }
  .toast { bottom:22px; padding:12px 16px; font-size:11px; }
}
@media(max-height:600px) and (orientation:landscape) { .modal { max-height:92dvh; width:min(730px,calc(100% - 42px)); } .modal-body { padding:20px 27px; } .modal-heading h2 { font-size:22px; } .result-hero { padding:19px 27px; } .result-hero .avatar { height:60px; width:60px; } .result-hero h2 { font-size:30px; } .result-points b { font-size:31px; } .toast { bottom:14px; font-size:10px; padding:9px 16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }