/*html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}*/




.quality-high { color: #ff0000; }
.quality-good { color: #ffa500; }
.quality-medium { color: #ffff00; }
.quality-normal { color: #88aaff; }
.low-quality { color: #ff0000; }
.quantity { color: #99ccff; }

.sticker {
    cursor: pointer;
    max-height: 100px;
    max-width: 100%;
    object-fit: contain;
    padding: 8px;
    border-radius: 8px;
}

.sticker-link {
    display: grid;
    place-items: end center;
    transform-origin: center bottom;
}

/* Editable cells styling */
td.editable {
    cursor: pointer;
    position: relative;
}
td.editable:hover {
    background-color: rgba(0, 255, 0, 0.15);
    outline: 1px dashed rgba(0, 255, 0, 0.5);
}
td.editable:hover::after {
    content: '✎';
    position: absolute;
    right: 2px;
    top: 2px;
    font-size: 10px;
    opacity: 0.5;
}

/* Quantity edit container with pills */
.quantity-edit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 120px;
}

.quantity-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
}

.quantity-pill {
    background-color: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
    color: #00ff00;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
}

.quantity-pill:hover {
    background-color: rgba(0, 255, 0, 0.25);
    border-color: rgba(0, 255, 0, 0.6);
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

.quantity-pill:active {
    background-color: rgba(0, 255, 0, 0.35);
    transform: scale(0.95);
}

.quantity-pill-add {
    color: #00ff00;
}

.quantity-pill-subtract {
    color: #ffaa00;
    border-color: rgba(255, 170, 0, 0.3);
    background-color: rgba(255, 170, 0, 0.1);
}

.quantity-pill-subtract:hover {
    background-color: rgba(255, 170, 0, 0.25);
    border-color: rgba(255, 170, 0, 0.6);
    box-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
}

#unauthed-home-section {
    container-type: inline-size;
    container-name: hero;
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 255, 0, 0.55);
    border-radius: 0.5rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(0, 255, 80, 0.09), transparent 60%),
        linear-gradient(180deg, rgba(0, 40, 8, 0.55), rgba(0, 12, 2, 0.55));
    box-shadow: 0 0 10px #00ff00, inset 0 0 30px rgba(0, 255, 0, 0.06);
    min-width: 0;
}

#unauthed-home-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
}

.home-eyebrow {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.55;
}

#unauthed-home-copy h1 {
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1;
    margin: 0;
    letter-spacing: 0.06em;
    text-shadow: 0 0 14px rgba(0, 255, 0, 0.55);
}

.home-tagline {
    margin: 0;
    max-width: 46ch;
    opacity: 0.82;
    line-height: 1.4;
}

.home-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.home-links a {
    padding: 3px 9px;
    border: 1px solid rgba(0, 255, 0, 0.35);
    border-radius: 999px;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.home-links a:hover {
    border-color: #00ff00;
    background: rgba(0, 255, 0, 0.14);
}

/* Decorative stickers only earn their space when the panel is wide enough
   that the copy is not competing with them. */
.unauthed-home-stickers {
    display: none;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

@container hero (min-width: 640px) {
    .unauthed-home-stickers {
        display: flex;
    }
}

@container hero (min-width: 860px) {
    .unauthed-home-sticker img {
        max-height: 176px;
        max-width: 190px;
    }
}

.unauthed-home-sticker {
    display: flex;
    align-items: center;
    max-width: 170px;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.unauthed-home-sticker:hover {
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 0 10px rgba(0, 255, 0, 0.35));
}

.unauthed-home-sticker img {
    max-height: 160px;
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
}

#captureCanvas {
    /*height: calc(60% - 10px);*/
    /*max-width: calc(100% - 10px);*/
    margin: 5px;
}

#resource-table {
    text-align: center;
}

#resource-table thead {
    position: sticky;
    top: 48px;
    background-color: #001a00;
    z-index: 10;
}

#resource-table thead th {
    background-color: #001a00;
}

#container-indicator {
    position: sticky;
    top: 0;
    background-color: #001a00;
    z-index: 11;
}

#snapshot-area {
    height: calc(40% - 5px);
    display: flex;
    margin: 5px;
}

.snapshot-item {
    width: 140px;
    /*height: 140px;*/
    border-radius: 10px;
    margin-right: 5px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: all 0.3s ease;
}

.snapshot-item.processing {
    border: 2px dashed #00ff00;
    animation: pulse 1.5s infinite;
}

.snapshot-item.processed {
    border: 2px solid #00ff00;
}

.snapshot-item.error {
    border: 2px solid #ff0000;
}

@keyframes pulse {
    0% { border-color: rgba(0, 255, 0, 0.2); }
    50% { border-color: rgba(0, 255, 0, 1); }
    100% { border-color: rgba(0, 255, 0, 0.2); }
}

.text-container {
    padding: 5px;
}

.data-table-container {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 4;
    grid-column-end: 8;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#data-table-container.visible {
    visibility: visible;
    opacity: 1;
}

body.rms-app {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: [header-top] 14% [header-bottom] 14% [body] auto;
}

