/* Mini Crossword: the 5×5 grid, clue bar, keyboard and the two-player strip. Layout and the
   result card come from cb-arcade.css. */
.mc-page { --p1: #2563eb; --p1-soft: #dde8ff; --p2: #e2620f; --p2-soft: #ffe5d3; --mc-sel: #ffd84d; --mc-word: #dbe7ff; }

.mc-tabs { display: flex; gap: 6px; margin: 0 0 10px; background: var(--cbx-soft); padding: 4px; border-radius: 14px; }
.mc-tabs button { flex: 1; border: 0; background: transparent; padding: 10px 8px; border-radius: 11px; font: 900 15px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; }
.mc-tabs button[aria-selected="true"] { background: #fff; color: var(--cbx-ink); box-shadow: 0 2px 6px rgba(42,29,23,.12); }

.mc-card { padding-top: 14px; }
.mc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.mc-pill { font: 900 13px var(--cbx-body); background: color-mix(in srgb, var(--cbx-accent) 14%, #fff); color: color-mix(in srgb, var(--cbx-accent) 65%, #000); padding: 6px 11px; border-radius: 999px; }
.mc-pill.ghost { background: var(--cbx-soft); color: var(--cbx-ink); font-variant-numeric: tabular-nums; }

.mc-page [hidden] { display: none !important; }
.mc-board { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 3px; width: min(100%, 360px); margin: 0 auto; padding: 3px; background: var(--cbx-ink); border-radius: 10px; aspect-ratio: 1; }
.mc-cell { position: relative; border: 0; padding: 0; background: #fff; border-radius: 3px; font: 900 clamp(24px, 8vw, 36px)/1 var(--cbx-body); color: var(--cbx-ink); cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mc-cell small { position: absolute; top: 3px; left: 4px; font: 900 11px var(--cbx-body); color: var(--cbx-ink-2); }
.mc-cell.block { background: transparent; cursor: default; }
.mc-cell.word { background: var(--mc-word); }
.mc-cell.sel { background: var(--mc-sel); }
.mc-cell.p1 { color: var(--p1); } .mc-cell.p2 { color: var(--p2); }
.mc-cell.p1:not(.sel):not(.word) { background: var(--p1-soft); } .mc-cell.p2:not(.sel):not(.word) { background: var(--p2-soft); }
.mc-cell.wrong span { color: var(--cbx-bad); text-decoration: line-through 3px; }
.mc-cell.rev span { color: #7a5cc4; }
.mc-cell.glow { animation: mc-glow 1.6s ease-in-out 3; }
@keyframes mc-glow { 50% { box-shadow: inset 0 0 0 4px #ffd84d; } }
.mc-board.shake { animation: mc-shake .4s; }
@keyframes mc-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.mc-cluebar { display: flex; align-items: center; gap: 6px; margin: 10px auto 4px; width: min(100%, 420px); min-height: 52px; padding: 6px; border-radius: 14px; background: var(--mc-word); cursor: pointer; }
.mc-cluebar button { border: 0; background: rgba(255,255,255,.7); width: 36px; height: 36px; border-radius: 10px; font: 900 18px var(--cbx-body); cursor: pointer; flex: none; }
.mc-cluebar p { flex: 1; margin: 0; font: 800 16px/1.3 var(--cbx-body); color: var(--cbx-ink); text-align: center; }
.mc-cluebar p b { color: var(--p1); margin-right: 4px; }
.mc-toast { min-height: 22px; margin: 0 0 4px; text-align: center; font: 900 15px var(--cbx-body); color: var(--cbx-ink-2); }
.mc-toast.good { color: var(--cbx-good); } .mc-toast.bad { color: var(--cbx-bad); }

.mc-kb { display: grid; gap: 6px; width: min(100%, 500px); margin: 4px auto 0; }
.mc-kb-row { display: flex; gap: 4px; justify-content: center; }
.mc-kb button { flex: 1; max-width: 44px; min-width: 0; height: 50px; border: 0; border-radius: 8px; background: var(--cbx-soft); font: 900 17px var(--cbx-body); color: var(--cbx-ink); cursor: pointer; touch-action: manipulation; }
.mc-kb button.wide { max-width: 66px; flex: 1.5; }
.mc-kb button:active { background: var(--cbx-line); }
.mc-kb.locked button { opacity: .45; }
.mc-tools { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.mc-tools .cbx-btn { min-height: 44px; }

.mc-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 520px) { .mc-clues { grid-template-columns: 1fr; } }
.mc-clues h3 { margin: 0 0 4px; font: 900 14px var(--cbx-body); text-transform: uppercase; letter-spacing: .08em; color: var(--cbx-muted); }
.mc-clues ol { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 2px; }
.mc-clues li { display: flex; gap: 8px; padding: 6px 8px; border-radius: 8px; font: 800 15px/1.35 var(--cbx-body); color: var(--cbx-ink-2); cursor: pointer; }
.mc-clues li b { min-width: 16px; color: var(--cbx-ink); }
.mc-clues li.on { background: var(--mc-word); color: var(--cbx-ink); }
.mc-clues li.done { color: var(--cbx-muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.mc-clues li.p1 { text-decoration-color: var(--p1); } .mc-clues li.p2 { text-decoration-color: var(--p2); }

.mc-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 8px 8px 8px 12px; border-radius: 14px; font: 900 15px var(--cbx-body); }
.mc-strip.p1 { background: var(--p1-soft); color: var(--p1); } .mc-strip.p2 { background: var(--p2-soft); color: var(--p2); }
.mc-strip .dots i { display: inline-block; width: 9px; height: 9px; margin-left: 3px; border-radius: 50%; background: currentColor; }
.mc-strip .dots i.used { opacity: .25; }
.mc-strip-btn { border: 0; border-radius: 10px; padding: 8px 12px; color: #fff; font: 900 14px var(--cbx-body); cursor: pointer; white-space: nowrap; }
.mc-strip.p1 .mc-strip-btn { background: var(--p1); } .mc-strip.p2 .mc-strip-btn { background: var(--p2); }
.mc-strip-btn.ghost { background: transparent !important; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.mc-banner { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #1d2740; color: #fff; font: 800 14px/1.4 var(--cbx-body); }
.mc-banner b { color: #ffd66b; }

.mc-result { margin-top: 14px; }
.mc-credits { text-align: left; margin: 10px 0; display: grid; gap: 6px; }
.mc-credits .row { padding: 10px 12px; border-radius: 12px; font: 800 14px/1.45 var(--cbx-body); }
.mc-credits .row.p1 { background: var(--p1-soft); color: var(--p1); } .mc-credits .row.p2 { background: var(--p2-soft); color: var(--p2); }
.mc-credits .row .nm { display: block; font-weight: 900; font-size: 15px; }
.mc-credits .top { text-align: center; font: 900 15px var(--cbx-body); margin: 2px 0 0; }
.mc-compare { font: 900 17px var(--cbx-body); color: var(--cbx-ink); margin: 6px 0 10px; }
.mc-link { border: 0; background: none; padding: 8px; font: 800 14px var(--cbx-body); color: color-mix(in srgb, var(--cbx-accent) 75%, #000); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.mc-dlg { border: 0; padding: 0; border-radius: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.mc-dlg::backdrop { background: rgba(42,29,23,.45); }
.mc-dlg-card { padding: 20px; }
.mc-dlg h2 { margin: 0 0 6px; font: 900 22px var(--cbx-display); }
.mc-dlg p { margin: 0 0 12px; font: 800 15px/1.45 var(--cbx-body); color: var(--cbx-muted); }
.mc-field { display: grid; gap: 4px; margin: 0 0 10px; font: 900 13px var(--cbx-body); color: var(--cbx-ink-2); }
.mc-field input { font: 800 17px var(--cbx-body); padding: 11px 12px; border: 2px solid var(--cbx-line); border-radius: 12px; }
.mc-dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.mc-mine { margin-top: 14px; border-top: 2px solid var(--cbx-line); padding-top: 10px; }
.mc-mine h3 { margin: 0 0 6px; font: 900 14px var(--cbx-body); }
.mc-mine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mc-mine a { display: block; padding: 9px 12px; border-radius: 10px; background: var(--cbx-soft); font: 800 14px var(--cbx-body); color: var(--cbx-ink); text-decoration: none; }