/* Shared styling for the legal pages (privacy / cookies / terms) — branded like the About page.
   No white content box: text flows on the warm gradient; a pill switcher hops between the three pages. */
:root{
  --cream:#fff6e9; --card:#fff; --ink:#4b3a2b; --ink-soft:#977f66;
  --crust:#f4a83a; --grow:#43c08a; --berry:#ff6f8b; --gold:#ffce5c; --line:#f0e0c9;
  --display:"Fredoka",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif;
  --shadow:0 12px 26px -14px rgba(120,80,30,.4); --shadow-lg:0 20px 40px -18px rgba(120,80,30,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--ink); line-height:1.6; min-height:100vh;
  background:
    radial-gradient(34rem 22rem at 12% -8%, #ffe7c2, transparent 70%),
    radial-gradient(32rem 22rem at 100% 0%, #ffe0e6, transparent 65%),
    var(--cream);
}
a{color:var(--crust);text-decoration:none;transition:color .16s ease}
a:hover{color:#d98f1f}

/* header — same bar as the game / About */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:21px 24px 10px}
.logo{display:flex;align-items:center;gap:7px}
.logo__img{height:30px;width:auto;display:block}
.btn{
  font-family:var(--display);font-weight:700;font-size:.92rem;color:#fff;background:var(--grow);
  border:none;border-radius:999px;padding:9px 18px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  box-shadow:0 12px 22px -10px rgba(67,192,138,.85);
  transition:transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 28px -10px rgba(67,192,138,.9);color:#fff}   /* keep white — beats the generic a:hover colour */
.btn:active{transform:translateY(0) scale(.98)}

.wrap{max-width:760px;margin:0 auto;padding:6px 22px 0}

/* pill switcher between the three legal pages */
.legalnav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0 30px}
.legalnav a{
  font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--ink-soft);
  background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 18px;text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.9,.3,1), border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.legalnav a:hover{border-color:var(--crust);color:var(--ink);transform:translateY(-1px)}
.legalnav a.active{background:var(--grow);border-color:var(--grow);color:#fff;box-shadow:0 10px 20px -10px rgba(67,192,138,.8)}

/* content (flat on the cream — no wrapping box) */
.legal h1{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.1;margin-bottom:2px}
.legal .seo{background:var(--gold);border-radius:8px;padding:0 7px}
.legal h2{font-family:var(--display);font-weight:600;font-size:1.2rem;margin:26px 0 6px}
.legal p,.legal li{color:#5b4636}
.legal ul{margin:6px 0 0 20px}
.legal li{margin:3px 0}
.legal .muted{color:var(--ink-soft);font-size:.9rem}
.legal .note{background:#fff4e0;border:2px dashed #e9cfa0;border-radius:14px;padding:13px 16px;font-size:.9rem;color:#7a6147;margin-top:12px}
.legal a{font-weight:700}
.legal [data-cookie-settings]{color:var(--crust);background:none;border:none;font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.legal .back{display:inline-flex;align-items:center;gap:6px;margin-top:26px;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:999px;padding:9px 18px;transition:border-color .16s ease,transform .18s cubic-bezier(.2,.9,.3,1)}
.legal .back:hover{border-color:var(--crust);transform:translateY(-1px)}

/* data tables — neat readable panels; wrap scrolls them horizontally on small screens */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px;border-radius:14px}
.legal table{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;font-size:.9rem;background:#fff;border:2px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.legal th,.legal td{padding:9px 11px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal tr:last-child td{border-bottom:none}
.legal th{background:#fff6e9;font-family:var(--display);font-weight:600;font-size:.84rem;color:var(--ink)}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:38px;padding:22px 0 30px;text-align:center;color:var(--ink-soft)}
.foot__logo img{height:24px;opacity:.85;margin-bottom:10px}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-weight:700;font-size:.85rem;margin-bottom:8px}
.foot__links a,.foot__links button{color:var(--ink);background:none;border:none;font:inherit;cursor:pointer;padding:0;text-decoration:none}
.foot__links a:hover,.foot__links button:hover{color:var(--crust)}
.foot small{font-size:.8rem}

/* smooth reveal-on-load/scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1);transition-delay:calc(var(--d,0)*70ms)}
.reveal.in{opacity:1;transform:none}