/* Infinite Craft: board (canvas) + list of discovered items. Mobile: board on top, list below; desktop: list on the right. */
.wpg-page--infinite-craft .wpg-shell { max-width: 1080px; }
.wpg-app--infinite-craft { padding: 10px !important; min-height: 0; }
.wpg-ic { display: flex; flex-direction: column; gap: 10px; }
.wpg-ic-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Items: same look on the board, in the list and while dragged (the dragged copy lives in <body>). */
.wpg-ic-el, .wpg-ic-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px;
    border: 1px solid var(--tile-line, #d6dbe3); border-radius: 9px; background: var(--surface, #fff); color: var(--ink, #14181f);
    font-weight: 650; font-size: 15px; line-height: 1.25; white-space: nowrap; cursor: grab;
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.wpg-ic-e { font-size: 1.12em; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.wpg-ic-n { overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.wpg-ic-el { position: absolute; left: 0; top: 0; z-index: 1; touch-action: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 3px 10px rgba(15, 23, 42, .06); transition: box-shadow .15s, border-color .15s; }
.wpg-ic-el:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--tile-line)); }
.wpg-ic-float { position: fixed !important; z-index: 10050; pointer-events: none; cursor: grabbing; transform: scale(1.07); box-shadow: 0 14px 34px rgba(15, 23, 42, .22); border-color: var(--accent); font-family: inherit; }
.wpg-ic-el.is-over { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.wpg-ic-el.is-mixing { opacity: .7; }
.wpg-ic-el.is-pop { animation: wpg-ic-pop .36s var(--ease); }
.wpg-ic-el.is-shake { animation: wpg-ic-shake .34s ease; }
.wpg-ic-el.is-gone { transition: opacity .18s, transform .18s; opacity: 0; transform: scale(.6); }
.wpg-ic-el.is-new { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .3), 0 6px 18px rgba(245, 158, 11, .25); z-index: 3; }
.wpg-ic-el.is-goal { animation: wpg-ic-pop .5s var(--ease) 2; border-color: var(--ok); }
.wpg-ic-badge {
    position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 2px 8px; border-radius: 999px;
    background: linear-gradient(135deg, #fbbf24, #f97316); color: #fff; font-size: 11.5px; font-weight: 800; white-space: nowrap;
    pointer-events: none; animation: wpg-ic-rise .4s var(--ease);
}
.wpg-ic-spark {
    position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fbbf24;
    pointer-events: none; animation: wpg-ic-spark .8s ease-out forwards; transform: rotate(var(--a)) translateY(0);
}
.wpg-ic-spark:nth-child(odd) { background: var(--accent); width: 5px; height: 5px; }
.wpg-ic-el.is-hint, .wpg-ic-chip.is-hint { border-color: var(--accent); animation: wpg-ic-glow 1.3s ease-in-out infinite; }
.wpg-ic-el.is-hint.is-pop, .wpg-ic-el.is-hint.is-shake { animation-iteration-count: 1; }
@keyframes wpg-ic-pop { 0% { transform: scale(.4); opacity: .2; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); } }
@keyframes wpg-ic-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(3deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes wpg-ic-rise { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes wpg-ic-spark { to { transform: rotate(var(--a)) translateY(-46px) scale(.3); opacity: 0; } }
@keyframes wpg-ic-glow { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); } }

