*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;user-select:none;-webkit-user-select:none;font-family:system-ui,sans-serif;color:#173c56}body{background:radial-gradient(ellipse at 45% 30%,#e6f9ff,#9dcede 85%)}#board{position:absolute;top:72px;left:0;width:100%;height:calc(100% - 72px);touch-action:none}#level{position:absolute;top:max(19px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0;font-size:23px;font-weight:850;white-space:nowrap}button{font:inherit;cursor:pointer;border:0}#go{position:absolute;right:18px;top:max(14px,env(safe-area-inset-top));z-index:3;border-radius:15px;padding:12px 22px;background:#269879;color:white;box-shadow:0 5px 0 #19715a;font-size:20px;font-weight:850}#go:disabled{opacity:.45;box-shadow:none;transform:translateY(3px)}#tools{position:absolute;bottom:0;left:0;right:0;z-index:2;display:flex;gap:12px;overflow-x:auto;padding:16px 22px max(22px,env(safe-area-inset-bottom));align-items:center;min-height:132px;scrollbar-width:none;touch-action:pan-x;background:transparent;scroll-snap-type:x proximity}#tools::before,#tools::after{content:'';flex:1}#tools::-webkit-scrollbar{display:none}.card{flex:0 0 76px;height:96px;border-radius:15px;border:3px solid #254961;background:linear-gradient(#fff9dc,#ffce77);box-shadow:0 5px 0 #c78c44,0 8px 18px #38647e25;transform:translateY(var(--lift,0px)) scale(var(--card-scale,1));transition:transform .28s cubic-bezier(.22,.65,.3,1),border-color .25s ease,box-shadow .25s ease,opacity .18s;scroll-snap-align:center;padding:12px}.card svg{display:block;width:100%;height:100%;fill:#2d6885;color:#2d6885;filter:drop-shadow(0 2px 0 #fff8)}.card svg path{stroke:#2d6885}.card.selected{--lift:-9px;border-color:#fff;box-shadow:0 5px 0 #237b91,0 8px 18px #38647e25}.card:disabled{opacity:.25;transform:translateY(7px);cursor:default}#outcome{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}#outcome.win{opacity:1;box-shadow:inset 0 0 100px #5de7b3}#outcome.lose{opacity:1;box-shadow:inset 0 0 100px #ed8278}body .game-menu-button{width:42px;height:42px;top:16px;left:14px;font-size:23px;background:#ffffffa8;color:#234d64}body .game-menu{z-index:20}body .game-confirm{z-index:30}@media(max-width:700px){#board{top:58px;height:calc(100% - 58px)}#tools{min-height:104px;padding:18px 12px max(13px,env(safe-area-inset-bottom));gap:9px}.card{flex-basis:68px;height:82px;padding:10px}}@media(max-height:500px){#board{top:54px;height:calc(100% - 54px)}#tools{min-height:88px;padding:10px 18px 13px}.card{height:64px;flex-basis:55px;padding:6px}#level{font-size:20px}#go{padding:8px 18px}}

