/* ───── Tokens ───── */
:root {
    /* backgrounds */
    --bg: #fffaf3;
    /* warm cream          */
    --bg-dark: #000000;
    /* pure black          */

    /* foreground / text */
    --fg: #1c1b19;
    /* charcoal            */
    --fg-dark: #e9ffef;
    /* pale mint for dark  */

    /* primary accents */
    --accent: #ff7a00;
    /* vivid orange        */
    --accent-dark: #a2ff29;
    /* fluorescent green   */

    /* frosted-glass surface */
    --glass: rgba(255, 255, 255, 0.24);
    --glass-dark: rgba(255, 255, 255, 0.08);
}

/* ───── Reset ───── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth
}

html {
    font-family: 'JetBrains Mono', monospace
}

body {
    background: var(--bg);
    color: var(--fg);
    transition: background .35s, color .35s;
}

body.dark {
    background: var(--bg-dark);
    color: var(--fg-dark);
}

/* ───── Navbar ───── */
.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: 56px;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.3rem;
    background: var(--glass);
    backdrop-filter: blur(12px);
}

body.dark .navbar {
    background: var(--glass-dark)
}

.brand {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--accent)
}

body.dark .brand {
    color: var(--accent-dark)
}

.navbar ul {
    display: flex;
    gap: 1rem;
    list-style: none
}

.navbar a {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    position: relative
}

.navbar a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: .3s
}

body.dark .navbar a::after {
    background: var(--accent-dark)
}

.navbar a:hover::after,
.navbar a.active::after {
    width: 100%
}

/* theme switch */
.toggle {
    cursor: pointer
}

.toggle input {
    display: none
}

.thumb {
    width: 48px;
    height: 24px;
    padding: 3px;
    border-radius: 24px;
    background: var(--glass);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    transition: .35s;
}

body.dark .thumb {
    background: var(--glass-dark)
}

.sun,
.moon {
    font-size: .9rem;
    position: absolute;
    transition: .35s
}

.sun {
    left: 6px;
    color: #645001
}

.moon {
    right: 6px;
    color: #9effd3;
    opacity: 0
}

input:checked+.thumb {
    justify-content: flex-end
}

input:checked+.thumb .sun {
    opacity: 0
}

input:checked+.thumb .moon {
    opacity: 1
}

/* ───── Hero ───── */
.hero {
    min-height: 100vh;
    padding-top: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #fff1d6 0%, #ffd8a8 50%, #ffcaa0 100%);
}

body.dark .hero {
    background: linear-gradient(135deg, #001400 0%, #001d0d 100%);
}

.hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.1rem);
    font-weight: 600
}

.hero span {
    color: var(--accent)
}

body.dark .hero span {
    color: var(--accent-dark)
}

.tagline {
    font-size: 1.15rem;
    font-weight: 600;
    height: 26px;
    margin: .8rem 0;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.tagline::after {
    content: '|';
    position: absolute;
    right: -.25em;
    animation: blink 1s steps(1) infinite;
    opacity: .6
}

@keyframes blink {
    50% {
        opacity: 0
    }
}

/* call-to-action */
.cta {
    margin-top: 1.3rem;
    padding: .55rem 1.25rem;
    border: none;
    border-radius: 9999px;
    background: var(--accent);
    color: #000;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    box-shadow: 0 0 8px #0001;
    transition: transform .25s, box-shadow .25s;
}

body.dark .cta {
    background: var(--accent-dark);
    color: #000
}

.cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #0002
}

/* ───── Molebox ───── */
.molebox {
    margin: 1.7rem 0;
    padding: 1.3rem;
    border-radius: 14px;
    width: 300px;
    background: var(--glass);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 16px #0002;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.dark .molebox {
    background: var(--glass-dark);
    box-shadow: 0 6px 20px #0006
}

.toprow,
.midrow,
.botrow {
    display: flex;
    gap: .8rem;
    margin: .22rem 0
}

.hole {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #00000018;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .25s;
}

.hole:hover {
    background: #00000028
}

.dog {
    position: absolute;
    left: 50%;
    bottom: -10%;
    transform: translateX(-50%);
    width: 68px;
    height: 68px;
    pointer-events: none;
    transition: bottom .18s ease
}

