/* Shared look for the Learning Land games (Trace It, Picture Match, ...).
   Everything is scoped under .spg so it can't leak into the site styles. */
.game-stage{ width:100%; aspect-ratio:3/2; max-height:82vh; border:5px solid var(--ink, #2C1608); box-shadow:8px 8px 0 var(--brown, #7A3B12); background:#2f6b3a; margin:0 0 28px; }
@media (max-width: 700px){ .game-stage{ aspect-ratio:3/4; max-height:none; box-shadow:5px 5px 0 var(--brown, #7A3B12); } }

/* embed mode: the game fills the iframe and the page chrome disappears */
html.embed, html.embed body{ height:100%; margin:0; overflow:hidden; background:#2f6b3a; }
html.embed .site-header, html.embed .site-footer, html.embed .crumbs, html.embed .page-head, html.embed .game-about, html.embed .skip, html.embed .draft-banner{ display:none !important; }
html.embed .page, html.embed main, html.embed .wrap{ margin:0 !important; padding:0 !important; max-width:none !important; min-height:0 !important; }
html.embed .game-stage{ position:fixed; inset:0; width:auto; height:auto; aspect-ratio:auto; max-height:none; border:0; box-shadow:none; margin:0; }

.spg{ --cream:#FCE9C6; --cream-deep:#F6DDA9; --tan:#EAC28E; --orange:#D9791E; --orange-deep:#B86110; --brown:#7A3B12; --brown-dark:#4A250D; --ink:#2C1608; --paper:#FFF8EA; --green:#2f6b3a; --green-lt:#3E8E4F;
  position:relative; width:100%; height:100%; box-sizing:border-box; padding:10px; display:flex; flex-direction:column; gap:8px; background:var(--green); color:var(--cream);
  font-family:Inter, system-ui, sans-serif; overflow:hidden; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.spg *{ box-sizing:border-box; }
.spg .px{ font-family:"Press Start 2P", ui-monospace, monospace; }
.spg button{ font:inherit; cursor:pointer; }
.spg button:focus-visible{ outline:4px solid var(--paper); outline-offset:2px; }

/* top bar */
.spg .g-top{ display:flex; align-items:center; gap:10px; flex:none; min-height:44px; }
.spg .g-title{ flex:1 1 auto; min-width:0; font-size:13px; line-height:1.5; color:var(--cream); letter-spacing:1px; margin-right:auto; overflow-wrap:break-word; }
.spg .g-stars, .spg .g-btn{ flex:none; }
.spg.portrait .g-top{ gap:6px; }
.spg.portrait .g-title{ font-size:11px; letter-spacing:0; }
.spg.portrait .g-top .g-stars svg{ width:22px; height:22px; }
.spg .g-stars{ display:flex; gap:4px; }
.spg .g-stars svg{ width:26px; height:26px; fill:#1f4d2a; stroke:var(--ink); stroke-width:1.5; transition:fill .2s, transform .3s; }
.spg .g-stars svg.on{ fill:#F7D34B; transform:scale(1.15); }
.spg .g-btn{ width:44px; height:44px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--cream); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:0; color:var(--ink); }
.spg .g-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.spg .g-btn svg{ width:24px; height:24px; fill:currentColor; }
.spg .g-btn.off{ background:var(--tan); opacity:.75; }

.spg .g-body{ flex:1; min-height:0; display:flex; gap:10px; align-items:center; justify-content:center; }
.spg.portrait .g-body{ flex-direction:column; }

/* big friendly buttons */
.spg .big-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-width:72px; min-height:72px; padding:12px 22px; background:var(--orange); color:var(--ink); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); font-family:"Press Start 2P", ui-monospace, monospace; font-size:14px; line-height:1.3; }
.spg .big-btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.spg .big-btn svg{ width:30px; height:30px; fill:var(--ink); flex:none; }
.spg .big-btn.light{ background:var(--cream); }
.spg .pulse{ animation:spg-pulse 1.1s ease-in-out infinite; }
@keyframes spg-pulse{ 50%{ transform:scale(1.07); } }

/* overlay: a plain tint over the game, no card */
.spg .overlay{ position:absolute; inset:0; z-index:5; background:rgba(44,22,8,.94); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:16px; overflow:auto; }
.spg .overlay h2{ margin:0; font-family:"Press Start 2P", ui-monospace, monospace; font-size:clamp(16px, 4.2vw, 26px); color:var(--cream); line-height:1.4; }
.spg .overlay p{ margin:0; font-size:17px; font-weight:600; color:var(--cream); max-width:440px; }
.spg .overlay .row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.spg .overlay .g-stars svg{ width:40px; height:40px; fill:#F7D34B; }
.spg .overlay img.mur{ width:84px; height:84px; }
.spg .tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:104px; min-height:104px; padding:8px; background:var(--cream); color:var(--ink); border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-weight:800; font-size:13px; }
.spg .tile b{ font-family:"Press Start 2P", ui-monospace, monospace; font-size:30px; color:var(--orange-deep); font-weight:400; }

/* ---------- Trace It ---------- */
.spg .board{ flex:none; background:var(--paper); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); touch-action:none; position:relative; }
.spg .board svg{ display:block; width:100%; height:100%; touch-action:none; }
.spg .board .guide{ fill:none; stroke:#EBD9B8; stroke-width:11; stroke-linecap:round; stroke-linejoin:round; }
.spg .board .todo{ fill:none; stroke:var(--tan); stroke-width:11; stroke-linecap:round; stroke-linejoin:round; }
.spg .board .dots{ fill:none; stroke:var(--brown); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:.1 5; }
.spg .board .prog, .spg .board .done{ fill:none; stroke:var(--orange); stroke-width:11; stroke-linecap:round; stroke-linejoin:round; }
.spg .board .done{ stroke:var(--orange-deep); }
.spg .board .arrow{ fill:none; stroke:var(--brown-dark); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; animation:spg-glow 1.2s linear infinite; }
.spg .board .arrow.a2{ animation-delay:.2s; } .spg .board .arrow.a3{ animation-delay:.4s; }
@keyframes spg-glow{ 0%,100%{ opacity:.15; } 40%{ opacity:1; } }
.spg .board .ring{ fill:#F7D34B; stroke:var(--ink); stroke-width:1.2; transform-box:fill-box; transform-origin:center; animation:spg-ring 1s ease-in-out infinite; }
@keyframes spg-ring{ 50%{ transform:scale(1.25); opacity:.7; } }
.spg .board.dragging .ring{ animation:none; }
.spg .board.finished svg{ animation:spg-hop .6s ease-out 2; }
@keyframes spg-hop{ 40%{ transform:translateY(-4%) scale(1.03); } }
.spg .side{ flex:1; min-width:0; min-height:0; align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; }
.spg.portrait .side{ flex-direction:row; align-self:auto; width:100%; flex:1; }
.spg .prompt{ font-weight:800; font-size:clamp(15px, 2.4vw, 22px); line-height:1.25; margin:0; }
.spg.portrait .prompt{ flex:1; text-align:left; font-size:15px; }
.spg .reward{ width:min(100%, 230px); background:var(--paper); color:var(--ink); border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); display:flex; flex-direction:column; }
.spg.portrait .reward{ width:118px; flex:none; }
.spg .reward .pic{ aspect-ratio:4/3; background:var(--cream-deep); display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:3px solid var(--ink); }
.spg .reward .pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.spg .reward .pic .q{ font-family:"Press Start 2P", ui-monospace, monospace; font-size:34px; color:var(--tan); }
.spg .reward .w{ padding:7px 6px; font-weight:800; font-size:clamp(14px, 2.2vw, 19px); min-height:1.2em; }
.spg .reward .w b{ color:var(--orange-deep); }
.spg .reward.show{ animation:spg-pop .45s ease-out; }
@keyframes spg-pop{ 0%{ transform:scale(.6) rotate(-6deg); } 70%{ transform:scale(1.08) rotate(2deg); } }
.spg .side .big-btn{ visibility:hidden; }
.spg .side .big-btn.ready{ visibility:visible; }
.spg.portrait .side .big-btn{ min-width:64px; min-height:64px; padding:8px 12px; }

/* ---------- Picture Match ---------- */
.spg .cards{ display:grid; gap:10px; flex:none; }
.spg .card{ position:relative; padding:0; border:0; background:none; perspective:600px; }
.spg .card .in{ position:absolute; inset:0; transition:transform .35s; transform-style:preserve-3d; }
.spg .card.up .in{ transform:rotateY(180deg); }
.spg .card .face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.spg .card .back{ background:var(--orange); }
.spg .card .back img{ width:58%; height:auto; }
.spg .card .front{ background:var(--paper); transform:rotateY(180deg); color:var(--ink); }
.spg .card .front img{ width:100%; flex:1; min-height:0; object-fit:cover; display:block; }
.spg .card .front .glyph{ flex:1; display:flex; align-items:center; justify-content:center; font-family:"Press Start 2P", ui-monospace, monospace; font-size:clamp(20px, 5vw, 40px); color:var(--orange-deep); background:var(--cream-deep); width:100%; }
.spg .card .front .w{ flex:none; width:100%; text-align:center; font-weight:800; font-size:clamp(11px, 1.9vw, 16px); padding:3px 2px; border-top:3px solid var(--ink); background:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spg .card .front .w b{ color:var(--orange-deep); }
.spg .card.matched .front{ box-shadow:0 0 0 4px #F7D34B, 4px 4px 0 var(--ink); }
.spg .card.matched{ animation:spg-hop .5s ease-out; }
.spg .card.wiggle{ animation:spg-wiggle .4s ease-in-out; }
@keyframes spg-wiggle{ 25%{ transform:rotate(-4deg); } 75%{ transform:rotate(4deg); } }
.spg .msg{ flex:none; align-self:center; min-height:34px; background:var(--paper); color:var(--ink); border:3px solid var(--ink); padding:4px 14px; font-weight:800; font-size:15px; line-height:20px; opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap; }
.spg .msg.show{ opacity:1; }

/* ---------- Pop It ---------- */
.spg .pop-field{ position:relative; align-self:stretch; flex:1; overflow:hidden; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  background:linear-gradient(#9fd3e6 0%, #c9e8ef 62%, #e9f4dc 62%, #e9f4dc 64%, #7fbf6a 64%, #5f9e4f 100%); touch-action:manipulation; }
.spg .pop-mur{ position:absolute; left:10px; bottom:6px; width:clamp(54px, 13%, 96px); z-index:1; pointer-events:none; transform-origin:bottom center; }
.spg .pop-mur.hop{ animation:spg-hop .45s ease-out; }
.spg .bubble{ position:absolute; left:0; top:0; z-index:2; width:var(--d); height:var(--d); padding:0; border-radius:50%; border:4px solid var(--ink);
  background:radial-gradient(circle at 32% 28%, #fff 0 9%, rgba(255,255,255,.55) 10% 18%, rgba(255,248,234,.92) 19% 100%); box-shadow:inset -6px -8px 0 rgba(126,190,214,.45);
  display:flex; align-items:center; justify-content:center; overflow:hidden; will-change:transform; touch-action:manipulation; }
.spg .bubble span{ font-size:calc(var(--d) * .42); color:var(--orange-deep); line-height:1; margin:4% 0 0 3%; pointer-events:none; }
.spg .bubble.pic img{ width:100%; height:100%; object-fit:cover; border-radius:50%; pointer-events:none; }
.spg .bubble.pic::after{ content:''; position:absolute; left:18%; top:14%; width:16%; height:12%; border-radius:50%; background:rgba(255,255,255,.8); pointer-events:none; }
.spg .bubble.nope{ animation:spg-nope .4s ease-in-out; }
@keyframes spg-nope{ 25%{ margin-left:-8px; } 75%{ margin-left:8px; } }
.spg .bubble.popping{ transition:opacity .25s, scale .25s; opacity:0; scale:1.35; pointer-events:none; }
.spg .bit{ position:absolute; z-index:3; width:10px; height:10px; margin:-5px 0 0 -5px; background:#F7D34B; border:2px solid var(--ink); pointer-events:none; animation:spg-bit .5s ease-out forwards; }
.spg .bit:nth-child(odd){ background:var(--orange); }
@keyframes spg-bit{ to{ transform:translate(var(--dx), var(--dy)); opacity:0; } }
.spg .pop-bar{ flex:none; display:flex; align-items:center; gap:12px; min-height:40px; }
.spg .pop-label{ font-size:13px; color:var(--cream); white-space:nowrap; }
.spg .pop-label b{ color:#F7D34B; font-weight:400; font-size:18px; }
.spg .pop-pips{ display:flex; flex-wrap:wrap; gap:5px; }
.spg .pop-pips .pip{ width:16px; height:16px; border:3px solid var(--ink); background:#1f4d2a; transition:background .2s, transform .2s; }
.spg .pop-pips .pip.on{ background:#F7D34B; transform:scale(1.1); }
.spg.popit .msg{ position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:4; }

@media (prefers-reduced-motion: reduce){ .spg *, .spg .card .in{ animation:none !important; transition:none !important; } }