.bodydebug::before {
    content: ' debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A debug mode debug mode debug mode\A';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: monospace;
    font-size: 24px;
    color: rgb(255 0 210);
    white-space: pre;
    line-height: 1.5;
    pointer-events: none;
    z-index: -1;
    animation: scrollDebug 60s linear infinite;
    transform-origin: center center;
    transform: rotate(-45deg);
    letter-spacing: 20px;
    word-spacing: 40px;
}


#droid {
    z-index: 101;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

/*
 * droid.js sizes the dialogue box in vh, so on a tall window it hits its 320px
 * cap and spills out of the panel onto whatever sits to the right. Flex items
 * default to min-width:auto, so it has to be told it may shrink.
 */
#droid,
#droid-overlay,
#dialogue-box {
    min-width: 0;
}

#droid-overlay {
    flex: 0 1 auto;
}

#dialogue-box {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

#dialogue-box input {
    min-width: 0;
    box-sizing: border-box;
}

/* Let the text field give up width instead of the button breaking mid-word. */
#dialogue-box button {
    white-space: nowrap;
    flex: 0 0 auto;
}

body.rms-app #unauthed-home-section {
    grid-column: 3 / 8;
    grid-row: 1 / 3;
    align-self: start;
    min-height: 100%;
}

/* Unauthed, the stickers are the only thing in the bottom row — spread them
   across the console and pin them down so the empty space reads as backdrop. */
body.rms-app #additional-area {
    grid-column: 1 / -1;
    align-self: end;
}

body.rms-app #sticker-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

#quick-actions-area {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 5;
    grid-column-end: 8;
    overflow: hidden;
    align-items: stretch;
    min-height: 0;
}

#monitor-area {
    flex-direction: column;
    grid-row-start: 3;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
}

/* Shows if monitor is not visible - Uses subgrid for container alignment */
#additional-area {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr auto;
    grid-row-start: 3;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
    max-height: 100px;
    align-items: end;
    contain: layout;
}

#sticker-container {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    align-items: end;
    justify-items: center;
    gap: 4px;
}

#c14-pro {
    grid-column: 1 / -1;
    justify-content: center;
}

#c14-pro-sticker {
    max-height: min(340px, 34vh);
    width: auto;
}

/* The bazaar poster is a gag, not content — it only appears when the console
   has room to spare. JS reveals it inline, so this has to win with !important. */
@media (max-height: 820px), (max-width: 1100px) {
    body.rms-app #c14-pro {
        display: none !important;
    }
}

@media (max-height: 620px) {
    body.rms-app #sticker-container {
        display: none;
    }
}

/* Faint CRT grid so the empty console space reads as a backdrop, not a void. */
body.rms-app::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 255, 0, 0.05) 0 1px, transparent 1px 52px),
        repeating-linear-gradient(90deg, rgba(0, 255, 0, 0.05) 0 1px, transparent 1px 52px);
    opacity: 0.5;
    mask-image: radial-gradient(120% 90% at 50% 25%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 25%, #000 20%, transparent 80%);
}

#data-table-container {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 8;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#data-table-container.visible {
    visibility: visible;
    opacity: 1;
}

/* Dynamic Sizing for grid items */

/* Medium view */
@media (max-width: 1600px) {
    body.rms-app {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        grid-template-rows: [header-top] 14% [header-bottom] 14% [body] auto;
    }

    body.rms-app #unauthed-home-section {
        grid-column: 3 / 8;
        grid-row: 1 / 3;
    }

    
    #droid {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 3;
    }
    
    #quick-actions-area {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 4;
        grid-column-end: 8;
    }
    
    #monitor-area {
        flex-direction: column;
        grid-row-start: 3;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 3;
        
    }

    /* Shows if monitor is not visible */
    #additional-area {
        grid-row-start: 3;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 4;
    }
    
    #data-table-container {
        grid-row-start: 2;
        grid-row-end: 4;
        grid-column-start: 3;
        grid-column-end: 8;
    }
}

/* Thin view */
@media (max-width: 1050px) {
    body.rms-app {
        grid-template-columns: 15% 20% 20% 20% 18%;
        grid-template-rows: repeat(8, minmax(0, 1fr));
    }

    body.rms-app #unauthed-home-section {
        grid-column: 1 / 6;
        grid-row: 3 / 6;
    }

    .unauthed-home-stickers {
        flex-direction: column;
    }

    .unauthed-home-sticker img {
        max-height: 78px;
        max-width: 130px;
    }

    #droid {
        grid-column-start: 1;
        grid-column-end: 5;
        max-width: 469px;
    }
    #monitor-area {
        flex-direction: column;
        grid-row-start: 8;
        grid-row-end: 8;
        height: 320px;
    }

    #quick-actions-area {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 4;
        grid-column-end: 6;
    }

    .quick-action-button {
        font-size: x-small;
    }

    /* Shows if monitor is not visible */
    #additional-area {
        grid-row-start: 2;
        grid-row-end: 2;
        grid-column-start: 4;
        grid-column-end: 6;
        height: 80px;
    }

    /* Unauthed this is a footer, so it has to clear the hero (rows 3-6)
       instead of sharing the top-right slot with the droid. */
    body.rms-app #additional-area {
        grid-column: 1 / -1;
        grid-row: 7 / 9;
        height: auto;
        max-height: none;
    }

    #klm-link {
        height: 75px;
    }

    #klm-link img {
        height: 100%;
    }

    #data-table-container {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 8;
    }
    #captureCanvas {
        height: 69%;
    }
    #snapshot-area {
        height: calc(28% - 5px);
    }
}

