:root{font-family:Inter,ui-rounded,"Segoe UI",sans-serif;background:#0c1021;color:#f8fbff}*{box-sizing:border-box}body{margin:0;min-width:320px}.game-page{position:relative;isolation:isolate;min-height:100dvh;display:grid;place-items:center;overflow:hidden;padding:max(22px,env(safe-area-inset-top)) clamp(16px,5vw,54px) max(22px,env(safe-area-inset-bottom));background:radial-gradient(circle at 7% 12%,#9b68ee88,transparent 27%),radial-gradient(circle at 94% 87%,#2ed7cf66,transparent 31%),linear-gradient(135deg,#10152d,#22295a 55%,#171a39)}.game-page:before,.game-page:after{content:"";position:absolute;z-index:-1;width:44vmax;aspect-ratio:1;border-radius:50%;filter:blur(25px);opacity:.25;animation:drift 15s ease-in-out infinite}.game-page:before{background:#ff7aaa;top:-28vmax;left:-13vmax}.game-page:after{background:#49c7ff;right:-18vmax;bottom:-29vmax;animation-delay:-8s}.game-shell{width:min(100%,510px);padding:clamp(25px,5vw,46px);text-align:center;border:1px solid #ffffff28;border-radius:32px;background:linear-gradient(140deg,#ffffff1c,#ffffff0b);box-shadow:0 30px 85px #00000056,inset 0 1px #ffffff36;backdrop-filter:blur(18px);animation:rise .55s cubic-bezier(.2,.85,.3,1)}.game-logo{display:block;width:clamp(138px,45%,215px);max-height:98px;object-fit:contain;margin:0 auto clamp(18px,4vw,28px);filter:drop-shadow(0 9px 18px #0005);animation:logoIn .65s .08s both}.eyebrow{margin:0 0 8px;color:#bfc7ff;text-transform:uppercase;letter-spacing:.14em;font-size:.69rem;font-weight:800}h1{margin:0;font-size:clamp(1.8rem,7vw,2.65rem);letter-spacing:-.055em;line-height:1.04}.subtitle{margin:12px auto 22px;max-width:32ch;color:#c6cbe2;font-size:.95rem;line-height:1.5}.login-form{text-align:left}label{display:block;margin:0 0 8px;color:#e5e9ff;font-size:.88rem;font-weight:750}.password-wrap{display:flex;border:1px solid #ffffff28;border-radius:16px;background:#07102577;transition:.2s}.password-wrap:focus-within{border-color:#b39bff;box-shadow:0 0 0 4px #987cf52b}.password-wrap input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;padding:15px 0 15px 15px;font:inherit}.password-wrap button{border:0;background:transparent;padding:0 14px;color:#cad0ff;font-weight:800;cursor:pointer}.play-button{width:100%;margin-top:20px;padding:15px;border:0;border-radius:16px;background:linear-gradient(105deg,#9872f6,#5fc7ec);color:white;font:800 1rem inherit;cursor:pointer;box-shadow:0 10px 25px #7455d155;transition:transform .16s,filter .16s}.play-button:hover,.color-tile:hover{transform:translateY(-3px);filter:brightness(1.08)}.play-button:active,.color-tile:active{transform:translateY(2px) scale(.98)}.play-button span{margin-left:8px;font-size:1.25em}.game-message{min-height:22px;margin:13px 0 14px;color:#cbd2f4;font-size:.85rem}.game-message.error{color:#ffbecb}.game-hud{display:grid;grid-template-columns:auto auto 1fr;gap:9px;align-items:center;margin:0 0 14px;padding:10px 13px;border:1px solid #ffffff1d;border-radius:14px;background:#060b1f45;text-align:left;font-size:.75rem;color:#bcc4e8}.game-hud strong{color:#fff;font-size:.9rem}.game-hud i{height:7px;overflow:hidden;border-radius:99px;background:#ffffff22}.game-hud b{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#80e3ff,#b899ff);transition:width .35s ease}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2.6vw,17px)}.color-tile{position:relative;display:grid;place-items:center;aspect-ratio:1;border:1px solid #ffffff3b;border-radius:clamp(18px,4vw,25px);background:linear-gradient(145deg,#ffffff42,transparent 28%),var(--tile);box-shadow:inset 0 1px #ffffff7d,0 9px 0 color-mix(in srgb,var(--tile),#111 36%),0 15px 23px #02061955;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .2s,box-shadow .2s}.color-tile:after{content:"";position:absolute;inset:9% 13% auto;height:25%;border-radius:50%;background:#fff2;filter:blur(5px)}.color-tile span{z-index:1;width:30%;aspect-ratio:1;border:2px solid #fff;opacity:0;border-radius:50%;transition:opacity .2s}.color-tile.is-correct{pointer-events:none;filter:saturate(1.15) brightness(1.14);box-shadow:inset 0 1px #ffffff9d,0 0 0 3px #fff,0 10px 0 color-mix(in srgb,var(--tile),#111 35%),0 0 25px var(--tile)}.color-tile.is-correct span{opacity:1}.color-grid.is-pending .color-tile{pointer-events:none}.game-shell.is-wrong{animation:shake .35s linear}.game-shell.is-complete{box-shadow:0 0 0 2px #ffffff70,0 0 72px #9cf6ff99}.is-loading{opacity:.7}@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}@keyframes logoIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}@keyframes drift{50%{transform:translate(9vmax,6vmax) scale(1.14)}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.color-tile{transition:none}}@media(max-width:360px){.game-shell{padding:23px 18px;border-radius:25px}.color-grid{gap:9px}.color-tile{border-radius:16px}}@media(min-width:800px){.game-shell{max-width:530px}}
.color-tile.is-picked{pointer-events:none;transform:translateY(-5px) scale(.94);filter:saturate(1.08) brightness(1.13);box-shadow:inset 0 1px #ffffffb8,0 0 0 3px #fff,0 0 0 7px #9bdcff55,0 13px 0 color-mix(in srgb,var(--tile),#111 34%),0 0 30px var(--tile)}.color-tile.is-picked span{opacity:1;animation:pickPulse .65s ease-out}.color-tile.is-defrosting{animation:defrost .62s cubic-bezier(.2,.7,.3,1);pointer-events:none}.color-grid:not(.is-pending) .color-tile:not(.is-picked):hover{transform:translateY(-4px) scale(1.025)}@keyframes pickPulse{0%{transform:scale(.25);opacity:0}65%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}@keyframes defrost{0%{transform:translateY(-5px) scale(.94);filter:brightness(1.16);opacity:1}55%{transform:translateY(8px) scale(.82) rotate(2deg);filter:grayscale(.5) brightness(1.65);opacity:.5}100%{transform:translateY(0) scale(1);filter:none;opacity:1}}@media(prefers-reduced-motion:reduce){.color-tile.is-picked,.color-tile.is-defrosting{animation:none!important;transform:none}}