:root{--ice:#eef7ff;--line:rgba(215,235,252,.20);--line-strong:rgba(228,244,255,.48);--shadow:rgba(0,0,0,.72);}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#02060a;font-family:"Segoe UI",Inter,Arial,sans-serif;color:var(--ice)}
button{font:inherit}
#app{position:relative;width:100vw;height:100vh;overflow:hidden;background:#02060a;user-select:none}
.art-stage,.global-art,.specter-layer,.water-layer,.water-swell,.art-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.art-stage{z-index:1;overflow:hidden;animation:slowDrift 18s ease-in-out infinite alternate;transform-origin:50% 50%}
.global-art{object-fit:cover;object-position:center}
.specter-layer{position:absolute;inset:0;z-index:3;object-fit:cover;object-position:center;will-change:transform,opacity,filter;transform-origin:66.7% 21%;animation:specterFloat 8.6s ease-in-out infinite,specterGlow 6.4s ease-in-out infinite;pointer-events:none}
.water-layer{z-index:4;object-fit:cover;object-position:center;mix-blend-mode:screen;will-change:transform,opacity,filter}
.water-a{animation:waterA 8.8s ease-in-out infinite;opacity:.72}
.water-b{animation:waterB 11.2s ease-in-out infinite;opacity:.46;filter:blur(.25px) brightness(1.12)}
.water-c{animation:waterC 6.9s ease-in-out infinite;opacity:.24;filter:brightness(1.25)}
.water-swell{z-index:3;top:auto;height:47%;background:repeating-radial-gradient(ellipse at 52% 135%,rgba(201,229,249,.055) 0 2%,rgba(201,229,249,0) 3.5% 7%);mix-blend-mode:screen;opacity:.44;animation:swell 9.5s ease-in-out infinite}
.art-overlay{z-index:5;background:linear-gradient(to bottom,rgba(0,0,0,.03) 0%,rgba(0,0,0,.10) 52%,rgba(0,0,0,.36) 100%),radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.24) 100%)}
@keyframes slowDrift{0%{transform:scale(1.018) translate3d(-.28%,-.16%,0)}100%{transform:scale(1.023) translate3d(.28%,.04%,0)}}
@keyframes specterFloat{0%,100%{transform:translate3d(2px,5px,0) scale(1.000)}25%{transform:translate3d(-4px,-2px,0) scale(1.006)}50%{transform:translate3d(3px,-11px,0) scale(1.015)}75%{transform:translate3d(-2px,-4px,0) scale(1.008)}}
@keyframes specterGlow{0%,100%{opacity:.80;filter:brightness(1.00) drop-shadow(0 0 6px rgba(220,242,255,.08))}50%{opacity:.98;filter:brightness(1.11) drop-shadow(0 0 18px rgba(220,242,255,.20))}}
@keyframes waterA{0%,100%{transform:translate3d(-11px,2px,0) scaleY(.995);opacity:.54}50%{transform:translate3d(13px,-3px,0) scaleY(1.012);opacity:.82}}
@keyframes waterB{0%,100%{transform:translate3d(16px,-2px,0) scaleX(1.006);opacity:.32}50%{transform:translate3d(-14px,3px,0) scaleX(.997);opacity:.56}}
@keyframes waterC{0%,100%{transform:translate3d(-4px,0,0) scaleY(1);opacity:.16}50%{transform:translate3d(5px,-2px,0) scaleY(1.018);opacity:.32}}
@keyframes swell{0%,100%{transform:translateY(3px) scaleY(.97);opacity:.34}50%{transform:translateY(-5px) scaleY(1.04);opacity:.52}}
.screen{position:absolute;inset:0;z-index:10;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 360ms ease,visibility 0s linear 360ms}
.screen.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 360ms ease}
#titleScreen{cursor:pointer;outline:none}
.title-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.01),rgba(0,0,0,.18))}
.start-wrap{position:absolute;left:50%;bottom:clamp(26px,4.4vh,56px);transform:translateX(-50%);text-align:center;width:min(92vw,620px);filter:drop-shadow(0 5px 20px rgba(0,0,0,.95))}
.start-prompt{display:inline-block;padding:12px 30px 11px;text-transform:uppercase;letter-spacing:.38em;text-indent:.38em;font-size:clamp(14px,1.24vw,20px);font-weight:500;border-top:1px solid rgba(233,245,255,.34);border-bottom:1px solid rgba(233,245,255,.22);background:linear-gradient(90deg,transparent,rgba(5,15,23,.42) 18%,rgba(5,15,23,.42) 82%,transparent);animation:breathe 2.25s ease-in-out infinite}
.start-sub{margin-top:10px;font-size:clamp(10px,.72vw,12px);color:rgba(230,240,248,.64);letter-spacing:.13em;text-transform:uppercase}
@keyframes breathe{0%,100%{opacity:.58;text-shadow:0 0 10px rgba(220,240,255,.18)}50%{opacity:1;text-shadow:0 0 20px rgba(220,240,255,.56)}}
#modeScreen .mode-dimmer,#placeholderScreen .mode-dimmer{position:absolute;inset:0;background:rgba(1,7,12,.40);backdrop-filter:blur(1.5px)}
.mode-shell{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2vw,26px) clamp(28px,3vw,42px) clamp(44px,6vh,64px)}
.mode-header{text-align:center;margin:0 0 clamp(18px,2vh,26px)}
.mode-header h2{margin:0;font-weight:400;text-transform:uppercase;letter-spacing:.26em;text-indent:.26em;font-size:clamp(18px,2vw,34px);text-shadow:0 0 18px rgba(223,241,255,.15)}
.mode-header .rule{width:min(460px,50vw);height:2px;margin:10px auto 0;opacity:.7;background:linear-gradient(90deg,transparent,rgba(222,241,255,.65) 25%,rgba(222,241,255,.65) 75%,transparent)}
.cards-row{width:100%;display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,1.3vw,28px);min-height:min(62vh,760px);position:relative;transform:translateY(-16px)}
.mode-card{position:relative;border:none;background:transparent;padding:0;margin:0;width:min(31.5vw,470px);min-width:250px;cursor:pointer;color:inherit;filter:drop-shadow(0 14px 34px rgba(0,0,0,.58));transform:none;opacity:1;transition:transform 180ms ease,filter 180ms ease}
.mode-card img{display:block;width:100%;height:auto}
.mode-card.active{filter:drop-shadow(0 0 24px rgba(183,226,255,.24)) drop-shadow(0 18px 34px rgba(0,0,0,.64))}
.mode-card.active::after{content:'';position:absolute;inset:1.4%;border-radius:18px;box-shadow:0 0 0 2px rgba(188,228,255,.68),0 0 28px rgba(160,215,255,.34),inset 0 0 0 1px rgba(255,255,255,.12);pointer-events:none}
.mode-card:not(.locked):hover,.mode-card:not(.locked):focus-visible{transform:translateY(-4px) scale(1.015);outline:none}
.mode-card.locked{cursor:default;opacity:.92}
.mode-card.locked::before{content:'COMING SOON';position:absolute;top:18px;right:-34px;padding:7px 42px;font-size:12px;letter-spacing:.13em;color:#f6fbff;background:linear-gradient(180deg,rgba(82,87,94,.96),rgba(47,52,58,.98));border:1px solid rgba(255,255,255,.18);transform:rotate(39deg);text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
.footer-bar{position:absolute;left:28px;right:28px;bottom:16px;display:flex;justify-content:space-between;align-items:center}
.mini-btn{border:1px solid rgba(220,238,252,.18);background:rgba(4,11,17,.54);color:rgba(236,245,252,.92);padding:10px 16px;min-width:108px;text-transform:uppercase;letter-spacing:.18em;font-size:12px;cursor:pointer}
.footer-center{color:rgba(225,236,246,.62);font-size:clamp(10px,.85vw,14px);letter-spacing:.26em;text-transform:uppercase;text-align:center}
.placeholder-shell{position:absolute;inset:0;display:grid;place-items:center;padding:4vw}
.placeholder-panel{width:min(760px,92vw);border:1px solid var(--line);background:linear-gradient(180deg,rgba(8,18,27,.84),rgba(2,7,12,.90));box-shadow:0 26px 90px var(--shadow);backdrop-filter:blur(8px);padding:clamp(28px,4vw,54px);text-align:center}
.placeholder-kicker{margin:0 0 8px;color:rgba(212,232,248,.55);font-size:11px;letter-spacing:.42em;text-transform:uppercase}
.placeholder-title{margin:0 0 20px;font-size:clamp(28px,3vw,44px);letter-spacing:.18em;font-weight:300;text-transform:uppercase}
.placeholder-text{margin:0 auto;max-width:40ch;font-size:clamp(15px,1.18vw,20px);line-height:1.65;color:rgba(226,239,249,.82)}
.placeholder-actions{margin-top:28px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.primary-btn{border:1px solid var(--line-strong);background:rgba(8,18,28,.72);color:var(--ice);padding:13px 20px;min-width:182px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
@media(max-width:920px){.mode-shell{justify-content:center;padding-top:18px}.cards-row{min-height:auto;flex-direction:column;align-items:center;gap:14px;padding-bottom:54px;transform:translateY(-6px)}.mode-card{width:min(72vw,420px);min-width:250px}.footer-center{display:none}}