/* ============================================================
   styles.css — Shared styles for the entire quiz app
   
   This file is loaded by EVERY page. It contains:
     1. Reset & Base         — normalize browser defaults
     2. Typography           — headings, text colors
     3. Layout               — body, cards, flex helpers
     4. Form Elements        — inputs, selects, textareas
     5. Buttons              — all button styles
     6. Messages / Alerts    — success and error banners
     7. Tables               — shared table styles
     8. Index Page           — join / registration page
     9. Play Page            — student game view
    10. Scoreboard Page      — projector leaderboard
   
   Teacher-only styles live in teacher.css, which is loaded
   only by teacher.php on top of this file.
   ============================================================ */


/* ============================================================
   1. RESET & BASE
   
   Browsers have their own default styles (margins, padding,
   box sizing) that differ between Chrome, Firefox, Safari etc.
   This section wipes those out so we start from a clean slate.
   ============================================================ */

/* border-box means padding and border are INCLUDED in an
   element's width/height, which is almost always what you want.
   The * selector applies this to every single element. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base body styles shared by all pages.
   Individual pages add their own layout on top of this
   (e.g. index.php centers everything, play.php left-aligns). */
body {
    font-family: sans-serif;
    background: #1a1a2e;   /* dark navy — the app's background color */
    color: #eee;           /* off-white — default text color */
}


/* ============================================================
   2. TYPOGRAPHY
   
   Shared heading styles. Pages that need different sizes
   (like scoreboard's giant h1) override these in their
   own section below.
   ============================================================ */

h1 {
    color: #e94560;        /* red/pink — used for titles and accents */
    margin-bottom: 1.5rem;
}

/* h2 is used as section labels inside cards — small, muted, uppercase */
h2 {
    color: #aaa;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;   /* slightly spaced letters look better in uppercase */
    margin-bottom: 0.75rem;
}

/* General paragraph text — muted color, some breathing room below */
p {
    color: #aaa;
    margin-bottom: 1.5rem;
}


/* ============================================================
   3. LAYOUT
   
   The .card class is used on every page to group related
   content into a visible box. Think of it like a panel or
   a widget container.
   ============================================================ */

/* Cards sit on top of the dark body background.
   The slightly lighter navy (#16213e) creates visual depth. */
