/* =========================================================
   SUIJAKU (solo) – FINAL FINAL FINAL STYLESHEET: Custom Palette
   ========================================================= */

/* ---------- Theme Tokens (Custom Palette) ---------- */
:root{
  /* 💡 修正: ベースカラーは維持し、アクセント色をカスタム値に調整 */
  --bg:      #0c1021;     
  --card:    #151a31;     
  --fg:      #eef1ff;     
  --muted:   #a4afd4;
  --line:    #3A4466;     
  
  --accent:  #7CD3FF;     /* プライマリ色（ボタン、コマの芯） - Roundのベース色に近似 */
  --accent2: #65D5FF;     /* 明るいシアン（コマのハイライト、タイマーに使用） */
  --warn:    #FF9900;     /* 高彩度オレンジ（ボタンのホバー/移動のベース色）*/
  --danger:  #ff5a5a;     /* エラー色 */

  /* ヘッダーチップ用カスタム変数 */
  --round-bg:      rgba(124,211,255,.16);
  --round-line:    rgba(124,211,255,.35);
  --round-fg:      #EAF6FF;
  
  --chip-bg:       rgba(117,214,255,.16);
  --chip-line:     rgba(117,214,255,.35);
  --chip-fg:       #EAF6FF;

  --hint-bg:       rgba(179,153,255,.16);
  --hint-line:     rgba(179,153,255,.35);
  --hint-fg:       #F2EDFF;

  --move-bg:       rgba(255,182,72,.20);
  --move-line:     rgba(255,182,72,.45);
  --move-fg:       #FFF7E8;
  
  --shadow-base: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05); 
  --shadow-inset: inset 0 4px 6px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* ---------- Base Reset (省略) ---------- */
*{ box-sizing: border-box; }
html{ overflow-x: hidden; }
body{
  height:100%;
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Noto Sans JP",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
}

/* Utility */
.hidden{ display:none !important; }
.muted{ color: var(--muted); }
.center{ text-align:center; }

/* ---------- Header (論理的ワンペア構造) ---------- */
header.app{
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  background: rgba(11,16,32,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-base);
}

.brand{ font-weight: 800; font-size: 20px; letter-spacing: .02em; }

.status{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: #c8d0ff; margin-left: auto; }

/* 💡 修正: ステータスチップの基礎スタイル */
.status span{
  padding: 6px 12px; border-radius: 8px; /* 角丸を8pxで統一 */
  border: 1px solid transparent; /* 枠線のために追加 */
  font-weight: 700; box-shadow: var(--shadow-base); transition: all .15s ease;
  white-space: nowrap; 
  margin: 0; 
}

/* 💡 最終修正: 各情報の配色と配置 (テーブル適用) */

/* Round/Chips (プライマリ進行度) */
#roundLbl{ 
  background: var(--round-bg); 
  border-color: var(--round-line);
  color: var(--round-fg);
  box-shadow: var(--shadow-base); 
  order: -1; 
  margin-right: -4px;
}
#chipsLbl{ 
  background: var(--chip-bg);
  border-color: var(--chip-line);
  color: var(--chip-fg);
  box-shadow: var(--shadow-base);
  order: 1; 
  margin-left: 12px;
  margin-right: -4px;
}

/* Hint/Moves (制限/セカンダリ) */
#hintsLbl{ 
  background: var(--hint-bg);
  border-color: var(--hint-line);
  color: var(--hint-fg);
  order: 0; 
  box-shadow: var(--shadow-base);
}
#movesLbl{ 
  background: var(--move-bg);
  border-color: var(--move-line);
  color: var(--move-fg);
  box-shadow: var(--shadow-base);
  order: 2; 
}

/* 独立要素: Time */
#timeLbl { 
  background: transparent; border: none; padding: 0; 
  font-weight: 700; font-size: 16px; color: #9DB0CC; /* 💡 修正: テーブル指定の色 */
  order: 3; margin-left: 16px; 
}


/* ---------- Layout and Board (省略) ---------- */
main.app{ padding: 14px 16px 120px; max-width: 100%; overflow-x: hidden; }
.board-history{ display: grid; grid-template-columns: 1fr min(320px, 36vw); gap: 16px; }
@media (max-width: 900px){ .board-history{ grid-template-columns: 1fr; } }

