:root { --ink:#1d1712; --cream:#f1e6d0; --paper:#fbf7ee; --gold:#bd8b3f; --line:rgba(72,48,25,.18); --red:#ae3930; --felt:#153f38; --felt-dark:#0d302b; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 50% -10%,#fffdf7 0,#f5ead7 40%,#e5d4b8 100%); font-family:"Noto Serif SC",serif; }
button { font:inherit; cursor:pointer; }
.page-shell { width:min(1440px,100%); margin:auto; padding:25px 42px 34px; }
.site-header { height:46px; display:flex; align-items:center; border-bottom:1px solid var(--line); gap:18px; }
.brand { text-decoration:none; color:var(--ink); font-size:22px; letter-spacing:.2em; font-weight:900; }
.brand span { color:var(--red); }
.site-header p { margin:0; font-size:12px; letter-spacing:.15em; opacity:.6; }
.text-button { margin-left:auto; border:0; background:none; color:#6b5944; font-size:13px; padding:8px 0; }
.text-button:hover { color:var(--red); }
.hero { display:flex; justify-content:space-between; align-items:end; padding:48px 3px 34px; }
.eyebrow { margin:0 0 10px; font-family:"Plus Jakarta Sans",sans-serif; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:15px; font-size:clamp(42px,5vw,70px); line-height:1; letter-spacing:.16em; font-weight:900; }
.intro { color:#5f5042; line-height:1.85; font-size:15px; }
.hero-rule { display:flex; align-items:baseline; gap:7px; padding:12px 0 6px; color:#6d5c48; border-bottom:2px solid var(--gold); }
.hero-rule span { font-size:13px; } .hero-rule strong { font-family:"Plus Jakarta Sans",sans-serif; font-size:38px; line-height:1; color:var(--ink); } .hero-rule em { font-style:normal; font-size:12px; }
.game-layout { display:grid; grid-template-columns:minmax(160px,.58fr) minmax(520px,2.1fr) minmax(200px,.78fr); gap:22px; align-items:stretch; }
.side-panel { min-height:520px; padding:24px 20px; border:1px solid var(--line); background:rgba(255,252,245,.52); }
.panel-heading { display:flex; justify-content:space-between; align-items:center; padding-bottom:15px; border-bottom:1px solid var(--line); font-size:13px; }
.panel-heading strong { color:var(--red); font-size:12px; }
.storage-cards { display:flex; flex-wrap:wrap; gap:7px; align-content:flex-start; min-height:310px; padding:18px 0; }
.mini-pair { display:flex; margin-right:4px; } .mini-pair .card { margin-right:-19px; transform:scale(.52); transform-origin:top left; } .mini-pair { width:49px; height:57px; }
.panel-note { color:#776653; font-size:12px; line-height:1.8; }
.table-wrap { min-width:0; } .table-frame { position:relative; height:520px; padding:18px; border:1px solid #73552d; background:#b48a4e; box-shadow:0 12px 28px rgba(63,39,14,.15), inset 0 0 0 4px #d7bb87; }
.table-felt { position:relative; width:100%; height:100%; overflow:hidden; background:radial-gradient(ellipse at center,#21594e 0%,var(--felt) 57%,var(--felt-dark) 100%); border:1px solid rgba(244,221,162,.7); }
.table-felt:before,.table-felt:after { content:""; position:absolute; inset:16px; border:1px solid rgba(240,214,157,.38); border-radius:50%; pointer-events:none; } .table-felt:after { inset:27% 35%; border-radius:50%; }
.compass-mark { position:absolute; z-index:2; color:#896936; font-size:13px; font-weight:700; } .compass-mark.north { top:0; left:50%; transform:translateX(-50%); } .compass-mark.south { bottom:0; left:50%; transform:translateX(-50%); } .compass-mark.east { right:0; top:50%; transform:translateY(-50%); } .compass-mark.west { left:0; top:50%; transform:translateY(-50%); }
.table-caption { text-align:center; color:#76624c; font-size:12px; letter-spacing:.14em; margin:10px 0 0; }
.station { position:absolute; z-index:3; width:95px; height:120px; display:flex; align-items:center; justify-content:center; }
.station-n { left:50%; top:4%; transform:translateX(-50%); }.station-ne { right:13%; top:13%; }.station-e { right:4%; top:50%; transform:translateY(-50%); }.station-se { right:13%; bottom:13%; }.station-s { left:50%; bottom:4%; transform:translateX(-50%); }.station-sw { left:13%; bottom:13%; }.station-w { left:4%; top:50%; transform:translateY(-50%); }.station-nw { left:13%; top:13%; }
.station-name { position:absolute; top:-18px; width:100%; text-align:center; color:#f0d9aa; font-size:11px; letter-spacing:.1em; }.station-count { position:absolute; bottom:-16px; font-family:"Plus Jakarta Sans",sans-serif; color:rgba(240,217,170,.7); font-size:10px; }.station-lucky { position:absolute; top:-36px; color:#f4c266; font-size:10px; white-space:nowrap; }
.card { position:relative; width:68px; height:96px; flex:0 0 auto; border-radius:5px; background:#fffdf7; border:1px solid #d4c4aa; box-shadow:2px 3px 4px rgba(5,28,20,.35); padding:7px; color:#171411; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; transition:transform .18s ease, box-shadow .18s ease; }
.card.red { color:var(--red); }.card .rank { display:block; font-size:16px; line-height:14px; }.card .suit { font-size:14px; }.card-rank-large { position:absolute; inset:28px 0 0; text-align:center; font-size:29px; }.card.back { padding:0; background:repeating-linear-gradient(45deg,#eadbad 0 3px,#9b613b 3px 5px); border:4px solid #f5e6bb; outline:1px solid #733d29; }.card.back:after { content:"命"; position:absolute; inset:12px; display:grid; place-items:center; border:1px solid rgba(255,241,192,.8); color:#ffeabe; font-family:"Noto Serif SC",serif; font-size:28px; }
.station .back { position:absolute; transform:translate(9px,-7px); }.station .active-card { position:relative; z-index:3; }.station .active-card.can-select,.center-card.can-select,.hand-card.can-select { outline:2px solid #edbd66; outline-offset:3px; animation:glow 1.2s ease-in-out infinite; cursor:pointer; }.station .active-card:hover,.center-card:hover,.hand-card:hover { transform:translateY(-5px) rotate(-1deg); }.card.is-selected { outline:3px solid #f5d17c; outline-offset:4px; box-shadow:0 0 0 8px rgba(245,209,124,.2),2px 3px 4px rgba(5,28,20,.35); }
@keyframes glow { 50% { box-shadow:0 0 0 5px rgba(238,187,91,.2),2px 3px 4px rgba(5,28,20,.35); } }
.center-pile { position:absolute; z-index:4; left:50%; top:38%; width:120px; height:125px; transform:translate(-50%,-50%); }.center-pile:empty:after { content:"中央牌叠"; position:absolute; top:52px; width:100%; text-align:center; color:rgba(242,220,171,.6); font-size:11px; letter-spacing:.12em; }.center-card { position:absolute; left:26px; top:12px; }.center-card:first-child { transform:translate(-10px,10px) rotate(-2deg); }.center-card:last-child { z-index:2; }.center-card:first-child:last-child { transform:translate(0,0); }
.hand-zone { position:absolute; z-index:5; left:50%; top:51%; width:86px; height:84px; transform:translateX(-50%); }.hand-zone:empty { display:none; }.hand-label { position:absolute; left:50%; top:-18px; width:130px; transform:translateX(-50%); color:rgba(242,220,171,.78); text-align:center; font-size:10px; letter-spacing:.1em; white-space:nowrap; }.hand-card { position:absolute; width:52px; height:74px; left:13px; top:4px; border-width:3px; }.hand-card.back:after { inset:8px; font-size:22px; }.hand-card.can-select:hover { transform:translateY(-5px) rotate(-1deg) !important; }
.table-seal { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); color:rgba(244,220,165,.25); text-align:center; font-size:31px; line-height:1.25; letter-spacing:.22em; }
.action-panel { display:flex; flex-direction:column; }.action-panel h2 { margin-bottom:10px; font-size:24px; letter-spacing:.08em; }.status-copy { min-height:67px; color:#6b5948; font-size:13px; line-height:1.8; }.choice-area { min-height:108px; padding:12px; border-left:2px solid var(--gold); background:rgba(237,217,178,.34); color:#694f30; font-size:12px; line-height:1.75; }
.primary-button { width:100%; margin-top:auto; padding:13px 15px; border:0; background:var(--red); color:#fff9ed; font-weight:700; letter-spacing:.08em; box-shadow:0 4px 0 #77261e; }.primary-button:hover { background:#c14a3e; }.primary-button:disabled { cursor:not-allowed; opacity:.38; box-shadow:none; }.legend { display:flex; gap:14px; margin-top:24px; color:#816b53; font-size:11px; }.legend span { display:flex; align-items:center; gap:5px; }.legend i { display:inline-block; width:10px; height:14px; border:1px solid #92724b; }.legend-up { background:#fffdf7; }.legend-down { background:repeating-linear-gradient(45deg,#eadbad 0 2px,#9b613b 2px 3px); }
.rules-strip { display:flex; justify-content:center; align-items:center; gap:16px; padding-top:26px; color:#76624c; font-size:12px; }.rules-strip i { height:4px; width:4px; background:var(--gold); border-radius:50%; }
.result-dialog { width:min(620px,calc(100% - 30px)); max-height:calc(100vh - 30px); overflow:auto; border:0; padding:34px; color:var(--ink); text-align:center; background:#fbf5e8; box-shadow:0 24px 80px rgba(30,20,8,.38); }.result-dialog::backdrop { background:rgba(15,28,24,.7); backdrop-filter:blur(4px); }.result-topline { color:var(--gold); font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:10px; letter-spacing:.2em; }.result-dialog h2 { margin:9px 0 6px; font-size:38px; letter-spacing:.16em; }.lucky-result { color:#6f5d48; }.lucky-result strong { color:var(--red); font-size:20px; }.fortune-grid { display:grid; grid-template-columns:repeat(4,1fr); margin:25px 0 16px; border-top:1px solid var(--line); border-left:1px solid var(--line); }.fortune-item { min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.fortune-item span { color:#806a50; font-size:13px; }.fortune-item strong { color:var(--red); font-family:"Plus Jakarta Sans",sans-serif; font-size:32px; }.fortune-item small { color:#806a50; font-size:10px; }.result-note { color:#776653; font-size:12px; }
.game-record { margin:20px 0 0; border-top:1px solid var(--line); text-align:left; }.game-record summary { padding:16px 0 12px; color:#5f472e; cursor:pointer; font-weight:700; font-size:14px; letter-spacing:.06em; }.game-record summary::marker { color:var(--gold); }.record-intro { margin:0 0 12px; color:#806a50; font-size:11px; line-height:1.7; }.record-list { border-top:1px solid var(--line); }.record-fortune { padding:13px 0; border-bottom:1px solid var(--line); }.record-heading { display:grid; grid-template-columns:24px 1fr auto; align-items:baseline; gap:8px; }.record-heading strong { color:var(--red); font-size:18px; }.record-heading span,.record-heading em { color:#806a50; font-size:11px; font-style:normal; }.record-heading em { color:#9b6831; white-space:nowrap; }.record-pairs { display:grid; gap:7px; margin:10px 0 0 32px; }.record-pair { display:flex; align-items:center; justify-content:space-between; gap:12px; }.record-cards { display:flex; gap:5px; }.record-cards span { min-width:34px; padding:3px 5px; border:1px solid rgba(105,79,48,.27); border-radius:2px; color:#32261c; text-align:center; font-family:"Plus Jakarta Sans",sans-serif; font-size:11px; font-weight:800; }.record-cards span.red { color:var(--red); }.record-pair small { color:#8c7962; font-size:10px; text-align:right; }.record-empty { margin:9px 0 0 32px; color:#8c7962; font-size:11px; }
@media (max-width:1000px) { .game-layout { grid-template-columns:1fr 250px; }.storage-panel { display:none; }.table-frame { height:540px; } }
@media (max-width:720px) { .page-shell { padding:17px 14px 25px; }.hero { padding:34px 3px 24px; align-items:start; }.hero-rule { display:none; }.game-layout { display:flex; flex-direction:column; }.table-frame { height:min(118vw,500px); padding:12px; }.station { transform:scale(.78); }.station-n,.station-s { transform:translateX(-50%) scale(.78); }.station-e,.station-w { transform:translateY(-50%) scale(.78); }.action-panel { min-height:315px; }.choice-area { min-height:92px; }.rules-strip { flex-wrap:wrap; gap:8px; }.result-dialog { padding:28px 18px; }.fortune-grid { margin-top:20px; } }