:root{color-scheme:light;--ink:#183342;--blue:#4b8ca9;--sky:#9fd0e5;--cream:#fffaf0;--sun:#f2a65a;--line:rgba(25,55,69,.14);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{position:fixed;inset:0;width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#6da4bd;font-family:"Avenir Next",Avenir,"Trebuchet MS",Arial,sans-serif;color:var(--ink)}
body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,a,canvas{touch-action:none}
button{font:inherit}
.game-shell{position:relative;width:100%;height:100dvh;min-height:540px;margin:0 auto;overflow:hidden;background:linear-gradient(#92c9df,#d9e8e5 67%,#ecdfc5)}
#gameCanvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.hud{position:absolute;z-index:10;top:0;left:0;right:0;display:grid;grid-template-columns:46px repeat(3,1fr) 46px;align-items:center;gap:4px;padding:calc(10px + var(--safe-top)) 10px 22px;color:#fff;background:linear-gradient(180deg,rgba(19,51,67,.58),transparent)}
.hud>div{display:grid;gap:1px;text-align:center;text-shadow:0 2px 8px rgba(20,47,58,.25)}
.hud small{font-size:7px;font-weight:900;letter-spacing:.17em;opacity:.68}
.hud strong{font-size:18px;line-height:1}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.34);border-radius:15px;color:#fff;background:rgba(25,60,76,.27);box-shadow:0 7px 18px rgba(24,57,73,.1);font-size:18px;font-weight:900;text-decoration:none;backdrop-filter:blur(6px)}
.icon-button:active{transform:scale(.92)}
.wind-chip{position:absolute;z-index:9;top:calc(80px + var(--safe-top));left:50%;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(255,255,255,.5);border-radius:20px;color:#fff;background:rgba(42,83,100,.25);transform:translateX(-50%);text-shadow:0 1px 4px rgba(20,40,50,.25)}
.wind-chip span{font-size:16px;font-weight:900}.wind-chip small{font-size:7px;font-weight:900;letter-spacing:.15em}
.callout{position:absolute;z-index:12;top:calc(121px + var(--safe-top));left:50%;min-width:120px;padding:8px 14px;border-radius:18px;opacity:0;color:#285365;background:rgba(255,250,239,.93);box-shadow:0 8px 24px rgba(31,66,80,.16);font-size:12px;font-weight:900;letter-spacing:.08em;text-align:center;transform:translate(-50%,-8px) scale(.94);transition:.18s ease-out;pointer-events:none}
.callout.show{opacity:1;transform:translate(-50%,0) scale(1)}
.callout.perfect{color:#a85f23;background:#fff3cd}
.tap-hint{position:absolute;z-index:8;right:0;bottom:calc(23px + var(--safe-bottom));left:0;color:rgba(255,255,255,.82);font-size:9px;font-weight:900;letter-spacing:.18em;text-align:center;text-shadow:0 2px 8px rgba(15,37,48,.4);animation:hint 1.8s ease-in-out infinite;pointer-events:none}
@keyframes hint{50%{opacity:.43;transform:translateY(3px)}}
.screen{position:absolute;z-index:20;inset:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.screen.open{opacity:1;visibility:visible}
.start-screen{display:grid;grid-template-rows:auto auto 1fr auto;padding:calc(12px + var(--safe-top)) 16px calc(10px + var(--safe-bottom));color:#fff;background:linear-gradient(180deg,rgba(17,53,70,.25) 0%,transparent 38%,rgba(20,48,61,.12) 62%,rgba(19,43,55,.54) 100%)}
.brand-row{display:flex;align-items:center;gap:10px}.brand-row>a{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;color:#fff;background:#e58c4c;box-shadow:0 8px 20px rgba(94,53,25,.18);font-size:11px;text-decoration:none}.brand-row>span{margin-right:auto;font-size:7px;font-weight:900;letter-spacing:.17em;opacity:.72}
.title-block{padding:26px 7px 0;text-shadow:0 7px 25px rgba(26,66,82,.17)}.title-block p{margin:0 0 7px;color:#fff4bf;font-size:8px;font-weight:900;letter-spacing:.22em}.title-block h1{margin:0;font-size:clamp(52px,16vw,72px);line-height:.78;letter-spacing:-.07em}.title-block h1 em{color:#ffd27c;font-style:normal}.title-block>span{display:block;margin-top:15px;font-family:Georgia,serif;font-size:12px;font-style:italic;opacity:.78}
.start-card{align-self:end;padding:16px;border:1px solid rgba(255,255,255,.4);border-radius:25px;background:rgba(255,250,239,.88);box-shadow:0 22px 55px rgba(27,55,66,.2);color:var(--ink);backdrop-filter:blur(9px)}
.record{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;margin-bottom:13px;text-align:center}.record i{width:1px;height:31px;background:var(--line)}.record span{display:grid;gap:3px}.record small{color:#78909b;font-size:7px;font-weight:900;letter-spacing:.15em}.record strong{font-size:20px}
.primary-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:62px;padding:0 18px;border:0;border-radius:19px;color:#fff;background:linear-gradient(135deg,#e79251,#d87940);box-shadow:0 10px 0 rgba(149,81,41,.22),0 18px 32px rgba(135,81,44,.18);text-align:left}.primary-button:active{transform:translateY(4px);box-shadow:0 6px 0 rgba(149,81,41,.22)}.primary-button span{display:grid;gap:2px}.primary-button small{font-size:7px;font-weight:800;letter-spacing:.15em;opacity:.7}.primary-button strong{font-size:15px;letter-spacing:.04em}.primary-button b{font-size:25px}.start-card>p{margin:16px 0 0;color:#6f858f;font-size:9px;text-align:center}.start-screen>footer{padding-top:10px;font-size:7px;font-weight:900;letter-spacing:.17em;text-align:center;opacity:.56}
.result-screen{display:grid;place-items:center;padding:18px;background:rgba(18,42,54,.68);backdrop-filter:blur(8px)}.result-card{width:min(100%,370px);padding:28px 22px 21px;border:1px solid rgba(255,255,255,.76);border-radius:29px;background:linear-gradient(160deg,#fffdf7,#eef2e9);box-shadow:0 28px 80px rgba(15,37,48,.35);text-align:center}.fallen-mark{position:relative;width:72px;height:55px;margin:0 auto 13px}.fallen-mark i{position:absolute;left:50%;width:43px;height:13px;border-radius:4px;background:#e58b50;box-shadow:0 3px 7px rgba(76,51,32,.14)}.fallen-mark i:nth-child(1){bottom:3px;transform:translateX(-67%) rotate(-14deg)}.fallen-mark i:nth-child(2){bottom:19px;background:#79aebd;transform:translateX(-34%) rotate(10deg)}.fallen-mark i:nth-child(3){bottom:35px;width:34px;background:#e5bd62;transform:translateX(-70%) rotate(-23deg)}.result-card>p{margin:0 0 6px;color:#d47b42;font-size:8px;font-weight:900;letter-spacing:.21em}.result-card h2{margin:0 0 20px;font-size:28px;letter-spacing:-.04em}.results{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 16px;border-radius:17px;background:#e8eee9}.results span{display:grid;gap:4px;padding:13px 4px}.results span+span{border-left:1px solid rgba(53,80,86,.1)}.results small{color:#819198;font-size:7px;font-weight:900;letter-spacing:.12em}.results strong{font-size:21px}.result-card>a{display:inline-block;margin-top:18px;color:#71858d;font-size:9px;font-weight:800;text-decoration:none}
.loading-screen{position:absolute;z-index:50;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#244a5a;background:linear-gradient(#a3d5e7,#e7eee7 73%,#efdfbd);transition:opacity .35s,visibility .35s}.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-screen>strong{font-size:27px;letter-spacing:-.04em}.loading-screen>small{margin-top:9px;color:#66838f;font-size:8px;font-weight:900;letter-spacing:.15em}.loader-tower{position:relative;width:70px;height:78px;margin-bottom:16px}.loader-tower i{position:absolute;left:50%;width:45px;height:18px;border-radius:5px;background:#df8a51;box-shadow:0 4px 8px rgba(44,70,80,.13)}.loader-tower i:nth-child(1){bottom:0;transform:translateX(-50%)}.loader-tower i:nth-child(2){bottom:22px;width:38px;background:#72aabd;transform:translateX(-43%) rotate(2deg)}.loader-tower i:nth-child(3){bottom:44px;width:32px;background:#e3bc61;transform:translateX(-60%) rotate(-3deg);animation:load-swing 1.3s ease-in-out infinite}@keyframes load-swing{50%{transform:translateX(-35%) rotate(5deg)}}.loader-track{width:190px;height:5px;margin-top:19px;overflow:hidden;border-radius:8px;background:rgba(35,72,87,.12)}.loader-track i{display:block;width:42%;height:100%;border-radius:inherit;background:#de8a50;animation:load 1.1s ease-in-out infinite}@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.seo-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(pointer:coarse){.icon-button,.start-card,.result-screen{backdrop-filter:none}.icon-button{background:rgba(25,60,76,.5)}.start-card{background:rgba(255,250,239,.95)}}
@media(min-width:700px){body{position:static;display:grid;place-items:start center;min-height:100%;height:auto;overflow-y:auto;background:#244c60}.game-shell{width:430px;height:880px;min-height:880px;margin:18px auto;border-radius:28px;box-shadow:0 0 90px rgba(8,27,36,.45)}}
@media(max-height:680px){.title-block{padding-top:8px}.title-block h1{font-size:46px}.title-block>span{margin-top:8px}.start-card{padding:12px}.primary-button{min-height:53px}.start-card>p{margin-top:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}