@import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css";:root{--bg0:#070b1e;--bg1:#0d1233;--ink:#eef2ff;--sub:#9aa7d6;--neon:#6b8cff;--pink:#ff5fb4;--gold:#ffd43b;--mint:#63e6be}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg0);color:var(--ink);-webkit-user-select:none;user-select:none;font-family:Pretendard Variable,Pretendard,-apple-system,sans-serif;overflow:hidden}#app{width:100vw;height:100vh}.screen{width:100%;height:100%;display:none}.screen.active{flex-direction:column;display:flex}#screen-home{background:radial-gradient(1200px 700px at 70% -10%, #1a2258 0%, transparent 60%), radial-gradient(900px 600px at 10% 110%, #241a4d 0%, transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1));justify-content:center;align-items:center;position:relative}.stars{pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#cdd8ff 50%,#0000 51%),radial-gradient(1px 1px at 32% 68%,#9db4ff 50%,#0000 51%),radial-gradient(2px 2px at 58% 14%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 74% 44%,#cdd8ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 88% 76%,#9db4ff 50%,#0000 51%),radial-gradient(1px 1px at 44% 88%,#fff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 6% 56%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 94% 8%,#cdd8ff 50%,#0000 51%);animation:4s ease-in-out infinite alternate twinkle;position:absolute;inset:0}@keyframes twinkle{0%{opacity:.5}to{opacity:1}}.home-inner{z-index:1;flex-direction:column;align-items:center;gap:42px;padding:24px;display:flex;position:relative}.logo-wrap{text-align:center;position:relative}.logo-ball{background:radial-gradient(circle at 35% 30%,#fff,#cfe0ff 55%,#7b93d8);border-radius:50%;width:54px;height:54px;margin:0 auto 14px;animation:2.2s cubic-bezier(.35,0,.2,1) infinite bounce;box-shadow:0 0 30px #6b8cffaa,0 0 70px #6b8cff44}@keyframes bounce{0%,to{transform:translateY(0)scale(1)}45%{transform:translateY(-26px)scale(.98,1.02)}55%{transform:translateY(-26px)}95%{transform:translateY(0)scale(1.04,.94)}}.logo{letter-spacing:.06em;background:linear-gradient(105deg, #9db4ff, #fff 40%, var(--pink) 75%, var(--gold));color:#0000;filter:drop-shadow(0 4px 24px #6b8cff55);-webkit-background-clip:text;background-clip:text;font-size:clamp(40px,7vw,72px);font-weight:900;line-height:.95}.logo span{letter-spacing:.5em;margin-left:.25em;font-size:.62em;display:block}.tagline{color:var(--sub);margin-top:14px;font-size:17px;font-weight:500}.mode-cards{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.mode-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:240px;color:var(--ink);cursor:pointer;text-align:center;background:linear-gradient(160deg,#788cff1f,#1e285a40);border:1px solid #8ca5ff40;border-radius:22px;padding:28px 22px;transition:transform .22s,box-shadow .22s,border-color .22s}.mode-card:hover{border-color:#a0b9ffb3;transform:translateY(-6px);box-shadow:0 18px 44px #5a78ff47}.mode-card.locked{opacity:.45;cursor:not-allowed}.mode-card.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}.mode-emoji{margin-bottom:12px;font-size:42px}.mode-name{margin-bottom:10px;font-size:21px;font-weight:800}.mode-desc{color:var(--sub);font-size:13px;line-height:1.6}.time-select{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;padding:8px 12px;transition:opacity .3s;display:flex}.time-select.locked{opacity:.35;pointer-events:none}.time-label{color:var(--sub);font-size:14px;font-weight:600}.time-btns{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.time-btn{color:var(--sub);cursor:pointer;background:0 0;border:1px solid #8ca5ff4d;border-radius:999px;padding:9px 20px;font-size:14px;font-weight:700;transition:all .18s}.time-btn.active{background:var(--neon);border-color:var(--neon);color:#fff;box-shadow:0 0 18px #6b8cff88}.time-extra{display:none}.custom-time{color:var(--sub);align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.custom-time.hidden,.random-hint.hidden{display:none}.custom-time input{width:60px;color:var(--ink);text-align:center;background:#141e4699;border:1px solid #8ca5ff66;border-radius:10px;outline:none;padding:5px 8px;font-family:inherit;font-size:16px;font-weight:800}.custom-time input:focus{border-color:var(--neon);box-shadow:0 0 12px #6b8cff66}.custom-time input::-webkit-outer-spin-button{-webkit-appearance:none}.custom-time input::-webkit-inner-spin-button{-webkit-appearance:none}.random-hint{color:#ffd76b;font-size:13px;font-weight:600;animation:2s ease-in-out infinite hintpulse}#screen-game{background:linear-gradient(180deg, var(--bg0), var(--bg1))}.game-topbar{justify-content:space-between;align-items:center;gap:18px;padding:14px 22px;display:flex}.game-title{letter-spacing:.02em;font-size:18px;font-weight:800}.ghost-btn{color:var(--sub);cursor:pointer;background:0 0;border:1px solid #8ca5ff4d;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:600}.ghost-btn:hover{color:var(--ink);border-color:#a0b9ffb3}.timer-wrap{align-items:center;gap:12px;min-width:200px;display:flex}.timer-num{text-align:right;font-variant-numeric:tabular-nums;min-width:44px;color:var(--gold);text-shadow:0 0 14px #ffd43b66;font-size:26px;font-weight:900}.timer-bar{background:#ffffff1a;border-radius:99px;flex:1;height:8px;overflow:hidden}.timer-fill{background:linear-gradient(90deg, var(--mint), var(--gold));border-radius:99px;width:100%;height:100%;transition:width .1s linear}.timer-fill.danger{background:linear-gradient(90deg,#ff8787,#ff5f5f)}.canvas-wrap{flex:1;justify-content:center;align-items:center;min-height:0;padding:0 12px 12px;display:flex;position:relative}#game-canvas{aspect-ratio:780/940;object-fit:contain;touch-action:none;cursor:grab;border:1px solid #8ca5ff38;border-radius:18px;max-width:100%;height:100%;box-shadow:0 0 60px #5a78ff26,inset 0 0 80px #141e5066}.hint{color:#ffe9a8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;white-space:nowrap;background:#0a1030d9;border:1px solid #ffd43b66;border-radius:999px;padding:12px 24px;font-size:15px;animation:2s ease-in-out infinite hintpulse;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.hint.hidden{display:none}@keyframes hintpulse{0%,to{opacity:.85}50%{opacity:1}}.overlay{z-index:50;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;background:#050816b3;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}.overlay.visible{opacity:1;pointer-events:auto}.result-card{text-align:center;background:radial-gradient(500px 300px at 50% -20%,#788cff59,#0000 70%),linear-gradient(165deg,#171e4b,#100b2e);border:1px solid #a0b9ff59;border-radius:28px;width:min(420px,90vw);padding:48px 36px 36px;transition:transform .35s cubic-bezier(.2,1.4,.4,1);position:relative;transform:translateY(24px)scale(.94);box-shadow:0 30px 90px #0009,0 0 60px #6b8cff40}.overlay.visible .result-card{transform:translateY(0)scale(1)}.card-stamp{border:2px solid var(--pink);color:var(--pink);letter-spacing:.2em;opacity:.9;border-radius:8px;padding:5px 12px;font-size:11px;font-weight:900;position:absolute;top:20px;right:22px;transform:rotate(8deg)}.card-emoji{filter:drop-shadow(0 6px 20px #0006);font-size:72px}.card-region{letter-spacing:-.01em;background:linear-gradient(100deg,#fff,#b9c8ff);color:#0000;-webkit-background-clip:text;background-clip:text;margin-top:10px;font-size:40px;font-weight:900}.card-sub{color:var(--sub);margin-top:4px;font-size:15px;font-weight:700}.card-sub:empty{display:none}.card-desc{color:#c6d0f5;margin-top:16px;font-size:15px;line-height:1.7}.card-actions{flex-direction:column;gap:10px;margin-top:30px;display:flex}.cta{cursor:pointer;color:var(--ink);background:#8ca5ff24;border:1px solid #8ca5ff40;border-radius:14px;padding:14px;font-size:16px;font-weight:800;transition:all .18s}.cta:hover{background:#8ca5ff42}.cta.primary{background:linear-gradient(100deg, var(--neon), #9b6bff);border:none;box-shadow:0 8px 28px #6b8cff66}.cta.primary:hover{filter:brightness(1.12)}.cta.ghost{color:var(--sub);background:0 0;border-color:#0000}.cta.ghost:hover{color:var(--ink)}.cta.share{color:#a8f5dd;background:linear-gradient(100deg,#63e6be2e,#74c0fc2e);border:1px solid #63e6be66}.cta.share:hover{background:linear-gradient(100deg,#63e6be4d,#74c0fc4d)}.toast{z-index:200;color:#d9fff1;opacity:0;pointer-events:none;background:#141e46f2;border:1px solid #63e6be80;border-radius:999px;padding:13px 26px;font-size:15px;font-weight:700;transition:opacity .25s,transform .25s;position:fixed;bottom:36px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 12px 40px #00000080,0 0 24px #63e6be33}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.loading{z-index:99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--sub);background:#050816d9;flex-direction:column;justify-content:center;align-items:center;gap:18px;font-weight:600;display:flex;position:fixed;inset:0}.loading.hidden{display:none}.spinner{border:4px solid #8ca5ff33;border-top-color:var(--neon);border-radius:50%;width:46px;height:46px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}