/* ================================================================
   ワク吉「今日のナンプレ」 本番組み込み用 CSS
   すべてのクラス/IDに wknp- プレフィックスを付与し、
   既存テーマ・既存記事のスタイルと衝突しないようにしています。
   ================================================================ */

.wknp-root{
  --wknp-paper:#F6F9FB;
  --wknp-paper-deep:#E9F1F6;
  --wknp-ink:#3A4A63;
  --wknp-ink-deep:#22304A;
  --wknp-pink:#F2577E;
  --wknp-pink-soft:#FCE4EC;
  --wknp-green:#2FAE74;
  --wknp-green-soft:#DFF5E7;
  --wknp-brick:#E4534F;
  --wknp-brick-soft:#FBE3E2;
  --wknp-line-soft:#DCE7EF;
  --wknp-line-strong:var(--wknp-ink-deep);
  --wknp-radius:16px;
  --wknp-fs:1;

  all:initial; /* 親テーマのスタイル継承を遮断(フォント・色などの巻き込み事故を防ぐ) */
  display:block;
  width:100%;
  max-width:460px;
  margin:0 auto;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  color:var(--wknp-ink-deep);
  box-sizing:border-box;
}
.wknp-root *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; font-family:inherit; }
.wknp-root button{ font:inherit; }

.wknp-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.wknp-titlewrap{ display:flex; align-items:center; gap:8px; }
.wknp-playtag{
  font-size:calc(11px*var(--wknp-fs)); font-weight:700; color:var(--wknp-green);
  background:var(--wknp-green-soft); padding:4px 10px; border-radius:999px;
}
.wknp-h1{ font-size:calc(22px*var(--wknp-fs)); font-weight:900; margin:0; color:var(--wknp-ink-deep); letter-spacing:.02em; }
.wknp-sub{ font-size:calc(12px*var(--wknp-fs)); color:var(--wknp-pink); font-weight:700; }

.wknp-fontctrl{ display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-bottom:10px; }
.wknp-fontctrl span{ font-size:12px; color:var(--wknp-pink); font-weight:700; }
.wknp-fontctrl button{
  width:30px; height:30px; border-radius:8px; border:2px solid var(--wknp-paper-deep);
  background:#fff; font-weight:900; font-size:15px; color:var(--wknp-ink); cursor:pointer;
}

