.mxc-wrap{
  --ink:#111;
  --paper:#fff;
  --rule:#1c1c1c;
  --muted:#6d6d6d;
  --accent:#b51d22;
  max-width:1180px;
  margin:0 auto;
  color:var(--ink);
  background:var(--paper);
  font-family:Georgia,"Times New Roman",serif;
}
.mxc-head{text-align:center;padding:18px 8px 10px}
.mxc-kicker{font:700 11px/1.2 Arial,sans-serif;letter-spacing:.22em}
.mxc-head h2{font-size:54px;line-height:.95;margin:5px 0 4px;font-weight:700}
.mxc-date{font-size:14px;color:#555}
.mxc-rule{border-top:3px double var(--rule);margin-bottom:12px}
.mxc-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid #bbb;padding:0 0 10px;margin-bottom:18px;font-family:Arial,sans-serif}
.mxc-progress{font-size:13px;font-weight:700}
.mxc-actions{display:flex;gap:8px;flex-wrap:wrap}
.mxc-actions button{border:1px solid #111;background:#fff;color:#111;padding:8px 13px;font-weight:700;cursor:pointer}
.mxc-actions button:hover{background:#111;color:#fff}
.mxc-layout{display:grid;grid-template-columns:minmax(360px,560px) 1fr;gap:30px;align-items:start}
.mxc-board-wrap{min-width:0}
.mxc-grid{
  --mxc-cols:13;
  display:grid;
  grid-template-columns:repeat(var(--mxc-cols),1fr);
  width:100%;
  border:2px solid #111;
  background:#111;
  gap:1px;
}
.mxc-cell{position:relative;background:#fff;min-width:0;min-height:0;aspect-ratio:1/1}
.mxc-cell.mxc-block{background:#111}
.mxc-cell input{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:transparent;text-align:center;
  font:bold clamp(14px,2.2vw,26px)/1 Arial,sans-serif;
  text-transform:uppercase;padding:13% 0 0;outline:none;color:#111;
}
.mxc-num{position:absolute;z-index:2;top:2px;left:3px;font:700 clamp(7px,.8vw,10px)/1 Arial,sans-serif}
.mxc-cell.mxc-word{background:#eaf2f9}
.mxc-cell.mxc-active{background:#ffd85a}
.mxc-cell.mxc-wrong{background:#ffd9d9}
.mxc-cell.mxc-right{box-shadow:inset 0 0 0 2px #6d9f6d}
.mxc-message{min-height:28px;margin-top:10px;font:700 13px/1.4 Arial,sans-serif}
.mxc-message.is-success{color:#14721f}
.mxc-clues{display:grid;grid-template-columns:1fr 1fr;gap:24px;min-width:0}
.mxc-clue-col h3{font-size:28px;margin:0 0 10px;border-bottom:2px solid #111;padding-bottom:5px}
.mxc-clue-col ol{margin:0;padding:0;list-style:none}
.mxc-clue-col li{margin:0 0 4px}
.mxc-clue-col button{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  color:#111;padding:5px 6px;font:15px/1.25 Georgia,"Times New Roman",serif;cursor:pointer;
}
.mxc-clue-col li.is-active button{background:#fff0b8 !important;color:#111 !important}
.mxc-foot{margin-top:25px;padding:10px 0;border-top:1px solid #bbb;color:#666;font:12px/1.4 Arial,sans-serif;text-align:center}
@media(max-width:850px){
  .mxc-layout{grid-template-columns:1fr}
  .mxc-grid{max-width:620px;margin:0 auto}
  .mxc-clues{gap:18px}
  .mxc-head h2{font-size:44px}
}
@media(max-width:560px){
  .mxc-wrap{padding:0 8px}
  .mxc-toolbar{align-items:flex-start;flex-direction:column}
  .mxc-clues{grid-template-columns:1fr}
  .mxc-head h2{font-size:38px}
  .mxc-cell input{font-size:clamp(12px,5.3vw,22px)}
  .mxc-num{font-size:7px;top:1px;left:2px}
  .mxc-actions{width:100%}
  .mxc-actions button{flex:1}
}
.mxc-archive-nav{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;font-family:Arial,sans-serif
}
.mxc-nav-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:7px 11px;border:1px solid #222;
  color:#111;text-decoration:none;font-size:12px;font-weight:700;background:#fff
}
.mxc-nav-btn:hover{background:#111;color:#fff}
.mxc-nav-btn.is-disabled{opacity:.35;cursor:not-allowed}
.mxc-nav-btn.is-current{background:#111;color:#fff}
.mxc-date-picker{
  display:flex;align-items:center;gap:7px;margin-left:5px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em
}
.mxc-date-picker input{
  height:34px;border:1px solid #222;background:#fff;padding:4px 7px;color:#111
}
/* Before JS initializes, show a neutral paper panel rather than a giant black box. */
.mxc-grid:empty{background:#f6f4ef;border-color:#bdb8ad}
@media(max-width:560px){
  .mxc-archive-nav{align-items:stretch}
  .mxc-nav-btn{flex:1 1 30%}
  .mxc-date-picker{width:100%;justify-content:center;margin-left:0}
}
