*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
/* ▽▽▽共通CSS▽▽▽ */
/* ▽▽▽ ユーザー画面用カラー変数 ▽▽▽ */
:root {
  /* ベース背景・構造 */
  --color-header-bg: #000000;
  --color-background: #000000;
  --color-footer-bg: #1a1a1a;
  --color-section-bg: #111111;
  --color-bg-surface: #1e1e1e;
  --color-bg-muted: #2a2a2a;
  --color-bg-highlight: #2e2e2e;
  --color-bg-alt: #292929;

  /* テキスト色 */
  --color-text-main: #ffffff;
  --color-text-sub: #a0a0a0;
  --color-text-on-dark: #ffffff;
  --color-text-danger: #ff4c4c;
  --color-text-success: #4caf50;

  /* リンク色（ネオンブルー系） */
  --color-link: #00c3ff;
  --color-link-hover: #3399ff;

  /* 枠・影・強調 */
  --color-accent: #00c3ff; /* 明るい青 */
  --color-border-title: #00c3ff;
  --color-border: #444444;
  --color-border-light: #666666;
  --color-shadow-on-light: rgba(0, 0, 0, 0.2);
  --color-shadow-on-dark: rgba(255, 255, 255, 0.1);

  /* ボタン（ユーザー用） */
  --color-btn-primary: #00aaff;
  --color-btn-primary-hover: #007acc;
  --color-btn-primary-text: #ffffff;

  --color-btn-secondary: transparent;
  --color-btn-secondary-text: #00aaff;

  --color-btn-tertiary: #555555;
  --color-btn-tertiary-text: #ffffff;

  /* 特殊：ゴールド（ポイント表示など） */
  --color-gold: #f7c600;
  --color-gold-dark: #c59e00;

  /* ▼ 既存CSS内で参照されている未定義トークンのエイリアス */
  --color-bg-light: var(--color-bg-muted);
  --color-text-primary: var(--color-text-main);
  --color-btn-hover: var(--color-btn-primary-hover);
}

/* ▽▽▽ 管理画面用カラー変数 ▽▽▽ */
:root {
  --color-admin-bg: #f5f5f5;
  --color-admin-header-bg: #333333;
  --color-admin-header-text: #ffffff;

  /* 背景・境界 */
  --color-admin-bg-surface: #ffffff;
  --color-admin-bg-muted: #f9f9f9;
  --color-admin-border: #999999;

  /* テキスト */
  --color-admin-text-main: #333333;
  --color-admin-text-sub: #999999;

  /* リンク */
  --color-admin-link: #2a80c9;
  --color-admin-link-hover: #1f65a4;

  /* アクセント */
  --color-admin-accent: #2a80c9;
  --color-admin-accent-hover: #1f65a4;

  /* 成功・警告色 */
  --color-admin-success: #2b6e3c;
  --color-admin-alert: #c00;

  /* フラッシュメッセージ */
  --color-admin-flash-bg-success: #e0f5e9;
  --color-admin-flash-border-success: #a8ddb5;
  --color-admin-flash-bg-alert: #ffecec;
  --color-admin-flash-border-alert: #f5c2c2;

  /* ボタン（管理画面） */
  --color-admin-btn-primary: #2a80c9;
  --color-admin-btn-primary-hover: #1f65a4;
  --color-admin-btn-primary-text: #ffffff;

  --color-admin-btn-danger: #dc3545;
  --color-admin-btn-danger-hover: #b02a37;
  --color-admin-btn-danger-text: #ffffff;

  --color-admin-btn-secondary: #cccccc;
  --color-admin-btn-secondary-text: #333333;

  --color-admin-bg-highlight: #e6f7e6;
  --color-admin-border-highlight: #b5e0b5;

  --color-danger: #e53935;
  --color-danger-hover: #c62828;
}

/* body直下のテキスト色（明示的に） */
body {
  background-color: var(--color-background);
  color: var(--color-text-main);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

/* 画面全体の高さを設定 */
html, body {
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  margin-top: 60px; /* ヘッダーの高さ分下げる */
}

/* base-wrapperの最大幅を1024pxに設定し、画面幅に応じて縮小 */
.base-wrapper {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto; /* 中央に配置 */
}

.gif-background-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; position: absolute; top: 0; left: 0; }
.gif-background-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.gif-background-image { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }

