/* Acorn Pass Games — shared visual skin
Import this file in every game page. Game-specific layout goes in the game's own stylesheet. */
/* Fonts — loaded by each game's */
/*
*/
/* ── Design tokens ─────────────────────────────────────────── */
:root {
--bg-1: #1a1f3a;
--bg-2: #2a2654;
--bg-3: #0f1226;
--plum: #2d1b3d;
--card: #f5ede0;
--card-edge: #d9cbb0;
--ink: #1a1814;
--red: #a83232;
--gold: #c9a961;
--gold-bright: #e0c47a;
--gold-dim: #8a7340;
--gold-faint: rgba(201, 169, 97, 0.18);
--slot-bg: rgba(255, 255, 255, 0.03);
--slot-line: rgba(201, 169, 97, 0.22);
--serif: 'Cormorant Garamond', 'Times New Roman', serif;
--sans: 'DM Sans', system-ui, sans-serif;
}
/* ── Reset ─────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
*::selection { background: var(--gold); color: var(--bg-1); }
/* ── Base ──────────────────────────────────────────────────── */
html, body {
height: 100%;
overflow: hidden;
overscroll-behavior: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
}
body {
font-family: var(--sans);
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(82, 60, 130, 0.4) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 100% 100%, rgba(80, 30, 80, 0.3) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 0% 100%, rgba(40, 50, 100, 0.3) 0%, transparent 60%),
linear-gradient(180deg, var(--bg-1) 0%, var(--bg-3) 100%);
background-attachment: fixed;
color: var(--card);
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
position: relative;
}
/* Grain texture overlay */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.35;
z-index: 0;
}
/* Vignette overlay */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 100% 80% at center, transparent 50%, rgba(0,0,0,0.45) 100%);
z-index: 0;
}
/* ── Header ────────────────────────────────────────────────── */
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 22px 12px;
border-bottom: 1px solid var(--gold-faint);
position: relative;
z-index: 3;
flex-shrink: 0;
gap: 12px;
}
.brand {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--serif);
white-space: nowrap;
}
.brand .mark {
font-size: 22px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.brand .ornament {
color: var(--gold-dim);
font-size: 14px;
letter-spacing: 0.1em;
}
.brand .sub {
font-style: italic;
font-size: 15px;
color: rgba(245, 237, 224, 0.55);
letter-spacing: 0.05em;
}
/* ── HUD / stats ───────────────────────────────────────────── */
.hud {
display: flex;
align-items: center;
gap: 18px;
}
.stat {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1;
}
.stat .label {
font-family: var(--serif);
font-style: italic;
color: var(--gold-dim);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 3px;
}
.stat .value {
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--card);
font-size: 15px;
letter-spacing: 0.04em;
}
/* ── Action buttons ────────────────────────────────────────── */
.actions {
display: flex;
gap: 8px;
}
.icon-btn {
background: transparent;
border: 1px solid var(--gold-faint);
color: var(--card);
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 17px;
line-height: 1;
}
.icon-btn:hover {
border-color: var(--gold);
color: var(--gold-bright);
background: rgba(201, 169, 97, 0.1);
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn:disabled {
opacity: 0.25;
cursor: default;
pointer-events: none;
}
/* Primary button */
.btn {
background: transparent;
color: var(--gold-bright);
border: 1px solid var(--gold);
padding: 13px 32px;
border-radius: 0;
font-family: var(--sans);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 11px;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.btn:hover { background: var(--gold); color: var(--bg-1); }
.btn:active { transform: scale(0.97); }
/* ── Modal ─────────────────────────────────────────────────── */
.modal {
position: fixed;
inset: 0;
background: rgba(15, 18, 38, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: grid;
place-items: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
padding: 20px;
}
.modal.show { opacity: 1; pointer-events: auto; }
.modal .panel {
background:
radial-gradient(ellipse at top, rgba(82, 60, 130, 0.4) 0%, transparent 70%),
linear-gradient(180deg, #2a2554 0%, #181536 100%);
border: 1px solid var(--gold);
padding: 50px 60px;
border-radius: 4px;
text-align: center;
max-width: 92%;
position: relative;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
transform: scale(0.92);
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}
.modal.show .panel { transform: scale(1); }
.modal .panel::before,
.modal .panel::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border: 1px solid var(--gold);
}
.modal .panel::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.modal .panel::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.modal h2 {
font-family: var(--serif);
font-size: clamp(36px, 8vw, 56px);
font-style: italic;
font-weight: 500;
color: var(--gold-bright);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.modal .ornament-line {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 4px auto 22px;
color: var(--gold-dim);
}
.modal .ornament-line::before,
.modal .ornament-line::after {
content: '';
height: 1px;
width: 40px;
background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.modal .ornament-line span {
font-family: var(--serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.3em;
text-transform: uppercase;
}
.modal p {
font-family: var(--serif);
font-size: 18px;
margin-bottom: 28px;
color: rgba(245, 237, 224, 0.85);
font-style: italic;
}
.modal .stats {
display: flex;
gap: 32px;
justify-content: center;
margin-bottom: 32px;
}
.modal .stats .stat { align-items: center; }
.modal .stats .label { color: var(--gold-dim); }
.modal .stats .value { font-size: 22px; }
/* ── Toast ─────────────────────────────────────────────────── */
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(80px);
background: rgba(26, 31, 58, 0.95);
border: 1px solid var(--gold-faint);
color: var(--card);
padding: 10px 20px;
border-radius: 24px;
font-size: 13px;
font-family: var(--serif);
font-style: italic;
letter-spacing: 0.05em;
z-index: 200;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
backdrop-filter: blur(8px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
header { padding: 10px 14px 9px; gap: 6px; }
.brand .mark { font-size: 14px; letter-spacing: 0.16em; }
.brand .ornament, .brand .sub { display: none; }
.hud { gap: 12px; }
.stat .label { font-size: 9px; letter-spacing: 0.14em; }
.stat .value { font-size: 13px; }
.icon-btn { width: 32px; height: 32px; font-size: 15px; }
.actions { gap: 6px; }
.modal .panel { padding: 36px 28px; }
.modal .stats { gap: 22px; }
}
@media (max-width: 360px) {
.stat:not(.always-show) { display: none; }
.brand .mark { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 480px) {
header { padding: 6px 14px; }
.brand .ornament, .brand .sub { display: none; }
}
/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}