/* Totally Easy: Troll Games. This is the game's own look, the same toy-box language as the game itself:
   ink outlines, chunky 3D buttons, a sea-teal sunburst, cream paper, Lilita One and Nunito. Only loaded on /totally-easy/ pages.
   Everything it needs is in /totally-easy/assets/. No remote fonts, nothing that tracks. Motion switches off for reduced-motion. */
@font-face{font-family:"Lilita One";src:url(/totally-easy/assets/fonts/lilita-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(/totally-easy/assets/fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(/totally-easy/assets/fonts/nunito-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  --ink:#0f2a33; --sea-1:#0a4b56; --sea-2:#138a92; --sea-3:#0d6a74;
  --cream:#fff5e2; --cream-d:#f0d9b3; --paper:#fffaf0;
  --tiko:#ff8a1f; --tiko-d:#9c4200; --sun:#ffc83d; --sun-d:#c98600;
  --leaf:#4bd463; --leaf-d:#1f8f38; --berry:#ff4d5e;
  --txt-dim:#cfe9ea; --txt-ink:#14323b; --muted:#4d6a72;
  --g-bg:var(--sea-1); --g-fg:#fff; --g-muted:var(--txt-dim); --g-accent:var(--sun); --g-accent-fg:var(--ink); --g-surface:var(--paper); --g-surface-fg:var(--txt-ink); --g-line:var(--ink);
  --g-a-bg:var(--cream); --g-a-fg:var(--txt-ink); --g-b-bg:var(--sea-1); --g-b-fg:#fff; --g-header-bg:rgba(10,75,86,.94); --g-footer-bg:var(--ink); --g-footer-fg:var(--txt-dim);
  --g-radius:20px; --g-radius-lg:24px; --g-display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif; --g-body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --g-body-size:18px;
}
body{font-weight:700}
a{color:var(--sun);text-underline-offset:3px}
a:hover{color:#fff}
h1,h2,h3{font-weight:400;letter-spacing:.01em}
h1{text-shadow:0 5px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -2px 0 var(--ink)}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
.band-a :focus-visible{outline-color:var(--ink)}

/* header and footer */
.g-header{border-bottom:4px solid var(--ink);backdrop-filter:blur(6px)}
.g-brand{color:#fff;font-size:1.9rem;letter-spacing:.03em}
.g-brand:hover{color:#fff}
.g-nav a{color:#fff;border-radius:999px;font-weight:900;padding:8px 14px}
.g-nav a:hover{background:var(--ink);text-decoration:none}
.g-footer{border-top:4px solid #000}
.g-foot-title{color:var(--sun);letter-spacing:.04em}
.g-footer a{color:#fff}

/* the chunky 3D buttons, the same as the game's */
.btn{--c:#1f8f38;--d:#14662a;font-family:var(--g-display);font-weight:400;font-size:1.2rem;letter-spacing:.02em;color:#fff;padding:11px 24px 15px;border:3px solid var(--ink);border-radius:20px;background:var(--c);
  box-shadow:inset 0 -6px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.45),0 5px 0 var(--ink);
  text-shadow:0 2px 0 rgba(15,42,51,.55),1px 0 0 rgba(15,42,51,.4),-1px 0 0 rgba(15,42,51,.4);transition:transform .08s ease-out,box-shadow .08s ease-out}
.btn:hover{color:#fff;transform:translateY(2px);box-shadow:inset 0 -4px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.45),0 3px 0 var(--ink)}
.btn:active{transform:translateY(5px);box-shadow:inset 0 -2px 0 var(--d),inset 0 3px 0 rgba(255,255,255,.35),0 0 0 var(--ink)}
.btn.alt{--c:var(--cream);--d:var(--cream-d);background:var(--c);color:var(--txt-ink);text-shadow:none;border-color:var(--ink)}
.btn.alt:hover{color:var(--txt-ink)}
.band-a .btn.alt,.band-b .btn.alt{color:var(--txt-ink)}
.btn[aria-disabled="true"]{--c:var(--cream-d);--d:#d9bf8f;color:var(--txt-ink);text-shadow:none;opacity:1}

/* hero: a sea-teal sunburst */
.hero{background:radial-gradient(120% 90% at 30% 20%,var(--sea-2) 0%,var(--sea-3) 45%,var(--sea-1) 100%)}
.hero::before{content:"";position:absolute;left:30%;top:30%;width:230vmax;height:230vmax;margin:-115vmax 0 0 -115vmax;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.055) 0deg 9deg,rgba(255,255,255,0) 9deg 18deg);animation:spin 120s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.hero .icon{border:4px solid var(--ink);border-radius:26px;box-shadow:0 6px 0 var(--ink);width:104px;height:104px}
.sticker{background:var(--sun);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:5px 14px;font-family:var(--g-display);font-weight:400;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-2deg);margin-left:10px}
.hero .lead{color:var(--txt-dim)}
.phone{border:6px solid var(--ink);border-radius:34px;box-shadow:0 9px 0 var(--ink)}
.hero-media .phone{width:min(300px,100%);transform:rotate(3deg)}

/* bands */
.band-b{background:var(--sea-1)}
.band-a::before,.band-a::after{content:"";position:absolute;left:0;right:0;height:16px;background:linear-gradient(-45deg,transparent 8px,var(--cream) 0),linear-gradient(45deg,transparent 8px,var(--cream) 0);background-size:16px 16px}
.band-a::before{top:-15px;transform:scaleY(-1)}
.band-a::after{bottom:-15px}
.band-a h2,.band-a h3{color:var(--ink)}
.band-a a{color:#1868b8}
.band-a .btn{color:#fff}
.band-a .btn.alt{color:var(--txt-ink)}
.eyebrow{font-family:var(--g-display);font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:.98rem;color:var(--sun)}
.band-a .eyebrow{color:var(--tiko-d)}
.card{background:var(--paper);color:var(--txt-ink);border:3px solid var(--ink);border-radius:24px;box-shadow:0 7px 0 var(--ink)}
.card h3{color:var(--ink)}
.band-a .card{background:#fff}
.num{background:var(--tiko);color:var(--ink);border:3px solid var(--ink);font-family:var(--g-display);font-weight:400;font-size:1.3rem;width:42px;height:42px;text-shadow:0 2px 0 rgba(15,42,51,.5)}
.gallery figcaption{color:var(--txt-dim)}
.band-a .gallery figcaption{color:var(--muted)}
.lie{background:var(--ink);color:var(--sun);border-radius:12px}
dl.facts dt{font-family:var(--g-display);font-weight:400;color:var(--tiko-d);letter-spacing:.04em}
details{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink)}
summary{color:var(--ink);font-weight:400}
summary::after{color:var(--tiko-d)}
.quote{font-weight:400}
.legal-links{color:var(--txt-dim)}
.band-a .legal-links{color:var(--muted)}
.legal-links a{color:#fff}
.band-a .legal-links a{color:#1868b8}

/* the game's own pages */
.page{color:#fff}
.page h1{font-size:clamp(2.2rem,6vw,3.6rem)}
.page table{background:var(--paper);color:var(--txt-ink)}
.page th,.page td{border:3px solid var(--ink)}
.page th{background:var(--cream-d)}
.page td a,.page li a{color:var(--sun)}
.page td a{color:#1868b8}
.crumb a{text-decoration:none}

@media (max-width:860px){.hero{padding:48px 0 64px}.hero-media .phone{width:230px}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}.btn{transition:none}}
