:is(#lobby,#account-dialog) .rename-scroll{position:relative;display:block;flex:0 0 235px;width:235px;height:64px;min-width:0;min-height:44px;align-self:center;padding:0!important;margin:-6px 0;border:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer;border-radius:12px;touch-action:manipulation}
:is(#lobby,#account-dialog) .rename-scroll svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 2px #160e2d99)}
.rename-scroll .rename-quill{transform-origin:66px 45px;animation:rename-quill-hover 4s ease-in-out infinite}
.rename-scroll .rename-ink{stroke-dasharray:140;stroke-dashoffset:140;opacity:.6;transition:stroke-dashoffset 1s ease}
.rename-scroll:hover .rename-ink,.rename-scroll:focus-within .rename-ink{stroke-dashoffset:0}
.rename-scroll:hover .rename-quill,.rename-scroll:focus-within .rename-quill{animation:rename-quill-write 1.5s ease-in-out infinite}
.rename-scroll .rename-spark{opacity:.6;animation:rename-sparkle 3s ease-in-out infinite}
.rename-scroll:hover .rename-aura,.rename-scroll:focus-within .rename-aura{opacity:.28}
:is(#lobby,#account-dialog) .rename-scroll:focus-within{outline:none}
#lobby.home-menu .lobby-name-editor,.fh-more .fh-rename{display:none!important}
.home-player-name{display:block;text-align:center;color:#f5e6ff;font:700 17px/32px 'Trebuchet MS',sans-serif;text-shadow:0 2px 5px #160e2d;white-space:nowrap}
body.hex-fixed-home #fixed-home .fh-name{background:none!important;border:0!important;box-shadow:none!important;padding:5px 0;cursor:default}
body.hex-fixed-home #fixed-home .fh-name:after{content:none}
body.hex-fixed-home .home-player-name{display:none}
@keyframes rename-quill-hover{0%,100%{transform:translateY(-1px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes rename-quill-write{0%,100%{transform:translate(-1px,0) rotate(-4deg)}50%{transform:translate(2px,1px) rotate(4deg)}}
@keyframes rename-sparkle{0%,100%{opacity:.35}50%{opacity:.95}}
body.hex-fixed-home #fixed-home #wallet .rename-scroll{flex-basis:195px;width:195px;height:52px;margin:0}
@media(max-width:600px){body.hex-fixed-home #fixed-home #wallet .rename-scroll{flex-basis:165px;width:165px}}
@media(prefers-reduced-motion:reduce){.rename-scroll svg *{animation:none!important;transition:none!important}}
html[data-motion=gentle] .rename-scroll svg *{animation:none!important;transition:none!important}
body.element-title-paused .rename-scroll svg *{animation-play-state:paused!important}

.rename-scroll .rename-current-name{display:none}
:is(#lobby,#account-dialog) .rename-scroll #lobby-name-input{position:absolute;left:13%;top:37%;width:67%!important;height:31%;min-width:0;min-height:0;box-sizing:border-box;padding:0!important;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#402d45;text-align:center;text-overflow:ellipsis;font:italic 600 16px/1 Georgia,serif;font-size:16px!important;letter-spacing:0;outline:none;cursor:text}
:is(#lobby,#account-dialog) .rename-scroll #lobby-name-input:focus{background:#fff4d633;box-shadow:0 1px var(--rename-element,#b5f5d9);text-overflow:clip}
body.hex-fixed-home #fixed-home #wallet .rename-scroll #lobby-name-input{font-size:14px!important}
@media(max-width:600px){body.hex-fixed-home #fixed-home #wallet .rename-scroll #lobby-name-input{font-size:12px!important}}

#lobby .home-player-name,body.hex-fixed-home #fixed-home .fh-name{display:none!important}
:is(#lobby,#account-dialog) .rename-scroll:hover svg,:is(#lobby,#account-dialog) .rename-scroll:focus-within svg{filter:drop-shadow(0 0 4px var(--rename-element,#b5f5d9))}

/* Effects frame the selected field and never intercept typing or cover its name. */
:is(#lobby,#account-dialog) .rename-scroll .rename-border-fx{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);pointer-events:none;overflow:visible;filter:none;opacity:0;transition:opacity .18s ease}
:is(#lobby,#account-dialog) .rename-scroll:hover .rename-border-fx,:is(#lobby,#account-dialog) .rename-scroll:focus-within .rename-border-fx{opacity:1}
.rename-border-fx>g{display:none}
.rename-scroll[data-element=fire] .rb-fire,.rename-scroll[data-element=water] .rb-water,.rename-scroll[data-element=wind] .rb-wind,.rename-scroll[data-element=earth] .rb-earth{display:inline}
.rb-flame{transform-box:fill-box;transform-origin:center bottom;animation:rb-flicker 1.6s ease-in-out infinite alternate}
.rb-embers{animation:rb-ember-rise 2.7s ease-out infinite}
.rb-counter{animation-direction:reverse;animation-duration:7s}
.rb-gust{stroke-dasharray:100 85;animation:rb-gust-flow 8s linear infinite}
.rb-gust.rb-counter{animation-duration:10s;animation-direction:reverse}
.rb-breeze{animation:rb-swell 5s ease-in-out infinite}
.rb-stones{animation:rb-stone-rise 3.4s ease-in-out infinite}
.rb-grit{animation:rb-stone-rise 4.5s ease-in-out infinite reverse}
.rb-fissure{animation:rb-fissure-glow 3.4s ease-in-out infinite}
.rename-border-fx .rb-late{animation-delay:-1.1s}.rename-border-fx .rb-last{animation-delay:-.6s}
.rename-scroll .rename-border-fx *{animation-play-state:paused}
.rename-scroll:hover .rename-border-fx *,.rename-scroll:focus-within .rename-border-fx *{animation-play-state:running}
@keyframes rb-flicker{from{transform:scale(.85,.75);opacity:.65}to{transform:scale(1.08,1.12);opacity:1}}
@keyframes rb-ember-rise{0%{transform:translateY(4px);opacity:0}25%{opacity:1}100%{transform:translate(3px,-8px);opacity:0}}
@keyframes rb-swell{0%,100%{transform:translateY(1px);opacity:.4}50%{transform:translateY(-2px);opacity:.9}}
@keyframes rb-gust-flow{to{stroke-dashoffset:-370}}
@keyframes rb-stone-rise{0%,100%{transform:translateY(1px)}50%{transform:translateY(-3px)}}
@keyframes rb-fissure-glow{0%,100%{opacity:.35}50%{opacity:1}}

.rb-tide{animation:rb-tide-roll 4.8s ease-in-out infinite;transform-origin:center}
.rb-tide-bottom{animation-delay:-2.4s;animation-duration:5.6s}
.rb-foam{stroke-dasharray:65 16 18 12;animation:rb-foam-flow 7s linear infinite}
.rb-bubble{transform-box:fill-box;transform-origin:center;animation:rb-bubble-float 4.2s ease-in-out infinite;animation-delay:var(--bubble-delay,0s)}
.rb-water-spark{animation:rb-fissure-glow 3.6s ease-in-out infinite}
@keyframes rb-tide-roll{0%,100%{transform:translate(-1px,1px)}50%{transform:translate(2px,-2px)}}
@keyframes rb-foam-flow{to{stroke-dashoffset:-222}}
@keyframes rb-bubble-float{0%{transform:translate(0,3px) scale(.7);opacity:0}22%{opacity:.85}75%{opacity:.9}100%{transform:translate(2px,-7px) scale(1.08);opacity:0}}

/* Keep currency counters at their natural compact height beside the taller scroll. */
#lobby.home-menu .home-header #wallet{align-items:center}
/* Keep elemental name-selection artwork static, including while hovered/focused. */
.rename-scroll .rename-border-fx *{animation:none!important;transition:none!important}

/* Static Verdant frame appears on hover and keyboard/touch focus. */
.rename-scroll[data-element=verdant] .rb-verdant{display:inline}
.rename-scroll[data-element=verdant] .rename-border-fx,.rename-scroll[data-element=verdant] .rb-verdant *{animation:none!important;transition:none!important}

/* Account panel: the same editable scroll that used to sit on the home circle. */
#account-dialog .account-name{display:grid;justify-items:center;gap:2px;margin:6px 0 12px}
#account-dialog .account-name .rename-scroll{flex:none;margin:0}
#account-dialog .account-name-hint{font-size:11px;color:#ccbdd2}
@media(pointer:coarse){#account-dialog .rename-scroll #lobby-name-input:focus{font-size:16px!important}}
@media(max-height:500px) and (min-width:600px){
 body #account-dialog[open]{grid-template-rows:auto auto auto 1fr auto}
 body #account-dialog .account-name{grid-column:1;grid-row:3;margin:0 0 8px}
 body #account-dialog .account-note{grid-row:4}
 body #account-dialog #account-form{grid-row:1/span 4}
 body #account-dialog :is(#account-toggle,#account-logout){grid-row:5}
}

/* Name locked by a moderator (/mods). */
.rename-scroll.name-locked{cursor:not-allowed;filter:saturate(.7)}.rename-scroll.name-locked .rename-quill,.rename-scroll.name-locked .rename-ink{opacity:.35}