/*
 * v5 (owner): no stretched leaf: on wide screens the leaf keeps its own proportions; below 600px the form is plain on the page (labels above the dark leaf-green fields, wood buttons, no frame). Fields are 44px tall.
 * Ekoloko World — linked characters in the picker (eko-world-characters.v1.js).
 * The original Flash wooden button (landing3/wood-*-v1.webp, 9-slice) for the actions, the original login leaf
 * (landing3/leaf-clean-v1.webp) behind the "הוסף דמות קיימת" form with the login page's dark leaf-green fields.
  * v3: the two buttons fit side by side.
 * v2: the app's own "add" button is replaced by two wooden buttons in a row ("הוספת דמות קיימת", "יצירת דמות חדשה").
 * Versioned in the file name: /auth is served with a one-year cache.
 */
#eko-player-auth[data-eko-chars-full] #eko-player-tiles ~ .eko-auth-button--quiet { display: none !important; }
.eko-chars-bar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 14px auto 6px; direction: rtl; font: 15px/1.4 Arial, sans-serif; color: #18384f; }
.eko-chars-count { margin: 0; font-weight: bold; }
.eko-chars-wood {
  display: inline-flex; align-items: center; justify-content: center; min-width: 200px; min-height: 52px; padding: 6px 26px 11px;
  border: 0 solid transparent; border-image: url('landing3/wood-up-v1.webp') 26 48 30 44 fill / 13px 24px 15px 22px stretch;
  background: none; color: #6a4d00; text-shadow: 0 1px 0 #f0d78a; font: 21px/1 EkoGan, 'Trebuchet MS', Arial, sans-serif; cursor: pointer;
}
.eko-chars-wood:hover, .eko-chars-wood:focus-visible { border-image-source: url('landing3/wood-over-v1.webp'); color: #e3c46c; text-shadow: 0 1px 0 #3d2c00; }
.eko-chars-wood:focus-visible, .eko-chars-unlink:focus-visible { outline: 3px solid #0d527e; outline-offset: 3px; }
.eko-chars-wood:active { border-image-source: url('landing3/wood-up-v1.webp'); color: #6a4d00; text-shadow: 0 1px 0 #f0d78a; transform: translateY(1px); }
.eko-chars-wood:disabled { cursor: wait; filter: grayscale(.3) opacity(.8); }
.eko-chars-wood--light { min-width: 140px; font-size: 18px; filter: brightness(1.08); }
.eko-chars-unlink { min-height: 44px; padding: 0 12px; border: 0; background: none; color: #a1150f; font: bold 15px Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.eko-chars-error { margin: 0; color: #a1150f; font: bold 14px/1.4 Arial, sans-serif; text-align: right; }

/* the form on the original leaf */
.eko-chars-dialog { width: min(620px, 96vw); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; color: #fff; }
.eko-chars-dialog::backdrop { background: rgba(24, 56, 79, .55); }
.eko-chars-form {
  box-sizing: border-box; min-height: 420px; padding: 70px 22% 60px 9%;
  background: url('landing3/leaf-clean-v1.webp') center / 100% 100% no-repeat; direction: rtl; text-align: right;
}
.eko-chars-form h2 { margin: 0 0 8px; font: 30px/1.1 EkoGan, 'Trebuchet MS', Arial, sans-serif; color: #fff; text-shadow: 0 2px 0 #3b6213, 0 0 6px #2a4a0c80; text-align: center; }
.eko-chars-lead { margin: 0 0 14px; font: bold 14px/1.45 Arial, sans-serif; text-shadow: 0 1px 2px #2a4a0c; text-align: center; }
.eko-chars-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 0 10px; }
.eko-chars-row label { font: 22px/1 'EkoSpacerBold', Arial, sans-serif; color: #fff; text-shadow: 0 0 2px #2a4a0c, 0 1px 2px #2a4a0c; }
.eko-chars-row input {
  box-sizing: border-box; width: 100%; height: 36px; padding: 0 10px; border: 1px solid #4a6418; border-bottom-color: #8db044; border-radius: 2px;
  background: #5f7e22; color: #fff8dc; font: 16px Arial, sans-serif; direction: rtl; text-align: right;
  box-shadow: inset 0 3px 3px -1px #46601a; -webkit-appearance: none; appearance: none;
}
.eko-chars-row input:focus { outline: 2px solid #ffe26a; outline-offset: 1px; }
.eko-chars-form .eko-chars-error { margin: 4px 0 6px; padding: 3px 8px; background: #fff7f4; }
.eko-chars-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
@font-face { font-family: 'EkoSpacerBold'; src: url('fonts/spacer-bold-v1.woff') format('woff'); font-display: swap; unicode-range: U+0590-05FF; }
@media (max-width: 520px) {
  .eko-chars-form { min-height: 0; padding: 56px 12% 52px 8%; background-size: 100% 100%; }
  .eko-chars-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .eko-chars-row input { height: 44px; }
  .eko-chars-wood { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .eko-chars-wood:active { transform: none; } }

/* ---- v2 ---- */
#eko-player-tiles ~ .eko-auth-button--quiet { display: none !important; }
.eko-chars-actions-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.eko-chars-count { font-size: 16px; }
.eko-chars-note { margin: 0; max-width: 34ch; text-align: center; color: #4a6076; font: 15px/1.5 Arial, sans-serif; }
@media (max-width: 520px) { .eko-chars-actions-row { flex-direction: column; align-items: stretch; width: min(300px, 100%); } }

/* ---- v2b: the two buttons fit side by side on desktop ---- */
.eko-chars-actions-row .eko-chars-wood { min-width: 168px; padding-inline: 18px; font-size: 18px; }

/* the bar may be wider than the narrow picker column, centred on it */
#eko-chars-bar { width: min(460px, 92vw); margin-inline: calc((100% - min(460px, 92vw)) / 2) !important; }

/* ---- v5 ---- */
.eko-chars-row input { height: 44px; }
.eko-chars-form { background-size: contain !important; background-position: center !important; aspect-ratio: 1019 / 713; min-height: 0 !important; padding: 9% 25% 8% 10% !important; display: flex; flex-direction: column; justify-content: center; }
.eko-chars-dialog { width: min(760px, 96vw); }
@media (max-width: 600px) {
  .eko-chars-dialog { width: min(420px, 94vw); color: #18384f; }
  .eko-chars-form { aspect-ratio: auto; background: #fbf6e2 !important; padding: 24px 18px 20px !important; }
  .eko-chars-form h2 { color: #18384f; text-shadow: none; font-size: 26px; }
  .eko-chars-lead { color: #18384f; text-shadow: none; font-weight: normal; font-size: 15px; }
  .eko-chars-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .eko-chars-row label { color: #18384f; text-shadow: none; font: bold 17px/1.2 Arial, sans-serif; }
  .eko-chars-actions { flex-direction: column; align-items: stretch; }
}