/* Mobile view */
@media (max-width: 768px) {
    body.rms-app {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem;
        padding: 1rem;
    }

    body.rms-app #unauthed-home-section {
        grid-column: 1 / -1;
        grid-row: auto;
        flex-direction: column;
        align-items: stretch;
    }

    .unauthed-home-stickers {
        flex-direction: row;
        justify-content: center;
    }

    .unauthed-home-sticker img {
        max-height: 96px;
        max-width: 150px;
    }

    #droid-canvas {
        max-height: 200px;
    }
    
    #droid {
        grid-column: 1 / -1;
        grid-row: auto;
        max-width: 100%;
    }
    
    #quick-actions-area {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    
    #monitor-area {
        flex-direction: column;
        grid-column: 1 / -1;
        grid-row: auto;
        height: auto;
        min-height: 200px;
    }

    /* Shows if monitor is not visible */
    #additional-area {
        grid-column: 1 / -1;
        grid-row: auto;
        height: unset;
    }

    #klm-link {
        height: unset;
    }

    #data-table-container {
        grid-column: 1 / -1;
        grid-row: auto;
        overflow-x: auto;
    }
    
    #captureCanvas {
        width: 100%;
        height: auto;
        max-height: 50vh;
    }
    
    #snapshot-area {
        height: auto;
        min-height: 100px;
    }
    
    /* Ensure table is scrollable horizontally on mobile */
    #resource-table {
        min-width: 600px;
    }
}

#container-modal {
    backdrop-filter: blur(2px);
    z-index: 100;
}

#share-modal {
    backdrop-filter: blur(2px);
    z-index: 100;
}

#container-list::-webkit-scrollbar {
    width: 8px;
}

#container-list::-webkit-scrollbar-track {
    background: #001a00;
}

#container-list::-webkit-scrollbar-thumb {
    background: #00ff00;
    border-radius: 4px;
}

#container-list::-webkit-scrollbar-thumb:hover {
    background: #00cc00;
}

/* Add these new styles */
.quick-action-button {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.3s ease forwards;
    position: relative;
    word-spacing: 100vw;
    text-align: center;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add glow effect for active state */
.quick-action-button.shadow-terminal {
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3),
                inset 0 0 15px rgba(0, 255, 0, 0.2);
}

/* Optional: Add pulse animation for active buttons */
@keyframes softPulse {
    0% { box-shadow: 0 0 10px rgba(0, 255, 0, 0.3), inset 0 0 15px rgba(0, 255, 0, 0.2); }
    50% { box-shadow: 0 0 15px rgba(0, 255, 0, 0.4), inset 0 0 20px rgba(0, 255, 0, 0.3); }
    100% { box-shadow: 0 0 10px rgba(0, 255, 0, 0.3), inset 0 0 15px rgba(0, 255, 0, 0.2); }
}

.quick-action-button.shadow-terminal {
    animation: fadeInUp 0.3s ease forwards, softPulse 2s ease-in-out infinite;
}

/* Custom tooltip for notes */
.notes-tooltip {
    position: fixed;
    background: #001a00;
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    max-width: 250px;
    word-wrap: break-word;
    white-space: pre-wrap;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5);
    animation: tooltipFadeIn 0.1s ease-out;
}

.notes-tooltip::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #00ff00;
}

.notes-tooltip.tooltip-add-note {
    color: #00ff00;
    font-style: italic;
    opacity: 0.9;
}

.notes-tooltip.tooltip-has-note {
    color: #ffcc00;
    border-color: #ffcc00;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.notes-tooltip.tooltip-has-note::before {
    border-top-color: #ffcc00;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Market PPU tooltip */
.market-tooltip {
    position: fixed;
    background: #001a00;
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 8px 12px;
    font-size: 0.85em;
    border-radius: 4px;
    max-width: 250px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5);
    animation: tooltipFadeIn 0.1s ease-out;
}

.market-tooltip::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #00ff00;
}

.market-tooltip-title {
    font-weight: bold;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 255, 0, 0.3);
}

.market-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 1px 0;
}

.market-tooltip-label {
    opacity: 0.7;
}

.market-tooltip-divider {
    border-top: 1px solid rgba(0, 255, 0, 0.2);
    margin: 4px 0;
}

/* ── Command console (chat mode) ── */
#command-chat {
    display: none;
    flex-direction: column;
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 8;
    min-height: min(60vh, 520px);
    background: #001a00;
    border: 1px solid #00ff00;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px #00ff00;
    overflow: hidden;
}

.command-chat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 255, 0, 0.3);
    flex-shrink: 0;
}

.command-chat-title {
    font-family: monospace;
    font-size: 0.95rem;
    font-weight: bold;
    color: #00ff00;
}

