Quintine
7814f740ef
Humans can discuss plans publicly or message another human seat privately while pending game decisions stay intact. The conversation panel provides plain text, explicit recipient names and factions, saved history, private pagination and exact retries through refresh. Human AI-control owners can still talk; bots do not interpret messages or negotiate. Existing game actions execute agreements. An additive indexed D1 message table stores discussion separately from game JSON, versioning, readiness and bot continuation. Every read/insert checks active seat credentials and membership; direct audiences and cursor lookups are filtered before limiting. Public history has no private activity counts or sequential IDs. Recovery/handover inherits seat history while fencing old credentials. Independent review found two retry races: a rotation between a committed insert and receipt read, and stale unmounted completion deleting a newer retry record. Both are fixed with regressions. A prior uncertain retry stays pending on later rejection. The nine focused offline cases and two HTTP cases cover production SQL, concurrent/altered receipts, audience/cursor privacy, rotation/membership races, actual saved-kit recovery and unchanged sealed setup state. Types, lint, all 4963 offline tests, production build and 48 HTTP tests pass on stable source. An initial check caught an invalid checklist status label; that was corrected before the successful final2 verification. Desktop browser checks send public/private messages, receive a peer reply, retain private history after refresh and remove it on channel switch. Literal markup and URLs remain text. Recipient and bystander API reads confirm the browser messages' audiences. Screenshot capture was unavailable and the viewport override did not take effect; mobile, full keyboard/visual and injected browser network-failure acceptance remain open. No final rules, mode, AI or publication gate changes. All 1373 pre-existing rooms, 2883 seats and auxiliary rows are unchanged. SQLite integrity/foreign keys pass; migration 0007 adds messages without replacing data. The healthy server was reused without restart. Private evidence: 20260921-table-talk. Verified source tree: 236dd55b6c15d55dbced735be67427e5fbd7fa348d583f119e67a03894ec21b0
1945 lines
36 KiB
CSS
1945 lines
36 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);
|
||
}
|
||
.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;
|
||
}
|
||
.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; }
|