Quintine
b9718acda8
Let the host change an existing permanent AI seat's difficulty, faction and player circle without removing and readding it. Shared strict validation limits configuration to the authenticated host in the lobby, existing profiles, enabled available factions and unoccupied circles. Preserve seat identity and initialize changed faction rosters consistently. Changes reset human readiness, keep bots ready and explain the changed fields in public history. Use existing AI strategies without calibration or strength changes. Full AI development waits for all non-AI game features; the goal retains the three adjacent 75% targets, mandatory Git checkpoints and selective subagents without a usage cutoff. No mode or publication gate opens. Independent implementation and review cover the quote, engine, controls and persistence tests. Types, lint, 4916 offline tests, production build and 46 HTTP checks pass on stable final source. Ten new offline cases cover all factions/profiles, strict guards, roster/identity, immutable rejection, restart/privacy and both configuration-versus-start race outcomes. HTTP verifies authentication, host authority, CSRF, stale/future requests, private views and saved settings. Identical direct actions preserve players/readiness/history but retain the generic action store's version increment; controls suppress them. Browser QA changed difficulty, faction and circle, verified readiness reset and history, restored settings after refresh and used keyboard selection. Expanded mobile cards were widened after discovering cramped controls; measured selects/buttons are 272 by 44 pixels at a 390-pixel viewport without document overflow. Desktop controls measure 169 by 44 pixels. Screenshot capture timed out, so screenshot-based visual acceptance remains unverified. Configuration controls disappear after starting and saved AI settings persist in setup. The final source rerun follows a preliminary run invalidated by the mobile/readability edits. All 1262 original rooms, 2644 seats and every prior recovery/entry/handover/delegation/migration row remain unchanged. SQLite integrity and foreign keys pass. No database reset, migration, server restart, usage check or automation was performed. Broader rules, components, durable unattended continuation and final AI acceptance remain unfinished. Verified source tree: 8c1baf4602d000ee37f081b2a03f8a87e89a63ef14a7121f24268c575a1ac281
1930 lines
35 KiB
CSS
1930 lines
35 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;
|
||
}
|