/* Asciilands title screen. Loaded after ui-system.css.

   The start menu, the character creator and the boot card sit on the drifting
   glyph world (#title-scene). The menu itself is not a box: the wordmark floats
   over the faded scene with the characters and actions centred beneath it.
   Older entry-panel layers in game_web.html and game-menu.css use !important,
   so this layer uses doubled IDs and !important where it must win. */
:root{
  --title-paper:#efe7cf;--title-muted:#b9bea9;--title-gold:#f2cf78;--title-gold-hi:#ffe4a0;--title-gold-lo:#9a7a36;
  --title-panel:rgba(10,15,14,.78);--title-panel-hi:rgba(44,52,34,.92);--title-edge:rgba(239,231,207,.2);
  --title-snap:cubic-bezier(.25,1.5,.45,1);
}

/* Scene and shade. */
#title-scene{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:1180;display:block;
  filter:saturate(.8) brightness(.7);image-rendering:pixelated;pointer-events:none}
#title-scene[hidden],#title-shade[hidden]{display:none!important}
#title-shade{position:fixed;inset:0;z-index:1185;pointer-events:none;
  background:
    radial-gradient(ellipse 48% 56% at 50% 47%,rgba(5,9,10,.66) 0%,rgba(5,9,10,.52) 55%,rgba(5,9,10,.34) 100%),
    radial-gradient(ellipse 90% 80% at 50% 50%,rgba(4,7,8,0) 55%,rgba(4,7,8,.6) 100%),
    linear-gradient(180deg,rgba(4,7,8,.55) 0%,rgba(4,7,8,0) 22%,rgba(4,7,8,0) 70%,rgba(4,7,8,.7) 100%)}
/* While booting, the opaque loading cover gives way to the scene. */
html body.entry-loading.title-scene-on::after{background:rgba(5,9,10,.52)!important}
html body.entry-loading #title-scene{z-index:9989;filter:saturate(.75) brightness(.5)}
/* The creator floats over the same world. */
html body.title-scene-on{background:#0a100e}

.title-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The menu surface: transparent, full screen, content centred. */
html body #entry-panel#entry-panel{position:fixed!important;inset:0!important;z-index:1190;display:block!important;width:auto!important;height:auto!important;max-height:none!important;
  margin:0!important;padding:0!important;transform:none!important;overflow:auto!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  color:var(--title-paper);font-family:var(--menu-font,Consolas,monospace)}
html body #entry-panel#entry-panel[hidden]{display:none!important}
html body #entry-panel#entry-panel::before,html body #entry-panel#entry-panel::after{content:none!important;display:none!important}
.title-screen{position:relative;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);width:100%;min-height:100%;box-sizing:border-box;padding:18px clamp(16px,3vw,32px)}

.title-top-right{display:flex;align-items:center;gap:8px}
#title-mute{display:grid;place-items:center;width:30px;height:26px;padding:0;background:rgba(10,15,14,.6);border:1px solid var(--title-edge);color:var(--title-paper);cursor:pointer;transition:border-color .12s,color .12s}
#title-mute::before{content:"";width:16px;height:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M1%206h3l4-4v12l-4-4H1z%22/%3E%3Cpath%20d%3D%22M10%205h1v6h-1zM12%203h1v10h-1zM14%205h1v6h-1z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M1%206h3l4-4v12l-4-4H1z%22/%3E%3Cpath%20d%3D%22M10%205h1v6h-1zM12%203h1v10h-1zM14%205h1v6h-1z%22/%3E%3C/svg%3E") center/contain no-repeat;background:currentColor}
#title-mute.is-muted{color:#f0a792}
#title-mute.is-muted::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M1%206h3l4-4v12l-4-4H1z%22/%3E%3Cpath%20d%3D%22M10%205h1v1h1v1h1V6h1V5h1v1h-1v1h-1v2h1v1h1v1h-1v-1h-1V9h-1v1h-1v1h-1v-1h1V9h1V7h-1V6h-1z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M1%206h3l4-4v12l-4-4H1z%22/%3E%3Cpath%20d%3D%22M10%205h1v1h1v1h1V6h1V5h1v1h-1v1h-1v2h1v1h1v1h-1v-1h-1V9h-1v1h-1v1h-1v-1h1V9h1V7h-1V6h-1z%22/%3E%3C/svg%3E")}
#title-mute:hover,#title-mute:focus-visible{border-color:rgba(242,207,120,.7);color:var(--title-gold-hi)}
.title-topbar,.title-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.title-build{padding:4px 8px;border:1px solid rgba(227,193,112,.5);color:var(--title-gold);background:rgba(10,15,14,.6)}
html body #entry-panel .entry-top-status{margin:0!important;padding:4px 8px;color:#bfe0a6;background:rgba(10,15,14,.6);border:1px solid var(--title-edge);font-size:11px!important;letter-spacing:.14em;text-align:right}
html body #entry-panel .entry-top-status::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:0;background:#8fd46a;box-shadow:0 0 8px #8fd46a;vertical-align:1px;animation:title-pulse 2.4s ease-in-out infinite}
html body #entry-panel .entry-top-status[data-state="checking"]{color:var(--title-gold)}
html body #entry-panel .entry-top-status[data-state="checking"]::before{background:var(--title-gold);box-shadow:0 0 8px var(--title-gold)}
html body #entry-panel .entry-top-status[data-state="offline"]{color:#f0a792}
html body #entry-panel .entry-top-status[data-state="offline"]::before{background:#d9705a;box-shadow:0 0 8px #d9705a;animation:none}
.title-footer{color:var(--title-muted);letter-spacing:.06em;text-transform:none}
.title-footer a{color:var(--title-muted);text-decoration:none;border-bottom:1px solid transparent}
.title-footer a:hover,.title-footer a:focus-visible{color:var(--title-gold-hi);border-bottom-color:currentColor}

