/* Theme variables — dark is the default, light overrides via [data-theme="light"] */
:root {
    --bg: #151515;
    --chrome: #1c1c1c;
    --card: #1a1a1a;
    --text: #e8e8e6;
    --muted: #8a8a86;
    --border: #2e2e2c;
    --desk: #0d0d0d;

    /* accent text palette — the pastel colours the terminal text can take.
       amber/green are produced by the yellow/green traffic-light dots (whose
       bright mac backgrounds stay untouched); orange/blue/violet are the right
       swatches, where the swatch background matches its accent directly. */
    --accent-amber: #e8a33d;
    --accent-green: #4fb286;
    --accent-violet: #b18cf5;
    --accent-orange: #e0895c;
    --accent-blue: #63a0da;

    /* mac traffic-light dot backgrounds — the red dot also uses its own colour
       as the accent; yellow/green defer to --accent-amber/green above. */
    --dot-red: #ff5f57;
    --dot-yellow: #febc2e;
    --dot-green: #28c840;
}

:root[data-theme="light"] {
    --bg: #fbfbf9;
    --chrome: #f0efec;
    --card: #f5f4f1;
    --text: #1a1a18;
    --muted: #6b6b66;
    --border: #dcdad4;
    --desk: #e5e5e0;

    --accent-amber: #b5720f;
    --accent-green: #1c7a52;
    --accent-violet: #7c4fd1;
    --accent-orange: #b45a2c;
    --accent-blue: #2d68a8;
}

/* Active accent follows both the chosen accent and the theme */
/* right swatches — swatch background and accent text are the same colour */
:root[data-accent="orange"] {
    --accent: var(--accent-orange);
}
:root[data-accent="blue"] {
    --accent: var(--accent-blue);
}
:root[data-accent="violet"] {
    --accent: var(--accent-violet);
}
/* traffic-light dots — red keeps its own colour; yellow/green produce the
   softer amber/green from the accent palette rather than their bright dot hue */
:root[data-accent="red"] {
    --accent: var(--dot-red);
}
:root[data-accent="yellow"] {
    --accent: var(--accent-amber);
}
:root[data-accent="lime"] {
    --accent: var(--accent-green);
}

html,
body {
    margin: 0;
    padding: 0;
}

::selection {
    background: #e8a33d;
    color: #151515;
}

a {
    color: inherit;
}

.desk {
    min-height: 100vh;
    display: flex;
    background: var(--desk);
    font-family: "IBM Plex Mono", monospace;
    padding: 24px;
    box-sizing: border-box;
    transition: background 0.2s;
}

.window {
    width: 100%;
    min-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background: var(--bg);
    border: 1px solid var(--border);
}

/* Title bar */
.titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--chrome);
    border-bottom: 1px solid var(--border);
}

.traffic-lights {
    display: flex;
    gap: 8px;
}

.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    padding: 0;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.dot--red {
    background: var(--dot-red);
}
.dot--yellow {
    background: var(--dot-yellow);
}
.dot--green {
    background: var(--dot-green);
}

.titlebar-title {
    font-size: 12px;
    color: var(--muted);
    min-width: 0;
    margin: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.titlebar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.swatches {
    display: flex;
    gap: 6px;
}

.swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--border);
    padding: 0;
}

.swatch--orange {
    background: var(--accent-orange);
}
.swatch--blue {
    background: var(--accent-blue);
}
.swatch--violet {
    background: var(--accent-violet);
}

.swatch.active {
    border-color: var(--text);
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: inherit;
    font-size: 11px;
    padding: 4px 9px;
    border-radius: 4px;
    cursor: pointer;
}

/* Terminal body */
.terminal {
    flex: 1;
    padding: 48px 56px 56px;
    color: var(--text);
    position: relative;
}

.prompt {
    font-size: 14px;
    color: var(--accent);
    margin-bottom: 4px;
}

