/* The Pokémon game look shared by mail (Squirtle) and groceries (Bulbasaur); fitness (Pikachu) and
   mod (Ghastly) carry the same look in their own pages. Load it after the app's theme
   (theme.css or theme-classic.css) and set, on :root:
     --accent      the Pokémon's main colour        --on-accent  text on it
     --deep        the hard shadow under it, like a game button's underside
     --pop         a small second colour (the title's full stop, Poké Ball marks)
     --edge        an SVG pattern hung under the header (waves, leaves…) as a url()
   Fredoka is self-hosted in /fonts so no font request leaves the hub. */

@font-face { font-family: Fredoka; font-weight: 500; font-display: swap; src: url(/fonts/fredoka-500.woff2) format("woff2"); }
@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(/fonts/fredoka-600.woff2) format("woff2"); }
@font-face { font-family: Fredoka; font-weight: 700; font-display: swap; src: url(/fonts/fredoka-700.woff2) format("woff2"); }
:root { --display: Fredoka, var(--font); --card-radius: 22px; }

/* a dotted game-screen backdrop with a glow from the top */
html, body { background-color: var(--bg);
  background-image: radial-gradient(120% 420px at 50% -60px, rgba(var(--accent-rgb), .16), transparent 70%),
                    radial-gradient(rgba(var(--accent-rgb), .07) 1px, transparent 1.6px);
  background-size: 100% 520px, 14px 14px; background-repeat: no-repeat, repeat; }
body::before { display: none; }

/* header: the name in the Pokémon's colour with a hard drop, a pattern hung under it */
.app-head { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.app-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; pointer-events: none; background: var(--edge) 0 0 / auto 100% repeat-x; }
.app-title h1 { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: .005em; color: var(--accent); text-shadow: 0 3px 0 var(--deep), 0 0 22px rgba(var(--accent-rgb), .22); }
.app-title h1::after { color: var(--pop); text-shadow: 0 3px 0 color-mix(in srgb, var(--pop) 55%, #000); }
.app-title .icon-btn, .sheet-bar > .icon-btn { border: 2px solid var(--line-2); background: var(--surface); color: var(--accent); }

/* chips and buttons: chunky, lit ones pressed up on their shadow */
.chips button { font-family: var(--display); font-weight: 600; border: 2px solid var(--line-2); }
.chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 3px 0 var(--deep); }
.btn { font-family: var(--display); font-weight: 600; font-size: 16px; border: 2px solid var(--line-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--deep); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--deep); }
.btn.danger { border-color: transparent; box-shadow: none; }
.field { border-width: 2px; border-style: solid; border-color: var(--line-2); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14); outline: 0; }

/* a Poké Ball before a section title (mail's sections, or any .poke-mark) */
.poke-mark, .sec-title { position: relative; padding-left: 21px; }
.poke-mark::before, .sec-title::before { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; box-sizing: border-box; border: 2px solid #0b0b0b;
  background: radial-gradient(circle, #fff8ec 0 1.6px, #0b0b0b 1.7px 3.4px, transparent 3.5px), linear-gradient(#ef4b3c 0 43%, #0b0b0b 43% 57%, #fff8ec 57%); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .4); }

/* sheets and the toast */
.sheet { background: var(--bg); }
.sheet h2 { font-family: var(--display); font-weight: 600; color: var(--accent); }
.toast { background: var(--accent); color: var(--on-accent); border: 2px solid var(--accent); box-shadow: 0 4px 0 var(--deep), 0 10px 30px rgba(0, 0, 0, .6); font-family: var(--display); font-weight: 600; }
.toast button { color: var(--on-accent); }