.title-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.2vh,22px);padding:clamp(8px,3vh,36px) 0;min-width:0}
html body #entry-panel .title-wordmark{margin:0!important;padding:0;line-height:0;max-width:none!important;white-space:normal!important;text-shadow:none!important;animation:title-bob 5.5s ease-in-out infinite}
.title-wordmark img{display:block;width:min(1060px,92vw);height:auto;filter:brightness(1.14) saturate(1.1) drop-shadow(0 5px 0 rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(0,0,0,.7)) drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.title-tagline{min-height:1.4em;margin:-4px 0 4px;color:var(--title-paper);font-size:clamp(14px,1.5vw,17px);letter-spacing:.14em;text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 18px rgba(0,0,0,.8)}
.title-tagline>span[aria-hidden]::after{content:"▌";margin-left:2px;color:var(--title-gold);animation:title-cursor 1.2s ease-in-out infinite}
.title-label{margin:0 0 8px!important;color:var(--title-gold)!important;font:700 11px var(--menu-font,Consolas,monospace)!important;letter-spacing:.22em!important;text-transform:uppercase;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.7)}

/* Character row: every character is a card and New is the last card. */
.title-roster{display:flex;flex-direction:column;align-items:center;max-width:min(820px,96vw)}
html body #entry-panel #character-cards{display:flex!important;justify-content:safe center;gap:12px;max-width:min(820px,94vw);overflow-x:auto;overflow-y:hidden;padding:20px 6px 8px!important;scrollbar-width:thin}
html body #entry-panel .character-slot{position:relative;flex:0 0 auto}
html body #entry-panel.is-entering .character-slot{animation:title-card-in .32s var(--title-snap) both;animation-delay:calc(var(--i,0) * 60ms + 150ms)}
html body #entry-panel#entry-panel #character-cards .character-card{position:relative;display:grid!important;grid-template-rows:98px auto auto;justify-items:center;align-content:start;gap:4px;width:112px;min-width:0;height:auto!important;min-height:150px;
  padding:10px 8px 9px!important;background:var(--title-panel)!important;border:1px solid var(--title-edge)!important;box-shadow:none!important;color:var(--title-paper)!important;
  font:600 13px var(--menu-font,Consolas,monospace)!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer;
  transition:transform .12s var(--title-snap),background-color .12s,border-color .12s!important}