.prompt .tilde {
    color: var(--muted);
}

.terminal h1 {
    font-size: 30px;
    margin: 6px 0 4px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.intro {
    font-size: 15px;
    color: var(--muted);
    margin: 0 0 32px;
    max-width: 560px;
    line-height: 1.6;
}

/* Projects (index.html) and games (games.html) share one card grid */
.projects,
.games {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* dense packing lets later cards flow back up to fill the slot an expanded
       (full-width) card vacates, instead of leaving a hole in the grid */
    grid-auto-flow: dense;
    gap: 16px;
    margin: 12px 0 32px;
}

.card {
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px;
    background: var(--card);
    transition: border-color 0.15s, transform 0.15s;
}

/* The expanded card takes the full grid width, pushing the others aside. */
.card--expanded {
    grid-column: 1 / -1;
    border-color: var(--accent);
}

.card:hover {
    border-color: var(--accent);
}

.card:active {
    transform: scale(0.99);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.card-title {
    font-size: 15px;
    font-weight: 600;
}

.card--expanded .card-title {
    font-size: 18px;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Close ✕ — only visible on the expanded card */
.card-close {
    display: none;
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 4px;
    cursor: pointer;
}

.card--expanded .card-close {
    display: inline-block;
}

.card-close:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.badge--live {
    color: var(--accent);
    border: 1px solid var(--accent);
}

.badge--muted {
    color: var(--muted);
    border: 1px solid var(--border);
}

.card p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 14px;
}

.tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tag {
    font-size: 11px;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 2px 7px;
    border-radius: 3px;
}

@media (max-width: 730px) {
    .projects,
    .games {
        grid-template-columns: 1fr;
    }

    .desk {
        padding: 12px;
    }

    .window {
        min-height: calc(100vh - 24px);
    }

    .terminal {
        padding: 32px 24px 40px;
    }
}

@media (max-width: 420px) {
    .titlebar-title {
        display: none;
    }
}

/* Blurb that introduces a section rather than the page — the following link
   belongs with it, so it doesn't need the full 32px trailing gap. */
.intro--tight {
    margin-bottom: 10px;
}

/* Contact */
.contact {
    display: flex;
    gap: 18px;
    margin-top: 10px;
}

/* A .contact row that has another section under it rather than the page end. */
.contact--section {
    margin-bottom: 32px;
}

.contact a {
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

/* Faint background mark, bottom-right of the terminal */
.watermark {
    position: absolute;
    right: 32px;
    bottom: 32px;
    width: 240px;
    height: auto;
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
}

/* keep terminal content above the watermark */
.terminal > *:not(.watermark) {
    position: relative;
    z-index: 1;
}

/* Expanded card details ------------------------------------------------------
   Pre-rendered inside every card, revealed only when the card gets
   .card--expanded (see script.js). */
.card-details {
    display: none;
}

.card--expanded .card-details {
    display: block;
    margin-top: 18px;
}

.card-details p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 14px;
}

/* A muted aside under the details paragraphs — used on the games page to say
   why a card has no link yet ("Not on the App Store yet."). */
.card-note {
    font-style: italic;
    opacity: 0.8;
}

.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

/* Game screenshots are mostly portrait phone captures, which at the project
   grid's column width would each be ~650px tall. Cap the column instead of
   cropping, so a landscape iPad shot still renders whole. */
.games .shots {
    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    justify-content: start;
}

.shot {
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.visit {
    display: inline-block;
    margin-top: 22px;
    font-size: 13px;
    text-decoration: none;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 7px 14px;
    border-radius: 4px;
}

.visit:hover {
    background: var(--accent);
    color: var(--bg);
}

/* Tune the reflow animation. Every card has its own view-transition-name (set
   in script.js), so on expand/collapse each one animates to its new spot; this
   just sets the pace for all of them. */
::view-transition-group(*) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Respect users who ask for less motion — skip the morph entirely. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 0s !important;
    }
}