:root {
  --ink: #3a2c4a;
  --paper: #fffaf2;
  --pink: #ff8fb1;
  --mint: #6fdcb4;
  --sky: #6cc6ff;
  --sun: #ffd23f;
  --grape: #9a7bff;
  --forest: #6fcf4a;
  --slime: #5b9bff;
  --sea: #2ab8d8;
  --ghost: #8a5ad8;
  --shadow: 0 6px 0 rgba(58, 44, 74, .25), 0 10px 30px rgba(58, 44, 74, .25);
  --card-w: 112px;
  --card-h: 156px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #8fd3ff;
  font-family: 'M PLUS Rounded 1c', system-ui, sans-serif; color: var(--ink);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

.screen { position: fixed; inset: 0; display: none; }
.screen.show { display: block; }
.small { font-size: 12px; opacity: .8; }

/* ---------- ボタン ---------- */
.btn {
  font: inherit; font-weight: 800; border: 0; cursor: pointer; color: var(--ink);
  background: linear-gradient(#fff, #ffe9f1); border-radius: 999px; padding: 12px 22px;
  box-shadow: var(--shadow); transition: transform .12s, filter .12s; font-size: 16px;
}
.btn:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.04); }
.btn:active { transform: translateY(2px) scale(.98); }
.btn.big { font-size: 20px; padding: 16px 30px; background: linear-gradient(#ffe36e, #ffb43f); }
.btn.ghost { background: rgba(255, 255, 255, .7); }
.btn:disabled { filter: grayscale(1); opacity: .6; cursor: default; transform: none; }

/* ---------- 起動 ---------- */
/* 後ろで3Dの島とモンスターが動いている。上に薄いグラデーションを重ねて文字を読みやすく */
#boot {
  display: none; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.0) 30%, rgba(60,30,110,.35) 100%),
    linear-gradient(rgba(120,200,255,.55), rgba(255,255,255,0) 45%, rgba(255,180,220,.35));
}
#boot.show { display: flex; align-items: center; justify-content: center; }
.boot-inner { text-align: center; color: #fff; position: relative; z-index: 1; padding: 16px; }
.boot-ribbon {
  display: inline-block; position: relative; margin-bottom: 10px; padding: 7px 26px;
  background: linear-gradient(#ff8fb8, #ff6f9c); color: #fff; font-weight: 800; font-size: clamp(13px, 2.2vw, 18px);
  border-radius: 6px; box-shadow: 0 4px 0 #c94a7c, 0 8px 16px rgba(0,0,0,.2); transform: rotate(-2deg);
  animation: ribbonIn .7s cubic-bezier(.2, 1.6, .4, 1) both;
}
.boot-ribbon::before, .boot-ribbon::after {
  content: ''; position: absolute; top: 8px; width: 18px; height: 100%; background: #e2588a; z-index: -1;
}
.boot-ribbon::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.boot-ribbon::after { right: -12px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
@keyframes ribbonIn { from { opacity: 0; transform: translateY(-30px) rotate(-8deg) scale(.6); } }
.boot-title { margin: 0; line-height: .95; font-weight: 800; white-space: nowrap; }
.boot-title span {
  display: block; font-size: clamp(54px, 13vw, 132px);
  -webkit-text-stroke: 3px #3a2c4a; paint-order: stroke fill;
  text-shadow: 0 6px 0 #ff6f9c, 0 12px 0 #8a5cff, 0 22px 36px rgba(0, 0, 0, .3);
  animation: titlePop .9s cubic-bezier(.2, 1.6, .4, 1) both, bob 3s ease-in-out 1s infinite;
}
.boot-title .bt1 { color: #fff; }
.boot-title .bt2 { color: #ffe66e; animation-delay: .15s, 1.4s; transform-origin: center; }
.boot-title i { font-style: normal; color: #ff8fb8; display: inline-block; font-size: .5em; vertical-align: .35em; margin-right: .08em; animation: spin 6s linear infinite; }
@keyframes titlePop { from { opacity: 0; transform: scale(.2) rotate(-10deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
.boot-sub { margin-top: 14px; font-weight: 800; letter-spacing: .5em; font-size: clamp(12px, 1.8vw, 16px); text-shadow: 0 2px 6px rgba(0,0,0,.45); animation: fadeUp .8s .4s both; }
#bootTeams { display: flex; gap: 10px; justify-content: center; margin: 18px 0 20px; flex-wrap: wrap; }
.bteam {
  width: 108px; padding: 6px 4px 8px; border-radius: 16px; background: rgba(255,255,255,.88); color: var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 8px 18px rgba(0,0,0,.15); border: 3px solid var(--tc, #fff);
  animation: fadeUp .6s both, hop 2.4s ease-in-out infinite;
}
.bteam img { width: 96px; height: 64px; object-fit: contain; display: block; margin: 0 auto; }
.bteam b { display: block; font-size: 13px; line-height: 1.2; }
.bteam span { display: block; font-size: 10px; opacity: .7; font-weight: 800; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } }
#bootBtn { font-size: 22px; padding: 16px 40px; animation: fadeUp .6s .9s both, bootPulse 1.6s 1.5s ease-in-out infinite; }
@keyframes bootPulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255, 228, 110, .35), 0 6px 0 rgba(0,0,0,.15); } }
.boot-note { margin-top: 14px; font-size: 12px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.5); opacity: .95; }
#bootSparkles { position: absolute; inset: 0; pointer-events: none; }
#bootSparkles span { position: absolute; color: #fff; text-shadow: 0 0 8px #fff8b0; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@media (max-width: 700px) {
  .bteam { width: 76px; border-width: 2px; border-radius: 12px; }
  .bteam img { width: 66px; height: 44px; }
  .bteam b { font-size: 10.5px; }
  .bteam span { display: none; }
  #bootTeams { gap: 6px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .boot-title span { font-size: 44px; }
  #bootTeams { margin: 8px 0 10px; }
  .bteam img { height: 40px; }
  .boot-ribbon { margin-bottom: 4px; }
}
.boot-logo, .logo-small {
  font-weight: 800; font-size: clamp(36px, 8vw, 72px); letter-spacing: 2px;
  color: #fff; text-shadow: 0 4px 0 #ff7aa8, 0 8px 0 #a05cff, 0 14px 24px rgba(0, 0, 0, .3);
  margin-bottom: 28px; animation: bob 2.4s ease-in-out infinite;
}
.boot-logo span, .logo-small span { color: var(--sun); }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1deg); } }

/* ---------- オープニング ---------- */
#opCaption {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  font-size: clamp(16px, 3vw, 26px); font-weight: 800; color: #fff; text-align: center;
  text-shadow: 0 2px 0 #3a2c4a, 0 0 18px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .5s;
  width: 90%;
}
#opCaption.show { opacity: 1; }
#opTitle {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0);
  text-align: center; font-weight: 800; pointer-events: none; opacity: 0;
  width: max-content; white-space: nowrap; /* left:50% で幅が半分に縮み、文字の途中で折り返すのを防ぐ */
}
#opTitle.show { animation: titleIn 1.1s cubic-bezier(.2, 1.6, .4, 1) forwards; }
#opTitle .t1, #opTitle .t2 {
  font-size: clamp(56px, 13vw, 150px); line-height: .95; color: #fff;
  -webkit-text-stroke: 3px #3a2c4a; paint-order: stroke fill;
  text-shadow: 0 6px 0 #ff6f9c, 0 12px 0 #8a5cff, 0 22px 40px rgba(0, 0, 0, .35);
}
#opTitle .t2 { color: #ffe66e; transform: rotate(-3deg); }
#opTitle .sub { margin-top: 18px; font-size: clamp(14px, 2.4vw, 22px); letter-spacing: 10px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
@keyframes titleIn {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}
#opSkip { position: absolute; right: 18px; bottom: 18px; font-size: 14px; padding: 8px 16px; }