html body #entry-panel#entry-panel #character-cards .character-card:hover{transform:translateY(-4px);background:var(--title-panel-hi)!important;border-color:rgba(227,193,112,.6)!important}
html body #entry-panel#entry-panel #character-cards .character-card:active{transform:translateY(-1px)}
html body #entry-panel#entry-panel #character-cards .character-card:focus-visible{outline:2px solid var(--title-gold-hi)!important;outline-offset:2px}
html body #entry-panel#entry-panel #character-cards .character-card[aria-pressed=true]{background:rgba(58,52,28,.9)!important;border-color:var(--title-gold)!important;box-shadow:inset 0 0 0 1px var(--title-gold),0 0 0 1px rgba(0,0,0,.4)!important}
html body #entry-panel #character-cards .character-card[aria-pressed=true]::before{content:"▼";position:absolute;top:-18px;left:50%;transform:translateX(-50%);color:var(--title-gold);font-size:12px;line-height:1;animation:title-marker 1.1s steps(2) infinite}
html body #entry-panel #character-cards canvas{width:72px!important;height:96px!important;transition:transform .14s var(--title-snap)}
html body #entry-panel #character-cards .character-card:hover canvas{transform:translateY(-2px) scale(1.04)}
html body #entry-panel #character-cards .character-card span:not(.character-plus){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px!important}
html body #entry-panel #character-cards .character-card small{color:var(--title-gold)!important;font-size:10px!important;letter-spacing:.12em;text-transform:uppercase;visibility:hidden}
html body #entry-panel #character-cards .character-card[aria-pressed=true] small{visibility:visible}
html body #entry-panel#entry-panel .character-delete{position:absolute;top:5px;right:5px;z-index:2;display:grid;place-items:center;width:22px!important;height:22px!important;min-height:0!important;padding:0!important;
  background:rgba(10,15,14,.85)!important;border:1px solid var(--title-edge)!important;color:var(--title-muted)!important;font:14px/1 var(--menu-font,Consolas,monospace)!important;box-shadow:none!important;opacity:.55;transition:opacity .12s}
html body #entry-panel .character-slot:hover .character-delete,html body #entry-panel .character-delete:focus-visible{opacity:1}
html body #entry-panel#entry-panel .character-delete:hover{color:#ffb4a1!important;border-color:#d9705a!important}
@media (hover:none){html body #entry-panel .character-delete{opacity:.85}}
html body #entry-panel#entry-panel #character-cards .character-card-new:disabled{opacity:.45;cursor:not-allowed;border-style:dashed!important;background:rgba(10,15,14,.4)!important;transform:none}
html body #entry-panel .character-card-new:disabled .character-plus{transform:none;color:var(--title-muted)}
/* The + card. */
html body #entry-panel#entry-panel #character-cards .character-card-new{grid-template-rows:98px auto;background:rgba(10,15,14,.5)!important;border:1px dashed rgba(227,193,112,.55)!important;color:var(--title-gold)!important}
html body #entry-panel#entry-panel #character-cards .character-card-new:hover{background:rgba(58,52,28,.72)!important;border-style:solid!important}
html body #entry-panel .character-plus{display:grid;place-items:center;width:56px;height:56px;margin-top:22px;font:400 46px/1 var(--menu-font,Consolas,monospace)!important;color:var(--title-gold);text-shadow:0 3px 0 rgba(0,0,0,.5);transition:transform .16s var(--title-snap)}
html body #entry-panel .character-card-new:hover .character-plus{transform:rotate(90deg) scale(1.1);color:var(--title-gold-hi)}
html body #entry-panel .character-card-new .character-new-label{color:var(--title-paper)}

/* Actions: Play spans the row; Customize and Settings share the line below. */
html body #entry-panel#entry-panel #entry-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;width:min(420px,100%)!important;margin:4px 0 0!important;padding:0!important}
html body #entry-panel#entry-panel #entry-actions button{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;grid-row:auto!important;grid-column:auto!important;width:100%;min-width:0;min-height:44px;margin:0;padding:0 14px!important;
  background:var(--title-panel)!important;border:1px solid var(--title-edge)!important;color:var(--title-paper)!important;box-shadow:0 3px 0 rgba(0,0,0,.45)!important;
  font:700 14px var(--menu-font,Consolas,monospace)!important;letter-spacing:.06em!important;text-transform:none!important;cursor:pointer;
  transition:transform .1s var(--title-snap),box-shadow .1s,background-color .12s,border-color .12s!important}