.command-chat-subtitle {
    font-family: monospace;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.command-chat-close-btn {
    font-family: monospace;
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(0, 255, 0, 0.5);
    border-radius: 0.25rem;
    background: transparent;
    color: #00ff00;
    cursor: pointer;
    flex-shrink: 0;
}

.command-chat-close-btn:hover {
    background: rgba(0, 255, 0, 0.15);
}

.command-transcript {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.command-bubble {
    max-width: 92%;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    font-family: monospace;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.command-bubble-user {
    align-self: flex-end;
    background: rgba(0, 255, 0, 0.12);
    border: 1px solid rgba(0, 255, 0, 0.45);
    color: #fff89c;
}

.command-bubble-droid {
    align-self: flex-start;
    background: rgba(72, 221, 72, 0.15);
    border: 1px solid rgba(72, 221, 72, 0.4);
    color: rgb(255, 248, 156);
}

.command-bubble-status {
    align-self: center;
    background: transparent;
    border: none;
    color: rgba(0, 255, 0, 0.55);
    font-size: 0.75rem;
    font-style: italic;
    padding: 0.25rem 0.5rem;
    max-width: 100%;
}

.command-bubble-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.command-bubble-actions button {
    font-family: monospace;
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 255, 0, 0.5);
    background: transparent;
    color: #00ff00;
    cursor: pointer;
}

.command-bubble-actions button:hover {
    background: rgba(0, 255, 0, 0.15);
}

.command-bubble-actions button.command-confirm-yes {
    border-color: rgba(255, 165, 0, 0.7);
    color: #ffb347;
}

.command-composer {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0, 255, 0, 0.3);
    flex-shrink: 0;
    align-items: flex-end;
}

.command-input {
    flex: 1;
    min-height: 2.5rem;
    max-height: 8rem;
    resize: vertical;
    padding: 0.5rem 0.75rem;
    font-family: monospace;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 255, 0, 0.4);
    border-radius: 0.25rem;
    color: #00ff00;
}

.command-input:focus {
    outline: none;
    border-color: #00ff00;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.25);
}

.command-input:disabled {
    opacity: 0.5;
}

.command-send-btn {
    font-family: monospace;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border: 1px solid #00ff00;
    border-radius: 0.25rem;
    background: rgba(0, 255, 0, 0.12);
    color: #00ff00;
    cursor: pointer;
    flex-shrink: 0;
}

.command-send-btn:hover:not(:disabled) {
    background: rgba(0, 255, 0, 0.25);
}

.command-send-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body.command-mode #command-chat {
    display: flex;
}

body.command-mode #data-table-container {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
}

body.command-mode #dialogue-box {
    display: none !important;
}

@media (max-width: 1600px) {
    #command-chat {
        grid-column-start: 3;
        grid-column-end: 8;
    }
}

@media (max-width: 1050px) {
    body.command-mode {
        grid-template-rows: auto auto 1fr;
    }

    body.command-mode #droid {
        grid-column-start: 1;
        grid-column-end: 5;
        max-height: 220px;
    }

    body.command-mode #droid-canvas {
        max-height: 200px;
    }

    #command-chat {
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 8;
        min-height: 320px;
    }
}

@media (max-width: 768px) {
    #command-chat {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 50vh;
    }

    body.command-mode #droid {
        max-height: 180px;
    }
}

/* —— Datachip unbox (public mint) —— */

#get-datachip-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    background: linear-gradient(180deg, rgba(0, 255, 0, 0.16), rgba(0, 255, 0, 0.06));
    border: 1px solid #00ff00;
    border-radius: 6px;
    color: #00ff00;
    cursor: pointer;
    padding: 8px 16px 8px 12px;
    margin-top: 6px;
    font-family: inherit;
    perspective: 280px;
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.25), inset 0 0 18px rgba(0, 255, 0, 0.08);
    transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

#get-datachip-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(0, 255, 0, 0.45), inset 0 0 22px rgba(0, 255, 0, 0.12);
}

#get-datachip-cta:hover .cta-crate {
    transform: rotateX(-18deg) rotateY(-28deg) scale(1.08);
}

#get-datachip-cta:hover .cta-crate-label {
    text-shadow: 0 0 8px #00ff00;
}

.cta-crate-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.cta-crate-sub {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

.cta-crate {
    position: relative;
    width: 56px;
    height: 44px;
    flex: 0 0 auto;
    transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-34deg);
    transition: transform 0.3s ease;
}

.cta-crate-front,
.cta-crate-side,
.cta-crate-top {
    position: absolute;
    border: 1px solid #00ff66;
    box-shadow: 0 0 10px rgba(0, 255, 80, 0.35), inset 0 0 8px rgba(0, 255, 0, 0.15);
}

.cta-crate-front {
    width: 52px;
    height: 32px;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, #1a3a1a 0%, #0a180a 100%);
    transform: translateZ(16px);
}

.cta-crate-side {
    width: 32px;
    height: 32px;
    left: 10px;
    bottom: 0;
    background: linear-gradient(180deg, #102010, #050f05);
    transform: rotateY(90deg) translateZ(36px);
}

.cta-crate-top {
    width: 52px;
    height: 32px;
    left: 0;
    bottom: 8px;
    background: linear-gradient(145deg, #2a5a2a, #0d220d);
    transform: rotateX(90deg) translateZ(16px);
}

.cta-crate-label {
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.95;
}

#droid-get-datachip {
    display: block;
    margin: 6px 5px 8px;
    padding: 0;
    border: none;
    background: transparent;
    color: #b8ffc4;
    font-family: inherit;
    font-size: 1.05em;
    text-decoration: underline;
    cursor: pointer;
}

#droid-get-datachip:hover {
    text-shadow: 0 0 8px #00ff00;
}

