/* ============================================================================
   Chores — Super Mario Bros. theme. Ported from the legacy _assets/_legacy/chores.css
   plus the server-side-SPA overlay/highlight plumbing shared across ASPMVC projects.
   ========================================================================= */

@font-face {
    font-family: 'mario-text';
    src: url('/css/font/mario-text.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mario-heading';
    src: url('/css/font/mario-heading.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    min-height: 100%;
}

body {
    background-image: url('/images/mario-bg.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646; /* fallback if image unavailable */
    font-family: "mario-text", system-ui, sans-serif;
}

p, div, span, label, td, th, li, a, .btn {
    font-family: "mario-text", system-ui, sans-serif;
}

body, p, div, span, label, td, th, li {
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "mario-heading", system-ui, sans-serif;
    color: white;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 4px 4px 0 #000, -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    color: gold !important;
    text-decoration: none;
}

/* Completed chores dim out */
.completed, .completed a, .completed span {
    color: #999 !important;
    opacity: 0.75;
}

/* ---- Legibility in the pixel font -----------------------------------------
   The Mario pixel font + black outline smudges at small sizes and when the
   browser fakes a weight the font doesn't ship. Two fixes below. */

/* common.css sets .tiny to 10px, which is unreadable in this font. Bump it so
   kid-card subtext ("X to do today"), "up for grabs", notes, and the admin
   table's Schedule/Assigned cells stay legible on a phone. */
.tiny {
    font-size: 0.9rem;
}

/* Tables render on a white background with black Bootstrap text, but the global
   rule above still wraps every cell in a black outline shadow — black-on-black
   smears the pixel glyphs into an illegible blob. Drop the outline (white-on-sky
   doesn't apply here) and render headers at normal weight (mario-text ships only
   a normal weight, so a bold <th> would get faux-bolded into mud). */
.table td, .table th {
    text-shadow: none;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.table th {
    font-weight: normal;
}

/* Links default to white (for the sky background); on the white table that makes
   the Name column invisible once the outline is gone. Give table links a dark
   link colour with a readable hover (overriding the global gold hover). */
.table a {
    color: #c81e1e;
}

.table a:hover {
    color: #8f1414 !important;
}

/* The gold balance on the kid picker / admin cards reads small in the pixel
   font — bump it (and the coin scales with it) for legibility. */
.kid-card .pay-badge {
    font-size: 1.25rem;
}

/* 8-bit pressed look for inputs & buttons */
input.form-control, select.form-select, textarea.form-control {
    border: 1px solid #000;
    box-shadow: 1px 1px 0 0 #000;
}

.btn {
    color: initial;
    text-shadow: none;
    border: 1px solid #000;
    box-shadow: 1px 1px 0 0 #000;
}

/* Buttons are often rendered as <a class="btn">. The global gold link-hover
   above would tint the label gold on a yellow button — illegible. Keep button
   text dark on hover (Bootstrap's own .btn colour wins via initial). */
a.btn:hover {
    color: initial !important;
}

/* ---- Coin / question blocks ------------------------------------------------ */

/* The tappable block is a submit button styled as a Mario ? block. */
.coin-block {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    padding: 0;
    border: none;
    background: url('/images/block-base.png') no-repeat center;
    background-size: contain;
    overflow: hidden; /* mask the scrolling ? */
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .5);
    cursor: pointer;
}

.coin-block.done {
    background-image: url('/images/empty-block.png');
    cursor: default;
}

/* The scrolling ? mark (only on active blocks) */
.coin-block .question-mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    background: url('/images/question-mark.png') no-repeat center;
    background-size: contain;
    animation: scrollQuestion 1s infinite linear;
}

@keyframes scrollQuestion {
    0% { transform: translateX(56px); }
    100% { transform: translateX(-56px); }
}

/* Snappy bounce when hit */
@keyframes blockBounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.coin-block.bounce {
    animation: blockBounce 0.3s ease-out;
}

.chore-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.chore-row .chore-name {
    font-size: 1.15rem;
}

.pay-badge {
    color: #FFD700;
    font-weight: bold;
}

/* Kid picker cards */
.kid-card {
    display: block;
    padding: 1.25rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #000;
    box-shadow: 2px 2px 0 0 #000;
}

.kid-card .kid-name {
    font-family: "mario-heading", system-ui, sans-serif;
    font-size: 1.5rem;
}

.coin-icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
}

/* Group section headings */
.schedule-group + .schedule-group {
    margin-top: 1.5rem;
}

/* ---- Server-side SPA: loading overlay -------------------------------------- */
.page-overlay {
    position: fixed;
    inset: 0;
    background: rgba(70, 70, 70, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
}

.page-overlay.active {
    opacity: 1;
    visibility: visible;
}

.page-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

.overlay-spinner {
    color: #FFD700;
}

/* Post-mutation highlight */
.item-highlight {
    animation: highlight-fade 1.5s ease-out;
}

@keyframes highlight-fade {
    0% { background-color: rgba(255, 215, 0, 0.55); }
    100% { background-color: transparent; }
}