/* ECLIPSE MINT — see DESIGN.md. Night ink, copper (action), verdigris (gain), vermilion (loss).
   Surfaces separated by tone, given material at the end of this file (質感); radius by role; one gothic family. */
:root{color-scheme:dark;
 --ink:#141210;--panel:#1e1a16;--raised:#28221c;--sunk:#100e0c;--line:#3a3229;--line-2:#56483a;
 --text:#efe8dc;--text-2:#d2c8b8;--muted:#a69a88;--dim:#857a6a;
 --copper:#c8783f;--copper-2:#dc8c52;--copper-ink:#1a120b;--verdigris:#6aa893;--verdigris-2:#2c4a41;--vermilion:#e2553f;--vermilion-2:#4a201a;--focus:#f2c46b;
 --r-s:3px;--r-m:6px;--r-l:10px;--top:56px;
 --sans:'BIZ UDPGothic','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Meiryo','Noto Sans JP',sans-serif;--serif:var(--sans);--num:var(--sans)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;background:var(--ink);color:var(--text);font:400 16px/1.7 var(--sans);overflow-x:hidden;font-variant-numeric:tabular-nums}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line-2);background:var(--raised);border-radius:var(--r-m);padding:10px 18px;font-weight:700;min-height:44px;transition:background-color .12s,border-color .12s}