/* Goal bar */
.wpg-ic-goal {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 44px; padding: 5px 6px 5px 11px; border-radius: 13px;
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); font-size: 14px;
}
.wpg-ic-goal.is-pop { animation: wpg-ic-pop .36s var(--ease); }
.wpg-ic-goal.is-done { background: color-mix(in srgb, var(--ok) 11%, transparent); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.wpg-ic-goal__lbl { font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.wpg-ic-goal__item { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--tile-line); font-weight: 750; }
.wpg-ic-goal__item .wpg-ic-n { max-width: 150px; }
.wpg-ic-goal__acts { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.wpg-ic-goal__ok { font-weight: 800; color: var(--ok); white-space: nowrap; }
.wpg-ic-goal .wpg-btn--sm { padding: 6px 12px; font-size: 13px; }

/* Board */
.wpg-ic-canvas {
    position: relative; height: clamp(300px, 50svh, 470px); overflow: hidden; border-radius: 14px; border: 1px solid var(--line);
    background-color: var(--tile-bg);
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.3px);
    background-size: 22px 22px; touch-action: pan-y;
}
.wpg-ic-tip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px 40px 60px; text-align: center; color: var(--ink-soft); font-size: 15px; font-weight: 600; line-height: 1.45; pointer-events: none; }
.wpg-ic-tip[hidden] { display: none; }
.wpg-ic-count { position: absolute; top: 8px; left: 8px; z-index: 4; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); font-size: 12.5px; font-weight: 800; color: var(--ink-soft); pointer-events: none; }
.wpg-ic-ctl { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; pointer-events: none; }
.wpg-ic-ctl > * { pointer-events: auto; }
.wpg-ic-clear { background: color-mix(in srgb, var(--surface) 92%, var(--ink)) !important; }
.wpg-ic-hint.is-off { filter: grayscale(.85); opacity: .65; }
.wpg-ic-hint.is-busy { opacity: .75; cursor: progress; }

/* List */
.wpg-ic-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wpg-ic-find { display: flex; gap: 6px; }
.wpg-app--infinite-craft input.wpg-ic-search {
    flex: 1 1 auto; min-width: 0; width: auto !important; height: 40px !important; margin: 0 !important; padding: 0 12px !important;
    border: 1.5px solid var(--tile-line) !important; border-radius: 11px !important; background: var(--tile-bg) !important; color: var(--ink) !important;
    font: inherit !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: none !important; outline: none;
    user-select: text; -webkit-user-select: text;
}
.wpg-app--infinite-craft input.wpg-ic-search:focus { border-color: var(--accent) !important; }
.wpg-app--infinite-craft .wpg-ic-sort {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 40px; margin: 0; padding: 0 12px; border-radius: 11px;
    border: 1.5px solid var(--tile-line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; box-shadow: none;
}
.wpg-ic-sort svg { width: 16px; height: 16px; }
.wpg-ic-list {
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 2px 2px 6px; overflow-y: auto; overscroll-behavior: contain;
    max-height: clamp(150px, 29svh, 300px); touch-action: pan-y;
}
.wpg-ic-chip { padding: 5px 10px 5px 8px; font-size: 14.5px; transition: transform .12s, border-color .12s; }
.wpg-ic-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--tile-line)); }
.wpg-ic-chip.is-press { transform: scale(.95); border-color: var(--accent); }
.wpg-ic-chip.is-fresh { border-color: #f59e0b; background: color-mix(in srgb, #fbbf24 12%, var(--surface)); }
.wpg-ic-empty { width: 100%; padding: 14px 6px; text-align: center; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; }

/* Dialog bits */
.wpg-ic-statx { display: grid; gap: 6px; margin-top: 12px; }
.wpg-ic-statx > div, .wpg-ic-set__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 4%, transparent); font-size: 14.5px; }
.wpg-ic-set { display: grid; gap: 8px; }
.wpg-ic-set__row span { font-weight: 700; }
.wpg-modal p.wpg-ic-p { margin: 0; color: var(--ink-soft); }

@media (max-width: 420px) {
    .wpg-app--infinite-craft { padding: 8px !important; }
    .wpg-ic-goal { font-size: 13px; gap: 6px; padding-left: 9px; }
    .wpg-ic-goal__item .wpg-ic-n { max-width: 96px; }
    .wpg-ic-el { font-size: 14px; padding: 5px 9px 5px 8px; }
    .wpg-ic-chip { font-size: 14px; }
    .wpg-ic-n { max-width: 200px; }
}
@media (min-width: 760px) {
    .wpg-ic { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; }
    .wpg-ic-canvas { height: 600px; }
    .wpg-ic-side { min-height: 0; }
    .wpg-ic-list { flex: 1 1 0; min-height: 0; max-height: none; }
}