/* Quiz Italien LV2 — styles. Variables : --bg --card --tx --mu --ac --on --ok --ko --bd --gold --glow ; thèmes via data-theme sur <html> ; taille du texte via --z. */
:root{--bg:#eef3ec;--card:#fff;--tx:#18241d;--mu:#5d6b62;--ac:#1f6b4a;--on:#fff;--ok:#1f8a55;--ko:#c8372d;--bd:#d5dfd6;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#101712;--card:#1a241d;--tx:#eef4ee;--mu:#9bb0a2;--ac:#4cc38a;--on:#0c140f;--ok:#4cc38a;--ko:#ff7a6e;--bd:#2c3b31;color-scheme:dark}}
:root[data-theme=dark]{--bg:#101712;--card:#1a241d;--tx:#eef4ee;--mu:#9bb0a2;--ac:#4cc38a;--on:#0c140f;--ok:#4cc38a;--ko:#ff7a6e;--bd:#2c3b31;color-scheme:dark}
html,body{margin:0}
body{background:var(--bg);color:var(--tx);font:17px/1.45 "Avenir Next",ui-rounded,"Segoe UI",system-ui,sans-serif;min-height:100vh}
main{max-width:560px;margin:0 auto;padding:20px 16px 48px}
h1{font-size:30px;line-height:1.1;margin:8px 0 4px;letter-spacing:-.5px}
h2{font-size:19px;margin:28px 0 10px}
p{margin:0 0 10px}.mu{color:var(--mu)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.stat{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px 4px;text-align:center}
.stat b{display:block;font-size:26px}.stat span{font-size:12px;color:var(--mu)}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.cat{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px 10px;text-align:left}
.cat .e{font-size:26px;display:block}.cat small{color:var(--mu)}
.cat.all{grid-column:1/-1;background:var(--ac);color:var(--on);border-color:var(--ac)}
.cat.all small{color:var(--on);opacity:.85}
.tr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.t{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center}
.t i{font-style:normal;font-size:28px}.t small{display:block;color:var(--mu);font-size:12px;line-height:1.25}
.t.off{opacity:.45;filter:grayscale(1)}
.bar{height:8px;background:var(--bd);border-radius:4px;overflow:hidden;margin:6px 0 20px}
.bar div{height:100%;background:var(--ac);transition:width .3s}
.q{font-size:22px;font-weight:700;line-height:1.25;margin:0 0 18px}
.o{display:block;width:100%;text-align:left;background:var(--card);border:2px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:10px}
.o.good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--card))}
.o.bad{border-color:var(--ko);background:color-mix(in srgb,var(--ko) 15%,var(--card))}
.fb{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px;margin:6px 0 14px}
.btn{background:var(--ac);color:var(--on);border:0;border-radius:12px;padding:14px 18px;font-weight:700;width:100%}
.ghost{background:none;border:1px solid var(--bd);color:var(--mu);border-radius:10px;padding:8px 12px;font-size:14px}
.big{font-size:64px;text-align:center;margin:10px 0 0}
.res{text-align:center}.res h1{font-size:28px}
.new{background:color-mix(in srgb,var(--ac) 16%,var(--card));border:1px solid var(--ac);border-radius:12px;padding:12px;margin:14px 0}
.top{display:flex;justify-content:space-between;align-items:center}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bd);border-radius:12px;padding:4px;margin:14px 0}
.seg button{border:0;background:none;border-radius:9px;padding:10px;font-weight:700;color:var(--mu)}
.seg button.on{background:var(--card);color:var(--tx)}
.fc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:300px;background:var(--card);border:2px solid var(--bd);border-radius:20px;padding:20px;text-align:center}
.fc .em{font-size:96px;line-height:1}.fc .w{font-size:28px}.fc small{color:var(--mu);font-size:15px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.btn.alt{background:var(--card);color:var(--tx);border:2px solid var(--bd)}
:root{--gold:#f5b942;--glow:#2fb36f66}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--glow:#4cc38a88}}
button{transition:transform .15s,box-shadow .25s,border-color .25s,background .25s}
button:hover:not(:disabled){box-shadow:0 0 0 2px var(--ac),0 0 22px var(--glow);transform:translateY(-2px)}
button:active:not(:disabled){transform:scale(.97)}
#app>*{animation:in .35s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.o.good{box-shadow:0 0 26px var(--glow);animation:pulse .6s}
.o.bad{animation:shake .4s}
@keyframes pulse{50%{transform:scale(1.03)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.t:not(.off){border-color:var(--gold);box-shadow:0 0 14px #f5b94255}
.bd{--s:84px;width:var(--s);height:var(--s);flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) var(--p),var(--bd) 0);box-shadow:0 0 22px #f5b94266;position:relative;animation:glo 2.6s ease-in-out infinite}
.bd::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--card)}
.bd b{position:relative;font-size:calc(var(--s)*.4)}
@keyframes glo{50%{box-shadow:0 0 34px #f5b942aa}}
.pc{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:12px;margin-bottom:10px}
.pc .pi{flex:1}.pc small{display:block;color:var(--mu)}
.av{font-size:38px}
input{font:inherit;width:100%;box-sizing:border-box;padding:12px;border-radius:12px;border:2px solid var(--bd);background:var(--card);color:var(--tx);margin:6px 0}
input:focus{outline:none;border-color:var(--ac);box-shadow:0 0 18px var(--glow)}
.avs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.av2{font-size:24px}.av2.on{border-color:var(--ac);box-shadow:0 0 14px var(--glow)}
.pop{position:fixed;left:50%;top:22%;transform:translateX(-50%);font-weight:800;font-size:28px;color:var(--gold);text-shadow:0 0 16px #f5b942;animation:fl 1.1s ease-out forwards;z-index:9;pointer-events:none}
@keyframes fl{to{transform:translate(-50%,-70px);opacity:0}}
.ov{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:10;text-align:center;color:#fff;animation:in .3s}
.ov .bd{margin:0 auto 16px}
body{background:radial-gradient(900px 420px at 50% -90px,color-mix(in srgb,var(--ac) 24%,transparent),transparent),var(--bg)}
main{padding-top:14px}
.brand{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.brand .fl{font-size:34px;width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:var(--card);border:1px solid var(--bd);box-shadow:0 6px 20px #0000001a}
.brand h1{margin:0;font-size:28px;letter-spacing:-.6px}.brand small{color:var(--mu)}
.pc{border-radius:20px;box-shadow:0 8px 28px #0000001f;background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--gold) 10%,var(--card)));border-color:color-mix(in srgb,var(--gold) 40%,var(--bd))}
.seg{padding:5px;border-radius:16px;box-shadow:inset 0 1px 3px #00000018}
.seg button{padding:12px;border-radius:12px;font-size:16px}
.seg button.on{background:var(--ac);color:var(--on);box-shadow:0 4px 14px var(--glow)}
.stats{gap:10px}
.stat{border-radius:16px;box-shadow:0 4px 14px #0000000f;padding:12px 4px}
.stat:nth-child(1) b{color:var(--ok)}.stat:nth-child(2) b{color:var(--ko)}.stat:nth-child(3) b{color:var(--gold)}.stat:nth-child(4) b{color:var(--ac)}
.cats{gap:12px}
.cat{border-radius:18px;padding:14px;box-shadow:0 6px 18px #0000001a;font-weight:700;position:relative}
.cat .e{width:48px;height:48px;display:grid;place-items:center;font-size:26px;border-radius:14px;background:color-mix(in srgb,var(--ac) 14%,var(--card));margin-bottom:10px}
.cat small{font-weight:500}
.cat::after{content:"›";position:absolute;right:14px;top:12px;font-size:24px;color:var(--mu)}
.cat.all{background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#000));box-shadow:0 10px 30px var(--glow);padding:18px}
.cat.all .e{background:#ffffff29}.cat.all::after{color:var(--on)}
h2{font-size:20px;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
h2::before{content:"";width:5px;height:20px;border-radius:3px;background:var(--gold)}
.t{border-radius:16px}
.bar{height:10px;border-radius:5px}.bar div{background:linear-gradient(90deg,var(--ac),var(--gold));box-shadow:0 0 10px var(--glow)}
.q{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:20px;box-shadow:0 8px 24px #0000001a}
.o{border-radius:16px;padding:16px;font-weight:600;box-shadow:0 3px 10px #0000000d}
.lt{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;margin-right:10px;background:color-mix(in srgb,var(--ac) 16%,var(--card));font-size:14px;font-weight:800;color:var(--ac)}
.btn{background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 65%,#000));border-radius:16px;padding:16px 18px;box-shadow:0 8px 22px var(--glow)}
.btn.alt{background:var(--card);box-shadow:none}
.fc{border-radius:28px;min-height:320px;background:radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--ac) 14%,var(--card)),var(--card) 70%);box-shadow:0 14px 36px #0000002e}
.fc .em{filter:drop-shadow(0 8px 14px #0000003a)}
.res .big{filter:drop-shadow(0 0 20px var(--gold))}
.gear{margin-left:auto;font-size:22px;padding:8px 12px}
.ar{flex-wrap:wrap}.ar .row{width:100%;grid-template-columns:84px 1fr 1fr;margin-top:6px}.ar input{margin:0;text-align:center}
.ar .btn{padding:10px;font-size:14px}
.top{flex-wrap:wrap;gap:8px}
.avi{width:46px;height:46px;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--gold);box-shadow:0 0 12px #f5b94255}
.avl{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--ac),var(--gold));box-shadow:0 0 12px var(--glow)}
.avp{display:flex;align-items:center;gap:14px;margin:8px 0}
.avpick{width:84px;height:84px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:30px;cursor:pointer;background:var(--card);border:2px dashed var(--ac);overflow:hidden;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.avpick:hover{transform:scale(1.05);box-shadow:0 0 22px var(--glow)}
.avpick img{width:100%;height:100%;object-fit:cover}
.pc label.av{cursor:pointer;position:relative}.pc label.av::after{content:"📷";position:absolute;right:-4px;bottom:-4px;font-size:13px;background:var(--card);border-radius:50%;padding:2px;box-shadow:0 1px 4px #0003}
#app>*{animation:in .42s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*35ms)}
.cats>*,.tr>*{animation:in .42s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--j,0)*28ms + 90ms)}
#fb>*{animation:in .3s cubic-bezier(.22,1,.36,1) both}
button{transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s,background .3s;-webkit-tap-highlight-color:transparent;will-change:transform}
.fc.fl{animation:flp .45s cubic-bezier(.22,1,.36,1) both}
@keyframes flp{from{transform:perspective(900px) rotateY(80deg);opacity:.3}}
@keyframes in{from{opacity:0;transform:translateY(12px) scale(.985)}}
.warn{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,var(--card));font-size:14px;margin-top:18px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
main{zoom:var(--z,1)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.chip{border:1px solid var(--bd);background:var(--card);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600}
.chip.on{background:var(--ac);color:var(--on);border-color:var(--ac);box-shadow:0 4px 14px var(--glow)}
.day{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(135deg,color-mix(in srgb,#ff7a1a 18%,var(--card)),var(--card));border:1px solid color-mix(in srgb,#ff7a1a 45%,var(--bd));border-radius:18px;padding:12px 14px;margin:0 0 4px;box-shadow:0 6px 18px #0000001a}
.day .fla{width:52px;text-align:center;line-height:1;filter:drop-shadow(0 0 10px #ff7a1a88);animation:flk 1.6s ease-in-out infinite}
.day div{flex:1}.day small{display:block;color:var(--mu)}.day .go{font-size:20px}.day.done{opacity:.8}
@keyframes flk{50%{transform:scale(1.1) rotate(-4deg)}}
textarea{font:inherit;width:100%;box-sizing:border-box;padding:12px;border-radius:12px;border:2px solid var(--bd);background:var(--card);color:var(--tx);margin:6px 0;resize:vertical}
textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 18px var(--glow)}
textarea.code{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all}
input.good{border-color:var(--ok);box-shadow:0 0 18px var(--glow)}input.bad{border-color:var(--ko);animation:shake .4s}
.arc{display:flex;justify-content:center;align-items:center;gap:14px;font-size:54px;margin-bottom:10px;font-weight:400}.arc .ar{font-size:26px;color:var(--mu)}
.lq{display:block}
.bar.ta div{transition:width .1s linear;background:linear-gradient(90deg,var(--ko),var(--gold),var(--ac))}
.tat{font-size:18px}.coin{font-weight:800;color:var(--gold);font-size:18px}
.dlg{background:var(--card);color:var(--tx);border-radius:20px;padding:20px;width:min(420px,90vw);text-align:left;box-shadow:0 20px 60px #0008}.dlg h2{margin-top:0}
.si{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:10px 12px;margin-bottom:8px}.si .pi{flex:1}.si small{display:block;color:var(--mu)}.si .btn{width:auto;padding:10px 14px;font-size:14px}
.sw{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;font-size:24px}.sw.tg{background:color-mix(in srgb,var(--gold) 20%,var(--card))}
.btn:disabled{opacity:.45;box-shadow:none}
.pr{display:grid;grid-template-columns:1fr auto;gap:2px 8px}.pr .bar{grid-column:1/-1;margin:2px 0 10px}
.hw{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--bd)}.hw small{margin-left:auto;color:var(--ko);white-space:nowrap}
input[type=range]{padding:0;border:0;accent-color:var(--ac);box-shadow:none}
.duel h2{margin-top:0}
.stats.fs .stat b{font-size:17px;line-height:1.3}
.frm{position:relative;display:inline-grid;place-items:center;border-radius:50%;padding:3px;isolation:isolate}
.frm::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fb);z-index:-1}
.frm .avi,.frm .avl{border:0}
.frm-gold{--fb:linear-gradient(135deg,#f5b942,#fff1b8,#d99a1e)}
.frm-rainbow{--fb:conic-gradient(#ff4d4d,#ffb84d,#fff04d,#4dff88,#4dd2ff,#7a4dff,#ff4dd2,#ff4d4d)}
.frm-rainbow::before,.frm-fire::before{animation:spin 3s linear infinite}
.frm-neon{--fb:#39ff88}.frm-neon::before{box-shadow:0 0 14px #39ff88,0 0 28px #39ff8866;animation:glo2 1.8s ease-in-out infinite}
.frm-fire{--fb:conic-gradient(#ff3d00,#ffb300,#ff6d00,#ffea00,#ff3d00)}.frm-fire::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 18px #ff6d00aa;z-index:-2}
.frm-ice{--fb:linear-gradient(135deg,#e0f7ff,#7fd3ff,#ffffff,#4fb3ff)}.frm-ice::before{box-shadow:0 0 16px #7fd3ff}
.frm-royal{--fb:linear-gradient(135deg,#6a1bb5,#f5b942,#6a1bb5)}.frm-royal::before{box-shadow:0 0 16px #a46bff88}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes glo2{50%{box-shadow:0 0 22px #39ff88,0 0 40px #39ff88aa}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.card2,.msg,.wotd,.day,.si,.pc,.fb,.new{box-sizing:border-box}
.tabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px;margin:14px -4px 14px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:18px;border:1px solid var(--bd);box-shadow:0 6px 18px #0000001a}
.tab{border:0;background:none;border-radius:13px;padding:8px 2px;font-size:12px;font-weight:700;color:var(--mu);display:flex;flex-direction:column;align-items:center;gap:2px}.tab span{font-size:20px}
.tab.on{background:var(--ac);color:var(--on);box-shadow:0 4px 14px var(--glow)}.tab:hover:not(.on){box-shadow:none;transform:none;background:color-mix(in srgb,var(--ac) 10%,transparent)}
.adm{color:#e0262b!important;text-shadow:0 0 12px #e0262b55}
.admb{display:inline-block;margin-left:6px;vertical-align:2px;background:linear-gradient(135deg,#e0262b,#9c1218);color:#fff;font-size:11px;font-weight:800;letter-spacing:.3px;padding:3px 8px;border-radius:999px;box-shadow:0 2px 10px #e0262b66;text-transform:uppercase}
.net{margin-left:auto;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--card);border:1px solid var(--bd);color:var(--mu);white-space:nowrap}.net.on{color:var(--ok);border-color:var(--ok)}
.brand .gear{margin-left:6px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ppl{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;box-sizing:border-box;min-width:0}
.ppl b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ppl small{font-size:11px;color:var(--mu)}.ppl .admb{margin:0;font-size:9px;padding:2px 6px}
.ppl .av{position:relative;font-size:30px;margin-bottom:4px}.ppl .dot{position:absolute;right:0;bottom:2px;width:12px;height:12px;border-radius:50%;background:#9aa59e;border:2px solid var(--card)}.ppl.on .dot{background:#2ecc71;box-shadow:0 0 8px #2ecc71}.ppl.on{border-color:color-mix(in srgb,#2ecc71 50%,var(--bd))}
.clsb{background:color-mix(in srgb,var(--ac) 14%,var(--card));color:var(--ac)!important;font-weight:700;border-radius:999px;padding:2px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onl .stack{display:flex;align-items:center}.onl .stack .av{font-size:20px;margin-left:-10px;transform:scale(.72);transform-origin:center}.onl .stack .av:first-child{margin-left:0}
.credit{text-align:center;color:var(--mu);font-size:13px;margin:22px 0 4px;letter-spacing:.2px}.credit b{color:var(--tx)}
.card2{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:12px 14px;margin:8px 0 0;box-shadow:0 4px 14px #0000000f;font-size:22px}
.card2 b{font-size:16px}.card2 small{display:block;color:var(--mu);font-size:13px}.card2 .bar{margin:6px 0 0}.card2 .go{font-size:18px}
.msg{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,color-mix(in srgb,#ff6fa8 18%,var(--card)),var(--card));border:1px solid color-mix(in srgb,#ff6fa8 50%,var(--bd));border-radius:16px;padding:12px 14px;margin:8px 0 0;font-size:24px}.msg div{flex:1;font-size:15px}.msg .ghost{font-size:14px}
.wotd{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:12px;margin:8px 0 4px}.wotd>b{font-size:15px}
.wds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.wd{background:color-mix(in srgb,var(--ac) 8%,var(--card));border:1px solid var(--bd);border-radius:12px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.wd span{font-size:24px}.wd b{font-size:13px}.wd small{font-size:11px;color:var(--mu)}.wd.seen{border-color:var(--ac)}
.cat.adv{background:linear-gradient(135deg,#1f8a55,#f0f0f0 50%,#c8372d);color:#18241d}.cat.adv small{color:#18241d;opacity:.85}.cat.adv .e{background:#ffffffb0}
select{font:inherit;width:100%;box-sizing:border-box;padding:12px;border-radius:12px;border:2px solid var(--bd);background:var(--card);color:var(--tx);margin:6px 0}
input[type=date]{min-height:48px}
.lgs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.lgt{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:10px 4px;text-align:center;opacity:.5}.lgt span{font-size:28px;display:block}.lgt small{font-size:12px}.lgt.on{opacity:1;border-color:var(--gold);box-shadow:0 0 16px #f5b94266;transform:scale(1.06)}.lgt.past{opacity:.8}
.story{font-size:19px;font-weight:500;line-height:1.7}
.gw{background:none;border:0;padding:0 1px;border-bottom:2px dotted var(--ac);color:var(--tx);font-weight:600;border-radius:0}.gw:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--ac) 14%,transparent)}
.hang{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:14px;margin:8px 0 14px}
.hang svg{stroke:var(--tx);stroke-width:3;fill:none;stroke-linecap:round}
.hword{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;font-size:26px;font-weight:800}.hl{min-width:20px;text-align:center;border-bottom:3px solid var(--ac)}.hl.miss{color:var(--ko)}.hs{min-width:10px}
.kb{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.key{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:10px 0;font-weight:800;text-transform:uppercase}.key.ok{background:color-mix(in srgb,var(--ok) 25%,var(--card))}.key.ko{background:color-mix(in srgb,var(--ko) 20%,var(--card));opacity:.6}
.wsg{display:grid;gap:3px;margin:10px 0;touch-action:manipulation}.wc{aspect-ratio:1;background:var(--card);border:1px solid var(--bd);border-radius:7px;font-weight:800;font-size:15px;padding:0}.wc:hover{transform:none}.wc.s{background:var(--gold);color:#000}.wc.f{background:color-mix(in srgb,var(--ok) 35%,var(--card));border-color:var(--ok)}
.wsl{display:flex;flex-wrap:wrap;gap:6px}.wsl span{background:var(--card);border:1px solid var(--bd);border-radius:999px;padding:5px 10px;font-size:14px}.wsl .done{border-color:var(--ok);color:var(--ok);font-weight:700}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.mc{aspect-ratio:1/1.05;background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#000));color:#fff;border:0;border-radius:14px;font-size:26px;display:grid;place-items:center;padding:6px}
.mc.up{background:var(--card);color:var(--tx);border:2px solid var(--bd);font-size:14px;font-weight:700;animation:flp .35s}.mc.up.it{color:var(--ac)}.mc.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,var(--card))}
.road{position:relative;display:flex;flex-direction:column;gap:14px;padding:10px 0}.road::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:4px dashed color-mix(in srgb,var(--ac) 50%,var(--bd));transform:translateX(-2px)}
.city{position:relative;width:64%;background:var(--card);border:2px solid var(--bd);border-radius:18px;padding:12px;text-align:left;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:10px;box-shadow:0 6px 18px #0000001a}
.city.l{align-self:flex-start}.city.r{align-self:flex-end}.city .ce{grid-row:1/4;font-size:32px;align-self:center}.city small{color:var(--mu);font-size:12px}.city .stars{color:var(--gold);font-size:18px;letter-spacing:2px}
.city.won{border-color:var(--gold)}.city.lock{opacity:.55;filter:grayscale(.7)}
.chest{font-size:110px;text-align:center;margin:16px 0 4px;filter:drop-shadow(0 0 22px #f5b94299)}.chest.empty{opacity:.35;filter:grayscale(1)}.chest.shake{animation:shk .9s}.chest.open{animation:pulse .6s}
@keyframes shk{10%,30%,50%,70%,90%{transform:rotate(-8deg) scale(1.05)}20%,40%,60%,80%{transform:rotate(8deg) scale(1.05)}}
.avb{display:inline-grid;place-items:center;border-radius:50%;padding:4px;background:var(--bgv)}.avb .avl{background:transparent;box-shadow:none;text-shadow:0 1px 4px #0006}.avb .avi{border:0}
.ava{position:relative;display:inline-grid;place-items:center}.acc{position:absolute;font-style:normal;line-height:1;pointer-events:none;filter:drop-shadow(0 2px 2px #0004)}
.acc-top{top:-14px;left:50%;transform:translateX(-50%) rotate(-8deg);font-size:24px}.acc-eyes{top:32%;left:50%;transform:translateX(-50%);font-size:22px}.acc-side{top:-6px;right:-8px;font-size:20px}
.frm-diamond{--fb:conic-gradient(#b9f2ff,#ffffff,#7fd3ff,#e0c3ff,#b9f2ff)}.frm-diamond::before{animation:spin 2.5s linear infinite;box-shadow:0 0 18px #b9f2ff}
.o.sel,input.sel{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,var(--card))}
.hw.ex{align-items:flex-start}.hw.ex div{flex:1}.hw.ex.n{background:color-mix(in srgb,var(--ko) 6%,transparent)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.qs{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.qs .qa{font-size:17px;font-weight:600;color:var(--mu)}.qs .qw{font-size:32px;font-weight:800;line-height:1.15;color:var(--ac);overflow-wrap:anywhere;margin:2px 0}