/* ---------- メニュー ---------- */
#menu.show { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#menu .logo-small { font-size: clamp(32px, 6vw, 56px); margin-bottom: 20px; }
.menu-col { display: flex; flex-direction: column; gap: 12px; width: min(340px, 86vw); }
.btn.continue { background: linear-gradient(#9ff0c8, #4fd39a); }
.btn.continue small { display: block; font-size: 12px; font-weight: 700; opacity: .85; margin-top: 2px; }
body:not(.local) .local-only { display: none; }
.footer-credit { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

.panel-screen.show { display: flex; align-items: center; justify-content: center; background: rgba(40, 30, 70, .25); backdrop-filter: blur(3px); }
.panel {
  background: var(--paper); border-radius: 26px; padding: 22px 26px; width: min(560px, 94vw);
  box-shadow: var(--shadow); max-height: 92vh;
}
.panel.wide { width: min(980px, 96vw); }
.panel.scroll { overflow-y: auto; touch-action: pan-y; }
/* 設定パネルは縦に長くなるのでスクロール可能に（スマホのツールバー分も考えて dvh）。開始ボタンの行は下に固定 */
.panel-screen .panel { overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; max-height: 92vh; max-height: 92dvh; }
#cpu .panel > .row, #room .panel > .row {
  position: sticky; bottom: -22px; z-index: 3; margin: 14px -26px -22px; padding: 12px 26px 16px;
  background: linear-gradient(rgba(255,250,240,0), var(--paper) 30%);
}
.panel.center { text-align: center; }
.panel h2 { margin: 0 0 12px; font-size: 26px; }
.panel h3 { margin: 16px 0 8px; font-size: 16px; opacity: .8; }
.row { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.row[hidden], .seg[hidden] { display: none; }
.hunt-tag { position: absolute; right: 4px; top: 6px; background: #e0405a; color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 7px; white-space: nowrap; z-index: 2; box-shadow: 0 2px 0 rgba(0,0,0,.2); }

.deck-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deck-opt {
  border-radius: 16px; padding: 10px 12px; cursor: pointer; border: 3px solid transparent;
  background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .1); transition: transform .1s;
}
.deck-opt:hover { transform: translateY(-2px); }
.deck-opt.on { border-color: var(--ink); }
.deck-opt b { font-size: 17px; display: block; }
.deck-opt span { font-size: 12px; opacity: .8; }
.deck-opt img { float: right; width: 54px; height: 36px; object-fit: contain; margin: -4px -4px 0 4px; }
.deck-opt i { display: block; font-style: normal; font-size: 11px; font-weight: 800; opacity: .65; margin-bottom: 2px; }
@media (max-width: 700px) {
  .deck-opt { padding: 8px 10px; }
  .deck-opt b { font-size: 14px; }
  .deck-opt span { display: none; }
  .deck-opt img { width: 44px; height: 30px; }
}
.deck-opt.forest { background: linear-gradient(#f0ffe6, #d6f5c4); }
.deck-opt.slime { background: linear-gradient(#e9f4ff, #cfe3ff); }
.deck-opt.sea { background: linear-gradient(#fffbe8, #c8f0f6); }
.deck-opt.ghost { background: linear-gradient(#f4ecff, #dccbff); }
.deck-opt.random { grid-column: span 2; text-align: center; background: #fff4d6; }

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { font: inherit; font-weight: 800; flex: 1; border: 0; border-radius: 12px; padding: 10px; cursor: pointer; background: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.1); color: var(--ink); }
.seg button.on { background: var(--ink); color: #fff; }
.mode-seg button small { display: block; font-size: 11px; font-weight: 700; opacity: .75; margin-top: 2px; white-space: normal; }
h3 small { font-size: 11px; opacity: .7; }
.wait-mode { font-weight: 800; margin: 6px 0 0; }

.field { display: flex; gap: 10px; align-items: center; font-weight: 800; }
input { font: inherit; border: 2px solid #e2d6ee; border-radius: 12px; padding: 10px 12px; flex: 1; min-width: 0; background: #fff; color: var(--ink); user-select: text; -webkit-user-select: text; }
.room-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.join { display: flex; gap: 8px; }
#roomCode { text-transform: uppercase; letter-spacing: 4px; font-weight: 800; }

.code-box { margin: 14px auto; display: inline-flex; flex-direction: column; background: #fff; padding: 10px 26px; border-radius: 18px; box-shadow: 0 3px 0 rgba(0,0,0,.1); }
.code-box span { font-size: 12px; opacity: .7; }
.code-box b { font-size: 40px; letter-spacing: 8px; }
.seats { display: flex; gap: 10px; justify-content: center; margin: 14px 0; }
.seats div { background: #fff; border-radius: 14px; padding: 8px 14px; min-width: 120px; font-size: 14px; }
.spinner { display: flex; gap: 8px; justify-content: center; margin: 10px; }
.spinner i { width: 14px; height: 14px; border-radius: 50%; background: var(--pink); animation: hop .9s infinite; }
.spinner i:nth-child(2) { animation-delay: .15s; background: var(--sky); }
.spinner i:nth-child(3) { animation-delay: .3s; background: var(--mint); }
@keyframes hop { 50% { transform: translateY(-12px); } }

.kw-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.kw-list b { white-space: nowrap; }
.credit-block { margin: 14px 0; }
.credit-block p { margin: 4px 0; }
.credit-block a { color: #6a4fd8; }

#cardList { display: flex; flex-direction: column; gap: 16px; }
#cardList .deckrow h3 { margin: 8px 0; }
#cardList .grid { display: flex; flex-wrap: wrap; gap: 10px; }
#cardList .card { position: relative; }
#cardList .copies { position: absolute; right: -6px; top: -6px; background: var(--ink); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 800; z-index: 2; }

/* ---------- カード ---------- */
.card {
  width: var(--card-w); height: var(--card-h); border-radius: 14px; position: relative;
  background: linear-gradient(170deg, #fffdf8, #f3e7ff); box-shadow: 0 4px 0 rgba(58,44,74,.3), 0 8px 18px rgba(0,0,0,.25);
  border: 3px solid #fff; overflow: hidden; flex-shrink: 0; font-size: 11px; line-height: 1.25;
}
.card.forest { background: linear-gradient(170deg, #fbfff3, #d7f3c2); }
.card.slime { background: linear-gradient(170deg, #f6fbff, #cfe1ff); }
.card.sea { background: linear-gradient(170deg, #fffdf0, #c6eef5); }
.card.ghost { background: linear-gradient(170deg, #fbf7ff, #ddccff); }
.card.spell { border-color: #ffe9a8; }
.card .cost {
  position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9fe0ff, #2f7ff0); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 17px; text-shadow: 0 1px 0 #1a4a9a; z-index: 2;
  border: 2px solid #fff;
}
.card .art { height: 62px; margin: 4px 4px 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 40px; background: rgba(255,255,255,.6); overflow: hidden; }
.card .art img { width: 100%; height: 100%; object-fit: cover; }
.card .nm { font-weight: 800; text-align: center; margin: 3px 2px 1px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .tx { padding: 0 6px; text-align: center; font-size: 10px; min-height: 30px; }
.card .tx b { color: #b0386a; }
.card .st { position: absolute; bottom: 3px; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; border: 2px solid #fff; }
.card .st.a { left: 3px; background: #ff9b2f; }
.card .st.h { right: 3px; background: #ff4f6d; }
.card .type { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; font-size: 9px; opacity: .6; }

/* ---------- HUD ---------- */
.pbar { position: absolute; left: 12px; display: flex; gap: 10px; align-items: center; pointer-events: none; }
.pbar.opp { top: 10px; }
.pbar.me { bottom: calc(var(--card-h) * .62 + 14px); }
.leader { background: rgba(255,255,255,.9); border-radius: 16px; padding: 6px 12px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; }
.lname { font-weight: 800; font-size: 13px; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 22px; color: #ff4f6d; }
.hp i { font-style: normal; }
.hp.hit { animation: shake .4s; }
.hp.heal { animation: glow .6s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes glow { 50% { transform: scale(1.3); color: #2fcf7f; } }
.mana { display: flex; gap: 3px; align-items: center; background: rgba(20, 40, 90, .55); padding: 6px 10px; border-radius: 999px; }
.mana i { width: 14px; height: 14px; border-radius: 50%; background: #2a3c6a; border: 2px solid rgba(255,255,255,.5); }
.mana i.on { background: radial-gradient(circle at 35% 30%, #c4f0ff, #2f9bff); box-shadow: 0 0 8px #6fd0ff; }
.mana i.temp { background: radial-gradient(circle at 35% 30%, #fff6b8, #ffb400); }
.mana b { color: #fff; margin-left: 6px; font-size: 14px; }
.handcount, .deckcount, .clock { background: rgba(255,255,255,.85); border-radius: 12px; padding: 6px 10px; font-weight: 800; font-size: 13px; }

#hand {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: calc(var(--card-h) * .66);
  display: flex; justify-content: center; align-items: flex-end; pointer-events: none; width: 100%;
}
#hand .card {
  pointer-events: auto; cursor: pointer; margin: 0 var(--hm, -14px); transform-origin: 50% 120%;
  transition: transform .18s, box-shadow .18s, margin .18s; transform: translateY(34%);
}
#hand .card.can { box-shadow: 0 0 0 3px #3dff9a, 0 0 18px 4px #3dff9a, 0 8px 18px rgba(0,0,0,.25); }
#hand .card:hover { transform: translateY(-8%) scale(1.25); z-index: 10; margin: 0 6px; }
#hand .card.sel { transform: translateY(-14%) scale(1.3); z-index: 11; margin: 0 8px; box-shadow: 0 0 0 4px #fff, 0 0 26px 8px #ffe066; }
#hand .card { touch-action: none; }
#hand .card.peek.peek { transform: translateY(0) scale(1.2); z-index: 12; }
#hand .card.draw-in { animation: drawIn .45s ease-out; }
@keyframes drawIn { from { transform: translate(200px, -200px) rotate(30deg) scale(.4); opacity: 0; } }

.endturn {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(#b2ff8a, #3fcf5a); font-size: 16px; line-height: 1.15; padding: 0;
}
.endturn.pulse { animation: pulse 1.2s infinite; }
.endturn:disabled { background: linear-gradient(#e6e6e6, #b8b8b8); }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(80, 255, 120, .35), var(--shadow); } }
#timer { position: absolute; right: 22px; top: calc(50% + 56px); font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; font-size: 14px; }

#banner {
  position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: clamp(30px, 6vw, 56px);
  font-weight: 800; color: #fff; -webkit-text-stroke: 2px #3a2c4a; paint-order: stroke fill;
  text-shadow: 0 5px 0 #ff6f9c, 0 10px 20px rgba(0,0,0,.4); opacity: 0; pointer-events: none;
}
#banner.show { animation: bannerIn 1.6s ease-out forwards; }
@keyframes bannerIn {
  0% { opacity: 0; transform: scale(2.2); }
  15% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(.9) translateY(-30px); }
}
#hint {
  position: absolute; left: 50%; top: 12%; transform: translateX(-50%); background: rgba(58,44,74,.82); color: #fff;
  border-radius: 999px; padding: 6px 16px; font-size: 14px; font-weight: 800; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap;
}
#hint.show { opacity: 1; }
#hint .cancel-sel { pointer-events: auto; margin-left: 10px; font: inherit; font-weight: 800; border: 0; border-radius: 999px; padding: 3px 10px; background: #fff; color: var(--ink); cursor: pointer; }
#hint:not(.show) .cancel-sel { pointer-events: none; }
#cardPreview { position: absolute; left: 14px; top: 50%; transform: translateY(-50%) scale(1.6); transform-origin: left center; pointer-events: none; display: none; }
#cardPreview.show { display: block; }
:is(#cardPreview, #zoomBody) .kwhelp { margin-top: 6px; width: 150px; background: rgba(255,255,255,.95); border-radius: 10px; padding: 6px 8px; font-size: 8.5px; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
#playShow { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; }
#playShow .card { animation: playShow 1.25s ease-in-out forwards; }
@keyframes playShow {
  0% { transform: scale(.4) translateY(200px); opacity: 0; }
  20% { transform: scale(1.7); opacity: 1; }
  75% { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(.6) translateY(-40px); opacity: 0; }
}

.hud-menu { position: absolute; right: 12px; top: 10px; display: flex; gap: 8px; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); box-shadow: var(--shadow); font-size: 18px; cursor: pointer; }
.pop { position: absolute; right: 12px; top: 60px; display: none; flex-direction: column; gap: 6px; background: rgba(255,255,255,.96); padding: 10px; border-radius: 16px; box-shadow: var(--shadow); z-index: 20; }
.pop.show { display: flex; }
.pop button { font: inherit; font-weight: 800; border: 0; background: #f3ecff; border-radius: 10px; padding: 8px 14px; cursor: pointer; color: var(--ink); }
.bubble { position: absolute; background: #fff; border-radius: 18px; padding: 8px 14px; font-weight: 800; box-shadow: var(--shadow); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.bubble.me { left: 16px; bottom: calc(var(--card-h) * .62 + 70px); }
.bubble.opp { left: 16px; top: 70px; }
.bubble.show { opacity: 1; transform: translateY(-4px); }

/* ---------- モンスター頭上ラベル ---------- */
.mlabel { position: absolute; transform: translate(-50%, -100%); display: flex; gap: 2px; align-items: center; pointer-events: none; white-space: nowrap; }
.mlabel .s { min-width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.35); padding: 0 4px; }
.mlabel .a { background: #ff9b2f; }
.mlabel .h { background: #ff4f6d; }
.mlabel .h.hurt { background: #c0213e; }
.mlabel .s.up { color: #b6ff9a; }
.mlabel .k { font-size: 15px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.mlabel.can .a { box-shadow: 0 0 0 3px #3dff9a, 0 0 12px #3dff9a; }
.mlabel.leader { z-index: 2; }
.mlabel .nm { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.dmgnum { position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: 34px; color: #fff; -webkit-text-stroke: 2px #c0213e; paint-order: stroke fill; pointer-events: none; animation: dmgUp 1.1s ease-out forwards; }
.dmgnum.heal { -webkit-text-stroke-color: #1b9f5a; color: #e6ffe9; }
.dmgnum.buff { -webkit-text-stroke-color: #b07800; color: #fff4b0; font-size: 24px; }
.dmgnum.info { -webkit-text-stroke-color: #3a2c4a; font-size: 20px; }
@keyframes dmgUp { 0% { transform: translate(-50%, -30%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -60%) scale(1.3); opacity: 1; } 100% { transform: translate(-50%, -160%) scale(1); opacity: 0; } }

/* ---------- 結果 ---------- */
#result.show { display: flex; align-items: center; justify-content: center; background: rgba(30, 20, 60, .35); }
.result-inner { text-align: center; }
#resultTitle { font-size: clamp(56px, 12vw, 120px); font-weight: 800; color: #fff; -webkit-text-stroke: 3px #3a2c4a; paint-order: stroke fill; text-shadow: 0 8px 0 #ff6f9c, 0 16px 30px rgba(0,0,0,.4); animation: titleIn2 .9s cubic-bezier(.2,1.6,.4,1); }
#resultTitle.lose { text-shadow: 0 8px 0 #6f7aa8, 0 16px 30px rgba(0,0,0,.4); }
#resultSub { color: #fff; font-weight: 800; text-shadow: 0 2px 4px #000; margin: 10px; }
@keyframes titleIn2 { from { transform: scale(0) rotate(-15deg); } }

#toast { position: fixed; left: 50%; bottom: 40%; transform: translateX(-50%); background: rgba(58,44,74,.92); color: #fff; padding: 10px 18px; border-radius: 14px; font-weight: 800; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 100; }
#toast.show { opacity: 1; }

@media (max-width: 700px), (max-height: 560px) {
  :root { --card-w: 86px; --card-h: 120px; }
  .card .art { height: 44px; font-size: 30px; }
  .card .tx { font-size: 8.5px; }
  .card .nm { font-size: 10px; }
  .endturn { width: 72px; height: 72px; font-size: 13px; right: 8px; }
  .leader { padding: 4px 8px; }
  .lname { display: none; }
  .hp { font-size: 18px; }
  .mana i { width: 10px; height: 10px; }
  .handcount, .deckcount { font-size: 11px; padding: 4px 6px; }
  .mlabel .s { min-width: 22px; height: 22px; font-size: 13px; }
  #cardPreview { transform: translateY(-50%) scale(1.5); }
}

body:not(.battle) .mlabel { display: none; }
body.opening #labels { display: none; }

/* ---------- 戦闘開始アニメーション ---------- */
#intro { pointer-events: auto; overflow: hidden; }
#intro::before { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 70%, rgba(0,0,0,.35)), linear-gradient(rgba(0,0,0,.35), transparent 30%); }
#intro .plate {
  position: absolute; padding: 14px 34px; color: #fff; font-weight: 800; opacity: 0; min-width: 52%;
  display: flex; flex-direction: column; filter: drop-shadow(0 6px 0 rgba(0,0,0,.25));
}
#intro .plate b { font-size: clamp(26px, 5vw, 48px); -webkit-text-stroke: 2px #3a2c4a; paint-order: stroke fill; }
#intro .plate small, #intro .plate span { font-size: clamp(13px, 2vw, 18px); text-shadow: 0 1px 3px #000; }
#intro .plate.opp { top: 14%; right: 0; text-align: right; align-items: flex-end; background: linear-gradient(90deg, transparent, rgba(91,155,255,.9) 30%); clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
#intro .plate.me { bottom: 16%; left: 0; background: linear-gradient(270deg, transparent, rgba(255,111,156,.9) 30%); clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
#intro .plate.forest { --pc: rgba(111,207,74,.92); }
#intro .plate.opp.forest { background: linear-gradient(90deg, transparent, rgba(80,180,60,.92) 30%); }
#intro .plate.opp.slime { background: linear-gradient(90deg, transparent, rgba(80,140,255,.92) 30%); }
#intro .plate.me.forest { background: linear-gradient(270deg, transparent, rgba(80,180,60,.92) 30%); }
#intro .plate.me.slime { background: linear-gradient(270deg, transparent, rgba(80,140,255,.92) 30%); }
#intro .plate.opp.sea { background: linear-gradient(90deg, transparent, rgba(30,170,200,.92) 30%); }
#intro .plate.me.sea { background: linear-gradient(270deg, transparent, rgba(30,170,200,.92) 30%); }
#intro .plate.opp.ghost { background: linear-gradient(90deg, transparent, rgba(130,80,210,.92) 30%); }
#intro .plate.me.ghost { background: linear-gradient(270deg, transparent, rgba(130,80,210,.92) 30%); }
#intro .plate.opp.on { animation: plateR .5s cubic-bezier(.2,1.3,.4,1) forwards; }
#intro .plate.me.on { animation: plateL .5s cubic-bezier(.2,1.3,.4,1) forwards; }
@keyframes plateR { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }
@keyframes plateL { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: none; } }
#intro .vs, #intro .go {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%) scale(0); font-weight: 800; color: #ffe66e;
  -webkit-text-stroke: 4px #3a2c4a; paint-order: stroke fill; text-shadow: 0 8px 0 #ff6f9c, 0 16px 30px rgba(0,0,0,.4); opacity: 0; white-space: nowrap;
}
#intro .vs { font-size: clamp(80px, 18vw, 180px); font-style: italic; }
#intro .go { font-size: clamp(44px, 10vw, 100px); color: #fff; }
#intro .vs.on { animation: vsIn .55s cubic-bezier(.2,1.8,.4,1) forwards; }
#intro .go.on { animation: goIn 1.3s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes vsIn { from { opacity: 0; transform: translate(-50%, -50%) scale(3) rotate(-25deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); } }
@keyframes goIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
#intro.leaving .plate, #intro.leaving .vs { transition: opacity .35s; opacity: 0 !important; animation: none; }
#intro .skiphint { position: absolute; right: 16px; bottom: 12px; color: #fff; font-size: 12px; text-shadow: 0 1px 2px #000; opacity: .8; }
body.intro #hud > *:not(#banner) { visibility: hidden; }
body.intro #labels { display: none; }
#hud { pointer-events: none; }
#hud .btn, #hud .icon-btn, #hud .pop, #hud .leader { pointer-events: auto; }
#hud .leader { cursor: pointer; }

@media (max-width: 700px) {
  .pbar { gap: 5px; left: 8px; max-width: calc(100% - 195px); flex-wrap: wrap; }
  .pbar.opp { top: 8px; }
  .mana { padding: 4px 7px; gap: 2px; }
  .mana i { width: 8px; height: 8px; border-width: 1px; }
  .mana b { font-size: 12px; margin-left: 3px; }
  .hud-menu { right: 8px; top: 8px; gap: 5px; }
  .icon-btn { width: 34px; height: 34px; font-size: 15px; }
  .seg button { font-size: 13px; padding: 10px 4px; white-space: nowrap; }
  #hint { top: 92px; font-size: 12px; }
  .bubble.opp { top: 96px; }
  #hand .card:hover { transform: translateY(34%); margin: 0 var(--hm, -18px); }
  #hand .card.sel { transform: translateY(-30%) scale(1.45); margin: 0 var(--hm, -18px); }
  #cardPreview { left: 50%; top: 40%; transform: translate(-50%, -50%) scale(1.6); transform-origin: center; }
  :is(#cardPreview, #zoomBody) .kwhelp { width: 120px; }
  #playShow .card { --s: 1.4; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --card-w: 78px; --card-h: 108px; }
  #hand { height: calc(var(--card-h) * .5); }
  #hand .card { transform: translateY(52%); }
  #hand .card:hover { transform: translateY(52%); margin: 0 var(--hm, -10px); }
  #hand .card.sel { transform: translateY(-10%) scale(1.5); margin: 0 var(--hm, -10px); }
  #hand .card.peek.peek { transform: translateY(10%) scale(1.25); }
  .pbar.me { bottom: 8px; left: 8px; flex-direction: column; align-items: flex-start; max-width: 150px; }
  #hand { left: auto; right: 110px; transform: none; width: auto; justify-content: flex-end; }
  .endturn { top: auto; bottom: 12px; transform: none; }
  #timer { top: auto; bottom: 90px; }
}

/* ---------- モンスターのリスト ---------- */
.units { position: absolute; left: 10px; right: 10px; display: flex; gap: 6px; pointer-events: none; flex-wrap: wrap; justify-content: center; z-index: 3; }
.units.opp { top: 60px; }
.units.me { bottom: calc(var(--card-h) * .66 + 52px); }
/* パソコン：まんなかに並べるとリーダーの体力にかぶるので、左はしにたてに並べる */
@media (min-width: 701px) and (min-height: 501px) {
  .units { right: auto; flex-direction: column; align-items: flex-start; }
  .units.opp { top: 64px; max-height: calc(50vh - 90px); }
  .units.me { max-height: calc(50vh - 90px); }
}
.unit {
  pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 3px; background: rgba(255,255,255,.88);
  border-radius: 12px; padding: 2px 6px 2px 2px; box-shadow: 0 2px 0 rgba(58,44,74,.25); border: 2px solid transparent; font-weight: 800; font-size: 12px;
  transition: transform .12s;
}
.unit img { width: 30px; height: 22px; object-fit: cover; border-radius: 8px; background: #fff; }
.unit .ua { color: #e07a10; } .unit .uh { color: #e0304f; }
.unit .uk { font-size: 11px; }
.unit.can { border-color: #3dff9a; box-shadow: 0 0 10px #3dff9a; }
.unit.tgt { border-color: #ff5a5a; box-shadow: 0 0 10px #ff8a8a; animation: unitPulse 1s infinite; }
.unit.tgt.buff { border-color: #ffd23f; box-shadow: 0 0 10px #ffe066; }
.unit.sel { border-color: #fff; background: #fff6c8; transform: scale(1.1); }
.unit.dim { opacity: .55; }
.unit.leader { background: rgba(255,240,245,.95); }
@keyframes unitPulse { 50% { transform: scale(1.08); } }

/* ---------- くわしい説明（拡大表示） ---------- */
#cardPreview { display: none; transform: translateY(-50%); align-items: flex-start; gap: 10px; z-index: 30; }
#cardPreview.show { display: flex; }
#cardPreview .card { zoom: 1.55; }
:is(#cardPreview, #zoomBody) .kwhelp { margin: 0; width: 230px; font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 14px; }
:is(#cardPreview, #zoomBody) .kwhelp .stline { display: block; color: #6a4fd8; margin-bottom: 4px; }
:is(#cardPreview, #zoomBody) .kwhelp .kwname { font-size: 1.25em; font-weight: 800; line-height: 1.3; }
:is(#cardPreview, #zoomBody) .kwhelp .kwstats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 6px; font-size: .95em; }
:is(#cardPreview, #zoomBody) .kwhelp .kwstats b { font-size: 1.2em; }
:is(#cardPreview, #zoomBody) .kwhelp .kwstats .sa b { color: #e07a10; }
:is(#cardPreview, #zoomBody) .kwhelp .kwstats .sh b { color: #e0304f; }
:is(#cardPreview, #zoomBody) .kwhelp .kwstats .sc b { color: #3a7ae0; }
:is(#cardPreview, #zoomBody) .kwhelp .kwtext { background: #fff6e0; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-weight: 700; }
:is(#cardPreview, #zoomBody) .kwhelp .kwlist { border-top: 1px dashed rgba(58,44,74,.25); padding-top: 5px; font-size: .92em; }
@media (max-width: 700px) {
  #cardPreview { left: 50%; top: 42%; transform: translate(-50%, -50%); flex-direction: column; align-items: center; }
  #cardPreview .card { zoom: 1.3; }
  :is(#cardPreview, #zoomBody) .kwhelp { width: min(300px, 86vw); font-size: 12.5px; }
  .units.opp { top: 82px; }
  .units.me { bottom: calc(var(--card-h) * .62 + 96px); }
  #hint { top: 122px; }
  .unit img { width: 24px; height: 18px; }
  .unit { font-size: 11px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .units.opp { top: 48px; }
  #hint { top: 80px; }
  .units.me { bottom: 8px; left: 170px; right: auto; max-width: 40%; justify-content: flex-start; }
  #cardPreview .card { zoom: 1.1; }
}

/* ---------- 戦闘中のあそびかた ---------- */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(40,30,70,.35); z-index: 60; }
.modal.show { display: flex; }
#askModal { z-index: 80; }
.ask { max-width: min(380px, 90vw); }
.ask p { font-weight: 800; line-height: 1.6; margin: 4px 0 14px; }

/* ---------- ガイド ---------- */
#guide {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%) scale(.9); display: none; gap: 10px; align-items: flex-end;
  width: min(460px, 92vw); z-index: 50; pointer-events: auto; opacity: 0; transition: opacity .25s, transform .25s;
}
#guide.show { display: flex; opacity: 1; transform: translateX(-50%) scale(1); }
#guide img { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); animation: bob 1.6s ease-in-out infinite; flex-shrink: 0; }
#guide .gbody { background: #fff; border-radius: 18px 18px 18px 4px; padding: 10px 14px; box-shadow: var(--shadow); border: 3px solid var(--forest); font-weight: 800; font-size: 15px; line-height: 1.45; flex: 1; }
#guide .gbtn { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
#guide .gbtn button { font: inherit; font-size: 13px; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; background: #eef8e6; color: var(--ink); font-weight: 800; }
#guide .gbtn #guideOk { background: var(--forest); color: #fff; }
#guide.low { top: auto; bottom: 18%; }
#guideArrow { position: fixed; display: none; font-size: 40px; z-index: 49; pointer-events: none; transform: translate(-50%, -100%); animation: arrowBob .8s ease-in-out infinite; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px #ff4f8b); font-size: 46px; }
#guideArrow.show { display: block; }
@keyframes arrowBob { 50% { margin-top: -10px; } }
@media (max-width: 700px) { #guide { top: 16%; } #guide img { width: 56px; height: 56px; } #guide .gbody { font-size: 13.5px; } }
@media (max-height: 500px) and (orientation: landscape) { #guide { top: 18%; } }

.footer-credit span { white-space: nowrap; }

#zoomModal { z-index: 70; cursor: pointer; }
#zoomBody { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 16px; max-width: 94vw; }
#zoomBody .card { zoom: 1.6; }
#zoomBody .kwhelp { font-size: 14px !important; width: min(300px, 86vw) !important; }
@media (max-width: 700px) { #zoomBody { flex-direction: column; } #zoomBody .card { zoom: 1.3; } }

/* スマホで画像を長押し・タップしたときの「画像を開く/保存」メニューやドラッグを出さない */
html, body { -webkit-touch-callout: none; }
img { -webkit-touch-callout: none; -webkit-user-drag: none; user-drag: none; pointer-events: none; }
#listMode { max-width: 360px; margin: 0 auto 6px; }

/* くじら座ボード（ほしよみの魔女団のかけら） */
.starboard { display: flex; align-items: center; gap: 6px; background: rgba(18, 22, 51, .85); border-radius: 12px; padding: 3px 8px 3px 3px; color: #ffe36e; font-weight: 800; font-size: 13px; }
.starboard img { width: 64px; height: 40px; border-radius: 8px; display: block; }
.starboard.done { box-shadow: 0 0 0 2px #ffd23f, 0 0 14px rgba(255, 210, 63, .7); }
.starboard[hidden], #starfall[hidden] { display: none; }
.zone-card { font: inherit; font-weight: 800; border: 0; border-radius: 8px; padding: 2px 6px; background: #2b3473; color: #ffe36e; cursor: pointer; display: flex; align-items: center; gap: 2px; }
.zone-card i { font-style: normal; font-size: 11px; background: #4a7dff; color: #fff; border-radius: 999px; padding: 0 5px; }
.zone-card.can { box-shadow: 0 0 0 2px #ffd23f, 0 0 10px rgba(255, 210, 63, .8); }
#oppStars .zone-card { cursor: default; }
#starfall { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(10, 12, 32, .72); pointer-events: none; animation: starfallIn .5s ease-out; }
#starfall img { width: min(80vw, 520px); border-radius: 18px; box-shadow: 0 0 40px rgba(255, 210, 63, .5); }
#starfall b { color: #ffe36e; font-size: 34px; letter-spacing: .1em; text-shadow: 0 0 12px rgba(255, 210, 63, .8); }
@keyframes starfallIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .starboard img { width: 48px; height: 30px; } .starboard { font-size: 11px; } }
.mode-seg button { position: relative; }
.mode-seg .rec { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 900; background: #ff7a59; color: #fff; border-radius: 99px; padding: 1px 8px; white-space: nowrap; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.mode-seg { margin-top: 12px; }
.how { max-width: min(460px, 92vw); max-height: 90vh; overflow-y: auto; text-align: left; }
.how h2 { text-align: center; font-size: 19px; }
.how #howArt { text-align: center; }
.how #howArt img { width: 180px; height: auto; background: #1d1840; border-radius: 14px; padding: 6px; }
.how ol { padding-left: 1.3em; line-height: 1.65; font-size: 14px; margin: 8px 0 14px; }
.how li { margin-bottom: 6px; }
/* ルームマッチ：試合のかたち・相性の予想 */
.bo-help { font-size: 13px; line-height: 1.6; margin: 8px 2px 0; opacity: .85; }
.deck-opt { position: relative; }
.deck-opt[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; top: -8px; left: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 900; font-size: 13px; display: grid; place-items: center; }
.deck-opt .aff { display: block; clear: both; font-style: normal; font-size: 12px; font-weight: 700; margin-top: 4px; opacity: .85; }
.deck-opt.used { opacity: .45; cursor: default; filter: grayscale(.6); }
.predict { margin-top: 14px; padding: 12px; border-radius: 16px; background: #fff7dd; box-shadow: inset 0 0 0 2px #ffe39a; }
.predict-q { margin: 0 0 10px; font-weight: 800; text-align: center; line-height: 1.6; }
.pred-opp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pred-opp button { font: inherit; border: 3px solid transparent; border-radius: 12px; padding: 6px 4px; cursor: pointer; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.1); color: var(--ink); }
.pred-opp button.on { border-color: #ff7a59; }
.pred-opp img { width: 48px; height: 32px; object-fit: contain; display: block; margin: 0 auto; }
.pred-opp b { display: block; font-size: 11px; line-height: 1.3; }
.pred-opp i { display: block; font-style: normal; font-size: 10px; opacity: .65; }
.pred-rec > p { font-weight: 800; margin: 12px 0 6px; }
.pred-rec .small { font-weight: 600; font-size: 11px; opacity: .7; margin-top: 8px; }
.rec-row { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 6px 8px; margin-bottom: 6px; }
.rec-row .rank { width: 22px; height: 22px; border-radius: 50%; background: #ff7a59; color: #fff; font-weight: 900; display: grid; place-items: center; flex: none; }
.rec-row img { width: 48px; height: 32px; object-fit: contain; flex: none; }
.rec-row div { flex: 1; min-width: 0; }
.rec-row b { display: block; font-size: 14px; }
.rec-row i { display: block; font-style: normal; font-size: 11px; opacity: .75; }
.rec-row .btn { padding: 6px 10px; font-size: 13px; flex: none; }
/* 2本先取・3本先取：次の試合のデッキえらび */
.pick-score { display: flex; justify-content: center; align-items: center; gap: 14px; font-weight: 800; font-size: 18px; }
.pick-score b { font-size: 34px; }
.pick-score .vs { opacity: .5; }
.pick-opp { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pick-opp > div { background: #fff; border-radius: 12px; padding: 6px 10px; text-align: center; min-width: 96px; box-shadow: 0 2px 0 rgba(0,0,0,.1); }
.pick-opp > div.used { opacity: .5; }
.pick-opp img { width: 48px; height: 32px; object-fit: contain; display: block; margin: 0 auto; }
.pick-opp b { display: block; font-size: 12px; }
.pick-opp i { display: block; font-style: normal; font-size: 10px; opacity: .7; }
#resultScore { color: #fff; text-shadow: 0 2px 4px #000; font-size: 18px; font-weight: 700; margin-top: 6px; line-height: 1.6; }
#resultScore b { font-size: 24px; }
#pick #pickStatus { text-align: center; }
/* タイプバトルの相性表 */
.row.tight { margin-top: 10px; }
.btn.inline { display: inline-block; padding: 2px 10px; font-size: 13px; vertical-align: middle; }
.matchtbl { max-width: min(640px, 96vw); max-height: 92vh; overflow-y: auto; padding-left: 10px; padding-right: 10px; }
.matchtbl h2 { font-size: 19px; }
.matchtbl .small { font-size: 12px; line-height: 1.6; }
#matchTable table { border-collapse: separate; border-spacing: 3px; margin: 0 auto; table-layout: fixed; width: 100%; }
#matchTable th { font-size: 10px; line-height: 1.2; padding: 3px 2px; border-radius: 8px; background: #fff; font-weight: 800; word-break: break-all; }
#matchTable th img { width: 34px; height: 24px; object-fit: contain; display: block; margin: 0 auto 1px; }
#matchTable th b { display: block; font-size: 9.5px; }
#matchTable th.corner { background: none; font-size: 9px; opacity: .6; }
#matchTable td { border-radius: 8px; text-align: center; font-weight: 900; font-size: 15px; padding: 4px 0; color: #3a2c4a; }
#matchTable td small { display: block; font-size: 10px; font-weight: 700; opacity: .75; }
#matchTable td.m0 { background: #8fe0a0; }
#matchTable td.m1 { background: #d4f3cf; }
#matchTable td.m2 { background: #f6f3ea; }
#matchTable td.m3 { background: #ffe1c7; }
#matchTable td.m4 { background: #ffb3b3; }
#matchTable td.na { background: #eee; color: #aaa; }
#matchTable td.even { background: #f3eefa; }
/* 戦闘中のデッキ表示 */
.deckview { width: min(760px, 96vw); max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; }
.deckview .deckhead { margin: 10px 2px 8px; font-size: 14px; line-height: 1.5; }
.deckview .deckhead small { opacity: .75; }
.deckview .grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; overflow-y: auto; padding: 8px 4px; min-height: 0; flex: 1; }
.deckview .copies { position: absolute; right: -6px; top: -6px; background: var(--ink); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 800; z-index: 2; }
.deckview .row { margin-top: 10px; }
.handcount.near { background: #ffe9b8; }
.handcount.full { background: #ff8a8a; color: #fff; }
.clock.lethal { background: #ff5d73; color: #fff; }
@media (max-width: 700px) {
  .handcount, .deckcount, .clock { font-size: 11px; padding: 4px 7px; border-radius: 10px; }
}

/* ---------- デッキこうぼう ---------- */
.ws-switch { display: flex; gap: 8px; align-items: center; justify-content: center; font-weight: 800; margin: 10px 0 14px; cursor: pointer; }
.ws-switch input { flex: none; width: 22px; height: 22px; accent-color: var(--ink); }
.ws-seg button { flex: 1 1 auto; font-size: 13px; padding: 8px 6px; }
.ws-bad { color: #e0405a; }
.ws-grid { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.ws-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ws-item.none .card { opacity: .55; }
.ws-ctl { display: flex; align-items: center; gap: 6px; }
.ws-ctl button { font: inherit; font-weight: 800; width: 34px; height: 30px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.12); cursor: pointer; color: var(--ink); }
.ws-ctl b { min-width: 16px; text-align: center; }
#wsOut { width: 100%; min-height: 140px; margin-top: 10px; font: 12px/1.5 monospace; border: 2px solid #e2d6ee; border-radius: 12px; padding: 8px; user-select: text; -webkit-user-select: text; }
.ws-note { margin: 8px 0 0; text-align: center; font-weight: 800; font-size: 13px; color: #6a4fd8; }
@media (max-width: 700px) {
  .ws-grid { gap: 8px 4px; justify-content: center; }
  .ws-item .card { zoom: .8; }
}