.wpg-tradle-head { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 10px; }
.wpg-tradle-total { background: color-mix(in srgb, var(--ink) 6%, transparent); }

.wpg-tradle-map { position: relative; width: 100%; height: 360px; border-radius: 12px; overflow: hidden; background: var(--tile-bg); box-shadow: inset 0 0 0 1px var(--line); }
.wpg-tradle-tile {
    position: absolute; box-sizing: border-box; border: 1px solid var(--surface); color: #fff; overflow: hidden; cursor: pointer;
    padding: 3px 5px; display: flex; flex-direction: column; justify-content: flex-start; line-height: 1.12;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: filter .15s;
    animation: wpg-tradle-in .35s var(--ease) both;
}
.wpg-tradle-tile:hover { filter: brightness(1.12); }
.wpg-tradle-tile.is-group { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 5px, transparent 5px 11px) !important; }
.wpg-tradle-tile.is-dark { color: #14181f; text-shadow: 0 1px 1px rgba(255, 255, 255, .25); }
.wpg-tradle-tile__n { font-weight: 800; overflow: hidden; padding-bottom: 2px; flex: 0 0 auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: normal; overflow-wrap: break-word; hyphens: manual; }
.wpg-tradle-tile__p { font-weight: 700; opacity: .92; margin-top: 1px; font-variant-numeric: tabular-nums; }
@keyframes wpg-tradle-in { from { opacity: 0; transform: scale(.96); } }

.wpg-tradle-credit { text-align: right; font-size: 11.5px; color: var(--ink-soft); margin: 4px 2px 10px; }
.wpg-tradle-credit a { color: var(--ink-soft) !important; text-decoration: underline !important; }

.wpg-tradle-form { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.wpg-tradle-field { position: relative; flex: 1 1 auto; min-width: 0; }
.wpg-tradle-form .wpg-btn { flex: 0 0 auto; }
.wpg-tradle-form .wpg-input:disabled { opacity: .55; }
.wpg-tradle-form .wpg-input.is-shake { animation: wpg-shake .4s; }
.wpg-tradle-sug {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; display: none; max-height: 270px; overflow: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); padding: 4px;
}
.wpg-tradle-sug.is-open { display: block; }
.wpg-tradle-sug__i { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); }
.wpg-tradle-sug__i small { color: var(--ink-soft); font-weight: 600; font-size: 12.5px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpg-tradle-sug__i.is-on, .wpg-tradle-sug__i:hover { background: var(--accent-soft); }
.wpg-tradle-flag { font-size: 1.15em; line-height: 1; flex: 0 0 auto; }

.wpg-tradle-rows { display: flex; flex-direction: column; gap: 6px; }
.wpg-tradle-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 34px 66px; gap: 8px; align-items: center;
    min-height: 42px; padding: 5px 6px 5px 12px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 5%, var(--surface));
    font-weight: 800; font-size: 14.5px; color: var(--ink);
}
.wpg-tradle-rows { gap: 5px; }
.wpg-tradle-row.is-empty { display: block; min-height: 0; height: 8px; padding: 0; border-radius: 5px; background: color-mix(in srgb, var(--ink) 7%, var(--surface)); }
.wpg-tradle-row.is-new { animation: wpg-rise .3s var(--ease); }
.wpg-tradle-row.is-win { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); }
.wpg-tradle-row__name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wpg-tradle-row__name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpg-tradle-row__km { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.wpg-tradle-dir { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; transition: transform .5s var(--ease); }
.wpg-tradle-dir svg { width: 20px; height: 20px; }
.wpg-tradle-dir.is-win { background: transparent; font-size: 22px; }
.wpg-tradle-row__p {
    position: relative; height: 30px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 75%, var(--surface)) var(--p), color-mix(in srgb, var(--ink) 8%, var(--surface)) var(--p));
}
.wpg-tradle-row__p b { position: relative; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wpg-tradle-actions { margin-top: 12px; }

.wpg-tradle-end { text-align: center; margin: 0 0 14px; }
.wpg-tradle-end__c { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; padding: 6px 14px; border-radius: 12px; background: var(--accent-soft); }
.wpg-tradle-end__c b { font-weight: 900; }
.wpg-tradle-end__link { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--accent) !important; }

@media (max-width: 520px) {
    .wpg-tradle-row { grid-template-columns: minmax(0, 1fr) auto 30px 54px; gap: 6px; font-size: 13.5px; padding-left: 9px; }
    .wpg-tradle-dir { width: 30px; height: 30px; }
    .wpg-tradle-dir svg { width: 18px; height: 18px; }
    .wpg-tradle-form .wpg-btn { padding: 10px 14px; }
}