/*
 * Ekoloko World — entry screens (UX1): sign-in, registration, character picker, add-character.
 * Loaded after eko-world-auth.v20.css; every rule is scoped to #eko-player-auth.
 * v4: the sign-in leaf keeps its in-game title (game art, like the slabs); the enter slab fits a phone tile.
 * v3: Ekoloko design language (/var/www/ekoloko/docs/ekoloko-design-language.md) across the entry screens: Arial .Title
 *     headings, image-border frames, slab buttons at their natural width, avatar loading/failed states, a visible
 *     "enter" affordance and busy state on the picker, 3px focus rings, reduced motion, the maker's bar off the logo.
 * v2: phones show two or more characters side by side, so the whole cast and the add button fit on one screen.
 * v1: the account menu hangs from its wooden plaque (desktop) or opens as a bottom sheet (phones);
 *     on phones the name step puts the form right under the avatar and before the rules note,
 *     the look step loses the empty band above the board, and the back links stay readable over the bush.
 * Versioned in the file name: /auth is served with a one-year cache, so a change ships as v2, not as an edit.
 */

/* ---- account menu: under its plaque, not across the page ---- */
@media (min-width:761px){
  #eko-player-auth #eko-login-account-menu{position:absolute;top:66px;right:auto;left:max(3px,calc(50% - 514px));z-index:6}
  #eko-player-auth:has(.eko-login-header--admin) #eko-login-account-menu{left:max(3px,calc(50% - 469px))}
}
@media (min-width:761px) and (max-width:1034px){
  #eko-player-auth:not(:has(.eko-login-header--admin)) #eko-login-account-menu{left:4px}
}
/* phones: a bottom sheet with a dimmed page behind it, thumb-sized rows */
@media (max-width:760px){
  #eko-player-auth #eko-login-account-menu{
    position:fixed;top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;z-index:10020;
    padding:8px 10px;border-radius:8px;box-shadow:0 0 0 100vmax rgba(24,56,79,.45),3px 4px #26462b4d
  }
  #eko-player-auth #eko-login-account-menu button,#eko-player-auth #eko-login-account-menu a{min-height:48px;font-size:16px}
}

/* ---- phones: name step in the order the player fills it ---- */
@media (max-width:760px){
  #eko-player-auth .eko-world-reg--account{display:flex;flex-direction:column;gap:10px}
  #eko-player-auth .eko-world-reg--account .eko-world-reg-grid,
  #eko-player-auth .eko-world-reg--account .eko-world-reg-stage{display:contents}
  #eko-player-auth .eko-world-reg--account .eko-world-reg-head{order:0}
  #eko-player-auth .eko-world-reg--account .eko-world-board{order:1;align-self:center}
  #eko-player-auth .eko-world-reg--account .eko-world-nametag{order:2;align-self:center}
  #eko-player-auth .eko-world-reg--account .eko-world-reg-stage>.eko-world-back{order:3;align-self:center}
  #eko-player-auth .eko-world-reg--account .eko-world-reg-controls{order:4}
  #eko-player-auth .eko-world-reg--account .eko-world-reg-actions{order:5}
  #eko-player-auth .eko-world-reg--account .eko-world-rules{order:6;align-self:center}

  /* the look step: the board art is 2:3 of its box; drop the empty sky above it */
  #eko-player-auth .eko-world-board--big{height:232px}

  /* the back links sit on the bush art: keep them on a light pill above it */
  #eko-player-auth .eko-world-reg-actions{position:relative;z-index:1}
  #eko-player-auth .eko-world-reg-actions .eko-world-back{padding:4px 12px;border-radius:999px;background:#ffffffd9}
}

/* ---- v2, phones: two or more characters side by side ---- */
@media (max-width:760px){
  #eko-player-auth:not([data-account-count="0"]):not([data-account-count="1"]) .eko-player-tile{flex:0 1 calc(50% - 7px);width:calc(50% - 7px);padding:6px 6px 8px}
  #eko-player-auth:not([data-account-count="0"]):not([data-account-count="1"]) .eko-player-tile bdi{max-width:100%;overflow-wrap:anywhere;font-size:14px}
}

/* ==== v3: the Ekoloko design language on every entry panel ==== */
/* tokens (ekoloko-design-language.md "טוקנים"): text #18384f, muted #4a6076, image border 1px solid #a7b793,
   .Title Arial bold 24px, body Arial 15px; GanCLM only on slab buttons */
#eko-player-auth{--eko-ink:#18384f;--eko-muted:#4a6076;--eko-frame:#a7b793}

/* headings of the panels are .Title (Arial bold 24px), not display type */
#eko-player-auth #eko-create-panel h2,
#eko-player-auth:not([data-auth-state=signed_out]):not([data-auth-state=register]) .eko-auth-view>h1:not(.eko-world-sign):not(.eko-world-plaque){
  margin:0 0 8px;color:var(--eko-ink);font:700 24px/1.25 Arial,Helvetica,sans-serif;text-shadow:none
}
/* the picker says what to do: its heading was visually hidden */
#eko-player-auth[data-auth-state=ready_player] h1.eko-visually-hidden{
  position:static!important;width:auto!important;height:auto!important;margin:0 0 12px!important;padding:0!important;
  overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;
  color:var(--eko-ink);font:700 24px/1.25 Arial,Helvetica,sans-serif;text-align:center
}

/* "connected as": plain muted body text, not a lavender chip */
#eko-player-auth .eko-auth-identity{margin:0 0 10px;padding:0;border-radius:0;background:none;color:var(--eko-muted);font:400 15px Arial,Helvetica,sans-serif}
#eko-player-auth .eko-auth-identity bdi{color:var(--eko-ink);font-weight:700}

