/* durina.co theme: tokens shared by every page, and the future-style
   components used by the pages outside the world strip (games, login,
   leaderboards, admin, coming soon). */
:root {
  --futura: Futura, "Futura PT", "Futura Std", Jost, "Century Gothic", sans-serif;
  --ink: #141414;
  --void: #f8f8f6;
  --verm: #d9402a;
  --cream: #f2ead9;
  --sky: #4a7cc6;
  --sky-deep: #3a68b4;
  --blue: #1f2bff;
  --paper: #f7f7e6;
  --fink: #142a6b;          /* body text on future paper */
  --fmute: #4f5f8f;
  --gold: #a77708;
  --danger: #c43d27;
  --edge: 1.5px solid var(--blue);
  --lift: 5px 5px 0 rgba(20, 42, 107, .32);
}

/* ---------- future page shell ---------- */
body.future-page { margin: 0; min-height: 100svh; background: var(--sky); color: var(--fink);
                   font: 400 16px/1.55 var(--futura); -webkit-font-smoothing: antialiased; }
.future-page *, .future-page *::before, .future-page *::after { box-sizing: border-box; }
.sky-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block;
                image-rendering: pixelated; image-rendering: crisp-edges; }
.future-page a { color: inherit; text-underline-offset: 4px; }
.future-page :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.f-header { display: flex; align-items: center; justify-content: flex-start; gap: 12px 16px; flex-wrap: wrap;
            padding: 18px clamp(16px, 4vw, 32px); }
.f-mark { display: inline-block; padding: 9px 12px; font: 500 12px/1 var(--futura); letter-spacing: .32em; text-transform: uppercase;
          text-decoration: none; color: var(--blue) !important; background: var(--paper); }
.f-nav { display: flex; gap: 10px; flex-wrap: wrap; }
.f-nav:last-child { margin-left: auto; }
.f-header .btn { min-height: 34px; }
.f-mark { min-height: 34px; display: inline-flex; align-items: center; }
@media (max-width: 620px) { .f-header { justify-content: space-between; } }

.f-main { width: min(1080px, 100%); margin: 0 auto; padding: clamp(12px, 3vw, 28px) clamp(16px, 4vw, 32px) 64px; }
.f-main.narrow { width: min(480px, 100%); }
.f-main.center { min-height: calc(100svh - 140px); display: grid; place-content: center; text-align: center; }

.panel { background: var(--paper); border: var(--edge); box-shadow: var(--lift); padding: clamp(20px, 4vw, 36px); }
.eyebrow { font: 500 11px/1 var(--futura); letter-spacing: .32em; text-transform: uppercase; color: var(--fmute); margin: 0 0 14px; }
.lede { color: var(--fmute); margin: 10px 0 0; }

/* Dot-matrix headings: real text kept, painted by assets/era/dots.js. */
[data-dots] { position: relative; display: inline-block; max-width: 100%; margin: 0; white-space: nowrap; font: 600 clamp(40px, 8vw, 80px)/1.15 var(--futura);
              color: var(--blue); }
[data-dots].dotted { -webkit-text-fill-color: transparent; }
[data-dots] > canvas.dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
h1[data-dots].small, h2[data-dots] { font-size: clamp(30px, 5.5vw, 52px); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px;
       font: 500 12px/1 var(--futura); letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
       color: var(--blue) !important; background: var(--paper); border: var(--edge); border-radius: 0; cursor: pointer;
       transition: background-color .15s, color .15s; }
.btn:hover, .btn.primary { background: var(--blue); color: var(--paper) !important; }
.btn.primary:hover { background: var(--fink); border-color: var(--fink); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.wide { width: 100%; min-height: 48px; }

.field { display: block; margin: 18px 0 0; }
.field > span { display: block; font: 500 11px/1 var(--futura); letter-spacing: .24em; text-transform: uppercase; color: var(--fmute); margin-bottom: 8px; }
.future-page input:not([type=checkbox]), .future-page select {
  display: block; width: 100%; min-height: 46px; padding: 10px 12px; font: 16px var(--futura); color: var(--fink);
  background: #fffff6; border: var(--edge); border-radius: 0; }
.future-page input:focus, .future-page select:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.future-page input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); }
.help { font-size: 13px; color: var(--fmute); margin: 6px 0 0; }
.error { color: var(--danger); min-height: 24px; margin: 14px 0 0; }

/* Tables: leaderboards, admin. */
.f-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.f-table caption { text-align: left; font: 500 11px/1 var(--futura); letter-spacing: .24em; text-transform: uppercase; color: var(--fmute); padding: 0 0 12px; }
.f-table th { text-align: left; font: 500 11px/1 var(--futura); letter-spacing: .2em; text-transform: uppercase; color: var(--fmute);
              padding: 10px 8px; border-bottom: var(--edge); }
.f-table td { padding: 10px 8px; border-bottom: 1px solid rgba(31, 43, 255, .18); }
.f-table tr:first-child td { font-weight: 600; }

/* Game tiles. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 128px;
        padding: 16px; background: var(--paper); border: var(--edge); text-decoration: none; color: var(--fink);
        transition: transform .15s, box-shadow .15s, background-color .15s; }
.tile:hover { transform: translate(-3px, -3px); box-shadow: var(--lift); }
.tile strong { display: block; font: 600 clamp(18px, 2.2vw, 24px)/1.1 var(--futura); color: var(--blue); }
.tile small { display: block; margin-top: 8px; font: 500 10px/1 var(--futura); letter-spacing: .24em; text-transform: uppercase; color: var(--fmute); }
.tile.soon { background: rgba(247, 247, 230, .72); border-style: dashed; }
.tile.soon strong { color: var(--fmute); }
@media (max-width: 680px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tile { min-height: 96px; } }

.gold-amount { color: var(--gold); font-weight: 600; white-space: nowrap; }
.gold-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; fill: currentColor; }

@media (prefers-reduced-motion: reduce) { .tile, .btn { transition: none; } .tile:hover { transform: none; } }