/* place-value/styles.css – Tojásfarm */

/* ─── Keret ─────────────────────────────────────────────────────────── */
/* A játéktér (game-engine-root) magasabb a tartalomnál: a kör kitölti, a raktár és a csomagolás
   lenyúlik az aljáig, az Ellenőrzés gomb alul marad */
.game-engine-root[data-level^="egg-"] { display: flex; flex-direction: column; }
.egg-round { position: relative; display: flex; flex-direction: column; flex: 1; width: 100%; margin: 0 auto; padding: .7rem; text-align: center; }
.egg-express { display: flex; flex-direction: column; flex: 1; }
.egg-work { flex: 1; }
.egg-round .game-controls { position: absolute; top: .7rem; right: .7rem; z-index: 1; display: flex; gap: .6rem; }
.egg-round > button.green { display: block; margin: .7rem auto; }
.egg-round button:focus-visible { outline: 3px solid #7051a1; outline-offset: 2px; }
.egg-round button:disabled { cursor: default; }

.egg-express { color: #452376; }
.egg-top { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: .75rem; align-items: start; min-height: 48px; margin-bottom: .8rem; }
.egg-order { justify-self: center; width: fit-content; max-width: 100%; padding: .45rem 1.1rem; border-radius: 1rem; background: #fff; box-shadow: 0 3px 10px rgba(35, 22, 67, .12); }
.egg-task { margin: 0; font-size: 1.2rem; line-height: 1.45; }
.egg-help { margin: .25rem 0; font-size: .9rem; line-height: 1.4; }

/* ─── Raktár és csomagolás: két oszlop, telefonon egymás alatt ──────── */
.egg-work { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 1rem; align-items: stretch; margin: .8rem 0; }
.egg-panel-title { margin: 0 0 .8rem; font-size: 1.15rem; }
.egg-supply { padding: .8rem; border-radius: 1.2rem; background: #fffaf0ed; }
.egg-sources { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.egg-board { display: flex; flex-direction: column; min-height: 260px; overflow: auto; padding: .8rem 1rem 1rem; border: 3px solid #d59750; border-radius: 1.2rem; background: linear-gradient(#ffdf9ce8, #f3bd77ed); box-shadow: inset 0 0 0 3px #fff2d280, 0 5px 10px #59382120; }

/* Kupac a raktárban: az alsó példányok lefelé-jobbra csúsztatva a fő darab mögött */
.egg-stack { --step-x: 6px; --step-y: 8px; position: relative; display: inline-grid; padding: 0 calc((var(--depth) - 1) * var(--step-x)) calc((var(--depth) - 1) * var(--step-y)) 0; }
.stack-layer { grid-area: 1 / 1; display: inline-flex; }
.stack-layer.is-under { transform: translate(calc(var(--i) * var(--step-x)), calc(var(--i) * var(--step-y))); filter: brightness(calc(1 - var(--i) * .07)); }
.dragging-ghost .stack-layer.is-under, .dragging-ghost strong { display: none; }
.stack-layer.is-under .egg-package-tag { visibility: hidden; }
.dragging-ghost .egg-stack { padding: 0; }
.egg-columns { display: flex; flex: 1; gap: .7rem; }
/* Helyiérték-oszlopok: a csomagolás aljáig érnek, szaggatott kerettel jelzik, hogy ide lehet tenni */
.egg-column { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: .6rem; border: 2px dashed #c98f4f99; border-radius: .8rem; background: #ffefcd40; transition: background-color .15s, border-color .15s; }
.egg-column > .egg-pieces { flex: 1; align-content: flex-start; }
.egg-column h4 { margin: 0 0 .7rem; font-family: inherit; font-size: 1.1rem; font-weight: 400; }
.egg-pieces { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: .6rem; }
/* Húzás közben az a zóna, ahová az elengedés kerül */
.egg-column.is-drop-target { border-color: #7051a1; background: #fff4d6; }
.egg-board.is-drop-target { border-color: #7051a1; }
.egg-supply.is-drop-target { box-shadow: inset 0 0 0 3px #7051a1; }
.egg-loose { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: .1rem; flex-basis: 100%; min-height: 30px; }

/* Húzható elemek: padding nélküli, átlátszó gombok, az alakjukat követő árnyékkal. */
.egg-source, .egg-piece {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    min-width: 48px; min-height: 48px; padding: 0;
    font: inherit; color: inherit; border: 0; border-radius: .75rem; background: transparent;
    cursor: grab; transition: filter .15s;
}
.egg-source { font-size: .85rem; }
.egg-source:hover:not(:disabled), .egg-piece:hover:not(:disabled):not(.is-selected):not(.is-drop-target) { filter: drop-shadow(0 2px 4px #59382166); }
.egg-piece.is-selected, .egg-piece.is-drop-target { position: relative; z-index: 1; filter: drop-shadow(0 0 1px #fff600) drop-shadow(0 0 3px #fff600) drop-shadow(0 0 7px #ff9d00); }
.egg-source:disabled { opacity: .45; cursor: default; }
.egg-piece:disabled { cursor: default; }

/* ─── Tojás, tojástartó, láda, kosár ────────────────────────────────── */
.egg-art { display: inline-block; flex: 0 0 auto; width: 26px; height: 34px; border: 1px solid #c88042; border-radius: 49% 49% 45% 45% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 29% 25%, #ffe8c9 0, #f6bd81 37%, #dc8f4c 75%, #b76931 100%); box-shadow: inset -2px -3px 3px #a9593429, 0 3px 3px #59382125; }

/* Tojástartó: a cellák méretét, a kivágást és a peremet az engine.js számolja a --u-ból
   (--u = egy középső mélyedés szélessége) */
.egg-tray { --u: 36px; display: grid; flex: 0 0 auto; filter: drop-shadow(0 3px 3px #59382130); }
.tray-slot { box-sizing: border-box; display: flex; align-items: center; justify-content: center; background-image: var(--tray-image); background-repeat: no-repeat; background-size: var(--tray-sheet) var(--tray-sheet); }
.tray-slot .egg-art { width: calc(var(--u) * .72); height: calc(var(--u) * .79); border-radius: 49% 49% 45% 45% / 57% 57% 43% 43%; box-shadow: inset -2px -3px 3px #a9593429, calc(var(--u) * .025) calc(var(--u) * .055) calc(var(--u) * .08) #59382166; }

.egg-package-tag { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); min-width: 30px; padding: 1px 6px; border-radius: 4px; background: #fffaf0; color: #452376; font-size: 16px; line-height: 1.2; box-shadow: 0 2px 2px #59382125; }

/* Százas láda: sima, egyszínű doboz belső margó nélkül; a mérete a 10 tojástartóból adódik */
.egg-crate { position: relative; display: inline-flex; border-radius: 8px; background: #c9955b; box-shadow: 0 3px 6px #51381730; }
.egg-crate-boxes { display: grid; grid-template-columns: repeat(2, auto); gap: 0; }
.egg-crate > .egg-package-tag { top: auto; bottom: -8px; }
.egg-crate .egg-tray { --u: 14px; }
.egg-source .egg-crate .egg-tray { --u: 9.5px; }

.egg-basket { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 62px; padding: 14px 6px 5px; border: 2px solid #b58b57; border-radius: 10px 10px 28px 28px; background: repeating-linear-gradient(0deg, #c69053 0 5px, #ddb27c 5px 9px); box-shadow: 0 4px 0 #a78054, 0 6px 7px #51381725; }
.egg-basket-eggs { display: grid; grid-template-columns: repeat(3, 22px); gap: 2px; }
.egg-basket-eggs .egg-art { width: 20px; height: 26px; }

/* ─── Műveletek és eredmény ─────────────────────────────────────────── */
.egg-actions, .egg-selection { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: .7rem 0; }
.egg-selection { flex-basis: 100%; margin: 0; padding: .6rem; border-radius: .8rem; background: #fffaf0ee; }
.egg-selection > span { font-weight: 700; }
.egg-selection .button, .egg-actions > .button { font-size: .9rem; }
.egg-answers { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.egg-answer { align-self: center; display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-radius: 1rem; background: #fff; }
.egg-answer input { width: 4rem; min-height: 44px; padding: .3rem; border: 2px solid #d7c6e5; border-radius: .6rem; font: inherit; color: inherit; text-align: center; }
.egg-answer input:focus-visible { outline: 3px solid #7051a1; outline-offset: 2px; }
.egg-answer input[aria-invalid="true"] { border-color: #b3261e; }
.egg-check { margin: .8rem auto; }
.egg-equation { width: fit-content; margin: .8rem auto; padding: .5rem 1rem; border-radius: 1rem; background: #fff; box-shadow: 0 3px 10px #23164320; font-size: 1.25rem; font-weight: 700; }

@media (max-width: 650px) {
    .egg-round { padding: .4rem; }
    .egg-round .game-controls { top: .4rem; right: .4rem; }
    .egg-round .game-controls .button { min-height: 44px; padding: .5rem .65rem; font-size: .85rem; }
    .egg-top { grid-template-columns: minmax(0, 1fr) 90px; gap: .5rem; min-height: 44px; }
    .egg-task { font-size: 1rem; }
    .egg-tray { --u: 28px; }
    .egg-work { grid-template-columns: 1fr; gap: .6rem; }
    .egg-sources { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: .8rem; }
    .egg-columns { flex-wrap: wrap; }
    .egg-column { min-width: 45%; }
    .egg-board { max-height: 42vh; padding: .5rem; }
    .egg-equation { font-size: 1.05rem; }
}

/* Live count of the packages placed in each place-value column. */
.egg-column-count { position: sticky; bottom: 0; z-index: 1; display: inline-block; align-self: center; flex-shrink: 0; margin-top: .65rem; padding: .25rem .65rem; border-radius: .5rem; background: #fff; color: #462778; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3; box-shadow: 0 2px 6px #3520441a; white-space: nowrap; pointer-events: none; }