/* ASTERISM — 画面のスタイル（担当: ui）。トークンは theme.css。
   重い動き（box-shadow のアニメ・backdrop-filter）は避け、transform / opacity で動かす。 */

/* ===== 土台 ===== */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #1a2560 0%, rgba(20, 27, 68, 0) 60%),
    radial-gradient(90% 70% at 80% 110%, #1a1440 0%, rgba(26, 20, 64, 0) 60%),
    var(--bg-0);
}
#bg, #fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
#bg { z-index: 0; }
#app { position: fixed; inset: 0; z-index: 1; }
#fx { z-index: 2; }
#fatal { position: fixed; inset: 0; z-index: 9; background: var(--bg-0); padding: 24px; }
.host { position: absolute; inset: 0; overflow: hidden; }
.layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.scr { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; animation: scrIn calc(260ms * var(--speed)) ease-out; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.c-chips { color: var(--chips); }
.c-mult { color: var(--mult); }
.c-money { color: var(--money); }
.rar-common { color: var(--r-common); }
.rar-uncommon { color: var(--r-uncommon); }
.rar-rare { color: var(--r-rare); }
.rar-legendary { color: var(--r-legendary); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* 真鍮の角飾りのついた枠 */
.frame {
  position: relative;
  background: linear-gradient(180deg, rgba(22, 30, 72, 0.82), rgba(12, 17, 46, 0.86));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.frame::before, .frame::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1.5px solid rgba(255, 210, 122, 0.55);
}
.frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
.frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }

/* ===== ボタン ===== */
.btn {
  --b: rgba(255, 210, 122, 0.45);
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 44px; padding: 8px 18px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, rgba(44, 56, 120, 0.9), rgba(22, 29, 72, 0.95));
  border: 1px solid var(--b);
  color: var(--text); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.08s, filter 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.35); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; filter: saturate(0.4); }