#datachip-unbox-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    color: #b8ffc4;
}

#datachip-unbox-modal.flex {
    display: flex;
}

#datachip-unbox-modal.hidden {
    display: none;
}

.unbox-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 36%, rgba(0, 70, 20, 0.85) 0%, rgba(0, 12, 4, 0.96) 55%, rgba(0, 0, 0, 0.98) 100%);
    backdrop-filter: blur(6px);
}

.unbox-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(0, 255, 80, 0.055) 0 1px, transparent 1px 3px);
    animation: unbox-scan 6s linear infinite;
}

@keyframes unbox-scan {
    from { background-position: 0 0; }
    to { background-position: 0 90px; }
}

.unbox-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 20px 28px;
    width: min(560px, 94vw);
    max-height: 100vh;
    overflow-y: auto;
    text-align: center;
}

/* —— Heads-up readout —— */

.unbox-hud {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px;
    border: 1px solid rgba(0, 255, 0, 0.28);
    border-radius: 999px;
    background: rgba(0, 22, 6, 0.6);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.8;
    flex: 0 0 auto;
}

.unbox-hud-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff66;
    box-shadow: 0 0 8px #00ff66;
    animation: unbox-blink 1s steps(2, end) infinite;
}

.unbox-hud-hex {
    opacity: 0.45;
}

.unbox-ready .unbox-hud-dot {
    animation: none;
}

.unbox-error .unbox-hud {
    border-color: rgba(255, 90, 90, 0.5);
    color: #ffb0b0;
}

.unbox-error .unbox-hud-dot {
    background: #ff5555;
    box-shadow: 0 0 8px #ff5555;
}

@keyframes unbox-blink {
    50% { opacity: 0.15; }
}

/* —— Stage —— */

.unbox-scene {
    position: relative;
    width: min(430px, 88vw);
    height: 356px;
    perspective: 1000px;
    perspective-origin: 50% 44%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 44px;
    flex: 0 0 auto;
}

.unbox-floor {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 300px;
    height: 60px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0, 255, 90, 0.28), transparent 70%);
    filter: blur(4px);
    transition: opacity 0.6s ease;
    opacity: 0.5;
}

.unbox-open .unbox-floor,
.unbox-ready .unbox-floor {
    opacity: 1;
}

.unbox-beam {
    position: absolute;
    left: 50%;
    bottom: 104px;
    width: 160px;
    height: 240px;
    transform: translateX(-50%);
    background: linear-gradient(to top, rgba(140, 255, 190, 0.5), rgba(0, 255, 110, 0.14) 45%, transparent 92%);
    clip-path: polygon(36% 100%, 64% 100%, 100% 0, 0 0);
    filter: blur(7px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease 0.35s;
}

.unbox-open .unbox-beam,
.unbox-ready .unbox-beam {
    opacity: 0.9;
    animation: beam-flicker 3.2s ease-in-out 1s infinite;
}

@keyframes beam-flicker {
    0%, 100% { opacity: 0.9; }
    45% { opacity: 0.62; }
    70% { opacity: 1; }
}

.unbox-sparks {
    position: absolute;
    left: 50%;
    bottom: 168px;
    width: 0;
    height: 0;
    pointer-events: none;
}

.unbox-sparks i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d8ffe6;
    box-shadow: 0 0 7px #00ff88;
    opacity: 0;
}

.unbox-open .unbox-sparks i {
    animation: spark-fly 1s ease-out 0.45s forwards;
}

.unbox-sparks i:nth-child(1)  { --tx: -74px; --ty: -62px; animation-delay: 0.45s; }
.unbox-sparks i:nth-child(2)  { --tx: 68px;  --ty: -78px; animation-delay: 0.50s; }
.unbox-sparks i:nth-child(3)  { --tx: -34px; --ty: -104px; animation-delay: 0.47s; }
.unbox-sparks i:nth-child(4)  { --tx: 42px;  --ty: -110px; animation-delay: 0.55s; }
.unbox-sparks i:nth-child(5)  { --tx: -96px; --ty: -20px; animation-delay: 0.52s; }
.unbox-sparks i:nth-child(6)  { --tx: 98px;  --ty: -28px; animation-delay: 0.44s; }
.unbox-sparks i:nth-child(7)  { --tx: -12px; --ty: -128px; animation-delay: 0.60s; }
.unbox-sparks i:nth-child(8)  { --tx: 18px;  --ty: -136px; animation-delay: 0.49s; }
.unbox-sparks i:nth-child(9)  { --tx: -58px; --ty: -88px; animation-delay: 0.58s; }
.unbox-sparks i:nth-child(10) { --tx: 60px;  --ty: -52px; animation-delay: 0.62s; }
.unbox-sparks i:nth-child(11) { --tx: -110px; --ty: -66px; animation-delay: 0.66s; }
.unbox-sparks i:nth-child(12) { --tx: 112px; --ty: -70px; animation-delay: 0.53s; }
.unbox-sparks i:nth-child(13) { --tx: -24px; --ty: -46px; animation-delay: 0.70s; }
.unbox-sparks i:nth-child(14) { --tx: 30px;  --ty: -40px; animation-delay: 0.68s; }

