/* クロスライズ・モンスターズ 画面どうしで使う見た目（ホーム・ストーリー・デッキ・集めたカード・パック・設定）
   書体：Google Fonts の書体を jsDelivr の @fontsource で版を固定して読む（5.2.5）。
   使い方は shell/共通の部品.md */
@import url("https://cdn.jsdelivr.net/npm/@fontsource/zen-kaku-gothic-new@5.2.5/500.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/zen-kaku-gothic-new@5.2.5/700.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/zen-kaku-gothic-new@5.2.5/900.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/shippori-mincho-b1@5.2.5/700.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/shippori-mincho-b1@5.2.5/800.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/cinzel@5.2.5/700.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/cinzel@5.2.5/900.css");

:root {
  /* 色 */
  --bg0: #06070f;
  --bg1: #0c1124;
  --navy: #121a36;
  --ink: #f5eedc;
  --sub: #b7b0a0;
  --dim: #7c788f;
  --gold: #e9c877;
  --gold-hi: #fff2c6;
  --gold-lo: #9c7330;
  --line: rgba(233, 200, 119, .38);
  --line-soft: rgba(233, 200, 119, .16);
  --R: #ff7a5c; --R2: #7a1d12;
  --B: #62b3ff; --B2: #13306e;
  --G: #78d47f; --G2: #174a22;
  --P: #c08cff; --P2: #3a1a63;
  --C-rar: #c9c4b8; --R-rar: #7fc3ff; --SR-rar: #f2cf6b; --UR-rar: #ff9de6;
  /* 書体 */
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --f-head: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-latin: "Cinzel", "Shippori Mincho B1", serif;
  /* ゆるやかさ（3つ・common.js の CR.E と同じ） */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-in: cubic-bezier(.7, 0, .84, 0);
  --e-back: cubic-bezier(.34, 1.56, .64, 1);
  /* 大きさ */
  --hdr: 58px;
  --gut: 16px;
  --r: 14px;
}
@media (max-height: 460px) { :root { --hdr: 46px; --gut: 12px; --r: 12px; } }
@media (max-width: 480px) { :root { --hdr: 52px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
  font-feature-settings: "palt" 1;
}
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; user-select: none; }

/* 入る時の動き（どの画面も body に cr-page を付ける） */
.cr-page { animation: cr-enter .42s var(--e-out) both; }
@keyframes cr-enter { from { opacity: 0; transform: scale(1.012); filter: brightness(.6); } to { opacity: 1; transform: none; filter: none; } }
html.cr-fx-short .cr-page { animation-duration: .2s; }

/* 背景（地図＋暗い紺・すみの暗さ） */
.cr-backdrop { position: fixed; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 50% 0%, #1a2550 0%, #0b1024 55%, #05060c 100%); }
.cr-backdrop::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%),
  repeating-linear-gradient(0deg, rgba(233,200,119,.035) 0 1px, transparent 1px 64px),
  repeating-linear-gradient(90deg, rgba(233,200,119,.035) 0 1px, transparent 1px 64px); }
.cr-backdrop.map { background: #05060c url("img/map.jpg") center/cover no-repeat; }
.cr-backdrop.map::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,16,.72), rgba(5,7,16,.55) 40%, rgba(5,7,16,.86)); }

/* ===== ヘッダー（CR.header が作る） ===== */
.cr-header {
  position: sticky; top: 0; z-index: 50; height: var(--hdr);
  display: flex; align-items: center; gap: 12px;
  padding: 0 max(var(--gut), env(safe-area-inset-right)) 0 max(var(--gut), env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(6,8,18,.94), rgba(6,8,18,.78));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cr-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--gold) 50%, var(--line) 80%, transparent); }
