/* 牌势 2.1 · 一张牌桌，两种操作布局。共享弹层和原有玩法组件继续复用。 */
:root{color-scheme:dark;--felt:#151121;--felt-raised:#20192f;--felt-panel:#292039;--felt-hover:#392c4e;--paper:#f6efdf;--paper-soft:#ece1cd;--paper-ink:#33263f;--paper-muted:#75677c;--brass:#e9c782;--brass-bright:#f2d9a5;--line:rgba(248,235,213,.13);--line-soft:rgba(248,235,213,.07);--text:#f5eedf;--text-secondary:#c4b9cf;--text-muted:#a79ab5;--red:#bf435d;--mint:#9bcfb8;--blue:#a1c8ed;--shadow:0 8px 24px #08051026;--radius:20px;--ease:cubic-bezier(.2,0,0,1);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--felt);color:var(--text);line-height:1.5}html{min-height:100%;background:var(--felt)}[hidden]{display:none!important}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{border:1px solid transparent;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}a{color:inherit;text-decoration:none}button,span,strong{font-variant-numeric:tabular-nums}h1,h2,h3,p{margin:0}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}small{font-size:13px}em{font-style:normal}.full{width:100%}
.ambient { position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 48% 28%,#65467b26,transparent 65%); }
.ambient-two,.noise-overlay { display:none; }
.app-shell { position:relative; max-width:1560px; margin:auto; padding:16px 24px 20px; }
.topbar { display:flex; align-items:center; gap:20px; height:52px; margin-bottom:20px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-emblem { position:relative; display:grid; place-items:center; width:34px; height:44px; border-radius:7px; background:var(--paper); color:var(--paper-ink); font:30px Georgia,serif; transform:rotate(-7deg); }
.brand-emblem b { position:absolute; right:-6px; top:-8px; color:var(--brass); font-size:18px; }
.brand-wordmark strong { font-size:24px; font-weight:800; letter-spacing:.04em; }
.brand-period { color:var(--brass); }
.brand-wordmark small { display:none; }
.topbar-center { margin-left:auto; color:var(--text-secondary); font-size:15px; }
.topbar-actions { display:flex; align-items:center; gap:16px; }
.topbar-cash { display:flex; align-items:center; gap:4px; color:var(--brass-bright); font-size:20px; }
.coin-token { font-size:16px; }
.icon-btn,.save-alert { display:grid; place-items:center; min-width:44px; min-height:44px; border-radius:12px; background:var(--felt-panel); color:var(--text); font-size:20px; }
.save-alert { padding:8px 12px; font-size:13px; color:var(--brass); }
.menu-notice { box-shadow:0 0 0 2px var(--brass); }
.game-grid { display:grid; grid-template-columns:168px minmax(0,1fr); gap:24px; align-items:stretch; }
.panel { min-width:0; }
.overview-panel { display:flex; flex-direction:column; align-items:flex-start; padding:24px 0; }
.journey-bar { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:32px; }
.eyebrow,.mini-kicker,.micro-label { font-size:13px; color:var(--text-muted); }
.journey-bar strong { font-size:18px; font-weight:600; }
.text-button,.tiny-action { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:44px; min-width:44px; padding:8px 12px; border-radius:10px; background:transparent; color:var(--text-secondary); font-size:13px; white-space:nowrap; }
.journey-bar .text-button { padding-left:0; color:var(--brass); }
.stage-heading { display:flex; flex-direction:column; gap:4px; }
.stage-heading small,.desktop-score>span,.desktop-score small { color:var(--text-muted); font-size:13px; }
.stage-heading>strong { font-size:34px; font-weight:600; overflow-wrap:anywhere; }
.desktop-score { display:flex; flex-direction:column; margin-top:24px; }
.desktop-score>strong { font-size:40px; line-height:1.25; color:var(--brass-bright); overflow-wrap:anywhere; }
.progress-shell { width:100%; height:4px; margin:20px 0; border-radius:4px; background:#ffffff12; overflow:hidden; }
.progress-fill { height:100%; background:var(--brass); border-radius:4px; }
.goal-ribbon { display:none; }
.boss-alert { min-height:44px; width:100%; text-align:left; padding:12px; border:1px solid #e9c78226; border-radius:12px; background:#e9c7820a; color:var(--text-secondary); font-size:13px; }
.boss-alert strong { display:block; color:var(--brass); margin-bottom:4px; }
.overview-foot { display:flex; flex-direction:column; gap:4px; margin-top:auto; padding-top:32px; color:var(--text-muted); font-size:13px; }
.overview-foot strong { color:var(--text-secondary); font-size:20px; }
.save-indicator { margin-top:16px; color:var(--text-muted); font-size:13px; }
.save-indicator.warning { color:var(--brass); }
.play-panel { position:relative; display:flex; flex-direction:column; min-height:min(750px,calc(100dvh - 112px)); padding:24px; border:1px solid var(--line-soft); border-radius:32px; background:radial-gradient(ellipse at 50% 40%,#49335e44,transparent 70%),var(--felt-raised); }
.rack-area { display:flex; align-items:center; justify-content:center; gap:12px; }
.joker-rack { display:flex; gap:12px; padding:4px 4px 12px; min-width:0; overflow-x:auto; scrollbar-width:thin; }
.joker-card { position:relative; flex:0 0 72px; width:72px; height:100px; padding:0; overflow:hidden; border:1px solid #ffffff22; border-radius:9px; background:var(--felt-panel); box-shadow:0 3px 0 #08051033; color:var(--paper-ink); }
.joker-art { position:relative; height:74px; background:var(--felt-hover); }
.joker-illustration { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; }
.joker-glyph { position:absolute; inset:0; display:grid; place-items:center; color:var(--brass-bright); font:40px Georgia,serif; }
.joker-top,.joker-bottom i { display:none; }
.joker-bottom { display:flex; align-items:center; justify-content:center; height:24px; padding:0 2px; white-space:nowrap; background:var(--paper); font-size:13px; font-weight:600; }
.joker-bottom span { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.empty-slot { width:20px; flex:0 0 20px; align-self:center; height:40px; border-bottom:2px solid #e9c78224; }
.rack-manage { flex:none; flex-direction:column; padding:8px; color:var(--text-muted); }
.rack-manage>span:last-child { display:none; }
.center-table { position:relative; isolation:isolate; display:grid; place-items:center; flex:1; min-height:184px; padding:20px 12px; overflow:hidden; }
.table-watermark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:190px/1 Georgia,serif; color:#f6efdf05; pointer-events:none; }
.table-interior { position:relative; width:min(560px,100%); text-align:center; z-index:1; }
.table-cards { display:flex; justify-content:center; align-items:center; gap:8px; height:92px; margin-bottom:16px; }
.table-card { display:flex; flex-direction:column; align-items:center; justify-content:center; width:50px; height:72px; border-radius:7px; box-shadow:0 2px 0 #b8a58b; background:var(--paper); color:var(--paper-ink); font-size:23px; line-height:1.15; }
.table-card.red { color:var(--red); }
.table-card strong { font-size:21px; }
.table-card.dim-card { opacity:.5; }
.idle-card { width:48px; height:68px; border:1px solid #e9c78238; border-radius:7px; background:repeating-linear-gradient(45deg,#e9c78206 0 3px,transparent 3px 7px),var(--felt-panel); box-shadow:0 3px 0 #08051033; }
.idle-card:first-child { transform:translate(16px,4px) rotate(-15deg); }
.idle-card:last-child { transform:translate(-16px,4px) rotate(15deg); }
.combo-name { font-size:23px; line-height:1.3; color:var(--text-muted); font-weight:500; }
.has-selection .combo-name { color:var(--paper); }
.preview-score { display:none; flex-direction:column; align-items:center; min-height:44px; min-width:120px; max-width:100%; padding:0 12px; margin:4px auto 0; background:transparent; color:var(--brass-bright); }
.has-selection .preview-score { display:flex; }
.preview-score strong { max-width:100%; font-size:52px; font-weight:650; line-height:1.1; letter-spacing:-.04em; }
.combo-details { margin-top:4px; color:var(--text-muted); font-size:13px; }
.rule-correction { color:var(--brass); font-size:13px; margin-top:8px; }
.last-result { display:inline-flex; justify-content:center; align-items:center; min-height:44px; max-width:100%; padding:8px; margin:8px auto 0; background:transparent; color:var(--text-muted); font-size:13px; }
.has-selection .last-result { display:none; }
.last-result strong { color:var(--brass); margin:0 4px; }
.hand-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-height:44px; }
.hand-title { margin-right:auto; color:var(--text-muted); font-size:13px; }
.hand-toolbar-right { display:flex; align-items:center; gap:4px; }
.hand-shelf { padding:12px 0 4px; }
.hand-cards { display:flex; align-items:flex-end; justify-content:center; gap:6px; padding:12px 4px 8px; }
.playing-card { position:relative; flex:1; min-width:0; max-width:100px; height:136px; padding:0; border:2px solid transparent; border-radius:10px; background:linear-gradient(155deg,#fffaf0,var(--paper-soft)); box-shadow:0 3px 0 #b8a58b,0 6px 12px #08051033; color:#30273c; text-align:left; transform:rotate(var(--card-tilt,0deg)); transform-origin:50% 100%; }
.playing-card.red { color:var(--red); }
.playing-card.black { color:#30273c; }
.card-corner,.card-bottom { position:absolute; display:flex; flex-direction:column; align-items:center; line-height:1.05; }
.card-corner { left:8px; top:8px; }
.card-corner strong { font-size:24px; font-weight:650; }
.card-corner span { font-size:18px; }
.card-bottom { bottom:8px; right:8px; transform:rotate(180deg); }
.card-bottom strong { font-size:18px; }
.card-bottom span { font-size:15px; }
.card-center { position:absolute; left:53%; top:53%; transform:translate(-50%,-50%); font-size:40px; line-height:1; }
.selected-check { display:none; position:absolute; right:-5px; top:-7px; width:22px; height:22px; border-radius:50%; background:var(--brass); color:var(--paper-ink); font-size:14px; place-items:center; }
.playing-card.selected { border-color:var(--brass); background:#fff8e5; box-shadow:0 0 0 2px #e9c78244,0 8px 16px #08051044; }
.playing-card.selected .selected-check { display:grid; }
.playing-card.not-scoring { opacity:.6; }
.enhancement-chip { position:absolute; bottom:8px; left:8px; color:#9e651d; font-size:16px; }
.enh-holo { background:linear-gradient(150deg,#fff6e7,#e8e4f5,#ffe1ea); }
.enh-prism { background:linear-gradient(150deg,#f6eec8,#d2ebe4,#e2d3ec); }
.action-row { display:flex; justify-content:center; gap:12px; padding-top:16px; }
.action-btn { display:flex; align-items:center; justify-content:center; gap:12px; min-height:52px; padding:12px 24px; border-radius:12px; font-size:17px; font-weight:600; }
.primary-action { min-width:224px; background:var(--brass); color:var(--paper-ink); }
.secondary-action { min-width:160px; background:var(--felt-panel); border-color:var(--line); color:var(--text-secondary); }
.action-btn strong { font-size:15px; font-weight:500; }
.action-btn em { display:none; }
.btn-symbol,.action-arrow { font-size:22px; }
.action-arrow { margin-left:12px; }
.desktop-keys { display:block; text-align:center; margin-top:12px; color:var(--text-muted); font-size:13px; }
.tutorial-guide { display:flex; align-items:center; justify-content:center; gap:12px; min-height:44px; margin:4px 0; }
.tutorial-guide strong { color:var(--mint); font-size:15px; font-weight:500; }
.tutorial-guide .text-button { color:var(--text-muted); padding:8px; }
.guide-card { outline:2px dashed var(--mint); outline-offset:4px; }
.guide-card:after { content:attr(data-guide); position:absolute; left:50%; bottom:6px; transform:translateX(-50%); padding:2px 6px; border-radius:4px; white-space:nowrap; background:var(--paper-ink); color:var(--paper); font-size:13px; }
.guide-action { outline:2px solid var(--mint); outline-offset:3px; }
.insight-panel { position:fixed; z-index:52; top:16px; right:16px; bottom:16px; display:block; width:min(360px,calc(100vw - 32px)); padding:24px; border-radius:24px; background:var(--felt-panel); overflow-y:auto; overscroll-behavior:contain; visibility:hidden; pointer-events:none; transform:translateX(calc(100% + 20px)); }
.insight-panel.open { visibility:visible; pointer-events:auto; transform:translateX(0); }
.insight-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.insight-heading>div { display:flex; flex-direction:column; gap:4px; }
.insight-heading strong { font-size:20px; font-weight:600; }
.insight-heading .micro-label { display:none; }
.handbook-close { width:44px; height:44px; border-radius:12px; background:var(--felt-hover); color:var(--text); font-size:18px; }
.handbook { display:grid; gap:4px; }
.handbook-row { display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:8px; border-radius:8px; background:transparent; color:var(--text-secondary); text-align:left; font-size:14px; }
.handbook-row.active { background:#e9c78214; color:var(--brass); }
.handbook-rank { font-size:13px; color:var(--text-muted); }
.handbook-value { margin-left:auto; font-size:13px; white-space:nowrap; }
.handbook-level { font-size:13px; color:var(--brass); }
.insight-footer { margin-top:24px; padding-top:16px; border-top:1px solid var(--line-soft); }
.breakdown-small { margin-top:8px; color:var(--text-secondary); font-size:14px; }
.detail-link { min-height:44px; padding:8px 0; color:var(--brass); background:transparent; font-size:13px; }
.drawer-scrim { position:fixed; inset:0; z-index:51; background:#08051099; visibility:hidden; opacity:0; pointer-events:none; }
.drawer-scrim.open { visibility:visible; opacity:1; pointer-events:auto; }
.overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;background:#0b0814cc;overflow-y:auto;overscroll-behavior:contain}.modal{position:relative;width:min(680px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--paper-ink);border-radius:24px;box-shadow:0 16px 64px #08051066;color-scheme:light;border:1px solid transparent}.modal.large{width:min(960px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 24px 16px;position:sticky;top:0;z-index:5;background:var(--paper)}.modal-head h2{font-size:26px;letter-spacing:-.03em;font-weight:650;line-height:1.3}.modal .mini-kicker{color:var(--paper-muted);margin-bottom:8px}.modal-close{flex:none;display:grid;place-items:center;width:44px;height:44px;background:#33263f0b;color:var(--paper-muted);border-radius:50%;font-size:26px}.modal-body{padding:0 24px 24px}.modal-subtitle{font-size:14px;color:var(--paper-muted);line-height:1.75;margin-bottom:20px}.modal-primary,.modal-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600}.modal-primary{background:var(--paper-ink);color:var(--paper)}.modal-primary span{margin-left:auto}.modal-secondary{background:#33263f0b;border:1px solid #33263f12;color:var(--paper-ink)}.modal-footer{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px}.modal-list{display:grid;gap:12px;padding:16px;background:#33263f05;border-radius:12px;font-size:14px}.plain-link{display:flex;align-items:center;justify-content:center;min-height:44px;margin:8px auto 0;padding:8px 12px;background:transparent;color:var(--paper-muted);font-size:13px;text-decoration:underline;text-underline-offset:4px}.mini-note{font-size:13px;color:var(--paper-muted);line-height:1.75;margin-top:12px}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.danger-text{color:var(--red)}
.intro-modal{display:grid;grid-template-columns:.95fr 1fr;width:min(920px,100%);overflow-x:hidden}.intro-banner{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:36px 32px 24px;background:radial-gradient(ellipse at 40% 100%,#583f7166,transparent 70%),#251b38;color:var(--paper)}.intro-kicker{font-size:13px;letter-spacing:.08em;color:var(--brass)}.intro-banner h1{font-family:"Songti SC","STSong",Georgia,serif;font-size:88px;font-weight:600;letter-spacing:-.08em;margin:32px 0 8px;line-height:1.1}.intro-banner h1 span{font-size:36px;color:var(--brass);display:inline-block;vertical-align:top;margin:12px 0 0 12px}.intro-banner>p{font-size:18px;letter-spacing:.12em;color:var(--text-secondary)}.intro-art{position:relative;height:230px;margin-top:auto;isolation:isolate}.intro-orbit{position:absolute;left:-10%;right:-10%;top:12%;bottom:-20%;border:1px solid #e9c78222;border-radius:50%;transform:rotate(-25deg)}.intro-orbit:after{content:"";position:absolute;inset:20px;border:1px solid #e9c78211;border-radius:50%}.intro-card{position:absolute;left:50%;top:32px;width:102px;height:146px;border-radius:12px;background:var(--paper);color:#33263f;display:grid;place-items:center;font:60px Georgia,serif;box-shadow:0 8px 24px #08051033;border:1px solid #fff7e955;transform-origin:center 120%}.intro-card:before{content:attr(data-rank);position:absolute;left:12px;top:8px;font-size:24px}.intro-card:nth-of-type(2){transform:translateX(-70%) rotate(-22deg)}.intro-card:nth-of-type(3){transform:translateX(-22%) rotate(-1deg);color:var(--red)}.intro-card:nth-of-type(4){transform:translateX(25%) rotate(20deg)}.intro-lower{display:flex;flex-direction:column;justify-content:center;padding:40px 32px}.intro-lower h3{font-size:27px;font-weight:650;line-height:1.4;letter-spacing:-.03em;margin:8px 0 12px}.intro-lower>p{font-size:15px;line-height:1.8;color:var(--paper-muted)}.intro-features{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 24px}.intro-features span{font-size:13px;padding:4px 8px;background:#33263f07;border-radius:6px;color:var(--paper-muted)}.hub-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.hub-actions button:last-child{grid-column:1/-1;background:transparent}.hub-actions button{padding:10px 8px}.hub-actions button span{font-size:13px;opacity:.6}.resume-note{color:var(--paper-muted);font-size:13px;margin-top:8px}
.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.starter-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px 20px;text-align:left;border-radius:16px;background:var(--paper-soft);color:var(--paper-ink);border:1px solid #33263f14;min-height:220px}.starter-symbol{font:44px Georgia,serif;color:#805d3c}.starter-card strong{font-size:20px}.starter-card>span:not(.starter-symbol){font-size:14px;color:var(--paper-muted)}.starter-card small{margin-top:auto;font-size:13px;color:var(--paper-muted)}.challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.challenge-card{position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:20px 16px;border-radius:16px;min-height:200px;background:var(--paper-soft);color:var(--paper-ink)}.challenge-symbol{font:32px Georgia,serif;color:#805d3c}.challenge-number{position:absolute;top:20px;right:16px;font:16px Georgia,serif;color:var(--paper-muted)}.challenge-card strong{font-size:17px}.challenge-card>span:not(.challenge-symbol):not(.challenge-number){font-size:14px;color:var(--paper-muted)}.challenge-card small{font-size:13px;margin-top:auto;color:var(--paper-muted)}
.chapter-route{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.chapter-route>div{padding:16px 8px;border:1px solid #33263f12;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px;color:var(--paper-muted)}.chapter-route strong{font-size:25px;color:var(--paper-ink)}.chapter-route .current{background:var(--paper-soft);border-color:#805d3c55}.chapter-route small{font-size:13px}.boss-preview{display:flex;gap:16px;align-items:flex-start;background:var(--paper-soft);border-radius:16px;padding:20px;margin-bottom:24px}.boss-preview>span{font-size:32px;color:#805d3c;line-height:1.2}.boss-preview p{font-size:14px;color:var(--paper-muted);margin-top:8px}
.rules-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.rules-block h3{font-size:18px;margin-bottom:12px}.rules-block p{font-size:14px;line-height:1.8;color:var(--paper-muted);margin-top:8px}.hand-help-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hand-help-list>div{padding:16px;border-radius:12px;background:var(--paper-soft)}.hand-help-list strong{font-size:15px}.hand-help-list p{font-size:13px;color:var(--paper-muted);margin:4px 0 12px}.hand-example{display:flex;gap:4px;flex-wrap:wrap}.example-card{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:40px;padding:4px;background:#fffaf0;border:1px solid #33263f0b;border-radius:5px;font:15px Georgia,serif;color:#33263f}.example-card.red{color:var(--red)}.large-example{margin:20px 0}.large-example .example-card{min-width:52px;min-height:68px;font-size:22px}.deck-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin:12px 0 20px}.deck-suit-label{font-size:14px;font-weight:600}.mini-playing-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:6px;background:#fffaf0;min-height:48px;font-size:15px;box-shadow:0 0 0 1px #33263f0d;color:var(--paper-ink)}.mini-playing-card.red{color:var(--red)}.mini-playing-card i{position:absolute;font-size:13px;top:0;right:0}.used-card{opacity:.35}.log-list{display:grid;gap:8px}.log-item{display:flex;justify-content:space-between;gap:16px;font-size:14px;padding:12px;border-radius:8px;background:#33263f06}.log-item strong{white-space:nowrap;font-size:14px}.log-item.boss{background:#b78d3f14}.final-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.final-sum strong{font-size:32px}.detail-joker{display:flex;gap:24px;align-items:center}.detail-joker>.joker-card{width:112px;flex:0 0 112px;height:154px}.detail-joker .joker-art{height:126px}.detail-joker h3{font-size:24px;margin-bottom:12px}.detail-joker p{font-size:14px;color:var(--paper-muted);margin-top:8px}.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.collection-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid #33263f10;border-radius:12px;text-align:left;background:#fffaf044;color:var(--paper-ink)}.collection-card strong{font-size:16px}.collection-card>span:not(.card-mini-symbol){font-size:14px;color:var(--paper-muted);line-height:1.65}.card-mini-symbol{font:32px Georgia,serif;color:#805d3c}.collection-card.undiscovered{background:#33263f04;border-style:dashed}.record-summary{display:flex;gap:32px;padding:16px;background:var(--paper-soft);border-radius:16px;margin-bottom:20px}.record-summary>div{display:flex;flex-direction:column;gap:4px}.record-summary span{font-size:13px;color:var(--paper-muted)}.record-summary strong{font-size:30px}.record-summary small{font-size:13px;font-weight:400}.recent-runs{display:grid;gap:8px;margin-bottom:24px}.recent-runs>div{display:flex;justify-content:space-between;gap:16px;font-size:14px;padding-bottom:8px;border-bottom:1px solid #33263f0b}.recent-runs strong{white-space:nowrap}.account-summary{display:flex;gap:16px;align-items:center;margin-bottom:20px}.account-avatar{display:grid;place-items:center;background:var(--paper-soft);width:60px;height:60px;border-radius:16px;font:32px Georgia,serif}.account-summary strong{font-size:20px}.account-summary p{font-size:14px;color:var(--paper-muted);margin-top:4px}.conflict-list{margin-top:24px}.conflict-list h3{font-size:18px}.conflict-list>p{font-size:14px;color:var(--paper-muted);margin:8px 0 12px}.conflict-choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;width:100%;margin-top:8px;border-radius:12px;background:var(--paper-soft);color:var(--paper-ink);text-align:left;font-size:14px}.ranking-list{margin:0;padding-left:28px}.ranking-list li{padding:12px 0 12px 8px;border-bottom:1px solid #33263f12;font-size:15px}.ranking-list li>strong{float:right;text-align:right}.ranking-list small{display:block;font-size:13px;color:var(--paper-muted);font-weight:400}.empty-note{padding:24px 16px;border-radius:12px;background:var(--paper-soft);font-size:14px;line-height:1.8}.card-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.pick-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:76px;border-radius:8px;background:#fffaf0;box-shadow:0 0 0 1px #33263f12;color:var(--paper-ink)}.pick-card strong{font:22px Georgia,serif}.pick-card>span{font-size:23px;line-height:1}.pick-card.red{color:var(--red)}.pick-card small{position:absolute;right:4px;top:2px;font-size:13px;color:#9e651d}.suit-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.market-scene { width:min(1080px,100%); padding:28px; border-radius:28px; background:var(--felt-raised); color:var(--paper); color-scheme:dark; }
.market-head { display:flex; align-items:center; gap:12px; padding-bottom:24px; }
.market-head h2 { font-size:24px; letter-spacing:-.03em; font-weight:600; }
.market-wallet { margin-left:auto; color:var(--brass-bright); font-size:25px; }
.market-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:32px; align-items:start; }
.market-stock { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:16px; }
.market-card { display:flex; flex-direction:column; gap:12px; align-items:center; min-width:0; padding:8px; background:transparent; color:var(--paper); border-radius:16px; border:1px solid transparent; }
.market-card[aria-pressed=true] { background:#e9c7820b; border-color:#e9c78266; }
.market-card>.joker-card { width:100%; max-width:132px; height:auto; aspect-ratio:5/7; flex:auto; pointer-events:none; }
.market-card .joker-art { height:calc(100% - 28px); }
.market-card .joker-bottom { height:28px; }
.market-card-price { color:var(--brass); font-size:18px; }
.market-card.is-bought { opacity:.5; }
.market-details { display:flex; flex-direction:column; gap:12px; min-height:218px; padding:20px; background:var(--felt); border:1px solid var(--line-soft); border-radius:20px; }
.market-details h3 { font-size:22px; font-weight:600; }
.market-details p { color:var(--text-secondary); font-size:15px; line-height:1.6; }
.market-details .market-effect { color:var(--paper); }
.market-details .market-buy { margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.market-primary { min-height:48px; padding:12px 20px; border-radius:12px; background:var(--brass); color:var(--paper-ink); font-size:15px; font-weight:600; }
.market-secondary { min-height:44px; padding:10px 16px; border-radius:12px; background:var(--felt-panel); color:var(--text-secondary); border:1px solid var(--line); font-size:14px; }
.market-upgrades { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.market-upgrade { display:flex; align-items:center; gap:12px; flex:1; min-width:160px; min-height:60px; padding:12px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--text-secondary); text-align:left; }
.market-upgrade[aria-pressed=true] { border-color:var(--brass); color:var(--paper); }
.market-upgrade>span:first-child { color:var(--brass); font-size:24px; }
.market-upgrade strong { font-size:14px; font-weight:500; }
.market-upgrade>span:last-child { margin-left:auto; color:var(--brass); font-size:15px; }
.market-lineup { display:flex; gap:8px; flex-wrap:wrap; padding-top:8px; }
.market-lineup button { min-width:44px; min-height:44px; padding:8px 12px; border-radius:8px; background:var(--felt-panel); color:var(--text-secondary); font-size:13px; }
.market-lineup .new-ability { color:var(--brass); box-shadow:inset 0 0 0 1px var(--brass); }
.market-tools { display:flex; gap:12px; align-items:center; margin-top:24px; padding-top:16px; border-top:1px solid var(--line-soft); }
.market-next { margin-left:auto; }
.market-next small { display:block; margin-bottom:8px; color:var(--text-muted); text-align:right; font-size:13px; }
.market-status { color:var(--mint); font-size:14px; }
.market-tutorial .market-layout { display:flex; flex-direction:column; align-items:center; gap:20px; }
.market-tutorial .market-stock { width:180px; display:flex; justify-content:center; margin-inline:auto; }
.market-tutorial .market-card { width:180px; }
.market-tutorial .market-card>.joker-card { max-width:160px; }
.market-tutorial .market-card-price { display:none; }
.market-tutorial .market-card.is-bought { opacity:1; }
.market-tutorial .market-details { width:min(360px,100%); min-height:0; padding:0; background:transparent; border:0; text-align:center; align-items:stretch; }
.market-tutorial .market-details h3 { display:none; }
.market-tutorial .market-details .market-effect { font-size:18px; }
.market-tutorial .market-lineup { justify-content:center; }
.market-tutorial .market-tools { justify-content:center; border:0; margin-top:12px; }
.market-tutorial .market-next { margin:0; width:min(360px,100%); }
.market-tutorial .market-next small { text-align:center; }
.market-tutorial .market-secondary { border-color:transparent; background:transparent; }
.preview-formula { display:flex; align-items:center; justify-content:center; gap:16px; padding:20px 0; color:var(--paper-ink); font-size:28px; }
.preview-formula small { display:block; font-size:13px; color:var(--paper-muted); text-align:center; }
.menu-status { display:flex; justify-content:space-between; gap:12px; color:var(--paper-muted); font-size:13px; margin-top:12px; }
.toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translateX(-50%); opacity:0; pointer-events:none; max-width:calc(100vw - 32px); width:max-content; padding:12px 20px; border-radius:12px; box-shadow:var(--shadow); background:var(--paper); color:var(--paper-ink); font-size:14px; text-align:center; transition:opacity 150ms ease-out; }
.toast.visible { opacity:1; }
.score-fx { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.score-fx-banner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--felt-raised); color:var(--brass-bright); animation:scoreFade 380ms ease-out both; }
.fx-label { font-size:22px; }
.fx-number { font-size:48px; letter-spacing:-.04em; }
.fx-effects { color:var(--mint); font-size:14px; }
.triggered { box-shadow:0 0 0 2px var(--brass)!important; }
.sr-only { position:absolute; clip:rect(0,0,0,0); width:1px; height:1px; overflow:hidden; white-space:nowrap; }
@keyframes scoreFade { 0% { opacity:0; } 20%,80% { opacity:1; } 100% { opacity:0; } }
@keyframes dealIn { from { opacity:.2; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (hover:hover) {
  button:not(:disabled):hover { filter:brightness(1.06); }
  .text-button:not(:disabled):hover { color:var(--paper); background:#ffffff08; }
  .playing-card:not(:disabled):hover { border-color:var(--brass); }
  .market-card:not(:disabled):hover { background:#e9c7820b; }
  .starter-card:hover,.challenge-card:hover { box-shadow:inset 0 0 0 1px #805d3c66; }
}
@media (prefers-reduced-motion:no-preference) {
  button { transition:scale 150ms ease-out,background-color 150ms ease-out,opacity 150ms ease-out; }
  button:not(:disabled):active { scale:.96; }
  .playing-card { transition:transform 150ms var(--ease),box-shadow 150ms var(--ease),opacity 150ms ease-out; }
  .playing-card.selected { transform:translateY(-10px) rotate(0); }
  .card-enter { animation:dealIn 180ms ease-out both; }
  .insight-panel { transition:transform 220ms var(--ease),visibility 220ms var(--ease); }
  .drawer-scrim { transition:opacity 180ms ease-out,visibility 180ms ease-out; }
}
@media (prefers-reduced-motion:reduce) {
  .score-fx-banner { animation-duration:100ms; }
  .playing-card { transform:none; }
  .intro-orbit { transform:none; }
}
@media (min-width:1200px) {
  .game-grid { grid-template-columns:168px minmax(0,1fr) 224px; }
  .insight-panel { position:static; width:auto; padding:24px 0 0; background:transparent; border-radius:0; visibility:visible; pointer-events:auto; transform:none; transition:none; overflow:visible; z-index:auto; }
  .handbook-close,#handbookBtn { display:none; }
  .handbook-row { gap:6px; padding:8px 4px; }
  .handbook-rank { display:none; }
}
@media (min-width:761px) and (max-width:1199px) {
  .app-shell { padding:16px; }
  .game-grid { grid-template-columns:144px minmax(0,1fr); gap:16px; }
  .play-panel { padding:20px 16px; }
  .playing-card { height:124px; }
  .card-center { font-size:32px; }
  .card-bottom { display:none; }
  .card-corner { left:6px; top:6px; }
  .card-corner strong { font-size:21px; }
}
@media (max-width:760px), (pointer:coarse) and (max-width:1024px) and (max-height:520px) {
  .app-shell { padding:8px 12px max(12px,env(safe-area-inset-bottom)); min-height:100dvh; display:flex; flex-direction:column; }
  .topbar { height:44px; min-height:44px; margin-bottom:8px; gap:12px; }
  .brand { gap:6px; }
  .brand-emblem { width:24px; height:32px; font-size:22px; border-radius:5px; }
  .brand-emblem b { font-size:14px; right:-4px; top:-6px; }
  .brand-wordmark strong { font-size:19px; }
  .topbar-center { font-size:13px; }
  .topbar-actions { gap:12px; }
  .topbar-cash { font-size:18px; }
  .icon-btn { background:transparent; }
  .save-alert { position:fixed; top:60px; right:12px; z-index:45; background:var(--felt-panel); }
  .game-grid { display:flex; flex:1; flex-direction:column; gap:8px; }
  .overview-panel { padding:0; display:block; }
  .journey-bar,.stage-heading,.desktop-score,.overview-foot,.save-indicator { display:none; }
  .goal-ribbon { display:flex; align-items:baseline; gap:8px; font-size:14px; color:var(--text-muted); }
  .goal-ribbon>strong { font-size:26px; line-height:1; font-weight:600; color:var(--brass-bright); }
  .goal-caption { margin-left:auto; font-size:13px; }
  .progress-shell { margin:8px 0 0; height:3px; }
  .boss-alert { margin-top:8px; padding:8px 12px; line-height:1.45; }
  .boss-alert strong { display:inline; margin-right:8px; }
  .play-panel { flex:1; min-height:0; border:0; border-radius:0; background:transparent; padding:0; }
  .rack-area { justify-content:flex-start; gap:4px; }
  .joker-rack { flex:1; gap:8px; padding:4px 4px 8px; scrollbar-width:none; }
  .joker-card { flex-basis:56px; width:56px; height:72px; border-radius:7px; }
  .joker-art { height:46px; }
  .joker-glyph { font-size:32px; }
  .joker-bottom { height:24px; font-size:13px; }
  .joker-rack.rack-full .joker-card { flex-basis:calc((100% - 40px)/5); width:calc((100% - 40px)/5); min-width:44px; }
  .empty-slot { flex-basis:8px; width:8px; height:24px; }
  .rack-manage { padding:4px; font-size:13px; }
  .center-table { flex:1; min-height:100px; padding:8px; }
  .table-watermark { font-size:130px; }
  .combo-name { font-size:19px; }
  .table-cards { height:72px; margin-bottom:12px; }
  .table-card { width:40px; height:56px; font-size:20px; }
  .table-card strong { font-size:18px; }
  .idle-card { width:40px; height:56px; }
  .preview-score strong { font-size:36px; }
  .preview-score { min-height:60px; margin:2px auto 0; }
  .combo-details { margin-top:2px; }
  .rule-correction { margin-top:4px; }
  .last-result { margin:0 auto; }
  .tutorial-guide { justify-content:space-between; gap:8px; margin:0; }
  .tutorial-guide strong { font-size:14px; }
  .tutorial-guide .text-button { font-size:13px; padding:8px; }
  .hand-toolbar { min-height:44px; gap:0; }
  .hand-toolbar-right { gap:0; margin-left:auto; }
  .hand-toolbar .text-button { padding:8px; }
  .hand-title { font-size:13px; }
  .hand-shelf { padding:4px 0 0; }
  .hand-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 8px; min-height:0; padding:4px 2px 8px; }
  .playing-card { width:100%; max-width:none; height:94px; min-height:76px; transform:none; border-radius:9px; }
  .card-corner { left:7px; top:6px; }
  .card-corner strong { font-size:23px; }
  .card-corner span { font-size:17px; }
  .card-center { left:61%; top:57%; font-size:34px; }
  .card-bottom { display:none; }
  .enhancement-chip { bottom:4px; left:7px; font-size:15px; }
  .action-row { gap:8px; padding-top:8px; }
  .action-btn { min-width:0; min-height:52px; gap:8px; padding:12px; font-size:16px; }
  .primary-action { flex:1.45; }
  .secondary-action { flex:1; }
  .action-arrow { margin-left:4px; }
  .desktop-keys { display:none; }
  .insight-panel { top:12px; right:12px; bottom:12px; width:calc(100vw - 24px); padding:20px; }
  .overlay{padding:12px}.modal{max-height:calc(100dvh - 24px);border-radius:20px}.modal-head{padding:20px 20px 12px;gap:12px}.modal-head h2{font-size:23px}.modal-body{padding:0 20px 20px}.modal-footer{gap:8px;margin-top:20px}.modal-footer>button{flex:1;padding:10px 12px}.modal-primary,.modal-secondary{min-height:48px;font-size:14px;padding:12px 16px}.intro-modal{display:flex;flex-direction:column;width:min(440px,100%)}.intro-banner{padding:24px 24px 0;min-height:242px}.intro-kicker{font-size:13px}.intro-banner h1{font-size:64px;margin:12px 0 8px;position:relative;z-index:2}.intro-banner h1 span{font-size:24px;margin:8px 0 0 8px}.intro-banner>p{font-size:16px;letter-spacing:.06em;max-width:160px;position:relative;z-index:2}.intro-art{position:absolute;right:8px;top:48px;width:155px;height:190px;margin:0}.intro-card{width:76px;height:112px;font-size:42px;top:32px}.intro-card:before{font-size:18px;left:8px;top:6px}.intro-orbit{top:0;bottom:-12px;left:-24%;right:-24%}.intro-lower{padding:24px}.intro-lower h3{font-size:24px;margin:4px 0 8px}.intro-lower>p{font-size:14px}.intro-features{margin:16px 0;gap:6px}.intro-features span{font-size:13px;padding:4px 6px}.intro-lower .mini-kicker{font-size:13px}.hub-actions{gap:8px}.hub-actions button{font-size:14px}.starter-grid{grid-template-columns:1fr;gap:12px}.starter-card{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:16px;min-height:120px}.starter-symbol{grid-row:1/4;align-self:center;font-size:32px}.starter-card strong{font-size:18px}.starter-card small{font-size:13px}.challenge-grid{grid-template-columns:1fr 1fr;gap:12px}.challenge-card{min-height:196px;padding:16px 12px}.challenge-card strong{font-size:17px}.challenge-card>span:not(.challenge-symbol):not(.challenge-number){font-size:14px}.challenge-number{right:12px;top:16px;font-size:14px}.challenge-card small{font-size:13px}.rules-two{grid-template-columns:1fr;gap:20px}.hand-help-list{grid-template-columns:1fr;gap:12px}.hand-help-list>div{padding:16px}.hand-example{gap:6px}.example-card{min-width:36px;font-size:16px}.deck-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.mini-playing-card{min-height:52px;font-size:15px}.detail-joker{gap:16px;align-items:flex-start}.detail-joker>.joker-card{width:80px;height:112px;flex:0 0 80px}.detail-joker .joker-art{height:84px}.detail-joker h3{font-size:22px}.collection-grid{grid-template-columns:1fr 1fr}.collection-card{padding:12px}.collection-card strong{font-size:16px}.collection-card>span:not(.card-mini-symbol){font-size:14px}.recent-runs>div{flex-wrap:wrap;gap:4px}.result-hero{padding:4px 0 16px}.result-hero h2{font-size:25px}.result-points{font-size:40px}.chapter-route{gap:8px}.chapter-route strong{font-size:22px}.boss-preview{padding:16px;gap:12px}.card-picker{grid-template-columns:repeat(5,1fr);gap:8px}.pick-card{min-height:72px}.menu-grid{gap:8px}.menu-grid button{padding:12px;font-size:14px}.toast{bottom:calc(88px + env(safe-area-inset-bottom));font-size:14px}.insight-panel{top:12px;bottom:12px;right:12px;width:calc(100vw - 24px);padding:20px}.fx-number{font-size:36px}.fx-label{font-size:20px}
  .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .market-scene { padding:16px; border-radius:24px; }
  .market-head { padding-bottom:12px; }
  .market-head h2 { font-size:21px; }
  .market-wallet { font-size:23px; }
  .market-layout { display:flex; flex-direction:column; gap:16px; }
  .market-catalog { width:100%; }
  .market-stock { gap:4px; }
  .market-card { padding:6px; gap:8px; border-radius:12px; }
  .market-card>.joker-card { border-radius:8px; }
  .market-card .joker-bottom { font-size:13px; }
  .market-card-price { font-size:16px; }
  .market-details { width:100%; min-height:152px; padding:16px; gap:8px; border-radius:16px; }
  .market-details h3 { font-size:18px; }
  .market-details p { font-size:14px; line-height:1.5; }
  .market-details .market-buy { margin-top:4px; }
  .market-upgrades { margin-top:12px; gap:8px; }
  .market-upgrade { min-width:0; padding:10px 8px; gap:6px; }
  .market-upgrade>span:first-child { font-size:20px; }
  .market-upgrade strong { font-size:13px; }
  .market-tools { flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:12px; }
  .market-secondary { padding:10px 12px; }
  .market-next { flex-basis:100%; margin:4px 0 0; }
  .market-next small { text-align:left; margin-bottom:8px; }
  .market-next .market-primary { width:100%; }
  .market-tutorial .market-layout { gap:12px; }
  .market-tutorial .market-stock { width:144px; }
  .market-tutorial .market-card { width:144px; }
  .market-tutorial .market-details { padding:0; min-height:0; }
  .market-tutorial .market-details .market-effect { font-size:16px; }
  .market-tutorial .market-tools { margin-top:8px; }
  .market-tutorial .market-next small { text-align:center; }
  .preview-formula { gap:12px; font-size:24px; }
  .toast { top:calc(56px + env(safe-area-inset-top)); bottom:auto; font-size:14px; }
}
@media (max-width:760px) and (max-height:700px), (pointer:coarse) and (max-width:1024px) and (max-height:520px) {
  .app-shell { padding-top:4px; }
  .topbar { margin-bottom:4px; }
  .joker-card { height:60px; }
  .joker-art { height:34px; }
  .joker-glyph { font-size:28px; }
  .joker-rack { padding-top:4px; padding-bottom:4px; }
  .center-table { min-height:76px; padding:4px; }
  .preview-score strong { font-size:30px; }
  .preview-score { min-height:48px; }
  .combo-name { font-size:17px; }
  .table-cards { display:none; }
  .playing-card { height:78px; }
  .hand-cards { gap:8px; }
  .market-tutorial .market-stock { width:112px; }
  .market-tutorial .market-card { width:112px; }
}
@media (pointer:coarse) and (max-width:1024px) and (max-height:520px) {
  .hand-cards { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .market-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:20px; }
  .market-next { flex-basis:auto; margin-left:auto; }
  .market-tutorial .market-layout { flex-direction:row; justify-content:center; gap:24px; }
  .market-tutorial .market-catalog { width:144px; flex:none; }
}
@media (max-width:375px) {
  .brand-emblem { display:none; }
  .topbar { gap:8px; }
  .topbar-actions { gap:8px; }
  .modal-head { padding:16px 16px 12px; }
  .modal-body { padding:0 16px 16px; }
}
@media (forced-colors:active) {
  .playing-card,.modal,.market-card,.panel,.action-btn { border:1px solid CanvasText; }
  .playing-card.selected,.market-card[aria-pressed=true] { outline:3px solid Highlight; }
  .progress-fill { background:Highlight; }
}