@keyframes spark-fly {
    0% { opacity: 1; transform: translate(0, 0) scale(1.2); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.2); }
}

.crate {
    --cw: 210px;
    --ch: 112px;
    --cd: 150px;
    --rx: -26deg;
    --ry: 0deg;
    --scale: 1;
    position: relative;
    width: var(--cw);
    height: var(--ch);
    transform-style: preserve-3d;
    /* No filter here: a filter forces transform-style back to flat and
       collapses every face into a single plane. */
    transform: scale(var(--scale)) rotateX(var(--rx)) rotateY(var(--ry));
}

.crate .face,
.chip-face {
    position: absolute;
    backface-visibility: hidden;
    overflow: hidden;
}

.crate-body,
.crate-lid,
.datachip {
    position: absolute;
    transform-style: preserve-3d;
}

.crate-body {
    inset: 0;
}

/* Opaque, shaded panels — each face gets its own light level so the box reads solid. */
.body-front,
.body-back {
    width: var(--cw);
    height: var(--ch);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 26px),
        linear-gradient(180deg, #2f5c34 0%, #1a3a20 45%, #0e2213 100%);
    border: 1px solid #2fbf63;
    box-shadow:
        inset 0 1px 0 rgba(170, 255, 200, 0.35),
        inset 0 -18px 26px rgba(0, 0, 0, 0.5);
}

.body-front { transform: translateZ(calc(var(--cd) / 2)); }
.body-back { transform: rotateY(180deg) translateZ(calc(var(--cd) / 2)); }

