:root{
  --sand:#c5aa78; --sand2:#8d724c; --stone:#9c8561; --dark:#211b16;
  --frame:#493823; --frame2:#2b2118; --gold:#e7b849; --danger:#e9422e;
  --safe:#55c938; --ink:#f7e8c4; --muted:#d0bc92;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#211b16;color:var(--ink);overscroll-behavior:none}
body{min-height:100dvh;background:
 radial-gradient(circle at 20% 20%,#d4bb8c22,transparent 24%),
 linear-gradient(135deg,#59452e,#211b16 70%)}
button{font:inherit}
.app-shell{
 position:relative;width:min(100%,820px);min-height:100dvh;margin:auto;
 padding:calc(12px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right))
 calc(18px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
 background:
 linear-gradient(90deg,#0002 1px,transparent 1px) 0 0/88px 88px,
 linear-gradient(#0002 1px,transparent 1px) 0 0/88px 88px,
 radial-gradient(circle at 30% 15%,#c6ad7b,#8b714c 55%,#6c5538);
 box-shadow:0 0 70px #000b;
 overflow:hidden
}
.app-shell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background:
 radial-gradient(circle at 8% 12%,transparent 0 12px,#5c472f 13px 14px,transparent 15px),
 radial-gradient(circle at 82% 31%,transparent 0 18px,#5c472f 19px 20px,transparent 21px)}
.topbar{display:flex;align-items:stretch;justify-content:space-between;gap:10px;margin-bottom:10px;position:relative;z-index:4}
.title-plaque,.goal-plaque,.icon-btn{
 background:linear-gradient(#59452f,#2e241a);border:4px solid #2a2017;outline:2px solid #8d754d;
 box-shadow:inset 0 0 0 2px #aa8d5e55,0 5px 10px #0008;border-radius:16px;color:#f4dfae
}
.title-plaque{padding:7px 17px;min-width:150px}.eyebrow{font-size:.64rem;letter-spacing:.15em;font-weight:900;color:#d9bd80}
h1{font-size:1.45rem;margin:0;text-shadow:0 2px #000}
.top-actions{display:flex;gap:8px}.goal-plaque{padding:5px 13px;text-align:center}.goal-plaque span{display:block;font-size:.62rem;font-weight:900}.goal-plaque strong{font-size:1.1rem}
.icon-btn{width:48px;border-radius:14px;font-size:1.1rem}
.danger-rail{
 position:absolute;z-index:15;right:max(5px,env(safe-area-inset-right));top:110px;width:54px;height:330px;
 display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 7px;
 background:linear-gradient(#30251c,#1b1713);border:3px solid #493724;border-radius:18px;
 box-shadow:inset 0 0 0 1px #9a795044,0 6px 15px #0008
}
.danger-word,.safe-word{font-size:.56rem;font-weight:1000}.danger-word{color:#ff5946}.safe-word{color:#76e34f}
.vertical-meter{position:relative;flex:1;width:23px;background:#0d0c0b;border:3px solid #5c432a;border-radius:10px;overflow:hidden}
.vertical-meter i{position:absolute;left:2px;right:2px;bottom:2px;height:18%;border-radius:5px;background:linear-gradient(to top,#2ebf35 0 30%,#b7d832 43%,#ffd33c 60%,#ff8a2d 76%,#e72e24 100%);transition:height .25s}
.scene{
 position:relative;height:clamp(330px,47vh,470px);margin-right:46px;border-radius:28px;overflow:hidden;
 border:7px solid #493923;outline:2px solid #bea372;box-shadow:inset 0 0 28px #0008,0 12px 24px #0008;
 background:linear-gradient(#aa9167 0 61%,#2a241e 61%)
}
.scene:before{content:"";position:absolute;inset:0;background:
 radial-gradient(circle at 12% 10%,#d0b581 0 3px,transparent 4px),
 radial-gradient(circle at 72% 20%,#6c5436 0 2px,transparent 3px);background-size:29px 23px,37px 31px;opacity:.38}
.tunnel-label{position:absolute;z-index:6;left:15px;top:9px;font-size:.58rem;letter-spacing:.16em;font-weight:1000;color:#4b3824;text-shadow:0 1px #e1c797}
.rock-channel{position:absolute;inset:0 0 39% 0;background:linear-gradient(#bba173,#8f754f)}
.stream{
 position:absolute;height:46px;background:
 radial-gradient(circle at 15% 45%,#d5a84e 0 6px,#a6752f 7px 9px,transparent 10px),
 radial-gradient(circle at 43% 55%,#d6b05e 0 7px,#8e642d 8px 10px,transparent 11px),
 radial-gradient(circle at 72% 42%,#c99743 0 8px,#755026 9px 11px,transparent 12px),
 #b9893f;background-size:42px 34px;border:7px solid #594328;border-radius:999px;
 box-shadow:inset 0 7px 10px #ffe09b33,inset 0 -8px 12px #4a321e77,0 3px 5px #0005
}
.s1{left:-7%;right:17%;top:13%;transform:rotate(-5deg)}.s2{left:37%;right:-9%;top:43%;transform:rotate(7deg)}.s3{left:-8%;right:55%;top:69%;transform:rotate(-7deg)}
.rescue-bay{
 position:absolute;left:24%;right:7%;bottom:0;height:43%;background:linear-gradient(90deg,#161411,#29231d 55%,#171512);
 border:7px solid #4e3d2b;box-shadow:inset 0 0 30px #000;display:flex;align-items:flex-end;justify-content:center;overflow:hidden
}
.rescue-bay:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49%,#5d4b3922 50%,transparent 51%),linear-gradient(transparent 49%,#5d4b3922 50%,transparent 51%);background-size:54px 54px}
.inlet{position:absolute;left:8px;top:10px;z-index:6;color:#ffe077;font-size:.55rem;font-weight:1000}.supply-orb{width:15px;height:15px;background:radial-gradient(circle at 35% 30%,white,#ffd85c 28%,#e58c17 75%);box-shadow:0 0 15px #ffc52e}
.character{position:absolute;left:20%;bottom:8px;width:62px;height:102px;z-index:5;filter:drop-shadow(0 5px 4px #0008)}
.helmet{position:absolute;width:43px;height:43px;border-radius:48%;left:10px;top:4px;background:#e7a962;border:5px solid #f0d09b;box-shadow:inset -7px -5px #9f6439}
.helmet:before{content:"♛";position:absolute;left:5px;top:-25px;font-size:28px;color:#e8b536;text-shadow:0 2px #7c4e14}
.body{position:absolute;width:52px;height:61px;left:5px;bottom:0;border-radius:15px 15px 9px 9px;background:linear-gradient(90deg,#9e291e,#d8432c,#8f211a);border:5px solid #e0c28f}
.arm{position:absolute;width:14px;height:54px;background:#dfa15c;left:-3px;top:39px;border-radius:10px;transform:rotate(16deg)}
.status-bubble{position:absolute;right:-9px;top:-8px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#f5c64a;color:#3c250d;font-weight:1000;border:3px solid #fff8;z-index:8}
.crusher{position:absolute;right:4%;top:0;width:35%;height:76%;background:linear-gradient(90deg,#38342f,#68615a,#2e2a27);border-left:5px solid #81776b;z-index:7;transition:transform .25s;box-shadow:-7px 0 12px #0008}
.crusher:before{content:"";position:absolute;left:-38%;right:-2%;bottom:-18px;height:34px;background:repeating-linear-gradient(135deg,#efb82d 0 16px,#332c24 16px 32px);border:5px solid #31281e;box-shadow:0 6px 10px #0009}
.crusher-face{display:none}.warning-light{position:absolute;left:12px;top:10px;width:15px;height:15px;border-radius:50%;background:#ff3526;box-shadow:0 0 15px #ff2d20}
.flow-conduit{position:absolute;left:6%;right:32%;bottom:4px;height:12px;border-radius:8px;background:#17120d;border:2px solid #665137}
.impact-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 65% 50%,#ffe498aa,transparent 35%);z-index:12}
.game-panel{
 position:relative;margin:10px 46px 0 0;padding:12px 9px 10px;border-radius:18px;background:linear-gradient(#493a29,#2d241b);
 border:6px solid #493823;outline:2px solid #ad9367;box-shadow:inset 0 0 0 2px #806746,0 12px 25px #0009
}
.board-cap{text-align:center;font-size:.63rem;font-weight:1000;letter-spacing:.13em;color:#e8d4aa;margin:-3px 0 7px}
.message{text-align:center;color:#d6c29a;font-size:.78rem;min-height:19px;margin:0 3px 4px}.message.success{color:#ffdd65}.message.warning{color:#ff9b62}
.flow-status{display:flex;gap:7px;align-items:center;justify-content:center;color:#a99470;font-size:.67rem;font-weight:900;margin-bottom:6px}.flow-dot-indicator{width:7px;height:7px;border-radius:50%;background:#6e6253}.flow-status.active .flow-dot-indicator{background:#ffd54f;box-shadow:0 0 10px #ffd54f}
.board{--cols:8;display:grid;grid-template-columns:repeat(var(--cols),1fr);aspect-ratio:1/1;width:min(100%,610px);margin:auto;gap:3px;touch-action:none;background:#3a3026;padding:4px;border:3px solid #211a14;box-shadow:inset 0 0 8px #000}
.cell{
 position:relative;border-radius:5px;background:linear-gradient(145deg,#b7aa91,#83765f);border:2px solid #665944;display:grid;place-items:center;overflow:hidden;
 box-shadow:inset 2px 2px 3px #e8d8b777,inset -3px -3px 4px #40372d77
}
.cell.open{background:
 radial-gradient(circle at 25% 35%,#d9b35b 0 7%,transparent 8%),
 radial-gradient(circle at 60% 58%,#a8772f 0 9%,transparent 10%),
 radial-gradient(circle at 78% 30%,#e0b75a 0 6%,transparent 7%),#7a572d;border-color:#e2b84e;box-shadow:inset 0 0 10px #4b2f14,0 0 7px #ffd45a66}
.cell.open::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ffe68166,transparent 65%);opacity:.25}
.tile{width:70%;height:70%;box-shadow:inset 0 4px 5px #fff6,inset 0 -5px 6px #0005,0 3px 3px #0007;transition:transform .15s,opacity .15s}
.tile.red{background:linear-gradient(145deg,#ff7561,#d21f24 60%,#8b1218);clip-path:polygon(50% 0,92% 30%,76% 90%,24% 90%,8% 30%)}
.tile.yellow{background:linear-gradient(145deg,#ffe56e,#f2a514 58%,#b7640b);clip-path:polygon(50% 0,90% 25%,90% 75%,50% 100%,10% 75%,10% 25%)}
.tile.green{background:radial-gradient(circle at 50% 25%,#60e65e 0 26%,transparent 27%),radial-gradient(circle at 28% 55%,#48ce48 0 27%,transparent 28%),radial-gradient(circle at 72% 55%,#39b83c 0 27%,transparent 28%),linear-gradient(90deg,transparent 43%,#238b2a 44% 57%,transparent 58%);filter:drop-shadow(0 3px 2px #173c18)}
.tile.blue{background:linear-gradient(145deg,#6bb9ff,#2470dc 58%,#164593);clip-path:polygon(50% 0,88% 18%,84% 70%,50% 100%,16% 70%,12% 18%);transform:none;border-radius:15%}
.cell.selected{outline:3px solid #fff4bd;outline-offset:-3px}.cell.hint{animation:pulse .7s ease-in-out 3}.cell.path-lit{border-color:#ffe36e;box-shadow:inset 0 0 12px #ffd84d88,0 0 9px #ffd84d}
.controls{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:9px}.action-btn{min-width:96px;padding:10px 14px;border:3px solid #2a2017;border-radius:12px;background:linear-gradient(#70573b,#3e3022);color:#f2dfb7;font-weight:1000;box-shadow:inset 0 0 0 1px #b4946044,0 4px 8px #0007}.action-btn.secondary{background:linear-gradient(#514537,#302820);color:#e6d2aa}
.booster{position:relative;width:46px;height:42px;display:grid;place-items:center;background:linear-gradient(#5c4932,#30251b);border:3px solid #2b2118;border-radius:11px;box-shadow:inset 0 0 0 1px #a98c5d66}.booster span{font-size:1.25rem}.booster b{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#4e9f26;border:2px solid #1f3e11;font-size:.65rem}
.overlay{position:fixed;inset:0;z-index:40;background:#17110ddd;display:grid;place-items:center;padding:24px}.overlay.hidden{display:none}.modal{width:min(420px,100%);padding:25px;border-radius:22px;background:linear-gradient(#604a32,#2d241b);border:5px solid #2b2118;outline:2px solid #a88959;text-align:center;box-shadow:0 20px 60px #000}.modal h2{font-size:2rem;margin:.2rem 0 .6rem;color:#ffe09a}.modal p{color:#d5c09a}
.flow-particle{position:absolute;width:11px;height:11px;border-radius:50%;z-index:30;pointer-events:none;background:radial-gradient(circle at 35% 30%,#fff,#ffe677 30%,#e8a92b 65%);box-shadow:0 0 12px #ffd45d;transition:transform .105s linear,opacity .18s}.flow-particle.cargo{width:16px;height:16px;border-radius:5px;background:linear-gradient(145deg,#fff2a0,#f4b62d 48%,#a85c16)}
.splash{position:absolute;z-index:31;width:6px;height:6px;border-radius:50%;background:#ffd45d;box-shadow:0 0 8px #ffd45d;pointer-events:none;animation:splashOut .42s ease-out forwards}
.character.relieved{animation:relieved .65s ease}.character.panic{animation:panic .22s ease-in-out 3}.crusher.danger{animation:crusherRumble .18s linear infinite}.crusher.hit{animation:crusherKick .28s ease}.impact-flash.show{animation:impactFlash .36s ease}.match-burst{animation:matchBurst .23s ease-out forwards}
@keyframes pulse{50%{transform:scale(.9);box-shadow:0 0 0 4px #ffe16b88}}@keyframes relieved{38%{translate:0 -9px;scale:1.04}}@keyframes panic{25%{translate:-3px 0}75%{translate:3px 0}}@keyframes crusherRumble{50%{filter:brightness(1.12);translate:-2px 0}}@keyframes crusherKick{45%{filter:brightness(1.6);translate:-6px 0}}@keyframes impactFlash{35%{opacity:1}100%{opacity:0}}@keyframes splashOut{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}@keyframes matchBurst{55%{transform:scale(1.18);filter:brightness(1.5)}100%{transform:scale(.2);opacity:0}}
@media (orientation:landscape) and (min-width:700px){
 .app-shell{width:min(100%,1100px);display:grid;grid-template-columns:minmax(390px,.9fr) minmax(450px,1.1fr);grid-template-rows:auto 1fr;gap:12px}
 .topbar{grid-column:1/-1}.scene{height:auto;min-height:570px;margin-right:0}.game-panel{margin:0 54px 0 0;align-self:start}.danger-rail{top:105px;right:8px;height:400px}
}
@media(max-width:430px){.danger-rail{width:46px}.scene,.game-panel{margin-right:39px}.title-plaque{min-width:130px;padding-left:12px;padding-right:12px}h1{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}