:root{--g-bg:#050913;--g-panel:#0d1a2d;--g-panel2:#10243e;--g-line:#234363;--g-text:#f5f8fc;--g-muted:#bed2e5;--g-gold:#f4c76b;--g-cyan:#73dce9;--g-green:#a6dc91}
.sprouts-game-page{background:radial-gradient(circle at 50% -10%,#153758 0,#071526 38%,#050913 75%);color:var(--g-text);min-height:75vh;font-family:'DM Sans',Arial,sans-serif}
.sprouts-game-page *{box-sizing:border-box}
.game-wrap{max-width:1360px;margin:auto;padding:34px 26px 76px}
.game-breadcrumb{display:inline-flex;gap:9px;align-items:center;color:var(--g-cyan);font-size:13px;font-weight:800;text-decoration:none;margin-bottom:26px}
.game-breadcrumb:hover{text-decoration:underline}
.game-heading{display:flex;justify-content:space-between;align-items:end;gap:28px;margin:0 0 24px}
.game-eyebrow{display:block;color:var(--g-gold);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;margin-bottom:10px}
.game-heading h1{font:600 clamp(48px,5vw,78px)/.95 'Cormorant Garamond',Georgia,serif;margin:0;color:#fff}
.game-heading p{color:var(--g-muted);font-size:16px;line-height:1.55;max-width:560px;margin:12px 0 0}
.game-heading img{height:118px;width:215px;object-fit:contain;filter:drop-shadow(0 12px 22px #0008)}
.game-shell{background:#070d18;border:1px solid #2c4f71;border-radius:24px;overflow:hidden;box-shadow:0 26px 80px #000a,0 0 0 6px #15335245}
.game-hud{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;background:linear-gradient(180deg,#102942,#0a1b30);border-bottom:1px solid var(--g-line)}
.hud-brand{font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--g-gold);font-size:12px;margin-right:auto}
.hud-stat{display:flex;align-items:baseline;gap:5px;padding:7px 12px;border-radius:9px;background:#071321;border:1px solid #274662;min-width:88px;justify-content:center}
.hud-stat small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#a4bdd2;font-weight:800}
.hud-stat b{font-size:18px;color:#fff}
.game-button,.game-select{font:800 13px 'DM Sans',Arial,sans-serif;color:#0a1b2e;background:var(--g-gold);border:0;border-radius:10px;padding:11px 17px;cursor:pointer;box-shadow:0 5px 0 #aa792e}
.game-button:hover,.game-button:focus-visible{background:#ffe19a;transform:translateY(-1px)}
.game-button:active{transform:translateY(3px);box-shadow:0 2px 0 #aa792e}
.game-button.secondary{color:#eaf5ff;background:#173754;box-shadow:none;border:1px solid #4b708e}
.game-button.secondary:hover{background:#235172}
.game-button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.game-stage{position:relative;background:#030812}
#starfield-canvas{display:block;width:100%;aspect-ratio:16/9;max-height:680px;touch-action:none;background:#030812}
.game-overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(100deg,#030913e8,#071831b8);text-align:center}
.game-overlay[hidden]{display:none}
#match-overlay,#puzzle-overlay{position:fixed;z-index:100;inset:0}
.overlay-card{max-width:520px;padding:28px 30px;border:1px solid #547ba0;border-radius:20px;background:linear-gradient(145deg,#0e2b4deb,#0b172ced);box-shadow:0 20px 55px #000b}
.overlay-card img{display:block;width:130px;height:120px;object-fit:contain;margin:-8px auto 5px;filter:drop-shadow(0 10px 15px #0008)}
.overlay-card h2{font:600 clamp(40px,5vw,62px)/.95 'Cormorant Garamond',Georgia,serif;margin:7px 0 12px;color:#fff}
.overlay-card p{color:#d7e7f4;line-height:1.55;margin:0 0 22px}
.game-touch{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;background:#0a1a2c;border-top:1px solid #244762}
.game-touch .game-button{min-width:72px;min-height:52px;font-size:18px;touch-action:none;user-select:none}
.touch-left{display:flex;gap:10px}
.game-help{color:#b8d0e1;font-size:13px;line-height:1.5;margin:18px 5px 0}
.game-help strong{color:#f4c76b}
.game-status{min-height:24px;color:var(--g-cyan);font-weight:700;font-size:14px;padding:11px 20px 14px;background:#0a1a2c}
.match-area{padding:20px;background:radial-gradient(circle at 50% 0,#183553,#06111f 65%)}
.match-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:890px;margin:auto}
.match-card{aspect-ratio:1.35;border:1px solid #527594;border-radius:12px;background:linear-gradient(135deg,#154568,#0c2744);padding:0;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 7px 0 #020b17;transition:transform .18s,box-shadow .18s}
.match-card:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 0 #020b17}
.match-card:focus-visible,.puzzle-piece:focus-visible{outline:3px solid var(--g-gold);outline-offset:3px}
.match-card .card-back,.match-card .card-front{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;transition:transform .4s}
.match-card .card-back{font:600 clamp(27px,4vw,50px) Georgia,serif;color:#f4ca72;background:radial-gradient(circle,#194d73,#0d2a47);text-shadow:0 3px 12px #0008}
.match-card .card-front{transform:rotateY(-180deg);background:#ecf3f8}
.match-card .card-front img{height:100%;width:100%;object-fit:cover}
.match-card.flipped .card-back,.match-card.matched .card-back{transform:rotateY(180deg)}
.match-card.flipped .card-front,.match-card.matched .card-front{transform:rotateY(0)}
.match-card.matched{border:3px solid var(--g-gold);box-shadow:0 0 18px #f4c76b80}
.match-card:disabled{cursor:default}
.match-story{max-width:890px;margin:17px auto 0;min-height:72px;display:flex;align-items:center;justify-content:center;text-align:center;padding:13px 18px;border-radius:12px;border:1px solid #305576;background:#10243d;color:#e3f0fb;line-height:1.5}
.match-story strong{color:#f4c76b}
.puzzle-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;padding:24px;background:radial-gradient(circle at 70% 0,#183553,#06111f 65%)}
.puzzle-sidebar{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-width:0}
.puzzle-preview{background:#10243a;border:1px solid #537592;border-radius:14px;padding:10px;max-width:none;box-shadow:0 12px 26px #0005}
.puzzle-preview img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px}
.puzzle-preview small{display:block;color:#c5d9e7;margin-top:10px;line-height:1.4}
.puzzle-controls{display:grid;grid-template-columns:auto minmax(110px,220px);gap:10px;align-items:center;align-content:start}
.puzzle-controls label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#aac5d8;align-self:center}
.game-select{box-shadow:none;background:#163552;color:#fff;border:1px solid #5d84a0;padding:10px}
.puzzle-workspace{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);justify-content:center;align-items:start;gap:26px;min-width:0;padding:18px;border:1px solid #2b4d6d;border-radius:16px;background:#0b1d31}
.puzzle-board{display:grid;gap:0;aspect-ratio:2/3;width:100%;margin:0;padding:7px;border:3px solid #d1a859;border-radius:13px;background:#10283f;box-shadow:0 18px 36px #0008}
.puzzle-cell{position:relative;border:0;background:transparent;min-width:0;min-height:0;padding:0;cursor:pointer}
.puzzle-cell.filled{z-index:2}
.puzzle-cell.selected-target{filter:drop-shadow(0 0 8px #f4c76b)}
.puzzle-jigsaw{position:absolute;left:-16%;top:-16%;width:132%;height:132%;overflow:visible;pointer-events:none;background:none!important;border:0!important;box-shadow:none!important}
.puzzle-jigsaw-outline{fill:#17344f;stroke:#526f88;stroke-width:1.1;vector-effect:non-scaling-stroke}
.puzzle-jigsaw-edge{fill:none;stroke:#e5dfcd;stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px #0009)}
.puzzle-tile-art{display:block;width:100%;height:100%;background-repeat:no-repeat}
.puzzle-tray-wrap{min-width:0;width:100%}
.puzzle-tray-heading{display:flex;justify-content:space-between;gap:8px;align-items:baseline;color:#f4c76b;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;margin:0 0 10px}
.puzzle-tray-heading span{color:#b9d1e6;text-transform:none;letter-spacing:0;font-weight:700}
.puzzle-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;width:100%;max-height:620px;align-content:start;padding:14px;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;scrollbar-color:#7da9c7 #0b2139}
.puzzle-tray[data-side="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.puzzle-piece{position:relative;aspect-ratio:2/3;border:0;border-radius:0;background:transparent;padding:0;overflow:visible;cursor:pointer;filter:drop-shadow(0 4px 3px #0009);transition:transform .15s,filter .15s}
.puzzle-piece:hover{transform:translateY(-3px)}
.puzzle-piece.selected{z-index:3;filter:drop-shadow(0 0 5px #f4c76b) drop-shadow(0 0 2px #f4c76b)}
.puzzle-piece.used{visibility:hidden;pointer-events:none}
.puzzle-chooser{grid-column:1/-1;min-width:0;padding:16px;border:1px solid #2f5270;border-radius:14px;background:#0e253d}
.puzzle-shelf{display:grid;gap:14px;min-width:0;width:100%}
.puzzle-book-tabs{display:flex;gap:8px;overflow-x:auto;width:100%;min-width:0;padding:3px 2px 12px;box-sizing:border-box;scrollbar-color:#7da9c7 #0b2139}
.puzzle-book-tab{flex:0 0 155px;border:1px solid #416585;border-radius:9px;background:#10243d;color:#d9eafa;text-align:left;padding:10px 12px;font:700 12px/1.3 'DM Sans',Arial,sans-serif;cursor:pointer}
.puzzle-book-tab.active{border-color:var(--g-gold);background:#25466a;color:#fff}
.puzzle-book-tab:focus-visible,.puzzle-choice:focus-visible{outline:3px solid var(--g-gold);outline-offset:2px}
.puzzle-scene-strip{display:flex;gap:9px;overflow-x:auto;width:100%;min-width:0;box-sizing:border-box;padding:3px 2px 12px;scrollbar-color:#7da9c7 #0b2139}
.puzzle-choice{flex:0 0 98px;padding:5px;border:2px solid transparent;border-radius:9px;background:#10243d;color:#d9eafa;cursor:pointer;text-align:left;font-size:11px;line-height:1.2}
.puzzle-choice img{display:block;width:100%;height:90px;object-fit:contain;border-radius:5px;margin-bottom:5px;background:#071321}
.puzzle-choice.active{border-color:var(--g-gold);color:#fff}
.puzzle-subtitle{font:600 23px Georgia,serif;color:#f4c76b;margin:7px 0 0}
@media(max-width:1050px){.puzzle-workspace{grid-template-columns:minmax(0,380px) minmax(0,1fr)}}
@media(max-width:980px){.puzzle-layout{grid-template-columns:1fr}.puzzle-sidebar{display:grid;grid-template-columns:160px minmax(0,1fr);grid-template-rows:auto auto;align-items:start}.puzzle-preview{grid-row:1/3}}
@media(max-width:800px){.game-heading img{display:none}.game-heading h1{font-size:54px}}
@media(max-width:680px){.puzzle-sidebar{grid-template-columns:145px minmax(0,1fr);gap:12px}.puzzle-preview{padding:8px}.puzzle-preview small{display:none}.puzzle-chooser{padding:12px}.puzzle-workspace{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:12px}.puzzle-tray-wrap{order:-1}.puzzle-tray{max-height:300px;overflow-y:auto;overflow-x:hidden;padding:14px;scrollbar-color:#7da9c7 #0b2139}.puzzle-board{width:min(100%,380px);align-self:center}.puzzle-controls{grid-template-columns:1fr}.puzzle-book-tab{flex-basis:145px}}
@media(max-width:560px){.game-wrap{padding:22px 12px 50px}.game-heading{margin-bottom:18px}.game-heading h1{font-size:49px}.game-heading p{font-size:14px}.game-shell{border-radius:14px}.game-hud{gap:6px;padding:9px}.hud-brand{width:100%;margin:0}.hud-stat{min-width:0;padding:5px 7px}.hud-stat b{font-size:15px}.match-area,.puzzle-layout{padding:10px}.match-grid{gap:6px}.match-card .card-back{font-size:27px}.game-touch .game-button{min-width:58px}}
@media(prefers-reduced-motion:reduce){.match-card,.match-card .card-back,.match-card .card-front,.puzzle-piece,.game-button{transition:none}}