/* ▼▼▼追加箇所▼▼▼ */
.page-header,
.page-content,
.user-wrapper {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.page-header,
.page-content {
  margin-top: 20px;
  margin-bottom: 25px;
}

.page-title,
.page-header h1,
.section-title {
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 2px solid var(--color-border-title);
  padding-bottom: 5px;
  margin-bottom: 10px;
  padding-left: 5px;
}

.page-header p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-sub);
  margin: 4px 0;
  padding-left: 5px;
}

.sub-title {
  font-size: 1.2em;
  margin-top: 20px;
  color: var(--color-text-sub);
}
/* ▲▲▲追加箇所▲▲▲ */

/* ▼▼▼ユーザー画面用だけに適用 ▼▼▼ */
body:not(.admin) {
  background-color: var(--color-background);
  color: var(--color-text-main);
}

/* ▼▼▼管理画面用だけに適用 ▼▼▼ */
body.admin {
  background-color: var(--color-admin-bg);
  color: var(--color-admin-text-main);
}

/*-- ▼▼▼完全版 ページネーションCSS▼▼▼  */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
  flex-wrap: wrap;
  gap: 8px;
}
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
}
.pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 6px;
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  font-weight: bold;
  font-size: 14px;
  box-sizing: border-box;
  border: 1px solid var(--color-btn-primary);
}
.pagination a:hover {
  background-color: var(--color-btn-hover);
  color: var(--color-btn-primary-text);
  border: 1px solid var(--color-btn-hover);
}
/*-- ▲▲▲完全版 ページネーションCSS▲▲▲  */

/* =========================================================
   ラインナップ（ユーザー画面）用のカラートークン
   ※色だけをここに集約。配置やサイズは .erb 側で定義。
   ========================================================= */