/* the name form after the maker: a real labelled field, 44px tall, framed like the original images */
#eko-player-auth #eko-create-panel p{color:var(--eko-ink);font:400 15px/1.45 Arial,Helvetica,sans-serif}
#eko-player-auth #eko-create-form{display:grid;gap:6px;width:min(360px,100%);margin:10px auto 0;text-align:start}
#eko-player-auth #eko-create-form label{color:var(--eko-ink);font:700 15px Arial,Helvetica,sans-serif}
#eko-player-auth #eko-create-username{box-sizing:border-box;width:100%;height:44px;padding:0 12px;border:1px solid var(--eko-frame);border-radius:0;
  color:var(--eko-ink);background:#fff;font:700 17px Arial,Helvetica,sans-serif;text-align:left}
#eko-player-auth #eko-create-username[aria-invalid=true]{border-color:#b3261e;box-shadow:inset 0 0 0 1px #b3261e}
#eko-player-auth #eko-create-help{margin:0;color:var(--eko-muted);font-size:13px}
#eko-player-auth #eko-create-form .eko-auth-button,
#eko-player-auth .eko-auth-view>.eko-auth-button--orange{justify-self:center;width:min(320px,100%);margin:10px auto 0}

/* the "everything is connected" card: the new character stands on an original item tile */
#eko-player-auth .eko-auth-view>.avatar-preview{display:block;width:200px!important;height:auto;margin:6px auto 4px;padding:10px 20px;
  background:url('reg/tile-up.webp') center/100% 100% no-repeat;border:1px solid var(--eko-frame)}

/* ---- avatar art loading / failed (BYn2x1Z2 marks the canvas, d1b) ---- */
#eko-player-auth .eko-world-preview:has(canvas[data-loading])::before,
#eko-player-auth .eko-player-tile:has(canvas[data-loading])::before{
  position:absolute;z-index:2;top:50%;left:50%;width:40px;height:40px;margin:-24px 0 0 -24px;content:'';
  border:4px solid #d6e8b1;border-top-color:#5b9a22;border-radius:50%;animation:eko-entry-spin .8s linear infinite
}
#eko-player-auth .eko-world-board .eko-world-preview:has(canvas[data-loading]){min-width:135px;min-height:135px}
#eko-player-auth .eko-world-preview:has(canvas[data-failed])::before,
#eko-player-auth .eko-player-tile:has(canvas[data-failed])::before{
  position:absolute;z-index:2;top:40%;left:8%;right:8%;content:'המראה לא נטען. רעננו את העמוד.';
  color:var(--eko-muted);font:700 13px/1.35 Arial,Helvetica,sans-serif;text-align:center
}
@keyframes eko-entry-spin{to{transform:rotate(360deg)}}

/* ---- picker: say how to enter, and show that entering is under way ---- */
#eko-player-auth .eko-player-tile .eko-launch-account-name{color:var(--eko-ink);font:700 15px Arial,Helvetica,sans-serif}
#eko-player-auth .eko-player-tile>span{color:var(--eko-muted);font:400 13px Arial,Helvetica,sans-serif}
#eko-player-auth .eko-player-tile::after{
  display:block;min-width:130px;margin:6px auto 0;padding:7px 14px 9px;content:'כניסה לעולם';
  color:#4a2a05;background:url('btn-orange-slab.png') center/100% 100% no-repeat;font:700 17px EkoGan,'Trebuchet MS',Arial,sans-serif
}
#eko-player-auth .eko-player-tile:hover::after,#eko-player-auth .eko-player-tile:focus-visible::after{filter:brightness(1.08)}
#eko-player-auth #eko-player-tiles{position:relative}
#eko-player-auth #eko-player-tiles[aria-busy=true]{pointer-events:none}
#eko-player-auth #eko-player-tiles[aria-busy=true]::after{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;content:'נכנסים לעולם…';
  color:var(--eko-ink);background:rgba(248,248,228,.72);font:700 20px Arial,Helvetica,sans-serif
}

/* ---- the maker's "choose a character" bar no longer covers the Ekoloko World logo (top-right of the stage) ---- */
#eko-auth-avatar-bar{right:auto;left:12px}

/* ---- focus: 3px, offset, visible on paper and on the blue band (design-language §10 / "focus-visible 3px") ---- */
#eko-player-auth button:focus-visible,#eko-player-auth a:focus-visible,#eko-player-auth input:focus-visible,#eko-player-auth [tabindex]:focus-visible{
  outline:3px solid var(--eko-ink);outline-offset:2px
}
#eko-player-auth #eko-login-header a:focus-visible,#eko-player-auth #eko-login-header button:focus-visible,
#eko-auth-avatar-bar button:focus-visible{outline:3px solid #fff;outline-offset:2px}
#eko-player-auth .eko-player-tile:focus-visible{outline:3px solid #f60;outline-offset:3px}

/* ---- text links: the original link colour and a 44px touch target on phones ---- */
#eko-player-auth .eko-auth-link{color:var(--eko-ink);font:700 14px Arial,Helvetica,sans-serif;text-decoration:underline}
@media (max-width:760px){#eko-player-auth .eko-auth-link{min-height:44px}}

/* ---- reduced motion: no spinning, no fades ---- */
@media (prefers-reduced-motion:reduce){
  #eko-player-auth *,#eko-player-auth *::before,#eko-player-auth *::after{animation:none!important;transition:none!important}
}

/* v4: on a phone the two-up tiles are ~110px wide: the enter slab takes the tile width */
@media (max-width:760px){
  #eko-player-auth .eko-player-tile::after{box-sizing:border-box;min-width:0;width:100%;padding:6px 6px 8px;font-size:15px}
}