.card {
    background: #16213e;
    border: 2px solid #0f3460;   /* subtle border in a medium navy */
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* A utility class for any row of items that should sit
   side by side, wrapping onto the next line if needed.
   Used in teacher.php for button rows. */
.row-flex {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;    /* wraps to next line on small screens */
    margin-top: 0.75rem;
}


/* ============================================================
   4. FORM ELEMENTS
   
   Inputs, selects, and textareas all get the same dark
   background treatment so they look consistent everywhere.
   ============================================================ */

/* Group selector — applies the same base style to all
   interactive form elements at once */
input[type=text],
input[type=number],
input[type=password],
input[type=url],
select,
textarea {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 2px solid #0f3460;
    background: #0f3460;   /* dark blue — matches the card border color */
    color: #fff;
    font-size: 0.95rem;
    outline: none;         /* removes the default browser focus ring */
}

/* When the user clicks into a field, highlight it in red/pink
   so they know which field is active */
input:focus,
select:focus,
textarea:focus {
    border-color: #e94560;
}

/* Image URL input sits on its own full-width line, like the textarea above it */
input[type=url] {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Number inputs (used for wagers and point values) get gold
   text to visually connect them to the points/currency theme */
input[type=number] {
    color: #ffd700;
}

input[type=number]:focus {
    border-color: #ffd700;   /* gold focus ring for number fields */
}

/* Textareas need a few extra properties beyond the shared style above */
textarea {
    width: 100%;
    resize: vertical;      /* user can resize taller/shorter but not wider */
    min-height: 60px;
    margin-bottom: 0.5rem;
}


/* ============================================================
   5. BUTTONS
   
   The base button style is shared. Color variants (red, green,
   yellow, gray) and sizes (small) are separate classes that
   get combined with the base, e.g.:
     <button class="btn-red btn-small">Remove</button>
   ============================================================ */

button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Darken slightly on hover — works for all button colors
   because opacity affects whatever color is underneath */
button:hover {
    opacity: 0.85;
}

/* Grayed out and non-clickable — used when question is closed */
button:disabled {
    background: #555;
    cursor: default;
    opacity: 1;   /* override the hover rule so disabled looks intentional */
}

/* ── Button color variants ──────────────────────────────────── */

/* Primary action — submit, open question */
.btn-red {
    background: #e94560;
    color: #fff;
}

/* Positive / correct action */
.btn-green {
    background: #22863a;
    color: #fff;
}

/* Warning / close action */
.btn-yellow {
    background: #b8860b;
    color: #fff;
}

/* Neutral / secondary action */
.btn-gray {
    background: #444;
    color: #fff;
}

/* Compact button for use inside table rows */
.btn-small {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}


/* ============================================================
   6. MESSAGES / ALERTS
   
   Flash messages that appear after actions (submitting an
   answer, awarding points, errors, etc.)
   Both pages use the exact same .msg pattern:
     <div class="msg success">...</div>
     <div class="msg error">...</div>
   ============================================================ */

.msg {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: bold;
}

/* Green tinted background with bright green text */
.msg.success {
    background: #1a4731;
    color: #4ade80;
}

/* Red tinted background with bright red text */
.msg.error {
    background: #4a1a1a;
    color: #f87171;
}


/* ============================================================
   7. TABLES
   
   Used in both play.php (scoreboard) and teacher.php
   (submitted answers, teams list). Shared base styles here,
   teacher-specific overrides in teacher.css.
   ============================================================ */

table {
    width: 100%;
    border-collapse: collapse;  /* removes default spacing between cells */
    font-size: 0.9rem;
}

th,
td {
    padding: 0.5rem 0.75rem;
    text-align: left;
}

/* Column headers are muted and small — they label, not dominate */
th {
    color: #aaa;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Subtle divider between rows — only between rows, not after the last one */
tr:not(:last-child) td {
    border-bottom: 1px solid #0f3460;
}


/* ============================================================
   8. INDEX PAGE (index.php)
   
   The join / team registration screen.
   Centers a single card in the middle of the screen.
   ============================================================ */

/* The join page uses flexbox on the body to center the card
   both vertically and horizontally */
body.page-index {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* The join card is narrower and centered — different from
   the standard .card which is full-width */
body.page-index .card {
    max-width: 420px;
    text-align: center;
    padding: 2.5rem;
}

body.page-index h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Full-width text input for the team name field */
body.page-index input[type=text] {
    width: 100%;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* Full-width submit button on the join page */
body.page-index button {
    width: 100%;
    font-size: 1.1rem;
    background: #e94560;
    color: #fff;
    transition: background 0.2s;
}

body.page-index button:hover {
    background: #c73652;
    opacity: 1;   /* override the global opacity hover so transition works cleanly */
}

/* Error text shown when a name is invalid */
.error {
    color: #e94560;
    margin-bottom: 1rem;
    font-weight: bold;
}

/* Link to the scoreboard shown at the bottom of the join page */
.scoreboard-link {
    margin-top: 1.5rem;
}

.scoreboard-link a {
    color: #aaa;
    font-size: 0.9rem;
}


/* ============================================================
   9. PLAY PAGE (play.php)
   
   The student game view. Constrained width, left-aligned,
   with a header bar showing team name and points.
   ============================================================ */

body.page-play {
    padding: 1.5rem;
    max-width: 900px;
    margin: 0 auto;   /* centers the constrained content */
}

/* Header bar at the top — team name on left, points on right */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #0f3460;
}

header h1 {
    font-size: 1.3rem;
    color: #e94560;
    margin-bottom: 0;   /* override the global h1 margin inside the header */
}

/* The points counter — big and gold to feel like currency */
#points-display {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffd700;
}

/* The question text shown to students */
#question-text {
    font-size: 1.3rem;
    color: #fff;
    min-height: 2rem;   /* prevents layout jump when question appears */
}

/* The optional image attached to a question */
#question-image {
    display: block;
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
    border-radius: 8px;
    margin-top: 0.75rem;
}

/* Placeholder text shown when no question is open */
.waiting {
    color: #aaa;
    font-style: italic;
}

/* Wager input section — hidden by default, shown via JS
   when the teacher opens a wager-mode question */
#wager-section {
    display: none;
}

