/* nftviewer.css — page-specific styles for the NFT viewer.
 *
 * MUST NOT contain navbar rules. Those live in nav.css, linked by all six pages.
 * Six copies of the navbar rules is exactly how five navbars drifted apart before
 * 7d08a29; a seventh copy here would rebuild that bug. This file therefore carries
 * no navbar selector at all — no bar, link, logo, right-side or smoke-dot rules —
 * and tests/viewer-visual.spec.js asserts that it never grows one.
 *
 * That check greps the raw file, comments included, so do not write a dotted
 * navbar class name even inside a comment. A gate that fires on its own
 * documentation trains people to ignore it, which is worse than no gate.
 *
 * Visual language matches the rest of the site deliberately: Comic Sans, the
 * BlazeitBG backdrop, dark translucent panels with an orange glow, gold headings.
 * Do not professionalize it.
 *
 * This page has NO global box-sizing reset — style.css carries one, and this page
 * does not link style.css. Every rule below that combines width/min-height with
 * padding sets box-sizing: border-box explicitly. Relying on an inherited reset is
 * what made the shared nav link box measure 60px instead of 44px on four pages.
 */

/* Brand colour tokens.
 *
 * NOT navbar rules — these are :root custom properties, and they are required.
 * nav.css is self-sufficient about LAYOUT (it owns --nav-h and --touch) but it
 * CONSUMES --navbar-bg, --glow, --c-gold and --c-orange, which every other page
 * gets from its own stylesheet's :root (style.css lines 17-41). nftviewer.html
 * does not link style.css, so without this block the shared navbar renders on this
 * page with a transparent background and no glow — an invalid var() falls back to
 * the unset value, silently. nav-parity.spec.js cannot catch it: it compares
 * heights, fonts and gaps, never colour. Values are copied verbatim from
 * style.css so the navbar is colour-identical to index.html.
 */
:root {
    --c-orange: orange;          /* #ffa500 — primary action */
    --c-orange-dark: darkorange; /* hover */
    --c-red: #ff4500;            /* burn red / danger */
    --c-gold: #ffcf48;           /* headings / accents */
    --c-text: #ffffff;
    --navbar-bg: rgba(0, 0, 0, 0.95);
    --glow: 0 0 10px rgba(255, 69, 0, 0.7);
    /* --nav-h and --touch come from nav.css. Do not redefine them here: two
       sources for the bar height is the same duplication problem one layer down. */
}

body {
    margin: 0;
    padding: 0;
    font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
    background: url('images/BlazeitBG.png') no-repeat center center;
    background-size: 100% auto;
    background-attachment: fixed;
    background-color: #b0e8f7;   /* fallback close to the BG image */
    color: var(--c-text);
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-top: calc(var(--nav-h) + 24px);  /* clear the fixed navbar */
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px 40px;
    box-sizing: border-box;
}

.viewer-panel {
    background: rgba(0, 0, 0, .82);
    border: 2px solid #ff7a18;
    box-shadow: 0 0 12px rgba(255, 69, 0, .6);
    border-radius: 20px;
    padding: 24px;
    box-sizing: border-box;
}

.viewer-panel h1 {
    margin: 0 0 12px;
    color: #ffcf48;
    text-shadow: 0 0 6px #ff8c00, 0 0 10px #ff4500;
    text-align: center;
    overflow-wrap: anywhere;
}

#viewerIntro {
    margin: 0;
    text-align: center;
    overflow-wrap: anywhere;
}

/* ---- paste-any-collection tool ---- */
.viewer-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    padding: 14px;
    background: rgba(0, 0, 0, .5);
    border-radius: 12px;
    box-sizing: border-box;
}

.viewer-tools label {
    flex: 1 1 100%;
    font-weight: bold;
    color: #ffb347;
}

.viewer-tools input {
    /* min-width:0 matters: a flex item's default min-width:auto refuses to shrink
       below its content, which is how a 320px basis overflows a 390px phone. */
    flex: 1 1 320px;
    min-width: 0;
    min-height: var(--touch);
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
}

.viewer-tools input::placeholder { color: rgba(255, 255, 255, .45); }

.viewer-btn {
    font-family: inherit;
    font-weight: bold;
    font-size: 16px;
    min-height: var(--touch);
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: orange;
    color: #000;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .2s ease;
}

