/* --- Pixel Font & Base --- */
body {
    font-family: 'Press Start 2P', cursive;
    background-color: #282828; /* Darker base background */
    color: #fff;
    font-size: 10px;
    line-height: 1.6;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    margin: 0;
    padding: 0;
    /* Add rocky background */
    background-image: url('../img/rock_background.png'); /* Adjust path if needed */
    background-repeat: repeat;
    background-attachment: fixed; /* Keep background static */
}
/* Class for mobile view specific adjustments */
body.mobile-view {
    /* Potentially disable zoom or adjust touch actions */
    overflow-y: scroll; /* Ensure scroll always visible */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Press Start 2P', cursive;
    color: #ffff00; /* Yellow titles */
    text-shadow: 2px 2px #000; /* Basic shadow */
}

/* --- PIN Lock Screen --- */
#pin-lock-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(20, 20, 20, 0.98); /* Almost opaque dark background */
    z-index: 2000; /* Highest layer */
    display: flex; /* Use flex to center content */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #0f0; /* Green text */
}
.pin-container {
    border: 4px solid #0f0;
    box-shadow: inset 0 0 0 4px #050;
    padding: 25px;
    background-color: #111;
    text-align: center;
    max-width: 300px; /* Max width for keypad */
    width: 90%;
}
#pin-display {
    font-size: 30px; /* Large PIN display */
    letter-spacing: 10px; /* Space out digits/placeholders */
    background-color: #000;
    border: 2px solid #0f0;
    padding: 10px;
    margin-bottom: 20px;
    height: 50px; /* Fixed height */
    line-height: 30px; /* Vertically center text */
}
#pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.pin-key {
    font-family: 'Press Start 2P', cursive;
    font-size: 18px;
    background-color: #333;
    color: #0f0;
    border: 3px solid #0f0;
    padding: 15px 10px;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 2px 2px #000;
    user-select: none; /* Prevent text selection on keys */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}
