:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--boardMax: 772px;--boardW: min(var(--boardMax), calc(100vw - 36px) );--r-lg: 18px;--r-md: 16px;--shadow-1: 0 10px 26px rgba(0,0,0,.1);--shadow-2: 0 18px 46px rgba(0,0,0,.18)}.page{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(1200px 700px at 20% -10%,#eef2ff,#eef2ff00 55%),radial-gradient(1000px 600px at 95% 0%,#fff7ed,#fff7ed00 55%),#f6f7fb;min-height:100vh;padding:18px;color:#111;box-sizing:border-box}.topBar,.timerWrap,.rankPanel,.footer{width:var(--boardW);max-width:var(--boardW);margin-left:auto;margin-right:auto}.topBar{margin-top:0;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border-radius:var(--r-lg);background:linear-gradient(120deg,#111111eb,#111c),radial-gradient(900px 320px at 15% 30%,#60a5fa66,#0000 60%),radial-gradient(800px 280px at 80% 10%,#f472b666,#0000 60%);box-shadow:var(--shadow-2);border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden}.topBar:after{content:"";position:absolute;inset:-2px;background:radial-gradient(600px 220px at 20% 0%,#ffffff1f,#fff0 60%),radial-gradient(520px 220px at 90% 40%,#ffffff1a,#fff0 60%);pointer-events:none}.brand{position:relative;z-index:1}.brandTitle{font-weight:950;letter-spacing:-.02em;color:#fff;font-size:clamp(20px,3.6vw,26px);line-height:1.05;text-shadow:0 10px 24px rgba(0,0,0,.35)}.hud{position:relative;z-index:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.pill{min-width:118px;padding:12px 14px;border-radius:16px;background:#ffffff1f;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px #ffffff1f}.pillLabel{font-size:clamp(11px,2.6vw,13px);letter-spacing:.14em;font-weight:950;color:#ffffffc7}.pillValue{margin-top:4px;font-size:clamp(20px,4.2vw,28px);font-weight:950;color:#fff;text-shadow:0 10px 22px rgba(0,0,0,.25)}.btn{border:none;border-radius:16px;padding:12px 14px;font-size:clamp(14px,3.2vw,16px);font-weight:950;cursor:pointer;color:#111;background:#fff;box-shadow:0 10px 24px #0000002e;position:relative;z-index:1}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:active{transform:translateY(1px)}.btnPrimary{background:linear-gradient(135deg,#fff,#f3f4f6)}.btnPrimary:hover{filter:brightness(1.02)}.timerWrap{margin-bottom:14px;background:#fffffff2;border-radius:var(--r-lg);padding:14px;box-shadow:0 10px 26px #00000014;border:1px solid rgba(0,0,0,.06)}.timerBar{height:16px;background:#eef0f6;border-radius:999px;overflow:hidden;position:relative}.timerFill{height:100%;background:linear-gradient(90deg,#60a5fa,#a78bfa,#f472b6);border-radius:999px;transition:width .12s linear}.timerBar.danger .timerFill{background:linear-gradient(90deg,#ef4444,#fb7185)}.timerGloss{position:absolute;inset:0;background:linear-gradient(180deg,#ffffff94,#fff0);opacity:.5;pointer-events:none}.boardWrap{display:flex;justify-content:center}.boardShell{position:relative;overflow:hidden;width:var(--boardW);aspect-ratio:1 / 1;border-radius:var(--r-md);box-shadow:var(--shadow-1);background:#d1d5db}.boardCanvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;background:transparent}.boardCanvas:active{cursor:grabbing}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#ffffffeb;z-index:10;font-weight:950;font-size:clamp(16px,4.4vw,20px)}.comboOverlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-55%);pointer-events:none;z-index:6;font-weight:950;font-size:clamp(54px,12vw,76px);color:#111111e0;text-shadow:0 10px 26px rgba(0,0,0,.18),0 2px 0 rgba(255,255,255,.65);animation:comboPop .52s ease-out forwards}@keyframes comboPop{0%{opacity:0;transform:translate(-50%,-55%) scale(.75);filter:blur(1px)}20%{opacity:1;transform:translate(-50%,-55%) scale(1.05);filter:blur(0px)}to{opacity:0;transform:translate(-50%,-70%) scale(.95)}}.gameOverOverlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#ffffffeb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;gap:12px;padding:16px}.goTitle{font-size:clamp(26px,6.6vw,34px);font-weight:950;letter-spacing:.04em}.goSub{font-size:clamp(15px,4.2vw,18px);opacity:.78;font-weight:800}.goBtn{margin-top:6px}.rankSubmit{display:grid;gap:10px;width:min(360px,88vw);margin:10px auto 0}.rankInput{padding:12px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.14);outline:none;font-weight:900;font-size:clamp(15px,4.2vw,17px)}.goBtn.ghost{background:#ffffff24;border:1px solid rgba(255,255,255,.25)}@keyframes screenShake{0%{transform:translate(0)}15%{transform:translate(-3px,2px)}30%{transform:translate(3px,-2px)}45%{transform:translate(-2px,-3px)}60%{transform:translate(2px,3px)}75%{transform:translate(-1px,2px)}to{transform:translate(0)}}.boardShell.shake{animation:screenShake .24s ease-out}.flash{position:absolute;inset:0;pointer-events:none;z-index:15;background:radial-gradient(circle at 50% 50%,#ffffffd9,#fff0 55%);opacity:0}.flash.on{animation:flashPop .26s ease-out}@keyframes flashPop{0%{opacity:0}25%{opacity:.95}to{opacity:0}}.rankPanel{margin:14px auto 0;padding:16px;background:#ffffffeb;border:1px solid rgba(0,0,0,.07);border-radius:var(--r-lg);box-shadow:0 10px 30px #00000012;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-sizing:border-box}.rankHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.rankTitle{font-weight:950;letter-spacing:-.2px;font-size:clamp(18px,4.8vw,22px)}.rankDate{padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.14);background:#fff;font-size:clamp(14px,3.8vw,16px);font-weight:800}.rankList{display:grid;gap:10px}.rankRow{display:grid;grid-template-columns:56px 1fr 132px;align-items:center;padding:12px;border-radius:14px;background:#0000000a}.rankNo{font-weight:950;text-align:center;font-size:clamp(16px,4.4vw,18px)}.rankNm{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(16px,4.4vw,18px)}.rankSc{font-weight:950;text-align:right;font-size:clamp(16px,4.4vw,19px)}.rankEmpty{padding:12px;color:#0009;font-size:clamp(14px,4vw,16px);font-weight:800}.footer{margin:12px auto 0;text-align:center}.tip{font-size:clamp(13px,3.8vw,15px);opacity:.82;font-weight:800}@media(max-width:480px){.page{padding:10px}:root{--boardW: 100vw}.topBar{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:10px;padding:14px 12px;border-radius:16px}.brand{flex:1 1 100%;display:flex;justify-content:center}.hud{justify-content:center;width:100%;gap:10px}.pill{min-width:140px;padding:12px 14px}.boardShell{width:100vw;height:100vw;max-width:100vw;max-height:100vw;border-radius:0}.rankRow{grid-template-columns:44px 1fr 110px;padding:11px 10px}}@media(max-width:360px){.page{padding:8px}.pill{min-width:128px}.rankRow{grid-template-columns:40px 1fr 96px}}@supports (padding: env(safe-area-inset-left)){@media(max-width:480px){:root{--boardW: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) }.boardShell{width:var(--boardW);height:var(--boardW);margin-left:env(safe-area-inset-left);margin-right:env(safe-area-inset-right)}.topBar,.timerWrap,.rankPanel,.footer{width:var(--boardW);max-width:var(--boardW);margin-left:env(safe-area-inset-left);margin-right:env(safe-area-inset-right)}}}