.cr-header .cr-title { font-family: var(--f-head); font-weight: 800; font-size: clamp(17px, 2.2vw + 6px, 24px); letter-spacing: .08em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-header .cr-title small { font-family: var(--f-latin); font-size: .5em; letter-spacing: .25em; opacity: .8; }
.cr-header .cr-sp { flex: 1; }
.cr-back {
  width: calc(var(--hdr) - 16px); height: calc(var(--hdr) - 16px); flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: radial-gradient(circle at 50% 35%, #26305a, #0d1228);
  display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--e-back), border-color .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.cr-back svg { width: 46%; height: 46%; }
.cr-back:hover { border-color: var(--gold); }
.cr-back:active { transform: scale(.92); }

/* 切手・かけらの札 */
.cr-wallet { display: flex; gap: 8px; }
.cr-chip {
  display: inline-flex; align-items: center; gap: 6px; height: calc(var(--hdr) - 24px); min-height: 28px; padding: 0 12px 0 4px;
  border-radius: 999px; background: linear-gradient(180deg, rgba(20,26,52,.95), rgba(8,11,24,.95));
  border: 1px solid var(--line); font-weight: 900; font-size: 14px; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.cr-chip .ic { width: 24px; height: 24px; flex: none; }
.cr-chip .lb { font-size: 10px; font-weight: 700; color: var(--sub); letter-spacing: .08em; }
@media (max-width: 480px) { .cr-chip .lb { display: none; } .cr-chip { padding-right: 9px; } }

/* ===== 枠（パネル） ===== */
.cr-panel {
  position: relative; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(22,29,58,.9), rgba(9,12,27,.94));
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 3px rgba(0,0,0,.35), inset 0 0 0 4px var(--line-soft), inset 0 1px 0 rgba(255,255,255,.06);
}
/* すみの飾り（菱形の金具） */
.cr-orn::before, .cr-orn::after { content: ""; position: absolute; width: 9px; height: 9px; transform: rotate(45deg); top: -5px;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo)); box-shadow: 0 0 6px rgba(233,200,119,.6); }
.cr-orn::before { left: calc(50% - 4.5px); }
.cr-orn::after { left: calc(50% - 4.5px); top: auto; bottom: -5px; }

/* 見出し（左右に金の線） */
.cr-h { font-family: var(--f-head); font-weight: 800; letter-spacing: .1em; color: var(--gold-hi); display: flex; align-items: center; gap: 12px; margin: 0; }
.cr-h::before, .cr-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.cr-h::after { background: linear-gradient(90deg, var(--line), transparent); }

