Tim McCarthy
8614a6c820
During between_scenes there's now just one centered panel with the voting controls, nomination progress, and Crew Rank Ledger. The separate "Resting Deep Upkeep" panel (which only said hand refresh would happen later) is rendered solely during deep_upkeep, where the actual discard/ redraw happens. Moved the rank ledger into the voting panel and added a .between-grid.single layout. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
142 lines
2.6 KiB
CSS
142 lines
2.6 KiB
CSS
/* --- Between-scenes upkeep --- */
|
|
.between-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
/* Between scenes there's only the voting/roster panel — center it. */
|
|
.between-grid.single {
|
|
grid-template-columns: 1fr;
|
|
max-width: 640px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.between-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.voting-card, .deep-rest-card {
|
|
text-align: left;
|
|
}
|
|
|
|
.voted-confirmation-box {
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
border: 1px solid var(--success);
|
|
}
|
|
|
|
.ranks-ledger {
|
|
list-style: none;
|
|
}
|
|
|
|
.ranks-ledger li {
|
|
padding: 0.5rem;
|
|
border-bottom: 1px solid var(--edge-soft);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* --- Death fate panel --- */
|
|
.death-fate-card {
|
|
border: 2px solid var(--danger);
|
|
background: color-mix(in srgb, var(--danger) 5%, var(--surface));
|
|
padding: 2.5rem;
|
|
margin: 2rem auto;
|
|
max-width: 650px;
|
|
text-align: center;
|
|
}
|
|
|
|
.death-fate-card > h2 {
|
|
color: var(--danger);
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.death-fate-card .description {
|
|
font-size: 1.15rem;
|
|
color: var(--text);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.fate-choices {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.creation-form-wrapper {
|
|
text-align: left;
|
|
background: var(--well);
|
|
padding: 1.5rem;
|
|
border-radius: var(--radius-md);
|
|
border: 1px solid var(--edge-soft);
|
|
}
|
|
|
|
.creation-form-wrapper h3 {
|
|
color: var(--accent);
|
|
margin-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--edge-accent);
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.form-actions .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
/* --- Deep hand refresh drag & drop --- */
|
|
.upkeep-drag-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.upkeep-drag-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.upkeep-box {
|
|
min-height: 400px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.upkeep-box h4 {
|
|
margin-bottom: 1rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.upkeep-flex {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
padding: 1.5rem;
|
|
background: var(--well);
|
|
border: 1px dashed var(--edge);
|
|
border-radius: var(--radius-md);
|
|
align-content: flex-start;
|
|
min-height: 300px;
|
|
transition: var(--transition-smooth);
|
|
}
|
|
|
|
.end-story-box {
|
|
margin-top: 1.5rem;
|
|
border-top: 1px solid var(--edge-soft);
|
|
padding-top: 1rem;
|
|
}
|