/* حرب السير — own look. 🎯 عادي = night city (navy + neon street lights), 🎨 كارتون (default) = sunny street: warm sky, asphalt lanes, zebra finish */
:root{--bg:#0d1b2a;--bg2:#1b263b;--ink:#eef2ff;--muted:#a9b4d0;--card:#13213a;--line:#2b3d63;--acc:#ffd166;--acc2:#b38600;--field:#0b1626;--road:#2b2d42;--road2:#3a3d57;--dash:#ffd166;--pink:#ef476f;color-scheme:dark;font-family:"Segoe UI",Tahoma,system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overflow-x:hidden;color:var(--ink)}
body{min-height:100vh;user-select:none;background:radial-gradient(120% 60% at 50% 0,var(--bg2),var(--bg) 70%) fixed,var(--bg)}
body:before{content:"";position:fixed;inset:auto 0 0;height:38vh;pointer-events:none;opacity:.35;background:
  linear-gradient(to top,#000a,transparent),
  repeating-linear-gradient(90deg,transparent 0 18px,#ffd16622 18px 22px,transparent 22px 60px)}
.page{position:relative;width:min(100%,560px);margin:auto;padding:max(10px,env(safe-area-inset-top)) 16px max(26px,env(safe-area-inset-bottom))}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.topline .brand-line{margin:0;min-width:0}
.icon{flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:17px;cursor:pointer}
.sinan-credit{margin:18px auto 0;text-align:center;color:var(--muted);font-size:11px;letter-spacing:1.5px;font-weight:800}
.sinan-credit b{color:var(--acc);font-size:14px;letter-spacing:2px}
.theme-switch{display:flex;width:max-content;margin:0 auto 14px;padding:4px;gap:4px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.theme-switch button{border:0;border-radius:999px;padding:8px 16px;background:transparent;color:var(--muted);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.theme-switch button[aria-pressed="true"]{background:linear-gradient(180deg,#ffe08a,var(--acc));color:#2b1d05}

/* the walker (SVG symbol) */
use{color:var(--pc,#ef476f)}
.w-body{fill:currentColor;stroke:#1b1b2f;stroke-width:2.5}
.w-head{fill:#ffd6a5;stroke:#1b1b2f;stroke-width:2.5}
.w-cap{fill:currentColor;stroke:#1b1b2f;stroke-width:2;stroke-linejoin:round}
.w-eye{fill:#1b1b2f}
.w-smile{fill:none;stroke:#1b1b2f;stroke-width:1.6;stroke-linecap:round}
.w-leg path,.w-arm path{fill:none;stroke:#1b1b2f;stroke-width:4.5;stroke-linecap:round}
.w-leg-b path,.w-arm-b path{stroke:#3d3d5c}
.w-leg,.w-arm{transform-box:fill-box}
.w-leg{transform-origin:50% 0}.w-arm{transform-origin:50% 0}
.walking .w-leg-f,.walking .w-arm-b{animation:swingA .36s ease-in-out infinite alternate}
.walking .w-leg-b,.walking .w-arm-f{animation:swingB .36s ease-in-out infinite alternate}
.walking .runner,.walking.runner,.hero-walk .walking{animation:bob .36s ease-in-out infinite alternate}
@keyframes swingA{from{transform:rotate(26deg)}to{transform:rotate(-26deg)}}
@keyframes swingB{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
@keyframes bob{to{translate:0 -3px}}

/* hero */
.hero{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px;border:1px solid #ffd16655;border-radius:22px;background:linear-gradient(135deg,#22345a,#0f1c33);box-shadow:0 12px 28px #0006}
.hero h1{margin:0;font-size:32px;line-height:1.1;color:var(--acc);text-shadow:0 0 14px #ffd16666}
.hero-walk{position:relative;flex:none;width:84px;height:74px;overflow:hidden;border-radius:16px;background:var(--road)}
.hero-walk .zebra{position:absolute;left:6px;top:0;bottom:0;width:14px;background:repeating-linear-gradient(0deg,#fff 0 7px,transparent 7px 14px);opacity:.9}
.hero-walk svg{position:absolute;bottom:4px;width:40px;height:56px;color:#ef476f;animation:heroWalk 4s linear infinite}
.hero-walk svg .w-leg-f,.hero-walk svg .w-arm-b{animation:swingA .36s ease-in-out infinite alternate}
.hero-walk svg .w-leg-b,.hero-walk svg .w-arm-f{animation:swingB .36s ease-in-out infinite alternate}
@keyframes heroWalk{from{right:-40px}to{right:100%}}
.hero .hero-turn{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 0;font-size:17px;font-weight:800;color:var(--muted)}
.hero-name{display:inline-block;max-width:180px;overflow:hidden;padding:3px 13px;border:0;border-radius:999px;background:linear-gradient(90deg,#ef476f,#ffd166,#06d6a0,#118ab2,#8338ec,#ef476f);background-size:300% 100%;color:#fff;font:inherit;font-size:17px;font-weight:800;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 #0007;box-shadow:0 3px 0 #0004;cursor:pointer}
.hero-name.set{animation:nameDance 1.6s ease-in-out infinite,nameShine 4s linear infinite}
.hero-name.set.go{animation:nameIn .5s cubic-bezier(.2,1.5,.4,1),nameDance 1.6s ease-in-out .5s infinite,nameShine 4s linear infinite}
.hero-name.empty{background:#ffffff26;color:inherit;text-shadow:none;box-shadow:none;outline:2px dashed currentColor;outline-offset:-2px}
@keyframes nameDance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-3deg)}50%{transform:translateY(0) scale(1.06)}75%{transform:translateY(-3px) rotate(3deg)}}
@keyframes nameShine{to{background-position:300% 0}}
@keyframes nameIn{from{transform:scale(.3) rotate(-15deg);opacity:0}}

.card{padding:14px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:0 14px 30px #0005}
.card[hidden]{display:none}
.add-form{display:flex;gap:8px;margin-bottom:12px}
.add-form input{flex:1;min-width:0;height:50px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--field);color:var(--ink);font:inherit;font-size:17px;user-select:text}
.add-form input::placeholder{color:#7b88a8}
.add-form input:focus{outline:2px solid var(--acc);outline-offset:1px}
.add-form button{flex:none;padding:0 16px;border:0;border-radius:14px;background:linear-gradient(180deg,#5fd38d,#2f9e5e);color:#fff;font:inherit;font-size:17px;font-weight:800;cursor:pointer}
.names{display:grid;gap:6px;max-height:330px;overflow:auto}
.tr{display:grid;grid-template-columns:34px minmax(0,1fr) auto 34px;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:14px;background:var(--field);font-size:18px;font-weight:700}
.tr.new{animation:slide .35s ease}
@keyframes slide{from{opacity:0;transform:translateX(-12px)}}
.tr .num{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;font-size:14px;font-weight:800;box-shadow:inset 0 -3px 0 #0003}
.tr .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr .pts{font-size:14px;color:var(--acc)}
.tr .del{grid-column:4;width:30px;height:30px;border:0;border-radius:50%;background:#ffffff14;color:#ff8a8a;font-size:19px;cursor:pointer}
.empty{padding:22px;text-align:center;color:var(--muted);font-size:15px}
.target{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:14px 2px 0;color:var(--muted);font-size:15px;font-weight:700}
.target-pick{display:flex;gap:6px}
.target-pick button{min-width:46px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--field);color:var(--ink);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.target-pick button[aria-pressed="true"]{background:linear-gradient(180deg,#ffe08a,var(--acc));color:#2b1d05;border-color:transparent}
.target-pick button:disabled{opacity:.35}
.status{min-height:20px;margin:12px 0 10px;text-align:center;color:var(--muted);font-size:14px;font-weight:700}
.btn{display:block;width:100%;border:0;font:inherit;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn[hidden]{display:none}
.btn:disabled{opacity:.5;cursor:default}
.btn-main{padding:16px;border-radius:18px;background:linear-gradient(180deg,#ffe08a,var(--acc));color:#2b1d05;font-size:23px;font-weight:800;box-shadow:0 6px 0 var(--acc2),0 12px 24px #0006}
.btn-main:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 var(--acc2)}
.btn-ghost{margin-top:10px;padding:13px;border:1px solid var(--line);border-radius:16px;background:transparent;color:var(--ink);font-size:16px}

/* turn card */
.turn{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:var(--field);border:2px solid var(--pc,var(--line))}
.turn-walker{flex:none;width:48px;height:66px;color:var(--pc)}
.turn.walking .turn-walker .w-leg-f,.turn.walking .turn-walker .w-arm-b{animation:swingA .3s ease-in-out infinite alternate}
.turn.walking .turn-walker .w-leg-b,.turn.walking .turn-walker .w-arm-f{animation:swingB .3s ease-in-out infinite alternate}
.turn-mid{flex:1;min-width:0}
.turn-mid small{color:var(--muted);font-size:14px;font-weight:700}
.round-tag{color:var(--acc)}
.turn-mid h2{margin:2px 0;overflow:hidden;color:var(--pc,#fff);font-size:28px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.turn-score{color:var(--muted);font-size:15px;font-weight:700}
.turn-score b{color:var(--acc);font-size:22px}
.hint{min-height:46px;margin:10px 4px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:17px;font-weight:800;line-height:1.4}
.hint.hot{color:#ffd166;animation:pop .4s ease}
.hint.cold{color:#8ecae6;animation:pop .4s ease}
.hint.done{color:#80ed99;animation:pop .4s ease}
.hint.bad{color:#ff8a8a}

/* dice keypad */
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;direction:ltr}
.pad button{border:0;border-radius:16px;font:inherit;font-weight:800;cursor:pointer}
.pad .die{position:relative;height:72px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#f1ecdd 60%,#dcd5c1);color:#1d2340;box-shadow:inset -3px -4px 0 #0000001a,0 5px 0 #00000066}
.die .pips{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);width:44px;height:44px}
.die .pips i{width:9px;height:9px;margin:auto;border-radius:50%;background:currentColor}
.die .p1{grid-area:1/1}.die .p3{grid-area:1/3}.die .p4{grid-area:2/1}.die .p5{grid-area:2/2}.die .p6{grid-area:2/3}.die .p7{grid-area:3/1}.die .p9{grid-area:3/3}
.die em{position:absolute;bottom:3px;left:8px;font-size:13px;font-style:normal;opacity:.6}
.pad .die.on{outline:4px solid var(--acc);outline-offset:2px;transform:translateY(2px)}
.pad .k-ok{grid-column:span 3;padding:15px;background:linear-gradient(180deg,#7be3a4,#2f9e5e);color:#fff;font-size:22px;box-shadow:0 5px 0 #1f6b40}
.pad .k-ok.ready{animation:okPulse .9s ease-in-out infinite}
@keyframes okPulse{50%{transform:scale(1.03);filter:brightness(1.12)}}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.tools button{padding:11px 2px;border:1px solid var(--line);border-radius:14px;background:var(--field);color:var(--ink);font:inherit;font-size:12.5px;font-weight:800;white-space:nowrap;cursor:pointer}

/* the road board: one lane per player, start on the right, zebra + flag on the left */
.board-title{margin:16px 2px 8px;color:var(--acc);font-size:17px}
.board{display:grid;gap:8px;max-height:380px;overflow:auto;padding:2px}
.lane{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:4px 8px;align-items:center;padding:7px 9px;border-radius:14px;background:#ffffff08;border:1px solid transparent}
.lane.now{border-color:var(--pc);background:#ffffff12}
.ln-num{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--pc);color:#fff;font-size:12px;font-weight:800}
.ln-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:15px}
.ln-steps{min-width:30px;padding:1px 8px;border-radius:999px;background:var(--acc);color:#2b1d05;font-size:14px;text-align:center}
.road{grid-column:1/-1;position:relative;height:46px;border-radius:10px;overflow:hidden;background:
  linear-gradient(90deg,transparent 0,transparent 100%),
  repeating-linear-gradient(90deg,var(--dash) 0 12px,transparent 12px 26px) center/100% 3px no-repeat,var(--road)}
.road:before{content:"";position:absolute;left:0;top:0;bottom:0;width:22px;background:repeating-linear-gradient(0deg,#fff 0 6px,var(--road) 6px 12px);opacity:.9}
.road .flag{position:absolute;left:4px;top:-2px;font-size:20px;font-style:normal;filter:drop-shadow(0 2px 0 #0006)}
.runner{position:absolute;bottom:1px;width:30px;height:42px;right:calc((100% - 34px) * var(--k,0) + 2px);transition:right .22s linear;color:var(--pc)}
.lane.walking .runner .w-leg-f,.lane.walking .runner .w-arm-b{animation:swingA .23s ease-in-out infinite alternate}
.lane.walking .runner .w-leg-b,.lane.walking .runner .w-arm-f{animation:swingB .23s ease-in-out infinite alternate}

/* overlays */
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#050b16cc;backdrop-filter:blur(4px)}
.overlay[hidden]{display:none}
.modal{position:relative;overflow:hidden;width:min(100%,360px);padding:24px 20px 20px;border:1px solid #ffd16666;border-radius:24px;background:linear-gradient(180deg,#22345a,#0f1c33);text-align:center;box-shadow:0 20px 60px #000a;animation:pop .45s ease}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.modal h2{margin:4px 0 12px;font-size:28px}
.modal ol{margin:0 0 10px;padding:0 20px 0 0;text-align:right;line-height:1.8;font-size:16px}
.modal p{color:var(--muted);font-size:14px;line-height:1.6}
.modal>*:not(#confetti){position:relative;z-index:1}
.win-walker{display:block;width:70px;height:96px;margin:0 auto;color:var(--pc)}
.win-walker .w-leg-f,.win-walker .w-arm-b{animation:swingA .3s ease-in-out infinite alternate}
.win-walker .w-leg-b,.win-walker .w-arm-f{animation:swingB .3s ease-in-out infinite alternate}
.win small{color:var(--acc);font-size:15px;font-weight:800}
.win h2{font-size:34px}
.podium{display:grid;gap:6px;margin:0 0 16px}
.pod{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#ffffff12;text-align:right}
.pod span{font-size:22px}.pod b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px}.pod small{color:var(--acc);font-weight:800}
#confetti{position:absolute;inset:0;pointer-events:none}
#confetti i{position:absolute;top:-12px;width:8px;height:14px;background:var(--c);animation:fall var(--d) linear infinite;animation-delay:var(--delay)}
@keyframes fall{to{transform:translateY(560px) rotate(540deg)}}
@media(prefers-reduced-motion:reduce){.hero-walk svg,.hero-name.set,.hero-name.set.go{animation:none}}

/* ---------- 🎨 كارتون (default): sunny street ---------- */
body.kids{--bg:#ffb703;--bg2:#ffd166;--ink:#1d2340;--muted:#4a4f6b;--card:#fff;--line:#1d2340;--acc:#ffb703;--acc2:#1d2340;--field:#fff8e6;--road:#4a4e69;--dash:#fff3b0;color-scheme:light;font-family:"Baloo Bhaijaan 2","Segoe UI",Tahoma,system-ui,sans-serif}
body.kids:before{height:30vh;opacity:.25;background:radial-gradient(circle at 20% 80%,#fff 0 40px,transparent 41px),radial-gradient(circle at 75% 70%,#fff 0 55px,transparent 56px)}
body.kids .icon,body.kids .theme-switch{border:3px solid var(--line);background:#fff;box-shadow:3px 3px 0 var(--line)}
body.kids .theme-switch button{color:var(--ink)}
body.kids .theme-switch button[aria-pressed="true"]{background:#ef476f;color:#fff;text-shadow:1px 1px 0 var(--line)}
body.kids .cloud-brand,body.kids .baron-credit{background:#fff;border:2px solid var(--line);color:var(--ink);box-shadow:2px 2px 0 var(--line)}
body.kids .dancing-313,body.kids .baron-credit b{color:#ef476f;text-shadow:none}
body.kids .sinan-credit{color:#1d2340}body.kids .sinan-credit b{color:#ef476f}
body.kids .hero{border:3px solid var(--line);background:linear-gradient(135deg,#8ecae6,#219ebc);box-shadow:5px 5px 0 var(--line)}
body.kids .hero h1{color:#fff;text-shadow:2px 2px 0 var(--line),-1px -1px 0 var(--line),1px -1px 0 var(--line),-1px 1px 0 var(--line)}
body.kids .hero .hero-turn{color:#0b2b40}
body.kids .hero-walk{border:3px solid var(--line)}
body.kids .hero-name.set{border:2px solid var(--line);box-shadow:2px 2px 0 var(--line);text-shadow:1px 1px 0 var(--line)}
body.kids .hero-name.empty{background:#fff8;color:#0b2b40}
body.kids .card{border:3px solid var(--line);box-shadow:6px 6px 0 var(--line)}
body.kids .add-form input{border:3px solid var(--line);background:#fff;color:var(--ink)}
body.kids .add-form input::placeholder{color:#8a8fa8}
body.kids .add-form button{border:3px solid var(--line);background:#06d6a0;text-shadow:1px 1px 0 var(--line);box-shadow:3px 3px 0 var(--line)}
body.kids .tr{border:2px solid var(--line);background:#fff}
body.kids .tr:nth-child(even){background:#fff8e6}
body.kids .tr .num{border:2px solid var(--line)}
body.kids .tr .pts{color:#d97706}
body.kids .tr .del{background:#ffe3e3;color:#d00000}
body.kids .target-pick button{border:2px solid var(--line);background:#fff}
body.kids .target-pick button[aria-pressed="true"]{background:#ffd166;color:var(--ink);border-color:var(--line)}
body.kids .btn-main{border:3px solid var(--line);background:linear-gradient(180deg,#ff7aa2,#ef476f);color:#fff;text-shadow:2px 2px 0 var(--line);box-shadow:0 6px 0 var(--line)}
body.kids .btn-main:active:not(:disabled){box-shadow:0 2px 0 var(--line)}
body.kids .btn-ghost{border:3px solid var(--line);background:#fff}
body.kids .turn{border:3px solid var(--line);background:#fff;box-shadow:4px 4px 0 var(--line)}
body.kids .turn-mid h2{text-shadow:2px 2px 0 var(--line),-1px -1px 0 var(--line),1px -1px 0 var(--line),-1px 1px 0 var(--line)}
body.kids .round-tag,body.kids .turn-score b{color:#d97706}
body.kids .hint.hot{color:#d62828}body.kids .hint.cold{color:#0077b6}body.kids .hint.done{color:#2b9348}body.kids .hint.bad{color:#c1121f}
body.kids .pad .die{border:3px solid var(--line);box-shadow:0 5px 0 var(--line)}
body.kids .pad .die.on{outline-color:#ef476f}
body.kids .pad .k-ok{border:3px solid var(--line);background:#06d6a0;text-shadow:1px 1px 0 var(--line);box-shadow:0 5px 0 var(--line)}
body.kids .tools button{border:3px solid var(--line);background:#fff;box-shadow:3px 3px 0 var(--line)}
body.kids .board-title{color:var(--ink)}
body.kids .lane{border:2px solid var(--line);background:#fff}
body.kids .lane.now{border-width:3px;border-color:var(--pc);box-shadow:3px 3px 0 var(--line)}
body.kids .ln-num{border:2px solid var(--line)}
body.kids .ln-steps{border:2px solid var(--line);background:#ffd166}
body.kids .road{border:2px solid var(--line)}
body.kids .overlay{background:#1d234099}
body.kids .modal{border:3px solid var(--line);background:#fffaf0;box-shadow:6px 6px 0 var(--line)}
body.kids .win small{color:#ef476f}
body.kids .pod{border:2px solid var(--line);background:#fff}
body.kids .pod small{color:#d97706}
/* 2026-10-31 owner: smaller hero card (name + picture), shared host card under it, the road first in the play card */
.hero{padding:8px 12px!important;gap:10px!important;min-height:0!important}
.hero h1{font-size:26px!important;line-height:1.2!important;margin:0!important}
.hero .hero-walk{width:54px!important;height:54px!important;flex:none}
.hero .hero-walk svg{width:100%;height:100%}
.hero-sub{margin:2px 0 0;font-size:13px;font-weight:700;opacity:.8}
[data-host-card]{margin-top:8px}
#play .board-title{margin-top:0}
#play .board{margin-bottom:12px}
/* 2026-10-31 owner «نسوي نفس الشيء في حرب السير»: title + host in ONE small card — walker · title · host on the left */
.hero{display:flex!important;align-items:center!important;flex-wrap:nowrap!important}
.hero>div:not(.hero-host):not(.hero-walk){flex:1;min-width:0}
.hero h1{white-space:nowrap}
.hero-sub{font-size:12px!important}
.hero-host{position:relative;margin:0 auto 0 0!important;max-width:none!important;flex:none}
.hero-host .hc-card{position:relative;flex-direction:column;gap:2px;padding:0;border:0!important;background:none!important;box-shadow:none!important}
.hero-host .hc-ring{width:62px;height:62px}.hero-host .hc-ring img,.hero-host .hc-ring i{font-size:26px}
.hero-host .hc-txt{align-items:center;text-align:center;max-width:104px}
.hero-host .hc-txt small{font-size:11px;color:inherit;opacity:.8}
.hero-host .hc-txt b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;overflow-wrap:anywhere;line-height:1.2;text-align:center;max-width:104px;font-size:18px;font-weight:900;padding:0 2px;background:linear-gradient(90deg,#ef476f,#ffd166,#06d6a0,#118ab2,#8338ec,#ef476f);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:ww-dance 1.6s ease-in-out infinite,ww-shine 4s linear infinite}
.hero-host .hc-txt b.long{font-size:15px}.hero-host .hc-txt b.xlong{font-size:12px}
@keyframes ww-dance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(-3deg)}75%{transform:translateY(-1px) rotate(3deg)}}
@keyframes ww-shine{to{background-position:300% 0}}
.hero-host .hc-edit{position:absolute;top:40px;left:calc(50% + 16px);margin:0;width:24px;height:24px;padding:0;font-size:0;border-radius:50%;display:grid;place-items:center;border-width:2px}
.hero-host .hc-edit:before{content:"✏️";font-size:10px}
.hero-host .hc-form{position:absolute;left:0;top:100%;z-index:30;width:min(300px,80vw);background:#fff;padding:8px;border-radius:14px;box-shadow:0 8px 24px #0003}
.hero-host .hc-msg{position:absolute;left:0;top:100%;z-index:30;width:200px}
@media (prefers-reduced-motion:reduce){.hero-host .hc-txt b{animation:none}}