/* 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-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, #entry-leave-queue{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], #entry-leave-queue[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}
#account-signin-benefits{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:0;margin:14px 0 20px}
#account-signin-benefits[hidden]{display:none}
#account-signin-benefits li{display:flex;align-items:center;gap:8px}
#account-signin-benefits span{color:#d6bd72}
#discord-join-checkbox{accent-color:#d6bd72}
#discord-join-choice{display:block;margin-top:16px;cursor:pointer}
#discord-join-choice[hidden]{display:none}
#entry-discord-status{max-width:580px;margin:12px auto 0;font-size:12px;line-height:1.6;color:var(--title-muted)}
.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}
.community-icon.discord{position:relative}
.community-icon.discord .title-founders-left{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:3px;padding:1px 4px;white-space:nowrap;background:#132012;border:1px solid #3f8f3a;color:#b9e08a;font:400 13px/1 "Asciilands Pixel","VT323",Consolas,monospace;pointer-events:none}
.community-icon.discord .title-founders-left[hidden]{display:none}

/* Release banner in the top bar, with a What's new dropdown. */
.wild-update{position:relative;display:inline-flex;align-items:center;gap:10px;padding:4px 6px 4px 4px;background:rgba(10,15,14,.82);border:1px solid rgba(227,193,112,.55);box-shadow:0 4px 18px rgba(0,0,0,.45);color:#efe7cf;font:400 21px/1 "Asciilands Pixel","VT323","IBM Plex Mono",monospace;letter-spacing:.02em;text-transform:none;text-align:left}
.wild-update img{width:32px;height:24px;padding:2px;background:#22301f;image-rendering:pixelated;object-fit:contain}
.wild-update strong{font-weight:400;color:#f5da8e;white-space:nowrap}
.wild-update .wu-play{padding:4px 9px 5px;background:#e3c170;color:#0b1110;text-decoration:none;white-space:nowrap}
.wild-update .wu-play:hover{background:#f5da8e}
.wild-update details{position:relative}
.wild-update summary{list-style:none;cursor:pointer;padding:4px 6px 5px;color:#b3b8a4;white-space:nowrap}
.wild-update summary::-webkit-details-marker{display:none}
.wild-update summary::after{content:"▾";margin-left:6px;color:#e3c170}
.wild-update details[open] summary{color:#efe7cf}
.wild-update details[open] summary::after{content:"▴"}
.wild-update summary:hover,.wild-update summary:focus-visible{color:#efe7cf;outline:none}
.wild-update ul{position:absolute;z-index:20;top:calc(100% + 9px);right:-7px;width:min(320px,86vw);margin:0;padding:10px 14px 12px;list-style:none;background:rgba(10,15,14,.96);border:1px solid rgba(227,193,112,.55);box-shadow:0 8px 24px rgba(0,0,0,.55);font-size:19px;line-height:1.15}
.wild-update li{position:relative;padding:4px 0 4px 16px;color:#efe7cf}
.wild-update li::before{content:"▸";position:absolute;left:0;color:#e3c170}
.title-topbar .wild-update{font-size:19px;margin:0 auto}
.title-topbar .wild-update ul{right:auto;left:50%;transform:translateX(-50%)}
@media (max-width:760px){.title-topbar .wild-update strong{display:none}}

/* Equal side tracks keep the release notice at the viewport centre. */
.title-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.title-top-right{justify-self:end}
@media(max-width:900px){.title-topbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.title-topbar .wild-update{grid-column:1/-1;grid-row:2}.title-top-right{grid-column:2;grid-row:1}}

/* Capacity and connection feedback belong beside Play. */
html body #entry-panel #entry-server-panel{width:min(420px,92vw);box-sizing:border-box;padding:12px 16px;background:var(--title-panel);border:1px solid var(--title-edge);color:var(--title-paper)}
.entry-server-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:15px;letter-spacing:.04em}
html body #entry-panel #entry-service-status{font:700 24px/1.2 var(--menu-font,Consolas,monospace);color:var(--title-gold-hi);white-space:nowrap}
html body #entry-panel #entry-status{position:static!important;min-height:0;margin:10px 0 0!important;font-size:16px!important;line-height:1.45;letter-spacing:0;text-transform:none;text-align:left!important;text-shadow:none}
html body #entry-panel #entry-status:empty{display:none}
html body #entry-panel #entry-server-panel[data-state="full"],html body #entry-panel #entry-server-panel[data-error="true"]{border-color:var(--title-gold);box-shadow:inset 3px 0 0 var(--title-gold)}
html body #entry-panel #entry-server-panel[data-state="full"] #entry-server-label{font-weight:700;color:var(--title-gold-hi)}

/* Regional server picker. One row per realm: name, fill, ping. */
#entry-realm-picker{display:grid;gap:6px}
/* The selected row already shows fill, so the single-server summary is redundant. */
html body #entry-panel #entry-server-panel:has(#entry-realm-picker) .entry-server-summary:not(#entry-queue-summary){display:none}
#entry-realm-picker button{display:grid;grid-template-columns:1fr auto 5.5em;align-items:center;gap:12px;width:100%;min-height:0;margin:0;padding:7px 10px;box-sizing:border-box;background:transparent;border:1px solid var(--title-edge);color:var(--title-paper);font:15px/1.3 var(--menu-font,Consolas,monospace);text-align:left;text-transform:none;letter-spacing:.02em;cursor:pointer}
#entry-realm-picker button:hover:not(:disabled),#entry-realm-picker button:focus-visible{border-color:var(--title-gold)}
#entry-realm-picker button[aria-checked="true"]{border-color:var(--title-gold);box-shadow:inset 3px 0 0 var(--title-gold);color:var(--title-gold-hi);cursor:default}
#entry-realm-picker button:disabled{opacity:.5;cursor:not-allowed}
#entry-realm-picker button[data-state="offline"] .realm-fill{opacity:.65}
#entry-realm-picker .realm-fill{display:grid;justify-items:end;white-space:nowrap}
#entry-realm-picker .realm-queue{font-size:13px;color:var(--title-gold-hi)}
#entry-realm-picker .realm-queue[hidden]{display:none}
#entry-realm-picker .realm-ping{text-align:right;white-space:nowrap;opacity:.8}
#entry-realm-picker .realm-ping[data-quality="good"]{color:#8fd18b}
#entry-realm-picker .realm-ping[data-quality="fair"]{color:var(--title-gold-hi)}
#entry-realm-picker .realm-ping[data-quality="poor"]{color:#e08a6a}

/* Lightweight early mobile notice uses the established title palette. */
body.desktop-required,body.signin-tab{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;box-sizing:border-box;padding:32px 24px;background:#0a100e;color:var(--title-paper);font:17px/1.6 Consolas,monospace;text-align:center}
.desktop-required main,.signin-tab main{max-width:520px}
.desktop-required img,.signin-tab img{width:100%;height:auto;margin-bottom:24px}
.desktop-required h1,.signin-tab h1{font-size:24px;color:var(--title-gold-hi)}
.desktop-required p,.signin-tab p{margin:16px 0 28px}
.desktop-required a,.signin-tab a{display:inline-block;padding:10px 18px;border:1px solid var(--title-gold);background:var(--title-panel);color:var(--title-gold-hi);text-decoration:none}
.desktop-required a:focus-visible,.signin-tab a:focus-visible{outline:2px solid var(--title-gold-hi);outline-offset:4px}
@media(max-height:800px){html body #entry-panel .title-center{gap:12px;padding:12px 0}}

/* Queue position shares the server summary's existing type and palette. */
html body #entry-panel #entry-queue-summary{margin-top:12px;padding-top:12px;border-top:1px solid var(--title-edge)}
html body #entry-panel #entry-queue-summary[hidden]{display:none}
html body #entry-panel #entry-queue-position{font:700 24px/1.2 var(--menu-font,Consolas,monospace);color:var(--title-gold-hi)}
html body #entry-panel #entry-leave-queue{margin-top:12px}

/* Priority queue offer under the queue position. */
html body #entry-panel #entry-supporter-time{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:10px 0 0;padding:8px 10px;border:1px solid var(--title-gold-hi);font-size:14px;line-height:1.45;text-transform:none;letter-spacing:0}
html body #entry-panel #entry-supporter-time[hidden]{display:none}
html body #entry-panel #entry-supporter-time strong{color:var(--title-gold-hi);font-size:15px}
html body #entry-panel #entry-supporter-time span{color:var(--title-paper)}
html body #entry-panel #entry-supporter-time a{color:var(--title-gold-hi);text-decoration:underline}
html body #entry-panel #entry-supporter-time a[hidden]{display:none}
html body #entry-panel #entry-queue-priority{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding:8px 10px;border:1px solid var(--title-gold-hi);font-size:14px;line-height:1.45}
html body #entry-panel #entry-queue-priority[hidden]{display:none}
html body #entry-panel #entry-queue-priority strong{color:var(--title-gold-hi);font-size:15px}
html body #entry-panel #entry-queue-priority span{color:var(--title-paper);text-transform:none;letter-spacing:0}
html body #entry-panel #entry-queue-supporter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:14px}
html body #entry-panel #entry-queue-supporter[hidden]{display:none}
html body #entry-panel #entry-queue-supporter a{color:var(--title-gold-hi);text-decoration:underline}
html body #entry-panel #entry-queue-supporter button{width:22px;height:22px;min-height:0;margin:0;padding:0;border:1px solid var(--title-edge);background:transparent;color:var(--title-paper);font:13px/1 var(--menu-font,Consolas,monospace);cursor:pointer}
html body #entry-panel #entry-queue-supporter p{flex-basis:100%;margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--title-paper);text-transform:none;letter-spacing:0}

/* Own supporter badge beside the Support link. */
.title-supporter{display:inline-flex;align-items:center;padding:3px 8px;margin-right:6px;border:1px solid #00dcff;color:#00dcff;font-size:13px;letter-spacing:.04em;cursor:default}
.title-supporter[hidden]{display:none}

/* Fit any viewport height: sizes follow the available height so Play, the account row and the footer links stay on screen. */
html body #entry-panel .title-screen{--card-h:clamp(48px,10.5vh,98px);padding-block:clamp(8px,1.8vh,18px)}
html body #entry-panel .title-wordmark img{width:min(1060px,92vw,calc(14vh * 7.16))}
html body #entry-panel .title-center{gap:clamp(6px,1.4vh,22px);padding-block:clamp(2px,1vh,36px)}
html body #entry-panel .title-tagline{margin-block:-2px 0}
html body #entry-panel .title-label{margin-bottom:clamp(2px,.8vh,8px)!important}
html body #entry-panel #character-cards{padding-top:clamp(14px,2.2vh,20px)!important;padding-bottom:clamp(2px,.8vh,8px)!important}
html body #entry-panel#entry-panel #character-cards .character-card{grid-template-rows:var(--card-h) auto auto;width:calc(var(--card-h) * 1.14 + 10px);min-height:calc(var(--card-h) + 52px);padding-block:clamp(6px,1.1vh,10px) clamp(5px,.9vh,9px)!important}
html body #entry-panel#entry-panel #character-cards .character-card-new{grid-template-rows:var(--card-h) auto}
html body #entry-panel #character-cards canvas{width:calc(var(--card-h) * .75)!important;height:var(--card-h)!important}
html body #entry-panel .character-plus{margin-top:calc(var(--card-h) * .22)}
html body #entry-panel #entry-server-panel{padding:clamp(6px,1.1vh,12px) 16px}
#entry-realm-picker{gap:clamp(3px,.7vh,6px)}
#entry-realm-picker button{padding-block:clamp(4px,.8vh,7px)}
html body #entry-panel#entry-panel #entry-actions{gap:clamp(6px,1.1vh,10px)!important}
html body #entry-panel#entry-panel #entry-actions button{min-height:clamp(36px,5.4vh,44px)}
html body #entry-panel#entry-panel #entry-actions #entry-connect{min-height:clamp(42px,6.6vh,58px)}
@media(max-height:760px){html body #entry-panel .title-tagline{display:none}}
@media(max-height:640px){#entry-account-actions{margin-top:6px}}
/* Waiting in the queue: the roster shrinks and the other realms step aside so Play and the footer stay visible. */
html body #entry-panel .title-screen:has(#entry-queue-summary:not([hidden])){--card-h:clamp(40px,7.5vh,70px)}
html body #entry-panel .title-screen:has(#entry-queue-summary:not([hidden])) .title-tagline{display:none}
html body #entry-panel #entry-server-panel:has(#entry-queue-summary:not([hidden])) #entry-realm-picker button[aria-checked="false"]{display:none}
html body #entry-panel #entry-server-panel:has(#entry-queue-summary:not([hidden])) #entry-queue-summary{margin-top:6px;padding-top:6px}
html body #entry-panel #entry-server-panel:has(#entry-queue-summary:not([hidden])) #entry-status{margin-top:6px!important}
html body #entry-panel #entry-server-panel:has(#entry-queue-summary:not([hidden])) #entry-leave-queue{margin-top:6px}
html body #entry-panel .title-screen:has(#entry-queue-summary:not([hidden])) .title-wordmark img{width:min(1060px,92vw,calc(11vh * 7.16))}
html body #entry-panel .title-screen:has(#entry-queue-summary:not([hidden])) .title-center{gap:clamp(4px,1vh,14px)}