:root { color-scheme: light; --ink:#172031; --muted:#697386; --line:#e4e9f0; --blue:#1677ff; --blue-soft:#eef6ff; --paper:#fff; font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { min-width:320px; margin:0; padding-bottom:env(safe-area-inset-bottom); color:var(--ink); background:var(--paper); }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.34; }
[hidden] { display:none !important; }
.sprite-defs { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.app-header { position:sticky; z-index:10; top:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:50px; padding:0 max(14px,env(safe-area-inset-left)); border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.app-header h1 { margin:0; font-size:18px; line-height:1; letter-spacing:-.04em; }
.header-link { justify-self:start; padding:7px 0; border:0; background:none; color:var(--muted); font-size:13px; }
.header-link:last-child { justify-self:end; color:var(--blue); font-weight:600; }
main { width:min(760px,100%); margin:0 auto; }
.view { padding:0 14px calc(60px + env(safe-area-inset-bottom)); }
.view[hidden] { display:none !important; }
.counter-bar { display:flex; align-items:center; gap:8px; min-height:40px; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; }
.counter-bar strong { color:var(--blue); font-size:14px; font-variant-numeric:tabular-nums; }
.reset-button { margin-left:auto; padding:5px 9px; border:0; border-radius:5px; background:#fff0ea; color:#d66545; font-size:12px; font-weight:600; }
.tile-picker { padding:9px 0 10px; border-bottom:1px solid var(--line); }
.tile-row { display:grid; grid-template-columns:24px minmax(0,306px); gap:4px; align-items:center; margin-top:5px; }
.tile-row:first-child { margin-top:0; }
.tile-row > span { color:var(--muted); font-size:12px; font-weight:700; text-align:center; }
.tile-grid { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:3px; }
.tile-button,.selected-tile,.mini-tile,.meld-group i { display:grid; place-items:center; min-width:0; aspect-ratio:64 / 88; overflow:hidden; border:1.5px solid var(--blue); border-radius:5px; background:#fff; box-shadow:0 1px 1px rgba(23,32,49,.05); }
.tile-button { padding:0; transition:transform .14s ease,background .14s ease; }
.tile-button:active { background:var(--blue-soft); transform:scale(.94); }
.tile-face { display:block; width:100%; height:100%; }
.action-section { padding:9px 0 8px; border-bottom:1px solid var(--line); }
.action-tabs { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.action-tab { min-height:32px; padding:0 2px; border:1px solid var(--line); border-radius:5px; background:#fff; color:#424c5d; font-size:13px; font-weight:650; }
.action-tab.is-active { border-color:var(--blue); background:var(--blue); color:#fff; }
.context-details { margin-top:5px; }
.context-details summary { display:flex; align-items:center; justify-content:space-between; min-height:29px; padding:0 2px; color:var(--ink); cursor:pointer; list-style:none; }
.context-details summary::-webkit-details-marker { display:none; }
.context-details summary strong { font-size:13px; }
.context-details summary span { color:var(--muted); font-size:12px; }
.context-details summary::after { content:"⌄"; margin-left:7px; color:var(--blue); font-size:16px; }
.context-details[open] summary::after { transform:rotate(180deg); }
.context-content { padding-top:2px; }
.draft-bar { display:flex; align-items:center; gap:7px; min-height:56px; margin-top:12px; padding:7px; border:1px solid #bed8ff; border-radius:7px; background:var(--blue-soft); }
.draft-bar > span { flex:0 0 auto; color:#2864ae; font-size:12px; font-weight:700; }
.draft-tiles { display:flex; flex:1; min-width:0; gap:3px; overflow:hidden; }
.mini-tile { width:25px; flex:0 0 25px; padding:0; border-width:1px; border-radius:3px; cursor:pointer; }
.mini-tile:hover { border-color:#d64545; }
.condition-grid { display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:10px; margin-top:8px; }
.wind-set { min-width:0; margin:0; padding:0; border:0; }
.wind-set legend,.flower-control > span,.context-options legend { margin-bottom:8px; padding:0; color:var(--muted); font-size:12px; }
.wind-set > div { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; border:1px solid var(--line); border-radius:5px; }
.wind-set label { position:relative; display:grid; place-items:center; min-height:34px; border-left:1px solid var(--line); color:#475467; font-size:13px; }
.wind-set label:first-child { border-left:0; }
.wind-set input { position:absolute; opacity:0; }
.wind-set input:checked + span { display:grid; width:100%; height:100%; place-items:center; background:var(--blue); color:#fff; }
.flower-control { display:grid; grid-template-columns:1fr 32px 32px 32px; align-items:end; }
.flower-control > span { grid-column:1 / -1; }
.flower-control button:first-of-type { grid-column:2; }
.flower-control button,.flower-control strong { display:grid; height:34px; place-items:center; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:16px; }
.flower-control button:first-of-type { border-radius:5px 0 0 5px; }
.flower-control button:last-child { border-radius:0 5px 5px 0; }
.flower-control strong { border-inline:0; color:var(--blue); font-size:14px; }
.context-options { min-width:0; margin:15px 0 0; padding:0; border:0; }
.condition-toggles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 8px; }
.condition-toggles label { display:flex; align-items:center; gap:7px; min-width:0; color:#424c5d; font-size:13px; white-space:nowrap; }
.condition-toggles input { position:absolute; opacity:0; }
.condition-toggles label > span { width:16px; height:16px; flex:0 0 16px; border:1px solid #bbc4d0; border-radius:50%; background:#fff; }
.condition-toggles input:checked + span { border-color:var(--blue); background:var(--blue); box-shadow:inset 0 0 0 3px #fff; }
.condition-toggles input:disabled + span { background:#eef1f5; box-shadow:none; }
.condition-toggles label.is-disabled { color:#a0a8b5; }
.condition-toggles b { overflow:hidden; font-weight:500; text-overflow:ellipsis; }
.context-rule-note { margin:9px 0 0; color:#ad775e; font-size:11px; line-height:1.55; }
.selected-section,.result-section { padding:11px 0; border-bottom:1px solid var(--line); }
.section-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.section-title h2 { margin:0; font-size:16px; letter-spacing:-.03em; }
.section-title span { color:var(--muted); font-size:12px; }
.selected-rack { display:grid; width:100%; max-width:600px; grid-template-columns:repeat(14,minmax(0,1fr)); min-height:0; aspect-ratio:10.65 / 1; gap:2px; overflow:visible; }
.selected-tile { width:auto; padding:0; border-color:var(--blue); border-radius:3px; }
.selected-tile.is-winning { border:2px solid #ef5350; box-shadow:0 0 0 2px #fff inset; }
.empty-rack,.empty-result { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.empty-rack { display:grid; width:100%; place-items:center start; grid-column:1 / -1; }
.meld-rack { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.meld-group { display:flex; align-items:center; gap:3px; padding:4px; border:1px solid #bcd7ff; border-radius:5px; background:var(--blue-soft); }
.meld-group > span { margin:0 4px 0 2px; color:#2864ae; font-size:11px; font-weight:700; }
.meld-group i { width:22px; border-width:1px; border-radius:2px; }
.meld-group button { width:22px; height:22px; border:0; border-radius:50%; background:none; color:#6b7f98; font-size:18px; line-height:1; }
.wait-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:6px; }
.wait-card { display:flex; align-items:center; gap:6px; min-height:55px; padding:5px; border:1px solid #cad4e1; border-radius:6px; background:#fff; color:var(--ink); text-align:left; }
.wait-card:hover { border-color:var(--blue); background:var(--blue-soft); }
.wait-card .tile-face { width:26px; height:36px; flex:0 0 26px; border:1px solid var(--blue); border-radius:3px; }
.wait-card span { display:flex; flex-direction:column; gap:2px; }
.wait-card strong { color:var(--ink); font-size:14px; }
.wait-card small { color:#23824c; font-size:11px; }
.wait-card.is-low small { color:#bf6b46; }
.fan-list { display:grid; gap:0; }
.fan-list > div { display:flex; align-items:center; justify-content:space-between; min-height:39px; border-bottom:1px solid #eff2f5; font-size:14px; }
.fan-list strong { color:#d64545; font-size:14px; }
.result-note { margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.subpage-heading { padding:28px 0 20px; border-bottom:1px solid var(--line); }
.subpage-heading h2 { margin:0; font-size:25px; letter-spacing:-.04em; }
.subpage-heading p { margin:7px 0 0; color:var(--muted); font-size:14px; }
.fan-group { display:grid; grid-template-columns:74px minmax(0,1fr); gap:12px; padding:18px 0; border-bottom:1px solid var(--line); }
.fan-group h3 { margin:0; color:#c7393c; font-size:14px; font-weight:500; }
.fan-group h3 strong { display:block; font-size:28px; line-height:1; }
.fan-group h3 span { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.fan-group > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.fan-group details { border:1px solid var(--line); border-radius:5px; background:#fff; }
.fan-group summary { padding:10px; color:#323c4c; font-size:13px; font-weight:650; cursor:pointer; }
.fan-group p { margin:0; padding:0 10px 9px; color:var(--muted); font-size:12px; line-height:1.6; }
.fan-group small { display:block; padding:0 10px 10px; color:#ad775e; font-size:11px; line-height:1.55; }
.guide-steps { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.guide-steps li { display:grid; grid-template-columns:88px 1fr; gap:10px; padding:18px 0; border-bottom:1px solid var(--line); }
.guide-steps strong { color:var(--blue); font-size:15px; }
.guide-steps span,.guide-note { color:var(--muted); font-size:14px; line-height:1.65; }
.guide-share { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding:15px; border:1px solid #cbe0ff; border-radius:7px; background:var(--blue-soft); }
.guide-share h3 { margin:0 0 6px; color:#245898; font-size:14px; }
.guide-share p { max-width:290px; margin:0; overflow:hidden; color:#5b7190; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; line-height:1.55; text-overflow:ellipsis; white-space:nowrap; }
.guide-share canvas { width:82px; height:82px; flex:0 0 82px; background:#fff; image-rendering:pixelated; }
.guide-note { margin:15px 0 0; font-size:12px; }
.guide-offline { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; align-items:center; margin-top:20px; padding:15px; border:1px solid #b9d9cd; border-radius:7px; background:#f2faf6; }
.guide-offline h3 { margin:0 0 5px; color:#245d48; font-size:14px; }
.guide-offline p { margin:0; color:#527365; font-size:13px; line-height:1.55; }
.guide-offline button { min-height:36px; padding:0 12px; border:0; border-radius:5px; background:#24694e; color:#fff; font-size:13px; font-weight:650; }
.guide-offline .offline-hint { grid-column:1 / -1; color:#697386; font-size:12px; }
.bottom-nav { position:fixed; z-index:12; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(3,1fr); min-height:calc(54px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line); background:rgba(255,255,255,.97); backdrop-filter:blur(12px); }
.bottom-nav-item { display:grid; place-content:center; gap:3px; border:0; background:none; color:#697386; font-size:12px; }
.bottom-nav-item.is-active { color:var(--blue); font-weight:700; }
.nav-icon { font-size:19px; line-height:1; }
@media (min-width:700px) { body { background:#f5f7fa; } .app-header,main { width:min(760px,calc(100% - 48px)); } .app-header { margin:0 auto; } main { min-height:calc(100dvh - 50px); background:#fff; box-shadow:0 0 0 1px #edf0f4; } .view { padding-right:26px; padding-left:26px; padding-bottom:72px; } .bottom-nav { width:min(760px,calc(100% - 48px)); margin-inline:auto; } .tile-button:hover { background:var(--blue-soft); transform:translateY(-1px); } }
@media (max-width:410px) { .view { padding-right:10px; padding-left:10px; } .condition-grid { grid-template-columns:1fr 1fr; } .flower-control { grid-column:1 / -1; grid-template-columns:1fr 36px 36px 36px; } .condition-toggles { grid-template-columns:repeat(2,minmax(0,1fr)); } .tile-row { grid-template-columns:21px minmax(0,306px); gap:3px; } .action-tabs { gap:4px; } .action-tab { font-size:12px; } .wait-list { grid-template-columns:repeat(3,minmax(0,1fr)); } .wait-card { gap:4px; padding:4px; } .fan-group { grid-template-columns:59px minmax(0,1fr); gap:8px; } }