/* app/javascript/stylesheets/_tokens.css */
@font-face {
font-family: "Cinzel";
src: url("/fonts/cinzel-latin-700-normal.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "OpenDyslexic";
src: url("/fonts/opendyslexic-latin-400-normal.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
:root {
color-scheme: dark;
--bg: #1a1a1a;
--surface: #242424;
--surface-2: #2e2e2e;
--border: #3d3830;
--text: #d8cfc0;
--text-muted: #7a7068;
--btn-bg: #333;
--btn-hover: #3d3830;
--btn-text: #d8cfc0;
--badge-normal: #555;
--badge-high: #6b5000;
--badge-urgent: #6b1a1a;
--badge-text: #d8cfc0;
--accent: #4a9eff;
--accent-hover: #3a8eef;
--accent-muted: #1a3a5c;
--warning: #e67e22;
--warning-text: #ff9800;
--warning-bg: #2a1f00;
--warning-border: #5c3d00;
--error-bg: #2a0a0a;
--error-border: #5c1a1a;
--danger: #8b2c2c;
--ref-alarm: #f87171;
--card-shadow-rest: 0 2px 8px rgba(0,0,0,0.5), 0 0 14px rgba(180,120,40,0.16);
--card-shadow-lift: 0 22px 52px rgba(0,0,0,0.85), 0 0 28px rgba(180,120,40,0.32);
--card-shadow-spent: 0 1px 6px rgba(0,0,0,0.3), 0 0 0px rgba(180,120,40,0);
--color-red: #b5453a;
--color-green: #3d8b55;
--color-blue: #4a7fb5;
--color-white: #c8c0b8;
--color-black: #7b4a8e;
--brass-hi: #6a4f2a;
--brass-lo: #3a2814;
--brass-edge: #1a1208;
--brass-text: #f0cf85;
--brass-text-deep: #b48028;
--brass-rivet: #a07a3a;
--text-faint: #5a5048;
}
.stack-page * {
box-sizing: border-box;
}
body {
background: var(--bg);
color: var(--text);
font-family:
system-ui,
-apple-system,
sans-serif;
font-size: 16px;
line-height: 1.5;
min-height: 100vh;
}
.stack-page {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
}
.stack-page h1 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text);
}
.stack-empty {
color: var(--text-muted);
font-style: italic;
text-align: center;
padding: 2rem 0;
}
.task-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
margin-bottom: 0.75rem;
}
.task-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.card-name {
font-weight: 600;
font-size: 1rem;
flex: 1;
}
.task-meta {
display: flex;
align-items: center;
gap: 0.4rem;
}
.tick-badge {
font-size: 0.7rem;
padding: 0.15rem 0.4rem;
border-radius: 4px;
background: var(--surface);
color: var(--text-muted);
border: 1px solid var(--border);
font-variant-numeric: tabular-nums;
letter-spacing: 0.03em;
}
.app-nav-tick {
font-size: 0.7rem;
color: var(--text-muted);
padding: 0 0.5rem;
font-variant-numeric: tabular-nums;
align-self: center;
}
.priority-badge {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
border-radius: 4px;
background: var(--badge-normal);
color: var(--badge-text);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.priority-badge.priority-high,
.priority-badge.priority-2 {
background: var(--badge-high);
}
.priority-badge.priority-urgent,
.priority-badge.priority-3 {
background: var(--badge-urgent);
}
.task-message {
color: var(--text);
font-size: 0.95rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.task-actions {
display: flex;
gap: 0.5rem;
}
.btn {
box-sizing: border-box;
flex: 1;
min-height: 44px;
padding: 0.6rem 0.75rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--btn-bg);
color: var(--btn-text);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
width: 100%;
}
.btn:active {
background: var(--btn-hover);
}
@media (hover: hover) {
.btn:hover {
background: var(--btn-hover);
}
}
.task-actions form {
flex: 1;
display: flex;
}
.task-actions form .btn {
flex: 1;
}
/* app/javascript/stylesheets/_base.css */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.skip-link {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
z-index: 10000;
background: var(--accent);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 0 0 4px 4px;
text-decoration: none;
font-weight: 600;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 0;
outline: 2px solid #fff;
outline-offset: -4px;
}
.btn-primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.btn-primary:active,
.btn-primary:focus {
background: var(--accent);
}
@media (hover: hover) {
.btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
}
.btn-secondary,
.btn-default {
background: var(--btn-bg);
color: var(--btn-text);
border: 1px solid var(--border);
}
.btn-warning {
background: #8a6d1b;
color: #f5e6a3;
border-color: #a07d20;
}
.btn-danger {
background: var(--danger);
color: #fff;
border-color: var(--danger);
}
.btn-success {
background: #1a6b2f;
color: #a8f0be;
border-color: #2a9044;
}
.btn-arcane {
background: #4a1a7a;
color: #d4aaff;
border-color: #6a2aaa;
}
@media (hover: hover) {
.btn-arcane:hover {
background: #5c228f;
border-color: #7b35bb;
}
}
.btn-forge {
background: #3d2800;
color: #e8a840;
border-color: #6b4a10;
}
@media (hover: hover) {
.btn-forge:hover {
background: #4f3500;
border-color: #8a6020;
}
}
.deck-page .library-header h1 {
color: #c8922a;
}
.library-page .library-header h1 {
color: #c4a0ff;
}
.btn-morning {
background: #2d7a45;
color: #a8f0c0;
border-color: #3a9055;
}
.btn-morning[disabled] {
background: #142e1c;
color: #3d7050;
border-color: #1e3a24;
opacity: 1;
}
.btn-afternoon {
background: #7a3d12;
color: #f0c080;
border-color: #9a5020;
}
.btn-afternoon[disabled] {
background: #3a1a08;
color: #9a7040;
border-color: #4a2510;
opacity: 1;
}
.btn-primary[disabled] {
background: #1a2535;
color: #4a6a9a;
border-color: #253545;
opacity: 1;
}
@media (hover: hover) {
.btn-success:hover {
background: #1f7d38;
}
.btn-warning:hover {
background: #9e7d20;
}
.btn-danger:hover {
background: #6e2020;
}
.btn-morning:not([disabled]):hover {
background: #358a50;
}
.btn-afternoon:not([disabled]):hover {
background: #8a4a1a;
}
}
.btn-small {
padding: 0.3rem 0.75rem;
font-size: 0.85rem;
min-height: 32px;
}
.btn-faded {
opacity: 0.35;
}
[data-forge] {
transition:
background 0.18s ease,
color 0.18s ease,
border-color 0.18s ease;
}
[data-forge=cold]::before {
content: "\1f512\a0";
font-size: 0.8em;
opacity: 0.8;
}
[data-forge=lit]::before {
content: "\1f525\a0";
font-size: 0.8em;
}
.btn-primary[data-forge=cold] {
background: #1e2e45;
color: #5a7ab0;
border-color: #253545;
}
.btn-morning[data-forge=cold] {
background: #1a4028;
color: #5a9870;
border-color: #1e4a2e;
}
.btn-afternoon[data-forge=cold] {
background: #4a2210;
color: #b08060;
border-color: #5a2c16;
}
.btn-warning[data-forge=cold] {
background: #4a3a10;
color: #aa9050;
border-color: #5a4818;
}
@media (hover: hover) {
[data-forge=cold]:hover {
filter: brightness(1.15);
cursor: pointer;
}
}
.page-container {
max-width: 800px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.page-header h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.header-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.4rem;
color: var(--text);
}
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=number],
.form-group textarea,
.form-group select,
.form-group .form-control {
width: 100%;
padding: 0.5rem 0.75rem;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 1rem;
font-family:
system-ui,
-apple-system,
sans-serif;
box-sizing: border-box;
}
.form-group input[type=text]:focus,
.form-group input[type=email]:focus,
.form-group input[type=password]:focus,
.form-group input[type=number]:focus,
.form-group textarea:focus,
.form-group select:focus,
.form-group .form-control:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
}
.form-group input[name$="[hints]"],
.form-group input[id$=_hints] {
font-family: monospace;
}
.form-group small {
display: block;
margin-top: 0.25rem;
color: var(--text-muted);
font-size: 0.8rem;
}
.form-group.checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
}
.form-group.checkbox label {
margin-bottom: 0;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.form-actions {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
}
#error_explanation {
background: var(--error-bg);
border: 1px solid var(--error-border);
border-left: 4px solid var(--danger);
padding: 0.75rem 1rem;
border-radius: 4px;
margin-bottom: 1.25rem;
}
#error_explanation h2 {
margin: 0 0 0.5rem;
font-size: 1rem;
color: var(--text);
}
#error_explanation ul {
margin: 0;
padding-left: 1.25rem;
color: var(--text);
}
.body-inline-error {
color: var(--danger);
font-size: 0.85rem;
margin: 0.35rem 0 0;
}
/* app/javascript/stylesheets/_dashboard.css */
.dashboard-page {
--lamp-x: 18%;
--lamp-y: 10vh;
--lamp-hue: 28;
--lamp-sat: 60%;
--lamp-light: 48%;
--lamp-intensity: 0.58;
--threshold-intensity: 0.34;
--ember-intensity: 0.42;
min-height: 100vh;
position: relative;
overflow: hidden;
isolation: isolate;
background: #131110;
color: #cec0ac;
}
.dashboard-page[data-time-of-day=predawn] {
--lamp-x: 12%;
--lamp-y: 8vh;
--lamp-hue: 12;
--lamp-sat: 50%;
--lamp-light: 42%;
--lamp-intensity: 0.42;
--threshold-intensity: 0.22;
--ember-intensity: 0.36;
}
.dashboard-page[data-time-of-day=morning] {
--lamp-x: 18%;
--lamp-y: 10vh;
--lamp-hue: 28;
--lamp-sat: 60%;
--lamp-light: 48%;
--lamp-intensity: 0.62;
--threshold-intensity: 0.36;
--ember-intensity: 0.42;
}
.dashboard-page[data-time-of-day=afternoon] {
--lamp-x: 22%;
--lamp-y: 12vh;
--lamp-hue: 38;
--lamp-sat: 52%;
--lamp-light: 55%;
--lamp-intensity: 0.55;
--threshold-intensity: 0.30;
--ember-intensity: 0.34;
}
.dashboard-page[data-time-of-day=dusk] {
--lamp-x: 20%;
--lamp-y: 14vh;
--lamp-hue: 18;
--lamp-sat: 60%;
--lamp-light: 44%;
--lamp-intensity: 0.50;
--threshold-intensity: 0.32;
--ember-intensity: 0.50;
}
.dashboard-grid-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
repeating-linear-gradient(
180deg,
transparent 0 86px,
rgba(0, 0, 0, 0.32) 86px 87px,
transparent 87px 88px),
repeating-linear-gradient(
90deg,
transparent 0 142px,
rgba(0, 0, 0, 0.18) 142px 143px,
transparent 143px 240px,
rgba(0, 0, 0, 0.18) 240px 241px,
transparent 241px 380px),
radial-gradient(
140% 100% at 50% 0%,
#1f1c19 0%,
#15130f 55%,
#0e0c09 100%);
}
.dashboard-grid-overlay::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.55;
}
.dashboard-lamp-glow {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(
circle 720px at var(--lamp-x) var(--lamp-y),
hsla(var(--lamp-hue), var(--lamp-sat), var(--lamp-light), var(--lamp-intensity)) 0%,
hsla(var(--lamp-hue), var(--lamp-sat), calc(var(--lamp-light) - 8%), calc(var(--lamp-intensity) * 0.55)) 18%,
hsla(var(--lamp-hue), 40%, 18%, calc(var(--lamp-intensity) * 0.18)) 40%,
transparent 70%);
mix-blend-mode: screen;
}
.dashboard-lamp-glow::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -14%;
height: 56%;
background:
radial-gradient(
55% 100% at 50% 100%,
hsla(22, 72%, 36%, calc(var(--ember-intensity) * 0.85)) 0%,
hsla(18, 60%, 22%, calc(var(--ember-intensity) * 0.45)) 28%,
transparent 70%);
mix-blend-mode: screen;
}
.dashboard-vignette {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(
120% 90% at 50% 60%,
transparent 38%,
rgba(0, 0, 0, 0.72) 92%),
radial-gradient(
60% 60% at 100% 100%,
rgba(0, 0, 0, 0.62),
transparent 70%);
}
.dashboard-torch-bracket {
position: absolute;
left: calc(var(--lamp-x) - 14px);
top: calc(var(--lamp-y) - 26px);
width: 28px;
height: 60px;
z-index: 3;
pointer-events: none;
opacity: 0.82;
}
.dashboard-torch-flame {
transform-origin: 50% 95%;
animation: dashboard-torch-flicker 2.4s ease-in-out infinite;
filter: blur(0.5px);
}
@keyframes dashboard-torch-flicker {
0%, 100% {
transform: scaleY(1) scaleX(1);
opacity: 0.95;
}
32% {
transform: scaleY(1.06) scaleX(0.94);
opacity: 0.85;
}
51% {
transform: scaleY(0.96) scaleX(1.04);
opacity: 1;
}
73% {
transform: scaleY(1.03) scaleX(0.97);
opacity: 0.9;
}
}
@media (prefers-reduced-motion: reduce) {
.dashboard-torch-flame {
animation: none;
}
}
.dashboard-container {
position: relative;
z-index: 1;
max-width: 620px;
margin: 0 auto;
padding: 1.5rem 1.5rem 4rem;
}
.dashboard-threshold {
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 460px;
height: 300px;
pointer-events: none;
z-index: 0;
background:
radial-gradient(
50% 60% at 50% 50%,
hsla(var(--lamp-hue), 45%, 38%, calc(var(--threshold-intensity) * 1.0)) 0%,
hsla(var(--lamp-hue), 35%, 24%, calc(var(--threshold-intensity) * 0.4)) 38%,
transparent 72%);
mix-blend-mode: screen;
}
.dashboard-container[data-fortress-status=ollama-offline] ~ * .dashboard-lamp-glow,
.dashboard-page:has(.dashboard-container[data-fortress-status=ollama-offline]) {
--lamp-intensity: 0.18;
--threshold-intensity: 0.08;
--ember-intensity: 0.08;
}
.dashboard-page:has(.dashboard-container[data-fortress-status=ollama-offline]) .dashboard-torch-flame {
opacity: 0.25;
}
.dashboard-page:has(.dashboard-container[data-fortress-status=stasis]) {
--lamp-hue: 290;
--lamp-sat: 70%;
--lamp-light: 52%;
--lamp-intensity: 0.42;
--ember-intensity: 0.28;
--threshold-intensity: 0.28;
}
.dashboard-header {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
margin-bottom: 1.5rem;
padding: 1.1rem 0 0.95rem;
border-bottom: 1px solid rgba(61, 56, 48, 0.6);
}
.dashboard-header-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.dashboard-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(232, 168, 64, 0.18) 30%,
rgba(232, 168, 64, 0.24) 50%,
rgba(232, 168, 64, 0.18) 70%,
transparent 100%);
pointer-events: none;
}
.branding {
display: flex;
align-items: center;
gap: 0.85rem;
}
.branding-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.branding h1 {
margin: 0;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.32em;
line-height: 1.15;
text-transform: uppercase;
color: #d8cfc0;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.dashboard-greeting {
margin: 4px 0 0;
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-style: italic;
font-size: 12.5px;
color: var(--text-muted, #7a7068);
line-height: 1.35;
max-width: 340px;
text-shadow: none;
text-align: left;
padding: 0;
}
.header-status {
display: flex;
align-items: center;
gap: 0.5rem;
}
.header-turn-block {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
}
.header-turn-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.turn-panel-label {
font-size: 0.82rem;
color: oklch(0.60 0.08 48);
font-variant-numeric: tabular-nums;
}
.ollama-orb {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
cursor: default;
}
.ollama-orb--online {
background-color: #4ade80;
box-shadow: 0 0 6px #4ade80;
}
.ollama-orb--offline {
background-color: #f87171;
box-shadow: 0 0 6px #f87171;
}
.ollama-orb--unknown {
background-color: #6b7280;
}
.ollama-orb--disabled {
background-color: var(--accent);
box-shadow: 0 0 6px var(--accent);
}
.ollama-orb--fallback {
background-color: #f97316;
box-shadow: 0 0 6px #f97316;
}
.urist-icon {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid rgba(184, 120, 56, 0.32);
box-shadow:
inset 0 1px 0 rgba(232, 168, 64, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 2px 6px rgba(0, 0, 0, 0.55);
}
.salver-meta {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin: 0 0 0.85rem;
padding: 0 0.15rem;
}
.salver-meta__now,
.salver-meta__count,
.salver-meta__resolved {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-variant-numeric: tabular-nums;
}
.salver-meta__now {
font-size: 11.5px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-muted, #7a7068);
}
.salver-meta__right {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.salver-meta__count {
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted, #7a7068);
transition:
color 320ms,
text-shadow 320ms,
letter-spacing 320ms;
}
.salver-meta__count--cleared {
color: #e8a840;
letter-spacing: 0.22em;
text-shadow: 0 0 8px rgba(232, 168, 64, 0.55), 0 0 18px rgba(232, 90, 26, 0.20);
animation: salver-cleared-pulse 2400ms ease-in-out infinite;
}
@keyframes salver-cleared-pulse {
0%, 100% {
text-shadow: 0 0 8px rgba(232, 168, 64, 0.55), 0 0 18px rgba(232, 90, 26, 0.20);
}
50% {
text-shadow: 0 0 14px rgba(232, 168, 64, 0.85), 0 0 28px rgba(232, 90, 26, 0.32);
}
}
@media (prefers-reduced-motion: reduce) {
.salver-meta__count--cleared {
animation: none;
}
}
.salver-meta__resolved {
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted, #7a7068);
font-weight: 400;
line-height: 1;
}
.salver-meta__resolved.is-empty {
display: none;
}
.plate-footer {
position: relative;
z-index: 1;
margin: 1.4rem 0 0;
text-align: center;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: oklch(0.42 0.02 50);
}
.dashboard-engraving {
position: fixed;
left: 0;
right: 0;
bottom: 14px;
z-index: 1;
text-align: center;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 9.5px;
letter-spacing: 0.5em;
text-transform: uppercase;
color: rgba(20, 14, 10, 0.7);
text-shadow: 0 1px 0 rgba(184, 120, 56, 0.10), 0 -1px 0 rgba(0, 0, 0, 0.85);
pointer-events: none;
opacity: 0.85;
}
@media (max-width: 540px) {
.dashboard-engraving {
font-size: 8.5px;
letter-spacing: 0.36em;
}
}
.energy-section {
display: none;
}
.stack-section {
margin-bottom: 2rem;
}
.stack-section h2 {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.stack-section-header {
margin-bottom: 0;
}
.stack-section-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.4rem;
padding-bottom: 0;
border-bottom: 0;
}
.energy-display {
background: var(--surface);
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid var(--border);
}
.energy-top-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.625rem;
}
.energy-level-label {
font-size: 0.85rem;
color: var(--text-muted);
}
.energy-level-label strong {
color: var(--text);
font-weight: 600;
}
.energy-selector {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.375rem;
}
.energy-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.75rem 0.5rem;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text-muted);
border-radius: 6px;
cursor: pointer;
font-weight: 500;
font-size: 0.85rem;
min-height: 52px;
transition: border-color 0.15s, background 0.15s;
}
.energy-btn-pip {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--border);
transition: background 0.15s, box-shadow 0.15s;
}
.energy-btn-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.energy-btn--1 .energy-btn-pip {
background: #6b7280;
}
.energy-btn--2 .energy-btn-pip {
background: #8b6914;
}
.energy-btn--3 .energy-btn-pip {
background: #4a9eff;
}
.energy-btn--4 .energy-btn-pip {
background: #22c55e;
}
.energy-btn--5 .energy-btn-pip {
background: #a855f7;
}
.energy-btn.active {
border-color: var(--accent);
background: var(--accent-muted);
color: var(--text);
}
.energy-btn.active .energy-btn-pip {
box-shadow: 0 0 6px currentColor;
}
.energy-btn--1.active {
border-color: #6b7280;
}
.energy-btn--2.active {
border-color: #8b6914;
background: rgba(139, 105, 20, 0.15);
}
.energy-btn--3.active {
border-color: #4a9eff;
}
.energy-btn--4.active {
border-color: #22c55e;
background: rgba(34, 197, 94, 0.1);
}
.energy-btn--5.active {
border-color: #a855f7;
background: rgba(168, 85, 247, 0.1);
}
@media (hover: hover) {
.energy-btn:not(.active):hover {
border-color: var(--text-muted);
background: rgba(255, 255, 255, 0.04);
}
.energy-btn.active:hover {
filter: brightness(1.25);
}
}
.energy-timestamp {
font-size: 0.75rem;
color: var(--text-muted);
margin: 0;
}
.warning {
color: var(--warning-text);
font-weight: 600;
}
.work-stack {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
background: transparent;
border-radius: 0;
padding: 14px 0 0;
box-shadow: none;
}
.work-stack::before {
content: "";
position: absolute;
top: 0;
left: -0.5rem;
right: -0.5rem;
height: 1px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(36, 28, 20, 0.85) 14%,
rgba(58, 42, 28, 0.95) 50%,
rgba(36, 28, 20, 0.85) 86%,
transparent 100%);
box-shadow: 0 1px 0 rgba(184, 120, 56, 0.06), 0 8px 18px rgba(0, 0, 0, 0.30);
pointer-events: none;
}
.overflow-banner {
position: sticky;
top: 0.5rem;
z-index: 100;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
margin-bottom: 1.5rem;
}
.overflow-subtext {
margin: 0;
font-size: 0.8rem;
font-family:
"Courier New",
Courier,
monospace;
color: #b8ff00;
text-shadow: 0 0 6px rgba(184, 255, 0, 0.4);
}
.overflow-btn {
flex-shrink: 0;
background: #0a1f08;
color: #b8ff00;
border: 1px solid #39ff14;
border-radius: 6px;
padding: 0.5rem 1.25rem;
font-family:
"Courier New",
Courier,
monospace;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
box-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
text-shadow: 0 0 6px rgba(184, 255, 0, 0.6);
}
.overflow-btn:hover:not(:disabled) {
background: #122e0e;
box-shadow: 0 0 16px rgba(57, 255, 20, 0.7);
}
.overflow-btn:disabled {
opacity: 0.5;
cursor: default;
}
@keyframes nuclear-particle-rise {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate(var(--drift), var(--rise)) scale(0.2);
opacity: 0;
}
}
@keyframes nuclear-spark-rise {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
80% {
opacity: 0.7;
}
100% {
transform: translate(var(--drift), var(--rise)) scale(0);
opacity: 0;
}
}
@keyframes nuclear-charge {
0% {
box-shadow: 0 0 3px #39ff14;
}
50% {
box-shadow:
0 0 16px #39ff14,
0 0 32px #b8ff00,
0 0 48px rgba(184, 255, 0, 0.25);
}
100% {
box-shadow: 0 0 3px #39ff14;
}
}
.nuclear-charge {
animation: nuclear-charge 2800ms ease-in-out infinite;
background: #091408 !important;
transition: background 4s ease;
}
.nuclear-charge h3 {
color: #7ecf5a !important;
transition: color 4s ease;
}
.nuclear-charge .task-message,
.nuclear-charge .task-message p,
.nuclear-charge .task-message li {
color: #4a8f30 !important;
transition: color 4s ease;
}
.nuclear-charge .task-meta,
.nuclear-charge .task-origin,
.nuclear-charge .tick-badge,
.nuclear-charge .phase-badge {
color: #3a6b24 !important;
border-color: #3a6b24 !important;
transition: color 4s ease, border-color 4s ease;
}
@keyframes nuclear-dissolve {
0% {
opacity: 1;
transform: scale(1);
}
15% {
box-shadow: 0 0 40px #b8ff00, 0 0 80px #39ff14;
filter: brightness(3) saturate(5) hue-rotate(80deg);
transform: scale(1.03);
}
100% {
opacity: 0;
filter: brightness(3) saturate(0);
transform: scale(0.95) translateY(-6px);
}
}
.nuclear-particle {
position: fixed;
width: 10px;
height: 14px;
border-radius: 50% 50% 40% 40%;
pointer-events: none;
z-index: 9999;
animation: nuclear-particle-rise 0.55s ease-out forwards;
}
.nuclear-spark {
position: fixed;
width: 4px;
height: 4px;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: nuclear-spark-rise 0.45s ease-out forwards;
}
.nuclear-dissolve {
animation: nuclear-dissolve 0.55s ease-out forwards;
overflow: hidden;
}
.overflow-terminal {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0;
color: #b8ff00;
font-family:
"Courier New",
Courier,
monospace;
font-size: 0.8rem;
line-height: 1.7;
}
.overflow-terminal-border {
border: 1px solid #39ff14;
padding: 0.75rem 1.5rem;
box-shadow: 0 0 16px rgba(57, 255, 20, 0.35), inset 0 0 10px rgba(100, 255, 0, 0.05);
}
.overflow-terminal-line {
white-space: nowrap;
text-shadow: 0 0 6px rgba(184, 255, 0, 0.9);
}
.overflow-terminal-confirm-row {
margin-top: 0.75rem;
display: flex;
gap: 0.75rem;
justify-content: center;
}
.overflow-terminal-confirm,
.overflow-terminal-cancel {
background: none;
font-family:
"Courier New",
Courier,
monospace;
font-size: 0.8rem;
padding: 0.3rem 1rem;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
.overflow-terminal-confirm {
border: 1px solid #39ff14;
color: #b8ff00;
text-shadow: 0 0 6px rgba(184, 255, 0, 0.8);
box-shadow: 0 0 8px rgba(57, 255, 20, 0.2);
}
.overflow-terminal-confirm:hover {
background: rgba(57, 255, 20, 0.1);
box-shadow: 0 0 16px rgba(57, 255, 20, 0.5);
}
.overflow-terminal-cancel {
border: 1px solid #666;
color: #888;
}
.overflow-terminal-cancel:hover {
border-color: #aaa;
color: #ccc;
}
.overflow-redacted {
display: inline-block;
min-width: 5.5em;
color: #b8ff00;
cursor: pointer;
text-shadow: 0 0 8px rgba(184, 255, 0, 0.9);
}
.overflow-redacted--revealed {
animation: nuclear-spark-rise 0s;
color: #fff;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}
.task-item {
--rail-color: oklch(0.46 0.10 52 / 0.65);
--rail-glow: rgba(107, 98, 88, 0.18);
--header-glow: oklch(0.22 0.03 52 / 0.18);
--slab-shadow: 0.55;
background-color: oklch(0.27 0.022 62 / 0.92);
background-image:
linear-gradient(
180deg,
rgba(48, 40, 32, 0.42) 0%,
rgba(30, 26, 22, 0.65) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
background-size: 100% 100%, 100px 100px;
border: 1px solid rgba(61, 56, 48, 0.85);
border-top-color: rgba(96, 82, 64, 0.65);
border-bottom-color: rgba(0, 0, 0, 0.6);
border-radius: 6px;
padding: 14px 16px 14px 18px;
box-shadow:
inset 0 1px 0 rgba(232, 168, 64, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.4),
6px 10px 0 -2px rgba(0, 0, 0, calc(var(--slab-shadow) * 0.4)),
8px 14px 22px rgba(0, 0, 0, calc(var(--slab-shadow) * 0.6)),
14px 22px 36px rgba(0, 0, 0, calc(var(--slab-shadow) * 0.4));
position: relative;
overflow: visible;
transition:
opacity 220ms,
box-shadow 240ms,
filter 320ms;
}
.task-item::before {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 3px;
border-radius: 3px 0 0 3px;
background:
linear-gradient(
180deg,
var(--rail-color) 0%,
color-mix(in oklch, var(--rail-color), transparent 60%) 100%);
box-shadow: 0 0 12px var(--rail-glow);
pointer-events: none;
}
.task-item[data-color=red] {
--rail-color: oklch(0.58 0.18 34 / 0.82);
--rail-glow: rgba(181, 69, 58, 0.28);
--header-glow: oklch(0.22 0.06 30 / 0.22);
}
.task-item[data-color=green] {
--rail-color: oklch(0.60 0.16 130 / 0.82);
--rail-glow: rgba(61, 139, 85, 0.28);
--header-glow: oklch(0.21 0.06 130 / 0.22);
}
.task-item[data-color=blue] {
--rail-color: oklch(0.60 0.14 225 / 0.82);
--rail-glow: rgba(74, 127, 181, 0.28);
--header-glow: oklch(0.21 0.06 225 / 0.22);
}
.task-item[data-color=white] {
--rail-color: oklch(0.78 0.05 65 / 0.68);
--rail-glow: rgba(200, 192, 184, 0.22);
--header-glow: oklch(0.26 0.02 62 / 0.14);
}
.task-item[data-color=black] {
--rail-color: oklch(0.55 0.16 290 / 0.78);
--rail-glow: rgba(123, 74, 142, 0.28);
--header-glow: oklch(0.21 0.07 290 / 0.22);
}
.task-item[data-color=colorless] {
--rail-color: oklch(0.50 0.08 50 / 0.62);
--rail-glow: rgba(107, 98, 88, 0.18);
}
.task-item-body {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
border-radius: 2px;
}
.task-card-thumb {
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
width: 130px;
pointer-events: none;
opacity: 0.92;
transition: opacity 500ms ease-in-out;
}
.task-card-thumb .card--vein {
pointer-events: none;
}
.task-card-thumb .compass-trigger {
display: none;
}
.task-item.priority-urgent {
box-shadow:
2px 3px 16px rgba(0, 0, 0, 0.52),
1px 1px 3px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 220, 100, 0.07),
0 0 18px oklch(0.50 0.22 28 / 0.28);
}
.task-item.priority-high {
box-shadow:
2px 3px 16px rgba(0, 0, 0, 0.52),
1px 1px 3px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 220, 100, 0.07),
0 0 14px oklch(0.60 0.18 52 / 0.22);
}
.task-item .task-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin: 0 0 6px;
padding: 0;
background: none;
border-bottom: 0;
}
.task-item .task-header h3 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--text, #d8cfc0);
letter-spacing: 0.01em;
line-height: 1.25;
}
.task-origin {
font-size: 0.65rem;
color: var(--text-muted);
background: var(--surface-2);
padding: 0.1rem 0.4rem;
border-radius: 3px;
border: 1px solid var(--border);
letter-spacing: 0.02em;
}
.task-item .task-message {
position: relative;
margin: 4px 0 12px;
color: var(--text-muted, #7a7068);
font-size: 13.5px;
padding-left: 0.65rem;
line-height: 1.45;
border-left: 1px solid rgba(61, 56, 48, 0.55);
}
.task-item .task-message p {
margin: 0;
}
.task-item .task-message ul.card-body-list {
margin: 0;
padding-left: 1.1rem;
}
.task-item .task-message ul.card-body-list li {
margin: 0;
}
.task-item .task-actions {
display: flex;
gap: 0.5rem;
}
.task-item > .psych-tip-btn {
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
margin-left: 0;
}
.task-item .task-actions .btn {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.task-item .task-actions form,
.task-item .task-actions .task-action-decline {
flex: 1;
display: flex;
}
.task-item .task-actions .btn {
flex: 1;
min-height: 44px;
}
.empty-state {
position: relative;
z-index: 1;
text-align: center;
padding: 2rem 1rem;
color: var(--text-muted);
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 8px;
}
.empty-state--cleared {
padding: 2.6rem 1.25rem 2.2rem;
color: var(--text);
background:
linear-gradient(
180deg,
rgba(48, 40, 32, 0.32) 0%,
rgba(30, 26, 22, 0.55) 100%),
var(--surface);
border: 1px solid rgba(61, 56, 48, 0.85);
border-top-color: rgba(96, 82, 64, 0.55);
border-bottom-color: rgba(0, 0, 0, 0.55);
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(232, 168, 64, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.4),
0 6px 18px rgba(0, 0, 0, 0.35);
}
.empty-state--cleared::before {
content: "\263c";
display: block;
font-size: 28px;
color: #e8a840;
text-shadow: 0 0 14px rgba(232, 168, 64, 0.6), 0 0 28px rgba(232, 90, 26, 0.20);
margin-bottom: 14px;
animation: empty-state-sun-pulse 2800ms ease-in-out infinite;
}
@keyframes empty-state-sun-pulse {
0%, 100% {
text-shadow: 0 0 14px rgba(232, 168, 64, 0.6), 0 0 28px rgba(232, 90, 26, 0.20);
}
50% {
text-shadow: 0 0 22px rgba(232, 168, 64, 0.85), 0 0 42px rgba(232, 90, 26, 0.32);
}
}
@media (prefers-reduced-motion: reduce) {
.empty-state--cleared::before {
animation: none;
}
}
.empty-state--cleared .idle-message {
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-style: italic;
font-size: 16px;
line-height: 1.55;
color: var(--text);
margin: 0 0 6px;
}
.empty-state--cleared .idle-subtitle {
color: var(--text-muted);
font-size: 13.5px;
font-style: italic;
line-height: 1.5;
margin: 8px 0 0;
}
.empty-state-headline {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin: 0 0 0.5rem;
}
.empty-state-body {
font-size: 0.875rem;
color: var(--text-muted);
margin: 0 0 1.25rem;
line-height: 1.5;
}
.empty-state-actions {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
.empty-state-actions .btn {
flex: 0 1 auto;
}
.idle-message {
font-size: 1rem;
color: var(--text);
font-style: italic;
margin: 0 0 0.25rem;
}
.idle-subtitle {
font-size: 0.8rem;
color: var(--text-muted);
font-style: normal;
margin: 0;
}
.upkeep-calculating {
animation: pulse-opacity 1.5s ease-in-out infinite;
}
.upkeep-calculating.hidden {
display: none;
}
@keyframes pulse-opacity {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
.tick-error-banner {
background: var(--warning-bg);
color: var(--warning-text);
border: 1px solid var(--warning-border);
border-radius: 6px;
padding: 0.625rem 1rem;
font-size: 0.875rem;
margin: 0 0 1rem;
}
.onboarding-overlay {
position: fixed;
inset: 0;
background: #0a0806;
z-index: 10100;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem;
visibility: hidden;
opacity: 0;
}
.onboarding-stage {
max-width: 480px;
width: 100%;
text-align: center;
position: relative;
}
.onboarding-beat {
visibility: hidden;
opacity: 0;
}
.onboarding-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.onboarding-headline {
font-size: clamp(1.5rem, 5vw, 2.25rem);
font-weight: 600;
color: var(--text);
line-height: 1.2;
margin: 0 0 1.5rem;
}
.onboarding-body {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.7;
margin: 0 0 2.5rem;
}
.onboarding-body strong {
color: var(--text);
font-weight: 500;
}
.onboarding-btn {
display: inline-block;
padding: 0.75rem 2rem;
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.04em;
transition: border-color 0.2s, color 0.2s;
}
.onboarding-btn:hover {
border-color: var(--text-muted);
color: var(--text);
}
.onboarding-enter {
border-color: var(--accent-muted);
color: var(--accent);
}
.onboarding-enter:hover {
border-color: var(--accent);
}
.interlude-choice-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin: 0 0 1.25rem;
}
.interlude-choice-row .onboarding-btn {
flex: 0 1 auto;
min-width: 11rem;
}
.interlude-choice-row--four {
max-width: 36rem;
margin-left: auto;
margin-right: auto;
}
.onboarding-fineprint {
font-size: 0.78rem;
color: var(--text-muted);
font-style: italic;
margin: 0;
letter-spacing: 0.02em;
}
.onboarding-fineprint--skip {
margin-top: 1.75rem;
}
.onboarding-fineprint--skip a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s;
}
.onboarding-fineprint--skip a:hover {
color: var(--text);
}
@media (max-width: 540px) {
.interlude-choice-row {
flex-direction: column;
align-items: stretch;
}
.interlude-choice-row .onboarding-btn {
width: 100%;
min-width: 0;
}
}
.demo-task-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem 1.25rem;
margin: 0 0 1.25rem;
text-align: left;
}
.demo-task-header {
margin-bottom: 0.75rem;
}
.demo-task-name {
font-weight: 600;
color: var(--text);
font-size: 1rem;
}
.demo-task-actions {
display: flex;
gap: 0.5rem;
}
.demo-task-actions .btn {
flex: 1;
min-height: 44px;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
pointer-events: none;
cursor: default;
}
@keyframes demo-flash-success {
0%, 100% {
box-shadow: none;
background: #1a6b2f;
}
20% {
box-shadow: 0 0 20px 6px oklch(0.60 0.18 130 / 0.5);
background: #2a9044;
}
}
@keyframes demo-flash-warning {
0%, 100% {
box-shadow: none;
background: #8a6d1b;
}
20% {
box-shadow: 0 0 20px 6px oklch(0.78 0.18 65 / 0.5);
background: #a07d20;
}
}
.demo-task-actions .btn-success {
animation: demo-flash-success 3s ease-in-out infinite;
}
.demo-task-actions .btn-warning {
animation: demo-flash-warning 3s ease-in-out infinite;
animation-delay: 1.5s;
}
@media (prefers-reduced-motion: reduce) {
.demo-task-actions .btn-success,
.demo-task-actions .btn-warning {
animation: none;
}
}
.overture-plate {
text-align: center;
padding: 2.25rem 1rem 2rem;
color: var(--text);
}
.overture-plate__headline {
font-size: 1.05rem;
font-weight: 500;
margin: 0 0 0.35rem;
color: var(--text);
letter-spacing: 0.01em;
}
.overture-plate__body {
font-size: 1rem;
margin: 0 0 1.5rem;
color: var(--text-muted);
}
.overture-plate__fineprint {
font-size: 0.78rem;
color: var(--text-muted);
opacity: 0.7;
line-height: 1.6;
max-width: 28rem;
margin: 0 auto;
}
.overture-energy-subtitle {
font-size: 0.78rem;
line-height: 1.55;
color: var(--text-muted);
margin: 0.6rem 0 0;
padding: 0 0.25rem;
letter-spacing: 0.01em;
}
/* app/javascript/stylesheets/_cards.css */
.cards-container,
.card-form-container,
.card-detail {
max-width: 800px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
.card-form-container {
border-left: 4px solid transparent;
transition: border-color 0.4s ease, background 0.4s ease;
border-radius: 0 4px 4px 0;
}
.card-form-container[data-color=red] {
border-left-color: var(--color-red);
background: rgba(181, 69, 58, 0.05);
}
.card-form-container[data-color=green] {
border-left-color: var(--color-green);
background: rgba(61, 139, 85, 0.05);
}
.card-form-container[data-color=blue] {
border-left-color: var(--color-blue);
background: rgba(74, 127, 181, 0.05);
}
.card-form-container[data-color=white] {
border-left-color: var(--color-white);
background: rgba(200, 192, 184, 0.04);
}
.card-form-container[data-color=black] {
border-left-color: var(--color-black);
background: rgba(123, 74, 142, 0.05);
}
.cards-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.cards-header h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.cards-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.card-item {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
gap: 1rem;
}
.card-main {
flex: 1;
min-width: 0;
}
.card-main h3 {
margin: 0 0 0.25rem;
font-size: 1rem;
font-weight: 600;
}
.card-main h3 a {
color: var(--text);
text-decoration: none;
}
.card-main h3 a:hover {
color: var(--accent);
}
.card-energy {
margin: 0;
font-size: 0.85rem;
color: var(--text-muted);
}
.card-status {
display: inline-block;
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 4px;
margin-top: 0.25rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.card-status.active {
background: var(--accent-muted);
color: var(--accent);
}
.card-status.inactive {
background: var(--surface-2);
color: var(--text-muted);
}
.card-actions {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
.card-detail .card-header {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.card-detail .card-header h1 {
margin: 0 0 0.75rem;
font-size: 1.5rem;
font-weight: 600;
}
.card-meta p {
margin: 0.25rem 0;
font-size: 0.95rem;
color: var(--text-muted);
}
.card-meta strong {
color: var(--text);
}
.card-detail .card-body {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.card-detail .card-body h3 {
margin: 0 0 0.75rem;
font-size: 1rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.8rem;
}
.card-detail .card-body p {
margin: 0 0 1rem;
line-height: 1.6;
}
.card-detail .card-body p:last-child {
margin-bottom: 0;
}
.dry-run-section {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
#dry-run-result {
margin-top: 1rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1rem;
}
#dry-run-output {
margin: 0.5rem 0 0;
font-family: monospace;
font-size: 0.85rem;
white-space: pre-wrap;
color: var(--text);
}
.set-selector {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
--set-hue: var(--accent, oklch(0.75 0.12 60));
}
.set-selector__label {
flex-shrink: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.set-selector__native {
display: none;
}
.set-dd {
position: relative;
flex: 1;
min-width: 0;
}
.set-dd__toggle {
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
padding: 0.45rem 0.7rem;
border: 1px solid color-mix(in oklch, var(--set-hue) 55%, var(--border));
border-radius: 6px;
background:
linear-gradient(
to right,
color-mix(in oklch, var(--set-hue) 12%, var(--surface-2)),
var(--surface-2));
color: var(--text);
font: inherit;
font-size: 0.85rem;
text-align: left;
cursor: pointer;
transition:
border-color 0.25s,
background 0.25s,
box-shadow 0.25s;
}
.set-dd__toggle:hover,
.set-dd--open .set-dd__toggle {
border-color: var(--set-hue);
box-shadow: 0 0 0 1px var(--set-hue), 0 0 12px -2px var(--set-hue);
outline: none;
}
.set-dd__swatch {
flex-shrink: 0;
width: 0.85rem;
height: 0.85rem;
border-radius: 50%;
background: var(--opt-hue, var(--set-hue));
box-shadow: 0 0 8px var(--opt-hue, var(--set-hue)), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.set-dd__current,
.set-dd__text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.set-dd__current strong,
.set-dd__text strong {
font-weight: 600;
letter-spacing: 0.02em;
}
.set-dd__current em,
.set-dd__text em {
font-style: italic;
color: var(--text-dim, rgba(255, 255, 255, 0.55));
}
.set-dd__caret {
flex-shrink: 0;
color: var(--text-muted);
font-size: 0.7rem;
transition: transform 0.2s, color 0.2s;
}
.set-dd--open .set-dd__caret {
transform: rotate(180deg);
color: var(--set-hue);
}
.set-dd__list {
position: absolute;
z-index: 20;
top: calc(100% + 4px);
left: 0;
right: 0;
margin: 0;
padding: 4px;
list-style: none;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-1, var(--surface-2));
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 0.15s, transform 0.15s;
}
.set-dd--open .set-dd__list {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.set-dd__option {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.6rem;
border-radius: 5px;
cursor: pointer;
transition: background 0.12s;
}
.set-dd__option:hover {
background: color-mix(in oklch, var(--opt-hue) 18%, transparent);
}
.set-dd__option--active {
background: color-mix(in oklch, var(--opt-hue) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--opt-hue) 50%, transparent);
}
[data-gallery-set-selector] {
flex-wrap: wrap;
}
[data-gallery-set-selector] .set-selector__option {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0.45rem 0.7rem;
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
background: var(--surface-2);
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
}
[data-gallery-set-selector] .set-selector__option:hover,
[data-gallery-set-selector] .set-selector__option--active {
border-color: var(--accent, oklch(0.75 0.12 60));
background: var(--surface-3, var(--surface-2));
}
[data-gallery-set-selector] .set-selector__name {
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
}
[data-gallery-set-selector] .set-selector__flavor {
font-style: italic;
font-size: 0.78rem;
color: var(--text-dim, rgba(255,255,255,0.55));
}
/* app/javascript/stylesheets/_ledger.css */
.ledger-chamber {
--sc-moss: oklch(0.58 0.13 148);
--sc-moss-hi: oklch(0.72 0.15 148);
--sc-blood: oklch(0.55 0.17 20);
--sc-blood-hi: oklch(0.68 0.18 22);
--sc-amethyst: oklch(0.52 0.18 300);
--sc-amethyst-hi: oklch(0.66 0.2 300);
--sc-ember: oklch(0.72 0.14 70);
--sc-ember-lo: oklch(0.48 0.09 68);
--sc-dim: oklch(0.55 0.015 280);
--sc-dimmer: oklch(0.38 0.015 280);
--ledger-brass: oklch(0.72 0.14 70);
--ledger-brass-dim: oklch(0.48 0.09 68);
--ledger-red: oklch(0.55 0.17 20);
--ledger-red-bright:oklch(0.68 0.18 22);
--ledger-red-dim: oklch(0.55 0.17 20 / 0.3);
}
.ledger-chamber--no-red {
--sc-blood: oklch(0.48 0.09 68);
--sc-blood-hi: oklch(0.72 0.14 70);
--ledger-red: oklch(0.48 0.09 68);
--ledger-red-bright:oklch(0.72 0.14 70);
--ledger-red-dim: oklch(0.48 0.09 68 / 0.3);
}
.ledger-chamber {
--surface: #1a1d22;
--surface-2: #262a30;
--border: #3a3f47;
--text-muted: oklch(0.55 0.015 280);
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem 6rem;
color: #ecefee;
background:
repeating-linear-gradient(
91deg,
transparent 0 4px,
rgba(255, 255, 255, 0.007) 4px 5px,
transparent 5px 11px,
rgba(0, 0, 0, 0.12) 11px 12px),
radial-gradient(
900px 500px at 50% 0%,
oklch(0.22 0.02 280 / 0.28),
transparent 60%),
#16161a;
}
.ledger-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem 6rem;
}
.ledger-lintel {
position: relative;
margin: 2rem 0 0;
padding: 1.5rem 2.5rem 1.25rem;
text-align: center;
background:
linear-gradient(
180deg,
#1c1c22 0%,
#14141a 70%,
#0c0c0f 100%);
box-shadow:
inset 0 0 0 1px rgba(184, 156, 106, 0.28),
inset 0 1px 0 rgba(255, 230, 190, 0.06),
inset 0 -2px 4px rgba(0, 0, 0, 0.7),
0 10px 30px rgba(0, 0, 0, 0.65);
font-family:
"Cinzel",
Georgia,
serif;
font-size: clamp(20px, 4vw, 34px);
font-weight: 700;
letter-spacing: 10px;
color: oklch(0.72 0.14 70);
text-shadow:
0 1px 0 rgba(255, 230, 190, 0.2),
0 -1px 0 rgba(0, 0, 0, 0.8),
0 0 22px rgba(184, 156, 106, 0.15);
text-transform: uppercase;
font-style: normal;
border: none;
font-variant: normal;
padding-bottom: 1.25rem;
margin-bottom: 0;
}
.ledger-lintel::before,
.ledger-lintel::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
oklch(0.72 0.14 70) 8%,
oklch(0.72 0.14 70) 92%,
transparent);
opacity: 0.5;
}
.ledger-lintel::before {
top: 6px;
}
.ledger-lintel::after {
bottom: 6px;
}
.ledger-lintel__rune {
color: oklch(0.72 0.14 70);
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
margin: 0 14px;
opacity: 0.9;
font-weight: 400;
text-shadow: 0 0 14px oklch(0.72 0.14 70);
}
.ledger-lintel small {
display: block;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 11px;
letter-spacing: 4px;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
margin-top: 10px;
font-variant: normal;
}
.ledger-lintel__sep {
color: oklch(0.50 0.06 68);
margin: 0 8px;
}
.ledger-lintel__phrase {
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ledger-lintel__phrase--red {
background-image:
linear-gradient(
90deg,
oklch(0.74 0.16 22) 0%,
oklch(0.74 0.16 22) 40%,
oklch(0.90 0.10 50) 50%,
oklch(0.74 0.16 22) 60%,
oklch(0.74 0.16 22) 100%);
text-shadow: 0 0 12px oklch(0.55 0.17 22 / 0.3);
animation: phrase-shimmer 10s ease-in-out infinite;
animation-delay: 0s;
}
.ledger-lintel__phrase--amethyst {
background-image:
linear-gradient(
90deg,
oklch(0.72 0.17 300) 0%,
oklch(0.72 0.17 300) 40%,
oklch(0.88 0.10 310) 50%,
oklch(0.72 0.17 300) 60%,
oklch(0.72 0.17 300) 100%);
text-shadow: 0 0 12px oklch(0.52 0.18 300 / 0.3);
animation: phrase-shimmer 10s ease-in-out infinite;
animation-delay: 3.3s;
}
.ledger-lintel__phrase--moss {
background-image:
linear-gradient(
90deg,
oklch(0.72 0.14 148) 0%,
oklch(0.72 0.14 148) 40%,
oklch(0.88 0.08 148) 50%,
oklch(0.72 0.14 148) 60%,
oklch(0.72 0.14 148) 100%);
text-shadow: 0 0 12px oklch(0.52 0.14 148 / 0.3);
animation: phrase-shimmer 10s ease-in-out infinite;
animation-delay: 6.6s;
}
@keyframes phrase-shimmer {
0% {
background-position: 100% center;
}
30% {
background-position: 0% center;
}
100% {
background-position: 0% center;
}
}
.ledger-lintel__corner {
position: absolute;
font-family:
"Iowan Old Style",
Georgia,
serif;
pointer-events: none;
animation: rune-float-ledger 4s ease-in-out infinite;
}
.ledger-lintel__corner--tl {
left: 18px;
top: 18px;
font-size: 14px;
color: var(--sc-moss);
opacity: 0.45;
text-shadow: 0 0 8px var(--sc-moss);
animation-duration: 4.2s;
}
.ledger-lintel__corner--tr {
right: 18px;
top: 18px;
font-size: 14px;
color: var(--sc-amethyst);
opacity: 0.45;
text-shadow: 0 0 8px var(--sc-amethyst);
animation-duration: 3.6s;
animation-delay: 0.5s;
}
.ledger-lintel__corner--bl {
left: 24px;
bottom: 18px;
font-size: 12px;
color: var(--sc-ember);
opacity: 0.45;
text-shadow: 0 0 6px var(--sc-ember);
animation-duration: 5s;
animation-delay: 1s;
}
.ledger-lintel__corner--br {
right: 24px;
bottom: 18px;
font-size: 12px;
color: var(--sc-blood);
opacity: 0.4;
text-shadow: 0 0 6px var(--sc-blood);
animation-duration: 4.6s;
animation-delay: 1.5s;
}
@keyframes rune-float-ledger {
0%, 100% {
transform: translateY(0);
opacity: 0.45;
}
50% {
transform: translateY(-3px);
opacity: 0.7;
}
}
.ledger-panel {
position: relative;
background:
radial-gradient(
160% 120% at 30% -10%,
#262a30 0%,
#1a1d22 45%,
#101215 100%);
color: #ecefee;
padding: 1.25rem;
overflow: hidden;
border-top: none;
border-radius: 0;
box-shadow:
inset 0 0 0 1px rgba(58, 63, 71, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -2px 6px rgba(0, 0, 0, 0.7),
inset 0 0 18px rgba(184, 156, 106, 0.09),
0 14px 30px rgba(0, 0, 0, 0.6),
0 2px 6px rgba(0, 0, 0, 0.45);
}
.ledger-panel::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 420px 420px;
mix-blend-mode: overlay;
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.ledger-panel > * {
position: relative;
z-index: 1;
}
.ledger-panel--done {
box-shadow:
inset 0 0 0 1px rgba(58, 63, 71, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -2px 6px rgba(0, 0, 0, 0.7),
inset 0 0 22px oklch(0.58 0.13 148 / 0.1),
0 14px 30px rgba(0, 0, 0, 0.6),
0 2px 6px rgba(0, 0, 0, 0.45);
}
.ledger-panel--amethyst {
box-shadow:
inset 0 0 0 1px rgba(58, 63, 71, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -2px 6px rgba(0, 0, 0, 0.7),
inset 0 0 24px oklch(0.52 0.18 300 / 0.12),
0 14px 30px rgba(0, 0, 0, 0.6),
0 2px 6px rgba(0, 0, 0, 0.45);
}
.ledger-stats-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
align-items: center;
}
@media (max-width: 900px) {
.ledger-stats-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 540px) {
.ledger-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.ledger-stat {
padding: 10px 14px;
border-right: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.ledger-stat:last-child {
border-right: none;
}
.ledger-stat__label {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 10px;
letter-spacing: 2.8px;
text-transform: uppercase;
color: var(--sc-dim);
font-variant: normal;
}
.ledger-stat__value {
font-family:
"Cinzel",
Georgia,
serif;
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
color: #ecefee;
letter-spacing: -0.2px;
text-shadow: 0 0 14px oklch(0.58 0.13 148 / 0.28), 0 1px 0 #000;
}
.ledger-stat--flagged {
border-left: 3.4px solid var(--ledger-red);
background:
linear-gradient(
90deg,
color-mix(in oklch, var(--ledger-red) 11%, transparent) 0%,
color-mix(in oklch, var(--ledger-red) 4%, transparent) 60%,
transparent 100%);
padding-left: 14px;
}
.ledger-stat--flagged .ledger-stat__label {
color: var(--ledger-red-bright);
text-shadow: 0 0 6px var(--ledger-red-dim);
}
.ledger-stat--flagged .ledger-stat__value {
color: #f3d8d0;
text-shadow:
0 0 19px color-mix(in oklch, var(--ledger-red) 80%, transparent),
0 0 7px var(--ledger-red-bright),
0 1px 0 #000;
letter-spacing: -0.5px;
}
.ledger-stat--flagged-auto {
border-left: 3.4px solid var(--sc-amethyst);
background:
linear-gradient(
90deg,
color-mix(in oklch, var(--sc-amethyst) 11%, transparent) 0%,
color-mix(in oklch, var(--sc-amethyst) 4%, transparent) 60%,
transparent 100%);
padding-left: 14px;
}
.ledger-stat--flagged-auto .ledger-stat__label {
color: var(--sc-amethyst-hi);
text-shadow: 0 0 6px color-mix(in oklch, var(--sc-amethyst) 40%, transparent);
}
.ledger-stat--flagged-auto .ledger-stat__value {
color: oklch(0.88 0.06 300);
text-shadow:
0 0 19px color-mix(in oklch, var(--sc-amethyst) 80%, transparent),
0 0 7px var(--sc-amethyst-hi),
0 1px 0 #000;
letter-spacing: -0.5px;
}
.ledger-section {
margin-top: 2.25rem;
}
.ledger-section__heading {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 5.5px;
text-transform: uppercase;
color: #e6e8ea;
text-shadow:
0 0 12px rgba(184, 156, 106, 0.28),
0 1px 0 rgba(0, 0, 0, 0.9),
0 -1px 0 rgba(255, 255, 255, 0.04);
display: inline-flex;
align-items: center;
gap: 10px;
border: none;
padding: 0;
margin: 0 0 8px;
font-variant: normal;
}
.ledger-section__rune {
color: oklch(0.72 0.14 70);
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-size: 16px;
font-weight: 400;
text-shadow: 0 0 10px oklch(0.72 0.14 70);
}
.ledger-section--done .ledger-section__rune {
color: oklch(0.58 0.13 148);
text-shadow: 0 0 10px oklch(0.58 0.13 148);
}
.ledger-section--amethyst .ledger-section__rune {
color: oklch(0.52 0.18 300);
text-shadow: 0 0 10px oklch(0.52 0.18 300);
}
.ledger-stone-rule {
position: relative;
height: 6px;
margin-bottom: 12px;
}
.ledger-stone-rule::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 2px;
height: 2px;
background:
linear-gradient(
90deg,
transparent 0,
#060708 8%,
#060708 92%,
transparent 100%);
}
.ledger-stone-rule__pin {
position: absolute;
top: 0;
width: 8px;
height: 6px;
display: flex;
align-items: center;
justify-content: center;
font-family:
"Iowan Old Style",
Georgia,
serif;
font-size: 8px;
}
.ledger-stone-rule__pin:first-child {
left: 4px;
}
.ledger-stone-rule__pin--r {
left: auto;
right: 4px;
}
.ledger-stone-rule--hero::after {
content: "";
position: absolute;
left: 24px;
right: 24px;
top: 2.5px;
height: 1px;
background:
linear-gradient(
90deg,
transparent 0,
oklch(0.72 0.14 70) 10%,
oklch(0.72 0.14 70) 90%,
transparent 100%);
box-shadow: 0 0 8px oklch(0.72 0.14 70 / 0.67), 0 0 2px oklch(0.72 0.14 70);
filter: blur(0.3px);
}
.ledger-stone-rule--hero .ledger-stone-rule__pin {
color: oklch(0.72 0.14 70);
text-shadow: 0 0 6px oklch(0.72 0.14 70), 0 0 2px oklch(0.72 0.14 70);
}
.ledger-stone-rule--done::after {
content: "";
position: absolute;
left: 24px;
right: 24px;
top: 2.5px;
height: 1px;
background:
linear-gradient(
90deg,
transparent 0,
oklch(0.58 0.13 148) 10%,
oklch(0.58 0.13 148) 90%,
transparent 100%);
box-shadow: 0 0 8px oklch(0.58 0.13 148 / 0.67), 0 0 2px oklch(0.58 0.13 148);
filter: blur(0.3px);
}
.ledger-stone-rule--done .ledger-stone-rule__pin {
color: oklch(0.58 0.13 148);
text-shadow: 0 0 6px oklch(0.58 0.13 148), 0 0 2px oklch(0.58 0.13 148);
}
.ledger-stone-rule--amethyst::after {
content: "";
position: absolute;
left: 24px;
right: 24px;
top: 2.5px;
height: 1px;
background:
linear-gradient(
90deg,
transparent 0,
oklch(0.52 0.18 300) 10%,
oklch(0.52 0.18 300) 90%,
transparent 100%);
box-shadow: 0 0 8px oklch(0.52 0.18 300 / 0.67), 0 0 2px oklch(0.52 0.18 300);
filter: blur(0.3px);
}
.ledger-stone-rule--amethyst .ledger-stone-rule__pin {
color: oklch(0.52 0.18 300);
text-shadow: 0 0 6px oklch(0.52 0.18 300), 0 0 2px oklch(0.52 0.18 300);
}
.ledger-footnote {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 10px;
letter-spacing: 1.5px;
color: oklch(0.48 0.09 68);
text-transform: uppercase;
margin-top: 0.75rem;
font-variant-numeric: tabular-nums;
}
.ledger-empty {
padding: 2rem 0;
color: var(--sc-dim);
font-style: italic;
}
.ledger-empty a {
color: var(--ledger-brass);
text-decoration: none;
}
.ledger-empty a:hover {
text-decoration: underline;
}
.ledger-panel__note {
padding: 1.25rem 0;
color: var(--sc-dim);
font-style: italic;
font-size: 0.85rem;
}
.ledger-back-credit {
position: relative;
margin: 0 0 1.75rem;
padding: 1.1rem 1.4rem;
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
align-items: center;
background:
radial-gradient(
160% 120% at 30% -10%,
#2a2620 0%,
#1a1814 45%,
#0e0c0a 100%);
color: #ecefee;
overflow: hidden;
box-shadow:
inset 0 0 0 1px oklch(0.55 0.10 75 / 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.04),
inset 0 -2px 6px rgba(0, 0, 0, 0.7),
inset 0 0 22px oklch(0.62 0.13 75 / 0.10),
0 14px 30px rgba(0, 0, 0, 0.5),
0 2px 6px rgba(0, 0, 0, 0.4);
}
.ledger-back-credit::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 420px 420px;
mix-blend-mode: overlay;
opacity: 0.35;
pointer-events: none;
z-index: 0;
}
.ledger-back-credit > * {
position: relative;
z-index: 1;
}
.ledger-back-credit__corner {
position: absolute;
font-family: Georgia, serif;
font-size: 11px;
color: oklch(0.55 0.10 75 / 0.55);
z-index: 2;
}
.ledger-back-credit__corner--tl {
top: 6px;
left: 9px;
}
.ledger-back-credit__corner--tr {
top: 6px;
right: 9px;
}
.ledger-back-credit__corner--bl {
bottom: 6px;
left: 9px;
}
.ledger-back-credit__corner--br {
bottom: 6px;
right: 9px;
}
.ledger-back-credit__body {
min-width: 0;
}
.ledger-back-credit__heading {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 10.5px;
letter-spacing: 3px;
text-transform: uppercase;
color: oklch(0.68 0.10 75);
margin-bottom: 0.45rem;
}
.ledger-back-credit__heading-rune {
font-family: Georgia, serif;
color: oklch(0.55 0.10 75 / 0.7);
font-size: 12px;
letter-spacing: 0;
}
.ledger-back-credit__text {
margin: 0;
font-family: "JetBrains Mono", monospace;
font-size: 0.84rem;
letter-spacing: 0.02em;
color: oklch(0.78 0.04 75);
}
.ledger-back-credit__text strong {
color: oklch(0.86 0.10 75);
font-weight: 600;
letter-spacing: 0.08em;
}
.ledger-back-credit__text-sep {
color: oklch(0.45 0.04 75 / 0.7);
margin: 0 0.4rem;
}
.ledger-back-credit__btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 11px;
letter-spacing: 2.6px;
text-transform: uppercase;
padding: 0.7rem 1.15rem;
border: 1px solid oklch(0.55 0.10 75 / 0.55);
border-radius: 0;
background:
linear-gradient(
180deg,
oklch(0.30 0.06 75 / 0.7),
oklch(0.18 0.04 75 / 0.7));
color: oklch(0.88 0.10 75);
text-shadow: 0 0 10px oklch(0.62 0.13 75 / 0.45), 0 1px 0 #000;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 2px 6px rgba(0, 0, 0, 0.4);
cursor: pointer;
transition:
background 140ms,
box-shadow 140ms,
transform 80ms,
color 140ms;
}
.ledger-back-credit__btn:hover {
background:
linear-gradient(
180deg,
oklch(0.38 0.08 75 / 0.85),
oklch(0.24 0.06 75 / 0.85));
color: oklch(0.94 0.13 75);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 0 18px oklch(0.62 0.13 75 / 0.4),
0 2px 6px rgba(0, 0, 0, 0.4);
}
.ledger-back-credit__btn:active {
transform: translateY(1px);
}
.ledger-back-credit__btn-glyph {
font-family: Georgia, serif;
font-size: 16px;
line-height: 1;
letter-spacing: 0;
color: oklch(0.92 0.15 80);
text-shadow: 0 0 12px oklch(0.78 0.18 80 / 0.6);
}
@media (max-width: 640px) {
.ledger-back-credit {
grid-template-columns: 1fr;
gap: 0.9rem;
}
.ledger-back-credit__btn {
justify-self: start;
}
}
.ledger-flash {
padding: 0.7rem 1rem;
margin: 0 0 1rem;
font-family: "JetBrains Mono", monospace;
font-size: 0.82rem;
letter-spacing: 0.04em;
}
.ledger-flash--notice {
background: oklch(0.22 0.05 148 / 0.4);
border-left: 3px solid oklch(0.55 0.13 148 / 0.7);
color: oklch(0.88 0.10 148);
}
.ledger-flash--alert {
background: oklch(0.22 0.07 25 / 0.4);
border-left: 3px solid oklch(0.55 0.17 25 / 0.7);
color: oklch(0.88 0.13 25);
}
.ledger-chart-label {
font-family:
"Cinzel",
Georgia,
serif;
letter-spacing: 2.8px;
color: var(--sc-dim);
font-size: 10px;
font-weight: 700;
margin-bottom: 0.5rem;
text-transform: uppercase;
font-variant: normal;
}
.ledger-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: 2px;
overflow: hidden;
border: 1px solid var(--border);
}
.ledger-table th {
background: var(--surface-2);
color: var(--ledger-brass);
text-align: left;
padding: 0.6rem 1rem;
font-size: 0.78rem;
font-weight: 600;
font-variant: small-caps;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--ledger-brass-dim);
}
.ledger-table td {
padding: 0.6rem 1rem;
border-top: 1px solid var(--border);
font-size: 0.88rem;
vertical-align: top;
font-variant-numeric: tabular-nums;
}
.ledger-table tr:nth-child(even) {
background: rgba(255, 255, 255, 0.015);
}
.ledger-table tr:hover td {
background: rgba(255, 255, 255, 0.03);
}
.ledger-table a {
color: var(--ledger-brass);
text-decoration: none;
}
.ledger-table a:hover {
text-decoration: underline;
}
.ledger-card-tombstone {
color: var(--text-muted);
font-style: italic;
}
.ledger-cell--flagged {
border-left: 3px solid var(--ledger-red);
}
.ledger-cell--numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
.ledger-cell--muted {
color: var(--text-muted);
}
.ledger-cell--rate-low {
color: var(--ledger-red-bright);
font-weight: 600;
}
.ledger-cell--streak {
color: var(--ledger-red-bright);
font-weight: 600;
}
.ledger-row--flagged {
border-left: 3px solid var(--ledger-red);
}
.ledger-row--dead {
border-left: 3px solid var(--ledger-red-bright);
background: rgba(139, 58, 58, 0.06);
}
.ledger-cell--indicator {
width: 1.5rem;
padding-left: 0.5rem;
padding-right: 0;
text-align: center;
}
.ledger-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.2rem;
height: 1.2rem;
border-radius: 2px;
font-size: 0.65rem;
font-weight: 700;
line-height: 1;
}
.ledger-badge--dead {
background: var(--ledger-red);
color: #d8cfc0;
}
.ledger-badge--pillar {
background: var(--sc-moss);
color: #1a2018;
}
.ledger-table-legend {
display: flex;
gap: 1.5rem;
margin-top: 0.75rem;
font-size: 0.72rem;
color: var(--text-muted);
}
.ledger-table-legend .ledger-badge {
margin-right: 0.3rem;
vertical-align: middle;
}
.ledger-milestones {
margin-top: 1rem;
padding: 0.75rem 1rem;
background: var(--surface);
border-left: 2px solid var(--ledger-brass-dim);
border-radius: 0 2px 2px 0;
}
.ledger-milestone {
font-family:
Georgia,
"Palatino Linotype",
"Book Antiqua",
Palatino,
serif;
font-style: italic;
font-size: 0.82rem;
color: var(--ledger-brass);
margin: 0.25rem 0;
line-height: 1.4;
}
.ledger-milestone:first-child {
margin-top: 0;
}
.ledger-milestone:last-child {
margin-bottom: 0;
}
.ledger-chart {
width: 100%;
height: auto;
display: block;
}
.ledger-chart--compact {
max-width: 540px;
}
.ledger-chart-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 0.5rem;
}
@media (max-width: 700px) {
.ledger-chart-row {
grid-template-columns: 1fr;
}
}
.ledger-chart-legend {
display: flex;
gap: 1.25rem;
margin-top: 0.5rem;
font-size: 0.72rem;
color: var(--text-muted);
}
.ledger-chart-legend__swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
margin-right: 0.3rem;
vertical-align: middle;
}
.ledger-chart-legend__swatch--declined {
background: var(--ledger-red);
}
.ledger-chart-legend__swatch--gap {
background: var(--ledger-red-dim);
}
.ledger-card-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: 2px;
overflow: hidden;
border: 1px solid var(--border);
}
.ledger-card-table th {
background: var(--surface-2);
color: var(--ledger-brass);
text-align: left;
padding: 0.6rem 1rem;
font-size: 0.78rem;
font-weight: 600;
font-variant: small-caps;
letter-spacing: 0.05em;
border-bottom: 1px solid var(--ledger-brass-dim);
}
.ledger-card-table td {
padding: 0.6rem 1rem;
border-top: 1px solid var(--border);
font-size: 0.88rem;
vertical-align: top;
font-variant-numeric: tabular-nums;
}
.ledger-card-table th.ledger-cell--numeric {
text-align: right;
}
.ledger-card-table tr:nth-child(even) {
background: rgba(255, 255, 255, 0.015);
}
.ledger-card-table tr:hover td {
background: rgba(255, 255, 255, 0.03);
}
.ledger-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-bottom: 1.25rem;
}
.ledger-filters select,
.ledger-filters input,
.ledger-filters button {
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 2px;
padding: 0.35rem 0.6rem;
font-size: 0.875rem;
cursor: pointer;
}
.ledger-filters button {
background: var(--ledger-brass-dim);
color: var(--text);
border-color: var(--ledger-brass-dim);
}
.ledger-filters button:hover {
background: var(--ledger-brass);
}
#ledger-history {
transition: opacity 0.15s;
}
#ledger-history.ledger-history--loading {
opacity: 0.4;
pointer-events: none;
}
.ledger-filters__clear {
color: var(--sc-dimmer);
font-size: 0.8rem;
text-decoration: none;
padding: 0.35rem 0.4rem;
}
.ledger-filters__clear:hover {
color: var(--text);
}
.ledger-chamber .pagination,
.ledger-container .pagination {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.25rem;
color: var(--text-muted);
font-size: 0.9rem;
}
.ledger-chamber .pagination a,
.ledger-container .pagination a {
color: var(--ledger-brass);
text-decoration: none;
}
.ledger-chamber .pagination a:hover,
.ledger-container .pagination a:hover {
text-decoration: underline;
}
.bc-modal {
position: fixed;
inset: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
}
.bc-modal[hidden] {
display: none;
}
.bc-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 8, 4, 0.82);
}
.bc-modal__panel {
position: relative;
z-index: 1;
width: 90%;
max-width: 520px;
max-height: 80vh;
overflow-y: auto;
padding: 1.75rem 1.75rem 1.5rem;
background:
linear-gradient(
180deg,
#2a2410 0%,
#1a1508 100%);
border: 1px solid rgba(154, 112, 32, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.08),
inset 0 -2px 6px rgba(0, 0, 0, 0.5),
0 20px 56px rgba(0, 0, 0, 0.8);
}
.bc-modal__title {
margin: 0 0 0.35rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
color: var(--ledger-brass);
text-shadow: 0 0 12px var(--sc-ember-lo);
}
.bc-modal__title-rune {
opacity: 0.45;
margin: 0 0.35em;
}
.bc-modal__subtitle {
margin: 0 0 1.1rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.72rem;
letter-spacing: 0.1em;
color: oklch(0.58 0.04 80);
text-align: center;
}
.bc-modal__sep {
margin: 0 0.4em;
opacity: 0.45;
}
.bc-modal__task-list {
list-style: none;
margin: 0 0 0.9rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.bc-modal__phase-label {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.63rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sc-dimmer);
padding: 0.5rem 0 0.15rem 8px;
}
.bc-modal__task-item {
display: flex;
gap: 0.6em;
align-items: baseline;
padding: 5px 8px;
border-left: 2px solid rgba(154, 112, 32, 0.25);
background: rgba(0, 0, 0, 0.22);
}
.bc-modal__task-item--green {
border-left-color: oklch(0.52 0.15 148 / 0.65);
}
.bc-modal__task-item--red {
border-left-color: oklch(0.50 0.16 22 / 0.65);
}
.bc-modal__task-item--black {
border-left-color: oklch(0.36 0.01 280 / 0.75);
}
.bc-modal__task-item--blue {
border-left-color: oklch(0.50 0.17 260 / 0.65);
}
.bc-modal__task-item--white {
border-left-color: oklch(0.72 0.01 280 / 0.45);
}
.bc-modal__task-item--neutral {
border-left-color: rgba(154, 112, 32, 0.25);
}
.bc-modal__task-card {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.68rem;
font-weight: 600;
color: var(--ledger-brass);
white-space: nowrap;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.bc-modal__task-msg {
color: oklch(0.58 0.02 80);
font-size: 0.77rem;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bc-modal__note {
margin: 0 0 1.25rem;
font-size: 0.77rem;
color: var(--text-muted);
font-style: italic;
text-align: center;
line-height: 1.5;
}
.bc-modal__actions {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.bc-modal__btn {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
padding: 0.45rem 1.25rem;
transition:
color 0.15s,
border-color 0.15s,
background 0.15s;
}
.bc-modal__btn--cancel {
color: #b09060;
background:
linear-gradient(
180deg,
#3a3228 0%,
#2a2418 100%);
border: 1px solid rgba(107, 90, 58, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.bc-modal__btn--cancel:hover {
color: #daa830;
border-color: rgba(154, 112, 32, 0.5);
}
.bc-modal__btn--confirm {
color: var(--ledger-brass);
background:
linear-gradient(
180deg,
#3a3010 0%,
#2a2008 100%);
border: 1px solid rgba(154, 112, 32, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.bc-modal__btn--confirm:hover {
color: #ffd060;
border-color: rgba(200, 160, 40, 0.7);
background:
linear-gradient(
180deg,
#483c14 0%,
#322810 100%);
}
.overture-mirror-header {
position: relative;
display: flex;
align-items: flex-start;
gap: 1rem;
margin: 1rem auto 1.5rem;
max-width: 56rem;
padding: 1.1rem 2.6rem 1.1rem 1.4rem;
background:
linear-gradient(
180deg,
oklch(0.18 0.012 270) 0%,
oklch(0.13 0.01 270) 100%);
border: 1px solid oklch(0.32 0.025 60 / 0.35);
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.04), 0 2px 4px rgba(0, 0, 0, 0.4);
color: var(--text);
font-family: "JetBrains Mono", monospace;
}
.overture-mirror-header__body {
flex: 1;
min-width: 0;
}
.overture-mirror-header__line {
margin: 0 0 0.55rem;
font-size: 0.86rem;
line-height: 1.65;
color: oklch(0.78 0.015 280);
}
.overture-mirror-header__line:first-child {
font-weight: 500;
color: oklch(0.85 0.015 280);
letter-spacing: 0.015em;
}
.overture-mirror-header__line--mirror {
color: oklch(0.55 0.17 20);
font-style: italic;
letter-spacing: 0.02em;
}
.overture-mirror-header__sub {
margin: 0.7rem 0 0;
font-size: 0.74rem;
line-height: 1.6;
color: oklch(0.55 0.012 280);
letter-spacing: 0.015em;
}
.overture-mirror-header__close {
position: absolute;
top: 0.5rem;
right: 0.6rem;
background: transparent;
border: 0;
color: oklch(0.5 0.012 280);
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
padding: 0.2rem 0.5rem;
border-radius: 3px;
font-family: inherit;
}
.overture-mirror-header__close:hover {
color: oklch(0.8 0.015 280);
background: oklch(0.22 0.012 270);
}
.ledger-glass-panel {
position: absolute;
top: 8px;
right: 0;
z-index: 10;
width: 300px;
padding: 0.6rem 0.85rem;
background: oklch(0.10 0.02 280 / 0.90);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid oklch(0.72 0.14 70 / 0.45);
border-top-color: oklch(0.72 0.14 70 / 0.2);
border-radius: 3px;
box-shadow:
0 6px 28px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 0 0 1px rgba(0, 0, 0, 0.4);
font-family: "JetBrains Mono", monospace;
font-size: 0.73rem;
line-height: 1.55;
color: oklch(0.76 0.04 280);
cursor: pointer;
pointer-events: auto;
user-select: none;
}
.ledger-glass-panel__rune {
color: oklch(0.72 0.14 70 / 0.65);
margin-right: 0.4em;
}
.ledger-gloss-active {
box-shadow: 0 0 0 1px oklch(0.72 0.14 70 / 0.3), 0 0 14px oklch(0.72 0.14 70 / 0.12);
}
/* app/javascript/stylesheets/_spellbooks.css */
.stockpiles-container,
.spellbooks-container,
.spellbook-form-container,
.spellbook-detail {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1rem;
}
.spellbooks-header,
.spellbook-header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.spellbooks-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.spellbooks-header > div:first-child {
flex: 1;
}
.spellbook-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.spellbooks-header h1,
.spellbook-header h1 {
margin: 0 0 0.5rem;
font-size: 2rem;
font-weight: 700;
}
.header-subtitle {
margin: 0;
font-size: 0.95rem;
color: var(--text-muted);
}
.header-actions {
display: flex;
gap: 0.75rem;
align-items: center;
}
.spellbooks-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.spellbook-item {
display: flex;
justify-content: space-between;
align-items: stretch;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.25rem;
transition: background 0.2s, border-color 0.2s;
}
.spellbook-item:hover {
background: var(--surface-2);
border-color: var(--accent);
}
.spellbook-main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.spellbook-title-row {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.spellbook-main h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
.spellbook-main h3 a {
color: var(--text);
text-decoration: none;
transition: color 0.2s;
}
.spellbook-main h3 a:hover {
color: var(--accent);
}
.spellbook-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 1.75rem;
padding: 0 0.5rem;
background: var(--accent-muted);
border: 1px solid var(--accent);
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent);
}
.spellbook-description {
margin: 0;
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.4;
}
.spellbook-description .muted {
color: var(--text-muted);
font-weight: 500;
}
.spellbook-actions {
display: flex;
gap: 0.5rem;
align-items: center;
margin-left: 1rem;
}
.spellbook-items,
.stockpile-items {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
}
.items-section {
padding: 0;
}
.items-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1rem;
}
.items-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--text);
}
.items-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 1.75rem;
padding: 0 0.5rem;
background: var(--accent-muted);
border: 1px solid var(--accent);
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent);
}
.items-list-simple {
margin: 1rem 0 0;
padding-left: 1.75rem;
list-style: decimal;
}
.list-item {
padding: 0.5rem 0;
color: var(--text);
line-height: 1.5;
border-bottom: 1px solid var(--border);
}
.list-item:last-child {
border-bottom: none;
}
.empty-state {
text-align: center;
padding: 2rem 1rem;
}
.empty-state-spellbooks {
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 8px;
padding: 2rem 1rem;
}
.empty-icon {
font-size: 3rem;
margin-bottom: 0.75rem;
}
.empty-state h2 {
margin: 0 0 0.75rem;
font-size: 1.25rem;
font-weight: 600;
}
.empty-state p {
margin: 0 0 1.5rem;
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.5;
}
.empty-items-state {
text-align: center;
padding: 2.5rem 1.5rem;
background: var(--surface-2);
border: 1px dashed var(--border);
border-radius: 8px;
}
.empty-items-state .empty-icon {
font-size: 3rem;
margin-bottom: 0.75rem;
}
.empty-items-state h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
}
.empty-items-state p {
margin: 0.5rem 0;
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.5;
}
.empty-hint {
margin-bottom: 1.5rem !important;
font-size: 0.85rem;
}
.spellbook-footer {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.spellbook-tip {
margin: 0;
padding: 0.75rem 1rem;
background: var(--accent-muted);
border-left: 3px solid var(--accent);
border-radius: 4px;
font-size: 0.9rem;
color: var(--text);
line-height: 1.5;
}
.spellbook-tip strong {
color: var(--accent);
}
.spellbook-tip code {
display: inline-block;
padding: 0.2rem 0.4rem;
background: var(--surface-2);
border-radius: 3px;
font-family: monospace;
font-size: 0.8rem;
color: var(--text-muted);
}
.form-header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.form-header h1 {
margin: 0 0 0.5rem;
font-size: 2rem;
font-weight: 700;
}
.form-header p {
margin: 0;
font-size: 0.95rem;
color: var(--text-muted);
}
.form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.warning-box {
background: var(--warning-bg);
border: 1px solid var(--warning-border);
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
.warning-box strong {
color: var(--warning-text);
display: block;
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.warning-box p {
margin: 0.5rem 0;
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.4;
}
.warning-note {
font-size: 0.85rem;
font-style: italic;
}
.error-box {
background: var(--error-bg);
border: 1px solid var(--error-border);
border-radius: 8px;
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
.error-box h2 {
margin: 0 0 0.75rem;
font-size: 1rem;
font-weight: 600;
color: #b06060;
}
.error-box ul {
margin: 0;
padding-left: 1.25rem;
}
.error-box li {
margin-bottom: 0.25rem;
font-size: 0.9rem;
color: #a07070;
}
.form-input-lg {
font-size: 1.05rem;
padding: 0.75rem 1rem;
}
.form-hint {
display: block;
margin-top: 0.4rem;
color: var(--text-muted);
font-size: 0.85rem;
}
.items-section {
margin-bottom: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.items-edit-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
}
.item-edit-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
transition:
background 0.2s,
border-color 0.2s,
opacity 0.15s;
cursor: move;
}
.item-edit-row:focus-within {
background: var(--surface);
border-color: var(--accent);
}
.item-edit-row.dragging {
opacity: 0.4;
background: var(--surface-2);
border-color: var(--accent);
}
.item-edit-row:hover {
background: var(--surface);
border-color: var(--border);
}
.item-drag-handle {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
color: var(--text-muted);
cursor: grab;
font-weight: 600;
flex-shrink: 0;
}
.item-drag-handle:active {
cursor: grabbing;
}
.item-input-wrapper {
flex: 1;
}
.item-input {
width: 100%;
padding: 0.5rem 0.75rem;
background: transparent;
color: var(--text);
border: none;
border-radius: 4px;
font-size: 0.95rem;
font-family:
system-ui,
-apple-system,
sans-serif;
outline: none;
}
.item-input::placeholder {
color: var(--text-muted);
}
.item-remove-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
cursor: pointer;
color: var(--text-muted);
transition: color 0.2s;
}
.item-remove-btn:hover {
color: #a05050;
}
.item-remove-btn input[type=checkbox] {
display: none;
}
.item-remove-btn span {
font-size: 1rem;
}
.danger-zone {
background: var(--warning-bg);
border: 1px solid var(--warning-border);
border-radius: 8px;
padding: 1.25rem;
margin-top: 2rem;
}
.danger-zone h4 {
margin: 0 0 1rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--warning-text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.empty-items {
color: var(--text-muted);
margin: 0;
}
.empty-items a {
color: var(--accent);
}
.items-section {
margin-bottom: 1.25rem;
}
.items-section h3 {
margin-bottom: 0.75rem;
font-size: 1rem;
font-weight: 600;
}
.items-list {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.5rem;
align-items: center;
}
.item-row {
display: contents;
}
.item-input-wrapper {
display: flex;
align-items: center;
}
.item-input {
width: 100%;
padding: 0.5rem 0.75rem;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.95rem;
font-family:
system-ui,
-apple-system,
sans-serif;
}
.item-input:focus {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.item-row .remove-label {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.5rem;
cursor: pointer;
opacity: 0.6;
transition: opacity 150ms ease;
}
.item-row .remove-label:hover {
opacity: 1;
}
.remove-label {
display: flex;
align-items: center;
gap: 0.3rem;
white-space: nowrap;
color: var(--text-muted);
font-size: 0.85rem;
cursor: pointer;
}
.reference-warning {
background: var(--warning-bg);
border: 1px solid var(--warning-border);
border-left: 4px solid var(--warning);
padding: 0.75rem 1rem;
border-radius: 4px;
margin-bottom: 1.25rem;
font-size: 0.9rem;
}
.delete-section {
border-top: 1px solid var(--border);
padding-top: 1.25rem;
margin-top: 1rem;
}
/* app/javascript/stylesheets/_settings.css */
.settings-room {
position: relative;
z-index: 1;
}
.settings-room__floor {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
900px 520px at 50% 220px,
rgba(232, 168, 64, 0.085) 0%,
rgba(232, 168, 64, 0.045) 22%,
rgba(232, 168, 64, 0.015) 44%,
transparent 62%),
linear-gradient(
180deg,
#1c1814 0%,
#1a1611 320px,
#16130e 1100px,
#110e0a 1900px,
#0c0a08 2700px,
#08070a 100%);
}
.settings-room__floor::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
120% 100% at 50% 30%,
transparent 0%,
transparent 35%,
rgba(0, 0, 0, 0.45) 80%,
rgba(0, 0, 0, 0.7) 100%);
}
.settings-room__floor::after {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(
180deg,
transparent 0 130px,
rgba(255, 200, 140, 0.012) 130px 131px,
transparent 131px 240px,
rgba(0, 0, 0, 0.06) 240px 241px);
mix-blend-mode: overlay;
opacity: 0.55;
}
.settings-room > :not(.settings-room__floor) {
position: relative;
z-index: 1;
}
.settings-lintel {
position: relative;
margin: 0.5rem 0 2.5rem;
padding: 1.6rem 0 1.7rem;
text-align: center;
background:
radial-gradient(
80% 100% at 50% 50%,
rgba(60, 42, 18, 0.55) 0%,
rgba(28, 20, 10, 0.85) 60%,
#100c08 100%);
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(232, 168, 64, 0.10),
inset 0 -1px 0 rgba(0, 0, 0, 0.7),
inset 0 0 0 1px rgba(60, 46, 28, 0.7),
0 14px 40px rgba(0, 0, 0, 0.55);
}
.settings-lintel__title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 28px;
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 700;
font-size: clamp(20px, 3.5vw, 30px);
letter-spacing: 0.46em;
text-transform: uppercase;
color: #e8a840;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 0 22px rgba(232, 90, 26, 0.18);
}
.settings-lintel::before,
.settings-lintel::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(232, 168, 64, 0.18) 20%,
rgba(232, 168, 64, 0.32) 50%,
rgba(232, 168, 64, 0.18) 80%,
transparent);
}
.settings-lintel::before {
top: 6px;
}
.settings-lintel::after {
bottom: 6px;
}
.settings-lintel__rune {
font-family:
"Noto Sans Runic",
"Cinzel",
Georgia,
serif;
font-weight: 400;
font-size: 0.85em;
margin: 0;
letter-spacing: 0;
color: #1a120a;
filter: drop-shadow(0 1px 0 rgba(232, 168, 64, 0.18)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.85));
-webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.9);
transform: translateY(-2px);
}
.settings-lintel__sub {
display: block;
margin-top: 10px;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(123, 107, 80, 0.85);
font-weight: 400;
}
.settings-section {
margin-bottom: 1.5rem;
}
.settings-section--divided {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.settings-section-title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.72rem;
font-weight: 600;
color: oklch(0.60 0.09 58);
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.settings-section-title::after {
content: "";
flex: 1;
height: 1px;
background:
linear-gradient(
90deg,
rgba(180, 120, 30, 0.3),
transparent);
}
.settings-section-title--minor {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.65rem;
font-weight: 600;
color: oklch(0.52 0.07 58);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 0.5rem;
}
.settings-hint {
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-style: italic;
color: #a89c8a;
font-size: 14px;
line-height: 1.55;
margin-bottom: 0.75rem;
max-width: 56ch;
}
.settings-hint em {
color: #c8b896;
font-style: italic;
}
.settings-hint--inline {
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-style: italic;
font-size: 12.5px;
color: #80766a;
line-height: 1.5;
margin: 0;
max-width: none;
text-wrap: balance;
}
.settings-panel {
background:
linear-gradient(
160deg,
rgba(28, 22, 12, 0.7) 0%,
rgba(26, 22, 16, 0.4) 100%);
border: 1px solid rgba(180, 130, 40, 0.2);
border-radius: 8px;
padding: 1.1rem 1.1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
box-shadow: inset 0 1px 0 rgba(255, 200, 100, 0.04), 0 4px 16px rgba(0, 0, 0, 0.35);
}
.settings-panel--group {
margin-top: 0.6rem;
}
.settings-panel--coming-soon {
opacity: 0.45;
}
.settings-panel--engine {
position: relative;
background:
linear-gradient(
180deg,
#181612 0%,
#14110d 100%);
border: 0;
border-radius: 4px;
padding: 0;
margin-top: 0.6rem;
box-shadow: inset 0 0 0 1px rgba(70, 62, 52, 0.55), inset 0 1px 0 rgba(232, 168, 64, 0.04);
}
.settings-engine__ticks {
position: absolute;
top: 0;
left: 14px;
right: 14px;
height: 8px;
background-image:
repeating-linear-gradient(
90deg,
transparent 0 11px,
rgba(184, 156, 106, 0.20) 11px 12px);
opacity: 0.6;
pointer-events: none;
}
.settings-engine__ticks::after {
content: "";
position: absolute;
inset: 0 0 -4px 0;
background-image:
repeating-linear-gradient(
90deg,
transparent 0 59px,
rgba(184, 156, 106, 0.32) 59px 60px);
}
.engine-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin: 14px 0 0;
}
.engine-cell {
padding: 18px 22px;
border-right: 1px solid rgba(70, 62, 52, 0.5);
border-bottom: 1px solid rgba(70, 62, 52, 0.5);
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.engine-cell:nth-child(2n) {
border-right: 0;
}
.engine-cell:last-child,
.engine-cell:nth-last-child(2):nth-child(2n+1) {
border-bottom: 0;
}
.engine-cell--full {
grid-column: 1 / -1;
border-right: 0;
}
.engine-cell--full:last-child {
border-bottom: 0;
}
.engine-display {
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.field-lbl {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 9.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 4px;
display: block;
font-weight: 500;
}
.field-help {
margin: 0.3rem 0 0;
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-size: 12.5px;
font-style: italic;
color: #80766a;
line-height: 1.5;
}
.field-help--sub {
margin: 0.15rem 0 0.6rem 1.65rem;
font-size: 11.5px;
color: #6a6058;
}
.ipt {
background: #100e0a;
border: 1px solid rgba(70, 62, 52, 0.7);
color: var(--text);
padding: 8px 11px;
border-radius: 3px;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-variant-numeric: tabular-nums;
font-size: 13px;
outline: none;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
width: 100%;
box-sizing: border-box;
}
.ipt:focus {
border-color: rgba(184, 156, 106, 0.55);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(184, 156, 106, 0.18);
}
.ipt.select-look {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
.check {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
color: var(--text);
font-size: 13.5px;
line-height: 1.4;
position: relative;
}
.check__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.check__box {
width: 16px;
height: 16px;
flex-shrink: 0;
background: #100e0a;
border: 1px solid rgba(70, 62, 52, 0.7);
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background 140ms,
border-color 140ms,
box-shadow 140ms;
position: relative;
}
.check__input:checked + .check__box {
background:
linear-gradient(
180deg,
#3a2a14,
#261a08);
border-color: rgba(232, 168, 64, 0.55);
box-shadow:
inset 0 1px 0 rgba(232, 168, 64, 0.2),
inset 0 -1px 2px rgba(0, 0, 0, 0.6),
0 0 6px rgba(232, 168, 64, 0.15);
}
.check__input:checked + .check__box::after {
content: "";
width: 8px;
height: 4px;
border-left: 1.5px solid #e8a840;
border-bottom: 1.5px solid #e8a840;
transform: rotate(-45deg) translate(0, -1px);
}
.check__input:focus-visible + .check__box {
outline: 2px solid rgba(232, 168, 64, 0.6);
outline-offset: 2px;
}
.check__text {
flex: 1;
min-width: 0;
}
.check__hint {
color: var(--text-faint, #5c5450);
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 9.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-left: 6px;
flex-shrink: 0;
}
.engine-display .check + .check {
margin-top: 0.3rem;
}
@media (max-width: 720px) {
.engine-grid {
grid-template-columns: 1fr;
}
.engine-cell {
border-right: 0 !important;
border-bottom: 1px solid rgba(70, 62, 52, 0.5);
}
.engine-cell:last-child {
border-bottom: 0;
}
}
.schedule-readout {
margin-top: 1.1rem;
padding: 0.85rem 1rem;
border-radius: 3px;
background:
linear-gradient(
180deg,
#0e0c08 0%,
#0a0805 100%);
box-shadow:
inset 0 1px 0 rgba(232, 168, 64, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.7),
inset 0 0 0 1px rgba(184, 156, 106, 0.18);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.schedule-readout__seg {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 0 0.6rem;
min-width: 0;
}
.schedule-readout__t {
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
.schedule-readout__v {
font-size: 17px;
color: #d4bb87;
letter-spacing: 0.04em;
}
.schedule-readout__arrow {
color: rgba(184, 156, 106, 0.35);
font-size: 13px;
flex-shrink: 1;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
@media (max-width: 540px) {
.schedule-readout__arrow {
display: none;
}
.schedule-readout {
flex-wrap: wrap;
justify-content: space-around;
gap: 0.6rem;
}
}
.settings-group-label {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.65rem;
font-weight: 600;
color: oklch(0.58 0.1 58);
text-transform: uppercase;
letter-spacing: 0.16em;
margin: 0;
padding-left: 0.6rem;
border-left: 2px solid rgba(180, 120, 30, 0.45);
display: flex;
align-items: center;
gap: 0.5rem;
}
.settings-encounters-grid {
display: grid;
grid-template-columns: max-content 1fr;
align-items: center;
gap: 0.5rem 0.75rem;
}
.settings-encounters-grid .btn {
width: 100%;
}
.settings-hard-mode {
margin-top: 0.6rem;
border-radius: 3px;
overflow: hidden;
background:
repeating-linear-gradient(
180deg,
transparent 0 32px,
rgba(60, 40, 20, 0.10) 32px 33px),
linear-gradient(
180deg,
#1a130c 0%,
#120c08 100%);
box-shadow:
inset 0 1px 0 rgba(184, 120, 56, 0.10),
inset 0 -1px 0 rgba(0, 0, 0, 0.85),
inset 0 0 0 1px rgba(40, 30, 18, 0.95),
inset 0 0 24px rgba(0, 0, 0, 0.55),
0 8px 22px rgba(0, 0, 0, 0.5);
transition: box-shadow 280ms ease;
}
.settings-hard-mode__toggle {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 1rem 1.1rem;
position: relative;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.36em;
text-transform: uppercase;
color: #6e5840;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
user-select: none;
transition: color 0.18s;
}
.settings-hard-mode__toggle::-webkit-details-marker {
display: none;
}
.settings-hard-mode__toggle::before {
content: "";
position: absolute;
left: 50%;
top: 12px;
bottom: 12px;
width: 1px;
background:
linear-gradient(
180deg,
transparent,
rgba(0, 0, 0, 0.7),
transparent);
box-shadow: 1px 0 0 rgba(184, 120, 56, 0.06);
opacity: 0.55;
pointer-events: none;
transition: opacity 220ms ease;
}
.settings-hard-mode__toggle::after {
content: "";
flex-shrink: 0;
width: 26px;
height: 30px;
position: relative;
background:
radial-gradient(
60% 60% at 50% 40%,
rgba(0, 0, 0, 0.6),
transparent 70%),
linear-gradient(
180deg,
#1a140e 0%,
#0c0805 100%),
radial-gradient(
circle at 50% 35%,
transparent 6px,
#4a3a2a 6px,
#4a3a2a 7.5px,
transparent 8px);
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(120, 90, 60, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.85),
inset 0 0 0 1px rgba(40, 30, 18, 0.9);
}
.settings-hard-mode[open] > .settings-hard-mode__toggle::before {
opacity: 0;
}
.settings-hard-mode:hover {
box-shadow:
inset 0 1px 0 rgba(184, 120, 56, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.85),
inset 0 0 0 1px rgba(60, 40, 18, 0.95),
inset 0 0 24px rgba(0, 0, 0, 0.55),
0 10px 28px rgba(0, 0, 0, 0.55),
0 0 28px rgba(184, 120, 56, 0.10);
}
.settings-hard-mode:hover .settings-hard-mode__toggle,
.settings-hard-mode[open] .settings-hard-mode__toggle {
color: #c8a870;
}
.settings-hard-mode[open] .settings-panel {
background:
radial-gradient(
80% 80% at 20% 0%,
rgba(232, 168, 64, 0.04),
transparent 60%),
linear-gradient(
180deg,
#0a0806 0%,
#060504 100%);
box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.85), inset 0 -1px 0 rgba(184, 120, 56, 0.06);
border: 0;
border-radius: 0;
margin: 0 1px;
}
.settings-hard-mode[open] > form,
.settings-hard-mode[open] > .settings-panel {
margin-top: 0;
}
.settings-hard-mode[open] .settings-panel + .settings-panel {
border-top: 1px solid rgba(70, 40, 20, 0.5);
}
.settings-cabinet__title-row {
display: inline-flex;
align-items: baseline;
gap: 0.85rem;
flex: 1;
min-width: 0;
}
.settings-cabinet__title {
flex-shrink: 0;
}
.settings-cabinet__sub {
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-style: italic;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
color: #5e5040;
font-weight: 400;
text-shadow: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-panel--account .acct-row + .acct-row {
border-top: 1px solid rgba(70, 62, 52, 0.3);
}
.acct-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 8px 0;
color: #b8a890;
font-size: 13px;
}
.acct-row__lbl {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 9.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-muted);
flex-shrink: 0;
}
.acct-row__val {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
color: #c8b896;
font-variant-numeric: tabular-nums;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-danger-btn {
box-sizing: border-box;
height: 32px;
min-width: 11rem;
padding: 0 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(80, 22, 22, 0.75);
color: #cc6a5a;
border: 1px solid rgba(160, 65, 50, 0.75);
border-radius: 3px;
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 500;
font-size: 11px;
letter-spacing: 0.26em;
text-transform: uppercase;
cursor: pointer;
transition:
background 140ms,
color 140ms,
border-color 140ms;
}
.settings-danger-btn:hover {
background: rgba(105, 30, 28, 0.9);
color: #e07a68;
border-color: rgba(190, 80, 65, 0.9);
}
.settings-panel--account form {
display: contents;
}
.settings-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.settings-field label {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.settings-field--checkbox {
flex-direction: row;
align-items: center;
gap: 0.6rem;
}
.settings-field--checkbox label {
font-size: 0.95rem;
font-weight: 400;
color: var(--text);
text-transform: none;
letter-spacing: 0;
cursor: pointer;
}
.settings-field--action {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.settings-field--action .btn,
.settings-field--action form .btn {
box-sizing: border-box;
height: 32px;
min-height: 0;
min-width: 11rem;
padding: 0 0.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: auto;
background:
linear-gradient(
180deg,
#272012 0%,
#191208 100%);
color: #c8a870;
border-color: rgba(180, 120, 50, 0.45);
font-size: 0.82rem;
}
.settings-field--action .btn:hover,
.settings-field--action form .btn:hover {
background:
linear-gradient(
180deg,
#312818 0%,
#201608 100%);
color: #e0bc80;
border-color: rgba(200, 140, 65, 0.65);
}
.settings-field--action .btn-warning,
.settings-field--action form .btn-warning {
background:
linear-gradient(
180deg,
#3a2808 0%,
#2a1c06 100%);
color: #d4a040;
border-color: rgba(180, 110, 30, 0.65);
}
.settings-field--action .btn-warning:hover,
.settings-field--action form .btn-warning:hover {
background:
linear-gradient(
180deg,
#4a3210 0%,
#38240a 100%);
color: #e8b850;
border-color: rgba(200, 130, 40, 0.85);
}
.settings-field--action .settings-danger-btn,
.settings-field--action form .settings-danger-btn {
flex: none;
width: auto;
height: 32px;
min-height: 0;
}
.settings-file-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.settings-import-filename {
font-size: 0.8rem;
color: var(--text-muted);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.settings-import-filename.has-file {
color: var(--text);
}
.settings-field--disabled {
pointer-events: none;
opacity: 0.6;
}
.settings-checkbox {
width: 1rem;
height: 1rem;
flex-shrink: 0;
accent-color: oklch(0.68 0.12 58);
cursor: pointer;
}
.settings-select {
appearance: none;
background: rgba(20, 16, 8, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23886633'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
color: var(--text);
border: 1px solid rgba(180, 130, 40, 0.25);
border-radius: 6px;
padding: 0.5rem 2rem 0.5rem 0.75rem;
font-size: 0.9rem;
font-family: inherit;
cursor: pointer;
width: 100%;
}
.settings-select:focus {
outline: 2px solid oklch(0.68 0.12 58);
outline-offset: 2px;
}
.settings-callout {
padding: 0.75rem 1rem;
background: rgba(100, 160, 255, 0.06);
border: 1px solid rgba(100, 160, 255, 0.2);
border-radius: 6px;
font-size: 0.9rem;
color: var(--text-muted);
}
.settings-callout strong {
display: block;
margin-bottom: 0.25rem;
color: var(--text);
}
.settings-callout p {
margin: 0;
}
.settings-callout--green {
background: rgba(61, 139, 85, 0.1);
border-color: rgba(61, 139, 85, 0.35);
color: #7ecf9a;
}
.settings-callout--stasis {
background: rgba(120, 40, 160, 0.12);
border-color: rgba(180, 80, 200, 0.35);
color: #c8a0e8;
}
.settings-fortress {
padding: 1rem 1.1rem;
background:
linear-gradient(
140deg,
rgba(14, 10, 4, 0.5) 0%,
rgba(22, 16, 8, 0.3) 100%);
border: 1px solid rgba(180, 130, 40, 0.15);
border-radius: 8px;
}
.btn-stasis-freeze,
.btn-stasis-thaw {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.btn-stasis-freeze {
background:
linear-gradient(
135deg,
#2a1800 0%,
#1a1000 100%);
color: #e8a840;
border-color: rgba(180, 120, 30, 0.5);
box-shadow: 0 0 10px rgba(180, 100, 10, 0.12);
}
@media (hover: hover) {
.btn-stasis-freeze:hover {
background:
linear-gradient(
135deg,
#3a2200 0%,
#261600 100%);
border-color: rgba(200, 140, 40, 0.7);
box-shadow: 0 0 14px rgba(180, 100, 10, 0.24);
}
}
.btn-stasis-thaw {
background:
linear-gradient(
135deg,
#0a0a2a 0%,
#060618 100%);
color: #9aa8f0;
border-color: rgba(80, 100, 200, 0.5);
box-shadow: 0 0 10px rgba(80, 100, 200, 0.12);
}
@media (hover: hover) {
.btn-stasis-thaw:hover {
background:
linear-gradient(
135deg,
#10102e 0%,
#0a0a22 100%);
border-color: rgba(100, 120, 220, 0.7);
box-shadow: 0 0 14px rgba(80, 100, 200, 0.24);
}
}
.fortress-status-msg--stasis {
font-size: 0.88rem;
color: #c8a0e8;
margin-bottom: 0.75rem;
}
.settings-coming-soon-badge {
font-size: 0.6rem;
font-weight: 600;
font-family: system-ui, sans-serif;
background: rgba(80, 70, 50, 0.3);
color: oklch(0.48 0.06 60);
border: 1px solid rgba(120, 100, 50, 0.25);
border-radius: 3px;
padding: 0.1em 0.45em;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.memorial-slab {
background:
linear-gradient(
180deg,
rgba(30, 30, 32, 0.95) 0%,
rgba(18, 18, 20, 0.98) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
background-size: 100% 100%, 200px 200px;
border: 1px solid rgba(80, 80, 86, 0.5);
border-top-color: rgba(100, 100, 108, 0.4);
border-bottom: 2px solid rgba(0, 0, 0, 0.8);
border-radius: 4px;
padding: 1.75rem 1.75rem 1.25rem;
box-shadow:
inset 0 1px 0 rgba(160, 160, 170, 0.06),
inset 0 -2px 0 rgba(0, 0, 0, 0.6),
inset 2px 0 0 rgba(0, 0, 0, 0.25),
inset -2px 0 0 rgba(0, 0, 0, 0.25),
0 8px 28px rgba(0, 0, 0, 0.5);
}
.memorial-slab__title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.35em;
text-transform: uppercase;
text-align: center;
color: rgba(185, 185, 195, 0.9);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 -1px 0 rgba(220, 220, 230, 0.1);
margin: 0 0 1.5rem;
padding-bottom: 1.1rem;
border-bottom: 1px solid rgba(80, 80, 88, 0.35);
}
.lineage-entries {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
}
.lineage-entry {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 0.25rem 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(70, 70, 76, 0.4);
}
.lineage-entry:first-child {
padding-top: 0;
}
.lineage-entry:last-child {
padding-bottom: 0;
border-bottom: none;
}
.lineage-entry__name {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.82rem;
font-weight: 600;
color: oklch(0.80 0.0 0);
letter-spacing: 0.04em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 -0.5px 0 rgba(220, 220, 230, 0.08);
grid-column: 1;
grid-row: 1;
}
.lineage-entry__dates {
font-family: "JetBrains Mono", monospace;
font-size: 0.72rem;
color: oklch(0.60 0.0 0);
font-variant-numeric: tabular-nums;
grid-column: 2;
grid-row: 1;
white-space: nowrap;
align-self: center;
}
.lineage-entry__epitaph {
font-size: 0.8rem;
font-style: italic;
color: oklch(0.68 0.0 0);
line-height: 1.6;
grid-column: 1 / -1;
grid-row: 2;
margin-left: 0;
}
.memorial-slab__cellar {
position: relative;
overflow: hidden;
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(70, 70, 78, 0.4);
border-radius: 3px;
}
.memorial-slab__cellar .cellar-barrels,
.memorial-slab__cellar .settings-hint {
position: relative;
z-index: 2;
}
.cellar-footer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(65, 65, 72, 0.35);
}
.cellar-footer .btn {
flex: none;
width: auto;
}
.cellar-revision {
font-size: 0.78rem;
color: oklch(0.52 0.0 0);
}
.cellar-revision__sha {
font-family: "JetBrains Mono", monospace;
font-size: 0.74rem;
color: oklch(0.56 0.0 0);
background: rgba(6, 6, 8, 0.65);
border: 1px solid rgba(65, 65, 72, 0.3);
padding: 0.1em 0.4em;
border-radius: 3px;
}
/* app/javascript/stylesheets/_nav.css */
.app-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
background: var(--surface);
border-top: 1px solid var(--border);
z-index: 100;
}
.app-nav-item {
flex: 1;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--text-muted);
font-size: 0.8rem;
transition: color 0.15s ease, text-shadow 0.15s ease;
}
.app-nav-group {
flex: 1;
display: flex;
flex-direction: column;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
}
.app-nav-group .app-nav-item {
flex: 1;
min-height: 0;
font-size: 0.7rem;
border-bottom: 1px solid var(--border);
}
.app-nav-group .app-nav-item:last-child {
border-bottom: none;
}
.app-nav-item.active {
color: var(--text);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.app-nav-item:hover {
color: #e8a840;
text-shadow: 0 0 8px rgba(180, 120, 40, 0.7), 0 0 20px rgba(180, 120, 40, 0.35);
}
.nav-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.1em;
height: 1.1em;
padding: 0 0.3em;
font-size: 0.65rem;
font-weight: 600;
line-height: 1;
color: #fff;
background: rgba(180, 80, 200, 0.7);
border-radius: 9px;
margin-left: 0.2em;
vertical-align: middle;
}
.nav-badge--empty {
background: rgba(100, 100, 110, 0.5);
color: rgba(200, 200, 210, 0.6);
}
.nav-badge--stasis {
background: rgba(100, 100, 120, 0.45);
color: rgba(180, 180, 200, 0.55);
}
.app-nav ~ main {
padding-bottom: 60px;
}
@media (max-width: 767px) {
.nav-desktop-only {
display: none;
}
}
@media (min-width: 768px) {
.nav-mobile-only {
display: none;
}
}
@media (min-width: 768px) {
.app-nav {
position: relative;
border-top: none;
border-bottom: 1px solid var(--border);
justify-content: center;
gap: 2rem;
}
.app-nav-item {
min-height: 48px;
}
.app-nav-group {
border-left: none;
border-right: none;
gap: 0;
}
.app-nav-group .app-nav-item {
min-height: 24px;
font-size: 0.75rem;
border-bottom: none;
}
.app-nav ~ main {
padding-bottom: 0;
}
}
/* app/javascript/stylesheets/_gameboard.css */
.gameboard-container {
max-width: 1700px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
body:has(.gameboard-container) {
background-color: #1c1a17;
background-image:
linear-gradient(
180deg,
rgba(10, 8, 6, 0.85) 0%,
rgba(10, 8, 6, 0.35) 80px,
transparent 200px),
url("data:image/svg+xml;utf8,");
background-size: auto, 612px 252px;
background-attachment: fixed, fixed;
}
.gameboard-container .battlefield-zone {
position: relative;
border-radius: 8px;
padding: 1.25rem 1rem 2.5rem;
margin-bottom: 2rem;
background-color: #1f1812;
background-image:
radial-gradient(
ellipse at 50% -8%,
rgba(255, 180, 90, 0.10),
transparent 50%),
radial-gradient(
ellipse at 50% 110%,
rgba(0, 0, 0, 0.55),
transparent 60%),
linear-gradient(
90deg,
rgba(0, 0, 0, 0.4) 1px,
transparent 1px),
linear-gradient(
0deg,
rgba(0, 0, 0, 0.4) 1px,
transparent 1px),
linear-gradient(
180deg,
#2c2520,
#1a1410);
background-size:
auto,
auto,
84px 84px,
84px 84px,
auto;
border: 2px solid var(--brass-edge);
box-shadow:
inset 0 0 0 1px #5a4632,
inset 0 0 60px rgba(0, 0, 0, 0.5),
0 22px 60px rgba(0, 0, 0, 0.7);
}
.gameboard-container .battlefield-zone::before {
content: "";
position: absolute;
pointer-events: none;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
background-image:
radial-gradient(
circle at 10px 10px,
#1a1208 0 3px,
transparent 3px 5px,
rgba(255, 210, 140, 0.18) 5px 6px,
transparent 6px),
radial-gradient(
circle at calc(100% - 10px) 10px,
#1a1208 0 3px,
transparent 3px 5px,
rgba(255, 210, 140, 0.18) 5px 6px,
transparent 6px),
radial-gradient(
circle at 10px calc(100% - 10px),
#1a1208 0 3px,
transparent 3px 5px,
rgba(255, 210, 140, 0.18) 5px 6px,
transparent 6px),
radial-gradient(
circle at calc(100% - 10px) calc(100% - 10px),
#1a1208 0 3px,
transparent 3px 5px,
rgba(255, 210, 140, 0.18) 5px 6px,
transparent 6px);
background-repeat: no-repeat;
z-index: 1;
}
.gameboard-container .battlefield-zone::after {
content: "";
position: absolute;
pointer-events: none;
top: -10px;
left: 25%;
right: 25%;
height: 30px;
background:
radial-gradient(
ellipse at center top,
rgba(255, 200, 120, 0.45),
transparent 70%);
filter: blur(8px);
z-index: 1;
}
.gameboard-container .battlefield-zone .forge-rune {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
font-family:
"Cinzel",
Georgia,
serif;
font-size: 60px;
font-weight: 700;
color: rgba(255, 210, 140, 0.06);
letter-spacing: 0.4em;
pointer-events: none;
user-select: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(255, 210, 140, 0.03);
z-index: 1;
}
.gameboard-container .battlefield-zone > *:not(.forge-rune) {
position: relative;
z-index: 2;
}
.gameboard-container .battlefield-zone .zone-header {
border-bottom: 1px solid rgba(255, 210, 140, 0.08);
padding-bottom: 0.75rem;
margin-bottom: 1.25rem;
}
.battlefield-zone .stack-column {
background: none !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
min-height: auto !important;
padding: 0 !important;
}
.battlefield-zone .stack-column::before,
.battlefield-zone .stack-column::after {
content: none !important;
background: none !important;
}
.gameboard-container .battlefield-zone .zone-title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--brass-text);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 4px rgba(255, 200, 100, 0.18);
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
}
.zone-title__ornament {
color: rgba(122, 86, 24, 0.85);
font-size: 0.85em;
font-weight: 400;
}
.zone-title__sub {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
margin-left: 0.75rem;
text-shadow: none;
}
.gameboard-container .battlefield-zone .board-filter-tab {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
background: none;
border: none;
border-bottom: 1.5px solid transparent;
padding: 2px 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.gameboard-container .battlefield-zone .board-filter-tab:hover {
color: var(--text-muted);
}
.gameboard-container .battlefield-zone .board-filter-tab.active {
color: var(--brass-text);
border-bottom-color: var(--brass-text);
}
.upkeep-digest {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem 1rem;
margin-bottom: 1.25rem;
}
.upkeep-cell {
display: grid;
grid-template-columns: 14px 1fr;
align-items: center;
column-gap: 0.4rem;
row-gap: 0.15rem;
}
.upkeep-cell .upkeep-label {
grid-column: 1 / -1;
}
.upkeep-label {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text);
}
.upkeep-value {
font-size: 0.75rem;
color: var(--text-muted);
display: contents;
}
.upkeep-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.75rem;
}
.upkeep-warning .upkeep-value {
color: var(--warning-text);
}
.upkeep-schedule-stale .upkeep-value {
color: #d4860a;
}
.turn-panel {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.turn-panel--open {
border-left: 2px solid var(--accent);
}
.turn-panel--closed {
border-left: 2px solid var(--surface-border, #333);
opacity: 0.85;
}
.turn-panel-close-context {
display: block;
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 0.1rem;
}
.turn-phase-time {
font-size: 0.75rem;
font-weight: normal;
color: var(--text-muted);
margin-left: 0.5rem;
}
.turn-panel-status {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.4rem 0;
}
.turn-panel-info {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.economy-display {
display: inline-flex;
gap: 0.5rem;
}
.economy-display--centered {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.economy-display--centered .economy-plump-helmets {
font-size: 1.6rem;
}
.economy-display--centered .economy-dwarven-coins {
font-size: 1.9rem;
}
.economy-bounce {
animation: economy-bounce 0.4s ease-out;
}
@keyframes economy-bounce {
0% {
transform: scale(1);
}
30% {
transform: scale(1.35);
}
60% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
.sun-radiate {
animation: sun-radiate 2.2s ease-out;
display: inline-block;
position: relative;
z-index: 10000;
}
@keyframes sun-radiate {
0% {
transform: scale(1) rotate(0deg);
filter: none;
}
20% {
transform: scale(1.4) rotate(30deg);
filter: drop-shadow(0 0 5px #4de8a0) drop-shadow(0 0 12px #2a9a5a);
}
52% {
transform: scale(2.1) rotate(92deg);
filter: drop-shadow(0 0 10px #4de8a0) drop-shadow(0 0 22px #2a9a5a) drop-shadow(0 0 38px #1a6040);
}
76% {
transform: scale(1.5) rotate(148deg);
filter: drop-shadow(0 0 5px #4de8a0);
}
100% {
transform: scale(1) rotate(180deg);
filter: none;
}
}
.sun-ray {
position: fixed;
width: 2px;
height: 14px;
background:
linear-gradient(
to top,
#4de8a0,
rgba(60, 180, 100, 0));
pointer-events: none;
z-index: 9999;
border-radius: 2px 2px 0 0;
transform-origin: 50% 100%;
animation: sun-ray-extend 1.5s ease-out forwards;
}
@keyframes sun-ray-extend {
0% {
transform: rotate(var(--angle)) scaleY(0);
opacity: 1;
}
55% {
transform: rotate(var(--angle)) scaleY(var(--reach));
opacity: 0.9;
}
100% {
transform: rotate(var(--angle)) scaleY(var(--reach));
opacity: 0;
}
}
[data-fortress-status=stasis] .plump-helmet-shroom {
filter: hue-rotate(210deg) drop-shadow(0 0 4px rgba(100, 160, 240, 0.5));
}
.sun-radiate--stasis {
animation-name: sun-radiate-stasis;
}
@keyframes sun-radiate-stasis {
0% {
transform: scale(1) rotate(0deg);
filter: none;
}
20% {
transform: scale(1.4) rotate(30deg);
filter: drop-shadow(0 0 5px #7ab8f5) drop-shadow(0 0 12px #2a6cb5);
}
52% {
transform: scale(2.1) rotate(92deg);
filter: drop-shadow(0 0 10px #7ab8f5) drop-shadow(0 0 22px #2a6cb5) drop-shadow(0 0 38px #0a3a7a);
}
76% {
transform: scale(1.5) rotate(148deg);
filter: drop-shadow(0 0 5px #7ab8f5);
}
100% {
transform: scale(1) rotate(180deg);
filter: none;
}
}
.sun-ray--stasis {
background:
linear-gradient(
to top,
#7ab8f5,
rgba(100, 160, 240, 0));
}
.mushroom-sproink {
animation: mushroom-sproink 1.4s ease-out;
display: inline-block;
transform-origin: center bottom;
}
@keyframes mushroom-sproink {
0% {
transform: scaleX(1) scaleY(1);
}
8% {
transform: scaleX(1.2) scaleY(0.8);
}
16% {
transform: scaleX(1.45) scaleY(0.5);
}
28% {
transform: scaleX(0.6) scaleY(2.6);
}
40% {
transform: scaleX(1.15) scaleY(2.1);
}
52% {
transform: scaleX(0.65) scaleY(2.2);
}
62% {
transform: scaleX(1.5) scaleY(0.65);
}
72% {
transform: scaleX(0.85) scaleY(1.45);
}
82% {
transform: scaleX(1.18) scaleY(0.88);
}
92% {
transform: scaleX(0.97) scaleY(1.04);
}
100% {
transform: scaleX(1) scaleY(1);
}
}
.confetti-particle {
position: fixed;
width: 10px;
height: 10px;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
animation: confetti-fall 1.6s ease-in forwards;
}
@keyframes confetti-fall {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
20% {
transform: translate(calc(var(--dx) * 0.2), calc(var(--dy) * -0.3)) scale(1.1);
opacity: 1;
}
100% {
transform: translate(var(--dx), var(--dy)) scale(0.5);
opacity: 0;
}
}
.confetti-particle--slow {
animation: confetti-burst-slow 1.4s ease-out forwards;
width: 7px;
height: 7px;
}
@keyframes confetti-burst-slow {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
60% {
opacity: 0.8;
}
100% {
transform: translate(var(--dx), var(--dy)) scale(0.4);
opacity: 0;
}
}
.confetti-particle--mushroom {
animation: confetti-mushroom 0.65s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
width: var(--size, 6px);
height: var(--size, 6px);
border-radius: 2px;
}
@keyframes confetti-mushroom {
0% {
transform: translate(0, 0) scale(1) rotate(0deg);
opacity: 1;
}
50% {
opacity: 1;
}
100% {
transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(var(--spin, 180deg));
opacity: 0;
}
}
.flame-particle {
position: fixed;
width: 8px;
height: 12px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
pointer-events: none;
z-index: 9999;
box-shadow: 0 0 8px 3px rgba(255, 140, 0, 0.5);
animation: flame-rise 0.7s ease-out forwards;
}
@keyframes flame-rise {
0% {
transform: translate(0, 0) scale(1.2);
opacity: 1;
}
30% {
transform: translate(calc(var(--drift) * 0.3), calc(var(--rise) * 0.4)) scale(1);
opacity: 0.9;
}
100% {
transform: translate(var(--drift), var(--rise)) scale(0.2);
opacity: 0;
}
}
.ember-particle {
position: fixed;
width: 4px;
height: 4px;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
box-shadow: 0 0 4px 1px rgba(255, 100, 0, 0.6);
animation: ember-rise 1.4s ease-out forwards;
}
@keyframes ember-rise {
0% {
transform: translate(0, 0) scale(1);
opacity: 0.9;
}
40% {
opacity: 1;
}
70% {
transform: translate(calc(var(--drift) * 0.7), calc(var(--rise) * 0.7)) scale(0.7);
opacity: 0.6;
}
100% {
transform: translate(var(--drift), var(--rise)) scale(0);
opacity: 0;
}
}
.smoke-particle {
position: fixed;
width: 14px;
height: 14px;
border-radius: 50%;
pointer-events: none;
z-index: 9998;
background: rgba(120, 110, 100, 0.4);
filter: blur(3px);
animation: smoke-rise 1.8s ease-out forwards;
}
@keyframes smoke-rise {
0% {
transform: translate(0, 0) scale(0.6);
opacity: 0;
}
15% {
opacity: 0.35;
}
50% {
transform: translate(calc(var(--drift) * 0.5), calc(var(--rise) * 0.5)) scale(1.2);
opacity: 0.2;
}
100% {
transform: translate(var(--drift), var(--rise)) scale(1.8);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.economy-bounce {
animation: none;
}
.mushroom-sproink {
animation: none;
}
.sun-radiate {
animation: none;
}
.sun-ray {
animation: none;
display: none;
}
.confetti-particle {
animation: none;
display: none;
}
.ember-particle,
.flame-particle,
.smoke-particle {
animation: none;
display: none;
}
}
.cellar-barrels {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.75rem;
}
.cellar-barrel {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.3rem 0.65rem 0.3rem 0.3rem;
border: 1px solid rgba(55, 50, 42, 0.7);
border-radius: 5px;
background: rgba(14, 12, 9, 0.55);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cellar-barrel:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.cellar-barrel__icon {
position: relative;
width: 18px;
height: 26px;
border-radius: 30% 30% 30% 30% / 8% 8% 8% 8%;
border: 1px solid rgba(0, 0, 0, 0.5);
border-top-color: rgba(255, 255, 255, 0.12);
border-bottom-color: rgba(0, 0, 0, 0.7);
flex-shrink: 0;
box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.cellar-barrel__icon::before,
.cellar-barrel__icon::after {
content: "";
position: absolute;
left: -1px;
right: -1px;
height: 2px;
background: rgba(0, 0, 0, 0.35);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.cellar-barrel__icon::before {
top: 6px;
}
.cellar-barrel__icon::after {
bottom: 6px;
}
.cellar-barrel__name {
font-family: "JetBrains Mono", monospace;
font-size: 0.65rem;
color: rgba(190, 178, 158, 0.85);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
white-space: nowrap;
}
.cellar-panel {
position: relative;
overflow: hidden;
}
.cellar-panel .cellar-barrels,
.cellar-panel .settings-section-title,
.cellar-panel .settings-hint {
position: relative;
z-index: 2;
}
.cellar-pour {
animation: ale-rise 1s ease-out forwards;
border-radius: inherit;
}
.economy-plump-helmets {
font-size: 1.1rem;
font-weight: 700;
color: #c070e0;
}
.plump-helmet-shroom {
filter: drop-shadow(0 0 3px rgba(192, 112, 224, 0.45));
}
.economy-dwarven-coins {
font-size: 1.3rem;
font-weight: 600;
color: #3d7050;
}
.dwarven-coin-sun {
display: inline-block;
position: relative;
z-index: 10000;
font-size: 1.25em;
font-weight: 700;
line-height: 1;
filter: drop-shadow(0 0 3px rgba(61, 112, 80, 0.5));
}
[data-fortress-status=stasis] .dwarven-coin-sun {
color: #7ab8f5;
filter: drop-shadow(0 0 3px rgba(122, 184, 245, 0.45));
}
.economy-demerits {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-muted);
transition: transform 200ms ease-out;
}
.economy-display--centered .economy-demerits {
font-size: 1.6rem;
}
.demerit-tap-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: inherit;
font-weight: inherit;
color: inherit;
display: inline-flex;
align-items: center;
gap: 0.1em;
line-height: 1;
}
.demerit-bump {
transform: scale(1.15);
}
#demerit-count {
color: var(--warning-text);
}
.demerit-thought {
display: inline-block;
transition: filter 300ms ease-in-out;
}
.demerit-tap-btn.demerit-charged {
background: rgba(255, 152, 0, 0.12);
border-radius: 6px;
outline: 1.5px solid rgba(255, 152, 0, 0.4);
transition: background 200ms ease-out, outline 200ms ease-out;
}
.demerit-tap-btn.demerit-charged .demerit-thought {
filter: sepia(1) hue-rotate(200deg) saturate(4) brightness(1.1);
}
.turn-panel-label {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--accent);
}
.turn-panel-phase {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
}
.turn-panel-replay-link {
background: transparent;
border: 1px solid rgba(255, 152, 0, 0.4);
border-radius: 4px;
color: #ff9800;
font-size: 0.65rem;
padding: 0.15rem 0.5rem;
cursor: pointer;
text-align: left;
box-shadow: 0 0 6px rgba(255, 152, 0, 0.15), inset 0 0 4px rgba(255, 152, 0, 0.05);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.turn-panel-replay-link:hover {
color: #ffb74d;
border-color: rgba(255, 152, 0, 0.7);
box-shadow: 0 0 10px rgba(255, 152, 0, 0.3), inset 0 0 6px rgba(255, 152, 0, 0.1);
}
.turn-panel-calculating {
font-weight: 400;
color: var(--warning-text);
animation: pulse-opacity 1.5s ease-in-out infinite;
}
.turn-panel-calculating.hidden {
display: none;
}
.turn-phase-strip {
display: flex;
gap: 0.25rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.turn-step {
display: flex;
align-items: center;
gap: 0.35rem;
}
.turn-step::after {
content: "\2192";
color: var(--text-muted);
font-size: 0.75rem;
margin: 0 0.1rem;
}
.turn-step:last-child::after {
content: "";
}
.turn-step-detail {
font-size: 0.75rem;
color: var(--text-muted);
}
.turn-step--done .turn-step-detail {
color: var(--text);
}
.turn-panel-replays {
display: flex;
justify-content: center;
gap: 0.25rem;
}
.turn-panel-replays .btn {
font-size: 0.65rem;
padding: 0.1rem 0.45rem;
min-height: unset;
}
.turn-details {
border-top: 1px solid var(--border);
padding-top: 0.5rem;
}
.turn-details-summary {
font-size: 0.85rem;
cursor: pointer;
color: var(--text-muted);
display: flex;
gap: 0.75rem;
align-items: baseline;
}
.turn-phase-empty {
color: var(--text-muted);
font-style: italic;
}
.turn-phase-group {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
}
.turn-phase-group:last-child {
border-bottom: none;
}
.turn-phase-heading {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin: 0 0 0.25rem;
}
.turn-phase-row {
display: flex;
align-items: baseline;
gap: 0.75rem;
padding: 0.15rem 0;
}
.turn-phase-row .turn-card-list {
flex-basis: 100%;
}
.turn-phase-name {
flex-shrink: 0;
width: 4rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.turn-phase-detail {
font-size: 0.85rem;
}
.turn-phase-totals {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.85rem;
}
.turn-card-list {
list-style: none;
padding: 0;
margin: 0.15rem 0 0;
font-size: 0.85rem;
}
.turn-card-list li {
padding: 0.1rem 0;
}
.turn-synthesis-details {
width: 100%;
}
.turn-synthesis-summary {
font-size: 0.8rem;
color: var(--text-muted);
cursor: pointer;
}
.turn-synthesis-notes {
white-space: pre-wrap;
font-size: 0.85rem;
line-height: 1.5;
margin: 0.25rem 0 0;
color: var(--text);
}
.intake-drawer {
margin-bottom: 0.75rem;
border-radius: 6px;
overflow: hidden;
background:
linear-gradient(
180deg,
#1a1510,
#14100c);
border: 1px solid rgba(184, 120, 56, 0.18);
}
.intake-drawer__trigger {
width: 100%;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.75rem;
background: none;
border: none;
border-left: 2px solid rgba(232, 168, 64, 0.2);
cursor: pointer;
color: var(--text-faint);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: color 0.15s, border-color 0.15s;
text-align: left;
}
.intake-drawer__trigger:hover {
color: var(--text-muted);
border-left-color: rgba(232, 168, 64, 0.45);
}
.intake-drawer__trigger[aria-expanded=true] {
color: var(--forge-accent);
border-left-color: var(--forge-accent);
}
.intake-drawer__icon {
font-size: 0.85rem;
}
.intake-drawer__label {
flex: 1;
}
.intake-drawer__chevron {
font-size: 0.65rem;
opacity: 0.45;
transition: transform 0.2s ease;
}
.intake-drawer__trigger[aria-expanded=true] .intake-drawer__chevron {
transform: scaleY(-1);
}
.intake-drawer__panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.22s ease;
}
.intake-drawer__panel.is-open {
max-height: 100px;
}
.intake-form {
display: flex;
gap: 0.5rem;
align-items: center;
padding: 0.6rem 0.75rem;
border-top: 1px solid rgba(184, 120, 56, 0.12);
}
.intake-input {
flex: 1;
min-width: 0;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
padding: 0.35rem 0.6rem;
border-radius: 4px;
font-family: var(--font-sans);
font-size: 0.875rem;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.intake-input:focus {
border-color: var(--forge-accent-dim);
box-shadow: 0 0 0 2px rgba(232, 168, 64, 0.12);
}
.intake-submit {
padding: 0.3rem 0.7rem;
background:
linear-gradient(
180deg,
#2e1e08,
#1e1208);
border: 1px solid rgba(184, 120, 56, 0.35);
border-radius: 4px;
color: var(--forge-accent-dim);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition:
border-color 0.15s,
color 0.15s,
box-shadow 0.15s;
white-space: nowrap;
}
.intake-submit:hover {
border-color: var(--forge-accent);
color: var(--forge-accent);
box-shadow: 0 0 8px rgba(232, 168, 64, 0.18);
}
.intake-submit:active {
background:
linear-gradient(
180deg,
#1e1208,
#2e1e08);
}
.board-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.board-edit-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
#282828,
#141414);
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
color: var(--text-faint);
font-size: 0.75rem;
cursor: pointer;
padding: 0;
transition:
color 0.15s,
border-color 0.15s,
box-shadow 0.15s;
}
.board-edit-toggle:hover {
color: var(--text-muted);
border-color: rgba(255, 255, 255, 0.14);
}
.board-edit-toggle[data-active=true] {
color: var(--forge-accent);
border-color: rgba(232, 168, 64, 0.4);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 0 8px rgba(232, 168, 64, 0.2);
}
/* app/javascript/stylesheets/_forge.css */
.forge-chassis {
position: relative;
background:
linear-gradient(
180deg,
#1d1d1d 0%,
#141414 100%);
border-color: #303030;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
inset 0 0 0 1px rgba(255, 255, 255, 0.03),
0 16px 40px rgba(0, 0, 0, 0.55);
overflow: hidden;
isolation: isolate;
}
.forge-chassis::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.10) 50%,
transparent);
box-shadow: none;
pointer-events: none;
}
.forge-chassis--closed::after {
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.04),
transparent);
box-shadow: none;
}
.forge-rivet {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
#484848,
#1e1e1e);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 1px 1px rgba(0, 0, 0, 0.5);
z-index: 2;
pointer-events: none;
}
.forge-rivet--tl {
top: 8px;
left: 8px;
}
.forge-rivet--tr {
top: 8px;
right: 8px;
}
.forge-rivet--bl {
bottom: 8px;
left: 8px;
}
.forge-rivet--br {
bottom: 8px;
right: 8px;
}
.forge-runner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}
.forge-runner__left {
display: flex;
align-items: center;
gap: 14px;
}
.forge-runner__center {
justify-self: center;
}
.forge-runner__right {
justify-self: end;
}
.turn-stamp {
display: flex;
flex-direction: column;
align-items: center;
padding: 5px 12px 7px;
background:
linear-gradient(
180deg,
#242424,
#161616);
border: 1px solid #333333;
border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
min-width: 52px;
position: relative;
}
.turn-stamp::before {
content: "";
position: absolute;
inset: 3px;
border: 1px dashed rgba(255, 255, 255, 0.08);
border-radius: 2px;
pointer-events: none;
}
.turn-stamp__hash {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 8px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-faint, #5c5450);
margin-bottom: 1px;
}
.turn-stamp__num {
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 700;
font-size: 24px;
letter-spacing: 0.04em;
color: var(--forge-accent, #e8a840);
line-height: 1;
text-shadow: 0 0 10px rgba(232, 168, 64, 0.3), 0 1px 0 rgba(0, 0, 0, 0.6);
font-variant-numeric: tabular-nums;
}
.forge-chassis--closed .turn-stamp__num,
.turn-stamp__num--idle {
color: #6a5840;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.turn-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.turn-meta__row {
display: flex;
align-items: baseline;
gap: 8px;
}
.turn-meta__lbl {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 8px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--text-faint, #5c5450);
min-width: 46px;
}
.turn-meta__val {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 12px;
letter-spacing: 0.06em;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.turn-meta__val--phase {
color: var(--forge-accent, #e8a840);
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 9px;
font-weight: 600;
}
.forge-chassis--closed .turn-meta__val--phase {
color: var(--text-faint, #5c5450);
}
.forge-econ-divider {
display: inline-block;
width: 1px;
height: 28px;
background:
linear-gradient(
180deg,
transparent,
rgba(184, 120, 56, 0.35),
transparent);
margin: 0 4px;
vertical-align: middle;
}
.forge-orb-widget {
display: flex;
align-items: center;
gap: 10px;
}
.forge-orb-bezel {
width: 32px;
height: 32px;
border-radius: 50%;
background:
radial-gradient(
circle at 30% 25%,
#1e1408,
#060200 80%);
border: 1px solid #3a2818;
box-shadow:
inset 0 1px 1px rgba(232, 168, 64, 0.15),
inset 0 -1px 2px rgba(0, 0, 0, 0.8),
0 0 0 2px #100c08,
0 0 0 3px rgba(184, 120, 56, 0.22);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.forge-orb-bezel .schedule-orb {
width: 13px;
height: 13px;
border-radius: 50%;
display: inline-block;
}
.schedule-orb--live {
background: #4a9850;
box-shadow: 0 0 6px rgba(74, 152, 80, 0.7);
}
.schedule-orb--stale {
background: #c07820;
box-shadow: 0 0 6px rgba(192, 120, 32, 0.7);
animation: orb-pulse 2s ease-in-out infinite;
}
.schedule-orb--manual {
background: #555555;
box-shadow: none;
}
.schedule-orb--paused {
background:
radial-gradient(
circle at 40% 35%,
#6048b8,
#2a1a5a 80%);
box-shadow: 0 0 6px rgba(100, 80, 190, 0.55);
animation: orb-stasis-breath 3.5s ease-in-out infinite;
}
@keyframes orb-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
@keyframes orb-stasis-breath {
0%, 100% {
box-shadow: 0 0 4px rgba(100, 80, 190, 0.4);
}
50% {
box-shadow: 0 0 10px rgba(140, 100, 220, 0.75);
}
}
.forge-orb-meta {
display: flex;
flex-direction: column;
gap: 1px;
}
.forge-orb-name {
font-family:
"Cinzel",
Georgia,
serif !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--forge-accent, #e8a840) !important;
}
.forge-orb-status,
.forge-orb-flow {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 8px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-faint, #5c5450);
display: block;
margin-top: 1px;
}
.upkeep-schedule-live .forge-orb-status {
color: #6ab870;
}
.upkeep-schedule-stale .forge-orb-status {
color: #c07820;
}
.upkeep-schedule-paused .forge-orb-status {
color: #8870d0;
}
.upkeep-schedule-paused .forge-orb-bezel {
border-color: #252042;
box-shadow:
inset 0 1px 1px rgba(100, 80, 200, 0.12),
inset 0 -1px 2px rgba(0, 0, 0, 0.8),
0 0 0 2px #100c08,
0 0 0 3px rgba(90, 70, 160, 0.28);
}
.seq-rail {
position: relative;
margin: 4px 16px 10px;
height: 14px;
pointer-events: none;
}
.seq-rail__channel {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
transform: translateY(-50%);
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.6) 0%,
rgba(80, 80, 80, 0.4) 45%,
rgba(120, 120, 120, 0.3) 50%,
rgba(80, 80, 80, 0.4) 55%,
rgba(0, 0, 0, 0.6) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 0 rgba(0, 0, 0, 0.4);
border-radius: 1px;
}
.seq-rail__node {
position: absolute;
top: 50%;
width: 11px;
height: 11px;
border-radius: 50%;
transform: translate(-50%, -50%);
background:
radial-gradient(
circle at 30% 25%,
#2a2a2a,
#101010);
border: 1px solid #3a3a3a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.seq-rail__node:nth-child(2) {
left: 12.5%;
}
.seq-rail__node:nth-child(3) {
left: 37.5%;
}
.seq-rail__node:nth-child(4) {
left: 62.5%;
}
.seq-rail__node:nth-child(5) {
left: 87.5%;
}
.seq-rail__node.is-filled {
background:
radial-gradient(
circle at 30% 25%,
#c09050,
#5a3810);
border-color: #9a6828;
box-shadow: inset 0 1px 0 rgba(255, 210, 140, 0.45), 0 0 5px rgba(184, 120, 56, 0.35);
}
.seq-rail__node.is-live {
background:
radial-gradient(
circle at 30% 25%,
#ffd080,
#e05a18);
border-color: #e8a020;
box-shadow:
inset 0 1px 0 rgba(255, 210, 140, 0.45),
0 0 9px rgba(232, 90, 26, 0.65),
0 0 18px rgba(232, 168, 64, 0.35);
animation: seq-node-pulse 2s ease-in-out infinite;
}
@keyframes seq-node-pulse {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.3);
}
}
.forge-bay__slots.turn-phase-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
justify-content: initial;
flex-wrap: initial;
align-items: initial;
}
.forge-bay__slots .turn-step::after {
display: none;
}
.phase-slot {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.phase-slot__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2px;
height: 14px;
}
.phase-slot__seq {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 7.5px;
letter-spacing: 0.2em;
color: var(--text-faint, #5c5450);
text-transform: uppercase;
}
.phase-slot__lever[data-forge]::before {
display: none;
}
.phase-slot__lever[data-forge]::after,
.forge-new-turn-btn[data-forge]::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(235, 95, 18, 0.92) 0%,
rgba(255, 140, 35, 0.82) 40%,
rgba(255, 165, 50, 0.60) 65%,
rgba(255, 185, 70, 0.28) 88%,
transparent 100%);
transform: scaleY(0);
transform-origin: bottom center;
pointer-events: none;
z-index: 0;
transition: none;
}
.phase-slot__lever[data-forge=charging]::after,
.forge-new-turn-btn[data-forge=charging]::after {
transform: scaleY(1);
transition: transform 360ms ease-out;
}
.phase-slot__lever[data-forge=lit]::after,
.forge-new-turn-btn[data-forge=lit]::after {
animation: forge-drain var(--forge-drain-ms, 10000ms) linear forwards;
}
.phase-slot__lever[data-forge=refill]::after,
.forge-new-turn-btn[data-forge=refill]::after {
transform: scaleY(1);
transition: none;
animation: none;
}
@keyframes forge-drain {
0% {
transform: scaleY(1);
}
85% {
transform: scaleY(0.12);
}
100% {
transform: scaleY(0);
}
}
.phase-slot--ready .phase-slot__lever[data-forge=charging] {
border-color: #e8a840;
box-shadow:
inset 0 1px 0 rgba(255, 210, 140, 0.28),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(200, 140, 40, 0.45),
0 0 32px rgba(200, 140, 40, 0.40);
animation: none;
}
.phase-slot--ready .phase-slot__lever[data-forge=lit],
.phase-slot--ready .phase-slot__lever[data-forge=refill] {
border-color: #f0c060;
box-shadow:
inset 0 1px 0 rgba(255, 220, 140, 0.35),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(200, 150, 40, 0.55),
0 0 42px rgba(200, 150, 40, 0.50);
animation: lever-breathe-lit 1.0s ease-in-out infinite;
}
@keyframes lever-breathe-lit {
0%, 100% {
box-shadow:
inset 0 1px 0 rgba(255, 210, 140, 0.28),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(200, 140, 40, 0.40),
0 0 28px rgba(200, 140, 40, 0.35);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.45),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(200, 150, 40, 0.70),
0 0 52px rgba(220, 160, 40, 0.60);
}
}
.phase-slot--ready .phase-slot__lever[data-forge=lit] .phase-slot__glyph,
.phase-slot--ready .phase-slot__lever[data-forge=refill] .phase-slot__glyph {
filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.9)) drop-shadow(0 0 4px rgba(220, 150, 40, 0.8));
color: #ffe090;
}
.phase-slot__lever > *,
.forge-new-turn-btn > * {
position: relative;
z-index: 1;
}
.forge-new-turn-btn[data-forge]::before {
display: none;
}
.forge-new-turn-btn[data-forge=charging] {
border-color: #e8a840;
box-shadow:
inset 0 1px 0 rgba(255, 210, 140, 0.28),
0 0 0 1px rgba(200, 140, 40, 0.45),
0 0 32px rgba(200, 140, 40, 0.40);
animation: none;
}
.forge-new-turn-btn[data-forge=lit],
.forge-new-turn-btn[data-forge=refill] {
border-color: #f0c060;
color: #ffe090;
background:
radial-gradient(
ellipse at 50% 0%,
rgba(255, 160, 40, 0.42),
transparent 65%),
linear-gradient(
180deg,
#3a2010,
#1c1008);
box-shadow:
inset 0 1px 0 rgba(255, 210, 140, 0.35),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(200, 150, 40, 0.55),
0 0 42px rgba(200, 150, 40, 0.50);
animation: lever-breathe-lit 1.0s ease-in-out infinite;
}
.forge-new-turn-btn[data-forge=charging] .forge-new-turn-glyph,
.forge-new-turn-btn[data-forge=lit] .forge-new-turn-glyph,
.forge-new-turn-btn[data-forge=refill] .forge-new-turn-glyph {
filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.9)) drop-shadow(0 0 4px rgba(220, 150, 40, 0.8));
color: #ffe090;
}
.seq-rail__node.is-live {
background:
radial-gradient(
circle at 30% 25%,
#c0c0c0,
#505050);
border-color: #888888;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 6px rgba(180, 180, 180, 0.35);
animation: seq-node-pulse 3.0s ease-in-out infinite;
}
.seq-rail__node.is-current {
background:
radial-gradient(
circle at 30% 25%,
#e8b840,
#7a4808);
border-color: #c89040;
box-shadow: inset 0 1px 0 rgba(255, 210, 140, 0.45), 0 0 7px rgba(184, 120, 56, 0.50);
}
.phase-slot__lever {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 8px 12px;
border-radius: 4px;
background:
linear-gradient(
180deg,
#202020 0%,
#161616 100%);
border: 1px solid #303030;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -2px 4px rgba(0, 0, 0, 0.5);
font-family: inherit;
text-align: center;
cursor: pointer;
transition: filter 130ms ease, transform 100ms ease;
min-height: 82px;
overflow: hidden;
color: var(--text-muted);
width: 100%;
box-sizing: border-box;
}
.phase-slot__lever:disabled {
cursor: default;
}
.phase-slot__lever:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.phase-slot__glyph {
font-size: 18px;
line-height: 1;
opacity: 0.65;
margin-bottom: 1px;
}
.phase-slot__label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: var(--fw-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.phase-slot__sublabel {
font-family: var(--font-sans);
font-size: 10px;
font-weight: var(--fw-regular);
letter-spacing: 0;
text-transform: none;
color: var(--text-faint, #5c5450);
}
.phase-slot--locked .phase-slot__lever {
background:
linear-gradient(
180deg,
#181818 0%,
#101010 100%);
border-color: #252525;
opacity: 0.55;
cursor: not-allowed;
}
.phase-slot--locked .phase-slot__glyph {
opacity: 0.3;
}
.phase-slot--locked .phase-slot__label {
color: var(--text-faint, #5c5450);
}
.phase-slot--current.phase-slot--done .phase-slot__lever {
background:
linear-gradient(
180deg,
#2e1c08 0%,
#1e1006 100%);
border-color: #c07830;
box-shadow:
inset 0 1px 0 rgba(232, 168, 64, 0.32),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(184, 120, 56, 0.50),
0 0 24px rgba(184, 120, 56, 0.38);
}
.phase-slot--current .phase-slot__glyph {
opacity: 1;
color: #e8a840;
}
.phase-slot--current .phase-slot__label {
color: #e8a840;
}
.phase-slot--current .phase-slot__sublabel {
color: #a06820;
}
.phase-slot--current .phase-slot__seq {
color: #d09030;
}
.phase-slot--ready .phase-slot__lever {
background:
linear-gradient(
180deg,
#272727 0%,
#1b1b1b 100%);
border-color: #464646;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.06),
0 0 10px rgba(255, 255, 255, 0.04);
animation: lever-breathe 5.0s ease-in-out infinite;
color: var(--text);
}
@keyframes lever-breathe {
0%, 100% {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.05),
0 0 6px rgba(255, 255, 255, 0.03);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -2px 4px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.12),
0 0 14px rgba(255, 255, 255, 0.07);
}
}
.phase-slot--ready .phase-slot__glyph {
opacity: 0.9;
filter: none;
color: var(--text-muted);
}
.phase-slot--ready .phase-slot__label {
color: var(--text);
text-shadow: none;
}
.phase-slot--ready .phase-slot__sublabel {
color: var(--text-muted);
}
.phase-slot--ready .phase-slot__seq {
color: var(--text-faint);
}
@media (hover: hover) {
.phase-slot--ready .phase-slot__lever:not([disabled]):hover {
background:
linear-gradient(
180deg,
#303030 0%,
#222222 100%);
filter: none;
}
}
.phase-slot--ready .phase-slot__lever:active {
transform: translateY(1px);
}
.phase-slot__heat {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: rgba(255, 255, 255, 0.04);
overflow: hidden;
}
.phase-slot__heat-bar {
position: absolute;
inset: 0;
width: 50%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.35),
rgba(255, 255, 255, 0.55),
rgba(255, 255, 255, 0.35),
transparent);
animation: heat-sweep 3.2s linear infinite;
}
@keyframes heat-sweep {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(300%);
}
}
.phase-slot--done .phase-slot__lever {
cursor: default;
background:
linear-gradient(
180deg,
#1a1a1a 0%,
#111111 100%);
border-color: #2e2e2e;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.phase-slot--done .phase-slot__glyph {
opacity: 0.5;
color: var(--text-muted);
}
.phase-slot--done .phase-slot__label {
color: var(--text-faint);
}
.phase-slot--done .phase-slot__sublabel {
color: var(--text-faint);
opacity: 0.7;
}
.phase-slot__plate {
display: flex;
gap: 3px;
padding: 0 2px;
pointer-events: none;
position: absolute;
left: 8px;
right: 8px;
bottom: 4px;
}
.phase-slot__plate-line {
height: 1px;
flex: 1;
background: rgba(184, 120, 56, 0.1);
}
.phase-slot--locked .phase-slot__plate-line {
background: rgba(100, 80, 50, 0.06);
}
.phase-slot--ready .phase-slot__plate-line {
background: rgba(232, 168, 64, 0.2);
}
.forge-bay {
position: relative;
padding: 10px 2px 6px;
}
.forge-new-turn-cta {
margin-bottom: 12px;
display: flex;
justify-content: center;
}
.forge-new-turn-btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 24px;
background:
radial-gradient(
ellipse at 50% 0%,
rgba(232, 90, 26, 0.22),
transparent 65%),
linear-gradient(
180deg,
#321e0e,
#1c1008);
border: 1px solid #9a6828;
border-radius: 4px;
color: #ffd070;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: filter 130ms ease;
box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.18), 0 0 18px rgba(232, 90, 26, 0.18);
animation: lever-breathe 3.8s ease-in-out infinite;
}
.forge-new-turn-btn:hover {
filter: brightness(1.1);
}
.forge-new-turn-btn:active {
transform: translateY(1px);
}
.forge-new-turn-glyph {
font-size: 16px;
filter: drop-shadow(0 0 5px rgba(232, 168, 64, 0.5));
}
.forge-replay-row {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
padding: 4px 6px 6px;
}
.forge-replay-btn {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 3px;
padding: 4px 10px;
font-size: 11px;
font-family: inherit;
letter-spacing: 0.08em;
color: var(--text-muted);
cursor: pointer;
transition:
background 120ms ease,
border-color 120ms ease,
color 120ms ease;
}
.forge-replay-btn:hover {
background: rgba(77, 232, 194, 0.08);
border-color: rgba(77, 232, 194, 0.5);
color: var(--accent);
}
.forge-replay-btn:disabled {
opacity: 0.35;
cursor: default;
}
.forge-replay-phase-btn {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 3px;
padding: 3px 8px;
font-size: 10px;
font-family: inherit;
letter-spacing: 0.07em;
color: var(--text-muted);
cursor: pointer;
transition:
background 120ms ease,
border-color 120ms ease,
color 120ms ease;
}
.forge-replay-phase-btn:hover {
background: rgba(77, 232, 194, 0.08);
border-color: rgba(77, 232, 194, 0.5);
color: var(--accent);
}
.forge-replay-phase-btn:disabled {
opacity: 0.35;
cursor: default;
}
.phase-slot--replaying .phase-slot__lever {
animation: phase-slot-replay-pulse 1.1s ease-in-out infinite;
}
@keyframes phase-slot-replay-pulse {
0%, 100% {
filter: brightness(1);
box-shadow:
inset 0 1px 0 rgba(77, 232, 194, 0.08),
0 0 0 1px rgba(77, 232, 194, 0.22),
0 0 12px rgba(77, 232, 194, 0.12);
}
50% {
filter: brightness(1.35);
box-shadow:
inset 0 1px 0 rgba(77, 232, 194, 0.28),
0 0 0 1px rgba(77, 232, 194, 0.65),
0 0 22px rgba(77, 232, 194, 0.35);
}
}
.phase-slot--replaying .phase-slot__glyph {
color: var(--accent);
opacity: 1;
}
.phase-slot--replaying .phase-slot__label {
color: var(--accent);
}
.forge-chassis.turn-panel--closed .forge-bay {
filter: saturate(0.6) brightness(0.9);
}
@media (prefers-reduced-motion: reduce) {
.seq-node-pulse,
.seq-rail__node.is-live,
.phase-slot--ready .phase-slot__lever,
.phase-slot--ready .phase-slot__lever[data-forge=lit],
.forge-new-turn-btn {
animation: none;
}
.phase-slot__heat,
.phase-slot__lever[data-forge]::after {
display: none;
}
}
.stack-edit-only {
display: none;
}
#gameboard[data-board-edit-mode=true] .stack-edit-only {
display: flex;
}
#gameboard[data-board-edit-mode=true] .stack-display-only {
display: none;
}
.stack-header-edit {
flex: 1;
min-width: 0;
align-items: center;
gap: 0.2rem;
}
.stack-arrow-spacer {
width: 1.6rem;
flex-shrink: 0;
}
.stack-inline-rename {
flex: 1;
min-width: 0;
display: flex;
}
.stack-name-input-inline {
flex: 1;
min-width: 0;
padding: 0.15rem 0.35rem;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 3px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: inherit;
}
.stack-name-input-inline:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.stack-add-area {
align-items: center;
margin-left: 0.5rem;
padding: 0;
border: none;
}
.stack-add-form {
display: flex;
gap: 0.4rem;
align-items: center;
}
.stack-name-input {
width: 160px;
padding: 0.2rem 0.5rem;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.8rem;
font-family:
system-ui,
-apple-system,
sans-serif;
}
.stack-name-input:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.zone-section {
margin-bottom: 2rem;
}
.zone-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.zone-title-group {
display: flex;
align-items: center;
gap: 0.4rem;
}
.zone-title {
margin: 0;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.hand-details {
width: 100%;
}
.hand-details > summary {
list-style: none;
cursor: pointer;
user-select: none;
}
.hand-details > summary::-webkit-details-marker {
display: none;
}
.hand-summary {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.75rem;
cursor: pointer;
}
.hand-toggle-hint {
font-size: 0.8rem;
color: var(--text-muted);
}
.hand-empty {
color: var(--text-muted);
font-style: italic;
font-size: 0.9rem;
padding: 0.75rem 0;
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
perspective: 800px;
}
@media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.5rem;
}
}
.gameboard-empty {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 2rem;
}
.gameboard-empty p {
color: var(--text-muted);
margin: 0 0 0.75rem;
}
.gameboard-empty p:first-child {
color: var(--text);
font-weight: 500;
}
.orphan-cards__note {
color: var(--text-muted);
font-style: italic;
margin: 0 0 1rem;
}
/* app/javascript/stylesheets/_stacks.css */
.stack-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 0.875rem;
align-items: start;
justify-content: center;
}
@media (min-width: 900px) {
.stack-columns {
grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
}
}
.stack-column {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
min-height: 200px;
}
.stack-header {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 -2px 0.875rem;
padding: 0.5rem 0.95rem 0.5rem 1rem;
background:
linear-gradient(
180deg,
var(--brass-hi) 0%,
var(--brass-lo) 100%);
border: 1px solid var(--brass-edge);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.28),
inset 0 -1px 0 rgba(0, 0, 0, 0.55),
0 2px 4px rgba(0, 0, 0, 0.6);
gap: 0.4rem;
}
.stack-header::before,
.stack-header::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background:
radial-gradient(
circle at 30% 30%,
var(--brass-rivet) 0%,
#3a2810 60%,
#15100a 100%);
box-shadow: 0 1px 0 rgba(255, 220, 160, 0.25), inset 0 0 0 0.5px rgba(0, 0, 0, 0.4);
}
.stack-header::before {
left: 5px;
}
.stack-header::after {
right: 5px;
}
.stack-name {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--brass-text);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65), 0 0 3px rgba(255, 200, 100, 0.22);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.stack-header-controls {
display: flex;
align-items: center;
gap: 0.2rem;
flex-shrink: 0;
}
.stack-card-count {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.7rem;
color: rgba(180, 150, 100, 0.75);
font-variant-numeric: tabular-nums;
min-width: 1.2rem;
text-align: center;
}
.stack-card-count__active {
color: var(--brass-text);
}
.stack-card-count__sep {
color: rgba(180, 150, 100, 0.45);
}
.stack-card-count__total {
color: rgba(180, 150, 100, 0.7);
}
.btn-icon {
padding: 0.15rem 0.35rem;
font-size: 0.75rem;
line-height: 1;
min-width: auto;
}
.btn-stack-arrow {
background: none;
border: none;
padding: 0.1rem 0.25rem;
font-size: 1rem;
line-height: 1;
color: var(--text-faint);
cursor: pointer;
border-radius: 3px;
transition: color 0.15s;
}
.btn-stack-arrow:hover {
color: var(--forge-accent-dim);
}
.stack-delete-btn {
background: none;
border: none;
padding: 0.1rem 0.3rem;
font-size: 0.75rem;
line-height: 1;
color: var(--text-faint);
cursor: pointer;
border-radius: 3px;
transition: color 0.15s;
opacity: 0.5;
}
.stack-delete-btn:hover {
color: var(--oxblood-hi, #b55454);
opacity: 1;
}
.stack-phase {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.875rem;
padding: 0 0.2rem 0.5rem;
flex: 1;
min-height: 3rem;
}
.stack-card-wrapper {
display: contents;
}
[data-board-edit-mode=true] .stack-card-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
#stack-columns[data-filter=unfinished] .stack-card-wrapper:has(.state-charred),
#stack-columns[data-filter=unfinished] .stack-card-wrapper:has(.state-untapped),
#stack-columns[data-filter=unfinished] .stack-card-wrapper:has(.state-suppressed),
#stack-columns[data-filter=unfinished] .stack-card-wrapper:has(.state-day-ineligible) {
display: none;
}
.board-filter-tabs {
display: flex;
align-items: stretch;
gap: 0;
}
.board-filter-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: 0 0.5rem 0.1rem;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
line-height: 1.4;
}
.board-filter-tab:hover {
color: var(--text-muted);
}
.board-filter-tab.active {
color: var(--forge-accent);
border-bottom-color: var(--forge-accent);
}
.stack-empty-placeholder {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
color: var(--text-muted);
font-size: 0.8rem;
font-style: italic;
border: 1px dashed var(--border);
border-radius: 6px;
margin: 0.5rem;
}
.stack-phase-divider {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.25rem 0;
color: var(--text-muted);
font-size: 0.7rem;
letter-spacing: 0.05em;
text-transform: uppercase;
&::before,
&::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
}
.card-stack-controls {
display: none;
gap: 0.25rem;
align-items: center;
padding: 0 0.25rem 0.25rem;
flex-wrap: wrap;
}
.stack-pos-btn {
padding: 0.15rem 0.4rem;
min-width: 1.8rem;
}
.card-stack-move-form {
display: flex;
gap: 0.25rem;
align-items: center;
}
.stack-select {
flex: 1;
font-size: 0.75rem;
padding: 0.2rem 0.4rem;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
min-width: 0;
}
.hand-cards {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
padding-top: 0.5rem;
}
@media (min-width: 600px) {
.hand-cards {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
}
.card-counter-meta {
position: absolute;
top: 46px;
left: 10px;
right: 10px;
padding: 7px 10px;
background: rgba(10, 8, 6, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(180, 120, 40, 0.6);
border-left: 2px solid rgba(180, 120, 40, 0.9);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 0 rgba(0, 0, 0, 0.4),
0 0 8px rgba(180, 120, 40, 0.15);
font-family:
"JetBrains Mono",
ui-monospace,
Menlo,
monospace;
font-size: 10px;
letter-spacing: 0.3px;
color: rgba(255, 255, 255, 0.70);
line-height: 1.65;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 200;
display: flex;
flex-direction: column;
}
.card-tile:hover .card-counter-meta {
opacity: 1;
}
.card-counter-meta__row {
display: block;
}
.card-tile {
background: none;
border: none;
box-shadow: none;
border-radius: 0;
width: fit-content;
display: flex;
flex-direction: column;
overflow: visible;
position: relative;
transition: opacity 0.2s ease, filter 0.2s ease;
transform-origin: 50% 100%;
}
.card-tile.state-untapped {
z-index: 1;
}
.card-tile.state-tapped {
z-index: 5;
}
.card-tile.state-animating {
z-index: 10;
}
@media (prefers-reduced-motion: reduce) {
.card-tile,
.library-card {
transition: none;
}
.card-tile.state-untapped:hover,
.library-card:hover {
transform: none;
}
}
@media (hover: none) {
.card-tile.state-untapped:hover,
.library-card:hover {
transform: none;
}
}
.card-tile.state-untapped {
filter: none;
border-color: var(--border);
}
.card-tile.state-untapped:hover {
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.6),
0 0 22px rgba(180, 120, 40, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -2px 6px rgba(0, 0, 0, 0.3);
border-color: rgba(180, 120, 40, 0.3);
transform: translateY(-2px);
}
.card-tile.state-tapped {
filter: saturate(0.7);
}
.card-tile.state-tapped:hover {
filter: none;
}
.card-tile.state-charred {
filter: saturate(0.3) brightness(0.7);
}
.card-tile.state-charred:hover {
filter: none;
}
.card-tile.state-suppressed {
filter: grayscale(60%) brightness(0.85);
}
.card-tile.state-suppressed:hover {
filter: none;
}
.card-tile.state-day-ineligible {
filter: grayscale(40%) brightness(0.8);
}
.card-tile.state-day-ineligible:hover {
filter: none;
}
.card-tile .card-header {
padding: 0.75rem 0.75rem 0.35rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.card-tile .card-name {
font-weight: 600;
font-size: 1.15rem;
color: var(--text);
text-decoration: none;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
.card-header-edit {
color: var(--text-muted);
font-size: 0.8rem;
padding: 0 0.3rem;
background: none;
border: none;
cursor: pointer;
flex-shrink: 0;
line-height: 1.3;
opacity: 0;
transition: opacity 0.15s;
}
.card-tile:hover .card-header-edit {
opacity: 1;
}
.card-header-edit:hover {
color: var(--accent);
}
.card-header-edit--disabled {
opacity: 0;
cursor: not-allowed;
}
.card-tile:hover .card-header-edit--disabled {
opacity: 0.3;
}
.card-header-bounce {
font-size: 0.9rem;
}
.card-header-bounce:hover {
color: var(--warning);
}
.energy-badge {
font-size: 0.875rem;
font-weight: 800;
min-width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
ellipse at 35% 30%,
#8b6934 0%,
#6b4f28 40%,
#4a3518 80%,
#3a2810 100%);
color: #d4b068;
flex-shrink: 0;
border: 1.5px solid rgba(180, 140, 70, 0.5);
box-shadow:
inset 0 1px 2px rgba(255, 220, 150, 0.2),
inset 0 -1px 3px rgba(0, 0, 0, 0.5),
0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.card-type-line {
padding: 0 0.75rem;
position: relative;
margin-bottom: 0.35rem;
}
.card-type-line hr {
border: none;
height: 1px;
margin: 0;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(60, 52, 42, 0.6) 15%,
rgba(80, 70, 55, 0.8) 50%,
rgba(60, 52, 42, 0.6) 85%,
transparent 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}
.card-type-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -0.5em;
background: inherit;
padding: 0 0.5rem;
}
.card-type-label:empty {
display: none;
}
.card-tile .card-body {
padding: 0 0.75rem 0.5rem;
flex: 1;
}
.card-tile .card-body p {
font-size: 0.95rem;
color: var(--text-muted);
margin: 0;
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.card-tile .card-body ul.card-body-list {
font-size: 0.95rem;
color: var(--text-muted);
margin: 0;
padding-left: 1.2rem;
line-height: 1.4;
overflow: hidden;
max-height: 5.6em;
}
.card-tile .card-body ul.card-body-list li {
margin: 0;
}
.card-state-footer {
border-top: 1px solid var(--border);
padding: 0.5rem 0.75rem 0.625rem;
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
align-items: center;
}
.compass-trigger {
position: absolute;
bottom: 6px;
right: 7px;
width: 38px;
height: 38px;
padding: 0;
border: none;
background: transparent;
color: oklch(0.55 0.04 60);
font-size: 26px;
line-height: 38px;
text-align: center;
cursor: pointer;
border-radius: 50%;
transition: color 160ms, background 160ms;
z-index: 6;
touch-action: auto;
pointer-events: auto;
}
.compass-trigger:hover {
color: oklch(0.82 0.08 60);
background: rgba(255, 255, 255, 0.07);
}
.vein-card-dim {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 5;
pointer-events: none;
}
.runic-backdrop {
position: fixed;
inset: 0;
z-index: 9000;
}
.runic-rose {
position: fixed;
width: 0;
height: 0;
z-index: 9001;
pointer-events: none;
}
.runic-center {
position: absolute;
left: -14px;
top: -14px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 700;
font-size: 13px;
color: oklch(0.13 0.03 40);
pointer-events: none;
}
@keyframes spoke-in {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.4);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.runic-spoke {
position: absolute;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid;
background:
radial-gradient(
circle,
oklch(0.2 0.01 60),
oklch(0.1 0.008 60));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
cursor: pointer;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
transition:
transform 160ms cubic-bezier(.2, .8, .2, 1),
background 160ms,
box-shadow 160ms,
color 160ms;
animation: spoke-in 240ms cubic-bezier(.2, .8, .2, 1) both;
animation-delay: var(--spoke-delay, 0ms);
}
.runic-spoke__glyph {
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-size: 18px;
line-height: 1;
}
.runic-spoke__name {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 7px;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0.8;
}
.runic-ribbon {
position: absolute;
left: 0;
transform: translateX(-50%);
font-family:
"Cinzel",
Georgia,
serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.78);
padding: 4px 10px;
border: 1px solid;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 120ms;
}
.runic-ribbon--visible {
opacity: 1;
}
.card-tile__footer-actions {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
align-items: center;
padding: 0.35rem 0.5rem 0.5rem;
}
.library-card--vein {
background: none;
border: none;
box-shadow: none;
border-radius: 0;
width: fit-content;
align-self: flex-start;
overflow: visible;
transition: filter 0.2s ease;
}
.library-card--vein:hover {
box-shadow: none;
border-color: transparent;
transform: none;
}
.counter-badge {
font-size: 0.85rem;
padding: 0.2rem 0.5rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text-muted);
font-weight: 600;
}
@keyframes counter-zero-vibrate {
0%, 100% {
transform: translate(0, 0);
}
10% {
transform: translate(-1px, 0.5px);
}
20% {
transform: translate(1px, -0.5px);
}
30% {
transform: translate(-0.5px, -1px);
}
40% {
transform: translate(1px, 0.5px);
}
50% {
transform: translate(-1px, -0.5px);
}
60% {
transform: translate(0.5px, 1px);
}
70% {
transform: translate(-1px, 0px);
}
80% {
transform: translate(0.5px, -0.5px);
}
90% {
transform: translate(-0.5px, 0.5px);
}
}
@keyframes counter-zero-glow {
0%, 100% {
filter: drop-shadow(0 0 5px rgba(230, 160, 50, 0.6)) drop-shadow(0 0 14px rgba(230, 160, 50, 0.35));
}
50% {
filter: drop-shadow(0 0 9px rgba(230, 160, 50, 0.85)) drop-shadow(0 0 24px rgba(230, 160, 50, 0.55));
}
}
.card-tile.counter-zero {
box-shadow:
inset 0 0 12px 2px rgba(230, 160, 50, 0.18),
0 0 16px 3px rgba(230, 160, 50, 0.5),
0 0 38px 5px rgba(230, 160, 50, 0.22);
animation: counter-zero-vibrate 4s linear infinite, counter-zero-glow 2.5s ease-in-out infinite;
}
.card-tile.counter-zero [data-counter-badge] {
color: #e6a032;
border-color: rgba(230, 160, 50, 0.5);
background: rgba(230, 160, 50, 0.15);
}
@media (prefers-reduced-motion: reduce) {
.card-tile.counter-zero {
animation: none;
filter: drop-shadow(0 0 7px rgba(230, 160, 50, 0.65)) drop-shadow(0 0 18px rgba(230, 160, 50, 0.4));
}
}
.spellbook-indicator {
font-size: 0.8rem;
opacity: 0.7;
}
.btn-tap-now {
background: #c47a20;
color: #fff;
border-color: #d48a2a;
}
.btn-tap-now:hover {
background: #d48a2a;
}
.btn-tap-now-inline {
padding: 0.15rem 0.5rem;
font-size: 0.75rem;
line-height: 1.2;
border: none;
border-radius: 2px;
cursor: pointer;
touch-action: auto !important;
pointer-events: auto !important;
}
.footer-actions {
margin-left: auto;
display: flex;
gap: 0.3rem;
align-items: center;
touch-action: auto !important;
pointer-events: auto !important;
}
.btn-footer {
padding: 0.15rem 0.5rem;
font-size: 0.65rem;
line-height: 1.2;
border: none;
border-radius: 2px;
cursor: pointer;
color: #fff;
touch-action: auto !important;
pointer-events: auto !important;
}
.btn-to-hand {
background: #2a6a9a;
}
.btn-to-hand:hover {
background: #3580b8;
}
.btn-edit {
background: #6a4a8a;
}
.btn-edit:hover {
background: #7d5ea0;
}
.btn-delete {
background: #8a4a1a;
}
.btn-delete:hover {
background: #a05a22;
}
.footer-action-form {
display: contents;
}
.card-chrome {
display: none;
gap: 0.4rem;
padding: 0.5rem 0.75rem;
border-top: 1px solid var(--border);
background: rgba(0, 0, 0, 0.1);
align-items: center;
flex-wrap: wrap;
}
.card-chrome,
.card-chrome select,
.card-chrome button,
.card-chrome input {
touch-action: auto !important;
pointer-events: auto !important;
}
.card-chrome form {
display: flex;
}
.card-chrome .btn {
flex: none;
}
.edit-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 5vh;
overflow-y: auto;
}
.edit-modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
width: 90%;
max-width: 700px;
padding: 1.5rem;
position: relative;
margin-bottom: 2rem;
transition: border-color 0.4s ease, background 0.4s ease;
}
.edit-modal[data-color=red] {
border-color: var(--color-red);
background: color-mix(in srgb, var(--color-red) 8%, var(--surface));
}
.edit-modal[data-color=green] {
border-color: var(--color-green);
background: color-mix(in srgb, var(--color-green) 8%, var(--surface));
}
.edit-modal[data-color=blue] {
border-color: var(--color-blue);
background: color-mix(in srgb, var(--color-blue) 8%, var(--surface));
}
.edit-modal[data-color=white] {
border-color: var(--color-white);
background: color-mix(in srgb, var(--color-white) 5%, var(--surface));
}
.edit-modal[data-color=black] {
border-color: var(--color-black);
background: color-mix(in srgb, var(--color-black) 8%, var(--surface));
}
.edit-modal-close {
position: absolute;
top: 0.5rem;
right: 0.75rem;
background: none;
border: none;
color: var(--text-muted);
font-size: 1.5rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
line-height: 1;
}
.edit-modal-close:hover {
color: var(--text, #eee);
}
.edit-modal-loading {
text-align: center;
color: var(--text-muted);
padding: 2rem;
}
.confirm-modal {
max-width: 380px;
padding: 1.75rem 1.5rem 1.25rem;
}
.confirm-modal-title {
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 0.5rem;
padding-right: 2rem;
}
.confirm-modal-message {
color: var(--text-muted);
font-size: 0.9rem;
margin: 0 0 1.25rem;
line-height: 1.5;
}
.confirm-modal-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
.cast-form {
display: flex;
gap: 0.35rem;
align-items: center;
flex: 1;
min-width: 0;
}
.cast-select {
flex: 1;
font-size: 0.8rem;
padding: 0.3rem 0.4rem;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
min-width: 4rem;
overflow: hidden;
text-overflow: ellipsis;
}
.cast-form .btn {
padding: 0.3rem 0.5rem;
font-size: 0.75rem;
min-height: 0;
white-space: nowrap;
width: auto;
flex: none;
}
/* app/javascript/stylesheets/_worker.css */
.worker-gameboard-container {
padding: 1rem 0.75rem 2rem;
}
.worker-gameboard-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding: 0 0.25rem;
}
.worker-gameboard-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
margin: 0;
}
.worker-gameboard-back {
font-size: 0.8rem;
color: var(--text-muted);
text-decoration: none;
}
.worker-gameboard-back:hover {
color: var(--text);
}
.worker-empty-state {
text-align: center;
padding: 2rem 1rem;
color: var(--text-muted);
}
.worker-empty-link {
display: inline-block;
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--accent);
text-decoration: none;
}
.worker-stack-columns {
display: flex;
flex-direction: row;
gap: 0.75rem;
overflow-x: auto;
padding-bottom: 1rem;
align-items: start;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 600px) {
.worker-stack-columns {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
overflow-x: visible;
}
}
.worker-stack-column {
flex: 0 0 150px;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
min-height: 200px;
}
@media (min-width: 600px) {
.worker-stack-column {
flex: unset;
}
}
.worker-stack-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.6rem;
border-bottom: 1px solid var(--border);
background: rgba(0, 0, 0, 0.15);
border-radius: 8px 8px 0 0;
gap: 0.3rem;
}
.worker-stack-name {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.worker-stack-count {
font-size: 0.7rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.worker-stack-cards {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.4rem 0.4rem;
flex: 1;
}
.worker-stack-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem 0.5rem;
color: var(--text-muted);
font-size: 0.75rem;
font-style: italic;
border: 1px dashed var(--border);
border-radius: 6px;
margin: 0.4rem;
}
.worker-card-wrapper {
display: flex;
justify-content: center;
opacity: 0.65;
}
.worker-card-wrapper--top {
opacity: 1;
}
.worker-card-wrapper--top .card--vein {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
.worker-gameboard-container .compass-trigger {
display: none;
}
.worker-gameboard-header-right {
display: flex;
align-items: center;
gap: 1rem;
}
#worker-stack-columns[data-filter=unfinished] .worker-card-wrapper:not([data-state=tapped]) {
display: none;
}
/* app/javascript/stylesheets/_overture.css */
.overture-welcome-strip {
position: relative;
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0.9rem 2.4rem 0.9rem 1.1rem;
margin: 0 0 1rem;
background: var(--surface, rgba(255,255,255,0.02));
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
}
.overture-welcome-strip__body {
flex: 1;
min-width: 0;
}
.overture-welcome-strip__line {
margin: 0 0 0.45rem;
font-size: 0.92rem;
line-height: 1.55;
}
.overture-welcome-strip__line:first-child {
font-weight: 500;
}
.overture-welcome-strip__sub {
margin: 0;
font-size: 0.78rem;
color: var(--text-muted);
letter-spacing: 0.01em;
}
.overture-welcome-strip__close {
position: absolute;
top: 0.45rem;
right: 0.55rem;
background: transparent;
border: 0;
color: var(--text-muted);
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
padding: 0.15rem 0.45rem;
border-radius: 4px;
}
.overture-welcome-strip__close:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.05);
}
.overture-cast-line {
margin: 0.5rem 0 0;
font-size: 0.85rem;
color: var(--text-muted);
text-align: center;
letter-spacing: 0.01em;
pointer-events: none;
}
/* app/javascript/stylesheets/_components.css */
.ref-chip--alarm {
color: var(--ref-alarm) !important;
border-color: rgba(248, 113, 113, 0.45) !important;
}
.ref-hint {
display: inline;
font-size: 0.82em;
font-style: italic;
color: var(--warning-text);
margin-left: 0.25em;
}
.test-bench {
margin-top: 2rem;
padding: 1.25rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
}
.test-bench__heading {
font-size: 1rem;
font-weight: 600;
margin: 0 0 1rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.test-bench__controls {
display: flex;
align-items: flex-end;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.test-bench__energy {
width: 5rem;
}
.test-bench__buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.test-bench__results {
margin-top: 0.75rem;
font-family: monospace;
font-size: 0.875rem;
}
.test-bench-row {
padding: 0.4rem 0.6rem;
border-radius: 4px;
margin-bottom: 0.25rem;
background: var(--surface-2);
border-left: 3px solid var(--border);
}
.test-bench-row--ok {
border-left-color: #4caf50;
}
.test-bench-row--fallback {
border-left-color: var(--warning);
}
.test-bench-row--invalid {
border-left-color: var(--danger);
}
.test-bench-row--unavailable {
border-left-color: var(--text-muted);
}
.test-bench-summary {
margin-top: 0.75rem;
padding: 0.75rem;
background: var(--surface-2);
border-radius: 4px;
font-size: 0.875rem;
line-height: 1.6;
}
#toast-container {
position: fixed;
bottom: 72px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 200;
pointer-events: none;
}
.toast {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.6rem 1rem;
color: var(--text);
font-size: 0.9rem;
white-space: nowrap;
animation: toast-dismiss 150ms ease-out 2.5s forwards;
}
.toast.error {
border-color: var(--badge-urgent);
color: var(--badge-text);
}
@keyframes toast-dismiss {
to {
opacity: 0;
pointer-events: none;
}
}
@media (min-width: 768px) {
#toast-container {
bottom: 1.5rem;
right: 1.5rem;
left: auto;
transform: none;
}
}
.confirm-inline {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bg-secondary);
padding: 0.5rem;
border-radius: 0.375rem;
}
.confirm-label {
font-size: 0.9rem;
color: var(--text-muted);
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.resolving--completed {
transform: translateY(-100%);
opacity: 0;
border-color: rgba(140, 60, 180, 0.5) !important;
transition:
transform 250ms ease-out,
opacity 250ms ease-out,
border-color 30ms ease-in;
overflow: hidden;
}
.ale-fill {
position: absolute;
bottom: 0;
left: -4px;
right: -4px;
height: 0;
background:
linear-gradient(
0deg,
var(--ale-deep) 0%,
var(--ale-mid) 40%,
var(--ale-light) 75%,
var(--ale-top) 100%);
border-radius: inherit;
z-index: 1;
pointer-events: none;
filter: url(#ale-turbulence);
animation: ale-rise 0.6s ease-out forwards;
}
.ale-fill::after {
content: "";
position: absolute;
top: -6px;
left: 0;
right: 0;
height: 12px;
background:
linear-gradient(
0deg,
transparent 0%,
var(--ale-foam, rgba(220, 190, 240, 0.3)) 40%,
var(--ale-foam-top, rgba(240, 220, 255, 0.15)) 100%);
filter: url(#ale-turbulence) blur(1px);
border-radius: 50%;
}
@keyframes ale-rise {
0% {
height: 0;
}
100% {
height: 100%;
}
}
.ale-bubble {
position: absolute;
bottom: 0;
border-radius: 50%;
background: rgba(220, 190, 255, 0.35);
border: 1px solid rgba(240, 220, 255, 0.2);
z-index: 2;
pointer-events: none;
animation: bubble-rise 0.7s ease-out forwards;
}
@keyframes bubble-rise {
0% {
transform: translateY(0) scale(0.6);
opacity: 0.6;
}
50% {
opacity: 0.8;
}
100% {
transform: translateY(-80px) scale(0.3);
opacity: 0;
}
}
.resolving--defer {
transform: translateX(100%);
opacity: 0;
transition: transform 150ms ease-out, opacity 150ms ease-out;
overflow: hidden;
}
.resolving--failed {
animation: panel-burn 2s ease-out forwards;
overflow: visible;
}
@keyframes panel-burn {
0% {
background-color: var(--surface);
border-color: var(--border);
filter: brightness(1) saturate(1);
opacity: 1;
}
12% {
background-color: #3a1800;
border-color: rgba(230, 126, 34, 0.6);
filter: brightness(1.3) saturate(0.8);
opacity: 1;
}
30% {
background-color: #2a1000;
border-color: rgba(200, 100, 20, 0.5);
filter: brightness(1.0) saturate(0.5);
opacity: 1;
}
55% {
background-color: #1a0a00;
border-color: rgba(120, 60, 10, 0.4);
filter: brightness(0.6) saturate(0.3);
opacity: 0.85;
}
80% {
background-color: #0e0804;
border-color: rgba(60, 40, 20, 0.3);
filter: brightness(0.3) saturate(0.1);
opacity: 0.5;
}
100% {
background-color: #080404;
border-color: rgba(40, 30, 20, 0.2);
filter: brightness(0.15) saturate(0);
opacity: 0;
}
}
.decline-flash {
position: fixed;
transform: translate(-50%, -50%);
max-width: 280px;
padding: 0.5rem 1rem;
font-size: 0.8rem;
font-style: italic;
color: #ffe0b0;
background: rgba(30, 15, 5, 0.9);
border: 1px solid rgba(220, 130, 40, 0.4);
border-radius: 6px;
text-align: center;
z-index: 9999;
pointer-events: none;
text-shadow: 0 0 8px rgba(255, 140, 0, 0.5);
animation: flash-appear 0.25s ease-out forwards;
}
@keyframes flash-appear {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.92);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.complete-flash {
position: fixed;
transform: translate(-50%, -50%);
max-width: 280px;
padding: 0.5rem 1rem;
font-size: 0.8rem;
font-style: italic;
color: #e0c0ff;
background: rgba(30, 10, 40, 0.85);
border: 1px solid rgba(160, 80, 200, 0.4);
border-radius: 6px;
text-align: center;
z-index: 9999;
pointer-events: none;
text-shadow: 0 0 8px rgba(160, 80, 200, 0.4);
animation: flash-appear 0.25s ease-out forwards;
}
.trail-copy {
color: var(--text-muted);
font-size: 0.85rem;
font-style: italic;
padding: 0.5rem 1rem;
opacity: 1;
transition: opacity 300ms ease-out;
}
.trail-copy.fading {
opacity: 0;
}
.counter-arriving {
animation: fade-in 200ms ease-in forwards;
}
.empty-state.arriving {
animation: fade-in 200ms ease-in 300ms both;
}
.card-tile.just-cast,
.card-tile.just-returned {
animation: highlight-pulse 1s ease-out;
z-index: 20;
}
.library-card.just-cloned {
animation: just-cloned-pulse 6s linear;
z-index: 20;
}
.card-tile.just-arrived {
animation: just-cloned-pulse 6s linear;
z-index: 20;
}
@keyframes just-cloned-pulse {
0% {
box-shadow: 0 0 0 5px #e6a032;
}
7% {
box-shadow: 0 0 0 0 transparent;
}
14% {
box-shadow: 0 0 0 5px #e6a032;
}
21% {
box-shadow: 0 0 0 0 transparent;
}
28% {
box-shadow: 0 0 0 5px #e6a032;
}
35% {
box-shadow: 0 0 0 0 transparent;
}
39% {
box-shadow: 0 0 0 9px #e6a032;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
@keyframes highlight-pulse {
0% {
box-shadow: 0 0 0 4px var(--accent);
border-color: var(--accent) !important;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
@media (prefers-reduced-motion: reduce) {
.resolving--accept,
.resolving--defer,
.resolving--decline {
transition: none;
}
.trail-copy {
transition: none;
}
.counter-arriving {
animation: none;
}
.empty-state.arriving {
animation: none;
opacity: 1;
}
.card-tile.just-cast,
.card-tile.just-returned {
animation: none;
}
.library-card.just-cloned {
animation: none;
}
.toast {
animation: none;
opacity: 1;
}
}
.psych-tip-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid rgba(74, 158, 255, 0.4);
background:
linear-gradient(
135deg,
rgba(74, 158, 255, 0.12) 0%,
rgba(74, 158, 255, 0.06) 100%);
color: #4a9eff;
font-size: 14px;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: all 140ms cubic-bezier(0.34, 1.56, 0.64, 1);
vertical-align: middle;
margin-left: 0.35em;
font-family:
"Cinzel",
Georgia,
serif;
flex-shrink: 0;
box-shadow:
0 0 8px rgba(74, 158, 255, 0.35),
0 0 16px rgba(74, 158, 255, 0.15),
inset 0 0 6px rgba(74, 158, 255, 0.1),
inset 0 -1px 2px rgba(74, 158, 255, 0.06);
animation: btnBreath 4s ease-in-out infinite;
text-shadow: 0 0 4px rgba(74, 158, 255, 0.3);
}
@keyframes btnBreath {
0%, 100% {
box-shadow:
0 0 8px rgba(74, 158, 255, 0.35),
0 0 16px rgba(74, 158, 255, 0.15),
inset 0 0 6px rgba(74, 158, 255, 0.1),
inset 0 -1px 2px rgba(74, 158, 255, 0.06);
}
50% {
box-shadow:
0 0 12px rgba(74, 158, 255, 0.5),
0 0 24px rgba(74, 158, 255, 0.25),
inset 0 0 8px rgba(74, 158, 255, 0.15),
inset 0 -1px 3px rgba(74, 158, 255, 0.1);
}
}
.psych-tip-btn:hover {
color: #8ec8ff;
background:
linear-gradient(
135deg,
rgba(74, 158, 255, 0.24) 0%,
rgba(74, 158, 255, 0.14) 100%);
border-color: rgba(74, 158, 255, 0.75);
box-shadow:
0 0 16px rgba(74, 158, 255, 0.7),
0 0 32px rgba(74, 158, 255, 0.35),
inset 0 0 8px rgba(74, 158, 255, 0.2),
inset 0 -1px 3px rgba(74, 158, 255, 0.15);
text-shadow: 0 0 8px rgba(74, 158, 255, 0.6), 0 0 16px rgba(74, 158, 255, 0.3);
transform: scale(1.08);
}
.psych-tip-btn:active {
transform: scale(0.96);
}
.psych-tip-backdrop {
position: fixed;
inset: 0;
z-index: 8499;
}
.psych-tip-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 8500;
width: min(420px, 90vw);
background:
linear-gradient(
135deg,
rgba(14, 12, 10, 0.92) 0%,
rgba(20, 18, 16, 0.88) 100%);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid rgba(74, 158, 255, 0.15);
border-radius: 14px;
box-shadow:
0 0 40px rgba(74, 158, 255, 0.25),
0 0 80px rgba(74, 158, 255, 0.12),
0 24px 64px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -1px 2px rgba(74, 158, 255, 0.08);
padding: 1.5rem 1.75rem 1.75rem;
animation: panelAppear 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes panelAppear {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.92);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.psych-tip-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.psych-tip-glyph {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.6rem;
color: #4a9eff;
line-height: 1;
text-shadow:
0 0 8px rgba(74, 158, 255, 0.8),
0 0 16px rgba(74, 158, 255, 0.6),
0 0 32px rgba(74, 158, 255, 0.3),
0 0 2px rgba(74, 158, 255, 1);
flex-shrink: 0;
animation: glyphPulse 3s ease-in-out infinite;
filter: drop-shadow(0 0 6px rgba(74, 158, 255, 0.4));
}
@keyframes glyphPulse {
0%, 100% {
text-shadow:
0 0 8px rgba(74, 158, 255, 0.8),
0 0 16px rgba(74, 158, 255, 0.6),
0 0 32px rgba(74, 158, 255, 0.3),
0 0 2px rgba(74, 158, 255, 1);
}
50% {
text-shadow:
0 0 12px rgba(74, 158, 255, 1),
0 0 24px rgba(74, 158, 255, 0.8),
0 0 48px rgba(74, 158, 255, 0.5),
0 0 3px rgba(142, 200, 255, 1);
}
}
.psych-tip-title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(142, 200, 255, 0.7);
flex: 1;
font-weight: 500;
}
.psych-tip-close {
background: rgba(74, 158, 255, 0.08);
border: 1px solid rgba(74, 158, 255, 0.2);
color: rgba(142, 200, 255, 0.6);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
padding: 2px 6px;
border-radius: 6px;
transition: all 120ms;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.psych-tip-close:hover {
background: rgba(74, 158, 255, 0.16);
border-color: rgba(74, 158, 255, 0.4);
color: #8ec8ff;
box-shadow: 0 0 8px rgba(74, 158, 255, 0.3);
}
.psych-tip-copy {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text);
margin: 0 0 0.75rem;
}
.psych-tip-citation {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
text-align: right;
}
.psych-tip-citation a {
color: #4a9eff;
text-decoration: none;
border-bottom: 1px solid rgba(74, 158, 255, 0.4);
cursor: pointer;
transition: color 120ms, border-color 120ms;
}
.psych-tip-citation a:hover {
color: #8ec8ff;
border-bottom-color: rgba(74, 158, 255, 0.7);
}
.citation-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: rgba(14, 12, 10, 0.92);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid rgba(74, 158, 255, 0.3);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
color: #8ec8ff;
white-space: nowrap;
z-index: 8501;
box-shadow:
0 0 12px rgba(74, 158, 255, 0.6),
0 0 24px rgba(74, 158, 255, 0.3),
inset 0 0 8px rgba(74, 158, 255, 0.15);
animation: tooltipFadeIn 100ms ease-out;
pointer-events: none;
}
.citation-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: rgba(14, 12, 10, 0.92);
border: 1px solid rgba(74, 158, 255, 0.3);
border-left-color: transparent;
border-bottom-color: transparent;
border-radius: 0 2px 0 0;
}
@keyframes tooltipFadeIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(-2px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.psych-tip-more {
display: inline-flex;
align-items: center;
gap: 0.4em;
margin-top: 1rem;
padding: 0.4rem 0.75rem;
background: rgba(214, 168, 92, 0.08);
border: 1px solid rgba(214, 168, 92, 0.25);
border-radius: 6px;
color: rgba(232, 196, 132, 0.85);
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition:
background 120ms,
border-color 120ms,
color 120ms;
}
.psych-tip-more:hover {
background: rgba(214, 168, 92, 0.15);
border-color: rgba(214, 168, 92, 0.5);
color: #f1d49a;
}
body.design-philosophy-open {
overflow: hidden;
}
.design-philosophy-backdrop {
position: fixed;
inset: 0;
background: rgba(8, 6, 4, 0.55);
backdrop-filter: blur(4px);
z-index: 8599;
}
.design-philosophy-backdrop[hidden] {
display: none;
}
.design-philosophy-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 8600;
width: min(680px, 92vw);
max-height: 86vh;
display: flex;
flex-direction: column;
background:
linear-gradient(
140deg,
rgba(22, 18, 13, 0.96) 0%,
rgba(28, 22, 16, 0.92) 100%);
backdrop-filter: blur(16px) saturate(1.3);
border: 1px solid rgba(214, 168, 92, 0.22);
border-radius: 14px;
box-shadow:
0 0 40px rgba(214, 168, 92, 0.18),
0 0 80px rgba(214, 168, 92, 0.08),
0 24px 64px rgba(0, 0, 0, 0.85),
inset 0 1px 0 rgba(255, 240, 200, 0.06),
inset 0 -1px 2px rgba(214, 168, 92, 0.08);
animation: panelAppear 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.design-philosophy-panel[hidden] {
display: none;
}
.design-philosophy-header {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(214, 168, 92, 0.15);
flex-shrink: 0;
}
.design-philosophy-glyph {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.8rem;
color: #d6a85c;
line-height: 1;
flex-shrink: 0;
text-shadow:
0 0 6px rgba(214, 168, 92, 0.5),
0 0 14px rgba(214, 168, 92, 0.3),
0 0 2px rgba(232, 196, 132, 0.9);
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.design-philosophy-title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.05rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(232, 196, 132, 0.92);
flex: 1;
font-weight: 500;
margin: 0;
}
.design-philosophy-close {
background: rgba(214, 168, 92, 0.08);
border: 1px solid rgba(214, 168, 92, 0.22);
color: rgba(232, 196, 132, 0.7);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
padding: 0;
border-radius: 6px;
transition:
background 120ms,
border-color 120ms,
color 120ms;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
.design-philosophy-close:hover {
background: rgba(214, 168, 92, 0.18);
border-color: rgba(214, 168, 92, 0.45);
color: #f1d49a;
}
.design-philosophy-body {
overflow-y: auto;
padding: 1.5rem 1.75rem 2rem;
scrollbar-width: thin;
scrollbar-color: rgba(214, 168, 92, 0.3) transparent;
}
.design-philosophy-body::-webkit-scrollbar {
width: 8px;
}
.design-philosophy-body::-webkit-scrollbar-track {
background: transparent;
}
.design-philosophy-body::-webkit-scrollbar-thumb {
background: rgba(214, 168, 92, 0.3);
border-radius: 4px;
}
.design-philosophy-frame {
font-size: 1rem;
line-height: 1.7;
color: rgba(232, 220, 198, 0.92);
margin: 0 0 1.5rem;
font-style: italic;
border-left: 2px solid rgba(214, 168, 92, 0.4);
padding-left: 1rem;
}
.design-philosophy-clusters {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-bottom: 1.75rem;
}
.design-philosophy-cluster {
padding: 1rem 1.1rem;
background: rgba(255, 240, 200, 0.025);
border: 1px solid rgba(214, 168, 92, 0.12);
border-radius: 8px;
}
.design-philosophy-cluster:target {
border-color: rgba(214, 168, 92, 0.5);
background: rgba(255, 240, 200, 0.05);
box-shadow: 0 0 16px rgba(214, 168, 92, 0.18);
}
.design-philosophy-cluster__name {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.85rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #d6a85c;
margin: 0 0 0.5rem;
font-weight: 600;
}
.design-philosophy-cluster__frame {
font-size: 0.92rem;
line-height: 1.6;
color: var(--text);
margin: 0 0 0.75rem;
}
.design-philosophy-cluster__citations {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.design-philosophy-cluster__cite {
font-size: 0.82rem;
color: rgba(232, 196, 132, 0.78);
text-decoration: none;
border-bottom: 1px dotted rgba(214, 168, 92, 0.3);
transition: color 120ms, border-color 120ms;
display: inline;
}
.design-philosophy-cluster__cite:hover {
color: #f1d49a;
border-bottom-color: rgba(214, 168, 92, 0.6);
}
.design-philosophy-bibliography {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(214, 168, 92, 0.18);
}
.design-philosophy-bibliography__heading {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(232, 196, 132, 0.75);
margin: 0 0 0.85rem;
font-weight: 500;
}
.design-philosophy-bibliography__list {
margin: 0;
padding-left: 2.2rem;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.design-philosophy-bibliography__list li {
font-size: 0.78rem;
line-height: 1.55;
color: rgba(220, 208, 188, 0.85);
}
.design-philosophy-bibliography__list li:target {
color: #f1d49a;
}
.design-philosophy-bib__authors {
color: rgba(232, 220, 198, 0.95);
}
.design-philosophy-bib__title {
color: rgba(232, 220, 198, 0.92);
}
.design-philosophy-bib__journal,
.design-philosophy-bib__handle {
color: rgba(208, 192, 168, 0.78);
}
.design-philosophy-bib__url {
color: #d6a85c;
margin-left: 0.25em;
text-decoration: none;
border-bottom: 1px dotted rgba(214, 168, 92, 0.4);
}
.design-philosophy-bib__url:hover {
color: #f1d49a;
border-bottom-color: rgba(214, 168, 92, 0.7);
}
.design-philosophy-bib__note {
display: block;
margin-top: 0.15rem;
color: rgba(192, 176, 152, 0.7);
font-size: 0.74rem;
}
.design-philosophy-bib__receipts {
display: block;
margin-top: 0.15rem;
color: rgba(192, 176, 152, 0.6);
font-size: 0.72rem;
}
.design-philosophy-bib__receipts code {
font-family: "JetBrains Mono", monospace;
font-size: 0.68rem;
color: rgba(214, 168, 92, 0.85);
background: rgba(214, 168, 92, 0.08);
padding: 0 0.3em;
border-radius: 3px;
}
.design-philosophy-source {
margin-top: 1.5rem;
font-size: 0.74rem;
color: rgba(192, 176, 152, 0.55);
text-align: center;
}
.design-philosophy-source code {
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
color: rgba(214, 168, 92, 0.7);
}
.design-philosophy-trigger {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 0.85rem;
margin-top: 0.5rem;
padding: 0.7rem 1.15rem;
background:
linear-gradient(
180deg,
#2a2014 0%,
#1a1208 100%);
border: 1px solid rgba(184, 120, 56, 0.45);
border-radius: 3px;
color: #c8a870;
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.28em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(232, 168, 64, 0.12), 0 2px 0 rgba(0, 0, 0, 0.55);
transition:
background 140ms,
color 140ms,
box-shadow 140ms;
}
.design-philosophy-trigger:hover {
background:
linear-gradient(
180deg,
#34281a 0%,
#221808 100%);
color: #e8a840;
box-shadow:
inset 0 1px 0 rgba(232, 168, 64, 0.18),
0 0 18px rgba(232, 168, 64, 0.18),
0 2px 0 rgba(0, 0, 0, 0.55);
}
.design-philosophy-trigger__glyph {
font-family:
"Noto Sans Runic",
Georgia,
serif;
font-size: 1rem;
color: #c8a870;
line-height: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
}
.design-philosophy-trigger:hover .design-philosophy-trigger__glyph {
color: #e8a840;
}
.design-philosophy-trigger__label {
line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
.design-philosophy-panel {
animation: none;
}
}
/* app/javascript/stylesheets/_choreography.css */
.choreography-scrim {
position: fixed;
inset: 0;
z-index: 10500;
background: #0a0806;
opacity: 0;
pointer-events: all;
--choreography-color: oklch(0.78 0.12 70);
--choreography-glow: oklch(0.78 0.12 70 / 0.6);
--choreography-halo: oklch(0.78 0.12 70 / 0.3);
}
.choreography-scrim[data-register=amber] {
--choreography-color: oklch(0.78 0.12 70);
--choreography-glow: oklch(0.78 0.12 70 / 0.6);
--choreography-halo: oklch(0.78 0.12 70 / 0.3);
}
.choreography-scrim[data-register=oxblood] {
--choreography-color: oklch(0.55 0.17 20);
--choreography-glow: oklch(0.55 0.17 20 / 0.65);
--choreography-halo: oklch(0.55 0.17 20 / 0.32);
}
.choreography-scrim[data-register=slate] {
--choreography-color: oklch(0.72 0.04 250);
--choreography-glow: oklch(0.72 0.04 250 / 0.55);
--choreography-halo: oklch(0.72 0.04 250 / 0.28);
}
.choreography-scrim--reduced {
opacity: 0.4;
}
.choreography-spotlight {
position: relative;
z-index: 10501;
--spot-color: oklch(0.78 0.12 70 / 0.6);
--spot-halo: oklch(0.78 0.12 70 / 0.3);
box-shadow: 0 0 28px 4px var(--spot-halo);
border-radius: 4px;
}
.choreography-spotlight[data-choreography-register=oxblood] {
--spot-color: oklch(0.55 0.17 20 / 0.65);
--spot-halo: oklch(0.55 0.17 20 / 0.32);
}
.choreography-spotlight[data-choreography-register=slate] {
--spot-color: oklch(0.72 0.04 250 / 0.55);
--spot-halo: oklch(0.72 0.04 250 / 0.28);
}
.choreography-lifted {
position: relative;
z-index: 10501;
}
.choreography-release-line {
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10502;
font-style: italic;
color: oklch(0.94 0.025 70);
font-size: 1.15rem;
text-align: center;
max-width: min(80%, 36rem);
line-height: 1.55;
letter-spacing: 0.005em;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.choreography-release-line[data-scrim-mode=modal] {
font-style: normal;
letter-spacing: 0;
color: var(--text);
max-width: 480px;
width: calc(100% - 3rem);
text-shadow: none;
}
.choreography-line__headline {
font-size: clamp(1.5rem, 5vw, 2.25rem);
font-weight: 600;
color: var(--text);
line-height: 1.2;
margin: 0 0 1.5rem;
}
.choreography-line__body {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.7;
font-weight: 400;
}
.choreography-line__body + .choreography-line__body {
margin-top: 1rem;
}
.choreography-release-line[data-scrim-mode=reveal] .choreography-line__headline {
font-size: 1.15rem;
font-weight: 400;
font-style: italic;
color: oklch(0.94 0.025 70);
margin: 0;
line-height: 1.55;
}
.choreography-release-line[data-scrim-mode=reveal] .choreography-line__body {
display: none;
}
.choreography-release-line[data-scrim-mode=modal][data-register=oxblood] {
color: oklch(0.74 0.14 25);
font-style: italic;
}
.choreography-release-line[data-scrim-mode=modal][data-register=slate] {
color: oklch(0.92 0.02 250);
}
.choreography-pulse-intense {
animation: choreography-psych-pulse 1.6s ease-in-out infinite;
}
@keyframes choreography-psych-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 oklch(0.78 0.12 70 / 0);
}
50% {
transform: scale(1.08);
box-shadow: 0 0 0 6px oklch(0.78 0.12 70 / 0.4);
}
}
.choreography-pulse-once {
animation: choreography-pulse-once 0.9s ease-out 1;
}
[data-choreography-register=oxblood].choreography-pulse-once {
--pulse-color: oklch(0.55 0.17 20 / 0.55);
animation-name: choreography-pulse-once-oxblood;
}
@keyframes choreography-pulse-once {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 oklch(0.78 0.12 70 / 0);
}
35% {
transform: scale(1.05);
box-shadow: 0 0 0 8px oklch(0.78 0.12 70 / 0.45);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 oklch(0.78 0.12 70 / 0);
}
}
@keyframes choreography-pulse-once-oxblood {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 oklch(0.55 0.17 20 / 0);
}
35% {
transform: scale(1.04);
box-shadow: 0 0 0 8px oklch(0.55 0.17 20 / 0.45);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 oklch(0.55 0.17 20 / 0);
}
}
.compass-tour-pulse {
animation: compass-tour-ripple 1.8s linear infinite;
}
@keyframes compass-tour-ripple {
0%, 55%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 oklch(0.78 0.12 70 / 0);
color: oklch(0.6 0.05 65);
}
20% {
transform: scale(1.15);
box-shadow: 0 0 0 8px oklch(0.78 0.12 70 / 0.55);
color: oklch(0.92 0.16 70);
}
40% {
transform: scale(1);
box-shadow: 0 0 0 16px oklch(0.78 0.12 70 / 0);
color: oklch(0.6 0.05 65);
}
}
@media (prefers-reduced-motion: reduce) {
.choreography-pulse-intense {
animation: none;
outline: 2px solid oklch(0.78 0.12 70 / 0.7);
outline-offset: 2px;
}
.choreography-pulse-once {
animation: none;
}
.compass-tour-pulse {
animation: none;
outline: 2px solid oklch(0.78 0.12 70 / 0.7);
outline-offset: 3px;
border-radius: 50%;
}
}
/* app/javascript/stylesheets/_library.css */
.simboard-container {
max-width: 900px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
.simboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.simboard-header h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.simboard-form-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.simboard-form-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.simboard-form-row .form-group {
flex: 1;
min-width: 120px;
margin-bottom: 0;
}
.simboard-section-label {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 0 0 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.simboard-resolved-section,
.simboard-cards-section {
margin-bottom: 1.25rem;
}
.simboard-resolved-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.simboard-resolved-row {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
.simboard-resolved-name {
flex: 1;
min-width: 120px;
padding: 0.35rem 0.6rem;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.9rem;
}
.simboard-resolved-event {
padding: 0.35rem 0.5rem;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.9rem;
}
.simboard-card-checkboxes {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.simboard-card-check {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
}
.simboard-card-energy {
color: var(--text-muted);
font-size: 0.8rem;
}
.simboard-run-row {
margin-top: 1.25rem;
}
.simboard-empty {
color: var(--text-muted);
font-size: 0.9rem;
font-style: italic;
}
.simboard-results {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.25rem;
}
.simboard-results-label {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 1rem 0 0.5rem;
}
.simboard-results-label:first-child {
margin-top: 0;
}
.simboard-task {
background: var(--surface-2);
border: 1px solid var(--border);
border-left: 3px solid var(--border);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.5rem;
}
.simboard-priority-1 {
border-left-color: var(--border);
}
.simboard-priority-2 {
border-left-color: var(--warning, #d4a017);
}
.simboard-priority-3 {
border-left-color: var(--danger, #c0392b);
}
.simboard-wo-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.35rem;
}
.simboard-wo-header .simboard-card-name {
font-weight: 600;
font-size: 0.95rem;
}
.simboard-priority-badge {
font-size: 0.75rem;
padding: 0.15rem 0.4rem;
border-radius: 4px;
background: var(--surface);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.simboard-wo-message {
font-size: 0.9rem;
color: var(--text);
line-height: 1.5;
}
.simboard-suppressed-card {
font-size: 0.9rem;
color: var(--text-muted);
padding: 0.25rem 0;
border-bottom: 1px solid var(--border);
}
.simboard-suppressed-card:last-child {
border-bottom: none;
}
.simboard-synthesis-notes {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.75rem;
font-size: 0.9rem;
line-height: 1.6;
color: var(--text);
font-style: italic;
}
.simboard-error {
border: 1px solid var(--border);
border-left: 4px solid var(--danger, #c0392b);
border-radius: 4px;
padding: 0.75rem 1rem;
font-size: 0.9rem;
color: var(--text);
}
.simboard-results-empty {
color: var(--text-muted);
font-style: italic;
font-size: 0.9rem;
}
.header-actions {
display: flex;
gap: 0.5rem;
}
.library-container {
max-width: 1100px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
.library-container > form {
max-width: 640px;
}
.library-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.library-header h1 {
margin: 0 0 0.25rem;
font-size: 1.5rem;
font-weight: 600;
}
.library-subheading {
margin: 0;
color: var(--text-muted);
font-size: 0.9rem;
}
.library-category {
margin-bottom: 2rem;
}
.library-category-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
margin: 0 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.library-category-desc {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0 0 0.75rem;
font-style: italic;
}
.library-category--footer {
background: rgba(0, 0, 0, 0.25);
margin-left: -1rem;
margin-right: -1rem;
padding: 1.25rem 1rem 0;
border-radius: 10px;
}
.color-legend {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2px;
margin-top: 1.5rem;
border-radius: 0 0 8px 8px;
overflow: hidden;
background: rgba(0, 0, 0, 0.6);
}
.color-block {
position: relative;
padding: 1.75rem 0.5rem 1.25rem;
text-align: center;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.color-block::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,");
background-size: 180px 180px;
mix-blend-mode: overlay;
opacity: 0.8;
pointer-events: none;
}
.color-block__glyph {
font-size: 2rem;
line-height: 1;
opacity: 0.4;
user-select: none;
pointer-events: none;
}
.color-block__label {
font-family:
"JetBrains Mono",
ui-monospace,
Menlo,
monospace;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.color-block[data-color=red] {
background:
radial-gradient(
30% 18% at 30% 70%,
oklch(0.72 0.11 38 / 0.7),
transparent 70%),
radial-gradient(
25% 15% at 70% 80%,
oklch(0.7 0.11 36 / 0.7),
transparent 70%),
radial-gradient(
15% 10% at 50% 92%,
oklch(0.72 0.11 38 / 0.7),
transparent 70%),
radial-gradient(
110% 80% at 50% 110%,
oklch(0.42 0.09 32) 0%,
oklch(0.26 0.075 28) 50%,
oklch(0.12 0.045 25) 100%);
border-top: 2px solid oklch(0.56 0.1 32);
color: oklch(0.72 0.11 38);
}
.color-block[data-color=red] .color-block__glyph {
color: oklch(0.66 0.12 34);
}
.color-block[data-color=green] {
background:
radial-gradient(
80% 40% at 50% 0%,
oklch(0.74 0.13 130 / 0.5),
transparent 70%),
radial-gradient(
40% 25% at 75% 65%,
oklch(0.54 0.12 130 / 0.5),
transparent 70%),
linear-gradient(
180deg,
transparent 55%,
rgba(0, 0, 0, 0.3) 100%),
linear-gradient(
180deg,
oklch(0.45 0.1 135) 0%,
oklch(0.12 0.05 130) 100%);
border-top: 2px solid oklch(0.6 0.12 130);
color: oklch(0.74 0.13 130);
}
.color-block[data-color=green] .color-block__glyph {
color: oklch(0.7 0.14 130);
}
.color-block[data-color=blue] {
background:
radial-gradient(
40% 10% at 50% 58%,
oklch(0.78 0.12 225 / 0.45),
transparent 70%),
linear-gradient(
180deg,
transparent 54%,
oklch(0.56 0.12 225 / 0.45) 55%,
transparent 57%),
linear-gradient(
180deg,
transparent 62%,
oklch(0.56 0.12 225 / 0.45) 63%,
transparent 65%),
radial-gradient(
60% 100% at 50% 0%,
oklch(0.78 0.12 225 / 0.45),
transparent 70%),
radial-gradient(
120% 80% at 50% 120%,
oklch(0.4 0.1 225) 0%,
oklch(0.22 0.08 230) 55%,
oklch(0.1 0.05 235) 100%);
border-top: 2px solid oklch(0.62 0.12 225);
color: oklch(0.78 0.12 225);
}
.color-block[data-color=blue] .color-block__glyph {
color: oklch(0.72 0.14 225);
}
.color-block[data-color=white] {
background:
radial-gradient(
30% 10% at 50% 22%,
oklch(0.92 0.05 60 / 0.5),
transparent 70%),
radial-gradient(
80% 30% at 28% 68%,
oklch(0.78 0.05 60 / 0.5),
transparent 70%),
radial-gradient(
60% 25% at 72% 72%,
oklch(0.78 0.05 60 / 0.5),
transparent 70%),
linear-gradient(
180deg,
oklch(0.68 0.04 60) 0%,
oklch(0.24 0.03 55) 100%);
border-top: 2px solid oklch(0.78 0.06 60);
color: oklch(0.92 0.05 60);
}
.color-block[data-color=white] .color-block__glyph {
color: oklch(0.88 0.06 65);
}
.color-block[data-color=black] {
background:
radial-gradient(
90% 60% at 50% 50%,
oklch(0.74 0.14 285 / 0.3),
transparent 70%),
radial-gradient(
40% 60% at 50% 50%,
oklch(0.74 0.14 285 / 0.3),
transparent 70%),
repeating-linear-gradient(
90deg,
transparent 0 39px,
oklch(0.52 0.13 285 / 0.3) 39px 40px,
transparent 40px 79px),
linear-gradient(
180deg,
oklch(0.35 0.1 285) 0%,
oklch(0.08 0.05 285) 100%);
border-top: 2px solid oklch(0.58 0.13 285);
color: oklch(0.74 0.14 285);
}
.color-block[data-color=black] .color-block__glyph {
color: oklch(0.68 0.15 290);
}
.library-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 600px) {
.library-grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
.library-card {
background:
repeating-linear-gradient(
120deg,
transparent 0px,
transparent 2px,
rgba(255, 255, 255, 0.012) 2px,
rgba(255, 255, 255, 0.012) 4px),
repeating-linear-gradient(
45deg,
transparent 0px,
transparent 3px,
rgba(0, 0, 0, 0.03) 3px,
rgba(0, 0, 0, 0.03) 5px),
linear-gradient(
160deg,
#2c2c2c 0%,
#242424 60%,
#1e1e1e 100%);
border: 2px solid var(--border);
border-radius: 10px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.5),
0 0 14px rgba(180, 120, 40, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.04),
inset 0 -2px 6px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
transition:
box-shadow 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.library-card:hover {
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.6),
0 0 22px rgba(180, 120, 40, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -2px 6px rgba(0, 0, 0, 0.3);
border-color: rgba(180, 120, 40, 0.25);
transform: translateY(-2px);
}
.library-card-header {
padding: 0.875rem 0.875rem 0.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.library-card-name {
font-weight: 600;
font-size: 1rem;
color: var(--text);
flex: 1;
min-width: 0;
line-height: 1.3;
}
.library-card-description {
padding: 0 0.875rem 0.375rem;
font-size: 0.85rem;
color: var(--text-muted);
margin: 0;
line-height: 1.4;
}
.library-card-body {
padding: 0 0.875rem 0.5rem;
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
line-height: 1.45;
opacity: 0.75;
flex: 1;
}
.library-card-body p {
margin: 0;
}
.library-card-body ul.card-body-list {
margin: 0;
padding-left: 1.1rem;
}
.library-card-body ul.card-body-list li {
margin: 0;
}
.library-card-flavor {
display: block;
padding: 0 0.875rem 0.5rem;
font-size: 0.72rem;
font-style: italic;
color: var(--text-muted);
opacity: 0.6;
}
.library-card-hints {
padding: 0 0.875rem 0.5rem;
font-size: 0.75rem;
font-family: monospace;
color: var(--text-muted);
margin: 0;
opacity: 0.6;
}
.library-card-meta {
padding: 0.25rem 0.875rem 0.5rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.library-card-footer {
border-top: 1px solid var(--border);
background: rgba(0, 0, 0, 0.15);
padding: 0.5rem 0.75rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.library-card-footer .btn {
padding: 0.15rem 0.45rem;
font-size: 0.75rem;
min-height: auto;
line-height: 1.4;
}
.library-card-footer form {
display: flex;
}
.preview-stage {
padding: 0.5rem 0.875rem;
min-height: 2.5rem;
}
.preview-task-sample {
display: block;
opacity: 0;
font-size: 0.82rem;
font-style: italic;
color: var(--text);
background: rgba(77, 232, 194, 0.08);
border: 1px solid rgba(77, 232, 194, 0.25);
border-radius: 6px;
padding: 0.4rem 0.6rem;
margin-top: 0.25rem;
line-height: 1.4;
}
.preview-counter {
display: inline-block;
font-size: 0.75rem;
opacity: 0;
}
.library-card--previewing {
outline: 1px solid var(--border);
z-index: 10;
position: relative;
overflow: visible;
}
.library-card--done {
z-index: 10;
position: relative;
}
@media (prefers-reduced-motion: reduce) {
.library-card--previewing .preview-task-sample {
opacity: 1;
}
}
.library-already-playing {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
background: var(--surface-2);
border: 1px solid var(--border);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.card-type-selector {
display: flex;
gap: 0;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
width: fit-content;
}
.card-type-option {
display: flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
padding: 0.4rem 1rem;
border-right: 1px solid var(--border);
user-select: none;
transition: background 0.12s;
}
.card-type-option:last-child {
border-right: none;
}
.card-type-option:hover {
background: rgba(74, 158, 255, 0.06);
}
.card-type-option:has(input:checked) {
background: rgba(74, 158, 255, 0.14);
color: var(--accent);
}
.card-type-option input[type=radio] {
display: none;
}
.card-type-hint {
display: none;
}
.card-type-selector-wrapper {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.card-type-help {
font-size: 0.82rem;
color: var(--text-muted);
line-height: 1.5;
max-width: 20rem;
padding-top: 0.3rem;
}
.card-type-help--artifact,
.card-type-help--sorcery {
display: none;
}
.card-type-selector-wrapper:has([value=artifact]:checked) .card-type-help--artifact {
display: block;
}
.card-type-selector-wrapper:has([value=sorcery]:checked) .card-type-help--sorcery {
display: block;
}
.deck-title-actions {
display: flex;
flex-direction: column;
gap: 10px;
align-self: center;
flex-shrink: 0;
}
.deck-bottom-bar {
display: flex;
justify-content: flex-end;
margin-top: 40px;
margin-bottom: 12px;
}
.deck-action-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 28px 13px 22px;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #1a0e04;
background:
linear-gradient(
180deg,
#f8e08c 0%,
#d8a040 50%,
#b88828 100%);
border: none;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 -1px 2px rgba(0, 0, 0, 0.35),
0 4px 16px rgba(0, 0, 0, 0.65);
text-decoration: none;
min-width: 220px;
justify-content: center;
transition: filter 180ms, box-shadow 180ms;
}
.deck-action-link:hover {
filter: brightness(1.1);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 2px rgba(0, 0, 0, 0.3),
0 6px 22px rgba(0, 0, 0, 0.75),
0 0 24px rgba(216, 160, 64, 0.3);
color: #1a0e04;
text-decoration: none;
}
.deck-action-link__sigil {
font-size: 16px;
line-height: 1;
color: rgba(26, 14, 4, 0.55);
transition: color 180ms, transform 180ms;
display: inline-block;
}
.deck-action-link:hover .deck-action-link__sigil {
color: rgba(26, 14, 4, 0.85);
}
.deck-action-link--new {
color: oklch(0.88 0.06 220);
border: 1px solid oklch(0.6 0.1 220 / 0.55);
background: oklch(0.3 0.1 220 / 0.8);
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 12px;
box-shadow: inset 0 1px 0 rgba(180, 210, 240, 0.1), 0 4px 16px rgba(0, 0, 0, 0.65);
}
.deck-action-link--new .deck-action-link__sigil {
color: oklch(0.65 0.09 220 / 0.85);
transition: color 180ms, transform 180ms;
}
.deck-action-link--new:hover {
color: #fff;
border-color: oklch(0.7 0.14 220 / 0.85);
background: oklch(0.38 0.12 220 / 0.9);
box-shadow:
0 6px 22px rgba(0, 0, 0, 0.65),
0 0 20px oklch(0.55 0.14 220 / 0.3),
inset 0 1px 0 rgba(180, 210, 240, 0.12);
}
.deck-action-link--new:hover .deck-action-link__sigil {
color: oklch(0.85 0.1 220);
transform: rotate(90deg);
}
.deck-form-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
margin-bottom: 2rem;
}
.deck-title--form {
font-size: clamp(22px, 3vw, 34px);
}
.deck-zone {
margin-top: 2rem;
padding: 1.25rem 1.5rem;
background: rgba(20, 30, 42, 0.6);
border: 1px solid oklch(0.55 0.06 220 / 0.35);
box-shadow: inset 0 1px 0 rgba(180, 200, 220, 0.06);
}
.deck-zone--danger {
border-color: oklch(0.55 0.15 28 / 0.4);
background: rgba(28, 16, 14, 0.6);
}
.deck-zone--retire-highlight {
animation: retire-highlight-pulse 3s ease-out forwards;
}
@keyframes retire-highlight-pulse {
0% {
box-shadow: 0 0 0 6px oklch(0.65 0.18 28 / 0.9);
border-color: oklch(0.65 0.18 28 / 0.9);
}
15% {
box-shadow: 0 0 0 0 transparent;
}
30% {
box-shadow: 0 0 0 6px oklch(0.65 0.18 28 / 0.7);
border-color: oklch(0.65 0.18 28 / 0.7);
}
45% {
box-shadow: 0 0 0 0 transparent;
}
60% {
box-shadow: 0 0 0 6px oklch(0.65 0.18 28 / 0.4);
border-color: oklch(0.55 0.15 28 / 0.4);
}
100% {
box-shadow: 0 0 0 0 transparent;
border-color: oklch(0.55 0.15 28 / 0.4);
}
}
.deck-zone__heading {
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #e0e6ec;
margin: 0 0 0.75rem;
}
.deck-zone--danger .deck-zone__heading {
color: oklch(0.75 0.12 28);
}
.deck-zone__note {
font-size: 0.875rem;
color: var(--text-muted);
margin: 0 0 1rem;
line-height: 1.5;
}
.deck-edit-container {
max-width: 1400px;
}
.deck-edit-container form {
max-width: none;
}
.deck-inner .deck-edit-layout {
max-width: none;
}
.deck-inner form {
max-width: none;
}
.deck-edit-layout {
display: flex;
gap: 2rem;
align-items: flex-start;
}
.deck-edit-form {
flex: 1;
min-width: 0;
}
.deck-edit-form-header {
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
}
.deck-edit-form-header h1 {
margin: 0 0 0.15rem;
font-size: 1.25rem;
font-weight: 600;
}
.deck-edit-form .form-group {
margin-bottom: 0.65rem;
}
.deck-edit-form .form-group label {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 0.25rem;
}
.deck-edit-form .form-group input[type=text],
.deck-edit-form .form-group input[type=number],
.deck-edit-form .form-group textarea,
.deck-edit-form .form-group select,
.deck-edit-form .form-group .form-control {
padding: 0.35rem 0.6rem;
font-size: 0.9rem;
}
.deck-edit-form .form-group small {
font-size: 0.72rem;
margin-top: 0.15rem;
}
.deck-edit-sidebar {
flex-shrink: 0;
width: 580px;
position: sticky;
top: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-row {
display: flex;
gap: 1rem;
}
.form-row .form-group {
flex: 1;
min-width: 0;
}
.deck-preview-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
text-align: center;
}
#deck-preview-pane {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.preview-trio {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.deck-edit-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.deck-edit-actions .btn {
flex: none;
}
.deck-edit-actions .btn-primary {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: oklch(0.9 0.08 220);
background: oklch(0.28 0.08 220 / 0.7);
border: 1px solid oklch(0.6 0.1 220 / 0.6);
box-shadow: inset 0 1px 0 rgba(180, 210, 240, 0.1), 0 0 14px oklch(0.55 0.1 220 / 0.2);
padding: 0.6rem 1rem;
line-height: 1.4;
transition:
background 180ms,
border-color 180ms,
box-shadow 180ms,
color 180ms;
}
.deck-edit-actions .btn-primary:hover {
color: #fff;
background: oklch(0.34 0.1 220 / 0.85);
border-color: oklch(0.7 0.12 220 / 0.8);
box-shadow: inset 0 1px 0 rgba(180, 210, 240, 0.14), 0 0 20px oklch(0.6 0.12 220 / 0.3);
}
.deck-edit-actions .btn-secondary {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: oklch(0.68 0.06 220);
background: rgba(30, 45, 65, 0.55);
border: 1px solid oklch(0.55 0.07 220 / 0.55);
padding: 0.6rem 1rem;
line-height: 1.4;
transition:
color 180ms,
border-color 180ms,
background 180ms;
}
.deck-edit-actions .btn-secondary:hover {
color: oklch(0.82 0.08 220);
background: rgba(40, 60, 85, 0.7);
border-color: oklch(0.65 0.08 220 / 0.7);
}
.btn-block {
width: 100%;
text-align: center;
justify-content: center;
}
.deck-back-nav {
display: inline-flex;
align-items: center;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: oklch(0.72 0.08 220);
text-decoration: none;
padding: 5px 12px;
border: 1px solid oklch(0.55 0.07 220 / 0.5);
background: rgba(20, 30, 42, 0.55);
transition:
color 180ms,
border-color 180ms,
background 180ms;
align-self: flex-start;
}
.deck-back-nav:hover {
color: oklch(0.88 0.1 220);
border-color: oklch(0.65 0.09 220 / 0.75);
background: rgba(30, 50, 72, 0.7);
text-decoration: none;
}
.deck-back-link {
display: block;
text-align: center;
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 0.25rem;
text-decoration: none;
}
.deck-back-link:hover {
color: var(--text);
}
@media (max-width: 900px) {
.deck-edit-layout {
flex-direction: column;
}
.deck-edit-sidebar {
width: 100%;
position: static;
}
.preview-trio {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.form-row {
flex-direction: column;
gap: 0;
}
}
.color-selector {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.color-option {
display: flex;
align-items: center;
gap: 0;
cursor: pointer;
padding: 0.3rem 0.75rem;
border-radius: 20px;
border: 1px solid var(--border);
font-size: 0.82rem;
font-weight: 500;
transition:
border-color 0.15s,
background 0.15s,
color 0.15s;
user-select: none;
}
.color-option:hover {
border-color: var(--accent-muted);
background: rgba(255, 255, 255, 0.05);
}
.color-option input[type=radio] {
display: none;
}
.color-option--colorless {
color: oklch(0.65 0.04 60);
}
.color-option--red {
color: oklch(0.72 0.22 28);
}
.color-option--green {
color: oklch(0.65 0.19 150);
}
.color-option--blue {
color: oklch(0.68 0.2 255);
}
.color-option--white {
color: oklch(0.8 0.1 85);
}
.color-option--black {
color: oklch(0.7 0.18 310);
}
.color-option--colorless:has(input:checked) {
border-color: oklch(0.55 0.04 60);
background: oklch(0.22 0.02 60 / 0.4);
color: oklch(0.82 0.06 60);
}
.color-option--red:has(input:checked) {
border-color: oklch(0.58 0.22 28);
background: oklch(0.22 0.08 28 / 0.5);
color: oklch(0.85 0.2 28);
}
.color-option--green:has(input:checked) {
border-color: oklch(0.55 0.19 150);
background: oklch(0.2 0.08 150 / 0.5);
color: oklch(0.8 0.18 150);
}
.color-option--blue:has(input:checked) {
border-color: oklch(0.55 0.2 255);
background: oklch(0.2 0.08 255 / 0.5);
color: oklch(0.82 0.2 260);
}
.color-option--white:has(input:checked) {
border-color: oklch(0.72 0.1 85);
background: oklch(0.22 0.04 85 / 0.5);
color: oklch(0.92 0.1 90);
}
.color-option--black:has(input:checked) {
border-color: oklch(0.58 0.18 310);
background: oklch(0.2 0.07 310 / 0.5);
color: oklch(0.82 0.18 310);
}
.art-recipe-grid {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.art-recipe-option {
display: flex;
align-items: center;
gap: 0.3rem;
cursor: pointer;
padding: 0.25rem 0.55rem;
border-radius: 4px;
border: 1px solid var(--border);
font-size: 0.8rem;
transition: border-color 0.15s, background 0.15s;
user-select: none;
}
.art-recipe-option:hover {
border-color: var(--accent-muted);
background: rgba(74, 158, 255, 0.04);
}
.art-recipe-option:has(input:checked) {
border-color: var(--accent);
background: rgba(74, 158, 255, 0.12);
}
.art-recipe-option input[type=radio] {
display: none;
}
.art-recipe-glyph {
font-size: 0.95rem;
line-height: 1;
}
.art-recipe-name {
text-transform: capitalize;
color: var(--text-muted);
}
.art-recipe-option:has(input:checked) .art-recipe-name {
color: var(--text);
}
.btn-randomize {
width: auto;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: oklch(0.9 0.08 220);
background: oklch(0.28 0.08 220 / 0.7);
border: 1px solid oklch(0.6 0.1 220 / 0.6);
box-shadow: inset 0 1px 0 rgba(180, 210, 240, 0.1), 0 0 14px oklch(0.55 0.1 220 / 0.2);
padding: 0.45rem 0.9rem;
line-height: 1.4;
border-radius: 6px;
cursor: pointer;
transition:
background 180ms,
border-color 180ms,
box-shadow 180ms,
color 180ms;
}
@media (hover: hover) {
.btn-randomize:hover {
color: #fff;
background: oklch(0.34 0.1 220 / 0.85);
border-color: oklch(0.7 0.12 220 / 0.8);
box-shadow: inset 0 1px 0 rgba(180, 210, 240, 0.14), 0 0 20px oklch(0.6 0.12 220 / 0.3);
}
}
.btn-randomize:active {
transform: translateY(1px);
}
.btn-randomize-all {
width: auto;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: oklch(0.9 0.12 295);
background: oklch(0.28 0.12 295 / 0.7);
border: 1px solid oklch(0.6 0.14 295 / 0.6);
box-shadow: inset 0 1px 0 rgba(240, 180, 255, 0.1), 0 0 14px oklch(0.55 0.14 295 / 0.2);
padding: 0.45rem 0.9rem;
line-height: 1.4;
border-radius: 6px;
cursor: pointer;
transition:
background 180ms,
border-color 180ms,
box-shadow 180ms,
color 180ms;
}
@media (hover: hover) {
.btn-randomize-all:hover {
color: #fff;
background: oklch(0.34 0.14 295 / 0.85);
border-color: oklch(0.7 0.16 295 / 0.8);
box-shadow: inset 0 1px 0 rgba(240, 180, 255, 0.14), 0 0 20px oklch(0.6 0.16 295 / 0.3);
}
}
.btn-randomize-all:active {
transform: translateY(1px);
}
.lib-page {
min-height: 100vh;
position: relative;
overflow: hidden;
background:
radial-gradient(
1100px 700px at 18% 0%,
oklch(0.28 0.06 50) 0%,
oklch(0.14 0.03 30) 55%,
#0a0604 100%);
color: #d8cfc0;
}
.lib-lamp-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
1100px 770px at 15% 6%,
rgba(232, 168, 64, 0.18),
transparent 60%);
}
.lib-paper-grain {
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.35;
background-image: url("data:image/svg+xml;utf8,");
}
.lib-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
120% 100% at 50% 50%,
transparent 50%,
rgba(0, 0, 0, 0.6) 100%);
}
@keyframes lib-mote-drift {
0% {
transform: translate(0, 0);
opacity: 0;
}
15% {
opacity: 1;
}
50% {
transform: translate(20px, -30px);
}
85% {
opacity: 1;
}
100% {
transform: translate(40px, -60px);
opacity: 0;
}
}
.lib-dust-mote {
position: absolute;
border-radius: 50%;
background: #f0e4c8;
box-shadow: 0 0 4px rgba(255, 235, 180, 0.6);
opacity: 0.22;
animation: lib-mote-drift linear infinite;
pointer-events: none;
}
.lib-inner {
position: relative;
max-width: 1240px;
margin: 0 auto;
padding: 40px 28px 80px;
}
.lib-lintel {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin-bottom: 36px;
}
.lib-lintel-eyebrow {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 10px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: oklch(0.55 0.02 70);
margin-bottom: 6px;
}
.lib-lintel-title {
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 700;
font-size: clamp(28px, 4vw, 42px);
letter-spacing: 0.32em;
text-transform: uppercase;
color: #e6dcc4;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 24px rgba(232, 168, 64, 0.12);
margin: 0;
}
.lib-lintel-sub {
font-family:
"Iowan Old Style",
"Palatino Linotype",
Georgia,
serif;
font-style: italic;
font-size: 15px;
color: oklch(0.6 0.04 60);
margin-top: 10px;
}
.lib-lintel-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 28px 13px 22px;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
text-decoration: none;
color: oklch(0.88 0.06 220);
background: oklch(0.3 0.1 220 / 0.8);
border: 1px solid oklch(0.6 0.1 220 / 0.55);
box-shadow: inset 0 1px 0 rgba(180, 210, 240, 0.1), 0 4px 16px rgba(0, 0, 0, 0.65);
min-width: 200px;
flex-shrink: 0;
transition:
color 180ms,
border-color 180ms,
background 180ms,
box-shadow 180ms;
}
.lib-lintel-btn:hover {
color: #fff;
border-color: oklch(0.7 0.14 220 / 0.85);
background: oklch(0.38 0.12 220 / 0.9);
box-shadow:
0 6px 22px rgba(0, 0, 0, 0.65),
0 0 20px oklch(0.55 0.14 220 / 0.3),
inset 0 1px 0 rgba(180, 210, 240, 0.12);
text-decoration: none;
}
.lib-lintel-btn__sigil {
font-size: 14px;
line-height: 1;
color: oklch(0.65 0.09 220 / 0.85);
transition: color 180ms;
}
.lib-lintel-btn:hover .lib-lintel-btn__sigil {
color: oklch(0.85 0.1 220);
}
.lib-hours-plaque {
padding: 12px 18px;
border: 1px solid rgba(184, 156, 106, 0.32);
background: rgba(20, 15, 10, 0.55);
text-align: right;
flex-shrink: 0;
}
.lib-hours-plaque-label {
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: oklch(0.55 0.02 70);
}
.lib-hours-plaque-body {
font-family:
"Iowan Old Style",
Palatino,
Georgia,
serif;
font-style: italic;
font-size: 13px;
color: #c8bfa8;
margin-top: 5px;
line-height: 1.3;
}
.lib-shelf-section {
position: relative;
margin-bottom: 44px;
}
.lib-marble-band {
position: relative;
height: 76px;
display: flex;
align-items: center;
padding: 0 24px;
gap: 22px;
overflow: hidden;
border: 1px solid rgba(184, 156, 106, 0.35);
box-shadow:
inset 0 1px 0 rgba(255, 235, 200, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
0 6px 18px rgba(0, 0, 0, 0.7);
}
.lib-marble-veins {
position: absolute;
inset: 0;
mix-blend-mode: screen;
opacity: 0.55;
pointer-events: none;
}
.lib-marble-numeral {
position: relative;
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 700;
font-size: 38px;
letter-spacing: 0.04em;
line-height: 1;
background:
linear-gradient(
180deg,
#f8e08c 0%,
#d8a040 45%,
#f8e08c 55%,
#b88828 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
min-width: 52px;
flex-shrink: 0;
}
.lib-marble-rule {
position: relative;
width: 1px;
align-self: stretch;
flex-shrink: 0;
background:
linear-gradient(
180deg,
transparent 10%,
rgba(216, 160, 64, 0.6) 50%,
transparent 90%);
}
.lib-marble-text {
position: relative;
flex: 1;
min-width: 0;
}
.lib-marble-band .lib-section-title {
font-family:
"Iowan Old Style",
Palatino,
Georgia,
serif;
font-weight: 600;
font-style: normal;
font-size: 19px;
color: #f4ead0;
line-height: 1.15;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
margin: 0;
}
.lib-marble-band .lib-section-sub {
font-family:
"Iowan Old Style",
Palatino,
Georgia,
serif;
font-style: italic;
font-size: 12.5px;
color: rgba(244, 234, 208, 0.78);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
margin-top: 4px;
line-height: 1.3;
}
.lib-marble-count {
position: relative;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
color: rgba(244, 234, 208, 0.72);
text-transform: uppercase;
min-width: 58px;
text-align: right;
flex-shrink: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.lib-marble-band .lib-brass-tag {
position: relative;
}
.lib-tag-group {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
flex-shrink: 0;
}
.lib-brass-tag {
display: inline-flex;
align-items: center;
padding: 5px 12px;
background:
linear-gradient(
180deg,
#f8e08c 0%,
#d8a040 50%,
#b88828 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 -1px 2px rgba(0, 0, 0, 0.4),
0 2px 6px rgba(0, 0, 0, 0.65);
}
.lib-brass-tag-label {
font-family: "JetBrains Mono", monospace;
font-weight: 700;
font-size: 9.5px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #1a0e04;
}
.lib-tag-count {
font-family: "JetBrains Mono", monospace;
font-size: 8.5px;
letter-spacing: 0.2em;
color: oklch(0.55 0.03 70);
text-transform: uppercase;
}
.lib-card-bay {
display: flex;
gap: 22px;
overflow-x: auto;
overflow-y: visible;
padding: 14px 0 22px;
scrollbar-width: thin;
scrollbar-color: rgba(184, 156, 106, 0.4) transparent;
background:
linear-gradient(
180deg,
transparent 0%,
transparent 80%,
rgba(0, 0, 0, 0.35) 95%,
transparent 100%);
}
.lib-card-bay .library-card,
.deck-card-bay .library-card {
border: none;
border-radius: 0;
background: none;
box-shadow: none;
transition: none;
}
.lib-card-bay .library-card:hover,
.deck-card-bay .library-card:hover {
transform: none;
box-shadow: none;
border-color: transparent;
}
.lib-card-slot {
position: relative;
flex-shrink: 0;
transform: translateY(0);
transition: transform 280ms cubic-bezier(.22, .7, .3, 1), filter 280ms;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));
}
.lib-card-slot:hover {
transform: translateY(-10px);
filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 24px rgba(232, 168, 64, 0.18));
}
.lib-price-tag {
position: absolute;
top: -6px;
right: -8px;
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.18em;
padding: 3px 7px;
background: oklch(0.75 0.06 65);
color: #1a0e04;
font-weight: 700;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
z-index: 10;
pointer-events: none;
}
.lib-empty-slot {
width: 240px;
height: 360px;
flex-shrink: 0;
border: 1.5px dashed rgba(184, 156, 106, 0.35);
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.25);
}
.lib-empty-text {
font-family:
"Iowan Old Style",
Palatino,
Georgia,
serif;
font-style: italic;
font-size: 14px;
color: oklch(0.55 0.025 75);
line-height: 1.5;
text-align: center;
}
.lib-empty-label {
font-family: "JetBrains Mono", monospace;
font-size: 8.5px;
letter-spacing: 0.25em;
color: oklch(0.42 0.02 70);
margin-top: 12px;
text-transform: uppercase;
}
.lib-shelf-plank {
position: relative;
height: 18px;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(
180deg,
#5a3a1c 0%,
#3a2410 60%,
#1a0e04 100%);
background-size: 400px 80px, 100% 100%;
background-blend-mode: multiply, normal;
box-shadow:
inset 0 1px 0 rgba(180, 120, 40, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.7),
0 4px 14px rgba(0, 0, 0, 0.7);
}
.lib-pin {
position: absolute;
top: -3px;
width: 6px;
height: 6px;
border-radius: 50%;
background:
radial-gradient(
circle at 30% 30%,
#c8a060,
#6a4818);
box-shadow: inset 0 1px 0 rgba(255, 235, 200, 0.3), 0 1px 1px rgba(0, 0, 0, 0.7);
}
.lib-pin--left {
left: 32px;
}
.lib-pin--right {
right: 32px;
}
.lib-legend {
position: relative;
margin-top: 36px;
padding: 18px 28px 20px;
background:
radial-gradient(
180% 100% at 50% 0%,
#d8c3a0 0%,
#b89870 50%,
#8a6a44 100%);
box-shadow:
inset 0 0 0 1px rgba(60, 40, 20, 0.4),
inset 0 1px 0 rgba(255, 235, 200, 0.4),
0 6px 18px rgba(0, 0, 0, 0.7);
max-width: 580px;
margin-left: auto;
margin-right: auto;
}
.lib-legend::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: multiply;
opacity: 0.6;
background-image: url("data:image/svg+xml;utf8,");
}
.lib-legend-head {
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 700;
font-size: 10.5px;
letter-spacing: 0.36em;
color: #3a2410;
text-transform: uppercase;
text-align: center;
margin-bottom: 14px;
position: relative;
}
.lib-legend-rows {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
}
.lib-legend-row {
display: flex;
align-items: center;
gap: 10px;
}
.lib-legend-pip {
width: 18px;
height: 18px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.lib-legend-label {
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.22em;
color: #2a1a08;
text-transform: uppercase;
min-width: 110px;
}
.lib-legend-body {
font-family:
"Iowan Old Style",
Palatino,
Georgia,
serif;
font-style: italic;
font-size: 11.5px;
color: #5a3818;
}
.lib-footer {
margin-top: 28px;
text-align: center;
font-family:
"Iowan Old Style",
Palatino,
Georgia,
serif;
font-style: italic;
font-size: 12px;
color: oklch(0.45 0.02 70);
}
.deck-page {
min-height: 100vh;
position: relative;
overflow: hidden;
background:
radial-gradient(
1100px 700px at 75% 20%,
oklch(0.28 0.05 225) 0%,
oklch(0.14 0.03 230) 55%,
#06080c 100%);
color: #d8e0e8;
}
.deck-grid-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(
0deg,
transparent 0 24px,
rgba(180, 200, 220, 0.065) 24px 25px),
repeating-linear-gradient(
90deg,
transparent 0 24px,
rgba(180, 200, 220, 0.065) 24px 25px),
repeating-linear-gradient(
0deg,
transparent 0 120px,
rgba(180, 200, 220, 0.11) 120px 121px),
repeating-linear-gradient(
90deg,
transparent 0 120px,
rgba(180, 200, 220, 0.11) 120px 121px);
}
.deck-lamp-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
1000px 700px at 78% 4%,
rgba(232, 168, 64, 0.16),
transparent 60%);
}
.deck-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
120% 100% at 50% 50%,
transparent 50%,
rgba(0, 0, 0, 0.65) 100%);
}
.deck-inner {
position: relative;
max-width: 1240px;
margin: 0 auto;
padding: 40px 28px 100px;
}
.deck-title-block {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
margin-bottom: 28px;
}
.deck-title-left {
flex: 1;
}
.deck-sheet-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: oklch(0.55 0.06 220);
margin-bottom: 6px;
}
.deck-title {
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 700;
font-size: clamp(32px, 4.5vw, 54px);
letter-spacing: 0.32em;
text-transform: uppercase;
color: #e6ecf2;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 24px rgba(140, 180, 220, 0.15);
margin: 0;
}
.deck-subtitle {
font-family:
"Iowan Old Style",
Palatino,
Georgia,
serif;
font-style: italic;
font-size: 15px;
color: oklch(0.65 0.06 220);
margin-top: 10px;
max-width: 540px;
margin-bottom: 0;
}
.deck-blueprint-annotation {
position: absolute;
top: 6px;
left: -2px;
pointer-events: none;
z-index: 0;
mask-image:
linear-gradient(
to bottom,
black 0%,
black 55%,
transparent 100%);
-webkit-mask-image:
linear-gradient(
to bottom,
black 0%,
black 55%,
transparent 100%);
}
.deck-eng-plate {
display: grid;
grid-template-columns: auto auto;
width: fit-content;
background: rgba(12, 22, 32, 0.55);
border: 1px solid oklch(0.55 0.07 220 / 0.5);
box-shadow: inset 0 0 0 1px rgba(180, 210, 240, 0.04);
font-family: "JetBrains Mono", monospace;
}
.deck-eng-key {
padding: 3px 9px;
font-size: 8px;
letter-spacing: 0.22em;
color: oklch(0.5 0.06 220);
text-transform: uppercase;
border-right: 1px solid oklch(0.55 0.07 220 / 0.4);
}
.deck-eng-val {
padding: 3px 9px;
font-size: 8px;
letter-spacing: 0.12em;
font-weight: 700;
color: oklch(0.68 0.07 220);
text-transform: uppercase;
}
.deck-eng-key:not(:nth-last-child(-n+2)),
.deck-eng-val:not(:last-child) {
border-bottom: 1px solid oklch(0.55 0.07 220 / 0.35);
}
.deck-curator-strip {
display: flex;
gap: 32px;
align-items: center;
margin-bottom: 28px;
padding: 14px 22px;
background: rgba(20, 30, 42, 0.55);
border: 1px solid oklch(0.55 0.06 220 / 0.3);
box-shadow: inset 0 1px 0 rgba(180, 200, 220, 0.06), 0 4px 12px rgba(0, 0, 0, 0.5);
flex-wrap: wrap;
gap: 16px;
}
.deck-key-label {
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: oklch(0.7 0.08 220);
padding-right: 22px;
border-right: 1px solid oklch(0.55 0.06 220 / 0.3);
white-space: nowrap;
}
.deck-stat {
display: flex;
align-items: baseline;
gap: 8px;
}
.deck-stat-n {
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 700;
font-size: 26px;
color: oklch(0.78 0.1 220);
font-variant-numeric: tabular-nums;
text-shadow: 0 0 14px oklch(0.78 0.1 220 / 0.33);
line-height: 1;
}
.deck-stat-label {
font-family:
"Iowan Old Style",
Palatino,
Georgia,
serif;
font-style: italic;
font-size: 12px;
color: oklch(0.65 0.06 220);
}
.deck-curator-actions {
margin-left: auto;
display: flex;
gap: 0.5rem;
align-items: center;
}
.deck-stack-section {
position: relative;
margin-bottom: 50px;
}
.deck-stack-header {
display: inline-flex;
align-items: stretch;
margin-bottom: 16px;
background: rgba(20, 30, 42, 0.7);
border: 1px solid oklch(0.55 0.06 220 / 0.4);
box-shadow: inset 0 0 0 1px rgba(180, 200, 220, 0.08), 0 4px 14px rgba(0, 0, 0, 0.5);
}
.deck-stack-code {
padding: 8px 14px;
border-right: 1px solid oklch(0.55 0.06 220 / 0.4);
font-family: "JetBrains Mono", monospace;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.18em;
color: oklch(0.78 0.08 220);
display: flex;
align-items: center;
font-variant-numeric: tabular-nums;
}
.deck-stack-info {
padding: 8px 18px;
display: flex;
flex-direction: column;
justify-content: center;
}
.deck-stack-name {
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 600;
font-size: 15px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #e0e6ec;
}
.deck-stack-sub {
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.18em;
color: oklch(0.55 0.05 220);
margin-top: 2px;
text-transform: uppercase;
}
.deck-card-bay {
display: flex;
gap: 22px;
overflow-x: auto;
overflow-y: visible;
padding: 24px 0 32px;
scrollbar-width: thin;
scrollbar-color: rgba(180, 200, 220, 0.3) transparent;
}
.deck-card-slot {
position: relative;
flex-shrink: 0;
transform: translateY(0);
transition: transform 280ms cubic-bezier(.22, .7, .3, 1), filter 280ms;
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.65));
}
.deck-card-slot:hover {
transform: translateY(-8px);
filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 24px rgba(180, 200, 220, 0.18));
}
.deck-card-serial {
position: absolute;
bottom: -18px;
left: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.22em;
color: oklch(0.6 0.06 220);
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
pointer-events: none;
}
.deck-empty {
font-style: italic;
color: oklch(0.6 0.04 220);
padding: 2rem 0;
}
.deck-footer {
margin-top: 28px;
padding-top: 12px;
border-top: 1px solid oklch(0.55 0.06 220 / 0.3);
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: oklch(0.5 0.05 220);
display: flex;
justify-content: space-between;
}
@media (max-width: 700px) {
.lib-lintel {
flex-direction: column;
align-items: flex-start;
}
.lib-hours-plaque {
display: none;
}
.deck-title-block {
flex-direction: column;
}
.deck-title-actions {
flex-direction: row;
flex-wrap: wrap;
}
.deck-action-link {
min-width: 0;
flex: 1;
justify-content: center;
}
.deck-curator-strip {
flex-wrap: wrap;
gap: 12px;
}
.deck-curator-actions {
margin-left: 0;
}
}
.lib-suit-bar {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-top: 48px;
overflow: hidden;
border-radius: 0 0 4px 4px;
}
.lib-suit-cell {
position: relative;
padding: 2rem 1rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: rgba(0, 0, 0, 0.55);
border-top: 3px solid var(--suit-pip);
}
.lib-suit-cell::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
80% 100% at 50% 100%,
color-mix(in oklch, var(--suit-pip) 22%, transparent) 0%,
transparent 70%);
pointer-events: none;
}
.lib-suit-cell::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.5;
pointer-events: none;
}
.lib-suit-word {
position: relative;
font-family:
"Cinzel",
Georgia,
serif;
font-weight: 700;
font-size: clamp(11px, 1.2vw, 15px);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--suit-pip);
text-shadow: 0 0 18px color-mix(in oklch, var(--suit-pip) 50%, transparent), 0 1px 0 rgba(0, 0, 0, 0.8);
z-index: 1;
}
.deck-card-slot--draft .library-card {
opacity: 0.6;
}
.deck-card-slot--draft .library-card::after {
content: "DRAFT";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-18deg);
font-family: "JetBrains Mono", monospace;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.22em;
color: oklch(0.75 0.04 220);
border: 2.5px solid oklch(0.75 0.04 220);
padding: 0.2em 0.5em;
border-radius: 3px;
pointer-events: none;
z-index: 20;
}
.deck-zone--instances .draft-instance-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.4rem 0;
}
.draft-instance-badge {
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
padding: 0.15em 0.5em;
border-radius: 3px;
}
.draft-instance-badge--draft {
color: oklch(0.75 0.04 220);
border: 1.5px solid oklch(0.75 0.04 220);
}
.draft-instance-badge--live {
color: oklch(0.72 0.14 130);
border: 1.5px solid oklch(0.72 0.14 130);
}
/* app/javascript/stylesheets/_auth.css */
main > h2:first-child,
main > h2:first-of-type {
max-width: 400px;
margin: 2rem auto 1.5rem;
font-size: 1.5rem;
font-weight: 600;
text-align: center;
}
main > form:not([class]),
main > form[action*=sign_in],
main > form[action*=password],
main > form[action*=registration] {
max-width: 400px;
margin: 0 auto;
padding: 1.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
}
main > form:not([class]) div,
main > form[action*=sign_in] div,
main > form[action*=password] div,
main > form[action*=registration] div {
margin-bottom: 1rem;
}
main > form:not([class]) label,
main > form[action*=sign_in] label,
main > form[action*=password] label,
main > form[action*=registration] label {
display: block;
font-weight: 600;
margin-bottom: 0.4rem;
color: var(--text);
}
main > form:not([class]) input[type=text],
main > form:not([class]) input[type=email],
main > form:not([class]) input[type=password],
main > form[action*=sign_in] input[type=email],
main > form[action*=sign_in] input[type=password],
main > form[action*=password] input[type=email],
main > form[action*=registration] input[type=email],
main > form[action*=registration] input[type=password] {
width: 100%;
padding: 0.5rem 0.75rem;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 1rem;
font-family:
system-ui,
-apple-system,
sans-serif;
box-sizing: border-box;
}
main > form:not([class]) input:focus,
main > form[action*=sign_in] input:focus,
main > form[action*=password] input:focus,
main > form[action*=registration] input:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
}
main > form:not([class]) input[type=submit],
main > form[action*=sign_in] input[type=submit],
main > form[action*=password] input[type=submit],
main > form[action*=registration] input[type=submit] {
width: 100%;
min-height: 44px;
padding: 0.6rem 0.75rem;
border: 1px solid var(--accent);
border-radius: 6px;
background: var(--accent);
color: #fff;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
margin-top: 0.5rem;
}
main > form:not([class]) input[type=checkbox] {
margin-right: 0.4rem;
}
main > p:has(a),
main > .links {
max-width: 400px;
margin: 1rem auto;
text-align: center;
}
main > p:has(a) a,
main > .links a {
color: var(--accent);
text-decoration: none;
font-size: 0.9rem;
}
main > p:has(a) a:hover,
main > .links a:hover {
text-decoration: underline;
}
#flash_alert,
#flash_notice,
main > p.alert,
main > p.notice {
max-width: 400px;
margin: 1rem auto;
padding: 0.6rem 1rem;
border-radius: 6px;
font-size: 0.9rem;
text-align: center;
}
main > p.alert {
background: var(--error-bg);
border: 1px solid var(--error-border);
color: var(--text);
}
main > p.notice {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
}
.card-tile.sorcery-consumed {
animation: sorcery-exit 400ms ease-out forwards;
}
@keyframes sorcery-exit {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.95);
}
}
@keyframes upkeep-pulse {
0% {
filter: brightness(1);
box-shadow: inset 0 0 0 1px transparent;
}
10% {
filter: brightness(1.35);
box-shadow: inset 0 0 10px 2px rgba(77, 232, 194, 0.45);
}
28% {
filter: brightness(1);
box-shadow: inset 0 0 0 1px transparent;
}
40% {
filter: brightness(1.30);
box-shadow: inset 0 0 10px 2px rgba(77, 232, 194, 0.42);
}
58% {
filter: brightness(1);
box-shadow: inset 0 0 0 1px transparent;
}
70% {
filter: brightness(1.25);
box-shadow: inset 0 0 9px 2px rgba(77, 232, 194, 0.39);
}
100% {
filter: brightness(1);
box-shadow: inset 0 0 0 1px transparent;
}
}
@keyframes counter-badge-teal-pulse {
0% {
outline: 2px solid transparent;
box-shadow: 0 0 0 0 rgba(77, 232, 194, 0);
filter: brightness(1);
}
10% {
outline: 2px solid rgba(77, 232, 194, 0.9);
box-shadow: 0 0 14px 5px rgba(77, 232, 194, 0.55);
filter: brightness(1.6);
}
28% {
outline: 2px solid transparent;
box-shadow: 0 0 0 0 rgba(77, 232, 194, 0);
filter: brightness(1);
}
40% {
outline: 2px solid rgba(77, 232, 194, 0.75);
box-shadow: 0 0 10px 4px rgba(77, 232, 194, 0.45);
filter: brightness(1.45);
}
58% {
outline: 2px solid transparent;
box-shadow: 0 0 0 0 rgba(77, 232, 194, 0);
filter: brightness(1);
}
70% {
outline: 2px solid rgba(77, 232, 194, 0.6);
box-shadow: 0 0 8px 3px rgba(77, 232, 194, 0.4);
filter: brightness(1.35);
}
100% {
outline: 2px solid transparent;
box-shadow: 0 0 0 0 rgba(77, 232, 194, 0);
filter: brightness(1);
}
}
.card-tile.upkeep-pulsing {
animation: upkeep-pulse 1.2s ease-out forwards;
}
.card-tile.upkeep-pulsing [data-counter-box],
[data-counter-box].counter-badge-pulsing {
animation: counter-badge-teal-pulse 1.2s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
.card-tile.upkeep-pulsing {
animation: none;
}
.card-tile.upkeep-pulsing [data-counter-box],
[data-counter-box].counter-badge-pulsing {
animation: none;
}
}
/* app/javascript/stylesheets/_login.css */
.outside {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
isolation: isolate;
background: #080a0e;
color: #c0cfd8;
z-index: 0;
--p-glow: #e8a840;
--p-glow-hi: #ffc870;
--p-glow-deep: #9c6818;
--p-rune: #e8a840;
--torch-i: 0.95;
transition:
transform 320ms cubic-bezier(.22, .7, .3, 1),
opacity 800ms ease,
filter 800ms ease;
}
.outside--shake {
animation: wall-shake 480ms cubic-bezier(.36, .07, .19, .97);
}
@keyframes wall-shake {
0%, 100% {
transform: translate3d(0, 0, 0);
}
20% {
transform: translate3d(5px, 1px, 0);
}
40% {
transform: translate3d(-4px, -1px, 0);
}
60% {
transform: translate3d(3px, 0, 0);
}
80% {
transform: translate3d(-2px, 1px, 0);
}
}
.outside--open {
filter: brightness(1.6);
opacity: 0.2;
}
.outside .wall {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -10;
}
.outside .torch-wash {
display: none;
}
@keyframes torch-flicker {
0% {
opacity: 0.92;
filter: brightness(1.0);
}
35% {
opacity: 1.0;
filter: brightness(1.06);
}
60% {
opacity: 0.95;
filter: brightness(0.98);
}
100% {
opacity: 0.97;
filter: brightness(1.03);
}
}
@media (prefers-reduced-motion: reduce) {
.outside .torch-wash {
animation: none;
}
}
.outside .cold-shadow {
position: absolute;
inset: 0;
z-index: -7;
pointer-events: none;
background:
radial-gradient(
70% 80% at 90% 95%,
rgba(8, 14, 24, 0.85) 0%,
rgba(8, 14, 24, 0.55) 25%,
rgba(8, 14, 24, 0.20) 50%,
transparent 75%);
}
.outside .door-backlight {
fill: none;
stroke: var(--p-glow);
stroke-width: 0.35;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.55;
mix-blend-mode: screen;
filter: drop-shadow(0 0 4px var(--p-glow)) drop-shadow(0 0 10px color-mix(in oklab, var(--p-glow) 55%, transparent)) drop-shadow(0 0 22px color-mix(in oklab, var(--p-glow) 28%, transparent));
will-change: opacity;
animation: door-breathe 7s ease-in-out 3 alternate forwards;
}
@keyframes door-breathe {
0% {
opacity: 0.40;
}
100% {
opacity: 0.68;
}
}
@media (prefers-reduced-motion: reduce) {
.outside .door-backlight {
animation: none;
}
}
.outside .door-hardware {
fill: none;
stroke: var(--p-glow);
stroke-width: 0.18;
stroke-linecap: square;
stroke-linejoin: miter;
opacity: 0.72;
filter: drop-shadow(0 0 1px var(--p-glow)) drop-shadow(0 0 3px color-mix(in oklab, var(--p-glow) 40%, transparent));
}
.outside .door-hardware circle {
fill: var(--p-glow);
stroke: none;
}
.outside .door-hardware .door-studs circle {
fill: var(--p-glow);
fill-opacity: 0.85;
filter: drop-shadow(0 0.05px 0 rgba(0, 0, 0, 0.85));
}
.outside .door-runes path {
fill: none;
stroke: var(--p-rune);
stroke-width: 1.4;
stroke-linecap: square;
stroke-linejoin: miter;
}
.outside .door-runes > g {
opacity: 0.32;
filter: drop-shadow(0 0 0.4px var(--p-rune)) drop-shadow(0 0 1.4px color-mix(in oklab, var(--p-rune) 35%, transparent));
}
.outside .rune-graffiti path {
fill: none;
stroke: rgba(192, 207, 216, 0.32);
stroke-width: 0.22;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 240ms ease;
}
.outside:hover .rune-graffiti path {
stroke: color-mix(in oklab, var(--p-rune) 55%, rgba(192, 207, 216, 0.6));
}
.outside .carvings {
position: relative;
z-index: 1;
width: min(620px, 92vw);
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5vh 16px 8vh;
gap: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.outside .carvings-form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
margin: 0;
gap: 0;
}
.outside .carving-title {
position: relative;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(56px, 9vw, 104px);
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0;
line-height: 1;
user-select: none;
text-indent: 0.16em;
display: inline-block;
}
.outside .carving-title .num {
font-size: 0.78em;
letter-spacing: 0;
margin-left: 0.18em;
position: relative;
top: -0.04em;
}
.outside .carving-title-shadow,
.outside .carving-title-face {
display: inline-block;
}
.outside .carving-title-shadow {
display: none;
}
.outside .carving-title-face {
position: relative;
z-index: 1;
color: transparent;
background:
linear-gradient(
175deg,
#bab6ac 0%,
#928e84 42%,
#6c6860 78%,
#4c4840 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 -1px 0 rgba(200, 196, 188, 0.55),
0 -2px 3px rgba(0, 0, 0, 0.72),
0 -4px 6px rgba(0, 0, 0, 0.36),
0 1px 0 rgba(0, 0, 0, 0.65),
0 2px 4px rgba(0, 0, 0, 0.38);
}
.outside .carving-title-face .num {
color: transparent;
background:
linear-gradient(
175deg,
#d0ccc2 0%,
#a8a498 45%,
#807c72 80%,
#585450 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 -1px 0 rgba(216, 212, 204, 0.50),
0 -2px 3px rgba(0, 0, 0, 0.70),
0 -4px 6px rgba(0, 0, 0, 0.34),
0 1px 0 rgba(0, 0, 0, 0.60),
0 2px 4px rgba(0, 0, 0, 0.35);
}
.outside .carving-subtitle {
position: relative;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(14px, 1.5vw, 18px);
margin: 6px 0 20px;
text-align: right;
align-self: flex-end;
line-height: 1.4;
letter-spacing: 0.02em;
user-select: none;
}
.outside .carving-subtitle-shadow,
.outside .carving-subtitle-face {
display: block;
}
.outside .carving-subtitle-shadow {
position: absolute;
left: 0;
right: 0;
top: 0;
color: #050402;
text-shadow:
1px 1px 0 #050402,
2px 2px 1px rgba(0, 0, 0, 0.7),
3px 3px 3px rgba(0, 0, 0, 0.5);
-webkit-text-stroke: 0.4px #0a0806;
z-index: 0;
}
.outside .carving-subtitle-face {
position: relative;
z-index: 1;
color: transparent;
background:
linear-gradient(
180deg,
#a8b0b8 0%,
#6a7280 60%,
#2e333a 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 -0.5px 0 rgba(232, 220, 180, 0.4), 0 0.5px 0 rgba(0, 0, 0, 0.35);
}
.outside .carving-ambient {
position: relative;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(10px, 1.1vw, 13px);
margin: 0.25rem 0 0.5rem;
text-align: center;
line-height: 1.4;
letter-spacing: 0.08em;
opacity: 0.55;
user-select: none;
}
.outside .carving-ambient-shadow,
.outside .carving-ambient-face {
display: block;
}
.outside .carving-ambient-shadow {
position: absolute;
left: 0;
right: 0;
top: 0;
color: #050402;
text-shadow:
1px 1px 0 #050402,
2px 2px 1px rgba(0, 0, 0, 0.7),
3px 3px 3px rgba(0, 0, 0, 0.5);
-webkit-text-stroke: 0.4px #0a0806;
z-index: 0;
}
.outside .carving-ambient-face {
position: relative;
z-index: 1;
color: transparent;
background:
linear-gradient(
180deg,
#8a9098 0%,
#4a5260 60%,
#1e2328 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow: 0 -0.5px 0 rgba(232, 220, 180, 0.3), 0 0.5px 0 rgba(0, 0, 0, 0.35);
}
.outside .rune-ring {
width: min(320px, 58vw);
height: auto;
display: block;
margin: 0 0 -8px;
overflow: visible;
}
.outside .runes {
fill: none;
stroke: var(--p-rune);
stroke-width: 1.4;
stroke-linecap: square;
stroke-linejoin: miter;
}
.outside .rune {
filter: drop-shadow(0 0 4px var(--p-rune)) drop-shadow(0 0 10px color-mix(in oklab, var(--p-rune) 35%, transparent));
opacity: var(--r-dim, 1);
animation: rune-flicker 5.4s ease-in-out 2 alternate forwards;
}
@keyframes rune-flicker {
0%, 88% {
opacity: var(--r-dim, 1);
}
92% {
opacity: calc(var(--r-dim, 1) * 0.62);
}
96% {
opacity: calc(var(--r-dim, 1) * 1.08);
}
100% {
opacity: calc(var(--r-dim, 1) * 0.94);
}
}
@media (prefers-reduced-motion: reduce) {
.outside .rune {
animation: none;
}
}
.outside .carving-call {
position: relative;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(13px, 1.3vw, 15px);
letter-spacing: 0.32em;
text-transform: uppercase;
margin: 8px 0 28px;
text-align: center;
user-select: none;
text-indent: 0.32em;
}
.outside .carving-call-shadow,
.outside .carving-call-face {
display: block;
}
.outside .carving-call-shadow {
position: absolute;
left: 0;
right: 0;
top: 0;
color: #050402;
text-shadow: 1px 1px 0 #050402, 2px 2px 1px rgba(0, 0, 0, 0.65);
-webkit-text-stroke: 0.4px #0a0806;
z-index: 0;
}
.outside .carving-call-face {
position: relative;
z-index: 1;
color: transparent;
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--p-glow-hi) 70%, #b8c0c8) 0%,
color-mix(in oklab, var(--p-glow) 80%, #707880) 60%,
color-mix(in oklab, var(--p-glow-deep) 80%, #2e333a) 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 0 8px color-mix(in oklab, var(--p-glow) 35%, transparent),
0 -0.5px 0 color-mix(in oklab, var(--p-glow-hi) 50%, transparent),
0 0.5px 0 rgba(0, 0, 0, 0.4);
}
.outside .carved-fields {
width: min(440px, 90%);
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 32px;
margin-bottom: 28px;
}
.outside .carved-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.outside .carved-field-lbl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(192, 207, 216, 0.5);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.outside .carved-field-channel {
display: block;
position: relative;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.35) 60%,
rgba(0, 0, 0, 0.15) 100%);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.85),
inset 0 1px 0 rgba(0, 0, 0, 0.95),
inset 0 -1px 0 rgba(232, 220, 180, 0.06),
0 1px 0 rgba(232, 220, 180, 0.04);
border-bottom: 1px solid rgba(232, 220, 180, 0.10);
border-radius: 0;
transition: box-shadow 220ms ease, border-color 220ms ease;
}
.outside .carved-field-channel::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: rgba(0, 0, 0, 0.95);
pointer-events: none;
}
.outside .carved-field-ipt,
.outside input[type=email].carved-field-ipt,
.outside input[type=password].carved-field-ipt {
width: 100%;
background: transparent;
border: 0;
border-radius: 0;
padding: 11px 14px;
font-family: var(--font-sans);
font-size: 14px;
color: #c0cfd8;
outline: none;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
box-sizing: border-box;
}
.outside .carved-field-ipt::placeholder {
color: rgba(192, 207, 216, 0.32);
font-style: italic;
}
.outside .carved-field-ipt:disabled {
opacity: 0.5;
}
.outside .carved-field:focus-within .carved-field-channel {
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.85),
inset 0 1px 0 rgba(0, 0, 0, 0.95),
0 0 0 1px color-mix(in oklab, var(--p-glow) 30%, transparent),
0 0 16px color-mix(in oklab, var(--p-glow) 22%, transparent);
border-bottom-color: color-mix(in oklab, var(--p-glow) 50%, transparent);
}
.outside .carved-field-ipt:-webkit-autofill,
.outside .carved-field-ipt:-webkit-autofill:focus {
-webkit-text-fill-color: #c0cfd8;
-webkit-box-shadow: 0 0 0 1000px transparent inset;
transition: background-color 99999s ease-in-out 0s;
caret-color: #c0cfd8;
}
.outside .latch-plaque {
position: relative;
display: inline-block;
margin: 12px 0 0;
padding: 14px 38px 16px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.85);
border-radius: 0;
background:
linear-gradient(
180deg,
rgba(56, 64, 72, 0.92) 0%,
rgba(36, 42, 48, 0.92) 45%,
rgba(20, 24, 30, 0.92) 100%);
box-shadow:
inset 0 1px 0 rgba(232, 220, 180, 0.18),
inset 1px 0 0 rgba(232, 220, 180, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.85),
inset -1px 0 0 rgba(0, 0, 0, 0.55),
0 2px 4px rgba(0, 0, 0, 0.6),
0 5px 12px rgba(0, 0, 0, 0.42);
transition:
transform 120ms ease,
filter 200ms ease,
box-shadow 120ms ease;
min-height: auto;
width: auto;
-webkit-tap-highlight-color: transparent;
}
.outside .latch-plaque-inner {
position: relative;
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(10px, 1.1vw, 13px);
letter-spacing: 0.26em;
text-transform: uppercase;
text-indent: 0.22em;
line-height: 1;
user-select: none;
}
.outside .latch-plaque-shadow,
.outside .latch-plaque-face {
display: inline-block;
}
.outside .latch-plaque-shadow {
position: absolute;
left: 0;
top: 0;
width: 100%;
color: #050402;
text-shadow:
1px 1px 0 #050402,
2px 2px 0 #050402,
3px 3px 0 #050402,
4px 4px 1px rgba(0, 0, 0, 0.7),
5px 5px 4px rgba(0, 0, 0, 0.6);
-webkit-text-stroke: 0.7px #0a0806;
z-index: 0;
}
.outside .latch-plaque-face {
position: relative;
z-index: 1;
color: transparent;
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--p-glow-hi) 50%, #b8c0c8) 0%,
color-mix(in oklab, var(--p-glow) 60%, #707880) 50%,
color-mix(in oklab, var(--p-glow-deep) 60%, #2e333a) 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 0 12px color-mix(in oklab, var(--p-glow) 25%, transparent),
0 -1px 0 color-mix(in oklab, var(--p-glow-hi) 50%, transparent),
0 1px 0 rgba(0, 0, 0, 0.5);
}
.outside .latch-plaque:hover:not(:disabled) {
filter: brightness(1.08) drop-shadow(0 0 14px color-mix(in oklab, var(--p-glow) 30%, transparent));
}
.outside .latch-plaque:active:not(:disabled) {
transform: translateY(2px);
box-shadow:
inset 0 1px 0 rgba(0, 0, 0, 0.85),
inset 1px 0 0 rgba(0, 0, 0, 0.55),
inset 0 -1px 0 rgba(232, 220, 180, 0.06),
inset -1px 0 0 rgba(232, 220, 180, 0.04),
0 1px 2px rgba(0, 0, 0, 0.55);
}
.outside .latch-plaque:disabled {
cursor: progress;
opacity: 0.88;
}
.outside .refusal {
margin-top: 16px;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: rgba(180, 70, 60, 0);
min-height: 1.4em;
text-align: center;
transition: color 320ms ease;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.outside .refusal--shown {
color: #c45040;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85), 0 0 12px rgba(196, 80, 64, 0.4);
animation: refusal-in 320ms cubic-bezier(.22, .7, .3, 1);
}
@keyframes refusal-in {
0% {
opacity: 0;
transform: translateY(-4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.outside .carving-meta {
margin-top: 22px;
width: min(440px, 90%);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(192, 207, 216, 0.55);
}
.outside .carving-meta-check {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.outside .carving-meta-check-input {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
margin: 0;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.3));
border: 1px solid rgba(232, 220, 180, 0.18);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(232, 220, 180, 0.05);
cursor: pointer;
position: relative;
border-radius: 0;
}
.outside .carving-meta-check-input:checked {
border-color: color-mix(in oklab, var(--p-glow) 50%, transparent);
}
.outside .carving-meta-check-input:checked::after {
content: "\2713";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
line-height: 1;
color: var(--p-glow);
text-shadow: 0 0 6px color-mix(in oklab, var(--p-glow) 40%, transparent);
}
.outside .carving-meta-link {
color: rgba(192, 207, 216, 0.55);
text-decoration: none;
border-bottom: 1px solid rgba(192, 207, 216, 0.18);
padding-bottom: 1px;
transition: color 160ms ease, border-color 160ms ease;
}
.outside .carving-meta-link:hover {
color: var(--p-glow);
border-bottom-color: color-mix(in oklab, var(--p-glow) 60%, transparent);
}
.outside .friend-claim {
position: relative;
z-index: 1;
margin: 26px auto 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 22px 10px;
background:
linear-gradient(
180deg,
rgba(44, 52, 60, 0.78) 0%,
rgba(22, 26, 30, 0.78) 100%);
border: 1px solid rgba(0, 0, 0, 0.7);
border-radius: 0;
box-shadow:
inset 0 1px 0 rgba(232, 220, 180, 0.10),
inset 1px 0 0 rgba(232, 220, 180, 0.04),
inset 0 -1px 0 rgba(0, 0, 0, 0.7),
inset -1px 0 0 rgba(0, 0, 0, 0.45),
0 1px 3px rgba(0, 0, 0, 0.55),
0 3px 6px rgba(0, 0, 0, 0.32);
cursor: pointer;
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
color: rgba(192, 207, 216, 0.62);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
letter-spacing: 0.02em;
transition:
transform 120ms ease,
color 200ms ease,
filter 200ms ease,
box-shadow 120ms ease;
min-height: auto;
width: auto;
-webkit-tap-highlight-color: transparent;
}
.outside .friend-claim-text {
display: inline-block;
font-style: italic;
letter-spacing: 0.02em;
white-space: nowrap;
}
.outside .friend-key {
width: 22px;
height: auto;
margin-right: 10px;
flex-shrink: 0;
color: inherit;
transition: filter 200ms ease;
}
.outside .friend-claim:hover {
color: var(--p-glow-hi);
filter: drop-shadow(0 0 10px color-mix(in oklab, var(--p-glow) 26%, transparent));
}
.outside .friend-claim:hover .friend-key {
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--p-glow) 35%, transparent));
}
.outside .friend-claim-help {
margin: 8px auto 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 11.5px;
color: rgba(192, 207, 216, 0.42);
letter-spacing: 0.04em;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
user-select: none;
pointer-events: none;
}
.outside .friend-claim:active {
transform: translateY(1px);
box-shadow:
inset 0 1px 0 rgba(0, 0, 0, 0.7),
inset 1px 0 0 rgba(0, 0, 0, 0.45),
inset 0 -1px 0 rgba(232, 220, 180, 0.05),
inset -1px 0 0 rgba(232, 220, 180, 0.03),
0 0 2px rgba(0, 0, 0, 0.45);
}
.outside .masons-mark {
position: absolute;
right: 22px;
bottom: 26px;
z-index: 2;
font-family: var(--font-serif);
font-size: 22px;
color: transparent;
background:
linear-gradient(
180deg,
rgba(168, 152, 124, 0.55) 0%,
rgba(72, 62, 50, 0.55) 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
1px 1px 0 rgba(5, 4, 2, 0.85),
2px 2px 2px rgba(0, 0, 0, 0.5),
0 -0.5px 0 rgba(232, 220, 180, 0.25);
-webkit-text-stroke: 0.3px rgba(10, 8, 6, 0.6);
user-select: none;
pointer-events: none;
opacity: 0.7;
}
.outside .garden-crack {
position: absolute;
right: 52px;
bottom: 18px;
z-index: 3;
display: block;
width: 22px;
height: 32px;
opacity: 0.45;
transition: opacity 0.5s ease;
text-decoration: none;
cursor: default;
}
.outside .garden-crack:hover {
opacity: 0.78;
cursor: pointer;
}
.outside .garden-crack svg {
width: 100%;
height: 100%;
overflow: visible;
}
.outside .dev-prefill {
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
z-index: 2;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(192, 207, 216, 0.32);
pointer-events: none;
user-select: text;
}
.outside .dev-prefill code {
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(232, 220, 180, 0.10);
border-radius: 0;
padding: 2px 6px;
font-size: 10px;
color: rgba(192, 207, 216, 0.55);
pointer-events: auto;
text-transform: none;
}
.outside .dev-prefill-sep {
color: rgba(192, 207, 216, 0.22);
}
@media (max-width: 600px) {
.outside .carving-title {
font-size: clamp(40px, 13vw, 76px);
}
.outside .carving-subtitle {
font-size: 13px;
max-width: 26ch;
}
.outside .carving-call {
font-size: 11px;
letter-spacing: 0.24em;
}
.outside .rune-ring {
width: 70vw;
}
.outside .friend-claim {
font-size: 13px;
}
.outside .masons-mark {
right: 14px;
bottom: 16px;
font-size: 18px;
}
}
@media (max-height: 760px) {
.outside .carvings {
justify-content: flex-start;
padding-top: 3vh;
}
.outside .carving-subtitle {
margin: 10px 0 16px;
}
.outside .carving-call {
margin: 4px 0 18px;
}
.outside .carved-fields {
gap: 12px;
margin-bottom: 18px;
}
.outside .carving-meta {
margin-top: 14px;
}
.outside .friend-claim {
margin-top: 18px;
}
}
/* app/javascript/stylesheets/_atmosphere.css */
.departure-token {
position: fixed;
left: 0;
top: 0;
z-index: 9999;
pointer-events: none;
user-select: none;
background: #2c2200;
border: 1px solid #6b5500;
color: #e8c840;
font-size: 0.7rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
letter-spacing: 0.04em;
}
.preview-departure-token {
position: fixed;
left: 0;
top: 0;
z-index: 9999;
pointer-events: none;
user-select: none;
background: #2c2200;
border: 1px solid #6b5500;
color: #e8c840;
font-size: 0.85rem;
font-weight: 500;
padding: 0.4rem 0.85rem;
border-radius: 20px;
max-width: 280px;
white-space: normal;
line-height: 1.35;
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 8px rgba(232, 200, 64, 0.15);
}
.counter-particle {
position: fixed;
left: 0;
top: 0;
z-index: 9999;
pointer-events: none;
user-select: none;
color: #4de8c2;
font-size: 0.9rem;
text-shadow: 0 0 6px rgba(77, 232, 194, 0.6);
line-height: 1;
}
body:has([data-fortress-status=ollama-offline]) {
background: #040404;
transition: background 3s ease;
}
[data-fortress-status=ollama-offline] {
background: #040404;
transition: background 3s ease;
}
body:has([data-fortress-status=ollama-offline]) .app-nav {
filter: saturate(0) brightness(0.18);
transition: filter 3s ease;
}
[data-fortress-status=ollama-offline] .zone-section,
[data-fortress-status=ollama-offline] .quick-capture,
[data-fortress-status=ollama-offline] .card-counts {
filter: saturate(0) brightness(0.1);
transition: filter 3s ease;
}
[data-fortress-status=ollama-offline] .upkeep-digest {
border-color: #181818;
transition: border-color 3s ease;
}
[data-fortress-status=ollama-offline] .turn-panel-status,
[data-fortress-status=ollama-offline] .turn-phase-strip,
[data-fortress-status=ollama-offline] .turn-panel-replays,
[data-fortress-status=ollama-offline] .turn-details {
filter: saturate(0) brightness(0.6);
transition: filter 3s ease;
}
[data-fortress-status=ollama-offline] .upkeep-cell .upkeep-label {
filter: saturate(0) brightness(0.6);
transition: filter 3s ease;
}
[data-fortress-status=ollama-offline] .upkeep-ollama-offline .upkeep-value {
color: #d4860a;
}
[data-fortress-status=ollama-offline] .fortress-status-msg--offline {
color: #d4860a;
}
.ollama-orb-overlay {
position: fixed;
width: 10px;
height: 10px;
border-radius: 50%;
background: #f87171;
box-shadow: 0 0 8px #f87171, 0 0 20px rgba(248, 113, 113, 0.5);
z-index: 10000;
pointer-events: none;
}
[data-fortress-status=ollama-offline] .card-tile:hover {
transform: none !important;
box-shadow: none !important;
}
[data-fortress-status=ollama-offline] .card-tile.upkeep-pulsing:not(.replay-pulsing) {
animation: none !important;
}
[data-fortress-status=ollama-offline] .turn-phase-strip .btn,
[data-fortress-status=ollama-offline] .turn-panel-replays .btn {
pointer-events: none;
}
[data-fortress-status=stasis] .turn-phase-strip .btn,
[data-fortress-status=stasis] .turn-panel-replays .btn,
[data-fortress-status=stasis] .btn-tap-now,
[data-fortress-status=stasis] .btn-to-hand {
pointer-events: none;
opacity: 0.22;
}
[data-fortress-status=stasis] .settings-section--game-clock .settings-hint,
[data-fortress-status=stasis] .settings-section--game-clock .settings-panel,
[data-fortress-status=stasis] .settings-section--stacks {
opacity: 0.45;
pointer-events: none;
}
[data-fortress-status=stasis] .card-tile {
opacity: 0.65;
border-color: rgba(180, 80, 200, 0.35);
box-shadow: 0 0 12px rgba(200, 60, 180, 0.1), 0 0 4px rgba(100, 200, 255, 0.08);
}
[data-fortress-status=stasis] h1,
[data-fortress-status=stasis] h2 {
color: #c8a0e8;
}
[data-fortress-status=stasis] .btn-secondary {
border-color: rgba(200, 100, 220, 0.4);
color: #d4a0f0;
}
[data-fortress-status=stasis]::after {
content: "";
position: fixed;
inset: 0;
background:
linear-gradient(
160deg,
rgba(180, 40, 160, 0.08) 0%,
rgba(100, 40, 180, 0.06) 40%,
rgba(60, 180, 220, 0.05) 70%,
rgba(200, 60, 180, 0.07) 100%);
pointer-events: none;
z-index: 100;
}
.btn-stasis-thaw {
background:
linear-gradient(
135deg,
rgba(60, 200, 220, 0.2),
rgba(100, 220, 180, 0.15));
color: #6eecd0;
border: 1px solid rgba(100, 230, 200, 0.4);
padding: 0.6rem 1.5rem;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
text-shadow: 0 0 8px rgba(100, 230, 200, 0.3);
box-shadow: 0 0 16px rgba(60, 200, 220, 0.15), 0 0 4px rgba(100, 230, 200, 0.1);
}
.btn-stasis-thaw:hover {
background:
linear-gradient(
135deg,
rgba(60, 200, 220, 0.35),
rgba(100, 220, 180, 0.25));
box-shadow: 0 0 24px rgba(60, 200, 220, 0.25), 0 0 8px rgba(100, 230, 200, 0.2);
}
.btn-stasis-freeze {
background:
linear-gradient(
135deg,
rgba(180, 40, 160, 0.15),
rgba(120, 60, 200, 0.12));
color: #d4a0f0;
border: 1px solid rgba(200, 100, 220, 0.4);
padding: 0.5rem 1.2rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
text-shadow: 0 0 6px rgba(200, 100, 220, 0.25);
box-shadow: 0 0 10px rgba(180, 60, 200, 0.1);
}
.btn-stasis-freeze:hover {
color: #e0b8f8;
background:
linear-gradient(
135deg,
rgba(180, 40, 160, 0.25),
rgba(120, 60, 200, 0.2));
border-color: rgba(200, 100, 220, 0.6);
box-shadow: 0 0 18px rgba(200, 60, 180, 0.2), 0 0 6px rgba(150, 80, 220, 0.15);
}
.stasis-dialog {
background: #1e1e24;
border: 1px solid rgba(200, 100, 220, 0.3);
border-radius: 12px;
padding: 0;
max-width: 360px;
width: 90vw;
box-shadow: 0 0 40px rgba(150, 50, 200, 0.15), 0 8px 32px rgba(0, 0, 0, 0.6);
color: var(--text);
}
.stasis-dialog::backdrop {
background: rgba(10, 8, 16, 0.75);
}
.stasis-dialog-body {
padding: 1.5rem;
text-align: center;
}
.stasis-dialog-message {
font-size: 1rem;
line-height: 1.5;
margin-bottom: 1.5rem;
color: #d4a0f0;
}
.stasis-dialog-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.stasis-dialog-actions .btn {
min-width: 100px;
}
.fortress-status-msg {
font-size: 0.8rem;
padding: 0.3rem 0.6rem;
border-radius: 4px;
margin-bottom: 0.5rem;
font-style: italic;
width: 100%;
}
.fortress-status-msg--offline {
color: #d4860a;
background: transparent;
}
.fortress-status-msg--stasis {
color: #d4a0f0;
background: rgba(180, 60, 200, 0.1);
border: 1px solid rgba(200, 100, 220, 0.2);
}
.card-dragging {
z-index: 1000;
cursor: grabbing;
position: relative;
}
.card-drag-placeholder {
width: 100%;
aspect-ratio: 1 / 1;
background: rgba(255, 255, 255, 0.03);
border: 2px dashed rgba(255, 255, 255, 0.08);
border-radius: 10px;
pointer-events: none;
}
@media (max-width: 599px) {
.card-drag-placeholder {
aspect-ratio: auto;
height: 3rem;
}
}
.drag-target-active {
filter: brightness(1.08);
border-color: rgba(180, 120, 40, 0.45) !important;
transition: filter 0.1s ease, border-color 0.1s ease;
}
.drag-error-flash {
outline: 2px solid rgba(220, 80, 60, 0.7);
outline-offset: 2px;
border-radius: 6px;
}
.drag-insertion-gap {
width: 100%;
aspect-ratio: 1 / 1;
border: 2px dashed rgba(180, 120, 40, 0.5);
background: rgba(180, 120, 40, 0.08);
border-radius: 10px;
pointer-events: none;
z-index: 10;
}
@media (max-width: 599px) {
.drag-insertion-gap {
aspect-ratio: auto;
height: 3rem;
}
}
.drag-confirm-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2000;
background: #1e1e24;
border: 1px solid rgba(200, 100, 220, 0.35);
border-radius: 10px;
padding: 1.25rem 1.5rem;
max-width: 320px;
width: 88vw;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(150, 50, 200, 0.1);
color: var(--text);
font-size: 0.95rem;
line-height: 1.5;
}
.drag-confirm-modal p {
margin: 0 0 1rem;
color: #c8b49a;
}
.drag-confirm-modal strong {
color: #e8c87c;
}
.drag-confirm-buttons {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.drag-confirm-btn {
padding: 0.45rem 1.1rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
border: 1px solid;
}
.drag-confirm-return {
background: rgba(220, 80, 60, 0.15);
color: #f08070;
border-color: rgba(220, 80, 60, 0.4);
}
.drag-confirm-return:hover {
background: rgba(220, 80, 60, 0.25);
border-color: rgba(220, 80, 60, 0.65);
}
.drag-confirm-cancel {
background: rgba(100, 100, 120, 0.15);
color: #a0a0b8;
border-color: rgba(100, 100, 140, 0.35);
}
.drag-confirm-cancel:hover {
background: rgba(100, 100, 120, 0.25);
}
.sign-in-container {
max-width: 380px;
margin: 3rem auto;
padding: 2rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
}
.sign-in-title {
text-align: center;
font-size: 1.5rem;
margin: 0 0 1.5rem;
color: var(--text);
}
.sign-in-sso {
margin-bottom: 1rem;
}
.sign-in-sso-btn {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
}
.sign-in-divider {
text-align: center;
margin: 1.25rem 0;
color: var(--text-muted);
font-size: 0.8rem;
position: relative;
}
.sign-in-divider span {
background: var(--surface);
padding: 0 0.75rem;
position: relative;
z-index: 1;
}
.sign-in-divider::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 1px solid var(--border);
}
.sign-in-form label {
display: block;
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.25rem;
}
.sign-in-field {
margin-bottom: 1rem;
}
.sign-in-input {
width: 100%;
padding: 0.6rem 0.75rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
font-size: 0.95rem;
box-sizing: border-box;
}
.sign-in-input:focus {
outline: none;
border-color: var(--accent);
}
.sign-in-remember {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.sign-in-submit {
width: 100%;
padding: 0.6rem;
font-size: 0.95rem;
}
.task-item[data-reveal] {
opacity: 0;
transform: translateY(28px) scale(0.97);
filter: blur(2px);
}
.task-item[data-reveal].reveal-active {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
transition:
opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.35s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.task-item[data-reveal] .task-message {
opacity: 0;
}
.task-item[data-reveal].reveal-active .task-message {
opacity: 1;
transition: opacity 0.6s ease;
transition-delay: calc(var(--reveal-delay, 0ms) + 200ms);
}
@media (prefers-reduced-motion: reduce) {
.task-item[data-reveal] {
opacity: 1;
transform: none;
filter: none;
}
.task-item[data-reveal] .task-message {
opacity: 1;
transition: none;
}
}
/* app/javascript/stylesheets/_stockpiles.css */
.stockpiles-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.stockpiles-header > div:first-child {
flex: 1;
}
.stockpiles-header h1 {
margin: 0 0 0.5rem;
font-size: 2rem;
font-weight: 700;
}
.stockpiles-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.stockpile-item {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.25rem;
transition: background 0.2s, border-color 0.2s;
}
.stockpile-item:hover {
background: var(--surface-2);
border-color: var(--accent);
}
.stockpile-main {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.stockpile-title-row {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.stockpile-main h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
.stockpile-main h3 a {
color: var(--text);
text-decoration: none;
transition: color 0.2s;
}
.stockpile-main h3 a:hover {
color: var(--accent);
}
.stockpile-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 1.75rem;
padding: 0 0.5rem;
background: var(--accent-muted);
border: 1px solid var(--accent);
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent);
}
.stockpile-badge.stockpile-badge--depleted {
background: transparent;
border-color: var(--border);
color: var(--text-muted);
}
.stockpile-description {
margin: 0;
font-size: 0.9rem;
color: var(--text-muted);
}
.stockpile-description .muted {
color: var(--text-muted);
font-weight: 500;
}
.stockpile-actions {
display: flex;
gap: 0.5rem;
align-items: center;
margin-left: 1rem;
}
.empty-state-stockpiles {
text-align: center;
padding: 3rem 1.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
}
.empty-state-stockpiles .empty-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.empty-state-stockpiles h2 {
margin: 0 0 0.75rem;
font-size: 1.4rem;
font-weight: 700;
}
.empty-state-stockpiles p {
margin: 0 0 1.5rem;
color: var(--text-muted);
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.stockpile-detail {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1rem;
}
.stockpile-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.stockpile-header h1 {
margin: 0 0 0.5rem;
font-size: 2rem;
font-weight: 700;
}
.stockpile-rename-form {
margin: 0;
}
.rename-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.rename-emoji {
font-size: 2rem;
}
.rename-input {
font-size: 2rem;
font-weight: 700;
color: var(--text);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 0 0 0.15rem;
transition: border-color 0.2s;
width: 100%;
min-width: 0;
}
.rename-input:hover {
border-bottom-color: var(--border);
}
.rename-input:focus {
outline: none;
border-bottom-color: var(--accent);
}
.rename-save {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 1rem;
background: var(--accent);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
}
.items-section {
margin-bottom: 0;
}
.items-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.items-header h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.items-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.75rem;
height: 1.5rem;
padding: 0 0.4rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-muted);
}
.items-list-stockpile {
list-style: none;
margin: 0;
padding: 0;
}
.item-actions {
display: flex;
gap: 0.25rem;
align-items: center;
}
.item-actions form {
display: contents;
}
.count-label {
font-size: 1.5rem;
font-weight: 700;
min-width: 2.5rem;
text-align: center;
color: var(--accent);
}
.count-label.count-zero {
color: var(--text-muted);
font-weight: 400;
}
.btn-count {
width: 2rem;
height: 2rem;
padding: 0;
font-size: 1.1rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.btn-icon {
width: 2rem;
height: 2rem;
padding: 0;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.btn-delete {
color: var(--text-muted);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
}
.btn-delete:hover {
color: var(--danger);
border-color: var(--danger);
background: transparent;
}
.stockpile-footer {
margin-top: 1.5rem;
padding-top: 1rem;
}
.stockpile-tip {
margin: 0;
font-size: 0.85rem;
color: var(--text-muted);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.75rem 1rem;
}
.stockpile-tip code {
font-family: monospace;
font-size: 0.9em;
color: var(--accent);
background: var(--accent-muted);
padding: 0.1em 0.35em;
border-radius: 3px;
}
.add-item-form {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.add-item-form h3 {
margin: 0 0 1rem;
font-size: 1rem;
font-weight: 600;
}
.form-row {
display: flex;
gap: 0.75rem;
align-items: center;
}
.form-input-count {
width: 80px !important;
}
.form-input-step {
width: 80px !important;
}
.form-row--sub {
margin-top: 0.4rem;
opacity: 0.8;
}
.count-unit {
font-size: 0.75rem;
font-weight: 400;
color: var(--text-muted);
margin-left: 0.25em;
vertical-align: baseline;
}
.item-edit-row {
display: flex;
align-items: center;
gap: 0.35rem;
flex: 1;
min-width: 0;
}
.item-edit-row--sub {
margin-top: 0.35rem;
gap: 0.4rem;
opacity: 0.85;
}
.item-field-label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
flex-shrink: 0;
}
.item-unit-input {
width: 10ch;
font-size: 0.85rem;
color: var(--text);
background: transparent;
border: none;
border-bottom: 1px solid transparent;
border-radius: 0;
padding: 0;
transition: border-color 0.15s;
}
.item-unit-input::placeholder {
color: var(--text-muted);
opacity: 0.6;
font-size: 0.75rem;
}
.item-unit-input:hover {
border-bottom-color: var(--border);
}
.item-unit-input:focus {
outline: none;
border-bottom-color: var(--accent);
}
.item-step-input {
width: 5ch;
font-size: 0.85rem;
color: var(--text);
background: transparent;
border: none;
border-bottom: 1px solid transparent;
border-radius: 0;
padding: 0;
transition: border-color 0.15s;
}
.item-step-input:hover {
border-bottom-color: var(--border);
}
.item-step-input:focus {
outline: none;
border-bottom-color: var(--accent);
}
.item-step-select {
font-size: 0.8rem;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.15rem 0.4rem;
cursor: pointer;
transition: border-color 0.15s;
}
.item-step-select:hover {
border-color: var(--accent);
}
.item-step-select:focus {
outline: none;
border-color: var(--accent);
}
.form-input-unit {
flex: 1;
min-width: 0;
}
:root {
--stock-ok: #2a9a5c;
--stock-low: #c8921a;
--stock-depleted: var(--text-muted);
}
.count-label--ok {
color: var(--stock-ok);
}
.count-label--low {
color: var(--stock-low);
}
.count-label--depleted {
color: var(--stock-low);
font-weight: 400;
}
.list-item-stockpile {
display: grid;
grid-template-columns: 1fr auto auto;
padding: 0.875rem 0.75rem 0.625rem 1.5rem;
border-bottom: 1px solid var(--border);
row-gap: 0.4rem;
transition: background 0.15s;
}
.list-item-stockpile:first-child {
border-top: 1px solid var(--border);
}
.list-item-stockpile:hover {
background: var(--surface-2);
}
.list-item-stockpile.dragging {
opacity: 0.4;
}
.list-item-stockpile.drag-over {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.drag-handle {
position: absolute;
left: 0.2rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
opacity: 0.3;
cursor: grab;
font-size: 1rem;
line-height: 1;
user-select: none;
transition: opacity 0.15s;
}
.list-item-stockpile {
position: relative;
}
.list-item-stockpile:hover .drag-handle {
opacity: 0.7;
}
.list-item-stockpile--heading {
display: flex;
align-items: center;
padding: 0.65rem 0.75rem 0.65rem 1.25rem;
background: rgba(40, 32, 14, 0.65);
border-top: 1px solid rgba(178, 138, 82, 0.25);
border-bottom: 1px solid rgba(178, 138, 82, 0.4);
}
.list-item-stockpile--heading:hover {
background: rgba(50, 40, 18, 0.75);
}
.stockpile-heading-row {
display: flex;
align-items: center;
flex: 1;
gap: 0.65rem;
}
.stockpile-heading-row::after {
content: "";
flex: 1;
height: 1px;
background:
linear-gradient(
to right,
rgba(178, 138, 82, 0.5),
transparent);
align-self: center;
}
li.item-editing .stockpile-heading-row::after {
display: none;
}
.stockpile-heading-input {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: left;
flex: 1;
color: #c8a040;
background: transparent;
border: none;
border-bottom: 1px solid transparent;
padding: 0;
transition: border-color 0.15s;
}
.stockpile-heading-input:hover {
border-bottom-color: rgba(200, 160, 64, 0.45);
}
.stockpile-heading-input:focus {
outline: none;
border-bottom-color: #c8a040;
}
.list-item-stockpile--low {
background: #1e1400;
border-color: rgba(230, 126, 34, 0.35);
filter: saturate(0.85);
}
.list-item-stockpile--depleted {
background: #1e1400;
border-color: rgba(230, 126, 34, 0.35);
filter: saturate(0.85);
opacity: 0.65;
}
.item-row-main {
grid-column: 1 / 3;
display: grid;
grid-template-columns: subgrid;
align-items: center;
}
.item-name-area {
display: flex;
align-items: center;
min-width: 0;
overflow: hidden;
}
.item-display {
flex: 1;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
color: var(--text);
padding: 2px 0;
border-bottom: 1px solid transparent;
transition: border-color 0.15s;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item-display:hover {
border-bottom-color: var(--border);
}
.item-edit-area {
align-items: center;
gap: 0.25rem;
flex: 1;
min-width: 0;
}
li.item-editing .item-edit-area {
display: flex;
flex-direction: column;
gap: 0;
}
.item-edit-area .item-name-form,
.item-edit-area .spellbook-item-body-form {
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
min-width: 0;
}
.item-edit-area .spellbook-item-body-form {
flex-direction: row;
align-items: center;
gap: 0.25rem;
}
.item-edit-area .item-name-input,
.item-edit-area .spellbook-body-input {
flex: 1;
min-width: 0;
max-width: none;
}
.btn-item-save {
flex-shrink: 0;
padding: 0.2rem 0.5rem;
font-size: 0.8rem;
background: rgba(70, 150, 70, 0.15);
color: #80d060;
border: 1px solid rgba(70, 150, 70, 0.35);
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
line-height: 1.3;
}
.btn-item-save:hover {
background: rgba(70, 150, 70, 0.25);
}
.item-name {
font-size: 1rem;
font-weight: 500;
}
.item-name-form {
display: contents;
}
.item-name-input {
font-size: 1rem;
font-weight: 500;
color: var(--text);
background: transparent;
border: none;
border-bottom: 1px solid transparent;
border-radius: 0;
padding: 0;
width: auto;
min-width: 4ch;
max-width: 20ch;
transition: border-color 0.15s;
}
.item-name-input:hover {
border-bottom-color: var(--border);
}
.item-name-input:focus {
outline: none;
border-bottom-color: var(--accent);
}
.item-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.stock-gauge {
grid-column: 1 / 3;
display: block;
padding: 0 0.5rem;
}
.gauge-track-wrap {
padding: 18px 0 6px;
}
.gauge-track {
position: relative;
width: 100%;
height: 4px;
background: var(--surface-2);
border-radius: 2px;
overflow: visible;
}
.gauge-fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease, background 0.3s ease;
}
.gauge-fill--ok {
background: var(--stock-ok);
}
.gauge-fill--low {
background: var(--stock-low);
}
.gauge-fill--depleted {
background: var(--stock-depleted);
}
.gauge-pin {
position: absolute;
top: 50%;
width: 36px;
height: 36px;
margin: -18px 0 0 -18px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
z-index: 2;
-webkit-tap-highlight-color: transparent;
}
.gauge-pin__line {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 14px;
margin: -7px 0 0 -1px;
background: var(--stock-low);
border-radius: 1px;
opacity: 0.85;
transition:
opacity 0.15s,
height 0.15s,
background 0.15s;
}
.gauge-pin__badge {
position: absolute;
bottom: calc(50% + 9px);
left: 50%;
transform: translateX(-50%);
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.7rem;
font-weight: 600;
line-height: 1;
color: var(--text-muted);
white-space: nowrap;
pointer-events: none;
transition: color 0.15s;
}
.gauge-pin:hover .gauge-pin__line,
.gauge-pin:focus-visible .gauge-pin__line {
opacity: 1;
height: 18px;
margin-top: -9px;
}
.gauge-pin:hover .gauge-pin__badge,
.gauge-pin:focus-visible .gauge-pin__badge {
color: var(--text);
}
.gauge-pin:focus-visible {
outline: none;
}
.gauge-pin:focus-visible .gauge-pin__line {
box-shadow: 0 0 0 2px var(--accent-muted);
}
.gauge-pin--min .gauge-pin__line {
background: var(--stock-low);
}
.gauge-pin--max .gauge-pin__line {
background: var(--text-muted);
width: 3px;
margin-left: -1.5px;
}
.gauge-pin--max:hover .gauge-pin__line {
background: var(--text);
}
.btn-sm {
flex: 0;
width: auto;
min-height: 0;
padding: 0.3rem 0.75rem;
font-size: 0.85rem;
}
.header-actions form {
display: contents;
}
.header-actions .btn {
flex: 0;
width: auto;
}
.safe-food-section {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 1rem;
}
.safe-food-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--accent-muted);
border: 1px solid var(--accent);
border-radius: 6px;
color: var(--accent);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.safe-food-btn:hover {
background: var(--accent);
color: var(--surface);
}
.safe-food-icon {
font-size: 1.25rem;
}
#safe-food-suggestion {
flex: 1;
min-height: 2.5rem;
display: flex;
align-items: center;
}
.suggestion-text {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
}
.suggestion-fallback .suggestion-text {
color: var(--text-muted);
font-weight: 400;
}
.suggestion-note {
display: block;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.suggestion-details {
margin-top: 0.5rem;
font-size: 0.85rem;
}
.suggestion-details summary {
cursor: pointer;
color: var(--text-muted);
}
.other-options {
margin: 0.25rem 0 0 1rem;
padding-left: 1rem;
color: var(--text-muted);
}
.items-list-spellbook {
list-style: none;
padding: 0;
margin: 0;
}
.list-item-spellbook {
position: relative;
display: flex;
align-items: center;
padding: 0.75rem 0.75rem 0.75rem 1.5rem;
border-bottom: 1px solid var(--border);
gap: 0.5rem;
transition: background 0.15s;
}
.list-item-spellbook:first-child {
border-top: 1px solid var(--border);
}
.list-item-spellbook:hover {
background: var(--surface-2);
}
.list-item-spellbook.dragging {
opacity: 0.4;
}
.list-item-spellbook.drag-over {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.list-item-spellbook:hover .drag-handle {
opacity: 0.7;
}
.list-item-spellbook--heading {
background: rgba(40, 32, 14, 0.65);
border-top: 1px solid rgba(178, 138, 82, 0.25);
border-bottom-color: rgba(178, 138, 82, 0.4);
padding-top: 0.65rem;
padding-bottom: 0.65rem;
}
.list-item-spellbook--heading:hover {
background: rgba(50, 40, 18, 0.75);
}
.spellbook-select-bar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.spellbook-select-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.item-select {
flex: 0 0 auto;
width: 1.05rem;
height: 1.05rem;
margin: 0;
cursor: pointer;
accent-color: var(--accent);
}
.items-list-spellbook.selecting .drag-handle {
opacity: 0.2;
cursor: default;
}
.items-list-spellbook.selecting .item-display {
cursor: pointer;
}
.spellbook-heading-row {
display: flex;
align-items: center;
flex: 1;
gap: 0.65rem;
}
.spellbook-heading-row::after {
content: "";
flex: 1;
height: 1px;
background:
linear-gradient(
to right,
rgba(178, 138, 82, 0.5),
transparent);
align-self: center;
}
li.item-editing .spellbook-heading-row::after {
display: none;
}
.spellbook-heading-input {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: left;
flex: 1;
color: #c8a040;
background: transparent;
border: none;
border-bottom: 1px solid transparent;
padding: 0;
transition: border-color 0.15s;
}
.spellbook-heading-input:hover {
border-bottom-color: rgba(200, 160, 64, 0.45);
}
.spellbook-heading-input:focus {
outline: none;
border-bottom-color: #c8a040;
}
.spellbook-item-row {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 0;
}
.spellbook-item-body-form {
display: contents;
}
.spellbook-body-input {
flex: 1;
font-size: 1rem;
font-weight: 400;
color: var(--text);
background: transparent;
border: none;
border-bottom: 1px solid transparent;
border-radius: 0;
padding: 0;
min-width: 0;
transition: border-color 0.15s;
}
.spellbook-body-input:hover {
border-bottom-color: var(--border);
}
.spellbook-body-input:focus {
outline: none;
border-bottom-color: var(--accent);
}
.gallery-container {
max-width: 1100px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
.gallery-header {
margin-bottom: 2rem;
}
.gallery-header h1 {
font-size: 1.6rem;
color: var(--text);
margin-bottom: 0.25rem;
}
.gallery-subheading {
color: var(--text-muted);
font-size: 0.85rem;
font-style: italic;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
}
.gallery-card {
background:
repeating-linear-gradient(
120deg,
transparent 0px,
transparent 2px,
rgba(255, 255, 255, 0.012) 2px,
rgba(255, 255, 255, 0.012) 4px),
repeating-linear-gradient(
45deg,
transparent 0px,
transparent 3px,
rgba(0, 0, 0, 0.03) 3px,
rgba(0, 0, 0, 0.03) 5px),
linear-gradient(
160deg,
#2c2c2c 0%,
#242424 60%,
#1e1e1e 100%);
border: 2px solid var(--border);
border-radius: 10px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.5),
0 0 14px rgba(180, 120, 40, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.04),
inset 0 -2px 6px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
transition:
box-shadow 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.gallery-card:hover {
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.6),
0 0 22px rgba(180, 120, 40, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 -2px 6px rgba(0, 0, 0, 0.3);
border-color: rgba(180, 120, 40, 0.25);
transform: translateY(-2px);
}
.gallery-card[data-color]:not([data-color=""])::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 6px;
border-radius: 8px 8px 0 0;
z-index: 1;
}
.gallery-card-header {
padding: 0.875rem 0.875rem 0.5rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.card-art {
height: 64px;
margin: 0 0.625rem 0.5rem;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.04);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}
@media (prefers-reduced-motion: reduce) {
.gallery-card {
transition: none;
}
.gallery-card:hover {
transform: none;
}
}
@media (hover: none) {
.gallery-card:hover {
transform: none;
}
}
.card {
transform-origin: 50% 100%;
transition:
transform 360ms cubic-bezier(.2, .8, .2, 1),
box-shadow 360ms,
filter 360ms;
cursor: pointer;
}
.card:hover {
transform: translateY(-6px) rotate(-0.4deg);
filter: brightness(1.08) saturate(1.05);
}
.card:active {
transform: translateY(-2px) scale(0.995);
transition-duration: 80ms;
}
.card.is-tapped {
transform: rotate(10deg) translate(6px, 2px);
filter: brightness(0.6) saturate(0.6);
}
.card.is-tapped:hover {
transform: rotate(8deg) translate(6px, -2px);
filter: brightness(0.75) saturate(0.7);
}
.card.is-tapped::after {
content: "TAPPED";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-10deg);
padding: 4px 12px;
background: rgba(0, 0, 0, 0.72);
color: oklch(0.75 0.1 40);
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 3px;
border: 1px solid oklch(0.5 0.08 40);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
pointer-events: none;
z-index: 10;
}
@keyframes pounce-breathe {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-2.5px) scale(1.008);
}
}
.card.is-ready {
animation: pounce-breathe 3.8s ease-in-out infinite;
}
.card.is-ready::before {
content: "READY";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
padding: 2px 8px;
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 2.5px;
color: #fff;
background: rgba(0, 0, 0, 0.55);
border: 1px solid var(--ready-rail, rgba(255,255,255,0.3));
z-index: 8;
pointer-events: none;
}
.btn-inv-graphs {
font-size: 0.75rem;
color: var(--text-muted);
text-decoration: none;
letter-spacing: 0.08em;
padding: 2px 8px;
border: 1px solid var(--border);
border-radius: 4px;
transition: color 0.15s, border-color 0.15s;
}
.btn-inv-graphs:hover {
color: var(--text);
border-color: var(--text-muted);
}
.sg-page {
max-width: 680px;
margin: 0 auto;
padding: 2rem 1rem 4rem;
}
.sg-header {
margin-bottom: 1.5rem;
}
.sg-breadcrumb {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.sg-back {
color: var(--text-muted);
text-decoration: none;
}
.sg-back:hover {
color: var(--text);
}
.sg-sep {
margin: 0 0.4em;
}
.sg-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--text);
margin: 0;
}
.sg-window-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.sg-tab {
font-size: 0.75rem;
color: var(--text-muted);
text-decoration: none;
padding: 3px 10px;
border: 1px solid var(--border);
border-radius: 4px;
letter-spacing: 0.06em;
transition: color 0.15s, border-color 0.15s;
}
.sg-tab:hover {
color: var(--text);
border-color: var(--text-muted);
}
.sg-tab--active {
color: var(--text);
border-color: var(--text-muted);
}
.sg-chart-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.5rem;
overflow-x: auto;
}
.sg-svg {
width: 100%;
display: block;
}
.sg-axis {
stroke: var(--border);
stroke-width: 1;
}
.sg-grid {
stroke: var(--border);
stroke-width: 1;
stroke-dasharray: 3 4;
}
.sg-line {
fill: none;
stroke: #c8a060;
stroke-width: 2;
stroke-linejoin: miter;
}
.sg-dot {
fill: #e8d0a0;
stroke: #c8a060;
stroke-width: 1.5;
}
.sg-label {
fill: var(--text-muted);
font-size: 10px;
font-family: monospace;
}
.sg-label--y {
text-anchor: end;
}
.sg-label--x {
}
.sg-label--x-start {
text-anchor: start;
}
.sg-label--x-end {
text-anchor: end;
}
.sg-empty {
padding: 3rem 0;
color: var(--text-muted);
font-size: 0.9rem;
}
.sg-count-note {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.75rem;
letter-spacing: 0.04em;
}
.sg-section-heading {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin: 1.5rem 0 0.5rem;
opacity: 0.75;
}
.sg-items-section {
border-top: 1px solid var(--border);
}
.sg-item-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.4rem 0;
border-bottom: 1px solid var(--border);
}
.sg-item-row__meta {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 7rem;
max-width: 10rem;
flex-shrink: 0;
}
.sg-item-row__name {
font-size: 0.82rem;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sg-item-row__count {
font-family: "JetBrains Mono", monospace;
font-size: 0.65rem;
color: var(--text-muted);
}
.sg-item-mini-wrap {
flex: 1;
min-width: 0;
}
.sg-item-mini {
width: 100%;
display: block;
height: 56px;
}
.sg-graph-tablet {
grid-column: 3;
grid-row: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
margin: 0 0 0 0.5rem;
background: rgba(12, 10, 6, 0.55);
border: 1px solid rgba(90, 78, 56, 0.4);
border-radius: 3px;
color: rgba(170, 145, 100, 0.32);
cursor: default;
transition:
color 0.15s,
border-color 0.15s,
background 0.15s;
user-select: none;
}
.sg-graph-tablet:hover {
color: rgba(215, 185, 125, 0.92);
border-color: rgba(140, 115, 70, 0.75);
background: rgba(18, 14, 8, 0.8);
}
.sg-graph-tablet__icon {
width: 22px;
height: 13px;
display: block;
overflow: visible;
}
.sg-hover-card {
position: fixed;
z-index: 9000;
background: rgba(20, 16, 10, 0.97);
border: 1px solid #5a4e38;
border-radius: 5px;
padding: 8px 10px 6px;
pointer-events: none;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
width: 244px;
}
.sg-hover-card__svg {
width: 220px;
height: 48px;
display: block;
}
.sg-hover-card__meta {
display: block;
font-family: "JetBrains Mono", monospace;
font-size: 0.58rem;
color: rgba(180, 155, 110, 0.6);
letter-spacing: 0.05em;
margin-top: 4px;
}
/* app/javascript/stylesheets/_inventory.css */
main:has(.inventory-hall) {
background:
repeating-linear-gradient(
180deg,
transparent 0 18px,
rgba(0, 0, 0, 0.05) 18px 19px,
transparent 19px 38px),
repeating-linear-gradient(
92deg,
transparent 0 60px,
rgba(255, 220, 140, 0.025) 60px 61px,
transparent 61px 120px),
#1c1408;
}
.inventory-hall {
--inv-stone-1: #3e2c10;
--inv-stone-2: #2c1e08;
--inv-stone-3: #1e1408;
--inv-wood-1: #523818;
--inv-wood-2: #3c2810;
--inv-wood-3: #624420;
--inv-wood-line: rgba(0,0,0,0.16);
--inv-wood-hi: rgba(255,225,160,0.13);
--inv-bronze: #e6b840;
--inv-bronze-dim: #9a7020;
--inv-bronze-glow: rgba(230,184,64,0.36);
--inv-iron: #7a6848;
--inv-iron-dim: #4e3e28;
--inv-candle: #f3c468;
--inv-candle-dim: #c98e2a;
--inv-candle-glow: rgba(243, 196, 104, 0.32);
--inv-candle-bloom: rgba(243, 196, 104, 0.18);
--inv-wood-warm: #6b4520;
--inv-wood-warm-hi: rgba(255, 220, 160, 0.18);
--inv-iron-hoop: #2c1f12;
--inv-iron-hoop-hi: rgba(180, 140, 90, 0.25);
--inv-plank-seam: rgba(0, 0, 0, 0.32);
position: relative;
max-width: 900px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
color: #f0e4c8;
}
.inventory-lintel {
position: relative;
margin: 2rem 0 2.5rem;
padding: 1.25rem 2rem 1rem;
text-align: center;
border-radius: 18px 18px 6px 6px;
background:
radial-gradient(
ellipse 55% 70% at 50% 50%,
var(--inv-candle-bloom) 0%,
transparent 70%),
linear-gradient(
180deg,
#5a3c18 0%,
#3e2810 70%,
#2a1c08 100%);
box-shadow:
inset 0 0 0 1px rgba(200, 146, 42, 0.2),
inset 0 1px 0 rgba(255, 220, 160, 0.07),
inset 0 -2px 4px rgba(0, 0, 0, 0.7),
0 0 36px var(--inv-candle-bloom),
0 8px 24px rgba(0, 0, 0, 0.55);
}
.inventory-lintel::before,
.inventory-lintel::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(178, 138, 82, 0.25) 15%,
rgba(178, 138, 82, 0.25) 85%,
transparent);
}
.inventory-lintel::before {
top: 6px;
}
.inventory-lintel::after {
bottom: 6px;
}
.inventory-lintel__board {
display: inline-block;
padding: 0.4rem 1.5rem 0.3rem;
background-color: var(--inv-wood-2);
background-image:
repeating-linear-gradient(
94deg,
transparent 0 9px,
rgba(0, 0, 0, 0.12) 9px 10px,
transparent 10px 22px),
linear-gradient(
180deg,
var(--inv-wood-1),
var(--inv-wood-2));
box-shadow:
inset 0 1px 0 var(--inv-wood-hi),
inset 0 -1px 2px rgba(0, 0, 0, 0.45),
0 2px 8px rgba(0, 0, 0, 0.4);
}
.inventory-lintel h1 {
margin: 0;
font-family:
"Cinzel",
Georgia,
serif;
font-size: clamp(16px, 3.5vw, 26px);
font-weight: 700;
letter-spacing: 8px;
text-transform: uppercase;
color: var(--inv-bronze);
text-shadow:
0 1px 0 rgba(255, 230, 190, 0.15),
0 -1px 0 rgba(0, 0, 0, 0.8),
0 0 16px rgba(178, 138, 82, 0.12);
}
.inventory-lintel small {
display: block;
margin-top: 0.4rem;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 9px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #b09060;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.inventory-lintel__peg {
position: absolute;
font-family:
"Iowan Old Style",
Georgia,
serif;
font-size: 12px;
color: var(--inv-bronze-dim);
opacity: 0.5;
text-shadow: 0 0 6px var(--inv-bronze-glow);
}
.inventory-lintel__peg--tl {
left: 18px;
top: 16px;
}
.inventory-lintel__peg--tr {
right: 18px;
top: 16px;
}
.inventory-lintel__peg--bl {
left: 18px;
bottom: 14px;
}
.inventory-lintel__peg--br {
right: 18px;
bottom: 14px;
}
.inventory-hall-section {
margin-top: 2rem;
}
.inventory-hall-section__heading {
display: inline-flex;
align-items: center;
gap: 8px;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: #e8d8a8;
text-shadow:
0 0 8px rgba(200, 146, 42, 0.18),
0 0 18px var(--inv-candle-bloom),
0 1px 0 rgba(0, 0, 0, 0.8);
margin: 0 0 6px;
padding: 0;
}
.inventory-hall-section__icon {
font-size: 14px;
color: var(--inv-bronze);
text-shadow: 0 0 8px var(--inv-bronze-glow);
}
.inventory-stone-rule {
position: relative;
height: 6px;
margin-bottom: 14px;
}
.inventory-stone-rule::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 2px;
height: 2px;
background:
linear-gradient(
90deg,
transparent 0,
#0a0804 8%,
#0a0804 92%,
transparent 100%);
}
.inventory-stone-rule::after {
content: "";
position: absolute;
left: 24px;
right: 24px;
top: 2.5px;
height: 1px;
background:
linear-gradient(
90deg,
transparent 0,
var(--inv-bronze) 10%,
var(--inv-bronze) 50%,
var(--inv-bronze-dim) 90%,
transparent 100%);
box-shadow: 0 0 6px var(--inv-bronze-glow), 0 0 2px var(--inv-bronze);
filter: blur(0.3px);
opacity: 0.6;
}
.inventory-stone-rule__peg {
position: absolute;
top: 0;
width: 8px;
height: 6px;
display: flex;
align-items: center;
justify-content: center;
font-family:
"Iowan Old Style",
Georgia,
serif;
font-size: 8px;
color: var(--inv-bronze-dim);
text-shadow: 0 0 4px var(--inv-bronze-glow);
}
.inventory-stone-rule__peg:first-child {
left: 4px;
}
.inventory-stone-rule__peg--r {
left: auto;
right: 4px;
}
.inventory-panel {
position: relative;
overflow: hidden;
border: 1px solid var(--inv-iron-dim);
border-radius: 24px 24px 14px 14px;
background:
radial-gradient(
160% 120% at 30% -10%,
var(--inv-wood-warm) 0%,
var(--inv-stone-1, #3e2c10) 45%,
var(--inv-stone-3, #1e1408) 100%);
padding: 1.25rem;
box-shadow:
inset 0 0 0 1px rgba(70, 74, 82, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.04),
inset 0 12px 28px var(--inv-candle-bloom),
inset 0 -2px 6px rgba(0, 0, 0, 0.65),
inset 0 0 14px rgba(178, 138, 82, 0.05),
0 10px 24px rgba(0, 0, 0, 0.5),
0 2px 5px rgba(0, 0, 0, 0.35);
}
.inventory-panel::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 420px 420px;
mix-blend-mode: overlay;
opacity: 0.22;
pointer-events: none;
z-index: 0;
}
.inventory-panel > * {
position: relative;
z-index: 1;
}
.inventory-timber-cap {
background-color: var(--inv-wood-2, #1a1815);
background-image:
repeating-linear-gradient(
94deg,
transparent 0 9px,
rgba(0, 0, 0, 0.12) 9px 10px,
transparent 10px 22px),
linear-gradient(
180deg,
var(--inv-wood-1, #2a2825),
var(--inv-wood-2, #1a1815));
padding: 0.5rem 1.25rem;
border-radius: 24px 24px 0 0;
box-shadow: inset 0 1px 0 var(--inv-wood-hi, rgba(255,245,230,0.08)), inset 0 -1px 2px rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.inventory-timber-cap__title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #c8a070;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.inventory-timber-cap__action {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--inv-bronze);
text-decoration: none;
padding: 0.15rem 0.5rem;
border: 1px solid var(--inv-bronze-dim);
background: rgba(107, 79, 40, 0.15);
transition:
background 0.15s,
color 0.15s,
border-color 0.15s;
}
.inventory-timber-cap__action:hover {
color: #f0cc60;
border-color: var(--inv-bronze);
background: rgba(178, 138, 82, 0.12);
}
.inventory-shelf-row {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1.1rem;
border-bottom: none;
background-image:
linear-gradient(
to right,
transparent,
rgba(140, 105, 50, 0.28) 12%,
rgba(140, 105, 50, 0.28) 88%,
transparent);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
transition: background 0.15s;
cursor: pointer;
}
.inventory-shelf-row:last-child {
background-image: none;
}
.inventory-shelf-row:hover {
background-color: rgba(100, 65, 25, 0.35);
}
.inventory-shelf-row__name {
flex: 1;
min-width: 0;
}
.inventory-shelf-row__name a {
font-size: 0.95rem;
font-weight: 600;
color: #e8d8b8;
text-decoration: none;
transition: color 0.15s;
}
.inventory-shelf-row__name a::after {
content: "";
position: absolute;
inset: 0;
}
.inventory-shelf-row:hover .inventory-shelf-row__name a {
color: var(--inv-bronze);
}
.inventory-shelf-row__modified {
display: block;
margin-top: 0.15rem;
font-size: 0.72rem;
color: #9a7c4e;
position: relative;
z-index: 1;
width: fit-content;
cursor: help;
}
.inventory-shelf-row__meta {
display: flex;
align-items: center;
gap: 0.6rem;
flex-shrink: 0;
}
.inventory-shelf-row__hint {
font-size: 0.82rem;
color: #b09060;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inventory-shelf-row__action {
flex-shrink: 0;
position: relative;
z-index: 1;
}
.inventory-bronze-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
height: 1.5rem;
padding: 0 0.45rem;
background: rgba(107, 79, 40, 0.2);
border: 1px solid var(--inv-bronze-dim);
border-radius: 999px;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.78rem;
font-weight: 700;
color: var(--inv-bronze);
font-variant-numeric: tabular-nums;
text-shadow: 0 0 6px var(--inv-bronze-glow);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.inventory-bronze-badge--depleted {
background: rgba(30, 20, 10, 0.5);
border-color: var(--inv-iron);
color: #b09060;
text-shadow: none;
}
.inventory-bronze-badge--low {
background: rgba(180, 120, 20, 0.25);
border-color: var(--inv-bronze);
color: var(--inv-candle);
text-shadow: 0 0 8px var(--inv-bronze-glow);
}
.inventory-iron-link {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.78rem;
font-weight: 500;
color: #b09060;
text-decoration: none;
padding: 0.2rem 0.55rem;
border: 1px solid var(--inv-iron);
background: rgba(30, 30, 35, 0.4);
transition: color 0.15s, border-color 0.15s;
}
.inventory-iron-link:hover {
color: var(--inv-bronze);
border-color: var(--inv-bronze-dim);
}
.inventory-empty-state {
text-align: center;
padding: 2.5rem 1.5rem;
border-radius: 18px;
background:
radial-gradient(
160% 120% at 50% 0%,
var(--inv-wood-warm) 0%,
var(--inv-stone-1) 40%,
var(--inv-stone-3) 100%);
box-shadow:
inset 0 0 0 1px rgba(140, 105, 50, 0.4),
inset 0 12px 24px var(--inv-candle-bloom),
inset 0 -2px 6px rgba(0, 0, 0, 0.5);
border: 1px dashed rgba(140, 105, 50, 0.4);
}
.inventory-empty-state__icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
filter: grayscale(0.3);
}
.inventory-empty-state h2,
.inventory-empty-state h3 {
margin: 0 0 0.5rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #c8a070;
}
.inventory-empty-state p {
margin: 0 0 1.5rem;
font-size: 0.88rem;
color: #b09060;
max-width: 400px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.inventory-tip {
margin: 1.5rem 0 0;
padding: 0.75rem 1rem;
background: rgba(60, 35, 10, 0.3);
border-left: 2px solid var(--inv-bronze-dim);
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);
font-size: 0.85rem;
color: #c8a070;
}
.inventory-tip strong {
color: var(--inv-bronze);
}
.inventory-tip code {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.85em;
color: var(--inv-bronze);
background: rgba(107, 79, 40, 0.12);
padding: 0.1em 0.35em;
}
.inventory-detail-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(140, 105, 50, 0.4);
}
.inventory-detail-header .rename-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.inventory-detail-header .rename-emoji {
font-size: 1.75rem;
}
.inventory-detail-header .rename-input {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 2px;
color: #e8d8b8;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 0 0 0.15rem;
width: 100%;
min-width: 0;
transition: border-color 0.2s;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.inventory-detail-header .rename-input:hover {
border-bottom-color: var(--inv-iron);
}
.inventory-detail-header .rename-input:focus {
outline: none;
border-bottom-color: var(--inv-bronze);
}
.inventory-detail-header .rename-save {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 1rem;
background: var(--inv-bronze-dim);
color: #e8d8b8;
border: 1px solid var(--inv-bronze);
cursor: pointer;
flex-shrink: 0;
}
.inventory-detail-header .header-subtitle {
margin: 0.25rem 0 0;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.75rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #b09060;
}
.inventory-detail-header .header-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.inventory-detail-header .header-actions form {
display: contents;
}
.inventory-detail-header .header-actions .btn {
flex: 0;
width: auto;
}
.inventory-add-form {
margin-top: 2rem;
padding: 1.25rem;
background: rgba(15, 10, 4, 0.6);
box-shadow: inset 0 0 0 1px rgba(100, 75, 35, 0.3), inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.inventory-add-form h3 {
margin: 0 0 0.75rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #b09060;
}
.inventory-hall .gauge-track {
background: var(--inv-iron-dim, #2a2d32);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.inventory-hall .gauge-fill--ok {
background: #2a9a5c;
box-shadow: 0 0 6px rgba(42, 154, 92, 0.35);
}
.inventory-hall .gauge-fill--low {
background: var(--inv-bronze);
box-shadow: 0 0 6px var(--inv-bronze-glow);
}
.inventory-hall .gauge-fill--depleted {
background: var(--inv-iron);
}
.inventory-hall .gauge-pin--min .gauge-pin__line {
background: var(--inv-bronze);
box-shadow: 0 0 4px var(--inv-bronze-glow);
}
.inventory-hall .gauge-pin--max .gauge-pin__line {
background: #8a7a55;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
.inventory-hall .gauge-pin--max:hover .gauge-pin__line {
background: #d8c088;
}
.inventory-hall .gauge-pin__badge {
color: #8a7a55;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
}
.inventory-hall .gauge-pin:hover .gauge-pin__badge,
.inventory-hall .gauge-pin:focus-visible .gauge-pin__badge {
color: #e8d8b8;
}
.inventory-hall .gauge-pin--min .gauge-pin__badge {
color: var(--inv-bronze);
text-shadow: 0 0 4px var(--inv-bronze-glow);
}
.inventory-hall .count-label {
color: var(--inv-bronze);
text-shadow: 0 0 8px var(--inv-bronze-glow);
}
.inventory-hall .count-label--ok {
color: #2a9a5c;
text-shadow: 0 0 6px rgba(42, 154, 92, 0.35);
}
.inventory-hall .count-label--low {
color: var(--inv-bronze);
}
.inventory-hall .count-label--depleted {
color: #b09060;
text-shadow: none;
}
.inventory-hall .item-display {
color: #e8d8b8;
}
.inventory-hall .item-display:hover {
border-bottom-color: var(--inv-iron);
}
.inventory-hall .stockpile-heading-row .item-display,
.inventory-hall .list-item-spellbook--heading .item-display {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: left;
color: #c8a040;
flex: 0 0 auto;
white-space: nowrap;
overflow: visible;
}
.inventory-hall .stockpile-heading-row .item-display:hover,
.inventory-hall .list-item-spellbook--heading .item-display:hover {
border-bottom-color: rgba(200, 160, 64, 0.45);
}
.inventory-hall .item-edit-area .item-name-input,
.inventory-hall .item-edit-area .spellbook-body-input {
color: #e8d8b8;
background: transparent;
border-bottom-color: var(--inv-iron);
}
.inventory-hall .item-edit-area .item-name-input:focus,
.inventory-hall .item-edit-area .spellbook-body-input:focus {
border-bottom-color: var(--inv-bronze);
outline: none;
}
.inventory-hall .btn-count {
background: var(--inv-iron-dim);
border: 1px solid var(--inv-iron);
color: #c8a070;
transition: border-color 0.15s, color 0.15s;
}
.inventory-hall .btn-count:hover {
border-color: var(--inv-bronze-dim);
color: var(--inv-bronze);
}
.inventory-hall .btn-delete {
color: #6e665c;
border: 1px solid transparent;
}
.inventory-hall .btn-delete:hover {
color: #b5453a;
border-color: #b5453a;
}
.inventory-hall .drag-handle {
color: var(--inv-iron);
font-size: 0.9rem;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.inventory-hall .list-item-stockpile:hover .drag-handle,
.inventory-hall .list-item-spellbook:hover .drag-handle {
color: var(--inv-bronze-dim);
opacity: 0.8;
}
.inventory-hall .item-name-input,
.inventory-hall .spellbook-body-input {
color: #e8d8b8;
background: transparent;
border-bottom: 1px solid transparent;
}
.inventory-hall .item-name-input:hover,
.inventory-hall .spellbook-body-input:hover {
border-bottom-color: var(--inv-iron);
}
.inventory-hall .item-name-input:focus,
.inventory-hall .spellbook-body-input:focus {
outline: none;
border-bottom-color: var(--inv-bronze);
}
.inventory-hall .list-item-stockpile {
border-bottom-color: rgba(70, 74, 82, 0.35);
}
.inventory-hall .list-item-stockpile:first-child {
border-top-color: rgba(70, 74, 82, 0.35);
}
.inventory-hall .list-item-stockpile:hover {
background: rgba(42, 40, 37, 0.2);
}
.inventory-hall .list-item-stockpile--low {
background: rgba(107, 79, 40, 0.08);
border-color: rgba(178, 138, 82, 0.2);
}
.inventory-hall .list-item-stockpile--depleted {
background: rgba(107, 79, 40, 0.05);
border-color: rgba(178, 138, 82, 0.15);
opacity: 0.6;
}
.inventory-hall .list-item-spellbook {
border-bottom-color: rgba(70, 74, 82, 0.35);
}
.inventory-hall .list-item-spellbook:first-child {
border-top-color: rgba(70, 74, 82, 0.35);
}
.inventory-hall .list-item-spellbook:hover {
background: rgba(42, 40, 37, 0.2);
}
.inventory-hall .items-section .items-header h3 {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #c8a070;
}
.inventory-hall .items-count {
background: rgba(107, 79, 40, 0.15);
border: 1px solid var(--inv-bronze-dim);
color: var(--inv-bronze);
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
}
.inventory-gg-portal {
margin: 2.5rem auto 0;
text-align: center;
}
.inventory-gg-portal__link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0.55rem 1.5rem;
background: oklch(0.10 0.025 145 / 0.9);
border: 1px solid oklch(0.32 0.09 140);
color: oklch(0.68 0.12 140);
font-family:
"Cinzel",
Georgia,
serif;
font-size: 10.5px;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 0 18px oklch(0.20 0.07 140 / 0.35), inset 0 1px 0 oklch(0.28 0.06 140 / 0.25);
transition:
background 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.inventory-gg-portal__link:hover {
background: oklch(0.14 0.03 145);
color: oklch(0.82 0.14 140);
border-color: oklch(0.48 0.11 140);
box-shadow: 0 0 32px oklch(0.32 0.12 140 / 0.5), inset 0 1px 0 oklch(0.30 0.06 140 / 0.2);
}
.inventory-gg-portal__tag {
opacity: 0.55;
font-size: 13px;
}
.inventory-gg-portal__arrow {
opacity: 0.65;
font-family: "JetBrains Mono", monospace;
}
.inventory-hall-footer {
margin-top: 3rem;
text-align: center;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
letter-spacing: 2.5px;
color: #6b5a3a;
text-transform: uppercase;
}
.inventory-hall-footer__danger {
margin-bottom: 1.5rem;
}
.inv-delete-modal {
position: fixed;
inset: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
}
.inv-delete-modal[hidden] {
display: none;
}
.inv-delete-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 8, 4, 0.78);
}
.inv-delete-modal__panel {
position: relative;
z-index: 1;
width: 90%;
max-width: 360px;
padding: 2rem 1.75rem 1.75rem;
text-align: center;
background:
linear-gradient(
180deg,
#3a2e20 0%,
#26180c 100%);
border: 1px solid rgba(154, 112, 32, 0.4);
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.07),
inset 0 -2px 6px rgba(0, 0, 0, 0.5),
0 16px 48px rgba(0, 0, 0, 0.7);
}
.inv-delete-modal__title {
margin: 0 0 0.75rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--inv-bronze);
text-shadow: 0 0 12px var(--inv-bronze-glow);
}
.inv-delete-modal__msg {
margin: 0 0 1.5rem;
font-size: 0.88rem;
color: #c8b890;
line-height: 1.5;
}
.inv-delete-modal__msg strong {
color: #f0e4c8;
}
.inv-delete-modal__actions {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.inv-delete-modal__cancel {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #b09060;
background:
linear-gradient(
180deg,
#3a3228 0%,
#2a2418 100%);
border: 1px solid rgba(107, 90, 58, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
padding: 0.4rem 1.1rem;
transition: color 0.15s, border-color 0.15s;
}
.inv-delete-modal__cancel:hover {
color: #daa830;
border-color: rgba(154, 112, 32, 0.5);
}
.inv-delete-modal__confirm {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #c87060;
background:
linear-gradient(
180deg,
#3e2820 0%,
#2e1810 100%);
border: 1px solid rgba(180, 80, 60, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 180, 160, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
padding: 0.4rem 1.1rem;
transition:
color 0.15s,
border-color 0.15s,
background 0.15s;
}
.inv-delete-modal__confirm:hover {
color: #e88870;
border-color: rgba(200, 100, 80, 0.6);
background:
linear-gradient(
180deg,
#4e3028 0%,
#3a2018 100%);
}
.btn-inv-back {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--inv-bronze);
text-decoration: none;
padding: 0.3rem 0.75rem;
border: 1px solid var(--inv-bronze-dim);
background: rgba(154, 112, 32, 0.12);
transition:
color 0.15s,
background 0.15s,
border-color 0.15s;
}
.btn-inv-back:hover {
color: #f0cc60;
border-color: var(--inv-bronze);
background: rgba(218, 168, 48, 0.18);
}
.btn-inv-delete {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--inv-bronze-dim);
background:
linear-gradient(
180deg,
#3a3228 0%,
#2a2418 100%);
border: 1px solid rgba(154, 112, 32, 0.35);
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.06),
inset 0 -1px 2px rgba(0, 0, 0, 0.4),
0 2px 6px rgba(0, 0, 0, 0.35);
cursor: pointer;
padding: 0.4rem 1.25rem;
transition:
color 0.15s,
border-color 0.15s,
background 0.15s;
}
.btn-inv-delete:hover {
color: #c87060;
border-color: rgba(180, 80, 60, 0.5);
background:
linear-gradient(
180deg,
#3e2e24 0%,
#2e1e14 100%);
}
.inv-form-label {
display: block;
margin-bottom: 0.4rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #b09060;
}
.inv-form-input {
width: 100%;
background: rgba(15, 10, 4, 0.5);
border: 1px solid rgba(140, 105, 50, 0.35);
color: #f0e4c8;
padding: 0.55rem 0.75rem;
font-size: 0.95rem;
box-sizing: border-box;
transition: border-color 0.15s;
}
.inv-form-input:focus {
outline: none;
border-color: var(--inv-bronze);
}
.inv-form-select {
background: rgba(15, 10, 4, 0.5);
border: 1px solid rgba(140, 105, 50, 0.35);
color: #f0e4c8;
padding: 0.55rem 2rem 0.55rem 0.75rem;
font-size: 0.9rem;
box-sizing: border-box;
transition: border-color 0.15s;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
.inv-form-select:focus {
outline: none;
border-color: var(--inv-bronze);
}
.inv-add-row {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.inv-add-row .inv-form-input {
flex: 1;
min-width: 0;
width: auto;
}
.inv-add-row__btn {
flex: none !important;
width: auto !important;
min-width: 5rem;
padding: 0.55rem 1.25rem;
white-space: nowrap;
}
.inv-add-grid {
display: grid;
grid-template-columns: 1fr 80px auto;
gap: 0.5rem;
align-items: stretch;
}
.inv-add-grid .inv-form-input {
width: auto;
min-width: 0;
}
.inv-add-grid__count {
}
.inv-add-grid__btn {
flex: none !important;
width: auto !important;
min-width: 5rem;
padding: 0.55rem 1.25rem;
white-space: nowrap;
align-self: stretch;
}
.inv-add-grid__unit {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.inv-add-grid__tap {
grid-column: 2 / span 2;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.inv-add-grid__unit .inv-form-input,
.inv-add-grid__tap .inv-form-select {
width: 100%;
}
.inv-form-hint {
display: block;
margin-top: 0.4rem;
font-size: 0.8rem;
color: #8a7050;
}
.inv-form-hint code {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.85em;
color: var(--inv-bronze);
background: rgba(154, 112, 32, 0.12);
padding: 0.1em 0.3em;
}
.inv-form-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
}
.inventory-hall .btn-primary {
background: var(--inv-bronze-dim);
border-color: var(--inv-bronze);
color: #f0e4c8;
box-shadow: none;
}
.inventory-hall .btn-primary:hover {
background: var(--inv-bronze);
border-color: var(--inv-bronze);
color: #1c1408;
}
.inventory-page {
max-width: 760px;
margin: 0 auto;
padding: 2rem 1rem;
}
.inventory-page-header {
margin-bottom: 2rem;
}
.inventory-page-header h1 {
margin: 0;
font-size: 2rem;
font-weight: 700;
}
.inventory-section {
margin-bottom: 2rem;
}
.inventory-section-label {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.6rem;
}
.inventory-section-label::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
.inventory-section-name {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
.inventory-new-link {
font-size: 0.8rem;
color: var(--accent);
text-decoration: none;
white-space: nowrap;
padding: 0.15rem 0.45rem;
border-radius: 4px;
transition: background 0.15s;
}
.inventory-new-link:hover {
background: var(--accent-muted);
}
.inventory-list {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.inventory-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1.1rem;
border-bottom: 1px solid var(--border);
transition: background 0.15s;
}
.inventory-row:last-child {
border-bottom: none;
}
.inventory-row:hover {
background: var(--surface-2);
}
.inventory-row-name {
flex: 1;
font-size: 0.95rem;
font-weight: 600;
min-width: 0;
}
.inventory-row-name a {
color: var(--text);
text-decoration: none;
transition: color 0.15s;
}
.inventory-row-name a:hover {
color: var(--accent);
}
.inventory-row-meta {
display: flex;
align-items: center;
gap: 0.6rem;
flex-shrink: 0;
}
.inventory-stock-badge,
.inventory-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
height: 1.4rem;
padding: 0 0.45rem;
background: var(--accent-muted);
border: 1px solid var(--accent);
border-radius: 4px;
font-size: 0.78rem;
font-weight: 700;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.inventory-stock-badge--depleted {
background: transparent;
border-color: var(--border);
color: var(--text-muted);
}
.inventory-row-hint {
font-size: 0.82rem;
color: var(--text-muted);
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inventory-row-action {
flex-shrink: 0;
}
.inventory-action-link {
font-size: 0.82rem;
color: var(--text-muted);
text-decoration: none;
padding: 0.2rem 0.55rem;
border: 1px solid var(--border);
border-radius: 4px;
transition: color 0.15s, border-color 0.15s;
}
.inventory-action-link:hover {
color: var(--accent);
border-color: var(--accent);
}
.inventory-empty {
padding: 0.85rem 1.1rem;
font-size: 0.88rem;
color: var(--text-muted);
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 8px;
}
.inventory-empty a {
color: var(--accent);
text-decoration: none;
}
.inventory-empty a:hover {
text-decoration: underline;
}
.gameboard-container {
position: relative;
background-color: transparent;
}
.gameboard-container::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 180px 180px;
mix-blend-mode: multiply;
}
.gameboard-container > * {
position: relative;
z-index: 1;
}
.gameboard-container .stack-column {
background:
radial-gradient(
140% 110% at 30% 15%,
rgba(90, 82, 76, 0.73) 0%,
#3a3430 42%,
#181512 100%);
border: 1px solid #181512;
border-radius: 2px;
box-shadow:
inset 0 1.5px 0 rgba(255, 230, 200, 0.15),
inset 0 -2px 3px rgba(0, 0, 0, 0.7),
inset 0 0 0 1px rgba(0, 0, 0, 0.85),
0 3px 8px rgba(0, 0, 0, 0.7),
0 8px 22px rgba(0, 0, 0, 0.5);
position: relative;
}
.gameboard-container .stack-column::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30%;
background:
linear-gradient(
180deg,
transparent,
rgba(80, 35, 15, 0.2));
pointer-events: none;
border-radius: 0 0 2px 2px;
z-index: 1;
}
.gameboard-container .stack-column::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background-image:
radial-gradient(
circle,
#6a6258 0%,
#3a3430 50%,
transparent 53%),
radial-gradient(
circle,
#6a6258 0%,
#3a3430 50%,
transparent 53%);
background-size: 11px 11px, 11px 11px;
background-repeat: no-repeat;
background-position: 7px 9px, calc(100% - 7px) 9px;
border-radius: 2px;
}
.gameboard-container .stack-header {
background:
linear-gradient(
180deg,
#1a1612 0%,
#181512 100%);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85), inset 0 -1px 0 rgba(255, 240, 220, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.95);
border-radius: 1px 1px 0 0;
padding: 10px 14px 10px 24px;
}
.gameboard-container .stack-name {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #c8c2b6;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 240, 220, 0.07);
}
.gameboard-container .stack-card-count {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.6rem;
color: #6e665c;
letter-spacing: 0.08em;
}
.gameboard-container .stack-phase-divider {
color: #6e665c;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.62rem;
letter-spacing: 0.06em;
}
.gameboard-container .stack-phase-divider::before,
.gameboard-container .stack-phase-divider::after {
background: rgba(108, 100, 92, 0.25);
}
.gameboard-container .stack-empty-placeholder {
border: 1px dashed rgba(108, 100, 92, 0.18);
background: rgba(14, 11, 9, 0.45);
color: #6e665c;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.68rem;
letter-spacing: 0.08em;
border-radius: 1px;
}
.gameboard-container .zone-header {
border-bottom: 1px solid rgba(108, 100, 92, 0.28);
}
.gameboard-container .zone-title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.28em;
color: #6e665c;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 240, 220, 0.05);
}
.gameboard-container .card-counts {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.68rem;
letter-spacing: 0.07em;
color: #6e665c;
}
.gameboard-container .quick-capture-input {
background: rgba(16, 12, 10, 0.82);
border: 1px solid rgba(40, 38, 35, 0.9);
color: #c8c2b6;
box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.65), inset -1px -1px 0 rgba(255, 240, 220, 0.03);
}
.gameboard-container .quick-capture-input:focus {
outline: 1px solid rgba(232, 90, 26, 0.45);
outline-offset: 0;
box-shadow:
inset 2px 2px 6px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(232, 90, 26, 0.28),
0 0 14px rgba(232, 90, 26, 0.12);
}
.app-nav {
background-color: #1a1815;
background-image:
repeating-linear-gradient(
94deg,
transparent 0 9px,
rgba(0, 0, 0, 0.12) 9px 10px,
transparent 10px 22px),
linear-gradient(
180deg,
#2a2825,
#1a1815);
border-color: #0e0d0b;
box-shadow:
inset 0 1px 0 rgba(255, 245, 230, 0.08),
0 2px 0 rgba(0, 0, 0, 0.5),
0 3px 10px rgba(0, 0, 0, 0.7);
}
.app-nav-group {
border-color: #2a2825;
}
.app-nav-group .app-nav-item {
border-bottom-color: #2a2825;
}
.app-nav-item {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6e665c;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 240, 220, 0.05);
transition: color 0.15s, text-shadow 0.15s;
}
.app-nav-item.active {
color: #c8c2b6;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 240, 220, 0.1);
}
.app-nav-item:hover {
color: #d8d2c6;
text-shadow:
0 -1px 0 rgba(0, 0, 0, 0.85),
0 1px 0 rgba(255, 240, 220, 0.08),
0 0 10px rgba(232, 90, 26, 0.35);
}
.app-nav-tick {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.65rem;
font-weight: 500;
color: #6e665c;
letter-spacing: 0.12em;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.nav-badge {
background: rgba(42, 40, 37, 0.9);
color: #9a9288;
border: 1px solid rgba(70, 65, 60, 0.6);
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.nav-badge--empty {
background: rgba(30, 28, 25, 0.7);
color: #6e665c;
border-color: rgba(50, 48, 45, 0.4);
}
.nav-badge--stasis {
background: rgba(35, 40, 50, 0.6);
color: rgba(140, 150, 180, 0.6);
border-color: rgba(50, 60, 80, 0.4);
}
@media (min-width: 768px) {
.app-nav {
border-bottom: 1px solid #1c1a17;
}
}
.body-live-preview {
margin-top: 0.35rem;
padding: 0.4rem 0.75rem;
background: rgba(0, 0, 0, 0.15);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text);
white-space: pre-wrap;
word-break: break-word;
}
.body-editor-wrapper {
position: relative;
}
.body-editor {
display: block;
width: 100%;
min-height: 4.5rem;
padding: 0.5rem 0.75rem;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 1rem;
font-family:
system-ui,
-apple-system,
sans-serif;
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
overflow-y: auto;
box-sizing: border-box;
outline: none;
cursor: text;
}
.body-editor:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
}
.deck-edit-form .body-editor {
padding: 0.35rem 0.6rem;
font-size: 0.9rem;
min-height: 4rem;
}
.body-editor:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
pointer-events: none;
}
.body-ref-chip {
display: inline;
border-radius: 3px;
padding: 1px 6px;
font-weight: 600;
cursor: default;
user-select: none;
white-space: nowrap;
}
.body-ref-chip--spellbook {
background: rgba(74, 158, 255, 0.18);
color: #93c5fd;
border: 1px solid rgba(74, 158, 255, 0.35);
}
.body-ref-chip--stockpile {
background: rgba(251, 191, 36, 0.15);
color: #fcd34d;
border: 1px solid rgba(251, 191, 36, 0.30);
}
.body-ref-chip--day-weekday {
background: rgba(34, 197, 94, 0.18);
color: #86efac;
border: 1px solid rgba(34, 197, 94, 0.35);
}
.body-ref-chip--day-weekend {
background: rgba(16, 185, 129, 0.18);
color: #6ee7b7;
border: 1px solid rgba(16, 185, 129, 0.35);
}
.body-ref-chip--day {
background: rgba(20, 184, 166, 0.18);
color: #5eead4;
border: 1px solid rgba(20, 184, 166, 0.35);
}
.body-ref-chip--suggest {
background: rgba(167, 139, 250, 0.18);
color: #c4b5fd;
border: 1px solid rgba(167, 139, 250, 0.35);
}
.body-dsl-cheatsheet {
margin-top: 0.5rem;
padding: 0.5rem 0.7rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.body-dsl-row {
display: flex;
align-items: baseline;
gap: 0.6rem;
font-size: 0.78rem;
flex-wrap: wrap;
}
.body-dsl-label {
color: var(--text-muted);
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
min-width: 5.5rem;
flex-shrink: 0;
}
.body-dsl-examples {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: baseline;
}
.body-dsl-examples code {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.8rem;
color: var(--text-muted);
background: none;
}
.body-dsl-examples code[data-insert] {
cursor: pointer;
padding: 1px 3px;
border-radius: 3px;
transition: background 120ms ease;
}
.body-dsl-examples code[data-insert]:hover {
background: rgba(255, 255, 255, 0.05);
}
.body-dsl-examples code[data-insert]:active {
background: rgba(167, 139, 250, 0.15);
}
.body-dsl-examples .body-ref-chip {
font-size: 0.75rem;
padding: 0px 5px;
}
.body-dsl-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.95rem;
height: 0.95rem;
margin-left: 0.25rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--text-muted);
font-family:
ui-sans-serif,
system-ui,
sans-serif;
font-size: 0.65rem;
font-style: italic;
font-weight: 700;
line-height: 1;
cursor: help;
user-select: none;
position: relative;
vertical-align: middle;
}
.body-dsl-info:hover,
.body-dsl-info:focus {
background: rgba(167, 139, 250, 0.22);
color: #c4b5fd;
outline: none;
}
.body-dsl-info[data-tooltip]:hover::after,
.body-dsl-info[data-tooltip]:focus::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 0.4rem);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
padding: 0.3rem 0.55rem;
background: rgba(15, 16, 25, 0.96);
border: 1px solid rgba(167, 139, 250, 0.35);
border-radius: 4px;
color: #e5e7eb;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.72rem;
font-style: normal;
font-weight: 500;
letter-spacing: 0.01em;
pointer-events: none;
z-index: 10;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.body-autocomplete {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
margin-bottom: 4px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
z-index: 50;
max-height: 160px;
overflow-y: auto;
}
.body-autocomplete-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.65rem;
cursor: pointer;
font-size: 0.88rem;
color: var(--text);
}
.body-autocomplete-item:hover,
.body-autocomplete-item.is-active {
background: var(--surface);
}
.body-autocomplete-badge {
font-size: 0.68rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 0.06em;
flex-shrink: 0;
}
.body-autocomplete-badge--spellbook {
background: rgba(74, 158, 255, 0.2);
color: #93c5fd;
}
.body-autocomplete-badge--stockpile {
background: rgba(251, 191, 36, 0.18);
color: #fcd34d;
}
.inv-barrel {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.85rem 1.5rem;
background-color: var(--inv-wood-warm);
background-image:
repeating-linear-gradient(
90deg,
transparent 0 14px,
var(--inv-plank-seam) 14px 15px,
transparent 15px 30px),
linear-gradient(
180deg,
var(--inv-wood-warm) 0%,
var(--inv-wood-1) 60%,
var(--inv-wood-2) 100%);
border-top: 4px solid var(--inv-iron-hoop);
border-bottom: 4px solid var(--inv-iron-hoop);
border-radius: 14px;
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.5),
inset 0 6px 18px rgba(0, 0, 0, 0.55),
inset 0 -6px 18px rgba(0, 0, 0, 0.45),
inset 0 0 32px var(--inv-candle-bloom),
0 6px 18px rgba(0, 0, 0, 0.55);
}
.inv-barrel::before,
.inv-barrel::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 1px;
background: var(--inv-iron-hoop-hi);
pointer-events: none;
}
.inv-barrel::before {
top: 1px;
}
.inv-barrel::after {
bottom: 1px;
}
.inv-barrel__label {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--inv-candle);
text-shadow: 0 0 8px var(--inv-candle-glow), 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.inv-barrel__count {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.78rem;
color: var(--inv-bronze);
font-variant-numeric: tabular-nums;
}
.inv-barrel--header {
justify-content: space-between;
margin-bottom: 2rem;
}
.inv-barrel--header .rename-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.inv-barrel--header .rename-emoji {
font-size: 1.75rem;
}
.inv-barrel--header .rename-input {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.5rem;
font-weight: 700;
color: #f5ecd8;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 0 0 0.1rem;
min-width: 0;
transition: border-color 0.2s;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.inv-barrel--header .rename-input:hover {
border-bottom-color: var(--inv-iron);
}
.inv-barrel--header .rename-input:focus {
outline: none;
border-bottom-color: var(--inv-bronze);
}
.inv-barrel--header .rename-save {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 1rem;
background: var(--inv-bronze-dim);
color: #e8d8b8;
border: 1px solid var(--inv-bronze);
cursor: pointer;
flex-shrink: 0;
}
.inv-barrel__header-right {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.inv-tome {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.85rem 1.5rem 0.85rem 2.5rem;
background-color: #4a2418;
background-image:
repeating-linear-gradient(
45deg,
transparent 0 6px,
rgba(0, 0, 0, 0.08) 6px 7px,
transparent 7px 14px),
linear-gradient(
180deg,
#5a2c1e 0%,
#3c1c12 100%);
border-radius: 4px 14px 14px 4px;
box-shadow:
inset 4px 0 0 var(--inv-iron-hoop),
inset 5px 0 0 1px var(--inv-candle-dim),
inset 0 0 0 1px rgba(0, 0, 0, 0.55),
inset 0 0 28px var(--inv-candle-bloom),
0 6px 18px rgba(0, 0, 0, 0.55);
}
.inv-tome__label {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--inv-candle);
text-shadow: 0 0 8px var(--inv-candle-glow), 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.inv-tome__count {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.78rem;
color: var(--inv-bronze);
font-variant-numeric: tabular-nums;
}
.inv-tome--header {
justify-content: space-between;
margin-bottom: 2rem;
}
.inv-tome--header .rename-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.inv-tome--header .rename-emoji {
font-size: 1.75rem;
}
.inv-tome--header .rename-input {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.5rem;
font-weight: 700;
color: #f5ecd8;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 0 0 0.1rem;
min-width: 0;
transition: border-color 0.2s;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.inv-tome--header .rename-input:hover {
border-bottom-color: var(--inv-iron);
}
.inv-tome--header .rename-input:focus {
outline: none;
border-bottom-color: var(--inv-bronze);
}
.inv-tome--header .rename-save {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 1rem;
background: var(--inv-bronze-dim);
color: #e8d8b8;
border: 1px solid var(--inv-bronze);
cursor: pointer;
flex-shrink: 0;
}
.inv-tome__header-right {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.inv-scatter {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
user-select: none;
z-index: 0;
}
.inv-scatter > span {
position: absolute;
font-size: 1.4rem;
line-height: 1;
white-space: nowrap;
filter: sepia(0.35) hue-rotate(-12deg);
text-shadow: 0 0 10px var(--inv-candle-bloom);
transform-origin: center;
}
.inventory-hall > *:not(.inv-scatter) {
position: relative;
z-index: 1;
}
/* app/javascript/stylesheets/_graffiti.css */
.graffiti-garden-page {
position: relative;
isolation: isolate;
min-height: calc(100vh - 60px);
background: transparent;
}
.garden-wall-substrate {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
background: #11151b;
overflow: hidden;
}
.garden-wall-substrate > .gg-basalt-wall {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.garden-wall {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.garden-light-shift {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(
circle at 22% 8%,
rgba(122, 176, 80, 0.18),
transparent 55%),
radial-gradient(
circle at 78% 12%,
rgba(94, 140, 60, 0.10),
transparent 60%);
opacity: 0.5;
mix-blend-mode: screen;
animation: garden-light-breathe 22s ease-in-out infinite alternate;
}
@keyframes garden-light-breathe {
0% {
opacity: 0.32;
}
50% {
opacity: 0.62;
}
100% {
opacity: 0.40;
}
}
.garden-vine {
position: fixed;
top: 0;
width: 180px;
height: 60vh;
z-index: 3;
pointer-events: none;
overflow: visible;
transform-origin: top center;
will-change: transform;
}
.garden-vine--tl {
left: 0;
animation: vine-sway-tl 22s ease-in-out infinite alternate;
}
.garden-vine--tr {
right: 0;
transform: scaleX(-1);
animation: vine-sway-tr 27s ease-in-out infinite alternate;
}
.garden-vine--tc {
left: 50%;
width: 220px;
transform: translateX(-50%);
animation: vine-sway-tc 31s ease-in-out infinite alternate;
}
@keyframes vine-sway-tl {
0% {
transform: rotate(-0.5deg);
}
100% {
transform: rotate(0.6deg);
}
}
@keyframes vine-sway-tr {
0% {
transform: scaleX(-1) rotate(-0.6deg);
}
100% {
transform: scaleX(-1) rotate(0.5deg);
}
}
@keyframes vine-sway-tc {
0% {
transform: translateX(-50%) rotate(-0.4deg);
}
100% {
transform: translateX(-50%) rotate(0.4deg);
}
}
.vine-stem {
fill: none;
stroke: #2a4818;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.vine-stem--thin {
stroke-width: 1.6;
opacity: 0.7;
}
.vine-branch {
fill: none;
stroke: #3a5c22;
stroke-width: 1.8;
stroke-linecap: round;
}
.vine-leaf {
fill: #3e6428;
opacity: 0.72;
}
.vine-leaf--dark {
fill: #2a4a18;
opacity: 0.55;
}
.vine-tendril {
fill: none;
stroke: #4a6c30;
stroke-width: 0.9;
stroke-linecap: round;
opacity: 0.5;
}
.garden-scatter {
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
}
.garden-scatter span {
position: absolute;
font-size: 1.3rem;
color: #3a5828;
user-select: none;
line-height: 1;
transition: opacity 6s ease-in-out;
}
.garden-scatter span:nth-child(7n) {
animation: scatter-shimmer-a 9s ease-in-out infinite alternate;
}
.garden-scatter span:nth-child(11n) {
animation: scatter-shimmer-b 13s ease-in-out infinite alternate;
}
@keyframes scatter-shimmer-a {
0% {
filter: brightness(1);
}
100% {
filter: brightness(1.6);
}
}
@keyframes scatter-shimmer-b {
0% {
filter: brightness(0.85);
}
100% {
filter: brightness(1.4);
}
}
.garden-content {
position: relative;
z-index: 5;
max-width: none;
margin: 0;
padding: 0;
pointer-events: none;
}
.garden-content > * {
pointer-events: auto;
}
.garden-lintel {
position: fixed;
top: 0.9rem;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.35rem 1.1rem 0.5rem;
background: transparent;
border: 0;
margin: 0;
}
.garden-lintel__peg {
color: #4a6c38;
font-size: 0.9rem;
opacity: 0.55;
flex-shrink: 0;
}
.garden-lintel__board {
flex: 1;
text-align: center;
}
.garden-lintel__title {
position: relative;
display: inline-block;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
margin: 0;
line-height: 1.1;
}
.garden-title-shadow {
position: absolute;
inset: 0;
color: #0e1c08;
transform: translate(1px, 1.5px);
user-select: none;
pointer-events: none;
}
.garden-title-face {
position: relative;
color: #86a862;
text-shadow: 0 0 16px rgba(80, 130, 48, 0.28), 0 0 40px rgba(50, 90, 28, 0.12);
}
.garden-lintel__sub {
display: none;
}
.garden-stone-rule {
display: none;
}
.garden-mark-form-wrap {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: min(720px, 94vw);
z-index: 6;
padding: 0.85rem 1.25rem 1.1rem;
background:
linear-gradient(
to top,
rgba(4, 8, 2, 0.62),
rgba(4, 8, 2, 0.0));
border-top: 1px solid rgba(60, 100, 40, 0.18);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.garden-mark-form {
padding: 0;
}
.garden-mark-form form {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.85rem;
}
.garden-register-row {
display: contents;
}
.garden-register-label {
display: none;
}
.garden-register-options {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-end;
}
.garden-register-opt {
display: flex;
align-items: center;
gap: 0.35rem;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.62rem;
letter-spacing: 0.18em;
color: rgba(120, 160, 80, 0.45);
cursor: pointer;
text-transform: uppercase;
padding: 0.18rem 0.45rem;
border-radius: 1px;
transition: color 0.18s, background 0.18s;
}
.garden-register-opt:hover {
color: rgba(160, 200, 100, 0.75);
}
.garden-register-opt input[type=radio] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
.garden-register-opt:has(input[type=radio]:checked) {
color: #c8e88a;
text-shadow: 0 0 6px rgba(150, 210, 80, 0.55);
}
.garden-register-opt:has(input[type=radio]:focus-visible) {
outline: 1px dashed rgba(150, 210, 80, 0.5);
outline-offset: 2px;
}
.garden-disposition-options {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-end;
margin-top: 0.5rem;
padding-top: 0.35rem;
border-top: 1px solid rgba(60, 100, 40, 0.18);
}
.garden-disposition-opt--fade {
color: rgba(100, 140, 160, 0.45);
}
.garden-disposition-opt--fade:hover {
color: rgba(140, 180, 200, 0.75);
}
.garden-disposition-opt--fade:has(input[type=radio]:checked) {
color: #a8d4e8;
text-shadow: 0 0 6px rgba(80, 160, 210, 0.45);
}
.garden-mark--weather {
filter: saturate(0.6);
}
.garden-mark--weather .garden-mark__body {
color: rgba(200, 220, 180, 0.75);
}
.garden-body-input {
display: block;
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(60, 100, 40, 0.32);
color: #d8eab8;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 1.05rem;
line-height: 1.65;
padding: 0.5rem 0.25rem 0.45rem;
resize: none;
min-height: 2.4rem;
max-height: 6rem;
box-sizing: border-box;
outline: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
transition: border-color 0.2s;
}
.garden-body-input:focus {
border-bottom-color: rgba(140, 200, 80, 0.7);
}
.garden-body-input::placeholder {
color: rgba(90, 120, 68, 0.45);
font-style: italic;
}
.garden-form-submit {
margin: 0;
}
.garden-mark-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: transparent;
border: 0;
padding: 0.35rem 0.5rem;
cursor: pointer;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
color: rgba(160, 200, 100, 0.68);
transition: color 0.15s, transform 0.12s;
}
.garden-mark-btn::after {
content: "\2192";
font-size: 1.05rem;
line-height: 1;
color: rgba(160, 200, 100, 0.65);
transition: transform 0.18s, color 0.18s;
}
.garden-mark-btn:hover {
color: #d6f08a;
}
.garden-mark-btn:hover::after {
color: #d6f08a;
transform: translateX(3px);
}
.garden-mark-btn:active {
transform: translateY(1px);
}
.garden-mark-btn__shadow,
.garden-mark-btn__face {
display: inline;
position: static;
color: inherit;
transform: none;
}
.garden-mark-btn__shadow {
display: none;
}
.garden-form-errors {
margin-bottom: 0.75rem;
padding: 0.5rem 0.75rem;
background: rgba(70, 18, 18, 0.22);
border: 1px solid rgba(110, 38, 38, 0.38);
font-size: 0.86rem;
color: #c07060;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
}
.garden-form-errors p {
margin: 0;
}
.garden-ambient-canvas {
position: fixed;
inset: 0;
z-index: 3;
pointer-events: none;
overflow: visible;
}
.garden-ambient-mark {
position: absolute;
pointer-events: none;
transform: rotate(var(--ambient-rot, 2deg)) scale(var(--ambient-scale, 1.0));
transform-origin: left top;
font-size: clamp(0.9rem, 2vw, 1.6rem);
user-select: none;
line-height: 1.3;
}
.garden-ambient-mark--dominant {
z-index: 1;
}
.garden-ambient-mark--angular-caps {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.garden-ambient-mark--flowing-lc {
font-family:
"Caveat",
"Segoe Script",
cursive;
font-style: normal;
font-weight: 400;
letter-spacing: 0.03em;
text-transform: none;
line-height: 1.7;
font-size: clamp(0.85rem, 1.6vw, 1.3rem);
max-width: min(260px, 30vw);
white-space: pre-line;
}
.garden-ambient-mark--etched-line {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-weight: 300;
letter-spacing: 0.28em;
text-transform: uppercase;
font-size: clamp(0.7rem, 1.3vw, 1.0rem);
}
.garden-ambient-mark--stencil-block {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: clamp(1.0rem, 1.9vw, 1.5rem);
}
.garden-ambient-mark--bold-lc {
font-family: system-ui, sans-serif;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: none;
font-size: clamp(0.9rem, 1.8vw, 1.4rem);
}
.garden-ambient-mark--playful {
font-family: system-ui, sans-serif;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: none;
font-size: clamp(0.75rem, 1.4vw, 1.1rem);
}
.garden-ambient-mark--wildstyle {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-weight: 800;
letter-spacing: 0.20em;
text-transform: uppercase;
font-size: clamp(1.1rem, 2.2vw, 1.8rem);
}
.garden-ambient-mark--dense-ink {
font-family:
"Spectral",
Georgia,
serif;
font-weight: 300;
font-style: normal;
letter-spacing: 0.02em;
text-transform: none;
font-size: clamp(0.58rem, 1.1vw, 0.82rem);
line-height: 1.65;
max-width: min(240px, 28vw);
white-space: pre-line;
}
.garden-ambient-mark--flowing-calligraphy {
font-family:
"Tangerine",
"Segoe Script",
cursive;
font-style: normal;
font-weight: 400;
letter-spacing: 0.06em;
text-transform: none;
line-height: 1.6;
font-size: clamp(1.4rem, 2.8vw, 2.8rem);
max-width: min(320px, 38vw);
white-space: pre-line;
}
.garden-ambient-mark--spray {
filter: url(#markSpray);
}
.garden-ambient-mark--chalk {
filter: url(#markChalk);
}
.garden-ambient-mark--scratch {
filter: none;
text-shadow:
0 1px 0 rgba(0, 0, 0, 0.90),
-1px 0 0 rgba(0, 0, 0, 0.45),
1px 0 0 rgba(0, 0, 0, 0.45);
}
.garden-ambient-mark--marker {
filter: url(#markMarker);
}
.garden-ambient-mark--ink {
filter: none;
}
.garden-ambient-mark--stencil {
filter: url(#markStencil);
}
.garden-ambient-mark--paint-pen {
filter: url(#markPaintPen);
}
.garden-ambient-mark--lumin .ambient-svg {
display: none;
}
.garden-ambient-mark--lumin {
opacity: 1;
}
.garden-ambient-mark--lumin .lumin-glyphs {
display: inline-block;
font-family:
"Tangerine",
"Italianno",
cursive;
font-weight: 400;
line-height: 0.95;
letter-spacing: 0.005em;
white-space: nowrap;
font-size: 34px;
padding: 0.04em 0.5em;
color: #eef6ff;
mix-blend-mode: screen;
transform: skewX(var(--lumin-skew, -3deg));
transform-origin: center left;
animation: lumin-breath 10s ease-in-out var(--lumin-breath-delay, 0ms) infinite, lumin-lumen 6.5s ease-in-out var(--lumin-lumen-delay, 0ms) infinite;
will-change: opacity, filter;
}
.garden-ambient-mark--lumin .lumin-glyphs.lumin-flow {
font-family:
"Italianno",
"Tangerine",
cursive;
}
@keyframes lumin-breath {
0%, 100% {
opacity: var(--breath-high, 0.92);
}
50% {
opacity: calc(var(--breath-high, 0.92) - 0.13);
}
}
@keyframes lumin-lumen {
0%, 100% {
filter: brightness(0.975);
}
42% {
filter: brightness(1.06);
}
74% {
filter: brightness(1.00);
}
}
.wild-spark-glint {
transform-origin: center;
animation: wild-spark-glint 10s ease-in-out infinite;
}
@keyframes wild-spark-glint {
0%, 92%, 100% {
opacity: 1;
}
95%, 97% {
opacity: 0.15;
}
}
@media (prefers-reduced-motion: reduce) {
.wild-spark-glint {
animation: none !important;
}
}
.garden-ambient-mark--lumin .lumin-hue-silver {
color: #eef6ff;
text-shadow:
0 0 1px rgba(238, 246, 255, 0.98),
0 0 2px rgba(238, 246, 255, 0.80),
0 0 5px rgba(196, 214, 236, 0.50),
0 0 11px rgba(196, 214, 236, 0.30),
0 0 22px rgba(186, 206, 232, 0.17),
0 0 44px rgba(186, 206, 232, 0.08),
0 0 80px rgba(186, 206, 232, 0.035);
}
.garden-ambient-mark--lumin .lumin-hue-viridian {
color: #e6fff6;
text-shadow:
0 0 1px rgba(230, 255, 246, 0.98),
0 0 2px rgba(230, 255, 246, 0.80),
0 0 5px rgba(120, 240, 200, 0.52),
0 0 11px rgba(120, 240, 200, 0.31),
0 0 22px rgba(110, 232, 194, 0.18),
0 0 44px rgba(110, 232, 194, 0.085),
0 0 80px rgba(110, 232, 194, 0.04);
}
.garden-ambient-mark--lumin .lumin-hue-pale-gold {
color: #fff7e6;
text-shadow:
0 0 1px rgba(255, 247, 230, 0.98),
0 0 2px rgba(255, 247, 230, 0.82),
0 0 5px rgba(242, 206, 128, 0.52),
0 0 11px rgba(242, 206, 128, 0.31),
0 0 22px rgba(236, 196, 116, 0.18),
0 0 44px rgba(236, 196, 116, 0.085),
0 0 80px rgba(236, 196, 116, 0.04);
}
.garden-ambient-mark--lumin .lumin-hue-lavender {
color: #f4f0ff;
text-shadow:
0 0 1px rgba(244, 240, 255, 0.98),
0 0 2px rgba(244, 240, 255, 0.80),
0 0 5px rgba(198, 170, 250, 0.52),
0 0 11px rgba(198, 170, 250, 0.31),
0 0 22px rgba(190, 162, 246, 0.18),
0 0 44px rgba(190, 162, 246, 0.085),
0 0 80px rgba(190, 162, 246, 0.04);
}
.garden-ambient-mark--lumin .lumin-glyphs.lumin-dominant {
font-family: "Tangerine", cursive;
font-weight: 700;
font-size: 52px;
color: #fff8ea;
text-shadow:
0 0 1.5px rgba(255, 250, 238, 1.00),
0 0 3px rgba(255, 250, 238, 0.90),
0 0 6px rgba(244, 208, 132, 0.58),
0 0 13px rgba(242, 204, 124, 0.34),
0 0 26px rgba(238, 198, 116, 0.20),
0 0 52px rgba(120, 236, 198, 0.13),
0 0 100px rgba(112, 228, 192, 0.055);
}
.garden-ambient-mark--lumin .lumin-aged,
.garden-ambient-mark--lumin .lumin-older {
animation: none;
}
.garden-ambient-mark--lumin .lumin-aged.lumin-mem-gold {
color: rgba(214, 206, 184, 0.56);
text-shadow:
0 0 1px rgba(214, 206, 184, 0.55),
0 0 2px rgba(206, 192, 160, 0.30),
0 0 6px rgba(236, 196, 116, 0.07);
}
.garden-ambient-mark--lumin .lumin-aged.lumin-mem-viridian {
color: rgba(196, 218, 214, 0.55);
text-shadow:
0 0 1px rgba(196, 218, 214, 0.55),
0 0 2px rgba(170, 202, 196, 0.30),
0 0 6px rgba(110, 232, 194, 0.07);
}
.garden-ambient-mark--lumin .lumin-older {
color: rgba(186, 200, 206, 0.40);
text-shadow: 0 0 1px rgba(186, 200, 206, 0.42), 0 0 2px rgba(166, 184, 188, 0.20);
}
@media (prefers-reduced-motion: reduce) {
.garden-ambient-mark--lumin .lumin-glyphs {
animation: none !important;
}
}
.garden-ambient-mark--cobalt {
color: #3a6abf;
text-shadow:
0 0 12px rgba(58, 106, 191, 0.65),
0 0 4px rgba(40, 80, 160, 0.45),
0 1px 0 rgba(4, 8, 2, 0.85);
}
.garden-ambient-mark--oxblood {
color: #8c2020;
text-shadow:
0 0 12px rgba(140, 32, 32, 0.60),
0 0 4px rgba(110, 20, 20, 0.45),
0 1px 0 rgba(4, 2, 2, 0.85);
}
.garden-ambient-mark--ivory {
color: #d8ceb0;
text-shadow: 0 1px 3px rgba(4, 8, 2, 0.85);
}
.garden-ambient-mark--sage {
color: #8a9c78;
text-shadow: 0 1px 3px rgba(4, 8, 2, 0.85);
}
.garden-ambient-mark--stone {
color: #4a5048;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.80), 0 1px 0 rgba(0, 0, 0, 0.90);
}
.garden-ambient-mark--cadmium {
color: #d4a020;
text-shadow: 0 0 10px rgba(212, 160, 32, 0.55), 0 1px 0 rgba(4, 2, 0, 0.90);
}
.garden-ambient-mark--ultramarine {
color: #2244a8;
text-shadow: 0 0 10px rgba(34, 68, 168, 0.60), 0 1px 0 rgba(2, 4, 14, 0.90);
}
.garden-ambient-mark--vermilion {
color: #c03820;
text-shadow: 0 0 10px rgba(192, 56, 32, 0.55), 0 1px 0 rgba(10, 2, 2, 0.90);
}
.garden-ambient-mark--black {
color: #2a2e26;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95);
}
.garden-ambient-mark--rust {
color: #8c4820;
text-shadow: 0 0 6px rgba(140, 72, 32, 0.45), 0 1px 0 rgba(6, 2, 0, 0.90);
}
.garden-ambient-mark--pink {
color: #d85890;
text-shadow: 0 0 8px rgba(216, 88, 144, 0.55), 0 1px 0 rgba(4, 2, 4, 0.85);
}
.garden-ambient-mark--lime {
color: #7ac840;
text-shadow: 0 0 8px rgba(122, 200, 64, 0.50), 0 1px 0 rgba(2, 4, 2, 0.85);
}
.garden-ambient-mark--marigold {
color: #d4a020;
text-shadow: 0 0 8px rgba(212, 160, 32, 0.50), 0 1px 0 rgba(4, 2, 0, 0.85);
}
.garden-ambient-mark--sky {
color: #50a8d8;
text-shadow: 0 0 8px rgba(80, 168, 216, 0.50), 0 1px 0 rgba(2, 4, 8, 0.85);
}
.garden-ambient-mark--teal {
color: #18a090;
text-shadow:
0 0 18px rgba(24, 160, 144, 0.75),
0 0 8px rgba(18, 140, 128, 0.60),
-1px -1px 0 rgba(255, 255, 255, 0.20),
0 2px 0 rgba(0, 0, 0, 0.90);
}
.garden-ambient-mark--deep-purple {
color: #5828a8;
text-shadow:
0 0 18px rgba(88, 40, 168, 0.75),
0 0 8px rgba(70, 30, 140, 0.60),
-1px -1px 0 rgba(255, 255, 255, 0.18),
0 2px 0 rgba(0, 0, 0, 0.90);
}
.garden-ambient-mark--ultramarine-dark {
color: #1828a0;
text-shadow:
0 0 18px rgba(24, 40, 160, 0.75),
0 0 8px rgba(18, 30, 130, 0.60),
-1px -1px 0 rgba(255, 255, 255, 0.18),
0 2px 0 rgba(0, 0, 0, 0.90);
}
.garden-ambient-mark--sepia {
color: #786048;
text-shadow: 0 1px 2px rgba(2, 2, 2, 0.90);
}
.garden-ambient-mark--silver {
color: #d4dce8;
text-shadow:
0 0 16px rgba(200, 218, 240, 0.80),
0 0 6px rgba(180, 200, 230, 0.60),
0 1px 0 rgba(4, 6, 12, 0.85);
}
.garden-ambient-mark--pale-gold {
color: #e8dcb0;
text-shadow:
0 0 16px rgba(232, 220, 160, 0.75),
0 0 6px rgba(210, 195, 130, 0.55),
0 1px 0 rgba(8, 6, 2, 0.85);
}
.garden-ambient-mark--viridian {
color: #90c8a8;
text-shadow:
0 0 16px rgba(130, 200, 160, 0.75),
0 0 6px rgba(100, 170, 130, 0.55),
0 1px 0 rgba(2, 8, 4, 0.85);
}
.garden-ambient-mark--lavender {
color: #c8b8e0;
text-shadow:
0 0 16px rgba(200, 180, 230, 0.75),
0 0 6px rgba(170, 150, 210, 0.55),
0 1px 0 rgba(6, 4, 10, 0.85);
}
.garden-marks-canvas {
position: fixed;
inset: 0;
z-index: 4;
pointer-events: none;
overflow: visible;
}
.garden-mark {
position: absolute;
pointer-events: auto;
max-width: min(280px, 26vw);
transform: rotate(var(--mark-rot, 0deg)) scale(var(--mark-scale, 1));
transform-origin: left top;
cursor: default;
}
.garden-mark[data-dominant=true] {
--mark-scale: 1.55;
z-index: 1;
}
.garden-mark[data-dominant=true].garden-mark--field .garden-mark__body {
text-shadow:
0 0 28px rgba(190, 240, 90, 0.78),
0 0 12px rgba(160, 220, 70, 0.65),
0 0 4px rgba(120, 200, 50, 0.55),
0 1px 0 rgba(4, 8, 2, 0.95);
}
.garden-mark[data-dominant=true].garden-mark--stanza .garden-mark__body {
color: #e8d8a8;
text-shadow: 0 1px 6px rgba(4, 8, 2, 0.92);
}
.garden-mark[data-fresh=true].garden-mark--field .garden-mark__body {
animation: mark-bloom-in 1.4s ease-out both;
}
.garden-mark[data-fresh=true].garden-mark--stanza .garden-mark__body {
animation: mark-chalk-stroke 1.6s ease-out both;
}
@keyframes mark-bloom-in {
0% {
opacity: 0;
text-shadow: 0 0 36px rgba(190, 240, 90, 0.95), 0 0 18px rgba(160, 220, 70, 0.85);
transform: scale(1.08);
}
60% {
opacity: 1;
text-shadow:
0 0 22px rgba(180, 230, 85, 0.85),
0 0 8px rgba(150, 210, 60, 0.7),
0 1px 0 rgba(4, 8, 2, 0.95);
transform: scale(1.02);
}
100% {
opacity: 1;
text-shadow:
0 0 14px rgba(170, 230, 80, 0.70),
0 0 4px rgba(120, 200, 50, 0.55),
0 1px 0 rgba(4, 8, 2, 0.95);
transform: scale(1);
}
}
@keyframes mark-chalk-stroke {
0% {
clip-path: inset(0 100% 0 0);
opacity: 0.4;
}
20% {
opacity: 1;
}
100% {
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
.garden-mark__body {
margin: 0 0 0.5rem;
white-space: pre-wrap;
word-break: break-word;
}
.garden-mark--field .garden-mark__body {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 1.08rem;
font-weight: 700;
letter-spacing: 0.09em;
line-height: 1.5;
color: #d0f07a;
text-transform: uppercase;
text-shadow:
0 0 14px rgba(170, 230, 80, 0.70),
0 0 4px rgba(120, 200, 50, 0.55),
0 1px 0 rgba(4, 8, 2, 0.95);
filter: url(#markRough);
}
.garden-mark--stanza .garden-mark__body {
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 0.95rem;
font-style: italic;
line-height: 1.85;
color: #d8eab8;
letter-spacing: 0.01em;
text-shadow: 0 1px 4px rgba(4, 8, 2, 0.90);
}
.garden-mark__controls {
display: flex;
gap: 0.6rem;
opacity: 0;
transition: opacity 0.18s;
pointer-events: none;
}
.garden-mark:hover .garden-mark__controls,
.garden-mark--selected .garden-mark__controls {
opacity: 1;
pointer-events: auto;
}
.garden-mark__action {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.58rem;
letter-spacing: 0.12em;
color: #4a6830;
text-decoration: none;
text-transform: lowercase;
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.15s;
line-height: 1;
}
.garden-mark__action:hover {
color: #7ab250;
}
.garden-mark__action--erase:hover {
color: #b06848;
}
.garden-marks-mobile {
display: none;
flex-direction: column;
gap: 2rem;
margin-top: 2.5rem;
}
.garden-marks-mobile .garden-mark {
position: static;
max-width: 100%;
transform-origin: left center;
}
@media (max-width: 768px) {
.garden-marks-canvas {
display: none;
}
.garden-marks-mobile {
display: flex;
}
.garden-marks-mobile .garden-mark__controls {
opacity: 1;
pointer-events: auto;
}
}
.garden-empty-state {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 1.2rem;
color: rgba(110, 150, 80, 0.55);
font-style: italic;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
z-index: 4;
}
.garden-empty-state p {
margin: 0;
}
.garden-footer {
position: fixed;
top: 1rem;
left: 1rem;
display: flex;
align-items: center;
gap: 1rem;
border: 0;
margin: 0;
padding: 0;
}
.garden-back-link {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.62rem;
letter-spacing: 0.18em;
color: rgba(110, 150, 80, 0.55);
text-decoration: none;
transition: color 0.15s;
text-transform: uppercase;
}
.garden-back-link:hover {
color: #84b260;
}
.garden-footer__mark {
display: none;
}
.garden-author-blurb {
position: fixed;
bottom: 5%;
left: 50%;
transform: translateX(-50%) rotate(-1.2deg);
z-index: 2;
pointer-events: none;
text-align: center;
max-width: 520px;
padding: 0 1.5rem;
}
.garden-author-blurb__text {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #d0f07a;
text-shadow:
0 0 14px rgba(170, 230, 80, 0.60),
0 0 5px rgba(120, 200, 50, 0.45),
0 1px 0 rgba(4, 8, 2, 0.95);
margin: 0;
line-height: 1.6;
}
.garden-wall-footer {
position: fixed;
top: 1rem;
left: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
z-index: 3;
}
.garden-wall-footer__link {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.62rem;
letter-spacing: 0.18em;
color: rgba(110, 150, 80, 0.50);
text-decoration: none;
text-transform: uppercase;
transition: color 0.15s;
}
.garden-wall-footer__link:hover {
color: #84b260;
}
.garden-wall-footer__mark {
font-size: 0.75rem;
color: rgba(80, 120, 50, 0.30);
}
.garden-edit-form {
padding: 1.5rem 0;
}
.garden-edit-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1rem;
}
.garden-cancel-link {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.7rem;
letter-spacing: 0.1em;
color: #567844;
text-decoration: none;
transition: color 0.15s;
}
.garden-cancel-link:hover {
color: #84b260;
}
.graffiti-dashboard-slot {
margin: 0.6rem 0 0.2rem;
padding: 0.55rem 1.4rem 0.4rem;
border-left: 2px solid rgba(76, 112, 44, 0.3);
background: transparent;
}
.graffito-body--dashboard {
margin: 0 0 0.3rem;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 1.02rem;
line-height: 1.6;
color: #c8d8b0;
white-space: pre-wrap;
word-break: break-word;
font-style: italic;
}
.graffiti-dashboard-slot .graffito-register-badge {
display: inline-block;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #486030;
opacity: 0.65;
}
.graffiti-gameboard-corner {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
z-index: 2;
max-width: 280px;
pointer-events: none;
}
.graffiti-gameboard-corner__text {
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 0.76rem;
font-style: italic;
color: rgba(130, 170, 90, 0.32);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ambient-svg {
display: block;
overflow: visible;
}
.garden-ambient-mark {
opacity: var(--ambient-opacity, 0.20);
}
.garden-ambient-mark g.garden-ambient-mark > path {
fill: currentColor;
stroke: none;
}
.garden-ambient-mark .ambient-svg > g[class^=ambient-composition-] {
opacity: 0.80;
}
.garden-ambient-mark .ambient-svg .ambient-block-poly,
.garden-ambient-mark .ambient-svg .ambient-block-blob {
opacity: 0.55;
}
.garden-ambient-mark .ambient-svg > polygon.ambient-crown-poly {
opacity: 0.75;
}
.ambient-fallback {
fill: currentColor;
font-size: 20px;
}
.ambient-drip-stem {
stroke: currentColor;
fill: none;
}
.ambient-drip-bulb {
fill: currentColor;
stroke: none;
}
.ambient-stencil-bridge {
fill: #272a24;
opacity: 0.85;
}
.ambient-halo path {
stroke: currentColor;
fill: none;
}
@media (prefers-reduced-motion: reduce) {
.garden-light-shift,
.garden-vine--tl,
.garden-vine--tr,
.garden-vine--tc,
.garden-scatter span,
.garden-mark[data-fresh=true] .garden-mark__body {
animation: none !important;
}
.garden-mark[data-fresh=true].garden-mark--stanza .garden-mark__body {
clip-path: none !important;
opacity: 1 !important;
}
}
/* app/javascript/stylesheets/_ritual.css */
:root {
--shrine-amber: #c8841a;
--shrine-amber-dim: rgba(200, 132, 26, 0.18);
--shrine-surface: #141410;
--shrine-field-bg: rgba(255, 255, 255, 0.03);
}
.shrine-chamber {
min-height: calc(100vh - 3rem);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
background: var(--shrine-surface);
}
.shrine-altar {
width: 100%;
max-width: 580px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.shrine-label {
font-family: "Cinzel", serif;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.38em;
color: var(--shrine-amber);
text-transform: uppercase;
margin: 0;
opacity: 0.38;
align-self: flex-start;
}
.shrine-field {
width: 100%;
position: relative;
}
.shrine-scroll-wrap {
position: relative;
filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.7)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
transform-origin: center center;
transition: transform 0.3s ease;
}
.shrine-scroll__cap {
width: 100%;
height: 22px;
background:
linear-gradient(
180deg,
#8a5e22 0%,
#5e3e12 40%,
#3a2408 75%,
#221408 100%);
position: relative;
z-index: 1;
}
.shrine-scroll__cap::before {
content: "";
position: absolute;
left: -10px;
right: -10px;
top: 0;
bottom: 0;
background: inherit;
border-radius: 4px;
box-shadow: -5px 0 8px rgba(0, 0, 0, 0.45), 5px 0 8px rgba(0, 0, 0, 0.45);
}
.shrine-scroll__cap::after {
content: "";
position: absolute;
left: -10px;
right: -10px;
top: 3px;
height: 2px;
background: rgba(210, 160, 65, 0.28);
border-radius: 2px;
}
.shrine-scroll__cap--top {
border-radius: 4px 4px 0 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(210, 160, 65, 0.22);
}
.shrine-scroll__cap--bottom {
border-radius: 0 0 4px 4px;
background:
linear-gradient(
180deg,
#221408 0%,
#3a2408 25%,
#5e3e12 60%,
#8a5e22 100%);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(210, 160, 65, 0.16);
}
.shrine-scroll__cap--bottom::after {
top: auto;
bottom: 3px;
height: 2px;
border-radius: 2px;
}
.shrine-scroll__rod-end {
display: block;
position: absolute;
top: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background:
radial-gradient(
circle at 38% 35%,
#a07030 0%,
#6a4018 55%,
#3a2008 100%);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(220, 170, 70, 0.2);
z-index: 2;
}
.shrine-scroll__rod-end--left {
left: -20px;
}
.shrine-scroll__rod-end--right {
right: -20px;
}
.shrine-scroll-wrap--tier-3 {
transform: scaleY(0.984);
}
.shrine-scroll-wrap--tier-4 {
transform: scaleY(0.966);
}
.shrine-scroll-wrap--tier-5 {
transform: scaleY(0.945);
}
.shrine-burn-overlay {
position: absolute;
inset: 22px 0;
pointer-events: none;
opacity: 0;
z-index: 2;
}
@keyframes shrine-burn-wave {
0% {
opacity: 0;
background:
radial-gradient(
ellipse 80% 35% at 50% 100%,
rgba(255, 130, 20, 0.95) 0%,
transparent 100%);
}
18% {
opacity: 1;
background:
radial-gradient(
ellipse 100% 55% at 50% 90%,
rgba(255, 80, 10, 0.92) 0%,
rgba(180, 40, 5, 0.65) 50%,
transparent 100%);
}
45% {
background:
linear-gradient(
to top,
rgba(14, 6, 1, 0.98) 0%,
rgba(70, 25, 4, 0.92) 30%,
rgba(210, 65, 8, 0.72) 55%,
transparent 80%);
}
78% {
background:
linear-gradient(
to top,
rgba(10, 5, 1, 0.99) 0%,
rgba(25, 12, 3, 0.96) 65%,
rgba(80, 35, 8, 0.45) 90%,
transparent 100%);
}
100% {
opacity: 1;
background: rgba(10, 5, 1, 0.92);
}
}
.shrine-burn-overlay--active {
animation: shrine-burn-wave 1.1s ease-in forwards;
}
.shrine-burn-overlay--ash {
background: rgba(22, 16, 8, 0.88);
opacity: 1;
}
.shrine-textarea {
width: 100%;
box-sizing: border-box;
min-height: 14rem;
background: rgba(10, 7, 3, 0.7);
border: 1px solid rgba(200, 132, 26, 0.12);
border-bottom: 2px solid rgba(200, 132, 26, 0.18);
border-radius: 0;
color: rgba(220, 195, 155, 0.85);
font-family:
"Cormorant Garamond",
Georgia,
serif;
font-size: 1.08rem;
line-height: 1.78;
letter-spacing: 0.01em;
padding: 1.2rem 1.3rem;
resize: vertical;
outline: none;
caret-color: var(--shrine-amber);
box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(200, 132, 26, 0.04);
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
font-size 0.32s ease,
line-height 0.32s ease,
letter-spacing 0.32s ease,
padding 0.32s ease,
color 0.32s ease;
}
.shrine-textarea--tier-1 {
font-size: 1.01rem;
line-height: 1.64;
letter-spacing: 0.002em;
padding: 1.05rem 1.15rem;
}
.shrine-textarea--tier-2 {
font-size: 0.93rem;
line-height: 1.5;
letter-spacing: -0.01em;
padding: 0.9rem 1.0rem;
color: rgba(215, 188, 142, 0.88);
}
.shrine-textarea--tier-3 {
font-size: 0.84rem;
line-height: 1.35;
letter-spacing: -0.022em;
padding: 0.72rem 0.82rem;
color: rgba(208, 178, 130, 0.9);
}
.shrine-textarea--tier-4 {
font-size: 0.75rem;
line-height: 1.2;
letter-spacing: -0.034em;
padding: 0.55rem 0.65rem;
color: rgba(200, 168, 116, 0.92);
}
.shrine-textarea--tier-5 {
font-size: 0.66rem;
line-height: 1.1;
letter-spacing: -0.046em;
padding: 0.38rem 0.48rem;
color: rgba(192, 155, 100, 0.95);
}
.shrine-textarea:focus {
border-color: rgba(200, 132, 26, 0.35);
border-bottom-color: rgba(200, 132, 26, 0.6);
box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(200, 132, 26, 0.08);
}
.shrine-textarea::placeholder {
color: rgba(200, 132, 26, 0.2);
font-style: italic;
font-size: 0.9rem;
}
.shrine-ash-scar {
width: 100%;
height: 0;
overflow: hidden;
opacity: 0;
}
.shrine-ash-scar--visible {
height: 8px;
opacity: 1;
background:
radial-gradient(
ellipse 48% 100% at 28% 55%,
rgba(52, 38, 22, 0.85) 0%,
transparent 100%),
radial-gradient(
ellipse 38% 100% at 74% 45%,
rgba(38, 28, 14, 0.7) 0%,
transparent 100%),
linear-gradient(
90deg,
transparent 0%,
rgba(32, 22, 10, 0.55) 10%,
rgba(52, 38, 20, 0.82) 32%,
rgba(44, 32, 16, 0.92) 50%,
rgba(50, 36, 18, 0.75) 70%,
rgba(28, 20, 8, 0.5) 90%,
transparent 100%);
border-radius: 50%;
filter: blur(2px);
}
.shrine-released {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.78rem;
letter-spacing: 0.3em;
color: rgba(200, 132, 26, 0.7);
pointer-events: none;
opacity: 0;
background: rgba(10, 7, 3, 0.6);
border-radius: 4px 4px 0 0;
text-transform: uppercase;
}
.shrine-actions {
width: 100%;
display: flex;
justify-content: flex-end;
}
.shrine-release-btn {
background:
linear-gradient(
180deg,
rgba(60, 35, 8, 0.9) 0%,
rgba(35, 18, 4, 0.95) 100%);
border: 1px solid rgba(200, 132, 26, 0.35);
border-top-color: rgba(200, 132, 26, 0.2);
border-radius: 0 0 4px 4px;
color: rgba(200, 132, 26, 0.8);
padding: 0.45rem 1.4rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition:
color 0.2s ease,
border-color 0.2s ease,
background 0.2s ease;
width: 100%;
text-align: center;
}
.shrine-release-btn:hover {
color: var(--shrine-amber);
border-color: rgba(200, 132, 26, 0.6);
background:
linear-gradient(
180deg,
rgba(80, 45, 10, 0.95) 0%,
rgba(50, 25, 6, 0.98) 100%);
}
.shrine-release-btn:active {
color: #ffaa40;
}
.shrine-release-ember {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background:
radial-gradient(
circle,
#ffaa40 0%,
#cc4400 65%,
transparent 100%);
box-shadow: 0 0 4px 2px rgba(210, 70, 10, 0.4);
margin-right: 0.55rem;
vertical-align: middle;
position: relative;
top: -1px;
animation: shrine-ember-pulse 2.2s ease-in-out infinite alternate;
}
@keyframes shrine-ember-pulse {
0% {
opacity: 0.55;
box-shadow: 0 0 3px 1px rgba(210, 70, 10, 0.28);
}
100% {
opacity: 1;
box-shadow: 0 0 8px 3px rgba(230, 90, 10, 0.65);
}
}
@media (prefers-reduced-motion: reduce) {
.shrine-release-ember {
animation: none;
opacity: 0.8;
}
}
@media (max-width: 599px) {
.shrine-textarea {
min-height: 10rem;
font-size: 1rem;
}
.shrine-scroll__cap {
height: 18px;
}
.shrine-scroll__cap::before {
left: -6px;
right: -6px;
}
.shrine-scroll__cap::after {
left: -6px;
right: -6px;
}
.shrine-scroll__rod-end {
width: 12px;
height: 12px;
top: 3px;
}
.shrine-scroll__rod-end--left {
left: -14px;
}
.shrine-scroll__rod-end--right {
right: -14px;
}
}
:root {
--ritual-amber: #c8841a;
--ritual-amber-dim: rgba(200, 132, 26, 0.18);
--ritual-amber-glow: rgba(200, 132, 26, 0.28);
--ritual-wood: #1a1008;
--ritual-wood-mid: #221608;
--ritual-wood-light: #2e1e0c;
--ritual-cream: #e8d8b0;
--ritual-cream-muted: #8a7250;
--ritual-rule: rgba(180, 140, 70, 0.15);
--ritual-rule-bright: rgba(180, 140, 70, 0.3);
}
main:has(.ritual-table) {
background: #0a0907;
}
.ritual-table {
min-height: calc(100vh - 3rem);
padding: 0 1.5rem 4rem;
max-width: 1720px;
margin: 0 auto;
color: var(--ritual-cream);
}
.ritual-lintel {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem 2rem 1.25rem;
margin-bottom: 2rem;
background:
radial-gradient(
ellipse 60% 80% at 50% 60%,
rgba(220, 190, 140, 0.04) 0%,
transparent 70%),
linear-gradient(
180deg,
#15110c 0%,
#100c08 80%,
#0a0907 100%);
border-bottom: 1px solid rgba(120, 95, 55, 0.25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.5);
}
.ritual-lintel__board {
text-align: center;
}
.ritual-lintel h1,
.ritual-lintel__board h1 {
margin: 0 0 0.2rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: clamp(1.1rem, 3vw, 1.6rem);
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(245, 232, 200, 0.88);
text-shadow: 0 0 24px rgba(220, 175, 90, 0.18);
}
.ritual-lintel small {
display: block;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ritual-cream-muted);
}
.ritual-lintel__return {
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
}
.ritual-lintel__return-link {
font-family: "JetBrains Mono", monospace;
font-size: 0.65rem;
letter-spacing: 0.1em;
color: var(--ritual-cream-muted);
text-decoration: none;
text-transform: uppercase;
transition: color 0.15s;
}
.ritual-lintel__return-link:hover {
color: var(--ritual-amber);
}
.ritual-stack-toggle {
display: flex;
align-items: center;
gap: 0.3rem;
background: transparent;
border: 1px solid rgba(180, 140, 70, 0.2);
border-radius: 3px;
color: var(--ritual-cream-muted);
font-family: "JetBrains Mono", monospace;
font-size: 0.62rem;
letter-spacing: 0.1em;
padding: 0.3rem 0.6rem;
cursor: pointer;
text-transform: uppercase;
transition: color 0.15s, border-color 0.15s;
}
.ritual-stack-toggle:hover,
.ritual-stack-toggle[aria-expanded=true] {
color: var(--ritual-amber);
border-color: rgba(200, 132, 26, 0.45);
}
.ritual-stack-toggle__icon {
font-size: 0.8rem;
opacity: 0.85;
}
.ritual-sidebar[hidden] {
display: none !important;
}
.ritual-notice {
background: rgba(200, 132, 26, 0.12);
border-left: 2px solid var(--ritual-amber);
padding: 0.6rem 1rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--ritual-cream);
border-radius: 2px;
}
.ritual-notice--alert {
background: rgba(180, 60, 40, 0.15);
border-left-color: #c05040;
}
.ritual-station {
margin-bottom: 2rem;
background: var(--ritual-wood-mid);
border: 1px solid var(--ritual-rule);
border-radius: 4px;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.04), 0 4px 16px rgba(0, 0, 0, 0.5);
}
.ritual-stations-drawer {
margin: 8px 0 0;
}
.ritual-stations-drawer__toggle {
display: block;
padding: 0.45rem 0.75rem;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ritual-text-muted);
border: 1px solid var(--ritual-rule);
border-radius: 3px;
cursor: pointer;
user-select: none;
list-style: none;
}
.ritual-stations-drawer__toggle::-webkit-details-marker {
display: none;
}
.ritual-stations-drawer__toggle::before {
content: "\25b6 ";
font-size: 0.6rem;
opacity: 0.5;
}
.ritual-stations-drawer[open] .ritual-stations-drawer__toggle::before {
content: "\25bc ";
}
.ritual-stations-drawer__toggle:hover {
color: var(--ritual-cream);
border-color: rgba(180, 140, 70, 0.35);
}
.ritual-station__lintel {
display: flex;
align-items: baseline;
gap: 0.75rem;
padding: 0.7rem 1.25rem;
background:
linear-gradient(
180deg,
#281808 0%,
#1e1008 100%);
border-bottom: 1px solid var(--ritual-rule);
}
.ritual-station__title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ritual-amber);
}
.ritual-station__subtitle {
font-size: 0.7rem;
color: var(--ritual-cream-muted);
font-style: italic;
}
.ritual-station__body {
padding: 1.25rem;
}
.ritual-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-bottom: 0.85rem;
}
.ritual-field__label {
font-family: "JetBrains Mono", monospace;
font-size: 0.6rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ritual-cream-muted);
}
.ritual-field__input {
-webkit-appearance: none;
appearance: none;
background: #1a1008;
color-scheme: dark;
border: 1px solid rgba(180, 140, 70, 0.2);
border-radius: 3px;
color: var(--ritual-cream);
padding: 0.45rem 0.6rem;
font-family: inherit;
font-size: 0.9rem;
outline: none;
caret-color: var(--ritual-amber);
transition: border-color 0.15s;
width: 100%;
box-sizing: border-box;
}
.ritual-field__input:focus {
border-color: rgba(200, 132, 26, 0.5);
box-shadow: 0 0 0 2px rgba(200, 132, 26, 0.08);
}
.ritual-field__input::placeholder {
color: rgba(138, 114, 80, 0.6);
}
.ritual-field__input--mono {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.82rem;
}
.ritual-field__input--narrow {
width: 5rem;
}
.ritual-select,
.ritual-date {
-webkit-appearance: none;
appearance: none;
background: #1e1208;
border: 1px solid rgba(180, 140, 70, 0.25);
border-radius: 3px;
color: var(--ritual-cream);
padding: 0.3rem 0.5rem;
font-family: inherit;
font-size: 0.8rem;
outline: none;
caret-color: var(--ritual-amber);
transition: border-color 0.15s;
box-sizing: border-box;
width: 100%;
}
.ritual-select:focus,
.ritual-date:focus {
border-color: rgba(200, 132, 26, 0.5);
}
.ritual-select option {
background: #1e1208;
color: var(--ritual-cream);
}
.ritual-date {
color-scheme: dark;
}
.ritual-cast-btn {
background:
linear-gradient(
180deg,
#3a2010,
#271508);
border: 1px solid rgba(200, 132, 26, 0.4);
border-radius: 3px;
color: var(--ritual-amber);
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.12em;
padding: 0.35rem 0.8rem;
cursor: pointer;
white-space: nowrap;
text-transform: uppercase;
transition:
border-color 0.15s,
box-shadow 0.15s,
color 0.15s;
}
.ritual-cast-btn:hover {
border-color: rgba(200, 132, 26, 0.7);
box-shadow: 0 0 8px rgba(200, 132, 26, 0.18);
color: #e09a2a;
}
.ritual-submit-btn {
background:
linear-gradient(
180deg,
#3a2010,
#271508);
border: 1px solid rgba(200, 132, 26, 0.4);
border-radius: 3px;
color: var(--ritual-amber);
font-family: "JetBrains Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.15em;
padding: 0.5rem 1.5rem;
cursor: pointer;
text-transform: uppercase;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ritual-submit-btn:hover {
border-color: rgba(200, 132, 26, 0.7);
box-shadow: 0 0 12px rgba(200, 132, 26, 0.2);
}
.ritual-link-btn {
background: transparent;
border: none;
color: var(--ritual-cream-muted);
padding: 0;
font-size: 0.8rem;
cursor: pointer;
font-family: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.ritual-link-btn:hover {
color: var(--ritual-amber);
}
.ritual-link-btn--quiet {
color: rgba(138, 114, 80, 0.55);
}
.ritual-shelf {
margin-bottom: 1.25rem;
}
.ritual-shelf:last-child {
margin-bottom: 0;
}
.ritual-shelf__label {
font-family: "JetBrains Mono", monospace;
font-size: 0.58rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ritual-cream-muted);
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--ritual-rule);
margin-bottom: 0.6rem;
}
.ritual-shelf__cards {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.ritual-shelf-card {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--ritual-rule);
border-radius: 4px;
padding: 0.65rem 0.75rem;
width: 200px;
flex-shrink: 0;
border-left-width: 3px;
box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.03);
}
.ritual-shelf-card--red {
border-left-color: var(--color-red);
}
.ritual-shelf-card--green {
border-left-color: var(--color-green);
}
.ritual-shelf-card--blue {
border-left-color: var(--color-blue);
}
.ritual-shelf-card--white {
border-left-color: var(--color-white);
}
.ritual-shelf-card--black {
border-left-color: var(--color-black);
}
.ritual-shelf-card--colorless {
border-left-color: var(--border);
}
.ritual-shelf-card__name {
font-size: 0.8rem;
font-weight: 600;
color: var(--ritual-cream);
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ritual-shelf-card__body {
font-size: 0.7rem;
color: var(--ritual-cream-muted);
line-height: 1.35;
margin-bottom: 0.5rem;
min-height: 1.8em;
}
.ritual-shelf-card__cast {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.ritual-shelf-card__cast form {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.ritual-parchment {
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--ritual-rule);
border-radius: 3px;
padding: 1.25rem;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}
.ritual-parchment__fields {
margin-bottom: 0.75rem;
}
.ritual-parchment__row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.75rem;
margin-bottom: 0.85rem;
}
@media (max-width: 699px) {
.ritual-parchment__row {
grid-template-columns: 1fr;
}
}
.ritual-parchment__actions {
display: flex;
justify-content: flex-end;
}
.ritual-station--basho .ritual-station__body {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem 1.25rem;
background: var(--shrine-surface, #141410);
}
.ritual-station--basho .shrine-field {
width: 100%;
max-width: 520px;
}
.ritual-basho-textarea {
width: 100%;
box-sizing: border-box;
min-height: 6rem;
font-size: 0.95rem;
border-radius: 4px 4px 0 0;
}
.ritual-murmur-form {
display: flex;
gap: 0.5rem;
align-items: flex-start;
margin-bottom: 1rem;
}
.ritual-murmur-input {
flex: 1;
min-width: 0;
resize: vertical;
}
.ritual-murmur-list {
list-style: none;
padding: 0;
margin: 0;
}
.ritual-murmur {
padding: 0.55rem 0;
border-bottom: 1px solid var(--ritual-rule);
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.ritual-murmur:last-child {
border-bottom: none;
}
.ritual-murmur-body {
color: var(--ritual-cream);
font-size: 0.9rem;
line-height: 1.45;
white-space: pre-wrap;
}
.ritual-murmur-actions {
display: flex;
gap: 0.75rem;
}
.ritual-empty {
color: var(--ritual-cream-muted);
font-style: italic;
font-size: 0.85rem;
margin: 0;
}
:root {
--spread-parchment: #f0e8ce;
--spread-parchment-dim: rgba(240, 232, 206, 0.06);
--spread-ink: #3a2a12;
--spread-ink-muted: rgba(58, 42, 18, 0.55);
--day-glow: rgba(255, 168, 64, 0.28);
--apse-came: #0a0806;
--apse-came-edge: rgba(220, 200, 165, 0.16);
--apse-came-rim: rgba(40, 32, 22, 0.85);
--apse-backlight-cool: rgba(150, 185, 255, 0.10);
--apse-backlight-warm: rgba(255, 195, 130, 0.10);
--pane-cool-0: #1a3a86;
--pane-cool-1: #186944;
--pane-cool-2: #3c1c7c;
--pane-cool-3: #1a4a5e;
--pane-cool-4: #2a248a;
--pane-warm-0: #6a3a16;
--pane-warm-1: #8a1c34;
--pane-warm-2: #8a6a1e;
--pane-warm-3: #7a2440;
--pane-warm-4: #74381e;
--pane-today-base: #5a3210;
--pane-today-lit: #d89a40;
--gilt-hi: #f0c460;
--gilt-lo: #6e4a14;
--apse-glass-noise: url("data:image/svg+xml;utf8,");
--apse-pane-motif: url("data:image/svg+xml;utf8,");
}
.ritual-desk {
display: block;
}
.ritual-spread-area {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
.ritual-spread {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
min-width: 0;
position: relative;
perspective: 1600px;
perspective-origin: 50% 30%;
transform-style: preserve-3d;
}
@media (max-width: 1099px) {
.ritual-spread {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.ritual-month {
position: relative;
background:
radial-gradient(
ellipse 110% 55% at 50% -8%,
var(--apse-backlight-cool) 0%,
transparent 62%),
linear-gradient(
180deg,
#3a2410 0%,
#281605 50%,
#1a0e04 100%);
border: 4px solid var(--apse-came);
border-radius: 3px;
overflow: hidden;
box-shadow:
inset 0 0 0 1px var(--apse-came-edge),
inset 0 1px 0 0 rgba(220, 230, 255, 0.10),
0 1px 0 0 rgba(0, 0, 0, 0.95),
0 10px 36px rgba(0, 0, 0, 0.78),
0 0 64px rgba(20, 30, 70, 0.18);
transform-style: preserve-3d;
}
.ritual-month--previous {
filter: brightness(0.82) saturate(0.92);
transform-origin: right center;
transform: rotateY(7deg);
cursor: pointer;
}
.ritual-month--next {
filter: brightness(0.82) saturate(0.92);
transform-origin: left center;
transform: rotateY(-7deg);
cursor: pointer;
}
@keyframes ritual-swing-previous {
0% {
transform: rotateY(7deg);
}
35% {
transform: rotateY(11deg);
}
65% {
transform: rotateY(4deg);
}
100% {
transform: rotateY(7deg);
}
}
@keyframes ritual-swing-next {
0% {
transform: rotateY(-7deg);
}
35% {
transform: rotateY(-11deg);
}
65% {
transform: rotateY(-4deg);
}
100% {
transform: rotateY(-7deg);
}
}
.ritual-month--previous.ritual-month--swinging {
animation: ritual-swing-previous 750ms ease-in-out;
}
.ritual-month--next.ritual-month--swinging {
animation: ritual-swing-next 750ms ease-in-out;
}
@media (max-width: 1099px) {
.ritual-month--previous,
.ritual-month--next {
transform: none;
transform-origin: unset;
}
}
@media (prefers-reduced-motion: reduce) {
.ritual-month--previous,
.ritual-month--next {
transform: none;
}
.ritual-month--previous.ritual-month--swinging,
.ritual-month--next.ritual-month--swinging {
animation: none;
}
}
.ritual-month--current {
background:
radial-gradient(
ellipse 110% 60% at 50% -10%,
var(--apse-backlight-warm) 0%,
transparent 60%),
radial-gradient(
ellipse 90% 45% at 50% 100%,
rgba(60, 90, 180, 0.10) 0%,
transparent 65%),
linear-gradient(
180deg,
#4a2c14 0%,
#3a2008 50%,
#2a1404 100%);
border-color: var(--apse-came);
box-shadow:
inset 0 0 0 1px rgba(220, 230, 255, 0.22),
inset 0 1px 0 0 rgba(240, 245, 255, 0.16),
0 1px 0 0 rgba(0, 0, 0, 0.95),
0 14px 44px rgba(0, 0, 0, 0.78),
0 0 90px rgba(80, 110, 200, 0.22);
}
.ritual-month__header {
display: flex;
align-items: center;
padding: 0.7rem 1rem 0.6rem;
background:
linear-gradient(
180deg,
rgba(255, 240, 210, 0.05) 0%,
transparent 30%),
linear-gradient(
180deg,
#16110b 0%,
#0c0805 100%);
border-bottom: 4px solid var(--apse-came);
box-shadow: inset 0 -1px 0 rgba(220, 195, 150, 0.08), inset 0 1px 0 rgba(255, 230, 195, 0.04);
}
.ritual-month__name {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(245, 228, 190, 0.82);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 0 12px rgba(220, 175, 90, 0.14);
}
.ritual-month__grid {
display: flex;
flex-direction: column;
gap: 0;
padding: 0.3rem 0.35rem 0.5rem;
}
.ritual-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 2px;
background: var(--apse-came);
overflow: visible;
}
.ritual-week:last-child {
margin-bottom: 0;
}
.ritual-week--header {
margin-bottom: 4px;
background: transparent;
gap: 2px;
}
.ritual-month__dow {
font-family: "JetBrains Mono", monospace;
font-size: 0.54rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(225, 205, 165, 0.62);
text-align: center;
padding: 0.25rem 0 0.15rem;
background:
linear-gradient(
180deg,
transparent 0%,
rgba(0, 0, 0, 0.25) 100%);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.ritual-day {
position: relative;
min-height: 110px;
border-radius: 0;
padding: 0.2rem 0.25rem;
cursor: default;
overflow: hidden;
background-color: var(--pane-cool-0);
background-image:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.015) 22%,
transparent 55%,
rgba(0, 0, 0, 0.20) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.40),
inset 0 0 16px rgba(0, 0, 0, 0.40);
transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.ritual-day:not(.ritual-day--empty)::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--apse-glass-noise);
background-size: 220px 220px;
mix-blend-mode: overlay;
opacity: 0.40;
pointer-events: none;
z-index: 0;
}
.ritual-day:not(.ritual-day--empty)::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--apse-pane-motif);
background-repeat: no-repeat;
background-position: center;
background-size: 60% auto;
mix-blend-mode: overlay;
opacity: 0.75;
pointer-events: none;
z-index: 0;
}
.ritual-day > * {
position: relative;
z-index: 1;
}
.ritual-day--tone-0 {
background-color: var(--pane-cool-0);
}
.ritual-day--tone-1 {
background-color: var(--pane-cool-1);
}
.ritual-day--tone-2 {
background-color: var(--pane-cool-2);
}
.ritual-day--tone-3 {
background-color: var(--pane-cool-3);
}
.ritual-day--tone-4 {
background-color: var(--pane-cool-4);
}
.ritual-day--in-lens.ritual-day--tone-0 {
background-color: var(--pane-warm-0);
}
.ritual-day--in-lens.ritual-day--tone-1 {
background-color: var(--pane-warm-1);
}
.ritual-day--in-lens.ritual-day--tone-2 {
background-color: var(--pane-warm-2);
}
.ritual-day--in-lens.ritual-day--tone-3 {
background-color: var(--pane-warm-3);
}
.ritual-day--in-lens.ritual-day--tone-4 {
background-color: var(--pane-warm-4);
}
.ritual-day:not(.ritual-day--empty):hover {
filter: brightness(1.18) saturate(1.05);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.40),
inset 0 0 22px rgba(255, 255, 255, 0.06),
inset 0 0 0 1px rgba(220, 230, 255, 0.18);
}
.ritual-day--empty {
pointer-events: none;
min-height: 110px;
background: #060509;
box-shadow: none;
}
.ritual-day--empty::before {
display: none;
}
.ritual-day--past {
filter: brightness(0.75) saturate(0.70);
}
.ritual-day--past:has(.ritual-pip-row) {
cursor: pointer;
}
.ritual-day--expanded {
filter: brightness(0.88) saturate(0.85);
}
.ritual-pip-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 3px;
align-items: center;
padding-top: 0.25rem;
}
.ritual-pip-row[hidden] {
display: none !important;
}
.ritual-pip {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(0, 0, 0, 0.35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
cursor: pointer;
}
.ritual-day--weekend .ritual-day__num {
opacity: 0.78;
}
.ritual-day.ritual-day--today {
background-color: var(--pane-today-base);
background-image:
radial-gradient(
ellipse 75% 55% at 50% 35%,
var(--pane-today-lit) 0%,
transparent 75%),
linear-gradient(
180deg,
rgba(255, 220, 170, 0.06) 0%,
transparent 55%,
rgba(0, 0, 0, 0.20) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 220, 170, 0.20),
inset 0 -1px 0 rgba(30, 14, 0, 0.55),
inset 0 0 14px rgba(220, 150, 70, 0.14),
inset 0 0 0 1px rgba(220, 165, 90, 0.30),
0 0 10px rgba(220, 150, 70, 0.10);
}
.ritual-day--today .ritual-day__num {
color: #fff2c8;
font-weight: 700;
text-shadow: 0 0 8px rgba(255, 180, 80, 0.60);
}
.ritual-day--today:hover {
filter: brightness(1.08) saturate(1.04);
}
.ritual-day--loaded:not(.ritual-day--past) {
filter: brightness(1.10) saturate(1.08);
}
.ritual-day--drop-over {
filter: brightness(1.32) saturate(1.12);
box-shadow:
inset 0 0 0 2px rgba(230, 240, 255, 0.85),
inset 0 0 28px rgba(255, 255, 255, 0.18),
0 0 22px rgba(180, 210, 255, 0.30);
}
.ritual-day:not(.ritual-day--empty):hover .ritual-chip:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 220, 140, 0.10);
}
.ritual-day__num {
font-family: "JetBrains Mono", monospace;
font-size: 0.66rem;
font-weight: 600;
color: rgba(250, 240, 215, 0.80);
line-height: 1;
display: block;
margin-bottom: 0.2rem;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.5);
letter-spacing: 0.04em;
}
.ritual-chip-stack {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
}
.ritual-chip-stack[hidden] {
display: none !important;
}
.ritual-chip {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
border-radius: 3px;
cursor: grab;
user-select: none;
transition: box-shadow 0.1s ease;
margin-top: -14px;
z-index: calc(10 - var(--chip-offset, 0));
}
.ritual-chip:first-child {
margin-top: 0;
}
.ritual-chip:active {
cursor: grabbing;
}
.ritual-chip .card--vein {
width: 100% !important;
min-width: 0 !important;
}
.ritual-chip__name {
color: var(--ritual-cream);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.ritual-chip-overflow {
font-size: 0.54rem;
color: var(--ritual-cream-muted);
margin-top: 0.25rem;
padding-left: 0.25rem;
}
.ritual-day__add {
position: absolute;
bottom: 2px;
right: 2px;
background: transparent;
border: none;
color: var(--ritual-cream-muted);
font-size: 0.7rem;
line-height: 1;
padding: 0.1rem 0.2rem;
cursor: pointer;
opacity: 0.25;
transition: opacity 0.1s ease, color 0.1s ease;
}
.ritual-day--past .ritual-day__add {
opacity: 0;
pointer-events: none;
}
.ritual-day--today .ritual-day__add {
opacity: 0.55;
color: var(--ritual-amber);
}
.ritual-day:hover .ritual-day__add {
opacity: 0.75;
}
.ritual-day__add:hover {
opacity: 1 !important;
color: var(--ritual-amber);
}
.ritual-apse-lens {
position: relative;
width: 55%;
min-width: 520px;
max-width: 880px;
margin: 0 auto;
border: 4px solid var(--apse-came);
border-radius: 3px;
overflow: hidden;
background:
radial-gradient(
ellipse 110% 55% at 50% -10%,
rgba(255, 195, 130, 0.13) 0%,
transparent 60%),
radial-gradient(
ellipse 95% 40% at 50% 108%,
rgba(255, 168, 64, 0.10) 0%,
transparent 65%),
linear-gradient(
180deg,
#0a0608 0%,
#060406 100%);
box-shadow:
inset 0 0 0 1px var(--apse-came-edge),
inset 0 1px 0 0 rgba(255, 230, 200, 0.18),
0 1px 0 0 rgba(0, 0, 0, 0.95),
0 14px 40px rgba(0, 0, 0, 0.78),
0 0 80px rgba(200, 130, 60, 0.18);
}
.ritual-apse-lens__nav {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 1rem;
background:
linear-gradient(
180deg,
rgba(255, 240, 210, 0.05) 0%,
transparent 30%),
linear-gradient(
180deg,
#16110b 0%,
#0c0805 100%);
border-bottom: 4px solid var(--apse-came);
box-shadow: inset 0 -1px 0 rgba(220, 195, 150, 0.08), inset 0 1px 0 rgba(255, 230, 195, 0.04);
}
.ritual-apse-lens__label {
flex: 1;
text-align: center;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(235, 215, 175, 0.78);
}
.ritual-lens-nav-btn {
font-family: "JetBrains Mono", monospace;
font-size: 0.65rem;
letter-spacing: 0.1em;
color: rgba(215, 195, 155, 0.65);
text-decoration: none;
padding: 0.2rem 0.5rem;
border-radius: 2px;
transition: color 0.12s ease, background 0.12s ease;
white-space: nowrap;
background: none;
border: none;
cursor: pointer;
}
.ritual-lens-nav-btn:hover {
color: rgba(245, 225, 190, 0.92);
background: rgba(180, 130, 60, 0.12);
}
.ritual-lens-nav-btn--reset {
font-size: 0.58rem;
opacity: 0.70;
}
.ritual-lens-nav-btn--inline {
margin-left: 0.35rem;
vertical-align: middle;
}
.ritual-apse-lens__grid {
display: flex;
flex-direction: column;
gap: 0;
}
.ritual-lens-week {
display: flex;
flex-direction: column;
background: var(--apse-came);
padding-bottom: 2px;
}
.ritual-lens-week[hidden] {
display: none;
}
.ritual-lens-week:last-child {
padding-bottom: 0;
}
.ritual-lens-week__label {
padding: 0.35rem 0.75rem 0.3rem;
background:
linear-gradient(
180deg,
rgba(255, 240, 210, 0.04) 0%,
transparent 40%),
linear-gradient(
180deg,
#100c08 0%,
#080604 100%);
box-shadow: inset 0 -1px 0 rgba(220, 195, 150, 0.06), inset 0 1px 0 rgba(255, 230, 195, 0.03);
}
.ritual-lens-week__name {
font-family: "JetBrains Mono", monospace;
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(235, 215, 175, 0.72);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.ritual-lens-week__days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
background: var(--apse-came);
padding-top: 2px;
}
.ritual-lens-day {
position: relative;
min-height: 80px;
padding: 0.4rem 0.4rem 0.3rem;
cursor: default;
overflow: hidden;
background-color: var(--pane-warm-0);
background-image:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.015) 22%,
transparent 55%,
rgba(0, 0, 0, 0.20) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.40),
inset 0 0 18px rgba(0, 0, 0, 0.40);
transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.ritual-lens-day::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--apse-glass-noise);
background-size: 220px 220px;
mix-blend-mode: overlay;
opacity: 0.40;
pointer-events: none;
z-index: 0;
}
.ritual-lens-day::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--apse-pane-motif);
background-repeat: no-repeat;
background-position: center;
background-size: 55% auto;
mix-blend-mode: overlay;
opacity: 0.75;
pointer-events: none;
z-index: 0;
}
.ritual-lens-day > * {
position: relative;
z-index: 1;
}
.ritual-lens-day--tone-0 {
background-color: var(--pane-warm-0);
}
.ritual-lens-day--tone-1 {
background-color: var(--pane-warm-1);
}
.ritual-lens-day--tone-2 {
background-color: var(--pane-warm-2);
}
.ritual-lens-day--tone-3 {
background-color: var(--pane-warm-3);
}
.ritual-lens-day--tone-4 {
background-color: var(--pane-warm-4);
}
.ritual-lens-day:not(.ritual-lens-day--past):hover {
filter: brightness(1.18) saturate(1.05);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.40),
inset 0 0 24px rgba(255, 255, 255, 0.06),
inset 0 0 0 1px rgba(220, 230, 255, 0.18);
}
.ritual-lens-day.ritual-lens-day--today {
background-color: var(--pane-today-base);
background-image:
radial-gradient(
ellipse 75% 55% at 50% 35%,
var(--pane-today-lit) 0%,
transparent 75%),
linear-gradient(
180deg,
rgba(255, 220, 170, 0.06) 0%,
transparent 55%,
rgba(0, 0, 0, 0.20) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 220, 170, 0.20),
inset 0 -1px 0 rgba(30, 14, 0, 0.55),
inset 0 0 18px rgba(220, 150, 70, 0.14),
inset 0 0 0 1px rgba(220, 165, 90, 0.30),
0 0 12px rgba(220, 150, 70, 0.10);
}
.ritual-lens-day--today:hover {
filter: brightness(1.08) saturate(1.04);
}
.ritual-lens-day--past {
filter: brightness(0.75) saturate(0.70);
}
.ritual-lens-day--loaded:not(.ritual-lens-day--past) {
filter: brightness(1.10) saturate(1.08);
}
.ritual-lens-day--drop-over {
filter: brightness(1.32) saturate(1.12);
box-shadow:
inset 0 0 0 2px rgba(230, 240, 255, 0.85),
inset 0 0 32px rgba(255, 255, 255, 0.18),
0 0 24px rgba(180, 210, 255, 0.32);
}
.ritual-lens-day__header {
display: flex;
align-items: baseline;
gap: 0.3rem;
margin-bottom: 0.25rem;
}
.ritual-lens-day__dow {
font-family: "JetBrains Mono", monospace;
font-size: 0.52rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(240, 222, 184, 0.70);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.ritual-lens-day__num {
font-family: "JetBrains Mono", monospace;
font-size: 0.76rem;
font-weight: 700;
color: rgba(250, 240, 215, 0.84);
line-height: 1;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.5);
}
.ritual-lens-day--today .ritual-lens-day__num {
color: #fff2c8;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65), 0 0 10px rgba(255, 180, 80, 0.55);
}
.ritual-lens-day--today .ritual-lens-day__dow {
color: rgba(255, 230, 180, 0.78);
}
.ritual-lens-day--weekend .ritual-lens-day__dow,
.ritual-lens-day--weekend .ritual-lens-day__num {
opacity: 0.82;
}
.ritual-lens-day .ritual-day__add {
position: absolute;
bottom: 2px;
right: 2px;
opacity: 0.22;
}
.ritual-lens-day:hover .ritual-day__add {
opacity: 0.70;
}
.ritual-lens-day .ritual-chip {
margin-top: 3px;
}
.ritual-lens-day .ritual-chip:first-child {
margin-top: 0;
}
.ritual-month__arch {
position: relative;
height: 68px;
margin-bottom: 6px;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
background:
radial-gradient(
ellipse 60% 40% at 50% 100%,
rgba(220, 170, 60, 0.18) 0%,
transparent 70%),
linear-gradient(
180deg,
#1a120a 0%,
#08060a 100%);
box-shadow:
inset 0 -2px 0 var(--apse-came),
inset 0 1px 0 rgba(255, 220, 160, 0.18),
inset 0 0 0 1px rgba(80, 50, 20, 0.4);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 8px;
overflow: hidden;
}
.ritual-month--current .ritual-month__arch {
height: 88px;
}
.ritual-month__arch::after {
content: "\2724";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
color: var(--gilt-lo);
opacity: 0.6;
pointer-events: none;
}
.ritual-month--current .ritual-month__arch::after {
font-size: 26px;
color: var(--gilt-hi);
top: 12px;
}
.ritual-month__arch-name {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gilt-hi);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
position: relative;
z-index: 1;
}
.ritual-month--current .ritual-month__arch-name {
font-size: 14px;
letter-spacing: 0.28em;
}
.ritual-month__foot {
margin-top: 8px;
text-align: center;
font-family:
"Cormorant Garamond",
"EB Garamond",
Georgia,
serif;
font-style: italic;
font-size: 11px;
color: rgba(220, 180, 140, 0.5);
letter-spacing: 0.06em;
padding: 0 8px 8px;
}
.ritual-hinge-wrap {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
}
.ritual-hinge {
position: absolute;
top: 14px;
bottom: 12px;
width: 32px;
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.5) 0%,
#2a1a08 22%,
#4a2c10 50%,
#2a1a08 78%,
rgba(0, 0, 0, 0.5) 100%);
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(255, 220, 170, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.6),
0 6px 14px rgba(0, 0, 0, 0.55);
pointer-events: auto;
}
.ritual-hinge::before,
.ritual-hinge::after {
content: "";
position: absolute;
left: 3px;
right: 3px;
height: 28px;
background:
linear-gradient(
180deg,
#2e1a08 0%,
#170a02 100%);
border: 1px solid #8a5a1c;
border-radius: 2px;
box-shadow:
inset 0 1px 0 rgba(255, 200, 120, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.6),
0 1px 2px rgba(0, 0, 0, 0.5);
}
.ritual-hinge::before {
top: 12px;
}
.ritual-hinge::after {
bottom: 12px;
}
.ritual-hinge .strapwork-mid {
position: absolute;
left: 3px;
right: 3px;
top: 50%;
transform: translateY(-50%);
height: 18px;
background:
linear-gradient(
180deg,
#2e1a08 0%,
#170a02 100%);
border: 1px solid #6e4a14;
border-radius: 2px;
box-shadow: inset 0 1px 0 rgba(255, 200, 120, 0.35), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ritual-hinge .rivet {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
#f0c46c,
#8a5a1c 60%,
#3a1c08);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ritual-hinge--at1 {
left: 33.33%;
transform: translateX(-50%);
}
.ritual-hinge--at2 {
left: 66.67%;
transform: translateX(-50%);
}
@media (max-width: 1099px) {
.ritual-hinge-wrap {
display: none;
}
}
.ritual-predella {
position: relative;
background:
linear-gradient(
180deg,
#2a1a08 0%,
#1a0e04 100%);
border: 4px solid var(--apse-came);
border-top: 2px solid #5a3a14;
border-radius: 0 0 6px 6px;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(80, 50, 20, 0.4),
inset 0 1px 0 rgba(255, 200, 120, 0.10),
0 14px 32px rgba(0, 0, 0, 0.7);
margin-top: 0;
}
.ritual-predella__foot {
padding: 6px 18px;
background:
linear-gradient(
180deg,
#1a0e04 0%,
#0a0604 100%);
border-top: 2px solid #5a3a14;
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(220, 180, 120, 0.40);
text-align: center;
}
.ritual-predella .ritual-apse-lens {
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
width: 100%;
min-width: 0;
max-width: none;
margin: 0;
}
.garden-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.35rem 1rem;
margin-top: 0.75rem;
background:
linear-gradient(
180deg,
#1a0e04 0%,
#120a02 100%);
border: 1px solid rgba(200, 132, 26, 0.12);
border-radius: 3px;
cursor: pointer;
color: rgba(200, 132, 26, 0.35);
font-family: "JetBrains Mono", monospace;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
transition: color 0.2s ease, border-color 0.2s ease;
}
.garden-toggle:hover {
color: rgba(200, 132, 26, 0.65);
border-color: rgba(200, 132, 26, 0.25);
}
.garden-toggle[aria-expanded=true] .garden-toggle__chevron {
display: inline-block;
transform: rotate(180deg);
}
.garden-toggle__chevron {
font-size: 0.7rem;
transition: transform 0.2s ease;
}
.garden-canvas-wrap {
width: 100%;
height: 320px;
position: relative;
border-radius: 0 0 4px 4px;
cursor: default;
background: #b89458;
}
.garden-canvas-wrap canvas {
display: block;
width: 100%;
height: 100%;
cursor: pointer;
}
@media (max-width: 699px) {
.garden-canvas-wrap {
height: 180px;
}
}
.garden-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(500px, calc(100% - 2rem));
z-index: 10;
background:
linear-gradient(
180deg,
#2e1e0a 0%,
#1a0e04 100%);
border: 1px solid rgba(200, 132, 26, 0.3);
border-radius: 6px;
box-shadow:
0 28px 72px rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(80, 50, 20, 0.35),
inset 0 1px 0 rgba(255, 200, 120, 0.06);
padding: 1.25rem 1.5rem 1rem;
}
.garden-panel[hidden] {
display: none !important;
}
.garden-panel__header {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(200, 132, 26, 0.12);
}
.garden-panel__title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ritual-amber);
}
.garden-panel__sub {
font-size: 0.72rem;
color: var(--ritual-cream-muted);
font-style: italic;
}
.garden-panel .shrine-incense {
justify-content: center;
height: 2rem;
gap: 2rem;
margin-bottom: 0.75rem;
}
.garden-panel .ritual-murmur-form {
margin-bottom: 0.75rem;
}
.garden-panel .ritual-murmur-list {
max-height: 200px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(200, 132, 26, 0.2) transparent;
}
.ritual-sidebar {
position: fixed;
top: 60px;
right: 0;
bottom: 0;
width: 280px;
z-index: 80;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 0.75rem 2rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(200, 132, 26, 0.2) transparent;
background:
linear-gradient(
180deg,
rgba(26, 16, 8, 0.98) 0%,
rgba(14, 9, 4, 0.98) 100%);
border-left: 1px solid rgba(120, 90, 40, 0.35);
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.65);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.ritual-sidebar--open {
transform: translateX(0);
}
@media (max-width: 599px) {
.ritual-sidebar {
width: 100%;
top: 56px;
}
}
.ritual-stack-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 1rem 0.5rem;
text-align: center;
}
.ritual-stack-empty__hint {
font-size: 0.72rem;
color: var(--ritual-cream-muted);
line-height: 1.45;
}
.ritual-stack-author-btn {
background:
linear-gradient(
180deg,
#3a2010,
#271508);
border: 1px solid rgba(200, 132, 26, 0.5);
border-radius: 4px;
color: var(--ritual-amber);
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.12em;
padding: 0.45rem 1rem;
cursor: pointer;
text-transform: uppercase;
white-space: nowrap;
transition: border-color 0.15s, box-shadow 0.15s;
}
.ritual-stack-author-btn:hover {
border-color: rgba(200, 132, 26, 0.8);
box-shadow: 0 0 10px rgba(200, 132, 26, 0.18);
}
.ritual-station__lintel .ritual-stack-author-btn {
margin-left: auto;
padding: 0.25rem 0.65rem;
font-size: 0.62rem;
border-color: rgba(200, 132, 26, 0.35);
opacity: 0.85;
}
.ritual-station__lintel .ritual-stack-author-btn:hover {
border-color: rgba(200, 132, 26, 0.7);
opacity: 1;
box-shadow: 0 0 8px rgba(200, 132, 26, 0.15);
}
.ritual-station__body--stack {
padding: 0.75rem 0.75rem;
}
.ritual-stack-column {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.ritual-stack-column--drop-over {
outline: 1px dashed rgba(200, 132, 26, 0.4);
border-radius: 3px;
}
.ritual-unplan-zone {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 4px 0 12px;
padding: 14px 12px;
border: 1px dashed var(--ritual-rule);
border-radius: 4px;
background: rgba(0, 0, 0, 0.25);
color: var(--ritual-text-muted);
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: default;
user-select: none;
opacity: 0;
pointer-events: none;
transform: scaleY(0.92);
transform-origin: top center;
transition: opacity 160ms ease, transform 160ms ease;
}
.ritual-unplan-zone--active {
opacity: 1;
pointer-events: auto;
transform: scaleY(1);
}
.ritual-unplan-zone__glyph {
font-size: 16px;
opacity: 0.7;
}
.ritual-unplan-zone--drop-over {
border-color: var(--ritual-amber);
background: rgba(200, 132, 26, 0.1);
color: var(--ritual-amber);
}
.ritual-unplan-zone--drop-over .ritual-unplan-zone__glyph {
opacity: 1;
}
.ritual-sorcery-card {
border-radius: 4px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid var(--ritual-rule);
border-left-width: 3px;
border-left-color: var(--border);
box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.04), 0 2px 6px rgba(0, 0, 0, 0.45);
cursor: grab;
user-select: none;
transition: box-shadow 0.12s ease, transform 0.08s ease;
}
.ritual-sorcery-card:hover {
box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.08), 0 4px 12px rgba(0, 0, 0, 0.6);
transform: translateY(-1px);
}
.ritual-sorcery-card:active {
cursor: grabbing;
}
.ritual-sorcery-card--red {
border-left-color: var(--color-red);
}
.ritual-sorcery-card--green {
border-left-color: var(--color-green);
}
.ritual-sorcery-card--blue {
border-left-color: var(--color-blue);
}
.ritual-sorcery-card--white {
border-left-color: var(--color-white);
}
.ritual-sorcery-card--black {
border-left-color: var(--color-black);
}
.ritual-sorcery-card--colorless {
border-left-color: var(--border);
}
.ritual-sorcery-card__frame {
padding: 0.5rem 0.6rem;
}
.ritual-sorcery-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.35rem;
margin-bottom: 0.2rem;
}
.ritual-sorcery-card__name {
font-size: 0.78rem;
font-weight: 600;
color: var(--ritual-cream);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
.ritual-pip--red {
background: var(--color-red);
}
.ritual-pip--green {
background: var(--color-green);
}
.ritual-pip--blue {
background: var(--color-blue);
}
.ritual-pip--white {
background: var(--color-white);
}
.ritual-pip--black {
background: var(--color-black);
}
.ritual-sorcery-card__pip {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.ritual-sorcery-card__typeline {
font-family: "JetBrains Mono", monospace;
font-size: 0.54rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ritual-cream-muted);
margin-bottom: 0.3rem;
opacity: 0.7;
}
.ritual-sorcery-card__body {
font-size: 0.68rem;
color: var(--ritual-cream-muted);
line-height: 1.35;
}
.ritual-author-panel {
position: fixed;
inset: 0;
background: rgba(10, 6, 2, 0.75);
backdrop-filter: blur(2px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.ritual-author-panel[hidden] {
display: none;
}
.ritual-author-panel__inner {
background:
linear-gradient(
180deg,
#2e1e0c 0%,
#1a1008 100%);
border: 1px solid var(--ritual-rule-bright);
border-radius: 6px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(200, 132, 26, 0.08);
width: 100%;
max-width: 700px;
max-height: 90vh;
overflow-y: auto;
}
.ritual-author-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--ritual-rule);
background:
linear-gradient(
180deg,
#381a08 0%,
#2a1208 100%);
}
.ritual-author-panel__title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ritual-amber);
}
.ritual-author-panel__close {
background: transparent;
border: none;
color: var(--ritual-cream-muted);
font-size: 0.9rem;
cursor: pointer;
padding: 0.2rem 0.4rem;
line-height: 1;
transition: color 0.1s ease;
}
.ritual-author-panel__close:hover {
color: var(--ritual-amber);
}
.ritual-author-panel__day {
font-family: "JetBrains Mono", monospace;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ritual-cream-muted);
padding: 0.4rem 1.25rem;
border-bottom: 1px solid var(--ritual-rule);
}
.ritual-author-panel__body {
padding: 1.25rem;
}
.ritual-author-form .ritual-parchment__row {
grid-template-columns: 1fr;
}
.ritual-author-error {
margin: 0 0 12px;
padding: 8px 10px;
background: rgba(180, 40, 40, 0.18);
border: 1px solid rgba(200, 60, 60, 0.4);
border-radius: 3px;
color: oklch(0.72 0.18 25);
font-size: 12px;
line-height: 1.4;
}
.ritual-note-panel {
position: fixed;
inset: 0;
background: rgba(10, 6, 2, 0.75);
backdrop-filter: blur(2px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.ritual-note-panel[hidden] {
display: none;
}
.ritual-note-panel__inner {
background:
linear-gradient(
180deg,
#2e1e0c 0%,
#1a1008 100%);
border: 1px solid var(--ritual-rule-bright);
border-radius: 6px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(200, 132, 26, 0.08);
width: 100%;
max-width: 420px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ritual-note-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--ritual-rule);
}
.ritual-note-panel__title {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ritual-amber);
}
.ritual-note-panel__card-name {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.82rem;
color: var(--ritual-cream);
font-weight: 600;
}
.ritual-note-panel__body-preview {
font-size: 0.72rem;
color: var(--ritual-cream-muted);
line-height: 1.5;
font-family: "JetBrains Mono", monospace;
padding: 0.5rem 0.6rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
border-left: 2px solid rgba(200, 132, 26, 0.2);
white-space: pre-wrap;
max-height: 5rem;
overflow-y: auto;
}
.ritual-chip__note-dot {
font-size: 1.1rem;
line-height: 1;
color: var(--ritual-amber);
opacity: 0.7;
flex-shrink: 0;
margin-left: 1px;
cursor: default;
}
.ritual-field--note {
margin-top: 0.4rem;
}
.ritual-field__input--note {
min-height: 3.5rem;
resize: vertical;
}
.ritual-drag-ghost {
position: fixed;
pointer-events: none;
z-index: 500;
opacity: 0.85;
border-radius: 3px;
background: rgba(40, 22, 8, 0.92);
border: 1px solid rgba(200, 132, 26, 0.5);
padding: 0.3rem 0.6rem;
font-size: 0.68rem;
color: var(--ritual-cream);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
white-space: nowrap;
}
.ritual-sorcery-form {
max-width: 640px;
}
.ritual-return {
margin: 0;
}
.ritual-return-link {
color: var(--ritual-amber);
text-decoration: none;
font-size: 0.85rem;
}
.ritual-return-link:hover {
text-decoration: underline;
}
.battlefield-with-gutters {
display: flex;
align-items: flex-start;
gap: 0.875rem;
}
.battlefield-with-gutters > .stack-columns {
flex: 1;
min-width: 0;
}
.plan-rail {
flex-shrink: 0;
width: 140px;
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.6rem 0.2rem;
background: var(--bg);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
border-radius: 4px;
}
.plan-rail--today {
border-top: 2px solid rgba(200, 132, 26, 0.35);
}
.plan-rail--horizon {
border-top: 2px solid rgba(140, 90, 50, 0.3);
}
.plan-rail__header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
margin: 0 -2px 0.875rem;
padding: 0.5rem 0.95rem 0.5rem 1rem;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65), 0 0 3px rgba(255, 200, 100, 0.22);
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255, 220, 160, 0.28),
inset 0 -1px 0 rgba(0, 0, 0, 0.55),
0 2px 4px rgba(0, 0, 0, 0.6);
}
.plan-rail__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plan-rail__count {
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: none;
text-shadow: none;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
opacity: 0.85;
}
.plan-rail__count em {
font-style: italic;
opacity: 0.75;
margin-left: 0.15rem;
}
.plan-rail__header::before,
.plan-rail__header::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background:
radial-gradient(
circle at 30% 30%,
var(--brass-rivet) 0%,
#3a2810 60%,
#15100a 100%);
box-shadow: 0 1px 0 rgba(255, 220, 160, 0.25), inset 0 0 0 0.5px rgba(0, 0, 0, 0.4);
}
.plan-rail__header::before {
left: 5px;
}
.plan-rail__header::after {
right: 5px;
}
.plan-rail--today .plan-rail__header {
background:
linear-gradient(
180deg,
#1a2a4a 0%,
#0a1428 100%);
border: 1px solid #050c1a;
color: #a8c8f0;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 4px rgba(122, 184, 245, 0.25);
}
.plan-rail--horizon .plan-rail__header {
background:
linear-gradient(
180deg,
#2a2520 0%,
#14110d 100%);
border: 1px solid #0a0804;
color: var(--text-muted);
}
.plan-rail--today,
.plan-rail--horizon {
border-top: 0;
}
.rail-card-firing {
box-shadow:
inset 0 1px 3px rgba(0, 0, 0, 0.4),
0 0 8px rgba(200, 132, 26, 0.35),
0 0 16px rgba(200, 132, 26, 0.15);
border-color: rgba(200, 132, 26, 0.3) !important;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.plan-rail--drop-over {
border-top-color: rgba(200, 132, 26, 0.7) !important;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(200, 132, 26, 0.15) !important;
}
[data-plan-draggable=horizon] {
cursor: grab;
}
[data-plan-draggable=horizon]:active {
cursor: grabbing;
}
.horizon-group {
display: flex;
flex-direction: column;
gap: 0.2rem;
opacity: var(--horizon-proximity, 1);
transition: opacity 0.15s ease;
}
.horizon-group + .horizon-group {
margin-top: 0.5rem;
}
.horizon-group__label {
display: flex;
align-items: baseline;
gap: 0.35rem;
padding: 0.1rem 0;
margin-bottom: 0.1rem;
}
.horizon-group__day {
font-size: 0.62rem;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.12em;
color: var(--text-muted);
text-transform: uppercase;
}
.horizon-group__date {
font-size: 0.55rem;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.08em;
color: var(--text-subtle, var(--text-muted));
opacity: 0.65;
}
.gutter-mini-card {
display: flex;
align-items: baseline;
gap: 0.3rem;
padding: 0.35rem 0.4rem;
background: var(--surface);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.04);
min-height: 2rem;
}
.gutter-mini-card-name {
font-size: 0.72rem;
color: var(--text-muted);
line-height: 1.3;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gutter-one-shot {
font-size: 0.6rem;
opacity: 0.55;
flex-shrink: 0;
}
.gutter-color-pip {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gutter-color-pip--red {
background: var(--color-red);
}
.gutter-color-pip--green {
background: var(--color-green);
}
.gutter-color-pip--blue {
background: var(--color-blue);
}
.gutter-color-pip--white {
background: var(--color-white);
}
.gutter-color-pip--black {
background: var(--color-black);
}
.gutter-empty-slot {
flex: 1;
min-height: 3rem;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
border-radius: 3px;
background: rgba(0, 0, 0, 0.15);
}
.gutter-empty-slot.horizon-empty {
position: relative;
min-height: 270px;
padding: 1.25rem 0.75rem;
border: 1px dashed rgba(120, 100, 80, 0.32);
border-radius: 4px;
background:
repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.22) 0 2px,
transparent 2px 6px),
rgba(0, 0, 0, 0.18);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
text-align: center;
}
.horizon-empty__glyph {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.4rem;
letter-spacing: 0.3em;
color: rgba(255, 210, 140, 0.42);
}
.horizon-empty__copy {
font-family:
Georgia,
"Iowan Old Style",
serif;
font-style: italic;
font-size: 0.78rem;
line-height: 1.5;
letter-spacing: 0.02em;
color: rgba(200, 175, 130, 0.55);
}
.gutter-empty-slot.today-empty {
position: relative;
min-height: 270px;
padding: 1.25rem 0.75rem;
border: 1px dashed rgba(122, 184, 245, 0.28);
border-radius: 4px;
background:
repeating-linear-gradient(
45deg,
rgba(0, 0, 0, 0.18) 0 2px,
transparent 2px 6px),
radial-gradient(
ellipse at 50% 35%,
rgba(122, 184, 245, 0.06),
transparent 70%),
rgba(0, 0, 0, 0.18);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.85rem;
text-align: center;
}
.today-empty__glyph {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 1.75rem;
letter-spacing: 0.2em;
color: rgba(168, 200, 240, 0.28);
}
.today-empty__copy {
font-family:
Georgia,
"Iowan Old Style",
serif;
font-style: italic;
font-size: 0.7rem;
line-height: 1.45;
letter-spacing: 0.02em;
color: rgba(168, 200, 240, 0.5);
}
.plan-rail--today .plate-cleared {
margin-top: 0.5rem;
padding: 0.55rem 0 0;
border-top: 1px dashed rgba(122, 184, 245, 0.18);
text-align: center;
font-family:
"JetBrains Mono",
ui-monospace,
monospace;
font-size: 0.55rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
}
@media (max-width: 799px) {
.battlefield-with-gutters {
flex-direction: column;
}
.plan-rail {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
}
.plan-rail__header {
width: 100%;
border-bottom: none;
margin-bottom: 0;
}
}
.gutter-plan-card {
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
width: 130px;
flex-shrink: 0;
}
.gutter-plan-card__note-dot {
position: absolute;
top: 3px;
right: 3px;
font-size: 1rem;
line-height: 1;
color: var(--ritual-amber);
opacity: 0.7;
pointer-events: none;
}
.gutter-plan-card__name {
font-size: 0.72rem;
color: var(--text-muted);
line-height: 1.3;
padding: 0.35rem 0.4rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.ritual-chip:has(.card--vein) .ritual-chip__name {
display: none;
}
.ritual-sorcery-card-wrapper {
cursor: grab;
user-select: none;
display: block;
line-height: 0;
transition: transform 0.08s ease, box-shadow 0.1s ease;
}
.ritual-sorcery-card-wrapper:hover {
transform: translateY(-2px);
}
.ritual-sorcery-card-wrapper:active {
cursor: grabbing;
}
.ritual-author-panel__body--with-preview {
display: grid;
grid-template-columns: 180px 1fr;
gap: 1.25rem;
align-items: start;
padding: 1.25rem;
}
.ritual-author-preview {
position: sticky;
top: 0;
line-height: 0;
}
@media (max-width: 699px) {
.ritual-author-panel__body--with-preview {
grid-template-columns: 1fr;
}
.ritual-author-preview {
display: none;
}
}
.ritual-cast-panel {
position: fixed;
inset: 0;
background: rgba(10, 6, 2, 0.75);
backdrop-filter: blur(2px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.ritual-cast-panel[hidden] {
display: none;
}
.ritual-cast-panel__inner {
background:
linear-gradient(
180deg,
#2e1e0c 0%,
#1a1008 100%);
border: 1px solid var(--ritual-rule-bright);
border-radius: 6px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(200, 132, 26, 0.08);
width: 100%;
max-width: 420px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ritual-cast-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--ritual-rule);
}
.ritual-cast-panel__day {
font-family:
"Cinzel",
Georgia,
serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ritual-amber);
}
.ritual-cast-panel__card-name {
font-size: 0.82rem;
color: var(--ritual-cream);
font-weight: 600;
font-family:
"Cinzel",
Georgia,
serif;
}
.ritual-cast-panel__body-preview {
font-size: 0.72rem;
color: var(--ritual-cream-muted);
line-height: 1.5;
font-family: "JetBrains Mono", monospace;
padding: 0.5rem 0.6rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
border-left: 2px solid rgba(200, 132, 26, 0.2);
white-space: pre-wrap;
max-height: 5rem;
overflow-y: auto;
}
/* app/javascript/stylesheets/_simulation.css */
[data-district=simulation] {
--blueprint-bg: #0a1628;
--blueprint-line: #4fc3f7;
--blueprint-text: #b3e5fc;
--blueprint-accent: #81d4fa;
--blueprint-muted: #4a6080;
--blueprint-grid: rgba(79, 195, 247, 0.06);
--blueprint-surface: rgba(79, 195, 247, 0.04);
background: var(--blueprint-bg);
background-image:
linear-gradient(var(--blueprint-grid) 1px, transparent 1px),
linear-gradient(
90deg,
var(--blueprint-grid) 1px,
transparent 1px);
background-size: 24px 24px;
color: var(--blueprint-text);
font-family:
"Courier New",
"Courier",
monospace;
min-height: 100vh;
}
[data-district=simulation] *,
[data-district=simulation] *::before,
[data-district=simulation] *::after {
animation: none !important;
transition: none !important;
}
[data-district=simulation] .app-nav {
background: var(--blueprint-bg);
border-bottom: 1px solid var(--blueprint-line);
}
[data-district=simulation] .app-nav-item {
color: var(--blueprint-muted);
}
[data-district=simulation] .app-nav-item.active,
[data-district=simulation] .app-nav-item:hover {
color: var(--blueprint-line);
}
[data-district=simulation] .app-nav-tick {
color: var(--blueprint-muted);
font-size: 0.7rem;
}
[data-district=simulation] .card-tile {
background: var(--blueprint-surface) !important;
border: 1px solid var(--blueprint-line) !important;
box-shadow: none !important;
color: var(--blueprint-text) !important;
}
[data-district=simulation] .card-tile .card-name {
color: var(--blueprint-text);
}
[data-district=simulation] .vein-card__art,
[data-district=simulation] .card-art,
[data-district=simulation] .card-flavor {
display: none !important;
}
[data-district=simulation] .board-edit-toggle,
[data-district=simulation] .intake-drawer,
[data-district=simulation] .stack-add-area,
[data-district=simulation] .stack-edit-only,
[data-district=simulation] .card-stack-controls,
[data-district=simulation] .turn-summary,
[data-district=simulation] .board-controls,
[data-district=simulation] .task-action-btn,
[data-district=simulation] [data-intake-drawer],
[data-district=simulation] .btn-primary:not(.sim-action) {
display: none !important;
}
[data-district=simulation] .zone-title,
[data-district=simulation] .stack-header .stack-name {
color: var(--blueprint-line);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.7rem;
}
[data-district=simulation] .stack-card-count {
color: var(--blueprint-muted);
font-size: 0.65rem;
}
[data-district=simulation] .zone-section {
border: none;
}
[data-district=simulation] .state-label {
color: var(--blueprint-muted);
font-size: 0.65rem;
}
.sim-drawing-title {
position: fixed;
bottom: 1rem;
right: 1rem;
border: 1px solid var(--blueprint-line);
padding: 0.5rem 0.75rem;
font-size: 0.65rem;
color: var(--blueprint-muted);
font-family: "Courier New", monospace;
background: var(--blueprint-bg);
opacity: 0.9;
line-height: 1.7;
z-index: 100;
}
.sim-day-nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
padding: 0.4rem 1rem;
border-bottom: 1px solid var(--blueprint-line);
font-size: 0.7rem;
color: var(--blueprint-muted);
background: var(--blueprint-bg);
overflow-x: auto;
}
.sim-day-nav a {
color: var(--blueprint-text);
text-decoration: none;
padding: 0.1rem 0.4rem;
}
.sim-day-nav a:hover {
color: var(--blueprint-line);
}
.sim-day-nav .current-day {
color: var(--blueprint-line);
border: 1px solid var(--blueprint-line);
padding: 0.1rem 0.4rem;
}
.sim-day-nav .nav-arrow {
color: var(--blueprint-accent);
font-size: 0.9rem;
padding: 0 0.25rem;
text-decoration: none;
}
.sim-day-nav .nav-arrow--disabled {
color: var(--blueprint-muted);
opacity: 0.3;
}
.sim-district-page {
padding: 1rem 1.5rem;
max-width: 1200px;
}
.sim-page-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--blueprint-line);
padding-bottom: 0.75rem;
}
.sim-page-title {
color: var(--blueprint-line);
font-size: 1rem;
letter-spacing: 0.15em;
margin: 0;
}
.sim-explainer {
color: var(--blueprint-muted);
font-size: 0.8rem;
line-height: 1.7;
max-width: 680px;
margin-bottom: 1.5rem;
}
.sim-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
padding: 0;
}
.sim-card {
border: 1px solid var(--blueprint-line);
padding: 1rem;
background: var(--blueprint-surface);
}
.sim-card__name {
color: var(--blueprint-line);
font-size: 0.85rem;
font-weight: bold;
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
}
.sim-card__meta {
font-size: 0.7rem;
color: var(--blueprint-muted);
line-height: 1.9;
margin-bottom: 0.75rem;
}
.sim-card__actions {
display: flex;
gap: 0.5rem;
}
.sim-action {
background: transparent !important;
border: 1px solid var(--blueprint-line) !important;
color: var(--blueprint-line) !important;
font-family: "Courier New", monospace !important;
font-size: 0.7rem !important;
letter-spacing: 0.05em;
padding: 0.3rem 0.75rem !important;
cursor: pointer;
text-decoration: none;
display: inline-block !important;
width: auto !important;
flex: none !important;
min-height: unset !important;
border-radius: 0 !important;
}
.sim-action:hover {
background: var(--blueprint-surface) !important;
}
.sim-action--large {
font-size: 0.8rem !important;
padding: 0.5rem 1.25rem !important;
}
.sim-action--create {
border-color: #4caf7d !important;
color: #4caf7d !important;
}
.sim-action--create:hover {
background: rgba(76, 175, 125, 0.1) !important;
}
.sim-action--destroy {
background: transparent !important;
border: 1px solid var(--blueprint-muted) !important;
color: var(--blueprint-muted) !important;
font-family: "Courier New", monospace !important;
font-size: 0.7rem !important;
padding: 0.3rem 0.75rem !important;
cursor: pointer;
}
.sim-back-link {
color: var(--blueprint-muted);
font-size: 0.75rem;
text-decoration: none;
}
.sim-back-link:hover {
color: var(--blueprint-line);
}
.sim-empty-state {
padding: 3rem 0;
text-align: center;
}
.sim-empty-label {
color: var(--blueprint-line);
font-size: 0.85rem;
margin-bottom: 0.25rem;
}
.sim-empty-sub {
color: var(--blueprint-muted);
font-size: 0.75rem;
margin-bottom: 1.5rem;
}
.sim-edit-page {
max-width: 900px;
}
.sim-edit-run-panel {
border: 1px solid var(--blueprint-line);
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
background: var(--blueprint-surface);
}
.sim-edit-rerun-warning {
color: var(--blueprint-muted);
font-size: 0.72rem;
margin-bottom: 0.75rem;
letter-spacing: 0.03em;
}
.sim-edit-run-form {
display: flex;
align-items: flex-end;
gap: 1rem;
flex-wrap: wrap;
}
.sim-edit-run-fields {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.sim-edit-run-select,
.sim-edit-run-date {
width: auto !important;
}
.sim-action--rerun {
border-color: var(--blueprint-muted) !important;
color: var(--blueprint-muted) !important;
}
.sim-action--rerun:hover {
background: rgba(74, 96, 128, 0.15) !important;
border-color: var(--blueprint-text) !important;
color: var(--blueprint-text) !important;
}
.sim-edit-board {
margin-top: 0.5rem;
}
.sim-edit-stacks {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: flex-start;
}
.sim-edit-stack {
border: 1px solid var(--blueprint-line);
padding: 0.75rem;
min-width: 220px;
max-width: 280px;
flex: 1;
background: var(--blueprint-surface);
}
.sim-edit-stack-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--blueprint-muted);
}
.sim-edit-stack-name {
color: var(--blueprint-line);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sim-edit-remove-btn {
background: transparent !important;
border: none !important;
color: var(--blueprint-muted) !important;
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: 0 0.2rem !important;
min-height: unset !important;
width: auto !important;
flex: none !important;
}
.sim-edit-remove-btn:hover {
color: var(--blueprint-text) !important;
}
.sim-edit-remove-btn--sm {
font-size: 0.8rem !important;
}
.sim-edit-stack-cards {
margin-bottom: 0.5rem;
min-height: 1.5rem;
}
.sim-edit-card-row {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.2rem 0;
border-bottom: 1px solid var(--blueprint-muted);
font-size: 0.75rem;
}
.sim-edit-card-row:last-child {
border-bottom: none;
}
.sim-edit-card-name {
flex: 1;
color: var(--blueprint-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sim-edit-card-energy {
color: var(--blueprint-muted);
font-size: 0.65rem;
white-space: nowrap;
}
.sim-edit-empty-stack {
color: var(--blueprint-muted);
font-size: 0.7rem;
font-style: italic;
padding: 0.25rem 0;
}
.sim-edit-add-card {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--blueprint-muted);
}
.sim-edit-add-card-form {
display: flex;
gap: 0.4rem;
align-items: center;
}
.sim-edit-card-picker {
flex: 1;
font-size: 0.7rem !important;
}
.sim-edit-no-cards {
color: var(--blueprint-muted);
font-size: 0.7rem;
}
.sim-edit-add-stack {
border: 1px dashed var(--blueprint-muted);
padding: 0.75rem;
min-width: 200px;
flex: 0 0 auto;
display: flex;
align-items: flex-start;
}
.sim-edit-add-stack-form {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
.sim-edit-stack-input {
font-size: 0.8rem !important;
}
.sim-form {
max-width: 480px;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.sim-form-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sim-form-label {
color: var(--blueprint-muted);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sim-form-input,
.sim-form-select {
background: var(--blueprint-bg);
border: 1px solid var(--blueprint-line);
color: var(--blueprint-text);
font-family: "Courier New", monospace;
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
width: 100%;
}
.sim-form-input:focus,
.sim-form-select:focus {
outline: 1px solid var(--blueprint-accent);
border-color: var(--blueprint-accent);
}
.sim-radio-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.sim-radio-label {
color: var(--blueprint-text);
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
}
.sim-form-actions {
padding-top: 0.5rem;
}
.sim-view-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--blueprint-line);
margin-bottom: 1rem;
}
.sim-tab {
color: var(--blueprint-muted);
text-decoration: none;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.4rem 0.9rem;
border-bottom: 2px solid transparent;
}
.sim-tab:hover {
color: var(--blueprint-text);
}
.sim-tab--active {
color: var(--blueprint-line);
border-bottom-color: var(--blueprint-line);
}
.sim-final-state-note {
color: var(--blueprint-muted);
font-size: 0.65rem;
padding: 0.5rem 0;
border-top: 1px solid var(--blueprint-muted);
margin-top: 2rem;
opacity: 0.6;
}
[data-district=simulation] .sim-gameboard {
padding: 0.75rem;
}
.sim-itinerary {
padding: 0.5rem 0;
}
.sim-section-title {
color: var(--blueprint-line);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.sim-task-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sim-task {
border-left: 2px solid var(--blueprint-muted);
padding: 0.5rem 0.75rem;
background: var(--blueprint-surface);
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.sim-task--afternoon {
border-left-color: var(--blueprint-accent);
}
.sim-task__phase {
color: var(--blueprint-muted);
font-size: 0.6rem;
min-width: 60px;
padding-top: 0.1rem;
}
.sim-task__message {
color: var(--blueprint-text);
font-size: 0.8rem;
flex: 1;
line-height: 1.5;
}
.sim-task__status {
color: var(--blueprint-muted);
font-size: 0.6rem;
padding-top: 0.1rem;
}
.sim-ledger {
padding: 0.5rem 0;
}
.sim-ledger-table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
}
.sim-ledger-table th {
color: var(--blueprint-muted);
text-transform: uppercase;
font-size: 0.65rem;
letter-spacing: 0.08em;
text-align: left;
padding: 0.4rem 0.5rem;
border-bottom: 1px solid var(--blueprint-line);
}
.sim-ledger-row td {
padding: 0.4rem 0.5rem;
border-bottom: 1px solid var(--blueprint-muted);
opacity: 0.7;
vertical-align: top;
}
.sim-ledger-date {
color: var(--blueprint-muted);
white-space: nowrap;
}
.sim-ledger-event {
color: var(--blueprint-text);
white-space: nowrap;
}
.sim-ledger-note {
color: var(--blueprint-muted);
}
/* app/javascript/stylesheets/urist.css */