/* ===== ボタン ===== */
.cr-btn {
  --c1: #fff3c9; --c2: #e9c877; --c3: #a77a2e;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 26px; border: 0; border-radius: 10px; cursor: pointer;
  font-family: var(--f-head); font-weight: 800; font-size: 16px; letter-spacing: .12em; color: #2b1b05;
  background: linear-gradient(180deg, var(--c1), var(--c2) 48%, var(--c3));
  box-shadow: 0 0 0 1px rgba(60,38,6,.9), 0 0 0 2px rgba(255,231,160,.35), 0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .25s var(--e-back), filter .2s; overflow: hidden; white-space: nowrap;
}
.cr-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); }
.cr-btn:hover::after { animation: cr-shine .8s var(--e-out); }
@keyframes cr-shine { to { left: 130%; } }
.cr-btn:hover { filter: brightness(1.06); }
.cr-btn:active { transform: scale(.96); }
.cr-btn.sub { color: var(--ink); background: linear-gradient(180deg, #27305a, #121834); box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); }
.cr-btn.big { min-height: 54px; font-size: 19px; padding: 0 36px; }
.cr-btn.small { min-height: 36px; font-size: 14px; padding: 0 16px; letter-spacing: .06em; }
.cr-btn[disabled] { filter: grayscale(.9) brightness(.6); pointer-events: none; }

/* ボタンの絵（ui_btn_main / ui_btn_sub・左右の羅針盤の飾りはそのまま、間だけのばす） */
.cr-btn { --bh: 46px; height: var(--bh); min-height: 0; padding: 0 10px; background: none; box-shadow: none; border-style: solid; border-color: transparent;
  border-width: 0 calc(var(--bh) * .6); border-image: url("img/ui/ui_btn_main.webp") 0 120 fill / 0 calc(var(--bh) * .6) stretch;
  color: #3a2004; text-shadow: 0 1px 0 rgba(255,240,200,.6); filter: drop-shadow(0 5px 10px rgba(0,0,0,.45)); }
.cr-btn::after { display: none; }
.cr-btn:hover { filter: drop-shadow(0 5px 10px rgba(0,0,0,.45)) brightness(1.08); }
.cr-btn.sub { background: none; box-shadow: none; color: var(--ink); text-shadow: 0 1px 2px rgba(0,0,0,.7); border-image-source: url("img/ui/ui_btn_sub.webp"); }
.cr-btn.big { --bh: 56px; min-height: 0; padding: 0 16px; }
.cr-btn.small { --bh: 36px; min-height: 0; padding: 0 6px; }

/* 枠の絵（ui_panel）：横と縦の比が 3:2 に近い大きな枠だけに使う */
.cr-frame { border: 52px solid transparent; border-image: url("img/ui/ui_panel.webp") 100 fill / 52px stretch; background: none; box-shadow: none; filter: drop-shadow(0 16px 30px rgba(0,0,0,.6)); }
@media (max-height: 460px), (max-width: 600px) { .cr-frame { border-width: 30px; border-image-width: 30px; } }
.cr-frame.cr-orn::before, .cr-frame.cr-orn::after { display: none; }

/* ===== 小さなカード（CR.cardEl） ===== */
.cr-card { --w: 120px; --rc: var(--C-rar); position: relative; width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * .06); overflow: hidden; flex: none;
  background: #111; box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 0 calc(var(--w) * .02) var(--rc), 0 calc(var(--w)*.05) calc(var(--w)*.12) rgba(0,0,0,.55); }
.cr-card .art { position: absolute; inset: 0; background: center/cover no-repeat; }
.cr-card .ph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-head); font-size: calc(var(--w) * .3); color: rgba(255,255,255,.85); }
.cr-card .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--w)*.18) calc(var(--w)*.06) calc(var(--w)*.05); font-weight: 900; font-size: calc(var(--w) * .095); line-height: 1.15;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85) 55%); text-align: center; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-card .rr { position: absolute; top: calc(var(--w)*.05); right: calc(var(--w)*.05); font-family: var(--f-latin); font-weight: 900; font-size: calc(var(--w) * .085);
  padding: 1px calc(var(--w)*.04); border-radius: 4px; background: rgba(0,0,0,.6); color: var(--rc); letter-spacing: .06em; }
.cr-card .co { position: absolute; top: calc(var(--w)*.04); left: calc(var(--w)*.04); width: calc(var(--w)*.2); height: calc(var(--w)*.2); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #e9f6ff, #5ab2ff 45%, #13306e); font-weight: 900; font-size: calc(var(--w)*.12); color: #fff; text-shadow: 0 1px 2px #04224d; }
.cr-card.r-R { --rc: var(--R-rar); } .cr-card.r-SR { --rc: var(--SR-rar); } .cr-card.r-UR { --rc: var(--UR-rar); }
.cr-card.r-SR::after, .cr-card.r-UR::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%) -200% 0/250% 100% no-repeat; animation: cr-foil 3.6s linear infinite; }
@keyframes cr-foil { to { background-position: 250% 0; } }

