:root,html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}:root{color:#17202a;background:#eaf7ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}button{border:0;font:inherit}.game-root{display:grid;width:100%;height:100%;min-width:280px;place-items:center;overflow:hidden;background:radial-gradient(circle at 18% 10%,rgba(255,212,102,.48),transparent 24%),linear-gradient(160deg,#cdefff,#f8fbff 46%,#c7f2ea);padding:0;-webkit-user-select:none;user-select:none;touch-action:none}.game-frame{position:relative;display:grid;grid-template-rows:auto 1fr auto;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,56.25vw);max-width:100%;max-height:100%;overflow:hidden;border:min(.55vw,6px) solid rgba(30,89,112,.28);border-radius:8px;background:linear-gradient(#ffffff3d,#ffffff0f),linear-gradient(180deg,#92ddff,#eafcff 56%,#8bd9df);box-shadow:0 20px 60px #14495e33}.top-bar,.bottom-panel{position:relative;z-index:4}.top-bar{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:min(1.2vw,12px);padding:min(1.4vw,14px)}.stat-box{display:grid;min-width:0;border:1px solid rgba(29,81,105,.18);border-radius:8px;background:#ffffffc2;padding:min(1vw,10px);color:#345064;line-height:1;box-shadow:0 8px 18px #11596c1a}.stat-box span{font-size:clamp(.58rem,1.15vw,.78rem);font-weight:800}.stat-box strong{overflow:hidden;margin-top:.32em;color:#102331;font-size:clamp(1.05rem,2.35vw,2rem);text-overflow:ellipsis;white-space:nowrap}.score-box{text-align:center}.stage{position:relative;display:grid;place-items:center;min-height:0;overflow:visible;padding-bottom:min(2vw,18px)}.event-layer{position:absolute;inset:0;pointer-events:none}.sun-ray{position:absolute;inset:-20%;opacity:0;background:radial-gradient(circle at 50% -10%,rgba(255,230,69,.74),transparent 45%);transition:opacity .18s ease}.event-sun .sun-ray{opacity:1;animation:pulse-sun .6s ease-in-out infinite alternate}.snowflake{position:absolute;opacity:0;color:#f8feff;font-size:clamp(1.7rem,5vw,4rem);font-weight:900;text-shadow:0 2px 8px rgba(0,111,150,.18)}.snowflake-a{top:14%;left:12%}.snowflake-b{top:28%;right:15%}.snowflake-c{bottom:16%;left:28%}.event-snow .snowflake{opacity:.9;animation:drift-snow .9s ease-in-out infinite alternate}.siren-light{position:absolute;top:min(8vw,72px);width:min(8vw,74px);height:min(8vw,74px);border-radius:50%;opacity:0;background:#ff335c61;filter:blur(1px)}.siren-left{left:min(7vw,70px)}.siren-right{right:min(7vw,70px)}.event-siren .siren-light{opacity:1;animation:siren-blink .26s linear infinite}.event-toast{position:absolute;top:3%;left:50%;z-index:5;display:flex;align-items:center;gap:min(1vw,10px);max-width:74%;transform:translate(-50%);border:1px solid rgba(27,85,104,.18);border-radius:999px;background:#ffffffd1;padding:min(1vw,10px) min(1.5vw,16px);box-shadow:0 12px 26px #0d51601f;white-space:nowrap}.event-toast strong{color:#0d6470;font-size:clamp(.72rem,1.5vw,1rem)}.event-toast span{color:#2d4656;font-size:clamp(.68rem,1.25vw,.9rem)}.ani-zone{position:absolute;left:50%;bottom:clamp(4px,8%,58px);z-index:7;display:grid;width:auto;height:clamp(90px,32vh,36vh);max-height:min(36vh,280px);aspect-ratio:1;place-items:center;transform:translate(-50%);transition:transform .14s ease;pointer-events:none}.is-holding .ani-zone{transform:translate(-50%) translateY(5%) scaleY(.95)}.cool-sheet{position:absolute;top:29%;left:50%;z-index:12;width:24%;height:6.8%;border:2px solid rgba(0,143,163,.28);border-radius:6px;opacity:0;background:linear-gradient(90deg,transparent 28%,rgba(0,141,165,.18) 28% 35%,transparent 35% 65%,rgba(0,141,165,.18) 65% 72%,transparent 72%),#d9fff8;transform:translate(-50%) rotate(-4deg)}.event-cool-sheet .cool-sheet{opacity:1}.sweat{position:absolute;z-index:12;width:min(2.4vw,18px);height:min(3.2vw,24px);border-radius:60% 60% 60% 12%;opacity:0;background:#78dfff;transform:rotate(35deg)}.sweat-a{top:35%;right:5%}.sweat-b{top:47%;left:5%}.heat-warm .sweat-a,.heat-danger .sweat{opacity:.88;animation:sweat-drop .76s ease-in-out infinite alternate}.heat-waves{position:absolute;inset:2% -18% auto;z-index:1;display:flex;justify-content:space-around;opacity:0}.heat-waves span{width:min(1.2vw,10px);height:min(8vw,68px);border-radius:999px;background:linear-gradient(180deg,transparent,rgba(255,87,74,.5),transparent)}.heat-danger .heat-waves{opacity:1;animation:heat-wave .78s ease-in-out infinite alternate}.ani-character{position:relative;z-index:8;display:block;width:100%;height:100%;min-width:64px;min-height:64px;opacity:1;visibility:visible;transform-origin:50% 92%;filter:drop-shadow(0 16px 18px rgba(28,86,105,.18));transition:transform .14s ease,filter .14s ease}.is-holding .ani-character{transform:translateY(8%) scaleX(1.08) scaleY(.9)}.phase-fail-ice .ani-character{transform:translateY(14%) rotate(-4deg) scale(.95)}.phase-fail-heat .ani-character{transform:rotate(3deg);filter:drop-shadow(0 18px 18px rgba(196,54,64,.18))}.ani-character-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:1;visibility:visible;-webkit-user-select:none;user-select:none;transition:filter .14s ease}.ani-red-overlay{position:absolute;inset:7% 9% 10%;z-index:9;border-radius:46% 46% 42% 42%;opacity:0;background:radial-gradient(circle at 50% 34%,rgba(255,78,93,.54),rgba(255,78,93,.26) 46%,transparent 70%);mix-blend-mode:multiply;pointer-events:none}.heat-warm .ani-red-overlay{opacity:.16}.heat-danger .ani-red-overlay{opacity:.34}.phase-fail-heat .ani-character-image{filter:saturate(1.65) hue-rotate(-8deg)}.phase-fail-heat .ani-red-overlay{opacity:.52}.phase-fail-ice .ani-character-image{transform:translateY(8%) rotate(-3deg) scale(.92)}.float-tube,.ice-cup{opacity:0;transition:opacity .14s ease}.float-tube{position:absolute;left:6%;bottom:2%;z-index:10;width:88%;height:30%;border:min(1.2vw,12px) solid #ff6b78;border-radius:50%;opacity:0;background:#ffffff73;box-shadow:inset 0 0 0 min(.5vw,5px) #ffffff94}.phase-fail-ice .float-tube{opacity:1;animation:bob-tube .9s ease-in-out infinite alternate}.ice-cup{position:absolute;right:-12%;bottom:38%;z-index:11;width:24%;height:24%;border:3px solid rgba(77,156,188,.64);border-top:0;border-radius:0 0 30% 30%;opacity:0;background:linear-gradient(180deg,#ffffffd1,#80e1ffbd);transform:rotate(-8deg)}.ice-cup:before,.ice-cup:after,.ice-cup span{position:absolute;content:"";background:#f8ffff}.ice-cup:before{top:-18%;left:-12%;width:124%;height:22%;border:2px solid rgba(77,156,188,.64);border-radius:50%}.ice-cup:after{right:-52%;top:28%;width:36%;height:28%;border:3px solid rgba(77,156,188,.64);border-left:0;border-radius:0 999px 999px 0;background:transparent}.ice-cup span{left:24%;top:18%;width:20%;height:20%;box-shadow:22px 6px #f8ffff}.phase-fail-heat .ice-cup{opacity:1}.ice-wrap{position:absolute;bottom:2.5%;left:50%;z-index:1;display:grid;width:calc(min(46vw,50vh,440px) * (.62 + var(--ice-scale, .38)));place-items:center;transform:translate(-50%)}.game-root{--ice-scale: .38}.ice-low{--ice-scale: .15}.ice-critical{--ice-scale: 0}.ice-shadow{position:absolute;bottom:-8%;width:76%;height:22%;border-radius:50%;background:#1c5d793d;filter:blur(5px)}.iceberg{position:relative;width:100%;aspect-ratio:3.4;overflow:hidden;border:2px solid rgba(33,139,169,.24);border-radius:42% 48% 34% 38%/44% 45% 38% 36%;background:linear-gradient(140deg,rgba(255,255,255,.95),transparent 36%),linear-gradient(180deg,#eaffff,#b7f0ff 62%,#7bcadd);box-shadow:inset -18px -18px #50b4cc21;transition:width .16s ease}.ice-low .iceberg,.ice-critical .iceberg{animation:ice-shake .64s ease-in-out infinite}.crack{position:absolute;width:3px;border-radius:999px;opacity:0;background:#23739480;transform-origin:top}.crack-a{top:25%;left:38%;height:44%;transform:rotate(20deg)}.crack-b{top:38%;left:54%;height:35%;transform:rotate(-24deg)}.crack-c{top:28%;right:22%;height:48%;transform:rotate(10deg)}.ice-low .crack-a,.ice-critical .crack{opacity:1}.water{position:absolute;bottom:-34%;display:flex;gap:min(1vw,10px);opacity:0}.water span{width:min(12vw,110px);height:min(2vw,18px);border-radius:50%;background:#2daad373}.phase-fail-ice .water{opacity:1}.bottom-panel{display:grid;grid-template-columns:1fr 1fr minmax(158px,.72fr);gap:min(1.1vw,12px);padding:0 min(1.4vw,14px) min(1.4vw,14px)}.meter{min-width:0;border:1px solid rgba(24,83,111,.16);border-radius:8px;background:#ffffffbd;padding:min(1vw,10px)}.meter-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;color:#26485b;font-size:clamp(.66rem,1.2vw,.9rem);font-weight:800}.meter-track{height:clamp(9px,1.5vw,15px);overflow:hidden;border-radius:999px;background:#3a5d6e24}.meter-fill{height:100%;min-width:2px;border-radius:inherit;transition:width 90ms linear}.heat-meter .meter-fill{background:linear-gradient(90deg,#ffe27a,#ff8c58,#ff4269)}.ice-meter .meter-fill{background:linear-gradient(90deg,#61d7ff,#baf8ff,#fff)}.hold-button,.primary-button{cursor:pointer;border-radius:8px;color:#0e3142;font-weight:900;box-shadow:0 9px #0e5d7029,0 12px 26px #0e5d7026}.hold-button{min-width:0;min-height:48px;background:linear-gradient(180deg,#fff,#bbfff0);padding:min(1.1vw,12px);font-size:clamp(.72rem,1.35vw,1rem)}.hold-button:active,.is-holding .hold-button{transform:translateY(4px);box-shadow:0 5px #0e5d7029,0 10px 18px #0e5d701f}.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#dff7ff6b;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:min(4vw,32px)}.overlay-panel{display:grid;justify-items:center;width:min(92%,500px);border:1px solid rgba(20,79,102,.16);border-radius:8px;background:#ffffffe6;padding:clamp(18px,4.5vw,42px);text-align:center;box-shadow:0 24px 70px #0d4a6038}.mini-label{margin:0 0 8px;color:#087b87;font-size:clamp(.68rem,1.35vw,.86rem);font-weight:900}.overlay-panel h1{margin:0;color:#142535;font-size:clamp(1.55rem,4.6vw,3.3rem);line-height:1.08}.overlay-panel p{margin:12px 0 18px;color:#40596a;font-size:clamp(.78rem,1.55vw,1.02rem);line-height:1.55}.primary-button{min-width:min(56vw,180px);background:linear-gradient(180deg,#fff56f,#ffc84d);padding:12px 22px;font-size:clamp(.9rem,1.8vw,1.12rem)}.primary-button:active{transform:translateY(3px);box-shadow:0 5px #ab78002e,0 10px 18px #0e5d701f}@media(max-aspect-ratio:4 / 3){.top-bar{gap:6px;padding:8px}.bottom-panel{grid-template-columns:1fr 1fr;gap:7px;padding:0 8px 8px}.hold-button{grid-column:1 / -1;min-height:38px;padding:8px}.ani-zone{width:auto;height:clamp(90px,min(32vh,22vw),170px)}.event-toast{top:2%}.overlay{padding:8px}.overlay-panel{padding:12px 14px}.mini-label{margin-bottom:4px;font-size:.66rem}.overlay-panel h1{font-size:clamp(1.28rem,5vw,1.65rem)}.overlay-panel p{margin:7px 0 10px;font-size:clamp(.68rem,2.7vw,.82rem);line-height:1.3}.primary-button{min-width:144px;padding:9px 16px}}@media(max-height:430px){.top-bar,.stat-box{padding:6px}.bottom-panel{padding:0 6px 6px}.meter{padding:6px}.meter-label{margin-bottom:4px}.hold-button{min-height:34px;padding:6px}.overlay{padding:8px}.overlay-panel{width:min(92%,340px);padding:10px 14px}.mini-label{display:none}.overlay-panel h1{font-size:clamp(1.1rem,5vw,1.65rem)}.overlay-panel p{margin:6px 0 8px;font-size:clamp(.62rem,2.5vw,.78rem);line-height:1.25}.primary-button{min-width:128px;padding:8px 14px;font-size:clamp(.72rem,3vw,.86rem)}}@keyframes pulse-sun{0%{transform:scale(1)}to{transform:scale(1.04)}}@keyframes drift-snow{0%{transform:translateY(-6px) rotate(-4deg)}to{transform:translateY(9px) rotate(5deg)}}@keyframes siren-blink{0%,to{transform:scale(.9)}50%{transform:scale(1.2)}}@keyframes sweat-drop{0%{transform:translateY(-2px) rotate(35deg)}to{transform:translateY(7px) rotate(35deg)}}@keyframes heat-wave{0%{transform:translateY(0)}to{transform:translateY(-10px)}}@keyframes ice-shake{0%,to{transform:rotate(0)}50%{transform:rotate(-1.4deg)}}@keyframes bob-tube{0%{transform:translateY(-2px) rotate(-2deg)}to{transform:translateY(7px) rotate(3deg)}}
