/* pDAI Flip Ladder */

/* ── Floating background coins ───────────────────────────────────────── */

#pdai-floaters {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-floater {
    position: absolute;
    bottom: -40px;
    will-change: transform, opacity;
    animation: floater-rise linear forwards;
}

.bg-floater-inner {
    --wobble: 25px;
    animation: floater-wobble ease-in-out infinite alternate;
}

.bg-floater-inner img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: floater-spin linear infinite;
}

@keyframes floater-rise {
    0%   { transform: translateY(0);        opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(-110vh);   opacity: 0; }
}

@keyframes floater-wobble {
    from { transform: translateX(calc(-1 * var(--wobble))); }
    to   { transform: translateX(var(--wobble)); }
}

@keyframes floater-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Runner strip ────────────────────────────────────────────────────── */

#pdai-runner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    pointer-events: none;
    z-index: 1;
}

/* Clips hurdles horizontally but not upward so coin can jump above */
#runner-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

#runner-ground {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-border);
    opacity: 0.15;
}

#runner-coin {
    position: absolute;
    left: 70px;
    bottom: 22px;
    width: 36px;
    height: 36px;
}

.runner-coin-inner {
    width: 100%;
    height: 100%;
    animation: coin-idle 0.45s ease-in-out infinite;
}

.runner-coin-inner img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
}

#runner-coin.jumping .runner-coin-inner {
    animation: coin-jump 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes coin-idle {
    0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
    50%       { transform: translateY(-5px) scaleX(1.05) scaleY(0.95); }
}

@keyframes coin-jump {
    0%   { transform: translateY(0)     scaleX(1.25) scaleY(0.75); }
    8%   { transform: translateY(-8px)  scaleX(0.9)  scaleY(1.1); }
    35%  { transform: translateY(-68px) scaleX(1)    scaleY(1) rotate(180deg); }
    55%  { transform: translateY(-68px) scaleX(1)    scaleY(1) rotate(360deg); }
    85%  { transform: translateY(-68px) scaleX(1)    scaleY(1) rotate(360deg); }
    93%  { transform: translateY(-4px)  scaleX(1.25) scaleY(0.75) rotate(360deg); }
    100% { transform: translateY(0)     scaleX(1)    scaleY(1)    rotate(360deg); }
}

.runner-hurdle {
    position: absolute;
    bottom: 22px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border: 2px solid;
    white-space: nowrap;
    will-change: transform;
    transform: translateX(calc(100vw + 120px));
    animation: hurdle-slide linear forwards;
}

.hurdle-flipped {
    color: var(--color-accent-buy);
    border-color: var(--color-accent-buy);
    background: var(--color-accent-buy-bg);
}

.hurdle-pending {
    color: var(--color-accent-burnt);
    border-color: var(--color-accent-burnt);
    background: var(--color-accent-burnt-bg);
}

@keyframes hurdle-slide {
    from { transform: translateX(calc(100vw + 120px)); }
    to   { transform: translateX(calc(-100% - 200px)); }
}

.pdai-page {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1rem 6rem; /* extra bottom pad clears runner strip */
}

/* ── Header ─────────────────────────────────────────────────────────── */

.pdai-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.pdai-logo-title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.pdai-logo-wrap {
    position: relative;
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
}

.pdai-logo-lg {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    display: block;
}

.pdai-hat {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    pointer-events: none;
}

.pdai-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.25rem 0;
    letter-spacing: 0.01em;
    text-transform: none;
}

.pdai-subtitle {
    font-size: 0.78rem;
    margin: 0;
}

.pdai-x-link,
.pdai-x-link:link,
.pdai-x-link:visited {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: color 0.15s;
}

.pdai-x-link:hover {
    color: var(--color-text-secondary);
}

.pdai-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.45rem;
}

.pdai-contract,
.pdai-contract:link,
.pdai-contract:visited {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}

.pdai-contract:hover {
    color: var(--color-text-secondary);
}

/* ── Next Flip Widget ────────────────────────────────────────────────── */

.pdai-widget {
    border: 4px solid var(--color-border);
    box-shadow: 4px 4px 0 var(--color-shadow);
    background: var(--color-bg-secondary);
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
}

.widget-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.widget-col {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.widget-col-mult {
    margin-left: auto;
}

.widget-arrow {
    font-size: 1.3rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.widget-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.widget-price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-accent-burnt);
    font-family: monospace;
    letter-spacing: 0.02em;
}

.widget-next {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.widget-target-price {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-family: monospace;
}

.widget-mult {
    font-size: 1.5rem;
    font-weight: 800;
    text-align: right;
}

/* Progress bar */
.widget-bar-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.widget-bar-track {
    position: relative;
    flex: 1;
    min-width: 120px;
    height: 1.1rem;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    overflow: hidden;
}

.widget-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-accent-burnt);
    transition: width 0.4s ease;
    min-width: 2px;
}

.widget-bar-label-left,
.widget-bar-label-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-text);
    mix-blend-mode: difference;
    pointer-events: none;
    white-space: nowrap;
}

.widget-bar-label-left  { left: 0.3rem; }
.widget-bar-label-right { right: 0.3rem; }

