/* Shared frame of the Let's play games (/play/*, game.js): heading, the "print it" card, the game panel with its bar
   (switches, sound, new game), the win card with confetti, "How to play". Each game adds its own sheet (memory.css, maze.css).
   Builds on style.css, home.css (section width, eyebrow, h1) and catalog.css. */
/* nothing on a game page may stick out sideways (the tray's negative margins on phones, the hanging postcard):
   otherwise a swipe on the board pans the whole page left and right. clip keeps the sticky menu working */
html:has(body.game-page),body.game-page{overflow-x:hidden;overflow-x:clip}
.game-page .mg-game{touch-action:pan-y pinch-zoom}
.game-page{--back:#e6e0fa;--ease-pop:cubic-bezier(.3,1.5,.5,1);--line:#2024281c;--p0:#d3faf2;--p1:#fff0bf}
.game-page main>section h1{font-size:clamp(48px,5vw,72px);margin:0 0 20px}
.crumbs{display:flex;gap:10px;font-size:14px;color:#626466;margin:10px 0 48px}
.crumbs a{background:var(--marker-mint) no-repeat 0 92%/0% .5em;transition:background-size .35s}
.crumbs a:hover{background-size:100% .5em}
.mg{padding-top:16px;margin-bottom:96px}

/* page entry, the same rise as the other pages (pgUp lives in frame.css) */
.js-reveal .mg-copy>*,.js-reveal .mg-print,.js-reveal .mg-home,.js-reveal .mg-game{animation:pgUp .8s cubic-bezier(.2,.7,.2,1) both}
.js-reveal .mg-copy h1{animation-delay:.08s}.js-reveal .mg-copy .intro{animation-delay:.18s}.js-reveal .mg-print{animation-delay:.3s}.js-reveal .mg-home,.js-reveal .mg-game{animation-delay:.38s}

/* heading + "print it" card */
.mg-head{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(48px,8vw,120px)}
/* with the way back above the game (.mg-home): less space under the hero, the button takes some of it (80 px, 34 on phones) */
.mg-head:has(+ .mg-home){margin-bottom:80px}
@media(max-width:760px){.mg-head:has(+ .mg-home){margin-bottom:34px}.crumbs{margin-bottom:36px}}
.mg-copy .intro{max-width:560px;margin:0}
.mg-print{display:flex;gap:18px;align-items:center;background:#f0ede2;border-radius:22px;padding:14px 22px 14px 14px;transition:transform .28s cubic-bezier(.25,.8,.3,1)}
.mg-print:hover{transform:translateY(-3px)}
.mg-print-pic{flex:none;width:84px;aspect-ratio:.707;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 6px 16px #20242818;transform:rotate(-4deg)}
.mg-print-pic img{width:100%;height:100%;object-fit:cover;display:block}
.mg-print-copy{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45;color:#45484b}
.mg-print-copy b{font:600 17px/1.25 Rubik,sans-serif;color:var(--ink)}
.mg-print-cta{margin-top:4px;font-weight:600;color:var(--ink);align-self:flex-start;background:var(--marker-mint) no-repeat 0 92%/100% .45em}

/* game area: a light panel with a thin line, so the pastel game keeps its colours */
/* game area: a tray. The bar lies on the butter yellow rim, the cards or the maze lie on a cream paper field inside (.mg-field) */
.mg-game{--rim:#fff0bf;--groove:#f7e2a0;background:var(--rim);border-radius:32px;padding:22px}
/* the tray is a container (tray): the bar rearranges itself by the tray's own width (memory.css, maze.css), since how much
   room it needs depends on the language and on the game */
.mg-game{container:tray/inline-size}
.mg-field{background:#fffcf3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");border-radius:24px;padding:32px 28px}
.mg-bar{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;margin:4px 10px 18px}
/* switches: a darker groove in the rim, the chosen option a cream block lifted out of it */
.mg-seg{display:flex;gap:4px;background:var(--groove);border-radius:40px;padding:4px}
.mg-seg button{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:0;background:none;border-radius:32px;height:40px;padding:0 16px;transition:background .2s,color .2s}
.mg-seg b{font:600 15px Rubik,sans-serif}
.mg-seg button:hover{background:#ffffff40}
.mg-seg [aria-pressed=true],.mg-seg [aria-pressed=true]:hover{background:#fffcf3;box-shadow:0 1px 2px #2024281f,0 3px 8px -3px #20242826}
/* level = 1, 2 or 3 dots */
.mg-dots{display:inline-flex;gap:3px}
.mg-dots u{width:7px;height:7px;border-radius:50%;background:#2024282e}
.mg-dots u.on{background:var(--ink)}
.mg-stats{display:flex;gap:22px;margin-left:auto;order:1}
.mg-stats p{margin:0;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.mg-stats span{font-size:12px;letter-spacing:.06em;color:#626466}
.mg-stats b{font:700 24px Rubik,sans-serif;font-variant-numeric:tabular-nums}
.mg-tools{display:flex;gap:8px;margin-left:auto;order:2}
.mg-tool{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-width:48px;height:48px;padding:0 16px;border-radius:40px;border:1.5px solid #20242814;background:#fff;font-weight:600;font-size:15px;transition:border-color .2s,background .2s,transform .28s cubic-bezier(.25,.8,.3,1)}
/* hover: a little grow and a warm yellow fill, no dark outline (sound and New game have their own colours) */
.mg-tool:hover{background:#fff0bf;transform:scale(1.04)}
.mg-tool:active{transform:scale(.96)}
.mg-sound{padding:0;background:var(--groove);border-color:transparent}
/* hover: a slightly deeper groove and the same little grow, no outline */
.mg-sound:hover{border-color:transparent;background:#f2d685}
/* New game / New maze: the main action of the bar */
.mg-new,.mg-new:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mg-ico{width:20px;height:20px;flex:none}
/* back to all the games (BackToGames.astro): a round button above the game, at its top left corner, in the tray's
   butter yellow (so it reads as the game's own way out, not part of its controls); on hover it grows a little and the
   arrow nudges back */
.mg-home{display:grid;place-items:center;width:48px;height:48px;margin:0 0 12px;border-radius:50%;background:#fff0bf;color:var(--ink);
  transition:scale .25s cubic-bezier(.25,.8,.3,1),background .2s}
.mg-home .mg-ico{width:22px;height:22px;transition:transform .25s cubic-bezier(.25,.8,.3,1)}
.mg-home:hover{scale:1.06;background:#fde7a2}
.mg-home:hover .mg-ico,.mg-home:focus-visible .mg-ico{transform:translateX(-2px)}
.mg-home:focus-visible{outline:3px solid #7254c4;outline-offset:3px}
/* phones: the tray sticks out 10 px past the text (.mg-game margin), the button stays in line with its edge */
@media(max-width:760px){.mg-home{margin-left:-10px}}
/* full screen (FullscreenButton.astro, game.js; a focus mode on iPads): the round white button at the right end of the bar; four corners out,
   and in again while the game fills the screen */
.mg-full{padding:0}
.mg-full[hidden]{display:none}
.mg-full-out,.mg-game.is-full .mg-full-in{display:none}
.mg-game.is-full .mg-full-out{display:block}
/* the tray fills the screen: no rounded corners or outer margin, a slimmer frame, the field takes the rest of the height
   (the boards size themselves to the screen in memory.css and maze.css) */
.mg-game.is-full{margin:0;border-radius:0;padding:16px;display:flex;flex-direction:column;overflow:hidden}
/* no browser gestures on the whole screen-sized tray: a drag that starts beside the maze or slides off it panned,
   zoomed or bounced the game (taps on cards and buttons still work) */
.game-page .mg-game.is-full{touch-action:none;overscroll-behavior:none}
.mg-game.is-full .mg-field{flex:1;padding:16px}
/* the "view break" postcard stays inside the screen */
.mg-game.is-full .mg-soon{right:16px}
/* focus mode on iPads (game.js): the tray covers the page, over the menu and Mini's corner, and the page does not scroll */
.mg-game.is-pseudo{position:fixed;inset:0;z-index:100;animation:none}
html.mg-focus,html.mg-focus body{overflow:hidden;overscroll-behavior:none}
.mg-sound .mg-mute{display:none}
.mg-sound[aria-pressed=false] .mg-wave{display:none}
.mg-sound[aria-pressed=false] .mg-mute{display:inline}
.mg-noscript{text-align:center;margin:20px 0}
@keyframes mg-hop{40%{transform:translateY(-8px) rotate(-6deg)}}
@keyframes mg-deal{from{opacity:0;transform:translateY(14px) scale(.9)}}
@keyframes mg-fade{from{opacity:0}}
.mg-confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none}

/* win: a card over the play area */
.mg-win{position:absolute;inset:0;display:grid;place-items:center;background:#fffcf3d9;border-radius:inherit;z-index:3;animation:mg-fade .3s both}
.mg-win[hidden]{display:none}
/* "Try: Hard" on the win card: no harder level after the hardest one (its display from .mg-tool would show an empty pill) */
.mg-harder[hidden]{display:none}
.mg-win-card{background:var(--cream);border:1.5px solid var(--line);border-radius:28px;padding:16px 32px 32px;text-align:center;max-width:min(460px,100%);box-shadow:0 20px 50px #20242822;animation:mg-deal .5s var(--ease-pop) both}
.mg-dance{width:min(220px,50vw);height:auto;aspect-ratio:1;object-fit:contain;display:block;margin:0 auto -6px}
.mg-dance.is-mini{padding:28px;animation:mg-hop 1s var(--ease-pop) infinite}
.mg-win-title{font:700 clamp(28px,3vw,38px)/1.1 Rubik,sans-serif;letter-spacing:-.04em;margin:0 0 8px}
.mg-win-text{margin:0;font-size:17px}
.mg-win-best{margin:4px 0 0;font-size:14px;color:#626466}
.mg-win-best:empty{display:none}
.mg-win-best.is-new{color:var(--ink);font-weight:600}
.mg-win-best.is-new span{background:var(--marker-yellow) no-repeat 0 92%/100% .5em}
.mg-win-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.mg-btn{display:inline-flex;align-items:center;gap:10px;border:0;background:var(--ink);color:#fff;border-radius:50px;padding:0 24px;height:48px;font-weight:600;font-size:15px;transition:transform .28s cubic-bezier(.25,.8,.3,1)}
.mg-btn:hover{transform:scale(1.04)}
.mg-btn:active{transform:scale(.97)}
.mg-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}

/* view break (GameBreak.astro, game.js): a window view fills the game panel; it fades in softly, then breathes slowly */
.mg-game{position:relative}
/* the view lies inside the tray, where the game field is, so the yellow rim frames it like a window */
.mg-break{position:absolute;inset:22px;z-index:5;display:grid;place-items:center;padding:16px;border-radius:24px;overflow:hidden;background:#cfe9f7;animation:mg-break-in 1.6s ease both}
.mg-break[hidden]{display:none}
/* the view sits low (a little of the sill hidden below the panel), so the smiling pots always show; it breathes from there */
.mg-break::before{content:"";position:absolute;inset:-4% -4% -9%;background:url(/assets/play/view-break.webp) center bottom/cover;transform-origin:50% 90%;animation:mg-breathe 10s ease-in-out infinite alternate}
.mg-break::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fffcf300 35%,#fffcf355)}
@keyframes mg-break-in{from{opacity:0}}
/* music on/off: a round note button in the top right corner of the view (crossed out when off) */
.mg-break-music{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:#fffcf3e6;color:var(--ink);box-shadow:0 6px 16px -8px #20242855;transition:transform .25s cubic-bezier(.25,.8,.3,1),background .2s}
.mg-break-music:hover{transform:scale(1.06);background:#fff}
.mg-break-music .mg-mute{display:none}
.mg-break-music[aria-pressed=false] .mg-mute{display:inline}
.mg-break-music[aria-pressed=false]{color:#626466}
@keyframes mg-breathe{from{transform:scale(1)}to{transform:scale(1.05)}}
.mg-break-card{position:relative;z-index:1;max-width:420px;text-align:center;background:#fffcf3f2;border-radius:28px;padding:22px 28px 24px;box-shadow:0 24px 60px #20242826;animation:mg-break-card 1.4s ease .5s both,mg-card-breathe 7s ease-in-out 2s infinite}
@keyframes mg-break-card{from{opacity:0;transform:translateY(12px)}}
/* the card breathes with its shadow only: scaling it would make the text shimmer */
@keyframes mg-card-breathe{50%{box-shadow:0 30px 70px #20242833}}
/* a relaxed Cubi (eyes closed) breathes slowly and sways a little */
.mg-break-cubi{display:block;width:76px;height:auto;margin:-58px auto 28px;transform-origin:50% 100%;animation:mg-cubi-breathe 4.5s ease-in-out infinite}
@keyframes mg-cubi-breathe{0%,100%{transform:scale(1,1) rotate(-2deg)}50%{transform:scale(1.03,.97) rotate(2deg)}}
.mg-break-card{margin-top:40px}
.mg-break-eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.06em;font-weight:600;color:#626466}
.mg-break-title{margin:0 0 10px;font:700 clamp(26px,3.4vw,36px)/1.1 Rubik,sans-serif;letter-spacing:-.04em}
.mg-break-text{margin:0 auto 18px;max-width:340px;font-size:15px;line-height:1.55;color:#45484b}
.mg-break-clock{position:relative;width:92px;height:92px;margin:0 auto}
.mg-break-clock svg{width:100%;height:100%;transform:rotate(-90deg)}
.mg-break-clock circle{fill:none;stroke-width:8}
.mg-break-clock .track{stroke:#e6e0fa}
.mg-break-clock .ring{stroke:#51f4d8;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.mg-break-n{position:absolute;inset:0;display:grid;place-items:center;font:700 34px Rubik,sans-serif;font-variant-numeric:tabular-nums}
.mg-break-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.mg-break-back{margin-top:16px;animation:mg-fade .6s ease both}
.mg-break-back[hidden]{display:none}
.mg-break.is-done .mg-break-clock{display:none}
/* "Back to the game": the view fades away slowly */
.mg-break.is-leaving{animation:mg-break-out 1.2s ease forwards}
@keyframes mg-break-out{to{opacity:0}}
/* "after this game: a view break": a little postcard of the window view, taped to the right edge of the game panel
   (on phones to its bottom edge), so the game does not move; it slides in, then sways gently */
.mg-soon{position:absolute;z-index:4;right:-30px;bottom:84px;width:150px;padding:7px 7px 10px;background:#fff;border-radius:10px;box-shadow:0 10px 24px -8px #20242840,0 1px 2px #2024281a;
  opacity:0;transform:translateX(40px) rotate(14deg);transform-origin:50% 0;transition:opacity .6s ease,transform .8s cubic-bezier(.3,1.3,.5,1)}
.mg-soon[hidden]{display:none}
.mg-soon.is-in{opacity:1;transform:rotate(5deg);animation:mg-sway 5s ease-in-out .9s infinite}
@keyframes mg-sway{0%,100%{transform:rotate(5deg)}50%{transform:rotate(2deg)}}
.mg-soon-tape{position:absolute;left:50%;top:-9px;width:54px;height:17px;transform:translateX(-50%) rotate(-3deg);background:#51f4d8cc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='1.3' fill='%23ffffff' fill-opacity='.8'/%3E%3C/svg%3E") 0 0/8px 8px}
.mg-soon-pic{display:block;aspect-ratio:4/3;border-radius:6px;background:url(/assets/play/view-break.webp) center 45%/cover}
.mg-soon-txt{display:block;margin:8px 2px 0;font:600 13px/1.3 Rubik,sans-serif;color:var(--ink);text-align:center}
@media(max-width:1100px){.mg-soon{right:-14px;width:132px}}
@media(max-width:760px){.mg-soon{right:auto;left:50%;top:auto;bottom:-44px;width:200px;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;margin-left:-100px;transform:translateY(30px) rotate(-6deg)}
  .mg-soon.is-in{transform:rotate(-2deg);animation:mg-sway-m 5s ease-in-out .9s infinite}
  @keyframes mg-sway-m{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(1deg)}}
  .mg-soon[hidden]{display:none}
  .mg-soon-pic{flex:none;width:58px}.mg-soon-txt{margin:0;text-align:left;font-size:12px}
  .mg-soon-tape{left:22px;top:-8px;width:40px;height:14px}
  .mg{margin-bottom:96px}}
@media(max-width:760px){.mg-break{inset:10px;border-radius:16px}.mg-break-card{padding:18px 18px 20px;margin-top:34px}.mg-break-cubi{width:62px;margin-top:-48px;margin-bottom:22px}.mg-break-text{font-size:14px;margin-bottom:14px}.mg-break-clock{width:78px;height:78px}.mg-break-n{font-size:28px}}

/* how to play */
.mg-how{margin-bottom:110px}
.mg-how h2{font-size:clamp(28px,2.6vw,38px);margin:0 0 30px}
.mg-how ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(var(--how,4),1fr);gap:24px}
.mg-how li{background:#f0ede2;border-radius:22px;padding:26px 26px 28px}
.mg-how-n{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:700 16px Rubik,sans-serif;background:var(--mint)}
.mg-how li:nth-child(2) .mg-how-n{background:var(--yellow)}
.mg-how li:nth-child(3) .mg-how-n{background:#ff85d5}
.mg-how li:nth-child(4) .mg-how-n{background:#b0a3ef}
.mg-how b{display:block;font:600 18px Rubik,sans-serif;margin:14px 0 6px}
.mg-how p{margin:0;font-size:15px;line-height:1.55;color:#45484b}

/* Next game (NextGame.astro): at the very end, under How to play, on the right like a "next" button. A white tile:
   the next game's picture tilted like a card on the table, a small label, the name, a round arrow.
   On hover the picture turns the other way and the arrow nudges on */
.mg-next-row{display:flex;justify-content:flex-end;margin-top:64px}
.mg-next{display:flex;align-items:center;gap:18px;min-width:300px;background:#fff;border-radius:24px;padding:14px 16px 14px 18px;
  box-shadow:0 1px 2px #2024280f,0 12px 26px -16px #20242838;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.mg-next:hover,.mg-next:focus-visible{transform:translateY(-2px)}
.mg-next:focus-visible{outline:3px solid #7254c4;outline-offset:4px}
.mg-next-pic{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:16%;box-shadow:0 2px 8px #20242826;transform:rotate(-6deg);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.mg-next:hover .mg-next-pic,.mg-next:focus-visible .mg-next-pic{transform:rotate(4deg) scale(1.06)}
/* the maze: the little maze from its Let's play card on mint (Cubi walks it on hover) */
.mg-next.is-maze .mg-next-pic{background:#d3faf2}
.mg-next.is-maze .pl-mz{width:78%}
/* the yarn board from its card on pink (the threads run on hover) */
.mg-next.is-yarn .mg-next-pic{background:#ffe0f3}
.mg-next.is-yarn .pl-yw{width:76%}
/* the label like the page's other eyebrows (GRA ONLINE); the name without the How to play b's margin (.mg-how b) */
.mg-next-copy{flex:1;display:flex;flex-direction:column;gap:4px}
.mg-next-copy small{font:600 12px/1.2 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.mg-next-copy b{margin:0;font:600 22px/1.15 Rubik,sans-serif;letter-spacing:-.02em}
.mg-next-go{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .25s cubic-bezier(.25,.8,.3,1)}
.mg-next-go svg{width:18px;height:18px}
.mg-next:hover .mg-next-go,.mg-next:focus-visible .mg-next-go{transform:translateX(3px)}
@media(max-width:760px){.mg-next-row{margin-top:40px}.mg-next{flex:1;min-width:0}}

@media(max-width:1180px){.mg-how ol{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){.mg-head{grid-template-columns:1fr;align-items:start}.mg-print{max-width:460px}}
/* tablets (touch, wider than a phone): a slimmer tray and field, the room goes to the cards and the maze */
@media(pointer:coarse) and (min-width:761px){.mg-game{padding:14px}.mg-field{padding:16px}}
@media(max-width:760px){
  .mg{margin-bottom:72px}
  .mg-game{border-radius:24px;margin:0 -10px;padding:10px}.mg-field{padding:14px 10px;border-radius:16px}.mg-bar{margin:4px 4px 12px}
  .mg-seg{flex:1}.mg-seg button{flex:1 1 auto;justify-content:center;padding:0 6px;gap:6px}
  .mg-level{flex-direction:column;gap:4px!important}.mg-dots u{width:5px;height:5px}
  /* smaller labels on phones: the switches stay light next to the game */
  .mg-seg b{font-size:13px;line-height:1}
  .mg-seg button{height:36px}
  .mg-stats span{font-size:11px}.mg-stats b{font-size:20px}
  .mg-tool{min-width:42px;height:42px}
  .mg-bar{gap:10px 8px}
  .mg-levels{min-width:0}
  .mg-new span{display:none}.mg-new{padding:0}
  .mg-win-card{padding:12px 20px 24px}
  .mg-how ol{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .mg-next,.mg-next-pic,.mg-next-go,.mg-home,.mg-home .mg-ico{transition:none}
  .mg-win,.mg-win-card,.mg-dance.is-mini,.mg-break,.mg-break::before,.mg-break-card,.mg-break-cubi,.mg-break-back,.mg-soon,.mg-soon.is-in{animation:none}
  .mg-soon{transition:opacity .3s}
  .js-reveal .mg-copy>*,.js-reveal .mg-print,.js-reveal .mg-home,.js-reveal .mg-game{animation:none}
}