/* radioreloj.co.cr shared look: classic radio (walnut, brass, amber) + December mode.
   December mode = class "dic" on <html>, set by the one-line script in each page head (Dec 1 – Jan 1, Costa Rica time). */
:root {
  --bg:#1c120b; --fg:#f3e6c8; --muted:#b9a27a; --accent:#ffb000; --card:#2a1b10;
  --wood:#5a3a22; --wood2:#7a4f2d; --paper:#efe2c2; --ink:#2b1d12; --brass:#c9a45c; --brass2:#e2c27f;
  --glow:rgba(255,176,0,.55); --red:#e0301e;
}
* { box-sizing:border-box; margin:0; }
body { background:radial-gradient(ellipse at top, #3a2516 0%, var(--bg) 55%) fixed var(--bg); color:var(--fg); font-family:Inter,system-ui,-apple-system,sans-serif; line-height:1.55; }
a { color:var(--brass2); }
h1 { font-family:'Playfair Display',Georgia,serif; color:var(--fg); }
h2 { font-family:'Playfair Display',Georgia,serif; }

nav { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem .5rem; padding:16px; }
nav a { color:var(--fg); text-decoration:none; font-size:.85rem; padding:.35em .9em; border:1px solid #ffffff22; border-radius:999px; white-space:nowrap; }
nav a:hover, nav a[aria-current="page"] { border-color:var(--brass); color:var(--brass2); }
main, footer { position:relative; z-index:1; }
footer { max-width:60rem; margin:0 auto; padding:30px 16px 50px; text-align:center; color:var(--muted); font-size:.8rem; border-top:1px solid #ffffff14; }
footer a { color:var(--brass2); }

/* buttons and form fields in the brass style */
button { font:inherit; cursor:pointer; }
input, select { accent-color:var(--accent); }

/* phones: the menu scrolls sideways instead of taking four rows */
@media (max-width:640px) {
  nav { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); }
  nav::-webkit-scrollbar { display:none; }
}

/* ===== December: night sky, stars and a string of lights under the menu ===== */
.dic body { background:radial-gradient(ellipse at top, #24304f 0%, #0d1220 60%) fixed #0d1220; }
.dic body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(1.5px 1.5px at 10% 20%, #fff8 50%, transparent), radial-gradient(1px 1px at 30% 70%, #fff6 50%, transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, #fff9 50%, transparent), radial-gradient(1px 1px at 80% 40%, #fff7 50%, transparent),
    radial-gradient(2px 2px at 90% 80%, #ffd23f99 50%, transparent), radial-gradient(1px 1px at 20% 90%, #fff6 50%, transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, #fff8 50%, transparent), radial-gradient(1px 1px at 45% 45%, #fff5 50%, transparent); }
.dic nav::after { content:""; position:absolute; left:16px; right:16px; bottom:-2px; height:10px; pointer-events:none;
  background:radial-gradient(circle, #ff4d4d 3px, transparent 4px) 0 0/40px 10px repeat-x,
             radial-gradient(circle, #ffd23f 3px, transparent 4px) 10px 0/40px 10px repeat-x,
             radial-gradient(circle, #3ddc97 3px, transparent 4px) 20px 0/40px 10px repeat-x,
             radial-gradient(circle, #4dabff 3px, transparent 4px) 30px 0/40px 10px repeat-x;
  filter:drop-shadow(0 0 4px #ffd23f88); animation:titila 1.6s infinite alternate; }
@keyframes titila { to { opacity:.55; } }
@media (prefers-reduced-motion: reduce) { .dic nav::after { animation:none; } }
@media (max-width:640px) { .dic nav::after { display:none; } } /* the phone menu scrolls; lights would scroll with nothing behind */

/* ===== inner pages: shared pieces (main .x beats each page's own .x rule) ===== */
main .card, main .next { background:linear-gradient(180deg,#2e1d11,#24170d); border:1px solid #c9a45c55; border-radius:14px; box-shadow:0 12px 26px #0008; }
main h1 { font-family:'Bebas Neue',Impact,sans-serif; font-weight:400; letter-spacing:.05em; font-size:clamp(2.2rem,8vw,3.6rem); line-height:1.05; }
main h2 { color:var(--brass2); }
main #left, main #total, main #next-left { font-family:'Bebas Neue',Impact,sans-serif; font-weight:400; letter-spacing:.04em; color:var(--accent);
  text-shadow:0 0 8px var(--glow), 0 0 26px var(--glow); }
main .button { background:linear-gradient(180deg,#fff3d6,var(--fg) 50%,#d9c494); color:var(--ink); border-radius:14px; box-shadow:0 5px 0 #8a6a3a, 0 10px 20px #0009; }
main input, main select { background:#140d07; border-color:#c9a45c88; color:var(--fg); }