/* Ourofouro — shared styles for the account & meta pages.
   Same world as the game: deep-violet cosmic sky, gold accent, Fraunces + Space Grotesk. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --gold:#f6cf3e; --gold-deep:#e0a92a; --gold-soft:#fbe28a;
  --green:#37c08a; --green-deep:#1f8d63;
  --red:#e0556b; --red-deep:#b23047;
  --ink:#241046; --text:#f1e9ff; --text-dim:#bfb0dd; --text-faint:#8f80b3;
  --bg-0:#180d2b; --bg-1:#321a52; --bg-2:#5a2c86; --bg-haze:#7a44b0;
  --panel:rgba(255,255,255,.05); --panel-edge:rgba(255,255,255,.10);
  --maxw:520px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{margin:0; min-height:100dvh; color:var(--text); background:var(--bg-0);
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif; overflow-x:hidden;}

/* atmosphere — identical to the game */
.sky{position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -8%, var(--bg-haze) 0%, transparent 55%),
    radial-gradient(150% 120% at 82% 18%, var(--bg-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 80%);}
.sky::before,.sky::after{content:""; position:absolute; border-radius:50%; filter:blur(64px); opacity:.5; mix-blend-mode:screen;}
.sky::before{width:62vmax;height:62vmax; top:-20vmax; left:-12vmax; background:var(--bg-2);}
.sky::after{width:50vmax;height:50vmax; top:16vmax; right:-15vmax; background:var(--bg-haze); opacity:.4;}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* top nav (injected by ouro.js) */
.nav{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px; padding:12px clamp(14px,5vw,26px); backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(24,13,43,.72), rgba(24,13,43,.30)); border-bottom:1px solid var(--panel-edge);}
.nav .brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:#fff;}
.nav .brand svg{width:24px; height:24px; flex:none;}
.nav .brand b{font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:20px; letter-spacing:.01em;}
.nav .links{display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end;}
.nav .links a{color:var(--text-dim); text-decoration:none; font-size:14px; font-weight:500;
  padding:7px 11px; border-radius:10px; transition:color .15s, background .15s;}