button:hover:not(:disabled){background:#332b23;border-color:#7a6450}
button:disabled{opacity:.45;cursor:default}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button.primary{background:var(--copper);border-color:var(--copper);color:var(--copper-ink)}
button.primary:hover:not(:disabled){background:var(--copper-2);border-color:var(--copper-2)}
button.secondary{background:var(--verdigris-2);border-color:#3f6b5e}
button.ghost{background:transparent}
.text-button{background:none!important;border:0;color:var(--copper-2);padding:6px 0;min-height:0;font-weight:700;text-align:left}
.text-button:hover:not(:disabled){text-decoration:underline;text-underline-offset:4px}
.text-button.warn{color:var(--vermilion)}
kbd{font:700 12px var(--sans);border:1px solid currentColor;border-radius:var(--r-s);padding:0 5px;opacity:.75}
.muted{color:var(--muted)}.small{font-size:14px}.danger{color:var(--vermilion)}
.label{font-size:13px;color:var(--muted);font-weight:700}
[hidden]{display:none!important}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:16px;padding:0 max(16px,env(safe-area-inset-left));background:var(--ink);border-bottom:1px solid var(--line)}
.topbar .game-home-link{position:static;flex:none;font-size:13px;border-radius:var(--r-m);background:var(--raised);border-color:var(--line-2);box-shadow:none;backdrop-filter:none;color:var(--text)}
.topbar .game-home-link:hover{background:#332b23;border-color:#7a6450;transform:none}
.run-meta{display:flex;align-items:baseline;gap:14px;min-width:0}
.run-meta .act{font-size:18px;font-weight:700;white-space:nowrap}
.meta-text{display:flex;gap:10px;font-size:14px;color:var(--muted);white-space:nowrap}
.clock{display:flex;align-items:baseline;gap:6px}
.clock small{font-size:12px;color:var(--muted)}
.clock b{font-size:18px;font-weight:700}
.clock.late b{color:var(--vermilion)}
.mini-wallet{display:none;align-items:baseline;gap:4px;font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap}
.mini-wallet b{font-size:20px;color:var(--text)}
.mini-wallet i{font-style:normal;font-size:14px;color:var(--text-2)}
.topbar nav{margin-left:auto;display:flex;gap:4px}
.topbar nav button{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:14px;background:transparent;border-color:transparent}
.topbar nav button:hover{background:var(--raised)}
.topbar nav .pause{border-color:var(--line-2)}
.nav-icon{font-size:15px;color:var(--copper-2);width:16px;text-align:center}

main{max-width:1500px;margin:0 auto;padding:0 20px}

/* title */
.home{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding:32px 24px 16px}
.hero-copy{max-width:640px}
.hero-copy h1{display:flex;align-items:center;gap:20px;font-size:clamp(44px,5.2vw,72px);line-height:1.15;font-weight:700;margin:0 0 20px;letter-spacing:-.01em}
.eclipse-mark{position:relative;flex:none;width:.9em;height:.9em;border-radius:50%;background:var(--copper);overflow:hidden}
.eclipse-mark:after{content:'';position:absolute;width:88%;height:88%;left:26%;top:-6%;border-radius:50%;background:var(--ink)}
.hero-description{font-size:18px;line-height:1.85;color:var(--text-2);margin:0 0 16px}
.hero-description b{color:var(--text);font-weight:700}
.hero-facts{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px;color:var(--muted)}
.hero-facts li{padding-left:14px;position:relative}
.hero-facts li:before{content:'';position:absolute;left:0;top:.7em;width:6px;height:6px;background:var(--copper)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-start{min-width:200px;font-size:18px;padding:14px 28px}
.hero-note{font-size:14px;color:var(--muted);margin:14px 0 0}
.home-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px;border-top:1px solid var(--line)}
.home-stat,.home-bottom>button{padding:14px 16px 4px 0;text-align:left}
.home-stat small{display:block;font-size:13px;color:var(--muted);font-weight:700}
.home-stat b{font-size:26px;font-weight:700}
.home-stat span,.home-bottom>button span{display:block;font-size:13px;color:var(--muted);font-weight:400}
.home-stat em{font-style:normal;color:var(--text-2)}
.home-stat small .stat-mode{display:inline;font-size:inherit;color:inherit;font-weight:inherit}
#home-record{white-space:nowrap}
.home-bottom>button{background:none;border:0;border-radius:0;min-height:0}
.home-bottom>button b{font-size:16px;color:var(--copper-2)}
.home-bottom>button:hover{background:none}
.home-bottom>button:hover b{text-decoration:underline;text-underline-offset:4px}
.title-art{margin:0;justify-self:center;width:100%}
.title-art svg{display:block;height:auto;width:100%;max-width:380px;margin:0 auto}

/* play layout */
.game{display:grid;grid-template-columns:minmax(250px,340px) minmax(0,auto) minmax(250px,340px);grid-template-rows:minmax(0,1fr);gap:16px;justify-content:center;height:calc(100svh - var(--top));min-height:640px;padding:14px 0}
.col{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
.col-center{position:relative;align-items:center;justify-content:center}
.col-right{position:relative}
.panel{background:var(--panel);border-radius:var(--r-l);padding:16px 18px}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.panel-head h2{font-size:18px;font-weight:700;margin:0}
.panel-head h3,.extras h3{font-size:15px;font-weight:700;margin:0 0 8px;color:var(--text-2)}
.panel-head.small{margin-bottom:6px}
.panel-head small{font-size:13px;color:var(--muted)}

/* ledger */
.ledger-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.wallet{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:0 6px}
.wallet .label{grid-column:1/-1}
.wallet strong{font-size:48px;line-height:1.05;font-weight:700}
.wallet small{font-size:15px;color:var(--muted);font-weight:700}
.quota{text-align:right;display:flex;flex-direction:column;gap:2px}
.quota b{font-size:17px;font-weight:700}
.quota b span{font-size:24px}
.progress-track{height:8px;background:var(--sunk);border-radius:var(--r-s);overflow:hidden;margin:12px 0 6px}
.progress-track i{display:block;height:100%;width:0;background:var(--copper);transition:width .3s}
.progress-track i.full{background:var(--verdigris)}
.quota-note{font-size:15px;margin:0 0 8px;color:var(--text-2);font-weight:700}
.quota-note.ok{color:var(--verdigris)}
.quota-note.alert{color:var(--vermilion)}
.ledger-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.ledger-row .label{min-width:74px}
.period-track{display:flex;gap:6px;flex:1}
.period-track span{font-size:13px;font-weight:700;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--dim);border-radius:var(--r-s)}
.period-track span.done{color:var(--copper-ink);border-color:var(--verdigris);background:var(--verdigris)}
.period-track span.active{background:var(--copper);color:var(--copper-ink);border-color:var(--copper)}
.attempt-track{display:flex;gap:5px;flex:1}
.attempt-track i{height:12px;flex:1;border-radius:2px;background:var(--sunk);border:1px solid var(--line)}
.attempt-track i.active{background:var(--copper);border-color:var(--copper)}
.attempt-track i.used{background:var(--raised);border-color:var(--line)}
.attempt-track i.lost{position:relative;background:var(--vermilion-2);border-color:var(--vermilion)}
.attempt-track i.lost:after{content:'×';position:absolute;inset:-5px 0 0;text-align:center;font-size:12px;font-weight:700;line-height:1;color:var(--vermilion)}
.attempt-label{font-size:22px;font-weight:700;min-width:18px;text-align:right}

/* hand */
.hand-panel{flex:1;display:flex;flex-direction:column;min-height:0}
.hand{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0;flex:1 1 auto;padding:6px 4px 4px 6px;margin:-6px -4px 0 -6px}
.coin-card{--coin:#c8783f;position:relative;display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 10px;min-height:56px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--raised);font-weight:400;min-width:0}
.coin-card:hover:not(:disabled){background:#332b23;border-color:var(--line-2)}
.coin-card svg{width:42px;height:42px;flex:none}
.coin-copy{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.coin-copy .family{font-size:12px;font-weight:700;color:var(--coin)}
.coin-copy b{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coin-copy .effect{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coin-copy .effect .now,.coin-card .now{font-style:normal;font-weight:700;color:var(--verdigris);margin-right:6px}
.hand .coin-copy .family{display:none}
.coin-card .face{font-size:16px;font-weight:700;flex:none;text-align:right;line-height:1.2}
.coin-card .face small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.coin-card .level{color:var(--copper-2);font-size:13px;margin-left:4px}
.coin-card .key{position:absolute;left:-1px;top:-1px;width:18px;height:18px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-s) 0 var(--r-s) 0;color:var(--muted)}
.coin-card.selected{background:#3a2a1d;border-color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)}
.coin-card.selected .key{background:var(--copper);border-color:var(--copper);color:var(--copper-ink)}
.selected-description{flex:none;font-size:14px;color:var(--text-2);margin:10px 0;line-height:1.6}
.hand-panel .selected-description{display:none}
.launch-button{flex:none;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;font-size:19px;padding:13px 16px;margin-top:10px}

/* machine */
.machine{display:flex;flex-direction:column;padding:8px 10px 10px;border-radius:var(--r-l);background:#2a2219}
.machine-plate{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;color:var(--text-2);padding:0 4px 6px}
.screen{position:relative;border-radius:var(--r-m);overflow:hidden;background:#182022;touch-action:manipulation;container-type:inline-size}
.screen canvas{display:block;width:100%;height:100%;cursor:pointer}
#machine-flash{position:absolute;inset:0;pointer-events:none;transition:opacity .4s;background:#6aa89322;opacity:0}
#machine-flash.bust{background:#e2553f2e}
#float-message{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap}
#float-message span{display:block;font-size:24px;font-weight:700;color:var(--text);padding:8px 18px;border-radius:var(--r-m);background:var(--ink);border:2px solid var(--verdigris)}
#float-message span.bust{border-color:var(--vermilion);color:#ffd6cd}
#float-message span.bank{font-size:30px;border-color:var(--copper)}
#float-message span.edge{border-color:var(--vermilion);font-size:20px}
.shake{animation:shake var(--shake-time,.3s) ease-out}
@keyframes shake{25%{transform:translateX(var(--shake,5px))}50%{transform:translateX(calc(var(--shake,5px) * -1))}75%{transform:translateX(calc(var(--shake,5px) * .6))}}

/* selected-coin card over the pin field while idle; taps pass through */
.coin-peek{--coin:#c8783f;display:grid;position:absolute;left:4%;right:4%;top:27%;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:11px 13px 12px;border-radius:var(--r-m);background:var(--ink);border:1px solid var(--line-2);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s}
.coin-peek.show{opacity:1;visibility:visible;transition:opacity .15s}
.coin-peek svg{width:clamp(34px,13cqw,56px);height:clamp(34px,13cqw,56px);grid-row:1/3}
.coin-peek .peek-family{font-size:clamp(11px,3.6cqw,14px);font-weight:700;color:var(--coin);line-height:1.3}
.coin-peek .peek-name{font-size:clamp(15px,5.8cqw,22px);font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.coin-peek .peek-name i{font-style:normal;color:var(--copper-2);font-size:14px;margin-left:4px}
.coin-peek .peek-face{grid-row:1/3;grid-column:3;text-align:right;font-size:clamp(18px,6.4cqw,26px);font-weight:700;line-height:1.05}
.coin-peek .peek-face small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.coin-peek p{grid-column:1/-1;margin:6px 0 0;font-size:clamp(13.5px,4.7cqw,18px);line-height:1.6}
.coin-peek .peek-now{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:clamp(12px,3.9cqw,15px);color:var(--text-2)}
.coin-peek .peek-now>span:first-child{font-weight:700;color:var(--verdigris)}
.coin-peek .peek-now b{font-size:clamp(15px,5cqw,19px);color:var(--text)}
.coin-peek .peek-now .arrow{flex-basis:100%;color:var(--text)}
.coin-peek .peek-foot{grid-column:1/-1;margin-top:5px;font-size:clamp(11px,3.5cqw,13.5px);color:var(--muted)}
@container (max-width:270px){.coin-peek .peek-foot{display:none}}

.tip-bubble{position:absolute;left:0;right:0;bottom:0;z-index:5;background:var(--raised);border:1px solid var(--line-2);border-radius:var(--r-m);padding:12px 14px;box-shadow:0 8px 24px #0008;font-size:14px;line-height:1.6;display:flex;gap:10px;align-items:flex-start}
.tip-bubble b{color:var(--verdigris)}
.tip-bubble button{flex:none;padding:3px 12px;font-size:13px;min-height:32px}

/* decision */
.marks{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mark{aspect-ratio:.82;border:1px solid var(--line-2);border-radius:var(--r-s);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);background:var(--sunk);font-size:19px;font-weight:700;position:relative;min-width:0;line-height:1}
.mark small{font-size:10px;font-weight:400;margin-top:4px;color:var(--dim)}
.mark.held{color:var(--text);border-color:var(--verdigris);background:var(--verdigris-2)}
.mark.held .glyph{font-size:17px}
.mark.held small{color:var(--text-2)}
.mark.held.guard{border-width:2px}
.mark.danger{border-color:var(--vermilion)}
.ladder{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:6px}
.ladder span{font-size:12px;text-align:center;color:var(--dim);padding:2px 0;border-radius:var(--r-s);white-space:nowrap}
.ladder span.now{background:var(--verdigris);color:var(--copper-ink);font-weight:700}
.ladder span.next{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.profit{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:0 8px;margin:14px 0 2px}
.profit .label{grid-column:1/-1}
.profit strong{font-size:48px;line-height:1.05;font-weight:700}
.profit small{font-size:15px;color:var(--muted);font-weight:700}
.profit b{font-size:20px;font-weight:700;color:var(--verdigris);justify-self:end}
.next-mult{font-size:14px;color:var(--muted);margin:2px 0 12px;min-height:22px}
.next-mult b{color:var(--text)}
.bank-button{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;font-size:19px;padding:13px 14px}
.bank-note{font-size:14px;color:var(--text-2);margin:10px 0 4px;min-height:24px;line-height:1.55}
.bank-note.risk{color:var(--vermilion)}
.decision-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
.decision-links .text-button{font-size:14px}

/* extras */
.extras{flex:1;min-height:0;overflow:auto}
.extras details{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.extras summary{cursor:pointer;font-size:15px;font-weight:700;color:var(--text-2)}
.profit-lines{margin-top:6px}
.profit-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;margin:5px 0;color:var(--text-2);line-height:1.45}
.profit-line small{display:block;color:var(--muted);font-size:12px}
.profit-line b{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap}
.profit-line.total{border-top:1px solid var(--line);padding-top:6px;margin-top:8px}
.profit-empty{font-size:14px;color:var(--muted);margin:6px 0}
.extras-block{margin-bottom:14px}
.license-line{--coin:#c8783f;display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--text-2)}
.license-line svg{width:36px;height:36px;flex:none}
.license-line b{display:block;font-size:15px;color:var(--text)}
.license-block .cond,.pause-license .cond{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.pause-license{margin:4px 0 8px;padding:12px 14px;background:var(--raised);border-radius:var(--r-m)}
.relic-list{display:flex;gap:6px;flex-wrap:wrap}
.relic-chip{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border:1px solid var(--line-2);color:var(--text-2);font-size:13px;border-radius:var(--r-s);background:var(--raised)}
.relic-chip svg{width:22px;height:22px}
.relic-empty{font-size:14px;color:var(--muted);margin:0}
.event-log{font-size:13.5px;line-height:1.6;color:var(--muted)}
.event-log p{margin:4px 0}
.event-log p:first-child{color:var(--text)}

/* dialogs */
.overlay{position:fixed;z-index:40;inset:0;background:#0b0907d9;display:grid;place-items:center;padding:20px;overflow:auto}
.dialog{position:relative;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-l);width:min(960px,100%);max-height:calc(100svh - 40px);overflow:auto;padding:28px 32px;box-shadow:0 18px 48px #000a}
.dialog.narrow{width:min(600px,100%)}
.dialog h2{font-size:26px;line-height:1.35;font-weight:700;margin:0 0 6px}
.dialog .dialog-lead{color:var(--text-2);font-size:16px;margin:0 0 18px;line-height:1.75}
.dialog .dialog-lead b{color:var(--text)}
.dialog-close{position:absolute;right:12px;top:10px;border:0;background:none!important;font-size:24px;padding:2px 12px;color:var(--muted);line-height:1.2}
.dialog .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0}
.dialog .dialog-actions{display:flex;justify-content:flex-start;gap:10px;margin-top:20px;flex-wrap:wrap}
.dialog .dialog-actions button{min-width:150px;font-size:16px;padding:12px 22px}
.dialog .symbol{width:72px;height:72px;margin:0 0 8px}
.dialog .symbol svg{width:100%;height:100%}
.dialog .total{font-size:56px;font-weight:700;line-height:1.1;margin:8px 0 4px}
.dialog .total small{font-size:16px;font-weight:700;color:var(--muted)}
.dialog .total.bust{color:var(--vermilion)}
.dialog p{font-size:15px}
.tip-box{margin:0 0 16px;padding:10px 14px;background:var(--raised);border-radius:var(--r-m);font-size:15px;line-height:1.7}
.tip-box:before{content:'ヒント：';font-weight:700;color:var(--verdigris)}
.tip-box b{color:var(--text)}
.coin-card.large{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:16px;gap:6px;min-height:230px;height:100%}
.coin-card.large svg{width:60px;height:60px}
.coin-card.large .coin-copy{width:100%}
.coin-card.large .coin-copy b{font-size:19px;white-space:normal}
.coin-card.large .family{font-size:13px}
.coin-card.large .description{font-size:15px;color:var(--text-2);margin-top:6px;line-height:1.7;white-space:normal}
.coin-card.large .card-footer{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);width:100%;font-size:15px;font-weight:700}
.card-footer .pv{display:block;font-size:13.5px;color:var(--verdigris);margin-top:2px}
.card-footer .pv span,.mini-coin small span{white-space:nowrap}
.shop-item{display:flex;flex-direction:column}
.shop-item .coin-card.large{height:auto;flex:1}
.price-tag{display:block;margin-top:6px;font-size:15px;font-weight:700}
.price-tag.bought{color:var(--verdigris)}
.price-tag.short{color:var(--vermilion)}
.relic-card{--coin:#c8783f;display:grid;grid-template-columns:56px 1fr;gap:2px 12px;align-items:start;padding:14px;border:1px solid var(--line);background:var(--raised);text-align:left;border-radius:var(--r-m);min-height:0}
.relic-card svg{width:56px;height:56px;grid-row:1/4}
.relic-card h3{font-size:18px;font-weight:700;margin:0}
.relic-card .family{font-size:13px;color:var(--coin);font-weight:700}
.relic-card p{font-size:15px;color:var(--text-2);margin:2px 0 0;line-height:1.65;font-weight:400}
.settle-lines{max-width:520px;margin:12px 0 0}
.settle-line{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:15px}
.settle-line svg{width:30px;height:30px;flex:none}
.settle-line span{flex:1}
.settle-line small{color:var(--muted);font-size:13px;margin-left:6px}
.settle-line b{font-size:17px;font-weight:700}
.settle-line.sum b{color:var(--verdigris)}
.carry-note{color:var(--verdigris);font-size:15px}
.wallet-flow{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;font-size:16px;color:var(--text-2);margin:10px 0}
.wallet-flow b{font-size:24px;font-weight:700;color:var(--text)}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}
.result-grid>div{background:var(--raised);padding:12px;border-radius:var(--r-m);font-size:14px;color:var(--muted)}
.result-grid b{display:block;font-size:26px;font-weight:700;color:var(--text)}
.license-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.license{--coin:#c8783f;display:grid;grid-template-columns:1fr 64px;gap:0 10px;background:var(--raised);border:1px solid var(--line);padding:14px;text-align:left;position:relative;min-height:0;font-weight:400}
.license.selected{background:#3a2a1d;border-color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)}
/* Text stays in the left column; the emblem holds the right. A recommended card puts its badge on a row of its own above both. */
.license>*{grid-column:1}
.license svg{grid-column:2;grid-row:1/4;width:64px;height:64px}
.license.recommended svg{grid-row:2/5}
.license .family{font-size:13px;font-weight:700;color:var(--coin)}
.license h3{font-size:18px;font-weight:700;margin:2px 0 6px}
.license p{font-size:14px;color:var(--text-2);margin:0 0 4px;line-height:1.55}
.license .lock{color:var(--vermilion);font-size:13px}
.license .badge{display:block;font-size:13px;font-weight:700;color:var(--verdigris);grid-column:1/-1;grid-row:1;margin-bottom:4px}
.license .seals{grid-column:1/-1;display:flex;gap:4px;margin-top:8px;align-items:center;font-size:12px;color:var(--muted)}
.license .seals i{width:10px;height:10px;border-radius:2px;border:1px solid var(--line-2)}
.license .seals i.done{background:var(--copper);border-color:var(--copper)}
.fields{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;margin-top:16px}
.fields label{color:var(--text-2);font-size:15px;font-weight:700;display:flex;flex-direction:column;gap:6px}
.fields select{background:var(--sunk);color:var(--text);border:1px solid var(--line-2);padding:11px;border-radius:var(--r-m);min-width:0;width:100%;font-size:15px;min-height:44px}
.research-row{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding:14px 0}
.research-row div{flex:1}
.research-row h3{font-size:18px;font-weight:700;margin:0 0 2px}
.research-row p{font-size:15px;color:var(--text-2);margin:0}
.research-row .lv{font-size:20px;font-weight:700;white-space:nowrap}
.research-row button{font-size:15px;min-width:140px}
.settings-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 0;border-top:1px solid var(--line);font-size:16px;font-weight:700}
.settings-row small{display:block;font-size:13px;color:var(--muted);font-weight:400}
.settings-row input[type=range]{width:200px;accent-color:var(--copper)}
.settings-row input[type=checkbox]{accent-color:var(--copper);width:22px;height:22px}
.settings-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.settings-links button{font-size:15px;flex:1}
.tabs{display:flex;gap:0;flex-wrap:wrap;margin:14px 0 16px;border-bottom:1px solid var(--line)}
.tabs button{font-size:15px;padding:8px 14px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;min-height:44px;color:var(--text-2)}
.tabs button:hover{background:var(--raised)}
.tabs button.active{border-bottom-color:var(--copper);color:var(--text)}
.codex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.codex-entry{--coin:#c8783f;display:grid;grid-template-columns:44px 1fr;gap:0 12px;align-items:start;align-content:start;background:var(--raised);border-radius:var(--r-s);padding:10px 12px}
.codex-entry svg{width:44px;height:44px;grid-row:1/4}
.codex-entry small{font-size:12px;color:var(--coin);font-weight:700}
.codex-entry h3{font-size:16px;font-weight:700;margin:0}
.codex-entry p{color:var(--text-2);margin:2px 0 0;font-size:14px;line-height:1.6}
.codex-entry.locked{opacity:.55}
.record-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 16px}
.record-roles>div{display:flex;align-items:center;gap:10px;background:var(--raised);border-radius:var(--r-s);padding:8px 12px}
.record-roles svg{width:40px;height:40px;flex:none}
.record-roles b{display:block;font-size:15px;font-weight:700}
.record-roles small{color:var(--coin);font-size:13px;font-weight:700}
.record-head{font-size:18px;font-weight:700;margin:8px 0}
.record-list>div{display:grid;grid-template-columns:auto 1fr auto;gap:0 12px;align-items:baseline;padding:8px 4px;border-bottom:1px solid var(--line);font-size:14.5px}
.record-list span{grid-row:1/3;font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r-s);background:var(--raised);color:var(--text-2);align-self:center}
.record-list .win span{background:var(--verdigris);color:var(--copper-ink)}
.record-list small{color:var(--muted);font-size:13px}
.record-list i{font-style:normal;grid-column:3;grid-row:1/3;align-self:center;font-weight:700}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.service-grid .coin-card.large{min-height:200px}
.shop-section{margin-top:12px}
.shop-section h3{font-size:18px;font-weight:700;margin:0 0 4px}
.shop-section>p{font-size:14px;color:var(--muted);margin:0 0 10px}
.shop-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shop-actions button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:12px 16px;font-size:17px}
.shop-actions button small{font-size:13px;color:var(--text-2);font-weight:400;margin-top:2px}
.budget{display:flex;flex-wrap:wrap;gap:6px 24px;margin:4px 0 6px;font-size:15px;color:var(--text-2)}
.budget b{font-size:22px;font-weight:700;color:var(--text);margin-left:4px}
.budget .warn b{color:var(--vermilion)}
.notice{padding:10px 14px;background:var(--raised);border-radius:var(--r-m);font-size:15px;line-height:1.7}
.deck-peek{margin:6px 0 4px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--sunk);padding:10px 14px}
.deck-peek summary{cursor:pointer;font-size:16px;font-weight:700}
.deck-families{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 8px}
.deck-families span{font-size:13px;font-weight:700;color:var(--coin)}
.deck-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.mini-coin{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--r-s);background:var(--raised);text-align:left}
.mini-coin svg{width:30px;height:30px;flex:none}
.mini-coin b{display:block;font-size:14px;font-weight:700}
.mini-coin small{font-size:12px;color:var(--text-2)}
.deck-relics{font-size:13px;color:var(--muted);margin:8px 0 0}
.pause-home{margin:18px 0 0}
.pause-home a{color:var(--text-2);font-size:14px;text-underline-offset:4px}
.pause-home a:hover{color:var(--text)}

/* help */
.help-page{min-height:300px}
.help-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0}
.help-steps>div{border-top:2px solid var(--line-2);padding-top:10px}
.help-steps strong{display:none}
.help-steps h3{font-size:17px;font-weight:700;margin:0 0 4px}
.help-steps p{font-size:15px;color:var(--text-2);margin:0;line-height:1.7}
.help-figure{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start;margin:8px 0 6px}
.help-figure svg{width:100%;height:auto}
.help-figure ul{margin:0;padding-left:20px;font-size:15.5px;line-height:1.85;color:var(--text-2)}
.help-figure li b{color:var(--text)}
.mult-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:16px}
.mult-table th,.mult-table td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:center}
.mult-table th{color:var(--muted);font-size:13px;font-weight:700}
.mult-table td{font-size:18px;font-weight:700}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0}
.flow span{padding:6px 10px;background:var(--raised);border-radius:var(--r-s);font-size:15px;font-weight:700}
.flow span.key{background:var(--copper);color:var(--copper-ink)}
.flow i{color:var(--dim);font-style:normal}
.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.family-grid>div{--coin:#c8783f;display:grid;grid-template-columns:40px 1fr;gap:0 10px;padding:6px 10px;background:var(--raised);border-radius:var(--r-s)}
.family-grid svg{width:40px;height:40px;grid-row:1/3}
.family-grid h3{font-size:16px;font-weight:700;margin:0;color:var(--coin)}
.family-grid p{margin:0;font-size:14px;color:var(--text-2);line-height:1.6}
.build-lead{margin:0 0 14px;color:var(--text-2);font-size:15px;line-height:1.7}
.build-family{margin:0 0 18px}
.build-family>h3{font-size:16px;font-weight:700;margin:0 0 8px;color:var(--coin);display:flex;align-items:baseline;gap:10px}
.build-family>h3 small{font-size:13px;font-weight:400;color:var(--muted)}
.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 20px}
.build-grid>div{border-top:2px solid var(--coin,var(--line-2));padding-top:8px}
.build-grid h4{font-size:16px;font-weight:700;margin:0 0 4px;display:flex;align-items:baseline;gap:8px}
.build-grid h4 span{font-size:12.5px;font-weight:400;color:var(--muted)}
.build-grid p{margin:0;font-size:14.5px;color:var(--text-2);line-height:1.65}
.build-grid small{display:block;margin-top:6px;color:var(--muted);font-size:13px}
.key-list{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:15.5px;align-items:center;margin:10px 0}
.key-list kbd{font-size:14px;opacity:1;padding:2px 10px;justify-self:start}
.help-page p,.help-page li{font-size:15.5px;color:var(--text-2);line-height:1.8}

/* coach marks */
.coach{position:fixed;inset:0;z-index:35;pointer-events:none}
.coach-blocker{position:absolute;inset:0;pointer-events:auto}
.coach.passthrough .coach-blocker{display:none}
.coach-spot{position:fixed;border-radius:var(--r-m);box-shadow:0 0 0 9999px #0b0907c4,0 0 0 3px var(--focus);transition:left .25s,top .25s,width .25s,height .25s;pointer-events:none}
.coach-spot.none{box-shadow:0 0 0 9999px #0b0907c4;width:0!important;height:0!important}
.coach.light .coach-spot{box-shadow:0 0 0 3px var(--focus)}
.coach-bubble{position:fixed;width:min(400px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--focus);border-radius:var(--r-m);padding:16px 18px 14px;box-shadow:0 14px 40px #000c;pointer-events:auto;transition:left .25s,top .25s}
.coach-step{font-size:12px;font-weight:700;color:var(--muted);margin:0 0 4px}
.coach-bubble h3{font-size:20px;line-height:1.45;font-weight:700;margin:0 0 6px}
.coach-bubble p{font-size:15.5px;line-height:1.75;margin:0;color:var(--text-2)}
.coach-bubble p b{color:var(--text)}
.coach-bubble p em{font-style:normal;color:var(--vermilion);font-weight:700}
.coach-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px}
.coach-actions .text-button{color:var(--muted);margin-right:auto;font-size:14px}
.coach-actions button.primary{padding:9px 22px;font-size:16px}
.coach-wait{font-size:14px;color:var(--text-2);font-weight:700;margin-right:auto}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;background:var(--text);color:var(--ink);padding:12px 22px;border-radius:var(--r-m);font-size:15px;font-weight:700;box-shadow:0 8px 24px #000a;max-width:90vw}
.toast.award{background:var(--raised);color:var(--text);border:1px solid var(--line-2)}
.reduced *,.reduced *:before,.reduced *:after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* phone dock (hand chips + confirm + launch) is only shown below 900px */
.dock{display:none}

/* medium widths */
@media(max-width:1180px){.game{gap:12px}.panel{padding:14px 15px}.wallet strong,.profit strong{font-size:42px}.meta-text{display:none}.coin-copy .effect{font-size:12.5px}.home{gap:32px}}
@media(max-width:1180px) and (min-width:900px){.topbar nav .nav-label{display:none}.topbar nav button{padding:6px 10px}}

/* single column (phones, tablets portrait) */
@media(max-width:899px){
 :root{--top:52px}
 body{font-size:15px}
 .topbar{gap:8px;padding:0 10px}
 .topbar nav{gap:0}.topbar nav button{padding:6px 8px}.topbar nav .nav-label{display:none}.nav-icon{font-size:18px;width:20px}
 body.playing #codex-button,body.playing #sound-button,body.playing .topbar .game-home-link{display:none}
 .run-meta{flex:1;justify-content:flex-start;min-width:0;gap:10px}
 .run-meta .act,.meta-text{display:none}
 .mini-wallet{display:flex}
 .clock small{display:none}.clock b{font-size:17px}
 main{padding:0 10px}
 .home{grid-template-columns:1fr;gap:20px;padding:20px 6px 8px}
 .hero-copy h1{font-size:44px;gap:14px}
 .hero-description{font-size:16px}
 .hero-facts{font-size:14px}
 .hero-start{flex:1 1 100%}
 .hero-actions .ghost,.hero-resume{flex:1}
 .title-art svg{max-width:240px;margin:0}
 .home-bottom{grid-template-columns:1fr 1fr;margin-top:24px}
 .game{display:flex;flex-direction:column;height:auto;min-height:0;gap:10px;padding:10px 0 24px}
 .col{display:contents}
 .machine{order:1;align-self:center;align-items:center;padding:6px 8px 8px}
 .decision{order:2}
 .ledger{order:3;padding:12px 14px}
 .hand-panel{display:none}
 .extras{order:5;overflow:visible}
 .ledger-top{align-items:center}
 .wallet{grid-template-columns:auto auto auto}.wallet .label{grid-column:auto;margin-right:4px}
 .wallet strong{font-size:32px}
 .quota{flex-direction:row;align-items:baseline;gap:10px}.quota b{font-size:15px}.quota b span{font-size:20px}
 .ledger-row .label{min-width:0}
 .period-track span{width:24px;height:24px;font-size:12px}
 .decision{padding:12px 14px}
 .decision .bank-button{display:none}
 .mark{aspect-ratio:1;font-size:17px}.mark small{display:none}
 .ladder span{font-size:11px}
 .profit{margin:8px 0 0}.profit strong{font-size:36px}
 .next-mult{margin:0 0 8px;font-size:13px}
 .bank-note{font-size:13.5px;margin:8px 0 2px;min-height:0}
 body.playing .dock:not([hidden]){display:block;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:6px 10px calc(8px + env(safe-area-inset-bottom));background:var(--ink);border-top:1px solid var(--line-2)}
 body.playing main{padding-bottom:150px}
 .dock-hand{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 6px}
 .chip{--coin:#c8783f;position:relative;flex:1 0 58px;max-width:76px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px 4px;min-height:58px;border-radius:var(--r-m);background:var(--raised);border:1px solid var(--line);font-size:12px;font-weight:700}
 .chip svg{width:30px;height:30px}
 .chip small{font-size:10px;font-weight:400;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .chip.selected{background:#3a2a1d;border-color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)}
 .chip .key{position:absolute;left:3px;top:2px;font-size:9px;color:var(--muted)}
 .chip-value{position:absolute;right:4px;top:2px;font-size:11px;font-weight:700;color:var(--verdigris)}
 .dock-actions{display:grid;grid-template-columns:1fr auto 1.25fr;gap:8px;align-items:stretch}
 .dock-profit{display:flex;flex-direction:column;justify-content:center;line-height:1.15;padding:0 4px}
 .dock-profit small{font-size:11px;color:var(--muted);font-weight:700}
 .dock-profit b{font-size:24px;font-weight:700}
 .dock-profit i{font-size:12px;color:var(--verdigris);font-style:normal;font-weight:700}
 .dock-bank{font-size:17px;padding:10px 14px}
 .dock-bank:not(:disabled){background:var(--verdigris);border-color:var(--verdigris);color:var(--copper-ink)}
 .dock-launch{font-size:19px;padding:10px}
 .tip-bubble{position:fixed;left:10px;right:10px;bottom:156px;z-index:30}
 .overlay{padding:8px}
 .dialog{padding:24px 16px 20px;max-height:calc(100svh - 16px)}
 .dialog h2{font-size:23px}
 .dialog .dialog-lead{font-size:15px}
 .dialog .cards{grid-template-columns:1fr;gap:8px}
 .coin-card.large{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;min-height:0;padding:12px;gap:2px 12px}
 .coin-card.large svg{width:52px;height:52px;grid-row:1/3}
 .coin-card.large .coin-copy b{font-size:17px}
 .coin-card.large .description{margin-top:2px;font-size:14px}
 .coin-card.large .card-footer{grid-column:2;border:0;padding-top:2px;margin-top:0}
 .relic-card{grid-template-columns:48px 1fr;padding:12px}
 .relic-card svg{width:48px;height:48px}
 .license-grid{grid-template-columns:1fr 1fr;gap:8px}
 .license{grid-template-columns:1fr 48px;padding:12px}.license svg{width:48px;height:48px}.license h3{font-size:16px}.license p{font-size:13px}
 .fields{grid-template-columns:1fr}
 .result-grid{grid-template-columns:repeat(2,1fr)}
 .help-steps,.family-grid,.codex-grid,.service-grid,.build-grid{grid-template-columns:1fr}
 .record-roles{grid-template-columns:1fr}
 .help-figure{grid-template-columns:1fr}.help-figure svg{max-width:260px}
 .shop-actions{grid-template-columns:1fr}
 .research-row{flex-wrap:wrap;gap:8px 12px}.research-row button{min-width:0;flex:1}
 .settings-row input[type=range]{width:150px}
 .dialog .total{font-size:48px}
 .dialog .dialog-actions button{flex:1;min-width:0}
 .deck-mini{grid-template-columns:1fr 1fr}.mini-coin{padding:4px 6px;gap:6px}.mini-coin svg{width:26px;height:26px}.mini-coin b{font-size:13px}.mini-coin small{font-size:11px;display:block;line-height:1.35}
 #float-message span{font-size:19px;padding:7px 14px}#float-message span.bank{font-size:24px}
}
@media(max-width:420px){.license-grid{grid-template-columns:1fr}.hero-copy h1{font-size:38px}.mark{font-size:15px}.ladder span{font-size:10px}.wallet strong{font-size:28px}.quota b{font-size:14px}}

/* PC: title fits one screen; play screen keeps the 5-card hand unscrolled */
@media(min-width:900px){
 .home{min-height:calc(100svh - var(--top) - 40px)}
 .title-art svg{max-height:calc(100svh - var(--top) - 90px);width:auto;max-width:100%}
}
@media(min-width:900px) and (max-height:820px){.row-period{display:none}.quota-note{margin-bottom:4px}.hero-copy h1{font-size:52px;margin-bottom:14px}.hero-description{font-size:16.5px}.hero-facts{margin-bottom:20px}.home-bottom{margin-top:24px}}
@media(min-width:900px) and (max-height:760px){.wallet strong,.profit strong{font-size:40px}.panel{padding:12px 15px}.coin-card svg{width:38px;height:38px}.coin-card{padding:4px 10px}.launch-button,.bank-button{padding:11px}.game{gap:12px;padding:10px 0}.col{gap:10px}}
@media(min-width:900px) and (max-height:690px){.game{min-height:540px}.ledger{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}.ledger-top,.ledger .progress-track{grid-column:1/-1}.ledger .quota-note{margin:0}.ledger .ledger-row{margin-top:0}.ledger .ledger-row .label,.wallet .label{display:none}.ledger .attempt-track{width:84px;flex:none}.wallet strong,.profit strong{font-size:34px}.quota b span{font-size:20px}.quota-note{font-size:14px}.progress-track{margin:6px 0 4px}.panel-head{margin-bottom:6px}.hand{gap:5px}.coin-card{min-height:50px;padding:4px 10px}.coin-card svg{width:34px;height:34px}.launch-button,.bank-button{padding:10px;font-size:18px}}
@media(min-width:900px) and (max-height:620px){.hand-panel .panel-head{display:none}.coin-card{min-height:46px;padding:3px 10px}.coin-card svg{width:32px;height:32px}.coin-copy b{font-size:15px}.coin-copy .effect{font-size:12.5px}.hand{gap:4px;padding-top:6px}.panel{padding:10px 14px}.launch-button,.bank-button{padding:8px;font-size:17px}.col{gap:8px}.game{gap:10px;padding:8px 0}.hero-copy h1{font-size:44px}.hero-facts{display:none}}
@media(min-width:1600px) and (min-height:1000px){.panel{padding:20px 22px}.panel-head h2{font-size:20px}.wallet strong,.profit strong{font-size:56px}.coin-card{min-height:70px;padding:8px 12px}.coin-card svg{width:50px;height:50px}.coin-copy b{font-size:18px}.coin-copy .effect{font-size:14.5px}.hand{gap:9px}.launch-button,.bank-button{font-size:21px;padding:16px}.mark{font-size:22px}.ladder span{font-size:13px}.next-mult,.bank-note{font-size:15px}.profit-line,.event-log{font-size:14.5px}}

/* ---------- ways to play, 増築, 挑戦状 (2026-10-12) ---------- */
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.mode-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--raised);border:1px solid var(--line);padding:14px 16px;min-height:150px;font-weight:400}
.mode-card:hover:not(:disabled){border-color:var(--copper)}
.mode-card h3{font-size:19px;font-weight:700;margin:0;color:var(--text)}
.mode-card p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text-2)}
.mode-card small{margin-top:auto;padding-top:6px;font-size:13px;color:var(--verdigris);font-weight:700}
.mode-card .mode-time{font-size:13px;color:var(--muted);font-weight:700}
.mode-card.locked{opacity:1;background:var(--sunk)}
.mode-card.locked h3,.mode-card.locked p{color:var(--muted)}
.mode-card.locked small{color:var(--copper-2)}
.rule-list{margin:8px 0 12px;padding-left:1.4em;font-size:16px;line-height:1.8;color:var(--text-2)}
.rule-list li{margin:4px 0}
.expand-head{font-size:15px;font-weight:700;color:var(--copper-2);margin:22px 0 2px}
.research-row .req{font-size:13px;color:var(--muted);margin-top:2px}
.research-row .req.met{color:var(--verdigris)}
.research-row.owned h3,.research-row.owned p{color:var(--muted)}
.research-row.owned .lv{font-size:14px;color:var(--verdigris)}
.research-row .tag{font-size:13px;font-weight:700;color:var(--verdigris);margin-left:10px}
.bundle{border-top:1px solid var(--line);padding:12px 0 4px}
.bundle h3{font-size:18px;font-weight:700;margin:0 0 8px}
.bundle h3 small{font-size:13px;font-weight:400;color:var(--muted);margin-left:8px}
.bundle.locked h3{color:var(--muted)}
.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.challenge{--coin:#c8783f;display:flex;flex-direction:column;gap:4px;background:var(--raised);border-radius:var(--r-m);padding:12px 14px}
.challenge h4{font-size:16px;font-weight:700;margin:0;display:flex;justify-content:space-between;gap:8px}
.challenge .cleared{font-size:13px;color:var(--verdigris)}
.challenge .who{font-size:13px;color:var(--coin);font-weight:700}
.challenge p{margin:0;font-size:14px;line-height:1.6;color:var(--text-2)}
.challenge .goal{color:var(--text)}
.challenge button{margin-top:auto;align-self:flex-start;min-height:40px;padding:6px 16px;font-size:14px}
.challenge.done{background:var(--panel);border:1px solid var(--line)}
.mode-help section{border-top:1px solid var(--line);padding:10px 0}
.mode-help h3{font-size:17px;margin:0 0 4px}.mode-help h3 small{font-size:13px;color:var(--muted);font-weight:400;margin-left:8px}
.mode-help p{margin:0 0 4px;color:var(--text-2)}.mode-help ul{margin:0;padding-left:1.3em;color:var(--text-2);font-size:14.5px}
.collector-preview{margin:10px 0;border-left:0}
.collector-preview b{color:var(--copper-2)}
.license-block .collector-now{color:var(--text-2)}
.mark.filled{color:var(--copper-2);border-color:var(--copper);background:#3a2a1d}
.mark.sealed{color:var(--vermilion);border-color:var(--vermilion-2);background:var(--vermilion-2)}
.mark.filled small,.mark.sealed small{color:var(--text-2)}
body[data-mode="sprint"] #attempt-row,body[data-mode="sprint"] .row-period{display:none}
@media(max-width:899px){.mode-grid,.challenge-grid{grid-template-columns:1fr}.mode-card{min-height:0}}
@media(min-width:900px) and (max-width:1199px){.mode-grid,.challenge-grid{grid-template-columns:1fr 1fr}}
.collector-preview .bribe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.collector-preview .bribe small{font-size:13px;color:var(--muted)}
.owned-list{font-size:14px;color:var(--verdigris);margin:8px 0 0;line-height:1.7}
.delete-zone{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.danger-button{background:transparent;border-color:var(--vermilion);color:var(--vermilion)}
.danger-button:hover:not(:disabled){background:var(--vermilion-2)}
.danger-button.solid{background:var(--vermilion);color:var(--copper-ink)}
.danger-button.solid:hover:not(:disabled){background:#ec6a55}
.delete-list{margin:4px 0 12px;padding-left:1.3em;color:var(--text-2);line-height:1.8}
.delete-list b{color:var(--text)}
.mode-label{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 6px}
.mode-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.mode-picker button{min-height:46px;padding:4px 6px;font-size:14px;font-weight:700;line-height:1.3;background:var(--raised);border:1px solid var(--line);color:var(--text-2)}
.mode-picker button:hover{border-color:var(--line-2)}
.mode-picker button[aria-checked=true]{background:#3a2a1d;border-color:var(--copper);color:var(--text);box-shadow:inset 0 0 0 1px var(--copper)}
.mode-picker button.locked{background:var(--sunk);color:var(--dim)}
.mode-picker button.locked[aria-checked=true]{color:var(--text-2)}
.mode-picker button small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.mode-lead{font-size:15px;line-height:1.65;color:var(--text-2);margin:8px 0 18px;min-height:3.3em}
.mode-lead span{display:block;font-size:13px;color:var(--verdigris);font-weight:700}
.mode-lead .locked-note{color:var(--copper-2)}
.expand-button{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25;min-width:120px}
.expand-button small{font-size:12px;font-weight:400;color:var(--text-2)}
.hero-start:disabled{opacity:.55}
@media(max-width:899px){.mode-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.expand-button{flex:1}.home-bottom{grid-template-columns:repeat(3,minmax(0,1fr))}.home-stat small .stat-mode{display:none}}
/* Title with the game-mode picker on short or narrow PC screens: keep the picker and actions, drop the stats row (月片 is on the 増築 button). */
@media(min-width:900px) and (max-width:1180px){.mode-picker button{font-size:13px;padding:4px 3px}.mode-lead{font-size:14px}}
@media(min-width:900px) and (max-height:760px){.mode-lead{min-height:0;margin:6px 0 14px}.home-bottom{margin-top:18px}.home-stat,.home-bottom>button{padding-top:10px}}
@media(min-width:900px) and (max-height:690px){.home-bottom,.hero-note{display:none}.hero-copy h1{font-size:40px;margin-bottom:10px}.hero-description{font-size:15px;line-height:1.7;margin-bottom:12px}.mode-picker button{min-height:40px}.mode-lead{font-size:14px;margin:6px 0 12px}.home{padding-top:16px}}

/* 工房日誌 (story) */
.story-rate{background:var(--raised);border-radius:var(--r-m);padding:14px 16px;margin-bottom:16px}
.story-rate b{font-size:18px}
.story-rate .progress-track{margin:8px 0}
.story-rate p{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13.5px;color:var(--text-2)}
.story-rate small{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
/* 工房日誌: no rules or pictures, only size, space and colour. Chapters are parted by wide space; inside, a larger
   opening paragraph, then the body as indented paragraphs close together, then a space before the closing beat. */
.story-list{max-width:640px}
.chapter{margin-top:72px}
.chapter:first-child{margin-top:40px}
.chapter h3{display:flex;flex-direction:column;gap:6px;margin:0 0 24px;font-weight:700}
.chapter h3 small{display:flex;gap:12px;font-size:13px;color:var(--copper-2)}
.chapter h3 em{font-style:normal;color:var(--verdigris)}
.chapter h3 span{font-size:25px;line-height:1.4;color:var(--text)}
.chapter p{margin:.3em 0 0;font-size:16px;line-height:2;color:var(--text-2);text-indent:1em}
.chapter p.say{text-indent:0}
.chapter p.lead{margin:0 0 20px;font-size:20px;line-height:1.85;color:var(--text)}
.chapter p.close{margin-top:32px;color:var(--text)}
.chapter p.break{text-indent:0;text-align:center;margin:30px 0 26px;color:var(--muted);letter-spacing:.4em}
.chapter.locked{margin-top:14px}
.chapter:not(.locked)+.chapter.locked{margin-top:72px}
.chapter.locked h3{flex-direction:row;align-items:baseline;gap:12px;margin:0 0 2px}
.chapter.locked h3 small{color:var(--dim)}
.chapter.locked h3 span{font-size:16px;color:var(--dim)}
.chapter.locked p.cond{margin:0;text-indent:0;font-size:13px;line-height:1.6}
.chapter.locked .cond{font-size:13.5px;color:var(--muted)}
.codex-entry .lore{grid-column:2;margin-top:6px;padding-top:6px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
#codex-button.has-new{position:relative}
#codex-button.has-new::after{content:'';position:absolute;top:8px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--copper)}
@media(max-width:899px){.chapter,.chapter:not(.locked)+.chapter.locked{margin-top:56px}.chapter:first-child{margin-top:32px}.chapter.locked{margin-top:12px}}
/* 人物: the 相関図, then a card per person in order of appearance. Both fill in as 工房日誌 chapters open. */
.cast-chart{max-width:880px;margin:8px 0 6px;overflow-x:auto}
.cast-svg{display:block;width:100%;height:auto;font-family:inherit}
.rel-line{fill:none;stroke:var(--line-2);stroke-width:1.5}
.rel-line.new{stroke:var(--verdigris)}
.rel-label rect{fill:var(--panel)}
.rel-label text{fill:var(--text-2);font-size:13px}
.rel-label.new text{fill:var(--verdigris)}
.rel-node rect{fill:var(--raised);stroke:var(--c,var(--line-2));stroke-width:1.5}
.rel-node .name{fill:var(--c,var(--text));font-size:16px;font-weight:700}
.rel-node .tag{fill:var(--muted);font-size:13px}
.rel-node.new .tag{fill:var(--verdigris)}
.rel-node.hidden rect{fill:none;stroke:var(--line-2);stroke-dasharray:4 4}
.rel-node.hidden .name{fill:var(--dim);font-weight:400}
.rel-group .frame{fill:none;stroke:var(--line-2);stroke-width:1.5}
.rel-group.hidden .frame{stroke:var(--line);stroke-dasharray:4 4}
.rel-group text{fill:var(--muted);font-size:13px}
.cast-key{margin:0 0 40px;font-size:13px;color:var(--muted)}
.cast-key .scroll{display:none}
.cast-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.person{--c:var(--text);background:var(--raised);border-radius:var(--r-m);padding:14px 16px 16px}
.person h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 10px;font-weight:700}
.person h3 span{font-size:20px;color:var(--c)}
.person h3 small{font-size:13px;font-weight:400;color:var(--muted)}
.person h3 ruby{ruby-position:over}
.person h3 rt{font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--muted)}
.person ol{list-style:none;margin:0;padding:0}
.person li{display:grid;grid-template-columns:4em minmax(0,1fr);gap:0 10px;margin-top:6px;font-size:15px;line-height:1.75;color:var(--text-2)}
.person li b{font-size:13px;color:var(--copper-2);padding-top:2px}
.person li em{font-style:normal;font-size:13px;color:var(--verdigris);margin-left:8px;white-space:nowrap}
.person.locked{background:none;border:1px dashed var(--line);padding:12px 16px}
.person.locked h3{margin:0 0 2px}
.person.locked h3 span{font-size:16px;color:var(--dim)}
.person .cond{margin:0;font-size:13px;color:var(--muted)}
.person .licence{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.person .licence h4{margin:0 0 4px;font-size:13px;color:var(--muted)}
.person .licence p{margin:4px 0 0;font-size:15px;line-height:1.75;color:var(--text-2)}
.person .licence p.cond{font-size:13px;color:var(--muted)}
.cast-six{margin-top:48px}
.cast-six>p{margin:0 0 14px;font-size:15px;line-height:1.75;color:var(--text-2)}
.cast-after{margin-top:48px}
.tabs button.has-new::after{content:'';display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--verdigris);vertical-align:middle}
@media(max-width:899px){.cast-list{grid-template-columns:1fr}.cast-svg{min-width:880px}.cast-key .scroll{display:inline}.cast-six,.cast-after{margin-top:36px}}

/* 帳場の掟 (DIFFICULTY.md): the difficulty picker in setup, the rules in play, the help page */
.okite{margin-top:16px}
.okite-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px}
.okite-head h3{margin:0;font-size:17px}
.okite-head span{font-size:14px;color:var(--text-2)}
.okite-list{display:grid;grid-template-columns:1fr;gap:4px}
.okite-tier{margin:10px 0 2px;font-size:13px;font-weight:700;color:var(--copper-2)}
.okite-row{display:grid;grid-template-columns:2.2em minmax(9em,auto) 1fr;align-items:baseline;gap:2px 12px;text-align:left;padding:8px 12px;min-height:44px;font-weight:400;color:var(--muted)}
.okite-row b{font-size:18px;color:var(--dim)}
.okite-row .okite-name{font-weight:700;color:var(--text-2)}
.okite-row .okite-name em{font-style:normal;font-size:12.5px;color:var(--verdigris);margin-left:8px}
.okite-row .okite-desc{font-size:14px;line-height:1.5}
.okite-row.on b{color:var(--copper-2)}
.okite-row.on .okite-name{color:var(--text)}
.okite-row.on .okite-desc{color:var(--text-2)}
.okite-row[aria-checked=true]{border-color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)}
.okite-row:disabled .okite-name{color:var(--dim)}
.okite-mini{margin:4px 0 6px;font-size:13.5px;color:var(--text-2)}
.okite-mini summary{cursor:pointer;font-weight:700;color:var(--copper-2);min-height:28px}
.okite-mini ul{margin:4px 0 0;padding-left:1.2em}
.okite-mini li b{margin-right:8px;color:var(--text)}
.okite-help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
.okite-help section{background:var(--raised);border-radius:var(--r-m);padding:12px 14px}
.okite-help h3{margin:0 0 6px;font-size:15px;color:var(--copper-2)}
.okite-help ul{margin:0;padding-left:1.1em;font-size:14px;line-height:1.6;color:var(--text-2)}
.okite-help li b{display:block;color:var(--text)}
.price-warn,.relic-note{display:block;margin-top:4px;font-size:13px;font-weight:700;color:var(--vermilion)}
.relic-note{color:var(--muted);font-weight:400}
.bankrupt-note{margin:2px 0 0;font-size:14px;font-weight:700;color:var(--vermilion)}
.mini-wallet b.warn{color:var(--vermilion)}
@media(max-width:899px){.okite-row{grid-template-columns:2em 1fr}.okite-row .okite-desc{grid-column:2}.okite-help{grid-template-columns:1fr}}

/* ---------- 質感 (2026-10-12): materials, not effects (DESIGN.md「質感」) ----------
   The workshop at night: soot-stone floor, dark lacquered wood, copper and brass, a little grain everywhere.
   Light falls from above: a raised plate catches it on its top edge and is darker at its foot; a well is the reverse.
   No glow, no gradient text, no translucent glass, nothing that pulses. */
:root{
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
 --wood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .19' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='520' height='260' filter='url(%23w)'/%3E%3C/svg%3E");
 --plate:linear-gradient(180deg,#2f2820,#251f19);
 --plate-hi:linear-gradient(180deg,#382f26,#2b241d);
 --lacquer:linear-gradient(180deg,#231e19,#1a1612);
 --copper-metal:linear-gradient(180deg,#e7a06a 0%,#cc7c43 46%,#a65f2e 100%);
 --copper-metal-hi:linear-gradient(180deg,#f0ae79 0%,#d88b52 46%,#b56a35 100%);
 --patina:linear-gradient(180deg,#3f6c5f,#2c4a41 60%,#22392f);
 --raised-edge:inset 0 1px 0 #fff1dc14,inset 0 -1px 0 #00000052,0 1px 2px #00000070;
 --well:inset 0 2px 4px #0000008c,inset 0 -1px 0 #fff1dc0d}
body{background:var(--grain) 0 0/240px,linear-gradient(180deg,#181511 0,#110f0c 100%);background-blend-mode:soft-light,normal}
/* Panels, dialogs: lacquered wood plates */
.panel,.dialog,.coach-bubble{background:var(--grain) 0 0/240px,var(--lacquer);background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 0 #fff1dc12,inset 0 -1px 0 #00000059,0 1px 0 #00000080,0 12px 26px -16px #000000c0}
.dialog{box-shadow:inset 0 1px 0 #fff1dc14,0 24px 60px -20px #000000e0}
/* Raised cards and tiles */
.coin-card,.license,.mode-card,.relic-card,.codex-entry,.person,.story-rate,.result-grid>div,.tip-box,.notice,.record-roles>div,.pause-license,.challenge,.family-grid>div,.mini-coin,.mode-picker button,.tip-bubble,.toast.award,.chip,.service-grid>*,.flow span:not(.key){background:var(--grain) 0 0/240px,var(--plate);background-blend-mode:soft-light,normal;box-shadow:var(--raised-edge)}
.coin-card:hover:not(:disabled),.license:hover:not(:disabled),.mode-card:hover:not(:disabled),.mode-picker button:hover:not(:disabled),.chip:hover:not(:disabled){background:var(--grain) 0 0/240px,var(--plate-hi);background-blend-mode:soft-light,normal}
/* The chosen one: warmer lacquer, ringed in copper */
.coin-card.selected,.license.selected,.mode-picker button[aria-checked=true],.chip.selected{background:var(--grain) 0 0/240px,linear-gradient(180deg,#4a3522,#38281b);background-blend-mode:soft-light,normal;box-shadow:inset 0 0 0 1px var(--copper),inset 0 1px 0 #ffd9b024,0 1px 2px #00000080}
.mode-picker button.locked,.mode-card.locked,.challenge.done{background:var(--grain) 0 0/240px,linear-gradient(180deg,#191511,#141110);background-blend-mode:soft-light,normal;box-shadow:var(--well)}
/* Buttons: plates; copper and patina are metal. Pressing sinks them a pixel. */
button{background:var(--grain) 0 0/240px,var(--plate);background-blend-mode:soft-light,normal;box-shadow:var(--raised-edge);transition:background-color .12s,border-color .12s,transform .06s}
button:hover:not(:disabled){background:var(--grain) 0 0/240px,var(--plate-hi);background-blend-mode:soft-light,normal}
button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 4px #00000080}
button.primary{background:var(--grain) 0 0/240px,var(--copper-metal);background-blend-mode:soft-light,normal;border-color:#8f5226;box-shadow:inset 0 1px 0 #ffd6ae8c,inset 0 -2px 0 #6b3a1673,0 1px 2px #00000099;text-shadow:0 1px 0 #f3c39a59}
button.primary:hover:not(:disabled){background:var(--grain) 0 0/240px,var(--copper-metal-hi);background-blend-mode:soft-light,normal;border-color:#9a5a2a}
button.secondary,.dock-bank:not(:disabled){background:var(--grain) 0 0/240px,var(--patina);background-blend-mode:soft-light,normal;border-color:#4d7f70;box-shadow:inset 0 1px 0 #c8f0e033,inset 0 -2px 0 #0f1f1a80,0 1px 2px #00000099}
.dock-bank:not(:disabled){color:var(--text)}
.danger-button.solid{background:linear-gradient(180deg,#ec6a55,#d54a35 55%,#b33b29);box-shadow:inset 0 1px 0 #ffc0b066,inset 0 -2px 0 #5a1a1080,0 1px 2px #00000099}
button.ghost,.tabs button,.topbar nav button,.text-button,.dialog-close,.home-bottom>button,.danger-button:not(.solid){box-shadow:none;text-shadow:none}
button.ghost,.tabs button,.topbar nav button,.home-bottom>button,.danger-button:not(.solid){background:transparent}
.tabs button:hover,.topbar nav button:hover{background:#ffffff0a}
.danger-button:not(.solid):hover:not(:disabled){background:var(--vermilion-2)}
/* Wells: tracks, selects, slots are cut into the surface */
.progress-track,.fields select,.deck-peek,.attempt-track i,.mark,.ladder span,.period-track span{box-shadow:var(--well)}
.progress-track i{background:var(--copper-metal);box-shadow:inset 0 1px 0 #ffd6ae80}
.progress-track i.full{background:linear-gradient(180deg,#8cc6b2,#6aa893 55%,#4d8571)}
.attempt-track i.active,.period-track span.active,.flow span.key{background:var(--copper-metal);box-shadow:inset 0 1px 0 #ffd6ae80,0 1px 1px #00000080}
.period-track span.done,.ladder span.now,.mark.held,.record-list .win span{background-image:linear-gradient(180deg,#ffffff1f,#00000026);box-shadow:inset 0 1px 0 #ffffff26,0 1px 1px #00000066}
/* The board cabinet: dark wood around a recessed screen */
.machine{background:var(--wood) 0 0/520px 260px,linear-gradient(180deg,#352a1f,#231b14);background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 0 #fff1dc1a,inset 0 -2px 0 #00000080,0 2px 0 #000000a0,0 22px 34px -22px #000}
.screen::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 3px 10px #000000b0,inset 0 0 0 1px #00000099}
/* The top bar: a wooden beam */
.topbar{background:var(--wood) 0 0/520px 260px,linear-gradient(180deg,#201a14,#16120e);background-blend-mode:soft-light,normal;border-bottom-color:#00000099;box-shadow:inset 0 -1px 0 #fff1dc0d,0 2px 6px -2px #000000a0}
.topbar .game-home-link{box-shadow:var(--raised-edge)}
/* The title mark: a copper moon */
.eclipse-mark{background:radial-gradient(circle at 34% 30%,#f2b27c,#c8783f 48%,#8a4f24)}
#float-message span{background:var(--grain) 0 0/240px,var(--lacquer);background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 0 #fff1dc14,0 8px 18px -8px #000000c0}
@media(max-width:899px){
 body.playing .dock:not([hidden]){background:var(--wood) 0 0/520px 260px,linear-gradient(180deg,#221b15,#17130f);background-blend-mode:soft-light,normal;box-shadow:inset 0 1px 0 #fff1dc12,0 -4px 10px -4px #000000a0}}

/* ---------- 演出の段（EFFECTS.md）----------
   Motion only where it says what happened: a medal pressed in, money moving into the ledger, a seal pressed, a
   pip broken. No glow, no pulse, no bounce: presses go down and settle, swings die away. 演出を軽減 stops all of it. */
#fx-layer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:32}
/* Dead hooks brought back: the purse took money, the bank button is worth pressing, a window was just taken. */
#wallet.bump,#mini-wallet.bump{animation:bump .45s ease-out}
@keyframes bump{0%{color:var(--verdigris);transform:translateY(1px)}100%{transform:none}}
.bank-button.hot:not(:disabled){box-shadow:inset 0 0 0 2px #f0b383,inset 0 1px 0 #ffd6ae8c,inset 0 -2px 0 #6b3a1673,0 1px 2px #00000099}
.dock-bank.hot:not(:disabled){box-shadow:inset 0 0 0 2px #9fd6c2,inset 0 1px 0 #c8f0e033,inset 0 -2px 0 #0f1f1a80,0 1px 2px #00000099}
.mark.new{animation:press .18s ease-out}
@keyframes press{0%{transform:scale(1.12)}100%{transform:none}}
/* The stakes colour the profit from the 5th window; at seven a copper rule sets it apart. */
.decision[data-step="5"] #profit,.decision[data-step="6"] #profit,.decision[data-step="7"] #profit,.dock[data-step="5"] #dock-profit,.dock[data-step="6"] #dock-profit,.dock[data-step="7"] #dock-profit{color:var(--copper-2)}
.decision[data-step="7"] .profit{border-top:2px solid var(--copper);padding-top:8px}
/* 納付ゲージの予告: the profit on hold, hatched; verdigris once banking it reaches the dues. */
.progress-track{position:relative}
#quota-pending{position:absolute;top:0;bottom:0;left:0;width:0;background:repeating-linear-gradient(135deg,#c8783fa6 0 3px,#c8783f2e 3px 7px);transition:width .3s,left .3s}
#quota-pending.reach{background:repeating-linear-gradient(135deg,#6aa893c0 0 3px,#6aa89338 3px 7px)}
.quota-note.reach{color:var(--verdigris)}
/* An attempt lost to an edge: the pip cracks. */
.attempt-track i.lost:before{content:'';position:absolute;left:46%;top:-1px;bottom:-1px;width:1.5px;background:#14121099;transform:rotate(24deg)}
.attempt-track i.lost.fresh{animation:pipLost 1.1s ease-out}
@keyframes pipLost{0%{background:var(--copper);border-color:var(--copper)}25%{background:var(--vermilion);transform:translateY(1px)}100%{transform:none}}
/* Float words grow with the windows held and the bank's tier (type sizes from DESIGN.md: 25 / 31). */
#float-message span.land{font-size:25px;border-color:var(--copper)}
#float-message span.land.big{font-size:31px}
#float-message span.bank.tier-3,#float-message span.bank.tier-4,#float-message span.bank.tier-5{font-size:31px}
#float-message span.bank.tier-4,#float-message span.bank.tier-5{border-width:3px;outline:1px solid var(--copper);outline-offset:3px}
#float-message b.count{font-variant-numeric:tabular-nums}
#float-message span{text-align:center}
#float-message span small{display:block;margin-top:2px;font-size:16px;font-weight:700;color:var(--text-2)}
@media(max-width:899px){#float-message span small{font-size:13px}#float-message span.land{font-size:20px}#float-message span.land.big,#float-message span.bank.tier-3,#float-message span.bank.tier-4,#float-message span.bank.tier-5{font-size:25px}}
/* Settlement: the lines are written one after another; milestones get their own line. */
.settle-line.reveal{animation:lineIn .26s ease-out both;animation-delay:var(--d,0ms)}
@keyframes lineIn{from{opacity:0;transform:translateY(5px)}}
.settle-mark{margin:6px 0 0;font-size:16px;font-weight:700;color:var(--verdigris)}
.settle-mark:before{content:'';display:inline-block;width:9px;height:9px;margin-right:8px;border:2px solid currentColor;border-radius:2px;vertical-align:0}
.dialog.tier-4 .total>span,.dialog.tier-5 .total>span{color:var(--copper-2)}
/* Seals: a copper plate pressed at an angle (result, dues, chosen cards, achievements). */
.seal-stamp,.paid-stamp,.choice-stamp,.toast.award .seal{display:inline-block;font-weight:700;color:var(--copper-2);background:var(--ink);border:2px solid var(--copper);border-radius:var(--r-s);box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3px #c8783f80;line-height:1.2}
@keyframes stampIn{from{opacity:0;transform:rotate(var(--tilt,-7deg)) scale(1.35)}to{opacity:1;transform:rotate(var(--tilt,-7deg)) scale(1)}}
.dialog .symbol.sealed{position:relative}
.seal-stamp{position:absolute;right:-30px;bottom:-4px;padding:3px 8px;font-size:16px;transform:rotate(-7deg);animation:stampIn .2s ease-out .35s both}
.dialog .total{position:relative}
.paid-stamp{position:absolute;margin-left:14px;padding:2px 9px;font-size:31px;--tilt:-9deg;transform:rotate(-9deg);animation:stampIn .2s ease-out .25s both}
.choice-stamp{position:absolute;top:8px;right:10px;padding:2px 8px;font-size:13px;--tilt:-6deg;transform:rotate(-6deg);animation:stampIn .16s ease-out both;z-index:1}
.toast.award .seal{margin-right:10px;padding:1px 6px;font-size:13px;--tilt:-6deg;transform:rotate(-6deg);animation:stampIn .2s ease-out .1s both}
/* 納付: the bell swings once and dies away. */
.dialog .symbol.swing svg{transform-origin:50% 8%;animation:swing 1s ease-out}
@keyframes swing{0%{transform:rotate(0)}18%{transform:rotate(8deg)}42%{transform:rotate(-5deg)}68%{transform:rotate(2.5deg)}100%{transform:rotate(0)}}
/* A chosen card is pressed and ringed in copper; the others step back. */
.chosen{position:relative;box-shadow:inset 0 0 0 2px var(--copper),0 1px 2px #00000099!important;animation:press .18s ease-out}
.passed{opacity:.4;transition:opacity .25s}
.chosen.as-upgrade svg{filter:brightness(1.3) saturate(1.15);transition:filter .3s}
.chosen.as-remove{opacity:.35;transform:translateY(6px);transition:opacity .35s,transform .35s}
/* Screen changes without hard cuts: a new dialog comes in, a chosen card's dialog fades before the next screen,
   the overlay fades out as play resumes. 演出を軽減 makes them instant. */
.overlay:not([hidden]){animation:overlayIn .18s ease-out}
@keyframes overlayIn{from{opacity:0}}
.overlay.closing{opacity:0;transition:opacity .16s ease-in;pointer-events:none}
.dialog.enter{animation:dialogIn .22s ease-out}
@keyframes dialogIn{from{opacity:0;transform:translateY(6px)}}
.dialog.leave{opacity:0;transform:translateY(4px);transition:opacity .15s ease-in,transform .15s ease-in}
#deck-count{display:inline-block}
#deck-count.bump{animation:bump .45s ease-out}
/* 図鑑: the tabs stay at the top edge of the dialog while the entries scroll under them (top is negative because the
   sticky area starts inside the dialog's padding), and the close button stays in the corner beside them on a box of the
   same height. Both carry the panel's grain. On a phone the tabs keep to one row that scrolls sideways under the box. */
.dialog .codex-tabs{position:sticky;top:-28px;z-index:4;margin:14px -32px 16px;padding:6px 72px 0 32px;background:var(--grain) 0 0/240px,#201b17;background-blend-mode:soft-light,normal;box-shadow:0 10px 14px -12px #000000d0}
.dialog:has(.codex-tabs) .dialog-close{position:sticky;top:-28px;right:auto;float:right;z-index:5;width:64px;height:52px;margin:-28px -32px 0 8px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--grain) 0 0/240px,#201b17!important;background-blend-mode:soft-light,normal;border-radius:0 var(--r-l) 0 0}
@media(max-width:899px){
 .dialog .codex-tabs{top:-24px;margin:12px -16px 14px;padding:4px 56px 0 16px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .dialog .codex-tabs::-webkit-scrollbar{display:none}
 .dialog .codex-tabs button{flex:none;padding:8px 12px}
 .dialog:has(.codex-tabs) .dialog-close{top:-24px;width:52px;height:49px;margin:-24px -16px 0 8px}
}
/* 取り立ての夜: the period's collector comes in across the board (cut-in). A lacquer band between copper rules, the
   vermilion seal 取 stamped at its left; it slides in from the right and leaves to the left. */
.cutin{position:absolute;left:0;right:0;top:28%;z-index:6;cursor:pointer}
.cutin-band{display:flex;align-items:center;gap:16px;padding:16px 20px 17px;background:var(--grain) 0 0/240px,#1d1813f5;background-blend-mode:soft-light,normal;border-top:2px solid var(--copper);border-bottom:2px solid var(--copper);box-shadow:0 16px 30px -14px #000000f0}
.cutin-seal{flex:none;display:grid;place-items:center;width:58px;height:58px;border:3px solid var(--vermilion);border-radius:50%;color:var(--vermilion);font-size:29px;font-weight:700;line-height:1;transform:rotate(-8deg)}
.cutin-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.cutin-copy small{font-size:13px;color:var(--copper-2)}
.cutin-copy b{font-size:24px;line-height:1.35;color:var(--text)}
.cutin-copy p{margin:2px 0 0;font-size:15.5px;line-height:1.6;color:var(--text)}
.cutin-copy .cutin-next{margin-top:5px;color:var(--muted)}
.cutin.in .cutin-band{animation:cutIn .34s cubic-bezier(.2,.8,.2,1) both}
.cutin.in .cutin-seal{animation:sealIn .3s .3s cubic-bezier(.3,1.5,.5,1) both}
.cutin.out .cutin-band{animation:cutOut .24s ease-in both}
@keyframes cutIn{from{transform:translateX(100%)}}
@keyframes cutOut{to{transform:translateX(-100%);opacity:0}}
@keyframes sealIn{from{transform:rotate(-8deg) scale(1.9);opacity:0}}
body.reduced .cutin .cutin-band,body.reduced .cutin .cutin-seal{animation:none}
@media(max-width:899px){.cutin{top:22%}.cutin-band{gap:12px;padding:12px 14px 13px}.cutin-seal{width:46px;height:46px;font-size:23px}.cutin-copy b{font-size:20px}.cutin-copy p{font-size:14px}}
/* The credit and the version, small in the bottom-right corner of the title page. */
.home{position:relative}
.app-credit{position:absolute;right:24px;bottom:2px;display:flex;align-items:baseline;gap:16px;text-align:right;white-space:nowrap;pointer-events:none}
.app-credit p{margin:0;font-size:12px;line-height:1;color:var(--muted)}
.app-version{letter-spacing:.06em;font-variant-numeric:tabular-nums}
@media(max-width:899px){.app-credit{position:static;grid-column:1/-1;justify-self:end;flex-direction:column;align-items:flex-end;gap:4px;margin-top:-6px;white-space:normal}.app-credit p{line-height:1.4}}