:root { --ink: #f1dfb9; --muted: #b9a587; --panel: #242622; --gold: #d7ac55; }
* { box-sizing: border-box; }
body.new-body.diamwolf-bang-site { color-scheme: dark; margin: 0; background: radial-gradient(ellipse at top, #304238, #111713 75%) !important; color: var(--ink); font: 14px/1.5 system-ui, sans-serif; }
body.new-body.diamwolf-bang-site .new-shell { width: min(1420px, calc(100% - 12px)); }
body.new-body.diamwolf-bang-playing-page .new-shell { height: auto; min-height: 0; max-height: none; }
body.new-body.diamwolf-bang-playing-page .new-main { overflow: visible; }
body.new-body.diamwolf-bang-site a:not(.new-nav-link) { color: var(--ink); }
body.new-body.diamwolf-bang-site .new-topbar { background: #1b251d; border-color: #555d43; }
body.new-body.diamwolf-bang-site .diamwolf-bang-brand { display: flex; flex-direction: column; font-size: 24px; line-height: 1.2; font-weight: 800; color: var(--gold); text-decoration: none; }
.diamwolf-bang-brand small { font-size: 11px; color: var(--muted); letter-spacing: 2px; }
.diamwolf-bang-site .diamwolf-game-menu-options { background: #263329; }
#diamwolf-bang-root { width: 100%; margin: 18px auto; display: flex; flex-direction: column; gap: 14px; }
#diamwolf-bang-root.diamwolf-bang-game-layout { height: 100dvh; min-height: 800px; margin: 0 auto; padding: 8px 0; gap: 6px; position: relative; }
.diamwolf-bang-game-layout > .diamwolf-bang-game-header { flex: 0 0 42px; padding: 0 4px; }
.diamwolf-bang-game-layout > .diamwolf-bang-game-header h1 { font-size: 22px; }
#diamwolf-bang-root > #diamwolf-bang-error:empty, .diamwolf-bang-game-layout > #diamwolf-bang-rules { display: none; }
#diamwolf-bang-root.diamwolf-bang-game-layout[data-status="waiting"] { height: auto; min-height: 0; }
.diamwolf-bang-game-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 8px; min-width: 0; }
.diamwolf-bang-game-header h1 { margin: 0; font-size: clamp(22px, 3vw, 34px); letter-spacing: 2px; color: var(--gold); line-height: 1.3; }
h1 small { font-size: 14px; letter-spacing: 2px; color: var(--muted); }
h2 { font-size: 15px; margin: 0 0 6px; }
.diamwolf-bang-kicker { font-size: 11px; letter-spacing: 3px; color: var(--muted); }
.diamwolf-bang-panel { margin: 0; padding: 18px; min-width: 0; min-height: 0; border: 1px solid #55533f; border-radius: 16px; background: #202620; box-shadow: 0 12px 28px #0002; }
label { display: flex; flex-direction: column; gap: 5px; }
form, .diamwolf-bang-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
input, select, button { min-width: 0; max-width: 100%; font: inherit; border: 1px solid #776849; border-radius: 6px; padding: 6px 9px; background: #161d17; color: var(--ink); }
button { cursor: pointer; background: #564323; }
button:hover:not(:disabled), button:focus-visible { background: #7b6032; outline: 2px solid var(--gold); }
button:disabled { opacity: .5; cursor: wait; }
[hidden] { display: none !important; }
#diamwolf-bang-error { color: #ffbdaf; min-height: 0; max-height: 40px; overflow: auto; white-space: pre-wrap; }
#diamwolf-bang-status { text-align: right; white-space: pre-line; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.diamwolf-bang-header-info { flex: 1; min-width: 0; }
.diamwolf-bang-header-nav { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
#diamwolf-bang-countdown { color: var(--gold); text-align: right; font-weight: 700; font-size: 13px; }
.diamwolf-bang-nav { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 40px; min-height: 40px; color: var(--ink); font: inherit; line-height: 1.2; white-space: nowrap; text-decoration: none; border: 1px solid #776849; border-radius: 6px; padding: 0 12px; box-shadow: none; }
.diamwolf-bang-header-nav > .diamwolf-bang-nav { width: 90px; }
/* 共用版型會強制清除連結底色；這裡讓連結與按鈕使用相同外觀。 */
:is(#diamwolf-bang-root, #diamwolf-bang-document) .diamwolf-bang-nav { background: #463a24 !important; }
:is(#diamwolf-bang-root, #diamwolf-bang-document) .diamwolf-bang-nav:hover, :is(#diamwolf-bang-root, #diamwolf-bang-document) .diamwolf-bang-nav:focus-visible { background: #7b6032 !important; }
.diamwolf-bang-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 34%); grid-template-rows: 140px minmax(0, 1fr) 50px; gap: 8px; min-width: 0; min-height: 0; flex: 1; }
.diamwolf-bang-board { display: contents; }
.diamwolf-bang-workspace > .diamwolf-bang-action-panel { grid-column: 2; grid-row: 2; padding: 8px; min-height: 0; }
.diamwolf-bang-workspace > .diamwolf-bang-log-panel { grid-column: 1 / -1; grid-row: 3; }
#diamwolf-bang-root[data-self="0"] .diamwolf-bang-action-panel { grid-column: 1 / -1; }
#diamwolf-bang-root[data-status="waiting"] .diamwolf-bang-workspace { display: flex; flex-direction: column; }
.diamwolf-bang-action-panel { display: flex; flex-direction: column; }
.diamwolf-bang-action-body { min-width: 0; min-height: 0; flex: 1; overflow: auto; }
.diamwolf-bang-log-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(230px, 34%); grid-template-areas: 'details latest chat'; align-items: center; position: relative; padding: 4px 8px; gap: 10px; }
#diamwolf-bang-latest-chat { grid-area: latest; margin: 0; padding: 3px 6px; max-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#diamwolf-bang-chat { grid-area: chat; }
#diamwolf-bang-log-details { grid-area: details; }
#diamwolf-bang-log-details[open] > .diamwolf-bang-log-content { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; max-height: 360px; overflow: auto; padding: 8px; border: 1px solid #776849; border-radius: 12px; background: #202620; box-shadow: 0 8px 28px #0008; }
#diamwolf-bang-login-details > summary { cursor: pointer; font-weight: 700; }
#diamwolf-bang-login-details[open] #diamwolf-bang-lobby { max-height: 230px; overflow: auto; }
/* 桌機七個座位同列顯示；不再把後三名玩家藏在卡桌內捲動區。 */
#diamwolf-bang-table { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
.diamwolf-bang-player { position: relative; min-width: 0; height: 140px; border: 1px solid #5e644d; border-radius: 8px; padding: 7px; background: #263329; font-size: 11px; }
.diamwolf-bang-player.is-turn { border: 2px solid var(--gold); padding: 6px; background: #49452a; box-shadow: inset 0 0 18px #d7ac5526; }
.diamwolf-bang-player.is-acting { border: 2px solid #ffe29a; padding: 6px; background: #62502c; box-shadow: inset 0 0 22px #e4b95c38, 0 0 0 1px #ffe29a77; }
.diamwolf-bang-player.is-dead { opacity: .55; }
.diamwolf-bang-player.is-target { cursor: pointer; outline: 2px dashed #80bce4; outline-offset: 1px; }
.diamwolf-bang-player.is-target-selected { outline: 3px solid #80bce4; background: #294658; }
.diamwolf-bang-player.is-target:focus-visible { outline: 3px solid #fff4d6; }
#diamwolf-bang-action-hint { white-space: pre-wrap; margin: 4px 0 8px; color: var(--gold); font-size: 12px; }
.diamwolf-bang-player:has(.diamwolf-bang-equipment-details[open]) { z-index: 45; }
body.new-body.diamwolf-bang-site .diamwolf-bang-player h3 { margin: 0 0 3px; font-size: 14px; line-height: 1.4; color: #fff4d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diamwolf-bang-role { color: var(--gold); height: 30px; line-height: 15px; overflow: hidden; }
.diamwolf-bang-ability { display: none; }
.diamwolf-bang-hp { color: var(--ink); font-size: 11px; margin-top: 3px; }
.diamwolf-bang-health-track { display: block; height: 10px; margin-top: 4px; border-radius: 6px; background: #111713; overflow: hidden; }
.diamwolf-bang-health-fill { display: block; height: 100%; background: #57b986; border-radius: inherit; transition: width .2s; }
.diamwolf-bang-hp.is-hurt .diamwolf-bang-health-fill { background: #d6b45b; }
.diamwolf-bang-hp.is-critical .diamwolf-bang-health-fill { background: #e47764; }
#diamwolf-bang-hand, #diamwolf-bang-pool { display: flex; flex-wrap: wrap; gap: 16px; align-items: start; }
#diamwolf-bang-pool:not(:empty) { margin: 16px 0 22px; }
.diamwolf-bang-card { --diamwolf-card-accent: #8b4e30; --diamwolf-card-width: 174px; position: relative; isolation: isolate; display: grid; grid-template-rows: 50px minmax(0, 1fr) 64px; width: var(--diamwolf-card-width); flex: 0 0 var(--diamwolf-card-width); aspect-ratio: 5 / 8; padding: 12px; border: 1px solid #7c5e3c; border-radius: 11px; background: radial-gradient(ellipse at 20% 8%, #fff5d99c, transparent 65%), repeating-linear-gradient(92deg, #79552b06 0 1px, transparent 1px 4px), linear-gradient(145deg, #ead6aa, #f1e2bf 54%, #d6b983); color: #392b21; box-shadow: inset 0 0 0 3px #ebd6a4, inset 0 0 0 5px var(--diamwolf-card-accent), inset 0 0 22px #89582427, 0 5px 12px #0005; transition: transform .16s ease, box-shadow .16s ease; }
.diamwolf-bang-card::before { content: ''; position: absolute; inset: 8px; z-index: -1; border: 1px solid #8e6d4260; border-radius: 5px; pointer-events: none; }
.diamwolf-bang-card:not(.is-compact):hover { transform: translateY(-5px); box-shadow: inset 0 0 0 3px #ebd6a4, inset 0 0 0 5px var(--diamwolf-card-accent), 0 12px 22px #0007; }
.diamwolf-bang-card.blue { --diamwolf-card-accent: #3d6c7b; border-color: #426474; background: radial-gradient(ellipse at 20% 8%, #f8faf29c, transparent 65%), repeating-linear-gradient(92deg, #395f7306 0 1px, transparent 1px 4px), linear-gradient(145deg, #d4ddd4, #eee7ce 54%, #b2c2b8); }
.diamwolf-bang-card-corner { position: absolute; top: 11px; left: 10px; display: flex; flex-direction: column; align-items: center; width: 22px; font-family: Georgia, serif; line-height: 1; color: #35291f; }
.diamwolf-bang-card-corner b { font-size: 19px; font-weight: 700; }
.diamwolf-bang-card-corner > span { margin-top: 2px; font-size: 21px; }
.diamwolf-bang-card-corner.is-red { color: #99392e; }
.diamwolf-bang-card-corner.is-bottom { top: auto; left: auto; bottom: 11px; right: 10px; transform: rotate(180deg); }
.diamwolf-bang-card-heading { align-self: start; text-align: center; padding: 0 16px; line-height: 1.3; }
.diamwolf-bang-card-series { display: block; margin-bottom: 3px; color: var(--diamwolf-card-accent); font-size: 8px; font-weight: 700; letter-spacing: 2px; }
.diamwolf-bang-card-heading strong { display: block; font-size: 17px; font-weight: 800; white-space: nowrap; font-family: Georgia, 'Noto Serif TC', serif; }
.diamwolf-bang-card.has-long-name .diamwolf-bang-card-heading strong { font-size: 14px; }
.diamwolf-bang-card-heading small { display: block; margin-top: 3px; font-size: 7px; letter-spacing: 1px; color: #75573a; white-space: nowrap; }
.diamwolf-bang-card-art { display: flex; align-items: center; min-height: 0; margin: 6px -2px 8px; overflow: hidden; border-top: 1px solid #8f693c66; border-bottom: 1px solid #8f693c66; background: radial-gradient(ellipse at center, #fff7da35, #8661390b); }
.diamwolf-bang-card-art svg { display: block; width: 100%; height: 100%; }
.diamwolf-bang-card-footer { text-align: center; line-height: 1.4; }
.diamwolf-bang-card-category { display: inline-block; min-width: 56px; padding: 1px 10px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; color: var(--diamwolf-card-accent); font-size: 10px; font-weight: 800; letter-spacing: 2px; }
/* 完整牌面說明預留右下角花色／點數的寬度，避免文字與角標相撞。 */
.diamwolf-bang-card-footer p { margin: 6px 26px 0 2px; font-size: 11px; color: #55412e; }
.diamwolf-bang-card.is-compact { --diamwolf-card-width: 86px; grid-template-rows: 29px minmax(0, 1fr) 18px; padding: 7px; border-radius: 7px; box-shadow: inset 0 0 0 2px #ead7ad, inset 0 0 0 3px var(--diamwolf-card-accent), 0 3px 6px #0004; }
.diamwolf-bang-card.is-compact::before { inset: 5px; border-radius: 3px; }
.diamwolf-bang-card.is-compact .diamwolf-bang-card-heading { padding: 0 3px 0 10px; }
.diamwolf-bang-card.is-compact .diamwolf-bang-card-heading strong { margin-top: 5px; font-size: 10px; white-space: normal; line-height: 1.2; }
.diamwolf-bang-card.is-compact.has-long-name .diamwolf-bang-card-heading strong { font-size: 9px; }
.diamwolf-bang-card.is-compact .diamwolf-bang-card-series, .diamwolf-bang-card.is-compact .diamwolf-bang-card-heading small, .diamwolf-bang-card.is-compact .diamwolf-bang-card-footer p { display: none; }
.diamwolf-bang-card.is-compact .diamwolf-bang-card-corner { top: 8px; left: 5px; width: 12px; }
.diamwolf-bang-card.is-compact .diamwolf-bang-card-corner b { font-size: 11px; }
.diamwolf-bang-card.is-compact .diamwolf-bang-card-corner > span { margin: 0; font-size: 12px; }
.diamwolf-bang-card.is-compact .diamwolf-bang-card-corner.is-bottom { top: auto; left: auto; bottom: 7px; right: 5px; }
.diamwolf-bang-card.is-compact .diamwolf-bang-card-art { margin: 3px 0 5px; }
.diamwolf-bang-card.is-compact .diamwolf-bang-card-category { min-width: 0; padding: 0 3px; font-size: 8px; letter-spacing: 0; }
/* 縮圖底欄不沿用一般文字基線高度，否則 52／62px 牌面的標籤會落到邊框外。 */
.diamwolf-bang-card.is-compact .diamwolf-bang-card-footer { display: flex; align-items: start; justify-content: center; }
.diamwolf-bang-equipment { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.diamwolf-bang-player .diamwolf-bang-equipment { gap: 6px; margin-top: 5px; }
.diamwolf-bang-player .diamwolf-bang-equipment:empty { margin-top: 0; }
.diamwolf-bang-equipment-details { position: relative; font-size: 10px; margin: 5px 0 2px; }
.diamwolf-bang-equipment-details > summary { cursor: pointer; list-style: none; margin: 0; }
.diamwolf-bang-equipment-details > summary::-webkit-details-marker { display: none; }
.diamwolf-bang-equipment-details > summary::before { content: '▸'; position: absolute; left: 0; }
.diamwolf-bang-equipment-details[open] > summary::before { content: '▾'; }
.diamwolf-bang-equipment-details[open] > .diamwolf-bang-equipment { position: absolute; left: 0; top: 100%; z-index: 40; width: min(460px, calc(100vw - 40px)); max-height: 405px; overflow: auto; margin: 0; padding: 10px; background: #202620; border: 1px solid var(--gold); border-radius: 10px; box-shadow: 0 10px 28px #0008; }
.diamwolf-bang-equipment-details.is-right[open] > .diamwolf-bang-equipment { left: auto; right: 0; }
.diamwolf-bang-player .diamwolf-bang-equipment .diamwolf-bang-card { --diamwolf-card-width: 135px; grid-template-rows: 29px minmax(0, 1fr) 18px; padding: 7px; }
.diamwolf-bang-player .diamwolf-bang-equipment .diamwolf-bang-card-heading { padding: 0 0 0 8px; }
.diamwolf-bang-player .diamwolf-bang-equipment .diamwolf-bang-card-heading strong { font-size: 11px; margin-top: 3px; }
.diamwolf-bang-player .diamwolf-bang-equipment .diamwolf-bang-card-corner { top: 6px; left: 4px; width: 8px; }
.diamwolf-bang-player .diamwolf-bang-equipment .diamwolf-bang-card-corner b { font-size: 9px; }
.diamwolf-bang-player .diamwolf-bang-equipment .diamwolf-bang-card-corner > span { font-size: 10px; }
.diamwolf-bang-player .diamwolf-bang-equipment .diamwolf-bang-card-corner.is-bottom { top: auto; left: auto; bottom: 6px; right: 4px; }
.diamwolf-bang-player .diamwolf-bang-equipment .diamwolf-bang-card-category { font-size: 7px; padding: 0 2px; }
.diamwolf-bang-equipment-label { position: relative; display: block; height: 18px; margin: 5px 0 2px; padding-left: 12px; color: var(--ink); font-size: 10px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#diamwolf-bang-piles { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 0; padding: 4px 8px; border: 1px solid #65543c; border-radius: 8px; background: repeating-linear-gradient(0deg, #9a734706 0 1px, transparent 1px 5px), linear-gradient(115deg, #392e21, #222d23); }
#diamwolf-bang-piles .diamwolf-bang-card.is-compact { --diamwolf-card-width: 52px; grid-template-rows: 22px minmax(0, 1fr) 12px; padding: 4px; }
#diamwolf-bang-piles .diamwolf-bang-card-heading { padding: 0; }
#diamwolf-bang-piles .diamwolf-bang-card-heading strong { font-size: 9px; margin-top: 0; }
#diamwolf-bang-piles .diamwolf-bang-card-category { font-size: 7px; padding: 0; }
#diamwolf-bang-piles .diamwolf-bang-card-corner { display: none; }
#diamwolf-bang-piles .diamwolf-bang-card-back svg { height: 28px; }
#diamwolf-bang-piles .diamwolf-bang-card-back > strong { font-size: 11px; letter-spacing: 0; }
#diamwolf-bang-piles .diamwolf-bang-card-back > span, #diamwolf-bang-piles .diamwolf-bang-card-back > small { display: none; }
.diamwolf-bang-pile { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.diamwolf-bang-pile > span { letter-spacing: 1px; }
.diamwolf-bang-empty-pile { display: grid; place-items: center; width: 32px; aspect-ratio: 5 / 8; padding: 3px; border: 1px dashed #9e855755; border-radius: 5px; color: #ad9574; font-size: 9px; }
.diamwolf-bang-card-back { display: flex !important; flex-direction: column; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #d3ae6908 0 1px, transparent 1px 5px), #453526; color: #e6c78f; border-color: #b39058; transform: rotate(-4deg); }
.diamwolf-bang-card-back::before { border-color: #b9976155; }
.diamwolf-bang-card-back svg { width: 100%; height: 64px; }
.diamwolf-bang-card-back > span { font: 6px Georgia, serif; letter-spacing: 1px; }
.diamwolf-bang-card-back > strong { font: bold 20px Georgia, serif; letter-spacing: 4px; }
.diamwolf-bang-card-back > small { margin-top: 5px; font: 6px Georgia, serif; letter-spacing: .5px; }
.diamwolf-bang-pile-caption { display: none; }
#diamwolf-bang-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#diamwolf-bang-options button { width: 100%; height: 44px; text-align: center; font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#diamwolf-bang-options > p { grid-column: 1 / -1; }
.diamwolf-bang-log-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.diamwolf-bang-log-tabs button { flex: 1; padding: 4px; font-size: 11px; }
.diamwolf-bang-log-tabs button[aria-pressed="true"] { background: #8a6734; border-color: var(--gold); }
.diamwolf-bang-log { max-height: 330px; overflow-y: auto; color: var(--ink); margin-bottom: 6px; font-size: 13px; overflow-wrap: anywhere; }
.diamwolf-bang-log-entry { padding: 6px; margin-bottom: 4px; border-left: 3px solid #87927d; border-radius: 4px; background: #30382f; white-space: pre-wrap; }
.diamwolf-bang-log-entry.is-chat { background: #263e50; border-color: #80bce4; }
.diamwolf-bang-log-entry.is-action { background: #3f3426; border-color: #bf9461; }
.diamwolf-bang-log-entry.is-turn { background: #4d4527; border-color: #e4c16a; }
.diamwolf-bang-log-entry.is-damage { background: #51302c; border-color: #e58d7b; }
.diamwolf-bang-log-entry.is-result { background: #41354f; border-color: #bfa0df; }
#diamwolf-bang-seats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
#diamwolf-bang-seats > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#diamwolf-bang-seats button { padding: 3px 8px; font-size: 11px; }
#diamwolf-bang-chat { flex-wrap: nowrap; }
#diamwolf-bang-chat input { flex: 1; width: 0; }
#diamwolf-bang-lobby { min-width: 0; }
#diamwolf-bang-lobby form label { flex: 1; min-width: 100px; }
#diamwolf-bang-lobby input { width: 100%; }
#diamwolf-bang-lobby .diamwolf-bang-toolbar { margin-top: 8px; }
#diamwolf-bang-invite-url { display: block; word-break: break-all; font-size: 11px; }
#diamwolf-bang-hand-panel { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; padding: 8px; }
#diamwolf-bang-hand-panel h2 small { color: var(--muted); font-size: 10px; font-weight: 400; }
.diamwolf-bang-hand-workspace { display: grid; grid-template-columns: 182px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 0; flex: 1; }
#diamwolf-bang-hand { padding: 4px 3px; min-height: 0; }
#diamwolf-bang-hand-gallery { display: grid; grid-template-columns: repeat(auto-fill, 62px); gap: 8px 6px; align-content: start; max-height: 100%; overflow: auto; padding: 4px; }
.diamwolf-bang-hand-choice { display: flex; flex-direction: column; width: 62px; gap: 4px; }
.diamwolf-bang-hand-choice > button { width: 100%; min-height: 24px; padding: 2px 4px; font-size: 11px; }
.diamwolf-bang-hand-choice.is-selected > button { background: #8a6734; border-color: var(--gold); }
#diamwolf-bang-hand-gallery .diamwolf-bang-card { --diamwolf-card-width: 62px; grid-template-rows: 22px minmax(0, 1fr) 12px; padding: 5px; }
#diamwolf-bang-hand-gallery .diamwolf-bang-card-heading strong { margin-top: 3px; font-size: 8px; }
#diamwolf-bang-hand-gallery .diamwolf-bang-card-category { font-size: 7px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card:not(.is-compact) { --diamwolf-card-width: 176px; grid-template-rows: 50px minmax(0, 1fr) 64px; padding: 12px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-heading { padding: 0 6px 0 12px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-heading strong { font-size: 17px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card.has-long-name .diamwolf-bang-card-heading strong { font-size: 14px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-heading small { font-size: 5px; letter-spacing: .2px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-series { font-size: 6px; letter-spacing: 1px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-corner { width: 12px; top: 10px; left: 7px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-corner b { font-size: 12px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-corner > span { font-size: 14px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-corner.is-bottom { top: auto; left: auto; bottom: 8px; right: 6px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-category { font-size: 8px; padding: 0 4px; letter-spacing: 1px; }
:is(#diamwolf-bang-hand, #diamwolf-bang-pool) .diamwolf-bang-card-footer p { font-size: 11px; margin: 6px 9px 0 0; }
#diamwolf-bang-pool { flex-wrap: nowrap; overflow-x: auto; gap: 8px; }
#diamwolf-bang-pool:not(:empty) { margin: 3px 0 8px; padding-bottom: 6px; }
.diamwolf-bang-directory { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.diamwolf-bang-create-panel { overflow: auto; }
#diamwolf-bang-create { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(200px, 2fr) 90px minmax(120px, 1fr) 100px auto; align-items: end; gap: 14px; padding: 24px; }
.diamwolf-bang-directory-panel { display: flex; flex-direction: column; }
#diamwolf-bang-rooms { min-width: 0; }
.diamwolf-bang-room-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 8px; border-bottom: 1px solid #77684955; }
.diamwolf-bang-room-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.diamwolf-bang-room-info span { color: var(--muted); font-size: 12px; }
.diamwolf-bang-room-group { margin-bottom: 18px; }
#diamwolf-bang-root .diamwolf-bang-room-group > h3 { position: sticky; top: 0; margin: 0; padding: 8px; background: #35432e; color: var(--ink); border-bottom: 2px solid #9ea66b; font-size: 14px; }
.diamwolf-bang-room-group:last-child > h3 { background: #3b3540; border-color: #a18aaf; }
.diamwolf-bang-card[role="button"] { cursor: zoom-in; }
.diamwolf-bang-card[role="button"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#diamwolf-bang-card-preview { max-width: 96vw; max-height: 96dvh; padding: 12px; border: 1px solid var(--gold); border-radius: 12px; background: #202620; color: var(--ink); overflow: auto; }
#diamwolf-bang-card-preview::backdrop { background: #000b; }
#diamwolf-bang-card-close { display: block; margin: 0 0 8px auto; }
#diamwolf-bang-card-preview .diamwolf-bang-card { --diamwolf-card-width: min(280px, calc(96vw - 28px), calc((96dvh - 120px) * 5 / 8)); cursor: zoom-out; }
#diamwolf-bang-card-preview.is-equipment .diamwolf-bang-card { --diamwolf-card-width: min(420px, calc(96vw - 28px), calc((96dvh - 120px) * 5 / 8)); }
#diamwolf-bang-card-preview .diamwolf-bang-card:hover { transform: none; }
#diamwolf-bang-card-preview > p { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: 11px; }
#diamwolf-bang-rules { text-align: center; font-size: 11px; color: var(--muted); }
.diamwolf-bang-card-hint { margin: 2px 0 6px; color: var(--muted); font-size: 11px; }
.diamwolf-bang-step { flex: 0 0 100%; margin: 4px 0; font-weight: 700; }
.diamwolf-bang-selected { outline: 3px solid var(--gold); }
.diamwolf-bang-result { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 8px; border: 2px solid var(--gold); background: #4d4527; text-align: center; }
.diamwolf-bang-result h2 { margin: 0; font-size: 20px; }
.diamwolf-bang-result p { margin: 0; font-size: 12px; }
.diamwolf-bang-document { display: flex; flex-direction: column; gap: 14px; margin: 14px 0 24px; }
.diamwolf-bang-document h2 { font-size: 20px; }
.diamwolf-bang-document p, .diamwolf-bang-document li { line-height: 1.9; }
.diamwolf-bang-document details + details { border-top: 1px solid #55533f; }
.diamwolf-bang-document summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
#diamwolf-bang-log-details summary { cursor: pointer; padding: 6px 8px; border: 1px solid #776849; border-radius: 6px; background: #463a24; color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.diamwolf-bang-rule-index { display: flex; flex-wrap: wrap; gap: 16px; }
.diamwolf-bang-rule-card-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 20px 12px; margin: 16px 0 24px; }
.diamwolf-bang-rule-card-gallery > .diamwolf-bang-card { --diamwolf-card-width: 176px; justify-self: center; margin: 0; }
.diamwolf-bang-rule-card-gallery .diamwolf-bang-card-footer p { line-height: 1.4; }
#diamwolf-bang-latest-chat { overflow-wrap: anywhere; }
#diamwolf-bang-card-hover { position: fixed; z-index: 90; pointer-events: none; filter: drop-shadow(0 10px 20px #0009); }
#diamwolf-bang-card-hover .diamwolf-bang-card { --diamwolf-card-width: min(280px, calc((100dvh - 24px) * 5 / 8)); transform: none; }
/* 非遊戲頁沿用共用公開頁的主視覺、全寬內容卡與表單結構，不影響卡桌。 */
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .new-shell { width: min(1360px, calc(100% - 24px)); }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-panel { color-scheme: light; border-color: #d3c4a5; border-radius: 20px; background: #f3ead8; color: #342d21; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-panel h2 { color: #36482f; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-panel label { color: #6a644d; font-size: 12px; min-width: 0; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-panel input,
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-panel select { width: 100%; height: 44px; border-color: #cbbc9f; background: #fffbf1; color: #342d21; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-panel button { height: 44px; padding: 0 16px; border-color: #315641; background: #315641; color: #fff7df; font-weight: 700; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-panel button:hover { background: #456e4b; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page :is(#diamwolf-bang-root, #diamwolf-bang-document) .diamwolf-bang-nav { height: 44px; min-height: 44px; background: #315641 !important; color: #fff7df; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page :is(#diamwolf-bang-root, #diamwolf-bang-document) .diamwolf-bang-nav:is(:hover, :focus-visible) { background: #456e4b !important; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-panel a:not(.diamwolf-bang-nav),
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-rule-index a { color: #315641; }
#diamwolf-bang-root.diamwolf-bang-home-layout { gap: 14px; margin: 14px auto 24px; }
/* 卡桌標題的 space-between 會讓單一 grid 欄偏左；首頁須明確使用全寬欄位與置中配置。 */
#diamwolf-bang-root.diamwolf-bang-home-layout > .index-hero { min-height: 218px; margin: 0; padding: 26px clamp(20px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center; place-items: center; text-align: center; background: radial-gradient(ellipse at 50% 80%, #7b67344d, transparent 65%), linear-gradient(110deg, #17231d, #3e4432); }
#diamwolf-bang-root.diamwolf-bang-home-layout .index-hero h1 { color: #fff7df; font-size: clamp(2rem, 4.2vw, 3.55rem); line-height: 1.1; }
#diamwolf-bang-root.diamwolf-bang-home-layout .index-hero p { white-space: normal; color: #d8d7bd; line-height: 1.6; }
.diamwolf-bang-home-layout .diamwolf-bang-panel { padding: 0; }
.diamwolf-bang-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; border-bottom: 1px solid #d3c4a5; border-radius: 20px 20px 0 0; background: #fff9ed; }
.diamwolf-bang-panel-heading h2 { margin: 0; font-size: 16px; }
.diamwolf-bang-panel-heading p { margin: 4px 0 0; color: #7b765c; font-size: 12px; }
.diamwolf-bang-home-layout #diamwolf-bang-status { color: #536744; }
.diamwolf-bang-home-layout .diamwolf-bang-room-group { margin: 0; }
.diamwolf-bang-home-layout .diamwolf-bang-room-group > p { padding: 20px; margin: 0; }
.diamwolf-bang-home-layout .diamwolf-bang-room-row { display: grid; grid-template-columns: 80px 100px minmax(0, 1fr) 70px auto; gap: 16px; min-height: 84px; padding: 16px 20px; border-bottom-color: #d3c4a5; }
.diamwolf-bang-home-layout .diamwolf-bang-room-row:last-child { border-bottom: 0; }
.diamwolf-bang-room-number { color: #82775c; font-size: 12px; }
.diamwolf-bang-room-status { padding: 4px 8px; border-radius: 20px; text-align: center; font-size: 11px; background: #dce9d5; color: #315641; }
.diamwolf-bang-room-status.is-playing { background: #e8dbba; color: #695028; }
.diamwolf-bang-room-count { font-weight: 700; text-align: right; color: #536744; }
.diamwolf-bang-home-layout .diamwolf-bang-room-info strong { font-size: 16px; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-room-info span { color: #786d54; }
#diamwolf-bang-document > .diamwolf-bang-game-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; background: radial-gradient(ellipse at 80% 50%, #7b67344d, transparent 70%), linear-gradient(110deg, #17231d, #3e4432); }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-document > .diamwolf-bang-panel { padding: 24px; }
body.new-body.diamwolf-bang-site.diamwolf-refresh-page .diamwolf-bang-document > .diamwolf-bang-panel > h2:first-child { margin: -24px -24px 18px; padding: 14px 24px; border-bottom: 1px solid #d3c4a5; border-radius: 20px 20px 0 0; background: #fff9ed; font-size: 18px; }
.diamwolf-bang-document .diamwolf-bang-panel details + details { border-color: #d3c4a5; }
.diamwolf-bang-document .diamwolf-bang-room-row { border-bottom-color: #d3c4a5; }
.diamwolf-bang-history-search { margin: 6px 0 18px; }
.diamwolf-bang-history-search label { flex: 1 1 240px; max-width: 640px; }
.diamwolf-bang-trip-link { display: block; width: fit-content; max-width: 100%; font-size: 10px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diamwolf-bang-role.has-trip > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diamwolf-bang-trip-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.diamwolf-bang-trip-summary > div { padding: 12px; border: 1px solid #d3c4a5; border-radius: 10px; }
.diamwolf-bang-trip-summary strong { display: block; font-size: 22px; }
.diamwolf-bang-trip-names { display: flex; flex-wrap: wrap; gap: 6px 16px; overflow-wrap: anywhere; }
.diamwolf-bang-trip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 0; border-bottom: 1px solid #d3c4a5; }
.diamwolf-bang-trip-row.is-head { font-weight: 700; }
.diamwolf-bang-document .diamwolf-bang-room-info { overflow-wrap: anywhere; }
.diamwolf-bang-rule-index { padding: 14px 24px; border: 1px solid #d3c4a5; border-radius: 20px; background: #fff9ed; }
@media (max-width: 920px) {
    #diamwolf-bang-root.diamwolf-bang-game-layout { height: auto; min-height: 0; }
    .diamwolf-bang-workspace { display: flex; flex-direction: column; }
    #diamwolf-bang-table { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #diamwolf-bang-table .diamwolf-bang-equipment-details[open] > .diamwolf-bang-equipment { left: 0; right: auto; }
    #diamwolf-bang-table .diamwolf-bang-player:nth-child(4n) .diamwolf-bang-equipment-details[open] > .diamwolf-bang-equipment, #diamwolf-bang-table .diamwolf-bang-player:nth-child(4n-1) .diamwolf-bang-equipment-details[open] > .diamwolf-bang-equipment { left: auto; right: 0; }
    #diamwolf-bang-hand-panel { height: 340px; flex: 0 0 340px; }
    .diamwolf-bang-action-body { max-height: 340px; }
    .diamwolf-bang-log-panel { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'details latest' 'chat chat'; gap: 6px; }
    .diamwolf-bang-log-panel:has(#diamwolf-bang-log-details[open]) { grid-template-areas: 'details details' 'latest latest' 'chat chat'; }
    #diamwolf-bang-log-details[open] > .diamwolf-bang-log-content { position: static; margin-top: 6px; }
    #diamwolf-bang-create { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .diamwolf-bang-home-layout .diamwolf-bang-room-row { grid-template-columns: 65px 90px minmax(0, 1fr) 50px auto; gap: 8px; }
}
@media (max-width: 650px) {
    .diamwolf-bang-trip-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #diamwolf-bang-root { gap: 10px; }
    .diamwolf-bang-game-header { flex-wrap: wrap; gap: 10px; padding: 10px 2px; }
    .diamwolf-bang-header-info { flex-basis: 100%; order: 3; }
    #diamwolf-bang-status, #diamwolf-bang-countdown { text-align: left; }
    .diamwolf-bang-panel { padding: 12px; }
    #diamwolf-bang-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .diamwolf-bang-player { padding: 7px; }
    .diamwolf-bang-player .diamwolf-bang-equipment .diamwolf-bang-card { --diamwolf-card-width: 105px; }
    #diamwolf-bang-table .diamwolf-bang-player:nth-child(odd) .diamwolf-bang-equipment-details[open] > .diamwolf-bang-equipment { left: 0; right: auto; }
    #diamwolf-bang-table .diamwolf-bang-player:nth-child(even) .diamwolf-bang-equipment-details[open] > .diamwolf-bang-equipment { left: auto; right: 0; }
    #diamwolf-bang-piles { gap: 12px; padding: 8px; }
    .diamwolf-bang-pile { gap: 6px; font-size: 11px; }
    .diamwolf-bang-pile-caption { display: none; }
    .diamwolf-bang-directory { gap: 12px; }
    .diamwolf-bang-directory > section { width: 100%; }
    .diamwolf-bang-room-row { flex-wrap: wrap; }
    #diamwolf-bang-options button { padding: 10px; }
    #diamwolf-bang-hand-panel { height: auto; flex: 0 0 auto; }
    .diamwolf-bang-hand-workspace { display: block; }
    #diamwolf-bang-hand { display: none; }
    #diamwolf-bang-hand-gallery { max-height: none; overflow: visible; justify-content: center; }
    .diamwolf-bang-game-layout > .diamwolf-bang-game-header { flex-basis: auto; }
    .diamwolf-bang-result { flex-direction: column; gap: 4px; }
    #diamwolf-bang-create { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .diamwolf-bang-panel-heading { flex-direction: column; align-items: start; gap: 8px; padding: 14px 18px; }
    .diamwolf-bang-home-layout #diamwolf-bang-status { text-align: left; }
    .diamwolf-bang-home-layout .diamwolf-bang-room-row { grid-template-columns: 65px minmax(0, 1fr) auto; padding: 14px 18px; }
    .diamwolf-bang-home-layout .diamwolf-bang-room-info { grid-column: 1 / -1; grid-row: 2; }
    .diamwolf-bang-home-layout .diamwolf-bang-room-row > .diamwolf-bang-nav { grid-column: 2 / -1; justify-self: end; }
    #diamwolf-bang-document > .diamwolf-bang-game-header { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .diamwolf-bang-card { transition: none; } .diamwolf-bang-card:not(.is-compact):hover { transform: none; } }