/* =========================================================
   JIMMU style.css (Unified / No duplicates)
   - Shared base + User screen + Admin screen
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg0:#0b1020;
  --bg1:#0f1731;

  --text:#eaf0ff;
  --muted:#a9b6d8;
  --line:rgba(255,255,255,.12);

  --gold1:#f7d36a;
  --gold2:#d6a742;

  --accent1:#7c5cff;
  --accent2:#15d6ff;

  --ok:#35f2a3;
  --bad:#ff5c7a;

  --radius:16px;
  --radius2:22px;

  --shadow: 0 12px 30px rgba(0,0,0,.45);
  --shadow2: 0 10px 20px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(21,214,255,.25), transparent 55%),
    radial-gradient(900px 700px at 60% 120%, rgba(247,211,106,.18), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

body{
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.55;
}

/* ---------- Layout ---------- */
.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

.row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

h1{
  font-size: clamp(20px, 2.2vw, 30px);
  margin: 6px 0 10px;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}

h2{
  margin: 0 0 10px;
  font-size: 16px;
}

.muted{ color: var(--muted); }
.error{ color: #ff8aa0; }

/* ---------- Cards ---------- */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(10px);
}

/* ---------- Links ---------- */
.link{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  text-decoration:none;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}

/* ---------- Inputs / Buttons ---------- */
label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

label > input,
label > select{
  margin-top: 6px;
}

input[type="text"],
input[type="password"],
input[type="number"],
select{
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

input::placeholder{ color: rgba(233,240,255,.45); }

input:focus, select:focus{
  border-color: rgba(21,214,255,.55);
  box-shadow:
    0 0 0 4px rgba(21,214,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

button{
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  color: #07101f;
  font-weight: 800;
  letter-spacing: .03em;
  cursor:pointer;
  background: linear-gradient(90deg, var(--gold1), var(--gold2));
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .12s ease;
}
button:hover{ transform: translateY(-1px); filter: brightness(1.06); }
button:active{ transform: translateY(0px); filter: brightness(.98); }

/* Utility */
hr{
  border: none;
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 14px 0;
}

/* =========================================================
   User screen (index.php)
   ========================================================= */

.result{ margin-top: 10px; }

/* ガチャ結果画像 */
.resimg{
  width: 100%;
  max-width: 520px;
  height: 260px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  display:block;
  margin: 0 0 10px;
  background: rgba(0,0,0,.18);
}

/* 所持キャラ一覧：index.php は inv-grid を使用 */
.inv-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

/* 旧 .grid を使ってる画面があっても崩れないよう互換 */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

/* キャラカード */
.chip{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px;
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.rarity{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  display:inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.name{
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 14px;
}

.count{ font-size: 12px; color: rgba(233,240,255,.85); }

/* キャラ画像 */
.chimg{
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.15);
}

/* =========================================================
   Modal (shared)
   ========================================================= */

.img-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}
.img-modal.open { display: flex; }

.img-modal__box {
  max-width: min(960px, 96vw);
  max-height: 92vh;
  background: rgba(10,14,28,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

.img-modal__img {
  display: block;
  max-width: 96vw;
  max-height: 78vh;
  width: auto;
  height: auto;
}

.img-modal__bar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
}
.img-modal__title { font-weight: 900; }
.img-modal__close {
  width: auto;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  box-shadow: none;
}

/* =========================================================
   Admin screen (users.php etc.)  ※ body に class="admin" が必要
   ========================================================= */

.admin h2{ margin-top: 0; }

/* テーブル枠：横スクロールは wrap に任せる */
.admin .table-wrap{
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}

/* table base */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
}

/* 管理テーブルは “見やすさ優先” で最小幅を少しだけ確保 */
.admin .users-table{
  width: 100%;
  min-width: 980px; /* これ以上小さいと列が潰れるので保険 */
  background: rgba(0,0,0,.18);
}

.admin .table thead th{
  text-align:left;
  padding: 12px 12px;
  font-size: 12px;
  color: rgba(233,240,255,.92);
  background: linear-gradient(180deg, rgba(124,92,255,.22), rgba(21,214,255,.10));
  border-bottom: 1px solid rgba(255,255,255,.12);
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(6px);
}

.admin .table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  vertical-align: top;
  /* ここ重要：編集列だけ折り返し、他は潰れにくい */
  white-space: nowrap;
}

.admin .table tbody td.col-edit,
.admin .table thead th.col-edit{
  white-space: normal;
  min-width: 340px;
  max-width: 420px; /* 画面外に飛び出しにくくする */
}

.admin .table tbody tr:hover{ background: rgba(255,255,255,.05); }
.admin .table tbody tr:last-child td{ border-bottom: none; }

/* pill (admin) */
.pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #06121f;
  background: linear-gradient(90deg, var(--ok), rgba(53,242,163,.65));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
}
.pill.off{
  color:#1b0a10;
  background: linear-gradient(90deg, var(--bad), rgba(255,92,122,.65));
}

/* ---- Edit box (details) ---- */
.admin .editbox{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.admin .editbox__sum{
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-weight: 900;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.admin .editbox__sum::-webkit-details-marker{ display:none; }

.admin .editbox__hint{
  font-weight: 600;
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.admin .editbox[open] .editbox__sum{
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* 編集フォームの並び：広いと2列、狭いと1列 */
.admin .editgrid{
  padding: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  align-items: start;
}

.admin .editcard{
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
}

.admin .edittitle{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

/* edit row (2 inputs in one line) */
.admin .editrow{
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.admin .btn{
  width: 100%;
  border-radius: 14px;
  padding: 11px 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  color: var(--text);
  cursor: pointer;
  box-shadow: none;
}
.admin .btn:hover{ filter: brightness(1.08); }
.admin .btn:active{ transform: translateY(1px); }

/* Admin: inputs inside cards */
.admin .editcard input,
.admin .editcard select{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .admin .editgrid{ grid-template-columns: 1fr; }
  .admin .editrow{ grid-template-columns: 1fr; }
  .admin .users-table{ min-width: 860px; }
}

@media (max-width: 560px){
  .container{ padding: 14px; }
  .card{ padding: 14px; }
  .chimg{ height: 140px; }
  .resimg{ height: 220px; }
}
/* ===== 図鑑：未所持カードを暗くする ===== */

.chip{
  position: relative;
  overflow: hidden;
}

/* 黒い膜 */
.chip.is-locked::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45); /* ← 黒の薄さ（調整可） */
  border-radius: inherit;
  pointer-events: none;
}

/* 文字も少し薄く */
.chip.is-locked .name,
.chip.is-locked .rarity{
  opacity: .6;
}

/* 画像を少し暗く */
.chip.is-locked img{
  filter: brightness(.6) grayscale(.3);
}

/* 所持済みは強調 */
.chip.is-owned{
  box-shadow: 0 0 0 2px rgba(255,215,100,.6);
}