.wknp-modetabs{ display:flex; gap:8px; margin-bottom:10px; }
.wknp-modetab{
  flex:1; padding:10px 0; border-radius:10px 10px 0 0; border:2px solid var(--wknp-paper-deep); border-bottom:none;
  background:#fff; color:var(--wknp-ink); font-weight:700; font-size:calc(13px*var(--wknp-fs)); cursor:pointer;
}
.wknp-modetab.wknp-is-active{ background:var(--wknp-ink-deep); border-color:var(--wknp-ink-deep); color:#fff; }

.wknp-datenav{ display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:12px; padding:8px 10px; margin-bottom:10px; }
.wknp-datenav button{ width:38px; height:38px; border-radius:8px; border:none; background:var(--wknp-paper); font-size:16px; font-weight:900; color:var(--wknp-ink); cursor:pointer; }
.wknp-datenav button:disabled{ opacity:.3; }
.wknp-datelabel{ font-size:calc(14px*var(--wknp-fs)); font-weight:700; color:var(--wknp-ink-deep); text-align:center; flex:1; }
.wknp-datelabel .wknp-done{ display:block; font-size:calc(11px*var(--wknp-fs)); color:var(--wknp-green); font-weight:700; }

.wknp-diffrow{ display:flex; gap:8px; margin-bottom:12px; }
.wknp-diffbtn{
  flex:1; padding:10px 0; border-radius:999px; border:2px solid var(--wknp-paper-deep);
  background:#fff; color:var(--wknp-ink); font-weight:700; font-size:calc(14px*var(--wknp-fs)); cursor:pointer;
}
.wknp-diffbtn.wknp-is-active{ background:var(--wknp-pink); border-color:var(--wknp-pink); color:#fff; }

.wknp-dailydiff{ display:flex; gap:8px; margin-bottom:12px; }
.wknp-dailydiff button{
  flex:1; padding:8px 0; border-radius:999px; border:2px solid var(--wknp-paper-deep);
  background:#fff; color:var(--wknp-ink); font-weight:700; font-size:calc(13px*var(--wknp-fs)); cursor:pointer;
}
.wknp-dailydiff button.wknp-is-active{ background:var(--wknp-green); border-color:var(--wknp-green); color:#fff; }

.wknp-status{
  display:flex; justify-content:space-between; align-items:center;
  background:#fff; border-radius:999px; padding:10px 18px; margin-bottom:10px;
  font-size:calc(15px*var(--wknp-fs)); font-weight:700; color:var(--wknp-ink);
}
.wknp-pill{ display:flex; align-items:center; gap:6px; }
.wknp-numval{ color:var(--wknp-pink); font-variant-numeric:tabular-nums; }

.wknp-tierline{
  text-align:center; font-size:calc(12px*var(--wknp-fs)); color:var(--wknp-ink); margin-bottom:10px;
  background:var(--wknp-pink-soft); border-radius:8px; padding:6px 8px; font-weight:700;
}
.wknp-tierline b{ color:var(--wknp-pink); }

.wknp-board-wrap{ background:#fff; border-radius:var(--wknp-radius); padding:10px; box-shadow:0 6px 0 var(--wknp-paper-deep); margin-bottom:16px; }
.wknp-board{
  display:grid; grid-template-columns:repeat(9,1fr); grid-template-rows:repeat(9,1fr);
  aspect-ratio:1/1; width:100%; border:2.5px solid var(--wknp-line-strong); border-radius:6px; overflow:hidden;
}
.wknp-cell{
  display:flex; align-items:center; justify-content:center; position:relative;
  font-size:calc(clamp(14px, 4.6vw, 22px)*var(--wknp-fs));
  font-weight:700; color:var(--wknp-pink); background:#fff;
  border:1px solid var(--wknp-line-soft);
  user-select:none; cursor:pointer; font-variant-numeric:tabular-nums;
}
.wknp-cell:nth-child(3n){ border-right:2px solid var(--wknp-line-strong); }
.wknp-cell:nth-child(9n+1){ border-left:2px solid var(--wknp-line-strong); }
.wknp-cell.wknp-row-thick-bottom{ border-bottom:2px solid var(--wknp-line-strong); }
.wknp-cell.wknp-given{ color:var(--wknp-ink-deep); font-weight:900; }
.wknp-cell.wknp-wrong{ color:var(--wknp-brick); background:var(--wknp-brick-soft); }
.wknp-cell.wknp-selected{ background:var(--wknp-green-soft); }
.wknp-cell.wknp-peer{ background:var(--wknp-paper); }
.wknp-cell.wknp-same-num{ background:var(--wknp-pink-soft); }
.wknp-cell .wknp-notes{
  position:absolute; inset:2px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  font-size:calc(clamp(7px,2vw,9px)*var(--wknp-fs)); color:#8993A6; font-weight:500;
}
.wknp-cell .wknp-notes span{ display:flex; align-items:center; justify-content:center; }

.wknp-numpad{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:10px; }
.wknp-numbtn{
  padding:14px 0; border-radius:10px; border:none; background:#fff; box-shadow:0 3px 0 var(--wknp-paper-deep);
  font-size:calc(19px*var(--wknp-fs)); font-weight:700; color:var(--wknp-ink-deep); cursor:pointer;
}
.wknp-numbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--wknp-paper-deep); }
.wknp-numbtn.wknp-erase{ color:var(--wknp-brick); font-size:calc(15px*var(--wknp-fs)); }

/* 操作領域全体(盤面・数字ボタン・メモ/ヒント/次の問題)。
   AdSenseはこの要素の外側に、十分な余白(推奨24px以上)を取って配置してください。
   README「広告配置について」参照。 */
.wknp-playzone{ }

.wknp-actions{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wknp-actbtn{
  padding:12px 0; border-radius:10px; border:2px solid var(--wknp-paper-deep); background:transparent;
  font-size:calc(13px*var(--wknp-fs)); font-weight:700; color:var(--wknp-ink); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.wknp-actbtn .wknp-count{ font-size:calc(11px*var(--wknp-fs)); color:var(--wknp-pink); font-weight:500; }
.wknp-actbtn.wknp-is-on{ background:var(--wknp-pink); color:#fff; border-color:var(--wknp-pink); }
.wknp-actbtn.wknp-is-on .wknp-count{ color:#fff; }

.wknp-win{ position:fixed; inset:0; background:rgba(36,52,77,.55); display:none; align-items:center; justify-content:center; padding:20px; z-index:9999; }
.wknp-win.wknp-show{ display:flex; }
.wknp-win-card{ background:#fff; border-radius:18px; padding:28px 24px; text-align:center; max-width:340px; font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif; }
.wknp-win-card h2{ margin:0 0 8px; font-size:22px; color:var(--wknp-ink-deep); }
.wknp-win-card p{ margin:0 0 18px; color:var(--wknp-pink); font-weight:700; font-size:15px; }
.wknp-win-card img{ width:100%; max-width:240px; border-radius:14px; margin:0 auto 12px; display:block; }
.wknp-win-card button{
  padding:12px 28px; border-radius:999px; border:none; background:var(--wknp-pink);
  color:#fff; font-weight:700; font-size:15px; cursor:pointer;
}

.wknp-mascot-banner{
  display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px;
  padding:8px 12px; margin-bottom:10px; box-shadow:0 3px 0 var(--wknp-paper-deep); transition:opacity .3s;
}
.wknp-mascot-banner img{ width:72px; height:auto; border-radius:10px; flex-shrink:0; display:block; }
.wknp-mascot-banner .wknp-bubble{ font-size:calc(13px*var(--wknp-fs)); font-weight:700; color:var(--wknp-ink-deep); }
.wknp-mascot-banner.wknp-hide{ display:none; }

.wknp-hint-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px;
  padding:8px 14px 8px 8px; box-shadow:0 6px 20px rgba(34,48,74,.25);
  opacity:0; pointer-events:none; transition:.25s; z-index:9998; max-width:88vw;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
}
.wknp-hint-toast.wknp-show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.wknp-hint-toast img{ width:52px; height:auto; border-radius:8px; }
.wknp-hint-toast span{ font-size:13px; font-weight:700; color:var(--wknp-ink-deep); }

.wknp-gen-msg{ text-align:center; font-size:12px; color:var(--wknp-pink); margin:-4px 0 10px; height:14px; }

.wknp-hidden{ display:none !important; }