.board{ user-select:none; width: 100%; max-width: 520px; margin: 0 auto; border: none; border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-inset); position: relative; }
.row{ display: grid; grid-template-columns: 1fr repeat(5, 1fr); }
.cell{ position: relative; height: clamp(52px, 14vw, 78px); display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; background: rgba(0,0,0,0.05); transition: background .15s ease, box-shadow .15s ease; }
.cell.hdr{ background: rgba(0,0,0,0.1); color: #a9b3e6; font-weight: 700; cursor: default; aspect-ratio: 1/1; height: auto; }
.cell.corner{ background: rgba(0,0,0,0.2); }

/* 💡 コマ（チップ）の色: Roundの色（--accent）に合わせる */
.cell.has-chip::after{ content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent2), var(--accent) 70%); box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(255,255,255,0.2); z-index: 10; pointer-events: none; }
.cell.selected::before{ content: ""; position: absolute; inset: 8%; border: 3px solid var(--warn); border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.2); z-index: 11; pointer-events: none; }
.cell.hdr::before, .cell.hdr::after{ content:none !important; }


/* ---------- History (inline panel) ---------- */
.history-panel{ background: var(--card); border: none; border-radius: 16px; padding: 14px; box-shadow: var(--shadow-base); }
.history-panel h4{ margin: 0 0 10px 0; font-size: 14px; color: #b9c3ff; letter-spacing: .02em; }
.history-scroll{ max-height: 360px; overflow: auto; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.history-list.inline li{ background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px; font-size: 13px; line-height: 1.5; color: var(--fg); }

/* ---------- Overlays and Cards (省略) ---------- */
.overlay{ position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.overlay[hidden]{ display: none !important; }

.card{ width: min(520px, 92vw); background: var(--card); border: none; border-radius: 16px; padding: 20px; box-shadow: var(--shadow-soft); }

/* ---------- Buttons (カスタム配色適用) ---------- */
.btn{
  appearance: none; border: none; background: var(--card); color: var(--fg);
  padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 16px;
  cursor: pointer; box-shadow: var(--shadow-base); transition: transform .05s ease, box-shadow .15s ease;
}
.btn:hover{ box-shadow: var(--shadow-base), 0 0 6px rgba(44,154,255,0.2); }
.btn:active{ transform: translateY(1px); box-shadow: var(--shadow-inset); }

.btn.primary{ 
  background: var(--accent); border-color: var(--accent); 
  color: #000; /* 💡 修正: プライマリボタンの文字色は黒で視認性維持 */
  box-shadow: var(--shadow-base), 0 0 10px rgba(44,154,255,0.5); 
}
.btn.primary:active{ box-shadow: var(--shadow-inset); }

.btn.ghost{ background: transparent; box-shadow: none; border: 1px solid var(--line); }
.btn.ghost:active{ transform: translateY(1px); box-shadow: var(--shadow-inset); }

/* 💡 修正: Warn（共通）の文字色を適用 */
.btn.warn-text{ color: #FFD27A; } 

/* 💡 修正: Danger（共通）の配色を適用 */
.btn.danger-bg{ background: rgba(255,96,96,.22); border-color: rgba(255,96,96,.5); color: #FFECEC; }
.btn.danger-bg:hover{ background: rgba(255,96,96,.35); }


.card .actions{ display:flex; gap:12px; justify-content: flex-end; margin-top: 12px; }
.card .actions.vertical{ display: flex; flex-direction: column; gap: 10px; }
.card .actions.vertical .btn{ width: 100%; }

/* ---------- Footer (fixed) ---------- */
footer.app{
  position: fixed; left:0; right:0; bottom:0; z-index: 40;
  background: rgba(12,16,38,.92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
  justify-content: space-between; 
}
#btnResign{ display: none !important; } 

/* ---------- Mini-Board (Results Modal) ---------- */
/* Mini-Board colors match main theme (Danger for Correct) */
.mini-board{ width: min(360px, 92vw); margin: 10px auto 16px; display: grid; grid-template-columns: 28px repeat(5, 1fr); gap: 2px; }
.mini-head{ display: grid; place-items: center; height: 28px; background: var(--card); border: 1px solid var(--line); color: var(--fg); font-size: 12px; border-radius: 6px; }
.mini-cell{ position: relative; aspect-ratio: 1 / 1; border-radius: 8px; background: var(--card); border: 1px solid var(--line); overflow: visible; }
.mini-cell.has-chip::after{ content: ""; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%), var(--accent); box-shadow: 0 4px 10px rgba(0,0,0,.25); pointer-events: none; z-index: 2; }
.mini-cell.correct{ border: 3px solid var(--danger) !important; box-shadow: 0 0 0 2px rgba(255,90,90,.18); }

.legend{ display: flex; gap: 12px; justify-content: center; font-size: 14px; color: var(--fg); margin-top: 8px; font-weight: 600; }
.legend .box.correct{ border: 3px solid var(--danger); }
.legend .box.chip{ background: var(--accent); }