/* =============================================================================
   WEB3 ПРИЛОЖЕНИЕ (#app-container)
   Скрыто по умолчанию. Содержит 4 экрана которые переключаются через JS.
   Экраны: landing → dashboard → locked-details (и public-details).
   ============================================================================= */
#app-container {
    position: relative; width: 100%; min-height: 100vh;
    transition: opacity 0.5s ease;
}

/* Экран 1: подключение кошелька. Занимает весь экран, центрированный. */
#screen-landing {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 100vh; text-align: center;
    transition: opacity 0.5s ease;
}
.container-landing { width: 90%; max-width: 400px; display: flex; flex-direction: column; align-items: center; }
.info-message { font-size: 11px; color: #888888; line-height: 1.6; margin-bottom: 30px; opacity: 0; transform: translateY(-10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.info-message.show { opacity: 1; transform: translateY(0); }
.logo-landing { display: block; margin: 0 auto 50px auto; width: 140px; cursor: pointer; }
/* Кнопка CONNECT WALLET: синяя, на всю ширину, пиксельный шрифт */
.btn-connect { background-color: #0033ff; color: #ffffff; border: none; padding: 18px 20px; font-family: 'Press Start 2P', monospace; font-size: 12px; cursor: pointer; width: 100%; margin-bottom: 40px; transition: background-color 0.3s ease; }
.btn-connect:hover { background-color: #0044ff; }

/* Экран 2: таблица NFT. Изначально display:none, показывается через JS. */
#screen-dashboard {
    display: none; opacity: 0; flex-direction: column; padding: 20px;
    max-width: 1000px; margin: 0 auto; transition: opacity 0.5s ease;
}
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-top: 10px; width: 100%; }

.logo-dashboard { width: 40px; cursor: pointer; transition: opacity 0.2s ease; flex-shrink: 0; }
.logo-dashboard:hover { opacity: 0.8; }

/* Адрес кошелька в шапке — синий текст, кликабелен (открывает виджет смены кошелька) */
.wallet-pill { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #3366ff; cursor: pointer; transition: color 0.3s ease; min-width: 0; flex-shrink: 1; }
.wallet-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.wallet-pill svg { flex-shrink: 0; }

.search-container { position: relative; margin-bottom: 30px; max-width: 400px; }
.search-input { width: 100%; box-sizing: border-box; background-color: transparent; border: 1px solid #333; color: #fff; padding: 12px 12px 12px 40px; font-family: 'Roboto Mono', monospace; font-size: 14px; border-radius: 4px; outline: none; }
.search-input:focus { border-color: #555; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: 0.7; }

/* Таблица NFT: CSS Grid. Мобильная версия — 4 колонки; десктоп >=1024px — 7 колонок. */
.nft-table { width: 100%; position: relative; }
.table-header { display: grid; grid-template-columns: 50px 2fr 0.8fr 1.5fr; gap: 10px; color: #666; font-size: 12px; text-transform: uppercase; padding-bottom: 15px; border-bottom: 1px solid #222; margin-bottom: 15px; }
/* Кликабельный заголовок колонки. Стрелка .sort-arrow показывает направление сортировки. */
.sortable { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; transition: color 0.2s ease; }
.sortable:hover { color: #aaa; }
.sort-arrow { display: inline-block; font-size: 10px; color: #444; transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease; }
.sort-arrow.active { color: #fff; text-shadow: 0 0 5px rgba(255,255,255,0.5); }
.sort-arrow.desc { transform: rotate(180deg); }

/* Строка NFT в таблице: такой же grid как table-header */
.nft-row { display: grid; grid-template-columns: 50px 2fr 0.8fr 1.5fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #1a1a1a; transition: background-color 0.2s ease; }
.nft-row:hover { background-color: #111; }
.desktop-only { display: none; }

@media (min-width: 1024px) {
    .table-header { grid-template-columns: 60px 2fr 0.8fr 1.2fr 1.8fr 1.2fr 1.5fr; }
    /* Строка NFT в таблице: такой же grid как table-header */
.nft-row { grid-template-columns: 60px 2fr 0.8fr 1.2fr 1.8fr 1.2fr 1.5fr; }
    .table-header .desktop-only { display: flex; } 
    .nft-row .desktop-only { display: flex; align-items: center; font-size: 13px; color: #888; }
}

.col-img img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; background-color: #222; }
.col-name .name { font-weight: bold; font-size: 14px; margin-bottom: 4px; font-family: sans-serif; }
.col-name .collection { font-size: 11px; color: #555; }
.col-n { font-size: 13px; color: #888; }
.col-status { display: flex; flex-direction: column; align-items: flex-start; }
.col-owner { font-size: 12px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Плашки статуса NFT. Используются и в таблице, и на карточках, и на витрине.
   Каждый статус имеет свой цвет фона и текста. */
.status-pill { padding: 4px 10px; border-radius: 6px; font-size: 12px; margin-bottom: 4px; display: inline-block;}
.status-locked  { background-color: #222;    color: #777; }  /* < 30 дней: тёмно-серый */
.status-creating { background-color: #001a4d; color: #3366ff; } /* В процессе создания: синий */
.status-shipped  { background-color: #003322; color: #00aaaa; } /* Отправлено: бирюзовый */
.status-athome  { background-color: #332200; color: #ffaa00; } /* Уже дома: жёлтый */
.status-unlocked { background-color: #003311; color: #00cc44; } /* > 30 дней: зелёный */
.status-available { background-color: transparent; color: #ffffff; border: 1px solid #ffffff; } /* Выставлен на продажу: белый с обводкой */
.status-upcoming { background-color: rgba(51, 102, 255, 0.1); color: #3366ff; border: 1px solid #3366ff; } /* Скоро: синий с обводкой */
.status-legacy   { background-color: #1a1208; color: #b88958; border: 1px solid rgba(184,137,88,0.4); } /* Наследие: бронзовый */
.status-subtext { font-size: 10px; color: #555; }

.clickable-cell { cursor: pointer; transition: opacity 0.2s ease; }
.clickable-cell:hover { opacity: 0.7; }

/* =============================================================================
   ЭКРАНЫ ДЕТАЛЕЙ NFT
   Экран 3 (#screen-locked-details)  — карточка из таблицы (для владельца)
   Экран 4 (#screen-public-details)  — публичная карточка (кнопка VIEW на витрине)
   Обе используют одинаковые классы .details-content, .media-container и т..д.
   ============================================================================= */
#screen-locked-details {
    display: none; opacity: 0; flex-direction: column; padding: 20px;
    max-width: 1000px; margin: 0 auto; transition: opacity 0.5s ease; min-height: 100vh;
}

#screen-locked-details .header { margin-bottom: 10px; }
/* Код модели кимоно в шапке карточки (например B-E01-UM-2604) */
.detail-model-name { font-family: 'Roboto Mono', monospace; font-size: 13px; color: #aaaaaa; text-align: center; flex-grow: 1; flex-shrink: 0; margin: 0 10px; line-height: 1.3; }

#public-detail-model { text-align: left; }

.details-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex-grow: 1; margin-top: 0px; max-width: 400px; margin-left: auto; margin-right: auto; width: 100%; }

/* Контейнер для видео/картинки NFT: тёмный фон, скруглённые углы, тень */
.media-container { position: relative; width: 100%; margin-bottom: 8px; border-radius: 12px; background-color: #111; box-shadow: 0 4px 20px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.details-img, .details-video { width: 100%; height: auto; max-height: 75vh; display: block; object-fit: contain; border-radius: 12px; }

/* Анимированный спиннер из трёх точек — виден пока видео загружается */
.video-loader { position: absolute; display: flex; gap: 8px; z-index: 10; }
.video-loader .dot { width: 12px; height: 12px; background-color: #0033ff; border-radius: 50%; opacity: 0.3; animation: dotBlink 1.4s infinite both; }
.video-loader .dot:nth-child(1) { animation-delay: 0s; }
.video-loader .dot:nth-child(2) { animation-delay: 0.2s; }
.video-loader .dot:nth-child(3) { animation-delay: 0.4s; }

/* Иконка паузы: круглая полупрозрачная кнопка поверх видео.
   Показывается через .pause-icon.show когда видео на паузе. */
.pause-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
/* Когда иконка показана — делаем её кликабельной (используется как кнопка Pause) */
.pause-icon.show { opacity: 1; pointer-events: auto; cursor: pointer; }
.pause-icon svg { width: 24px; height: 24px; fill: #fff; }

/* Кнопки Replay (слева) и Mute (справа) поверх видео.
   Появляются/скрываются через класс .visible (управляет setupSpecificVideoControls в app.js).
   .overlay-left/.overlay-right — позиционирование. */
.video-overlay-btn {
    position: absolute; bottom: 12px; background: rgba(0, 0, 0, 0.6); border: none; color: #fff;
    border-radius: 50%; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center;
    cursor: pointer; z-index: 15; transition: background 0.3s, transform 0.2s; -webkit-tap-highlight-color: transparent;
}
.video-overlay-btn:hover { background: rgba(0, 0, 0, 0.9); transform: scale(1.1); }
.video-overlay-btn svg { width: 18px; height: 18px; fill: currentColor; }
.overlay-left { left: 55px; }
.overlay-right { right: 55px; }

/* КОНТЕЙНЕР ДЛЯ НОМЕРА N ПОД ВИДЕО */
/* Строка с номером N под видео */
.external-video-controls { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 25px; padding: 0 4px; box-sizing: border-box; }
.details-edition-panel { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #aa8800; text-transform: uppercase; margin: 0; text-align: center; }

video::-webkit-media-controls-wireless-playback-picker-button { border-radius: 12px !important; background-color: rgba(0, 0, 0, 0.5) !important; }
video::-webkit-media-controls-picture-in-picture-button { border-radius: 12px !important; background-color: rgba(0, 0, 0, 0.5) !important; }
video::-webkit-media-controls-overlay-cast-button { border-radius: 12px !important; background-color: rgba(0, 0, 0, 0.5) !important; }
video::-internal-media-controls-overlay-cast-button { border-radius: 12px !important; background-color: rgba(0, 0, 0, 0.5) !important; }

/* Название NFT в карточке (большой жирный заголовок) */
.details-title { font-family: sans-serif; font-size: 24px; font-weight: bold; text-align: center; margin: 0 0 30px 0; color: #fff; }
/* Таймер разблокировки в карточке: синий пиксельный текст */
.details-timer { color: #0033ff; font-family: 'Press Start 2P', monospace; font-size: 11px; margin-bottom: 40px; text-align: center; line-height: 1.5; }

/* Кнопка GET PHYSICAL / ITEM AT HOME в карточке NFT.
   .btn-disabled — серая (Locked или At home)
   .btn-active   — синяя (Unlocked) */
.btn-physical { width: 100%; box-sizing: border-box; padding: 18px 20px; font-family: 'Press Start 2P', monospace; font-size: 12px; margin-bottom: 30px; text-align: center; border-radius: 2px; transition: background-color 0.3s ease; }
.btn-disabled { background-color: transparent; border: 1px solid #333; color: #666; cursor: pointer; }
.btn-active { background-color: #0033ff; border: none; color: #ffffff; cursor: pointer; }
.btn-active:hover { background-color: #0044ff; }

/* Мелкая белая надпись под GET PHYSICAL (только для статуса Unlocked).
   Self-claim: владелец уже получил халат до того, как появился сайт. */
#btn-already-received { display: block; font-family: 'Roboto Mono', monospace; font-size: 11px; color: #ffffff; text-decoration: underline; text-align: center; cursor: pointer; margin: -18px 0 30px; opacity: 0.7; transition: opacity 0.2s ease; }
#btn-already-received:hover { opacity: 1; }

/* Текст описания NFT: небольшой серый текст, ссылки становятся синими */
.details-description { font-family: sans-serif; font-size: 12px; color: #aaa; line-height: 1.6; text-align: left; width: 100%; margin-bottom: 30px; word-wrap: break-word; }
.details-description a { color: #3366ff; text-decoration: none; font-weight: bold; }
.details-description a:hover { text-decoration: underline; }

/* Футер карточки: строка "View NFT on" + иконки маркетплейсов */
.details-footer { display: flex; align-items: center; gap: 15px; border-top: 1px solid #1a1a1a; padding-top: 20px; width: 100%; justify-content: flex-start; }
.details-footer span { color: #555; font-size: 11px; font-family: 'Roboto Mono', monospace; margin-right: auto; }

.social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; -webkit-tap-highlight-color: transparent !important; outline: none; text-decoration: none; transition: background-color 0.2s ease; }
.social-link:hover, .social-link:active { background-color: rgba(255, 255, 255, 0.05); }
.social-img { width: 20px; height: 20px; opacity: 0.6; transition: opacity 0.2s ease, transform 0.2s ease; object-fit: contain; -webkit-tap-highlight-color: transparent !important; outline: none; }
.social-link:hover .social-img, .social-link:active .social-img { opacity: 1; transform: scale(1.1); }

/* Контейнер для сообщения когда нет NFT или идёт загрузка */
.empty-state-container { position: relative; min-height: 250px; width: 100%; }
.empty-state { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Roboto Mono', monospace; font-size: 14px; color: #555555; background-color: rgba(13, 13, 13, 0.5); z-index: 10; border-radius: 8px; }
.loading-text { display: flex; align-items: center; gap: 10px; }
/* Вращающееся колёсико загрузки (синяя дуга) */
.spinner { width: 16px; height: 16px; border: 2px solid #333; border-top-color: #3366ff; border-radius: 50%; animation: spin 1s linear infinite; }

/* Строка пагинации под таблицей: "1-12 of 12" и стрелки */
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; font-size: 12px; color: #777; }
.pagination-controls { display: flex; gap: 10px; }
.pagination-controls span.active { color: #fff; }

/* Цветовые классы для названий NFT в таблице */
.blue-text { color: #3366ff !important; }
.white-text { color: #ffffff !important; }