/* ── Daily header ── */
  #dailyHeader { text-align:center; margin:8px 0 4px; }

  #puzzleDate {
    font-size:1.15rem; font-weight:bold;
    color:#4285f4; letter-spacing:0.02em;
  }

  #streakBar {
    text-align:center; margin:6px 0 2px;
    font-size:0.9rem; color:#555;
  }
  #streakBar .streak-num { font-weight:bold; color:#e07b00; font-size:1rem; }

  #completedBanner {
    display:none;
    margin: 8px auto 24px !important; max-width:500px;
    background:#d4edda; color:#155724;
    border:1px solid #b8dfc4; border-radius:8px;
    padding:10px 14px; font-size:0.95rem;
    font-weight:bold; text-align:center;
    line-height:1.6;
  }
  #completedBanner.visible { display:block; }

  #shareLinks {
    margin-top:8px;
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  }
  #shareLinks a {
    display:inline-block;
    padding:5px 14px;
    border-radius:20px;
    font-size:0.82rem;
    font-weight:bold;
    text-decoration:none;
    transition:opacity 0.2s;
  }
  #shareLinks a,
  #shareLinks a:link,
  #shareLinks a:visited,
  #shareLinks a:hover,
  #shareLinks a:active,
  #shareLinks a:focus { color:#fff !important; text-decoration:none; }
  #shareLinks a:hover { opacity:0.82; }
  .share-x  { background:#000; }
  .share-fb { background:#1877f2; }
  .share-wa { background:#25d366; }

  /* ── Grid ── */
  #grid {
    display:grid;
    grid-template-columns:repeat(9,1fr);
    grid-template-rows:repeat(9,1fr);
    width:100%; max-width:360px;
    aspect-ratio:1/1;
    margin:10px auto 20px;
    border:1px solid #000;
    background:#fafafa;
  }

  .cell {
    position:relative;
    display:flex; align-items:center; justify-content:center;
    font-size:clamp(16px,4vw,20px);
    border:0.5px solid #bbb; box-sizing:border-box;
    user-select:none; cursor:pointer; background-color:#fcfcfc;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .cell[data-bottom="true"] { border-bottom:1px solid #000; }
  .cell[data-right="true"]  { border-right:1px solid #000; }
  .cell[data-fixed="true"]  { background:#e6e6e6; font-weight:bold; color:#444; cursor:default; }
  .cell.active    { background:#eaf3ff; }
  .cell.correct   { background:#d4edda; color:#155724; }
  .cell.incorrect { background:#f8d7da; color:#721c24; }
  body.puzzle-done .cell:not([data-fixed="true"]) { cursor:default; }

  /* ── Number + mode buttons ── */
  .number-and-mode-buttons-container {
    display:flex; flex-direction:column; align-items:center; gap:15px; margin-top:10px;
  }
  .number-buttons { display:flex; flex-direction:column; gap:8px; }
  .number-row { display:flex; justify-content:center; gap:10px; }

  .number-buttons button {
    width:40px; height:40px; padding:0; font-size:18px;
    border-radius:8px; background-color:#e3f1ff; color:#004080;
    border:1px solid #b0d6ff; cursor:pointer;
    transition:background-color 0.2s;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
  }
  .number-buttons button:hover  { background-color:#d0e8ff; }
  .number-buttons button:active { background-color:#bde0ff; transform:translateY(1px); }

  .number-buttons.candidate-mode button { font-size:0; padding:2px; line-height:1; }
  .number-buttons.candidate-mode button::before {
    content:attr(data-original-number); position:absolute;
    font-size:11px; color:#004080; white-space:nowrap;
  }
  .number-buttons.candidate-mode button[data-original-number="1"]::before { top:3px;left:3px; }
  .number-buttons.candidate-mode button[data-original-number="2"]::before { top:3px;left:50%;transform:translateX(-50%); }
  .number-buttons.candidate-mode button[data-original-number="3"]::before { top:3px;right:3px;left:auto; }
  .number-buttons.candidate-mode button[data-original-number="4"]::before { top:50%;left:3px;transform:translateY(-50%); }
  .number-buttons.candidate-mode button[data-original-number="5"]::before { top:50%;left:50%;transform:translate(-50%,-50%); }
  .number-buttons.candidate-mode button[data-original-number="6"]::before { top:50%;right:3px;left:auto;transform:translateY(-50%); }
  .number-buttons.candidate-mode button[data-original-number="7"]::before { bottom:3px;left:3px;top:auto; }
  .number-buttons.candidate-mode button[data-original-number="8"]::before { bottom:3px;left:50%;top:auto;transform:translateX(-50%); }
  .number-buttons.candidate-mode button[data-original-number="9"]::before { bottom:3px;right:3px;top:auto;left:auto; }
  .number-buttons.candidate-mode button[data-original-number="X"]::before {
    font-size:18px;top:50%;left:50%;transform:translate(-50%,-50%);
  }

  .candidate-grid {
    position:absolute; top:2px;left:2px;right:2px;bottom:2px;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
    font-size:10px; line-height:1; color:#888; pointer-events:none;
  }
  .candidate-grid span { display:flex; align-items:center; justify-content:center; }
  .candidate-grid span.active-candidate { color:#333; font-weight:bold; }

  .mode-buttons-container { display:flex; gap:10px; justify-content:center; width:100%; }

  .mode-toggle {
    background-color:#a8cfff; color:#003a75;
    border:none; border-radius:8px; padding:0;
    width:70px; height:40px; font-size:13px; cursor:pointer;
    transition:background-color 0.2s,box-shadow 0.2s;
  }
  .mode-toggle.active-mode { background-color:#4285f4; color:white; box-shadow:0 2px 5px rgba(0,0,0,0.2); }
  .mode-toggle:hover:not(.active-mode) { background-color:#bedcff; }

  body.puzzle-done .number-buttons button,
  body.puzzle-done .mode-toggle { opacity:0.45; cursor:not-allowed; pointer-events:none; }

  /* ── How it works box ── */
  #howItWorks {
    max-width:500px;
    margin:22px auto 0;
    background:#f0f6ff;
    border:1px solid #c6deff;
    border-radius:8px;
    padding:14px 18px;
    font-size:0.88rem;
    color:#222;
    line-height:1.6;
    text-align:left;
  }
  #howItWorks h3 {
    margin:0 0 8px;
    font-size:0.95rem;
    color:#003a75;
  }
  #howItWorks ul {
    margin:0; padding-left:18px;
  }
  #howItWorks ul li { margin-bottom:4px; }
  
  
  
  
  
    #calendarReminder {
    max-width:500px;
    margin:22px auto 0;
    background:#fffbf0;
    border:1px solid #f0d080;
    border-radius:10px;
    padding:18px 20px 16px;
    text-align:center;
  }

  #reminderTitle {
    font-size:1rem;
    font-weight:bold;
    color:#7a4f00;
    margin-bottom:6px;
  }

  #reminderDesc {
    font-size:0.85rem;
    color:#555;
    margin:0 0 14px;
    line-height:1.5;
  }

  #calendarButtons {
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
  }

  .cal-btn {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    text-decoration:none;
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    padding:10px 14px;
    min-width:80px;
    transition:background 0.2s, box-shadow 0.2s, transform 0.15s;
  }

  .cal-btn:hover {
    background:#f0f6ff;
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
    transform:translateY(-2px);
  }

  .cal-btn img {
    width:32px;
    height:32px;
    object-fit:contain;
  }

  .cal-btn span {
    font-size:0.75rem;
    font-weight:bold;
    color:#333 !important;
  }

  .cal-btn,
  .cal-btn:link,
  .cal-btn:visited,
  .cal-btn:hover,
  .cal-btn:active { color:#333 !important; text-decoration:none; }

  #reminderNote {
    font-size:0.75rem;
    color:#888;
    margin:0;
    line-height:1.4;
  }