:root {
  --bg: #0f1226;
  --panel: #1a1f3d;
  --panel2: #232a52;
  --line: #2f3868;
  --text: #f3f5ff;
  --muted: #9aa3cf;
  --accent: #ffcb05;
  --accent2: #3d7dca;
  --red: #ee1515;
  --good: #52d273;
  --radius: 16px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "M PLUS Rounded 1c", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
img.px { image-rendering: pixelated; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ————— ヘッダーとタブ ————— */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(6px + var(--safe-t)) calc(12px + var(--safe-r)) 6px calc(12px + var(--safe-l)); background: linear-gradient(90deg, #cc0000, #ee1515 60%, #ff5a36); box-shadow: 0 2px 12px #0006; z-index: 5; }
.brand { background: none; border: 0; font-weight: 800; font-size: 17px; letter-spacing: .02em; padding: 4px 0; }
.brand b { color: var(--accent); text-shadow: 0 2px 0 #3b4cca; }
.wallet { display: flex; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #0005; border-radius: 999px; padding: 4px 10px; font-size: 14px; white-space: nowrap; }
.chip .ic { width: 16px; height: 16px; color: var(--accent); }
.coin-chip { padding-right: 3px; }
.coin-chip.on { box-shadow: 0 0 0 2px var(--accent); }
.chip-plus { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; border: 0; border-radius: 50%; background: var(--accent); color: #1b1b1b; box-shadow: 0 2px 0 #b38b00; }
.chip-plus .ic { width: 16px; height: 16px; color: #1b1b1b; }
.chip-plus:active { transform: translateY(1px); box-shadow: none; }
.net-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px #0004, 0 0 8px var(--good); }
.net-dot.off { background: #ffab40; box-shadow: 0 0 0 3px #0004; }

/* 線画アイコン */
.ic { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.ic svg { width: 100%; height: 100%; }
.coin-label { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.coin-label .ic { color: var(--accent); }
.with-ic { display: inline-flex; align-items: center; gap: 6px; }
h2 .ic, h3 .ic { margin-right: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

.view { flex: 1; overflow: auto; padding: 12px calc(12px + var(--safe-r)) 16px calc(12px + var(--safe-l)); -webkit-overflow-scrolling: touch; }
.view.full { padding: 0; overflow: hidden; position: relative; }

/* 浮いたタブバー：丸いガラスの台、選択中はアイコンが持ち上がって色の玉に乗る */
.tabbar { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l)); padding: 6px 4px; border-radius: 24px; background: linear-gradient(180deg, rgba(40, 47, 92, 0.92), rgba(18, 22, 46, 0.96)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 5; }
.tabbar button { position: relative; background: none; border: 0; padding: 4px 0 2px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; transition: color 0.2s ease; }
.tabbar button .ic { width: 42px; height: 34px; padding: 6px 10px; border-radius: 14px; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.2s ease, box-shadow 0.2s ease; }
.tabbar button em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.tabbar button.on { color: #fff; }
.tabbar button.on .ic { transform: translateY(-9px); color: #1b1b1b; background: linear-gradient(180deg, #ffe066, var(--accent)); box-shadow: 0 8px 16px rgba(255, 203, 5, 0.35), 0 0 0 4px rgba(15, 18, 38, 0.95); }
.tabbar button.on em { transform: translateY(-4px); color: var(--accent); }
.tabbar button:active .ic { transform: translateY(-4px) scale(0.94); }
body.playing .tabbar, body.playing .topbar { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .tabbar { width: min(680px, calc(100% - 20px - var(--safe-l) - var(--safe-r))); margin: 0 auto calc(6px + var(--safe-b)); padding: 4px; border-radius: 18px; }
  .tabbar button { flex-direction: row; justify-content: center; gap: 4px; padding: 2px 0; }
  .tabbar button .ic { width: 34px; height: 28px; padding: 5px 8px; border-radius: 11px; }
  .tabbar button.on .ic { transform: none; box-shadow: 0 4px 10px rgba(255, 203, 5, 0.3); }
  .tabbar button.on em { transform: none; }
}

h2 { margin: 6px 0 10px; font-size: 18px; }
h3 { margin: 14px 0 8px; font-size: 15px; color: var(--muted); }
p.note { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 6px 0; }

.seg { display: flex; background: var(--panel); border-radius: 999px; padding: 4px; gap: 4px; margin-bottom: 12px; }
.seg button { flex: 1; border: 0; background: none; padding: 8px 6px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--accent); color: #222; }
.seg-icons button { display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; min-width: 0; padding-left: 4px; padding-right: 4px; }
.seg-icons button small { font-size: 11px; opacity: 0.7; font-weight: 700; }
@media (max-width: 420px) { .seg-icons button .ic { display: none; } .seg-icons button small { font-size: 10px; } }
.seg.mini { margin: 0; flex: none; }
.seg.mini button { padding: 5px 10px; font-size: 12px; flex: none; }

.btn { border: 0; border-radius: 12px; padding: 10px 14px; font-weight: 800; background: var(--panel2); }
.btn.primary { background: var(--accent); color: #1b1b1b; }
.btn.red { background: var(--red); }
.btn.blue { background: var(--accent2); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn:disabled { opacity: .45; cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }

/* ————— 台の一覧 ————— */
.machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.machine { position: relative; text-align: left; border: 0; border-radius: var(--radius); padding: 14px; background: linear-gradient(160deg, var(--panel2), var(--panel)); overflow: hidden; min-height: 150px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 18px #0005; }
.machine::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(#fff2, transparent 70%); }
.machine .title { font-weight: 800; font-size: 17px; }
.machine .sub { color: var(--muted); font-size: 12px; }
.machine .price { margin-top: auto; font-weight: 800; }
.machine .badge { position: absolute; top: 10px; right: 10px; font-size: 11px; background: var(--good); color: #0b2; color: #04210d; border-radius: 999px; padding: 3px 8px; font-weight: 800; }
.machine .sprites { display: flex; gap: 0; margin: 2px 0; }
.machine .sprites img { width: 44px; height: 44px; margin-right: -8px; image-rendering: pixelated; filter: drop-shadow(0 2px 2px #0008); }
.machine[data-mode="real"] { background: linear-gradient(160deg, #1f3b2d, #16243a); }
.machine[data-mode="machine"] { background: linear-gradient(160deg, #10364a, #1a1f3d); }
.machine { cursor: pointer; }
.machine:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.machine .mech { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.machine .mech span { display: inline-flex; align-items: center; gap: 3px; }
.machine .badge { right: 48px; }
.info-btn { position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #0006; color: #fff; }
.info-btn .ic { width: 18px; height: 18px; }

/* アームの強さ */
.arm-meter { background: #0004; border-radius: 12px; padding: 7px 9px; font-size: 12px; }
.arm-head { display: flex; align-items: center; gap: 5px; }
.arm-head .ic { color: #9be7ff; }
.arm-k { color: var(--muted); font-weight: 700; }
.arm-v { font-weight: 800; }
.arm-n { margin-left: auto; font-family: "Bebas Neue", sans-serif; font-size: 16px; letter-spacing: 0.04em; }
.arm-bar { position: relative; height: 7px; margin: 5px 0 4px; border-radius: 999px; background: #0007; overflow: hidden; }
.arm-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #4fc3f7, #7ee081 50%, #ffcb05 85%, #ff5a36); transition: width 0.5s ease; }
.arm-ceil { position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: #fff; opacity: 0.8; }
.arm-foot { color: var(--muted); font-size: 11px; }
.arm-meter.is-max { background: linear-gradient(90deg, rgba(255, 203, 5, 0.25), rgba(255, 90, 54, 0.25)); box-shadow: inset 0 0 0 1px rgba(255, 203, 5, 0.6); }
.arm-meter.is-max .arm-v { color: var(--accent); }
.arm-meter.is-max .arm-foot { color: #ffe082; font-weight: 700; }
.arm-meter.compact { padding: 6px 8px; }
.minfo h3 { display: flex; align-items: center; }
.rate-rows { display: flex; flex-direction: column; gap: 6px; }
.rate-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rate-row > b { width: 56px; text-align: right; font-family: "Bebas Neue", sans-serif; font-size: 17px; letter-spacing: 0.04em; font-weight: 400; }
.rate-row > .grow { color: var(--muted); }
.rate-bar { width: 32%; height: 7px; border-radius: 999px; background: #0006; overflow: hidden; }
.rate-bar i { display: block; height: 100%; max-width: 100%; border-radius: 999px; }
.rar { font-weight: 800; color: var(--rar); }
.rate-row .rar { width: 40px; font-size: 12px; }
.boost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.boost-grid > div { background: #0004; border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.boost-grid b { font-family: "Bebas Neue", sans-serif; font-size: 22px; font-weight: 400; }
.boost-grid small { color: var(--muted); font-size: 10px; }

/* カードのレアリティ */
.tier { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 1px 6px; border-radius: 6px; background: var(--tier); color: #141414; font-family: "Bebas Neue", sans-serif; font-size: 15px; letter-spacing: 0.06em; line-height: 1.25; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.tier-SAR, .tier-UR { background: linear-gradient(120deg, #fff6b0, var(--tier) 40%, #ffb300 60%, #fff6b0); background-size: 200% 100%; animation: tier-shine 2.4s linear infinite; }
.tier-SR, .tier-AR { background: linear-gradient(120deg, #ffd1f0, var(--tier), #b3e5ff, var(--tier)); background-size: 200% 100%; animation: tier-shine 3s linear infinite; }
.tier-S, .tier-SSR { background: linear-gradient(120deg, #ffffff, var(--tier) 35%, #e0f7ff 55%, var(--tier) 75%, #ffffff); background-size: 200% 100%; animation: tier-shine 2.6s linear infinite; }
@keyframes tier-shine { to { background-position: -200% 0; } }
.machine.themed { background: linear-gradient(160deg, color-mix(in srgb, var(--card-a) 32%, var(--card-b)), var(--card-b) 70%); box-shadow: 0 6px 18px #0005, inset 0 0 0 1px color-mix(in srgb, var(--card-a) 45%, transparent); }
.machine .place { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--card-a); }

/* ————— プレイ画面（暗いガラスの HUD・左スティック・右の大ボタン） ————— */
.play {
  --p-panel: rgba(8, 12, 16, 0.72);
  --p-line: rgba(242, 245, 247, 0.14);
  --p-muted: #8b97a3;
  --p-ink: #f2f5f7;
  --p-hot: #ff4d2e;
  --p-hot-soft: #ff8a6a;
  --p-lime: #d6ff4a;
  --p-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --p-num: "Bebas Neue", "M PLUS Rounded 1c", sans-serif;
  position: absolute; inset: 0; color: var(--p-ink); user-select: none; -webkit-user-select: none;
}
.play canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.play button { font-family: inherit; color: inherit; }
.play [hidden] { display: none !important; }

/* 上：もどる・台名・つかみ方 ／ 右に数字 */
.hud-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: calc(1rem + var(--safe-t)) calc(1.25rem + var(--safe-r)) 0 calc(1.25rem + var(--safe-l)); pointer-events: none; background: linear-gradient(180deg, rgba(7, 9, 12, 0.55) 0%, transparent 100%); }
.hud-left { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; min-width: 0; }
.hud-row { display: flex; align-items: stretch; gap: 0.45rem; pointer-events: auto; min-width: 0; max-width: 100%; }
.hud-btn { padding: 0 0.85rem; font-size: 0.78rem; color: var(--p-muted); border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hud-btn.icon { min-width: 2.7rem; font-size: 1rem; color: var(--p-ink); }
.hud-btn:active { transform: scale(0.95); }
.machine-btn { display: flex; flex-direction: column; align-items: flex-start; min-width: 6.5rem; padding: 0.5rem 0.85rem; text-align: left; border: 1px solid color-mix(in srgb, var(--machine-accent) 45%, var(--p-line)); border-radius: 12px; background: var(--p-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 0; }
.machine-btn:active { transform: scale(0.97); }
.machine-btn-label { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--p-muted); }
.machine-btn-name { margin-top: 0.15rem; font-size: 0.92rem; font-weight: 800; color: var(--machine-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mechbar { display: flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--p-line); border-radius: 999px; background: var(--p-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: auto; }
.mechbar button { display: flex; align-items: center; gap: 0.25rem; border: 0; background: transparent; color: var(--p-muted); border-radius: 999px; padding: 0.35rem 0.65rem; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.mechbar button.on { background: rgba(214, 255, 74, 0.16); color: var(--p-lime); }
.mechbar button:disabled:not(.on) { opacity: 0.4; }

.hud-stats { display: flex; gap: 0.55rem; pointer-events: none; }
.play .stat { min-width: 4.3rem; padding: 0.5rem 0.75rem; border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: right; }
.play .stat-label { display: block; font-size: 0.62rem; letter-spacing: 0.12em; color: var(--p-muted); }
.play .stat-value { display: block; margin-top: 0.15rem; font-family: var(--p-num); font-size: 1.7rem; font-weight: 400; line-height: 1; }
.stat-time.is-urgent { border-color: rgba(255, 77, 46, 0.6); }
.stat-time.is-urgent .stat-value { color: var(--p-hot-soft); animation: time-blink 0.5s ease-in-out infinite; }
@keyframes time-blink { 50% { opacity: 0.45; } }

/* 真ん中上：いまの案内 */
.predict { position: absolute; left: 50%; top: calc(3.7rem + var(--safe-t)); z-index: 2; transform: translateX(-50%); padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(0, 60, 72, 0.78); border: 1px solid rgba(128, 222, 234, 0.4); color: #b2ebf2; font-size: 0.76rem; font-weight: 700; white-space: nowrap; pointer-events: none; }

/* 下の真ん中：視点・技 */
.cam-tools { position: absolute; left: 50%; bottom: calc(1.1rem + var(--safe-b)); z-index: 3; transform: translateX(-50%); display: flex; gap: 0.4rem; }
.cam-btn, .tilt-btn { padding: 0.5rem 1rem; border-radius: 999px; background: var(--p-panel); border: 1px solid var(--p-line); box-shadow: inset 0 0 0 3px rgba(214, 255, 74, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--p-lime); font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.cam-btn, .tilt-btn { display: inline-flex; align-items: center; gap: 6px; }
.cam-btn .ic, .tilt-btn .ic { width: 16px; height: 16px; }
.cam-btn:active, .tilt-btn:active { transform: scale(0.95); }
.tilt-btn { color: var(--p-muted); }
.tilt-btn.on { color: #141a06; background: var(--p-lime); border-color: transparent; }
.machine-btn-label { display: inline-flex; align-items: center; gap: 4px; }
.machine-btn-label .ic { width: 12px; height: 12px; }
.hud-btn.icon { display: grid; place-items: center; }
.hud-btn.icon .ic { width: 20px; height: 20px; }
.hud-arm { pointer-events: auto; width: 11.5rem; padding: 0; border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: left; }
.hud-arm .arm-meter { background: transparent; }
.hud-arm .arm-meter.is-max { background: linear-gradient(90deg, rgba(255, 203, 5, 0.25), rgba(255, 90, 54, 0.25)); }
.no-chat .chat-rail { display: none; }
.no-particles .fx-confetti, .no-particles .gf-confetti, .no-particles .gf-burst, .no-particles .cf-sparks { display: none !important; }
.skills { position: absolute; left: 50%; bottom: calc(3.9rem + var(--safe-b)); z-index: 3; transform: translateX(-50%); display: flex; gap: 0.4rem; max-width: calc(100vw - 2 * (9.2rem + 2.2rem)); overflow-x: auto; padding: 0.3rem; scrollbar-width: none; }
.skills::-webkit-scrollbar { display: none; }
.skill { position: relative; width: 58px; min-width: 58px; height: 64px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--type, #fff) 70%, transparent); background: var(--p-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--type, #fff) 35%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; padding: 2px; overflow: hidden; transition: transform 0.1s ease; }
.skill:active:not(:disabled) { transform: scale(0.92); }
.skill img { width: 40px; height: 40px; image-rendering: pixelated; margin-bottom: -4px; }
.skill > span:not(.count):not(.cd):not(.ic):not(.item-ic) { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill .item-ic, .skill .skill-ic { width: 30px; height: 30px; margin: 2px 0; }
.skill .skill-ic { color: #80deea; }
.skill .count { position: absolute; top: 2px; right: 4px; font-size: 11px; font-family: var(--p-num); letter-spacing: 0.04em; }
.skill .cd { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; font-family: var(--p-num); font-size: 18px; }
.skill:disabled { opacity: 0.55; }

/* 観戦チャット */
.chat-rail { position: absolute; right: calc(1rem + var(--safe-r)); bottom: calc(8.8rem + var(--safe-b)); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; max-width: min(14rem, 42vw); pointer-events: none; }
.chat-bubble { padding: 0.42rem 0.7rem; border-radius: 12px 12px 4px 12px; background: rgba(12, 16, 22, 0.82); border: 1px solid var(--p-line); font-size: 0.75rem; font-weight: 700; line-height: 1.35; opacity: 0; transform: translateY(12px) scale(0.86); animation: chat-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.chat-bubble.out { animation: chat-out 0.22s ease forwards; }
@keyframes chat-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes chat-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px) scale(0.9); } }

/* 下：スティックとボタン */
.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 0 calc(1.25rem + var(--safe-r)) calc(1.25rem + var(--safe-b)) calc(1.25rem + var(--safe-l)); background: linear-gradient(0deg, rgba(7, 9, 12, 0.85) 0%, transparent 100%); pointer-events: none; }
.hud-bottom > * { pointer-events: auto; }
.joystick { position: relative; width: 9.2rem; height: 9.2rem; border-radius: 50%; touch-action: none; transition: opacity 0.2s ease; }
.joy-base { position: relative; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(40, 48, 58, 0.95) 0%, rgba(14, 18, 24, 0.96) 70%), #121820; border: 1px solid var(--p-line); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.04), var(--p-shadow); transition: border-color 0.15s ease; }
.joy-cross { position: absolute; inset: 18%; border-radius: 50%; background: linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0.08) 54%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0.08) 54%, transparent 54%); pointer-events: none; }
.joy-stick { position: absolute; left: 50%; top: 50%; width: 3.35rem; height: 3.35rem; margin: -1.675rem 0 0 -1.675rem; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #6a7686 0%, #2a323c 55%, #151a20 100%); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); will-change: transform; pointer-events: none; }
.joy-label { position: absolute; left: 50%; top: -1.35rem; transform: translateX(-50%); font-size: 0.64rem; letter-spacing: 0.06em; white-space: nowrap; color: var(--p-muted); pointer-events: none; }
.play.stick-used .joy-label { display: none; }
.joystick.is-held .joy-base { border-color: rgba(214, 255, 74, 0.5); }
.joystick.is-held .joy-stick { background: radial-gradient(circle at 35% 28%, #8a96a6 0%, #3a434e 55%, #1a2027 100%); }
.joystick.is-disabled { opacity: 0.45; pointer-events: none; }

/* 台のポケモン：カーソルを合わせた時の小さなカード */
.mon-hover-wrap { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }
.mon-hover { display: flex; gap: 0.6rem; align-items: center; min-width: 13rem; max-width: 17rem; padding: 0.55rem 0.8rem 0.55rem 0.5rem; border-radius: 14px; background: rgba(12, 16, 22, 0.9); border: 1px solid var(--p-line); box-shadow: var(--p-shadow); font-size: 0.78rem; }
.mon-hover img { width: 56px; height: 56px; image-rendering: pixelated; flex: none; }
.mon-hover-name { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.2rem; }
.mon-hover-name b { font-size: 0.95rem; }
.mon-hover-kv { display: flex; gap: 0.7rem; margin-top: 0.3rem; color: var(--p-muted); }
.mon-hover-kv b { color: var(--p-ink); }
.mon-hover small { display: block; margin-top: 0.25rem; color: #80deea; font-size: 0.66rem; }
.got-tag { margin-left: 0.3rem; padding: 1px 6px; border-radius: 999px; background: rgba(82, 210, 115, 0.2); color: var(--good); font-size: 10px; font-weight: 800; vertical-align: middle; }

/* 台のポケモン：くわしい情報カード（3D） */
.mon-3d { position: relative; margin-top: 12px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #2c3566 0%, #141834 75%); border: 1px solid var(--line); }
.mon-3d-canvas { display: block; width: 100%; height: min(42vh, 300px); touch-action: none; cursor: grab; }
.mon-3d-canvas:active { cursor: grabbing; }
.mon-3d-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; pointer-events: none; }
.mon-3d-bar { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; }
.mon-3d-bar small { color: var(--muted); font-size: 11px; }
.mon-3d-bar .btn { pointer-events: auto; background: #0006; }
.mon-3d-bar .btn.on { background: var(--accent); color: #1b1b1b; border-color: transparent; }
.mon-3d-bar .view-seg { pointer-events: auto; background: #0008; }
.mon-3d-canvas.is-2d, .body-preview-canvas.is-2d { cursor: default; }
.mon-sub { margin-left: 8px; color: var(--muted); font-weight: 600; font-size: 12px; }
.mon-lift { margin-top: 6px; }
.mon-lift-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-top: 4px; border-radius: 10px; background: var(--panel2); font-size: 13px; }
.mon-lift-row.ok b { color: var(--good); }
.mon-lift-row.risky b { color: var(--accent); }
.mon-lift-row.ng b { color: #ff7a6a; }
.mon-stats { position: relative; display: grid; gap: 5px; }
.mon-stat { display: grid; grid-template-columns: 5.2em 1fr 2.4em; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mon-stat b { color: var(--text); text-align: right; font-family: var(--p-num); font-size: 15px; letter-spacing: 0.04em; }
.mon-stat-bar { height: 7px; border-radius: 999px; background: var(--panel2); overflow: hidden; }
.mon-stat-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #52d273, #ffcb05); }
.mon-stat.total { margin-top: 2px; padding-top: 5px; border-top: 1px solid var(--line); }
.mon-stats.locked .mon-stat-bar i { width: 55%; background: repeating-linear-gradient(90deg, #ffffff22 0 6px, transparent 6px 10px); }
.mon-stats.locked .mon-stat { filter: blur(1.5px); opacity: 0.6; }
.mon-lock-note { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 0 16px; text-align: center; font-size: 13px; font-weight: 800; color: var(--text); text-shadow: 0 2px 8px #000c; }

/* 右端：拡大・縮小（ピンチ・ホイールでもできる） */
.zoom-tools { position: absolute; right: calc(1rem + var(--safe-r)); top: 50%; z-index: 3; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.4rem; }
.zoom-btn { min-height: 2.7rem; font-size: 1.25rem; font-weight: 800; line-height: 1; touch-action: manipulation; }

.grab-btn { width: 6.4rem; height: 6.4rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: radial-gradient(circle at 35% 28%, #ff7a5c 0%, var(--p-hot) 42%, #b81f08 100%); box-shadow: 0 0 0 6px rgba(255, 77, 46, 0.12), 0 16px 36px rgba(255, 77, 46, 0.35); display: grid; place-content: center; gap: 0.2rem; color: #fff; transition: transform 0.1s ease, filter 0.1s ease, opacity 0.2s ease; touch-action: manipulation; }
.grab-btn:active:not(:disabled) { transform: scale(0.88); filter: brightness(1.18) saturate(1.2); }
.grab-btn:disabled { opacity: 0.45; filter: grayscale(0.35); cursor: default; }
.grab-btn.is-start { color: #141a06; border-color: rgba(255, 255, 255, 0.35); background: radial-gradient(circle at 35% 28%, #f6ffc8 0%, var(--p-lime) 45%, #8fb312 100%); box-shadow: 0 0 0 6px rgba(214, 255, 74, 0.14), 0 16px 36px rgba(214, 255, 74, 0.3); animation: grab-breathe 1.8s ease-in-out infinite; }
.grab-btn.is-start:disabled { animation: none; }
.grab-btn.is-stop { background: radial-gradient(circle at 35% 28%, #ffe9a8 0%, #ffc233 45%, #c77d00 100%); color: #2a1a00; box-shadow: 0 0 0 6px rgba(255, 194, 51, 0.18), 0 16px 36px rgba(255, 194, 51, 0.35); animation: grab-breathe 0.6s ease-in-out infinite; }
@keyframes grab-breathe { 50% { box-shadow: 0 0 0 12px rgba(214, 255, 74, 0.08), 0 16px 40px rgba(214, 255, 74, 0.42); } }
.grab-label { font-size: 1.12rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; }
.grab-hint { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; opacity: 0.8; }
.grab-hint:empty { display: none; }

/* 結果のひとこと・紙吹雪 */
.fx-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.fx-banner { position: absolute; left: 50%; top: 38%; margin: 0; transform: translate(-50%, -50%) scale(0.6); font-family: var(--p-num); font-size: clamp(2.4rem, 10vw, 4.2rem); font-weight: 800; letter-spacing: 0.06em; line-height: 1; white-space: nowrap; opacity: 0; text-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); }
.fx-layer.is-win .fx-banner { color: var(--p-lime); animation: banner-win 1.6s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.fx-layer.is-miss .fx-banner { color: var(--p-hot-soft); animation: banner-miss 1.35s ease both; }
@keyframes banner-win { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.4) rotate(-6deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(2deg); } 35% { transform: translate(-50%, -50%) scale(0.96) rotate(-1deg); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -58%) scale(1.05); } }
@keyframes banner-miss { 0% { opacity: 0; transform: translate(-50%, -45%) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } }
.fx-burst { position: absolute; inset: 0; }
.fx-confetti { position: absolute; top: -12px; border-radius: 2px; opacity: 0.95; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0.15; } }

@media (pointer: coarse) {
  .grab-hint.kbd { display: none; }
}

/* スマホ（横持ち・縦持ち）：HUD をまとめて小さくする */
@media (orientation: landscape) and (max-height: 520px), (orientation: portrait) and (max-width: 520px) {
  .hud-top { gap: 0.5rem; padding-top: calc(0.55rem + var(--safe-t)); background: none; }
  .hud-left { gap: 0.35rem; }
  .hud-row { gap: 0.35rem; }
  .hud-btn, .machine-btn, .play .stat { border-radius: 10px; }
  .hud-btn.icon { min-width: 2.3rem; min-height: 2.3rem; font-size: 0.9rem; }
  .machine-btn { flex-direction: row; align-items: center; max-width: 11rem; padding: 0.35rem 0.7rem; }
  .machine-btn-label { display: none; }
  .machine-btn-name { margin: 0; font-size: 0.8rem; }
  .mechbar button { padding: 0.3rem 0.5rem; font-size: 0.68rem; }
  .hud-arm { width: 9.5rem; }
  .hud-arm .arm-meter { padding: 4px 7px; font-size: 11px; }
  .hud-arm .arm-foot { font-size: 10px; }
  .hud-arm .arm-bar { margin: 3px 0 2px; height: 5px; }
  .hud-stats { gap: 0.3rem; }
  .play .stat { display: flex; align-items: baseline; gap: 0.35rem; min-width: 0; padding: 0.35rem 0.55rem; }
  .play .stat-label { font-size: 0.58rem; letter-spacing: 0.06em; }
  .play .stat-value { margin: 0; font-size: 1.15rem; }
  .predict { top: calc(2.9rem + var(--safe-t)); font-size: 0.7rem; }
  .cam-tools { bottom: calc(0.7rem + var(--safe-b)); }
  .cam-btn, .tilt-btn { padding: 0.42rem 0.9rem; font-size: 0.72rem; }
  .skills { bottom: calc(3.1rem + var(--safe-b)); max-width: calc(100vw - 2 * (6.8rem + 2rem)); }
  .skill { width: 52px; min-width: 52px; height: 56px; font-size: 9px; }
  .skill img { width: 34px; height: 34px; }
  .skill .item-ic, .skill .skill-ic { width: 24px; height: 24px; }
  .chat-rail { bottom: calc(6.8rem + var(--safe-b)); gap: 0.25rem; max-width: 10rem; }
  .chat-bubble { padding: 0.28rem 0.55rem; font-size: 0.66rem; }
  .chat-bubble:nth-last-child(n + 3) { display: none; }
  .hud-bottom { padding-bottom: calc(0.7rem + var(--safe-b)); background: none; }
  .joystick { width: 6.8rem; height: 6.8rem; }
  .joy-stick { width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; }
  .grab-btn { width: 5.2rem; height: 5.2rem; }
  .grab-label { font-size: 1rem; }
  .fx-banner { font-size: clamp(2rem, 11vh, 3rem); }
}

/* スマホ縦持ち：上は 1 行、下は操作、真ん中は台に空ける */
@media (orientation: portrait) and (max-width: 520px) {
  .hud-top { padding-left: calc(0.75rem + var(--safe-l)); padding-right: calc(0.75rem + var(--safe-r)); }
  .hud-left { flex: 1 1 auto; }
  .machine-btn { max-width: none; flex: 0 1 auto; }
  .hud-stats { flex: 0 0 auto; }
  .play .stat { padding: 0.35rem 0.45rem; gap: 0.25rem; }
  .play .stat-free { display: none; }
  .machine-btn { flex-shrink: 0; }
  .mech-name { display: none; }
  .predict { top: calc(9.5rem + var(--safe-t)); }
  .play.has-mechs .predict { top: calc(12.1rem + var(--safe-t)); }
  .hud-bottom { padding-left: calc(1rem + var(--safe-l)); padding-right: calc(1rem + var(--safe-r)); padding-bottom: calc(1.1rem + var(--safe-b)); }
  .cam-tools { bottom: calc(1.6rem + var(--safe-b)); }
  .skills { left: 0.75rem; right: 0.75rem; transform: none; bottom: calc(8.4rem + var(--safe-b)); max-width: none; justify-content: center; }
  .chat-rail { bottom: calc(13.2rem + var(--safe-b)); right: calc(0.75rem + var(--safe-r)); max-width: 11rem; }
  .zoom-tools { right: calc(0.6rem + var(--safe-r)); }
}

/* ————— ゲット演出（ボール → 揺れ → カチッ → ゲットだぜ！） ————— */
.gf { position: fixed; inset: 0; z-index: 35; overflow: hidden; color: #fff; cursor: pointer; opacity: 0; transition: opacity 0.24s ease; font-family: "M PLUS Rounded 1c", sans-serif; user-select: none; -webkit-user-select: none; --stage-x: 50%; --stage-y: 40%; }
.gf.is-on { opacity: 1; }
.gf-bg { position: absolute; inset: -80px; background: radial-gradient(ellipse at var(--stage-x) calc(var(--stage-y) + 12%), rgba(255, 255, 255, 0.16), transparent 40%), radial-gradient(circle at 50% 50%, #1a2250, #070a1c 75%); transition: filter 0.3s ease; }
.gf.st-reveal .gf-bg { background: radial-gradient(circle at var(--stage-x) var(--stage-y), rgba(255, 255, 255, 0.3), transparent 50%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--rarity) 50%, #1b2a7a) 0 38px, color-mix(in srgb, var(--rarity) 36%, #14205e) 38px 76px); animation: gf-stripes 2.4s linear infinite; }
.gf.rar-SSR.st-reveal .gf-bg { background: radial-gradient(circle at var(--stage-x) var(--stage-y), rgba(255, 250, 210, 0.45), transparent 50%), repeating-linear-gradient(135deg, #d9a400 0 38px, #b98200 38px 76px); }
@keyframes gf-stripes { to { transform: translate(54px, 54px); } }
.gf-rays { position: absolute; left: var(--stage-x); top: var(--stage-y); width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; opacity: 0; animation: gf-spin 14s linear infinite; pointer-events: none; }
.gf.st-reveal .gf-rays { opacity: 1; transition: opacity 0.4s ease 0.1s; animation: gf-spin 14s linear infinite, gf-beat 0.46s ease-out 0.6s infinite; }
@keyframes gf-beat { from { scale: 1.08; } to { scale: 1; } }
@keyframes gf-spin { to { transform: rotate(360deg); } }
.gf-confetti { position: absolute; inset: 0; display: none; pointer-events: none; }
.gf.st-reveal .gf-confetti { display: block; }

/* ボール */
.gf-stage { position: absolute; left: var(--stage-x); top: var(--stage-y); width: min(68vmin, 340px); aspect-ratio: 1; transform: translate(-50%, -50%); }
/* ポケモンの後ろの光（目玉はポケモン） */
.gf-halo { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.55), color-mix(in srgb, var(--rarity) 35%, transparent) 45%, transparent 70%); opacity: 0; pointer-events: none; }
.gf.st-reveal .gf-halo { animation: gf-halo-in 0.6s ease-out 0.35s both, gf-halo-beat 1.6s ease-in-out 1s infinite alternate; }
@keyframes gf-halo-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes gf-halo-beat { to { transform: scale(1.1); opacity: 0.75; } }
.gf-shadow { position: absolute; left: 50%; bottom: 14%; width: 40%; height: 7%; margin-left: -20%; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, 0.55), transparent 70%); animation: gf-shadow 0.9s ease-out both; }
@keyframes gf-shadow { 0% { transform: scale(0.3); opacity: 0; } 45% { transform: scale(1); opacity: 1; } 65% { transform: scale(0.8); } 80%, 100% { transform: scale(1); opacity: 1; } }
.gf-ball { position: absolute; left: 50%; bottom: 17%; width: 34%; aspect-ratio: 1; margin-left: -17%; transform-origin: 50% 100%; animation: gf-drop 0.9s both; }
.gf-ball i { position: absolute; display: block; }
.gf-top, .gf-bottom { left: 0; right: 0; height: 50%; border: 4px solid #111; transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.3s ease; }
.gf-top { top: 0; border-radius: 999px 999px 0 0; border-bottom-width: 0; background: radial-gradient(circle at 20% 72%, var(--ball-accent) 0 15%, transparent 16%), radial-gradient(circle at 80% 72%, var(--ball-accent) 0 15%, transparent 16%), radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.55) 0 10%, transparent 11%), var(--ball-top); transform-origin: 8% 100%; }
.gf-bottom { bottom: 0; border-radius: 0 0 999px 999px; border-top-width: 0; background: linear-gradient(#f5f5f5, #d6d6d6); box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.12); }
.gf-band { left: 0; right: 0; top: 50%; height: 9%; margin-top: -4.5%; background: #111; }
.gf-btn { left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 4px solid #111; box-shadow: inset 0 0 0 3px #d8d8d8; transition: opacity 0.2s ease; }
@keyframes gf-drop {
  0% { transform: translateY(-260%) rotate(-30deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  45% { transform: translateY(0) scale(1.08, 0.9); animation-timing-function: cubic-bezier(0, 0, 0.5, 1); }
  62% { transform: translateY(-34%) rotate(8deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); }
  78% { transform: translateY(0) scale(1.04, 0.95); animation-timing-function: cubic-bezier(0, 0, 0.5, 1); }
  88% { transform: translateY(-9%); }
  100% { transform: translateY(0); }
}
.gf.st-wobble .gf-ball { animation: gf-wobble 0.8s ease-in-out var(--wobbles, 1); }
.gf.st-wobble .gf-btn { animation: gf-blink 0.8s ease-in-out var(--wobbles, 1); }
@keyframes gf-wobble { 0%, 55%, 100% { transform: rotate(0); } 14% { transform: rotate(-24deg); } 32% { transform: rotate(18deg); } 44% { transform: rotate(-6deg); } }
@keyframes gf-blink { 20%, 40% { background: #ff6b6b; box-shadow: inset 0 0 0 3px #ffb3b3, 0 0 18px #ff4d2e; } }
.gf.st-click .gf-ball { animation: gf-click 0.35s ease-out; }
.gf.st-click .gf-btn { background: #fff; box-shadow: inset 0 0 0 3px #fff, 0 0 26px #fff; }
@keyframes gf-click { 0% { transform: scale(1); } 40% { transform: scale(1.1, 0.92); } 100% { transform: scale(1); } }
.gf.st-click .gf-bg { filter: brightness(0.7); }
.gf-stars { position: absolute; left: 50%; bottom: 40%; pointer-events: none; }
.gf-stars i { position: absolute; left: 0; top: 0; width: min(7vmin, 36px); height: min(7vmin, 36px); color: #ffe066; filter: drop-shadow(0 0 8px #fff6a0); opacity: 0; transform: translate(-50%, -50%); }
.gf-stars svg { width: 100%; height: 100%; display: block; }
.gf.st-click .gf-stars i { animation: gf-star 0.9s ease-out forwards; }
.gf.st-click .gf-stars i:nth-child(1) { --sx: -120%; --sy: -170%; }
.gf.st-click .gf-stars i:nth-child(2) { --sx: 0%; --sy: -230%; animation-delay: 0.06s; }
.gf.st-click .gf-stars i:nth-child(3) { --sx: 120%; --sy: -170%; animation-delay: 0.12s; }
@keyframes gf-star { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--sx) * 2.4), calc(-50% + var(--sy) * 1.6)) scale(1.2) rotate(180deg); } }

/* 開いて登場 */
.gf.st-reveal .gf-ball { animation: none; }
.gf.st-reveal .gf-top { transform: translateY(-70%) rotate(-38deg); opacity: 0; transition-delay: 0.05s; }
.gf.st-reveal .gf-bottom { transform: translateY(30%); opacity: 0; transition-delay: 0.1s; }
.gf.st-reveal .gf-band, .gf.st-reveal .gf-btn { opacity: 0; }
.gf-art { position: absolute; inset: 4% 4% 14%; display: grid; place-items: center; opacity: 0; transform: scale(0.1); }
.gf.st-reveal .gf-art { animation: gf-art-in 0.8s 0.12s both, gf-float 2.2s ease-in-out 1s infinite; }
/* 大きく飛び出して着地（MON_HIT の 0.5 秒で一番大きい） */
@keyframes gf-art-in { 0% { opacity: 0; transform: translateY(20%) scale(0.1); animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); } 45% { opacity: 1; transform: translateY(-4%) scale(1.3); animation-timing-function: ease-in-out; } 70% { transform: scale(0.94, 1.02); } 85% { transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
/* 3D のぬいぐるみ（読めたらドット絵と入れ替え）。回すとはみ出すので絵の枠より大きく描く */
.gf-3d { position: absolute; inset: -22% -24% -8%; pointer-events: none; }
.gf-3d canvas { display: block; width: 100%; height: 100%; }
.gf-img { transition: opacity 0.2s ease; }
.gf.has-3d .gf-img { opacity: 0; }
.gf-turn { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); padding: 0.2rem 0.7rem; border-radius: 999px; background: rgba(8, 12, 30, 0.6); color: #dfe6ff; font-size: 0.7rem; font-weight: 800; white-space: nowrap; opacity: 0; pointer-events: none; }
.gf.has-3d.st-reveal:not(.has-card) .gf-turn { animation: gf-turn-hint 2.6s ease 1.1s both; }
.gf.turning .gf-turn { opacity: 0; animation: none; }
@keyframes gf-turn-hint { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
.gf.turning { cursor: grabbing; }
@keyframes gf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
.gf-img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45)); }
.gf-item-img { width: 70%; height: 70%; }
.gf-gem { width: 46%; aspect-ratio: 1; border-radius: 30% 30% 45% 45%; background: radial-gradient(circle at 32% 28%, #fff 0 8%, transparent 9%), linear-gradient(145deg, color-mix(in srgb, var(--gem) 55%, #fff), var(--gem) 55%, color-mix(in srgb, var(--gem) 60%, #000)); transform: rotate(45deg); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45)); }
.gf.has-card .gf-art { animation: gf-card-peek 1.4s ease-in-out forwards; }
@keyframes gf-card-peek { 0% { transform: none; } 40% { transform: translateY(-6%) scale(1.05); } 100% { transform: translateY(-3%) scale(1.02); } }
.gf.has-card:not(.has-3d) .gf-art { animation: gf-card-peek 1.4s ease-in-out forwards, gf-card-fade 1.4s ease-in forwards; }
@keyframes gf-card-fade { to { opacity: 0.4; } }
/* ステッカー：hero は大きめをその場に叩きつける／launch はボールから放物線／slap は連打／pop は弾ける */
.gf-cam { position: absolute; inset: 0; }
.gf-stickers { position: absolute; inset: 0; pointer-events: none; }
.gf-sticker { position: absolute; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); animation: gf-st-show 0.01s var(--delay) both; }
.gf-sticker b, .gf-sticker i { display: block; width: 100%; height: 100%; }
.gf-sticker i { transform: rotate(var(--rot)); }
.gf-sticker img, .gf-sticker canvas { display: block; width: 100%; height: 100%; animation: gf-st-idle 1.9s ease-in-out infinite alternate; }
@keyframes gf-st-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes gf-st-idle { from { transform: rotate(-3deg) scale(1); } to { transform: rotate(3deg) scale(1.05); } }
.gf-sticker.k-hero > b { animation: gf-st-hero 0.55s cubic-bezier(0.2, 0, 0, 1) var(--delay) both; }
@keyframes gf-st-hero { 0% { opacity: 0; transform: scale(1.8) rotate(var(--tw)); } 35% { opacity: 1; } 55% { transform: scale(0.9, 0.82); } 78% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
.gf-sticker.k-launch { animation: gf-fly-x 0.85s var(--delay) both; }
.gf-sticker.k-launch > b { animation: gf-fly-y 0.85s var(--delay) both; }
.gf-sticker.k-launch i { animation: gf-fly-spin 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) var(--delay) both; }
@keyframes gf-fly-x { 0% { opacity: 0; transform: translateX(var(--fx)) scale(0.25); animation-timing-function: cubic-bezier(0.3, 0.4, 0.6, 1); } 10% { opacity: 1; } 82% { transform: translateX(0) scale(1.1); } 90% { transform: scale(1.14, 0.86); } 100% { opacity: 1; transform: none; } }
@keyframes gf-fly-y { 0% { transform: translateY(var(--fy)); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 42% { transform: translateY(var(--apex)); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5); } 82%, 100% { transform: translateY(0); } }
@keyframes gf-fly-spin { from { transform: rotate(calc(var(--rot) + var(--spin))); } 82%, to { transform: rotate(var(--rot)); } }
.gf-sticker.k-slap > b { animation: gf-st-slap 0.42s cubic-bezier(0.2, 0, 0, 1) var(--delay) both; }
@keyframes gf-st-slap { 0% { opacity: 0; transform: translateY(-34px) scale(2.7) rotate(var(--tw)); } 35% { opacity: 1; } 50% { transform: scale(0.84, 0.76); } 72% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
.gf-sticker.k-pop > b { animation: gf-st-pop 0.5s cubic-bezier(0.34, 1.8, 0.64, 1) var(--delay) both; }
@keyframes gf-st-pop { 0% { opacity: 0; transform: scale(0) rotate(var(--tw)); } 40% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.gf.has-card .gf-stickers, .gf.st-reveal.has-card .gf-card { opacity: 0.2; transition: opacity 0.5s ease; }
/* 噴き出す紙吹雪（confetti.js のキャンバス）と、叩きつけたときの衝撃波 */
.gf-burst { position: absolute; inset: 0; pointer-events: none; }
.gf-ring { z-index: 9; }
.gf-ring { position: absolute; width: 44vmin; height: 44vmin; margin: -22vmin 0 0 -22vmin; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 0 26px var(--rarity), inset 0 0 20px var(--rarity); opacity: 0; animation: gf-ring 0.6s cubic-bezier(0.1, 0.7, 0.3, 1) var(--delay) both; }
@keyframes gf-ring { 0% { opacity: 0.95; transform: scale(0.15); border-width: 16px; } 100% { opacity: 0; transform: scale(2.3); border-width: 1px; } }
.gf-ring.is-mon { width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; animation-duration: 0.75s; }
@media (prefers-reduced-motion: reduce) {
  .gf-sticker, .gf-sticker > b, .gf-sticker i, .gf-sticker img, .gf-sticker canvas { animation: none !important; }
  .gf-burst { display: none; }
}
.gf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.gf.st-reveal .gf-flash { animation: gf-flash 0.5s ease-out; }
@keyframes gf-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* ゲットだぜ！ */
.gf-logo { position: absolute; left: 50%; top: calc(var(--safe-t) + 5%); display: flex; gap: 0.1em; transform: translateX(-50%) rotate(-6deg) scale(0); font-weight: 900; font-size: clamp(2.6rem, 12vw, 4.6rem); line-height: 1; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; }
.gf-logo span { color: #ffd23f; -webkit-text-stroke: 0.09em #1d3fa8; paint-order: stroke fill; text-shadow: 0 0.08em 0 #0b1f6a, 0 0.18em 0.3em rgba(0, 0, 0, 0.45); }
.gf-logo span + span { color: #fff; }
.gf.st-reveal .gf-logo { animation: gf-stamp 0.55s cubic-bezier(0.2, 1.8, 0.4, 1) 0.3s both; }
@keyframes gf-stamp { 0% { transform: translateX(-50%) rotate(-18deg) scale(2.6); opacity: 0; } 100% { transform: translateX(-50%) rotate(-6deg) scale(1); opacity: 1; } }

/* 情報カード */
.gf-card { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 10.2rem); width: min(88vw, 360px); padding: 0.7rem 1rem; border-radius: 16px; background: rgba(8, 12, 30, 0.78); border: 2px solid color-mix(in srgb, var(--rarity) 70%, #fff); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; }
.gf.st-reveal .gf-card { transform: translate(-50%, 0); opacity: 1; transition: opacity 0.3s ease 0.45s, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 0.45s; }
.gf-no { font-family: "Bebas Neue", sans-serif; font-size: 1rem; letter-spacing: 0.12em; color: #cfd8ff; display: flex; align-items: center; gap: 0.5rem; }
.gf-new { font-family: "Bebas Neue", sans-serif; padding: 0 0.5rem; border-radius: 6px; background: #ff4d2e; color: #fff; letter-spacing: 0.1em; animation: gf-new 0.8s ease-in-out infinite alternate; }
@keyframes gf-new { to { transform: scale(1.12); } }
.gf-name { font-size: 1.5rem; font-weight: 900; line-height: 1.2; }
.gf-name small { margin-left: 0.5rem; font-size: 0.9rem; color: #cfd8ff; }
.gf-row { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; }
.gf-type { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--t); color: #fff; font-size: 0.75rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.gf-rar { margin-left: auto; padding: 0 0.6rem; border-radius: 8px; background: var(--rarity); color: #111; font-family: "Bebas Neue", sans-serif; font-size: 1.3rem; letter-spacing: 0.06em; }
.gf-dex { margin-top: 0.25rem; font-size: 0.72rem; color: #cfd8ff; }

/* 共有・写真に保存・みんなに投稿（登場して少ししてから） */
.gf-actions { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 6.9rem); display: flex; gap: 0.45rem; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
.gf.wait:not(.has-card) .gf-actions { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.gf-actions button { display: flex; align-items: center; gap: 0.3rem; padding: 0.42rem 0.8rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.75); background: rgba(8, 12, 30, 0.75); color: #fff; font: 800 0.78rem "M PLUS Rounded 1c", sans-serif; white-space: nowrap; cursor: pointer; }
.gf-actions button .ic { width: 1.05rem; height: 1.05rem; }
.gf-actions button:active { transform: scale(0.95); }
.gf-actions button:disabled { opacity: 0.6; }
.gf-actions button.done { background: var(--rarity); border-color: transparent; color: #111; opacity: 1; }

/* テキスト窓 */
.gf-msg { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 1rem); width: min(92vw, 560px); min-height: 5.2rem; padding: 0.8rem 1.1rem; border-radius: 14px; background: #fff; color: #222; border: 4px solid #2a3a8a; box-shadow: inset 0 0 0 3px #c9d4ff, 0 10px 26px rgba(0, 0, 0, 0.4); transform: translate(-50%, 140%); transition: transform 0.35s cubic-bezier(0.2, 1.3, 0.4, 1); pointer-events: none; }
.gf.st-click .gf-msg, .gf.st-reveal .gf-msg { transform: translate(-50%, 0); }
.gf-msg p { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.55; letter-spacing: 0.04em; }
.gf-caret { position: absolute; right: 0.9rem; bottom: 0.4rem; font-style: normal; font-size: 0.8rem; color: #e53935; animation: gf-caret 0.6s ease-in-out infinite alternate; }
.gf-next { position: absolute; right: 2.1rem; bottom: 0.42rem; font-style: normal; font-size: 0.72rem; font-weight: 800; color: #6b76b8; opacity: 0; transition: opacity 0.3s ease; }
.gf.wait:not(.has-card) .gf-next { opacity: 1; }
@keyframes gf-caret { to { transform: translateY(3px); } }

@media (orientation: landscape) and (max-height: 600px) {
  .gf { --stage-x: 30%; --stage-y: 46%; }
  .gf-stage { width: min(64vh, 280px); }
  .gf-logo { left: 70%; top: calc(var(--safe-t) + 8%); font-size: clamp(2.2rem, 13vh, 3.8rem); }
  .gf-card { left: 70%; bottom: auto; top: 36%; width: min(42vw, 340px); }
  .gf-actions { left: 70%; bottom: calc(var(--safe-b) + 5.6rem); }
  .gf-msg { width: min(86vw, 640px); min-height: 4rem; padding: 0.55rem 1rem; }
  .gf-msg p { font-size: 0.95rem; }
}

/* ————— カード類 ————— */
.card { background: var(--panel); border-radius: var(--radius); padding: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.mon { position: relative; border: 2px solid transparent; border-radius: 14px; background: var(--panel); padding: 6px 4px 8px; text-align: center; font-size: 12px; }
.mon img { width: 72px; height: 72px; image-rendering: pixelated; }
.mon .nm { font-weight: 800; font-size: 13px; }
.mon .lv { color: var(--muted); }
.mon .rar { position: absolute; top: 4px; left: 6px; font-size: 10px; font-weight: 800; color: var(--rar); }
.mon.indeck { border-color: var(--accent); }
.mon .deckmark { position: absolute; top: 4px; right: 6px; width: 16px; height: 16px; color: var(--accent); }
.mon .deckmark .ic { width: 16px; height: 16px; }
.mon .deckmark svg { fill: currentColor; }
.mon .card-count { position: absolute; bottom: 4px; right: 5px; font-size: 10px; font-weight: 800; color: var(--muted); background: #0005; border-radius: 6px; padding: 0 4px; }
.mon .card-count.has { color: #1b1b1b; background: var(--accent); }
.mon.locked img { filter: brightness(0) opacity(.35); }
.mon.locked .nm { color: var(--muted); }

.deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.deck .slot { border: 2px dashed var(--line); border-radius: 14px; min-height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; background: #0003; }
.deck .slot.filled { border-style: solid; border-color: var(--accent); color: var(--text); background: var(--panel); }
.deck .slot img { width: 64px; height: 64px; image-rendering: pixelated; }

.types { display: inline-flex; gap: 4px; }
.type { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--t); color: #fff; text-shadow: 0 1px 1px #0006; }

.bar { height: 8px; border-radius: 999px; background: #0006; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--c, var(--good)); border-radius: 999px; transition: width .4s; }

/* ————— シート・トースト ————— */
.sheet { position: fixed; inset: 0; background: #0009; display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.sheet[hidden] { display: none; }
.sheet-card { position: relative; width: min(560px, 100%); max-height: 88vh; overflow: auto; background: var(--panel); border-radius: 22px 22px 0 0; padding: 18px calc(16px + var(--safe-r)) calc(18px + var(--safe-b)) calc(16px + var(--safe-l)); box-shadow: 0 -10px 30px #0008; animation: up .22s ease-out; }
@media (min-width: 700px) { .sheet { align-items: center; } .sheet-card { border-radius: 22px; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-close { position: absolute; top: 10px; right: 12px; border: 0; background: #0004; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; }
.toast { position: fixed; left: 50%; bottom: calc(80px + var(--safe-b)); transform: translateX(-50%) translateY(20px); background: #000d; padding: 10px 16px; border-radius: 12px; font-size: 14px; opacity: 0; transition: .2s; pointer-events: none; z-index: 30; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; transform: translateX(-50%); }

.detail-head { display: flex; gap: 12px; align-items: center; }
.detail-head img { width: 110px; height: 110px; image-rendering: pixelated; background: radial-gradient(#fff2, transparent 70%); border-radius: 50%; }
.stats { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; font-size: 12px; align-items: center; margin: 8px 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.kv b { color: var(--text); font-weight: 700; }

.result-list { display: flex; flex-direction: column; gap: 10px; }
.result-item { display: flex; gap: 10px; align-items: center; background: var(--panel2); border-radius: 14px; padding: 8px; }
.result-item > img { width: 72px; height: 72px; image-rendering: pixelated; }
.result-item .item-ic { flex: none; }
.result-card { position: relative; flex: none; width: 76px; padding: 0; border: 0; background: none; }
.result-card img { width: 76px; height: auto; border-radius: 5px; display: block; box-shadow: 0 6px 14px #0008; image-rendering: auto; }
.result-card .tier { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); }
.result-item .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.result-item .acts .btn { padding: 7px 10px; font-size: 12px; }
.new { color: var(--accent); font-weight: 800; font-size: 11px; }

/* ————— 対戦 ————— */
.arena { position: relative; background: linear-gradient(#8fd3ff, #d9f2ff 55%, #9bd67a 56%, #6fb356); border-radius: var(--radius); height: 260px; overflow: hidden; }
.arena .side { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.arena .side.foe { right: 8%; top: 8%; }
.arena .side.me { left: 8%; bottom: 6%; }
.arena .side img { width: 120px; height: 120px; image-rendering: pixelated; filter: drop-shadow(0 6px 4px #0005); transition: transform .2s; }
.arena .side.me img { transform: scaleX(-1); }
.arena .side.hit img { animation: hit .4s; }
@keyframes hit { 25% { transform: translateX(-8px); filter: brightness(3); } 75% { transform: translateX(8px); } }
.hpbox { background: #fffe; color: #222; border-radius: 10px; padding: 6px 10px; min-width: 170px; font-size: 12px; font-weight: 800; }
.hpbox .bar { background: #ccc; margin-top: 4px; }
.log { background: #0b0e1f; border: 2px solid var(--line); border-radius: 12px; padding: 10px; min-height: 64px; font-size: 14px; line-height: 1.6; margin: 10px 0; }
.moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.moves .btn { background: var(--t); color: #fff; text-shadow: 0 1px 2px #0008; padding: 12px 6px; }
.moves .btn small { display: block; font-size: 10px; opacity: .9; }

.aim { position: fixed; inset: 0; background: #000b; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.aim canvas { width: min(92vw, 520px); height: 200px; background: #16204a; border-radius: 16px; border: 2px solid var(--line); touch-action: none; }
.aim p { margin: 0; font-weight: 800; }

/* ————— 実機 ————— */
.live { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; width: min(100%, calc(62vh * 4 / 3)); margin: 0 auto; }
.live img, .live canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.live img:not([src]) { visibility: hidden; }
.live-grid { display: grid; gap: 12px; }
@media (min-width: 700px) { .live-grid { grid-template-columns: 1fr 240px; align-items: center; } }
.live .overlay { position: absolute; left: 8px; top: 8px; background: #000a; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: 6px; justify-content: center; margin: 12px 0; }
.pad button { border: 0; border-radius: 14px; background: var(--panel2); font-size: 22px; touch-action: none; }
.pad button.active { background: var(--accent); color: #222; }

.list { display: flex; flex-direction: column; gap: 8px; }
.item-row { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 14px; padding: 10px; }
button.item-row { width: 100%; border: 0; text-align: left; }
.item-row > .ic { width: 24px; height: 24px; color: var(--muted); }
.item-row img.px, .item-row img.item-ic { width: 48px; height: 48px; }
.item-3d-btn { position: relative; flex: none; padding: 0; border: 0; background: none; border-radius: 12px; }
.item-3d-btn:active { transform: scale(0.94); }
.item-3d-tag { position: absolute; right: -4px; bottom: -2px; padding: 0 5px; border-radius: 6px; background: var(--accent); color: #222; font-size: 10px; font-weight: 800; line-height: 16px; }
.item-viewer { display: flex; flex-direction: column; gap: 8px; }
.item-viewer .item-stage { width: min(78vw, 340px); aspect-ratio: 1; align-self: center; border-radius: 18px; background: radial-gradient(circle at 50% 45%, #1d2550, #0b0e1f 75%); touch-action: none; }
.item-fx-chip { margin-left: 8px; font-size: 11px; vertical-align: middle; }
.item-row .grow small { display: block; color: var(--muted); font-size: 12px; }
input.text { background: #0b0e1f; border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 10px 12px; font: inherit; }

/* ————— 道具・アバター ————— */
.item-ic { display: inline-block; flex: none; object-fit: contain; }
.skill img.item-ic, img.item-ic { image-rendering: auto; margin-bottom: 0; }
.item-ic.gem { border-radius: 30% 30% 45% 45%; transform: rotate(45deg) scale(0.72); background: radial-gradient(circle at 32% 28%, #fff 0 8%, transparent 9%), linear-gradient(145deg, color-mix(in srgb, var(--gem) 55%, #fff), var(--gem) 55%, color-mix(in srgb, var(--gem) 60%, #000)); box-shadow: 0 2px 4px #0006; }
.bag { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.bag-item { display: inline-flex; align-items: center; gap: 4px; background: var(--panel); border-radius: 12px; padding: 3px 9px 3px 4px; font-size: 13px; }
.hearts { display: inline-flex; align-items: center; gap: 1px; }
.hearts .ic { width: 15px; height: 15px; color: #5a6190; }
.hearts .ic.on { color: #ff6fa3; }
.hearts .ic.on svg { fill: currentColor; }
.avatar { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--av) 60%, #fff), var(--av) 70%); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 6px 14px #0007; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar img.px { width: 118%; height: 118%; object-fit: contain; image-rendering: pixelated; }
.avatar.letter { color: #fff; font-weight: 900; font-size: 1.4em; }
.page-head { margin-bottom: 6px; }
.page-head h1 { margin: 0; font-size: 22px; }
.page-head .hud-btn.icon { min-width: 40px; min-height: 40px; background: var(--panel); border-radius: 12px; border: 0; color: var(--text); }
.shop-coin { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--accent) 55%, #b38b00); color: #6b4f00; }
.shop-coin .ic { width: 26px; height: 26px; }
.icon-btn { padding: 10px; }
.icon-btn .ic { width: 20px; height: 20px; }

/* ————— コレクション ————— */
.mon-card-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 4px; padding: 8px; border: 0; border-radius: 14px; background: var(--panel2); text-align: left; }
.mon-card-row img { width: 54px; border-radius: 4px; box-shadow: 0 4px 10px #0007; }
.mon-card-row small { display: block; color: var(--muted); font-size: 11px; }
.mon-card-row b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tier-summary { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-bottom: 10px; }
.tier-sum { border: 0; border-radius: 10px; padding: 6px 0; background: var(--panel); display: flex; flex-direction: column; align-items: center; box-shadow: inset 0 -3px 0 var(--tier); }
.tier-sum b { font-family: "Bebas Neue", sans-serif; font-size: 16px; font-weight: 400; color: var(--tier); letter-spacing: 0.04em; }
.tier-sum small { font-size: 10px; color: var(--muted); }
.tier-sum.on { background: var(--tier); }
.tier-sum.on b, .tier-sum.on small { color: #141414; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.card-thumb, .binder-slot, .feed-card { position: relative; padding: 0; border: 0; background: none; border-radius: 7px; aspect-ratio: 63 / 88; }
.card-thumb img, .binder-slot img, .feed-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; box-shadow: 0 6px 14px #0008; }
.card-thumb .tier, .binder-slot .tier, .feed-card .tier { position: absolute; left: 4px; bottom: 4px; font-size: 13px; }
.binder-n { position: absolute; right: 4px; top: 4px; background: #000b; border-radius: 6px; padding: 0 5px; font-size: 11px; font-weight: 800; }
.card-thumb.small { width: 78px; flex: none; }
.tierfx-AR::after, .tierfx-S::after, .tierfx-SR::after, .tierfx-SSR::after, .tierfx-SAR::after, .tierfx-UR::after { content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%); background-size: 250% 100%; mix-blend-mode: overlay; animation: thumb-sheen 3.2s ease-in-out infinite; }
.tierfx-SAR::before, .tierfx-UR::before { content: ""; position: absolute; inset: -3px; border-radius: 9px; background: conic-gradient(from 0deg, #ffe066, #ff6fb5, #7ee0ff, #b388ff, #ffe066); z-index: -1; animation: spin-border 4s linear infinite; }
.card-thumb, .binder-slot { isolation: isolate; }
@keyframes thumb-sheen { 0%, 20% { background-position: 150% 0; } 80%, 100% { background-position: -150% 0; } }
@keyframes spin-border { to { filter: hue-rotate(360deg); } }
.binder { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
.binder-slot:not(.have) { background: repeating-linear-gradient(45deg, #1a1f3d 0 8px, #20264a 8px 16px); border: 2px dashed var(--line); }
.binder-slot:not(.have)::after, .binder-slot:not(.have)::before { display: none; }
.binder-empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 26px; font-weight: 900; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 10px; text-align: center; color: var(--muted); background: var(--panel); border-radius: var(--radius); }
.empty > .ic { width: 42px; height: 42px; color: var(--accent); }
.empty p { margin: 0; }

/* ————— フレンド・コミュニティ ————— */
.trainer-card { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 12px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--av) 45%, #1a1f3d), #1a1f3d 70%); box-shadow: 0 8px 22px #0006, inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.trainer-card .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-name { font-size: 18px; }
.trainer-card small { color: #d6dcff; opacity: 0.8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-code { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.tc-code span { font-size: 10px; color: var(--muted); }
.tc-code b { font-family: "Bebas Neue", sans-serif; font-size: 20px; letter-spacing: 0.12em; font-weight: 400; }
.trainer-card .hud-btn.icon { min-width: 40px; min-height: 40px; border: 0; border-radius: 12px; background: #0005; color: #fff; }
.feed { display: flex; flex-direction: column; gap: 8px; }
.feed h3 { display: flex; align-items: center; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--panel); }
.feed-row .grow { min-width: 0; font-size: 13px; }
.feed-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.feed-row > img.px { width: 48px; height: 48px; }
.feed-card { width: 46px; flex: none; }
.feed-card .tier { font-size: 11px; left: 50%; bottom: -5px; transform: translateX(-50%); min-width: 22px; padding: 0 4px; }
.rare-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 12px; scrollbar-width: none; }
.rare-strip::-webkit-scrollbar { display: none; }
.photo-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 12px; scrollbar-width: none; }
.photo-strip::-webkit-scrollbar { display: none; }
.photo-thumb, .feed-photo { flex: none; padding: 0; border: 0; background: #0006; border-radius: 10px; overflow: hidden; cursor: pointer; }
.photo-thumb { width: 96px; aspect-ratio: 9 / 16; }
.feed-photo { width: 46px; aspect-ratio: 9 / 16; }
.photo-thumb img, .feed-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-view { text-align: center; }
.photo-view img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 14px; box-shadow: 0 10px 28px #0009; }
.friend-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--panel); }
.friend-row .grow { min-width: 0; }
.friend-row small { display: block; color: var(--muted); font-size: 11px; }

/* ————— ユーザー ————— */
.profile-hero { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 12px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--av) 55%, #1a1f3d), #1a1f3d 75%); box-shadow: 0 10px 26px #0007; }
.profile-hero h2 { margin: 0; font-size: 22px; }
.profile-hero .note { margin: 2px 0 8px; color: #e1e6ff; }
.avatar-edit { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; }
.avatar-pen { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #1b1b1b; box-shadow: 0 0 0 3px #1a1f3d; }
.avatar-pen .ic { width: 16px; height: 16px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hero-stats > div { display: flex; flex-direction: column; align-items: center; background: #0004; border-radius: 10px; padding: 4px 0; }
.hero-stats b { font-family: "Bebas Neue", sans-serif; font-size: 20px; font-weight: 400; letter-spacing: 0.04em; }
.hero-stats small { font-size: 10px; color: #cfd6ff; }
.form { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 700; }
textarea.text { background: #0b0e1f; border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 10px 12px; font: inherit; resize: vertical; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 -3px 0 #0003; }
.swatch.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.chip-btn.on { background: var(--accent); border-color: var(--accent); color: #1b1b1b; }
.best-card { width: 64px; border-radius: 5px; box-shadow: 0 4px 10px #0007; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 50vh; overflow: auto; margin-top: 8px; }
.avatar-choice { border: 0; border-radius: 14px; background: var(--panel2); padding: 4px; }
.avatar-choice img { width: 56px; height: 56px; }
.avatar-choice small { display: block; margin-top: -4px; color: var(--muted); font-size: 10px; }
/* くらべるアバター（プロフィール） */
.body-editor { display: grid; gap: 10px; }
.body-controls { display: grid; gap: 8px; }
.body-kind { justify-self: start; }
.body-row { display: grid; grid-template-columns: 2.6em 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); }
.body-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.body-val { display: flex; align-items: baseline; gap: 4px; }
.body-num { width: 4.6em; padding: 6px 8px; text-align: right; }
.body-editor .mon-3d { margin-top: 0; }
.body-preview-canvas { display: block; width: 100%; height: 240px; touch-action: none; cursor: grab; }
.body-looks { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.body-look { display: grid; justify-items: center; gap: 4px; padding: 8px 6px 6px; border-radius: 14px; border: 2px solid transparent; background: var(--panel); color: var(--text); font-size: 12px; font-weight: 700; }
.body-look img { height: 84px; width: auto; }
.body-look.on { border-color: var(--accent); background: var(--panel2); }
.mon-body-hint { margin: 8px 0 0; font-size: 12px; }
.mon-body-hint a { color: #80deea; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--panel); margin-bottom: 8px; flex-wrap: wrap; }
.set-row .grow { min-width: 160px; }
.set-row b { display: block; font-size: 14px; }
.set-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.set-row input[type="range"] { width: 110px; accent-color: var(--accent); }
.set-row .range-v { display: inline-block; }
.range-v { font-family: "Bebas Neue", sans-serif; font-size: 18px; font-weight: 400; width: 40px; text-align: right; }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 999px; background: #3a4170; position: relative; cursor: pointer; transition: background 0.2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px #0006; transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1); }
.switch:checked { background: var(--good); }
.switch:checked::after { transform: translateX(20px); }
details.dbg { background: var(--panel); border-radius: 12px; margin-bottom: 6px; }
details.dbg summary { padding: 10px 12px; font-weight: 800; cursor: pointer; }
details.dbg pre { margin: 0; padding: 0 12px 12px; font-size: 11px; line-height: 1.5; color: #c8d0ff; white-space: pre-wrap; word-break: break-all; }

/* ————— カード演出（パック → 開封 → めくる → 光） ————— */
.cf { position: fixed; inset: 0; z-index: 36; overflow: hidden; color: #fff; cursor: pointer; opacity: 0; transition: opacity 0.26s ease; user-select: none; -webkit-user-select: none; perspective: 1100px; --cw: min(64vw, 290px, calc(52vh * 0.716)); }
.cf.is-on { opacity: 1; }
.cf-bg { position: absolute; inset: -60px; background: radial-gradient(circle at 50% 45%, #25306b, #070a1c 72%); transition: filter 0.5s ease, background 0.5s ease; }
.cf.st-charge .cf-bg { filter: brightness(0.35); }
.cf.lv-legend.st-charge .cf-bg { background: radial-gradient(circle at 50% 45%, #2a1d00, #000 70%); filter: none; }
.cf.st-flip .cf-bg, .cf.st-done .cf-bg { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tier) 38%, transparent), transparent 55%), radial-gradient(circle at 50% 45%, #25306b, #070a1c 72%); }
.cf.lv-legend.st-flip .cf-bg, .cf.lv-legend.st-done .cf-bg { background: radial-gradient(circle at 50% 42%, rgba(255, 236, 150, 0.6), transparent 55%), repeating-linear-gradient(135deg, #3a2a00 0 40px, #2a1e00 40px 80px); animation: gf-stripes 2.4s linear infinite; }
.cf.lv-rainbow.st-flip .cf-bg, .cf.lv-rainbow.st-done .cf-bg { background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.35), transparent 50%), conic-gradient(from 0deg at 50% 45%, #ff6fb5, #ffe066, #7ee081, #4fc3f7, #b388ff, #ff6fb5); filter: saturate(0.8) brightness(0.55); }
.cf-rays { position: absolute; left: 50%; top: 45%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(color-mix(in srgb, var(--tier) 40%, transparent) 0 6deg, transparent 6deg 16deg); opacity: 0; animation: gf-spin 16s linear infinite; pointer-events: none; }
.cf.lv-plain .cf-rays { display: none; }
.cf.st-charge .cf-rays { opacity: 0.35; animation-duration: 2s; }
.cf.st-flip .cf-rays, .cf.st-done .cf-rays { opacity: 1; transition: opacity 0.4s ease; }
.cf-sparks { position: absolute; left: 50%; top: 45%; pointer-events: none; }
.cf-sparks i { position: absolute; width: calc(10px * var(--s)); height: calc(10px * var(--s)); margin: -5px; background: radial-gradient(circle, #fff 0 20%, var(--tier) 45%, transparent 70%); border-radius: 50%; opacity: 0; }
.cf.st-flip .cf-sparks i { animation: cf-spark 1.1s ease-out forwards; }
@keyframes cf-spark { 0% { opacity: 1; transform: translate(0, 0) scale(0.4); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.4); } }


/* カード */
.cf-card-wrap { position: absolute; left: 50%; top: 45%; width: var(--cw); aspect-ratio: 63 / 88; transform: translate(-50%, -50%) translateY(40%) scale(0.85); opacity: 0; transition: transform 0.7s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.35s ease; }
.cf.st-rise .cf-card-wrap, .cf.st-charge .cf-card-wrap, .cf.st-flip .cf-card-wrap, .cf.st-done .cf-card-wrap { transform: translate(-50%, -50%); opacity: 1; }
.cf.st-rise .cf-card-wrap { animation: cf-float 2s ease-in-out 0.7s infinite; }
@keyframes cf-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -52%); } }
.cf.st-charge .cf-card-wrap { animation: cf-tremble 0.08s linear infinite; }
@keyframes cf-tremble { 0% { transform: translate(-50%, -50%) translate(1px, 0); } 50% { transform: translate(-50%, -50%) translate(-1px, 1px); } 100% { transform: translate(-50%, -50%) translate(0, -1px); } }
.cf-card { position: absolute; inset: 0; transform-style: preserve-3d; --turn: 180deg; transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--turn) + var(--ry, 0deg))); transition: transform 0.14s ease-out; }
.cf.st-flip .cf-card { --turn: 0deg; transition: transform 0.7s cubic-bezier(0.3, 1.3, 0.5, 1); }
.cf.st-done .cf-card { --turn: 0deg; }
.cf-back, .cf-front { position: absolute; inset: 0; border-radius: calc(var(--cw) * 0.045); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55); }
.cf-back { transform: rotateY(180deg); background: radial-gradient(circle at 50% 50%, #3d7dca 0 30%, #1f4fa0 60%, #16336e); border: calc(var(--cw) * 0.04) solid #f4c430; display: grid; place-items: center; }
.cf.lv-gold .cf-back, .cf.lv-rainbow .cf-back, .cf.lv-legend .cf-back { box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 0 3px color-mix(in srgb, var(--tier) 80%, transparent), 0 0 40px var(--tier); }
.cf.st-charge .cf-back { box-shadow: 0 0 0 4px #fff, 0 0 80px var(--tier), 0 0 140px var(--tier); }
.cf-back-ball { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 6px solid #1b1f3a; background: linear-gradient(#ee1515 0 46%, #1b1f3a 46% 54%, #fff 54%); position: relative; }
.cf-back-ball::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 5px solid #1b1f3a; }
.cf-front { background: #222; }
.cf-front img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cf-holo, .cf-glare { position: absolute; inset: 0; pointer-events: none; }
.cf-glare { background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, 0.45), transparent 45%); mix-blend-mode: overlay; opacity: 0.8; }
.cf.lv-plain .cf-holo { display: none; }
.cf.lv-holo .cf-holo { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, transparent 60%); background-size: 250% 100%; mix-blend-mode: overlay; animation: thumb-sheen 2.6s ease-in-out infinite; }
.cf.lv-gold .cf-holo { background: linear-gradient(115deg, transparent 25%, rgba(255, 215, 90, 0.7) 42%, rgba(255, 255, 255, 0.8) 48%, rgba(255, 215, 90, 0.7) 54%, transparent 70%); background-size: 250% 100%; mix-blend-mode: overlay; animation: thumb-sheen 2.2s ease-in-out infinite; }
.cf.lv-rainbow .cf-holo, .cf.lv-legend .cf-holo { background: repeating-linear-gradient(115deg, rgba(255, 90, 160, 0.5) 0%, rgba(255, 230, 90, 0.5) 8%, rgba(110, 240, 160, 0.5) 16%, rgba(90, 200, 255, 0.5) 24%, rgba(180, 130, 255, 0.5) 32%, rgba(255, 90, 160, 0.5) 40%); background-size: 300% 300%; background-position: var(--mx, 50%) var(--my, 50%); mix-blend-mode: color-dodge; opacity: 0.55; animation: cf-rainbow 5s linear infinite; }
.cf.lv-legend .cf-holo::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px); background-size: 18px 18px; mix-blend-mode: overlay; animation: cf-twinkle 1.2s ease-in-out infinite alternate; }
@keyframes cf-rainbow { to { background-position: 300% 300%; } }
@keyframes cf-twinkle { from { opacity: 0.2; } to { opacity: 0.9; } }
.cf-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cf.st-flip .cf-flash { animation: gf-flash 0.55s ease-out; }
.cf.lv-legend.st-charge .cf-flash, .cf.lv-rainbow.st-charge .cf-flash { background: var(--tier); animation: cf-thunder 0.5s steps(2) infinite; }
@keyframes cf-thunder { 0% { opacity: 0; } 50% { opacity: 0.25; } }
.no-shake .cf.st-charge .cf-card-wrap { animation: none; }
.cf-special { position: absolute; left: 50%; top: calc(var(--safe-t) + 6%); transform: translateX(-50%) scale(0); font-family: "Bebas Neue", sans-serif; font-size: clamp(3rem, 14vw, 5.2rem); letter-spacing: 0.12em; background: linear-gradient(180deg, #fff8d0, #ffd23f 45%, #c98a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #5a3a00) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)); pointer-events: none; }
.cf.st-flip .cf-special, .cf.st-done .cf-special { animation: gf-stamp 0.6s cubic-bezier(0.2, 1.8, 0.4, 1) 0.25s both; }
.cf-info { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 3.4rem); width: min(90vw, 380px); padding: 0.6rem 1rem; border-radius: 16px; background: rgba(8, 12, 30, 0.82); border: 2px solid var(--tier); text-align: center; transform: translate(-50%, 24px); opacity: 0; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); pointer-events: none; }
.cf.st-done .cf-info { transform: translate(-50%, 0); opacity: 1; }
.cf-tier { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.cf-tier b { font-family: "Bebas Neue", sans-serif; font-size: 2rem; font-weight: 400; letter-spacing: 0.08em; color: var(--tier); line-height: 1; }
.cf-tier span { font-weight: 900; font-size: 1rem; }
.cf-new, .cf-dup { font-style: normal; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.1em; padding: 0 0.5rem; border-radius: 6px; font-size: 1rem; }
.cf-new { background: #ff4d2e; animation: gf-new 0.8s ease-in-out infinite alternate; }
.cf-dup { background: #3b4266; font-family: inherit; font-size: 0.75rem; font-weight: 800; letter-spacing: 0; padding: 0.1rem 0.5rem; }
.cf-set { margin-top: 0.2rem; font-size: 0.78rem; color: #cfd8ff; }
.cf-hint { position: absolute; left: 0; right: 0; text-align: center; bottom: calc(var(--safe-b) + 1rem); font-size: 0.8rem; font-weight: 800; color: #cfd8ff; letter-spacing: 0.06em; white-space: nowrap; animation: gf-caret 0.8s ease-in-out infinite alternate; pointer-events: none; }
.cf-viewer .cf-card-wrap { transform: translate(-50%, -50%); opacity: 1; }
.cf-viewer .cf-info { transform: translate(-50%, 0); opacity: 1; }
.cf-viewer .cf-rays { display: none; }
@media (orientation: landscape) and (max-height: 600px) {
  .cf { --cw: min(34vw, calc(70vh * 0.716)); }
  .cf-card-wrap, .cf-sparks, .cf-rays { left: 34%; top: 50%; }
  .cf-info { left: 72%; bottom: auto; top: 40%; width: min(44vw, 360px); }
  .cf-special { left: 72%; }
}

/* ————— プレイ画面の整理：左上に設定、右下にカバン・つかみ方、台の格 ————— */
.machine-btn-name { display: inline-flex; align-items: center; gap: 0.35rem; }
.hud-row:has(.hud-nav) { align-items: flex-start; }
.hud-nav { display: flex; flex-direction: column; gap: 0.45rem; }
.hud-nav-btns { display: flex; gap: 0.45rem; }
.hud-nav-btns .hud-btn.icon { min-height: 2.7rem; }
.arm-card { width: 0; min-width: 100%; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.4rem 0.5rem 0.45rem; border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: left; pointer-events: auto; }
.arm-card:active { transform: scale(0.96); }
.arm-card-head { display: flex; align-items: center; gap: 0.2rem; line-height: 1; }
.arm-card-head .ic { width: 14px; height: 14px; color: var(--p-muted); flex: none; }
.arm-card-head b { font-size: 0.9rem; font-weight: 800; color: var(--p-lime); white-space: nowrap; }
.arm-card-pct { margin-left: auto; font-family: var(--p-num); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--p-ink); }
.arm-card-foot { font-size: 0.66rem; font-weight: 700; color: var(--p-muted); white-space: nowrap; line-height: 1.1; }
.arm-card .machine-arm { height: 5px; margin: 0; }
.arm-card.is-max { border-color: rgba(255, 203, 5, 0.6); background: linear-gradient(135deg, rgba(255, 203, 5, 0.22), rgba(255, 90, 54, 0.22)), var(--p-panel); }
.arm-card.is-max b, .arm-card.is-max .arm-card-foot { color: #ffcb05; }
.machine-arm { display: block; width: 100%; height: 3px; margin-top: 0.3rem; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.machine-arm i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4fc3f7, var(--p-lime) 60%, #ffcb05); transition: width 0.4s ease; }
.machine-arm.is-max i { background: linear-gradient(90deg, #ffcb05, #ff5a36); animation: time-blink 0.8s ease-in-out infinite; }
.grade-tag { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 6px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.5; white-space: nowrap; color: #d9e2ea; background: rgba(255, 255, 255, 0.12); vertical-align: middle; }
.grade-tag.g1 { color: #1b1030; background: linear-gradient(120deg, #e3c8ff, #b388ff); }
.grade-tag.g2 { color: #2a1a00; background: linear-gradient(120deg, #fff6b0, #ffcb05 45%, #ff9a1f 60%, #fff6b0); background-size: 200% 100%; animation: tier-shine 2.4s linear infinite; }

.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.mech-chip, .bag-btn { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--p-line); background: var(--p-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--p-ink); font-size: 0.74rem; font-weight: 800; white-space: nowrap; touch-action: manipulation; }
.mech-chip .ic, .bag-btn .ic { width: 16px; height: 16px; }
.mech-chip small { color: var(--p-muted); font-size: 0.62rem; font-weight: 700; }
.mech-chip:disabled { opacity: 0.45; }
.mech-chip:active:not(:disabled), .bag-btn:active { transform: scale(0.94); }
.bag-btn { color: var(--p-lime); box-shadow: inset 0 0 0 3px rgba(214, 255, 74, 0.1); }
.bag-btn.on { color: #141a06; background: var(--p-lime); border-color: transparent; }
.bag-badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--p-hot); color: #fff; font-family: var(--p-num); font-size: 12px; font-weight: 400; line-height: 18px; text-align: center; }

.bag-panel { position: absolute; z-index: 5; right: calc(1.25rem + var(--safe-r)); bottom: calc(1.25rem + var(--safe-b) + 6.4rem + 3.2rem); width: min(19rem, calc(100vw - 2rem)); max-height: calc(100% - 7rem - var(--safe-t) - var(--safe-b)); overflow-y: auto; padding: 0.6rem 0.7rem 0.7rem; border-radius: 18px; border: 1px solid var(--p-line); background: rgba(10, 14, 20, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--p-shadow); animation: bag-in 0.18s cubic-bezier(0.2, 1.3, 0.4, 1); transform-origin: bottom right; }
@keyframes bag-in { from { opacity: 0; transform: scale(0.9) translateY(8px); } }
.bag-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; color: var(--p-lime); }
.bag-head .ic { width: 18px; height: 18px; }
.bag-head b { flex: 1; font-size: 0.9rem; }
.bag-close { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.bag-close .ic { width: 16px; height: 16px; }
.bag-sec h3 { margin: 0.45rem 0 0.3rem; font-size: 0.66rem; letter-spacing: 0.12em; color: var(--p-muted); }
.bag-sec .note { margin: 0; font-size: 0.7rem; color: var(--p-muted); }
.bag-panel { width: max-content; max-width: min(21rem, calc(100vw - 2rem)); }
.bag-body { display: flex; flex-wrap: wrap; column-gap: 0.9rem; }
.bag-sec { flex: 0 1 auto; min-width: 0; }
.bag-grid { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.play-settings h2 { margin-top: 0; }
.play-settings .set-h { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); }
.play-settings .seg.mini button:disabled { opacity: 0.4; }
.play-settings .switch:disabled { opacity: 0.4; }
.btn.mini { padding: 6px 10px; font-size: 12px; border-radius: 10px; }
.btn.mini .ic { width: 14px; height: 14px; }
.stage-look { background: linear-gradient(120deg, color-mix(in srgb, #ffcb05 12%, var(--panel)), var(--panel)); }

@media (orientation: landscape) and (max-height: 520px), (orientation: portrait) and (max-width: 520px) {
  .machine-btn { flex-direction: column; align-items: flex-start; }
  .hud-nav, .hud-nav-btns { gap: 0.35rem; }
  .hud-nav-btns .hud-btn.icon { min-width: 2.6rem; min-height: 2.5rem; }
  .arm-card { padding: 0.35rem 0.45rem 0.4rem; border-radius: 10px; gap: 0.2rem; }
  .arm-card-head b { font-size: 0.82rem; }
  .arm-card-pct { font-size: 0.85rem; }
  .arm-card-foot { font-size: 0.62rem; }
  .hud-right { gap: 0.4rem; }
  .mech-chip, .bag-btn { padding: 0.38rem 0.7rem; font-size: 0.7rem; }
  .bag-panel { right: calc(0.9rem + var(--safe-r)); bottom: calc(0.7rem + var(--safe-b) + 5.2rem + 2.9rem); }
  .play.has-mechs .bag-panel { bottom: calc(0.7rem + var(--safe-b) + 5.2rem + 5.4rem); }
  .chat-rail { top: calc(7.2rem + var(--safe-t)); bottom: auto; left: calc(0.9rem + var(--safe-l)); right: auto; align-items: flex-start; }
  .chat-bubble { border-radius: 12px 12px 12px 4px; }
  .zoom-tools { top: calc(3.2rem + var(--safe-t)); right: calc(0.9rem + var(--safe-r)); transform: none; flex-direction: row; }
  .zoom-btn { min-width: 2.3rem; min-height: 2.3rem; font-size: 1.1rem; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .bag-panel, .play.has-mechs .bag-panel { top: auto; bottom: calc(0.7rem + var(--safe-b)); right: calc(10rem + var(--safe-r)); transform-origin: bottom right; max-height: calc(100% - 1.2rem - var(--safe-t) - var(--safe-b)); max-width: min(26rem, 52vw); }
}
@media (orientation: portrait) and (max-width: 520px) {
  .predict, .play.has-mechs .predict { top: calc(6rem + var(--safe-t)); }
  .chat-rail { top: calc(8.4rem + var(--safe-t)); }
  .zoom-tools { top: 42%; flex-direction: column; }
}

/* ————— カードパック開封（なぞって切る → 束 → 1 枚ずつめくる → 一覧） ————— */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cp { position: fixed; inset: 0; z-index: 36; overflow: hidden; color: #fff; opacity: 0; transition: opacity 0.3s ease; user-select: none; -webkit-user-select: none; touch-action: none; perspective: 1200px; --cw: min(62vw, 300px, calc(50vh * 0.716)); --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 40%; --leak: rgba(255, 255, 255, 0.95); --nowc: #ffffff; }
.cp.is-on { opacity: 1; }
.cp.best-gold { --leak: rgba(255, 205, 90, 0.95); }
.cp.best-legend { --leak: rgba(255, 232, 150, 1); }
.cp.now-holo { --nowc: #7fd8ff; }
.cp.now-gold { --nowc: #ffc94d; }
.cp.now-rainbow { --nowc: #ff9ae0; }
.cp.now-legend { --nowc: #ffe27a; }

/* 背景 */
.cp-bg { position: absolute; inset: -40px; background: radial-gradient(120% 80% at 50% 30%, #2d3c90 0%, #141a46 46%, #05071a 100%); transition: filter 0.6s ease; }
.cp-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--nowc) 42%, transparent), transparent 55%); opacity: 0; transition: opacity 0.5s ease; }
.cp[class*="now-"]:not(.now-plain) .cp-bg::after { opacity: 1; }
.cp.now-legend .cp-bg { background: radial-gradient(circle at 50% 44%, rgba(255, 226, 122, 0.4), transparent 50%), repeating-linear-gradient(135deg, #2e2100 0 44px, #1c1400 44px 88px); }
.cp.charge .cp-bg { filter: brightness(0.3); }
.cp-bokeh { position: absolute; inset: 0; }
.cp-bokeh i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(170, 190, 255, 0.34), rgba(170, 190, 255, 0) 70%); animation: cp-drift 12s ease-in-out infinite alternate; }
.cp.now-gold .cp-bokeh i, .cp.now-legend .cp-bokeh i { background: radial-gradient(circle, rgba(255, 215, 110, 0.45), transparent 70%); }
.cp.now-rainbow .cp-bokeh i { background: radial-gradient(circle, rgba(255, 160, 230, 0.4), transparent 70%); }
.no-particles .cp-bokeh { display: none; }
@keyframes cp-drift { from { transform: translate(0, 0) scale(1); opacity: 0.3; } to { transform: translate(30px, -60px) scale(1.25); opacity: 0.85; } }
.cp-rays { position: absolute; left: 50%; top: 46%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; background: repeating-conic-gradient(color-mix(in srgb, var(--nowc) 36%, transparent) 0 5deg, transparent 5deg 14deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 42%); mask: radial-gradient(circle, #000 0, transparent 42%); opacity: 0; animation: gf-spin 18s linear infinite; transition: opacity 0.5s ease; pointer-events: none; }
.cp.now-rainbow .cp-rays { background: repeating-conic-gradient(rgba(255, 120, 200, 0.45) 0 5deg, transparent 5deg 14deg, rgba(120, 220, 255, 0.45) 14deg 19deg, transparent 19deg 28deg, rgba(255, 230, 120, 0.45) 28deg 33deg, transparent 33deg 42deg); }
.cp.now-gold .cp-rays, .cp.now-rainbow .cp-rays, .cp.now-legend .cp-rays { opacity: 1; }
.cp.st-summary .cp-rays { opacity: 0.35; }
.cp.st-summary .cp-bg { filter: brightness(0.7); }
.cp.charge .cp-rays { opacity: 0.5; animation-duration: 3s; }
.cp-beam { position: absolute; left: 50%; bottom: -12%; width: calc(var(--cw) * 1.7); height: 130%; transform: translateX(-50%) scaleX(0.2); background: radial-gradient(50% 100% at 50% 100%, rgba(255, 236, 160, 0.95), rgba(255, 200, 80, 0.35) 40%, transparent 70%); opacity: 0; transition: opacity 0.6s ease, transform 0.8s ease; pointer-events: none; mix-blend-mode: screen; }
.cp.charge-legend .cp-beam { opacity: 1; transform: translateX(-50%) scaleX(1); }
.cp.charge-rainbow .cp-beam { opacity: 0.75; transform: translateX(-50%) scaleX(0.75); background: radial-gradient(50% 100% at 50% 100%, rgba(255, 170, 235, 0.85), rgba(120, 200, 255, 0.3) 40%, transparent 70%); }
.cp-beam.pulse { animation: cp-beat 0.45s ease-out; }
@keyframes cp-beat { 0% { filter: brightness(2); } 100% { filter: brightness(1); } }

/* 上：進み具合・スキップ */
.cp-head { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 14px); height: 30px; display: flex; justify-content: center; align-items: center; z-index: 6; pointer-events: none; }
.cp-dots { display: flex; gap: 6px; transition: opacity 0.3s ease; }
.cp-dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); transition: background 0.3s ease, box-shadow 0.3s ease; }
.cp-dots i.on { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); }
.cp.st-pack .cp-dots, .cp.st-cut .cp-dots, .cp.st-summary .cp-dots { opacity: 0; }
.cp-skip { position: absolute; right: calc(var(--safe-r) + 14px); pointer-events: auto; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(10, 14, 40, 0.5); color: #dfe5ff; font-weight: 800; font-size: 12px; padding: 6px 14px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; }
.cp.st-summary .cp-skip { display: none; }

/* パック */
.cp-stage { position: absolute; left: 50%; top: 46%; width: var(--cw); aspect-ratio: 63 / 88; transform: translate(-50%, -50%); }
.cp-pack { position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * 1.04); aspect-ratio: 0.6; transform: translate(-50%, -50%) translateY(-120vh) rotate(-14deg); transition: transform 0.85s cubic-bezier(0.2, 1.25, 0.35, 1); filter: drop-shadow(0 30px 36px rgba(0, 0, 0, 0.55)); cursor: grab; }
.cp.is-on .cp-pack { transform: translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry)); }
.cp.is-on.st-pack .cp-pack { animation: cp-float 3.2s ease-in-out 0.9s infinite; }
@keyframes cp-float { 50% { translate: 0 -9px; } }
.cp.st-cut .cp-pack { animation: cp-jolt 0.35s ease-out; }
@keyframes cp-jolt { 30% { translate: 0 7px; } 100% { translate: 0 0; } }
.cp.st-out .cp-pack, .cp.st-cards .cp-pack, .cp.st-summary .cp-pack { transform: translate(-50%, -50%) translateY(120vh) rotate(8deg); transition: transform 0.7s cubic-bezier(0.55, 0, 0.8, 0.3); }
.cp-pack-body, .cp-pack-cap { position: absolute; left: 0; right: 0; overflow: hidden; background: radial-gradient(90% 60% at 50% 36%, color-mix(in srgb, var(--pack) 50%, #fff) 0%, var(--pack) 48%, color-mix(in srgb, var(--pack) 42%, #000) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -40px 60px rgba(0, 0, 0, 0.25); }
.cp-pack-body { top: 17%; bottom: 0; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.cp-pack-cap { top: 0; height: 17.3%; transform-origin: 15% 100%; transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.6s ease 0.1s; -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.cp.st-cut .cp-pack-cap, .cp.st-out .cp-pack-cap, .cp.st-cards .cp-pack-cap, .cp.st-summary .cp-pack-cap { transform: translate(24%, -170%) rotate(-26deg); opacity: 0; }
.cp-crimp { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 2px, rgba(0, 0, 0, 0.22) 2px 5px), linear-gradient(color-mix(in srgb, var(--pack) 65%, #000), color-mix(in srgb, var(--pack) 80%, #fff)); }
.cp-crimp.top { top: 0; height: 46%; }
.cp-crimp.bottom { bottom: 0; height: 6.5%; }
.cp-pack-art { position: absolute; left: 0; right: 0; top: 8%; height: 56%; display: grid; place-items: center; }
.cp-pack-burst { position: absolute; width: 125%; aspect-ratio: 1; background: repeating-conic-gradient(rgba(255, 255, 255, 0.24) 0 7deg, transparent 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 64%); mask: radial-gradient(circle, #000 18%, transparent 64%); animation: gf-spin 26s linear infinite; }
.cp-pack-mon { position: relative; width: 80%; image-rendering: pixelated; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.18)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.4)); }
.cp-pack-brand { position: absolute; left: 0; right: 0; top: 2.5%; text-align: center; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.34em; font-size: calc(var(--cw) * 0.058); color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.cp-pack-name { position: absolute; left: 0; right: 0; bottom: 21%; text-align: center; font-weight: 900; font-style: italic; font-size: calc(var(--cw) * 0.105); letter-spacing: 0.04em; text-shadow: 0 3px 0 color-mix(in srgb, var(--pack) 45%, #000), 0 0 16px rgba(0, 0, 0, 0.35); }
.cp-pack-count { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); padding: 1px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); font-family: "Bebas Neue", sans-serif; font-size: calc(var(--cw) * 0.085); line-height: 1.15; white-space: nowrap; }
.cp-pack-count small { font-family: system-ui, sans-serif; font-weight: 800; font-size: 0.45em; margin-left: 3px; vertical-align: 0.2em; }
.cp-pack-foil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.6) 44%, rgba(190, 230, 255, 0.4) 50%, transparent 62%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px); background-size: 260% 100%, auto; background-position: calc(100% - var(--mx)) 0, 0 0; mix-blend-mode: overlay; transition: background-position 0.15s ease-out; }
.cp-pack-body::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.45) 50%, transparent 62%); background-size: 280% 100%; animation: thumb-sheen 3.4s ease-in-out infinite; mix-blend-mode: overlay; pointer-events: none; }

/* 切り取り線 */
.cp-cutline { position: absolute; left: 2%; right: 2%; top: 17%; height: 0; z-index: 3; --ca: 0%; --cb: 0%; }
.cp-cutline::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; border-top: 2px dashed rgba(255, 255, 255, 0.6); transition: opacity 0.2s ease; }
.cp-cut-trail { position: absolute; top: -2px; height: 4px; left: var(--ca); width: calc(var(--cb) - var(--ca)); border-radius: 2px; background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--best) 55%, #fff), #fff); box-shadow: 0 0 10px #fff, 0 0 24px var(--best); }
.cp-cut-head { position: absolute; top: -11px; left: var(--cb); width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, color-mix(in srgb, var(--best) 60%, #fff) 44%, transparent 70%); opacity: 0; transition: opacity 0.15s ease; }
.cp.cutting.st-pack .cp-cut-head { opacity: 1; }
.cp-cut-guide { position: absolute; top: -8px; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff, 0 0 26px rgba(160, 200, 255, 0.9); opacity: 0; }
.cp.guide.st-pack:not(.cutting) .cp-cut-guide { animation: cp-guide 1.7s ease-in-out infinite; }
@keyframes cp-guide { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 80% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
.cp:not(.st-pack) .cp-cutline::before { opacity: 0; }
.cp:not(.st-pack):not(.st-cut) .cp-cut-trail { opacity: 0; transition: opacity 0.3s ease; }
/* 切り口から漏れる光（中身の格で色が変わる） */
.cp-leak { position: absolute; left: 2%; right: 2%; bottom: 83%; height: 90vh; z-index: 2; pointer-events: none; -webkit-mask: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 100%); mask: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.5) 30%, transparent 100%); }
.cp-leak::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--leak), color-mix(in srgb, var(--leak) 30%, transparent) 40%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); transform-origin: bottom; transform: scaleY(0); opacity: 0; transition: transform 0.55s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.4s ease; }
.cp.best-rainbow .cp-leak::before { background: linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #ff6fb5, #ffe066, #7ee081, #4fc3f7, #b388ff, #ff6fb5); background-size: 100% 100%, 200% 100%; animation: cp-hue 1.4s linear infinite; }
@keyframes cp-hue { to { background-position: 0 0, -200% 0; } }
.cp.st-cut .cp-leak::before { transform: scaleY(1); opacity: 1; }
.cp.best-legend.st-cut .cp-leak::before { animation: cp-leak-flick 0.3s steps(2) infinite; }
@keyframes cp-leak-flick { 50% { filter: brightness(1.5); } }

/* カードの束 */
.cp-deck { position: absolute; inset: 0; transform: translateY(26%) scale(0.8); opacity: 0; transition: transform 0.75s cubic-bezier(0.2, 1.3, 0.35, 1), opacity 0.35s ease; pointer-events: none; }
.cp.st-out .cp-deck, .cp.st-cards .cp-deck { transform: none; opacity: 1; }
.cp.st-summary .cp-deck { opacity: 0; transform: scale(0.9); }
.cp-card { position: absolute; inset: 0; --k: 0; --drag: 0px; --sc: 1; --lift: 0px; transform: translate(calc(var(--k) * 7px + var(--drag)), calc(var(--k) * -10px + var(--lift))) rotate(calc(var(--k) * 3.2deg + var(--drag) * 0.05deg)) scale(var(--sc)); transition: transform 0.45s cubic-bezier(0.2, 1.2, 0.4, 1), opacity 0.3s ease; }
.cp-card.dragging { transition: none; }
.cp-card:not(.is-top) .cp-flip { filter: brightness(0.62); }
.cp-card.gone { transform: translate(calc(var(--gx) * 110vw), -18vh) rotate(calc(var(--gx) * 38deg)); opacity: 0; transition: transform 0.5s cubic-bezier(0.4, 0, 0.8, 0.4), opacity 0.4s ease 0.1s; }
.cp-card.lift { --sc: 1.07; --lift: -16px; }
.cp-card.charge { --sc: 1.1; --lift: -26px; }
.cp-card.showcase { --sc: 1.4; z-index: 60 !important; transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1); }
.cp-flip { position: absolute; inset: 0; transform-style: preserve-3d; --turn: 180deg; transform: rotateX(var(--rx)) rotateY(calc(var(--turn) + var(--ry))); transition: transform 0.14s ease-out; }
.cp-card:not(.is-top) .cp-flip { transform: rotateY(180deg); }
.cp-card.flip .cp-flip, .cp-card.shown .cp-flip { --turn: 0deg; }
.cp-card.flip .cp-flip { transition: transform 0.65s cubic-bezier(0.3, 1.35, 0.5, 1); }
.cp-card.shown .cp-flip { transition: transform 0.3s ease-out; }
.cp-card.lv-rainbow.charge .cp-flip { animation: cp-spin 1.15s cubic-bezier(0.55, 0, 0.45, 1) forwards; }
.cp-card.lv-legend.charge .cp-flip { animation: cp-tremble 0.07s linear infinite; }
.no-shake .cp-card.lv-legend.charge .cp-flip { animation: none; }
@keyframes cp-spin { from { transform: rotateY(180deg); } to { transform: rotateY(900deg); } }
@keyframes cp-tremble { 0% { transform: rotateY(180deg) translate(1.5px, 0); } 50% { transform: rotateY(180deg) translate(-1.5px, 1px); } 100% { transform: rotateY(180deg) translate(0, -1px); } }
.cp-back, .cp-front { position: absolute; inset: 0; border-radius: calc(var(--cw) * 0.045); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cp-back { transform: rotateY(180deg); overflow: hidden; background: radial-gradient(circle at 50% 50%, #3f7fd0 0 28%, #1d4c9e 58%, #11306a); border: calc(var(--cw) * 0.04) solid #f2c230; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); display: grid; place-items: center; }
.cp-back-ball { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 6px solid #1b1f3a; background: linear-gradient(#ee1515 0 46%, #1b1f3a 46% 54%, #fff 54%); position: relative; }
.cp-back-ball::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 5px solid #1b1f3a; }
.cp-back-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.35) 48%, transparent 60%); background-size: 260% 100%; animation: thumb-sheen 2.8s ease-in-out infinite; mix-blend-mode: overlay; }
/* 裏の光（レアほど強い）。めくる前だけ */
.cp-aura { position: absolute; inset: -9px; border-radius: calc(var(--cw) * 0.075); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.cp-card.is-top.lv-holo .cp-aura { opacity: 0.8; box-shadow: 0 0 20px 3px rgba(120, 210, 255, 0.6); }
.cp-card.is-top.lv-gold .cp-aura { opacity: 1; box-shadow: 0 0 26px 7px rgba(255, 200, 80, 0.8); background: linear-gradient(135deg, #fff1b8, #ffc83d, #fff1b8); filter: blur(4px); animation: cp-pulse 1.1s ease-in-out infinite; }
.cp-card.is-top.lv-rainbow .cp-aura { opacity: 1; background: conic-gradient(from var(--ang), #ff6fb5, #ffe066, #7ee081, #4fc3f7, #b388ff, #ff6fb5); filter: blur(9px); animation: cp-rot 1.8s linear infinite; }
.cp-card.is-top.lv-legend .cp-aura { opacity: 1; inset: -14px; background: conic-gradient(from var(--ang), #fff7d0, #ffb300, #fff, #ffd54f, #7a5200, #fff7d0); filter: blur(10px); animation: cp-rot 1s linear infinite, cp-flicker 0.8s steps(3) infinite; }
.cp-card.flip .cp-aura, .cp-card.shown .cp-aura, .cp-card.lv-rainbow.charge .cp-aura { opacity: 0 !important; }
.cp-card.lv-rainbow.charge .cp-back { box-shadow: 0 0 26px 6px rgba(255, 154, 224, 0.9), 0 0 60px 18px rgba(120, 200, 255, 0.55); }
@keyframes cp-pulse { 50% { opacity: 0.5; } }
@keyframes cp-rot { to { --ang: 360deg; } }
@keyframes cp-flicker { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }
/* 表 */
.cp-front { overflow: hidden; background: #222; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55); }
.cp-front img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cp-holo, .cp-glare { position: absolute; inset: 0; pointer-events: none; }
.cp-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.5), transparent 45%); mix-blend-mode: overlay; }
.cp-card.lv-plain .cp-holo { display: none; }
.cp-card.lv-holo .cp-holo { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, transparent 60%); background-size: 250% 100%; background-position: calc(100% - var(--mx)) 0; mix-blend-mode: overlay; }
.cp-card.lv-gold .cp-holo { background: linear-gradient(115deg, transparent 25%, rgba(255, 215, 90, 0.7) 42%, rgba(255, 255, 255, 0.85) 48%, rgba(255, 215, 90, 0.7) 54%, transparent 70%); background-size: 250% 100%; background-position: calc(100% - var(--mx)) 0; mix-blend-mode: overlay; }
.cp-card.lv-rainbow .cp-holo, .cp-card.lv-legend .cp-holo { background: repeating-linear-gradient(115deg, rgba(255, 90, 160, 0.5) 0%, rgba(255, 230, 90, 0.5) 8%, rgba(110, 240, 160, 0.5) 16%, rgba(90, 200, 255, 0.5) 24%, rgba(180, 130, 255, 0.5) 32%, rgba(255, 90, 160, 0.5) 40%); background-size: 300% 300%; background-position: var(--mx) var(--my); mix-blend-mode: color-dodge; opacity: 0.5; }
.cp-card.lv-legend .cp-holo::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px); background-size: 16px 16px; mix-blend-mode: overlay; animation: cf-twinkle 1.1s ease-in-out infinite alternate; }
.cp-card.flip .cp-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%); background-size: 300% 100%; animation: cp-sweep 0.9s ease-out 0.25s both; mix-blend-mode: overlay; pointer-events: none; }
@keyframes cp-sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.cp-card.showcase .cp-front img { animation: cp-pan 2.6s ease-in-out both; }
@keyframes cp-pan { 0% { transform: scale(1); } 22% { transform: scale(1.55) translateY(15%); } 78% { transform: scale(1.55) translateY(-15%); } 100% { transform: scale(1); } }
.cp-newtag { position: absolute; top: 4%; left: 0; padding: 2px 10px 1px 8px; background: linear-gradient(90deg, #ff3d5a, #ff7a2e); color: #fff; font-style: normal; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.14em; font-size: calc(var(--cw) * 0.075); line-height: 1.1; border-radius: 0 6px 6px 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); transform: translateX(-110%); }
.cp-card.shown .cp-newtag { transform: none; transition: transform 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.1s; }

/* 光・文字 */
.cp-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 7; }
.cp-flash.go { animation: gf-flash 0.6s ease-out; }
.cp.charge-legend .cp-flash { background: #ffe9a0; animation: cf-thunder 0.5s steps(2) infinite; }
.cp-banner { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 8%); text-align: center; font-family: "Bebas Neue", sans-serif; font-size: clamp(2.2rem, 11vw, 4.4rem); letter-spacing: 0.14em; line-height: 1; background: linear-gradient(90deg, #fff 0%, var(--nowc) 30%, #fff 50%, var(--nowc) 70%, #fff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7)); opacity: 0; pointer-events: none; z-index: 5; }
.cp.now-rainbow .cp-banner { background-image: linear-gradient(90deg, #ff6fb5, #ffe066, #7ee081, #4fc3f7, #b388ff, #ff6fb5); }
.cp-banner.on { animation: cp-banner 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both, cp-shine 2s linear 0.7s infinite; }
@keyframes cp-banner { from { opacity: 0; transform: scale(1.9); letter-spacing: 0.5em; } to { opacity: 1; transform: scale(1); letter-spacing: 0.14em; } }
@keyframes cp-shine { to { background-position: -200% 0; } }
.cp-sparks { position: absolute; left: 50%; top: 46%; pointer-events: none; z-index: 4; }
.cp-sparks i { position: absolute; width: calc(12px * var(--s)); height: calc(12px * var(--s)); margin: -6px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, var(--c) 45%, transparent 70%); opacity: 0; animation: cf-spark 1.1s ease-out forwards; }
.cp-rain { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.cp-rain i { position: absolute; top: -5%; width: calc(7px * var(--s)); height: calc(13px * var(--s)); background: linear-gradient(#fff6c8, #ffc83d); border-radius: 2px; opacity: 0; animation: cp-fall linear forwards; }
@keyframes cp-fall { 0% { opacity: 0; transform: translateY(0) rotate(var(--r)); } 10% { opacity: 1; } 100% { opacity: 0; transform: translateY(110vh) rotate(calc(var(--r) + 540deg)); } }
.cp-info { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 3.2rem); width: min(90vw, 380px); transform: translate(-50%, 20px); opacity: 0; text-align: center; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); pointer-events: none; z-index: 5; }
.cp-info.on { opacity: 1; transform: translate(-50%, 0); }
.cp-info-top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cp-info-top b { font-size: 1.05rem; font-weight: 900; letter-spacing: 0.04em; }
.cp-info-sub { margin-top: 5px; font-size: 0.75rem; color: #c7cff5; }
.cp-new, .cp-dup { font-style: normal; padding: 1px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 900; }
.cp-new { background: linear-gradient(90deg, #ff3d5a, #ff7a2e); font-family: "Bebas Neue", sans-serif; font-size: 1rem; letter-spacing: 0.12em; font-weight: 400; }
.cp-dup { background: rgba(255, 255, 255, 0.14); }
.cp-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 1rem); text-align: center; font-size: 0.82rem; font-weight: 800; color: #d6ddff; letter-spacing: 0.06em; animation: gf-caret 0.8s ease-in-out infinite alternate; pointer-events: none; z-index: 5; }
.cp-hint.omen { color: #ffe08a; text-shadow: 0 0 12px rgba(255, 210, 100, 0.85); font-size: 0.95rem; }

/* 今回のカード一覧 */
.cp-summary { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: calc(var(--safe-t) + 24px) 16px calc(var(--safe-b) + 56px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 5; }
.cp.st-summary .cp-summary { opacity: 1; }
.cp-summary h2 { margin: 0; font-size: 1.25rem; font-weight: 900; letter-spacing: 0.06em; }
.cp-summary h2 small { font-size: 0.78rem; color: #c7cff5; margin-left: 6px; }
.cp-sum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 130px)); justify-content: center; gap: 14px 12px; width: min(94vw, 460px); }
.cp-sum-grid.n1 { grid-template-columns: minmax(0, 190px); }
.cp-sum-grid.n2, .cp-sum-grid.n4 { grid-template-columns: repeat(2, minmax(0, 150px)); }
.cp-sum-card { display: flex; flex-direction: column; align-items: center; gap: 7px; animation: cp-sum-in 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes cp-sum-in { from { opacity: 0; transform: translateY(24px) rotateY(90deg); } to { opacity: 1; transform: none; } }
.cp-sum-img { position: relative; width: 100%; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); --cw: 130px; }
.cp-sum-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-sum-card:not(.lv-plain) .cp-sum-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 60%); background-size: 260% 100%; animation: thumb-sheen 2.6s ease-in-out infinite; mix-blend-mode: overlay; }
.cp-sum-card.best .cp-sum-img { box-shadow: 0 0 0 2px var(--tier), 0 0 26px var(--tier), 0 10px 22px rgba(0, 0, 0, 0.5); }
.cp-sum-card .cp-newtag { transform: none; font-size: 13px; }

/* レアリティの記号 */
.rsym { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.rsym svg { width: 13px; height: 13px; fill: currentColor; }
.rsym.big svg { width: 19px; height: 19px; }
.rsym-dia { color: #e8eeff; filter: drop-shadow(0 0 3px rgba(170, 195, 255, 0.85)); }
.rsym-star { color: #ffd54f; filter: drop-shadow(0 0 4px rgba(255, 200, 60, 0.85)); }
.rsym-shiny { color: #c9fbff; filter: drop-shadow(0 0 4px rgba(120, 230, 255, 0.95)); }
.rsym-crown { color: #ffe27a; filter: drop-shadow(0 0 6px rgba(255, 220, 100, 1)); }
.rsym-crown svg { width: 20px; height: 20px; }
.rsym-crown.big svg { width: 28px; height: 28px; }
.cf-tier .rsym { margin-right: 2px; }

@media (orientation: landscape) and (max-height: 600px) {
  .cp { --cw: min(30vw, calc(64vh * 0.716)); }
  .cp-stage, .cp-sparks, .cp-rays { left: 36%; top: 53%; }
  .cp-beam { left: 36%; }
  .cp-info { left: 72%; bottom: auto; top: 44%; width: min(42vw, 340px); }
  .cp-banner { left: 48%; top: 22%; font-size: clamp(2rem, 6vw, 3.6rem); }
  .cp-sum-grid, .cp-sum-grid.n2, .cp-sum-grid.n4 { grid-template-columns: repeat(auto-fit, minmax(0, 104px)); width: min(94vw, 640px); }
  .cp-sum-grid.n1 { grid-template-columns: minmax(0, 130px); }
  .cp-summary { gap: 10px; }
  .cp.st-pack .cp-hint, .cp.st-cards .cp-hint { left: 50%; bottom: calc(var(--safe-b) + 1.2rem); }
}