/* GENERATED by bin/build.php from public/assets/css/*.css: edit the parts, not this file. */
/* === Design tokens: colours for light/dark, spacing variables, the fixed-bottom heights (--bars). === */
:root{--link:#0f4fc4;--bg:#f4f6f9;--fg:#1c2430;--card:#fff;--muted:#6b7686;--accent:#2c6bed;--hot:#ff5a36;--land:#e3e8ef;--line:#b9c2cf}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--link:#8fb8ff;--bg:#10151c;--fg:#e8edf3;--card:#1a212b;--muted:#8d99a9;--accent:#6b9bff;--land:#222b37;--line:#3a4655}}
:root[data-theme=dark]{--link:#8fb8ff;--bg:#10151c;--fg:#e8edf3;--card:#1a212b;--muted:#8d99a9;--accent:#6b9bff;--land:#222b37;--line:#3a4655}
:root:not([data-theme=dark]) .up{color:#1b7a46}
:root:not([data-theme=dark]) .down{color:#c62d33}
:root[data-theme=light]{--muted:#5f6b7c}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .up{color:#2fb66a}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .down{color:#e5484d}}
/* bottom tab bar (small screens) and the status line above it; --bars = the height of everything fixed at the bottom */
:root{--tab-h:0px;--bars:34px}
@media(max-width:720px){:root{--tab-h:calc(56px + env(safe-area-inset-bottom,0px));--bars:var(--tab-h)}}
/* stacking order of everything that floats (low to high): sticky/fixed bars, tab bar, panels and pickers, confetti, the rank party, dialogs, toast, skip link */
:root{--z-bar:20;--z-tabbar:25;--z-panel:60;--z-confetti:70;--z-party:72;--z-dialog:80;--z-toast:90;--z-skip:100}
/* === Base elements, text, panels, buttons and chips shared by every page. === */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{word-break:keep-all;overflow-wrap:break-word}   /* Korean wraps between words, never inside one: a president's name is never split */
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,"Noto Sans KR",sans-serif}
h1{font-size:1.3rem;margin:0}
main{max-width:1100px;margin:0 auto;padding:16px 16px calc(var(--bars) + 30px)}
/* settings / prose */
.muted{color:var(--muted)}
.ghost{margin-top:12px;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.prose{max-width:680px;line-height:1.7}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:visited{color:var(--link)}
.prose a:hover{text-decoration-thickness:2px}
/* panels, window picker, charts, tables */
h1{margin:0 0 12px;font-size:1.4rem}
.panel{background:var(--card);border-radius:12px;padding:14px;margin:14px 0;box-shadow:0 1px 3px #0002}
.panel-head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-bottom:8px}
.panel h2{font-size:1.05rem;margin:0}
.panel h2 small{font-weight:400;font-size:.8rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--fg);padding:6px 12px;cursor:pointer;font-size:.88rem}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent);color:#fff}
.chip{display:inline-flex;gap:8px;align-items:center;background:var(--land);padding:4px 10px;border-radius:14px;font-size:.85rem;margin:4px 0}
.chip .ghost{margin:0;padding:2px 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.prose h2{margin-top:1.6em}
.prose ol,.prose ul{padding-left:1.3em}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
/* home: 7 cards per row (two rows for 14 presidents) on desktop */
main.wide{max-width:1280px}
/* a11y */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.panel{min-width:0}
@media(max-width:700px){.panel table,.prose table{display:block;overflow-x:auto}}
/* picker sheet */
body.cheer-lock{overflow:hidden}
/* large text / narrow phones: nothing may be clipped or split inside a Korean word */
main{word-break:keep-all;overflow-wrap:break-word}
.seg{max-width:100%;overflow-x:auto}
.seg button,.subtabs a,.subtabs button{white-space:nowrap}
@media(max-width:420px){.seg button{padding:6px 8px}}
main:focus{outline:none}
.shrbanner{margin:8px 0 12px;padding:10px 14px;border-radius:12px;background:var(--card);background:color-mix(in srgb,var(--accent) 14%,var(--card));border:1px solid var(--accent);font-size:.95rem}
.shrbanner a{color:var(--link);margin-left:4px}
.small{font-size:.8rem}
.shrbanner .shr-vote{margin-left:8px;font:inherit;font-weight:800;min-height:40px;padding:6px 16px;border-radius:999px;border:0;background:var(--hot);color:#000;cursor:pointer}
.shrbanner.warnnote{background:var(--card);border-color:var(--line);color:var(--muted)}
.shrbanner.warnnote{background:var(--card)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.btn-hot{display:inline-block;margin:6px 0;padding:11px 22px;border:0;border-radius:999px;background:var(--hot);color:#fff;font:inherit;font-weight:800;cursor:pointer;min-height:44px}
.btn-hot:hover{filter:brightness(1.08)}
.btn-hot:disabled{opacity:.6;cursor:default}
.chipbtn{font:inherit;font-size:.88rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;min-height:36px}
.chipbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* === Top navigation, bottom tab bar and the status line; the fixed bars at the edges. === */
/* top nav */
#topnav{position:sticky;top:0;z-index:var(--z-bar);display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--card);border-bottom:1px solid var(--line)}
#topnav .brand{font-weight:700;color:var(--fg);text-decoration:none;white-space:nowrap}
#topnav .links{display:flex;gap:4px;flex:1;overflow-x:auto}
#topnav .links a,#topnav .right a{color:var(--fg);text-decoration:none;padding:10px 12px;border-radius:14px;font-size:.9rem;white-space:nowrap}
#topnav .links a:hover,#topnav .right a:hover{background:var(--land)}
#topnav a.on{background:var(--accent);color:#fff}
#topnav .right{display:flex;align-items:center;gap:4px}
#topnav .right .login{border:1px solid var(--line)}
#topnav form.inl{display:inline;margin:0}
#topnav .right button{font:inherit;color:var(--fg);background:none;border:0;cursor:pointer;padding:4px 10px;border-radius:14px;font-size:.9rem;white-space:nowrap}
#topnav .right button:hover{background:var(--land)}
#topnav .right button.login{border:1px solid var(--line)}
#topnav .who{font-size:.85rem;color:var(--muted)}
@media(max-width:600px){#topnav .right .login{padding:3px 6px;font-size:.8rem}}
@media(max-width:600px){#topnav .brand{font-size:.9rem}}
/* status bar */
#statusbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:flex;gap:16px;align-items:center;padding:5px 16px;font-size:.78rem;color:var(--muted);background:var(--card);border-top:1px solid var(--line);overflow:hidden;white-space:nowrap}
#statusbar b{color:var(--fg)}
#statusbar .clock{margin-left:auto}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--muted)}
.dot.ok{background:#2fb66a;animation:pulse 2s infinite}
.dot.bad{background:#e5484d}
.dot.idle{background:#e5a50a}
@media(max-width:520px){#statusbar .sb:nth-child(2){display:none}}
@media(max-width:700px){#statusbar .rk,#statusbar .sb:nth-child(3){display:none}}
@media(max-width:700px){#statusbar{gap:10px}}
.legalnav{margin:32px 0 0;font-size:.82rem;color:var(--muted);text-align:center}
.legalnav a{color:var(--muted)}
html{scroll-padding-bottom:calc(var(--bars) + 14px)}
.legalnav a{display:inline-block;padding:10px 6px}
@media(max-width:400px){#topnav .right .inl{display:none}}
@media(max-width:520px){#topnav{gap:6px;padding:6px 10px}}
@media(max-width:520px){#topnav .links a,#topnav .right a{padding:10px 8px}}
@media(max-width:520px){#topnav .brand{font-size:.85rem}}
#topnav .brand{display:inline-flex;align-items:center;gap:8px}
#topnav .brand img{border-radius:6px}
#topnav .links a.new::after{content:"N";display:inline-block;margin-left:5px;min-width:15px;height:15px;line-height:15px;text-align:center;border-radius:8px;background:var(--hot);color:#000;font-size:.65rem;font-weight:700;vertical-align:middle}
#topnav.wrap{flex-wrap:wrap;row-gap:2px}
#topnav.wrap .links{order:3;flex:1 0 100%}
/* set by core.js when the links do not fit in one row (big text) */
@media(max-width:700px){#statusbar{flex-wrap:wrap;row-gap:0;white-space:normal}}
@media(max-width:700px){#statusbar .clock{display:none}}
#topnav.wrap .links{flex-wrap:wrap;overflow-x:visible}
/* accessibility: skip link, one visible focus ring everywhere, forced-colors borders, comfortable tap targets */
.skip{position:absolute;left:8px;top:-60px;z-index:var(--z-skip);background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.skip:focus{top:8px}
.sb-rules{color:var(--muted);text-decoration:underline}
.sb-rules:hover{color:var(--fg)}
@media(max-width:480px){#topnav .brand{font-size:0}}
@media(max-width:480px){#topnav .brand img{width:28px;height:28px}}
/* review fixes: phone status bar stays one line; the screen-reader announcer switch is hidden until focused; fallback backgrounds for color-mix */
@media(max-width:480px){.sb-rules{display:none}}
#tabbar{display:none}
@media(max-width:720px){#topnav .links{display:none}}
@media(max-width:720px){#topnav{padding:6px 12px}}
@media(max-width:720px){#topnav .brand{font-size:.95rem}}
@media(max-width:720px){#statusbar{bottom:var(--tab-h);padding:3px 12px;gap:10px;font-size:.74rem;flex-wrap:nowrap;height:24px;box-sizing:border-box}}
@media(max-width:720px){#statusbar .sb:nth-child(2),#statusbar .sb:nth-child(3),#statusbar .sb-rules,#statusbar .rk,#statusbar .clock{display:none}}
@media(max-width:720px){#statusbar .sb{white-space:nowrap;flex-shrink:0}}
@media(max-width:720px){#statusbar #sb-me{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}}
@media(max-width:720px){#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);display:grid;grid-template-columns:repeat(5,1fr);height:var(--tab-h);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--card);border-top:1px solid var(--line)}}
@media(max-width:720px){#tabbar .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;color:var(--muted);text-decoration:none;font-size:.7rem;font-weight:600;-webkit-tap-highlight-color:transparent;cursor:pointer;list-style:none}}
@media(max-width:720px){#tabbar .tab span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:720px){#tabbar .tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}}
@media(max-width:720px){#tabbar .tab.on{color:var(--accent)}}
@media(max-width:720px){#tabbar .tab.on svg{stroke-width:2.2}}
@media(max-width:720px){#tabbar .tab:focus-visible,#tabbar summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:10px}}
@media(max-width:720px){#tabbar a.new span::after{content:"";display:inline-block;width:7px;height:7px;margin-left:3px;border-radius:50%;background:var(--hot);vertical-align:super}}
@media(max-width:720px){#tabbar details.more{display:block;padding:0}}
@media(max-width:720px){#tabbar details.more summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:100%;min-height:56px;list-style:none;cursor:pointer}}
@media(max-width:720px){#tabbar details.more summary::-webkit-details-marker{display:none}}
@media(max-width:720px){#tabbar .sheet{position:fixed;right:8px;bottom:calc(var(--bars) + 6px);min-width:210px;max-width:calc(100vw - 16px);display:grid;padding:6px;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4)}}
@media(max-width:720px){#tabbar .sheet a{display:block;padding:12px 14px;color:var(--fg);text-decoration:none;font-size:.95rem;border-radius:10px}}
@media(max-width:720px){#tabbar .sheet a:hover,#tabbar .sheet a:focus-visible{background:var(--land)}}
@media(max-width:720px){#tabbar .sheet a[aria-current=page]{font-weight:700;color:var(--accent)}}
@media(max-width:720px){.legalnav{padding-bottom:6px}}
.opline{margin:6px 0 0;font-size:.78rem;color:var(--muted);text-align:center}
.opline a{color:var(--muted)}
.opline{word-break:keep-all}.opline .ol-a,.opline .ol-b{display:block;text-wrap:balance}.opline .ol-b span{white-space:nowrap}   /* the sentence and the operator/contact line break only between their parts, never inside a name or an address */
/* phone layout (balance): the top bar carries brand, the live total and the utilities (pushed to the right edge); the status line is gone (the bottom keeps only the tab bar) */
#topnav .right{margin-left:auto}
#topnav .tb-live{display:none}
@media(max-width:720px){#topnav .tb-live{display:inline-flex;align-items:center;gap:0;padding:6px 10px;border-radius:999px;background:var(--land);color:var(--fg);text-decoration:none;font-size:.82rem;white-space:nowrap}}
@media(max-width:720px){#topnav .tb-live .dot{margin-right:6px}}
@media(max-width:720px){#topnav .tb-live b{font-variant-numeric:tabular-nums}}
@media(max-width:720px){#statusbar{display:none}}
@media(max-width:720px){#tabbar .sheet .sep{height:1px;margin:6px 8px;background:var(--line)}}
@media(max-width:720px){#tabbar .sheet a.legal{padding:8px 14px;font-size:.84rem;color:var(--muted)}}
.allowline{display:none}
@media(max-width:720px){.allowline{display:block;margin:0 0 8px;font-size:.8rem;color:var(--muted)}.allowline[hidden]{display:none}}
/* === Home page: cards, ranking pill and aura, ticker, cheer carousel, the 내 최애 소식 block. === */
.total{color:var(--muted);margin:0 0 8px}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.sect-head .total{margin:0}
.sect-title{font-size:1.2rem;margin:0}
.sect-title small{font-size:.8rem;font-weight:400;color:var(--muted);margin-left:6px}
#cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;position:relative}
.card{border-top:4px solid var(--pc-ink,var(--pc,transparent));background:var(--card);border-radius:12px;padding:10px;text-align:center;position:relative;box-shadow:0 1px 3px #0002;transition:transform .45s}
/* every card gets a thin outline in its own president colour; the sitting president is marked by the 현직 label only */
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;background:#ccd}
.card h2,.card h3{font-size:1rem;margin:8px 0 0}
.card h2 small,.card h3 small{font-size:.7rem;color:var(--accent)}
.stats{margin:6px 0}
.rank{position:absolute;z-index:1;top:14px;left:14px;background:var(--pc-ink,var(--pc,#000a));color:var(--pc-fg,#fff);border-radius:10px;padding:2px 8px;font-weight:700;font-size:.85rem;box-shadow:0 0 0 1px #8888,0 0 0 3px #fff6}
.card.bump .cnt{animation:bump .4s}
#live{margin-top:24px;text-align:center}
#live h3,#live h2{margin:0 0 8px;font-size:1.1rem}
#map{width:100%;max-width:520px;max-height:80vh;background:transparent}
#map .land{fill:var(--land);stroke:var(--line);stroke-width:1;stroke-linejoin:round;transition:fill .6s}
#map .land.lit{fill:color-mix(in srgb,var(--pc,var(--hot)) 55%,var(--land));transition:none}
#map .ripple{fill:none;stroke:var(--pc,var(--hot));stroke-width:2;animation:ripple 1.6s ease-out forwards}
/* the live map: every vote leaves a light in the candidate's colour (twinkling when it is lively), its province glows, and a label with a backing pill is placed where it covers no other label */
#map .halo{fill:var(--pc,var(--hot));opacity:.25}
#map .core{fill:var(--pc,var(--hot));stroke:#fff;stroke-width:.8;stroke-opacity:.85;vector-effect:non-scaling-stroke}
#map .bulb.tw{animation:twinkle var(--tw,1.2s) ease-in-out var(--td,0s) infinite alternate}
#map .bulb.tw .halo{animation:halobeat var(--tw,1.2s) ease-in-out var(--td,0s) infinite alternate}
#map.tree .bulb.tw .halo{animation-duration:calc(var(--tw,1.2s) * .7)}
#map .bulb.off{animation:bulboff .7s ease-out forwards}
#map .bulb.off .halo{animation:none}
#map .land.glow{fill:color-mix(in srgb,var(--pc,var(--hot)) 40%,var(--land));animation:landglow 1.3s ease-in-out infinite alternate;transition:none}
#map .tipg{animation:tipin .25s ease-out,tipout .5s ease-in calc(var(--tl,4200ms) - 500ms) forwards}
#map .tipbg{fill:var(--card);fill-opacity:.9;stroke:var(--pc,var(--line));stroke-width:1;vector-effect:non-scaling-stroke}
#map .tipln{stroke:var(--pc,var(--muted));stroke-width:1;stroke-opacity:.7;vector-effect:non-scaling-stroke}
#map .tip{fill:var(--fg);pointer-events:none}
@keyframes twinkle{from{opacity:.5}to{opacity:1}}
@keyframes halobeat{from{opacity:.1}to{opacity:.5}}
@keyframes bulboff{to{opacity:0}}
@keyframes landglow{from{fill:color-mix(in srgb,var(--pc,var(--hot)) 26%,var(--land))}to{fill:color-mix(in srgb,var(--pc,var(--hot)) 62%,var(--land))}}
@keyframes tipin{from{opacity:0}}
@keyframes tipout{to{opacity:0}}
/* home card extras */
.cardlink{color:inherit;text-decoration:none;display:block}
.cardlink:hover h2,.cardlink:hover h3{color:var(--pc-ink,var(--accent))}
.card .cnt{color:var(--pc-text,var(--pc-ink,inherit))}
.card .dr{font-size:.78rem;margin-left:4px}
.card .trend{height:26px;margin:2px 0}
.card .today{font-size:.75rem;margin-bottom:6px}
.card .like{min-height:44px}
/* map zoom */
#map{touch-action:pan-y;cursor:default}
#map.zoomed{cursor:grab}
#map.zoomed:active{cursor:grabbing}
#map .land{vector-effect:non-scaling-stroke}
#map .ripple{vector-effect:non-scaling-stroke}
#map .plabel{fill:var(--muted);pointer-events:none;paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round}
@media(min-width:1100px){#cards{grid-template-columns:repeat(7,minmax(0,1fr))}}
.card.pending .cnt{opacity:.6}
/* home carousel */
.cheers{margin:0 0 16px;padding:10px 12px;background:var(--card);border-radius:12px;box-shadow:0 1px 3px #0002}
.cheers-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cheers-head h2{font-size:1rem;margin:0}
.cheers-nav{margin-left:auto;display:flex;gap:4px}
.cheers-nav button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:none;color:var(--fg);font-size:1.1rem;cursor:pointer}
.cheers-nav button:hover{background:var(--land)}
.cheers-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 6px}
.cheers-track::-webkit-scrollbar{display:none}
.chcard{flex:0 0 min(300px,82%);scroll-snap-align:start;border:1px solid var(--line);border-left:5px solid var(--pc,var(--line));border-radius:10px;padding:10px 12px;background:var(--bg);animation:chin .5s ease both}
.chcard.tier-rare{box-shadow:0 0 0 1px var(--tc)}
.chcard.tier-epic{box-shadow:0 0 12px color-mix(in srgb,var(--tc) 55%,transparent),0 0 0 1px var(--tc)}
.chcard.tier-legendary{background:linear-gradient(120deg,color-mix(in srgb,var(--tc) 18%,var(--bg)),var(--bg) 60%);box-shadow:0 0 16px color-mix(in srgb,var(--tc) 60%,transparent),0 0 0 1px var(--tc)}
.chcard.empty{flex-basis:100%;border-left-color:var(--line);text-align:center}
.chrow{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-bottom:1px solid var(--line);border-left:4px solid var(--tc,var(--line))}
.card.champ{animation:champ 1s ease-in-out 3;position:relative;z-index:1}
#map .bulb.replay .core{stroke-dasharray:2 1.5}
.card{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--pc-ink,var(--line)) 80%,transparent),0 1px 3px #0002}
/* ranking: heading above the cards, "N위" pill, gold/silver/bronze badge and aura for the top three (ties share the look) */
.rank-head{margin:16px 0 8px}
.rank-head .sect-title small{font-size:.8rem;font-weight:400;color:var(--muted);margin-left:6px}
.rank{font-size:.95rem;white-space:nowrap}
.rank .r{font-size:1.05rem}
.card[data-rank="1"] .rank::before{content:"👑 "}
.card[data-rank="2"] .rank::before{content:"🥈 "}
.card[data-rank="3"] .rank::before{content:"🥉 "}
.card[data-rank="1"] .rank{background:linear-gradient(135deg,#ffe98a,#f2b100);color:#3a2a00;box-shadow:0 0 0 1px #b88700,0 0 10px 2px rgba(255,196,0,.7)}
.card[data-rank="2"] .rank{background:linear-gradient(135deg,#f1f5f9,#b3bec9);color:#1d2630;box-shadow:0 0 0 1px #8a96a3,0 0 8px 1px rgba(190,205,220,.6)}
.card[data-rank="3"] .rank{background:linear-gradient(135deg,#f0b27a,#b5651d);color:#2b1503;box-shadow:0 0 0 1px #8a4b12,0 0 8px 1px rgba(205,127,50,.55)}
.card[data-rank="1"]{box-shadow:0 0 0 2px #f2b100,0 0 22px 4px rgba(255,196,0,.45)}
.card[data-rank="1"]:not(.champ){animation:aura1 2.8s ease-in-out infinite}
.card[data-rank="2"]{box-shadow:0 0 0 2px #b3bec9,0 0 14px 2px rgba(190,205,220,.4)}
.card[data-rank="3"]{box-shadow:0 0 0 2px #cd7f32,0 0 14px 2px rgba(205,127,50,.4)}
/* the card's "24시간 +N표" line shares the class name "today" with the 오늘의 투표 block: keep it plain */
.card .today{background:none;border:0;border-radius:0;box-shadow:none;padding:0;--yes:initial;--no:initial}
.explain{margin:2px 0 6px;font-size:.88rem;color:var(--muted)}
.explain a{color:var(--link)}
.explain .limit-note{display:inline-block;margin:0 2px;padding:1px 10px;border-radius:999px;border:1px solid var(--hot);background:var(--card);background:color-mix(in srgb,var(--hot) 15%,var(--card));color:var(--fg);font-weight:700;white-space:nowrap}
.stats-note{margin:0 0 10px;font-size:.8rem;color:var(--muted)}
.stats-note a{color:var(--link)}
/* 내 기록 */
.mychip{margin:0 0 6px;font-size:.88rem}
.mychip a{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--card);background:color-mix(in srgb,var(--hot) 16%,var(--card));border:1px solid var(--hot);color:var(--fg);text-decoration:none;font-weight:700}
.card.friendpick{outline:4px solid var(--hot);outline-offset:3px}
.fpbadge{position:absolute;top:-12px;right:10px;z-index:2;background:var(--hot);color:#000;font-weight:800;font-size:.78rem;padding:3px 10px;border-radius:999px;box-shadow:0 2px 8px #0006}
.mychip[hidden]{display:none}
.favnews{margin:10px 0;padding:10px 14px;border:1px solid var(--line);border-left:5px solid var(--pc,#888);border-radius:12px;background:var(--card)}
.favnews h2{font-size:1rem;margin:0 0 4px}
.favnews h2 small{font-weight:400;color:var(--muted);margin-left:6px}
.favnews h2 a{color:var(--fg)}
.favnews ul{margin:0;padding-left:18px;font-size:.9rem}
.favnews li{margin:2px 0}
/* (.prose ul would indent them and push the grid off-centre) */
/* welcome back */
.welcome{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;padding:10px 40px 10px 14px;position:relative;border-radius:14px;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card));animation:wfade .5s ease-out both}
.welcome[hidden]{display:none}
.welcome .wt{font-size:.92rem}
.welcome .wgo{font-weight:800;font-size:.9rem;color:var(--link);text-decoration:none;white-space:nowrap}
.welcome .wx{position:absolute;top:4px;right:4px;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:1.3rem;cursor:pointer}
.welcome .wx:hover{background:var(--land)}
/* heartbeat line on each card: a dim trend with a bright comet (fading tail) sweeping left to right, then a rest, like a monitor */
.spark.pulse .sp-base{opacity:.8}
.spark.pulse .sp-sweep{animation:spsweep var(--sp-t,4s) linear infinite;animation-delay:calc(var(--sp-d,0s) * -1)}
.spark.pulse.sp-off .sp-sweep{animation-play-state:paused}
@keyframes spsweep{0%{transform:translateX(0)}68%,100%{transform:translateX(180px)}}
/* my latest votes: an aura and a speech bubble with MY message on the card of the president I voted for, a glowing frame in the live message feed, a star on the map.
   The glow is strongest for the first 15 minutes (.fresh), then a quiet outline until the record expires. */
.phwrap{display:block;position:relative}
.card.mine{--mc:var(--pc-ink,var(--pc,var(--hot)));box-shadow:0 0 0 2px var(--mc),0 0 12px color-mix(in srgb,var(--mc) 45%,transparent)}
.card.mine.fresh{animation:mineaura 2.2s ease-in-out infinite}
.mine-bubble{position:absolute;left:5px;right:5px;bottom:5px;padding:5px 8px 6px;border-radius:10px;text-align:left;font-size:.74rem;line-height:1.3;color:var(--fg);background:var(--card);background:color-mix(in srgb,var(--card) 92%,transparent);box-shadow:0 0 0 1.5px var(--mc),0 2px 10px #0006;pointer-events:none;overflow:hidden}
.mine-bubble::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--mc) 32%,transparent) 50%,transparent 65%);transform:translateX(-120%)}
.card.mine.fresh .mine-bubble::after{animation:mineshine 3.2s ease-in-out infinite}
.mb-tag{display:block;font-size:.66rem;font-weight:800;color:var(--pc-text,var(--mc));margin-bottom:1px}
.mb-t{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.mine-bubble.tier-epic{--tc:#b06bff;box-shadow:0 0 0 1.5px var(--tc),0 0 14px color-mix(in srgb,var(--tc) 60%,transparent)}
.mine-bubble.tier-legendary{--tc:#ffb300;background:linear-gradient(120deg,color-mix(in srgb,var(--tc) 20%,var(--card)),var(--card) 70%);box-shadow:0 0 0 1.5px var(--tc),0 0 16px color-mix(in srgb,var(--tc) 65%,transparent)}
.chcard.mine{--mc:var(--pc-ink,var(--pc,var(--hot)));position:relative;overflow:hidden;border-color:var(--mc);box-shadow:0 0 0 1.5px var(--mc),0 0 14px color-mix(in srgb,var(--mc) 50%,transparent)}
.chcard.mine.fresh{animation:chin .5s ease both,mineaura 2.2s ease-in-out .5s infinite}
.chcard.mine::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--mc) 24%,transparent) 50%,transparent 65%);transform:translateX(-120%)}
.chcard.mine.fresh::after{animation:mineshine 3.2s ease-in-out infinite}
.chmine{display:inline-block;margin-bottom:4px;padding:1px 9px;border-radius:999px;background:var(--mc);color:var(--mf,#fff);font-size:.68rem;font-weight:800}
#map .mine-mark .aura{fill:none;stroke:var(--pc,var(--hot));stroke-width:2;vector-effect:non-scaling-stroke;opacity:.45}
#map .mine-mark.fresh .aura{animation:mineping 2.4s ease-out infinite}
#map .mine-mark.fresh .aura.a2{animation-delay:.8s}
#map .mine-mark.fresh .aura.a3{animation-delay:1.6s}
#map .mine-mark .star{fill:#ffd54a;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
#map .mine-mark.fresh .star{animation:starbeat 1.4s ease-in-out infinite alternate}
#map .tipg.mine .tipbg{stroke:#ffd54a;stroke-width:2;fill:color-mix(in srgb,#ffd54a 16%,var(--card));fill-opacity:.95}
#map .tipg.mine .tip{font-weight:800}
@keyframes mineaura{0%,100%{box-shadow:0 0 0 2px var(--mc),0 0 10px color-mix(in srgb,var(--mc) 40%,transparent)}50%{box-shadow:0 0 0 3px var(--mc),0 0 26px color-mix(in srgb,var(--mc) 80%,transparent)}}
@keyframes mineshine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@keyframes mineping{from{r:4;opacity:.9}to{r:30;opacity:0}}
@keyframes starbeat{from{opacity:.75}to{opacity:1}}
/* the gentle notification invitation (home page for returning visitors, the first vote's result panel, 내 기록) */
.pushcard{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:8px 0;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:.9rem;line-height:1.5}
.pushcard.in-panel{background:color-mix(in srgb,var(--accent) 10%,var(--card));margin:6px 0 8px}
.pc-t{flex:1 1 210px;word-break:keep-all}
.pc-b{display:flex;gap:6px;align-items:center}
.pc-yes{border:0;border-radius:999px;background:var(--hot);color:#fff;font:inherit;font-weight:800;padding:8px 16px;min-height:40px;cursor:pointer}
.pc-yes:disabled{opacity:.6;cursor:default}
.pc-no{border:0;background:none;color:var(--muted);font:inherit;text-decoration:underline;padding:8px 8px;min-height:40px;cursor:pointer}

/* === 오늘의 투표: question, answers, ratio bar, prediction, past votes. === */
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
/* 오늘의 투표 */
.today{background:var(--card);border-radius:14px;padding:16px 18px 14px;margin:0 0 14px;border:1px solid var(--line);border-left:5px solid var(--hot);box-shadow:0 1px 4px #0002}
.td-top{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.td-top time{color:var(--muted);font-size:.85rem}
.td-chip{display:inline-block;background:var(--fg);color:var(--bg);font-weight:700;font-size:.8rem;border-radius:999px;padding:3px 11px}
.td-toggle{margin-left:auto;background:none;border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:4px 12px;font:inherit;font-size:.82rem;cursor:pointer;min-height:32px}
.td-toggle:hover{background:var(--land)}
.td-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.today.collapsed .td-sum,.today.collapsed .td-src,.today.collapsed .td-q,.today.collapsed .td-body{display:none}
.today.collapsed{padding-bottom:12px}
.today.collapsed .td-title{margin-bottom:0}
.td-title{font-size:1.25rem;margin:0 0 4px;line-height:1.35}
.td-sum{margin:0 0 4px;line-height:1.55;color:var(--fg)}
.td-src{margin:0 0 6px;font-size:.82rem;color:var(--muted)}
.td-src a{color:var(--link)}
.td-q{display:flex;align-items:center;gap:10px;margin:8px 0 8px;padding:8px 14px;border-radius:12px;background:color-mix(in srgb,var(--hot) 16%,var(--card));border:2px solid var(--hot)}
.td-qlab{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--hot);color:#000;font-weight:800;font-size:1.1rem}
.td-qbody{display:flex;flex-direction:column;gap:2px}
.td-qtext{font-weight:800;font-size:1.2rem;line-height:1.3;word-break:keep-all}
.td-qbody small{color:var(--muted);font-size:.85rem}
@media(max-width:700px){.td-q{padding:10px 12px;gap:10px}}
@media(max-width:700px){.td-qtext{font-size:1.15rem}}
@media(max-width:700px){.td-qlab{width:30px;height:30px}}
.td-body{min-height:60px}
.td-status{margin:10px 0 6px;color:var(--muted);font-size:.9rem}
.td-status b{color:var(--fg)}
.td-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:6px 0 0;font-size:.85rem}
.td-links a,.td-more{color:var(--link);background:none;border:0;padding:6px 0;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:2px}
.td-note{margin:8px 0 0;font-size:.78rem;color:var(--muted)}
@media(max-width:700px){.today{padding:12px 12px 10px}}
@media(max-width:700px){.td-title{font-size:1.05rem}}
.td-arch{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.td-arch a{display:block;padding:8px 4px;color:var(--link);text-decoration:none}
.td-arch a:hover{text-decoration:underline}
.td-arch time{color:var(--muted);margin-right:8px;font-size:.85rem}
.td-reg{width:100%;border-collapse:collapse;font-size:.9rem}
.td-reg td,.td-reg th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.td-reg td:last-child{text-align:right;color:var(--muted)}
/* sharing */
.td-top .td-toggle{margin-left:8px}
.td-top .td-sharetop{margin-left:auto}
/* 투표하기 button and the picker popup */
/* 오늘의 투표: yes/no answer buttons and the ratio bar (blue = 적절했다, orange = 적절하지 않았다; neutral colours, no party colours) */
.today{--yes:#2a6fd6;--no:#bf5209}
.td-detail{font-size:.8rem;font-weight:400;color:var(--link);margin-left:8px;white-space:nowrap}
.td-yn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 4px}
.td-ans{min-height:48px;padding:10px 12px;font:inherit;font-size:1.05rem;font-weight:800;border:0;border-radius:12px;color:#fff;cursor:pointer;word-break:keep-all}
.td-ans.yes{background:var(--yes)}
.td-ans.no{background:var(--no)}
.td-ans:hover:not(:disabled){filter:brightness(1.08)}
.td-ans:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.td-ans:disabled{opacity:.55;cursor:not-allowed}
.td-yn.again .td-ans{min-height:40px;font-size:.95rem}
.td-ratio{margin:2px 0 4px}
.td-rlab{display:flex;justify-content:space-between;gap:10px;font-size:.95rem;font-weight:700;margin-bottom:4px}
.td-rlab b{font-size:1.15rem}
.td-rlab .y{color:color-mix(in srgb,var(--yes) 55%,var(--fg))}
.td-rlab .n{color:color-mix(in srgb,var(--no) 55%,var(--fg));text-align:right}
.td-rlab .mine{text-decoration:underline;text-underline-offset:3px}
.td-rbar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--land)}
.td-rbar i{display:block;height:100%;transition:width .5s}
.td-rbar i.y{background:var(--yes)}
.td-rbar i.n{background:var(--no)}
.td-rcnt{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:3px}
.td-status{margin:6px 0 4px}
.td-sharebtn{background:none;color:var(--link);border:0;padding:2px 6px;min-height:0;font:inherit;font-weight:600;cursor:pointer}
.swatch.y{background:#2a6fd6}
.swatch.n{background:#bf5209}
.td-note{margin:4px 0 0}
@media(max-width:420px){.td-ans{font-size:.95rem;padding:8px}}
.td-compact{margin:0}
.td-compact .td-title{margin:0;font-size:1.1rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-compact .td-detail{margin-left:0}
.td-compact .td-sharetop{margin-left:4px}
.today:has(.td-compact){padding-top:10px;padding-bottom:10px}
.today.collapsed .td-compact~.td-q{display:none}
@media(max-width:600px){.td-compact{flex-wrap:wrap}}
@media(max-width:600px){.td-compact .td-title{order:5;flex-basis:100%;white-space:normal}}
@media(max-width:600px){.td-compact .td-sharetop{margin-left:auto}}
@media(max-width:600px){.td-compact .td-detail{display:none}}
@media(max-width:600px){.today.collapsed .td-compact{flex-wrap:nowrap}}
@media(max-width:600px){.today.collapsed .td-compact .td-title{order:0;flex:1;flex-basis:auto;white-space:nowrap}}
@media(max-width:600px){.today.collapsed .td-compact .td-sharetop{display:none}}
@media(max-width:600px){.today.collapsed .td-compact .td-toggle{margin-left:auto}}
.td-compact .td-chip,.td-compact .td-toggle,.td-compact .td-detail{flex:none;white-space:nowrap}
.td-detail,.prose a,.legalnav a,.src a,.td-src a{display:inline-block;min-height:24px;line-height:24px}
.td-sharebtn.big{background:var(--fg);color:var(--bg);border-radius:999px;padding:10px 18px;min-height:44px;text-decoration:none;display:inline-block}
@media(max-width:380px){.td-day{display:none}}
/* /issues: completed votes with their final results */
.pastlist{list-style:none;margin:12px 0;padding:0;display:grid;gap:14px}
.pastlist li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.pastlist h2{font-size:1.1rem;margin:4px 0 2px}
.pastlist h2 a{color:var(--fg);text-decoration:none}
.pastlist h2 a:hover{text-decoration:underline}
.pl-top{display:flex;justify-content:space-between;color:var(--muted);font-size:.85rem}
.pl-q{margin:0 0 8px;color:var(--muted);font-size:.92rem}
.pl-more{margin:6px 0 0;font-size:.85rem}
.pl-more a{color:var(--link)}
.pastlist .td-ratio{--yes:#2a6fd6;--no:#bf5209}
.td-past{margin:6px 0 0;font-size:.82rem}
.td-past a{color:var(--link)}
/* 예측, 내 최애 소식, 응원 도감 */
.td-pred{display:grid;gap:10px;padding:4px 0}
.td-pq{margin:0;font-size:.95rem}
.td-pq small{color:var(--muted)}
.td-pg{border:2px solid var(--line);background:var(--card);color:var(--fg);border-radius:12px;padding:12px 10px;font:inherit;font-weight:700;cursor:pointer}
.td-pg.yes{border-color:#2a6fd6}
.td-pg.no{border-color:#bf5209}
.td-pg:hover,.td-pg:focus-visible{background:var(--hover,rgba(127,127,127,.12))}
.td-pg:disabled{opacity:.6}
.td-pskip{justify-self:start}
.td-guess{margin:6px 0 0;font-size:.85rem;color:var(--muted)}
/* 오늘의 투표: neutral swatches instead of thumbs, the third answer */
.td-ans .swatch,.td-pg .swatch{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.45em;vertical-align:baseline}
.swatch.y{background:#2a6fd6}
.swatch.n{background:#bf5209}
.swatch.u{background:#6b7a8c}
.td-yn.three{grid-template-columns:1fr 1fr 1fr}
.td-ans.unsure{background:#5d6b7c;color:#fff}
.td-ans .swatch.u,.td-ans .swatch.y,.td-ans .swatch.n{box-shadow:0 0 0 2px #fff;background:transparent}
.td-ans.yes .swatch,.td-ans.no .swatch,.td-ans.unsure .swatch{background:#fff;box-shadow:none}
.td-ratio.three .td-rlab{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;font-size:.85rem}
.td-ratio.three .td-rlab .u{text-align:center}
.td-ratio.three .td-rlab .n{text-align:right}
.td-ratio.three .td-rlab b{font-size:1.05rem}
.td-rlab .u b{color:inherit}
.td-rbar i.u{background:#6b7a8c}
.td-ratio.three .td-rcnt{display:flex;justify-content:space-between}
.td-rtot{text-align:center;font-size:.8rem;color:var(--muted);margin-top:2px}
@media(max-width:480px){.td-yn.three{grid-template-columns:1fr}}
.td-melink{margin-left:4px;font-weight:700;white-space:nowrap}
/* === After a vote: result panel, toast, rank party, confetti, cheer picker, share dialog, feedback dialog. === */
/* toast (replaces alert()) */
#toast{position:fixed;z-index:var(--z-toast);left:50%;bottom:calc(var(--bars) + 16px);transform:translate(-50%,12px);width:min(440px,calc(100vw - 32px));display:flex;gap:10px;align-items:flex-start;padding:12px 8px 12px 14px;border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:12px;background:var(--card);color:var(--fg);font-size:.95rem;line-height:1.5;box-shadow:0 8px 28px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast.warn{border-left-color:#e0a000}
#toast.error{border-left-color:#e5484d}
#toast.ok{border-left-color:#2f9e5b}
#toast .ti{font-size:1.15rem;line-height:1.4}
#toast .tm{flex:1;word-break:keep-all}
#toast .tx{border:0;background:none;color:var(--muted);font-size:1.3rem;line-height:1;padding:2px 8px;cursor:pointer;border-radius:8px}
#toast .tx:hover{background:var(--land)}
.cheer-ov{position:fixed;inset:0;z-index:var(--z-panel);background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;padding:0}
@media(min-width:640px){.cheer-ov{align-items:center;padding:16px}}
.cheer-box{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:16px 16px 0 0;padding:18px 16px 16px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
@media(min-width:640px){.cheer-box{border-radius:16px}}
.cheer-box h2{margin:0 28px 4px 0;font-size:1.15rem}
.cheer-sub{margin:0 0 12px;color:var(--muted);font-size:.88rem}
.cheer-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:1.5rem;cursor:pointer}
.cheer-x:hover{background:var(--land)}
.cheer-opts{display:grid;gap:8px}
.cheer-opt{display:block;text-align:left;width:100%;border:1px solid var(--line);border-left:5px solid var(--tc,var(--line));border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;padding:11px 12px;min-height:48px;cursor:pointer;animation:chin .35s ease both}
.cheer-opt:hover,.cheer-opt:focus-visible{background:var(--land);outline:2px solid var(--accent);outline-offset:1px}
.cheer-tx{display:block;line-height:1.5;word-break:keep-all}
.cheer-tag{display:block;font-size:.74rem;font-weight:700;margin-bottom:2px;color:var(--muted)}
.cheer-opt.gacha{border-style:dashed;border-left-style:solid}
.cheer-opt.tier-rare,.cheer-opt.tier-epic,.cheer-opt.tier-legendary{border-style:solid;box-shadow:0 0 0 1px var(--tc)}
.cheer-opt.tier-rare .cheer-tag,.cheer-opt.tier-epic .cheer-tag,.cheer-opt.tier-legendary .cheer-tag{color:var(--fg)}
.cheer-opt.tier-epic{animation:chin .35s ease both,glow 1.8s ease-in-out infinite;--g:#b06bff}
.cheer-opt.tier-legendary{animation:chin .35s ease both,glow 1.4s ease-in-out infinite;--g:#ffb300;background:linear-gradient(120deg,color-mix(in srgb,#ffb300 20%,var(--bg)),var(--bg) 65%)}
.cheer-actions{display:flex;gap:8px;justify-content:space-between;margin-top:12px;flex-wrap:wrap}
.cheer-actions .ghost{margin:0;min-height:40px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:var(--z-confetti);overflow:hidden}
.confetti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:conf 1.8s ease-in forwards}
.rankparty{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:var(--z-party);max-width:min(92vw,520px);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 26px;border-radius:16px;background:var(--card);color:var(--fg);border:2px solid var(--pc);box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 25%,transparent),0 10px 36px rgba(0,0,0,.35);cursor:pointer;animation:rpin .5s cubic-bezier(.2,1.4,.4,1) both}
.rankparty b{font-size:1.35rem}
.rankparty span{font-size:.95rem;color:var(--muted)}
.rankparty.first{padding:20px 34px;border-width:3px;background:linear-gradient(120deg,color-mix(in srgb,#ffb300 24%,var(--card)),var(--card) 70%);animation:rpin .6s cubic-bezier(.2,1.4,.4,1) both,rpglow 1.4s ease-in-out infinite}
.rankparty.first b{font-size:1.9rem}
@keyframes rpin{from{opacity:0;transform:translateX(-50%) scale(.6) translateY(-24px)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes rpglow{50%{box-shadow:0 0 0 8px color-mix(in srgb,#ffb300 40%,transparent),0 10px 44px rgba(255,179,0,.5)}}
@keyframes champ{50%{transform:scale(1.04);box-shadow:0 0 0 3px var(--pc),0 0 28px color-mix(in srgb,var(--pc) 70%,transparent)}}
.chnew{margin-left:auto;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--fg);border-radius:14px;padding:4px 12px;font:inherit;font-size:.82rem;cursor:pointer;min-height:32px}
.chnew[hidden]{display:none}
.chnew[hidden]+.cheers-nav{margin-left:auto}
.chnew:not([hidden])+.cheers-nav{margin-left:8px}
#toast .ta{margin-left:8px;background:var(--fg);color:var(--bg);border:0;border-radius:999px;padding:4px 12px;font:inherit;font-weight:700;cursor:pointer}
.rp-share{margin-top:8px;background:var(--fg);color:var(--bg);border:0;border-radius:999px;padding:8px 18px;font:inherit;font-weight:700;cursor:pointer;min-height:40px}
.shr-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:var(--z-dialog);display:flex;align-items:center;justify-content:center;padding:16px}
.shr-x{position:absolute;right:10px;top:8px;background:none;border:0;color:var(--fg);font-size:1.6rem;cursor:pointer;min-width:40px;min-height:40px}
.shr-img{width:100%;max-height:300px;object-fit:contain;border-radius:10px;background:#000;margin:0 0 8px}
.shr-text{margin:0 0 12px;color:var(--muted);font-size:.9rem;line-height:1.5;word-break:keep-all}
.shr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shr-grid button{font:inherit;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;min-height:44px}
.shr-grid button:hover{border-color:var(--accent)}
.shr-grid button:focus-visible,.shr-x:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* the moment after a vote */
.vres{position:fixed;left:50%;bottom:calc(var(--bars) + 8px);transform:translateX(-50%);z-index:var(--z-panel);width:min(94vw,520px);background:var(--card);color:var(--fg);border:2px solid var(--hot);border-radius:16px;padding:12px 40px 12px 14px;box-shadow:0 10px 36px rgba(0,0,0,.5);animation:vresin .25s ease-out}
.vres.tier-rare{border-color:#3fa7ff}
.vres.tier-epic{border-color:#b06bff}
.vres.tier-legendary{border-color:#ffb300;box-shadow:0 0 0 2px #ffb30055,0 10px 36px rgba(0,0,0,.5)}
.vres-x{position:absolute;top:6px;right:8px;width:32px;height:32px;border:0;background:none;color:var(--muted);font-size:1.4rem;cursor:pointer}
.vres-t{font-weight:800;font-size:1.05rem}
.vres-m{margin:4px 0;font-size:.95rem}
.vres-r{font-size:.9rem;font-weight:700}
.vres-k{font-size:.85rem;color:var(--muted);margin-top:2px}
.vres-b{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.vres-b button,.vres-b a{font:inherit;font-size:.85rem;min-height:38px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.vres-b .vres-share{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:700}
/* round 2: share dialog address, picker actions, panel rows, friend's pick */
.shr-url{width:100%;box-sizing:border-box;margin:0 0 10px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:.82rem}
.cheer-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.cheer-skip{font:inherit;min-height:46px;border-radius:12px;border:2px solid var(--accent);background:var(--card);color:var(--fg);font-weight:700;cursor:pointer}
.cheer-actions .ghost{font:inherit;min-height:40px}
.vres [hidden]{display:none!important}
.vres-bd{margin-top:2px;font-size:.9rem}
.vres-b .vres-more{margin-left:auto}
.vres-t:focus{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
/* feedback dialog + footer button */
.linkbtn{background:none;border:0;padding:10px 6px;font:inherit;color:var(--muted);text-decoration:underline;cursor:pointer;display:inline-block;min-height:24px}
.linkbtn:hover{color:var(--fg)}
.fb-faces{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.fb-faces button{font:inherit;padding:8px 2px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:60px}
.fb-faces button span{font-size:1.5rem}
.fb-faces button small{font-size:.7rem;color:var(--muted)}
.fb-faces button.on{border-color:var(--hot);background:color-mix(in srgb,var(--hot) 18%,var(--bg));border-width:2px}
.fb-why{display:flex;flex-wrap:wrap;gap:6px}
.fb-why button{font:inherit;font-size:.85rem;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;min-height:36px}
.fb-why button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.fb-act{margin-top:14px;display:flex;justify-content:flex-end}
.fb-send{font:inherit;font-weight:800;min-height:44px;padding:0 24px;border-radius:12px;border:0;background:var(--hot);color:#000;cursor:pointer}
.fb-send:disabled{background:var(--land);color:var(--muted);cursor:not-allowed}
.fb-thanks{font-weight:700;text-align:center;margin:18px 0 8px}
.vres-geo{font-size:.78rem;color:var(--muted);margin-top:2px}
.vres-geo a{color:var(--muted);text-decoration:underline}
.vres-bk{margin-top:6px;font-size:.9rem}
.vres-bk a{color:var(--link)}
.rankparty{padding-right:44px}
.rankparty{width:max-content;box-sizing:border-box}
.rankparty b,.rankparty span{white-space:normal;word-break:keep-all}
@media(max-width:420px){.rankparty.first b{font-size:1.55rem}.rankparty.first{padding:18px 30px 18px 22px}}
.rankparty .rp-x{position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer}
.rankparty .rp-x:hover,.rankparty .rp-x:focus-visible{background:var(--land);color:var(--fg)}
@media(max-width:720px){.rankparty{top:60px}}
/* a prominent way from the vote result to the 내 기록 page */
.vres-me{display:block;margin-top:8px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--hot) 14%,var(--card));border:1px solid var(--hot);color:var(--fg);font-weight:700;font-size:.9rem;text-decoration:none}
.vres-me:hover,.vres-me:focus-visible{filter:brightness(1.1)}
.vres-me small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
/* the first vote: a bigger party */
.vres.first-vote{border-color:#ffb300;box-shadow:0 0 0 3px #ffb30066,0 10px 36px rgba(0,0,0,.5);animation:fvin .6s cubic-bezier(.2,1.4,.4,1) both}
.vres-fv{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;margin:2px 28px 8px 0;padding:8px 10px;border-radius:12px;background:linear-gradient(120deg,color-mix(in srgb,#ffb300 26%,var(--card)),var(--card))}
.vres-fv .medal{grid-row:1/3;font-size:2.2rem;line-height:1;animation:medal 1.6s ease-in-out infinite}
.vres-fv b{font-size:1.15rem}
.vres-fv small{color:var(--muted);font-size:.82rem}
.vres-me.primary{background:var(--hot);border-color:transparent;color:#fff;font-size:1rem;text-align:center;padding:12px}
.vres-me.primary small{color:#fff;opacity:.9}
@keyframes fvin{from{transform:translateX(-50%) scale(.85);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
@keyframes medal{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.12)}}
/* 내 지역: the region dialog, the one-time offer in the vote result panel, the settings row */
.vres-geo button.vres-loc-chg{font:inherit;color:var(--link);background:none;border:0;padding:6px 2px;min-height:32px;text-decoration:underline;cursor:pointer}
.vres-locask{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:6px 0 8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 10%,var(--card));font-size:.88rem;line-height:1.5}
.vres-locask .la-t{flex:1 1 220px}
.vres-locask .la-t small{display:block;color:var(--muted);font-size:.8rem}
.la-b{display:flex;gap:6px;align-items:center}
.la-yes{border:0;border-radius:999px;background:var(--hot);color:#000;font:inherit;font-weight:800;padding:8px 16px;min-height:40px;cursor:pointer}
.la-no{border:0;background:none;color:var(--muted);font:inherit;text-decoration:underline;padding:8px;min-height:40px;cursor:pointer}
.loc-dlg h2{margin:0 0 8px;font-size:1.1rem;padding-right:36px}
.loc-opt{color:var(--muted);font-size:.78rem;font-weight:400}
.loc-calm{margin:0 0 8px;font-size:.92rem;line-height:1.6;word-break:keep-all}
.loc-why,.loc-note{margin:0 0 10px;color:var(--muted);font-size:.84rem;line-height:1.5;word-break:keep-all}
.loc-note{margin:4px 0 8px;font-size:.8rem}
.loc-gps,.loc-save,.loc-use{font:inherit;font-weight:800;padding:10px 14px;border-radius:10px;border:0;background:var(--hot);color:#000;cursor:pointer;min-height:44px;width:100%;box-sizing:border-box}
.loc-gps:disabled,.loc-save:disabled{opacity:.55;cursor:default}
.loc-found{margin:6px 0 8px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:.9rem;line-height:1.5}
.loc-fl{margin-bottom:8px;font-weight:700}
.loc-use{margin:0 0 6px;width:100%}
.loc-use.alt{background:transparent;color:var(--fg);border:1px solid var(--line);font-weight:600}
.loc-or{margin:12px 0 6px;color:var(--muted);font-size:.8rem;text-align:center}
.loc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.loc-row select{font:inherit;min-height:44px;padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);min-width:0}
.loc-prev{margin:8px 0 4px;min-height:1.4em;font-size:.9rem}
.loc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.loc-acts .loc-save{flex:1 1 160px;width:auto}
.loc-clr,.loc-no{font:inherit;background:none;border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:8px 12px;min-height:44px;cursor:pointer}
.loc-dlg button:focus-visible,.loc-dlg select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.loc-set{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:0 0 14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.loc-set .ls-t{line-height:1.6;font-size:.95rem}
.loc-set .ls-v{font-weight:700}
.loc-set .ls-h{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.loc-set .ghost{margin-top:0;white-space:nowrap}
@media (max-width:420px){.loc-row{grid-template-columns:1fr}}
/* === 내 기록 page, 응원 도감, standings, badges. === */
.me .mekpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0}
.me .mekpi div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.me .mekpi b{display:block;font-size:1.7rem}
.me .mekpi b small{font-size:.85rem;font-weight:400;color:var(--muted)}
.me .mekpi span{font-size:.82rem;color:var(--muted)}
.mefav{display:flex;align-items:center;gap:14px;margin:8px 0}
.mefav img{border-radius:10px;object-fit:cover;border:3px solid var(--pc,var(--line))}
.mefav b{font-size:1.3rem}
.mebars{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.mebars li{display:grid;grid-template-columns:72px 1fr 56px;gap:8px;align-items:center}
.mebars .bar{height:12px;background:var(--land);border-radius:6px;overflow:hidden}
.mebars .bar i{display:block;height:100%}
.mebars b{text-align:right;font-size:.9rem}
.mebadges{list-style:none;padding:0;margin:8px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.mebadges li{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;background:var(--card)}
.mebadges .ic{display:block;font-size:1.6rem}
.mebadges small{display:block;color:var(--muted);font-size:.75rem}
.mebadges li.off{opacity:.5;filter:grayscale(1)}
.mebadges li.on{border-color:var(--hot)}
.mebadges .bprog{display:block;height:6px;background:var(--land);border-radius:3px;overflow:hidden;margin:6px 4px 2px}
.mebadges .bprog i{display:block;height:100%;background:var(--hot)}
.mebadges .bnum{font-weight:700;color:var(--fg)}
.predbanner.pb-h{border-color:#2e9e5b}
.predbanner.pb-m{border-color:#bf5209}
.bk-total{height:10px;border-radius:6px;background:var(--line);overflow:hidden;margin:8px 0}
.bk-total i{display:block;height:100%;background:#2e9e5b}
.bk-sec h2 small{font-weight:400;color:var(--muted)}
.bk-list{list-style:none;margin:8px 0 18px;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.bk{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card);display:flex;flex-direction:column;gap:2px}
.bk small{color:var(--muted);font-size:.75rem}
.bk.off{opacity:.65;border-style:dashed}
.bk.off .bk-t{letter-spacing:.2em}
.bk-sec.tier-rare .bk.on{border-color:#2a6fd6}
.bk-sec.tier-epic .bk.on{border-color:#8e44ad}
.bk-sec.tier-legendary .bk.on{border-color:#d4a017;box-shadow:0 0 0 1px #d4a01766}
.snsbox{margin:14px 0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--card)}
.snsbox h2{margin:0 0 6px;font-size:1rem}
.snsbox ul{margin:6px 0 0;padding-left:20px}
.snsbox li{margin:3px 0}
/* 내 기록: a friendlier page (hero, level, today's checklist, week strip) */
.me .me-hero{display:flex;gap:16px;align-items:center;margin:4px 0 14px;padding:18px 18px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--pc,#ff5a36) 30%,var(--card)),var(--card) 72%);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.me .me-hero.me-hero-new{--pc:#4a6cf7}
.me .me-avatar{flex:0 0 auto;width:84px;height:84px;border-radius:50%;overflow:hidden;border:4px solid var(--pc,#ff5a36);background:var(--land);display:flex;align-items:center;justify-content:center;font-size:2.4rem;box-shadow:0 0 0 4px color-mix(in srgb,var(--pc,#ff5a36) 28%,transparent)}
.me .me-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.me .me-hello{min-width:0;flex:1}
.me .me-greet{margin:0;font-size:.92rem;color:var(--muted)}
.me .me-hello h1{margin:2px 0 6px;font-size:1.6rem;line-height:1.2}
.me .me-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.me .chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.8rem;font-weight:700;white-space:nowrap}
.me .chip.lv{background:var(--pc,#ff5a36);border-color:transparent;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.me .chip.fire{border-color:#ff7a3c;color:var(--fg)}
.me .me-lvbar{height:10px;border-radius:6px;background:var(--land);overflow:hidden}
.me .me-lvbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--pc,#ff5a36),#ffb300);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.me .me-sub{margin:6px 0 0;font-size:.88rem;color:var(--muted)}
.me .me-cta{display:inline-block;margin-top:4px;padding:10px 18px;border-radius:999px;background:var(--hot);color:#fff;font-weight:800;text-decoration:none}
.me .me-cta:hover{filter:brightness(1.08)}
.me .me-card{margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.me .me-card h2,.me .me-h{margin:0 0 8px;font-size:1.05rem}
.me .me-h{margin:20px 0 6px}
.me .me-card h2 small,.me .me-h small{font-weight:600;color:var(--muted);margin-left:6px}
.me .qlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.me .qlist li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--land)}
.me .qlist .qc{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff}
.me .qlist li.done{background:color-mix(in srgb,#2fb66a 16%,var(--card))}
.me .qlist li.done .qc{background:#2fb66a;border-color:#2fb66a}
.me .qlist li.done .qt{text-decoration:line-through;text-decoration-color:#2fb66a88}
.me .qlist .qt{flex:1;min-width:0}
.me .qlist .qgo{flex:0 0 auto;font-weight:700;font-size:.85rem;color:var(--link);text-decoration:none;white-space:nowrap}
.me .qmsg{margin:10px 2px 0;font-size:.9rem}
.me .wk{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 8px;padding:0}
.me .wk li{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border-radius:12px;background:var(--land)}
.me .wk .dw{font-size:.75rem;color:var(--muted);font-weight:600}
.me .wk .dc{height:26px;line-height:26px;font-size:1.3rem}
.me .wk li.on{background:color-mix(in srgb,#ff7a3c 20%,var(--card))}
.me .wk li.on .dw{color:var(--fg)}
.me .wk li.now{outline:2px solid var(--accent);outline-offset:1px}
.me .mekpi{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
.me .mekpi div,.me .mekpi a.kpilink{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;text-decoration:none;color:inherit;display:block}
.me .mekpi a.kpilink{line-height:inherit}   /* (a link carries its own line height: the tile looked tighter than its neighbours) */
.me .mekpi a.kpilink:hover{border-color:var(--accent)}
.me .mekpi .ic{display:block;font-size:1.3rem;margin-bottom:2px}
.me .mekpi b{display:block;font-size:1.7rem}
.me .mekpi a.kpilink b small,.me .mekpi div b small{font-size:.85rem;font-weight:400;color:var(--muted)}
.me .mekpi div>span:last-child,.me .mekpi a.kpilink>span:last-child{font-size:.82rem;color:var(--muted)}
.me .me-next{margin:0 0 8px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--hot) 14%,var(--card));border:1px solid var(--hot)}
.me .me-steps{margin:6px 0 0;padding-left:22px;display:grid;gap:8px}
.me .mefav{padding:10px 12px;border:1px solid var(--line);border-left:6px solid var(--pc,var(--line));border-radius:14px;background:var(--card)}
@media(max-width:480px){.me .me-hero{padding:14px;gap:12px}}
@media(max-width:480px){.me .me-avatar{width:68px;height:68px;font-size:2rem}}
@media(max-width:480px){.me .me-hello h1{font-size:1.35rem}}
.me ul.mebadges,.me ul.mebars{padding:0;margin:8px 0}
.me .chip.top{border-color:#ffb300;background:color-mix(in srgb,#ffb300 22%,var(--card))}
.me .me-rank .rk-main{margin:4px 0 8px;font-size:1rem}
.me .rk-main .big{font-size:1.5rem}
.me .rk-pct{color:var(--muted)}
.me .rk-bar{height:10px;border-radius:6px;background:var(--land);overflow:hidden;margin-bottom:10px}
.me .rk-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffb300,var(--hot))}
.me ul.rk-list{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px}
.me .rk-list li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--land);font-size:.9rem}
.me .rk-list .nm{display:flex;align-items:center;gap:6px;min-width:0}
.me .rk-list .mv{font-weight:700}
.me .rk-list .rr{font-weight:800;text-align:right}
.me .rk-list .rr small{display:block;font-weight:400;color:var(--muted);font-size:.72rem}
@media(max-width:420px){.me .rk-list li{grid-template-columns:1fr auto}}
@media(max-width:420px){.me .rk-list .rr{grid-column:1/3;text-align:left}}
/* === Statistics pages, charts, tables, president pages, admin tables and everything else. === */
.sub{font-size:.75rem;color:var(--muted)}
.cnt{font-size:1.15rem}
.pct{color:var(--muted);font-size:.85rem;margin-left:4px}
.like{width:100%;padding:8px;border:0;border-radius:8px;background:var(--pc-ink,var(--pc,var(--accent)));color:var(--pc-fg,#fff);box-shadow:inset 0 0 0 1px #8886;font-size:.95rem;cursor:pointer}
.like:active{transform:scale(.97)}
.like:disabled{opacity:.5}
@keyframes bump{50%{transform:scale(1.25);color:var(--hot)}}
#abroad{font-size:.8rem;color:var(--muted);font-weight:400}
#replay-note{margin-left:8px;font-size:.8rem;font-weight:400;color:var(--muted)}
#replay-note.on{color:var(--link)}
@keyframes ripple{from{r:3;opacity:1}to{r:34;opacity:0}}
@keyframes fade{0%,60%{opacity:1}to{opacity:0}}
@keyframes pulse{50%{opacity:.35}}
.settings{display:grid;gap:4px;max-width:520px}
.settings .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;background:var(--card);border-radius:10px}
.settings select{padding:6px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.settings input[type=checkbox]{width:20px;height:20px}
.chart{height:400px;width:100%}
@media(max-width:600px){.chart{height:320px}}
.hint{font-size:.8rem;color:var(--muted);margin:6px 0 0}
.winpick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.winpick select,.winpick input[type=date]{padding:6px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg)}
.winpick .ghost{margin:0}
.winpick .apply{padding:6px 12px;border:0;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}
.tablewrap{overflow-x:auto;position:relative}   /* (positioned: the hidden screen-reader labels inside a wide table must not widen the page and push the fixed bars off-screen) */
.board{width:100%;border-collapse:collapse;font-size:.92rem;white-space:nowrap}
.board th{text-align:left;font-weight:600;color:var(--muted);padding:8px;border-bottom:1px solid var(--line);font-size:.8rem}
.board th[data-k]{cursor:pointer;user-select:none}
.board th.sorted{color:var(--fg)}
.board td{padding:7px 8px;border-bottom:1px solid var(--line)}
.board .num{text-align:right;font-variant-numeric:tabular-nums}
.inc{color:var(--accent)}
.up{color:#2fb66a}
.down{color:#e5484d}
.same{color:var(--muted)}
.pbar{display:inline-block;width:60px;height:6px;background:var(--land);border-radius:3px;vertical-align:middle;overflow:hidden}
.pbar i{display:block;height:100%}
.spark{vertical-align:middle}
/* sub tabs, toolbar, feed, race */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.chart.tall{height:480px}
@media(max-width:600px){.chart.tall{height:380px}}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.feed{list-style:none;margin:0;padding:0;max-height:440px;overflow-y:auto}
.feed li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.feed time{flex:0 0 62px;color:var(--muted);font-size:.78rem;padding-top:2px}
.feed small{color:var(--muted)}
.feed .pass{color:var(--fg)}
.feed .tie{color:var(--muted)}
.player{display:flex;gap:6px;align-items:center}
.player .ghost{margin:0;padding:4px 10px}
.player select{padding:4px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--fg)}
#race-scrub{width:100%;margin-top:6px}
/* president page */
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:8px}
.crumbs a{color:var(--muted)}
.pbio{display:grid;grid-template-columns:180px 1fr;gap:20px}
@media(max-width:640px){.pbio{grid-template-columns:1fr}}
@media(max-width:640px){.pbio img{max-width:200px}}
.pbio img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:#ccd}
.pbio h1 small{font-size:.9rem;font-weight:400;color:var(--muted);margin-left:6px}
#bio-dl{display:grid;grid-template-columns:90px 1fr;gap:6px 12px;margin:12px 0;font-size:.92rem}
#bio-dl dt{color:var(--muted)}
#bio-dl dd{margin:0}
.schools{margin:0;padding-left:16px}
.summary{line-height:1.7;margin:8px 0}
.pbio-actions{display:flex;gap:8px;align-items:center;margin:10px 0}
.pbio-actions .like{width:auto;padding:8px 18px}
.pbio-actions .ghost{margin:0}
#bio-src{font-size:.8rem;color:var(--muted)}
#bio-src a{color:var(--muted);word-break:break-all}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.kpi{background:var(--card);border-radius:12px;padding:12px;box-shadow:0 1px 3px #0002}
.kpi-l{font-size:.78rem;color:var(--muted)}
.kpi-v{font-size:1.3rem;font-weight:700;margin:4px 0}
.kpi-s{font-size:.78rem}
.chart.short{height:260px}
.feed .me{font-weight:700}
.pnav{display:flex;justify-content:space-between;margin-top:16px}
.pnav a{color:var(--accent);text-decoration:none;padding:8px 12px;background:var(--card);border-radius:10px}
/* regions */
.cols.wide-left{grid-template-columns:3fr 2fr}
@media(max-width:900px){.cols.wide-left{grid-template-columns:1fr}}
.chart.map{height:560px}
@media(max-width:600px){.chart.map{height:420px}}
.toolbar select{padding:6px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);margin-left:6px}
.sub-h{font-size:.9rem;margin:14px 0 6px}
.leadcount{display:flex;flex-wrap:wrap;gap:6px}
.lc{background:var(--land);border-radius:12px;padding:3px 10px;font-size:.85rem}
.credit{font-size:.78rem}
/* activity / records / compare / live */
.chart.cal{height:200px}
.recgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rec{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 1px 3px #0002;display:grid;gap:4px}
.rec a{color:var(--fg);text-decoration:none;font-weight:600}
.rec .kpi-v small{font-size:.8rem;font-weight:400;color:var(--muted)}
#now{font-size:1rem}
#now a{color:var(--fg);text-decoration:none;font-weight:600}
.pchip{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:16px;padding:5px 12px;cursor:pointer;font-size:.88rem}
.pchip.on{color:#fff}
.h2h{display:flex;align-items:center;gap:10px}
.h2hbar{flex:1;display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--land)}
.h2hbar i{display:block}
.wall{display:grid;grid-template-columns:3fr 2fr;gap:16px;background:var(--bg)}
@media(max-width:800px){.wall{grid-template-columns:1fr}}
.wall-map{text-align:center}
.wall-map svg{max-height:75vh}
.wall:fullscreen{padding:24px;align-items:center}
.wall:fullscreen svg{max-height:92vh}
.wall-side h2{font-size:1rem;margin:0 0 8px}
.toplist,.recent{list-style:none;margin:0 0 18px;padding:0}
.toplist li{display:grid;grid-template-columns:24px 64px 1fr auto;gap:8px;align-items:center;padding:4px 0}
.tn{color:var(--muted);text-align:right}
.tb{height:8px;background:var(--land);border-radius:4px;overflow:hidden}
.tb i{display:block;height:100%}
.recent li{display:grid;grid-template-columns:70px 1fr auto;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.recent time{color:var(--muted);font-size:.78rem}
.pbio{border-top:4px solid var(--pc-ink,transparent)}
.pbio h1{border-left:6px solid var(--pc-ink,transparent);padding-left:10px}
.kpi{border-top:3px solid var(--pc-ink,transparent)}
.credit{font-size:.72rem;margin:6px 0 0}
.credit a{color:inherit}
.ticker{margin:0 0 12px;background:var(--card);border-radius:10px;padding:2px 12px}
.ticker li:last-child{border-bottom:0}
.like.locked{opacity:.55;filter:grayscale(.75);cursor:not-allowed}
/* always-coloured chart legend */
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 6px}
.chart-legend .lg{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:none;color:var(--fg);font:inherit;font-size:.85rem;padding:4px 10px;border-radius:14px;cursor:pointer;min-height:32px}
.chart-legend .lg i{width:12px;height:12px;border-radius:50%;flex:none}
.chart-legend .lg.off{opacity:.5;text-decoration:line-through}
.chart-legend .lg:hover{background:var(--land)}
.mapctl{position:absolute;top:34px;right:6px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.mapctl button{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);font-size:1.2rem;line-height:1;cursor:pointer}
.mapctl button:disabled{opacity:.4;cursor:default}
.mapctl .maphint{font-size:.7rem;color:var(--muted);background:var(--card);border-radius:6px;padding:1px 6px;opacity:.9}
@media(pointer:coarse){.mapctl .maphint{display:none}}
.like.busy{opacity:.75;cursor:progress}
/* ---- cheering messages ---- */
.chtag{display:inline-block;font-size:.72rem;font-weight:700;border-radius:10px;padding:1px 8px;margin-bottom:4px}
.chtag:empty{display:none}
.tier-rare{--tc:#4aa3ff}
.tier-epic{--tc:#b06bff}
.tier-legendary{--tc:#ffb300}
.tier-common{--tc:var(--line)}
.chtag.tier-rare,.chtag.tier-epic,.chtag.tier-legendary{background:color-mix(in srgb,var(--tc) 22%,transparent);color:var(--fg);box-shadow:inset 0 0 0 1px var(--tc)}
.chtx{margin:2px 0 6px;line-height:1.5;word-break:keep-all}
.chwho{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.chwho b{color:var(--fg)}
@keyframes chin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* president page + stats lists */
.chtop,.chrecent{list-style:none;margin:0;padding:0}
.chitem{padding:8px 10px;border-bottom:1px solid var(--line);border-left:4px solid var(--tc,var(--line))}
.chitem .chtx{margin:0 0 2px}
@keyframes glow{0%,100%{box-shadow:0 0 0 1px var(--tc),0 0 6px color-mix(in srgb,var(--g) 40%,transparent)}50%{box-shadow:0 0 0 1px var(--tc),0 0 18px color-mix(in srgb,var(--g) 85%,transparent)}}
@keyframes conf{to{transform:translate(var(--dx),105vh) rotate(540deg);opacity:.9}}
.ticker li.mine{background:color-mix(in srgb,var(--hot) 14%,transparent);animation:tickin .6s ease both}
@keyframes tickin{from{opacity:0;transform:translateY(-8px)}}
#ch-pres a,.chwho a{color:var(--fg);text-decoration:none}
#ch-pres a:hover{text-decoration:underline}
/* admin */
.adm-form{display:grid;gap:10px;max-width:640px}
.adm-form label{display:grid;gap:4px;font-weight:600;font-size:.9rem}
.adm-form input,.adm-form textarea,.adm-form select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg)}
.adm-form button,.adm button{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.adm-err{background:color-mix(in srgb,#e5484d 18%,var(--card));border-radius:8px;padding:8px 12px}
.adm-ok{background:color-mix(in srgb,#2fb66a 18%,var(--card));border-radius:8px;padding:8px 12px}
.adm-guide{background:var(--card);border-left:4px solid var(--hot);border-radius:8px;padding:10px 14px;margin:0 0 12px;font-size:.9rem}
.adm-table{width:100%}
.adm form.inl{display:inline}
.adm .inl button{padding:3px 8px;font-size:.8rem}
.adm.prose{max-width:900px}
.shr{position:relative;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;width:min(92vw,420px);max-height:92vh;overflow:auto;box-shadow:0 14px 48px rgba(0,0,0,.5)}
.shr h2{margin:0 0 8px;font-size:1.1rem}
.rmsg{color:var(--muted);font-weight:400;font-size:.78rem}
#recent-note{margin:0 0 8px;font-size:.85rem}
@keyframes aura1{50%{box-shadow:0 0 0 2px #ffd54a,0 0 30px 8px rgba(255,200,40,.6)}}
.toplist li{grid-template-columns:24px minmax(64px,max-content) 1fr auto}
.toplist .tl{white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.crumbs a{display:inline-block;min-width:24px;min-height:24px;line-height:24px}
.rules h2{margin-top:1.6em}
.rules h3{margin:1.1em 0 .2em;font-size:1rem}
.rules .lead{font-size:1.05rem}
.rules blockquote{margin:8px 0;padding:10px 14px;border-left:4px solid var(--accent);background:var(--land);border-radius:6px}
.meact{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:16px 0 8px}
@keyframes vresin{from{opacity:0;transform:translate(-50%,16px)}}
.live-a11y button{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.live-a11y button:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;margin:4px 0}
/* /stats/pairs */
.prtop,.prpartners{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px}
.prrow{display:grid;grid-template-columns:28px 1fr auto auto;gap:10px;align-items:baseline}
.prn{color:var(--muted);text-align:right}
.prrow small,.prpartners small{color:var(--muted)}
.prpartners li{display:grid;grid-template-columns:120px 1fr 64px 44px;gap:10px;align-items:center}
.prbar{height:12px;background:var(--land);border-radius:6px;overflow:hidden}
.prbar i{display:block;height:100%}
.pairmx{border-collapse:collapse;font-size:.78rem;width:100%}
.pairmx th,.pairmx td{border:1px solid var(--line);padding:4px 5px;text-align:center;white-space:nowrap}
.pairmx th{font-weight:600;background:var(--land)}
.pairmx .dg{color:var(--muted);background:var(--land)}
@media(max-width:600px){.prpartners li{grid-template-columns:90px 1fr 56px}}
@media(max-width:600px){.prpartners li small{display:none}}
@media(max-width:600px){.prrow{grid-template-columns:22px 1fr auto}}
@media(max-width:600px){.prrow small{grid-column:2/4}}
.fb .fb-q{margin:12px 0 6px;font-weight:700;font-size:.95rem}
/* /stats/pairs: a one-line message must not sit in the narrow first column of the partner grid; the matrix keeps its row names while it scrolls sideways */
.prpartners li.prmsg{display:block}
.pairmx th[scope=row]{position:sticky;left:0;z-index:1;background:var(--land)}
/* share message chooser */
.shc .shc-list{display:grid;gap:6px;margin:6px 0 10px;max-height:34vh;overflow:auto}
.shc-opt{font:inherit;text-align:left;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;display:grid;gap:2px}
.shc-opt b{font-size:.82rem;color:var(--muted)}
.shc-opt span{font-size:.9rem;line-height:1.4;word-break:keep-all}
.shc-opt.on{border:2px solid var(--hot);background:color-mix(in srgb,var(--hot) 12%,var(--bg))}
.shc-l{display:block;font-weight:700;font-size:.9rem;margin:6px 0 4px}
#shc-ta{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:.92rem;resize:vertical}
.shc-n{text-align:right;font-size:.75rem;color:var(--muted)}
.shc-act{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.shc-act button{font:inherit;min-height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer}
.shc-act .shc-go{background:var(--hot);color:#000;border:0;font-weight:800}
.shc-act .shc-go:disabled{background:var(--land);color:var(--muted);cursor:not-allowed}
@keyframes wfade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* statistics overview: tab pills, hero, folded legend, ranking cards */
.st-hero{margin:12px 0;padding:18px 16px 14px;border-radius:20px;border:1px solid var(--line);background:var(--card);background:radial-gradient(120% 150% at 0% 0%,color-mix(in srgb,var(--pc,var(--accent)) 24%,var(--card)),var(--card) 62%);border-color:color-mix(in srgb,var(--pc,var(--accent)) 38%,var(--line));box-shadow:0 8px 26px -14px var(--pc,#000)}
.st-hero[hidden]{display:none}
.st-top{display:flex;align-items:center;gap:16px}
.st-ring{--p:0;flex:none;width:92px;height:92px;border-radius:50%;background:var(--land);background:conic-gradient(var(--pc,var(--accent)) calc(var(--p) * 1%),var(--land) 0);display:grid;place-items:center;position:relative}
.st-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--card)}
.st-ring b{position:relative;font-size:1.2rem;font-variant-numeric:tabular-nums}
.st-head{min-width:0}
.st-eyebrow{margin:0;font-size:.82rem;color:var(--muted)}
.st-lead{margin:2px 0 0;font-size:1.9rem;line-height:1.2}
.st-gap{margin:2px 0 0;font-size:.9rem;color:var(--muted)}
.st-podium{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.st-podium li{display:grid;grid-template-columns:20px minmax(54px,auto) 1fr auto;gap:8px;align-items:center;font-size:.92rem}
.st-podium .pk{font-weight:700;color:var(--muted);text-align:center}
.st-podium .pb{height:10px;background:color-mix(in srgb,var(--land) 80%,transparent);border-radius:5px;overflow:hidden}
.st-podium .pb i{display:block;height:100%;border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.st-podium b{font-variant-numeric:tabular-nums;font-size:.9rem}
.st-kpis{display:flex;flex-wrap:wrap;gap:8px 26px;margin:14px 0 0;padding-top:11px;border-top:1px solid var(--line);border-top-color:color-mix(in srgb,var(--pc,var(--accent)) 25%,var(--line))}
.st-kpis[hidden]{display:none}
.st-kpis span{display:block;font-size:.76rem;color:var(--muted)}
.st-kpis b{display:block;font-size:1.2rem;line-height:1.3}
.st-kpis b small{font-size:.78rem;font-weight:400;color:var(--muted);margin-left:2px}
.st-kpis em{font-style:normal;font-size:.76rem;color:var(--muted)}
@media(min-width:900px){.st-hero{display:grid;grid-template-columns:minmax(300px,.9fr) 1.4fr;gap:6px 36px;align-items:center;padding:22px 26px}.st-podium{margin:0}.st-kpis{grid-column:1/-1}.st-lead{font-size:2.2rem}.st-ring{width:112px;height:112px}}
.chart.st-chart{height:300px}
@media(max-width:600px){.chart.st-chart{height:250px}}
.chart-legend.fold .lg.off{display:none}
.lg-more{margin:0 0 6px;font-size:.82rem}
details.hint summary{cursor:pointer}
.rklist{list-style:none;margin:0;padding:0}
@media(min-width:900px){.rklist{columns:2;column-gap:34px}}
.rklist li{break-inside:avoid;display:grid;grid-template-columns:34px 1fr 60px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.rk-n{font-size:1.25rem;font-weight:700;text-align:center;line-height:1.1}
.rklist li:nth-child(-n+3) .rk-n{font-size:1.5rem}
.rk-n small{display:block;font-size:.68rem;font-weight:600}
.rk-m{display:grid;gap:3px;min-width:0}
.rk-t b{font-size:1rem}
.rk-bar{display:block;height:8px;background:var(--land);border-radius:4px;overflow:hidden}
.rk-bar i{display:block;height:100%;background:var(--pc);border-radius:4px}
.rk-s{font-size:.8rem;color:var(--muted)}
.rk-sp{text-align:right}
.st-more{margin-top:12px;border-top:1px solid var(--line)}
.st-more summary{cursor:pointer;color:var(--muted);font-size:.9rem;padding:10px 0}
.st-more .tools{display:flex;gap:8px;margin:0 0 8px}
.winpick .adv{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
.winpick .adv[hidden]{display:none}
.subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.subtabs a{padding:7px 13px;color:var(--muted);text-decoration:none;white-space:nowrap;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.subtabs a.on{color:#fff;background:var(--accent);border-color:var(--accent);font-weight:600}
.prdl{margin:0;display:grid;gap:8px}
.prdl dt{font-weight:700;margin-top:4px}
.prdl dd{margin:0;color:var(--muted);line-height:1.6;word-break:keep-all}
.prdl dd b{color:var(--fg)}
.kpi-hint{font-size:.74rem;color:var(--muted);margin-top:2px}
.pr-guide summary{cursor:pointer;padding:2px 0}
.pr-guide .prdl{margin-top:10px}

/* === Accessibility and media overrides that must win last: reduced motion, forced colors, print. === */
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
@media(forced-colors:active){.seg .on,#topnav a.on{outline:2px solid Highlight}}
@media(forced-colors:active){.dot{border:1px solid CanvasText}}
@media print{#topnav,#statusbar,.legalnav,.like,#toast{display:none!important}}
@media print{main{padding-bottom:0}}
.reduce-motion .rankparty,.reduce-motion .card.champ,.reduce-motion .ticker li.mine{animation:none!important}
.reduce-motion .cheer-opt,.reduce-motion .chcard,.reduce-motion .confetti{animation:none!important}
@media(prefers-reduced-motion:reduce){.cheer-opt,.chcard{animation:none!important}}
.reduce-motion .td-pick,.reduce-motion .td-bar i{transition:none!important}
.reduce-motion .td-rbar i{transition:none!important}
.reduce-motion .card[data-rank="1"]{animation:none}
@media(prefers-reduced-motion:reduce){.card[data-rank="1"]{animation:none}}
@media(forced-colors:active){.like,.td-ans,.seg button,.chip,.td-toggle{border:2px solid ButtonText}}
@media(forced-colors:active){.card{border:1px solid CanvasText}}
.reduce-motion .vres{animation:none}
@media(prefers-reduced-motion:reduce){.vres{animation:none}}
@media(forced-colors:active){#tabbar .tab.on{outline:2px solid Highlight}}
@media print{#tabbar{display:none!important}}
@media(prefers-reduced-motion:reduce){.me .me-lvbar i{transition:none}}
@media(prefers-reduced-motion:reduce){.welcome{animation:none}}
.reduce-motion .welcome{animation:none}
.reduce-motion .vres.first-vote,.reduce-motion .vres-fv .medal{animation:none!important}
@media(prefers-reduced-motion:reduce){.vres.first-vote,.vres-fv .medal{animation:none!important}}
.reduce-motion .spark.pulse .sp-sweep{animation:none}
.reduce-motion .spark.pulse .sp-base{opacity:1}
.reduce-motion .spark.pulse .sp-hot{display:none}
@media(prefers-reduced-motion:reduce){.spark.pulse .sp-sweep{animation:none}.spark.pulse .sp-base{opacity:1}.spark.pulse .sp-hot{display:none}}
.reduce-motion #map .bulb.tw,.reduce-motion #map .bulb.tw .halo,.reduce-motion #map .land.glow,.reduce-motion #map .tipg{animation:none}
@media(prefers-reduced-motion:reduce){#map .bulb.tw,#map .bulb.tw .halo,#map .land.glow,#map .tipg{animation:none}}
.reduce-motion .card.mine.fresh,.reduce-motion .chcard.mine.fresh,.reduce-motion .card.mine.fresh .mine-bubble::after,.reduce-motion .chcard.mine.fresh::after,.reduce-motion #map .mine-mark.fresh .aura,.reduce-motion #map .mine-mark.fresh .star{animation:none}
@media(prefers-reduced-motion:reduce){.card.mine.fresh,.chcard.mine.fresh,.card.mine.fresh .mine-bubble::after,.chcard.mine.fresh::after,#map .mine-mark.fresh .aura,#map .mine-mark.fresh .star{animation:none}}