.viewer-btn:hover { background: darkorange; }
.viewer-btn:disabled { opacity: .5; cursor: not-allowed; }
.viewer-btn:disabled:hover { background: orange; }

/* Danger variant for the irreversible half of the transfer flow. */
.viewer-btn.danger { background: #ff4500; color: #fff; }
.viewer-btn.danger:hover { background: #d63a00; }

.viewer-help {
    margin: 0;
    flex: 1 1 100%;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

.viewer-status {
    margin: 8px 0 0;
    min-height: 1.3em;      /* reserve the line so status text never shifts layout */
    color: #ffcf48;
    text-align: center;
    overflow-wrap: anywhere;
}

/* ---- the grid ---- */
.nft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.nft-card {
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(255, 122, 24, .5);
    border-radius: 14px;
    padding: 10px;
    box-sizing: border-box;
    min-width: 0;           /* grid items also default to min-width:auto */
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nft-card-img,
.nft-card-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, .06);
    display: block;
    box-sizing: border-box;
}

/* Shown when every gateway fails. A styled panel beats a broken-image icon. */
.nft-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
    padding: 8px;
    overflow-wrap: anywhere;
}

.nft-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #ffcf48;
    overflow-wrap: anywhere;   /* a contract-supplied name can be one long word */
}

.nft-card-sub {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    overflow-wrap: anywhere;
}

/* margin-top:auto pins the actions to the bottom so cards with short and long
   titles still line their buttons up across a row. */
.nft-card-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nft-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    padding: 4px 8px;
    box-sizing: border-box;
    font-size: 13px;
    color: #ffcf48;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.nft-card-link:hover { color: orange; }

.transfer-form { display: none; flex-direction: column; gap: 6px; }
.transfer-form.open { display: flex; }

.transfer-form input {
    width: 100%;
    min-height: var(--touch);
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
}

.transfer-form label {
    font-size: 12px;
    font-weight: bold;
    color: #ffb347;
}

/* Two-step confirm. An NFT transfer is irreversible and Sonic has no marketplace
   to buy it back on, so this is a stronger case for the guard than the burn flow
   on the index page. */
.transfer-confirm {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 69, 0, .18);
    border: 1px solid #ff4500;
    box-sizing: border-box;
}

.transfer-confirm.open { display: flex; }
.transfer-confirm p { margin: 0; font-size: 12px; overflow-wrap: anywhere; }

/* The irreversibility warning is the one line in the flow that must be read, so
   it gets weight and the warm accent rather than the muted body colour. */
.transfer-warn { color: #ffb347; font-weight: bold; }

/* The tx-hash link line lives in the form, not inside the confirm box, so it
   does not inherit the rule above. Collapsed while empty so the reserved line
   does not add a gap to every unopened card. */
.transfer-tx { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.transfer-tx:empty { display: none; }

/* Post-transfer state. The card stays on the page — vanishing it would read as a
   bug — but it is visibly spent so nobody tries to send the same token twice. */
.nft-card.transferred { opacity: .55; border-color: rgba(255, 255, 255, .25); }

/* Footer — values copied from style.css so this page matches the other five.
   It had its own padding (14px), margin (24px) and copy ("Just Blaze It"), which
   made it visibly the odd one out. The other five all read
   "Blaze It on Sonic © 2025". box-sizing stays because this page has no global
   reset, unlike style.css. */
.footer {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: var(--panel, rgba(0, 0, 0, 0.8));
    color: var(--c-text, #fff);
    position: relative;
    font-size: 14px;
    margin-top: 20px;
    box-sizing: border-box;
}

.footer p {
    margin: 0;
}

/* Off-screen until focused, so keyboard users can jump the navbar. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #000;
    color: #ffcf48;
    padding: 10px 14px;
    border-radius: 0 0 8px 0;
    z-index: 2000;
}

.skip-link:focus { left: 8px; top: 8px; }

/* One visible focus ring for every interactive thing on the page. The gold reads
   against both the dark panels and the orange buttons. */
.viewer-btn:focus-visible,
.viewer-tools input:focus-visible,
.transfer-form input:focus-visible,
.nft-card-link:focus-visible,
.skip-link:focus-visible {
    outline: 3px solid #ffcf48;
    outline-offset: 2px;
}

@media screen and (max-width: 768px) {
    .viewer-panel { padding: 16px; }
    .viewer-panel h1 { font-size: 24px; }
    .nft-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .viewer-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .viewer-btn { transition: none; }
}