.widget-bar-pct {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ── Table ───────────────────────────────────────────────────────────── */

.pdai-table-wrap {
    overflow-x: auto;
    border: 4px solid var(--color-border);
    box-shadow: 4px 4px 0 var(--color-shadow);
    margin-bottom: 1.5rem;
}

.pdai-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pdai-table thead tr {
    background: var(--color-bg-secondary);
}

.pdai-table th {
    padding: 0.6rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    text-transform: uppercase;
}

.th-rank   { width: 2.2rem; text-align: right; }
.th-target { text-align: right; }
.th-mult   { text-align: right; }

.pdai-table td {
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    color: var(--color-text);
}

.td-rank     { color: var(--color-text-secondary); font-size: 0.75rem; text-align: right; font-weight: 400; }
.td-currency { color: var(--color-text-secondary); }
.td-target   { text-align: right; color: var(--color-text); font-family: monospace; }
.td-mult     { text-align: right; font-weight: 800; font-size: 0.9rem; }
.td-na       { color: var(--color-text-secondary); }

.row-flag { margin-right: 0.45rem; }

/* Alternating rows */
.row-pending:nth-child(odd)  { background: var(--color-bg); }
.row-pending:nth-child(even) { background: var(--color-bg-secondary); }
.row-pending:hover           { background: var(--color-accent-burnt-bg); }

/* Flipped rows */
.row-flipped {
    background: var(--color-accent-buy-bg);
}
.row-flipped:hover {
    filter: brightness(1.05);
}
.row-flipped .td-rank,
.row-flipped .td-currency {
    color: var(--color-accent-buy);
    opacity: 0.6;
}
.row-flipped .td-country { color: var(--color-accent-buy); }
.row-flipped .td-target  { color: var(--color-accent-buy); }

/* pDAI marker row */
.row-pdai {
    background: var(--color-accent-burnt-bg);
    border-top: 2px solid var(--color-accent-burnt);
    border-bottom: 2px solid var(--color-accent-burnt);
}
.row-pdai .td-country { color: var(--color-accent-burnt); font-weight: 700; }
.row-pdai .td-currency { color: var(--color-accent-burnt); }
.row-pdai .td-target   { color: var(--color-accent-burnt); }

/* Stablecoin rows */
.row-stablecoin:nth-child(odd)  { background: var(--color-accent-supply-bg); }
.row-stablecoin:nth-child(even) { background: var(--color-accent-supply-bg); }
.row-stablecoin:hover           { filter: brightness(1.05); }
.row-stablecoin .td-rank        { color: var(--color-accent-supply); }
.row-stablecoin .td-country     { color: var(--color-text); }
.row-stablecoin .td-currency    { color: var(--color-accent-supply); }

.row-stablecoin.row-flipped {
    background: var(--color-accent-buy-bg);
}

.stab-name-link,
.stab-name-link:link,
.stab-name-link:visited {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
}
.stab-name-link:hover { text-decoration: underline; }

.stab-chain {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    font-weight: 400;
    vertical-align: middle;
}

/* Status badges */
.stab-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid;
    vertical-align: middle;
}

.stab-recovering  { color: var(--color-accent-buy);    border-color: var(--color-accent-buy);    background: var(--color-accent-buy-bg); }
.stab-stressed    { color: var(--color-accent-burnt);  border-color: var(--color-accent-burnt);  background: var(--color-accent-burnt-bg); }
.stab-depegged    { color: var(--color-accent-sell);   border-color: var(--color-accent-sell);   background: var(--color-accent-sell-bg); }
.stab-defunct     { color: var(--color-text-secondary); border-color: var(--color-border); background: var(--color-bg-secondary); }

/* pDAI logo in table row */
.pdai-logo-sm {
    width: 1.2rem;
    height: 1.2rem;
    vertical-align: middle;
    margin-right: 0.35rem;
    border-radius: 50%;
}

/* ── Multiplier colour scale (red → yellow → green) ─────────────────── */

.mult-very-far  { color: #ff2020; }
.mult-far       { color: #dd4400; }
.mult-mid       { color: var(--color-accent-burnt); }
.mult-close     { color: #aacc22; }
.mult-imminent  { color: var(--color-accent-buy); }
.mult-flipped   { color: var(--color-accent-buy); font-size: 0.78rem; letter-spacing: 0.04em; }
.mult-current {
    color: var(--color-accent-burnt);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

/* ── Disclaimer & Attribution ────────────────────────────────────────── */

.pdai-disclaimer {
    margin-top: 1.1rem;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    text-align: center;
    font-style: italic;
}

.pdai-attribution {
    margin-top: 0.4rem;
    font-size: 0.68rem;
    color: var(--color-text-secondary);
    text-align: center;
}

.pdai-attribution a { color: var(--color-text-secondary); text-decoration: underline; }
.pdai-attribution a:hover { color: var(--color-text); }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .pdai-title   { font-size: 1.05rem; }
    .pdai-logo-lg { width: 2.4rem; height: 2.4rem; }
    .pdai-header  { flex-direction: column; }
    .pdai-meta    { align-items: flex-start; }
    .pdai-table th, .pdai-table td { padding: 0.4rem 0.55rem; font-size: 0.78rem; }
    .widget-col-mult { margin-left: 0; }
    .stab-chain { display: none; }
}