:root {
  /* モーダル/面 */
  --lineup-overlay-bg: rgba(0, 0, 0, .6);
  --lineup-surface-bg: var(--color-bg-surface);
  --lineup-border: var(--color-bg-muted);
  --lineup-text: var(--color-text-main);
  --lineup-text-sub: var(--color-text-sub);

  /* ランク見出し（デフォルト/各等級）
     ※バッジ画像の色味に合わせて “すべてグラデーション” で表現 */
  --lineup-rank-text: #ffffff;
  --lineup-rank-default-bg: linear-gradient(45deg, var(--color-accent), var(--color-link-hover));

  /* ラストワン：メタルレッド（中心明・端暗の金属調） */
  --lineup-rank-lastone-bg:
    linear-gradient(90deg, #7a0000 0%, #a30000 18%, #d32f2f 45%, #ff1744 50%, #d32f2f 55%, #a30000 82%, #7a0000 100%);
  /* 特賞：虹色（レインボー） */
  --lineup-rank-special-bg:
    linear-gradient(90deg, #ff5252 0%, #ff9800 16%, #ffeb3b 33%, #4caf50 50%, #03a9f4 66%, #7e57c2 83%, #ff5252 100%);
  /* 1等：ゴールド */
  --lineup-rank-1st-bg:
    linear-gradient(90deg, #fff4c2 0%, #ffe082 30%, #ffd54f 50%, #ffca28 70%, #ffb300 100%);
  /* 2等：シルバー */
  --lineup-rank-2nd-bg:
    linear-gradient(90deg, #fafafa 0%, #e0e0e0 30%, #cfcfcf 50%, #bdbdbd 70%, #9e9e9e 100%);
  /* 3等：ブロンズ */
  --lineup-rank-3rd-bg:
    linear-gradient(90deg, #f1b482 0%, #e09b59 30%, #cd7f32 55%, #a5672b 78%, #8d5524 100%);
  /* 4等：ブルー */
  --lineup-rank-4th-bg:
    linear-gradient(90deg, #64b5f6 0%, #42a5f5 30%, #1e88e5 55%, #1976d2 78%, #0d47a1 100%);
  /* 5等：グレイ */
  --lineup-rank-5th-bg:
    linear-gradient(90deg, #d9d9d9 0%, #bdbdbd 35%, #9e9e9e 60%, #757575 80%, #424242 100%);

  /* 商品名中の小バッジ（PSA など） */
  --lineup-itembadge-bg: var(--color-bg-muted);
  --lineup-itembadge-fg: var(--color-text-main);
  --lineup-itembadge-border: var(--color-border);

  /* 個数/確率バッジ（既定色 + バリエーション） */
  --lineup-badge-bg: rgba(255,255,255,.08);
  --lineup-badge-fg: var(--color-text-main);
  --lineup-badge-border: rgba(255,255,255,.18);

  --lineup-qty-badge-bg: #1b5e20;
  --lineup-qty-badge-fg: #ffffff;
  --lineup-prob-badge-bg: #283593;
  --lineup-prob-badge-fg: #ffffff;

  /* 並（ハズレ）要約ピル */
  --lineup-normal-pill-bg: #4e342e;
  --lineup-normal-pill-fg: #ffffff;
  --lineup-pill-border: rgba(255, 255, 255, .2);

  /* スクロールバー */
  --lineup-scrollbar-thumb: rgba(255, 255, 255, .35);
  --lineup-scrollbar-track: transparent;

  /* 影 */
  --lineup-shadow: rgba(0,0,0,.35);
  --lineup-shadow-hover: rgba(0,0,0,.24);

  /* ===========================
     ☆ 画像縁取り/発光の色トークン
     =========================== */
  --lineup-outline-1st:    #ffd54f;  /* 1等 */
  --lineup-outline-2nd:    #d0d0d0;  /* 2等 */
  --lineup-outline-3rd:    #cd7f32;  /* 3等 */
  --lineup-outline-4th:    #64b5f6;  /* 4等 */
  --lineup-outline-5th:    #9e9e9e;  /* 5等 */
  --lineup-outline-last:   #ef5350;  /* ラストワン（メタルレッド系） */
  --lineup-outline-special:#ffd54f;  /* 特賞代表色：アンバー */

  --lineup-glow-1st:       rgba(255, 213,  79, .65);
  --lineup-glow-2nd:       rgba(224, 224, 224, .65);
  --lineup-glow-3rd:       rgba(226, 165,  96, .60);
  --lineup-glow-4th:       rgba(144, 202, 249, .60);
  --lineup-glow-5th:       rgba(189, 189, 189, .55);
  --lineup-glow-last:      rgba(239, 154, 154, .65);
  --lineup-glow-special:   rgba(255, 213,  79, .70);

  /* 虹色の分割グロー（特賞用） */
  --lineup-glow-rainbow-r: rgba(255,  82,  82,  .55); /* red    */
  --lineup-glow-rainbow-o: rgba(255, 152,   0,  .55); /* orange */
  --lineup-glow-rainbow-y: rgba(255, 235,  59,  .55); /* yellow */
  --lineup-glow-rainbow-g: rgba( 76, 175,  80,  .55); /* green  */
  --lineup-glow-rainbow-b: rgba(  3, 169, 244,  .55); /* blue   */
  --lineup-glow-rainbow-v: rgba(126,  87, 194,  .55); /* violet */

  /* ===========================
     ☆ 画像ボーダー向けエイリアス（必要時）
     =========================== */
  --lineup-border-image-lastone: var(--lineup-rank-lastone-bg);
  --lineup-border-image-special: var(--lineup-rank-special-bg);
  --lineup-border-image-1st:     var(--lineup-rank-1st-bg);
  --lineup-border-image-2nd:     var(--lineup-rank-2nd-bg);
  --lineup-border-image-3rd:     var(--lineup-rank-3rd-bg);
  --lineup-border-image-4th:     var(--lineup-rank-4th-bg);
  --lineup-border-image-5th:     var(--lineup-rank-5th-bg);

  /* 単色の border-color が必要な場合の代表色（rankトークン由来） */
  --lineup-border-last:    #c62828; /* ラストワン（メタルレッド代表色） */
  --lineup-border-special: #ffd54f; /* 特賞（虹の代表色） */
  --lineup-border-rank1:   #ffd54f; /* gold */
  --lineup-border-rank2:   #c0c0c0; /* silver */
  --lineup-border-rank3:   #cd7f32; /* bronze */
  --lineup-border-rank4:   #1e88e5; /* vivid blue */
  --lineup-border-rank5:   #9e9e9e; /* gray */

  /* ▼ フォールバック（名称ゆれ対策エイリアス：必要なら使用） */
  --lineup-outline-lastone: var(--lineup-outline-last);
  --lineup-glow-lastone:    var(--lineup-glow-last);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
.image-drop-zone {
  border: 2px dashed #ddd;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.image-drop-zone.dragover {
  border-color: #aaa;
  background-color: #f9f9f9;
}

.image-drop-instructions {
  color: #aaa;
  font-size: 14px;
}

.image-preview {
  margin-top: 10px;
  display: none;
}