html body #entry-panel#entry-panel #entry-actions button:hover:not(:disabled){transform:translateY(-2px);background:var(--title-panel-hi)!important;border-color:rgba(227,193,112,.7)!important;box-shadow:0 5px 0 rgba(0,0,0,.45)!important}
html body #entry-panel#entry-panel #entry-actions button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)!important}
html body #entry-panel#entry-panel #entry-actions button:focus-visible{outline:2px solid var(--title-gold-hi)!important;outline-offset:3px}
html body #entry-panel#entry-panel #entry-actions #entry-connect{grid-column:1 / -1!important;min-height:58px;background:var(--title-gold)!important;border:2px solid var(--title-gold-hi)!important;color:#1b1a0f!important;
  box-shadow:0 4px 0 var(--title-gold-lo),0 0 26px rgba(242,207,120,.28),0 10px 24px rgba(0,0,0,.45)!important;font-size:19px!important;letter-spacing:.1em!important}
html body #entry-panel#entry-panel #entry-actions #entry-connect:hover:not(:disabled){background:var(--title-gold-hi)!important;box-shadow:0 6px 0 var(--title-gold-lo),0 14px 28px rgba(0,0,0,.5)!important}
html body #entry-panel#entry-panel #entry-actions #entry-connect:active:not(:disabled){box-shadow:0 1px 0 var(--title-gold-lo)!important}
html body #entry-panel#entry-panel #entry-actions #entry-connect:disabled{background:rgba(60,56,38,.85)!important;border-color:rgba(227,193,112,.35)!important;color:var(--title-muted)!important;box-shadow:0 3px 0 rgba(0,0,0,.4)!important;cursor:progress}
/* ASCII flourish: pointers slide in around the focused action. */
html body #entry-panel #entry-actions #entry-connect::before,html body #entry-panel #entry-actions #entry-connect::after{position:static;font-size:14px;opacity:0;transition:opacity .1s,transform .14s var(--title-snap)}
html body #entry-panel #entry-actions #entry-connect::before{content:"►";transform:translateX(-10px)}
html body #entry-panel #entry-actions #entry-connect::after{content:"◄";transform:translateX(10px)}
html body #entry-panel #entry-actions #entry-connect:is(:hover,:focus-visible):not(:disabled)::before,html body #entry-panel #entry-actions #entry-connect:is(:hover,:focus-visible):not(:disabled)::after{opacity:1;transform:none}
html body #entry-panel #entry-actions #entry-connect:disabled::before{content:"";width:9px;height:9px;opacity:1;transform:none;background:currentColor;animation:title-blink .6s steps(1) infinite}
html body #entry-panel #entry-actions #entry-connect:disabled::after{content:none}
/* Coloured glyph icons on the secondary actions. */
html body #entry-panel #entry-actions :is(#entry-edit-character,#entry-open-settings)::before{content:"";flex:0 0 auto;width:16px;height:16px;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;background:var(--icon-color)}
html body #entry-panel #entry-actions #entry-edit-character{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M5%202h2v1h2V2h2l4%203-2%203-1-1v7H4V7L3%208%201%205z%22/%3E%3C/svg%3E");--icon-color:#8fb6e2}
html body #entry-panel #entry-actions #entry-open-settings{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M6%201h4v3h2V3h1v1h-1v1h1v1h2v4h-2v1h-1v1h1v1h-1v-1h-2v3H6v-3H4v1H3v-1h1v-1H3v-1H1V6h2V5H3V4h1V3h1v1h1zM6%206v4h4V6z%22/%3E%3C/svg%3E");--icon-color:var(--title-gold)}
html body #entry-panel #entry-status{min-height:1.3em;margin:0!important;color:var(--title-muted);font-size:12px!important;letter-spacing:.06em;text-align:center!important;text-shadow:0 2px 0 rgba(0,0,0,.7)}

/* Menu entrance. */
html body #entry-panel.is-entering .title-wordmark img{animation:title-rise .5s var(--title-snap) both}
html body #entry-panel.is-entering .title-roster,html body #entry-panel.is-entering #entry-actions{animation:title-fade .36s ease-out both;animation-delay:.12s}
html body #entry-panel.is-entering .title-topbar,html body #entry-panel.is-entering .title-footer{animation:title-fade .4s ease-out both;animation-delay:.25s}