.up {
    bottom: 12%
}

@keyframes whack {
    50% {
        transform: translateX(-50%) scale(.85)
    }
}

.hole.hit .dog {
    animation: whack .25s ease
}

.meters {
    font-weight: 600;
    margin: .8rem 0;
    text-align: center
}

/* overlay */
.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000b;
    z-index: 99
}

.overlay.hide {
    display: none !important
}

.zoomdog {
    width: 120px;
    height: 120px;
    animation: zoomout 1.6s forwards
}

@keyframes zoomout {
    to {
        transform: scale(9);
        opacity: 0
    }
}

/* ───── Blocks ───── */
.block {
    padding: 4.5rem 2rem 4rem
}

.glass {
    background: var(--glass);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 4px 16px #0002
}

body.dark .glass {
    background: var(--glass-dark);
    box-shadow: 0 4px 18px #0006
}

.centre {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.block h2 {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
    color: var(--accent)
}

body.dark .block h2 {
    color: var(--accent-dark)
}

/* skills */
.skill-table {
    display: grid;
    gap: 1.2rem;
    max-width: 1200px;
    width: 100%;
    padding: 1rem;
}

.row {
    display: grid;
    grid-template-columns: 130px 1fr 50px;
    gap: 0.8rem;
    align-items: center;
    background: var(--glass);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    box-shadow: 0 2px 6px #0002;
}

body.dark .row {
    background: var(--glass-dark);
}

.bar {
    position: relative;
    height: 16px;
    background: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
}

body.dark .bar {
    background: #374151;
}

.fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 9999px;
    position: relative;
    overflow: hidden;
    transition: width 0.4s ease;
}

body.dark .fill {
    background: var(--accent-dark);
}

/* Add animated stripes effect */
.fill::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent);
    background-size: 24px 24px;
    animation: move-stripes 1s linear infinite;
}

@keyframes move-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 24px 0;
    }
}

.num {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* project cards */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    justify-content: center;
    max-width: 900px
}

.proj {
    flex: 1 1 260px;
    max-width: 300px;
    padding: 1.3rem;
    border-radius: 14px;
    background: var(--glass);
    backdrop-filter: blur(12px);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px #0002;
    transition: transform .25s, box-shadow .25s;
}

body.dark .proj {
    background: var(--glass-dark)
}

.proj:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 18px #0003
}

.proj h3 {
    color: var(--accent)
}

body.dark .proj h3 {
    color: var(--accent-dark)
}

/* timeline */
.timeline {
    list-style: none;
    max-width: 850px;
    margin-inline: auto;
    /* no extra left padding now */
    padding-left: 0;
}

.timeline li {
    position: relative;
    /* leave space for the dot */
    padding-left: 1.4rem;
    margin-bottom: 1.5rem;
}

.timeline li::before {
    content: '';
    position: absolute;
    left: 0;
    /* dot sits at the outer edge */
    top: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
}

body.dark .timeline li::before {
    background: var(--accent-dark);
}

/* contacts & footer */
.contact-wrap {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center
}

.contact-wrap a {
    text-decoration: none;
    color: inherit
}

.contact-wrap a:hover {
    color: var(--accent)
}

body.dark .contact-wrap a:hover {
    color: var(--accent-dark)
}

footer {
    text-align: center;
    padding: 1.2rem;
    font-size: .85rem;
    opacity: .7
}

/* ─── Game buttons ─── */
#startBtn,
#restartBtn {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.55rem 1.6rem;
    border: 2px solid transparent;
    border-radius: 9999px;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.15s;
    box-shadow: 0 2px 6px #0002;
}

/* “Play” – solid accent */
#startBtn {
    background: var(--accent);
    color: #000;
}

body.dark #startBtn {
    background: var(--accent-dark);
    color: #000;
}

/* “Play again” – outlined */
#restartBtn {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

body.dark #restartBtn {
    color: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* Small lift on hover */
#startBtn:hover,
#restartBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #0003;
}

/* Tap/active */
#startBtn:active,
#restartBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px #0002 inset;
}

/* responsive */
@media(max-width:750px) {
    .navbar ul {
        display: none
    }

    .block {
        padding-top: 5rem
    }
}