:root{--grad-start: #fd267d;--grad-mid: #ff5864;--grad-end: #ff7854;--qute: #fd3a84;--cool: #12d3a3;--excellent: #1ea9ff;--fg: #2b2230;--muted: #9a8f97;--card-bg: #eceaee;--line: rgba(30, 20, 30, .08);color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--fg);font-family:Manrope,system-ui,sans-serif;background:radial-gradient(130% 70% at 50% -15%,#ffe4ee,#fff2ec 42%,#fbf6f4) fixed;-webkit-user-select:none;user-select:none;overscroll-behavior:none}.page{position:relative;max-width:460px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 6px;animation:fade-down .5s ease both}.logo{margin:0;font-family:Poppins,sans-serif;font-weight:800;font-size:27px;letter-spacing:-.6px;background:linear-gradient(48deg,var(--grad-start),var(--grad-end));-webkit-background-clip:text;background-clip:text;color:transparent}.logo-extreme{background:linear-gradient(48deg,#ff005d,#ff8a00,#7c4dff);-webkit-background-clip:text;background-clip:text}.nav{display:flex;align-items:center;gap:10px}.nav-link{font-family:Manrope,sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;text-decoration:none;color:var(--grad-start);padding:8px 14px;border-radius:999px;border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(48deg,var(--grad-start),var(--grad-end)) border-box}.btn-extreme{font-family:Poppins,Manrope,sans-serif;font-weight:800;font-size:13px;letter-spacing:.03em;white-space:nowrap;text-decoration:none;color:#fff;padding:8px 15px;border-radius:999px;border:none;background:linear-gradient(90deg,#ff4d8d,#ff6f9c);text-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 4px 12px #fd267d42}.btn-extreme.active{background:linear-gradient(90deg,#ff005d,#ff8a00,#ffe600,#00e676,#00b8ff,#7c4dff,#ff005d);background-size:300% 100%;text-shadow:0 1px 2px rgba(0,0,0,.35);animation:extreme-hue 1.4s linear infinite,extreme-glow .8s ease-in-out infinite}@keyframes extreme-hue{to{background-position:300% 0}}@keyframes extreme-glow{0%,to{box-shadow:0 0 6px #ff3c9699,0 0 14px #00b4ff59;transform:translateY(0) scale(1)}50%{box-shadow:0 0 14px #ff7828e6,0 0 26px #7c4dff99;transform:translateY(-1px) scale(1.05)}}@media(prefers-reduced-motion:reduce){.btn-extreme.active{animation:extreme-hue 6s linear infinite}}body.extreme-mode{background:radial-gradient(130% 70% at 50% -12%,#331539,#1b1024 46%,#0c0712) fixed;color:#f2ecf6}body.extreme-mode .notice{color:#cdbcd8}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 18px 30px}.notice{color:var(--muted);text-align:center;font-weight:600}.deck{position:relative;width:100%;max-width:350px;aspect-ratio:62 / 90;margin:4px auto 0;animation:pop-in .55s cubic-bezier(.2,.8,.2,1) both}.card{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:16px;overflow:hidden;background:var(--card-bg);box-shadow:0 2px 6px #140a1914,0 20px 44px #1e0c1e42;will-change:transform}.card-img{width:100%;height:100%;object-fit:cover;pointer-events:none}.card-caption{position:absolute;inset:auto 0 0 0;padding:40px 18px 18px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.15) 60%,transparent);color:#fff;display:flex;flex-direction:column;gap:3px}.card-caption strong{font-family:Poppins,sans-serif;font-weight:700;font-size:24px;line-height:1.1;text-shadow:0 1px 6px rgba(0,0,0,.35)}.card-caption span{font-size:14px;font-weight:500;opacity:.92}.card-label{position:absolute;top:28px;padding:4px 18px;border:4px solid currentColor;border-radius:12px;font-family:Poppins,sans-serif;font-weight:800;font-size:32px;line-height:1.2;letter-spacing:1px;text-transform:uppercase;background:#ffffff1a;text-shadow:0 1px 10px rgba(0,0,0,.25);pointer-events:none}.label-qute{left:22px;color:var(--qute);transform:rotate(-17deg)}.label-cool{right:22px;color:var(--cool);transform:rotate(17deg)}.label-excellent{left:50%;top:18px;translate:-50% 0;color:var(--excellent);transform:rotate(-4deg)}.rating-buttons{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:26px;animation:fade-up .5s ease .08s both}.rbtn{background:none;border:none;cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px}.rbtn-circle{width:62px;height:62px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px #28142829;transition:transform .13s ease,box-shadow .2s ease}.rbtn svg{width:28px;height:28px;fill:currentColor}.rbtn-qute{color:var(--qute)}.rbtn-cool{color:var(--cool)}.rbtn-excellent{color:var(--excellent)}.rbtn-excellent .rbtn-circle{width:76px;height:76px}.rbtn-excellent svg{width:36px;height:36px}.rbtn:hover .rbtn-circle{transform:translateY(-3px);box-shadow:0 10px 26px #2814283d}.rbtn:active .rbtn-circle{transform:scale(.88)}.rbtn:disabled{opacity:.45;cursor:default}.rbtn-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.end-screen{text-align:center;animation:pop-in .5s ease both}.end-emoji{font-size:58px;margin:0}.end-screen h2{font-family:Poppins,sans-serif;font-weight:800;margin:8px 0 4px}.end-actions{margin-top:22px;display:flex;flex-direction:column;gap:12px;align-items:center}.btn{font-family:Manrope,sans-serif;border:none;border-radius:999px;padding:14px 30px;font-weight:800;font-size:15px;letter-spacing:.02em;cursor:pointer;text-decoration:none;transition:transform .1s ease,filter .2s ease}.btn:active{transform:scale(.95)}.btn-primary{color:#fff;background:linear-gradient(48deg,var(--grad-start),var(--grad-end));box-shadow:0 8px 20px #fd267d59}.btn-outline{color:var(--grad-start);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(48deg,var(--grad-start),var(--grad-end)) border-box;border:2px solid transparent}.load-more{display:block;margin:20px auto 8px}.load-more:disabled{opacity:.6;cursor:default}.tabs{display:flex;gap:8px;padding:8px 18px 0}.tab{flex:1;padding:11px;border:none;background:transparent;border-bottom:3px solid transparent;color:var(--muted);font-family:Poppins,sans-serif;font-weight:700;cursor:pointer}.tab.active{color:var(--grad-start);border-color:var(--grad-start)}.metric-tabs{display:flex;gap:7px;padding:12px 18px 2px}.metric-tab{flex:1;padding:8px 4px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.02em;cursor:pointer;transition:all .15s ease}.metric-tab.active{color:#fff;border-color:transparent}.metric-tab.metric-total.active{background:linear-gradient(48deg,var(--grad-start),var(--grad-end))}.metric-tab.metric-qute.active{background:var(--qute)}.metric-tab.metric-cool.active{background:var(--cool)}.metric-tab.metric-excellent.active{background:var(--excellent)}.ranking-list{list-style:none;padding:0;margin:4px 0 0;width:100%}.ranking-row{display:flex;align-items:center;gap:13px;padding:11px 6px;border-bottom:1px solid var(--line)}.rank{width:26px;text-align:center;font-family:Poppins,sans-serif;font-weight:800;font-size:17px;background:linear-gradient(48deg,var(--grad-start),var(--grad-end));-webkit-background-clip:text;background-clip:text;color:transparent}.rank-thumb{width:50px;height:50px;border-radius:12px;object-fit:cover}.rank-name{flex:1;display:flex;flex-direction:column}.rank-name strong{font-family:Poppins,sans-serif;font-weight:700}.rank-name small{color:var(--muted)}.rank-count{display:flex;flex-direction:column;align-items:flex-end;font-family:Poppins,sans-serif;font-weight:800;font-size:18px}.rank-count small{font-family:Manrope,sans-serif;font-weight:600;font-size:11px;color:var(--muted)}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:60}.confetti span{position:absolute;top:-14px;width:10px;height:15px;border-radius:2px;animation:confetti-fall .95s ease-in forwards}@keyframes confetti-fall{to{transform:translateY(108vh) rotate(560deg);opacity:.15}}.superflash{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50;background:radial-gradient(circle at 50% 62%,rgba(30,169,255,.4),transparent 62%);animation:superflash .9s ease-out forwards}@keyframes superflash{0%{opacity:0}16%{opacity:1}to{opacity:0}}@keyframes fade-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes pop-in{0%{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}