/* 色・文字・ボタンなどのトークンと、全画面で使う共通部品（contracts.md §6.6）。
   battle の hud.css もこのトークンを使う。名前は変えないこと。 */

:root {
  --c-bg: #141a3d;
  --c-bg-2: #0b0f26;
  --c-panel: #fffdf6;
  --c-panel-2: #eef3ff;
  --c-text: #1b1f3b;
  --c-text-dim: #6a6f8f;
  --c-text-inv: #ffffff;
  --c-accent: #ff6a2b;
  --c-accent-hi: #ffb347;
  --c-accent-2: #1d2a6b;
  --c-ice: #7fd8ff;
  --c-gold: #ffcc33;
  --c-danger: #ff3b5c;
  --c-ok: #33d17a;
  --c-hp: #3ee08f;
  --c-hp-low: #ff5050;
  --c-sp: #45b4ff;
  --c-special: #ff4fd8;
  --c-heart: #ff5c9a;
  --c-line: #1b1f3b;

  --r-N: #b9c0cf; --r-R: #4fa3ff; --r-SR: #c05cff; --r-L: #ffb21f; --r-J: #ff5f3a; --r-G: #fff27a; --r-M: #ff8fcf;

  --font-ui: 'M PLUS Rounded 1c', 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  --font-title: 'Dela Gothic One', 'M PLUS Rounded 1c', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --font-num: 'Dela Gothic One', 'M PLUS Rounded 1c', 'Hiragino Sans', sans-serif;
  --font-adv: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;

  --fs-xs: clamp(10px, 0.55vw + 0.45vh, 15px);
  --fs-s: clamp(11px, 0.65vw + 0.55vh, 17px);
  --fs-m: clamp(13px, 0.8vw + 0.65vh, 21px);
  --fs-l: clamp(16px, 1.1vw + 0.9vh, 30px);
  --fs-xl: clamp(22px, 1.8vw + 1.4vh, 52px);
  --fs-num: clamp(26px, 2.4vw + 1.8vh, 72px);

  --gap: clamp(6px, 0.6vw + 0.4vh, 18px);
  --radius: clamp(8px, 0.7vw, 16px);
  --shadow: 0 4px 0 rgba(11, 15, 38, 0.9), 0 10px 24px rgba(0, 0, 0, 0.35);
  --shadow-s: 0 3px 0 rgba(11, 15, 38, 0.9);
  --tap: 44px;
  --bw: clamp(2px, 0.18vw + 0.1vh, 4px);

  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --ruler-ticks:
    repeating-linear-gradient(90deg, rgba(27, 31, 59, 0.85) 0 2px, transparent 2px 50px),
    repeating-linear-gradient(90deg, rgba(27, 31, 59, 0.55) 0 1px, transparent 1px 10px);
  --stripe: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 0 14px, transparent 14px 28px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--c-bg-2); color: var(--c-text);
  font-family: var(--font-ui); font-size: var(--fs-m);
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; }
img { -webkit-user-drag: none; user-select: none; }

#app { position: fixed; inset: 0; overflow: hidden; background: var(--c-bg); }
#screens { position: absolute; inset: 0; z-index: 0; }
#layer-adv { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#layer-adv > * { pointer-events: auto; }
#layer-modal { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
#layer-modal > * { pointer-events: auto; }
#layer-toast { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 10px); z-index: 60; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }

.screen { position: absolute; inset: 0; overflow: hidden; }
.screen[hidden] { display: none !important; }
.screen.is-under { visibility: hidden; }

/* ---------- 画面切り替えのトランジション（定規が斜めに走るワイプ） ---------- */
#transition { position: absolute; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
#transition i { position: absolute; left: -30%; width: 160%; height: 22%; transform: translateX(-120%) skewX(-24deg);
  background: var(--c-accent); border-top: 4px solid var(--c-line); border-bottom: 4px solid var(--c-line); }
#transition i::after { content: ''; position: absolute; inset: 0; background: var(--ruler-ticks); background-size: 100% 30%; background-repeat: repeat-x; opacity: .55; }
#transition i:nth-child(1) { top: -2%; background: var(--c-accent); }
#transition i:nth-child(2) { top: 19%; background: var(--c-gold); }
#transition i:nth-child(3) { top: 40%; background: var(--c-accent-2); }
#transition i:nth-child(4) { top: 61%; background: var(--c-ice); }
#transition i:nth-child(5) { top: 82%; background: var(--c-accent); }
#transition b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  width: 18vmin; height: 18vmin; border-radius: 50%; background: #fff; border: 5px solid var(--c-line);
  box-shadow: var(--shadow); }