/* ===== 顔の丸（CR.faceEl） ===== */
.cr-face { position: relative; border-radius: 50%; overflow: hidden; flex: none; border: 1.5px solid var(--fc, var(--line)); background: radial-gradient(circle at 50% 40%, var(--fb, #2a3360), #0c1024); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.cr-face img { position: absolute; max-width: none; }

/* ===== 色の札 ===== */
.cr-col { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 12px; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid currentColor; }
.cr-col::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.c-R { color: var(--R); } .c-B { color: var(--B); } .c-G { color: var(--G); } .c-P { color: var(--P); }

/* ===== 画面の切り替えの幕（CR.go） ===== */
#cr-curtain { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #121a36, #05060c 75%); transition: opacity .28s var(--e-in); }
#cr-curtain.on { opacity: 1; pointer-events: auto; }
#cr-curtain .ln { position: absolute; left: 50%; top: 50%; height: 1px; width: 0; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent); transition: width .45s var(--e-out); }
#cr-curtain.on .ln { width: 70vw; }

/* ===== 読み込み中（CR.loading） ===== */
#cr-loading { position: fixed; inset: 0; z-index: 8000; display: none; place-items: center; background: rgba(4,5,12,.72); backdrop-filter: blur(3px); }
#cr-loading.on { display: grid; }
#cr-loading .bx { display: grid; justify-items: center; gap: 14px; }
#cr-loading svg { width: 64px; height: 64px; animation: cr-spin 2.4s linear infinite; filter: drop-shadow(0 0 10px rgba(233,200,119,.45)); }
#cr-loading .tx { font-family: var(--f-head); font-weight: 700; letter-spacing: .3em; font-size: 13px; color: var(--gold-hi); }
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* ===== 知らせ（CR.toast）・小窓（CR.modal） ===== */
#cr-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 8500; opacity: 0; pointer-events: none;
  padding: 12px 22px; border-radius: 999px; background: rgba(10,14,30,.95); border: 1px solid var(--line); font-weight: 700; font-size: 14px; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .25s, transform .4s var(--e-out); }
#cr-toast.on { opacity: 1; transform: translate(-50%, 0); }
.cr-modal { position: fixed; inset: 0; z-index: 7000; display: grid; place-items: center; padding: var(--gut); background: rgba(3,4,10,.7); backdrop-filter: blur(4px);
  animation: cr-fade .25s var(--e-out) both; }
.cr-modal .cr-panel { width: min(560px, 100%); max-height: calc(100dvh - 2 * var(--gut)); overflow: auto; padding: 26px 24px 22px; animation: cr-pop .38s var(--e-back) both; }
.cr-modal .mt { font-family: var(--f-head); font-weight: 800; font-size: 20px; letter-spacing: .1em; text-align: center; color: var(--gold-hi); margin: 0 0 14px; }
.cr-modal .mb { font-size: 15px; line-height: 1.75; color: var(--ink); }
.cr-modal .mf { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.cr-modal.out { animation: cr-fade-out .2s var(--e-in) both; }
@keyframes cr-fade { from { opacity: 0; } }
@keyframes cr-fade-out { to { opacity: 0; } }
@keyframes cr-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* 動きを減らす設定の人 */
@media (prefers-reduced-motion: reduce) { .cr-page, .cr-modal .cr-panel { animation-duration: .01s; } .cr-card::after { animation: none; } }

/* スクロールバー */
.cr-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(233,200,119,.35) transparent; }
.cr-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.cr-scroll::-webkit-scrollbar-thumb { background: rgba(233,200,119,.35); border-radius: 3px; }

/* CRXFIT1106b プレプレに戻る（上の帯の右のはし） */
.cr-pp { flex: none; height: calc(var(--hdr) - 16px); min-width: calc(var(--hdr) - 16px); padding: 0 10px; border-radius: 999px; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 35%, #26305a, #0d1228); color: var(--gold-hi, #f7e3a6); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 800 13px/1 var(--f-head, sans-serif); letter-spacing: .06em; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.cr-pp svg { width: 18px; height: 18px; flex: none; }
.cr-pp span { display: none; }
.cr-pp.full span { display: inline; }
.cr-pp:not(.full) { padding: 0; width: calc(var(--hdr) - 16px); }
.cr-pp:hover { border-color: var(--gold); }
.cr-pp:active { transform: scale(.94); }

/* CRDECK30 11/6 狭い幅の上の帯：題（デッキを組む など）が プレプレに戻る の印に押されて切れないように、すき間・英字の小見出し・札を詰める */
@media (max-width: 480px) {
  .cr-header { gap: 6px; }
  .cr-header .cr-title { font-size: 16px; letter-spacing: .03em; gap: 6px; }
  .cr-header .cr-title small { display: none; }
  .cr-wallet { gap: 4px; }
  .cr-chip { gap: 3px; padding: 0 7px 0 3px; }
  .cr-chip .ic, .cr-chip > svg { width: 20px; height: 20px; }
  .cr-back, .cr-pp:not(.full) { width: 34px; height: 34px; min-width: 34px; }
  .cr-pp.full { height: 34px; padding: 0 8px; }
}
@media (max-width: 374px) { .cr-header .cr-title { font-size: 15px; letter-spacing: 0; } }