/* LingoPlaytime brand layer: bright felt. Loaded after each page's own CSS, so it wins.
   Tokens are documented in the style guide (claude/style-guide.md). */
:root,:root[data-theme="dark"]{
  --page:#3fa9e0;            /* bright sky-blue felt, the page behind everything */
  --paper:#fff4dc;           /* cream felt card */
  --bg:#f7e7c1;              /* soft cream for inputs, tags, wells */
  --ink:#16384f;             /* deep ink blue, all body text */
  --muted:#3d5668;
  --line:#e2cd9b;            /* cream edge */
  --red:#d92b25; --blue:#137aa6; --orange:#f47c1c; --yellow:#f8b81f; --leaf:#4d9a3f;
  --tomato:var(--red); --sky:var(--blue); --sun:var(--yellow); --teal:var(--blue); --lilac:var(--leaf);
  --tomato-soft:#ffd9c2; --sun-soft:#ffe9a8; --teal-soft:#bfe6f4; --lilac-soft:#d4ebc3;
  --stitch:#e0592a99; --r:26px; color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --page:#3fa9e0;--paper:#fff4dc;--bg:#f7e7c1;--ink:#16384f;--muted:#3d5668;--line:#e2cd9b;
  --tomato:var(--red);--sky:var(--blue);--sun:var(--yellow);--teal:var(--blue);--lilac:var(--leaf);
  --tomato-soft:#ffd9c2;--sun-soft:#ffe9a8;--teal-soft:#bfe6f4;--lilac-soft:#d4ebc3;color-scheme:light}}

body{background-color:#f6e3c4;color:var(--ink);
  background-image:radial-gradient(90% 50% at 85% -5%,#ffffffcc,transparent 70%),radial-gradient(70% 45% at 0% 100%,#f9cf9c88,transparent 70%),linear-gradient(180deg,#fff8ea 0%,#f7e5c8 55%,#efd0a8 100%);
  background-attachment:fixed}
body::before{background:transparent!important}
a{color:var(--blue)}

/* header: a clean cream bar, logo left, nav pills right */
header{margin:14px 0 14px;padding:6px 10px 6px 18px;gap:8px 16px;background:#fffdf7;border-radius:999px;box-shadow:0 1px 0 #fff inset,0 10px 30px -18px #8a5a2a88,0 2px 6px -2px #8a5a2a22;position:relative}
.logo img{height:clamp(52px,8vw,74px);width:auto;display:block}
nav a,nav button{color:var(--ink)}
nav a:hover,nav button:hover{background:#fbeccb;color:var(--ink)}
nav button[aria-current="page"],nav a[aria-current="page"]{background:var(--blue);color:#fff;box-shadow:none}
@media (max-width:640px){header{border-radius:28px}nav{width:100%}}

/* cards: soft white paper, big corners, a gentle lift */
.card{background:#fffdf7;border-radius:30px;position:relative;box-shadow:0 1px 0 #fff inset,0 18px 40px -26px #8a5a2a99,0 3px 8px -3px #8a5a2a22}
.eyebrow,.facts .k{color:var(--orange)}
.hello span,.tile{color:var(--ink)}
.sample{background:var(--sun-soft)}

/* controls */
#name{background:#fffaf0;border-color:var(--line);color:var(--ink)}
#name:focus{border-color:var(--blue)}
.pill,.lpbar .chip,.back,.fsbtn,.hear{background:#fffaf0;border:2px solid var(--line);color:var(--ink)}
.pill:hover,.lpbar .chip:hover,.back:hover,.fsbtn:hover{border-color:var(--blue)}
.pill .code,.lpbar .chip .code,.vrow .lname .code{background:var(--sun-soft);color:var(--ink)}
.pill[aria-pressed="true"],.lpbar .chip.on{background:var(--blue);border-color:#0b5a7d;color:#fff}
.pill[aria-pressed="true"] .code,.lpbar .chip.on .code{background:var(--yellow);color:var(--ink)}
.go{background:var(--red);color:#fff;border:2px dashed #ffffffaa;box-shadow:0 5px 0 #96201c}
.go:active{box-shadow:0 1px 0 #96201c}
.go:disabled{background:#e6d7b4;color:#6b5f45;border-color:transparent;box-shadow:none}
.setbtn{background:var(--blue);border-color:#0b5a7d;color:#fff;box-shadow:0 3px 0 #0b5a7d}
.setbtn .fill{background:linear-gradient(90deg,var(--orange),var(--yellow))}
.danger{color:var(--red);border-color:var(--red)}
.err,.vrow .none{color:var(--red)}
.hold{background:var(--blue)}.hold i{background:var(--yellow);opacity:.9}
.confirm .yes{background:var(--red);border-color:var(--red)}

/* text that sits straight on the page */
.filter .quiet{color:var(--muted);font-weight:700}
footer a,footer a.tiny{color:#fff8e6}

/* play bar and game window */
.lpbar{background:#fffdf7;box-shadow:0 10px 30px -18px #8a5a2a88,0 2px 6px -2px #8a5a2a22}
.lpbar::after{content:none}
html.playing .lpbar{box-shadow:0 2px 0 #e6cfa4}
.frame{background:var(--paper)}
.sheet{background:#0a3a5ccc}

/* the greeting is a hero: the felt soup kitchen with a name on it */
.games>.card{padding:clamp(26px,5vw,52px);min-height:clamp(250px,34vw,330px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;overflow:hidden;color:#fff;
  background:linear-gradient(90deg,#0b2d47dd 0%,#0b2d4790 36%,#0b2d4718 68%,transparent),url(felt/bd-soup.webp) 62% 40%/cover,#13476b;border-radius:34px}
.games>.card h1{color:#fff;font-size:clamp(34px,5.6vw,60px);line-height:1.05;max-width:13ch;text-shadow:0 3px 0 #0b2d4766}
.games>.card .eyebrow{color:var(--yellow);letter-spacing:.12em}
.games>.card .hello span{background:#fffdf7e6;color:var(--ink);box-shadow:none}
.cta{margin-top:18px;background:var(--yellow);color:#4a2a05;border:0;border-radius:999px;padding:13px 30px;font-family:var(--display);font-weight:700;font-size:clamp(18px,2.4vw,22px);cursor:pointer;min-height:52px;box-shadow:0 6px 0 #c4860f,0 14px 22px -10px #000a}
.cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 #c4860f}

/* game cards: pastel picture well, title, blurb, a cream play pill */
.grid{gap:22px}
.game{background:#fffdf7;border:0;border-radius:30px;padding:14px 14px 16px;gap:8px;box-shadow:0 1px 0 #fff inset,0 18px 34px -24px #8a5a2aaa,0 3px 8px -3px #8a5a2a22;transition:transform .18s,box-shadow .18s}
.game:hover{transform:translateY(-5px);box-shadow:0 1px 0 #fff inset,0 26px 38px -22px #8a5a2acc,0 4px 10px -3px #8a5a2a33;border:0}
.game .art,.game .art.day,.game .art.night{border:0;border-image:none;border-radius:22px;background-clip:border-box;box-shadow:none;aspect-ratio:4/3}
.game .art,.game .art.day,.game .art.night{background:var(--pastel,#e3f2e8)}
.game:nth-child(6n+1){--pastel:#e3f2e8}.game:nth-child(6n+2){--pastel:#dbeef5}.game:nth-child(6n+3){--pastel:#fde3c0}
.game:nth-child(6n+4){--pastel:#f9dcd8}.game:nth-child(6n+5){--pastel:#e8e0f5}.game:nth-child(6n+6){--pastel:#fbefb8}
.game:hover .art{transform:none}
.game .art svg,.game .art img{filter:drop-shadow(0 8px 10px #8a5a2a44)}
.game h3{font-size:22px;margin:6px 6px 0}
.game p{margin:0 6px;font-size:15px;line-height:1.45}
.playnow{display:block;margin:10px 6px 0;padding:11px 0;border-radius:999px;background:#fdeec8;color:#a15a05;text-align:center;font-family:var(--display);font-weight:700;font-size:18px;transition:background .15s}
.game:hover .playnow{background:var(--yellow);color:#4a2a05}
.tag{background:var(--bg);color:var(--ink)}
.tag.sound{background:var(--yellow);color:var(--ink)}
.soon span{background:var(--yellow);color:var(--ink)}

/* cardboard footer stays: the one place the page is glued paper */
footer{background:var(--card-board) repeat-x 0 0/auto 100%,#b87a40;color:#fff8e6;border-radius:18px 18px 0 0;padding:18px 12px 12px;font-weight:700;text-shadow:0 1px 0 #6b4220;box-shadow:inset 0 3px 0 #e0a869,inset 0 -3px 0 #0000002b}
html.playing footer{background:var(--card-board) repeat-x 0 0/auto 100%,#b87a40;border-radius:0}
:root{--fuzz:url(felt/paper.webp);--card-board:url(felt/cardboard-strip.webp)}
/* felt buttons keep their wool grain */
.go,.setbtn,.pill[aria-pressed="true"],.lpbar .chip.on,nav a[aria-current="page"],nav button[aria-current="page"]{background-image:var(--fuzz),radial-gradient(120% 90% at 50% 0%,#ffffff40,transparent 60%);background-blend-mode:multiply,normal;box-shadow:inset 0 3px 2px #ffffff55,inset 0 -4px 3px #00000030,0 4px 0 #00000040}
.go{box-shadow:inset 0 3px 2px #ffffff66,inset 0 -5px 4px #00000033,0 6px 0 #96201c}
.go:active{box-shadow:inset 0 3px 6px #00000044,0 1px 0 #96201c}
.hello span{box-shadow:none}
.pill,.lpbar .chip,.back,.fsbtn,#name{background-image:none}

/* sound button: blue felt when on, red with a slash when off */
.sndbtn{background:var(--blue);border-color:#0b5a7d;color:#fff;width:34px;height:34px}
.sndbtn .off{display:none}.sndbtn.muted{background:var(--red);border-color:#96201c}.sndbtn.muted .on{display:none}.sndbtn.muted .off{display:inline}
.sndbtn:hover{border-color:var(--yellow)}

/* hero CTA: red felt with a stitched edge */
.cta{background:var(--red);background-image:var(--fuzz),radial-gradient(120% 90% at 50% 0%,#ffffff40,transparent 60%);background-blend-mode:multiply,normal;color:#fff;border:2px dashed #ffffffb0;outline:3px solid var(--red);outline-offset:-1px;text-shadow:0 1px 0 #7a1814;box-shadow:inset 0 3px 2px #ffffff66,inset 0 -5px 4px #00000033,0 6px 0 #96201c,0 14px 22px -10px #000a}
.cta:active{box-shadow:inset 0 3px 6px #00000044,0 1px 0 #96201c}
a.cta{display:inline-block;text-decoration:none}

/* blue felt with the same stitched edge: active nav, Settings, sound */
nav a[aria-current="page"],nav button[aria-current="page"],.setbtn,.sndbtn:not(.muted){border:2px dashed #ffffffb0;outline:3px solid var(--blue);outline-offset:-1px;text-shadow:0 1px 0 #0a4766;background-color:var(--blue);background-image:var(--fuzz),radial-gradient(120% 90% at 50% 0%,#ffffff40,transparent 60%);background-blend-mode:multiply,normal;box-shadow:inset 0 3px 2px #ffffff66,inset 0 -4px 3px #00000033,0 4px 0 #0b5a7d}
.sndbtn.muted{border:2px dashed #ffffffb0;outline:3px solid var(--red);outline-offset:-1px}

/* blog language picker with flags */
.langs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.langs .lbl{margin-right:2px}
.langs a,.langs b{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:4px 12px 4px 8px;border-radius:999px;font-size:14px;font-weight:700;line-height:1;text-decoration:none}
.langs a{color:var(--ink);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.langs a:hover{background:var(--sun-soft)}
.langs a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.langs b{color:#fff;background:var(--blue)}
.langs svg{flex:none;width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}


/* ===== Felt button system =====
   One pill, three colours, all cut from the same photographed piece of wool felt
   (felt/btn-*.webp: real fibres, a hand-sewn running stitch, a fuzzy edge).
   RED   = the one big call to action on a screen (Play, Start, Save).
   BLUE  = the standard button, and also "chosen" (Settings, New game, sound, the selected language).
   BEIGE = quiet or not chosen (All games, other languages, fullscreen, muted sound).
   The felt is a 9-slice border-image on ::before, so the caps stay round at any size.
   Set --fh (the pill height) per button; the felt grows outwards by its own fuzz. */
:root{--felt-red:url(felt/btn-red.webp);--felt-blue:url(felt/btn-blue.webp);--felt-beige:url(felt/btn-beige.webp);--ink-felt:#4a3213}
:is(.go,.cta,.setbtn,.sndbtn,.shufbtn,.pill,.lpbar .chip,.back,.fsbtn,.langs a,.langs b,nav a[aria-current="page"],nav button[aria-current="page"]){
  --felt:var(--felt-beige);--fh:44px;position:relative;isolation:isolate;box-sizing:border-box;height:var(--fh);min-height:0;
  border:0!important;outline:0;background:none!important;box-shadow:none!important;color:var(--ink-felt);text-shadow:0 1px 0 #fff8;
  transition:transform .12s,filter .12s}
:is(.go,.cta,.setbtn,.sndbtn,.shufbtn,.pill,.lpbar .chip,.back,.fsbtn,.langs a,.langs b,nav a[aria-current="page"],nav button[aria-current="page"])::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border:solid transparent;border-width:calc(var(--fh)*.5);
  border-image-source:var(--felt);border-image-slice:157 fill;border-image-width:calc(var(--fh)*.58);border-image-outset:calc(var(--fh)*.0926);border-image-repeat:round;
  filter:drop-shadow(0 3px 2px #3a1d0a55)}
/* red: the big one */
:root :is(.go,.cta){--felt:var(--felt-red);--fh:60px;color:#fff;text-shadow:0 1px 0 #6a120f;padding-inline:34px}
:root .cta{--fh:64px;padding-inline:38px;font-size:20px}
/* blue: standard and chosen */
:root :is(.langs b,.setbtn,.sndbtn:not(.muted),.shufbtn,.pill[aria-pressed="true"],.lpbar .chip.on,nav a[aria-current="page"],nav button[aria-current="page"]){--felt:var(--felt-blue);color:#fff;text-shadow:0 1px 0 #06415e}
:root .pill{--fh:46px}
:root .lpbar .chip{--fh:46px}
:root .sndbtn,:root .fsbtn{width:var(--fh);padding:0}
:root .fsbtn.shufbtn{width:auto;padding:0 18px 0 12px}@media (max-width:640px){:root .fsbtn.shufbtn{width:var(--fh);padding:0}}
:root .setbtn{--fh:48px}
/* pressed, hover, disabled */
:root :is(.go,.cta,.setbtn,.sndbtn,.shufbtn,.pill,.lpbar .chip,.back,.fsbtn,.langs a,.langs b):hover{filter:brightness(1.05);transform:translateY(-1px)}
:root :is(.go,.cta,.setbtn,.sndbtn,.shufbtn,.pill,.lpbar .chip,.back,.fsbtn,.langs a,.langs b):active{transform:translateY(2px) scale(.985);filter:brightness(.93)}
:root :is(.go,.cta,.pill):disabled{opacity:.5;filter:grayscale(.6);transform:none}
:root :is(.go,.cta,.setbtn,.sndbtn,.shufbtn,.pill,.lpbar .chip,.back,.fsbtn,.langs a,.langs b):focus-visible{outline:3px solid var(--yellow);outline-offset:6px}
/* chips and pills keep their little code badge as a round felt-coloured disc */
:root .pill .code,:root .lpbar .chip .code{background:#fff8;color:var(--ink-felt)}
:root .pill[aria-pressed="true"] .code,:root .lpbar .chip.on .code{background:var(--yellow);color:#18264A}
:root .setbtn .fill{border-radius:999px;opacity:.55;mix-blend-mode:multiply}
:root .setbtn{overflow:visible}
/* in the game bar everything is a slim 36px pill */
:root.playing :is(.setbtn,.sndbtn,.shufbtn,.lpbar .chip,.back,.fsbtn,.langs a,.langs b){--fh:36px;min-height:0}
html.playing .lpbar{padding-block:8px}
:root.playing .fsbtn.shufbtn{width:auto}
@media (max-width:640px){:root.playing .fsbtn.shufbtn{width:var(--fh)}}
html.playing .lpbar .chip .code{width:26px;height:26px}
html.playing .lpbar .play{padding:8px 6px;margin:-8px -6px}
:root .langs a,:root .langs b{--fh:40px;padding:0 18px 0 12px;font-size:15px}
:root .langs svg{border-radius:4px;box-shadow:0 0 0 1px #0003}