/* ============================================================
   Queens - game-specific styles. Loaded after ../styles.css, so it
   inherits the brand fonts/colours and only adds what Queens needs.
   Region colours are functional (they ARE the puzzle), so like Qwixx's
   rows they deliberately sit outside the brand palette. Regions are
   also separated by thick borders so they never rely on colour alone.
   ============================================================ */
:root {
    --q-ink: #1f2a30;
    --q-line-thin: rgba(31, 42, 48, 0.18);
    --q-line-thick: #1f2a30;
    --q-conflict: #d63b2f;
    --q-r0: #F2A49B; /* coral */
    --q-r1: #9FD3B5; /* mint */
    --q-r2: #F5D27A; /* butter */
    --q-r3: #9EC3E6; /* sky */
    --q-r4: #C9B3DD; /* lavender */
    --q-r5: #F8BE8E; /* apricot */
    --q-r6: #D3E09A; /* pistachio */
    --q-r7: #5DB8C9; /* deep aqua */
    --q-r8: #E7B3C6; /* rose */
    --q-r9: #CFC6B5; /* stone */
}

.q-container { max-width: 620px; }

/* Explicit here (not just relying on styles.css) so the board's borders
   can never push it wider than its frame. */
.q-board-wrap, .q-board-wrap *, .q-mini, .q-mini *, .q-day-strip * { box-sizing: border-box; }

/* ---------- Today's four boards ---------- */
.q-day-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 4px 0 16px;
}
.q-slot {
    border: 2px solid #dfe5e8;
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    background: #fff;
    min-width: 0;
}
.q-slot-num {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-dark);
}
.q-slot-detail {
    font-size: 0.78rem;
    color: #6b7780;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.q-slot.q-slot-active { border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(255,152,0,0.18); }
.q-slot.q-slot-solved { border-color: var(--color-teal); background: #effafc; }
.q-slot.q-slot-gave_up { background: #f6f6f6; }
.q-slot.q-slot-locked { opacity: 0.55; }

/* ---------- Toolbar ---------- */
.q-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.q-clock {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--color-dark);
    font-variant-numeric: tabular-nums;
    margin-right: auto;
    line-height: 1;
}
.q-penalty {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--color-orange-dark);
    margin-top: 3px;
}
.q-tool-btn {
    border: 2px solid var(--q-ink);
    background: #fff;
    color: var(--q-ink);
    border-radius: 8px;
    padding: 7px 12px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    touch-action: manipulation;
}
.q-tool-btn:hover:not(:disabled) { background: #f2f5f6; }
.q-tool-btn:disabled { opacity: 0.4; cursor: default; }
.q-tool-btn:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 2px; }
.q-tool-btn.q-hint-btn { border-color: var(--color-orange); color: var(--color-orange-dark); }

/* ---------- Board ---------- */
.q-board-wrap {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}
.q-board {
    display: grid;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 3px solid var(--q-line-thick);
    border-radius: 6px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none; /* lets a finger drag paint crosses without scrolling */
    transition: filter 0.2s, opacity 0.2s;
}
.q-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--q-line-thin);
    border-bottom: 1px solid var(--q-line-thin);
    cursor: pointer;
    font-size: clamp(1rem, 5.5vw, 2rem);
    line-height: 1;
    color: var(--q-ink);
    outline: none;
}
.q-cell:focus-visible { box-shadow: inset 0 0 0 3px var(--color-orange); z-index: 1; }
/* Thick borders wherever two regions meet */
.q-cell.q-edge-r { border-right: 3px solid var(--q-line-thick); }
.q-cell.q-edge-b { border-bottom: 3px solid var(--q-line-thick); }
.q-cell.q-last-col { border-right: none; }
.q-cell.q-last-row { border-bottom: none; }

.q-reg-0 { background: var(--q-r0); } .q-reg-1 { background: var(--q-r1); }
.q-reg-2 { background: var(--q-r2); } .q-reg-3 { background: var(--q-r3); }
.q-reg-4 { background: var(--q-r4); } .q-reg-5 { background: var(--q-r5); }
.q-reg-6 { background: var(--q-r6); } .q-reg-7 { background: var(--q-r7); }
.q-reg-8 { background: var(--q-r8); } .q-reg-9 { background: var(--q-r9); }

.q-cell .q-x { font-size: 0.7em; opacity: 0.55; font-weight: 700; }
.q-cell .q-queen { font-size: 1.05em; }
.q-cell.q-conflict { background-image: repeating-linear-gradient(135deg, rgba(214,59,47,0.28) 0 6px, transparent 6px 12px); }
.q-cell.q-conflict .q-queen { color: var(--q-conflict); }

/* Squares a hint ruled out: hatched, greyed, can't be marked */
.q-cell.q-elim {
    cursor: not-allowed;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.75) 0 4px, rgba(255,255,255,0.35) 4px 8px);
}
.q-cell.q-elim::after {
    content: '';
    width: 22%;
    height: 22%;
    border-radius: 50%;
    background: rgba(31,42,48,0.35);
}
.q-cell.q-just-elim { animation: q-elim-in 0.6s ease-out; }
@keyframes q-elim-in {
    from { box-shadow: inset 0 0 0 40px rgba(255,152,0,0.55); }
    to { box-shadow: inset 0 0 0 40px rgba(255,152,0,0); }
}
.q-cell.q-solution-ring { box-shadow: inset 0 0 0 3px var(--color-teal-dark); }

/* ---------- Pause / overlays ---------- */
.q-board-wrap.q-paused .q-board {
    filter: blur(10px) grayscale(1);
    opacity: 0.35;
    pointer-events: none;
}
.q-overlay {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 20px;
    z-index: 5;
}
.q-overlay.q-show { display: flex; }
.q-overlay h3 { margin: 0; font-size: 1.6rem; }
.q-overlay p { margin: 0; color: #46525a; max-width: 340px; }
.q-overlay-solid { background: rgba(255,255,255,0.94); border-radius: 6px; }
.q-big-time {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-dark);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.q-message {
    min-height: 1.4em;
    text-align: center;
    font-size: 0.9rem;
    color: #46525a;
    margin: 10px 0 0;
}
.q-message.q-warn { color: var(--q-conflict); }

.q-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.85rem;
}
.q-link-btn {
    background: none;
    border: none;
    color: var(--color-teal-dark);
    cursor: pointer;
    padding: 4px 0;
    font-size: 0.85rem;
    text-decoration: underline;
}
.q-link-btn:disabled { color: #aaa; cursor: default; }

/* ---------- Mini boards (history) ---------- */
.q-mini {
    display: grid;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--q-line-thick);
    margin: 10px auto;
}
.q-mini .q-cell { font-size: clamp(0.7rem, 3.5vw, 1.1rem); cursor: default; }
.q-mini .q-cell.q-edge-r { border-right-width: 2px; }
.q-mini .q-cell.q-edge-b { border-bottom-width: 2px; }

.q-history-day { margin-top: 22px; }
.q-history-day h3 { margin: 0 0 6px; font-size: 1.05rem; }
.q-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eef1f2;
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.q-history-row .q-h-board { font-weight: 500; min-width: 92px; }
.q-history-row .q-h-time { font-variant-numeric: tabular-nums; margin-right: auto; }
.q-history-detail { width: 100%; }

@media screen and (max-width: 480px) {
    .q-clock { font-size: 1.35rem; }
    .q-tool-btn { padding: 6px 9px; font-size: 0.82rem; }
    .q-slot-detail { font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .q-board { transition: none; }
    .q-cell.q-just-elim { animation: none; }
}