/* ============================================
   共通 (modal-com-)
   ============================================ */

body[data-layout="mobile"] .pc-only { display: none; }
body[data-layout="tablet-portrait"] .pc-only { display: none; }
body[data-layout="desktop"] .mobile-only { display: none; }

body[data-layout="mobile"] .modal-com-card { font-size: 1em; }
body[data-layout="tablet-portrait"] .modal-com-card { font-size: 1.4em; }
body[data-layout="desktop"] .modal-com-card{ font-size: 1.4em; }

.modal-com-card {
  background: rgba(0,0,0,0.77);
  padding: 0.75em 0.75em;
  border-radius: 1em;
  color: #fff;
  font-weight: 700;
  box-shadow: 0em 0em 0.5em 0.5em rgba(50,50,50,.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  min-width: 220px;
  max-width: 85%;
}

.modal-com-body {
  font-size: 0.75em;
  color: #c5cae9;
  font-weight: 400;
  text-align: left;
  padding: 0 12px;
  width: 100%;
}

.modal-com-title {
  font-size: 1.3em;
  background: linear-gradient(135deg, #35a2ff, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.modal-title-gameover{
  font-size: 1.3em;
  letter-spacing: 0.5px;
}
.modal-title-gameclear{
  font-size: 1.3em;
  letter-spacing: 0.5px;
}


.modal-com-section-title {
	text-align:center;
  font-size: 1.2em;
  margin-bottom: 8px;
  font-weight: 700;
  color: #ffc107;
}

.modal-com-table {
  font-size: 1em;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}

.modal-com-table th {
  font-size: 1em;
  padding: 4px 8px;
  text-align: left;
  color: #a855f7;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.modal-com-table td {
  font-size: 1em;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.modal-com-card-img {
  width: 50%;
}

.modal-com-btn-area {
  display: flex;
  gap: 0.5em;
  margin-bottom: 8px;
}

.modal-com-card button {
  appearance: none;
  border: 1px solid #2b57a0;
  color: #dbe6ff;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.7em;
}


.modal-com-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(53,162,255,0.6);
}

.modal-com-btn-start {
  background: #2d8cdb;
  color: #fff;
}
.modal-com-btn-ok {
  background: #20c997;
  color: #fff;
}

.modal-com-btn-replay {
  background: #4ecdc4;
  color: #fff;
}

.modal-com-btn-back {
  background: #ff6b6b;
  color: #fff;
}

.modal-com-btn-close {
  background: #2d8cdb;
  color: #fff;
}
.modal-com-btn-navigate {
  background: #2ddb8c;
  color: #fff;
}


.modal-com-error-title {
  color: #ff6060;
  font-weight: bold;
  margin-bottom: 5px;
}