.nav .links a:hover{color:#fff; background:rgba(255,255,255,.06);}
.nav .links a[aria-current="page"]{color:var(--ink); background:var(--gold);}
.nav .avatar{width:34px;height:34px; border-radius:50%; display:grid; place-items:center; text-decoration:none;
  font-weight:700; color:var(--ink); background:linear-gradient(150deg,var(--gold-soft),var(--gold)); border:none; cursor:pointer;}
.nav .ghost{color:var(--text); border:1px solid var(--panel-edge); background:rgba(255,255,255,.06);
  padding:7px 13px; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none;}
.nav .ghost:hover{background:rgba(255,255,255,.12);}
/* Compact the shared nav on phones; links drop to their own row so nothing clips. */
@media (max-width:560px){
  .nav{padding:10px 14px; gap:6px 8px;}
  .nav .brand b{font-size:17px;}
  .nav .links{flex-basis:100%; justify-content:flex-end; gap:3px; flex-wrap:wrap;}
  .nav .links a{padding:6px 9px; font-size:13px; white-space:nowrap;}
  .nav .ghost{padding:6px 11px; font-size:13px;}
  .nav .avatar{width:30px; height:30px;}
}

/* layout */
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(20px,5vw,38px) clamp(14px,5vw,22px) 60px;}
.eyebrow{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 8px;}
h1.title{font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:clamp(28px,7vw,40px);
  line-height:1.05; margin:0 0 6px; color:#fff;}
.lede{color:var(--text-dim); font-size:15px; margin:0 0 26px; max-width:40ch;}

.card{background:var(--panel); border:1px solid var(--panel-edge); border-radius:20px;
  padding:22px; backdrop-filter:blur(8px); margin-bottom:16px;}
.card h2{font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:19px; margin:0 0 14px; color:#fff;}
.card .hint{color:var(--text-faint); font-size:13px; margin:10px 0 0;}

/* forms */
label.field{display:block; margin-bottom:14px;}
label.field span{display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px; letter-spacing:.02em;}
input[type=email],input[type=text]{width:100%; font:inherit; color:var(--text); padding:12px 14px;
  border-radius:12px; border:1px solid var(--panel-edge); background:rgba(0,0,0,.22); transition:border-color .15s, box-shadow .15s;}
input::placeholder{color:var(--text-faint);}
input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(246,207,62,.2);}

.btn{appearance:none; cursor:pointer; font:inherit; font-weight:700; border:none; border-radius:12px;
  padding:13px 18px; width:100%; transition:transform .1s, filter .15s, background .15s;}
.btn:active{transform:scale(.985);}
.btn-primary{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:var(--ink);}
.btn-primary:hover{filter:brightness(1.04);}
.btn-ghost{background:rgba(255,255,255,.06); border:1px solid var(--panel-edge); color:var(--text);}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-danger{background:transparent; border:1px solid var(--red); color:var(--red-soft,#f2a3b0);}
.btn-danger:hover{background:rgba(224,85,107,.14);}
.btn:disabled{opacity:.55; cursor:default;}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.or{display:flex; align-items:center; gap:12px; color:var(--text-faint); font-size:12px; margin:16px 0;}
.or::before,.or::after{content:""; height:1px; flex:1; background:var(--panel-edge);}

/* stat tiles */
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.stat{background:rgba(0,0,0,.18); border:1px solid var(--panel-edge); border-radius:16px; padding:16px;}
.stat .num{font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:30px; line-height:1; color:#fff;}
.stat .num .flame{color:var(--gold);}
.stat .lab{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); margin-top:7px;}

/* guess distribution */
.dist{display:flex; flex-direction:column; gap:7px;}
.dist .row{display:grid; grid-template-columns:42px 1fr; align-items:center; gap:10px; font-size:13px;}
.dist .row .k{color:var(--text-dim); text-align:right;}
.dist .bar{height:24px; border-radius:7px; background:linear-gradient(90deg,var(--green-deep),var(--green));
  min-width:26px; display:flex; align-items:center; justify-content:flex-end; padding:0 8px;
  color:#06281c; font-weight:700; font-size:12px;}

/* history list */
.list{display:flex; flex-direction:column;}
.list .item{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 4px; border-bottom:1px solid var(--panel-edge);}
.list .item:last-child{border-bottom:none;}
.list .item .d{color:#fff; font-weight:500;}
.list .item .meta{color:var(--text-faint); font-size:12.5px;}
.pill{font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px;}
.pill.win{background:rgba(55,192,138,.18); color:var(--green);}
.pill.miss{background:rgba(224,85,107,.16); color:var(--red);}

/* archive grid */
.arch{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px;}
.arch a{display:block; text-decoration:none; color:var(--text); background:rgba(0,0,0,.18);
  border:1px solid var(--panel-edge); border-radius:16px; padding:14px; transition:border-color .15s, transform .1s, background .15s;}
.arch a:hover{border-color:var(--gold); background:rgba(255,255,255,.05);}
.arch a:active{transform:scale(.98);}
.arch a[data-today="1"]{border-color:var(--gold); box-shadow:0 0 0 2px rgba(246,207,62,.18);}
.arch .no{font-family:"Fraunces", Georgia, serif; font-size:20px; color:#fff;}
.arch .dt{font-size:12px; color:var(--text-dim); margin-top:3px;}
.arch .done{margin-top:9px; font-size:11.5px; font-weight:700; color:var(--green);}
.arch .open{margin-top:9px; font-size:11.5px; color:var(--text-faint);}

/* messages */
.note{border-radius:12px; padding:11px 14px; font-size:13.5px; margin-bottom:16px; border:1px solid;}
.note.ok{background:rgba(55,192,138,.12); border-color:rgba(55,192,138,.4); color:var(--green);}
.note.err{background:rgba(224,85,107,.12); border-color:rgba(224,85,107,.4); color:var(--red);}
.note.info{background:rgba(246,207,62,.10); border-color:rgba(246,207,62,.35); color:var(--gold-soft);}
.demo-banner{position:sticky; top:0; z-index:30; text-align:center; font-size:12.5px; padding:8px 14px;
  background:rgba(246,207,62,.14); color:var(--gold-soft); border-bottom:1px solid rgba(246,207,62,.3);}
.muted{color:var(--text-faint);} .center{text-align:center;}
a.textlink{color:var(--gold); text-decoration:none;} a.textlink:hover{text-decoration:underline;}
.spinner{display:inline-block; width:16px;height:16px; border:2px solid rgba(255,255,255,.25);
  border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-3px;}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* Trademark mark on the wordmark + shared site footer */
.tm{font-size:.58em; vertical-align:.45em; opacity:.7; margin-left:1px; font-weight:600;}
.site-footer{text-align:center; padding:28px 18px calc(20px + env(safe-area-inset-bottom));
  color:var(--text-faint); font-size:13px; border-top:1px solid var(--panel-edge); margin-top:40px;}