:root {
  --cell-size: 50px;
  --border-thick: 2px solid black;
  --border-thin: 1px solid #333;
  --bg-clue: #e0e0e0;
  --bg-empty: #ffffff;
  --text-color: #000;
  --clue-text-size: 12px;
  --input-text-size: 24px;
}

/* Body styles inherited from src/index.css */
/* 
body {
  font-family: 'Inter', sans-serif;
  background-color: #f5f5f5;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}
*/

/* Menu Screen (Calcudoku Style) */
#menu-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding: 24px 20px;
  box-sizing: border-box;
}

.menu-title {
  color: #333;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 24px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 800px;
  width: 100%;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s;
  background: white;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  border: 1px solid #eee;
}

.menu-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

.menu-item-label {
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.menu-item-sublabel {
  color: #666;
  font-size: 0.9rem;
  margin-top: -8px;
}

.menu-icon {
  background: white;
  border-radius: 4px;
  padding: 2px;
  display: grid;
  gap: 1px;
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border: 2px solid #333;
  background-color: #333; /* Gap color */
}

.menu-icon div {
  background: white;
}

/* Responsive Menu */
@media (max-width: 700px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Main Wrap - inherit from index.css, do not override layout */

/* Container & Layout (Match Calcudoku) */
.board-container {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 0 auto;
    width: 100%;
    max-width: 540px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* Kakuro Board Container */
.kakuro-board {
  display: grid;
  /* Grid template columns will be set by JS or inline */
  border: var(--border-thick);
  background-color: var(--border-thin); /* Color for gap if used, but we'll use borders on cells */
  gap: 0; 
  /* box-shadow: 4px 4px 8px rgba(0,0,0,0.2); Removed to use container shadow */
  width: 100%; /* Fill container */
}

.kakuro-board {
  /* 强制使用无衬线字体 */ 
  font-family: "Helvetica Neue", Arial, sans-serif; 
  font-weight: bold; 
}

/* Keypad Styles */
.virtual-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.keypad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-weight: 600;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 48px;
}

.keypad-btn:hover {
  background: #f3f4f6;
  border-color: var(--color-accent);
}

.keypad-btn.action {
  grid-column: span 3; /* Make Clear button span full width */
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-secondary);
}
.keypad-btn.action:hover {
  background-color: #f3f4f6;
  color: var(--color-text);
}

.cell {
  /* width: var(--cell-size);  Removed fixed size */
  /* height: var(--cell-size); Removed fixed size */
  aspect-ratio: 1; /* Keep square */
  width: 100%; /* Fill grid column */
  border-right: var(--border-thin);
  border-bottom: var(--border-thin);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  position: relative;
  overflow: hidden; /* Prevent content spill */
}

/* Remove right border for last column and bottom border for last row 
   This is handled by the container border, but let's be precise. 
   Actually standard is to have borders on all cells and container wraps them.
   If we want container border 2px, and inner 1px, we can let cells have 1px borders.
*/

.cell.empty {
  background-color: var(--bg-empty);
  cursor: default; /* 改为 default，因为不再是原生输入框 */
}

.cell-value { 
  /* 填数格的数字要大且居中 */ 
  font-size: 1.4rem; 
  color: #000; 
}

/* 移除原有的 :focus 样式，改为 .selected */
.cell.selected {
  background-color: #e8f0fe;
  outline: 3px solid #4285f4; /* 明显的选中框 */
  z-index: 10; /* 保证框在最上层 */
}

.cell.void {
  background-color: var(--bg-clue);
}

.cell.clue { 
     /* 关键修改：必须使用 to top right */ 
     /* 只有这样，生成的黑色分割线才是从左上角划向右下角的 `\` */ 
     background: linear-gradient( 
         to top right, 
         transparent 48%, 
         #000 48%,       
         #000 52%,       
         transparent 52% 
     ); 
     background-color: #dcdcdc; /* 保持灰色底色 */ 
     position: relative; 
 }

.clue-number {
  position: absolute;
  font-size: 0.75rem; /* 微调：减小字号增加呼吸感 */
  font-weight: bold;
  color: #000;
  line-height: 1;
  z-index: 2; /* 确保在斜线之上 */
}

/* 下方列的提示 (Down) -> 必须位于左下角 */
.clue-down {
  bottom: 5px;  /* 距离底部有点空隙 */
  left: 5px;    /* 距离左边有点空隙 */
}

/* 右侧行的提示 (Right) -> 必须位于右上角 */
.clue-right {
  top: 5px;     /* 距离顶部有点空隙 */
  right: 5px;   /* 距离右边有点空隙 */
}

/* Responsive adjustment */
@media (max-width: 600px) {
  :root {
    --cell-size: 36px;
    --clue-text-size: 10px;
    --input-text-size: 18px;
  }
}

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