/* Boot card: the wordmark and a slim bar over the scene. */
html body.entry-loading #entry-loading-card{justify-items:center;width:min(640px,calc(100vw - 32px))!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;text-align:center}
#entry-loading-card .boot-wordmark{display:block;width:100%;height:auto;margin-bottom:6px;filter:drop-shadow(0 5px 0 rgba(0,0,0,.45)) drop-shadow(0 16px 26px rgba(0,0,0,.55))}
html body.entry-loading #entry-loading-card #status{text-align:center!important;color:var(--title-paper)!important;font:14px/1.5 var(--menu-font,Consolas,monospace)!important;letter-spacing:.08em;text-transform:none!important;text-shadow:0 2px 0 rgba(0,0,0,.7)}
html body.entry-loading #entry-loading-card #progress{width:min(320px,80%)!important;height:6px;background:rgba(10,15,14,.8)!important;border:1px solid rgba(227,193,112,.45)}
html body.entry-loading #entry-loading-card #progress::-webkit-progress-bar{background:rgba(10,15,14,.8)}
html body.entry-loading #entry-loading-card #progress::-webkit-progress-value{background:var(--title-gold)}
html body.entry-loading #entry-loading-card #entry-retry{width:auto!important;justify-self:center;background:var(--title-gold);border:2px solid var(--title-gold-hi);color:#1b1a0f;font:700 14px var(--menu-font,Consolas,monospace)}

@keyframes title-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes title-rise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes title-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes title-card-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes title-blink{50%{opacity:0}}
@keyframes title-pulse{50%{opacity:.4}}
@keyframes title-cursor{0%,100%{opacity:.8}50%{opacity:.1}}
@keyframes title-marker{50%{transform:translateX(-50%) translateY(-3px)}}

@media (max-height:720px){
  .title-wordmark img{width:min(800px,88vw)}
  html body #entry-panel#entry-panel #character-cards .character-card{min-height:132px;grid-template-rows:80px auto auto}
  html body #entry-panel #character-cards canvas{width:60px!important;height:80px!important}
  html body #entry-panel .character-plus{margin-top:12px}
  html body #entry-panel#entry-panel #entry-actions #entry-connect{min-height:50px}
}
@media (max-width:560px){
  .title-screen{padding:12px}
  .title-topbar,.title-footer{font-size:10px}
  .title-wordmark img{width:94vw}
  .title-tagline{font-size:13px;letter-spacing:.08em}
  html body #entry-panel#entry-panel #character-cards{justify-content:flex-start;gap:8px}
  html body #entry-panel#entry-panel #character-cards .character-card{width:96px;min-height:132px;grid-template-rows:80px auto auto}
  html body #entry-panel #character-cards canvas{width:60px!important;height:80px!important}
  html body #entry-panel .character-plus{margin-top:12px}
  .title-footer{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  html body #entry-panel *,html body #entry-panel *::before,html body #entry-panel *::after,#entry-loading-card *{animation:none!important;transition:none!important}
  html body #entry-panel .title-wordmark{animation:none!important}
}

/* Settings opened from the start screen: switching character is the screen behind it. */
#entry-account-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px}
#entry-account-actions button{font:inherit;font-size:12px;color:var(--title-paper);background:transparent;border:1px solid var(--title-edge);padding:7px 12px;border-radius:5px;cursor:pointer}
#entry-account-actions button[hidden]{display:none}
#entry-account-note{max-width:580px;margin:12px auto 0;font-size:12px;line-height:1.6;color:var(--title-muted);text-wrap:pretty}
#account-signin-dialog{width:min(580px,calc(100% - 32px));max-width:none;padding:0;border:0;border-radius:0;background:transparent;color:#eee5ca;font:14px/1.6 var(--menu-font);overflow:visible}
#account-signin-dialog::backdrop{background:#050a07cc}
#account-signin-dialog .start-choice-card{width:100%}
#account-signin-dialog h2{font:18px/1.4 var(--menu-font);color:#d6bd72;margin:0 0 14px}
#account-signin-dialog p{margin:0}
#account-signin-dialog .start-choice-actions{flex-wrap:wrap}
#account-signin-dialog button:focus-visible{outline:2px solid #eed997;outline-offset:3px}
.entry-settings-open #settings-footer{display:none!important}
html body #game-menu#game-menu #settings-modal .settings-view>:last-child :is(.setting-row,.controls-binding-row):last-child{border-bottom:0!important}

html body #entry-panel#entry-panel #entry-actions #entry-account-login{grid-column:1/-1!important;min-height:40px;color:var(--title-paper);border:1px solid var(--title-edge);font-size:13px}
html body #entry-panel #entry-actions #entry-account-login[hidden]{display:none}