/* 広場のハロウィンの飾り（HALLOWEEN1006）— js/halloween-deco.js が使う。吹き出し・名前の帯の規則は JS が <style id="hwDecoCss"> に書く */

/* ---------- 宣伝バナー ---------- */
.hwbn{position:relative;margin:10px 0 14px;border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(58,35,80,.22);background:#2a1440}
.hwbn__in{position:relative;aspect-ratio:1080/400;min-height:118px}
.hwbn--card .hwbn__in{aspect-ratio:1080/520}
.hwbn--sheet{margin:12px 0 0}
.hwbn--sheet .hwbn__in{aspect-ratio:1080/420;min-height:104px}
.hwbn__s{position:absolute;inset:0;display:block;background-size:cover;background-position:right center;text-decoration:none;color:#fff}
.hwbn__s::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,10,44,.86) 0%,rgba(26,10,44,.62) 42%,rgba(26,10,44,0) 70%)}
.hwbn__t{position:absolute;left:16px;top:50%;transform:translateY(-50%);max-width:58%;display:flex;flex-direction:column;gap:4px}
.hwbn__t b{font-size:clamp(17px,5vw,22px);line-height:1.25;font-weight:800;letter-spacing:.02em;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.hwbn__t small{display:inline-block;align-self:flex-start;font-size:14px;font-weight:700;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,#ff9a4d,#e85d9f);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.hwbn__m{position:absolute;right:4%;bottom:-6%;height:104%;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.hwbn__c{position:absolute;right:34%;bottom:8%;height:46%;width:auto;animation:hwbnBob 2.4s ease-in-out infinite}
.hwbn__r{position:absolute;right:8%;top:50%;height:78%;width:auto;transform:translateY(-50%);filter:drop-shadow(0 0 14px rgba(246,207,73,.75));animation:hwbnBob 2.6s ease-in-out infinite}
@keyframes hwbnBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.hwbn__in.is-rot .hwbn__s{opacity:0;animation:hwbnRot 15s infinite}
.hwbn__in.is-rot .hwbn__s.is-2{animation-delay:5s}
.hwbn__in.is-rot .hwbn__s.is-3{animation-delay:10s}
@keyframes hwbnRot{0%{opacity:0;visibility:visible;z-index:2}3%,30%{opacity:1;visibility:visible;z-index:2}34%,100%{opacity:0;visibility:hidden;z-index:1}}
.hwbn__x{position:absolute;top:6px;right:6px;z-index:5;width:32px;height:32px;border-radius:50%;border:0;background:rgba(20,8,34,.62);color:#fff;font-size:18px;line-height:32px;padding:0;cursor:pointer}
@media (prefers-reduced-motion:reduce){.hwbn__in.is-rot .hwbn__s{animation:none;opacity:0}.hwbn__in.is-rot .hwbn__s.is-1{opacity:1}.hwbn__c,.hwbn__r{animation:none}}

/* ---------- 称号の札（文字は画面で・左右 112px の3スライス） ---------- */
.hw-title{display:inline-flex;align-items:center;min-height:26px;margin:4px 0 2px;padding:3px 6px;border:solid transparent;border-width:0 20px;border-image:var(--hwi) 0 112 fill/0 20px/0 stretch;background:var(--hwc,#5e2a7a) padding-box;border-radius:999px;color:#fff;font-size:14px;font-weight:800;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.4);box-sizing:border-box}

/* ---------- ふたりの指輪 ---------- */
.hw-rings{margin:12px 0;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,#fff7ec,#f6efff);border:1px solid #ecdcf7}
.hw-rings__h{display:flex;align-items:baseline;gap:8px;margin:0 0 8px;color:#3a2350;font-size:14px}
.hw-rings__h span{font-size:14px;color:#6b5a80}
.hw-rings__row,.hw-rings__all{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hw-rings__all{margin-top:8px}
.hw-rings__i{width:48px;height:48px;border-radius:50%;background:#2a1440;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #f6cf49}
.hw-rings__i img{width:42px;height:42px;object-fit:contain}
.hw-rings__i.is-hw{box-shadow:inset 0 0 0 2px #f6cf49,0 0 10px rgba(232,93,159,.45)}
.hw-rings__more{height:48px;min-width:48px;padding:0 10px;border-radius:24px;border:0;background:#8d6fd1;color:#fff;font-weight:800;font-size:14px}
.hw-rings__go{display:inline-block;margin-top:8px;font-size:14px;color:#7a3fb0;font-weight:700}

/* ---------- 広場に流れる1行 ---------- */
.hw-feed{position:fixed;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));z-index:9990;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:linear-gradient(135deg,rgba(42,20,64,.95),rgba(107,34,117,.95));color:#fff;font-size:14px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.3);animation:hwFeedIn .45s ease both}
.hw-feed img{flex:0 0 28px;border-radius:50%}
.hw-feed span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-feed.is-out{animation:hwFeedOut .6s ease both}
@keyframes hwFeedIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes hwFeedOut{to{opacity:0;transform:translateY(-14px)}}

/* ---------- 入室の演出 ---------- */
.hw-entry{position:fixed;left:0;right:0;top:30%;z-index:9991;height:96px;pointer-events:none}
.hw-entry__rb{position:absolute;left:40px;right:0;top:22px;height:56px;background:center/100% 100% no-repeat,linear-gradient(90deg,#4b2a78,#6b2275);border-radius:28px 0 0 28px;display:flex;align-items:center;gap:6px;padding-left:76px;color:#fff;animation:hwEnRb 2.8s ease both}
.hw-entry__rb b{font-size:15px;max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-entry__rb small{font-size:14px;opacity:.9}
.hw-entry__ride{position:absolute;left:0;top:0;width:96px;height:96px;animation:hwEnRide 2.8s ease both}
@keyframes hwEnRb{0%{clip-path:inset(0 100% 0 0)}25%,80%{clip-path:inset(0 0 0 0);opacity:1}100%{opacity:0}}
@keyframes hwEnRide{0%{transform:translateX(-110px)}25%{transform:translateX(16px)}80%{transform:translateX(16px);opacity:1}100%{transform:translateX(120vw);opacity:0}}

/* ===== 点検の直し（1.1.0）: バナーの × は 44px・文字と地の差 ===== */
.hwbn__x{width:44px;height:44px;line-height:44px;top:4px;right:4px}
.hwbn__t small{background:linear-gradient(135deg,#a83a0c,#a82d66)}

/* ===== NAMEPLATE1008 称号の札: 角の丸い1枚の札（札の色＋淡い影）。左右の飾りは札の絵の左端・右端を、札の両端の内側に重ねる ===== */
.hw-title{position:relative;isolation:isolate;overflow:hidden;display:inline-block;max-width:100%;white-space:nowrap;text-overflow:ellipsis;min-height:0;margin:4px 0 2px;padding:2px 1.9em;border:0;border-image:none;background:var(--hwc,#5e2a7a) linear-gradient(180deg,rgba(255,255,255,0),rgba(0,0,0,.2));border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.18);line-height:1.55}
.hw-title::before,.hw-title::after{content:"";position:absolute;top:0;bottom:0;width:1.8em;background-image:var(--hwi);background-repeat:no-repeat;background-size:auto 112%;pointer-events:none;z-index:-1}
.hw-title::before{left:.05em;background-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
.hw-title::after{right:.05em;background-position:right center;-webkit-mask-image:linear-gradient(270deg,#000 62%,transparent);mask-image:linear-gradient(270deg,#000 62%,transparent)}