:root { --ink: #162321; --paper: #f4f0e4; --coral: #d95d39; --teal: #126e69; --line: #c9c3ae; --muted: #63706b; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: repeating-linear-gradient(0deg, #f4f0e4 0, #f4f0e4 28px, #eee8d9 29px); font-family: Georgia, serif; }
button, input, textarea, select { font: inherit; } input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 3px; background: #fffdf6; padding: .65rem; color: var(--ink); } textarea { min-height: 6rem; resize: vertical; }
.site-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid var(--line); background: rgba(244,240,228,.94); } .brand { font-family: Impact, sans-serif; font-size: 1.4rem; letter-spacing: .04em; color: var(--ink); text-decoration: none; text-transform: uppercase; } .brand span { color: var(--coral); } nav { display: flex; align-items: center; gap: 1rem; } nav a { color: var(--ink); text-decoration: none; font-weight: bold; } nav form { margin: 0; }
.page { max-width: 1200px; margin: 0 auto; padding: 4rem 5vw 6rem; } .eyebrow { color: var(--teal); font-family: Arial, sans-serif; font-size: .72rem; font-weight: bold; letter-spacing: .15em; margin: 0 0 .45rem; } h1, h2, p { margin-top: 0; } h1 { font-family: Impact, sans-serif; font-size: clamp(2.5rem, 8vw, 5.3rem); line-height: .9; letter-spacing: .02em; margin-bottom: 2rem; text-transform: uppercase; } h2 { font-size: 1.35rem; margin-bottom: .65rem; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .game-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 290px; padding: 1.5rem; background: var(--paper); } .game-index { color: var(--coral); font-family: Arial, sans-serif; font-weight: bold; } .game-card > p:not(.game-index) { color: var(--muted); line-height: 1.5; } .tag-row { margin: auto 0 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; } .tag-row span { border: 1px solid var(--teal); color: var(--teal); font: .75rem Arial, sans-serif; padding: .2rem .4rem; }
.button { display: inline-block; border: 1px solid var(--ink); border-radius: 3px; cursor: pointer; padding: .65rem 1rem; color: var(--ink); background: transparent; font-family: Arial, sans-serif; font-size: .82rem; font-weight: bold; text-decoration: none; text-transform: uppercase; } .button.primary { color: #fffdf6; background: var(--coral); border-color: var(--coral); } .button.quiet { background: transparent; }
.auth-panel { max-width: 420px; margin: 7vh auto; border: 1px solid var(--ink); padding: 2rem; background: #fffdf6; box-shadow: 9px 9px 0 var(--teal); }.auth-panel h1 { font-size: 3rem; }.stack { display: grid; gap: 1rem; } label { display: grid; gap: .35rem; font-family: Arial, sans-serif; font-size: .84rem; font-weight: bold; }.check { display: flex; align-items: center; gap: .5rem; }.check input { width: auto; }.notice, .errors { padding: 1rem; margin-bottom: 2rem; border: 1px solid var(--teal); background: #e1f0e9; }.errors { border-color: var(--coral); background: #ffe9e1; }.errors ul { margin-bottom: 0; }
.player-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }.player-heading h1 { margin-bottom: 0; }.game-description { max-width: 680px; color: var(--muted); }.player-shell { display: grid; place-items: center; min-height: 600px; margin-top: 2rem; background: #111e1c; color: #fff; border: 8px solid var(--ink); }.player-shell ruffle-player { width: min(100%, 1000px); height: min(70vh, 720px); }
.save-actions { align-items: center; margin-top: 1rem; }.save-status { margin: 0; color: var(--muted); }.save-buttons { display: flex; gap: .5rem; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }.admin-section { padding: 1.5rem; border: 1px solid var(--ink); background: #fffdf6; }.admin-section.wide { margin-top: 2rem; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 0; border-top: 1px solid var(--line); }.inline-form input, .inline-form select { width: auto; min-width: 110px; }.inline-form .grow { flex: 1; min-width: 220px; }.inline-form span { min-width: 180px; font-family: Arial, sans-serif; font-size: .85rem; }
@media (max-width: 700px) { .page { padding-top: 2.5rem; }.site-header { padding: 0 1rem; }.site-header nav { gap: .5rem; font-size: .85rem; }.admin-grid { grid-template-columns: 1fr; }.player-heading { align-items: flex-end; }.player-shell { min-height: 400px; border-width: 4px; }.form-row { grid-template-columns: 1fr; } }