body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #0d1b4c;
  color: #f6f3e8;
  overflow-x: hidden;
}
header {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
header h1 { margin: 0; font-size: 18px; }
.lobby { padding: 12px 16px; }
.lobby-row,
.pvp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.cpu-create {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.cpu-create > button.hidden {
  display: none;
}
.cpu-setup {
  max-width: 360px;
  padding: 10px;
  border: 1px solid #4466aa;
  border-radius: 8px;
  background: rgba(18, 37, 95, 0.92);
}
.cpu-setup.hidden {
  display: none;
}
.cpu-setup-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 900;
  color: #fff0a8;
}
.cpu-setup-help {
  margin: 0 0 8px;
  font-size: 13px;
  color: #d5e4ff;
}
.cpu-level {
  display: grid;
  gap: 6px;
}
.cpu-level label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 6px;
  color: #d5e4ff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.cpu-level label:has(input:checked) {
  background: #f0c84b;
  color: #102052;
}
.cpu-level input {
  accent-color: #f0c84b;
}
.tutorial-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(240, 200, 75, 0.42);
  border-radius: 6px;
  color: #f6eab8;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.tutorial-toggle input {
  accent-color: #f0c84b;
}
.cpu-setup-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.lobby-report-row { margin-top: 4px; }
.lobby-report-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #5abfa8;
  border-radius: 14px;
  padding: 14px 20px;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.5px;
  -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #d4f7ee;
  background: linear-gradient(135deg, #1e6650 0%, #124535 50%, #0c3028 100%);
  box-shadow: 0 4px 0 #082518, 0 8px 16px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, filter 0.2s ease, box-shadow 0.08s ease;
}
.lobby-report-btn:hover { filter: brightness(1.12) saturate(1.1); }
.lobby-report-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #082518, 0 4px 10px rgba(0, 0, 0, 0.25);
}
.lobby-report-btn .report-btn-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.lobby-notice { margin: 4px 0 0; font-size: 12px; color: #7a9acc; }
.lobby.lobby-hidden { display: none; }
.doubles-ui-hidden { display: none !important; }
.menu-btn {
  background: #1e3570;
  border: 1px solid #4466aa;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #d5e4ff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.menu-btn:hover { background: #2a4580; }
.menu-btn.hidden { display: none; }
.app {
  display: grid;
  grid-template-columns: 420px 600px 1fr 1fr;
  gap: 8px;
  padding: 8px;
}
aside, section { background: #12255f; border-radius: 8px; padding: 12px; }
.board-wrap {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: 8px auto;
}
.board-col-labels {
  display: flex;
  padding-left: 0;
}
.board-col-labels > span:not(.board-corner) {
  width: 60px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #7ca4d4;
  line-height: 1.6;
}
.board-corner { width: 20px; padding: 0; }
.board-row-container {
  display: flex;
  align-items: stretch;
}
.board-row-labels {
  display: flex;
  flex-direction: column;
  width: 20px;
  flex-shrink: 0;
}
.board-row-labels > span {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #7ca4d4;
}
.board {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(8, 60px);
  grid-template-rows: repeat(8, 60px);
  gap: 0;
  width: fit-content;
  /* border を透明にしてレイアウトサイズを維持しつつ、::before で金枠を描画 */
  border: 2px solid transparent;
  position: relative;
  z-index: 0;
}
/* z-index: -1 で cell（grid item として treated z-index: 0, step6）より先に描画
   → torn overlay（cell内 z-index:5, step6）が金枠より前面に来る */
.board::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid #b18d3d;
  box-sizing: border-box;
  pointer-events: none;
  z-index: -1;
}
.cell {
  width: 60px;
  height: 60px;
  border: 1px dashed #8f7a4a;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  font-size: 39px;
  font-weight: 900;
  color: #111;
}
.cell::after {
  content: attr(data-mark);
  font-size: 39px;
  font-weight: 900;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.cell[data-mark='◯']::after {
  font-size: 38px;
}
.cell[data-mark='×']::after {
  font-size: 50px;
  transform: translateY(-1px);
  display: inline-block;
}
.cell.old-mark::after { opacity: 0.72; }
.cell.recent-mark::after { opacity: 1; color: #000; text-shadow: 0 0 1px #000; }
.cell.taped::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 5px;
  background: rgba(125, 231, 255, 0.38);
  border: 1px solid rgba(125, 231, 255, 0.75);
  pointer-events: none;
  z-index: 1;
}
/* ===== テープスキルアニメーション ===== */
/* tape2: 蛇ウネウネ（横壁） */
.tape-snake-h {
  position: absolute;
  top: -6px;
  left: -4px;
  right: -4px;
  height: 13px;
  background: rgba(125, 231, 255, 0.92);
  border-radius: 6px;
  pointer-events: none;
  z-index: 8;
  transform-origin: left center;
  animation: tapeSnakeH 0.68s ease-out forwards;
}
/* tape2: 蛇ウネウネ（縦壁） */
.tape-snake-v {
  position: absolute;
  left: -6px;
  top: -4px;
  bottom: -4px;
  width: 13px;
  background: rgba(125, 231, 255, 0.92);
  border-radius: 6px;
  pointer-events: none;
  z-index: 8;
  transform-origin: center top;
  animation: tapeSnakeV 0.68s ease-out forwards;
}
/* scaleX で左から伸ばしつつ translateY で上下にうねる */
@keyframes tapeSnakeH {
  0%   { transform: scaleX(0.01) translateY(0px);   opacity: 1; }
  13%  { transform: scaleX(0.22) translateY(-13px); }
  27%  { transform: scaleX(0.48) translateY(11px);  }
  42%  { transform: scaleX(0.70) translateY(-8px);  }
  57%  { transform: scaleX(0.87) translateY(5px);   }
  71%  { transform: scaleX(0.96) translateY(-3px);  }
  83%  { transform: scaleX(1)    translateY(1px);   opacity: 1; }
  100% { transform: scaleX(1)    translateY(0px);   opacity: 0; }
}
@keyframes tapeSnakeV {
  0%   { transform: scaleY(0.01) translateX(0px);   opacity: 1; }
  13%  { transform: scaleY(0.22) translateX(-13px); }
  27%  { transform: scaleY(0.48) translateX(11px);  }
  42%  { transform: scaleY(0.70) translateX(-8px);  }
  57%  { transform: scaleY(0.87) translateX(5px);   }
  71%  { transform: scaleY(0.96) translateX(-3px);  }
  83%  { transform: scaleY(1)    translateX(1px);   opacity: 1; }
  100% { transform: scaleY(1)    translateX(0px);   opacity: 0; }
}
/* tape3: 恵みの雨粒 */
.tape-rain-drop {
  position: absolute;
  top: -10px;
  width: 3px;
  height: 9px;
  background: rgba(100, 220, 255, 0.88);
  border-radius: 0 0 3px 3px;
  pointer-events: none;
  z-index: 8;
  animation: tapeRainFall 0.38s ease-in forwards;
}
@keyframes tapeRainFall {
  0%   { transform: translateY(0);    opacity: 1; }
  80%  { opacity: 0.8; }
  100% { transform: translateY(80px); opacity: 0; }
}
/* tape3: ふわりと定着グロー */
.tape-3-settle {
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(125, 231, 255, 0.60) 0%, rgba(125, 231, 255, 0.18) 55%, transparent 72%);
  pointer-events: none;
  z-index: 7;
  border-radius: 6px;
  opacity: 0;
  animation: tapeSettle 0.55s 0.30s ease-out forwards;
}
@keyframes tapeSettle {
  0%   { opacity: 0; transform: scale(1.35); }
  35%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.90); }
}
.markO, .markX {
  font-size: 30px;
  font-weight: 900;
  text-shadow: 0 0 4px #000, 0 0 8px #000;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
}
.markO {
  color: #1f4b2f;
  border: 3px solid #8dff8d;
}
.markX {
  color: #5f1a1a;
  border: 3px solid #ff8a8a;
}
.wall-top { border-top: 5px solid #7b4a12 !important; }
.wall-left { border-left: 5px solid #7b4a12 !important; }
.hole-icon,
.cut-icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
}
.hole-icon {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  font-size: 22px;
}
.cut-top-icon {
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
}
.cut-left-icon {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}
.tri-left {
  color: #c9ced9;
  transform: scaleX(1.7);
}
.tri-right {
  color: #0d1b4c;
  margin-left: -3px;
  transform: scaleX(1.7);
}
.hand {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.card {
  border: 1px solid #6685dd;
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  color: #fff;
  display: grid;
  gap: 3px;
  text-align: left;
  min-width: 0;
  width: 100%;
  max-width: none;
}
.card.selected { outline: 2px solid #ffd66b; }
.card-new-in {
  animation: cardFlipIn 0.42s ease-out forwards;
  transform-origin: center center;
}
@keyframes cardFlipIn {
  0%   { transform: perspective(500px) translateY(-70px) rotateY(90deg); opacity: 0; }
  38%  { transform: perspective(500px) translateY(0)     rotateY(90deg); opacity: 0.6; }
  100% { transform: perspective(500px) translateY(0)     rotateY(0deg);  opacity: 1; }
}
.card-index { font-size: 11px; opacity: 0.9; }
.card-icon { font-size: 16px; }
.card-label { font-size: 13px; font-weight: 700; }
.card-image {
  width: 100%;
  aspect-ratio: 2 / 3;
  max-height: 170px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.disabled-skill {
  opacity: 0.35;
  filter: grayscale(0.8);
}
.buttons { display: grid; gap: 6px; margin-top: 8px; }
.skill-undo-inline,
.buttons button,
.controls button,
.lobby button {
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.2px;
  -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), 0 0 2px rgba(0, 0, 0, 0.35);
  color: #fff;
  background: linear-gradient(135deg, #d3538c 0%, #bf3e4c 45%, #c9883f 100%);
  box-shadow: 0 4px 0 #7a2d40, 0 8px 14px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.2s ease, box-shadow 0.08s ease;
}
.skill-undo-inline:hover,
.buttons button:hover,
.controls button:hover,
.lobby button:hover {
  filter: brightness(1.05) saturate(1.06);
}
.skill-undo-inline:active,
.buttons button:active,
.controls button:active,
.lobby button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b44b66, 0 5px 10px rgba(0, 0, 0, 0.22);
}
.skill-undo-inline:disabled,
.buttons button:disabled,
.controls button:disabled,
.lobby button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.45) brightness(0.82);
  box-shadow: 0 2px 0 #666, 0 4px 8px rgba(0, 0, 0, 0.2);
}
#researchBtn.hidden {
  display: none;
}
.skill-undo-inline {
  width: 100%;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #6f7b91 0%, #59606d 48%, #3d4554 100%);
  box-shadow: 0 4px 0 #303745, 0 8px 14px rgba(0, 0, 0, 0.34);
}
.skill-undo-inline.hidden {
  display: none;
}
.exchange-big {
  width: 100%;
  min-height: 44px;
  font-size: 18px;
  font-weight: 800;
  margin: 8px 0 10px;
}
.error { color: #ff8888; min-height: 1.5em; }
.research-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin: -4px 0 8px;
  color: #dce8ff;
  font-size: 12px;
  line-height: 1.4;
}
.research-legend.hidden {
  display: none;
}
.research-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.research-result-item {
  font-weight: 700;
}
.research-legend > span.hidden {
  display: none;
}
.research-legend-title {
  color: #f1f5ff;
  font-weight: 700;
}
.tutorial-panel {
  margin: 10px 0 6px;
  padding: 10px;
  border: 1px solid rgba(240, 200, 75, 0.48);
  border-radius: 8px;
  background: rgba(15, 31, 82, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 20px rgba(0, 0, 0, 0.2);
  color: #f7f2db;
  font-size: 13px;
  line-height: 1.55;
}
.tutorial-panel.hidden {
  display: none;
}
.tutorial-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.tutorial-kicker {
  color: #fff0a8;
  font-size: 14px;
  font-weight: 900;
}
.tutorial-step {
  color: #a9c4ff;
  font-size: 12px;
  font-weight: 800;
}
.tutorial-body p {
  margin: 0;
}
.tutorial-image {
  display: block;
  width: min(100%, 260px);
  max-height: 150px;
  object-fit: contain;
  margin: 8px auto 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.tutorial-tip {
  margin-top: 8px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.tutorial-tip-card {
  border-left: 4px solid #f0c84b;
}
.tutorial-tip-rule {
  border-left: 4px solid #7de7ff;
}
.tutorial-tip-title {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 900;
  color: #dbe8ff;
}
.tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tutorial-actions button {
  border: 1px solid #4466aa;
  border-radius: 6px;
  padding: 7px 10px;
  color: #f6f3e8;
  background: #1e3570;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.tutorial-actions button:hover {
  background: #2a4580;
}
.legend-chip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34), 0 0 8px currentColor;
}
.legend-own { background: #2d9eff; color: #2d9eff; }
.legend-pencil-own { background: #4adab2; color: #4adab2; }
.legend-skill-own { background: #8aa2ff; color: #8aa2ff; }
.legend-enemy { background: #ff3d54; color: #ff3d54; }
.legend-pencil-enemy { background: #ffb226; color: #ffb226; }
.legend-skill-enemy { background: #ae5cff; color: #ae5cff; }
.info { margin: 6px 0; color: #d5e4ff; }
#publicInfo {
  font-size: 14px;
  line-height: 1.45;
}
.my-mark {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
}
.public-row { display: block; margin: 2px 0; }
.public-row .label { color: #a9c4ff; font-weight: 700; }
.rule-card {
  width: 100%;
  max-width: 260px;
  display: block;
  margin: 0 auto 10px;
  border-radius: 10px;
}
.howto-block {
  width: 100%;
  margin: 0 auto 10px;
  min-height: 60px;
  font-size: 24px !important;
  line-height: 1.25;
  text-align: center;
}
.howto-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.howto-modal.hidden { display: none; }
.howto-panel {
  background: #12255f;
  border: 2px solid #7cb7ff;
  border-radius: 12px;
  padding: 10px;
  width: min(88vw, 760px);
}
.howto-close {
  margin-bottom: 8px;
}
.howto-image {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 8px;
}
.mini-cards { margin: 0 6px; white-space: normal; word-break: break-all; }
.pub-pencil .mini-cards { white-space: nowrap; }
.mini-pencil {
  width: 40px;
  height: 56px;
  object-fit: contain;
  border-radius: 2px;
  margin-right: 2px;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}
.mini-used-card {
  width: 28px;
  height: 40px;
  object-fit: contain;
  border-radius: 3px;
  margin-right: 2px;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}
.mini-back-card {
  width: 18px;
  height: 26px;
  object-fit: cover;
  border-radius: 2px;
  margin-right: 1px;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}
.mini-back-card-lg {
  width: 36px;
  height: 52px;
  object-fit: cover;
  border-radius: 3px;
  margin-right: 3px;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}
.mini-used-label {
  font-size: 11px;
  background: #27408a;
  border-radius: 4px;
  padding: 1px 4px;
}
/* doubles 相手情報パネル用 */
.doubles-opp-header {
  font-size: 12px;
  font-weight: 700;
  color: #a9c4ff;
  margin: 0 0 4px;
  padding: 0;
}
.doubles-opp-pencil {
  width: 36px;
  height: 50px;
  object-fit: contain;
  border-radius: 2px;
  margin-right: 1px;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}
.doubles-opp-pencils { white-space: nowrap; }
.doubles-opp-card {
  width: 36px;
  height: 50px;
  object-fit: contain;
  border-radius: 3px;
  margin-right: 2px;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}
.doubles-opp-label {
  font-size: 12px;
  color: #c8d8ff;
  vertical-align: middle;
}
.doubles-round-label {
  font-size: 12px;
  color: #a9c4ff;
  font-weight: 600;
}

/* 山札切れ N/3 表示 */
.doubles-deck-status {
  font-size: 12px;
  font-weight: 600;
  color: #a9c4ff;
}
.doubles-deck-warning {
  font-size: 12px;
  font-weight: 700;
  color: #ffb340;
}
.doubles-deck-final {
  font-size: 12px;
  font-weight: 700;
  color: #ff5c5c;
}

/* 山札切れトースト通知 */
.doubles-deck-toast {
  position: fixed;
  top: 68px;
  right: 20px;
  z-index: 600;
  background: rgba(12, 24, 80, 0.95);
  border: 2px solid #7cb7ff;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: #c8d8ff;
  line-height: 1.6;
  pointer-events: none;
  max-width: 260px;
  animation: deckToastIn 0.3s ease-out;
}
.doubles-deck-toast-warning {
  border-color: #ffb340;
  color: #ffe0a0;
}
.doubles-deck-toast-fadeout {
  animation: deckToastOut 0.5s ease-in forwards;
}
@keyframes deckToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes deckToastOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* PC: 山札切れトーストをスキル演出並みの大きさで画面中央に表示 */
@media (min-width: 600px) {
  .doubles-deck-toast {
    font-size: 22px;
    line-height: 1.7;
    padding: 22px 40px;
    max-width: 500px;
    top: 28%;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    animation: deckToastInPC 0.35s ease-out;
  }
  @keyframes deckToastInPC {
    from { opacity: 0; transform: translateX(-50%) scale(0.88); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
  }
  .doubles-deck-toast.doubles-deck-toast-fadeout {
    animation: deckToastOut 0.5s ease-in forwards;
  }
}

.mini-exchanged { display: inline-flex; align-items: flex-end; gap: 6px; vertical-align: middle; }
.mini-exchanged-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  vertical-align: bottom;
}
.mini-exchange-num {
  font-size: 10px;
  font-weight: 700;
  color: #ffd66b;
  line-height: 1;
}
.skill-fx {
  margin: 8px 0;
  padding: 10px;
  background: rgba(12, 24, 70, 0.85);
  border: 2px solid #7cb7ff;
  border-radius: 8px;
  text-align: center;
}
.skill-fx.hidden { display: none; }
.skill-fx.show { display: block; animation: fxShake 0.35s ease-in-out 2; }
.fx-title { font-size: 24px; font-weight: 900; color: #ffe48a; margin-bottom: 6px; }
.fx-cards { display: flex; justify-content: center; gap: 8px; }
.fx-card { width: 92px; height: 132px; object-fit: contain; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); image-rendering: -webkit-optimize-contrast; }
@keyframes fxShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  75% { transform: translateX(10px); }
}
.fx-coord {
  text-align: center;
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  color: #7dc8ff;
  margin-top: 5px;
  letter-spacing: 0.5px;
}
.deck-pill { background: #22366f; padding: 1px 6px; border-radius: 10px; margin-right: 6px; }
/* 消しゴムゴーストオーバーレイ */
.eraser-ghost-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.eraser-ghost-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 900;
  opacity: 0.45;
}
/* 壁配置アニメーション（CSS方式・iOS Safari互換） */
.wall-draw-anim {
  position: absolute;
  background: #e8922a;
  border-radius: 2px;
  pointer-events: none;
  z-index: 7;
}
.wall-draw-anim-h {
  top: -3px;
  left: 0;
  height: 6px;
  width: 0;
  animation: wallDrawH 0.3s ease-out forwards;
}
.wall-draw-anim-v {
  left: -3px;
  top: 0;
  width: 6px;
  height: 0;
  animation: wallDrawV 0.3s ease-out forwards;
}
@keyframes wallDrawH {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes wallDrawV {
  from { height: 0; }
  to   { height: 100%; }
}
/* 壁削除後のゴーストライン */
.eraser-ghost-wall-h {
  position: absolute;
  top: -3px;
  left: -4px;
  right: -4px;
  height: 7px;
  background: rgba(232, 146, 42, 0.42);
  border-radius: 3px;
  pointer-events: none;
}
.eraser-ghost-wall-v {
  position: absolute;
  left: -3px;
  top: -4px;
  bottom: -4px;
  width: 7px;
  background: rgba(232, 146, 42, 0.42);
  border-radius: 3px;
  pointer-events: none;
}
/* ハサミスキル 雷エフェクト */
.lightning-screen-flash {
  position: fixed;
  inset: 0;
  background: rgba(255, 248, 55, 0.60);
  pointer-events: none;
  z-index: 1205;
  animation: lightningFlashFade 0.48s ease-out forwards;
}
@keyframes lightningFlashFade {
  0%   { opacity: 1; }
  22%  { opacity: 0.15; }
  42%  { opacity: 0.9; }
  100% { opacity: 0; }
}
.lightning-bolt-fx {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 20;
  font-size: 52px;
  line-height: 1;
  animation: lightningBoltDrop 0.65s ease-out forwards;
  transform-origin: top center;
  filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #ffe600);
}
@keyframes lightningBoltDrop {
  0%   { transform: translateY(-28px) scaleY(0.4); opacity: 0; }
  18%  { transform: translateY(0) scaleY(1.1);    opacity: 1; }
  42%  { transform: scaleY(1);                    opacity: 1; }
  80%  { opacity: 0.5; }
  100% { opacity: 0; }
}
.eraser-shaving {
  position: absolute;
  border-radius: 2px;
  background: rgba(210, 195, 175, 0.85);
  animation: eraserShaving 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes eraserShaving {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); opacity: 0.8; }
}
/* マーク描画アニメーション用SVGオーバーレイ */
.mark-draw-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}
/* 相手マス上の鉛筆カーソル */
.pencil-cursor-dot {
  position: absolute;
  top: -10px;
  right: -8px;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  z-index: 10;
  animation: pencilBounce 0.7s ease-in-out infinite alternate;
}
@keyframes pencilBounce {
  from { transform: scaleX(-1) rotate(-20deg) scale(0.9); }
  to   { transform: scaleX(-1) rotate(-5deg)  scale(1.15); }
}
/* 壁カーソル: 横壁は上端中央、縦壁は左端中央に配置 */
.pencil-cursor-dot.wall-cursor-h {
  top: -16px;
  right: auto;
  left: 50%;
  translate: -50% 0;
}
.pencil-cursor-dot.wall-cursor-v {
  top: 50%;
  right: auto;
  left: -16px;
  translate: 0 -50%;
}
.guide { display: none; }
.your-turn { color: #7CFC99; font-weight: 800; }
.opponent-turn { color: #ff9f9f; font-weight: 800; }
li { margin-bottom: 4px; }
.log-me    { color: #7CFC99; }
.log-other { color: #ffb0b0; }
.log-latest { font-size: 15px; font-weight: 900; }
.controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.controls button {
  min-width: 0;
  white-space: nowrap;
}
#researchBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: normal;
  line-height: 1.12;
}
.board.disabled { opacity: 0.8; pointer-events: none; }
.board.mark-cursor {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='translate(6 4) rotate(22 18 18)'%3E%3Crect x='10' y='6' width='13' height='28' rx='4' fill='%23f6d365'/%3E%3Crect x='13' y='6' width='7' height='28' rx='3' fill='%23fceea8'/%3E%3Cpolygon points='10,34 23,34 16.5,42' fill='%23d3c5a2'/%3E%3Cpolygon points='14.6,38.6 18.4,38.6 16.5,42' fill='%23212b4e'/%3E%3Crect x='10' y='3' width='13' height='4' rx='2' fill='%23ff8da1'/%3E%3C/g%3E%3C/svg%3E") 8 40, pointer;
}
.board.mark-cursor .cell {
  cursor: inherit;
}
.board.edge-cursor-h .cell {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='6' y='21' width='36' height='6' rx='2' fill='%23212b4e'/%3E%3C/svg%3E") 24 24, crosshair;
}
.board.edge-cursor-v .cell {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='21' y='6' width='6' height='36' rx='2' fill='%23212b4e'/%3E%3C/svg%3E") 24 24, crosshair;
}
.board.diamond-cursor .cell {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpolygon points='16,8 24,16 16,24 8,16' fill='%23212b4e'/%3E%3C/svg%3E") 16 16, crosshair;
}
.skill-glow {
  box-shadow: inset 0 0 0 5px rgba(255, 244, 113, 1), 0 0 24px rgba(255, 244, 113, 1), 0 0 38px rgba(255, 244, 113, 0.95);
  background: radial-gradient(circle, rgba(255, 244, 113, 0.95) 0%, rgba(255, 244, 113, 0.35) 45%, transparent 78%);
  animation: skillImpact 0.9s ease-out;
}
body.skill-flash::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.52);
  pointer-events: none;
  z-index: 1200;
  animation: flashFade 0.22s ease-out forwards;
}
@keyframes flashFade {
  from { opacity: 1; }
  to { opacity: 0; }
}
body.victory-flash::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1300;
  background: radial-gradient(circle, rgba(255, 245, 150, 0.85) 0%, rgba(255, 200, 60, 0.45) 40%, rgba(255, 255, 255, 0.0) 75%);
  animation: victoryPulse 0.9s ease-out;
}
@keyframes victoryPulse {
  0% { opacity: 0; transform: scale(0.8); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* ════════════════════════════════════════════════
   勝利 / 敗北 全画面オーバーレイ
   ════════════════════════════════════════════════ */
.result-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.result-overlay.hidden { display: none; }

.result-overlay.win {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 240, 80, 0.55) 0%, transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(255, 160, 0, 0.45) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 200, 0, 0.88) 0%, rgba(180, 70, 0, 0.92) 45%, rgba(15, 5, 0, 0.97) 100%);
  animation: winOverlayIn 0.55s ease-out;
}
.result-overlay.lose {
  background: linear-gradient(160deg, #0e0c10 0%, #060408 100%);
  animation: defeatWallIn 0.65s ease-out both;
}
.result-overlay.lose::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #3a3840;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #4a4850 0%, #2c2a32 60%, #1a1820 100%);
  animation: defeatBrickBgFade 1.4s ease-in 3.2s forwards;
}

.result-overlay.draw {
  background: linear-gradient(160deg, #1c2650 0%, #0e1535 100%);
  animation: winOverlayIn 0.55s ease-out;
}
.result-overlay.draw .result-title {
  color: #c8d4f0;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8);
  animation: winTitlePop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.4) 0.1s both;
}
.result-overlay.draw .result-sub,
.result-overlay.draw .result-hint {
  color: rgba(200, 215, 240, 0.8);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.result-overlay.doubles-final .result-title {
  font-size: clamp(28px, 6vw, 64px);
}

.result-overlay.doubles-spectate {
  background: linear-gradient(160deg, #1a2040 0%, #0e1530 100%);
  animation: winOverlayIn 0.55s ease-out;
}
.result-overlay.doubles-spectate .result-title {
  color: #c0cce0;
  font-size: clamp(36px, 8vw, 80px);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8);
  animation: winTitlePop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.4) 0.1s both;
}
.result-overlay.doubles-spectate .result-sub,
.result-overlay.doubles-spectate .result-hint {
  color: rgba(190, 210, 240, 0.8);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 勝利コンフェッティ */
.confetti-piece {
  position: absolute;
  top: 0;
  pointer-events: none;
  animation-name: confettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.result-panel {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 18px;
}

.result-title {
  font-size: clamp(72px, 15vw, 160px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
}
.result-overlay.win .result-title {
  color: #fff8c0;
  text-shadow:
    0 0 30px #ffd700,
    0 0 60px #ff8800,
    0 0 100px rgba(255, 200, 0, 0.6),
    0 6px 0 rgba(0, 0, 0, 0.5);
  animation: winTitlePop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.4) 0.1s both;
}
.result-overlay.lose .result-title {
  color: #d8d1c9;
  text-shadow:
    0 5px 0 #0b0706,
    0 12px 28px rgba(0, 0, 0, 0.95);
  animation: defeatTitleDrop 0.8s ease-out 0.18s both;
}

.result-sub {
  font-size: clamp(18px, 4vw, 36px);
  font-weight: 700;
  margin-top: 12px;
}
.result-overlay.win .result-sub {
  color: #ffe48a;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: winTitlePop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.4) 0.3s both;
}
.result-overlay.lose .result-sub,
.result-overlay.lose .result-hint {
  color: rgba(230, 220, 210, 0.72);
  text-shadow: 0 2px 8px #000;
}

.result-hint {
  margin-top: 28px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

.result-report-btn {
  display: block;
  margin: 18px auto 0;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.2s;
}
.result-report-btn:hover { background: rgba(255, 255, 255, 0.28); }
.result-report-btn.hidden { display: none; }

@keyframes winOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes defeatWallIn {
  from { opacity: 0; filter: brightness(1.7); }
  to   { opacity: 1; filter: brightness(1); }
}
@keyframes defeatBrickBgFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* レンガ崩壊アニメーション */
.brick-piece {
  position: absolute;
  z-index: 1;
  width: 60px;
  height: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 45%),
    linear-gradient(180deg, #8c8a90, #4a484e);
  border: 1px solid #252328;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 9px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  opacity: 0;
  animation: brickCollapse var(--fall-duration) cubic-bezier(.28,.02,.76,.22) var(--fall-delay) forwards;
}
@keyframes brickCollapse {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  18% {
    opacity: 1;
    transform: translate3d(calc(var(--drift) * 0.12), 18px, 0) rotate(calc(var(--rot) * 0.2));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift), 130vh, 0) rotate(var(--rot));
  }
}
@keyframes winTitlePop {
  from { transform: scale(0.15) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);      opacity: 1; }
}
@keyframes defeatTitleDrop {
  from { transform: translateY(-70px) scale(1.08); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes confettiFall {
  0%   { transform: translateY(-40px) rotate(0deg);   opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ════════════════════════════════════════════════
   先攻ルーレット
   ════════════════════════════════════════════════ */
.first-roulette {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(5, 12, 38, 0.78);
}
.first-roulette.hidden { display: none; }
.first-roulette-panel {
  width: min(420px, calc(100vw - 32px));
  padding: 22px;
  border: 3px solid #f6d365;
  border-radius: 8px;
  background: #12255f;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.first-roulette-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  color: #ffe38d;
}
.first-roulette-stage {
  position: relative;
  height: 190px;
  display: grid;
  place-items: center;
}
.roulette-mark {
  position: absolute;
  top: 50%;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(246, 243, 232, 0.95);
  font-size: 50px;
  font-weight: 900;
}
.roulette-o { left: 28px; color: #1f7a37; }
.roulette-x { right: 28px; color: #a42121; }
.roulette-pencil {
  width: 160px;
  height: 22px;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  border-radius: 12px 4px 4px 12px;
  background:
    linear-gradient(90deg, #2b2b2b 0 9px, #d3c5a2 9px 24px, #f6d365 24px 124px, #ff8da1 124px 160px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.45);
}
.roulette-pencil.spin {
  animation: firstRouletteSpin 2.2s cubic-bezier(.18,.85,.18,1) forwards;
}
.first-roulette-result {
  min-height: 28px;
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: 900;
}
@keyframes firstRouletteSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--roulette-end)); }
}
.win-path {
  box-shadow: 0 0 0 3px rgba(255, 230, 90, 0.95), 0 0 22px rgba(255, 230, 90, 0.8) !important;
  filter: none !important;
}
.board-has-winner .cell:not(.win-path) {
  filter: brightness(0.35);
  transition: filter 0.3s;
}
.board-has-winner .win-path {
  transition: filter 0.3s;
}
.cell.research-own {
  box-shadow: inset 0 0 0 5px rgba(45, 158, 255, 1), 0 0 18px rgba(45, 158, 255, 0.9) !important;
  background: radial-gradient(circle, rgba(45, 158, 255, 0.42) 0%, rgba(45, 158, 255, 0.18) 62%, transparent 82%) !important;
}
.cell.research-enemy {
  box-shadow: inset 0 0 0 5px rgba(255, 61, 84, 1), 0 0 18px rgba(255, 61, 84, 0.9) !important;
  background: radial-gradient(circle, rgba(255, 61, 84, 0.42) 0%, rgba(255, 61, 84, 0.18) 62%, transparent 82%) !important;
}
.cell.research-both {
  box-shadow: inset 0 0 0 3px rgba(45, 158, 255, 1), inset 0 0 0 8px rgba(255, 61, 84, 0.9), 0 0 20px rgba(188, 121, 255, 0.9) !important;
  background: radial-gradient(circle, rgba(188, 121, 255, 0.44) 0%, rgba(45, 158, 255, 0.18) 48%, rgba(255, 61, 84, 0.18) 78%, transparent 90%) !important;
}
.cell.research-combo-enemy {
  box-shadow: inset 0 0 0 3px rgba(255, 178, 38, 0.96), inset 0 0 0 8px rgba(174, 92, 255, 0.88), 0 0 17px rgba(174, 92, 255, 0.74) !important;
  background: radial-gradient(circle, rgba(174, 92, 255, 0.32) 0%, rgba(255, 178, 38, 0.18) 58%, transparent 82%) !important;
}
.cell.research-combo-own {
  box-shadow: inset 0 0 0 3px rgba(74, 218, 178, 0.94), inset 0 0 0 8px rgba(138, 162, 255, 0.86), 0 0 16px rgba(138, 162, 255, 0.72) !important;
  background: radial-gradient(circle, rgba(138, 162, 255, 0.3) 0%, rgba(74, 218, 178, 0.18) 58%, transparent 82%) !important;
}
.cell.research-skill-enemy {
  box-shadow: inset 0 0 0 4px rgba(174, 92, 255, 0.98), 0 0 17px rgba(174, 92, 255, 0.86) !important;
  background: radial-gradient(circle, rgba(174, 92, 255, 0.4) 0%, rgba(174, 92, 255, 0.17) 62%, transparent 82%) !important;
}
.cell.research-skill-own {
  box-shadow: inset 0 0 0 4px rgba(138, 162, 255, 0.98), 0 0 17px rgba(138, 162, 255, 0.82) !important;
  background: radial-gradient(circle, rgba(138, 162, 255, 0.38) 0%, rgba(138, 162, 255, 0.16) 62%, transparent 82%) !important;
}
.cell.research-pencil-enemy {
  box-shadow: inset 0 0 0 4px rgba(255, 178, 38, 0.98), 0 0 16px rgba(255, 153, 31, 0.82) !important;
  background: radial-gradient(circle, rgba(255, 178, 38, 0.4) 0%, rgba(255, 178, 38, 0.16) 62%, transparent 82%) !important;
}
.cell.research-pencil-own {
  box-shadow: inset 0 0 0 4px rgba(74, 218, 178, 0.95), 0 0 14px rgba(74, 218, 178, 0.72) !important;
  background: radial-gradient(circle, rgba(74, 218, 178, 0.34) 0%, rgba(74, 218, 178, 0.14) 62%, transparent 82%) !important;
}
.research-edge {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  border-radius: 999px;
  opacity: 0.9;
}
.research-edge-h {
  top: -6px;
  left: -4px;
  right: -4px;
  height: 10px;
}
.research-edge-v {
  top: -4px;
  bottom: -4px;
  left: -6px;
  width: 10px;
}
.research-edge-own {
  background: rgba(102, 226, 255, 0.72);
  box-shadow: 0 0 10px rgba(102, 226, 255, 0.95), 0 0 20px rgba(138, 162, 255, 0.78);
}
.research-edge-enemy {
  background: rgba(218, 82, 255, 0.72);
  box-shadow: 0 0 10px rgba(218, 82, 255, 0.92), 0 0 20px rgba(255, 61, 160, 0.74);
}
@keyframes skillImpact {
  0% { transform: scale(0.78); filter: brightness(2.4); }
  35% { transform: scale(1.14); filter: brightness(1.8); }
  100% { transform: scale(1); filter: brightness(1); }
}
.hand.skill-locked {
  opacity: 0.42;
  filter: grayscale(0.55);
}
#roomInput,
#nameInput {
  min-width: 220px;
  min-height: 42px;
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 8px;
}
/* タップ確認ポップアップ（スマホ用） */
.confirm-popup {
  position: fixed;
  bottom: 80px;
  left: 50%;
  translate: -50% 0;
  z-index: 600;
  background: rgba(12, 24, 70, 0.97);
  border: 2px solid #7cb7ff;
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
  min-width: 220px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.65);
}
.confirm-popup.hidden { display: none; }
.confirm-desc { margin: 0 0 8px; font-size: 13px; color: #f6f3e8; }
.confirm-btns { display: flex; gap: 8px; justify-content: center; }
.confirm-btns button {
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}
#confirmOk     { background: #2e8b50; color: #fff; box-shadow: 0 3px 0 #1a5530; }
#confirmCancel { background: #555;    color: #ddd; box-shadow: 0 3px 0 #333; }
#confirmOk:active     { transform: translateY(2px); box-shadow: 0 1px 0 #1a5530; }
#confirmCancel:active { transform: translateY(2px); box-shadow: 0 1px 0 #333; }

/* 確認選択中のセルハイライト */
.cell.confirm-selected {
  background: rgba(255, 244, 113, 0.3) !important;
  box-shadow: inset 0 0 0 3px rgba(255, 244, 113, 0.9);
}
.cell.confirm-selected-h {
  border-top: 4px solid rgba(255, 244, 113, 1) !important;
  background: rgba(255, 244, 113, 0.1) !important;
}
.cell.confirm-selected-v {
  border-left: 4px solid rgba(255, 244, 113, 1) !important;
  background: rgba(255, 244, 113, 0.1) !important;
}
.cell.confirm-selected-h-bottom {
  border-bottom: 4px solid rgba(255, 244, 113, 1) !important;
  background: rgba(255, 244, 113, 0.1) !important;
}
.cell.confirm-selected-v-right {
  border-right: 4px solid rgba(255, 244, 113, 1) !important;
  background: rgba(255, 244, 113, 0.1) !important;
}

/* 枠線スキル発動グロー（scissors2/tape2の対象辺を光らせる。隣接2マス対応）
   z-index:5で隣接セルより前面に出し、外向きのbox-shadowが見えるようにする */
.skill-glow-top {
  border-top: 5px solid rgba(255, 244, 113, 1) !important;
  box-shadow: 0 -12px 20px rgba(255, 244, 113, 0.95) !important;
  z-index: 5;
}
.skill-glow-bottom {
  border-bottom: 5px solid rgba(255, 244, 113, 1) !important;
  box-shadow: 0 12px 20px rgba(255, 244, 113, 0.95) !important;
  z-index: 5;
}
.skill-glow-left {
  border-left: 5px solid rgba(255, 244, 113, 1) !important;
  box-shadow: -12px 0 20px rgba(255, 244, 113, 0.95) !important;
  z-index: 5;
}
.skill-glow-right {
  border-right: 5px solid rgba(255, 244, 113, 1) !important;
  box-shadow: 12px 0 20px rgba(255, 244, 113, 0.95) !important;
  z-index: 5;
}
/* 盤面上の手番表示は非表示（turnInfoに統合）。doublesモードはオーバーライドで表示 */
#myInfo { display: none; }
body.doubles-mode-active #myInfo { display: block; }

/* ログエリアのターン情報（スマホのみ表示） */
#statusLog { display: none; }

/* 相手ターン中ポップアップ（スマホ専用・PC では常に非表示） */
.enemy-turn-panel { display: none; }

/* マーク配置ボタン内のマーク記号・線の向き記号 */
.btn-mark,
.btn-edge-char {
  font-size: 1.35em;
  font-weight: 900;
  color: #ffe48a;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.75);
  paint-order: stroke fill;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  vertical-align: middle;
  line-height: 1;
}

/* 線の向きボタン：壁配置・辺スキル選択中の注意喚起点滅 */
@keyframes orientBtnPulse {
  0%, 100% {
    filter: brightness(1.25) saturate(1.4);
    box-shadow: 0 0 0 3px #ffd66b, 0 0 14px rgba(255, 214, 107, 0.85), 0 4px 0 #7a2d40;
  }
  50% {
    filter: brightness(0.92) saturate(1);
    box-shadow: 0 0 0 2px #c8922a, 0 0 4px rgba(200, 146, 42, 0.4), 0 4px 0 #7a2d40;
  }
}
#edgeOrientationBtn.pulsing {
  animation: orientBtnPulse 0.85s ease-in-out infinite;
}

/* アクティブ中のモード・スキルボタン */
.buttons button.active,
.controls button.active {
  outline: 2px solid #ffd66b;
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(255, 214, 107, 0.65), 0 4px 0 #7a2d40, 0 8px 14px rgba(0, 0, 0, 0.34);
  filter: brightness(1.15);
}

.col-log {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.col-log-fx {
  flex-shrink: 0;
  height: 210px;
  overflow: hidden;
}
.col-log-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.log-header h2 { margin: 0 0 6px; }
.export-log-btn {
  font-size: 12px;
  padding: 4px 10px;
  background: #22366f;
  border: 1px solid #4466aa;
  border-radius: 6px;
  color: #d5e4ff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.export-log-btn:hover:not(:disabled) { background: #2a4580; }
.export-log-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.col-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.col-info-top {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
}
.col-info-bottom {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #2a3f80;
}

/* PC 4カラム時: body を 100vh に固定して各カラムに高さ制約を与える */
@media (min-width: 1101px) {
  body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .app {
    flex: 1;
    min-height: 0;
    grid-template-rows: 1fr;
    align-items: stretch;
  }
  /* col-info に明示的な高さを与えて flex children の 50/50 分割を確立する */
  .col-info {
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
  }

  /* doublesモード PC: 手札カードを2人用対戦版と同サイズに */
  body.doubles-mode-active .hand.doubles-hand {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  body.doubles-mode-active .hand.doubles-hand .doubles-card {
    flex: none;
    min-width: 0;
    max-width: none;
    padding: 6px;
    gap: 3px;
  }
  body.doubles-mode-active .hand.doubles-hand .doubles-card .card-image {
    max-height: 170px;
  }
  /* doublesPanel は PC では透過コンテナ（col-board 背景と統合） */
  body.doubles-mode-active .doubles-panel {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
  }
}

@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════
   スマホ縦画面対応 (幅599px以下)
   ════════════════════════════════════════════════════════ */
@media (max-width: 599px) {

  /* 横スクロール禁止 */
  body { overflow-x: hidden; }

  /* ヘッダーを小さく */
  header    { padding: 6px 10px; }
  header h1 { font-size: 15px; margin: 0; }

  /* アプリ全体・各パネルのパディング縮小 */
  .app { padding: 4px; gap: 6px; display: flex; flex-direction: column; }
  .app > aside, .app > section { padding: 8px; }

  /* 表示順: col-board(盤面) → col-hand(手札) → col-info(情報) → col-log(ログ) */
  .col-board { order: 1; display: flex; flex-direction: column; }
  .col-hand  { order: 2; }
  .col-info  { order: 3; }
  .col-log   { order: 4; }

  /* section 内部の並び替え */
  /* ターン情報(#status)はログエリアの#statusLogに移動するのでここでは非表示 */
  #status         { display: none; }
  #connectionInfo { display: none; }
  #syncInfo       { display: none; }
  #guide          { order: 2; font-size: 13px; }
  #board          { order: 3; }
  .controls       { order: 4; }
  #error          { order: 5; font-size: 13px; }
  #researchLegend { order: 6; }
  #publicInfo     { font-size: 12px; line-height: 1.4; margin: 1px 0; }

  /* 公開情報: スマホでは直近使用・捨て札行を非表示（山札は表示する） */
  .pub-used, .pub-discard { display: none; }
  .mini-back-card-lg { width: 26px; height: 38px; }

  /* ログエリアのターン情報 */
  #statusLog { display: block; font-size: 12px; color: #a9c4ff; border-bottom: 1px solid #2a3f80; padding-bottom: 4px; margin-bottom: 4px; }

  /* col-info: スマホでは固定高さ不要なので flex 分割を解除してコンテンツ高さに合わせる */
  .col-info { overflow: visible; }
  .col-info-top    { flex: 0 0 auto; min-height: unset; overflow-y: visible; }
  .col-info-bottom { flex: 0 0 auto; min-height: unset; overflow-y: visible; }

  /* 盤面をスマホ幅に収める */
  /* 左右合計オフセット: app(4px×2) + section(8px×2) + board-border(2px×2) + row-labels(18px) = 46px */
  .board {
    grid-template-columns: repeat(8, calc((100vw - 46px) / 8));
    grid-template-rows: repeat(8, calc((100vw - 46px) / 8));
    margin: 0;
  }
  .cell {
    width:  calc((100vw - 46px) / 8);
    height: calc((100vw - 46px) / 8);
  }
  .board-col-labels { padding-left: 0; }
  .board-corner { width: 18px; }
  .board-col-labels > span:not(.board-corner) { width: calc((100vw - 46px) / 8); font-size: 10px; }
  .board-row-labels { width: 18px; }
  .board-row-labels > span { height: calc((100vw - 46px) / 8); font-size: 10px; }
  /* マーク文字をセルサイズに比例させる */
  .cell::after                { font-size: calc((100vw - 46px) / 8 * 0.65); }
  .cell[data-mark='◯']::after { font-size: calc((100vw - 46px) / 8 * 0.63); }
  .cell[data-mark='×']::after { font-size: calc((100vw - 46px) / 8 * 0.83); }

  /* タッチ時のセル視覚フィードバック（押している間ハイライト） */
  .board.mark-cursor .cell.touch-active,
  .board.diamond-cursor .cell.touch-active {
    background: rgba(255, 244, 113, 0.25) !important;
    box-shadow: inset 0 0 0 3px rgba(255, 244, 113, 0.85);
  }
  .board.edge-cursor-h .cell.touch-active {
    border-top: 4px solid rgba(255, 244, 113, 0.9) !important;
    background: rgba(255, 244, 113, 0.1) !important;
  }
  .board.edge-cursor-v .cell.touch-active {
    border-left: 4px solid rgba(255, 244, 113, 0.9) !important;
    background: rgba(255, 244, 113, 0.1) !important;
  }
  .board.stapler-cursor .cell.touch-active {
    background: rgba(168, 176, 190, 0.25) !important;
    box-shadow: inset 0 0 0 3px rgba(168, 176, 190, 0.85);
  }

  /* 操作ボタンは4つを1列に収める */
  .controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .controls button {
    font-size: 11px;
    padding: 6px 2px;
    white-space: nowrap;
    line-height: 1.3;
    min-height: 44px;
    letter-spacing: 0;
  }
  #researchBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.12;
  }
  .tutorial-panel {
    font-size: 12px;
    padding: 8px;
  }
  .tutorial-image {
    max-height: 110px;
  }
  .tutorial-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .tutorial-actions button {
    min-height: 38px;
  }
  .research-edge-h {
    top: -5px;
    height: 8px;
  }
  .research-edge-v {
    left: -5px;
    width: 8px;
  }

  .buttons { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 6px; }
  .buttons button { font-size: 12px; padding: 8px 4px; }

  /* 手札を1行（5列に広げてラベルが1行に収まるようにする） */
  .hand { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .card { padding: 3px 2px; gap: 2px; }
  .card-label { font-size: 9px; white-space: nowrap; overflow: hidden; }
  .card-icon  { font-size: 11px; }
  .card-index { display: none; }
  .card-image { max-height: 70px; }

  /* カード交換ボタン */
  .exchange-big { font-size: 14px; margin: 4px 0 6px; }

  /* 公開情報内の小アイコンを縮小 */
  .mini-pencil    { width: 20px; height: 28px; }
  .mini-used-card { width: 20px; height: 28px; }
  .mini-back-card { width: 12px; height: 18px; }
  .doubles-opp-pencil { width: 26px; height: 36px; }
  .doubles-opp-card   { width: 26px; height: 36px; }

  /* ルールカード画像を非表示 */
  .rule-card { display: none; }

  /* 遊び方ボタンを小さく */
  .howto-block { font-size: 15px !important; min-height: 44px; }

  /* ロビーを縦列化・inputのmin-width解除 */
  .lobby { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
  .lobby-row,
  .pvp-actions,
  .cpu-create,
  .cpu-setup-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 6px;
  }
  .cpu-setup {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
  }
  #roomInput, #nameInput { min-width: 0; width: 100%; box-sizing: border-box; }

  /* ログゾーン上部のスキル演出スペースはPC専用。display:noneではなくheight:0にして
     fixed子(#skillFx.show)がレンダリングツリーから除外されないようにする */
  .col-log-fx { height: 0; overflow: hidden; }

  /* スキルFX共通（モバイル）: 相手スキル時はパネル直上、自分のスキル時はヘッダー直下 */
  #skillFx.show {
    position: fixed;
    bottom: 110px;
    top: auto;
    left: 50%;
    translate: -50% 0;
    z-index: 599;
    width: min(90vw, 280px);
    background: rgba(12, 24, 70, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    padding: 6px 10px;
  }
  /* 自分のスキル時は画面下部（相手パネルと同位置・自分ターン中は空き）に表示 */
  #skillFx.show.own-skill {
    bottom: 0;
    top: auto;
    border-radius: 8px 8px 0 0;
  }

  /* 相手ターン中：アクション案内とボタンを非表示 */
  body.sp-enemy-turn #guide    { display: none; }
  body.sp-enemy-turn .controls { display: none; }

  /* 相手ターン中ポップアップ */
  .enemy-turn-panel {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(8, 18, 55, 0.96);
    border-top: 2px solid #4466aa;
    padding: 8px 14px 12px;
    z-index: 600;
    font-size: 12px;
    line-height: 1.5;
  }
  .enemy-turn-panel.hidden { display: none; }
  .enemy-turn-title {
    color: #ffd66b;
    font-weight: 700;
    font-size: 13px;
    margin: 0 0 6px;
  }
  /* ポップアップ内を3カラムで1行表示: 相手エンピツ保有 | 直近スキル | 直近交換 */
  .panel-info-row {
    display: flex;
    gap: 6px;
  }
  .panel-info-col {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .panel-col-label {
    display: block;
    color: #a9c4ff;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 2px;
  }
  .skill-target-coord {
    display: inline-block;
    margin-top: 3px;
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    color: #7dc8ff;
    background: rgba(60, 130, 220, 0.18);
    border: 1px solid #3a6db0;
    border-radius: 3px;
    padding: 0 4px;
    letter-spacing: 0.5px;
  }

  .fx-card  { width: 42px; height: 60px; }
  .fx-title { font-size: 14px; margin-bottom: 4px; }
  .fx-coord { font-size: 11px; margin-top: 3px; }

  /* ログを高さ制限（スクロール可能） */
  #log { max-height: 120px; overflow-y: auto; }

  /* 見出しを小さく */
  h2 { margin: 2px 0 6px; font-size: 15px; }

  /* タップ応答性向上（ダブルタップズームを抑制） */
  .cell, .card, .buttons button, .controls button, .lobby button {
    touch-action: manipulation;
  }
}

/* ─── BUNGU REPORT ─────────────────────────────────────────────────────────── */

@keyframes reportSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── PC: 右サイドパネル ── */
.report-modal {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 40%;
  min-width: 280px;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: stretch;
  z-index: 200;
}
.report-modal.hidden { display: none; }

.report-panel {
  background: #0e1a35;
  border-left: 2px solid #2a5aaa;
  border-radius: 0;
  padding: 20px;
  width: 100%;
  overflow-y: auto;
  color: #dde;
}

/* ── タブ（PCでは非表示）── */
.report-tabs { display: none; }

.report-player-wrap { flex: 1; min-width: 0; }

.report-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  border-bottom: 1px solid #2a5aaa;
  padding-bottom: 10px;
}

.report-title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #aaccff;
  margin: 0;
}

.report-close {
  background: none;
  border: 1px solid #446;
  color: #aab;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
}
.report-close:hover { background: #1a2a4a; }

.report-players {
  display: flex;
  gap: 16px;
}

.report-player {
  flex: 1;
  background: #121e38;
  border-radius: 8px;
  padding: 14px;
  min-width: 0;
}

.report-player-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.report-mark {
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
}
.report-mark-o { color: #5599ff; }
.report-mark-x { color: #ff6655; }

.report-name {
  font-size: 14px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-tactic-label {
  font-size: 10px;
  color: #778;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}

.report-tactic {
  font-size: 15px;
  font-weight: bold;
  color: #ffcc55;
  margin-bottom: 10px;
}

.report-total {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

.report-total-label {
  font-size: 10px;
  color: #778;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.report-items { display: flex; flex-direction: column; gap: 7px; }

.report-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.report-item-label {
  width: 46px;
  color: #99aacc;
  flex-shrink: 0;
  font-size: 11px;
}

.score-bar {
  flex: 1;
  height: 8px;
  background: #1e2e50;
  border-radius: 4px;
  overflow: hidden;
  display: block;
}

.score-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2a6aff, #88ccff);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.score-num {
  width: 28px;
  text-align: right;
  font-size: 12px;
  color: #ccd;
  flex-shrink: 0;
}

.report-summary {
  margin-bottom: 18px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-feature {
  font-size: 14px;
  color: #aac4ff;
  letter-spacing: 0.03em;
}

.report-reason {
  font-size: 13px;
  color: #ffd080;
  letter-spacing: 0.03em;
}

/* ── モバイル: ボトムシート + タブ ── */
@media (max-width: 640px) {
  .report-modal {
    top: auto; right: 0; bottom: 0; left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    align-items: flex-end;
  }
  .report-panel {
    border-left: none;
    border-top: 2px solid #2a5aaa;
    border-radius: 14px 14px 0 0;
    padding: 10px 10px 12px;
    height: 48vh;
    animation: reportSlideUp 0.26s ease-out;
  }
  .report-header { margin-bottom: 8px; padding-bottom: 6px; }
  .report-title { font-size: 13px; }
  .report-summary {
    margin-bottom: 8px;
    padding: 6px 8px;
    gap: 3px;
  }
  .report-feature { font-size: 11px; }
  .report-reason  { font-size: 10px; }

  /* タブ（マーク＋名前＋戦術タイプ入り） */
  .report-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
  }
  .report-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid #446;
    border-radius: 6px;
    color: #99aacc;
    cursor: pointer;
  }
  .report-tab.active {
    background: rgba(42, 90, 170, 0.25);
    border-color: #2a5aaa;
  }
  .tab-mark { font-size: 13px; font-weight: bold; line-height: 1; }
  .tab-mark-o { color: #5599ff; }
  .tab-mark-x { color: #ff6655; }
  .tab-player-name { font-size: 10px; color: #ccd; }
  .tab-tactic-label { font-size: 9px; color: #ffcc55; }

  /* 非アクティブプレイヤーを隠す */
  .report-player-wrap { display: none; }
  .report-player-wrap.active { display: block; }

  /* プレイヤーヘッダーと戦術タイプはタブに統合済みなので非表示 */
  .report-player-header { display: none; }
  .report-tactic-label  { display: none; }
  .report-tactic        { display: none; }

  /* スコアの圧縮 */
  .report-players { flex-direction: column; gap: 0; }
  .report-player { padding: 8px; }
  .report-total { font-size: 24px; }
  .report-total-label { font-size: 9px; margin-bottom: 6px; }
  .report-items { gap: 4px; }
  .report-item { font-size: 10px; gap: 4px; }
  .report-item-label { font-size: 10px; width: 36px; }
  .score-bar { height: 5px; }
  .score-num { font-size: 10px; width: 22px; }
}

/* ── SNS共有用キャプチャカード（通常は非表示） ── */
.share-player-card {
  display: none;
  position: fixed;
  left: -9999px;
  top: 0;
  width: 480px;
  background: #0e1a35;
  color: #dde;
  padding: 24px;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
}
.share-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #2a5aaa;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.share-logo { font-size: 20px; font-weight: bold; color: #aaccff; letter-spacing: 2px; }
.share-game { font-size: 11px; color: #6677aa; }
.share-card-summary { margin-bottom: 16px; font-size: 13px; color: #aac; line-height: 1.6; }
.share-card-player .report-player { background: #121e38; border-radius: 8px; padding: 16px; }
/* ─── 画像出力カード共通：タクティクスアイコン右上固定 */
.share-player-with-icon { position: relative; }
.sticker-content { position: relative; }
.report-icon {
  position: absolute;
  top: 32px;
  right: 20px;
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
  filter: contrast(1.4);
  opacity: 0.9;
  pointer-events: none;
}
.share-footer { text-align: center; margin-top: 16px; font-size: 11px; color: #4455aa; }

/* ── シール印刷専用キャプチャカード（Phomemo M02 Pro向け） ── */
.share-sticker-card {
  display: none;
  position: fixed;
  left: -9999px;
  top: 0;
  width: 300px;
  background: #ffffff;
  color: #000;
  padding: 14px 16px;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
}
.sticker-title {
  font-size: 19px;
  font-weight: bold;
  color: #000;
  text-align: center;
  border-bottom: 2.5px solid #000;
  padding-bottom: 8px;
  margin-bottom: 12px;
  letter-spacing: 3px;
}
.sticker-content { color: #000; }
.sticker-player-row { display: flex; align-items: center; gap: 10px; }
.sticker-mark {
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  color: #000;
  -webkit-text-stroke: 1px #000;
}
.sticker-name { font-size: 17px; font-weight: bold; color: #000; }
.sticker-tactic { font-size: 14px; font-weight: bold; color: #000; margin-bottom: 6px; }
.sticker-total { font-size: 48px; font-weight: 900; color: #000; line-height: 1; }
.sticker-total-label { font-size: 13px; color: #333; margin-bottom: 10px; }
.sticker-item { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sticker-item-label { font-size: 13px; font-weight: bold; color: #000; width: 38px; flex-shrink: 0; }
.sticker-bar {
  flex: 1;
  height: 14px;
  background: #cccccc;
  border-radius: 3px;
  overflow: hidden;
  display: block;
}
.sticker-bar-fill { display: block; height: 100%; background: #000000; border-radius: 3px; }
.sticker-num { font-size: 13px; font-weight: bold; color: #000; width: 26px; text-align: right; flex-shrink: 0; }
.sticker-feature {
  font-size: 12px;
  color: #222;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1.5px solid #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 「シール用」ボタン */
.report-sticker-btn {
  padding: 5px 12px;
  background: #fff;
  color: #333;
  border: 1px solid #888;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.report-sticker-btn:hover { background: #f0f0f0; }

/* 「画像を保存」ボタン */
.report-save-btn {
  padding: 5px 14px;
  background: #1a2a5a;
  color: #aaccff;
  border: 1px solid #2a5aaa;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.report-save-btn:hover { background: #2a3a7a; }

/* ─── ダブルスモード簡易パネル ─────────────────────────────────────── */
.doubles-panel {
  background: #0d1b3e;
  border: 1px solid #2a4a8a;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 13px;
  color: #c8d8f8;
}
.doubles-panel.hidden { display: none; }
.doubles-title {
  font-size: 15px;
  font-weight: bold;
  color: #88aaff;
  margin: 0 0 8px;
}
.doubles-seats {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.doubles-seat-row { margin: 2px 0; }
.doubles-seat-id {
  display: inline-block;
  width: 18px;
  font-weight: bold;
  color: #ffdd88;
}
.doubles-row { margin: 4px 0; }
.doubles-label {
  font-weight: bold;
  color: #88aaff;
  margin-right: 4px;
}
.doubles-label-sm { font-size: 11px; color: #6688cc; }
.doubles-hidden-hand { color: #888; font-style: italic; }
.doubles-winner {
  margin-top: 8px;
  font-size: 15px;
  font-weight: bold;
  color: #ffdd55;
}

.doubles-turn-status {
  margin: 6px 0 2px;
  font-size: 13px;
  font-weight: bold;
  color: #ccc;
}

.doubles-end-turn-btn {
  margin: 4px 0 8px;
  padding: 6px 16px;
  background: #2a4a2a;
  color: #ccc;
  border: 1px solid #4a8a4a;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.doubles-end-turn-btn:not(:disabled):hover {
  background: #3a6a3a;
  color: #fff;
}
.doubles-end-turn-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── ダブルス ヘクス盤 ─────────────────────────────── */
.doubles-hex-board {
  width: 100%;
  display: block;
  margin: 4px auto 0;
}

.dhex-cell {
  fill: #f7f8fa;
  stroke: #bdc3cc;
  stroke-width: 1;
}

/* 勝利セル強調 */
.dhex-cell.dhex-win {
  fill: #bbf7d0;
  stroke: #16a34a;
  stroke-width: 3;
}

/* クリック可能セル（自分の手番・空きマス） */
.dhex-clickable {
  cursor: pointer;
}
.dhex-clickable:hover {
  fill: #d1fae5;
  stroke: #22c55e;
  stroke-width: 2;
}

/* クリック可能セル（強化モード：自チームのマークⅠ） */
.dhex-clickable-upgrade {
  cursor: pointer;
}
.dhex-clickable-upgrade:hover {
  fill: #fef9c3;
  stroke: #eab308;
  stroke-width: 2;
}

/* クリック可能セル（VOID化モード：相手チームのマークⅠ） */
.dhex-clickable-void {
  cursor: pointer;
}
.dhex-clickable-void:hover {
  fill: #fee2e2;
  stroke: #ef4444;
  stroke-width: 2;
}

/* mark テキスト（白背景に合わせた濃い色） */
.dhex-mark {
  font-size: 19px;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}
.dhex-mark-O1   { fill: #1a1a1a; }
.dhex-mark-O2   { fill: #1a1a1a; }
.dhex-mark-X1   { fill: #1a1a1a; font-size: 17px; }
.dhex-mark-X2   { fill: #1a1a1a; font-size: 26px; }
.dhex-mark-VOID { fill: #7c3aed; font-size: 26px; }

/* 勝利パス上のマーク文字（明るい背景に合わせて濃色＋白縁取り） */
.dhex-mark-win {
  fill: #111827;
  font-weight: 800;
  stroke: #ffffff;
  stroke-width: 3px;
  paint-order: stroke;
}

/* ダブルスhex tape2：セルをスーッと横断するテープ帯 */
.dhex-tape-sweep {
  position: absolute;
  top: 40%;
  left: -15%;
  width: 130%;
  height: 26%;
  background: rgba(125, 231, 255, 0.92);
  border-radius: 7px;
  pointer-events: none;
  z-index: 8;
  transform-origin: left center;
  animation: dhexTapeSweep 0.70s ease-out forwards;
}
@keyframes dhexTapeSweep {
  0%   { transform: scaleX(0.01) rotate(-10deg); opacity: 1; }
  25%  { transform: scaleX(0.45) rotate(-7deg);  opacity: 0.95; }
  55%  { transform: scaleX(0.88) rotate(-3deg);  opacity: 0.80; }
  80%  { transform: scaleX(1.00) rotate(0deg);   opacity: 0.45; }
  100% { transform: scaleX(1.00) rotate(0deg);   opacity: 0; }
}

/* テープ済みオーバーレイ（2人用の::before効果をSVGで再現） */
.dhex-tape-overlay {
  fill: rgba(125, 231, 255, 0.38);
  pointer-events: none;
}

/* 穴セル（scissors3で開いた穴）：マークを透過して見せるため塗りつぶし除去 */
.dhex-cell.dhex-cell-hole {
  stroke: none;
}
/* 穴の記号テキストはSVG属性で直接設定（CSSクラス不要） */

/* 辺表示（2人用に合わせた壁色・カット・テープ） */
.dhex-edge-wall {
  stroke: #7b4a12;
  stroke-width: 5.5;
  stroke-linecap: round;
  pointer-events: none;
}
.dhex-edge-wall.dhex-edge-wall-new {
  animation: dhexWallAppear 0.4s ease-out;
}
@keyframes dhexWallAppear {
  0%   { stroke-width: 0; opacity: 0; }
  40%  { stroke-width: 9; opacity: 1; }
  100% { stroke-width: 5.5; opacity: 1; }
}
.dhex-edge-cut {
  stroke: #ef4444;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 5 3;
  pointer-events: none;
}
/* テープ線：2人用の tape-snake 色（#7de7ff）に合わせる */
.dhex-edge-tape {
  stroke: #7de7ff;
  stroke-width: 5;
  stroke-linecap: round;
  pointer-events: none;
}

/* クリッカブル辺 hitbox（壁を書くモード） */
.dhex-edge-clickable {
  stroke: rgba(80, 160, 255, 0.12);
  stroke-width: 12;
  stroke-linecap: round;
  cursor: crosshair;
  pointer-events: all;
}
.dhex-edge-clickable:hover {
  stroke: rgba(80, 160, 255, 0.45);
}

/* スキル対象辺 hitbox（eraser2 / scissors2 / tape2） */
.dhex-edge-clickable-skill-eraser,
.dhex-edge-clickable-skill-scissors,
.dhex-edge-clickable-skill-tape {
  stroke-width: 10;
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: all;
}
/* スマホでも辺が見えるよう薄く表示。hover時はより明るく */
.dhex-edge-clickable-skill-eraser  { stroke: rgba(255, 80, 80, 0.20); }
.dhex-edge-clickable-skill-scissors { stroke: rgba(255, 160, 0, 0.20); }
.dhex-edge-clickable-skill-tape    { stroke: rgba(60, 200, 100, 0.20); }
.dhex-edge-clickable-skill-eraser:hover  { stroke: rgba(255, 80, 80, 0.70); }
.dhex-edge-clickable-skill-scissors:hover { stroke: rgba(255, 160, 0, 0.70); }
.dhex-edge-clickable-skill-tape:hover    { stroke: rgba(60, 200, 100, 0.70); }

/* MVP通知 */
.doubles-mvp-notice {
  font-size: 11px;
  color: #888;
  margin: 2px 0 4px;
}

/* ── ヘクス盤 凡例 ──────────────────────────────────── */
.doubles-hex-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 11px;
  color: #555;
  margin: 4px 4px 0;
  padding: 4px 0;
  border-top: 1px solid #ccc;
}
.doubles-hex-legend-item {
  white-space: nowrap;
}
.doubles-hex-legend-sym {
  font-weight: bold;
  margin-right: 2px;
}

/* 凡例記号の個別色（実盤面の表示色と対応） */
.dhex-legend-o1        { color: #1a1a1a; }
.dhex-legend-o2        { color: #1a1a1a; }
.dhex-legend-x1        { color: #dc2626; }
.dhex-legend-x2        { color: #ea580c; }
.dhex-legend-void      { color: #6b7280; }
.dhex-legend-hole      { color: #374151; }
.dhex-legend-tape-dot  { color: #16a34a; }
.dhex-legend-wall      { color: #7b4a12; }
.dhex-legend-cut       { color: #ef4444; }
.dhex-legend-tape-line { color: #22c55e; }

/* doubles exchange UI */
.doubles-hand-section {
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doubles-hand-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.doubles-hand-card {
  padding: 3px 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 0.85em;
}
.doubles-hand-card.selected {
  background: #4a90d9;
  color: #fff;
  border-color: #2b6cb0;
}
.doubles-hand-card:disabled {
  opacity: 0.5;
  cursor: default;
}
.doubles-exchange-btn {
  margin-top: 6px;
  width: 100%;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, #d3538c 0%, #bf3e4c 45%, #c9883f 100%);
  box-shadow: 0 3px 0 #7a2d40, 0 6px 10px rgba(0,0,0,0.28);
  cursor: pointer;
  transition: filter 0.1s;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.doubles-exchange-btn:not(:disabled):hover { filter: brightness(1.1); }
.doubles-exchange-btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}


.doubles-skill-selected-info {
  font-size: 0.82em;
  color: #ccbbaa;
  margin: 2px 0;
}
.doubles-skill-candidate {
  font-size: 0.85em;
  font-weight: bold;
  color: #f0d080;
  margin: 2px 0;
}
.doubles-skill-candidate-none {
  color: #888;
  font-weight: normal;
}
/* スキル発動ボタン：2人対戦版スキルボタンに合わせたスタイル（背景はJS側で skillButtonGradient で設定） */
.doubles-skill-use-btn {
  margin-top: 6px;
  width: 100%;
  min-height: 40px;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: #fff;
  background: linear-gradient(135deg, #d3538c 0%, #bf3e4c 45%, #c9883f 100%);
  box-shadow: 0 3px 0 #5a2030, 0 6px 10px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: filter 0.1s;
  text-shadow: 0 1px 1px rgba(0,0,0,0.45);
}
.doubles-skill-use-btn:not(:disabled):hover { filter: brightness(1.1); }
.doubles-skill-use-btn:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}
/* スキル対象候補セル：盤面色は変えずカーソルのみ変更（タップ後の確認待ちグレーで対象を示す） */
.dhex-cell.dhex-clickable-skill,
.dhex-cell.dhex-clickable-skill-eraser,
.dhex-cell.dhex-clickable-skill-scissors,
.dhex-cell.dhex-clickable-skill-tape { cursor: crosshair; }
.dhex-cell.dhex-clickable-skill:hover,
.dhex-cell.dhex-clickable-skill-eraser:hover,
.dhex-cell.dhex-clickable-skill-scissors:hover,
.dhex-cell.dhex-clickable-skill-tape:hover { fill: #94a3b8 !important; opacity: 0.85; }

/* スマホ確認待ちセル（タップ後グレー表示） */
.dhex-cell.dhex-cell-confirm-pending { fill: #94a3b8 !important; opacity: 0.85; }
/* 穴セルの確認待ちはグレー表示（マークが見えるよう fill は上書きしない） */
.dhex-cell.dhex-cell-hole.dhex-cell-confirm-pending { opacity: 0.7; }
/* 確認待ち辺（黄色ハイライト） */
.dhex-edge-confirm-highlight {
  stroke: #fbbf24;
  stroke-width: 7;
  stroke-linecap: round;
  pointer-events: none;
}
.doubles-skill-target-notice {
  font-size: 0.85em;
  color: #c4b5fd;
  font-weight: 600;
  margin: 4px 0;
  padding: 4px 6px;
  background: rgba(124, 58, 237, 0.2);
  border-left: 3px solid #7c3aed;
  border-radius: 0 4px 4px 0;
}
.doubles-skill-cancel-btn {
  margin-top: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 0 #3b0d8a;
  transition: filter 0.1s;
}
.doubles-skill-cancel-btn:hover { filter: brightness(1.1); }

/* ── doubles 複数席保持UI ──────────────────────────────── */
.doubles-local-seats {
  margin: 6px 0;
  padding: 6px 8px;
  border: 1px solid #445;
  border-radius: 6px;
  background: #1a1a2e;
  font-size: 0.85em;
}
.doubles-local-seat-info {
  margin: 2px 0;
  color: #ccc;
}
.doubles-local-turn-info {
  margin: 2px 0;
  font-weight: bold;
}
.doubles-local-turn-mine {
  color: #6af;
}
.doubles-local-turn-other {
  color: #888;
}
.doubles-local-warning {
  margin: 4px 0 2px;
  font-size: 0.8em;
  color: #f90;
}
.doubles-add-seat-btn {
  margin-top: 6px;
  padding: 4px 12px;
  border: 1px solid #6af;
  border-radius: 4px;
  background: #0a1628;
  color: #6af;
  cursor: pointer;
  font-size: 0.85em;
}
.doubles-add-seat-btn:hover {
  background: #112244;
}
.doubles-local-seat-note {
  font-size: 0.78em;
  color: #f90;
  margin: 3px 0 0;
}

/* ── doubles 部屋情報エリア ─────────────────────────────── */
.doubles-room-info {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #334;
  border-radius: 8px;
  background: #111122;
}
.doubles-room-code-area {
  margin: 6px 0;
}
.doubles-room-code-row {
  margin: 2px 0 4px;
  font-size: 1em;
}
.doubles-room-code-value {
  font-size: 1.5em;
  font-weight: bold;
  color: #6af;
  letter-spacing: 0.08em;
  font-family: monospace;
  margin-left: 4px;
}
.doubles-room-code-desc {
  font-size: 0.82em;
  color: #aaa;
  margin: 2px 0 6px;
}
.doubles-room-copy-btn {
  padding: 5px 14px;
  border: 1px solid #6af;
  border-radius: 4px;
  background: #0a1628;
  color: #6af;
  cursor: pointer;
  font-size: 0.85em;
}
.doubles-room-copy-btn:hover {
  background: #112244;
}

/* ── doubles 参加状況 ──────────────────────────────────── */
.doubles-seats-status {
  margin: 8px 0 4px;
}
.doubles-seats-status-title {
  font-size: 0.85em;
  color: #aaa;
  margin: 0 0 3px;
  font-weight: bold;
}
.doubles-seat-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.88em;
  padding: 2px 0;
}
.doubles-seat-status-row.seat-joined {
  color: #ddd;
}
.doubles-seat-status-row.seat-waiting {
  color: #666;
}
.doubles-seat-status-id {
  font-weight: bold;
  min-width: 12px;
  color: #9be;
}
.doubles-seat-status-name {
  font-weight: bold;
  overflow-wrap: anywhere;
}
.doubles-seat-status-meta {
  font-size: 0.9em;
  color: #aaa;
}
.doubles-seat-joined-badge {
  font-size: 0.78em;
  color: #4c8;
  border: 1px solid #4c8;
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 2px;
}
.doubles-seat-waiting-text {
  color: #666;
  font-style: italic;
}
.doubles-seat-me {
  font-size: 0.78em;
  color: #fa0;
  margin-left: 4px;
  font-weight: bold;
}

/* ── doubles 2端末ガイド ────────────────────────────────── */
.doubles-two-terminal-guide {
  margin: 8px 0 4px;
  padding: 6px 8px;
  background: #0d1a1a;
  border-left: 3px solid #4c8;
  border-radius: 0 4px 4px 0;
}
.doubles-two-terminal-title {
  font-size: 0.82em;
  font-weight: bold;
  color: #4c8;
  margin: 0 0 2px;
}
.doubles-two-terminal-text {
  font-size: 0.8em;
  color: #999;
  margin: 0;
}

/* ── doubles カード：2人対戦版 .card に合わせたスタイル ─── */
.doubles-card {
  border: 1px solid #6685dd;
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  color: #fff;
  display: grid;
  gap: 2px;
  text-align: left;
  /* 手札5枚が1行に収まるよう small に */
  flex: 0 1 88px;
  min-width: 48px;
  max-width: 88px;
}
/* 交換選択中：2人対戦版と同じ outline */
.doubles-card.selected { outline: 2px solid #ffd66b; }
/* スキル選択中：橙 outline で交換選択と区別 */
.doubles-card.skill-selected { outline: 2px solid #d46b00; }
/* disabled：2人対戦版と同じ opacity */
.doubles-card:disabled {
  opacity: 0.4;
  cursor: default;
}
.doubles-card:not(:disabled):hover {
  filter: brightness(0.85);
}
/* doubles パネルは狭いため画像高さを制限 */
.doubles-card .card-image {
  max-height: 60px;
}
/* モード切り替えタブ */
.doubles-card-mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.doubles-card-mode-tab {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #445;
  border-radius: 4px;
  background: #1a1a2e;
  color: #8899bb;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.doubles-card-mode-tab.active {
  background: #1a4a8a;
  border-color: #4a8ad4;
  color: #fff;
}
.doubles-card-mode-tab:disabled {
  opacity: 0.35;
  cursor: default;
}
.doubles-card-mode-tab:not(.active):not(:disabled):hover {
  background: #2a2a3e;
  color: #ccd;
}

/* ── doubles カードセクション共通 ──────────────────────── */
.doubles-card-section {
  margin: 8px 0 4px;
  padding: 8px 10px;
  border: 1px solid #334;
  border-radius: 6px;
  background: #0d1424;
}
.doubles-card-section-title {
  font-size: 0.8em;
  font-weight: bold;
  color: #88aaff;
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #334;
  letter-spacing: 0.04em;
}
/* スキルセクションは区切り線で差別化 */
.doubles-skill-section {
  border-color: #4a3a00;
  background: #131008;
}
.doubles-skill-section .doubles-card-section-title {
  color: #d4a430;
  border-bottom-color: #4a3a00;
}

/* ── 操作状態パネル ─────────────────────────────────────── */
.doubles-status-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  background: #101828;
  border: 1px solid #2a4a6a;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0 4px;
  font-size: 0.82em;
}
.doubles-status-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.doubles-status-label { color: #7a9abb; }
.doubles-status-value { font-weight: bold; }
.doubles-status-ok  { color: #5cf07a; }
.doubles-status-ng  { color: #888; }

/* ── 操作モードセクション ──────────────────────────────── */
.doubles-mode-section {
  margin: 6px 0 4px;
}
.doubles-mode-section-label {
  font-size: 0.78em;
  color: #8aabcc;
  margin: 0 0 4px;
}
.doubles-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.doubles-mode-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #222;
  color: #ccc;
  cursor: pointer;
}
.doubles-mode-btn.active {
  background: #1a4a8a;
  border-color: #4a8ad4;
  color: #fff;
  font-weight: bold;
}
.doubles-mode-btn:hover:not(.active) {
  background: #333;
  color: #fff;
}

/* ── doublesモード手札：2人用 handEl を使用 ─────────────────── */
/* doublesモード中は col-hand のグリッドをflex/5列に切り替え */
.hand.doubles-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* doublesカードは hand 内でも同じサイズ */
.hand.doubles-hand .doubles-card {
  flex: 1 1 72px;
  min-width: 56px;
  max-width: 100px;
}
/* doublesスキルボタン（.buttons 内に動的追加） */
.doubles-skill-btn {
  border: 1px solid #6685dd;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
}
.doubles-skill-btn:hover { filter: brightness(1.1); }

/* 部屋情報の折りたたみ（details/summary） */
.doubles-room-info-summary {
  font-size: 12px;
  color: #6688cc;
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  outline: none;
}
.doubles-room-info-summary::marker,
.doubles-room-info-summary::-webkit-details-marker { display: none; }
.doubles-room-info-summary::before { content: '▶ '; font-size: 10px; }
details[open] .doubles-room-info-summary::before { content: '▼ '; }

/* ヘクス盤4隅のマーク種別ラベル（font-sizeはCSSで管理、SVGのoverflow:visibleで表示） */
.dhex-corner-label {
  font-size: 48px;
  font-weight: 900;
  opacity: 0.92;
  pointer-events: none;
}
/* 手番中のマーク：黄色背景円の上に暗色テキストで視認性確保 */
.dhex-corner-active {
  font-size: 60px;
  opacity: 1;
  fill: #1a1200 !important;
  stroke: none;
}
.dhex-corner-active.dhex-corner-o1 { font-size: 46px; }
/* 非アクティブのコーナー背景円 */
.dhex-corner-bg {
  fill: rgba(255, 255, 255, 0.78);
  stroke: rgba(160, 160, 160, 0.45);
  stroke-width: 1.5;
}
/* アクティブ席の黄色い塗りつぶし背景円 */
.dhex-corner-active-bg {
  fill: rgba(255, 215, 0, 0.92);
  stroke: rgba(255, 180, 0, 1);
  stroke-width: 2;
  animation: cornerActivePulse 1.2s ease-in-out infinite;
}
@keyframes cornerActivePulse {
  0%, 100% { fill: rgba(255, 215, 0, 0.88); }
  50%       { fill: rgba(255, 235, 60, 1);   }
}
/* ◯チームは黒色（×チームとは記号で区別） */
.dhex-corner-o1 { fill: #1a1a1a; font-size: 40px; }
.dhex-corner-o2 { fill: #1a1a1a; font-size: 58px; }
.dhex-corner-x1 { fill: #1a1a1a; }
.dhex-corner-x2 { fill: #1a1a1a; font-size: 58px; }

/* ── doublesモード スマホ表示順 ───────────────────────────── */
@media (max-width: 599px) {
  /* doublesモード中の col-hand は col-board の後（order:2）のまま */
  /* doublesPanel が col-board 内にあるため board→hand の順は自然に保たれる */
  /* doublesPanel 内: 部屋情報を最後に配置（DOM順で制御済み） */
  .doubles-panel { font-size: 12px; padding: 6px 8px; }
  .doubles-hex-board { max-width: 100%; }
}

/* doublesモード中は山札情報を小さく */
.doubles-deck-info { font-size: 11px; color: #7a9abb; margin: 2px 0; }

/* doubles モードのコントロールボタン（2人用 .controls と同じスタイル） */
.doubles-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0;
}
.doubles-ctrl-btn {
  border: none;
  border-radius: 12px;
  padding: 8px 4px;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.2px;
  -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  color: #fff;
  background: linear-gradient(135deg, #d3538c 0%, #bf3e4c 45%, #c9883f 100%);
  box-shadow: 0 4px 0 #7a2d40, 0 8px 14px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  min-width: 0;
  touch-action: manipulation;
}
.doubles-ctrl-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(0.45) brightness(0.82);
  box-shadow: 0 2px 0 #666, 0 4px 8px rgba(0, 0, 0, 0.2);
}
.doubles-ctrl-btn.active {
  outline: 2px solid #ffd66b;
  outline-offset: 2px;
  box-shadow: 0 0 10px rgba(255, 214, 107, 0.65), 0 4px 0 #7a2d40;
  filter: brightness(1.15);
}
.doubles-ctrl-btn.pulsing {
  animation: orientBtnPulse 0.85s ease-in-out infinite;
}
.doubles-ctrl-btn.doubles-edgedir-btn {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 60%, #2563eb 100%);
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.6), 0 4px 0 #1e3a8a;
}

/* doubles ガイドテキスト */
.doubles-guide {
  font-size: 12px;
  color: #d5e4ff;
  margin: 4px 0 6px;
  line-height: 1.45;
}

/* doublesヘクス盤面: SVGマーク新規追加アニメーション */
.dhex-mark-new {
  animation: dhexMarkPop 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.4) both;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes dhexMarkPop {
  0%   { transform: scale(0.1); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}


/* スマホ: doublesモード中はパネルパディングを最小化して盤面を広げる */
@media (max-width: 599px) {
  body.doubles-mode-active .doubles-panel {
    padding: 4px 4px;
    margin: 2px 0;
  }
  body.doubles-mode-active .col-board {
    padding: 0;
  }
  /* doublesPanel内にガイドあるため col-board の #guide / #error は非表示 */
  body.doubles-mode-active #guide { display: none; }
  body.doubles-mode-active #error { min-height: 0; }
  /* col-hand 上部パディングを縮小（盤面との間を詰める） */
  body.doubles-mode-active .col-hand { padding-top: 4px; }
}

/* スマホ: doublesモードを1画面に収める */
@media (max-width: 599px) {
  .doubles-controls { gap: 4px; }
  .doubles-ctrl-btn { font-size: 11px; padding: 6px 2px; min-height: 40px; }
  .doubles-guide { font-size: 11px; margin: 2px 0 4px; }
  .doubles-hex-board { width: 100%; height: auto; }

  /* ゲーム進行中の情報ブロックを非表示（盤面→ボタン→手札の流れを確保） */
  .doubles-status-panel { display: none; }
  .doubles-room-info-ingame { display: none; }
  .doubles-deck-info { display: none; }
  .doubles-opp-hand-row { display: none; }

  /* 山札切れ表示: スマホでは補足テキストを非表示にして短く */
  .doubles-deck-sub { display: none; }
  .doubles-deck-status, .doubles-deck-warning, .doubles-deck-final { font-size: 11px; }

  /* 山札切れトースト: スマホでは上部中央に表示 */
  .doubles-deck-toast {
    right: auto;
    left: 50%;
    top: 56px;
    max-width: 80vw;
    font-size: 12px;
    padding: 8px 12px;
    animation: deckToastInMobile 0.3s ease-out;
  }
  @keyframes deckToastInMobile {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  /* 手札5枚を必ず1列に収める */
  .hand.doubles-hand { flex-wrap: nowrap; gap: 2px; overflow: hidden; }
  .hand.doubles-hand .doubles-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 2px 1px;
    gap: 1px;
    overflow: hidden; /* iOS Safari: flex shrink を確実に効かせる */
  }
  .hand.doubles-hand .doubles-card .card-image { max-height: 58px; }
  .hand.doubles-hand .doubles-card .card-label {
    font-size: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── doubles hex board カーソル: 操作モード別 ──────────────── */
/* 鉛筆モード（マーク配置・強化・VOID化）→ 鉛筆アイコン（標準の mark-cursor と同じ） */
.doubles-hex-board.doubles-cursor-pencil .dhex-clickable,
.doubles-hex-board.doubles-cursor-pencil .dhex-clickable-upgrade,
.doubles-hex-board.doubles-cursor-pencil .dhex-clickable-void {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='translate(6 4) rotate(22 18 18)'%3E%3Crect x='10' y='6' width='13' height='28' rx='4' fill='%23f6d365'/%3E%3Crect x='13' y='6' width='7' height='28' rx='3' fill='%23fceea8'/%3E%3Cpolygon points='10,34 23,34 16.5,42' fill='%23d3c5a2'/%3E%3Cpolygon points='14.6,38.6 18.4,38.6 16.5,42' fill='%23212b4e'/%3E%3Crect x='10' y='3' width='13' height='4' rx='2' fill='%23ff8da1'/%3E%3C/g%3E%3C/svg%3E") 8 40, pointer;
}
/* 辺モード（壁配置・辺スキル: eraser2/scissors2/tape2）→ 線の向きに応じた3種カーソル */
/* edge-0: ╱（-45度斜め） */
.doubles-hex-board.doubles-cursor-edge-0 .dhex-edge-clickable,
.doubles-hex-board.doubles-cursor-edge-0 .dhex-edge-clickable-skill-eraser,
.doubles-hex-board.doubles-cursor-edge-0 .dhex-edge-clickable-skill-scissors,
.doubles-hex-board.doubles-cursor-edge-0 .dhex-edge-clickable-skill-tape {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='6' y='21' width='36' height='6' rx='2' fill='%23212b4e' transform='rotate(-45 24 24)'/%3E%3C/svg%3E") 24 24, crosshair;
}
/* edge-1: ━（横線） */
.doubles-hex-board.doubles-cursor-edge-1 .dhex-edge-clickable,
.doubles-hex-board.doubles-cursor-edge-1 .dhex-edge-clickable-skill-eraser,
.doubles-hex-board.doubles-cursor-edge-1 .dhex-edge-clickable-skill-scissors,
.doubles-hex-board.doubles-cursor-edge-1 .dhex-edge-clickable-skill-tape {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='6' y='21' width='36' height='6' rx='2' fill='%23212b4e'/%3E%3C/svg%3E") 24 24, crosshair;
}
/* edge-2: ╲（45度斜め） */
.doubles-hex-board.doubles-cursor-edge-2 .dhex-edge-clickable,
.doubles-hex-board.doubles-cursor-edge-2 .dhex-edge-clickable-skill-eraser,
.doubles-hex-board.doubles-cursor-edge-2 .dhex-edge-clickable-skill-scissors,
.doubles-hex-board.doubles-cursor-edge-2 .dhex-edge-clickable-skill-tape {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Crect x='6' y='21' width='36' height='6' rx='2' fill='%23212b4e' transform='rotate(45 24 24)'/%3E%3C/svg%3E") 24 24, crosshair;
}
/* マークスキルモード（eraser3・scissors3・tape3）→ 菱形アイコン（標準の diamond-cursor と同じ） */
.doubles-hex-board.doubles-cursor-diamond .dhex-cell.dhex-clickable-skill,
.doubles-hex-board.doubles-cursor-diamond .dhex-cell.dhex-clickable-skill-eraser,
.doubles-hex-board.doubles-cursor-diamond .dhex-cell.dhex-clickable-skill-scissors,
.doubles-hex-board.doubles-cursor-diamond .dhex-cell.dhex-clickable-skill-tape {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpolygon points='16,8 24,16 16,24 8,16' fill='%23212b4e'/%3E%3C/svg%3E") 16 16, crosshair;
}

/* ── ダブルス 部屋コードポップアップ（4人揃うまで自動表示） ─── */
.doubles-room-popup {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
}
.doubles-room-popup.hidden { display: none; }
.doubles-room-popup-panel {
  background: #0d1b3e;
  border: 2px solid #4466aa;
  border-radius: 14px;
  padding: 28px 36px;
  min-width: 300px;
  max-width: 440px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
}
.doubles-room-popup-title {
  font-size: 18px;
  font-weight: 900;
  color: #fff0a8;
  margin: 0 0 6px;
}
.doubles-room-popup-label {
  font-size: 13px;
  color: #aac4ff;
  margin: 0 0 16px;
}
.doubles-room-popup-code {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid #3355aa;
  border-radius: 8px;
  padding: 12px 24px;
  margin: 0 0 14px;
  font-family: monospace;
}
.doubles-room-popup-copy-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2a6aff 0%, #1a4adb 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 12px;
  box-shadow: 0 3px 0 #1a2a80;
  transition: filter 0.1s;
}
.doubles-room-popup-copy-btn:hover { filter: brightness(1.12); }
.doubles-room-popup-joined {
  font-size: 13px;
  color: #7adfaa;
  font-weight: 700;
  margin: 0 0 8px;
}
.doubles-room-popup-note {
  font-size: 11px;
  color: #5577aa;
  margin: 0 0 14px;
}
.doubles-room-popup-dismiss {
  background: transparent;
  border: 1px solid #3355aa;
  border-radius: 8px;
  color: #5577aa;
  font-size: 12px;
  padding: 5px 16px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.doubles-room-popup-dismiss:hover { color: #aac4ff; border-color: #6688bb; }

/* ── ポップアップ内「追加着席」エリア ──────────────────────── */
.doubles-popup-divider {
  border: none;
  border-top: 1px solid #2a3f80;
  margin: 12px 0;
}
.doubles-popup-add-seat-btn {
  display: block;
  width: 100%;
  background: #1d3e8a;
  color: #c8d8ff;
  border: 1px solid #4466aa;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.doubles-popup-add-seat-btn:hover:not(:disabled) { background: #2a4ea0; }
.doubles-popup-add-seat-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.doubles-popup-add-seat-msg {
  font-size: 10px;
  color: #8899bb;
  margin: 6px 0 0;
  line-height: 1.4;
}

/* ─── ダブルス最終判定シーケンスオーバーレイ ─────────────────────────────── */
.doubles-final-sequence {
  position: fixed;
  inset: 0;
  z-index: 2480;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.doubles-final-sequence.hidden { display: none; }
/* reveal中はサブテロップを画面下部に表示して盤面を遮らないようにする */
.doubles-final-sequence.reveal-active .doubles-final-telop {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
}

.doubles-final-sequence-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  transition: opacity 0.5s ease;
}
.doubles-final-sequence.reveal-active .doubles-final-sequence-backdrop {
  opacity: 0;
}

.doubles-final-telop {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 32px;
  max-width: 90vw;
}
.doubles-final-telop-main {
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  line-height: 1.25;
  white-space: pre-line;
}
.doubles-final-telop-sub {
  font-size: clamp(1.1rem, 3vw, 1.8rem);
  font-weight: 600;
  color: #ffd700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  min-height: 1.4em;
  line-height: 1.4;
}

/* ─── 最終判定 reveal ハイライトセルクラス（1マスずつ点灯演出用） ──────────── */
.dhex-cell.dhex-final-reveal-circle {
  fill: #fb923c !important;
  stroke: #f97316 !important;
  stroke-width: 3 !important;
  opacity: 1 !important;
}
.dhex-cell.dhex-final-reveal-cross {
  fill: #60a5fa !important;
  stroke: #3b82f6 !important;
  stroke-width: 3 !important;
  opacity: 1 !important;
}
.dhex-cell.dhex-final-dimmed {
  opacity: 0.2 !important;
}
@keyframes finalRevealPulse {
  0%   { filter: brightness(3); }
  100% { filter: brightness(1); }
}
.dhex-cell.dhex-final-reveal-new {
  animation: finalRevealPulse 0.4s ease-out;
}

/* ============================================================
   Site Header (redesigned)
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 56px;
  background: #07101e;
  border-bottom: 1px solid rgba(193, 150, 40, 0.35);
  flex-shrink: 0;
  gap: 12px;
  position: relative;
  z-index: 50;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.header-emblem {
  font-size: 20px;
  line-height: 1;
  color: #c9a227;
  filter: drop-shadow(0 0 4px rgba(201, 162, 39, 0.5));
  flex-shrink: 0;
}
.header-logo {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #d4af37;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.header-nav-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #b8cce0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  box-shadow: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
  letter-spacing: 0;
}
.header-nav-btn:hover {
  background: rgba(193, 150, 40, 0.15);
  border-color: rgba(193, 150, 40, 0.4);
  color: #d4c080;
  filter: none;
  transform: none;
}
.header-nav-btn:active {
  transform: none;
  box-shadow: none;
}
.header-nav-ico {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.header-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.header-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #b8cce0;
  border-radius: 1px;
  transition: background 0.15s;
}
.header-hamburger:hover { background: rgba(193, 150, 40, 0.1); }
.header-hamburger:hover span { background: #d4c080; }
.header-hamburger:active { transform: none; box-shadow: none; }
.header-nav-btn-soon {
  opacity: 0.45;
  cursor: not-allowed;
}
/* ゲーム中はナビを非表示（menuBtnが表示状態のとき） */
#menuBtn:not(.hidden) ~ #headerNav {
  display: none;
}

/* ============================================================
   Home Screen
   ============================================================ */
.home-screen {
  background: #06091a;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.lobby.home-screen { padding: 0; }
.lobby:not(.lobby-hidden) ~ .app { display: none; }
@media (min-width: 1101px) {
  .home-screen:not(.lobby-hidden) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}

/* ---- Hero Area ---- */
.hs-hero {
  display: flex;
  align-items: stretch;
  position: relative;
  min-height: 440px;
  overflow: visible;
  background: #06091a;
}
.hs-hero-content {
  position: relative;
  z-index: 2;
  flex: 0 0 36%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 48px 24px 60px;
  background: linear-gradient(to right,
    #06091a 0%, #06091a 36%,
    rgba(6,9,26,0.93) 54%,
    rgba(6,9,26,0.52) 72%,
    rgba(6,9,26,0.12) 88%,
    transparent 100%
  );
}
.hs-hero-title {
  margin: 0 0 8px;
  font-size: 50px;
  font-weight: 900;
  color: #f2efe6;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75);
}
.hs-gold {
  color: #d4af37;
  text-shadow:
    0 0 28px rgba(212, 175, 55, 0.7),
    0 0 8px rgba(212, 175, 55, 0.45),
    0 2px 4px rgba(0,0,0,0.5);
}
.hs-hero-sub {
  margin: 0 0 14px;
  font-size: 18px;
  color: #8eaacc;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.hs-hero-rule {
  width: 60px;
  height: 2px;
  background: linear-gradient(to right, #c9a227, rgba(201,162,39,0.15));
  margin-bottom: 14px;
}

/* 部屋参加パネル */
.hs-join-panel {
  background: rgba(5, 8, 22, 0.48);
  border: 1px solid rgba(193, 150, 40, 0.48);
  border-radius: 10px;
  padding: 10px 14px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4),
              inset 0 0 0 1px rgba(255,255,255,0.03),
              0 0 18px rgba(193, 150, 40, 0.08);
  max-width: 320px;
}
.hs-join-label {
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(201, 162, 39, 0.72);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
}
.hs-join-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hs-join-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hs-input-code,
.hs-input-name {
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(193, 150, 40, 0.28);
  border-radius: 7px;
  color: #f0ede4;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.hs-input-code:focus,
.hs-input-name:focus {
  border-color: rgba(193, 150, 40, 0.7);
  background: rgba(255, 255, 255, 0.09);
}
.hs-input-code { width: 170px; }
.hs-input-name { width: 120px; }
.hs-input-code::placeholder,
.hs-input-name::placeholder {
  color: rgba(154, 176, 204, 0.45);
  font-size: 13px;
}
#joinRoom.hs-join-btn {
  padding: 9px 20px;
  background: linear-gradient(135deg, #c9a227 0%, #9a7b18 100%);
  border: none;
  border-radius: 7px;
  color: #07101e;
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.38);
  transition: filter 0.15s, transform 0.08s, box-shadow 0.08s;
  text-shadow: none;
  -webkit-text-stroke: 0;
  letter-spacing: 0.02em;
  width: 100%;
  display: block;
  text-align: center;
  box-sizing: border-box;
}
#joinRoom.hs-join-btn:hover { filter: brightness(1.1); transform: none; }
#joinRoom.hs-join-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(201, 162, 39, 0.22);
}
.hs-room-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hs-room-info {
  margin: 0;
  font-size: 12px;
  color: #9ab0cc;
}
.hs-room-info:empty { display: none; }

/* Hero Image: 2層構成（背景層＋前景層） */
/* 差し替え時は .hs-hero-img-bg と .hs-hero-img 両方の src を変更する */
.hs-hero-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
/* img-wrap 下部フェード: hero外（モードセクション上部）への画像をフェードアウト */
.hs-hero-img-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -120px;
  height: 220px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(6,9,26,0.55) 40%,
    #06091a 75%
  );
  pointer-events: none;
  z-index: 3;
}
/* 背景層: ぼかし・暗め・低コントラストで雰囲気づくり */
.hs-hero-img-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 50%;
  filter: blur(24px) brightness(0.22) saturate(0.5);
  transform: scale(1.12);
}
/* 前景層: hero全体を覆う主ビジュアル（20%拡大） */
.hs-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: scale(1.45);
  mask-image: linear-gradient(to right, black 0%, black 45%, transparent 93%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 45%, transparent 93%);
}
/* hero::afterはimg-wrap::afterに置き換えたため非表示 */
.hs-hero::after {
  display: none;
}

/* ---- Section Headings ---- */
.hs-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.hs-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(193,150,40,0.55), transparent);
  margin-left: 4px;
}
.hs-diamond {
  font-size: 8px;
  color: #c9a227;
  opacity: 0.85;
}

/* ---- Mode Cards Section ---- */
.hs-modes-section {
  padding: 8px 0 12px;
  max-width: 1520px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  background: rgba(6, 9, 26, 0.82);
}
.hs-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
/* .lobby button を上書き */
.home-screen .hs-mode-card {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
  text-decoration: none;
  -webkit-text-stroke: 0;
}
.home-screen .hs-mode-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.home-screen .hs-mode-card:active {
  transform: translateY(-1px);
  filter: brightness(0.96);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}
.hs-btn-img {
  width: 100%;
  height: auto;
  display: block;
}
/* CPU カード選択中 */
.home-screen #createCpuRoom.hidden {
  display: block !important;
  opacity: 0.52;
  outline: 2px solid rgba(193, 150, 40, 0.65);
  outline-offset: 2px;
  pointer-events: none;
}

/* ---- CPU Setup Modal ---- */
.hs-cpu-modal:not(.hidden) {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  max-width: 360px;
  width: 90vw;
  box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.68),
              0 24px 60px rgba(0, 0, 0, 0.88);
}

/* ---- Coming Soon Section ---- */
.hs-coming-section {
  padding: 10px 0 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 1520px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  background: rgba(6, 9, 26, 0.9);
}
.hs-coming-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.hs-coming-card {
  display: block;
}
.hs-coming-disabled {
  opacity: 0.52;
  pointer-events: none;
}

/* ---- Roadmap Footer ---- */
.hs-footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 13px 16px;
  background: #04080e;
  border-top: 1px solid rgba(193, 150, 40, 0.2);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.hs-footer-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(201, 162, 39, 0.65);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.hs-footer-link:hover { color: #c9a227; }
.hs-footer-link-icon { font-size: 15px; }
.hs-footer-link-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.65;
  transition: opacity 0.15s;
  vertical-align: middle;
}
.hs-footer-link:hover .hs-footer-link-img { opacity: 1; }

/* ---- notice ---- */
.home-screen .lobby-notice {
  text-align: center;
  font-size: 11px;
  padding: 6px 16px 10px;
  color: #3a5070;
  margin: 0;
}

/* ---- レスポンシブ: タブレット ---- */
@media (max-width: 1100px) {
  .site-header { padding: 0 16px; }
  .hs-hero { min-height: 360px; }
  .hs-hero-content {
    flex: 0 0 52%;
    padding: 22px 32px 22px 36px;
  }
  .hs-hero-title { font-size: 40px; }
  .hs-modes-section { padding: 8px 0 20px; }
  .hs-coming-section { padding: 20px 0 24px; }
  .hs-footer-links { padding: 12px 12px; }
  .hs-mode-grid { grid-template-columns: repeat(2, 1fr); }
  .hs-coming-grid { grid-template-columns: repeat(2, 1fr); }
}

main.app.ddb-app-hidden { display: none; }

/* ===== +Δ デッキ構築画面 ===== */
.delta-deck-builder {
  min-height: 100vh;
  background: #0d1b4c;
  color: #f6f3e8;
  display: flex;
  flex-direction: column;
}
.delta-deck-builder.hidden { display: none; }

.ddb-wrap {
  max-width: 840px;
  margin: 0 auto;
  padding: 24px 16px 40px;
  width: 100%;
  box-sizing: border-box;
}

/* ---- 2カラムメインレイアウト ---- */
.ddb-main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.ddb-col-right {
  position: sticky;
  top: 16px;
}

/* ---- 自分のデッキ 小見出し ---- */
.ddb-my-deck-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(201, 162, 39, 0.65);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- アクション行（合計枚数 + 決定ボタン を1行に） ---- */
.ddb-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
#ddbActionRow.hidden { display: none; }

/* ---- 合計枚数 ---- */
.ddb-total-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 9px;
  border: 1px solid rgba(193, 150, 40, 0.15);
  flex-shrink: 0;
}
.ddb-total-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(201, 162, 39, 0.65);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ddb-total-num {
  font-size: 20px;
  font-weight: 900;
  color: #f0ede4;
  letter-spacing: 0.03em;
}
.ddb-total-current { }
.ddb-total-current.ddb-total-ok { color: #4ade80; }
.ddb-total-current.ddb-total-over { color: #f87171; }

/* ---- カードリスト ---- */
.ddb-cards-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.ddb-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.1s;
}
.ddb-card-row:hover { background: rgba(255, 255, 255, 0.065); }
.ddb-card-img {
  width: 46px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.ddb-card-name {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #e8e0d0;
  min-width: 0;
}
.ddb-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ddb-select {
  background: rgba(10, 18, 60, 0.85);
  border: 1px solid rgba(193, 150, 40, 0.45);
  border-radius: 8px;
  color: #f0ede4;
  font-size: 17px;
  font-weight: 900;
  padding: 5px 8px;
  cursor: pointer;
  min-width: 54px;
  text-align: center;
}
.ddb-select:disabled { opacity: 0.35; cursor: default; }
.ddb-counter-max-text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(180, 170, 150, 0.55);
  white-space: nowrap;
}
.ddb-max-btn {
  background: rgba(193, 150, 40, 0.10);
  border: 1px solid rgba(193, 150, 40, 0.38);
  border-radius: 7px;
  color: #c9a227;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.ddb-max-btn:hover:not(:disabled) { background: rgba(193, 150, 40, 0.26); }
.ddb-max-btn:disabled { opacity: 0.25; cursor: default; }

/* ---- アクションボタン ---- */
.ddb-btns-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.ddb-confirm-row {
  flex: 1;
  min-width: 0;
}
.ddb-btn {
  flex: 1;
  padding: 12px 10px;
  border-radius: 9px;
  border: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.15s, transform 0.08s, box-shadow 0.08s;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ddb-btn:hover:not(:disabled) { filter: brightness(1.12); }
.ddb-btn:active:not(:disabled) { transform: translateY(1px); }
.ddb-btn:disabled { opacity: 0.32; cursor: default; filter: none; }
.ddb-btn-recommend {
  background: linear-gradient(135deg, #1d5140 0%, #0e3020 100%);
  color: #7effd4;
  border: 1px solid rgba(126, 255, 212, 0.28);
}
.ddb-btn-reset {
  background: rgba(255, 255, 255, 0.05);
  color: #b8a898;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ddb-btn-confirm {
  display: block;
  width: 100%;
  padding: 15px;
  font-size: 16px;
  background: linear-gradient(135deg, #c9a227 0%, #8a6a10 100%);
  color: #050f0a;
  border: 1px solid #c9a227;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.32);
}
.ddb-btn-confirm:not(:disabled):hover {
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.5);
}
.ddb-btn-confirm:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 240, 220, 0.38);
  border-color: transparent;
  box-shadow: none;
}
.ddb-btn-redo {
  display: block;
  width: 100%;
  padding: 11px;
  font-size: 14px;
  background: rgba(255, 90, 70, 0.08);
  color: #f08878;
  border: 1px solid rgba(255, 90, 70, 0.28);
}
.ddb-btn-redo:hover:not(:disabled) {
  background: rgba(255, 90, 70, 0.16);
}
#ddbRedoBtn.hidden { display: none; }

/* ---- 結果パネル ---- */
.ddb-result-panel {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ddb-result-panel.hidden { display: none; }
.ddb-result-title {
  font-size: 12px;
  font-weight: 800;
  color: #c9a227;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(193, 150, 40, 0.2);
}
.ddb-current-deck-card,
.ddb-room-card {
  padding: 18px;
  background: rgba(8, 16, 48, 0.8);
  border: 1px solid rgba(193, 150, 40, 0.28);
  border-radius: 11px;
}
.ddb-deck-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  gap: 0 6px;
  font-size: 13px;
  color: #b0a090;
  line-height: 1.8;
  margin-bottom: 14px;
}
.ddb-deck-grid-name { text-align: right; justify-self: end; }
.ddb-deck-grid-sep { color: rgba(201, 162, 39, 0.6); text-align: center; }
.ddb-deck-grid-count { text-align: left; font-weight: 700; color: #f0ede4; justify-self: start; }
.ddb-btn-redo-inline {
  display: block;
  width: 100%;
  padding: 11px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 9px;
  border: 1px solid rgba(255, 90, 70, 0.28);
  background: rgba(255, 90, 70, 0.08);
  color: #f08878;
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}
.ddb-btn-redo-inline:hover { background: rgba(255, 90, 70, 0.16); }
.ddb-result-player {
  margin-bottom: 14px;
}
.ddb-result-player strong {
  font-size: 14px;
  font-weight: 800;
  color: #fff0a8;
}

.ddb-btn-create-room {
  width: 100%;
  margin-top: 14px;
  background: #2563eb;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 14px;
  border-radius: 10px;
}
.ddb-btn-create-room:hover:not(:disabled) { background: #1d4ed8; }

.ddb-mode-buttons {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.ddb-mode-buttons .ddb-btn { flex: 1; font-size: 14px; font-weight: 700; padding: 12px 8px; border-radius: 10px; }
.ddb-btn-cpu { background: #374151; color: #fff; }
.ddb-btn-cpu:hover:not(:disabled) { background: #4b5563; }
.ddb-btn-pvp { background: #2563eb; color: #fff; }
.ddb-btn-pvp:hover:not(:disabled) { background: #1d4ed8; }

.ddb-join-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ddb-room-code-input {
  flex: 1;
  background: #1e293b;
  border: 1px solid #475569;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: monospace;
  outline: none;
}
.ddb-room-code-input:focus { border-color: #60a5fa; }
.ddb-btn-join { background: #059669; color: #fff; font-size: 14px; font-weight: 700; padding: 10px 16px; border-radius: 8px; white-space: nowrap; }
.ddb-btn-join:hover:not(:disabled) { background: #047857; }

.ddb-room-status { margin-top: 12px; font-size: 14px; min-height: 1.5em; }
.ddb-room-created { color: #4ade80; font-weight: 700; margin: 0 0 4px; }
.ddb-room-id { font-family: monospace; font-size: 15px; margin: 0; color: #e2e8f0; }

/* ---- レスポンシブ: モバイル ---- */
@media (max-width: 699px) {
  /* スマホ: 縦1カラム、右カラム（アクション）を先に表示 */
  .ddb-main { display: flex; flex-direction: column; }
  .ddb-col-right { position: static; order: -1; }
  .ddb-col-left { order: 1; }
}
@media (max-width: 599px) {
  .ddb-wrap { padding: 8px 10px 32px; }
  .ddb-action-row { gap: 8px; margin-bottom: 12px; }
  .ddb-total-row { padding: 6px 10px; }
  .ddb-total-label { font-size: 10px; }
  .ddb-total-num { font-size: 18px; }
  .ddb-tab { padding: 11px 8px; font-size: 15px; }
  .ddb-card-row { padding: 6px 10px; gap: 8px; }
  .ddb-card-img { width: 38px; height: 50px; }
  .ddb-card-name { font-size: 13px; }
  .ddb-counter { gap: 6px; }
  .ddb-select { font-size: 15px; min-width: 46px; }
  .ddb-btn { font-size: 13px; padding: 10px 8px; }
  .ddb-btn-confirm { font-size: 14px; padding: 10px; }
}

/* ---- レスポンシブ: モバイル TOP ---- */
@media (max-width: 599px) {
  .site-header { padding: 0 12px; height: 48px; }
  .header-logo { font-size: 14px; }
  .header-nav-btn { display: none; }

  /* ヒーロー: コンテンツに合わせてコンパクトに */
  .hs-hero {
    min-height: 0;
  }
  .hs-hero-content {
    flex: 0 0 54%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 8px 8px 12px;
    background: transparent;
    justify-content: center;
    z-index: 2;
  }
  /* 下フェードは画像表示の妨げになるため非表示 */
  .hs-hero::after { display: none; }
  /* 画像を hero 全体の絶対配置背景に（左端 40px を詰めて画像を右端に寄せる） */
  .hs-hero-img-wrap {
    position: absolute;
    inset: 0 0 0 40px;
  }
  .hs-hero-img-bg { display: none; }
  .hs-hero-img {
    object-fit: contain;
    object-position: center center;
    transform: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
  /* タイトル・サブ・ラインは左半分が狭いため非表示 */
  .hs-hero-title { display: none; }
  .hs-hero-sub   { display: none; }
  .hs-hero-rule  { display: none; }

  /* 参加パネル: 約半サイズにコンパクト化 */
  .hs-join-panel { padding: 6px 10px 8px; background: rgba(5, 8, 22, 0.74); max-width: none; }
  .hs-join-label { font-size: 10px; margin-bottom: 4px; }
  .hs-join-form  { gap: 3px; }
  .hs-input-code,
  .hs-input-name { padding: 5px 8px; font-size: 12px; width: 100%; box-sizing: border-box; }
  .hs-input-code { flex: 1; }
  .hs-input-name { flex: 1; }
  .hs-join-inputs { flex-direction: column; width: 100%; gap: 3px; }
  .hs-join-inputs > * { width: 100% !important; }
  #joinRoom.hs-join-btn {
    text-align: center;
    padding: 5px 10px;
    font-size: 13px;
    min-height: 44px;
  }

  /* img-wrap 下部フェードはスマホ不要 */
  .hs-hero-img-wrap::after { display: none; }

  /* セクション間のgapをなくす（.lobby の gap: 6px を上書き） */
  .lobby.home-screen { gap: 0; }

  /* モードカード: 1カラム縦並び、行間なし */
  .hs-modes-section { padding: 4px 0 8px; background: #06091a; }
  .hs-section-head { margin-bottom: 4px; }
  .home-screen .hs-mode-card { margin: 0; }
  .hs-mode-grid { grid-template-columns: 1fr; gap: 0; row-gap: 0; }

  /* Coming Soon: 2カラム維持 */
  .hs-coming-section { padding: 14px 0 18px; background: #06091a; }
  .hs-coming-grid { grid-template-columns: repeat(2, 1fr); }

  /* フッターリンク */
  .hs-footer-links {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 12px;
  }
}


/* ===== +Δ ゲーム画面 ===== */
.delta-status-row {
  font-size: 0.85em;
  color: #cfd8dc;
  margin-bottom: 4px;
}
.mini-delta-card {
  display: inline-block;
  background: #1a2d6e;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.78em;
  margin: 1px 2px;
}

/* +Δ 手札カード: 枠線は通常UIに統一（背景fillで種別を表現） */
.delta-card-pencil,.delta-card-eraser,.delta-card-scissors,
.delta-card-tape,.delta-card-glue,.delta-card-cloud {
  border: 1px solid #6685dd;
}
/* ステープラーカードのみ黒背景＋蛍光縁取り */
.delta-card-stapler {
  border: 1px solid #c8d8f8;
  box-shadow: 0 0 5px 1px rgba(180,210,255,0.65), inset 0 0 6px rgba(0,0,0,0.5);
}

/* +Δ ステープラー針（コの字形/銀色、保護ラインをまたいで中央配置） */
.delta-staple-line {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 4;
}
/* 水平保護ライン: ]字（縦ラインΠを90°回転）— scaleX(0.33)で紙に埋まった状態 */
.delta-staple-horizontal {
  top: -10px;
  left: 50%;
  transform: translateX(-50%) scaleX(0.33);
  transform-origin: center center;
  width: 18px;
  height: 30px;
  border-left: none;
  border-top: 3px solid #a8b0be;
  border-bottom: 3px solid #a8b0be;
  border-right: 3px solid #a8b0be;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(to left, rgba(160,168,185,0.15) 0%, transparent 100%);
  box-shadow: 2px 0 5px rgba(100,110,135,0.4), inset -1px 0 0 rgba(220,228,240,0.5);
}
/* 垂直保護ライン: Π字（横広）で垂直境界を跨ぐ（C形90°右回転）— scaleY(0.33)で紙に埋まった状態 */
.delta-staple-vertical {
  left: -10px;
  top: 50%;
  transform: translateY(-50%) scaleY(0.33);
  transform-origin: top center;
  width: 30px;
  height: 18px;
  border-top: 3px solid #a8b0be;
  border-left: 3px solid #a8b0be;
  border-right: 3px solid #a8b0be;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to bottom, rgba(160,168,185,0.15) 0%, transparent 100%);
  box-shadow: 0 -2px 5px rgba(100,110,135,0.4), inset 0 1px 0 rgba(220,228,240,0.5);
}

/* stapler2選択中: 向き別カーソル（ステープラー針のイメージ、銀色）— boardに設定してcellで継承 */
/* h向き（横ライン保護）: C字形カーソル（縦長、左・上・下枠） */
.board.stapler-cursor.stapler2-pending-h {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='22' y='4' width='4' height='24' rx='2' fill='%23a8b0be'/%3E%3Crect x='6' y='4' width='20' height='4' rx='2' fill='%23a8b0be'/%3E%3Crect x='6' y='24' width='20' height='4' rx='2' fill='%23a8b0be'/%3E%3C/svg%3E") 16 16, crosshair;
}
/* v向き（縦ライン保護）: Π字形カーソル（横広、上・左・右枠） */
.board.stapler-cursor.stapler2-pending-v {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='4' y='6' width='24' height='4' rx='2' fill='%23a8b0be'/%3E%3Crect x='4' y='6' width='4' height='20' rx='2' fill='%23a8b0be'/%3E%3Crect x='24' y='6' width='4' height='20' rx='2' fill='%23a8b0be'/%3E%3C/svg%3E") 16 16, crosshair;
}
.board.stapler-cursor .cell {
  cursor: inherit;
}
/* stapler2選択中: ホバープレビュー（ゴースト針）— 有効辺セルのみ表示 */
/* ホバー時は z-index を上げてゴースト(::before)が隣接セルに隠れないようにする */
.stapler2-pending-h .cell.delta-stapler2-h-valid:hover,
.stapler2-pending-v .cell.delta-stapler2-v-valid:hover { cursor: inherit; z-index: 10; }
/* 消しゴムゴーストと同じ暖色系オレンジ（グレーだとstapler3と混同するため） */
.stapler2-pending-h .cell.delta-stapler2-h-valid::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%) scaleX(0.33);
  transform-origin: center center;
  width: 18px; height: 28px;
  border-left: none;
  border-top: 3px dashed rgba(210, 145, 55, 0.82);
  border-bottom: 3px dashed rgba(210, 145, 55, 0.82);
  border-right: 3px dashed rgba(210, 145, 55, 0.82);
  border-radius: 0 3px 3px 0;
  pointer-events: none; z-index: 3; box-sizing: border-box;
  opacity: 0; transition: opacity 0.15s;
}
.stapler2-pending-h .cell.delta-stapler2-h-valid:hover::before,
.stapler2-pending-h .cell.delta-stapler2-h-valid:active::before { opacity: 1; }
.stapler2-pending-v .cell.delta-stapler2-v-valid::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 18px;
  border-top: 3px dashed rgba(210, 145, 55, 0.82);
  border-left: 3px dashed rgba(210, 145, 55, 0.82);
  border-right: 3px dashed rgba(210, 145, 55, 0.82);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  pointer-events: none; z-index: 3; box-sizing: border-box;
  opacity: 0; transition: opacity 0.15s;
}
.stapler2-pending-v .cell.delta-stapler2-v-valid:hover::before,
.stapler2-pending-v .cell.delta-stapler2-v-valid:active::before { opacity: 1; }
/* stapler3選択中: マーク有りセル中央にコの字ピンのゴーストプレビュー（valid セルのみ） */
.board.stapler3-pending .cell.delta-stapler3-valid::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 18px;
  border-top: 3px dashed rgba(210, 145, 55, 0.82);
  border-left: 3px dashed rgba(210, 145, 55, 0.82);
  border-right: 3px dashed rgba(210, 145, 55, 0.82);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  pointer-events: none; z-index: 3; box-sizing: border-box;
  opacity: 0; transition: opacity 0.15s;
}
.board.stapler3-pending .cell.delta-stapler3-valid:hover::before,
.board.stapler3-pending .cell.delta-stapler3-valid:active::before { opacity: 1; }
/* タッチデバイス（スマホ）: :hover が効かないため有効セルにゴーストを常時表示 */
@media (hover: none) and (pointer: coarse) {
  .stapler2-pending-h .cell.delta-stapler2-h-valid::before,
  .stapler2-pending-v .cell.delta-stapler2-v-valid::before { opacity: 0.65; }
  .board.stapler3-pending .cell.delta-stapler3-valid::before { opacity: 0.55; }
}
/* stapler3選択中: Π字形カーソル（stapler2-pending-v と同じ形） */
.board.stapler-cursor.stapler3-pending {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='4' y='6' width='24' height='4' rx='2' fill='%23a8b0be'/%3E%3Crect x='4' y='6' width='4' height='20' rx='2' fill='%23a8b0be'/%3E%3Crect x='24' y='6' width='4' height='20' rx='2' fill='%23a8b0be'/%3E%3C/svg%3E") 16 16, crosshair;
}

/* ─── stapler2 cellHold: 仮押さえ表示 ─────────────────────────────────────── */

/* source セル（マーク有り側）: 薄いリング強調 */
.delta-hold-source-cell {
  /* 水色枠線なし（仮押さえ先のセルのみ強調する） */
}

/* source選択UI中の強調（ユーザーが source を選んでいる状態） */
.stapler-source-selecting {
  outline: 2.5px solid rgba(100, 200, 255, 0.85);
  outline-offset: -2px;
  box-shadow: inset 0 0 8px rgba(100, 200, 255, 0.3);
}

/* held セル: ゴーストマーク（点線風・低透明度、枠なし） */
/* background-clip: text + repeating-gradient で点線に見せる */
.delta-hold-ghost-cell::after {
  content: attr(data-hold-ghost);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  z-index: 3;
}
/* .board.delta-mode .cell::after (詳細度 0,3,1) の text-shadow を上書き（詳細度 0,4,1） */
.board.delta-mode .cell.delta-hold-ghost-cell::after {
  text-shadow: none;
}
/* ◯: conic グラデーションで円弧を分節 → 点線風の丸 */
.delta-hold-ghost-cell[data-hold-ghost='◯']::after {
  background-image: repeating-conic-gradient(
    rgba(80, 210, 80, 0.5) 0deg 16deg,
    transparent 16deg 30deg
  );
}
/* ×: 斜め方向の繰り返しグラデーションで線を分節 → 細かい点線風のバツ */
.delta-hold-ghost-cell[data-hold-ghost='×']::after {
  background-image:
    repeating-linear-gradient(45deg, rgba(220, 80, 80, 0.5) 0px 1.5px, transparent 1.5px 4px),
    repeating-linear-gradient(-45deg, rgba(220, 80, 80, 0.5) 0px 1.5px, transparent 1.5px 4px);
}

/* ステープラー針（source → held をまたぐ、delta-staple-line と同形・銀色） */
.delta-hold-connector {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 4;
  border: 3px solid #a8b0be;
  border-radius: 2px;
  background: transparent;
}

/* 上から来る針: 縦ラインΠを90°回転 → ]字（scaleX(0.33)で横方向圧縮） */
.delta-hold-from-top {
  top: -15px; left: 50%; transform: translateX(-50%) scaleX(0.33);
  transform-origin: center center;
  width: 20px; height: 30px;
  border-top: 3px solid #a8b0be;
  border-right: 3px solid #a8b0be;
  border-bottom: 3px solid #a8b0be;
  border-left: none;
  border-radius: 0 2px 2px 0;
}

/* 下から来る針: 縦ラインΠを90°回転 → ]字（scaleX(0.33)で横方向圧縮） */
.delta-hold-from-bottom {
  bottom: -15px; left: 50%; transform: translateX(-50%) scaleX(0.33);
  transform-origin: center center;
  width: 20px; height: 30px;
  border-top: 3px solid #a8b0be;
  border-right: 3px solid #a8b0be;
  border-bottom: 3px solid #a8b0be;
  border-left: none;
  border-radius: 0 2px 2px 0;
}

/* 左から来る針: source が左のセル → held の左辺中央に配置（左辺を芯の中心とする） */
.delta-hold-from-left {
  left: -15px; top: 50%; transform: translateY(-50%) scaleY(0.33);
  transform-origin: center center;
  width: 30px; height: 20px;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

/* 右から来る針: source が右のセル → held の右辺中央に配置 */
.delta-hold-from-right {
  right: -15px; top: 50%; transform: translateY(-50%) scaleY(0.33);
  transform-origin: center center;
  width: 30px; height: 20px;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

/* 候補選択パネル */
.delta-candidate-panel {
  background: rgba(30,40,70,0.85);
  border: 1px solid #4a5580;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.delta-candidate-title {
  font-size: 11px;
  color: #b0b8d0;
  margin: 0 0 6px;
}
.delta-candidate-btn {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(50,60,100,0.7);
  border: 1px solid #6070a0;
  border-radius: 4px;
  color: #d0d8f0;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.delta-candidate-btn:hover { background: rgba(80,95,150,0.85); }
.delta-candidate-btn:last-child { margin-bottom: 0; }

/* +Δ スキルパネル */
.delta-skills-panel {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.delta-skill-btn {
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  font-size: 0.88em;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  color: #fff;
  background: linear-gradient(145deg, #1a5a9a, #0d3a6e);
  transition: opacity 0.15s;
}
.delta-skill-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.delta-skill-btn.delta-skill-pencil   { background: linear-gradient(145deg, #4fbe67, #2f7d40); border-left: 4px solid #4fbe67; }
.delta-skill-btn.delta-skill-eraser   { background: linear-gradient(145deg, #cf4e60, #8a2431); border-left: 4px solid #cf4e60; }
.delta-skill-btn.delta-skill-scissors { background: linear-gradient(145deg, #d6b029, #9c760f); border-left: 4px solid #d6b029; }
.delta-skill-btn.delta-skill-tape     { background: linear-gradient(145deg, #8c62da, #592fa3); border-left: 4px solid #8c62da; }
.delta-skill-btn.delta-skill-glue     { background: linear-gradient(145deg, #186888, #0c3e58); border-left: 4px solid #54c0dc; }
.delta-skill-btn.delta-skill-stapler  {
  background: linear-gradient(145deg, #111, #000);
  border-left: 4px solid #c8d8f8;
  box-shadow: 0 0 6px 1px rgba(180,210,255,0.7), inset 0 0 4px rgba(180,210,255,0.1);
}
.delta-candidate-btn.delta-skill-stapler {
  background: rgba(10, 10, 20, 0.9);
  border: 1px solid #c8d8f8;
  box-shadow: 0 0 5px 1px rgba(180,210,255,0.6);
}
.delta-skill-btn.delta-skill-unimplemented {
  opacity: 0.75;
  font-style: italic;
}
.delta-skill-hint {
  font-size: 0.82em;
  color: #90a4ae;
  margin: 4px 0;
}
.delta-skill-error {
  font-size: 0.82em;
  color: #ef9a9a;
  margin: 4px 0;
}

#deltaEndTurnBtn.hidden { display: none !important; }
#deltaEndTurnBtn {
  background: linear-gradient(145deg, #1a7a3a, #0d5228);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.95em;
  cursor: pointer;
  font-weight: 600;
}
#deltaEndTurnBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── repair scar: 修復跡「＜」表示 ─────────────────────────────── */
/* マーク修復跡: セル内右下に小さな＜を表示（tape/stapler保護より下レイヤー） */
/* delta repair scar: BUNGU REPORT 方式（hole-icon / cut-icon と同位置に修復跡を重ねる） */
.delta-scar-line {
  font-size: 15px;
  font-weight: 900;
  color: #3a7a8a;
  display: inline-block;
  line-height: 1;
}
/* mark scar: hole-icon と同じ位置・サイズ、z-index のみ引き上げ */
.delta-mark-scar {
  z-index: 5;
  pointer-events: none;
}
.delta-mark-scar .delta-scar-line {
  font-size: 22px;
}
/* line scar: cut-icon と同じ位置、z-index のみ引き上げ */
.delta-line-scar-healed {
  z-index: 5;
  pointer-events: none;
}
/* stapler3 マーク保護: マーク中央に銀色コの字ピンを表示（ブラーなし・垂直打ち） */
.delta-mark-stapler-pin {
  position: absolute;
  width: 24px;
  height: 18px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scaleY(0.33);
  border-top: 3px solid #a8b0be;
  border-left: 3px solid #a8b0be;
  border-right: 3px solid #a8b0be;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  background: transparent;
  box-shadow: 0 -2px 5px rgba(100,110,135,0.4), inset 0 1px 0 rgba(220,228,240,0.5);
  pointer-events: none;
  z-index: 6;
  box-sizing: border-box;
}
/* ─── stapler 衝撃シェイク演出 ──────────────────────────────────────────────── */
@keyframes delta-stapler-shake {
  0%,100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-4px, -2px) rotate(-0.6deg); }
  20% { transform: translate(4px,  2px) rotate( 0.6deg); }
  30% { transform: translate(-5px,  1px) rotate(-0.4deg); }
  40% { transform: translate( 5px, -1px) rotate( 0.4deg); }
  50% { transform: translate(-3px,  3px) rotate(-0.5deg); }
  60% { transform: translate( 3px, -3px) rotate( 0.5deg); }
  75% { transform: translate(-2px,  1px) rotate(-0.2deg); }
  88% { transform: translate( 1px, -1px) rotate( 0.1deg); }
}
.delta-stapler-impact {
  animation: delta-stapler-shake 0.35s ease-out;
}
/* ─── stapler3 煙パフ演出 ────────────────────────────────────────────────────── */
@keyframes delta-stapler-puff {
  0%   { transform: translateX(var(--puff-dx, 0px)) translateY(0px) scale(0.2); opacity: 1; }
  25%  { transform: translateX(var(--puff-dx, 0px)) translateY(-50px) scale(2); opacity: 0.9; }
  55%  { transform: translateX(var(--puff-dx, 0px)) translateY(-110px) scale(3.5); opacity: 0.6; }
  80%  { transform: translateX(var(--puff-dx, 0px)) translateY(-160px) scale(4.8); opacity: 0.25; }
  100% { transform: translateX(var(--puff-dx, 0px)) translateY(-200px) scale(5.8); opacity: 0; }
}
.delta-stapler-puff {
  position: fixed;
  width: 28px; height: 28px;
  margin-left: -14px; margin-top: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,248,255,1) 0%, rgba(190,200,220,0.75) 50%, transparent 100%);
  pointer-events: none;
  z-index: 9999;
  animation: delta-stapler-puff var(--puff-dur, 1.4s) ease-out both;
  animation-delay: var(--puff-delay, 0ms);
  filter: blur(var(--puff-blur, 1px));
}

/* ─── 持ちマス置き場 ────────────────────────────────────────────────────────── */
.delta-held-cells-area {
  margin: 6px 0 4px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  font-size: 0.78rem;
}
.delta-held-section {
  margin-bottom: 5px;
}
.delta-held-label {
  color: #aac;
  font-size: 0.72rem;
  margin-bottom: 3px;
}
.delta-held-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 28px;
}
.delta-held-empty {
  color: #666;
  font-size: 0.72rem;
}
.delta-held-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid #aaa;
  border-radius: 2px;
  background: #f8f7f2;
  color: #111;
  font-size: 0.95rem;
  font-weight: bold;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.35);
}
.delta-held-tile-blank {
  border-color: #bbb;
  background: #f5f4ef;
  color: transparent;
}
.delta-held-tile-marked {
  border-color: #999;
  background: #fff;
  color: #111;
}
.delta-held-tile-clickable {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg transform='translate(6 4) rotate(22 18 18)'%3E%3Crect x='10' y='6' width='13' height='28' rx='4' fill='%23f6d365'/%3E%3Crect x='13' y='6' width='7' height='28' rx='3' fill='%23fceea8'/%3E%3Cpolygon points='10,34 23,34 16.5,42' fill='%23d3c5a2'/%3E%3Cpolygon points='14.6,38.6 18.4,38.6 16.5,42' fill='%23212b4e'/%3E%3Crect x='10' y='3' width='13' height='4' rx='2' fill='%23ff8da1'/%3E%3C/g%3E%3C/svg%3E") 8 40, pointer;
  border-color: #4a9;
  background: #efffee;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.3), 0 0 6px rgba(60,200,100,0.5);
}
.delta-held-tile-clickable:hover {
  background: #d8fde8;
  border-color: #2c8;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.3), 0 0 10px rgba(60,200,100,0.7);
}

/* board 外枠カバー（ちぎれ角の金枠を隠す）: boardEl に直接追加、z-index:10 で border より前面 */
.board-corner-cover {
  position: absolute;
  background: #12255f;
  pointer-events: none;
  z-index: 10;
}

/* ─── 角ちぎれ表示 (delta-corner-torn) ──────────────────────────────────────── */

/* ちぎれ済み角: 罫線を消してページ背景と同化させる */
.cell.delta-corner-torn {
  cursor: not-allowed;
  border-color: transparent;
}

/* 各角のちぎれオーバーレイ: セル内の一回り小さい紙片が欠けた表現 */
/* 外側2辺(ボード端に接する辺)はクリーン直線, 内側2辺はギザギザ */
.delta-torn-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  width: 82%;
  height: 82%;
  /* section 背景色 #12255f と同じにして「穴」に見せる */
  background: #12255f;
}

/* top-left: clean=上辺+左辺, torn=右辺+下辺
   board外枠を覆うため -3px 外側まで拡張（z-index:5 により board border の上に描画） */
.delta-torn-overlay.delta-torn-top-left {
  top: -3px; left: -3px;
  width: calc(82% + 3px); height: calc(82% + 3px);
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 62%, 86% 72%, 95% 84%, 74% 92%, 82% 100%,
    55% 100%, 62% 87%, 40% 100%, 20% 90%,
    0% 100%
  );
}

/* top-right: clean=上辺+右辺, torn=左辺+下辺 */
.delta-torn-overlay.delta-torn-top-right {
  top: -3px; right: -3px;
  width: calc(82% + 3px); height: calc(82% + 3px);
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%,
    78% 100%, 83% 86%, 60% 100%, 40% 90%, 20% 100%, 7% 88%,
    0% 74%, 10% 58%, 0% 42%, 8% 27%, 0% 12%, 0% 0%
  );
}

/* bottom-left: clean=下辺+左辺, torn=上辺+右辺 */
.delta-torn-overlay.delta-torn-bottom-left {
  bottom: -3px; left: -3px;
  width: calc(82% + 3px); height: calc(82% + 3px);
  clip-path: polygon(
    0% 0%,
    18% 0%, 12% 14%, 36% 0%, 56% 10%, 78% 0%, 90% 6%,
    100% 0%,
    100% 20%, 87% 33%, 95% 48%, 77% 60%, 90% 74%, 72% 88%, 100% 100%,
    0% 100%
  );
}

/* bottom-right: clean=下辺+右辺, torn=上辺+左辺 */
.delta-torn-overlay.delta-torn-bottom-right {
  bottom: -3px; right: -3px;
  width: calc(82% + 3px); height: calc(82% + 3px);
  clip-path: polygon(
    0% 0%,
    22% 0%, 15% 13%, 38% 0%, 58% 10%, 80% 0%, 92% 5%,
    100% 0%, 100% 100%,
    0% 100%,
    0% 82%, 12% 70%, 2% 54%, 10% 40%, 0% 25%, 8% 12%, 0% 0%
  );
}

/* bottom corner torn: board 下枠（::before z-index:-1）が clip-path の三角ギャップから
   見えるのを防ぐ。torn corner 系セルは data-mark="" 固定なので ::after を転用可 */
/* z-index:5 = torn overlay と同層。grime overlay(z-index:4) より上なので古書化は乗らない */
.cell.delta-corner-torn-bottom-left::after,
.cell.delta-corner-torn-bottom-right::after {
  content: '';
  position: absolute;
  font-size: 0;
  bottom: -3px;
  height: 6px;
  background: #12255f;
  pointer-events: none;
  z-index: 5;
}
.cell.delta-corner-torn-bottom-left::after {
  left: -3px;
  width: calc(82% + 6px);
}
.cell.delta-corner-torn-bottom-right::after {
  right: -3px;
  width: calc(82% + 6px);
}

/* 角ちぎれ隣接セル: 角セルとの共有枠線を非表示 */
.cell.delta-torn-adj-left   { border-left-color:   transparent !important; }
.cell.delta-torn-adj-right  { border-right-color:  transparent !important; }
.cell.delta-torn-adj-top    { border-top-color:    transparent !important; }
.cell.delta-torn-adj-bottom { border-bottom-color: transparent !important; }

/* 角選択モード: 選べる角をノリ色でハイライト */
.cell.delta-corner-selectable {
  outline: 3px solid #54c0dc;
  outline-offset: -3px;
  background-color: rgba(84, 192, 220, 0.15);
  cursor: crosshair;
}
.cell.delta-corner-selectable:hover {
  background-color: rgba(84, 192, 220, 0.35);
  outline-color: #8de4f5;
  box-shadow: inset 0 0 12px rgba(84, 192, 220, 0.5);
}

/* corner-select-mode 時は四隅以外は通常カーソルにする */
.board.corner-select-mode .cell:not(.delta-corner-selectable) {
  cursor: not-allowed;
}

/* 持ちマスタイル: 盤面の穴と対応する形状（外2辺クリーン・内2辺ギザギザ） */
/* top-left: clean=上辺+左辺, torn=右辺+下辺 */
.delta-held-tile.delta-held-tile-top-left {
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 62%, 85% 73%, 94% 85%, 73% 92%, 80% 100%,
    53% 100%, 61% 86%, 38% 100%, 18% 90%,
    0% 100%
  );
}
/* top-right: clean=上辺+右辺, torn=左辺+下辺 */
.delta-held-tile.delta-held-tile-top-right {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%,
    79% 100%, 84% 86%, 61% 100%, 41% 90%, 21% 100%, 8% 87%,
    0% 74%, 10% 57%, 0% 41%, 8% 26%, 0% 11%, 0% 0%
  );
}
/* bottom-left: clean=下辺+左辺, torn=上辺+右辺 */
.delta-held-tile.delta-held-tile-bottom-left {
  clip-path: polygon(
    0% 0%,
    19% 0%, 13% 14%, 37% 0%, 57% 11%, 79% 0%, 91% 6%,
    100% 0%,
    100% 21%, 86% 34%, 94% 49%, 76% 61%, 89% 75%, 71% 89%, 81% 100%,
    0% 100%
  );
}
/* bottom-right: clean=下辺+右辺, torn=上辺+左辺 */
.delta-held-tile.delta-held-tile-bottom-right {
  clip-path: polygon(
    0% 0%,
    21% 0%, 14% 13%, 38% 0%, 58% 11%, 79% 0%, 91% 5%,
    100% 0%, 100% 100%,
    0% 100%,
    0% 82%, 12% 70%, 2% 54%, 10% 39%, 0% 24%, 8% 11%, 0% 0%
  );
}

/* 持ちマス選択・ペースト対象 ─────────────────────────────────────────── */

.delta-held-tile-paste-selectable {
  cursor: pointer;
  border-color: #e09a20;
  background: #fffbe8;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.3), 0 0 6px rgba(230,160,30,0.55);
}
.delta-held-tile-paste-selectable:hover {
  background: #fff3c0;
  border-color: #d4820a;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.3), 0 0 10px rgba(230,160,30,0.75);
}
.delta-held-tile-selected {
  border-color: #d4820a !important;
  background: #ffd966 !important;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.4), 0 0 12px rgba(230,160,30,0.9) !important;
  outline: 2px solid #b86000;
  outline-offset: 1px;
}

/* ─── 持ちマス裏返し演出 ─────────────────────────────────────────────────── */

@keyframes delta-held-flip-out {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes delta-held-flip-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.delta-held-tile-flip-phase1 {
  animation: delta-held-flip-out 0.25s ease-in forwards;
  transform-origin: center;
}
.delta-held-tile-flip-phase2 {
  animation: delta-held-flip-in 0.25s ease-out forwards;
  transform-origin: center;
}

/* ─── 貼り付け済み持ちマスオーバーレイ ──────────────────────────────────── */

.delta-pasted-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  width: 82%;
  height: 82%;
  /* セル中央に配置（角寄せではない） */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f8f7f2;
  /* box-shadow は clip-path でクリップされるため filter: drop-shadow を使う */
}

/* top-left: clean=上辺+左辺, torn=右辺+下辺 */
.delta-pasted-overlay.delta-pasted-top-left {
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 62%, 85% 73%, 94% 85%, 73% 92%, 80% 100%,
    53% 100%, 61% 86%, 38% 100%, 18% 90%,
    0% 100%
  );
}

/* top-right: clean=上辺+右辺, torn=左辺+下辺 */
.delta-pasted-overlay.delta-pasted-top-right {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%,
    79% 100%, 84% 86%, 61% 100%, 41% 90%, 21% 100%, 8% 87%,
    0% 74%, 10% 57%, 0% 41%, 8% 26%, 0% 11%, 0% 0%
  );
}

/* bottom-left: clean=下辺+左辺, torn=上辺+右辺 */
.delta-pasted-overlay.delta-pasted-bottom-left {
  clip-path: polygon(
    0% 0%,
    19% 0%, 13% 14%, 37% 0%, 57% 11%, 79% 0%, 91% 6%,
    100% 0%,
    100% 21%, 86% 34%, 94% 49%, 76% 61%, 89% 75%, 71% 89%, 81% 100%,
    0% 100%
  );
}

/* bottom-right: clean=下辺+右辺, torn=上辺+左辺 */
.delta-pasted-overlay.delta-pasted-bottom-right {
  clip-path: polygon(
    0% 0%,
    21% 0%, 14% 13%, 38% 0%, 58% 11%, 79% 0%, 91% 5%,
    100% 0%, 100% 100%,
    0% 100%,
    0% 82%, 12% 70%, 2% 54%, 10% 39%, 0% 24%, 8% 11%, 0% 0%
  );
}

/* 貼りたてロック中: グレー背景 ＋ 軽い影 */
.delta-pasted-overlay.locked {
  background: #c0c5d0;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.28));
}

/* ロック解除後: 太く濃いグレー縁取り ＋ 薄い紙皺 */
.delta-pasted-overlay:not(.locked) {
  /* 紙皺: 横方向にわずかに角度をつけた薄い影帯を重ねる */
  background-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,0.04) 18%,
      transparent 26%,
      rgba(0,0,0,0.03) 52%,
      transparent 62%,
      rgba(0,0,0,0.035) 84%,
      transparent 94%
    ),
    linear-gradient(
      173deg,
      transparent 28%,
      rgba(0,0,0,0.025) 42%,
      transparent 54%
    );
  /* 縁取り: 0.5px ～ 3px の drop-shadow を重ねて太い輪郭線を作る */
  filter:
    drop-shadow(0 0 0.5px rgba(15, 15, 60, 1))
    drop-shadow(0 0 1px   rgba(15, 15, 60, 0.95))
    drop-shadow(0 0 2px   rgba(15, 15, 60, 0.65))
    drop-shadow(0 0 3px   rgba(15, 15, 60, 0.3))
    drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.22));
}

/* 持ちマスのマーク表示（オーバーレイより上に表示、z-index:5） */
.delta-pasted-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  font-size: 1.9rem;
  color: #111;
}

/* ペースト対象選択モード（ノリ色 #54c0dc に統一） */
.delta-paste-target-selectable {
  outline: 3px solid #54c0dc;
  outline-offset: -3px;
  cursor: crosshair;
}
.delta-paste-target-selectable:hover {
  background-color: rgba(84, 192, 220, 0.28) !important;
  outline-color: #8de4f5;
  box-shadow: inset 0 0 12px rgba(84, 192, 220, 0.5);
}
.board.paste-target-mode .cell:not(.delta-paste-target-selectable) {
  cursor: not-allowed;
}

/* ─── Phase UI-1: ノリ系カーソル ─────────────────────────────────────────── */

/* ノリ2A/ノリ3: 角選択中は hand カーソル（掴む手）*/
.board.glue-corner-cursor .cell.delta-corner-selectable {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2C14.9 2 14 2.9 14 4v10H12V8C12 6.9 11.1 6 10 6S8 6.9 8 8v10l-2-2.5C5.3 14.6 4.3 14 3 14c-1 0-1.6.8-1 1.7l4 7.6C7.5 26 9.6 28 14 28h3c3.9 0 7-3.1 7-7v-9c0-1.1-.9-2-2-2s-2 .9-2 2v-2c0-1.1-.9-2-2-2s-2 .9-2 2V4c0-1.1-.9-2-2-2z' fill='%2307101e'/%3E%3Cpath d='M16 3C15.4 3 15 3.4 15 4v11h-2V8c0-.6-.4-1-1-1s-1 .4-1 1v10l-2.8-3.4C7.9 14.2 7.2 14 6.5 14c-.4 0-.7.3-.5.7l4 7.6C11 25.3 12.7 27 16 27h1c3.3 0 6-2.7 6-6v-9c0-.6-.4-1-1-1s-1 .4-1 1V9c0-.6-.4-1-1-1s-1 .4-1 1v-2c0-.6-.4-1-1-1s-1 .4-1 1V4c0-.6-.4-1-1-1z' fill='%23f2efe6'/%3E%3C/svg%3E") 8 2, grab;
}
.board.glue-corner-cursor .cell:not(.delta-corner-selectable) {
  cursor: not-allowed;
}

/* ノリ2B/ノリ3: 貼り先選択中は open-hand カーソル */
.board.glue-paste-cursor .cell.delta-paste-target-selectable {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M24 4c-1.1 0-2 .9-2 2v6c0-1.1-.9-2-2-2s-2 .9-2 2V8c0-1.1-.9-2-2-2s-2 .9-2 2V6c0-1.1-.9-2-2-2s-2 .9-2 2v12l-2.5-2.5c-.8-.8-2-.8-2.8 0s-.8 2 0 2.8l5 6C9.7 26.1 11.7 28 15 28h5c3.9 0 7-3.1 7-7v-9c0-1.1-.9-2-2-2V6c0-1.1-.9-2-2-2z' fill='%2307101e'/%3E%3Cpath d='M24 5c-.6 0-1 .4-1 1v7h-2V8c0-.6-.4-1-1-1s-1 .4-1 1v4h-2V8c0-.6-.4-1-1-1s-1 .4-1 1v4h-2V6c0-.6-.4-1-1-1s-1 .4-1 1v13L9 17c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l5 6C13.6 25.3 15.3 27 18 27h2c3.3 0 6-2.7 6-6v-9c0-.6-.4-1-1-1V6c0-.6-.4-1-1-1z' fill='%23f2efe6'/%3E%3C/svg%3E") 8 2, pointer;
}

/* ─── PC版 持ちマスタイルを大きく ─────────────────────────────────────────── */

@media (min-width: 1101px) {
  .delta-held-tile {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
  .delta-held-cells-area {
    padding: 6px 8px;
  }
}

/* ─── ステープラー針「埋まる」演出 ──────────────────────────────────────── */
/* 「打ち込み」の瞬間だけ深く沈み、通常の半分高さ(0.5)で止まる           */

@keyframes delta-staple-embed-h {
  0%   { transform: translateX(-50%) scaleX(1.0);  filter: brightness(1.2); }
  38%  { transform: translateX(-50%) scaleX(0.18); filter: brightness(0.65); }
  100% { transform: translateX(-50%) scaleX(0.33);  filter: brightness(0.9); }
}
@keyframes delta-staple-embed-v {
  0%   { transform: translateY(-50%) scaleY(1.0);  filter: brightness(1.2); }
  38%  { transform: translateY(-50%) scaleY(0.18); filter: brightness(0.65); }
  100% { transform: translateY(-50%) scaleY(0.33);  filter: brightness(0.9); }
}
@keyframes delta-staple-embed-pin {
  0%   { transform: translate(-50%, -50%) scaleY(1.0);  filter: brightness(1.2); }
  38%  { transform: translate(-50%, -50%) scaleY(0.18);  filter: brightness(0.65); }
  100% { transform: translate(-50%, -50%) scaleY(0.33);  filter: brightness(0.9); }
}
.delta-staple-horizontal.delta-staple-embed {
  animation: delta-staple-embed-h 260ms ease-out forwards;
  transform-origin: center center;
}
.delta-staple-vertical.delta-staple-embed {
  animation: delta-staple-embed-v 260ms ease-out forwards;
  transform-origin: top center;
}
.delta-mark-stapler-pin.delta-staple-embed {
  animation: delta-staple-embed-pin 260ms ease-out forwards;
}

/* ─── ステープラー「打ち込み跡」エフェクト ──────────────────────────────── */

@keyframes delta-staple-dent {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  55%  { opacity: 0.3; transform: translate(-50%, -50%) scale(1.7); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.4); }
}
.delta-staple-dent-fx {
  position: absolute;
  width: 26px;
  height: 13px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(140,148,165,0.55) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: delta-staple-dent 0.38s ease-out forwards;
  z-index: 10;
}

/* ─── スマホ版 相手情報パネル（盤面上部） ──────────────────────────────── */

.delta-opp-mobile-panel {
  display: none; /* PCでは非表示 */
}
.delta-opp-mobile-panel.hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .delta-opp-mobile-panel:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 6px;
    background: rgba(5, 8, 22, 0.55);
    border: 1px solid rgba(84, 192, 220, 0.35);
    border-radius: 6px;
    margin-bottom: 4px;
    order: 0; /* board-wrap(order:0)と同値 → DOM順で board-wrap の前に表示 */
  }
  .delta-mob-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    flex-wrap: wrap;
  }
  .delta-mob-label {
    font-size: 10px;
    color: #8eaacc;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .delta-mob-pencils {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
  }
  .delta-mob-pencil {
    width: 16px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
  }
  .delta-mob-pencil-extra {
    font-size: 10px;
    color: #8eaacc;
  }
  .delta-mob-count {
    font-size: 10px;
    color: #7a9acc;
  }
  .delta-mob-held {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
  }
  .delta-mob-held-tile {
    width: 22px;
    height: 22px;
    font-size: 0.65rem;
  }
  .delta-mob-zero {
    font-size: 10px;
    color: #666;
  }
}

/* ─── 情報エリア用ラベル補助 ─────────────────────────────────────────────── */

.delta-action-row {
  margin-top: 2px;
  font-size: 0.78em;
  color: #9ab0cc;
}
.delta-none-label {
  font-size: 0.78em;
  color: #666;
}

/* ─── Phase UI-2A: ノリ系スキル操作演出 ─────────────────────────────────── */

@keyframes delta-tear-out {
  0%   { transform: scale(1.22) rotate(-12deg);     opacity: 0.3; }
  55%  { transform: scale(1.04) rotate(3deg);       opacity: 0.92; }
  100% { transform: scale(1)   rotate(0deg);        opacity: 1; }
}
.delta-torn-overlay.delta-tear-anim {
  animation: delta-tear-out 0.42s cubic-bezier(0.22, 0.9, 0.36, 1) forwards;
}

@keyframes delta-glue-smear {
  0%   { opacity: 0.9; transform: scale(0.4); }
  50%  { opacity: 0.7; transform: scale(1.1); }
  100% { opacity: 0;   transform: scale(1.4); }
}
.delta-glue-smear-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 40% 40%, #54c0dc99 0%, #54c0dc44 50%, transparent 75%);
  border-radius: 4px;
  animation: delta-glue-smear 0.55s ease-out forwards;
  z-index: 12;
}

@keyframes delta-paper-pop {
  0%   { transform: scale(0.5) rotate(-3deg); opacity: 0; }
  55%  { transform: scale(1.12) rotate(2deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);  opacity: 1; }
}
.delta-pasted-overlay.delta-pasted-pop {
  animation: delta-paper-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes delta-held-appear {
  0%   { transform: scale(0.4); opacity: 0; }
  65%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.delta-held-tile.delta-held-appear {
  animation: delta-held-appear 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .delta-torn-overlay.delta-tear-anim      { animation: none; }
  .delta-glue-smear-fx                     { animation: none; opacity: 0; }
  .delta-pasted-overlay.delta-pasted-pop   { animation: none; }
  .delta-held-tile.delta-held-appear       { animation: none; }
  .delta-stapler-impact                    { animation: none; }
  .delta-staple-horizontal.delta-staple-embed { animation: none; }
  .delta-staple-vertical.delta-staple-embed   { animation: none; }
  .delta-mark-stapler-pin.delta-staple-embed  { animation: none; }
  .delta-staple-dent-fx                    { animation: none; opacity: 0; }
}

/* ─── Phase UI-3A: 盤面紙質感・手書きマーク ─────────────────────────────── */

/* delta-mode セルに紙ベース背景色（温かみある効果・マーク文字を可視化） */
.board.delta-mode .cell {
  background-color: #f0ece0;
}

/* 盤面全体に古書化レイヤー（実体divで管理、agingStageベースのopacity制御） */
/* z-index:4（torn overlay:5 の下）= 角ちぎれ部分には古書化を乗せない */
/* standard/delta 両モード共通（delta-mode クラス不要） */
.board > .delta-grime-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(ellipse 55% 50% at   0%   0%, rgba(108, 85, 38, 0.72) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100%   0%, rgba(108, 85, 38, 0.72) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at   0% 100%, rgba(108, 85, 38, 0.72) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 100% 100%, rgba(108, 85, 38, 0.72) 0%, transparent 65%),
    linear-gradient(to bottom,
      rgba(92, 72, 26, 0.42) 0%,
      transparent 22%,
      transparent 78%,
      rgba(92, 72, 26, 0.42) 100%
    ),
    linear-gradient(152deg,
      rgba(255, 248, 198, 0.58) 0%,
      rgba(248, 233, 162, 0.68) 50%,
      rgba(232, 215, 144, 0.52) 100%
    );
}

/* 全セルに薄い鉛筆かすれ質感（delta-mode のみ） */
.board.delta-mode .cell::after {
  text-shadow:
    0.4px 0 rgba(20,20,20,0.28),
    -0.3px 0.2px rgba(20,20,20,0.13);
}

/* +Δ: × マークを少し細く（board の::after は font-weight:900 継承のため上書き） */
.board.delta-mode .cell[data-mark='×']::after { font-weight: 600; }

/* 手書きマーク揺らぎ: 6バリアントで傾き・スケール差（±12度、0.80〜1.15） */
.cell.delta-handmark-v0::after { transform: rotate(-12deg) scaleX(0.88); }
.cell.delta-handmark-v1::after { transform: rotate(8deg)   scaleY(1.15); }
.cell.delta-handmark-v2::after { transform: rotate(-5deg)  scale(1.10); }
.cell.delta-handmark-v3::after { transform: rotate(12deg)  scaleX(0.80); }
.cell.delta-handmark-v4::after { transform: rotate(-7deg)  scaleY(0.88); }
.cell.delta-handmark-v5::after { transform: rotate(5deg)   scale(1.08); }

/* 貼り付けマーク（pastedMarkEl）の手書き揺らぎ */
.delta-pasted-mark.delta-handmark-v0 { transform: rotate(-12deg) scaleX(0.88); }
.delta-pasted-mark.delta-handmark-v1 { transform: rotate(8deg)   scaleY(1.15); }
.delta-pasted-mark.delta-handmark-v2 { transform: rotate(-5deg)  scale(1.10); }
.delta-pasted-mark.delta-handmark-v3 { transform: rotate(12deg)  scaleX(0.80); }
.delta-pasted-mark.delta-handmark-v4 { transform: rotate(-7deg)  scaleY(0.88); }
.delta-pasted-mark.delta-handmark-v5 { transform: rotate(5deg)   scale(1.08); }

/* 持ちマスタイルの手書き揺らぎ */
.delta-held-tile.delta-handmark-v0 { transform: rotate(-12deg) scaleX(0.88); }
.delta-held-tile.delta-handmark-v1 { transform: rotate(8deg)   scaleY(1.15); }
.delta-held-tile.delta-handmark-v2 { transform: rotate(-5deg)  scale(1.10); }
.delta-held-tile.delta-handmark-v3 { transform: rotate(12deg)  scaleX(0.80); }
.delta-held-tile.delta-handmark-v4 { transform: rotate(-7deg)  scaleY(0.88); }
.delta-held-tile.delta-handmark-v5 { transform: rotate(5deg)   scale(1.08); }

/* stapler3保護マーク: 金属シルバー色・立体感のあるテキストシャドウで「留められた」感 */
.board.delta-mode .cell.delta-stapler3-guarded::after {
  /* クロム金属グラデーション: 光沢帯を交互に配置してブラッシュドメタル質感 */
  background-image: linear-gradient(
    165deg,
    #f8faff 0%,
    #b0b9c8 12%,
    #eceef6 26%,
    #6e7c8c 42%,
    #c8cdd8 56%,
    #edf0f8 70%,
    #848fa0 84%,
    #dde0ea 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 輪郭を少し太く: 金属スタンプ感 */
  -webkit-text-stroke: 1.5px rgba(148,158,178,0.38);
  text-shadow: none;
  /* 外縁のハレーション＋下影＋上ハイライトで3D感 */
  filter:
    drop-shadow(0 0 2.5px rgba(110,125,150,0.95))
    drop-shadow(0 3px 2px rgba(8,18,40,0.7))
    drop-shadow(0 -1px 1px rgba(255,255,255,0.9));
}

/* ×マークのdrop-shadow下偏りを補正。handmark rotate は金属スタンプ表示では不要のためリセット */
.board.delta-mode .cell.delta-stapler3-guarded[data-mark='×']::after {
  transform: translateY(-4px);
}

/* ハサミ跡: 切れ目をシャープに（ぼかしなし、シルエットを際立てる） */
.board.delta-mode .cut-icon {
  opacity: 0.90;
  z-index: 5;
}

/* ─── Phase UI-3B: スキル跡の質感強化 ──────────────────────────────────────── */

/* 消しゴム削り跡: ホール・マーク消去跡セルに温かみある色を重ねる
   background-image を使うことでベースの #f0ece0 を維持し、透過によるグレーを防ぐ */
.board.delta-mode .cell.delta-eraser-scuffed {
  background-image: linear-gradient(rgba(210, 185, 150, 0.45), rgba(210, 185, 150, 0.45));
}

/* 消しゴム摩擦テクスチャ: ホールセル上のラジアルグラデーション */
.delta-eraser-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 55% at 45% 52%, rgba(255, 210, 170, 0.50) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 62% 38%, rgba(240, 195, 155, 0.38) 0%, transparent 60%);
  mix-blend-mode: multiply;
}

/* ハサミ切り跡: blur なし・スタンダード版に合わせてシャープ表示 */
.board.delta-mode .cut-icon.delta-cut-rough {
  opacity: 0.90;
}

/* +Δ: 消しゴムゴーストマークを薄く（standard版の 0.45 → delta では 0.25） */
.board.delta-mode .eraser-ghost-mark { opacity: 0.25; }

/* セロハンテープ塗り跡: マークセルに光沢シーン */
.delta-tape-mark-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    118deg,
    transparent 0%,
    rgba(180, 240, 255, 0.11) 22%,
    rgba(255, 255, 255, 0.17) 38%,
    rgba(180, 240, 255, 0.09) 54%,
    transparent 68%
  );
  mix-blend-mode: screen;
}

/* テープ2ライン: 辺の真上に配置（DOM要素でセル境界をまたぐ） */
/* tape-snake-h/v と同じ位置取り（top/left: -4px で辺の中心に合わせる） */
.board.delta-mode .delta-tape-line-h {
  position: absolute;
  left: 0; right: 0;
  top: -4px;
  height: 8px;
  background: rgba(125, 231, 255, 0.88);
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}
.board.delta-mode .delta-tape-line-h::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 1px; height: 2px;
  background: rgba(255, 255, 255, 0.30);
  pointer-events: none;
}
.board.delta-mode .delta-tape-line-v {
  position: absolute;
  top: 0; bottom: 0;
  left: -4px;
  width: 8px;
  background: rgba(125, 231, 255, 0.88);
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}
.board.delta-mode .delta-tape-line-v::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 1px; width: 2px;
  background: rgba(255, 255, 255, 0.30);
  pointer-events: none;
}

/* ノリ貼り跡: 糊の残留感（貼り付けオーバーレイ内に薄い黄色みグラデーション） */
.board.delta-mode .delta-pasted-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inherit;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 58% 44% at 36% 40%, rgba(240, 225, 158, 0.26) 0%, transparent 65%),
    radial-gradient(ellipse 34% 48% at 70% 66%, rgba(220, 210, 138, 0.18) 0%, transparent 60%);
}

/* ステープラー針: 深み影を強化（紙に刺さった重量感） */
.board.delta-mode .delta-staple-horizontal {
  box-shadow:
    -3px 0 8px rgba(60, 70, 100, 0.52),
    -1px 0 3px rgba(0, 0, 0, 0.38),
    inset 1px 0 0 rgba(220, 228, 240, 0.5);
}
.board.delta-mode .delta-staple-vertical {
  box-shadow:
    0 -3px 8px rgba(60, 70, 100, 0.52),
    0 -1px 3px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(220, 228, 240, 0.5);
}
.board.delta-mode .delta-mark-stapler-pin {
  transform: translate(-50%, -50%) scaleY(0.33);
  box-shadow:
    0 -3px 8px rgba(60, 70, 100, 0.52),
    0 -1px 3px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(220, 228, 240, 0.5);
}

/* ─── Phase UI-3C: 盤面使用感蓄積 ─────────────────────────────────────────── */

/* 盤面全体のシワ overlay: transition で滑らかに変化 */
/* standard/delta 両モード共通 */
.board > .delta-wrinkle-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 2s ease;
  background:
    repeating-linear-gradient(
      148deg,
      transparent 0px, transparent 38px,
      rgba(84, 70, 46, 0.28) 38px, rgba(84, 70, 46, 0.28) 39px,
      transparent 39px, transparent 70px,
      rgba(68, 58, 38, 0.18) 70px, rgba(68, 58, 38, 0.18) 71px,
      transparent 71px, transparent 106px
    );
}
/* opacity は JS側（renderDeltaBoardCells）でインラインスタイルとしてstage値を設定 */

/* 縁ボロボロ SVG: transition で滑らかにフェードイン */
.delta-board-edge-erosion {
  transition: opacity 2s ease;
}

/* セル使用感オーバーレイ: JS側でbackground-imageを動的生成 */
.delta-cell-wear {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

/* ハサミ辺跡: 蓄積で切れ目が濃くなる（ぼかしなし） */
.board.delta-mode .cut-icon.delta-edge-wear-scissors-1 { opacity: 0.88; }
.board.delta-mode .cut-icon.delta-edge-wear-scissors-2 { opacity: 0.92; filter: contrast(1.1); }
.board.delta-mode .cut-icon.delta-edge-wear-scissors-3 { opacity: 0.96; filter: contrast(1.2); }
.board.delta-mode .cut-icon.delta-edge-wear-scissors-4 { opacity: 1.00; filter: contrast(1.3); }

/* ステープラー辺跡: 針の圧迫感を蓄積で強化 */
.board.delta-mode .delta-staple-line.delta-edge-wear-staple-1 { filter: brightness(0.94); }
.board.delta-mode .delta-staple-line.delta-edge-wear-staple-2 { filter: brightness(0.88); }
.board.delta-mode .delta-staple-line.delta-edge-wear-staple-3 { filter: brightness(0.82); }
.board.delta-mode .delta-staple-line.delta-edge-wear-staple-4 { filter: brightness(0.76); }

/* ─── Phase UI-3D: スマホ対応・見た目調整 ─────────────────────────────────── */

/* Item 13: スマホ版 持ちマスタイルのフォントサイズ縮小（マーク文字が大きすぎる） */
@media (max-width: 768px) {
  .delta-held-tile {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }
}

/* ─── Phase UI-3E: スマホ版持ちマス表示改善 ───────────────────────────────── */

/* Fix 1: 盤面に貼った持ちマス上マークをスマホで小さく（1.9rem → 1.0rem）
   セルサイズ≈41px・オーバーレイ82%≈34px に対してマーク+transform が収まるサイズ */
@media (max-width: 768px) {
  .delta-pasted-mark {
    font-size: 1.0rem;
  }
}

/* Fix 2: スマホ版相手情報パネルを4カラムに拡張 */
@media (max-width: 768px) {
  /* パネル全体: 横並び4カラム */
  .delta-opp-mobile-panel:not(.hidden) {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 5px;
  }
  /* カラム1（左端）: 相手✏️＋相手持ちマス */
  .delta-mob-col-opp {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
  }
  /* カラム2・3: 山札カウント */
  .delta-mob-col-deck {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    border-left: 1px solid rgba(255,255,255,0.15);
    padding-left: 5px;
  }
  /* 山札カウントボックス */
  .delta-mob-deck-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 4px;
    border: 1px solid #8eaacc;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    color: #d8e8f8;
    line-height: 1.4;
  }
  /* カラム4（右端）: 自分持ちマス */
  .delta-mob-col-my {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 48px;
    max-width: 38%;
    border-left: 1px solid rgba(255,255,255,0.15);
    padding-left: 5px;
  }
  /* 自分持ちマスタイルコンテナ */
  .delta-mob-my-held {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
  }
  /* 相手持ちマスを少し小さめに */
  .delta-mob-enemy-held-mini .delta-held-tile,
  .delta-mob-enemy-held-mini .delta-mob-held-tile {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.55rem;
  }
  /* スマホ版ではcol-info内の持ちマスエリアを非表示 */
  .delta-held-cells-area {
    display: none;
  }
}

/* Fix 3: スマホ版でロック解除後の貼り紙縁取りを大幅強化
   背景 #f8f7f2 と セル背景 #f0ece0 が近似色 → 純黒 shadow で輪郭を際立てる */
@media (max-width: 768px) {
  .delta-pasted-overlay:not(.locked) {
    background: #faf9f4;
    filter:
      drop-shadow(0 0 1px   #1a1a1a)
      drop-shadow(0 0 2px   #1a1a1a)
      drop-shadow(0 0 3.5px rgba(0, 0, 0, 0.82))
      drop-shadow(0 0 5px   rgba(0, 0, 0, 0.50))
      drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.40));
  }
}

/* +Δモード: カベをセル境界上に中央配置（delta-wall-line-h/v DOM要素） */
.board.delta-mode .cell.wall-top { border-top: none !important; }
.board.delta-mode .cell.wall-left { border-left: none !important; }
.board.delta-mode .delta-wall-line-h {
  position: absolute;
  left: 0; right: 0;
  top: -3px;
  height: 6px;
  background: #7b4a12;
  border-radius: 2px;
  pointer-events: none;
  z-index: 4;
  box-sizing: border-box;
}
.board.delta-mode .delta-wall-line-v {
  position: absolute;
  top: 0; bottom: 0;
  left: -3px;
  width: 6px;
  background: #7b4a12;
  border-radius: 2px;
  pointer-events: none;
  z-index: 4;
  box-sizing: border-box;
}

/* +Δモード: ハサミ3 hole アイコンを30%小さく */
.board.delta-mode .hole-icon { font-size: 15px; }

/* +Δモード: 相手交換通知トースト */
.delta-exchange-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(10, 20, 45, 0.92);
  border: 1px solid rgba(84, 192, 220, 0.5);
  border-radius: 8px;
  color: #d8e8f8;
  font-size: 13px;
  z-index: 300;
  white-space: nowrap;
  animation: delta-toast-in 0.25s ease-out;
}
.delta-exchange-toast-img {
  width: 32px;
  height: 44px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.delta-exchange-toast-fadeout {
  opacity: 0;
  transition: opacity 0.5s;
}
@keyframes delta-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}