Quintine
c2f24fc546
Add an enlarged public sheet beneath each player, available while actions are pending. Only faction identity and table rules mode enter the reader; it sends no action and receives no private player data. Basic/Advanced preview explicitly leaves the table mode unchanged. Native mode control, keyboard scrolling, Escape/focus restoration and internal links use existing dialog components. The internal gallery covers all twelve factions with bundled Homeworld artwork. Share every faction's Basic and Advanced paragraphs with the main reference. Replace Richese's generic placeholder, centralize Ecaz/Moritani guidance from settled contracts, correct CHOAM Auditor/Baliset/Jubba availability and align the Fremen/Ecaz Sietch Tabr exception. Full printed text, unresolved powers and combined-rule acceptance remain explicit. No new rule, AI strategy or gate. Four focused tests cover all12 identities, shared paragraphs, artwork files, internal links, mode separation, gallery defaults and per-viewer busy controls. The first busy-control assertion falsely matched CSS disabled variants; it now checks actual disabled attributes. All16 related focused cases pass. Independent review caught missing Moritani optionality and stale Fremen exception text; those were fixed and final review found no material issue. Auditor limits and full actual-card cancellation cost were checked against the existing contract. Types, lint, all 5000 offline tests and production build pass on stable source. No API/auth/persistence changes; HTTP tests were not repeated. Browser QA reused the existing two-player Basic auction without game actions. Both own and opposing inspectors work; Enter opens, Escape closes and returns focus, reopening resets Basic, and Advanced preview explicitly preserves the Basic table. ArrowDown scrolls the focused long sheet. At390px, dialog359x828, scroll client/width342 without horizontal overflow,16px text and44px controls. Gallery334px fits without overflow; Richese, Ecaz and Moritani selection and Advanced paragraphs render, faction change resets Basic and bundled art loads. Internal help and Advanced Moritani links expand their topics. Back and refresh preserve four hand cards and the pending minimum bid2; normal viewport restored. Screenshot capture timed out; full visual/screen-reader acceptance remains open. All 1539 opening games, 3259 saved seats and auxiliary rows remain identical, including the QA room. SQLite integrity and foreign keys pass. No new games, server restart, migration, reset or recurring automation. Private evidence: 20260921-faction-sheets. Verified source tree: 6b738958f30fc381d3e9eb26398239bbd88f1d4281f8ff5ff2bb3b3259494a93
2021 lines
42 KiB
CSS
2021 lines
42 KiB
CSS
@import 'tailwindcss';
|
||
@import 'tw-animate-css';
|
||
@import 'shadcn/tailwind.css';
|
||
@theme inline {
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-primary: var(--primary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-border: var(--border);
|
||
--color-input: var(--border);
|
||
--color-muted: var(--muted);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-ring: var(--primary);
|
||
--color-secondary: var(--muted);
|
||
--color-secondary-foreground: var(--foreground);
|
||
--color-accent: var(--muted);
|
||
--color-accent-foreground: var(--foreground);
|
||
--font-sans: Arial, Helvetica, sans-serif;
|
||
}
|
||
:root {
|
||
--background: #101311;
|
||
--foreground: #eeeae0;
|
||
--primary: #ddbc77;
|
||
--primary-foreground: #181b15;
|
||
--border: #34372e;
|
||
--muted: #23281f;
|
||
--muted-foreground: #a1a59a;
|
||
--radius: 0.25rem;
|
||
color-scheme: dark;
|
||
}
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
background: var(--background);
|
||
color: var(--foreground);
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
font-size: 16px;
|
||
}
|
||
button,
|
||
a,
|
||
input,
|
||
select,
|
||
textarea {
|
||
font: inherit;
|
||
}
|
||
button,
|
||
a {
|
||
touch-action: manipulation;
|
||
}
|
||
button {
|
||
cursor: pointer;
|
||
}
|
||
button:disabled {
|
||
cursor: default;
|
||
}
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
button:focus-visible,
|
||
a:focus-visible {
|
||
outline: 2px solid var(--primary);
|
||
outline-offset: 4px;
|
||
}
|
||
.table-shell {
|
||
max-width: 1720px;
|
||
margin: auto;
|
||
padding: 0 44px;
|
||
}
|
||
.masthead {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
min-height: 108px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.wordmark {
|
||
font-size: 43px;
|
||
letter-spacing: 10px;
|
||
font-weight: 500;
|
||
line-height: 1;
|
||
}
|
||
.wordmark span {
|
||
display: block;
|
||
font-size: 10px;
|
||
letter-spacing: 4px;
|
||
color: #b7b7a7;
|
||
margin-top: 12px;
|
||
}
|
||
.masthead-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 14px;
|
||
color: #c6c6b9;
|
||
}
|
||
.masthead-right a {
|
||
display: flex;
|
||
gap: 9px;
|
||
align-items: center;
|
||
margin-left: 28px;
|
||
}
|
||
.table-sounds { position: relative; max-width: 100%; font-size: 14px; }
|
||
.table-sounds summary { display: flex; align-items: center; gap: 8px; }
|
||
.table-sounds summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
|
||
.table-sounds-panel {
|
||
position: absolute; right: 0; top: calc(100% + 8px); z-index: 45;
|
||
display: grid; gap: 12px; width: min(280px, calc(100vw - 48px));
|
||
padding: 16px; border: 1px solid var(--border); border-radius: 8px;
|
||
background: #141814; color: #f5ecda; box-shadow: 0 8px 28px #0008;
|
||
font-size: 14px; line-height: 1.5;
|
||
}
|
||
.table-sounds-panel p { margin: 0; }
|
||
.live-table .masthead { flex-wrap: wrap; gap: 12px; }
|
||
.live-table .masthead-right { flex-wrap: wrap; }
|
||
@media (max-width: 950px) {
|
||
.live-table .masthead-right { position: relative; }
|
||
.table-sounds { position: static; }
|
||
.table-sounds-panel { left: 0; right: auto; }
|
||
}
|
||
.status-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
background: #9ab895;
|
||
border-radius: 50%;
|
||
}
|
||
.lobby-grid {
|
||
display: grid;
|
||
grid-template-columns: 285px minmax(380px, 1fr) 300px;
|
||
min-height: 730px;
|
||
}
|
||
.faction-sidebar {
|
||
padding: 36px 28px 32px 0;
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
.eyebrow {
|
||
font-size: 11px;
|
||
color: #a5a795;
|
||
letter-spacing: 2px;
|
||
font-weight: 600;
|
||
}
|
||
h1 {
|
||
font-size: 33px;
|
||
line-height: 1.2;
|
||
font-family: Georgia, serif;
|
||
font-weight: 400;
|
||
margin: 22px 0 28px;
|
||
}
|
||
h2 {
|
||
font-size: 28px;
|
||
font-family: Georgia, serif;
|
||
font-weight: 400;
|
||
margin: 20px 0 12px;
|
||
}
|
||
.faction-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.faction-choice {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: transparent;
|
||
border: 1px solid transparent;
|
||
border-radius: 5px;
|
||
width: 100%;
|
||
color: var(--foreground);
|
||
padding: 12px 9px;
|
||
text-align: left;
|
||
}
|
||
.faction-choice:hover {
|
||
background: #1d231b;
|
||
}
|
||
.faction-choice.selected {
|
||
background: #222b22;
|
||
border-color: #485343;
|
||
}
|
||
.faction-choice > span:nth-child(2) {
|
||
flex: 1;
|
||
}
|
||
.faction-choice strong {
|
||
font-size: 15px;
|
||
display: block;
|
||
font-weight: 500;
|
||
}
|
||
.faction-choice small {
|
||
font-size: 11px;
|
||
color: #a8afa1;
|
||
display: block;
|
||
margin-top: 5px;
|
||
}
|
||
.faction-choice svg {
|
||
color: #6c7764;
|
||
}
|
||
.sigil {
|
||
display: grid;
|
||
place-items: center;
|
||
flex: 0 0 33px;
|
||
height: 36px;
|
||
border: 1px solid var(--faction-color);
|
||
color: var(--faction-color);
|
||
font-family: Georgia, serif;
|
||
font-size: 22px;
|
||
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
|
||
}
|
||
.planet-stage {
|
||
position: relative;
|
||
padding: 28px 30px 20px;
|
||
background: radial-gradient(ellipse at 50% 38%, #33332466, transparent 65%);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.stage-top,
|
||
.stage-bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
font-size: 10px;
|
||
letter-spacing: 2px;
|
||
color: #919581;
|
||
}
|
||
.stage-top span:first-child {
|
||
color: #d0c09b;
|
||
}
|
||
.stage-bottom {
|
||
margin-top: auto;
|
||
padding-top: 30px;
|
||
}
|
||
.planet-preview {
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
width: min(100%, 490px);
|
||
aspect-ratio: 1;
|
||
margin-top: 30px;
|
||
border-radius: 50%;
|
||
border: 1px solid #666144;
|
||
background:
|
||
repeating-conic-gradient(
|
||
from 0deg,
|
||
#82724900 0deg 19.8deg,
|
||
#88764d66 19.8deg 20deg
|
||
),
|
||
radial-gradient(
|
||
circle,
|
||
#292b23 0 14%,
|
||
#53503a 14.1% 14.4%,
|
||
#373727 14.5% 34%,
|
||
#605538 34.1% 34.4%,
|
||
#343526 34.5% 57%,
|
||
#58543b 57.1% 57.4%,
|
||
#292f22 57.5%
|
||
);
|
||
box-shadow:
|
||
0 0 0 14px #1a1f1780,
|
||
0 0 0 15px #343a2b;
|
||
}
|
||
.orbital-ring {
|
||
position: absolute;
|
||
border: 1px dashed #99937142;
|
||
border-radius: 50%;
|
||
}
|
||
.ring-one {
|
||
inset: 8%;
|
||
}
|
||
.ring-two {
|
||
inset: 22%;
|
||
}
|
||
.planet-core {
|
||
position: absolute;
|
||
inset: 36%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
color: #c5bc9c;
|
||
background: #293127;
|
||
border: 1px solid #86805b;
|
||
border-radius: 50%;
|
||
}
|
||
.planet-core span {
|
||
font-size: 8px;
|
||
letter-spacing: 1px;
|
||
}
|
||
.map-point {
|
||
position: absolute;
|
||
text-align: center;
|
||
color: #e4c48a;
|
||
font-size: 10px;
|
||
letter-spacing: 1px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
flex-direction: column;
|
||
text-shadow: 0 2px 5px #000;
|
||
}
|
||
.point-0 {
|
||
left: 56%;
|
||
top: 13%;
|
||
}
|
||
.point-1 {
|
||
left: 76%;
|
||
top: 34%;
|
||
}
|
||
.point-2 {
|
||
left: 59%;
|
||
top: 77%;
|
||
}
|
||
.point-3 {
|
||
left: 12%;
|
||
top: 62%;
|
||
}
|
||
.point-4 {
|
||
left: 12%;
|
||
top: 28%;
|
||
}
|
||
.north-label {
|
||
position: absolute;
|
||
top: -23px;
|
||
left: 49%;
|
||
font-size: 9px;
|
||
color: #ccc3a1;
|
||
}
|
||
.storm-line {
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 50%;
|
||
background: conic-gradient(
|
||
from 280deg,
|
||
transparent 0deg,
|
||
#b99a4055 1deg 19deg,
|
||
transparent 20deg
|
||
);
|
||
}
|
||
.faction-feature {
|
||
width: 100%;
|
||
max-width: 440px;
|
||
margin-top: 32px;
|
||
border-left: 2px solid var(--faction-color);
|
||
padding-left: 22px;
|
||
}
|
||
.faction-feature h2 {
|
||
font-size: 32px;
|
||
color: var(--faction-color);
|
||
margin: 10px 0;
|
||
}
|
||
.faction-feature p {
|
||
font-size: 14px;
|
||
color: #bdc0b0;
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
.feature-stats {
|
||
display: flex;
|
||
gap: 36px;
|
||
margin-top: 18px;
|
||
}
|
||
.feature-stats span {
|
||
font-size: 11px;
|
||
color: #a3aa97;
|
||
}
|
||
.feature-stats b {
|
||
display: block;
|
||
font-size: 23px;
|
||
font-weight: 400;
|
||
color: #e3dfd0;
|
||
margin-bottom: 5px;
|
||
}
|
||
.setup-panel {
|
||
padding: 36px 0 28px 28px;
|
||
border-left: 1px solid var(--border);
|
||
}
|
||
.setup-panel h2 {
|
||
margin-top: 24px;
|
||
}
|
||
.muted {
|
||
color: #b6bbac;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
.setup-panel > label {
|
||
display: block;
|
||
font-size: 13px;
|
||
margin: 24px 0 10px;
|
||
}
|
||
input[data-slot='input'] {
|
||
height: 44px;
|
||
background: #171c15;
|
||
border-radius: 3px;
|
||
font-size: 14px;
|
||
border-color: #454a3a;
|
||
}
|
||
.setting-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
margin-top: 28px;
|
||
}
|
||
.pill {
|
||
font-size: 10px;
|
||
letter-spacing: 1px;
|
||
background: #303626;
|
||
border: 1px solid #555d41;
|
||
color: #c5d19b;
|
||
padding: 4px 8px;
|
||
border-radius: 3px;
|
||
}
|
||
.fine {
|
||
font-size: 11px;
|
||
color: #989f8d;
|
||
line-height: 1.6;
|
||
}
|
||
.expansion-list {
|
||
display: grid;
|
||
gap: 15px;
|
||
margin: 20px 0 30px;
|
||
}
|
||
.expansion {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
color: #c5c9bc;
|
||
cursor: pointer;
|
||
}
|
||
.expansion input {
|
||
accent-color: var(--primary);
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
.primary-action {
|
||
width: 100%;
|
||
min-height: 46px;
|
||
border-radius: 3px;
|
||
gap: 12px;
|
||
font-size: 14px;
|
||
}
|
||
.primary-action svg:last-child {
|
||
margin-left: auto;
|
||
}
|
||
.join-divider {
|
||
font-size: 10px;
|
||
text-align: center;
|
||
letter-spacing: 1.4px;
|
||
margin: 26px 0;
|
||
color: #949b85;
|
||
}
|
||
.join-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
.join-row button {
|
||
height: 44px;
|
||
width: 48px;
|
||
border-radius: 3px;
|
||
}
|
||
.table-note {
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 32px;
|
||
padding-top: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 12px;
|
||
line-height: 1.8;
|
||
color: #a8af9c;
|
||
}
|
||
.development-note {
|
||
font-size: 11px;
|
||
line-height: 1.6;
|
||
color: #b5a477;
|
||
margin-top: 24px;
|
||
}
|
||
.notice {
|
||
padding: 12px;
|
||
border: 1px solid #807145;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
color: #efd597;
|
||
}
|
||
footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 15px;
|
||
padding: 23px 0;
|
||
border-top: 1px solid var(--border);
|
||
font-size: 11px;
|
||
color: #919986;
|
||
letter-spacing: 0.4px;
|
||
}
|
||
@media (min-width: 1450px) {
|
||
.lobby-grid {
|
||
grid-template-columns: 300px minmax(460px, 1fr) 340px;
|
||
min-height: 800px;
|
||
}
|
||
.planet-preview {
|
||
width: 490px;
|
||
}
|
||
}
|
||
@media (max-width: 1150px) {
|
||
.table-shell {
|
||
padding: 0 24px;
|
||
}
|
||
.lobby-grid {
|
||
grid-template-columns: 240px minmax(310px, 1fr) 270px;
|
||
}
|
||
.planet-stage {
|
||
padding: 28px 20px;
|
||
}
|
||
.faction-sidebar {
|
||
padding-right: 16px;
|
||
}
|
||
.setup-panel {
|
||
padding-left: 20px;
|
||
}
|
||
.faction-choice small {
|
||
font-size: 10px;
|
||
}
|
||
.planet-core svg {
|
||
width: 55px;
|
||
}
|
||
.stage-top span:last-child {
|
||
display: none;
|
||
}
|
||
}
|
||
@media (max-width: 950px) {
|
||
.lobby-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.planet-stage {
|
||
grid-column: 1/-1;
|
||
grid-row: 1;
|
||
min-height: 500px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 28px;
|
||
}
|
||
.stage-top,
|
||
.stage-bottom {
|
||
grid-column: 1/-1;
|
||
}
|
||
.planet-preview {
|
||
margin: 15px 0;
|
||
}
|
||
.faction-feature {
|
||
margin: 0;
|
||
}
|
||
.faction-sidebar {
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.setup-panel {
|
||
border-top: 1px solid var(--border);
|
||
border-left: 0;
|
||
padding-left: 28px;
|
||
}
|
||
.faction-choice {
|
||
max-width: 330px;
|
||
}
|
||
}
|
||
@media (max-width: 600px) {
|
||
.table-shell {
|
||
padding: 0 18px;
|
||
}
|
||
.masthead {
|
||
min-height: 88px;
|
||
}
|
||
.wordmark {
|
||
font-size: 32px;
|
||
}
|
||
.wordmark span {
|
||
font-size: 8px;
|
||
}
|
||
.masthead-right {
|
||
font-size: 0;
|
||
gap: 0;
|
||
}
|
||
.masthead-right a {
|
||
font-size: 12px;
|
||
margin: 0;
|
||
}
|
||
.status-dot {
|
||
display: none;
|
||
}
|
||
.planet-stage {
|
||
display: flex;
|
||
padding: 24px 12px;
|
||
gap: 12px;
|
||
min-height: 0;
|
||
}
|
||
.planet-preview {
|
||
width: 78%;
|
||
margin: 22px 0;
|
||
}
|
||
.faction-feature {
|
||
margin-top: 20px;
|
||
}
|
||
.faction-feature h2 {
|
||
font-size: 26px;
|
||
}
|
||
.stage-bottom {
|
||
display: none;
|
||
}
|
||
.lobby-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.faction-sidebar {
|
||
order: 1;
|
||
border-right: 0;
|
||
padding: 25px 0;
|
||
}
|
||
.faction-sidebar h1 {
|
||
font-size: 28px;
|
||
margin: 12px 0 22px;
|
||
}
|
||
.faction-sidebar h1 br {
|
||
display: none;
|
||
}
|
||
.faction-list {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 6px;
|
||
}
|
||
.faction-choice {
|
||
padding: 10px 6px;
|
||
gap: 9px;
|
||
}
|
||
.faction-choice strong {
|
||
font-size: 13px;
|
||
}
|
||
.faction-choice small,
|
||
.faction-choice svg {
|
||
display: none;
|
||
}
|
||
.setup-panel {
|
||
order: 2;
|
||
padding: 26px 0;
|
||
}
|
||
.planet-stage {
|
||
order: 0;
|
||
}
|
||
.feature-stats {
|
||
gap: 28px;
|
||
}
|
||
footer {
|
||
font-size: 10px;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
/* Shared play surface */
|
||
.wordmark-button {
|
||
background: none;
|
||
border: 0;
|
||
text-align: left;
|
||
color: inherit;
|
||
}
|
||
.game-banner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 24px 0;
|
||
font-size: 14px;
|
||
}
|
||
.phase-track {
|
||
display: flex;
|
||
gap: 6px;
|
||
overflow: auto;
|
||
padding-bottom: 20px;
|
||
}
|
||
.phase-track > span {
|
||
flex: 1;
|
||
display: flex;
|
||
gap: 7px;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
font-size: 11px;
|
||
color: #7e8a77;
|
||
border-bottom: 2px solid #303c2b;
|
||
padding: 8px 5px 12px;
|
||
}
|
||
.phase-track b {
|
||
font-weight: 400;
|
||
}
|
||
.phase-track .current {
|
||
color: #f0cf86;
|
||
border-color: #d7b16c;
|
||
}
|
||
.phase-track .done {
|
||
color: #b8c5a8;
|
||
}
|
||
.play-grid {
|
||
display: grid;
|
||
grid-template-columns: 210px minmax(450px, 1fr) 280px;
|
||
gap: 24px;
|
||
}
|
||
.players-panel {
|
||
border-right: 1px solid var(--border);
|
||
padding-right: 22px;
|
||
}
|
||
.player-card {
|
||
padding: 20px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.player-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.player-heading strong {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--faction-color);
|
||
}
|
||
.player-heading small {
|
||
font-size: 12px;
|
||
display: block;
|
||
color: #a4ac99;
|
||
margin-top: 4px;
|
||
}
|
||
.player-heading span:nth-child(2) {
|
||
flex: 1;
|
||
}
|
||
.player-stats {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
font-size: 11px;
|
||
color: #9faa91;
|
||
margin-top: 14px;
|
||
}
|
||
.active-player {
|
||
background: linear-gradient(90deg, #d1b26313, transparent);
|
||
border-left: 2px solid var(--faction-color);
|
||
padding-left: 10px;
|
||
}
|
||
.resource-readout {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: #e0bf78;
|
||
margin: 26px 0 14px;
|
||
}
|
||
.resource-readout strong {
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
}
|
||
.resource-readout span {
|
||
font-size: 12px;
|
||
color: #adb39e;
|
||
}
|
||
.board-column {
|
||
min-width: 0;
|
||
}
|
||
.board-toolbar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
color: #b3baa5;
|
||
}
|
||
.board-toolbar > span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.board-viewport {
|
||
overflow: auto;
|
||
aspect-ratio: 1;
|
||
scrollbar-width: thin;
|
||
border-radius: 50%;
|
||
background: #272d2050;
|
||
box-shadow: 0 0 45px #0006;
|
||
}
|
||
.game-board {
|
||
display: block;
|
||
min-width: 100%;
|
||
height: auto;
|
||
}
|
||
.territory {
|
||
cursor: pointer;
|
||
outline: none;
|
||
}
|
||
.territory polygon {
|
||
fill: #575f3530;
|
||
stroke: #ac9f6777;
|
||
stroke-width: 1.5;
|
||
transition:
|
||
fill 0.2s,
|
||
stroke 0.2s;
|
||
}
|
||
.territory.rock polygon {
|
||
fill: #272f26b0;
|
||
stroke: #b6a879;
|
||
}
|
||
.territory.stronghold polygon {
|
||
fill: #756638c0;
|
||
stroke: #ebcd84;
|
||
stroke-width: 3;
|
||
}
|
||
.territory.polar polygon {
|
||
fill: #a4a58280;
|
||
}
|
||
.territory.selected polygon,
|
||
.territory:hover polygon,
|
||
.territory:focus polygon {
|
||
fill: #c8ad5b80;
|
||
stroke: #ffdfa1;
|
||
stroke-width: 3;
|
||
}
|
||
.territory text {
|
||
fill: #eee4c5;
|
||
font:
|
||
13px Arial,
|
||
sans-serif;
|
||
pointer-events: none;
|
||
paint-order: stroke;
|
||
stroke: #242c21;
|
||
stroke-width: 2px;
|
||
stroke-linejoin: round;
|
||
}
|
||
.sector-label {
|
||
font:
|
||
14px Arial,
|
||
sans-serif;
|
||
fill: #dbcc9a;
|
||
text-anchor: middle;
|
||
pointer-events: none;
|
||
}
|
||
.force-token circle {
|
||
stroke: #111910;
|
||
stroke-width: 2;
|
||
filter: drop-shadow(0 3px 2px #0006);
|
||
}
|
||
.force-token text,
|
||
.spice-amount {
|
||
font:
|
||
bold 13px Arial,
|
||
sans-serif;
|
||
fill: #161c13;
|
||
}
|
||
.storm-overlay {
|
||
transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
.territory-detail {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 24px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.territory-detail h3 {
|
||
font:
|
||
24px Georgia,
|
||
serif;
|
||
margin: 8px 0;
|
||
}
|
||
.territory-units {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
font-size: 13px;
|
||
min-height: 24px;
|
||
margin-top: 12px;
|
||
}
|
||
.action-panel {
|
||
border-left: 1px solid var(--border);
|
||
padding-left: 24px;
|
||
padding-bottom: 24px;
|
||
}
|
||
.action-panel h2 {
|
||
font-size: 26px;
|
||
}
|
||
.action-panel label {
|
||
font-size: 13px;
|
||
display: block;
|
||
margin: 16px 0 8px;
|
||
}
|
||
.action-panel label input,
|
||
.action-panel select,
|
||
.action-panel textarea {
|
||
margin-top: 8px;
|
||
}
|
||
.action-panel select,
|
||
.action-panel textarea {
|
||
width: 100%;
|
||
background: #1b2118;
|
||
color: #e5e4d3;
|
||
border: 1px solid #49513e;
|
||
border-radius: 3px;
|
||
padding: 10px 8px;
|
||
font-size: 13px;
|
||
min-height: 42px;
|
||
}
|
||
.game-action {
|
||
width: 100%;
|
||
min-height: 40px;
|
||
height: auto;
|
||
white-space: normal;
|
||
margin: 7px 0;
|
||
border-radius: 3px;
|
||
font-size: 13px;
|
||
padding: 10px 12px;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
}
|
||
.game-action + .game-action {
|
||
background: #283121;
|
||
color: #d4dabe;
|
||
border: 1px solid #485139;
|
||
}
|
||
.auction-card {
|
||
padding: 20px;
|
||
border: 1px solid #6d6847;
|
||
background: #393b2333;
|
||
margin: 20px 0;
|
||
}
|
||
.auction-card h3 {
|
||
font:
|
||
24px Georgia,
|
||
serif;
|
||
margin: 20px 0;
|
||
}
|
||
.auction-card strong {
|
||
font-size: 34px;
|
||
color: #d6b973;
|
||
font-weight: 400;
|
||
}
|
||
.auction-card small {
|
||
font-size: 13px;
|
||
color: #b2baa1;
|
||
}
|
||
.battle-location {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 15px;
|
||
color: #e0ba75;
|
||
}
|
||
.revealed-plans > div {
|
||
border: 1px solid #70633f;
|
||
padding: 14px;
|
||
margin: 10px 0;
|
||
font-size: 14px;
|
||
}
|
||
.revealed-plans span {
|
||
display: block;
|
||
font-size: 12px;
|
||
color: #b5bca6;
|
||
margin-top: 8px;
|
||
}
|
||
.prescience {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 6px;
|
||
}
|
||
.prescience button {
|
||
font-size: 11px;
|
||
}
|
||
.player-console {
|
||
margin-top: 28px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.draw-piles {
|
||
margin-bottom: 12px;
|
||
padding: 12px 16px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
}
|
||
.draw-piles dl { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
|
||
.draw-piles dt { font-size: 0.875rem; }
|
||
.draw-piles dd { margin: 2px 0 0; font-size: 1rem; }
|
||
.draw-piles strong { color: #e0c384; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
|
||
.draw-piles p { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; }
|
||
.draw-piles a { text-decoration: underline; text-underline-offset: 3px; }
|
||
.console-tabs {
|
||
display: flex;
|
||
gap: 28px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.console-tabs button {
|
||
background: none;
|
||
border: 0;
|
||
color: #9ca68d;
|
||
font-size: 14px;
|
||
padding: 18px 0;
|
||
border-bottom: 2px solid transparent;
|
||
}
|
||
.console-tabs button.selected {
|
||
color: #e0c384;
|
||
border-color: #e0c384;
|
||
}
|
||
.hand-grid {
|
||
display: flex;
|
||
gap: 16px;
|
||
overflow: auto;
|
||
padding: 24px 0;
|
||
}
|
||
.hand-browse { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding-top: 16px; }
|
||
.hand-browse label { display: grid; gap: 6px; flex: 1 1 180px; min-width: 0; font-size: 0.875rem; }
|
||
.hand-browse input, .hand-browse select { width: 100%; min-height: 44px; font-size: 1rem; }
|
||
.hand-browse-results { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; flex: 1 1 100%; font-size: 1rem; }
|
||
.hand-browse-results button { min-height: 44px; font-size: 1rem; }
|
||
.hand-browse-results a { text-decoration: underline; text-underline-offset: 3px; }
|
||
.hand-browse-empty { font-size: 1rem; line-height: 1.5; }
|
||
.hand-grid:focus-visible { outline: 2px solid #e0c384; outline-offset: 3px; }
|
||
.treachery-card {
|
||
flex: 0 0 240px;
|
||
min-height: 210px;
|
||
background: linear-gradient(145deg, #343a2b, #171e15);
|
||
border: 1px solid #626243;
|
||
border-radius: 6px;
|
||
padding: 18px 14px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition:
|
||
transform 0.2s,
|
||
border-color 0.2s;
|
||
}
|
||
.treachery-card:hover {
|
||
transform: translateY(-5px);
|
||
border-color: #dbc57e;
|
||
}
|
||
.treachery-card h3 {
|
||
font:
|
||
21px/1.2 Georgia,
|
||
serif;
|
||
margin: 16px 0;
|
||
color: #e7d6a7;
|
||
}
|
||
.card-mark {
|
||
display: block;
|
||
font:
|
||
50px Georgia,
|
||
serif;
|
||
text-align: center;
|
||
color: #bca264;
|
||
margin: 8px 0;
|
||
}
|
||
.treachery-card button {
|
||
font-size: 12px;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
}
|
||
.traitor-list {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
font-size: 14px;
|
||
color: #d7b58b;
|
||
padding: 8px 0 24px;
|
||
}
|
||
.game-log {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 20px 0;
|
||
max-height: 380px;
|
||
overflow: auto;
|
||
}
|
||
.game-log li {
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #293323;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
display: flex;
|
||
gap: 24px;
|
||
}
|
||
.game-log li > span {
|
||
font: 12px monospace;
|
||
color: #83916e;
|
||
}
|
||
.coverage-copy {
|
||
max-width: 800px;
|
||
padding: 16px 0 28px;
|
||
font-size: 15px;
|
||
line-height: 1.7;
|
||
color: #bbc3ac;
|
||
}
|
||
.coverage-copy h3 {
|
||
font:
|
||
24px Georgia,
|
||
serif;
|
||
color: #e4d5ad;
|
||
}
|
||
.coverage-copy a {
|
||
color: #e4c782;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.floating-notice {
|
||
position: fixed;
|
||
bottom: 24px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
max-width: calc(100vw - 32px);
|
||
padding: 16px 20px;
|
||
background: #3a3424;
|
||
border: 1px solid #baa469;
|
||
box-shadow: 0 12px 50px #0008;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
display: flex;
|
||
gap: 24px;
|
||
z-index: 30;
|
||
line-height: 1.6;
|
||
}
|
||
.floating-notice button {
|
||
background: none;
|
||
border: 0;
|
||
color: inherit;
|
||
font-size: 22px;
|
||
}
|
||
.rule-page {
|
||
max-width: 1000px;
|
||
margin: auto;
|
||
padding: 40px 24px;
|
||
line-height: 1.7;
|
||
}
|
||
.rule-page a {
|
||
color: #e1c37b;
|
||
}
|
||
.rule-page table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 14px;
|
||
}
|
||
.rule-page th,
|
||
.rule-page td {
|
||
padding: 14px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
}
|
||
@media (max-width: 1150px) {
|
||
.play-grid {
|
||
grid-template-columns: 170px minmax(330px, 1fr) 245px;
|
||
gap: 16px;
|
||
}
|
||
.action-panel {
|
||
padding-left: 16px;
|
||
}
|
||
.players-panel {
|
||
padding-right: 12px;
|
||
}
|
||
.phase-track {
|
||
gap: 5px;
|
||
}
|
||
.phase-track > span {
|
||
font-size: 10px;
|
||
}
|
||
.player-heading {
|
||
gap: 8px;
|
||
}
|
||
.player-heading strong {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
@media (max-width: 950px) {
|
||
.play-grid {
|
||
grid-template-columns: 1fr 260px;
|
||
}
|
||
.players-panel {
|
||
grid-column: 1/-1;
|
||
display: flex;
|
||
overflow: auto;
|
||
gap: 16px;
|
||
border: 0;
|
||
padding: 0;
|
||
}
|
||
.players-panel > .eyebrow,
|
||
.players-panel > .fine {
|
||
display: none;
|
||
}
|
||
.player-card {
|
||
min-width: 150px;
|
||
border: 1px solid var(--border);
|
||
padding: 14px;
|
||
}
|
||
.player-card:has(.lobby-bot-configuration[open]) {
|
||
flex: 0 0 min(20rem, calc(100vw - 3rem));
|
||
}
|
||
.resource-readout {
|
||
margin: 0;
|
||
min-width: 120px;
|
||
}
|
||
.phase-track > span {
|
||
min-width: 110px;
|
||
}
|
||
.board-viewport {
|
||
margin-top: 12px;
|
||
}
|
||
}
|
||
@media (max-width: 600px) {
|
||
.play-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.board-column {
|
||
order: 1;
|
||
}
|
||
.players-panel {
|
||
order: 0;
|
||
}
|
||
.action-panel {
|
||
order: 2;
|
||
padding: 24px 0;
|
||
border-left: 0;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.live-table .masthead {
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
padding: 16px 0;
|
||
}
|
||
.live-table .masthead-right {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
font-size: 0;
|
||
}
|
||
.live-table .masthead-right .status-dot {
|
||
display: none;
|
||
}
|
||
.live-table .masthead-right button {
|
||
font-size: 12px;
|
||
}
|
||
.game-banner {
|
||
font-size: 12px;
|
||
align-items: start;
|
||
}
|
||
.game-banner .eyebrow {
|
||
font-size: 10px;
|
||
}
|
||
.phase-track > span {
|
||
min-width: 95px;
|
||
font-size: 10px;
|
||
}
|
||
.player-card {
|
||
min-width: 140px;
|
||
}
|
||
.player-console {
|
||
margin-top: 10px;
|
||
}
|
||
.console-tabs {
|
||
gap: 20px;
|
||
}
|
||
.console-tabs button {
|
||
font-size: 12px;
|
||
}
|
||
.treachery-card {
|
||
flex-basis: min(78vw, 240px);
|
||
}
|
||
.rule-page table {
|
||
font-size: 12px;
|
||
}
|
||
.rule-page th,
|
||
.rule-page td {
|
||
padding: 10px 6px;
|
||
}
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
/* Original environmental artwork; motion stays out of the decision controls. */
|
||
.table-shell:not(.live-table) .planet-stage {
|
||
background-image:
|
||
linear-gradient(180deg, #101811a8, #101811c2 55%, #101311 95%),
|
||
url('/art/arrakis-dusk.png');
|
||
background-size: cover;
|
||
background-position: 48% 50%;
|
||
}
|
||
.planet-preview {
|
||
background-color: #242e21;
|
||
background-image:
|
||
repeating-conic-gradient(
|
||
from 0deg,
|
||
#82724900 0deg 19.8deg,
|
||
#cab47655 19.8deg 20deg
|
||
),
|
||
linear-gradient(#334029aa, #1c271bcc), url('/art/arrakis-terrain.png');
|
||
background-size: cover;
|
||
}
|
||
.lobby-grid,
|
||
.play-grid {
|
||
animation: table-enter 0.55s ease-out both;
|
||
}
|
||
.force-token {
|
||
animation: force-arrive 0.35s ease-out;
|
||
}
|
||
.treachery-card {
|
||
animation: card-arrive 0.35s ease-out both;
|
||
}
|
||
.status-dot {
|
||
box-shadow: 0 0 8px #9ab89577;
|
||
}
|
||
.current b {
|
||
color: #ffda86;
|
||
}
|
||
.planet-stage .faction-feature {
|
||
background: linear-gradient(90deg, #101811a8, transparent);
|
||
padding-top: 10px;
|
||
padding-bottom: 10px;
|
||
}
|
||
.planet-stage .faction-feature .eyebrow {
|
||
color: #b9c1a8;
|
||
}
|
||
@keyframes table-enter {
|
||
from {
|
||
opacity: 0;
|
||
translate: 0 8px;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
translate: 0 0;
|
||
}
|
||
}
|
||
@keyframes force-arrive {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes card-arrive {
|
||
from {
|
||
opacity: 0;
|
||
translate: 0 12px;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
translate: 0 0;
|
||
}
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.lobby-grid,
|
||
.play-grid,
|
||
.force-token,
|
||
.treachery-card {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
.action-panel .decision-checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.65rem;
|
||
margin: 0.8rem 0;
|
||
line-height: 1.5;
|
||
}
|
||
.action-panel .decision-checkbox input {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
flex: 0 0 auto;
|
||
accent-color: var(--primary);
|
||
margin: 0;
|
||
}
|
||
.alliance-funding {
|
||
margin: 1rem 0;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
padding: 0.85rem;
|
||
}
|
||
.alliance-funding summary {
|
||
cursor: pointer;
|
||
color: var(--primary);
|
||
font-size: 0.8rem;
|
||
line-height: 1.5;
|
||
}
|
||
.alliance-funding[open] summary {
|
||
margin-bottom: 0.8rem;
|
||
}
|
||
|
||
.help-tip {
|
||
display: inline-flex;
|
||
vertical-align: middle;
|
||
color: var(--primary);
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 5px;
|
||
border: 0;
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
cursor: help;
|
||
}
|
||
.help-tip:focus-visible {
|
||
outline: 2px solid var(--primary);
|
||
outline-offset: 2px;
|
||
}
|
||
.game-help-tooltip {
|
||
background: #23281f;
|
||
color: #eeeae0;
|
||
border: 1px solid #6b634b;
|
||
max-width: min(290px, calc(100vw - 24px));
|
||
padding: 12px 14px;
|
||
line-height: 1.6;
|
||
}
|
||
.phase-guidance {
|
||
margin: 0 0 18px;
|
||
font-size: 12px;
|
||
color: #b6bfa9;
|
||
}
|
||
.phase-guidance summary {
|
||
cursor: pointer;
|
||
color: var(--primary);
|
||
}
|
||
.phase-guidance p {
|
||
margin: 10px 0;
|
||
line-height: 1.6;
|
||
}
|
||
.reference-page {
|
||
max-width: 1280px;
|
||
margin: auto;
|
||
padding: 48px 5vw 90px;
|
||
}
|
||
.reference-header {
|
||
max-width: 830px;
|
||
padding-bottom: 38px;
|
||
}
|
||
.reference-header > a {
|
||
font-size: 12px;
|
||
color: #b6bfa9;
|
||
}
|
||
.reference-header .eyebrow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-top: 42px;
|
||
}
|
||
.reference-header h1 {
|
||
font-size: clamp(36px, 5vw, 68px);
|
||
line-height: 1.08;
|
||
margin: 20px 0;
|
||
}
|
||
.reference-header h1 em {
|
||
color: var(--primary);
|
||
font-weight: normal;
|
||
}
|
||
.reference-header p {
|
||
max-width: 650px;
|
||
line-height: 1.7;
|
||
color: #b6bfa9;
|
||
}
|
||
.reference-header .reference-status {
|
||
font-size: 12px;
|
||
}
|
||
.reference-status a {
|
||
color: var(--primary);
|
||
display: inline;
|
||
}
|
||
.reference-status svg {
|
||
display: inline;
|
||
}
|
||
.reference-layout {
|
||
display: grid;
|
||
grid-template-columns: 245px minmax(0, 1fr);
|
||
gap: 48px;
|
||
align-items: start;
|
||
}
|
||
.reference-nav,
|
||
.reference-results {
|
||
min-width: 0;
|
||
}
|
||
.reference-nav {
|
||
position: sticky;
|
||
top: 24px;
|
||
}
|
||
.reference-nav label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.reference-nav nav {
|
||
display: grid;
|
||
gap: 4px;
|
||
margin-top: 20px;
|
||
}
|
||
.reference-nav nav button {
|
||
text-align: left;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 12px;
|
||
border: 1px solid transparent;
|
||
border-radius: 6px;
|
||
color: #b6bfa9;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
.reference-nav nav button[aria-pressed='true'] {
|
||
border-color: #5d644a;
|
||
background: #283022;
|
||
color: #ead9ae;
|
||
}
|
||
.reference-nav nav button span {
|
||
opacity: 0.6;
|
||
}
|
||
.source-links {
|
||
margin-top: 28px;
|
||
font-size: 12px;
|
||
}
|
||
.source-links summary {
|
||
cursor: pointer;
|
||
color: var(--primary);
|
||
}
|
||
.source-links a {
|
||
display: block;
|
||
padding-top: 12px;
|
||
color: #b6bfa9;
|
||
}
|
||
.rule-topic {
|
||
scroll-margin-top: 28px;
|
||
border-top: 1px solid var(--border);
|
||
padding: 22px 0;
|
||
}
|
||
.rule-topic:target {
|
||
border-color: var(--primary);
|
||
background: #c9a86908;
|
||
}
|
||
.rule-topic summary {
|
||
cursor: pointer;
|
||
list-style: none;
|
||
position: relative;
|
||
padding-right: 85px;
|
||
}
|
||
.rule-topic summary::after {
|
||
content: '+';
|
||
position: absolute;
|
||
right: 2px;
|
||
top: 1px;
|
||
color: var(--primary);
|
||
font-size: 20px;
|
||
}
|
||
.rule-topic details[open] > summary::after {
|
||
content: '−';
|
||
}
|
||
.rule-topic h2 {
|
||
font-size: 23px;
|
||
line-height: 1.3;
|
||
margin: 9px 0;
|
||
}
|
||
.rule-topic summary p {
|
||
color: #b6bfa9;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
margin-bottom: 0;
|
||
}
|
||
.coverage-label {
|
||
display: inline-block;
|
||
font-family: sans-serif;
|
||
font-size: 9px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
border: 1px solid #4e5546;
|
||
color: #b6bfa9;
|
||
border-radius: 4px;
|
||
padding: 3px 6px;
|
||
}
|
||
.coverage-implemented {
|
||
color: #89c69e;
|
||
border-color: #436650;
|
||
}
|
||
.coverage-partial {
|
||
color: #d7b97b;
|
||
border-color: #766239;
|
||
}
|
||
.rule-topic-content {
|
||
color: #c5cab9;
|
||
font-size: 14px;
|
||
line-height: 1.8;
|
||
padding-top: 16px;
|
||
}
|
||
.rule-topic-content ol {
|
||
padding-left: 22px;
|
||
}
|
||
.rule-topic-content li {
|
||
padding: 5px 0 5px 5px;
|
||
}
|
||
.rule-example {
|
||
padding: 15px 20px;
|
||
background: #c9a8690b;
|
||
border-left: 2px solid var(--primary);
|
||
margin: 22px 0;
|
||
}
|
||
.rule-example strong {
|
||
color: var(--primary);
|
||
font-size: 10px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
.rule-example p {
|
||
margin: 6px 0 0;
|
||
}
|
||
.related-rules {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 20px;
|
||
}
|
||
.related-rules a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border: 1px solid var(--border);
|
||
padding: 4px 9px;
|
||
border-radius: 4px;
|
||
color: var(--primary);
|
||
font-size: 11px;
|
||
}
|
||
.rule-permalink {
|
||
display: inline-block;
|
||
margin-top: 18px;
|
||
font-size: 10px;
|
||
color: #a1ab95;
|
||
}
|
||
@media (max-width: 800px) {
|
||
.reference-layout {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
gap: 28px;
|
||
}
|
||
.reference-nav {
|
||
position: static;
|
||
}
|
||
.reference-nav nav {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
padding-bottom: 8px;
|
||
}
|
||
.reference-nav nav button {
|
||
white-space: nowrap;
|
||
gap: 14px;
|
||
}
|
||
.rule-topic summary {
|
||
padding-right: 25px;
|
||
}
|
||
.reference-header .eyebrow {
|
||
margin-top: 28px;
|
||
}
|
||
}
|
||
|
||
.bot-controls {
|
||
margin: 20px 0;
|
||
padding: 16px;
|
||
border: 1px solid var(--line, #50432d);
|
||
border-radius: 8px;
|
||
}
|
||
.bot-controls h3 {
|
||
font-size: 15px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.bot-controls label {
|
||
display: grid;
|
||
gap: 5px;
|
||
margin: 10px 0;
|
||
font-size: 12px;
|
||
}
|
||
.bot-controls select {
|
||
width: 100%;
|
||
background: #18201d;
|
||
color: #eee4ce;
|
||
border: 1px solid #50432d;
|
||
border-radius: 5px;
|
||
padding: 8px;
|
||
}
|
||
.lobby-bot-configuration select {
|
||
background: #18201d;
|
||
color: #eee4ce;
|
||
border: 1px solid #50432d;
|
||
border-radius: 5px;
|
||
padding: 8px;
|
||
}
|
||
|
||
.private-battle-plan {
|
||
margin: 1rem 0;
|
||
padding: 1rem;
|
||
border: 1px solid var(--gold, #d8b66a);
|
||
border-radius: 12px;
|
||
background: rgba(188, 151, 76, 0.08);
|
||
}
|
||
.private-battle-plan h3 {
|
||
margin: 0.5rem 0 1rem;
|
||
}
|
||
.private-battle-plan dl {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 0.85rem;
|
||
margin: 0;
|
||
}
|
||
.private-battle-plan dt {
|
||
opacity: 0.65;
|
||
font-size: 0.75rem;
|
||
}
|
||
.private-battle-plan dd {
|
||
margin: 0.2rem 0 0;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.truthtrance-panel fieldset {
|
||
min-width: 0;
|
||
margin: 16px 0;
|
||
padding: 12px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 3px;
|
||
}
|
||
.truthtrance-panel textarea {
|
||
resize: vertical;
|
||
line-height: 1.6;
|
||
}
|
||
.truthtrance-panel blockquote {
|
||
margin: 18px 0;
|
||
padding: 2px 14px;
|
||
border-left: 2px solid var(--primary);
|
||
}
|
||
.truthtrance-panel,
|
||
.truthtrance-history {
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.truthtrance-panel :is(textarea, select):focus-visible {
|
||
outline: 2px solid var(--primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.room-entry-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
max-width: 46rem;
|
||
margin: 1.5rem auto;
|
||
padding: clamp(1rem, 4vw, 2rem);
|
||
font-size: 1rem;
|
||
line-height: 1.65;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.room-entry-panel > :is(h1, p, output) {
|
||
margin: 0;
|
||
}
|
||
.room-entry-panel button {
|
||
min-height: 44px;
|
||
white-space: normal;
|
||
text-align: left;
|
||
}
|
||
.room-entry-panel > label {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.65rem;
|
||
}
|
||
.room-entry-panel input[type='checkbox'] {
|
||
flex: 0 0 auto;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-top: 0.2rem;
|
||
}
|
||
.room-entry-panel > details {
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.traitor-identity {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.75rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.5rem;
|
||
}
|
||
.traitor-identity > span {
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.leader-roster {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
|
||
gap: 1rem;
|
||
margin: 1rem 0;
|
||
}
|
||
.leader-identity {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 1.25rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.75rem;
|
||
background: linear-gradient(145deg, #293326, #141914);
|
||
text-align: center;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.leader-identity :is(h3, p) {
|
||
margin: 0;
|
||
}
|
||
.leader-identity button {
|
||
margin-top: auto;
|
||
min-height: 44px;
|
||
}
|
||
.leader-strength-disc {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 5rem;
|
||
height: 5rem;
|
||
border: 2px solid #b69a62;
|
||
border-radius: 50%;
|
||
outline: 1px solid #685b3f;
|
||
outline-offset: -7px;
|
||
background: radial-gradient(circle at 35% 30%, #4a5037, #151c15);
|
||
color: #f5dfb0;
|
||
font-family: Georgia, serif;
|
||
font-size: 2rem;
|
||
}
|
||
|
||
/* Authorized component faces, separate from the action that commits them. */
|
||
.setup-traitor-choices,
|
||
.visible-component-list {
|
||
display: grid;
|
||
gap: 0.75rem;
|
||
min-width: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.traitor-choice,
|
||
.visible-component-list > div,
|
||
.visible-component-list > li {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.65rem;
|
||
min-width: 0;
|
||
padding: 0.85rem;
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.6rem;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.traitor-choice .game-action {
|
||
margin: 0;
|
||
}
|
||
.battle-component-inspection {
|
||
margin-top: 0.75rem;
|
||
min-width: 0;
|
||
}
|
||
.battle-component-inspection > summary {
|
||
display: list-item;
|
||
cursor: pointer;
|
||
min-height: 44px;
|
||
padding: 0.75rem 0;
|
||
color: var(--primary);
|
||
}
|
||
.battle-component-inspection > summary:focus-visible {
|
||
outline: 2px solid var(--primary);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
.player-circle-choice {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
margin-top: 0.75rem;
|
||
font-size: 0.875rem;
|
||
}
|
||
.player-circle-choice select {
|
||
min-height: 44px;
|
||
}
|
||
.board-player-circle {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.card-unavailable {
|
||
margin: 0.7rem 0;
|
||
padding: 0.7rem;
|
||
border-left: 2px solid #bda369;
|
||
background: #151912;
|
||
color: #d4c7a5;
|
||
font-size: 0.875rem;
|
||
line-height: 1.5;
|
||
}
|
||
.private-spice-preview {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
padding: 1rem 1.25rem;
|
||
margin: 1rem 0;
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.6rem;
|
||
background: #262b20;
|
||
}
|
||
.private-spice-preview > div {
|
||
flex: 1 1 16rem;
|
||
}
|
||
.private-spice-preview h3 {
|
||
margin: 0.4rem 0;
|
||
font-family: Georgia, serif;
|
||
}
|
||
.private-spice-preview > button {
|
||
flex: 0 1 17rem;
|
||
}
|
||
.spice-card-table {
|
||
margin-top: 1.5rem;
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 1rem;
|
||
}
|
||
.spice-card-table > h3 {
|
||
margin: 0 0 0.8rem;
|
||
font-family: Georgia, serif;
|
||
font-weight: 400;
|
||
}
|
||
.spice-card-fronts {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
|
||
gap: 0.8rem;
|
||
}
|
||
.spice-card-front {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.8rem;
|
||
min-width: 0;
|
||
padding: 1rem;
|
||
border: 1px solid #71613f;
|
||
border-radius: 0.6rem;
|
||
background: linear-gradient(135deg, #393524, #1b2019);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.spice-card-front > strong {
|
||
font-family: Georgia, serif;
|
||
font-size: 1.15rem;
|
||
font-weight: 400;
|
||
}
|
||
.spice-card-front > button {
|
||
margin-top: auto;
|
||
}
|
||
|
||
/* Table discussion uses the same dark surfaces and readable controls as the table. */
|
||
.table-talk { margin-block: 1.5rem; border: 1px solid var(--border); border-radius: 0.75rem; overflow: hidden; }
|
||
.table-talk h2 { margin: 0; font-size: 1.125rem; }
|
||
.table-talk h2 button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 1rem; text-align: left; }
|
||
.table-talk-content { padding: 0 1rem 1rem; }
|
||
.table-talk-content label { display: block; margin-block: 0.75rem 0.375rem; font-size: 1rem; }
|
||
.table-talk-content select, .table-talk-content textarea { width: 100%; min-height: 44px; font-size: 1rem; }
|
||
.table-talk-content textarea { resize: vertical; }
|
||
.table-talk-content button { min-height: 44px; }
|
||
.table-talk-messages { list-style: none; margin: 1rem 0; padding: 0; max-height: 24rem; overflow-y: auto; overflow-wrap: anywhere; }
|
||
.table-talk-messages li { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
|
||
.table-talk-messages p { white-space: pre-wrap; unicode-bidi: plaintext; margin: 0.5rem 0 0; font-size: 1rem; }
|
||
.table-talk-author { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
|
||
.table-talk-author time { font-size: 0.875rem; }
|
||
.bribe-panel { font-size: 1rem; }
|
||
.bribe-panel > summary { cursor: pointer; min-height: 44px; padding-block: .65rem; font-weight: 600; }
|
||
.bribe-panel p, .bribe-status { display: block; margin-block: .7rem; }
|
||
.bribe-fields { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; }
|
||
.bribe-fields label { display: grid; gap: .35rem; flex: 1 1 12rem; min-width: 0; }
|
||
.bribe-fields select, .bribe-fields input { min-height: 44px; width: 100%; min-width: 0; font-size: 1rem; }
|
||
.bribe-fields button { font-size: 1rem; min-height: 44px; max-width: 100%; height: auto; white-space: normal; overflow-wrap: anywhere; }
|
||
|
||
.nexus-offer .notice, .nexus-offer .game-action { font-size: 1rem; }
|
||
.nexus-offer .game-action { min-height: 44px; height: auto; max-width: 100%; white-space: normal; }
|
||
|
||
.force-inspect-trigger { min-height: 44px; max-width: 100%; white-space: normal; font-size: 1rem; margin-top: .65rem; }
|
||
.force-dialog { position: fixed; top: 50%; left: 50%; z-index: 50; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: calc(100% - 1rem); max-width: 46rem; max-height: calc(100dvh - 1rem); overflow: hidden; border: 1px solid #8e7952; border-radius: 1rem; background: #141814; color: #eeeae0; box-shadow: 0 24px 80px #000b; outline: none; }
|
||
.force-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid #414536; font-size: 1rem; }
|
||
.force-dialog-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; }
|
||
.force-dialog-scroll:focus-visible { outline: 2px solid #ddbc77; outline-offset: -3px; }
|
||
.force-dialog-scroll h2 { margin: 0 0 .75rem; font: 1.6rem/1.3 Georgia, serif; overflow-wrap: anywhere; }
|
||
.force-dialog-scroll h3 { margin: 0; font-size: 1.15rem; }
|
||
.force-dialog-scroll p, .force-reference p { font-size: 1rem; line-height: 1.65; }
|
||
.force-details { display: grid; gap: 1rem; min-width: 0; font-size: 1rem; line-height: 1.6; }
|
||
.force-details p { margin: 0; }
|
||
.force-details a { color: #edca83; text-decoration: underline; text-underline-offset: .2em; }
|
||
.force-examples { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; margin: 1.25rem 0; }
|
||
.force-example { margin: 0; width: 10rem; max-width: 100%; text-align: center; }
|
||
.force-disc { width: 10rem; max-width: 100%; aspect-ratio: 1; border-radius: 50%; border: .4rem double var(--counter-color); background: #222a25; color: var(--counter-color); display: flex; position: relative; align-items: center; justify-content: center; box-shadow: inset 0 0 0 .35rem #131713, 0 .4rem 0 #070a07; }
|
||
.force-disc > span:first-child { font: bold 4rem/1 Georgia, serif; }
|
||
.force-disc-special > span:first-child { transform: translateY(-.6rem); }
|
||
.force-disc .force-star { position: absolute; bottom: .7rem; width: 1.7rem; height: 1.7rem; fill: currentColor; }
|
||
.force-disc-advisor { border-style: dashed; background: #111811; }
|
||
.force-disc-advisor > span:first-child { transform: translateY(-.7rem); }
|
||
.force-disc .force-stance { position: absolute; bottom: 1rem; font-size: 1rem; }
|
||
.force-example figcaption { margin-top: 1rem; font-size: 1rem; line-height: 1.5; }
|
||
.force-example figcaption strong { display: block; }
|
||
.force-notice { padding: .8rem 1rem; border: 1px solid #6b714d; border-radius: .5rem; background: #252b20; }
|
||
.force-pools { display: grid; gap: 0; margin: 0; }
|
||
.force-pools > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; padding: .75rem 0; border-bottom: 1px solid #424638; }
|
||
.force-pools dt { font-weight: 600; overflow-wrap: anywhere; }
|
||
.force-pools dd { margin: 0; }
|
||
.force-pools dd span { display: block; color: #d8d4c5; }
|
||
.force-marker { display: flex; align-items: start; gap: 1rem; padding: 1rem; border: 1px dashed #bbaa7e; border-radius: .5rem; }
|
||
.force-marker-back { display: grid; place-items: center; flex: 0 0 2.5rem; height: 3rem; font: 2rem/1 Georgia, serif; border: 2px dashed #bbaa7e; border-radius: .3rem; }
|
||
.force-reference { padding: 1rem; border: 1px solid #807352; border-radius: .75rem; font-size: 1rem; }
|
||
.force-reference label { display: grid; gap: .5rem; }
|
||
.force-reference select { min-height: 44px; width: 100%; font-size: 1rem; }
|
||
.faction-sheet { min-width: 0; margin-top: 1rem; overflow: hidden; border: 1px solid #807352; border-top-width: 4px; border-radius: .75rem; background: #20271f; color: #f2e8d3; }
|
||
.faction-sheet header, .faction-sheet section, .faction-sheet footer { padding: 1rem; }
|
||
.faction-sheet section + section, .faction-sheet footer { border-top: 1px solid #807352; }
|
||
.faction-sheet .faction-sheet-label { font-size: .875rem; color: #edcc8c; }
|
||
.faction-sheet p, .faction-sheet li { font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
|
||
.faction-sheet h3 { font: 1.8rem/1.3 Georgia, serif; }
|
||
.faction-sheet h4 { margin: 0 0 .75rem; font-size: 1.2rem; }
|
||
.faction-sheet ol { display: grid; gap: .9rem; margin: 0; padding-left: 1.4rem; }
|
||
.faction-sheet-art { display: block; width: 100%; max-height: 10rem; object-fit: cover; }
|
||
.faction-sheet footer a, .faction-sheet-help { display: block; padding-block: .65rem; font-size: 1rem; line-height: 1.5; text-decoration: underline; }
|
||
.faction-sheet-reader .faction-sheet-toggle { display: flex; align-items: center; gap: .75rem; min-height: 44px; margin-block: .75rem; font-size: 1rem; }
|
||
.faction-sheet-toggle input { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
|