/* festival.css — lễ hội theo ngày (js/festival.js): ruy-băng HUD, khối lễ hội trong bảng Sự kiện, ruy-băng + hiệu ứng màn đăng nhập. Màu theo lễ: --fc / --fc2 */
#festRibbon{position:absolute;top:calc(12px + var(--safe-t,0px));left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:6px;max-width:min(180px,16vw);padding:5px 10px 5px 7px;border:0;border-radius:999px;cursor:pointer;font-family:var(--fh);color:#fff;background:linear-gradient(135deg,var(--fc,#ff7a1a),var(--fc2,#5b2a86));box-shadow:0 4px 14px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 0 rgba(0,0,0,.25);line-height:1.1}
#festRibbon .fr-emoji{font-size:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
#festRibbon .fr-name{font-weight:900;font-size:.82em;white-space:nowrap}
#festRibbon .fr-sub{font-weight:800;font-size:.68em;opacity:.95;white-space:nowrap}
#festRibbon.ready{animation:festPulse 1.6s ease-in-out infinite}
@keyframes festPulse{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.25)}50%{box-shadow:0 4px 22px rgba(255,210,60,.75)}}
body.touch #festRibbon,#festRibbon.low{top:auto;bottom:calc(14px + var(--safe-b,0px));left:calc(62px + var(--safe-l,0px));transform:none;padding:4px 9px 4px 6px;max-width:none}   /* điện thoại: thanh trên đã kín (xu / kc / năng lượng) → ruy-băng nằm góc dưới trái, cạnh cột nút dọc */
body.touch #festRibbon .fr-name,#festRibbon.low .fr-name{display:none}
@media (max-width:1100px){#festRibbon .fr-name{display:none}}
@media (max-width:900px),(pointer:coarse){#festRibbon{top:auto;bottom:calc(14px + var(--safe-b,0px));left:calc(62px + var(--safe-l,0px));transform:none;padding:4px 9px 4px 6px;max-width:none}}

/* ── khối lễ hội trong bảng Sự kiện ── */
.fest-wrap{margin:0 0 16px;padding:0 0 14px;border-radius:24px;border:3px solid var(--fc,#ff7a1a);background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.08);overflow:hidden;font-family:var(--fh)}
.fest-hero{position:relative;display:flex;align-items:center;gap:18px;padding:20px 24px;color:#fff;background:linear-gradient(105deg,var(--fc,#ff7a1a) 0%,var(--fc2,#5b2a86) 100%);overflow:hidden}
.fest-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 30%,rgba(255,255,255,.28),transparent 42%),radial-gradient(circle at 85% 80%,rgba(255,255,255,.16),transparent 40%);pointer-events:none}
.fest-hero .fh-emoji{position:relative;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);border:3px solid rgba(255,255,255,.55);box-shadow:0 8px 20px rgba(0,0,0,.2),inset 0 0 0 6px rgba(255,255,255,.12);flex:none}
.fest-hero .fh-emoji span{font-size:46px;line-height:1;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25));animation:festBob 2.6s ease-in-out infinite}
@keyframes festBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
.fest-hero .fh-text{position:relative;flex:1;min-width:200px}
.fest-hero .fh-text em{display:inline-block;font-style:normal;font-weight:800;font-size:.78em;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.35)}
.fest-hero h4{margin:6px 0 2px;font-size:1.95em;line-height:1.05;text-shadow:0 3px 0 rgba(0,0,0,.22)}
.fest-hero p{margin:0;font-weight:800;font-size:.9em;opacity:.95;text-shadow:0 1px 0 rgba(0,0,0,.2);max-width:520px}
.fest-hero .fh-side{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.fest-hero .fh-clock{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:#fff;color:var(--fc2,#5b2a86);font-weight:900;font-size:.88em;box-shadow:0 4px 0 rgba(0,0,0,.18);white-space:nowrap}
.fest-hero .fh-clock svg{width:16px;height:16px}
.fest-hero .fh-ring{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ffd23f calc(var(--p,0)*1%),rgba(255,255,255,.25) 0);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.fest-hero .fh-ring b{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--fc2,#5b2a86);font-size:1.25em;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.fest-hero .fh-ring small{font-size:.55em;opacity:.85}
.fest-hero .fh-deco{position:absolute;right:160px;top:8px;font-size:1.6em;letter-spacing:.35em;opacity:.55;pointer-events:none}
.fest-sum{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 16px 10px;padding:10px 12px;border-radius:14px;background:#fff7e0;border:2px dashed #f3d58a}
.fest-sum .fs-lbl{display:inline-flex;align-items:center;gap:6px;font-weight:900;color:#6b4a12;font-size:.9em}
.fest-sum .fs-lbl svg{width:18px;height:18px;color:#c98a44}
.fest-sum .fs-shop{margin-left:auto}
.fest-wrap .chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px 4px 6px;border-radius:999px;font-weight:900;font-size:.84em;white-space:nowrap;border:2px solid transparent}
.fest-wrap .chip svg{width:15px;height:15px}
.fest-wrap .chip.coin{background:#fff3c4;color:#9a5a00;border-color:#ffd96b}
.fest-wrap .chip.gem{background:#e3f0ff;color:#1b5fd1;border-color:#b7d2ff}
.fest-wrap .chip.deco{background:#e8f8e8;color:#2f7a2f;border-color:#b6e3b6}
.fest-tasks{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin:0 16px}
.fest-task{position:relative;display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;border-radius:18px;background:#fff;border:2px solid #efe1c8;box-shadow:0 4px 0 #efe1c8;transition:transform .15s}
.fest-task .ft-no{position:absolute;left:-2px;top:-2px;width:26px;height:26px;border-radius:14px 6px 14px 6px;display:grid;place-items:center;background:var(--fc,#ff7a1a);color:#fff;font-weight:900;font-size:.8em;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.fest-task.ready{border-color:#f3b63a;box-shadow:0 4px 0 #e0a21a,0 0 0 4px rgba(243,182,58,.2);background:linear-gradient(180deg,#fffdf4,#fff6d8)}
.fest-task.ready .ft-ico{animation:festBob 1.8s ease-in-out infinite}
.fest-task.done{opacity:.8;border-color:#9ad29a;box-shadow:0 4px 0 #9ad29a;background:#f6fff6}
.fest-task .ft-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--fc,#ff7a1a),var(--fc2,#5b2a86));color:#fff;flex:none;box-shadow:0 3px 8px rgba(0,0,0,.18);margin-top:4px}
.fest-task .ft-ico svg{width:24px;height:24px;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.fest-task .ft-main,.fest-big .fb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.fest-task b{font-size:.94em;line-height:1.25;color:#3a2a14}
.fest-bar{position:relative;height:16px;border-radius:99px;background:#efe6d3;overflow:hidden;box-shadow:inset 0 2px 3px rgba(0,0,0,.08)}
.fest-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--fc,#ff7a1a),var(--fc2,#5b2a86));border-radius:99px;transition:width .4s}
.fest-bar em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:.72em;color:#3a2a14;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.fest-task.done .fest-bar i{background:#43c463}
.ft-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ft-row .ft-rw{display:inline-flex;gap:6px;flex-wrap:wrap}
.ft-stamp{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#43c463;color:#fff;font-weight:900;font-size:.8em;box-shadow:0 2px 0 #2f8a2f}
.ft-stamp svg{width:14px;height:14px}
.fest-big{position:relative;display:flex;align-items:center;gap:16px;margin:12px 16px 0;padding:14px 18px;border-radius:20px;border:3px solid #d9a35a;background:var(--wood-tex,none) center/320px,linear-gradient(180deg,#f6d9a3,#e9b86f);background-blend-mode:multiply;color:#4a2c10;box-shadow:0 6px 0 #a56b2b,0 10px 22px rgba(0,0,0,.12)}
.fest-big.ready{border-color:#ffd23f;box-shadow:0 6px 0 #a56b2b,0 0 0 5px rgba(255,210,63,.35),0 10px 26px rgba(255,196,31,.35)}
.fest-big.done{filter:saturate(.8)}
.fest-big .fb-ico{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;background:#fff8ea;border:3px solid #a56b2b;box-shadow:inset 0 0 0 4px #ffe7bf;flex:none}
.fest-big .fb-ico span{font-size:44px;line-height:1;filter:drop-shadow(0 3px 2px rgba(0,0,0,.2))}
.fest-big.ready .fb-ico span{animation:festBob 1.6s ease-in-out infinite}
.fest-big .fb-kicker{font-weight:900;font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:#7a4a14}
.fest-big b{font-size:1.25em;line-height:1.1;color:#3a2008;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.fest-big .fb-dots{display:inline-flex;align-items:center;gap:5px;font-weight:900;font-size:.82em;color:#5a3a14}
.fest-big .fb-dots i{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #a56b2b}
.fest-big .fb-dots i.on{background:#43c463;border-color:#2f8a2f}
.fest-big .fb-dots span{margin-left:4px}
.fest-big .fb-rw{display:flex;flex-wrap:wrap;gap:6px}
.fest-big .fb-btn{flex:none;padding:12px 22px;font-size:1em}
.fest-big .fb-btn svg{width:18px;height:18px}
.fest-next{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 16px;border-radius:18px;background:linear-gradient(135deg,#eef4ff,#f8f0ff);border:2px dashed #c9d6ff;color:#2b3a8f;font-family:var(--fh)}
.fest-next .fn-emoji{font-size:34px;line-height:1}
.fest-next div{display:flex;flex-direction:column;gap:2px}
.fest-next b{font-size:1.05em}
.fest-next span{font-weight:700;font-size:.86em;color:#4d5a8f}
@media (max-width:640px){.fest-hero{padding:16px 16px;gap:12px}.fest-hero .fh-emoji{width:64px;height:64px}.fest-hero .fh-emoji span{font-size:34px}.fest-hero h4{font-size:1.5em}.fest-hero .fh-deco{display:none}.fest-hero .fh-side{flex-direction:row}.fest-sum,.fest-tasks,.fest-big{margin-left:10px;margin-right:10px}.fest-big{flex-wrap:wrap}.fest-big .fb-btn{width:100%}}

/* ── màn đăng nhập ── */
.fest-auth{display:flex;align-items:center;gap:8px;margin:-6px -6px 10px;padding:8px 12px;border-radius:14px;color:#fff;font-weight:800;font-size:.86em;background:linear-gradient(135deg,var(--fc,#ff7a1a),var(--fc2,#5b2a86));box-shadow:0 3px 10px rgba(0,0,0,.18)}
.fest-auth span{font-size:20px;line-height:1}
.fest-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.fest-fx i{position:absolute;top:-40px;font-style:normal;opacity:.85;animation:festFall linear infinite;will-change:transform}
.fest-fx.fx-snow i{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.8)}
.fest-fx.fx-hearts i{color:#ff5c8a}
.fest-fx.fx-fireworks i{color:#ffd23f;animation-name:festRise}
.fest-fx.fx-balloons i{animation-name:festRise}
@keyframes festFall{0%{transform:translateY(-40px) rotate(0deg)}100%{transform:translateY(110vh) rotate(360deg)}}
@keyframes festRise{0%{transform:translateY(110vh) scale(.8);opacity:0}15%{opacity:.9}100%{transform:translateY(-60px) scale(1.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.fest-fx{display:none}#festRibbon.ready{animation:none}.fest-hero .fh-emoji span,.fest-task.ready .ft-ico,.fest-big.ready .fb-ico span{animation:none}}
