/* ── Base / dark theme ─────────────────────────────────────── */
:root {
    --sud-bg: #1c2230;
    --sud-card: rgba(0,0,0,.4);
    --sud-border: rgba(255,255,255,.25);
    --sud-border-strong: #e8e8e8;
}

html, body {
    background: var(--sud-bg);
    color: #eee;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
}

h1, h2, h3 { color: #fff; }

/* Rapid tapping (pencil marks!) must not trigger Safari's double-tap page zoom */
button, .sud-cell { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.text-muted, .form-text { color: #aaa !important; }
.form-control { background: #2d2d2d; color: #fff; border-color: #555; }
.form-control:focus { background: #2d2d2d; color: #fff; }
.form-control::placeholder { color: rgba(255,255,255,.4); }

#blazor-error-ui { background: #b32121; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; color: #fff; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }
.loading-progress circle { fill: none; stroke: #444; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: #4ade80; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; }
.loading-progress-text { position: absolute; text-align: center; inset: calc(20vh + 3.25rem) 0 auto 0; color: #ccc; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

.page-center { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }

/* ── Login ─────────────────────────────────────────────────── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { background: var(--sud-card); border-radius: .75rem; padding: 2rem; width: 100%; max-width: 380px; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.login-title { font-size: 2.5rem; letter-spacing: .12em; text-align: center; }
.login-subtitle { color: #aaa; text-align: center; margin-bottom: 1.5rem; }
.login-toggle-link { color: #9fd6ad; font-size: .9rem; text-decoration: none; }
.login-toggle-link:hover { color: #cdeed6; text-decoration: underline; }

/* ── Home / Daily ──────────────────────────────────────────── */
.home-container { max-width: 860px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.home-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.home-title { font-size: 2.5rem; letter-spacing: .12em; margin: 0; }
.home-title-wrap { display: flex; align-items: center; gap: .6rem; }
.home-help { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #aab; font-size: .9rem; font-weight: 700;
    text-decoration: none; line-height: 1; flex: none; }
.home-help:hover { background: rgba(255,255,255,.12); color: #fff; }
.player-chip { background: rgba(255,255,255,.1); border-radius: 20px; padding: .3rem .9rem; display: flex; gap: .6rem; align-items: center; font-size: .9rem; }
.chip-link { color: #9fd6ad; font-size: .8rem; text-decoration: none; }
.chip-link:hover { text-decoration: underline; color: #cdeed6; }

.home-tagline { color: #ccc; max-width: 640px; margin-bottom: 1.5rem; }
.home-daily-invite { margin-top: 1.5rem; flex: none; }
.home-rules { margin-top: 2.5rem; color: #bbb; max-width: 640px; }
.home-rules h3 { font-size: 1.15rem; margin-bottom: .75rem; }
.home-rules p { font-size: .95rem; }

.home-cards { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.home-card { background: var(--sud-card); border-radius: .75rem; padding: 1.5rem; flex: 1 1 300px; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.difficulty-picker { display: flex; gap: .5rem; }
.difficulty-picker .btn { flex: 1; }

.daily-badge { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%;
    background: #ffc107; box-shadow: 0 0 6px 1px rgba(255,193,7,.8); }
.daily-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.daily-your-time { font-size: 1.8rem; font-weight: 700; color: #4ade80; }
.daily-tabs { display: flex; gap: .5rem; }

.leaderboard-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.leaderboard-table th { text-align: left; color: #aaa; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.15); padding: .35rem .6rem; }
.leaderboard-table td { padding: .35rem .6rem; }
.leaderboard-you { background: rgba(255,255,255,.12); font-weight: 600; }
.leaderboard-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.leaderboard-day { text-align: center; font-size: .85rem; color: #ccc; white-space: nowrap; }

/* ── Play page ─────────────────────────────────────────────── */
.play-container { max-width: 900px; margin: 0 auto; padding: 1rem; outline: none; }
.play-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.play-title { font-size: 1.2rem; font-weight: 600; }
.play-timer { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #ffc107; }
.play-message { text-align: center; margin-top: .75rem; color: #ffc107; }

.grids { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; }

/* Tracks use minmax(0, 1fr) and an explicit height so cell CONTENT (pencil marks!)
   can never stretch a row or column — WebKit/iPad sized auto rows from the notes,
   making one row taller and clipping the bottom of the grid. */
.sud-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-template-rows: repeat(9, minmax(0, 1fr));
    width: min(94vw, 420px);
    height: min(94vw, 420px);
    user-select: none;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.grids-double .sud-grid { width: min(94vw, 400px); height: min(94vw, 400px); }

.sud-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 3.4vw, 1.5rem);
    font-weight: 600;
    color: #7cc4ff;              /* user-entered digits */
    cursor: pointer;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.sud-given { color: #ffffff; font-weight: 700; cursor: default; }
.sud-selected { outline: 3px solid #ffd700; outline-offset: -3px; z-index: 2; }
.sud-same-value { text-shadow: 0 0 8px rgba(124,196,255,.9); filter: brightness(1.25); }
.sud-conflict { color: #ff6b6b !important; }
.sud-wrong { background-image: linear-gradient(rgba(220,53,69,.55), rgba(220,53,69,.55)) !important; }

/* Nine region tints — dark-theme pastels, distinct but subtle */
.sud-tint-0 { background-color: #2b3a55; }
.sud-tint-1 { background-color: #35502f; }
.sud-tint-2 { background-color: #54372b; }
.sud-tint-3 { background-color: #4c2f4e; }
.sud-tint-4 { background-color: #2e4a4a; }
.sud-tint-5 { background-color: #4f4a28; }
.sud-tint-6 { background-color: #3a3f5c; }
.sud-tint-7 { background-color: #513041; }
.sud-tint-8 { background-color: #37474f; }

/* Absolutely positioned: pencil marks live entirely inside the cell's box and
   cannot influence the grid's track sizing on any rendering engine. */
.sud-notes {
    position: absolute;
    inset: 2px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    font-size: clamp(.55rem, 1.5vw, .72rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    align-items: center;
    justify-items: center;
    overflow: hidden;
}

/* ── Number pad ────────────────────────────────────────────── */
.pad {
    display: flex;
    gap: .4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.pad-btn {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 8px;
}
.pad-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.pad-btn-notes { color: #9fd6ad; font-size: .95rem; }
.pad-tool { font-size: 1rem; }
.pad-tool-active { background: #2a7a2a; border-color: #4ade80; }
.pad-btn-wide { width: auto; padding: 0 .6rem; font-size: .9rem; }

.solved-time { font-size: 2.4rem; font-weight: 700; color: #4ade80; font-variant-numeric: tabular-nums; }

@media (max-width: 880px) {
    .grids-double { flex-direction: column; align-items: center; }
}