.pin-key:hover {
    background-color: #444;
}
.pin-key:active {
    background-color: #555;
    box-shadow: 1px 1px #000;
    transform: translate(1px, 1px);
}
.pin-key.pin-delete, .pin-key.pin-clear {
    font-size: 14px; /* Smaller text for commands */
    background-color: #500; /* Dark red for delete/clear */
    border-color: #f00;
    color: #f00;
}
.pin-key.pin-delete:hover, .pin-key.pin-clear:hover { background-color: #700; }
.pin-key.pin-delete:active, .pin-key.pin-clear:active { background-color: #900; }

.pin-led-indicators {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    gap: 20px;
    height: 15px;
}
.pin-led {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #333; /* Off state */
    border: 2px solid #555;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
    transition: background-color 0.2s ease;
}
.pin-led.red { border-color: #800; }
.pin-led.green { border-color: #050; }
.pin-led.flash.red { background-color: #f00; animation: led-flash 0.5s ease-out; }
.pin-led.flash.green { background-color: #0f0; animation: led-flash 0.7s ease-out; }

@keyframes led-flash {
  0%, 100% { opacity: 0.5; transform: scale(0.8); box-shadow: none;}
  50% { opacity: 1; transform: scale(1); box-shadow: 0 0 5px currentColor; }
}
/* Shake animation for incorrect PIN */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
#pin-keypad.shake { /* Apply shake to keypad container */
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
.pin-error-message {
    color: #f00; /* Red error text */
    height: 1.5em; /* Reserve space */
    margin-top: 10px;
    font-size: 9px;
}


/* --- App Content Wrapper --- */
#app-content {
    /* Styles applied via JS (display: block/none) */
}

/* --- Header / Footer (Adjustments) --- */
.game-header {
    background-color: #444;
    border-bottom: 4px solid #fff;
    padding: 8px 10px; /* Reduced padding for mobile */
    position: sticky; /* Keep header visible */
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.game-header h1 {
    font-size: 14px; /* Smaller title for mobile */
    margin-bottom: 0;
    color: #fff; /* White title maybe better contrast */
    text-shadow: 1px 1px #000;
}
.header-center {
    text-align: center;
    line-height: 1.2; /* Adjust line height */
}
.game-header .current-date {
    color: #aaa; /* Less prominent date */
    font-size: 8px;
}
.game-footer {
     border-top: 4px solid #fff;
     background-color: #444;
     padding: 5px; /* Reduced padding */
     font-size: 8px;
     /* Fixed footer example - adjust main content padding-bottom if used */
     /* position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     z-index: 100; */
}
.game-footer p { margin-bottom: 3px; }
.admin-link { color: #0ff; text-decoration: none; }
.admin-link:hover { background-color: #0ff; color: #000; }

/* --- Coin Display --- */
.coin-display {
    display: flex;
    align-items: center;
    background-color: #222;
    border: 2px solid #ffcc00; /* Gold border */
    padding: 3px 8px;
    border-radius: 10px;
    box-shadow: 1px 1px #000;
}
.coin-icon {
    width: 16px; /* Adjust size */
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    image-rendering: pixelated;
}
#total-coins {
    color: #ffff00; /* Yellow coin count */
    font-size: 12px;
    font-weight: bold;
    min-width: 1.5em; /* Ensure space for multiple digits */
    text-align: right;
}
/* Pulse animation for coin icon */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.coin-icon.pulse {
  animation: pulse 0.5s ease-in-out;
}
/* Coin value on chore item */
.chore-coin-value {
    display: inline-block;
    margin-left: 8px;
    font-size: 9px;
    color: #ffd700; /* Gold */
    vertical-align: middle;
    background-color: rgba(0,0,0,0.3);
    padding: 1px 4px;
    border-radius: 3px;
}
.coin-icon-small {
     width: 10px; height: 10px; margin-right: 2px; vertical-align: baseline;
}

/* --- Menu Button --- */
.menu-btn {
    padding: 3px 6px;
    font-size: 12px;
    background: #555;
    border-color: #ccc;
    color: #fff;
}
.menu-btn:hover { background: #666; color: #fff;}

/* --- Pixel Modals (Menu, Change PIN) --- */
.pixel-modal .modal-content {
    background-color: #333;
    border: 4px solid #fff;
    box-shadow: inset 0 0 0 4px #888;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    border-radius: 0; /* Sharp corners */
}
.pixel-modal .modal-header {
    background-color: #555;
    border-bottom: 4px solid #fff;
    color: #ff0; /* Yellow title */
    text-shadow: 1px 1px #000;
    padding: 10px 15px; /* Adjust padding */
}
.pixel-modal .modal-header .modal-title { font-size: 14px; color: #ff0; text-shadow: 1px 1px #000; }
.pixel-modal .modal-body { padding: 20px; }
.pixel-modal .modal-footer {
    border-top: 4px solid #fff;
    background-color: #555;
    justify-content: flex-end; /* Align buttons right */
    padding: 10px 15px;
}
.pixel-modal .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.8;}
.pixel-modal .btn-close-white:hover { opacity: 1;}

/* Pixel List Group (for menu) */
.pixel-list .list-group-item {
    background-color: transparent;
    border: none;
    border-bottom: 2px dashed #777; /* Dashed separator */
    color: #eee;
    padding: 10px 5px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
}
.pixel-list .list-group-item:last-child { border-bottom: none; }
.pixel-list .list-group-item:hover {
    background-color: #444;
    color: #0ff; /* Cyan hover */
}
.pixel-list .list-group-item i { margin-right: 8px; color: #aaa; width: 1.1em; text-align: center; } /* Align icons */
.pixel-list .list-group-item:hover i { color: #0ff; }

/* Pixel Input Fields */
.pixel-input {
    font-family: 'Press Start 2P', cursive;
    background-color: #222;
    border: 2px solid #aaa;
    color: #0f0; /* Green input text */
    padding: 8px;
    font-size: 12px;
    border-radius: 0;
}
.pixel-input:focus {
    background-color: #000;
    border-color: #0f0;
    box-shadow: none;
    color: #0f0;
}
.pixel-modal label { font-size: 9px; margin-bottom: 3px; color: #ccc;}


/* --- Main Content & Chores (Layout) --- */
.container.main-content {
    background-color: #444; /* Solid darker grey for content area */
    padding: 15px; /* Reduced padding for mobile */
    margin-top: 0;
    border: 4px solid #fff;
    box-shadow: inset 0 0 0 4px #888;
    margin-bottom: 60px; /* Ensure space for potential fixed footer */
}
.pixel-box {
    border: 4px solid #fff;
    box-shadow: inset 0 0 0 4px #888;
    padding: 15px;
    background-color: #333;
    margin-bottom: 15px;
}
.category-title.pixel-box {
    padding: 10px 15px;
    margin-bottom: 15px; /* Reduced space */
    display: inline-block;
    background-color: #555;
    font-size: 12px; /* Smaller category titles */
}
.category-title span { display: block; }
.category-title i { margin-right: 8px; }
#before-school-section .category-title { background-color: #603030; }
#before-school-section .category-title i { color: #ff8a8a; }

/* --- Chore List (Grid Layout - Adjust for Mobile) --- */
.chore-list {
    display: grid;
    /* Start with single column, move to more on larger screens */
    grid-template-columns: 1fr;
    gap: 10px; /* Reduced gap */
}
/* Example: Switch to 2 columns on small screens and up */
@media (min-width: 576px) {
  .chore-list {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
  }
}


/* --- Chore Item (Quest Item) Styling --- */
.chore-item {
    border: 4px solid #888;
    box-shadow: inset 0 0 0 4px #444;
    background-color: #5a5a5a;
    padding: 10px;
    transition: all 0.3s ease;
    position: relative;
    cursor: default;
    display: flex;
    align-items: flex-start;
}
.chore-item:hover {
     border-color: #fff;
     background-color: #6a6a6a;
}
/* Style for chores due before school */
.chore-item.due-before-school {
    border-left-color: #ff8a8a; /* Example: Reddish left border */
}


/* Icon Area Styling */
.chore-icon-area {
    flex-shrink: 0;
    margin-right: 10px; /* Slightly less space */
    color: #eee;
    padding-top: 2px;
    text-align: center;
    width: 30px; /* Fixed width for alignment */
}
.chore-icon-area .fa-2x {
    font-size: 1.6em; /* Adjust icon size */
    line-height: 1;
}
.chore-item.completed .chore-icon-area { color: #0f0; }

.chore-info { flex-grow: 1; min-width: 0; } /* Allow shrinking/wrapping */
.chore-name { font-size: 11px; color: #fff; margin-bottom: 3px; display: block; font-weight: normal; word-wrap: break-word; }
.chore-desc { font-size: 9px; color: #ccc; margin-bottom: 5px; line-height: 1.4; word-wrap: break-word; }
.chore-meta { font-size: 8px; color: #aaa; display: flex; align-items: center; margin-top: 5px; /* Add space */ }
.chore-meta i { margin-right: 4px; }

/* --- Chore Actions (Pixel Buttons) --- */
.chore-actions {
    margin-top: 5px; /* Reduced top margin */
    text-align: right;
    padding: 0; background: none; border: none;
    margin-left: auto; flex-shrink: 0; padding-left: 8px;
    align-self: center; /* Align buttons vertically center */
    display: flex; flex-direction: column; gap: 5px;
}

.btn-pixel { /* ... base styles ... */ }
.btn-pixel:hover { /* ... */ }
.btn-pixel:active { /* ... */ }
.btn-pixel.btn-complete-pixel { /* ... */ }
.btn-pixel.btn-complete-pixel:hover { /* ... */ }
.btn-pixel.btn-undo-pixel { /* ... */ }
.btn-pixel.btn-undo-pixel:hover { /* ... */ }

/* --- Completed Chore Styling --- */
.chore-item.completed { border-color: #0f0; background-color: #444; opacity: 0.7; }
.chore-item.completed .chore-name { text-decoration: line-through; color: #aaa; }
.chore-item.completed .chore-actions .btn-complete-pixel { display: none; }
.chore-item .chore-actions .btn-undo-pixel { display: none; }
.chore-item.completed .chore-actions .btn-undo-pixel { display: inline-block; }

/* Animation on completion */
@keyframes completing-fade-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.8); }
}
.chore-item.completing {
    animation: completing-fade-out 0.4s ease-out forwards;
}


/* --- Progress Bar --- */
#daily-progress-container { border: 4px solid #fff; padding: 5px; background: #333; }
.progress-text-pixel { font-size: 9px; text-align: center; margin-bottom: 5px; color: #eee; }
.progress-bar-pixel-outer { height: 15px; background-color: #555; border: 2px solid #888; padding: 2px; }
.progress-bar-pixel-inner { height: 100%; background-color: #0f0; transition: width 0.5s linear; image-rendering: pixelated; }

/* --- Loading Spinner --- */
.spinner { /* ... */ }
@keyframes spin { /* ... */ }

/* --- Notices and Alerts --- */
.notice-text { color: #aaa; font-size: 9px; text-align: center; padding: 10px; }
.alert-pixel {
    border: 4px solid #fff; padding: 10px; font-size: 10px; margin: 0;
    position: fixed; bottom: 10px; left: 5px; right: 5px; /* Adjust spacing */
    z-index: 1050; text-align: center;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.5); /* Pixel shadow */
}
.alert-danger-pixel { background-color: #8b0000; color: #fff; border-color: #ff6347; }
.alert-info-pixel { background-color: #00508b; color: #fff; border-color: #00a0ff; }
.alert-success-pixel { background-color: #006400; color: #fff; border-color: #32cd32; } /* Added success style */


/* --- == Admin Specific Styles == --- */
#admin-portal, .login-container { font-family: sans-serif; font-size: 14px; color: #333; background: rgba(255, 255, 255, 0.95); padding: 1.5rem; /* Adjusted padding */ border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); margin-top: 1.5rem; /* Adjusted margin */ }
#admin-portal h1, #admin-portal h2, #admin-portal h3, #admin-portal h4, #admin-portal h5 { font-family: sans-serif; color: #343a40; text-shadow: none; }
.login-container { max-width: 400px; margin: 10vh auto; }
/* Admin Table */
#chore-table { margin-top: 1rem; border: 1px solid #dee2e6; background-color: #fff; }
#chore-table th, #chore-table td { vertical-align: middle; padding: 0.6rem; /* Adjusted padding */ font-size: 0.9rem; }
#chore-table th { background-color: #e9ecef; font-weight: 600; color: #495057; }
#chore-table td:nth-child(2) { font-size: 1.1rem; text-align: center; } /* Icon column */
#chore-table td:nth-child(5), #chore-table td:nth-child(6) { text-align: center; } /* Coin & Notif columns */
#chore-table .action-buttons .btn { margin: 0 2px; padding: 0.2rem 0.4rem; font-size: 0.8rem; }
#chore-table .drag-handle { cursor: move; color: #adb5bd; text-align: center; }
#chore-table tr:hover { background-color: #f8f9fa; }
.sortable-ghost { background-color: #cfe2ff; opacity: 0.7; border: 1px dashed #0d6efd; }
.sortable-ghost td { color: transparent; }
/* Reporting */
#reporting-area { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #eee; }
#reporting-area h3 { margin-bottom: 1.5rem; font-size: 1.5rem; }
#reporting-area h3 small { font-size: 0.9rem; color: #6c757d; }
.report-chart-container { background-color: #fff; padding: 1rem; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 1.5rem; border: 1px solid #e9ecef; min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.report-chart-container h5 { margin-bottom: 1rem; text-align: center; font-size: 1rem; font-weight: 600; color: #495057; }
.report-stats { background-color: #f8f9fa; padding: 1.5rem; border-radius: 6px; margin-bottom: 1.5rem; border: 1px solid #e9ecef; }
.report-stats h4 { font-size: 1.1rem; margin-bottom: 1rem; color: #343a40; font-weight: 600; }
.report-stats p { margin-bottom: 0.75rem; font-size: 1rem; color: #495057; overflow: hidden; }
.report-stats strong { font-weight: 700; color: #0d6efd; float: right; margin-left: 10px; }
.report-stats .progress { height: 20px; margin-top: 1rem; font-size: 0.85rem; font-weight: bold; }
#report-loading { margin-top: 2rem; color: #6c757d; }
#report-error { margin-top: 1rem; }
/* Admin Modal */
#choreModal .modal-content { border: 2px solid #dee2e6; border-radius: 0.3rem; }
#choreModal .modal-header { background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; }
#choreModal .modal-title { font-family: sans-serif; color: #343a40; text-shadow: none; }
#choreModal .modal-body { font-family: sans-serif; font-size: 1rem; }
#modal-error-message { font-size: 0.85rem; margin-top: 0.5rem; }
#choreIcon option { padding-top: 3px; padding-bottom: 3px; }
#choreIcon option i { margin-right: 8px; width: 1.2em; text-align: center; }
#choreIcon { font-family: sans-serif; }
/* Settings Tab */
#update-pin-form .input-group { max-width: 350px; } /* Limit width of PIN input group */
#togglePinVisibility { border-left: 0; }