#transition b::after { content: '15'; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-title); font-size: 7vmin; color: var(--c-accent); }
#transition.is-in i { animation: tr-in .32s cubic-bezier(.6, .05, .4, 1) forwards; }
#transition.is-in i:nth-child(2) { animation-delay: .03s; } #transition.is-in i:nth-child(3) { animation-delay: .06s; }
#transition.is-in i:nth-child(4) { animation-delay: .09s; } #transition.is-in i:nth-child(5) { animation-delay: .12s; }
#transition.is-in b { animation: tr-badge .3s .14s ease-out forwards; }
#transition.is-out i { transform: translateX(0) skewX(-24deg); animation: tr-out .32s cubic-bezier(.6, .05, .4, 1) forwards; }
#transition.is-out i:nth-child(2) { animation-delay: .03s; } #transition.is-out i:nth-child(3) { animation-delay: .06s; }
#transition.is-out i:nth-child(4) { animation-delay: .09s; } #transition.is-out i:nth-child(5) { animation-delay: .12s; }
#transition.is-out b { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: tr-badge-out .2s ease-in forwards; }
#transition.is-fade { background: #000; animation: tr-fade .5s ease forwards; }
@keyframes tr-in { from { transform: translateX(-120%) skewX(-24deg); } to { transform: translateX(0) skewX(-24deg); } }
@keyframes tr-out { from { transform: translateX(0) skewX(-24deg); } to { transform: translateX(120%) skewX(-24deg); } }
@keyframes tr-badge { from { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-90deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
@keyframes tr-badge-out { to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes tr-fade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- ボタン ---------- */
.btn {
  --b-bg: linear-gradient(180deg, #ffffff 0%, #e9eefc 100%);
  --b-fg: var(--c-text);
  --b-edge: #9aa6cc;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: var(--tap); min-width: var(--tap); padding: .45em 1.2em;
  border: var(--bw) solid var(--c-line); border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg);
  font: 800 var(--fs-m) / 1.1 var(--font-ui); letter-spacing: .04em;
  box-shadow: 0 5px 0 var(--c-line), inset 0 -4px 0 var(--b-edge), inset 0 3px 0 rgba(255, 255, 255, .7);
  cursor: pointer; transform: translateY(0); transition: transform .08s, box-shadow .08s, filter .15s;
  white-space: nowrap; text-shadow: none; outline: none;
}
.btn:hover { filter: brightness(1.08) saturate(1.1); transform: translateY(-2px); box-shadow: 0 7px 0 var(--c-line), inset 0 -4px 0 var(--b-edge), inset 0 3px 0 rgba(255,255,255,.7); }
.btn:active, .btn.is-pressed { transform: translateY(4px); box-shadow: 0 1px 0 var(--c-line), inset 0 -2px 0 var(--b-edge); filter: brightness(.96); }
.btn:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; }
.btn[disabled], .btn.is-disabled { filter: grayscale(.9) brightness(.85); opacity: .65; cursor: not-allowed; transform: none; }
.btn--primary { --b-bg: linear-gradient(180deg, #ffb347 0%, #ff6a2b 55%, #f04a1a 100%); --b-fg: #fff; --b-edge: #b8320c;
  text-shadow: 0 2px 0 rgba(120, 30, 0, .6); }
.btn--blue { --b-bg: linear-gradient(180deg, #6fd0ff 0%, #2f8cff 60%, #1f63e0 100%); --b-fg: #fff; --b-edge: #133f99; text-shadow: 0 2px 0 rgba(0, 30, 100, .6); }
.btn--gold { --b-bg: linear-gradient(180deg, #fff3a0 0%, #ffcc33 55%, #f0a400 100%); --b-fg: #5a3500; --b-edge: #b07400; }
.btn--danger { --b-bg: linear-gradient(180deg, #ff8fa3 0%, #ff3b5c 60%, #d0213f 100%); --b-fg: #fff; --b-edge: #8e1027; text-shadow: 0 2px 0 rgba(90, 0, 20, .6); }
.btn--ghost { --b-bg: rgba(255, 255, 255, .12); --b-fg: #fff; --b-edge: rgba(0, 0, 0, .2); border-color: rgba(255, 255, 255, .7); box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.btn--icon { padding: 0; width: var(--tap); height: var(--tap); border-radius: 50%; font-size: var(--fs-l); }
.btn--icon img { width: 70%; height: 70%; object-fit: contain; }
.btn--s { font-size: var(--fs-s); padding: .35em .9em; min-height: 36px; }
.btn--l { font-size: var(--fs-l); padding: .5em 1.6em; }
.btn--wide { width: 100%; }
.btn .btn-sub { font-size: .7em; font-weight: 700; opacity: .85; }
.btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); background-size: 250% 100%; background-position: 130% 0; }
.btn:hover::after { animation: btn-shine .6s ease-out; }
@keyframes btn-shine { from { background-position: 130% 0; } to { background-position: -40% 0; } }
.btn.is-pulse { animation: btn-pulse 1.2s ease-in-out infinite; }
@keyframes btn-pulse { 0%, 100% { box-shadow: 0 5px 0 var(--c-line), 0 0 0 0 rgba(255, 180, 60, .7), inset 0 -4px 0 var(--b-edge); } 50% { box-shadow: 0 5px 0 var(--c-line), 0 0 0 10px rgba(255, 180, 60, 0), inset 0 -4px 0 var(--b-edge); } }

/* ---------- パネル ---------- */
.panel {
  position: relative; background: var(--c-panel); color: var(--c-text);
  border: var(--bw) solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--gap);
}
.panel--dark { background: rgba(16, 22, 58, .92); color: #fff; border-color: rgba(255, 255, 255, .85); }
.panel--ruler::before { content: ''; position: absolute; left: 10px; right: 10px; top: 0; height: 9px;
  background: var(--ruler-ticks); background-size: 100% 100%; opacity: .5; pointer-events: none; }
.panel-title { margin: 0 0 .4em; font: 900 var(--fs-l)/1.2 var(--font-title); letter-spacing: .03em; }
.label-tag { display: inline-block; padding: .15em .7em; border-radius: 6px; transform: skewX(-12deg);
  background: var(--c-accent-2); color: #fff; font-weight: 800; font-size: var(--fs-s); }
.label-tag > span { display: inline-block; transform: skewX(12deg); }

.num { font-family: var(--font-num); font-weight: 400; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.dim { color: var(--c-text-dim); }
.hidden { display: none !important; }

/* レア度のバッジ */
.rarity { display: inline-grid; place-items: center; min-width: 2.4em; height: 1.6em; padding: 0 .45em; border-radius: 5px;
  font: 400 var(--fs-xs)/1 var(--font-title); color: #fff; border: 2px solid var(--c-line); text-shadow: 0 1px 0 #000;
  background: var(--r-N); transform: skewX(-10deg); white-space: nowrap; flex: none; }
.rarity[data-r="R"] { background: var(--r-R); } .rarity[data-r="SR"] { background: linear-gradient(135deg, #e09bff, #8a3dff); }
.rarity[data-r="L"] { background: linear-gradient(135deg, #ffe066, #ff9d00); color: #fff; }
.rarity[data-r="J"] { background: linear-gradient(135deg, #ff9a6b, #e8261e); }
.rarity[data-r="G"] { background: linear-gradient(135deg, #ff7aa8, #ffd36b, #7affc8, #7ab8ff, #d67aff); color: #222; text-shadow: 0 1px 0 #fff; }
.rarity[data-r="M"] { background: linear-gradient(135deg, #ffd1ea, #ff7bc0); }

/* 代わりの表示（画像がまだないとき。contracts.md §7.3） */
.ph { position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; font-weight: 900; text-align: center; }
.ph-portrait { width: 100%; height: 100%; border-radius: 40% 40% 12% 12% / 22% 22% 6% 6%;
  background: linear-gradient(180deg, var(--ph-c, #888) 0%, var(--ph-c2, #444) 100%); border: 3px solid rgba(255,255,255,.85);
  box-shadow: inset 0 -20px 40px rgba(0,0,0,.25); }
.ph-portrait::before { content: ''; position: absolute; left: 50%; top: 6%; width: 46%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: rgba(255,255,255,.28); border: 3px solid rgba(255,255,255,.6); }
.ph-portrait > span { position: absolute; bottom: 8%; left: 0; right: 0; font-size: clamp(12px, 1.4vw, 26px); text-shadow: 0 2px 0 rgba(0,0,0,.4); writing-mode: horizontal-tb; }
.ph-face { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 45%), var(--ph-c, #888);
  border: 2px solid var(--c-line); font-family: var(--font-title); font-size: 1.1em; }
.ph-badge { width: 100%; height: 100%; border-radius: 22%; background: linear-gradient(180deg, var(--ph-c, #5a6acf), var(--ph-c2, #2c3a92));
  border: 2px solid var(--c-line); font-size: .8em; line-height: 1; letter-spacing: -.05em; padding: 2px; }
.ph-sticker { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), transparent 40%), var(--ph-c, #ccc);
  border: 4px solid #fff; box-shadow: 0 0 0 2px var(--c-line), 0 4px 8px rgba(0,0,0,.25); font-size: .7em; padding: 8%; line-height: 1.1; color: #222; text-shadow: 0 1px 0 #fff; }
.ph-still { width: 100%; height: 100%; background: #000; color: #ddd; font-size: var(--fs-l); letter-spacing: .1em; }

/* ---------- モーダル・トースト ---------- */
.modal-back { position: absolute; inset: 0; background: rgba(5, 8, 25, .62); display: grid; place-items: center; padding: 16px;
  animation: fade-in .18s ease; backdrop-filter: blur(2px); }
.modal { width: min(560px, 92vw); max-height: 88vh; overflow: auto; text-align: center; animation: pop-in .26s cubic-bezier(.2, 1.4, .4, 1); }
.modal .panel-title { color: var(--c-accent-2); }
.modal.panel--ruler { padding-top: calc(var(--gap) + 12px); }   /* 見出しを上の目盛り飾りの下へ */
.modal-body { margin: .4em 0 1em; line-height: 1.6; font-weight: 700; }
.modal-btns { display: flex; gap: var(--gap); justify-content: center; flex-wrap: wrap; }
.toast { padding: .5em 1.2em; border-radius: 999px; background: rgba(16, 22, 58, .94); color: #fff; font-weight: 800; font-size: var(--fs-s);
  border: 2px solid #fff; box-shadow: var(--shadow-s); animation: toast-in .25s ease, toast-out .3s ease forwards; animation-delay: 0s, var(--life, 2.2s); max-width: 90vw; }
.toast--error { background: #a0102c; }
.toast--good { background: #0f7a45; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.7) rotate(-3deg); } }

/* 入手のポップアップ */
.gain-pop { display: flex; flex-direction: column; align-items: center; gap: .7em; isolation: isolate; padding-top: .6em; }
.gain-pop .gain-name { position: relative; z-index: 1; padding: .1em .7em; border-radius: 12px; background: var(--c-panel); box-shadow: 0 0 0 6px var(--c-panel); }
.gain-pop .gain-icon { width: clamp(64px, 12vmin, 140px); height: clamp(64px, 12vmin, 140px); animation: gain-spin .7s cubic-bezier(.2, 1.5, .4, 1); }
.gain-pop .gain-icon img { width: 100%; height: 100%; object-fit: contain; }
.gain-pop .gain-name { font: 900 var(--fs-l)/1.2 var(--font-title); }
.gain-burst { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(255, 204, 51, .3) 0 10deg, transparent 10deg 20deg);
  animation: spin 8s linear infinite; z-index: -1; pointer-events: none; border-radius: 50%; }
@keyframes gain-spin { from { transform: scale(0) rotate(-180deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 縦長の案内 ---------- */
#rotate { position: absolute; inset: 0; z-index: 90; display: none; place-items: center; padding: 24px;
  background: radial-gradient(circle at 50% 30%, #2a3a8a, var(--c-bg-2)); color: #fff; text-align: center; }
html[data-orient="portrait"] #rotate { display: grid; }
.rotate-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rotate-phone { width: 70px; height: 120px; border: 5px solid #fff; border-radius: 14px; position: relative; animation: rot 2.4s ease-in-out infinite;
  display: grid; place-items: center; font: 400 26px var(--font-title); color: var(--c-accent); background: rgba(255,255,255,.08); }
@keyframes rot { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.rotate-title { font: 400 22px/1.4 var(--font-title); margin: 6px 0 0; }
.rotate-sub { font-size: 14px; opacity: .8; margin: 0 0 8px; }

/* ---------- 起動画面 ---------- */
#boot { position: absolute; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(circle at 50% 40%, #2a3a8a 0%, var(--c-bg-2) 70%); color: #fff; transition: opacity .4s; }
#boot.is-done { opacity: 0; pointer-events: none; }
.boot-logo { font: 400 clamp(28px, 5vw, 64px)/1 var(--font-title); color: #fff; -webkit-text-stroke: 2px var(--c-accent); text-shadow: 0 5px 0 var(--c-accent-2); }
.boot-bar { width: min(420px, 60vw); height: 14px; border: 3px solid #fff; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.1); }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--ruler-ticks), linear-gradient(90deg, var(--c-accent-hi), var(--c-accent)); background-size: 100% 60%, 100% 100%; background-repeat: repeat-x; transition: width .2s; }
.boot-msg { font-weight: 800; opacity: .85; }

/* ---------- デバッグ ---------- */
#debug-hud { position: absolute; right: 4px; bottom: 4px; z-index: 99; font: 11px/1.3 monospace; color: #0f0; background: rgba(0,0,0,.7);
  padding: 4px 6px; border-radius: 4px; pointer-events: none; white-space: pre; }

/* 汎用のアニメーション */
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shine-x { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes pop-up { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }