/* Design system v3 (2026-10-21): 红花、绿牌、主板；金是花牌和对手的花。底是板绿的最浅与最深两端——昼是新能源车牌那种淡绿（绿牌），夜是主板阻焊层的深绿（主板）——红花落在绿上。Loaded last; it supersedes every earlier palette layer. Rules, seeds and saves are untouched. */
@font-face{font-family:"SZ Rank";src:url("../assets/fonts/archivo-rank.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
:root,[data-sz-theme=light]{color-scheme:light;--paper:#EDF4EF;--panel:#F7FBF8;--table:#E2ECE5;--soft:#E2ECE5;--ink:#10231B;--muted:#4F665A;--line:#C3D4C9;--red:#C5416B;--red-text:#B2365A;--red-tint:#F6E0E7;--red-deep:#962C4F;--leaf:#16765F;--leaf-text:#16765F;--leaf-tint:#E4F1EC;--gold-base:#ECCE80;--gold-edge:#A17C35;--gold-center:#F2CD5D;--accent:var(--red);--flower:var(--red);--gold:#D6A41C;--gold-text:#866300;--gold-tint:#F1EAD0;--mint:var(--gold);--card-face:#FFFEFA;--card-ink:#10231B;--card-red:#C5416B;--card-edge:#CBD9D0;--back:var(--gold-base);--back-edge:var(--gold-edge);--back-ink:#C5416B;--selected:#FAE4EB;--primary-ink:#FFFEFA;--shadow:0 2px 3px #10231B14,0 6px 12px #10231B08;--flat-shadow:0 1px 1.5px #10231B1F;--lift-shadow:0 1px 2px #10231B1F,0 6px 14px #10231B33;--lift-shadow-strong:0 2px 3px #10231B26,0 10px 22px #10231B40;--sz-paper:var(--paper);--sz-ink:var(--ink);--sz-sea:var(--ink);--sz-table:var(--table);--sz-flower:var(--red);--sz-flower-deep:var(--red);--sz-mint:var(--gold);--sz-gold:var(--gold);--cream:var(--paper);--sz-brand-red:#C5416B;--sz-brand-gold:#F2CD5D;--sz-logo-petal:#C5416B;--sz-logo-center:#F2CD5D;--sz-logo-paper:var(--paper);--sz-logo-edge:#A17C35;--r-sm:4px;--r:8px;--r-lg:16px;--rank-font:"SZ Rank",Arial,Helvetica,sans-serif}
[data-sz-theme=dark]{color-scheme:dark;--paper:#0C2118;--panel:#152E23;--table:#112A1F;--soft:#152E23;--ink:#EAF3EE;--muted:#9DB5A8;--line:#2C4B3C;--red:#C5416B;--red-text:#E38BA6;--red-tint:#3A2730;--red-deep:#E38BA6;--leaf:#2E8F78;--leaf-text:#7FC9B4;--leaf-tint:#1F3A33;--accent:var(--red);--flower:var(--red);--gold:#E4C46A;--gold-text:#E4C46A;--gold-tint:#33331F;--mint:var(--gold);--back:var(--gold-base);--back-edge:var(--gold-edge);--back-ink:#C5416B;--selected:#FAE4EB;--primary-ink:#FFFEFA;--shadow:0 2px 3px #00000040,0 6px 12px #00000030;--flat-shadow:0 1px 2px #00000059;--lift-shadow:0 1px 2px #00000066,0 8px 18px #00000099;--lift-shadow-strong:0 2px 3px #00000073,0 12px 26px #000000B3;--sz-logo-paper:#152E23;--sz-logo-edge:#A17C35}
html,:root body,[data-sz-theme=dark] body{background:var(--paper);color:var(--ink)}
/* surfaces: no glow, three radii */
:root body .table,[data-sz-theme=dark] .table,:root[data-sz-theme=dark] body .table{background:var(--table);box-shadow:none;border-radius:var(--r-lg)}
:root body .modal,[data-sz-theme=dark] .modal{border-radius:var(--r-lg)}
:root body .table .actionbar,[data-sz-theme=dark] .table .actionbar{background:var(--paper);border-radius:var(--r)}
:root body #hr-panel,[data-sz-theme=dark] #hr-panel{border-radius:var(--r-lg);background:var(--panel);border-color:var(--line)}
:root body .settings-modal input,[data-sz-theme=dark] .settings-modal input{border-radius:var(--r);background:var(--panel);border-color:var(--line);color:var(--ink)}
[data-sz-theme=dark] .table #hr-toggle{background:var(--panel)}
[data-sz-theme=dark] .table .shared-flower{background:transparent}
/* buttons: filled red, or ink text with an underline */
:root body .primary,:root body button.primary,[data-sz-theme=dark] button.primary,:root body .table .action-buttons .primary,[data-sz-theme=dark] .table .action-buttons .primary,:root body .result-actions .primary,:root body .rule-page #rg-navigation .primary,:root body .rule-page #rg-navigation [data-rg-next],:root body .rule-page .rg-next{background:var(--red)!important;border-color:transparent;color:#FFFEFA!important;box-shadow:none;border-radius:var(--r)}
:root body .primary:active,:root body .table .action-buttons .primary:active{background:var(--red-deep)!important}
:root body .table .action-buttons button:not(.primary),[data-sz-theme=dark] .table .action-buttons button:not(.primary){color:var(--ink);background:transparent;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
:root body button:disabled{opacity:.4}
:root body .table .tabs button:after,:root body.table-identity-layout .app-header .tabs button[aria-selected=true]::after{background:var(--red)}
/* the flower-card chip is a miniature of the card itself: label in ink, a 22×31 gold card with the red heart index */
:root body .table .shared-flower,[data-sz-theme=dark] .table .shared-flower{display:inline-flex;align-items:center;gap:7px;padding:0;color:var(--ink);font-size:13px;font-weight:600}
:root body .table .shared-flower .card{--rk:16px;flex:none;width:32px;height:45px;padding:4px;border-radius:5px;margin:0;box-shadow:var(--flat-shadow);cursor:default}
:root body .table .shared-flower .card .wild,:root body .table .shared-flower .card .center{display:none}
/* small red text on dark surfaces uses the lighter red */
:root body .table .formula,:root body .table .score-number,:root body #hr-panel tbody td,:root body .goal-own,:root body .rule-page #rg-progress button[aria-current=step]{color:var(--red-text)}
:root body .goal-opp{color:var(--gold-text)}
/* hand-type badge */
:root body .table .preview-score{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:4px;row-gap:0;white-space:nowrap;padding:2px 9px;border-radius:11px;background:var(--red-tint);color:var(--red-text);font-size:12px;font-weight:650;line-height:1.6;width:max-content;max-width:100%}
:root body .table .preview-score .score-number{font-size:12px;color:inherit}
:root body .table .preview-score small{color:inherit;font-weight:500;font-size:11px}
/* cards: one component, --rk sets the index; suits are shapes */
/* depth: cards on the table lie flat at one size (combat and wounds); held cards are bigger and cast a shadow */
:root body .wound-cards{min-height:calc(var(--combath) + 6px)}
:root body .wound-cards .card,[data-sz-theme=dark] .wound-cards .card{--rk:var(--combatrank);width:var(--combatw);height:var(--combath);padding:4px;border-radius:6px}
:root body .wound-cards.many-wounds .card+.card{margin-left:calc(-.5 * var(--combatw))}
:root body .opponent-wound-group .wound-cards.many-wounds .card+.card{margin-left:calc(-.6 * var(--combatw))}
@media(max-width:599px) and (max-height:650px){:root body .wound-group{--combatw:28px;--combath:40px;--combatrank:16px}}
@media(max-width:380px) and (min-height:721px){:root body .wound-group{--combatw:32px;--combath:46px;--combatrank:17px}}
@media(max-height:480px) and (min-width:480px){:root body .wound-group{--combatw:25px;--combath:36px;--combatrank:14px}}
/* wound track beside the name: count in the rank face, five bracts, filled in the identity colour */
/* both heading rows read the same way: flower, name, wound track from the left; the meta or the flower chip at the right */
:root body .table .opponent-heading,:root body .table .hand-tools{justify-content:flex-start;gap:10px}
:root body .table .hand-tools .player-identity{margin-right:0}
:root body .table .opponent-heading #match-meta,:root body .table .hand-tools .shared-flower{margin-left:auto}
:root body .table .damage,[data-sz-theme=dark] .table .damage{display:inline-flex;align-items:center;gap:3px;margin:0;font-size:12px;line-height:1;color:var(--muted)}
:root body .table .damage b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root body .table .damage .wound-bract{width:14px;height:18px;flex:none;opacity:1;overflow:visible}
:root body .table .damage .wound-bract:not(.filled) path{fill:color-mix(in srgb,var(--ink) 22%,transparent)}
/* each pip is one bougainvillea bract with its centre: red bract + gold centre for you, gold bract + red centre for the rival */
:root body .table .wound-bract .bract-core{display:none}
:root body .table .wound-bract.filled .bract-core{display:block;fill:var(--gold-center)}
:root body .table #opp-damage .wound-bract.filled .bract-core{fill:var(--red)}
:root body .card,[data-sz-theme=dark] .card{--rk:var(--handrank);background:var(--card-face);border-color:var(--card-edge);color:var(--card-ink);border-radius:var(--r);box-shadow:none;padding:5px}
/* only the cards in your hand are lifted; everything on the table (plays, wounds, backs, piles, the flower chip) lies flat without a shadow */
:root body .table .card,:root body .table .combat-cards .card,:root body .table .wound-cards .card,:root body .table .hidden-hand .card,:root body .table .shared-flower .card{box-shadow:none}
:root body .table .hand-cards .card,[data-sz-theme=dark] .table .hand-cards .card{box-shadow:var(--lift-shadow)}
:root body .table .hand-cards .card.selected,[data-sz-theme=dark] .table .hand-cards .card.selected{box-shadow:var(--lift-shadow-strong)}
:root body .table .pile-stack,:root body .table .pile-stack::before,:root body .table .pile-stack::after{box-shadow:none}
:root body .wound-cards .card{--rk:var(--woundrank);padding:3px;border-radius:6px}
:root body .combat-cards .card{--rk:var(--combatrank);padding:4px;border-radius:6px}
:root body .card.red,[data-sz-theme=dark] .card.red{color:var(--card-red)}
:root body .card .rank{display:block;width:var(--rk);text-align:center;font-family:var(--rank-font);font-weight:800;font-size:var(--rk);line-height:1;letter-spacing:-.05em;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
:root body .card .rank.ten{letter-spacing:-.12em;transform:scaleX(.82);transform-origin:50% 50%}
:root body .card .suit{display:block;width:calc(var(--rk) * .66);height:calc(var(--rk) * .66);margin:calc(var(--rk) * .1) 0 0 calc(var(--rk) * .17);font-size:0;line-height:0;color:inherit}
:root body .card .center{position:absolute;right:6px;bottom:6px;width:45%;height:45%;font-size:0;line-height:0;opacity:.16;color:inherit}
:root body .card .suit svg,:root body .card .center svg{display:block;width:100%;height:100%;fill:currentColor;overflow:visible}
:root body .card.selected,[data-sz-theme=dark] .card.selected{background:var(--selected);outline:2px solid var(--red);outline-offset:-2px;border-color:var(--red)}
/* the flower card is the gold logo card */
:root body .card:has(.wild),[data-sz-theme=dark] .card:has(.wild),:root body .card:has(.wild).selected,[data-sz-theme=dark] .card:has(.wild).selected{background:var(--gold-base);border-color:var(--gold-edge);color:#C5416B;--paper:var(--gold-base);--card-face:var(--gold-base)}
:root body .card:has(.wild) .center{display:none}
/* the flower on the 花牌 is a watermark like the suit on every other card: same corner, same translucent red */
:root body .card .wild{display:block;position:absolute;left:auto;right:6px;bottom:6px;width:45%;height:45%;aspect-ratio:auto;font-size:0;line-height:0;color:inherit;background:none;pointer-events:none;opacity:.2;--sz-logo-petal:currentColor;--sz-logo-center:currentColor}
:root body .card .wild svg{display:block;width:100%;height:100%;overflow:visible}
/* backs: the logo card itself in both themes (gold ground, gold edge, the full red flower with gold centres); the 花牌 face shares the ground but carries an index */
:root body .card.back,[data-sz-theme=dark] .card.back,[data-sz-theme=dark] .table .card.back{background:var(--back);border-color:var(--back-edge);color:var(--back-ink);box-shadow:none}
:root body .card.back::after{content:"";position:absolute;inset:4px;border:1px solid color-mix(in srgb,var(--back-edge) 45%,transparent);border-radius:4px;pointer-events:none}
:root body .card.back.mini::after,:root body .hidden-hand .card.back::after{inset:3px;border-radius:3px}
:root body .card.back .motif,:root body .back{--sz-logo-petal:var(--red);--sz-logo-center:var(--gold-center)}
:root body .card.back .motif svg,:root body .back svg{opacity:1;color:var(--red)}
/* the back's flower is laid out by percentages so a copied card (flight pictures) keeps it centred at any size; !important beats the copied inline pixels */
:root body .card.back .motif{position:absolute;inset:0!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;display:grid!important;place-items:center;border:0!important;overflow:visible!important;font-size:0}
:root body .card.back .motif svg{display:block;width:64%!important;height:64%!important}
:root body .back{background:var(--back);color:var(--back-ink)}
/* piles */
:root body .table .pile-stack,[data-sz-theme=dark] .table .pile-stack{background:var(--back);border-color:var(--back-edge);color:var(--back-ink);border-radius:var(--r)}
/* a pile reads as a stack: one or two cards peek out below and to the right of the top card; no ring, no red */
:root body .table .pile{isolation:isolate}
:root body .table .pile-stack{isolation:auto;box-shadow:none}
:root body .table .pile-stack::before,:root body .table .pile-stack::after{content:"";display:block;position:absolute;inset:0;box-sizing:border-box;border:1px solid var(--back-edge);border-radius:inherit;background:var(--back);box-shadow:none;z-index:-1;transform:translate(1.5px,1.5px)}
:root body .table .pile-stack::after{z-index:-2;transform:translate(3px,3px);filter:brightness(.94)}
:root body .table .pile[data-depth="1"] .pile-stack::after,:root body .table .pile[data-depth="0"] .pile-stack::before,:root body .table .pile[data-depth="0"] .pile-stack::after{display:none}
:root body .table .discard-pile .pile-stack::before,:root body .table .discard-pile .pile-stack::after{background:var(--table);border-color:var(--line);box-shadow:none;filter:none}
:root body .table .discard-pile .pile-stack{background:transparent;border-color:var(--line);color:var(--muted)}
:root body .table .stock-pile.is-low .pile-stack,[data-sz-theme=dark] .table .stock-pile.is-low .pile-stack{background:var(--back);border-color:var(--back-edge);color:var(--back-ink);box-shadow:none}
/* identities: you are the red flower, the rival is the gold flower; wounds are bracts */
:root body.table-identity-layout .player-flower-red path[fill="#DEB04A"]{fill:var(--gold-center)}
:root body .table .wound-bract.filled,:root body .table .wound-bract.filled path{fill:var(--red);opacity:1}
:root body .table #opp-damage .wound-bract.filled,:root body .table #opp-damage .wound-bract.filled path{fill:var(--gold)}
:root body .race-track{--own-race:var(--red);--opp-race:var(--gold)}
/* Progress, recap and finale keep the table identities: red/gold centres for you, gold/red centres for the rival. */
:root body .sz-bloom .fc-spine-bloom:not(.fc-gold-flower) path[fill="#DEB04A"]{fill:var(--gold-center)}
/* swap targets: one mark per zone, the icon on the zone corner; the old per-card arrows are gone */
:root body .sz-swap-icon,:root body .sz-swap-button{display:none}
:root body .card.swap-destination,:root body .card.has-swap-icon{outline:0}
:root body .card.swap-destination:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
:root body .cards:has(.card.swap-destination),:root body .sz-blind-swap,:root body #deck-count.exchange-ready{position:relative;outline:1.5px dashed var(--red);outline-offset:4px;border-radius:10px}
:root body .cards:has(.card.swap-destination)::after,:root body .sz-blind-swap::after,:root body #deck-count.exchange-ready::after{content:"";position:absolute;top:-10px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20stroke%3D%22%23FFFEFA%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205.5h8.2l-2.2-2.2M13%2010.5H4.8l2.2%202.2%22%2F%3E%3C%2Fsvg%3E") center/14px no-repeat;box-shadow:0 1px 3px #0004;z-index:3;pointer-events:none}
:root body .blind-target-selected{outline-color:var(--red)}
/* sizes: bigger ranks on mid-size desktops; flat hands where there is room */
@media(min-width:761px) and (min-height:651px) and (max-height:760px){:root body .app-main:not(.is-replay){--handrank:28px}}
@media(min-width:900px){:root body .app-main:not(.is-replay){--handstep:calc(var(--handw) + 6px)}}
/* result sheet: a bottom sheet with one sentence, the new level, both wounds, two actions */
:root body .result-modal{width:min(480px,100vw);max-width:none}
:root body .result-sheet,[data-sz-theme=dark] .result-sheet{background:var(--paper);border:0;border-radius:var(--r-lg);box-shadow:0 24px 80px #101A1840}
:root body .result-head{padding:12px 20px 0;font:650 11px/1.4 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--red-text)}
:root body .result-head button{color:var(--muted);font-size:22px}
:root body .result-content h2{font-size:24px;letter-spacing:-.02em;line-height:1.3;margin:4px 0 2px}
:root body #result-subtitle{font-size:14px;color:var(--muted)}
:root body #result-modal .result-title-row{display:flex;align-items:center;justify-content:center;gap:10px}
:root body #result-winner-flower{width:28px;height:32px;flex:none}
:root body #result-modal .result-title-row h2{min-width:0}
:root body #result-modal .result-upgrade{display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:10px 14px;width:max-content;max-width:100%;font-size:15px;font-weight:600}
:root body #result-modal #result-upgrade-note{grid-column:1/-1;margin:0;text-align:center;font-size:12px;color:var(--muted)}
:root body #result-modal #result-to{height:auto;background:none;border:0;padding:0}
:root body #result-modal #result-from{height:auto;background:transparent;color:var(--muted);padding:0;font-size:36px}
:root body #result-modal #result-to .card{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;width:auto;min-width:78px;height:52px;padding:6px 12px;margin:0;border-radius:7px;box-shadow:var(--flat-shadow);--rk:34px}
:root body #result-modal #result-to .card .rank{font-size:34px;line-height:1}
:root body #result-modal #result-to .card .suit{width:23px;height:23px;margin:0}
:root body #result-modal #result-to .card .wild,:root body #result-modal #result-to .card .center{display:none}
:root body #result-modal .result-damage{display:grid;grid-template-columns:1fr 1fr;gap:10px}
:root body #result-modal .result-damage>div{border-radius:var(--r);background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted);padding:10px 12px}
:root body #result-modal .result-damage .result-winner{background:var(--gold-tint);color:var(--gold-text)}
:root body #result-modal #result-own.result-winner{background:var(--red-tint);color:var(--red-text)}
:root body #result-modal .result-damage strong{font-family:var(--rank-font);font-size:20px;color:inherit}
:root body #result-modal .result-actions{display:grid;gap:6px;background:var(--paper);border:0;padding:12px 20px 20px}
:root body #result-modal .result-actions button{width:100%;min-height:46px;border-radius:var(--r);font-size:14px;font-weight:600}
:root body #result-modal .result-actions button:not(.primary){background:transparent;border:0;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
@media(max-width:760px){:root body .result-modal{position:fixed;inset:auto 0 0;margin:0;width:100%}:root body .result-sheet{border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:calc(100dvh - 48px)}}
/* hand reference: name line, example cards on their own line, score on the right */
/* hand reference: the same card component at a reading size; the 五炸 example shows this game's 花牌 */
:root body #hr-panel .hr-example{display:flex;gap:6px;align-items:center;margin-top:8px}
:root body #hr-panel .hr-example .card{--rk:20px;flex:none;width:46px;height:64px;padding:5px;border-radius:var(--r);margin:0}
/* the ranks drawer fits one screen: eight rows share the height, name and cards on one line, card size from the viewport */
:root body #ranks-modal{--hr-ch:clamp(40px,min(calc((var(--app-height,100dvh) - 170px) / 8 - 12px),calc((100vw - 196px) / 5 * 1.4)),64px)}
:root body #ranks-modal #hr-panel thead tr,:root body #ranks-modal #hr-panel tbody tr{display:flex;align-items:center;gap:10px}
:root body #ranks-modal #hr-panel tbody tr{border-bottom:1px solid var(--line)}
:root body #ranks-modal #hr-panel th,:root body #ranks-modal #hr-panel td{padding:5px 0;border:0;line-height:1.3}
:root body #ranks-modal #hr-panel thead th:first-child,:root body #ranks-modal #hr-panel tbody th{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left}
:root body #ranks-modal #hr-panel th:last-child,:root body #ranks-modal #hr-panel tbody td{flex:none;width:30px;text-align:right}
:root body #ranks-modal #hr-panel .hr-name{display:grid;flex:none;width:clamp(64px,19vw,160px);font-size:14px;font-weight:600;line-height:1.3}
:root body #ranks-modal #hr-panel .hr-name small{margin:0;font-size:11px;line-height:1.3;white-space:normal;font-weight:400}
:root body #ranks-modal #hr-panel .hr-example{margin:0;gap:4px}
:root body #ranks-modal #hr-panel .hr-example .card{--rk:calc(var(--hr-ch) * .32);width:calc(var(--hr-ch) * 5 / 7);height:var(--hr-ch);padding:calc(var(--hr-ch) * .08)}
:root body #ranks-modal #hr-panel tbody td{font-size:20px}
:root body #ranks-modal #hr-panel .hr-note{margin:8px 0 0;padding-top:8px}
:root body .settings-modal .menu-match-actions .primary{order:-1}
/* piles: the count lives in the label above; the stock pile below is a plain back (inner frame, centred flower) */
:root body .table .pile-label{display:grid;justify-items:center;gap:3px;line-height:1.3;min-height:0;white-space:nowrap}
:root body .table .pile-label b{font-family:var(--rank-font);font-weight:800;font-size:16px;line-height:1;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
:root body .table .discard-pile .pile-label b{color:var(--muted)}
:root body .table .pile-back{position:absolute;inset:4px;left:4px;bottom:4px;width:auto;height:auto;transform:none;border:1px solid color-mix(in srgb,var(--gold-edge) 45%,transparent);border-radius:4px;display:grid;place-items:center;pointer-events:none}
:root body .table .pile-back svg{width:64%;height:64%}
/* tutorial board piles follow the table: count above the card, the stock is a stacked back, the discard a quiet stack */
:root body #rule-page .fg-pile{margin-top:18px;border-radius:6px;background:var(--card-face);border-color:var(--line);box-shadow:1.5px 1.5px 0 -1px var(--table),1.5px 1.5px 0 0 var(--line)}
:root body #rule-page .fg-pile>b{position:absolute;left:50%;top:-19px;transform:translateX(-50%);font:800 15px/1 var(--rank-font);color:var(--ink);letter-spacing:0}
:root body #rule-page .fg-discard{opacity:1}
:root body #rule-page .fg-discard .fg-pile{background:transparent}
:root body #rule-page .fg-discard .fg-pile>b{color:var(--muted)}
:root body #rule-page .fg-stock,:root body #rule-page .fg-board .fg-stock.is-target{background:var(--back);border-color:var(--back-edge);box-shadow:1.5px 1.5px 0 -1px var(--back),1.5px 1.5px 0 0 var(--back-edge),3px 3px 0 -1px var(--back),3px 3px 0 0 var(--back-edge)}
:root body #rule-page .fg-stock::after{content:"";position:absolute;inset:3px;border:1px solid color-mix(in srgb,var(--back-edge) 45%,transparent);border-radius:3px;pointer-events:none}
:root body #rule-page .fg-stock>i{position:absolute;inset:0;left:0;bottom:0;width:auto;height:auto;display:grid;place-items:center;opacity:1;--sz-logo-petal:var(--red);--sz-logo-center:var(--gold-center)}
:root body #rule-page .fg-stock svg{width:64%;height:64%}
/* stock pile carries the same flower as the backs */
:root body .table .pile-back{color:var(--red);opacity:1;--sz-logo-petal:var(--red);--sz-logo-center:var(--gold-center)}
:root body .table .pile-back svg path,:root body .table .pile-back svg g{fill:var(--red)}
:root body .table .pile-back svg path[fill^="var(--sz-logo-center"]{fill:var(--gold-center)}
/* the wound rack's right padding only made room for a label that is hidden now; centre the rack under the hand */
:root body .wound-group>.cards{padding-right:0}
/* the circuit-board Easter egg: a switch in settings */
:root body .settings-modal .sz-egg{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:0;border:0;font-size:var(--menu-label,13px);line-height:1.4;color:var(--ink);cursor:pointer}
:root body .sz-egg-text small{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.4}
:root body .sz-egg input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;position:relative;box-sizing:border-box;width:44px;height:26px;min-width:44px;min-height:0;max-height:26px;padding:0;margin:0;border:0;border-radius:13px;background:var(--line);cursor:pointer;transition:background-color .2s}
:root body .sz-egg input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#FFFEFA;box-shadow:0 1px 2px #10231B40;transition:transform .2s}
:root body .sz-egg input[type=checkbox]:checked{background:var(--red)}
:root body .sz-egg input[type=checkbox]:checked::after{transform:translateX(18px)}
:root body .sz-egg input[type=checkbox]:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:reduce){:root body .sz-egg input[type=checkbox],:root body .sz-egg input[type=checkbox]::after{transition:none}}
/* the menu's active tab needs no underline: its ink colour and weight already say which one it is */
:root body.table-identity-layout .app-header .app-navigation button[aria-current=page]::after{display:none}
/* the wild card chip: rank and suit side by side on a small gold token, so it never makes your heading row taller */
:root body .table .shared-flower .card{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:2px;--rk:16px;width:auto;min-width:0;height:24px;padding:0 7px 0 6px;border-radius:5px}
:root body .table .shared-flower .card .rank{line-height:1}
:root body .table .shared-flower .card .suit{margin:0}
/* Keep separate flower lanes above and below the 12px rank labels on narrow screens. */
@media (max-width:600px){
 :root body[data-bloom=true] #level-track{--fc-ace-step:13px}
 :root body[data-bloom=true] #level-track,:root body[data-bloom=true] #level-track .fc-progress-summary,:root body[data-bloom=true] #level-track .fc-shared-vine,:root body[data-bloom=true] #level-track .fc-vine-drawing{height:48px}
 :root body[data-bloom=true] #level-track :is(.fc-player-flower,.fc-ace-attempt){width:14px;height:15.75px}
 :root body[data-bloom=true] #level-track .fc-win-stamp{width:14px}
 :root body[data-bloom=true] #level-track :is(.fc-win-top,.fc-attempt-rival){top:-1px}
 :root body[data-bloom=true] #level-track :is(.fc-win-bottom,.fc-start-stamp.fc-win-bottom,.fc-attempt-own){top:31px}
 :root body[data-bloom=true] #level-track .fc-vine-axis{inset:16.7px 0 auto}
 :root body[data-bloom=true] #level-track :is(.fc-ace-knot,.fc-final-flower){top:22.7px}
 /* Smaller faded flowers keep consecutive Ace setbacks distinct. */
 :root body[data-bloom=true] #level-track .fc-ace-attempt{width:10px;height:11.25px}
 :root body[data-bloom=true] #level-track .fc-attempt-rival{top:1.25px}
 :root body[data-bloom=true] #level-track .fc-attempt-own{top:33.25px}
}
/* Phone portrait: compact navigation and rival backs leave room for your hand. */
@media (max-width:600px) and (min-height:540px){
 :root body[data-bloom=true] .app-header{height:calc(44px + env(safe-area-inset-top));padding-top:calc(3px + env(safe-area-inset-top));padding-bottom:3px}
 :root body .app-header .brand{gap:8px}
 :root body .app-header .brand :is(img,svg){width:26px;height:26px}
 :root body .app-header .brand h1{font-size:19px;line-height:24px}
 :root body .app-header .app-navigation{min-height:38px;height:38px}
 :root body .app-header .app-navigation :is(a,button){font-size:15px;min-height:38px;padding-block:0}
 :root body .table{position:relative}
 :root body .hand-tools{min-height:26px}
 /* the rival's hand is backs only: smaller */
 :root body .app-main .opponent-hand-group{--handw:40px;--handh:56px;--handstep:26px;--handrank:18px}
}
/* your hand grows with the height the phone gives it */
@media (max-width:600px) and (min-height:540px) and (max-height:579px){:root body .app-main:not(.is-replay) .own-hand-group{--handw:52px;--handh:74px;--handstep:32px;--handrank:25px}}
@media (max-width:600px) and (min-height:580px) and (max-height:599px){:root body .app-main:not(.is-replay) .own-hand-group{--handw:58px;--handh:82px;--handstep:34px;--handrank:27px}}
@media (max-width:600px) and (min-height:600px) and (max-height:649px){:root body .app-main:not(.is-replay) .own-hand-group{--handw:64px;--handh:90px;--handstep:36px;--handrank:30px}}
@media (max-width:600px) and (min-height:650px) and (max-height:719px){:root body .app-main:not(.is-replay) .own-hand-group{--handw:70px;--handh:98px;--handstep:38px;--handrank:32px}}
@media (max-width:600px) and (min-height:720px) and (max-height:799px){:root body .app-main:not(.is-replay) .own-hand-group{--handw:76px;--handh:106px;--handstep:39px;--handrank:34px}}
@media (max-width:600px) and (min-height:800px){:root body .app-main:not(.is-replay) .own-hand-group{--handw:84px;--handh:118px;--handstep:38px;--handrank:37px}}
@media (max-width:389px) and (min-height:800px){:root body .app-main:not(.is-replay) .own-hand-group{--handstep:35px}}
/* eight cards must still fit across a narrow phone */
@media (max-width:374px) and (min-height:540px){:root body .app-main:not(.is-replay) .own-hand-group{--handstep:34px}}
/* the selection preview may need a second line on a narrow phone: the panel grows instead of clipping it */
:root body .table .actionbar{height:auto;min-height:64px}
/* in-app browsers that enlarge text would break the fitted layout */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* on the narrowest phones the English wordmark cannot share a line with the menu: the mark stays, the name is kept for screen readers */
@media (max-width:380px){html[lang=en] body .app-header .brand h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}

/* Policy selection follows the shared settings controls. */
.policy-field{display:flex;flex-direction:column;gap:6px;min-width:0}
#policy-status{font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}