.crate-hazard {
    display: block;
    height: 12px;
    margin: 10px 0 0;
    background: repeating-linear-gradient(-45deg, #c8a028 0 8px, #17240d 8px 16px);
    opacity: 0.85;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.crate-stencil {
    font-size: 9px;
    letter-spacing: 0.24em;
    text-align: center;
    color: rgba(190, 255, 205, 0.6);
    padding-bottom: 12px;
}

.body-left,
.body-right {
    width: var(--cd);
    height: var(--ch);
    left: calc((var(--cw) - var(--cd)) / 2);
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 24px),
        linear-gradient(180deg, #1e4224, #0a1a0e);
    border: 1px solid #1f8f4a;
    box-shadow: inset 0 -16px 24px rgba(0, 0, 0, 0.55);
}

.body-left { transform: rotateY(-90deg) translateZ(calc(var(--cw) / 2)); }
.body-right { transform: rotateY(90deg) translateZ(calc(var(--cw) / 2)); }

.body-bottom {
    width: var(--cw);
    height: var(--cd);
    top: calc((var(--ch) - var(--cd)) / 2);
    background: #08130b;
    border: 1px solid #0d5c30;
    transform: rotateX(-90deg) translateZ(calc(var(--ch) / 2));
}

/* Light spilling out of the open crate. */
.crate-inner-glow {
    position: absolute;
    width: var(--cw);
    height: var(--cd);
    top: calc((var(--ch) - var(--cd)) / 2);
    transform: rotateX(-90deg) translateZ(calc(var(--ch) / -2 + 4px));
    background: radial-gradient(ellipse at center, #eaffee, rgba(90, 255, 160, 0.75) 38%, rgba(0, 200, 90, 0.25) 68%, transparent 85%);
    box-shadow: 0 0 60px 20px rgba(0, 255, 120, 0.45);
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}

.unbox-open .crate-inner-glow,
.unbox-ready .crate-inner-glow {
    opacity: 1;
}

/*
 * Sits on the crate's top plane, then hinges about its back edge: shift the
 * pivot back by half the depth, swing, shift back. Both states use the same
 * function chain so the transition interpolates instead of snapping.
 */
.crate-lid {
    width: var(--cw);
    height: var(--cd);
    top: calc((var(--ch) - var(--cd)) / 2);
    transform:
        rotateX(90deg) translateZ(calc(var(--ch) / 2))
        translateY(calc(var(--cd) / -2)) rotateX(0deg) translateY(calc(var(--cd) / 2));
    transition: transform 0.95s cubic-bezier(0.3, 1.25, 0.4, 1);
}

.lid-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: var(--cw);
    height: var(--cd);
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 26px),
        linear-gradient(155deg, #3b7042 0%, #1d4025 50%, #2a5531 100%);
    border: 1px solid #4fd97f;
    box-shadow: inset 0 1px 0 rgba(190, 255, 215, 0.45), 0 0 18px rgba(0, 255, 80, 0.18);
}

.lid-stencil {
    font-size: 12px;
    letter-spacing: 0.3em;
    color: rgba(190, 255, 210, 0.45);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.lid-stencil-sm {
    font-size: 8px;
    letter-spacing: 0.24em;
    opacity: 0.5;
}

.lid-under {
    width: var(--cw);
    height: var(--cd);
    background: linear-gradient(180deg, #0c1c11, #143020);
    border: 1px solid #1f8f4a;
    transform: rotateY(180deg) translateZ(1px);
}

.lid-front {
    width: var(--cw);
    height: 14px;
    top: var(--cd);
    background: linear-gradient(180deg, #35683d, #1a3a22);
    border: 1px solid #2fbf63;
    transform-origin: top center;
    transform: rotateX(-90deg);
}

.unbox-open .crate-lid {
    transform:
        rotateX(90deg) translateZ(calc(var(--ch) / 2))
        translateY(calc(var(--cd) / -2)) rotateX(-104deg) translateY(calc(var(--cd) / 2));
}

.unbox-bloom {
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: 340px;
    height: 240px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at 50% 70%, rgba(0, 255, 90, 0.28), transparent 68%);
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.unbox-open .unbox-bloom,
.unbox-ready .unbox-bloom {
    opacity: 1;
}

/*
 * The chip lives inside the crate's rotated space, so its resting pose has to
 * cancel the crate rotation (rotateY(-ry) then rotateX(-rx)) or the code faces
 * away from the camera. The +360deg is the reveal spin.
 */
.datachip {
    --chip-w: 172px;
    --chip-h: 100px;
    --chip-d: 12px;
    width: var(--chip-w);
    height: var(--chip-h);
    left: calc((var(--cw) - var(--chip-w)) / 2);
    top: calc((var(--ch) - var(--chip-h)) / 2);
    transform: translateY(12px) translateZ(0) rotateY(0deg) rotateX(0deg) scale(0.6);
    opacity: 0;
}

.chip-front,
.chip-back {
    width: var(--chip-w);
    height: var(--chip-h);
}

.chip-front {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px 10px 20px;
    background:
        repeating-linear-gradient(90deg, transparent 0 11px, rgba(0, 255, 110, 0.07) 11px 12px),
        radial-gradient(120% 90% at 20% 0%, rgba(0, 255, 130, 0.18), transparent 60%),
        linear-gradient(160deg, #123a1d 0%, #05170c 45%, #0d2b16 100%);
    border: 1px solid #7cff9a;
    border-radius: 3px;
    box-shadow: inset 0 0 18px rgba(0, 255, 80, 0.22), 0 0 16px rgba(0, 255, 80, 0.25);
    transform: translateZ(calc(var(--chip-d) / 2));
}

.chip-back {
    background:
        repeating-linear-gradient(45deg, rgba(0, 255, 110, 0.05) 0 2px, transparent 2px 9px),
        linear-gradient(160deg, #0c1f11, #030b05);
    border: 1px solid #2f7a45;
    border-radius: 3px;
    transform: rotateY(180deg) translateZ(calc(var(--chip-d) / 2));
}

.chip-traces {
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(0, 255, 110, 0.22);
    border-radius: 2px;
    background:
        linear-gradient(90deg, transparent 48%, rgba(0, 255, 110, 0.18) 48% 52%, transparent 52%),
        linear-gradient(180deg, transparent 48%, rgba(0, 255, 110, 0.18) 48% 52%, transparent 52%);
}

.chip-left,
.chip-right {
    width: var(--chip-d);
    height: var(--chip-h);
    left: calc((var(--chip-w) - var(--chip-d)) / 2);
}

.chip-left {
    background: repeating-linear-gradient(180deg, #e5c353 0 4px, #4a3a0c 4px 8px);
    transform: rotateY(-90deg) translateZ(calc(var(--chip-w) / 2));
}

.chip-right {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    letter-spacing: 0.08em;
    color: #7cff9a;
    background: #0a180a;
    border: 1px solid #2f7a45;
    transform: rotateY(90deg) translateZ(calc(var(--chip-w) / 2));
}

.chip-top,
.chip-bottom {
    width: var(--chip-w);
    height: var(--chip-d);
    top: calc((var(--chip-h) - var(--chip-d)) / 2);
    background: linear-gradient(180deg, #1c4526, #0d2213);
    border: 1px solid #2f7a45;
}

.chip-top { transform: rotateX(90deg) translateZ(calc(var(--chip-h) / 2)); }
.chip-bottom { transform: rotateX(-90deg) translateZ(calc(var(--chip-h) / 2)); }

.chip-brand {
    font-size: 8px;
    letter-spacing: 0.34em;
    opacity: 0.6;
}

.chip-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 23px;
    letter-spacing: 0.1em;
    color: #e2fff0;
    text-shadow: 0 0 10px #00ff66, 0 0 22px rgba(0, 255, 100, 0.6);
    white-space: nowrap;
}

.chip-name {
    font-size: 9px;
    opacity: 0.7;
    letter-spacing: 0.2em;
}

.chip-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 32%, rgba(210, 255, 230, 0.3) 46%, transparent 60%);
    transform: translateX(-130%);
    pointer-events: none;
}

.unbox-ready .chip-sheen {
    animation: chip-sheen 4s ease-in-out 0.6s infinite;
}

@keyframes chip-sheen {
    0% { transform: translateX(-130%); }
    35%, 100% { transform: translateX(130%); }
}

.unbox-open .datachip {
    animation: chip-launch 1.35s cubic-bezier(0.2, 0.85, 0.25, 1) 0.35s forwards;
}

.unbox-ready .datachip {
    opacity: 1;
    animation: chip-float 6s ease-in-out infinite;
}

@keyframes chip-launch {
    0% {
        opacity: 0;
        transform: translateY(12px) translateZ(0) rotateY(0deg) rotateX(0deg) scale(0.6);
    }
    22% {
        opacity: 1;
    }
    62% {
        transform: translateY(-190px) translateZ(60px) rotateY(200deg) rotateX(20deg) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translateY(-168px) translateZ(50px) rotateY(360deg) rotateX(26deg) scale(1);
    }
}

@keyframes chip-float {
    0%, 100% { transform: translateY(-168px) translateZ(50px) rotateY(360deg) rotateX(26deg) scale(1); }
    50% { transform: translateY(-178px) translateZ(50px) rotateY(354deg) rotateX(29deg) scale(1); }
}

/* —— Fabrication progress —— */

.unbox-progress {
    width: min(300px, 68vw);
    height: 3px;
    border-radius: 2px;
    background: rgba(0, 255, 0, 0.12);
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.unbox-progress i {
    display: block;
    width: 34%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
    animation: unbox-progress 1.2s linear infinite;
}

@keyframes unbox-progress {
    from { transform: translateX(-100%); }
    to { transform: translateX(300%); }
}

.unbox-open .unbox-progress,
.unbox-ready .unbox-progress,
.unbox-error .unbox-progress {
    opacity: 0;
    visibility: hidden;
}

/* —— Error —— */

.unbox-error .crate {
    animation: crate-shake 0.5s ease;
}

@keyframes crate-shake {
    0%, 100% { transform: scale(var(--scale)) rotateX(var(--rx)) rotateY(var(--ry)) translateX(0); }
    25% { transform: scale(var(--scale)) rotateX(var(--rx)) rotateY(var(--ry)) translateX(-10px); }
    50% { transform: scale(var(--scale)) rotateX(var(--rx)) rotateY(var(--ry)) translateX(10px); }
    75% { transform: scale(var(--scale)) rotateX(var(--rx)) rotateY(var(--ry)) translateX(-6px); }
}

.unbox-error-msg {
    color: #ff8080;
    max-width: 40ch;
    margin: 0;
    line-height: 1.45;
}

.unbox-error-close {
    margin-top: 4px;
}

/* —— Reveal copy —— */

.unbox-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 420px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.unbox-ready .unbox-copy {
    opacity: 1;
    transform: none;
}

.unbox-copy.hidden {
    display: none;
}

.unbox-copy h2 {
    font-size: 1.15rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 0 14px #00ff00;
}

.unbox-code-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.unbox-code {
    flex: 0 1 auto;
    min-width: 0;
    padding: 10px 16px;
    border: 1px dashed rgba(0, 255, 0, 0.55);
    border-radius: 6px;
    background: rgba(0, 255, 0, 0.06);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(20px, 5.5vw, 30px);
    letter-spacing: 0.16em;
    color: #e2fff0;
    text-shadow: 0 0 12px rgba(0, 255, 100, 0.7);
    user-select: all;
    overflow-wrap: anywhere;
}

.unbox-warning {
    display: block;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid rgba(255, 176, 0, 0.35);
    border-left-width: 3px;
    border-radius: 4px;
    background: rgba(255, 176, 0, 0.08);
    color: #ffd695;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
}

.unbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.unbox-btn {
    border: 1px solid #00ff00;
    background: transparent;
    color: #00ff00;
    padding: 9px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.unbox-btn:hover {
    background: rgba(0, 255, 0, 0.15);
}

.unbox-btn:focus-visible {
    outline: 2px solid #7cff9a;
    outline-offset: 2px;
}

.unbox-btn-primary {
    background: rgba(0, 255, 0, 0.2);
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.3);
}

.unbox-btn-primary:hover {
    background: rgba(0, 255, 0, 0.32);
    box-shadow: 0 0 22px rgba(0, 255, 0, 0.45);
}

.unbox-btn-ghost {
    border-color: rgba(0, 255, 0, 0.3);
    opacity: 0.75;
}

.unbox-btn-copy {
    flex: 0 0 auto;
    letter-spacing: 0.08em;
}

.unbox-btn-copy.is-copied {
    background: rgba(0, 255, 0, 0.3);
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.4);
}

/* —— Fit smaller screens —— */

@media (max-width: 640px), (max-height: 720px) {
    .unbox-scene {
        height: 268px;
        padding-bottom: 26px;
    }

    .crate {
        --scale: 0.78;
    }

    .unbox-beam {
        bottom: 82px;
        height: 200px;
    }

    .unbox-sparks {
        bottom: 140px;
    }
}

@media (max-width: 400px) {
    .unbox-scene { height: 240px; }
    .crate { --scale: 0.66; }
}

/* —— Reduced motion: same beats, no travel —— */

.unbox-instant .unbox-backdrop::after,
.unbox-instant .unbox-hud-dot,
.unbox-instant .unbox-beam,
.unbox-instant .chip-sheen,
.unbox-instant .unbox-sparks i,
.unbox-instant .unbox-progress i {
    animation: none !important;
}

.unbox-instant .crate-lid,
.unbox-instant .crate,
.unbox-instant .unbox-copy {
    transition: none !important;
}

.unbox-instant.unbox-open .datachip,
.unbox-instant.unbox-ready .datachip {
    animation: none !important;
    opacity: 1;
    transform: translateY(-168px) translateZ(50px) rotateY(0deg) rotateX(26deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .cta-crate,
    .crate-lid,
    .datachip {
        transition: none;
    }
}



/* Market price taken from the resource type's median rather than a real listing */
.market-estimated {
    opacity: 0.75;
}