.btn__sub { font-size: 12px; font-weight: 500; color: var(--text-dim); letter-spacing: 0.02em; }
.btn__kbd { position: absolute; top: 4px; right: 6px; font: 600 12px var(--font-num); color: var(--text-faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.btn--primary {
  background: linear-gradient(180deg, #ffe2a0, #e2a948 55%, #b97d2a);
  border-color: #ffe7b0; color: #2a1a05;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 #6e4712, 0 0 18px rgba(255, 210, 122, 0.25);
}
.btn--primary .btn__sub { color: rgba(42, 26, 5, 0.75); }
.btn--primary .btn__kbd { color: rgba(42, 26, 5, 0.6); border-color: rgba(42, 26, 5, 0.3); }
.btn--ghost { background: rgba(20, 27, 68, 0.5); --b: var(--line-hi); box-shadow: none; }
.btn--sm { min-height: 36px; padding: 5px 12px; font-size: 13px; border-radius: 8px; }
.btn--lg { min-height: 56px; padding: 10px 28px; font-size: 17px; }
.btn--block { width: 100%; }
.btn--icon { min-width: 40px; padding: 5px 10px; font-size: 16px; }
.btn--money { --b: rgba(255, 204, 61, 0.6); }
.btn--money .btn__label, .btn--money .btn__sub { color: var(--money); }
.btn--money-fill { background: linear-gradient(180deg, #ffe07a, #e0a91c 60%, #a87708); color: #2a1a05; border-color: #fff0b0; }
.btn--danger { --b: rgba(255, 100, 100, 0.55); color: #ffb3b3; }
.btn--discard {
  --b: rgba(255, 84, 112, 0.7);
  background: linear-gradient(180deg, #d63a58, #8f1f37);
  color: #fff; min-width: 96px; min-height: 64px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 #4d0d1c;
}
.btn--discard .btn__sub { color: rgba(255, 255, 255, 0.8); }
.btn--discard .btn__kbd { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.3); }
.btn.is-armed { --b: var(--bad); background: linear-gradient(180deg, #8f1f37, #5a1222); color: #fff; }
.btn.is-armed .btn__label { color: #fff; }

/* ===== 上の帯（遺物・消耗札・HUD） ===== */
.band { display: flex; align-items: flex-end; gap: 18px; padding: 12px 20px 0; flex-wrap: wrap; }
.bar-label { font-size: 12px; color: var(--text-faint); letter-spacing: 0.12em; margin: 0 0 4px 2px; }
.bar-label .num { color: var(--text-dim); }
.relics__row, .conss__row { display: flex; gap: 8px; }
.slot {
  position: relative; display: grid; place-items: center; padding: 4px 2px 2px; margin: 0;
  background: rgba(10, 14, 40, 0.45); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  color: inherit; touch-action: none;
}
.slot--relic { width: 78px; height: 92px; }
.slot--cons { width: 64px; height: 92px; }
.slot--empty { cursor: default; border-style: dashed; background: rgba(10, 14, 40, 0.25); }
.slot__empty { color: var(--text-faint); opacity: 0.5; font-size: 18px; }
.slot:not(.slot--empty):hover { border-color: var(--line-hi); background: rgba(30, 40, 96, 0.55); }
.slot.is-open { border-color: var(--accent); background: rgba(40, 50, 110, 0.6); }
.slot.is-dragging { opacity: 0.3; }
.slot.drop-before::before, .slot.drop-after::after {
  content: ''; position: absolute; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--accent);
}
.slot.drop-before::before { left: -6px; }
.slot.drop-after::after { right: -6px; }
.slot.is-fire { animation: fire calc(420ms * var(--speed)) ease-out; }
@keyframes fire {
  0% { transform: none; } 20% { transform: translateY(-6px) rotate(-6deg) scale(1.08); }
  45% { transform: translateY(-2px) rotate(5deg) scale(1.05); } 70% { transform: rotate(-2deg); } 100% { transform: none; }
}
.slot.is-grow { animation: grow calc(360ms * var(--speed)) ease-out; }
@keyframes grow { 50% { transform: scale(1.12); } }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; border-color: var(--accent); background: rgba(40, 50, 110, 0.9); }

/* 遺物の紋（components.relicEl） */
.relic { display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; --rc: var(--r-common); }
.relic[data-rarity="uncommon"] { --rc: var(--r-uncommon); }
.relic[data-rarity="rare"] { --rc: var(--r-rare); }
.relic[data-rarity="legendary"] { --rc: var(--r-legendary); }
.relic .sigil {
  width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #26306e, #0b0f2c 72%);
  box-shadow: 0 0 0 2px var(--rc), 0 0 0 4px rgba(10, 14, 40, 0.9), 0 0 0 5px rgba(255, 210, 122, 0.35), inset 0 0 14px rgba(0, 0, 0, 0.7);
}
.sigil__web line { stroke: rgba(170, 195, 255, 0.32); stroke-width: 1.2; }
.sigil__dots circle { fill: #d6e4ff; }
.sigil__glyph { fill: var(--rc, var(--accent)); font-size: 36px; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', var(--font-ui); }
.relic__name { font-size: 12px; color: var(--text-dim); max-width: 74px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relic[data-rarity="legendary"] .sigil { box-shadow: 0 0 0 2px var(--rc), 0 0 0 4px rgba(10, 14, 40, 0.9), 0 0 0 5px var(--rc), 0 0 16px rgba(255, 210, 122, 0.4), inset 0 0 14px rgba(0, 0, 0, 0.7); }
.slot.is-copy .sigil { background: radial-gradient(circle at 50% 38%, #3a3f7e, #0b0f2c 72%); }

/* 消耗札（components.consEl） */
.cons {
  display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none;
  width: 54px; padding: 4px 2px 3px; border-radius: 8px;
  background: linear-gradient(170deg, #1d3a72, #0d1a40);
  border: 1px solid rgba(159, 208, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.cons--obs { background: linear-gradient(170deg, #3a2470, #170f3c); border-color: rgba(192, 140, 255, 0.55); }
.cons .sigil { width: 40px; height: 40px; }
.cons .sigil__glyph { fill: var(--accent-2); font-size: 40px; }
.cons--obs .sigil__glyph { fill: #d4b4ff; }
.cons__name { font-size: 12px; line-height: 1.15; text-align: center; color: var(--text); max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cons__sub { font-size: 12px; color: var(--text-dim); max-width: 52px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* HUD */
.hud { margin-left: auto; display: flex; align-items: center; gap: 18px; padding-bottom: 6px; }
.hud__stat { display: flex; flex-direction: column; align-items: flex-end; }
.hud__k { font-size: 12px; color: var(--text-faint); letter-spacing: 0.1em; }
.hud__v, .hud__money { font: 700 24px var(--font-num); line-height: 1.1; }
.hud__v small { font-size: 14px; color: var(--text-faint); }
.hud__money { color: var(--money); }
.hud__btns { display: flex; gap: 6px; }
.is-bump { animation: bump calc(200ms * var(--speed)) ease-out; }
@keyframes bump { 40% { transform: scale(1.14); } }

/* 吹き出し（遺物・消耗札の説明と操作） */
.popover {
  position: fixed; z-index: 70; width: min(300px, calc(100vw - 16px)); padding: 12px 14px 12px;
  background: linear-gradient(180deg, #1c2560, #10163f); animation: popIn 0.12s ease-out;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } }
.popover__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.popover__title { font: 800 17px var(--font-title); color: #fff; }
.popover__sub { font-size: 12px; color: var(--text-dim); }
.popover__body { margin: 6px 0 4px; font-size: 14px; line-height: 1.55; }
.popover__note { margin: 4px 0; font-size: 12px; color: var(--text-dim); }
.popover__note.is-warn { color: #ffcf8a; }
.popover__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ツールチップ */
.tip {
  position: fixed; left: 0; top: 0; z-index: 90; max-width: 280px; padding: 10px 12px; pointer-events: none;
  background: #121a48; border: 1px solid var(--line-hi); border-radius: 10px; box-shadow: var(--shadow);
  opacity: 0; transition: opacity 0.1s;
}
.tip.is-on { opacity: 1; }
.tip__head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tip__title { font: 800 15px var(--font-title); }
.tip__sub { font-size: 12px; color: var(--text-dim); }
.tip__body { font-size: 13px; margin-top: 4px; line-height: 1.5; }
.tip__foot { font-size: 12px; color: var(--text-faint); margin-top: 6px; }

/* トースト */
.toasts { position: fixed; bottom: 16px; right: 16px; z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; max-width: min(360px, calc(100vw - 24px)); }
.toast {
  padding: 10px 14px; border-radius: 10px; background: #18205a; border: 1px solid var(--line-hi);
  box-shadow: var(--shadow); animation: toastIn 0.2s ease-out; transition: opacity 0.3s, transform 0.3s;
}
.toast.is-out { opacity: 0; transform: translateX(20px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } }
.toast__title { font-weight: 700; font-size: 14px; }
.toast__sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.toast--bad { border-color: rgba(255, 100, 100, 0.7); background: #3a1424; }
.toast--good { border-color: rgba(99, 230, 164, 0.6); }
.toast--achievement, .toast--unlock { border-color: var(--accent); background: linear-gradient(180deg, #2c2a5c, #1a1846); }
.toast--achievement .toast__title, .toast--unlock .toast__title { color: var(--accent); }

/* モーダル */
.modal { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; }
.modal__scrim { position: absolute; inset: 0; background: rgba(4, 6, 20, 0.72); animation: fadeIn 0.15s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal__panel { position: relative; width: min(560px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; animation: popIn 0.16s ease-out; background: linear-gradient(180deg, #19225a, #0e1440); }
.modal--wide .modal__panel { width: min(960px, 100%); }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.modal__title { margin: 0; font: 800 22px var(--font-title); letter-spacing: 0.06em; }
.modal__body { padding: 14px 18px 18px; overflow-y: auto; }
.modal__lead { margin: 0 0 12px; color: var(--text-dim); font-size: 14px; }
.modal__note { color: var(--text-faint); font-size: 12px; margin: 12px 0 0; }
.modal__sub { font-size: 12px; letter-spacing: 0.14em; color: var(--accent); margin: 16px 0 8px; }
.modal__sub:first-child { margin-top: 0; }
.err { color: var(--bad); }

/* meta（図鑑・記録・実績）の箱 */
.modal--meta .meta-box { position: relative; width: min(1100px, 100%); height: min(86vh, 860px); display: flex; flex-direction: column; animation: popIn 0.16s ease-out; }
.modal--meta .meta-box > * { flex: 1; min-height: 0; }

/* 次の目標 */
.goals { position: relative; width: min(460px, 100%); padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 12, 36, 0.6); text-align: left; }
.goals__title { font: 800 12px var(--font-title); letter-spacing: 0.16em; color: var(--accent); margin-bottom: 6px; }
.goals__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.goal { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 13px; }
.goal__text { color: var(--text); }
.goal__reward { grid-column: 1 / -1; font-size: 12px; color: var(--accent-2); }
.goal__bar { align-self: center; width: 70px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.goal__bar i { display: block; height: 100%; background: var(--accent); }
.endcard .goals { margin: 0 auto; }
.record { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.record__name { color: var(--text-dim); font-size: 13px; }
.record__text { color: #fff; }
.record__new { font-size: 12px; color: #062a18; background: var(--good); border-radius: 999px; padding: 0 8px; }

/* 役表 */
.htable { width: 100%; border-collapse: collapse; font-size: 14px; }
.htable th { text-align: left; font-size: 12px; color: var(--text-faint); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.htable td { padding: 6px; border-bottom: 1px solid rgba(150, 170, 255, 0.08); }
.htable__lv { color: var(--text-dim); text-align: center; }
.htable__lv.is-up { color: var(--accent); font-weight: 700; }
.htable__cm { font-weight: 700; white-space: nowrap; }
.htable__x { color: var(--text-faint); margin: 0 4px; font-weight: 400; }
.htable__cnt { text-align: right; color: var(--text-dim); }
.htable--compact { font-size: 13px; }
.htable--compact td { padding: 3px 4px; }
.htable--compact .htable__name { white-space: nowrap; }
.htable--compact tr.is-now td { background: rgba(255, 210, 122, 0.14); }
.htable--compact tr.is-now .htable__name { color: var(--accent); font-weight: 700; }

/* デッキ */
.deckview { display: flex; flex-direction: column; gap: 10px; }
.deckview__row { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; }
.deckview__head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.deckview__glyph { font-size: 18px; }
.deckview__glyph[data-suit="0"] { color: var(--s0); } .deckview__glyph[data-suit="1"] { color: var(--s1); }
.deckview__glyph[data-suit="2"] { color: var(--s2); } .deckview__glyph[data-suit="3"] { color: var(--s3); }
.deckview__n { color: var(--text-dim); margin-left: auto; }
.deckview__tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.deckview .tile { width: 40px; height: 48px; font-size: 8.5px; }
.tile.is-out { opacity: 0.25; filter: grayscale(0.8); }
.rankcount { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-bottom: 14px; }
.rankcount__c { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border: 1px solid var(--line); border-radius: 6px; }
.rankcount__r { font-weight: 800; font-size: 15px; }
.rankcount__n { font-size: 12px; color: var(--chips); }

/* 設定 */
.set__row { display: grid; grid-template-columns: 96px 1fr 40px; align-items: center; gap: 12px; min-height: 44px; }
.set__row--chk { grid-template-columns: 28px 1fr; cursor: pointer; }
.set__k { font-weight: 700; font-size: 14px; display: block; }
.set__d { font-size: 12px; color: var(--text-dim); }
.set__v { text-align: right; color: var(--text-dim); }
.range { width: 100%; accent-color: var(--accent); height: 28px; }
.chk { width: 22px; height: 22px; accent-color: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--line-hi); border-radius: 10px; overflow: hidden; grid-column: span 2; }
.seg__b { min-height: 40px; padding: 4px 16px; background: transparent; border: 0; color: var(--text-dim); cursor: pointer; font-weight: 700; }
.seg__b + .seg__b { border-left: 1px solid var(--line); }
.seg__b.is-on { background: linear-gradient(180deg, #ffe2a0, #d29a3e); color: #2a1a05; }
.howto { padding-left: 1.4em; line-height: 1.7; margin: 0; }
.howto li { margin-bottom: 6px; }
.howto b { color: var(--accent); }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.menu-run { margin: 16px 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; display: grid; gap: 4px; }
.menu-run__k { color: var(--text-faint); font-size: 12px; display: inline-block; min-width: 4em; }
.seed { font-weight: 700; letter-spacing: 0.1em; color: var(--accent-2); }
.menu-acts { display: grid; gap: 8px; margin-top: 8px; }
.meta-host { min-height: 200px; }

/* ===== 星札（components.tileEl） ===== */
.tile {
  --c: var(--s2);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05em;
  border-radius: 0.55em; overflow: hidden;
  background:
    radial-gradient(85% 60% at 50% 78%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%) padding-box,
    linear-gradient(170deg, #1f2964 0%, #0e1440 55%, #090d2a 100%) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--c) 75%, #fff 10%), color-mix(in srgb, var(--c) 25%, transparent)) border-box;
  border: 1.5px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0.2em 0.6em rgba(0, 0, 0, 0.5);
  font-size: 16px;
}
.tile::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 36%);
}
.tile[data-suit="0"] { --c: var(--s0); }
.tile[data-suit="1"] { --c: var(--s1); }
.tile[data-suit="2"] { --c: var(--s2); }
.tile[data-suit="3"] { --c: var(--s3); }
.tile__rank {
  position: relative; font-family: var(--font-num); font-weight: 800; font-size: 2.15em; line-height: 0.95; color: #fff;
  letter-spacing: -0.02em; text-shadow: 0 0 0.3em color-mix(in srgb, var(--c) 80%, transparent), 0 0.05em 0 rgba(0, 0, 0, 0.5);
}
.tile__glyph {
  position: relative; font-size: 1.3em; line-height: 1; color: var(--c);
  text-shadow: 0 0 0.45em var(--c), 0 0 0.12em #fff;
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', var(--font-ui);
}
.color-assist .tile__glyph { font-size: 1.85em; }
.tile__enh {
  position: absolute; top: 0.3em; right: 0.3em; width: 1.7em; height: 1.7em; font-size: 0.62em;
  display: grid; place-items: center; border-radius: 50%; font-weight: 700; line-height: 1;
  background: rgba(8, 10, 30, 0.85); color: var(--accent); border: 1px solid rgba(255, 210, 122, 0.7);
}
/* 強化の見分け */
.tile[data-enh="bright"] { box-shadow: inset 0 0 1.1em rgba(255, 255, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0.8em rgba(255, 255, 255, 0.25); }
.tile[data-enh="bright"] .tile__rank { text-shadow: 0 0 0.4em #fff, 0 0 0.2em #fff; }
.tile[data-enh="giant"]::after { content: ''; position: absolute; inset: 0.18em; border-radius: 50%; box-shadow: 0 0 0 0.12em rgba(255, 84, 112, 0.65), inset 0 0 0.9em rgba(255, 84, 112, 0.45); pointer-events: none; }
.tile[data-enh="nova"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 55%, rgba(255, 240, 200, 0.55), transparent 60%); animation: nova 1.6s ease-in-out infinite; }
@keyframes nova { 50% { opacity: 0.15; } }
.tile[data-enh="fixed"] {
  background:
    radial-gradient(85% 60% at 50% 78%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%) padding-box,
    linear-gradient(170deg, #1f2964 0%, #0e1440 55%, #090d2a 100%) padding-box,
    linear-gradient(160deg, #fff0bf, #c98f2e) border-box;
  border-width: 2.5px;
}
.tile[data-enh="wild"] {
  background:
    radial-gradient(85% 60% at 50% 78%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%) padding-box,
    linear-gradient(170deg, #1f2964 0%, #0e1440 55%, #090d2a 100%) padding-box,
    conic-gradient(from 30deg, #ff6b6b, #ffc94d, #e8eeff, #5aaaff, #c08cff, #ff6b6b) border-box;
  border-width: 2.5px;
}
.tile[data-enh="gold"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 82%, #ffd970 0 0.09em, transparent 0.16em),
    radial-gradient(circle at 80% 70%, #ffd970 0 0.07em, transparent 0.14em),
    radial-gradient(circle at 70% 88%, #fff1b8 0 0.06em, transparent 0.12em),
    radial-gradient(circle at 28% 66%, #ffd970 0 0.05em, transparent 0.1em);
}
.tile[data-enh="meteor"] {
  --c: #b9a68e;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.35) 0 14%, transparent 15%),
    radial-gradient(circle at 40% 75%, rgba(0, 0, 0, 0.3) 0 9%, transparent 10%),
    linear-gradient(160deg, #5a5048, #2c2620 70%) padding-box,
    linear-gradient(160deg, #a8957e, #4a3f35) border-box;
}
.tile[data-enh="meteor"] .tile__glyph { font-size: 2em; color: #ffb36b; text-shadow: 0 0 0.4em #ff7a2e; }
.tile--small { font-size: 12px; }

/* ===== 夜の画面 ===== */
.scr-round {
  --cell: 80px; /* 実際の値は fitBoard（round.js）が盤の入れ物の実寸から決める */
  --cell-max: 104px;
  --gap: 7px;
  --card-w: clamp(64px, 10.5vh, 96px);
  --lwl: 92px; --lwr: 112px; --lh: 44px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(220px, 268px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "band band band" "info board side" "info hand side";
  gap: 10px 20px;
  padding: 12px 20px 14px;
}
.band--round { grid-area: band; display: grid; grid-template-columns: subgrid; align-items: end; padding: 0; gap: 20px; }
.band--round .relics { grid-column: 2; justify-self: center; }
.band--round .conss { grid-column: 3; justify-self: end; }

/* 左の情報 */
.info { grid-area: info; display: flex; flex-direction: column; gap: 12px; padding: 14px; align-self: start; max-height: 100%; overflow: hidden; }
.info__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.blind-token {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
  font: 800 16px var(--font-title); color: #1a1405;
  background: radial-gradient(circle at 35% 30%, #fff1c4, #e2a948 60%, #8a5a18);
  box-shadow: 0 0 0 2px rgba(10, 14, 40, 0.9), 0 0 0 3px rgba(255, 210, 122, 0.6), 0 0 14px rgba(255, 210, 122, 0.3);
}
.blind-token[data-kind="big"] { background: radial-gradient(circle at 35% 30%, #d9ecff, #6fa8ff 60%, #2a4f9a); }
.blind-token[data-kind="boss"] { background: radial-gradient(circle at 35% 30%, #ffc9b8, #e0503a 60%, #6e1a10); color: #fff; }
.info__night { font: 800 18px var(--font-title); line-height: 1.2; }
.info__ante { font-size: 12px; color: var(--text-dim); }
.info__target { text-align: right; }
.info__tk { display: block; font-size: 12px; color: var(--text-faint); }
.info__tv { font-size: 22px; font-weight: 800; color: var(--accent); }
.bossbox {
  padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.45;
  background: linear-gradient(90deg, color-mix(in srgb, var(--boss, #6e1a10) 55%, transparent), rgba(110, 26, 16, 0.15));
  border: 1px solid rgba(255, 120, 90, 0.45);
}
.bossbox__k { display: block; font-size: 12px; letter-spacing: 0.16em; color: #ffb39e; }
.bossbox__info { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(255, 150, 120, 0.35); color: #ffe0d4; font-weight: 700; }
.cell.is-halo { box-shadow: inset 0 0 0 1px rgba(255, 200, 140, 0.45), inset 0 0 18px rgba(255, 180, 120, 0.18); }
.cell.is-halo::before { background: rgba(255, 200, 140, 0.8); width: 9px; height: 9px; margin: -4.5px; background: none; border: 1.5px solid rgba(255, 200, 140, 0.7); }
.cell.is-haze .cell__block { background: radial-gradient(circle, rgba(255, 170, 90, 0.28), rgba(255, 120, 60, 0.12) 55%, transparent 72%); animation: haze 0.9s ease-in-out infinite alternate; }
@keyframes haze { from { transform: scaleX(0.92) skewX(-4deg); opacity: 0.7; } to { transform: scaleX(1.06) skewX(4deg); opacity: 1; } }
.cell.is-blocking .cell__block { animation: blockIn calc(320ms * var(--speed)) ease-out; }
.cell.is-haze.is-blocking .cell__block { animation: blockIn calc(220ms * var(--speed)) ease-out, haze 0.9s 0.22s ease-in-out infinite alternate; }
@keyframes blockIn { from { transform: scale(0.2); opacity: 0; } }
.cell.is-unblock { animation: unblock calc(300ms * var(--speed)) ease-out; }
@keyframes unblock { from { background: rgba(255, 170, 90, 0.25); } }
.tile.is-washed { animation: washed calc(500ms * var(--speed)) ease-in forwards; }
@keyframes washed { to { transform: translateX(-120%) rotate(-12deg); opacity: 0; filter: blur(2px) hue-rotate(40deg); } }
.scorebox { position: relative; padding: 10px 12px 12px; border-radius: 10px; background: rgba(5, 8, 26, 0.55); border: 1px solid var(--line); overflow: hidden; }
.scorebox__k { font-size: 12px; color: var(--text-faint); letter-spacing: 0.12em; }
.scorebox__v { position: relative; display: block; font-size: 46px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.progress { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); margin-top: 6px; overflow: hidden; }
.progress__bar { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #4fa8ff, #ffd27a); transition: transform calc(500ms * var(--speed)) ease-out; }
.scorebox.is-hot { border-color: rgba(255, 170, 80, 0.8); background: linear-gradient(180deg, rgba(90, 40, 10, 0.6), rgba(30, 12, 6, 0.6)); }
.scorebox.is-hot::before {
  content: ''; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 120%; pointer-events: none;
  background: radial-gradient(50% 60% at 30% 100%, rgba(255, 140, 40, 0.55), transparent 70%), radial-gradient(40% 50% at 75% 100%, rgba(255, 90, 60, 0.45), transparent 70%);
  animation: flame 0.9s ease-in-out infinite alternate;
}
@keyframes flame { from { transform: translateY(6%) scaleY(0.92); opacity: 0.8; } to { transform: translateY(-4%) scaleY(1.06); opacity: 1; } }
.scorebox.is-hot .scorebox__v { background: linear-gradient(180deg, #fff6c8, #ffc04a 55%, #ff7a2e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(255, 150, 50, 0.6)); }
.scorebox.is-hot .progress__bar { background: linear-gradient(90deg, #ffb347, #fff1b8); }
.calc { padding: 10px; border-radius: 10px; background: rgba(5, 8, 26, 0.55); border: 1px solid var(--line); }
.calc__hand { display: flex; justify-content: space-between; align-items: baseline; min-height: 24px; margin-bottom: 6px; }
.calc__hn { font: 800 17px var(--font-title); }
.calc__lv { font: 700 13px var(--font-num); color: var(--accent); }
.calc__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.calc__x { font: 800 20px var(--font-num); color: var(--text-dim); }
.calc__box { min-width: 0; padding: 6px 10px; border-radius: 9px; font: 800 30px var(--font-num); line-height: 1.1; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc__box--chips { text-align: right; background: linear-gradient(180deg, #4a9cff, #1f5fc0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 0 #123a7a; }
.calc__box--mult { text-align: left; background: linear-gradient(180deg, #ff5f7a, #c22848); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 0 #6e1226; }
.calc__box.is-bump { animation: bump calc(180ms * var(--speed)) ease-out; }
.calc__box.is-xbump { animation: xbump calc(320ms * var(--speed)) ease-out; }
@keyframes xbump { 0% { filter: none; } 30% { transform: scale(1.22) rotate(-3deg); filter: hue-rotate(25deg) brightness(1.4); } 100% { transform: none; filter: none; } }
.calc.is-bump { animation: bump calc(220ms * var(--speed)); }
.calc.is-done { animation: done calc(380ms * var(--speed)) ease-out; }
@keyframes done { 30% { transform: scale(1.05); border-color: var(--accent); } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stat { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: rgba(5, 8, 26, 0.45); border: 1px solid rgba(150, 170, 255, 0.1); }
.stat__k { font-size: 12px; color: var(--text-dim); }
.stat__v { font: 800 22px var(--font-num); }
.stat.is-low .stat__v { color: var(--bad); }
.stat--money .stat__v { color: var(--money); }
.info__btns { display: flex; gap: 6px; }
.info__btns .btn { flex: 1; }

/* 星図 */
.boardarea { grid-area: board; min-width: 0; min-height: 0; display: grid; place-items: center; }
.boardwrap {
  position: relative;
  display: grid; grid-template-columns: var(--lwl) auto var(--lwr); grid-template-rows: var(--lh) auto;
}
.board {
  grid-column: 2; grid-row: 2; position: relative;
  display: grid; grid-template-columns: repeat(5, var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap); padding: var(--gap);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(40, 52, 120, 0.35), rgba(8, 12, 36, 0.55) 70%);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 0 40px rgba(0, 0, 0, 0.35);
}
.board__rings { position: absolute; left: 0; top: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 210, 122, 0.12); stroke-width: 0.25; pointer-events: none; }
.board__rings .r2, .board__rings .r3 { stroke: rgba(150, 170, 255, 0.12); stroke-dasharray: 0.8 0.8; }
.board__rings line { stroke: rgba(150, 170, 255, 0.08); }
.cell {
  position: relative; border-radius: 10px; background: rgba(8, 12, 36, 0.55);
  box-shadow: inset 0 0 0 1px rgba(150, 170, 255, 0.16);
  transition: background 0.12s;
}
.cell::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%;
  background: rgba(190, 205, 255, 0.35); box-shadow: 0 0 6px rgba(190, 205, 255, 0.4);
}
.cell::after { /* 罫線の十字 */
  content: ''; position: absolute; inset: 30%; pointer-events: none;
  background: linear-gradient(rgba(150, 170, 255, 0.12), rgba(150, 170, 255, 0.12)) center / 100% 1px no-repeat, linear-gradient(rgba(150, 170, 255, 0.12), rgba(150, 170, 255, 0.12)) center / 1px 100% no-repeat;
}
.cell.has-tile::before, .cell.has-tile::after { display: none; }
.cell > .tile { position: absolute; inset: 2px; font-size: calc(var(--cell) * 0.205); }
.has-one .cell.is-open { cursor: pointer; background: rgba(36, 44, 104, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 210, 122, 0.4); }
.has-one .cell.is-open:hover, .cell.is-target { background: rgba(60, 64, 130, 0.65); box-shadow: inset 0 0 0 2px var(--accent); }
.cell.is-cursor { box-shadow: inset 0 0 0 2px var(--accent-2); }
.cell.is-will { box-shadow: inset 0 0 0 2px rgba(255, 210, 122, 0.9), 0 0 14px rgba(255, 210, 122, 0.4); }
.cell.is-will > .tile:not(.is-ghost) { transform: translateY(-2px); }
.is-picking .cell { cursor: crosshair; }
.cell.is-picked { box-shadow: inset 0 0 0 3px var(--accent-2), 0 0 12px rgba(159, 208, 255, 0.5); }
.tile.is-ghost { opacity: 0.55; pointer-events: none; animation: ghost 1.1s ease-in-out infinite alternate; }
@keyframes ghost { to { opacity: 0.8; } }
.cell.is-block { background: rgba(0, 0, 0, 0.5); }
.cell.is-block::before, .cell.is-block::after { display: none; }
.cell__block {
  position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(circle, #02030a 58%, rgba(255, 130, 70, 0.7) 63%, rgba(255, 90, 40, 0.15) 70%, transparent 74%);
}
.cell.is-debuffed > .tile { filter: grayscale(0.85) brightness(0.6); }
.cell.is-debuffed > .tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 47%, rgba(255, 100, 100, 0.7) 48% 52%, transparent 53%); }
.cell.is-line > .tile { box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.45), 0 0.2em 0.6em rgba(0, 0, 0, 0.5); }
.cell.is-lit > .tile { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(255, 210, 122, 0.45); }
.cell.is-hit > .tile { animation: hit calc(240ms * var(--speed)) ease-out; }
@keyframes hit { 40% { transform: translateY(-8px) scale(1.12); } 100% { transform: translateY(-3px); } }
.cell.is-hitbad > .tile { animation: hitbad calc(260ms * var(--speed)); }
@keyframes hitbad { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.cell.is-kept > .tile { animation: kept calc(500ms * var(--speed)); }
@keyframes kept { 40% { transform: scale(1.1); filter: brightness(1.6); } }
.tile.is-drop { animation: drop calc(300ms * var(--speed)) cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes drop { from { transform: translateY(-22px) scale(1.18); opacity: 0.3; } to { transform: none; opacity: 1; } }
.tile.is-fall { animation: fall calc(320ms * var(--speed)) cubic-bezier(0.5, 0, 0.7, 1.4); }
@keyframes fall { from { transform: translate(var(--fx), var(--fy)); opacity: 0.6; } to { transform: none; opacity: 1; } }
.cell.is-landing { box-shadow: inset 0 0 0 2px var(--accent-2), 0 0 12px rgba(159, 208, 255, 0.5); }
.cell.is-marked { background: rgba(159, 208, 255, 0.09); }
.cell.is-marked::before { background: rgba(159, 208, 255, 0.7); }
.hint__move { color: var(--accent-2); font-weight: 700; }
.bubble--good { background: #b8f5d4; }
.tile.is-clearing { animation: clearOut calc(380ms * var(--speed)) ease-in forwards; }
@keyframes clearOut { 30% { transform: scale(1.12); filter: brightness(2); opacity: 1; } 100% { transform: scale(0.3); filter: brightness(3); opacity: 0; } }
.combo-badge {
  position: absolute; left: 50%; bottom: 4px; transform: translate(-50%, 0); z-index: 4; pointer-events: none; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font: 800 15px var(--font-num);
  background: linear-gradient(180deg, #ffb066, #e26a1e); color: #2a1004; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 14px rgba(255, 138, 61, 0.5);
}

/* 観測点（望遠鏡の照準の輪） */
.cell__obs {
  position: absolute; inset: -3px; z-index: 3; pointer-events: none; border-radius: 50%;
  border: 2px solid rgba(159, 208, 255, 0.85);
  box-shadow: 0 0 10px rgba(159, 208, 255, 0.55), inset 0 0 10px rgba(159, 208, 255, 0.35);
  background:
    linear-gradient(rgba(159, 208, 255, 0.9), rgba(159, 208, 255, 0.9)) 50% 0 / 2px 14% no-repeat,
    linear-gradient(rgba(159, 208, 255, 0.9), rgba(159, 208, 255, 0.9)) 50% 100% / 2px 14% no-repeat,
    linear-gradient(rgba(159, 208, 255, 0.9), rgba(159, 208, 255, 0.9)) 0 50% / 14% 2px no-repeat,
    linear-gradient(rgba(159, 208, 255, 0.9), rgba(159, 208, 255, 0.9)) 100% 50% / 14% 2px no-repeat;
}
.cell.is-obs { background: rgba(40, 70, 130, 0.55); }
.cell.is-obs::before { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.cell.is-obs.has-tile .cell__obs { opacity: 0.6; }
.cell.is-obs-on .cell__obs { animation: obsOn calc(700ms * var(--speed)) ease-out; }
@keyframes obsOn { 0% { transform: scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.cell.is-obs-hit .cell__obs { animation: obsHit calc(600ms * var(--speed)) ease-out; }
@keyframes obsHit { 30% { transform: scale(1.35); border-color: #fff; } }
.combo-badge.is-obs { background: linear-gradient(180deg, #d4ecff, #6fb4ff); color: #04203f; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 16px rgba(159, 208, 255, 0.7); }
.hint__combo.is-obs { color: var(--accent-2); }
.banner--obs .banner__t { color: #d4ecff; text-shadow: 0 0 30px rgba(159, 208, 255, 0.9), 0 4px 0 #0b2a50; }
.obsnote { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(159, 208, 255, 0.3); background: rgba(20, 40, 80, 0.35); }
.obsnote b { color: var(--accent-2); }
.obsnote__ring { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent-2); box-shadow: 0 0 6px rgba(159, 208, 255, 0.6); }
.finale { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255, 120, 90, 0.35); background: rgba(80, 20, 20, 0.25); }
.finale__k { color: #ffb39e; letter-spacing: 0.1em; }
.finale__n { font-weight: 800; color: #ffd0c2; }
.finale--big { width: min(940px, calc(100% - 32px)); margin: 6px auto 0; font-size: 14px; padding: 10px 16px; }
.finale--big .finale__n { font: 800 18px var(--font-title); }
.finale__d { flex-basis: 100%; color: var(--text-dim); }
.bossbox.is-disabled { background: rgba(40, 40, 60, 0.4); border-color: var(--line); }
.bossbox.is-disabled .bossbox__d { text-decoration: line-through; opacity: 0.6; }
.coach {
  position: relative; z-index: 8; width: max-content; max-width: min(600px, 100%);
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 10px;
  background: rgba(20, 34, 80, 0.94); border: 1px solid rgba(159, 208, 255, 0.55); font-size: 14px; box-shadow: var(--shadow);
  animation: popIn 0.3s ease-out;
}
.coach b { color: var(--accent-2); }
.coach__n { font: 700 12px var(--font-num); color: var(--text-faint); }
.coach__x { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-hi); background: transparent; color: var(--text-dim); cursor: pointer; }
.scr-round.is-scoring .coach { opacity: 0.35; }
/* スマホ: 案内は画面の上（遺物の列の上）に重ねて出し、星図や手札の場所を取らない */
.endcard__title.is-lose { color: #b9c3ff; }
.endcard__gap { color: var(--bad); margin-left: 6px; font-size: 14px; }
.lostboss { position: relative; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: center; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255, 120, 90, 0.45); background: rgba(80, 20, 20, 0.3); }
.lostboss__k { font-size: 12px; color: #ffb39e; letter-spacing: 0.12em; }
.lostboss__n { font: 800 18px var(--font-title); color: #ffd0c2; }
.lostboss__d { flex-basis: 100%; font-size: 13px; color: var(--text-dim); }

/* 列の端の「形」 */
.lbls--cols { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(5, var(--cell)); gap: var(--gap); padding: 0 var(--gap) 4px; align-items: end; }
.lbls--rows { grid-column: 3; grid-row: 2; display: grid; grid-template-rows: repeat(5, var(--cell)); gap: var(--gap); padding: var(--gap) 0 var(--gap) 8px; }
.lbl-corner { grid-row: 1; display: flex; align-items: flex-end; gap: 4px; padding-bottom: 4px; }
.lbl-corner--d0 { grid-column: 1; justify-content: flex-end; padding-right: 2px; }
.lbl-corner--d1 { grid-column: 3; justify-content: flex-start; padding-left: 8px; flex-direction: row-reverse; justify-content: flex-end; }
.lbl-arrow { color: var(--text-faint); font-size: 14px; line-height: 1; padding-bottom: 2px; }
.lbl { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; font-size: 12px; color: var(--text-dim); transition: color 0.1s; }
.lbls--rows .lbl { align-items: flex-start; justify-content: center; }
.lbl-corner .lbl { align-items: center; }
.lbl__dots { display: flex; gap: 3px; }
.lbl__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); }
.lbl__dots i.on { background: var(--accent-2); box-shadow: 0 0 4px rgba(159, 208, 255, 0.6); }
.lbl__tags { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.lbls--rows .lbl__tags { justify-content: flex-start; }
.lbl__tag { padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); white-space: nowrap; line-height: 18px; font-weight: 700; }
.lbl__tag--hand { color: var(--accent); }
.lbl__tag--run { color: var(--chips); }
.lbl__tag--off { color: #c9b8b0; font-weight: 700; background: rgba(120, 40, 30, 0.35); }
.lbl__tag--suit[data-suit="0"] { color: var(--s0); } .lbl__tag--suit[data-suit="1"] { color: var(--s1); }
.lbl__tag--suit[data-suit="2"] { color: var(--s2); } .lbl__tag--suit[data-suit="3"] { color: var(--s3); }
.lbl.is-off { opacity: 1; }
.lbl.is-through { color: var(--text); }
.lbl.is-through .lbl__tag { background: rgba(255, 255, 255, 0.12); }
.lbl.is-complete, .lbl.is-scoring, .lbl.is-scored { color: var(--accent); }
.lbl__done { font: 800 13px var(--font-ui); white-space: nowrap; padding: 1px 7px; border-radius: 6px; background: rgba(255, 210, 122, 0.16); border: 1px solid rgba(255, 210, 122, 0.6); color: #ffe9b8; }
.lbl__est { font: 700 12px var(--font-num); color: var(--text-dim); }
.lbl.is-scoring .lbl__done { background: linear-gradient(180deg, #ffe2a0, #d29a3e); color: #2a1a05; }
.lbl.is-scored .lbl__est { color: #fff; font-size: 15px; }

/* 盤の上の大きな文字 */
.board-banner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 20; }
.banner { grid-area: 1 / 1; text-align: center; animation: bannerIn var(--life, 1s) ease-out forwards; padding: 18px 40px; border-radius: 999px; background: radial-gradient(closest-side, rgba(6, 9, 24, 0.75), rgba(6, 9, 24, 0) 100%); }
.layer > .banner { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); }
@keyframes bannerIn {
  0% { opacity: 0; transform: scale(0.6); } 14% { opacity: 1; transform: scale(1.08); } 24% { transform: scale(1); }
  80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); }
}
.layer > .banner { animation-name: bannerInFixed; }
@keyframes bannerInFixed { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
.banner__t { font: 800 clamp(34px, 6vw, 64px) var(--font-title); color: #fff; letter-spacing: 0.06em; line-height: 1.1; text-shadow: 0 0 24px rgba(255, 210, 122, 0.6), 0 4px 0 rgba(0, 0, 0, 0.5); white-space: nowrap; }
.banner__s { margin-top: 6px; font: 700 18px var(--font-num); color: var(--text); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); }
.banner--combo .banner__t { color: #ffb066; text-shadow: 0 0 28px rgba(255, 138, 61, 0.8), 0 4px 0 #5a2008; }
.banner--k3 .banner__t { font-size: clamp(40px, 7.5vw, 80px); }
.banner--k4 .banner__t { font-size: clamp(46px, 9vw, 96px); color: #fff1b8; }
.banner--win .banner__t { color: #ffe9b8; }
.banner--lose .banner__t { color: #b9c3ff; text-shadow: 0 0 20px rgba(120, 140, 255, 0.5), 0 4px 0 rgba(0, 0, 0, 0.5); }
.banner--level .banner__t { font-size: clamp(28px, 4vw, 44px); color: var(--accent-2); }
.banner--level .banner__s { font-family: var(--font-ui); }

/* 右の早見 */
.side { grid-area: side; padding: 12px; align-self: start; max-height: 100%; overflow-y: auto; }
.side__title { display: flex; justify-content: space-between; align-items: baseline; font: 800 14px var(--font-title); letter-spacing: 0.08em; color: var(--accent); margin-bottom: 6px; }
.side__title small { font: 500 12px var(--font-ui); color: var(--text-faint); letter-spacing: 0; }

/* 手札 */
.handzone { grid-area: hand; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.hint { min-height: 24px; font-size: 13px; color: var(--text-dim); text-align: center; padding: 2px 12px; border-radius: 999px; }
.scr-round.is-scoring .hint { opacity: 0; }
.hint.is-preview { color: var(--text); background: rgba(10, 14, 40, 0.65); border: 1px solid var(--line); }
.hint__lines { color: var(--accent); font-weight: 700; }
.hint__combo { color: var(--xmult); font-weight: 800; }
.hint__est b { color: #fff; }
.hint__dim { color: var(--text-faint); }
.hint.is-nudge { animation: nudge 0.4s; }
@keyframes nudge { 25% { transform: translateX(-5px); color: var(--accent); } 75% { transform: translateX(5px); } }
.handzone__row { display: flex; align-items: flex-end; gap: 18px; }
.hand { display: flex; gap: 10px; align-items: flex-end; min-height: calc(var(--card-w) * 1.3 + 18px); padding-top: 18px; padding-bottom: 2px; }
.hand__empty { color: var(--text-faint); align-self: center; }
.hcard {
  position: relative; width: var(--card-w); height: calc(var(--card-w) * 1.3); padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; touch-action: none; color: inherit;
  transition: transform calc(140ms * var(--speed)) ease-out;
}
.hcard > .tile { position: absolute; inset: 0; font-size: calc(var(--card-w) * 0.215); border-radius: 0.6em; }
.hcard > .tile .tile__rank { font-size: 2.3em; }
.hcard > .tile .tile__glyph { font-size: 1.5em; }
.hcard:hover { transform: translateY(-6px); }
.hcard.is-sel { transform: translateY(-18px); }
.hcard.is-sel > .tile { box-shadow: 0 0 0 2px var(--accent), 0 12px 24px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 210, 122, 0.35); }
.hcard.is-lifted { opacity: 0.35; }
.hcard.is-debuffed > .tile { filter: grayscale(0.85) brightness(0.6); }
.hcard__off { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--bad); background: rgba(0, 0, 0, 0.6); padding: 0 6px; border-radius: 4px; }
.hcard__k { position: absolute; left: 6px; bottom: 4px; font: 600 12px var(--font-num); color: var(--text-faint); }
.hcard.is-new { animation: dealIn calc(340ms * var(--speed)) ease-out backwards; animation-delay: calc(var(--d, 0ms) * var(--speed)); }
@keyframes dealIn { from { opacity: 0; transform: translateY(40px) rotate(6deg); } }
.hcard.is-gone { opacity: 0; transform: translateY(-50px) scale(0.8); transition: opacity 0.12s, transform 0.12s; }
.hcard.is-discarding { animation: discardOut calc(260ms * var(--speed)) ease-in forwards; }
@keyframes discardOut { to { opacity: 0; transform: translate(60px, 30px) rotate(18deg); } }
.drag-tile { position: fixed; left: 0; top: 0; z-index: 80; width: var(--drag-w, 88px); height: var(--drag-w, 88px); font-size: 18px; pointer-events: none; box-shadow: 0 0 0 2px var(--accent), 0 18px 34px rgba(0, 0, 0, 0.6); }

/* ボスの夜 */
.scr-round.is-boss .board { border-color: rgba(255, 120, 90, 0.35); background: radial-gradient(circle at 50% 50%, rgba(110, 30, 30, 0.3), rgba(20, 6, 16, 0.6) 70%); }
.scr-round.is-boss .board__rings { stroke: rgba(255, 120, 90, 0.22); }
.scr-round.is-boss .info { border-color: rgba(255, 120, 90, 0.3); }
.scr-round.is-boss .info__night { color: #ffc2b0; }

/* ===== ポップ・吹き出し ===== */
.pop {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 800 24px var(--font-num); color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.5);
  animation: popUp calc(900ms * max(var(--speed), 0.4)) ease-out forwards;
}
@keyframes popUp {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  14% { opacity: 1; transform: translate(-50%, -65%) scale(1.2); }
  28% { transform: translate(-50%, -75%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(0.95); }
}
.pop--below { animation-name: popDown; font-size: 20px; }
@keyframes popDown {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.5); }
  15% { opacity: 1; transform: translate(-50%, 10%) scale(1.15); }
  30% { transform: translate(-50%, 20%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 60%); }
}
.pop--chips { color: #8cc6ff; }
.pop--mult { color: #ff8197; }
.pop--xmult { color: #ffad6b; font-size: 30px; }
.pop--money { color: var(--money); }
.pop--bad { color: var(--bad); font-size: 18px; font-family: var(--font-ui); }
.pop--add { color: var(--accent); font-size: 26px; }
.pop--msg { font: 700 14px var(--font-ui); padding: 3px 9px; border-radius: 6px; background: rgba(12, 16, 46, 0.92); border: 1px solid var(--line-hi); text-shadow: none; }
.pop--hand { font: 800 30px var(--font-title); color: #fff3d0; text-shadow: 0 0 18px rgba(255, 210, 122, 0.7), 0 3px 0 rgba(0, 0, 0, 0.6); }
.pop--score { color: #fff; text-shadow: 0 0 16px rgba(255, 210, 122, 0.8), 0 3px 0 rgba(0, 0, 0, 0.7); }
.bubble {
  position: absolute; transform: translateX(-50%); max-width: 220px; padding: 5px 10px; border-radius: 8px; pointer-events: none;
  font-size: 13px; font-weight: 700; color: #1a1405; background: #ffe2a0; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  animation: bubble calc(1300ms * max(var(--speed), 0.5)) ease-out forwards;
}
.bubble::before { content: ''; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.bubble--bad { background: #ffb3b3; }
@keyframes bubble { 0% { opacity: 0; transform: translate(-50%, -6px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ===== 共通の画面部品 ===== */
.scr__head { text-align: center; padding: 18px 16px 8px; }
.scr__title { margin: 0; font: 800 34px var(--font-title); letter-spacing: 0.08em; }
.scr__title small { font-size: 18px; color: var(--text-faint); }
.scr__lead { margin: 6px auto 0; color: var(--text-dim); font-size: 14px; max-width: 640px; }
.scr__acts { display: flex; gap: 12px; justify-content: center; padding: 16px; }
.panel { margin: 12px auto; width: min(1040px, calc(100% - 32px)); padding: 16px 18px; }
.panel__title { margin: 0 0 12px; font: 800 15px var(--font-title); letter-spacing: 0.12em; color: var(--accent); }
.panel--row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.panel--row .panel__title { margin: 0; }
.panel__note { font-size: 12px; color: var(--text-faint); }
.empty { color: var(--text-faint); font-size: 13px; margin: 8px 0; }

/* タイトル */
.scr-title { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px; }
.title__hero { position: relative; display: grid; place-items: center; text-align: center; padding: 20px 0 6px; }
.title__art { position: absolute; width: min(560px, 120vw); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0.55; pointer-events: none; }
.astrolabe { width: 100%; height: 100%; }
.astrolabe circle, .astrolabe ellipse, .astrolabe line { fill: none; stroke: rgba(255, 210, 122, 0.4); stroke-width: 1; }
.astrolabe .thin { stroke: rgba(150, 170, 255, 0.25); }
.title__art .astrolabe { animation: spin 240s linear infinite; will-change: transform; }
.endcard__art .astrolabe { animation: none; }
.astrolabe__stars polyline { fill: none; stroke: rgba(190, 210, 255, 0.45); stroke-width: 1; }
.astrolabe__stars circle { fill: #e8eeff; stroke: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.reduced-motion .astrolabe { animation: none !important; }
.title__name {
  position: relative; margin: 0; font: 800 clamp(46px, 9vw, 104px) var(--font-title); letter-spacing: 0.16em; line-height: 1;
  background: linear-gradient(180deg, #fff8e0 0%, #ffd27a 45%, #b9782a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 210, 122, 0.35)) drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5));
  padding-left: 0.16em;
}
.title__sub { position: relative; margin: 12px 0 0; font: 600 clamp(15px, 2vw, 19px) var(--font-title); color: var(--text); letter-spacing: 0.3em; }
.title__menu { position: relative; display: grid; gap: 10px; width: min(360px, 100%); }
.title__small { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.title__foot { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--text-faint); }
.title__credit { font-size: 12px; }

/* 旅の準備 */
.scr-setup { padding-bottom: 24px; }
.decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.deck {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr auto; column-gap: 10px; text-align: left;
  padding: 12px; min-height: 92px; border-radius: 10px; cursor: pointer; color: inherit;
  background: rgba(10, 14, 40, 0.5); border: 1px solid var(--line);
}
.deck:hover:not(:disabled) { border-color: var(--line-hi); }
.deck.is-on { border-color: var(--accent); background: rgba(60, 52, 40, 0.35); box-shadow: 0 0 0 1px var(--accent) inset; }
.deck.is-locked { opacity: 0.45; cursor: not-allowed; }
.deck__icon { grid-row: 1 / span 3; font-size: 28px; color: var(--accent); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 210, 122, 0.4); }
.deck__name { font: 800 16px var(--font-title); }
.deck__desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.deck__clear { font-size: 12px; color: var(--good); }
.stakes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.stake { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 4px; border-radius: 10px; background: rgba(10, 14, 40, 0.5); border: 1px solid var(--line); color: inherit; cursor: pointer; }
.stake.is-on { border-color: var(--accent); background: rgba(60, 52, 40, 0.4); }
.stake.is-locked { opacity: 0.35; cursor: not-allowed; }
.stake__n { font-size: 20px; font-weight: 800; }
.stake__name { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stake-desc { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-dim); display: grid; gap: 2px; }
.stake-desc b { color: var(--accent); margin-right: 6px; }
.seed-in { min-height: 44px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-hi); background: rgba(5, 8, 26, 0.6); color: var(--text); font: 700 18px var(--font-num); letter-spacing: 0.14em; text-transform: uppercase; width: 220px; }
.seed-in::placeholder { font: 400 13px var(--font-ui); letter-spacing: 0; color: var(--text-faint); text-transform: none; }

/* 夜の選択 */
.scr-blind { padding-bottom: 24px; }
.blinds { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; gap: 18px; padding: 10px 16px; }
.blind { display: flex; flex-direction: column; gap: 10px; padding: 18px; min-height: 340px; transition: transform 0.15s; }
.blind.is-current { border-color: rgba(255, 210, 122, 0.6); box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 210, 122, 0.12); transform: translateY(-6px); }
.blind.is-done, .blind.is-skipped { opacity: 0.5; }
.blind.is-upcoming { opacity: 0.8; }
.blind--boss { background: linear-gradient(180deg, color-mix(in srgb, var(--boss, #4a1a14) 45%, #10163f), rgba(12, 17, 46, 0.9)); }
.blind__top { display: flex; align-items: center; justify-content: space-between; }
.blind__state { font-size: 12px; color: var(--text-dim); letter-spacing: 0.1em; }
.blind.is-current .blind__state { color: var(--accent); }
.blind__name { margin: 0; font: 800 24px var(--font-title); }
.blind__boss { margin: 0; font-size: 14px; color: #ffd0c2; line-height: 1.5; }
.blind__plain { margin: 0; font-size: 13px; color: var(--text-dim); }
.blind__target, .blind__reward { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: rgba(5, 8, 26, 0.45); }
.blind__k { font-size: 12px; color: var(--text-faint); }
.blind__v { font-size: 28px; font-weight: 800; color: var(--accent); }
.blind__reward .num { font-size: 20px; font-weight: 800; }
.blind__tag { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px dashed rgba(159, 208, 255, 0.35); }
.blind__tagname { font-weight: 700; color: var(--accent-2); font-size: 14px; }
.blind__tagdesc { font-size: 12px; color: var(--text-dim); }
.blind__acts { margin-top: auto; display: grid; gap: 8px; }

/* 夜明け */
.scr-dawn { display: flex; flex-direction: column; }
.dawn { margin: 18px auto; width: min(520px, calc(100% - 32px)); padding: 26px 26px 22px; text-align: center; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.dawn__sun { position: absolute; left: 50%; top: -130px; width: 260px; height: 260px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 122, 0.45), rgba(255, 140, 60, 0.12) 50%, transparent 70%); pointer-events: none; }
.dawn__title { position: relative; margin: 0; font: 800 38px var(--font-title); letter-spacing: 0.2em; color: #ffe9b8; }
.dawn__sub { margin: 0; color: var(--text-dim); }
.dawn__score { font: 800 30px var(--font-num); }
.dawn__of { font-size: 14px; color: var(--text-dim); font-family: var(--font-ui); font-weight: 500; }
.ledger { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.ledger__row { display: flex; align-items: baseline; gap: 8px; animation: ledgerIn calc(300ms * var(--speed)) ease-out backwards; animation-delay: calc(var(--d) * var(--speed)); }
@keyframes ledgerIn { from { opacity: 0; transform: translateX(-12px); } }
.ledger__label { font-size: 14px; }
.ledger__dots { flex: 1; border-bottom: 1px dotted var(--line-hi); transform: translateY(-4px); }
.ledger__n { font-size: 20px; font-weight: 800; color: var(--money); }
.ledger__n.is-neg { color: var(--bad); }
.dawn__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; }
.dawn__total .num { font-size: 32px; font-weight: 800; }

/* 店 */
.scr-shop { padding-bottom: 24px; }
.shop { display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: "head head" "grid side"; gap: 12px 20px; padding: 6px 20px; max-width: 1280px; margin: 0 auto; }
.shop__head { grid-area: head; text-align: center; }
.shop__grid { grid-area: grid; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.shop__sec { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 14, 40, 0.4); }

.shop__h { margin: 0 0 10px; font: 800 14px var(--font-title); letter-spacing: 0.14em; color: var(--accent); }
.shop__side { grid-area: side; display: flex; flex-direction: column; gap: 10px; align-self: start; position: sticky; top: 8px; }
.wares { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ware {
  position: relative; display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 12px; row-gap: 2px;
  padding: 12px; border-radius: 10px; background: linear-gradient(180deg, rgba(28, 37, 92, 0.85), rgba(14, 20, 54, 0.9)); border: 1px solid var(--line);
}
.ware__art { grid-row: 1 / span 4; display: grid; place-items: center; align-self: start; }
.ware__name { font: 800 16px var(--font-title); }
.ware__sub { font-size: 12px; color: var(--text-dim); }
.ware__desc { margin: 4px 0 6px; font-size: 13px; line-height: 1.5; }
.ware__buy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ware__why { font-size: 12px; color: #ffcf8a; }
.ware.is-sold { opacity: 0.4; }
.ware.is-free { border-color: var(--good); }
.ware__ribbon { position: absolute; top: 8px; right: 8px; font-size: 12px; font-weight: 800; color: #062a18; background: var(--good); padding: 1px 8px; border-radius: 999px; }
.ware .relic .sigil { width: 64px; height: 64px; }
.ware .relic__name { display: none; }
.ware .cons { width: 60px; }
.packart {
  width: 64px; height: 84px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(160deg, #2b3b8a, #121a4a); border: 1px solid rgba(159, 208, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 12px rgba(0, 0, 0, 0.4);
}
.packart--relic { background: linear-gradient(160deg, #6a4a1a, #2a1c0a); border-color: rgba(255, 210, 122, 0.7); }
.packart--obs { background: linear-gradient(160deg, #4a2a8a, #1c0f42); border-color: rgba(192, 140, 255, 0.6); }
.packart--tile { background: linear-gradient(160deg, #1f4a6a, #0b1c30); border-color: rgba(120, 200, 255, 0.55); }
.packart__g { font-size: 28px; color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.6); font-family: 'Segoe UI Symbol', var(--font-ui); }
.packart__n { font-size: 12px; color: var(--text-dim); }
.voucherart .sigil { width: 64px; height: 64px; border-radius: 12px; background: radial-gradient(circle, #3b2a10, #140d05 75%); box-shadow: 0 0 0 2px rgba(255, 210, 122, 0.6); }
.voucherart .sigil__glyph { fill: var(--accent); }

/* パック */
.scr-pack { padding-bottom: 24px; }
.pk { margin: 14px auto; width: min(980px, calc(100% - 32px)); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.pk__head { display: flex; align-items: center; gap: 16px; }
.pk__head .scr__title { font-size: 28px; }
.pk__head .scr__lead { margin: 4px 0 0; }
.pk__left { color: var(--accent); margin-left: 6px; }
.pk-handwrap { padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(5, 8, 26, 0.4); }
.pk-handlabel { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.pk-hand { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pk-tile { position: relative; width: 70px; height: 90px; padding: 0; background: none; border: 0; cursor: pointer; transition: transform 0.12s; }
.pk-tile > .tile { position: absolute; inset: 0; font-size: 15px; }
.pk-tile.is-sel { transform: translateY(-10px); }
.pk-tile.is-sel > .tile { box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(255, 210, 122, 0.4); }
.pk-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pk-choice { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(30, 40, 100, 0.85), rgba(14, 20, 54, 0.92)); border: 1px solid var(--line); }
.pk-choice.is-taken { opacity: 0.4; }
.pk-choice__art { min-height: 110px; display: grid; place-items: center; }
.pk-choice__art > .tile { width: 84px; height: 108px; font-size: 18px; }
.pk-choice__art .relic .sigil { width: 84px; height: 84px; }
.pk-choice__art .relic__name { display: none; }
.pk-choice__art .cons { width: 74px; }
.pk-choice__art .cons .sigil { width: 56px; height: 56px; }
.pk-choice__name { font: 800 17px var(--font-title); }
.pk-choice__sub { font-size: 12px; color: var(--text-dim); }
.pk-choice__desc { margin: 0 0 6px; font-size: 13px; line-height: 1.5; flex: 1; }
.pk-choice__why { font-size: 12px; color: #ffcf8a; }
.pk-choice__done { font-size: 13px; color: var(--good); }
.pk__acts { display: flex; justify-content: center; }

/* 旅の終わり・勝利 */
.scr-over, .scr-victory { display: flex; justify-content: center; padding: 20px 16px; }
.endcard { position: relative; width: min(760px, 100%); align-self: flex-start; padding: 28px 26px 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; overflow: clip; }
.endcard__art { opacity: 0.25; width: 640px; top: 120px; }
.endcard__eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.3em; color: var(--text-faint); }
.endcard__title { position: relative; margin: 0; font: 800 44px var(--font-title); letter-spacing: 0.14em; color: #c9d2ff; }
.endcard--win .endcard__title { color: #ffe9b8; text-shadow: 0 0 30px rgba(255, 210, 122, 0.5); }
.endcard__sub { position: relative; margin: 0; color: var(--text-dim); }
.endcard__sub .num { font-weight: 800; color: var(--text); font-size: 20px; }
.runstats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: left; }
.rs { padding: 10px 12px; border-radius: 10px; background: rgba(5, 8, 26, 0.5); border: 1px solid var(--line); min-width: 0; }
.rs__k { font-size: 12px; color: var(--text-faint); }
.rs__v { font-size: 24px; font-weight: 800; }
.rs__s { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.unlocks, .records { position: relative; text-align: left; }
.unlocks__list, .records__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.unlock { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 210, 122, 0.5); background: rgba(60, 50, 20, 0.3); display: flex; flex-direction: column; }
.unlock__name { font-weight: 700; color: var(--accent); }
.unlock__desc { font-size: 12px; color: var(--text-dim); }
.records__list li { font-size: 14px; }
.share { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.share__text { margin: 0; padding: 10px 14px; border-radius: 8px; background: rgba(5, 8, 26, 0.6); border: 1px solid var(--line); font: 14px/1.5 var(--font-num); white-space: pre-wrap; text-align: left; max-width: 100%; user-select: text; -webkit-user-select: text; }
.endcard__acts { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.scr-error { padding: 40px; }

/* ===== 低い画面（ノート PC の縦が狭い時） ===== */
@media (max-height: 820px) and (min-width: 761px) {
  .scr-round { --lh: 38px; gap: 8px 18px; padding: 8px 18px 10px; --card-w: clamp(56px, 10vh, 88px); }
  .hand { padding-top: 14px; }
  .slot--relic { height: 80px; }
  .slot--cons { height: 80px; }
  .relic .sigil { width: 50px; height: 50px; }
  .scorebox__v { font-size: 38px; }
  .info { gap: 8px; padding: 12px; }
}

/* ===== 狭い画面（スマホ縦） ===== */
@media (max-width: 760px) {
  body { font-size: 14px; }
  .band { padding: 8px 8px 0; gap: 8px; }
  .bar-label { display: none; }
  .slot--relic { width: 46px; height: 52px; padding: 2px; border-radius: 9px; }
  .slot--cons { width: 44px; height: 52px; padding: 2px; border-radius: 9px; }
  .relic .sigil { width: 38px; height: 38px; }
  .relic .sigil__glyph { font-size: 40px; }
  .relic__name { display: none; }
  .cons { width: 38px; padding: 2px; }
  .cons .sigil { width: 26px; height: 26px; }
  .cons__name { font-size: 8px; max-width: 36px; }
  .cons__sub { display: none; }
  .relics__row, .conss__row { gap: 4px; }
  .hud { margin-left: 0; width: 100%; justify-content: space-between; gap: 10px; padding-bottom: 0; }
  .hud__v, .hud__money { font-size: 20px; }

  .banner__s { font-size: 14px; }
  .pop { font-size: 18px; }
  .pop--hand { font-size: 22px; }
  .pop--xmult { font-size: 22px; }
  .toasts { top: 8px; bottom: auto; right: 8px; left: 8px; align-items: stretch; }

  .scr__title { font-size: 26px; }
  .scr__head { padding: 10px 12px 4px; }
  .blinds { grid-template-columns: 1fr; gap: 10px; padding: 8px 12px; }
  .blind { min-height: 0; padding: 12px 14px; gap: 6px; }
  .blind.is-current { transform: none; }
  .blind:not(.is-current) .blind__plain, .blind:not(.is-current) .blind__tag { display: none; }
  .blind__name { font-size: 19px; }
  .blind { display: grid; grid-template-columns: 1fr 1fr; }
  .blind > :not(.blind__target):not(.blind__reward) { grid-column: 1 / -1; }
  .blind__target, .blind__reward { padding: 4px 10px; }
  .blind__v { font-size: 22px; }
  .shop { grid-template-columns: 1fr; grid-template-areas: "head" "side" "grid"; padding: 4px 12px; }
  .shop__grid { grid-template-columns: 1fr; }
  .shop__side { position: static; flex-direction: row; }
  .shop__side .btn { flex: 1; }
  .wares { grid-template-columns: 1fr; }
  .ware { grid-template-columns: 64px 1fr; }
  .ware .relic .sigil { width: 54px; height: 54px; }
  .runstats { grid-template-columns: 1fr 1fr; }
  .endcard { padding: 20px 14px; }
  .endcard__title { font-size: 32px; }
  .stakes { grid-template-columns: repeat(4, 1fr); }
  .pk { padding: 14px; }
  .pk-choices { grid-template-columns: 1fr; }
  .pk-choice { display: grid; grid-template-columns: 90px 1fr; text-align: left; align-items: start; column-gap: 12px; }
  .pk-choice > :not(.pk-choice__art) { grid-column: 2; }
  .pk-choice__art { grid-row: 1 / span 6; min-height: 0; }
  .pk-tile { width: 50px; height: 64px; }
  .pk-tile > .tile { font-size: 11px; }
  .dawn { padding: 20px 16px; }
  .modal { padding: 8px; }
  .set__row { grid-template-columns: 70px 1fr 34px; }
}

@media (hover: none) { .btn__kbd, .hcard__k { display: none; } }

/* 動きを減らす */
.reduced-motion .slot.is-fire, .reduced-motion .scorebox.is-hot::before, .reduced-motion .tile[data-enh="nova"]::after { animation: none; }

/* 次の旅で開く・天文台 × 難度 */
.queued { position: relative; display: flex; gap: 10px; align-items: baseline; justify-content: center; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; border: 1px dashed rgba(255, 210, 122, 0.5); }
.queued__k { font-size: 11px; letter-spacing: 0.12em; color: var(--accent); }
.queued__t { font-weight: 700; }
.unlock--seen { border-color: var(--line-hi); background: rgba(30, 40, 90, 0.4); }
.unlock--seen .unlock__name { color: var(--accent-2); }
.stakes-sec { position: relative; text-align: left; overflow-x: auto; }
.stakes-sec small { font: 500 11px var(--font-ui); color: var(--text-faint); letter-spacing: 0; }
.stakegrid { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.stakegrid th { color: var(--text-faint); font-weight: 500; padding: 2px 6px; }
.stakegrid td { padding: 3px 6px; border-top: 1px solid rgba(150, 170, 255, 0.08); text-align: center; }
.stakegrid__name { text-align: left !important; white-space: nowrap; }
.stakegrid__c.is-done { color: var(--accent); }
.stakegrid__c.is-open { color: var(--good); }
.stakegrid__c.is-seen { color: var(--text-faint); }

/* 連なり */
.chain { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(5, 8, 26, 0.45); }
.chain__k { font-size: 12px; color: var(--text-dim); }
.chain__x { font: 800 20px var(--font-num); color: var(--text-dim); }
.chain__s { grid-column: 1 / -1; font-size: 11px; color: var(--text-faint); }
.chain.is-max .chain__x { color: #ffd27a; }
.hint__next { color: var(--xmult); }
.chain.is-on { border-color: rgba(255, 138, 61, 0.45); }
.chain.is-on .chain__x { color: var(--xmult); }
.hint__chain { color: var(--xmult); font-weight: 700; }
.banner--chain .banner__t { color: #ffc89e; font-size: clamp(28px, 4.5vw, 52px); }

/* 第 6 ラウンド（UI/UX レビュー対応） */
.board__row { display: contents; }
.side { overflow: hidden; }
.coach { min-height: 48px; }
.handzone { min-height: 0; }
.advice { position: relative; margin: 0; padding: 8px 14px; border-radius: 10px; background: rgba(20, 40, 80, 0.45); border: 1px solid rgba(159, 208, 255, 0.35); font-size: 14px; text-align: left; }
.advice b { color: var(--accent-2); }
.endcard__acts { position: sticky; bottom: 0; z-index: 2; padding: 10px 0 6px; background: linear-gradient(180deg, rgba(14, 20, 54, 0), rgba(14, 20, 54, 0.96) 35%); }
.pk-choice__art .cons__name, .ware .cons__name { white-space: normal; text-overflow: clip; max-width: 64px; }
@media (max-width: 760px) {
  .btn--sm, .btn--icon { min-height: 44px; }
  .coach__x { width: 44px; height: 44px; }
}

/* ===== 夜の画面の配置（第 7 ラウンド）。1 マスの大きさは fitBoard が実寸から決める ===== */
/* PC で幅が足りない時は右の早見を省く */
.scr-round.no-side { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); grid-template-areas: "band band" "info board" "info hand"; }
.scr-round.no-side .side { display: none; }
.scr-round.no-side .band--round { display: flex; justify-content: center; gap: 24px; }

/* --- 狭い画面（縦長 lay-p・低い横長 lay-l）共通 --- */
.scr-round:is(.lay-p, .lay-l) { --gap: 4px; --lwl: 26px; --lwr: 50px; --lh: 22px; --cell-max: 96px; }
:is(.lay-p, .lay-l) .side, :is(.lay-p, .lay-l) .finale, :is(.lay-p, .lay-l) .bar-label { display: none; }
:is(.lay-p, .lay-l) .band--round { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0; }
:is(.lay-p, .lay-l) .relics__row, :is(.lay-p, .lay-l) .conss__row { gap: 4px; }
:is(.lay-p, .lay-l) .slot--relic, :is(.lay-p, .lay-l) .slot--cons { width: var(--slot); height: var(--slot); padding: 1px; border-radius: 8px; }
:is(.lay-p, .lay-l) .relic .sigil { width: calc(var(--slot) - 8px); height: calc(var(--slot) - 8px); box-shadow: 0 0 0 2px var(--rc), inset 0 0 8px rgba(0, 0, 0, 0.7); }
:is(.lay-p, .lay-l) .relic__name, :is(.lay-p, .lay-l) .cons__name, :is(.lay-p, .lay-l) .cons__sub { display: none; }
:is(.lay-p, .lay-l) .cons { width: calc(var(--slot) - 8px); height: calc(var(--slot) - 6px); justify-content: center; padding: 1px; }
:is(.lay-p, .lay-l) .cons .sigil { width: calc(var(--slot) - 16px); height: calc(var(--slot) - 16px); }
:is(.lay-p, .lay-l) .slot__empty { font-size: 13px; }
/* ☰ は画面の右上（遺物の列の右） */
:is(.lay-p, .lay-l) .info { position: static; }
:is(.lay-p, .lay-l) .info::before, :is(.lay-p, .lay-l) .info::after { display: none; }
:is(.lay-p, .lay-l) .info__btns { position: absolute; top: 4px; right: 8px; z-index: 5; }
:is(.lay-p, .lay-l) .info__btns .btn:not(.btn--icon) { display: none; }
:is(.lay-p, .lay-l) .info__btns .btn--icon { width: 44px; height: 44px; min-height: 44px; padding: 0; }
/* 情報欄を詰める */
:is(.lay-p, .lay-l) .info { display: grid; padding: 4px 8px; gap: 3px 8px; align-items: center; }
:is(.lay-p, .lay-l) .info__head { grid-area: head; display: flex; align-items: center; gap: 6px; min-width: 0; }
:is(.lay-p, .lay-l) .blind-token { width: 28px; height: 28px; font-size: 12px; }
:is(.lay-p, .lay-l) .info__names { display: none; }
:is(.lay-p, .lay-l) .info__target { display: flex; gap: 4px; align-items: baseline; text-align: left; white-space: nowrap; }
:is(.lay-p, .lay-l) .info__tk { display: inline; font-size: 11px; }
:is(.lay-p, .lay-l) .info__tv { font-size: 16px; }
:is(.lay-p, .lay-l) .scorebox { grid-area: score; padding: 0 2px; background: none; border: 0; min-width: 0; }
:is(.lay-p, .lay-l) .scorebox__k { display: none; }
:is(.lay-p, .lay-l) .scorebox__v { font-size: 22px; line-height: 1.1; }
:is(.lay-p, .lay-l) .progress { height: 3px; margin-top: 2px; }
:is(.lay-p, .lay-l) .obsnote { grid-area: obs; padding: 2px 6px; font-size: 12px; gap: 4px; white-space: nowrap; }
:is(.lay-p, .lay-l) .obsnote__long { display: none; }
:is(.lay-p, .lay-l) .obsnote__ring { width: 11px; height: 11px; }
:is(.lay-p, .lay-l) .chain { grid-area: chain; display: flex; gap: 4px; align-items: baseline; padding: 2px 6px; white-space: nowrap; }
:is(.lay-p, .lay-l) .chain__s { display: none; }
:is(.lay-p, .lay-l) .chain__k { font-size: 11px; }
:is(.lay-p, .lay-l) .chain__x { font-size: 15px; }
:is(.lay-p, .lay-l) .calc { grid-area: calc; display: flex; align-items: center; padding: 0; background: none; border: 0; min-width: 0; }
:is(.lay-p, .lay-l) .calc__hand { display: none; }
:is(.lay-p, .lay-l) .calc__row { flex: 1; gap: 3px; min-width: 0; }
:is(.lay-p, .lay-l) .calc__box { font-size: 16px; padding: 2px 6px; border-radius: 6px; }
:is(.lay-p, .lay-l) .calc__x { font-size: 12px; }
:is(.lay-p, .lay-l) .stats { grid-area: stats; display: flex; gap: 3px; }
:is(.lay-p, .lay-l) .stat { flex: 1; padding: 1px 4px; flex-direction: column; align-items: center; min-width: 0; }
:is(.lay-p, .lay-l) .stat__k { font-size: 11px; line-height: 1.2; }
:is(.lay-p, .lay-l) .stat__v { font-size: 15px; line-height: 1.15; }
:is(.lay-p, .lay-l) .bossbox { grid-area: boss; padding: 2px 6px; font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:is(.lay-p, .lay-l) .bossbox__k { display: inline; margin-right: 6px; }
:is(.lay-p, .lay-l) .bossbox__info { display: inline; margin: 0 0 0 6px; padding: 0; border: 0; }
/* 列の端のラベルは帯の中に収める */
:is(.lay-p, .lay-l) .lbl { font-size: 11px; gap: 0; overflow: hidden; max-width: 100%; }
:is(.lay-p, .lay-l) .lbl__dots { display: none; }
:is(.lay-p, .lay-l) .lbl__tags { flex-wrap: nowrap; max-width: 100%; overflow: hidden; }
:is(.lay-p, .lay-l) .lbl__tag { padding: 0 3px; line-height: 15px; overflow: hidden; text-overflow: ellipsis; }
:is(.lay-p, .lay-l) .lbl__tag + .lbl__tag { display: none; }
:is(.lay-p, .lay-l) .lbl-arrow { display: none; }
:is(.lay-p, .lay-l) .lbl-corner { overflow: hidden; padding-bottom: 2px; }
:is(.lay-p, .lay-l) .lbl-corner .lbl__tag { background: none; padding: 0; }
:is(.lay-p, .lay-l) .lbl-corner--d1 { padding-left: 4px; }
:is(.lay-p, .lay-l) .lbls--cols { padding-bottom: 2px; }
:is(.lay-p, .lay-l) .lbls--rows { padding-left: 4px; }
:is(.lay-p, .lay-l) .lbl__done { font-size: 11px; padding: 0 3px; white-space: normal; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; }
:is(.lay-p, .lay-l) .lbls--cols .lbl__est, :is(.lay-p, .lay-l) .lbl-corner .lbl__est { display: none; }
:is(.lay-p, .lay-l) .lbls--cols .lbl__done, :is(.lay-p, .lay-l) .lbl-corner .lbl__done { white-space: nowrap; text-overflow: ellipsis; }
:is(.lay-p, .lay-l) .lbl__est { font-size: 11px; }
:is(.lay-p, .lay-l) .combo-badge { font-size: 11px; padding: 0 5px; }
:is(.lay-p, .lay-l) .board { border-radius: 10px; }
:is(.lay-p, .lay-l) .cell { border-radius: 7px; }
:is(.lay-p, .lay-l) .hcard__k, :is(.lay-p, .lay-l) .btn--discard .btn__kbd { display: none; }
:is(.lay-p, .lay-l) .hcard { height: calc(var(--card-w) * 1.08); }
:is(.lay-p, .lay-l) .coach { position: static; width: auto; max-width: none; min-height: 0; font-size: 12px; padding: 2px 4px 2px 8px; gap: 6px; }
:is(.lay-p, .lay-l) .coach__x { width: 40px; height: 40px; }
:is(.lay-p, .lay-l) .hint { font-size: 12px; text-align: left; border-radius: 6px; }

/* --- 縦長（スマホ縦・タブレット縦）--- */
.scr-round.lay-p {
  --slot: min(44px, calc((100vw - 16px - 52px - 6 * 4px) / 7));
  --card-w: min(84px, calc((100vw - 16px - 60px - 6px - 4 * 5px) / 5));
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "band" "info" "board" "hand";
  gap: 4px; padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
}
.lay-p .band--round { flex-wrap: nowrap; padding-right: 52px; min-height: 44px; }
.lay-p .conss { margin-left: auto; }
.lay-p .info { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "head score obs chain" "calc calc stats stats" "boss boss boss boss"; }
.lay-p .handzone { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "coach coach" "hint hint" "hand btn"; gap: 2px 6px; align-items: end; min-width: 0; }
.lay-p .handzone__row { display: contents; }
.lay-p .coach { grid-area: coach; }
.lay-p .hint { grid-area: hint; min-height: 18px; line-height: 18px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-p .hand { grid-area: hand; gap: 5px; padding-top: 10px; min-height: calc(var(--card-w) * 1.08 + 10px); justify-content: flex-start; }
.lay-p .hcard.is-sel { transform: translateY(-10px); }
.lay-p .btn--discard { grid-area: btn; width: 60px; min-width: 60px; height: calc(var(--card-w) * 1.08); min-height: 44px; padding: 2px; font-size: 14px; }
.lay-p .btn--discard .btn__sub { font-size: 11px; }

/* --- 低い横長（スマホ横）: 左 = 遺物・情報、中央 = 星図、右 = 手札 --- */
.scr-round.lay-l {
  --slot: 40px;
  --card-w: min(64px, calc((100vw - 100vh * 1.18 - 40px) / 2 / 3 - 6px));
  grid-template-columns: minmax(0, 1fr) minmax(0, min(56vw, calc(100vh * 1.18))) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) minmax(0, min(56vw, calc(100dvh * 1.18))) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "band board hand" "info board hand";
  gap: 4px 8px; padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
}
.lay-l .band--round { align-content: flex-start; }
.lay-l .info { align-self: start; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head score" "obs chain" "calc calc" "stats stats" "boss boss"; }
.lay-l .obsnote { justify-self: start; }
.lay-l .bossbox { -webkit-line-clamp: 3; }
.lay-l .handzone { align-self: stretch; display: flex; flex-direction: column; gap: 4px; padding-top: 50px; min-height: 0; overflow: hidden; }
.lay-l .handzone__row { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.lay-l .hand { flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 8px; min-height: 0; }
.lay-l .hcard.is-sel { transform: translateY(-8px); }
.lay-l .btn--discard { min-height: 44px; flex-direction: row; gap: 6px; }
.lay-l .hint { padding: 2px 6px; line-height: 1.35; }
/* 狭い画面の詰め（第 7 ラウンド・調整） */
:is(.lay-p, .lay-l) .stat { flex-direction: row; align-items: baseline; justify-content: center; gap: 3px; white-space: nowrap; padding: 2px 4px; }
:is(.lay-p, .lay-l) .stat__k { font-size: 11px; }
:is(.lay-p, .lay-l) .stat--money .stat__k { display: none; }
.lay-p .info { padding: 3px 8px; gap: 3px 6px; }
.lay-p .coach { font-size: 11px; line-height: 1.3; padding: 2px 2px 2px 8px; }
.lay-p .coach__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lay-p .coach__x { width: 32px; height: 32px; }
.lay-p .coach__n { display: none; }
.lay-p .hand { padding-top: 8px; min-height: calc(var(--card-w) * 1.05 + 8px); }
.lay-p .hcard, .lay-p .btn--discard { height: calc(var(--card-w) * 1.05); }
.lay-p .hcard.is-sel { transform: translateY(-8px); }
.lay-l .relics, .lay-l .conss { max-width: 100%; }
.lay-l .relics__row, .lay-l .conss__row { flex-wrap: wrap; }
.lay-l .info { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "score score" "obs chain" "calc calc" "stats stats" "boss boss"; }
.lay-l .stats { flex-wrap: wrap; }
.lay-l .coach { font-size: 11px; line-height: 1.3; padding: 2px 2px 2px 8px; }
.lay-l .coach__t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lay-l .coach__n { display: none; }
.lay-l .coach__x { width: 32px; height: 32px; }
.lay-l .hint { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
/* 低い横長の画面の店: 次の夜へ を上に */
@media (max-height: 520px) and (orientation: landscape) {
  .shop { grid-template-columns: 1fr; grid-template-areas: "head" "side" "grid"; }
  .shop__side { position: static; flex-direction: row; }
  .shop__side .btn { flex: 1; }
  .shop__head .scr__lead { display: none; }
}
.obsnote__short { display: none; }
:is(.lay-p, .lay-l) .obsnote__short { display: inline; }
.lay-p .hand { justify-content: center; }