/* Label above the wager input — gold to match the points theme */
#wager-label {
    color: #ffd700;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9rem;
}

/* The answer textarea needs full width on the play page */
body.page-play textarea {
    min-height: 80px;
    margin-bottom: 1rem;
}

/* Main submit button — full width on play page */
body.page-play button[type=submit] {
    width: 100%;
    padding: 0.75rem;
    background: #e94560;
    color: #fff;
    font-size: 1rem;
}

body.page-play button[type=submit]:hover {
    background: #c73652;
    opacity: 1;
}

/* Rank column in the scoreboard table */
.rank {
    color: #aaa;
}

/* Highlight the current team's row in the scoreboard */
.you {
    color: #e94560;
    font-weight: bold;
}

/* Leave / change team link at the bottom */
a.logout {
    color: #aaa;
    font-size: 0.85rem;
    text-decoration: none;
}

a.logout:hover {
    color: #e94560;
}


/* ============================================================
   10. SHARED UTILITIES
   ============================================================ */

/* Centered paragraph used for bottom-of-page nav links */
.back-link-row {
    text-align: center;
    margin-top: 1rem;
}

/* "pts" suffix label in scoreboard rows */
.pts-label {
    font-size: 1rem;
    color: #aaa;
}

/* Role labels in the About page how-to section */
.role-teacher { color: #e94560; }
.role-student  { color: #ffd700; }

/* Section heading labels in the About credits card */
.credit-label { color: #fff; }


/* ============================================================
   11. ABOUT PAGE (about.php)
   ============================================================ */

body.page-about {
    padding: 2rem 1.5rem;
    max-width: 700px;
    margin: 0 auto;
}


body.page-about p {
    margin-bottom: 1rem;
}

body.page-about p:last-child {
    margin-bottom: 0;
}

.stats-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stat-box {
    flex: 1;
    min-width: 120px;
    background: #0f3460;
    border-radius: 10px;
    padding: 1.25rem 1rem;
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #ffd700;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
}

.about-link {
    color: #e94560;
    text-decoration: none;
}

.about-link:hover {
    text-decoration: underline;
}


/* ============================================================
   11. SCOREBOARD PAGE (scoreboard.php)
   
   The projector view. Large text, centered, designed to
   be readable from across the classroom.
   ============================================================ */

body.page-scoreboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
}

/* Giant title at the top */
body.page-scoreboard h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* The current question shown above the scores */
#question-banner {
    font-size: 1.4rem;
    color: #ffd700;
    text-align: center;
    min-height: 2rem;
    margin-bottom: 2rem;
}

/* Pulsing red badge shown when a question is open */
#open-badge {
    display: none;   /* shown via JS when question_open is true */
    background: #e94560;
    color: #fff;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    animation: pulse 1.2s infinite;
}

/* The pulse animation fades in and out to draw attention */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* Container for all the team rows */
#scoreboard {
    width: 100%;
    max-width: 700px;
}

/* Each team's row in the scoreboard */
.team-row {
    display: flex;
    align-items: center;
    background: #16213e;
    border: 2px solid #0f3460;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    transition: all 0.4s ease;   /* smooth reordering when points change */
}

/* Rank number / medal emoji on the left */
.rank-label {
    font-size: 1.8rem;
    font-weight: bold;
    color: #aaa;
    width: 2.5rem;
    text-align: center;
    flex-shrink: 0;   /* never squish the rank column */
}

/* Gold / silver / bronze colors for top 3 */
.rank-1 { color: #ffd700; }
.rank-2 { color: #c0c0c0; }
.rank-3 { color: #cd7f32; }

/* Team name takes up the remaining space in the row */
.team-name {
    flex: 1;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 0 1rem;
}

/* Points displayed large and gold on the right */
.team-points {
    font-size: 2rem;
    font-weight: bold;
    color: #ffd700;
    min-width: 90px;
    text-align: right;
}