.card[data-type="jump"]{background:linear-gradient(#fff5ce,#efbc72)}.card[data-type="bridge"],.card[data-type="grip"]{background:linear-gradient(#ffecc9,#cca275)}.card[data-type="fish"]{background:linear-gradient(#ecffff,#8bdded)}.card[data-type="split"],.card[data-type="family"]{background:linear-gradient(#f1e9ff,#c5abeb)}.card{color:#344f66}
.card .jump-glyph{overflow:visible;filter:none}.card .jump-arrow{fill:#2d6885;stroke:none}.card .jump-shadow{fill:#173c56;opacity:.3;stroke:none}.card .jump-body,.card .jump-wing{fill:#171b1e;stroke:#171b1e;stroke-width:.6}.card .jump-belly{fill:#fff;stroke:#fff;stroke-width:.5}.card .jump-eye{fill:#fff;stroke:none}.card .jump-beak,.card .jump-foot{fill:#171b1e;stroke:#171b1e;stroke-width:.6}
#loading{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(ellipse at 45% 30%,#e6f9ff,#9dcede 85%);transition:opacity .3s ease,visibility .3s ease}
#loading.ready{opacity:0;visibility:hidden;pointer-events:none}
.igloo{position:relative;width:0;height:0;perspective:780px}
.igloo-spin{position:absolute;left:0;top:0;transform-style:preserve-3d;animation:igloo-turn 18s linear infinite}
.igloo-spin i{--bw:36px;--bh:22px;--bd:12px;--bwh:18px;--bhh:11px;--bdh:6px;position:absolute;left:-18px;top:-11px;display:block;width:var(--bw);height:var(--bh);font-style:normal;transform-style:preserve-3d;background:none;box-shadow:none;border-radius:0;opacity:0;transform:rotateY(var(--a)) translateZ(var(--r)) translateY(calc(var(--y) - 170px));transition:transform .22s cubic-bezier(.18,.82,.32,1),opacity .13s ease;will-change:transform,opacity}
.igloo-spin i.cap{--bw:42px;--bh:26px;--bd:14px;--bwh:21px;--bhh:13px;--bdh:7px;left:-21px;top:-13px}
.igloo-spin i.built{opacity:1;transform:rotateY(var(--a)) translateZ(var(--r)) translateY(var(--y))}
.igloo-spin .brick-face{position:absolute;display:block;border:1px solid #92bbcf;border-radius:2px;background:linear-gradient(145deg,#fff,#d7eef8 60%,#afd9e9);box-shadow:inset 0 0 0 1px #ffffff9c;backface-visibility:hidden}
.igloo-spin .brick-face.front,.igloo-spin .brick-face.back{left:0;top:0;width:var(--bw);height:var(--bh)}
.igloo-spin .brick-face.front{transform:translateZ(calc(var(--bd)/2))}
.igloo-spin .brick-face.back{transform:rotateY(180deg) translateZ(calc(var(--bd)/2));filter:brightness(.76)}
.igloo-spin .brick-face.left,.igloo-spin .brick-face.right{top:0;width:var(--bd);height:var(--bh);background:linear-gradient(90deg,#a8ccdc,#689ab1)}
.igloo-spin .brick-face.left{left:calc(var(--bwh) - var(--bdh));transform:rotateY(-90deg) translateZ(var(--bwh))}
.igloo-spin .brick-face.right{left:calc(var(--bwh) - var(--bdh));transform:rotateY(90deg) translateZ(var(--bwh));filter:brightness(.84)}
.igloo-spin .brick-face.top,.igloo-spin .brick-face.bottom{left:0;width:var(--bw);height:var(--bd);background:linear-gradient(#fff,#c5e5f0)}
.igloo-spin .brick-face.top{top:calc(var(--bhh) - var(--bdh));transform:rotateX(90deg) translateZ(var(--bhh))}
.igloo-spin .brick-face.bottom{top:calc(var(--bhh) - var(--bdh));transform:rotateX(-90deg) translateZ(var(--bhh));filter:brightness(.78)}
.igloo-shadow{position:absolute;left:-85px;top:14px;width:170px;height:26px;border-radius:50%;background:radial-gradient(ellipse,#2f6a8a33,transparent 70%)}
@keyframes igloo-turn{from{transform:rotateX(-16deg) rotateY(0)}to{transform:rotateX(-16deg) rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.igloo-spin{animation-duration:40s}.igloo-spin i{transition-duration:.18s}}

/* Independent fog banks and snow layers cover a scene swap in any direction. */
.level-snowstorm{position:fixed;inset:-18%;z-index:10000;overflow:hidden;pointer-events:auto;background:#dce8ee;box-shadow:0 0 45px 28px #dce8eee6;transform:translateX(-110%)}
.level-snowstorm[hidden]{display:none}
.snow-bank{position:absolute;inset:-12%;overflow:hidden;background:radial-gradient(ellipse at 15% 25%,#f2f6f9a8,transparent 55%),radial-gradient(ellipse at 80% 70%,#adcbd966,transparent 60%);opacity:calc(.8 - var(--layer)*.13)}
.snow-bank:nth-child(2){background:radial-gradient(ellipse at 75% 30%,#eaf3f9b0,transparent 50%),repeating-linear-gradient(166deg,transparent 0 40px,#eff5f84d 46px,transparent 55px 95px)}
.snow-bank:nth-child(3){background:radial-gradient(ellipse at 35% 70%,#ffffff80,transparent 60%);filter:blur(.5px)}
.level-snowstorm i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#f3f7fa;box-shadow:-10px 3px 8px #f3f7fa;animation:snow-flake var(--flake-speed) linear infinite;animation-delay:var(--delay)}
@keyframes snow-flake{from{transform:translate(calc(var(--drift-x)*-.5),calc(var(--drift-y)*-.5));opacity:.2}50%{opacity:.9}to{transform:translate(calc(var(--drift-x)*.5),calc(var(--drift-y)*.5));opacity:.2}}
@media(prefers-reduced-motion:reduce){.level-snowstorm i{animation:none}}

@media(hover:hover){.card:not(:disabled):hover{--card-scale:1.045}}
.card.shake{animation:card-reject .38s ease-in-out}
@keyframes card-reject{0%,100%{translate:0 0}20%{translate:-7px 0}40%{translate:7px 0}60%{translate:-5px 0}80%{translate:4px 0}}

#lessonTip{position:fixed;z-index:10;top:82px;left:50%;transform:translateX(-50%);width:min(340px,calc(100% - 32px));padding:18px 20px;text-align:center;border:2px solid #fff;border-radius:22px;background:#eaf8fc;box-shadow:0 8px 24px #173c5633;animation:lesson-arrive .25s ease-out}#lessonTip[hidden]{display:none}#lessonTip p{margin:0 0 14px;font-size:18px;line-height:1.4;font-weight:700}#lessonTip button{border-radius:12px;background:#269879;color:white;padding:10px 24px;font-weight:800;box-shadow:0 3px 0 #19715a}@keyframes lesson-arrive{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}@media(max-height:500px){#lessonTip{top:65px;padding:10px 16px}#lessonTip p{margin-bottom:8px;font-size:16px}}

/* Keep the level/counter centered; run controls sit at the right edge. */
#runControls{position:absolute;top:max(14px,env(safe-area-inset-top));right:18px;z-index:3}
#runControls #go{position:static}
#gameSpeed{position:absolute;top:calc(max(14px,env(safe-area-inset-top)) + 55px);right:18px;z-index:3;background:none;border:0;box-shadow:none;padding:3px 0;color:#173c56;font-size:16px;font-weight:750;line-height:20px;touch-action:manipulation}
#gameSpeed[hidden]{display:none}
#gameSpeed:focus-visible{outline:2px solid #173c56;outline-offset:3px;border-radius:4px}
@media(max-height:500px){#runControls{top:10px}#gameSpeed{top:52px;font-size:14px}}

.card .family-glyph path{stroke:none}
.card .family-glyph{filter:drop-shadow(0 1px 0 #fff5)}