.room-chat,.rules-guide{font-family:"MiSans","PingFang SC","Microsoft YaHei",sans-serif;color:#ece4d2;font-size:14px;line-height:1.6}
.rules-guide button{font:inherit;cursor:pointer;border:1px solid #76705d;border-radius:6px;background:#253b3e;color:#ece4d2;padding:7px 12px}
.rules-guide button:disabled{opacity:.5;cursor:default}
.room-chat :focus-visible,.rules-guide :focus-visible,#rules-open:focus-visible{outline:2px solid #f0d595;outline-offset:3px}
/* Room chat: a round button that opens a small sheet in the Settings style
   (dark sheet, faint border, pixel title). New messages peek beside the button. */
.room-chat[hidden],.room-chat [hidden]{display:none!important}
.room-chat{--c-sheet:#141d1f;--c-line:rgba(236,228,210,.28);--c-faint:rgba(236,228,210,.1);--c-muted:#a9aea6;--c-gold:#c9a25a;--c-gold-shadow:#7c5d27;--c-teal:#3f7d76;
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(96px,calc(env(safe-area-inset-bottom) + 80px));z-index:180;display:flex;align-items:center;justify-content:flex-end;gap:8px;pointer-events:none}
.room-chat button{font:inherit;cursor:pointer;color:#ece4d2}
.room-chat>*{pointer-events:auto}
.chat-toggle{position:relative;width:48px;height:48px;padding:0;display:grid;place-items:center;border:2px solid var(--c-line);border-radius:50%;background:var(--c-sheet);box-shadow:0 4px 0 #0a1011,0 8px 20px #0008}
.chat-toggle:hover{border-color:var(--c-gold)}.chat-toggle:active{transform:translateY(3px);box-shadow:0 1px 0 #0a1011}
.chat-toggle svg{width:22px;height:22px;fill:none;stroke:#e9c46a;stroke-width:2;stroke-linejoin:round}
.chat-unread{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;background:#d0583f;color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--c-sheet)}
.chat-peek{max-width:min(240px,calc(100vw - 96px));display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:7px 12px;border:1px solid var(--c-line);border-radius:12px 12px 4px 12px;background:var(--c-sheet);box-shadow:0 6px 18px #0009;text-align:left;font-size:14px;line-height:1.4}
.chat-peek b{font-size:11px;font-weight:400;color:var(--c-muted)}.chat-peek span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.chat-peek.in{animation:chat-peek 4s ease both}
@keyframes chat-peek{0%{opacity:0;transform:translateX(8px)}6%,85%{opacity:1;transform:none}100%{opacity:0}}
.chat-panel{width:min(340px,calc(100vw - 24px));max-height:min(460px,70dvh);box-sizing:border-box;display:flex;flex-direction:column;border:2px solid var(--c-line);border-radius:16px;background:var(--c-sheet);box-shadow:0 18px 60px #000a;overflow:hidden;animation:chat-open .16s ease-out}
@keyframes chat-open{from{opacity:0;transform:translateY(8px) scale(.98)}}
.chat-head{display:flex;align-items:center;gap:2px;padding:6px 6px 6px 16px;border-bottom:1px solid var(--c-faint)}
.chat-head strong{flex:1;font-family:AuctionPixel,"MiSans","PingFang SC",sans-serif;font-weight:400;font-size:18px;letter-spacing:.12em;color:#f3e4bf}
.chat-icon{width:40px;height:40px;padding:0;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;font-size:18px;line-height:1}
.chat-icon:hover{background:#ffffff14}
.chat-icon svg{width:20px;height:20px;fill:none;stroke:var(--c-muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chat-mute[aria-pressed=true] svg{stroke:#e06a52}
.chat-log{list-style:none;margin:0;padding:12px 14px 4px;flex:1;min-height:60px;height:260px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;gap:3px}
.chat-message{max-width:82%;align-self:flex-start;display:flex;flex-direction:column;align-items:flex-start;overflow-wrap:anywhere}
.chat-message.first{margin-top:8px}.chat-message.first:first-child{margin-top:0}
.chat-message.self{align-self:flex-end;align-items:flex-end}
.chat-name{display:none;margin:0 4px 2px;font-size:11px;color:var(--c-muted)}
.chat-message.first:not(.self) .chat-name{display:block}
.chat-bubble{margin:0;padding:7px 11px;border-radius:14px;background:#263336;white-space:pre-wrap;line-height:1.45}
.chat-message.first:not(.self) .chat-bubble{border-top-left-radius:4px}
.chat-message.self .chat-bubble{background:var(--c-teal);color:#f3eee4}
.chat-message.self.first .chat-bubble{border-top-right-radius:4px}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:24px 16px;text-align:center}
.chat-empty b{font-size:15px;font-weight:600;color:#ece4d2}.chat-empty span{font-size:12px;color:var(--c-muted)}
.chat-empty:not([hidden])~.chat-form{margin-top:auto}
.chat-panel:has(.chat-empty:not([hidden])) .chat-log{display:none}
.chat-form{display:flex;align-items:flex-end;gap:8px;padding:10px 10px 12px;border-top:1px solid var(--c-faint)}
.chat-form textarea{flex:1;min-width:0;height:40px;max-height:96px;overflow-y:hidden;scrollbar-width:thin;box-sizing:border-box;resize:none;font:inherit;font-size:16px;line-height:1.4;color:#f6f0e4;background:#0c1314;border:1px solid var(--c-line);border-radius:20px;padding:9px 14px}
.chat-form textarea:focus{border-color:var(--c-gold);outline:0}
.chat-form textarea::placeholder{color:#7b847e}
.chat-send{flex:none;width:40px;height:40px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--c-gold);box-shadow:0 3px 0 var(--c-gold-shadow)}
.chat-send svg{width:18px;height:18px;fill:#1d160b;stroke:#1d160b;stroke-width:1.5;stroke-linejoin:round;margin-left:-2px}
.chat-send:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--c-gold-shadow)}
.chat-send:disabled{filter:grayscale(.6) brightness(.7);cursor:default}
.chat-status{margin:-6px 14px 10px;font-size:12px;color:#f2d393}.chat-status:empty{display:none}
#rules-open{color:#e0c58e;background:transparent;border:0;border-bottom:1px solid #b99a5a80;font:inherit;font-size:13px;padding:3px 0;cursor:pointer;pointer-events:auto;margin-top:8px}
/* Rules guide: picture cards you flip through. Lives on <body>, outside .game-app,
   so it restates the sheet colours from valuation-home.css instead of reading the tokens. */
.rules-guide{--g-line:rgba(236,228,210,.28);--g-gold:#c9a25a;--g-gold-shadow:#7c5d27;--g-muted:#a9aea6;--g-pixel:AuctionPixel,"MiSans","PingFang SC","Microsoft YaHei",sans-serif;
  width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 24px);overflow:hidden;padding:0;border:2px solid var(--g-line);border-radius:16px;background:#141d1f;box-shadow:0 20px 100px #0009;box-sizing:border-box}
.rules-guide::backdrop{background:#050e12bd;backdrop-filter:blur(5px)}
.guide-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 10px 0 18px;color:var(--g-muted);font-size:13px;letter-spacing:.08em}
.rules-guide .guide-close{width:40px;height:40px;padding:0;border:0;border-radius:10px;background:transparent;color:#ece4d2;font-size:20px;line-height:1}
.rules-guide .guide-close:hover{background:#ffffff14}
/* Plain block flow, no flex sizing: a flex:1 page area collapsed to zero height in
   iOS WebKit (WeChat), leaving only the header and buttons. Pages scroll on their own. */
.guide-viewport{overflow:hidden;touch-action:pan-y}
.guide-track{--page:0;display:flex;margin:0;padding:0;list-style:none;transform:translateX(calc(var(--page) * -100%));transition:transform .32s cubic-bezier(.3,.7,.2,1)}
.guide-page{flex:0 0 100%;box-sizing:border-box;padding:6px 22px 4px;text-align:center;overflow-y:auto;max-height:calc(100dvh - 140px)}
.guide-page h2{margin:12px 0 4px;font-family:var(--g-pixel);font-weight:400;font-size:30px;line-height:1.15;letter-spacing:.12em;color:#f3e4bf;text-shadow:0 3px 0 #0007}
.guide-lead{margin:0 auto;max-width:22em;font-size:16px;line-height:1.5;color:#ece4d2;text-wrap:balance}
.guide-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.guide-art{height:196px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:radial-gradient(ellipse at 50% 60%,#253538,#10181a 75%);border:1px solid rgba(236,228,210,.1);user-select:none;-webkit-user-select:none}
.guide-art img{display:block;-webkit-user-drag:none;pointer-events:none}
/* Item card: artwork + word, the joining character in gold. */
.gd-item{margin:0;width:84px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.gd-item img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 6px #0008)}
.gd-word{width:64px;height:64px;display:grid;place-items:center;font-size:22px;font-weight:700;color:#f3e4bf}
.gd-item figcaption{font-size:17px;font-weight:700;letter-spacing:.06em;color:#ece4d2}.gd-item figcaption b{color:#f0c96f}
.gd-item em{position:absolute;top:-8px;right:-14px;padding:0 6px;border-radius:5px;background:#ece4d2;color:#244c48;font-size:11px;font-style:normal;font-weight:700;line-height:18px;transform:rotate(6deg);white-space:nowrap}
.gd-chain{display:flex;align-items:center;gap:4px}
.gd-arrow{display:flex;flex-direction:column;align-items:center;color:var(--g-gold);font-size:26px;line-height:1}.gd-arrow i{font-style:normal;font-size:13px;font-weight:700;padding:1px 7px;margin-bottom:4px;border:1px solid var(--g-gold);border-radius:999px;letter-spacing:.08em}
.gd-arrow small{font-size:11px;font-weight:700;letter-spacing:.04em;word-spacing:.25em;color:#ece4d2;margin:-1px 0 3px;white-space:nowrap}
.gd-or{display:flex;flex-direction:column;gap:6px}.gd-or .gd-item{flex-direction:row;width:auto;gap:8px}.gd-or .gd-item img,.gd-or .gd-word{width:48px;height:48px}.gd-or .gd-item.alt em{position:static;transform:none;margin-left:2px}
.gd-appraise{display:grid;grid-template-columns:auto auto;align-items:center;gap:6px 20px;position:relative}
.gd-stamp{position:absolute;left:46px;top:-4px;padding:0 6px;border:2px solid #c0543f;border-radius:6px;color:#e06a52;font-family:var(--g-pixel);font-size:16px;letter-spacing:.15em;transform:rotate(-12deg);background:#141d1fcc}
.gd-tag{justify-self:start;padding:4px 12px;border-radius:8px;background:var(--g-gold);color:#1d160b;font-family:var(--g-pixel);font-size:24px;box-shadow:0 3px 0 var(--g-gold-shadow)}
.gd-total{grid-column:1 / -1;justify-self:center;display:flex;align-items:baseline;gap:8px;padding:4px 14px;border:1px dashed var(--g-line);border-radius:8px;font-family:var(--g-pixel);font-size:20px;color:#f3e4bf}.gd-total small{font-family:inherit;font-size:13px;color:var(--g-muted)}
.gd-goals,.gd-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;padding:0 8px;box-sizing:border-box}
.gd-goals figure,.gd-rules figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.gd-goals img,.gd-goals .gd-meter{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 6px #0008);margin-bottom:4px}
.gd-goals b,.gd-rules b{font-family:var(--g-pixel);font-weight:400;font-size:16px;letter-spacing:.06em;color:#f3e4bf;white-space:nowrap}
.gd-goals span,.gd-rules span{font-size:12px;line-height:1.35;color:var(--g-muted)}
/* 极限身价: a gauge filling up to a target line, red past it. */
.gd-meter{position:relative;box-sizing:border-box;width:30px!important;border:2px solid #ece4d2;border-radius:6px;background:#0c1314;overflow:hidden}
.gd-meter i{position:absolute;inset:auto 0 0;height:72%;background:linear-gradient(#e9c46a,#a8803d)}
.gd-meter u{position:absolute;left:-2px;right:-2px;top:22%;border-top:2px dashed #e06a52}
.gd-rules svg{width:54px;height:54px;margin-bottom:6px;fill:none;stroke:#e9c46a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gd-rules figure:last-child svg{stroke:#e06a52}
.gd-rules img{width:54px;height:54px;margin-bottom:6px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 4px #0008)}
/* 万象台 · 成语条：四字一行，接的字描金，右侧标拼音 */
.gd-idiom{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:700;letter-spacing:.08em;color:#ece4d2;white-space:nowrap}.gd-idiom b{color:#f0c96f}
.gd-idiom em{padding:0 6px;border-radius:5px;background:#ece4d2;color:#244c48;font-size:11px;font-style:normal;letter-spacing:0;line-height:18px}
.gd-idioms{display:flex;flex-direction:column;align-items:center;gap:2px}
.gd-idioms>.gd-idiom{font-size:21px;letter-spacing:.14em}
.gd-arrow.down{font-size:22px}
.gd-grid{display:grid;grid-template-columns:auto auto;gap:8px 16px;margin-top:4px}.gd-grid .gd-idiom{font-size:15px}
/* 接龙夺宝 · 宝物：图 + 一字一格，消掉的格子变金 */
.gd-lot{display:flex;flex-direction:column;align-items:center;gap:6px}
.gd-lot img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 6px #0008)}
.gd-cells{display:flex;gap:4px}
.gd-cells span{width:30px;height:30px;display:grid;place-items:center;border:2px solid #ece4d266;border-radius:6px;background:#0c1314;font-size:17px;font-weight:700;color:#ece4d2}
.gd-cells .hit{border-color:var(--g-gold);background:var(--g-gold);color:#1d160b;box-shadow:0 2px 0 var(--g-gold-shadow)}
.gd-appraise .gd-stamp.gd-grab{left:auto;right:-26px;top:6px;transform:rotate(12deg)}
.gd-appraise:has(.gd-lot){grid-template-columns:auto;justify-items:center}
.gd-stack{position:relative;width:72px;height:72px;margin-bottom:4px}
.gd-stack img{position:absolute;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 4px #0008)}
.gd-stack img:nth-child(1){left:0;top:4px}.gd-stack img:nth-child(2){right:0;top:0}.gd-stack img:nth-child(3){left:14px;bottom:0}
.gd-goals>figure>svg{width:60px;height:60px;margin:6px 0 10px;fill:none;stroke:#e9c46a;stroke-width:1.5;stroke-linejoin:round}
/* 万象台 · 牌 */
.gd-forge,.gd-aim{display:flex;align-items:center;gap:14px}
.gd-brush{width:60px;height:60px;object-fit:contain;image-rendering:pixelated;transform:rotate(-20deg)}
.gd-card{position:relative;width:100px;height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;filter:drop-shadow(0 6px 8px #0009)}
.gd-card>img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.gd-card strong{position:relative;font-family:var(--g-pixel);font-weight:400;font-size:24px;line-height:1.2;letter-spacing:.12em;color:#3a2412}
.gd-card span{position:relative;padding:2px 6px;border-radius:4px;background:#b8442f;color:#fbefd8;font-size:11px;font-weight:700;line-height:1.3}
.gd-card.mini{width:72px;height:115px;transform:rotate(-6deg)}.gd-card.mini strong{font-size:18px}
.gd-drag{width:72px;height:2px;border-top:3px dashed #e06a52;position:relative}
.gd-drag::after{content:"";position:absolute;right:-4px;top:-9px;border:7px solid transparent;border-left:10px solid #e06a52}
.gd-foe{margin:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.gd-foe img{width:80px;height:80px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 6px #0008)}
.gd-foe i{position:absolute;top:-6px;right:-10px;font-family:var(--g-pixel);font-style:normal;font-size:22px;color:#e06a52;text-shadow:0 2px 0 #000a}
.gd-foe figcaption{font-size:12px;color:var(--g-muted)}
.gd-survive{position:relative;display:flex;align-items:flex-end;gap:10px}
.gd-survive figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.gd-survive figure img{width:72px;height:72px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 6px #0008)}
.gd-survive figure b{padding:0 8px;border-radius:6px;background:#8f2f26;color:#fbefd8;font-family:var(--g-pixel);font-weight:400;font-size:16px}
.gd-survive figure.out img{filter:grayscale(1) brightness(.45);transform:rotate(80deg) translateX(14px)}.gd-survive figure.out b{background:#3a4a4c}
.gd-victory{position:absolute;left:52px;top:-22px;width:44px;height:44px;object-fit:contain;transform:rotate(-10deg);image-rendering:pixelated}
.rules-guide footer{display:flex;align-items:center;gap:10px;padding:12px 16px 16px}
.rules-guide .guide-nav{min-width:52px;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:#56636d;color:#f3eee4;font-family:var(--g-pixel);font-size:24px;line-height:1;box-shadow:0 4px 0 #333c44}
.rules-guide .guide-nav:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #333c44}
.rules-guide .guide-next{background:var(--g-gold);color:#1d160b;box-shadow:0 4px 0 var(--g-gold-shadow)}
.rules-guide .guide-next.go{font-size:20px;letter-spacing:.08em;padding:0 18px}
.rules-guide .guide-next:active{box-shadow:0 1px 0 var(--g-gold-shadow)}
.guide-dots{flex:1;display:flex;justify-content:center;gap:4px}
.rules-guide .guide-dots button{flex:0 1 44px;height:44px;padding:0;border:0;background:transparent;display:flex;align-items:center}
.guide-dots i{flex:1;height:5px;border-radius:3px;background:#3a4a4c;overflow:hidden;position:relative}
.guide-dots .done i{background:#a8803d}.guide-dots .active i{background:#5d6a62}
.guide-dots .active i::after{content:"";position:absolute;inset:0;background:var(--g-gold)}
.rules-guide.auto .guide-dots .active i::after{transform-origin:left;animation:guide-dot var(--dot-seconds,4s) linear both}
@keyframes guide-dot{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.guide-track{transition:none}.rules-guide.auto .guide-dots .active i::after{animation:none}}
/* Rules card over the opening curtain (valuation-preview.mjs). The trapdoor
   variant shows its own label near the top, so the card moves to the bottom there. */
.opening-tip{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%);z-index:10001;width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:12px 16px 10px;border:2px solid rgba(236,228,210,.28);border-radius:16px;background:#141d1ff0;box-shadow:0 12px 40px #000a;color:#ece4d2;font:14px/1.5 "MiSans","PingFang SC","Microsoft YaHei",sans-serif;pointer-events:none;animation:opening-tip-in .3s ease-out both}
.opening-tip[hidden]{display:none}
.opening-tip[data-variant=trapdoor]{top:auto;bottom:calc(20px + env(safe-area-inset-bottom))}
.opening-tip b{display:block;margin-bottom:6px;font-family:AuctionPixel,"MiSans","PingFang SC",sans-serif;font-weight:400;font-size:18px;letter-spacing:.1em;color:#f3e4bf}
.opening-tip ol{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.opening-tip li{display:flex;align-items:baseline;gap:8px}
.opening-tip li i{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:#c9a25a;color:#1d160b;font-style:normal;font-weight:700;font-size:13px}
@keyframes opening-tip-in{from{opacity:0;transform:translate(-50%,-8px)}}
@media(prefers-reduced-motion:reduce){.opening-tip{animation:none}}
.chain-reading{display:block;color:#d4b77e;font:700 13px/1 "MiSans",system-ui,sans-serif;letter-spacing:1px;margin-top:3px;text-align:center}
.game-app[data-theme=auction] .chain:has(.chain-reading:not([hidden])){padding-bottom:22px}
/* Phone: the button sits above the lobby footer / the play input bar; the open
   panel becomes a full-width sheet at the bottom of the screen. */
@media(max-width:600px){
  .room-chat{right:12px;bottom:calc(env(safe-area-inset-bottom) + 176px)}
  body:has(#play:not([hidden])) .room-chat{bottom:calc(env(safe-area-inset-bottom) + 92px)}
  .room-chat.open{left:12px;bottom:max(12px,env(safe-area-inset-bottom))}
  .room-chat.open .chat-panel{width:100%;max-height:62dvh}
  .chat-log{height:240px}
  .guide-page{padding-inline:16px}}
@media(max-height:500px){.room-chat{bottom:8px}.room-chat.open .chat-panel{max-height:calc(100dvh - 16px)}.chat-log{height:110px}.guide-art{height:130px}.guide-art img,.gd-word{transform:scale(.8)}.guide-page h2{font-size:24px;margin-top:6px}.rules-guide footer{padding:6px 12px 10px}}
.room-chat[data-keyboard=true]{bottom:calc(var(--chat-keyboard) + 8px)}
.room-chat[data-keyboard=true] .chat-panel{max-height:calc(var(--chat-viewport) - 16px)}
.room-chat[data-keyboard=true] .chat-log{height:110px}
@media(prefers-reduced-motion:reduce){.chat-panel{animation:none}.chat-peek.in{animation-name:chat-peek-still}}
@keyframes chat-peek-still{0%,85%{opacity:1}100%{opacity:0}}