:root {
    --ink: #17233f;
    --muted: #65708a;
    --blue: #438cf2;
    --violet: #6744ee;
    --line: rgba(70, 103, 170, 0.16);
    --surface: rgba(255, 255, 255, 0.9);
    --shadow: 0 22px 54px rgba(55, 88, 157, 0.14);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: "Inter", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 4%, rgba(255,255,255,.95), transparent 25%),
        radial-gradient(circle at 88% 12%, rgba(255,241,157,.42), transparent 26%),
        linear-gradient(145deg, #eff8ff 0%, #e8f3ff 58%, #d5e7ff 100%);
}
button, input { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }

.timer-app {
    width: min(100% - 48px, 1240px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 24px 0 32px;
}
.app-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 68px;
}
.app-logo { width: 142px; display: block; }
.header-actions { justify-self: end; display: flex; gap: 10px; }
.round-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 16px;
    background: rgba(255,255,255,.75);
    box-shadow: 0 12px 28px rgba(55,88,157,.1);
    color: #1379c8;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
}
.round-button img { width: 29px; height: 29px; object-fit: contain; }
.round-button.is-muted img { filter: grayscale(1); opacity: .42; }

.screen { min-height: calc(100vh - 124px); }
.title-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin: 32px 0 18px;
}
.eyebrow {
    margin: 0 0 6px;
    color: #1674b4;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
h1, h2, strong { font-family: "Archivo", sans-serif; }
h1 { margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); }
h2 { margin: 0; }
.title-hint { margin: 0 0 6px; color: var(--muted); font-weight: 600; }

.mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.mode-card {
    min-height: 210px;
    padding: 18px 24px;
    border: 1px solid rgba(255,255,255,.95);
    border-radius: 30px;
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto;
    align-items: center;
    gap: 8px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mode-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(55,88,157,.18); }
.mode-card.is-selected { border-color: rgba(75,106,238,.64); box-shadow: 0 0 0 4px rgba(82,100,238,.1), var(--shadow); }
.mode-card img { width: 100%; max-width: 190px; height: 160px; object-fit: contain; justify-self: center; }
.mode-card strong { font-size: clamp(1.15rem, 2.1vw, 1.65rem); text-transform: uppercase; }
.mode-card--lanche { background: linear-gradient(140deg, rgba(255,252,236,.98), rgba(255,239,191,.74)); }
.mode-card--casa { background: linear-gradient(140deg, rgba(240,250,255,.98), rgba(207,239,255,.78)); }
.mode-card--livre { background: linear-gradient(140deg, rgba(244,254,250,.98), rgba(220,235,255,.82)); }

.setup-panel {
    margin-top: 18px;
    padding: 20px 22px;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 28px;
    background: rgba(255,255,255,.84);
    box-shadow: var(--shadow);
}
.setup-heading, .setup-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.text-button {
    border: 0;
    background: transparent;
    color: #5144d8;
    font-weight: 800;
    cursor: pointer;
}
.time-fields { display: flex; align-items: end; gap: 12px; margin-top: 16px; }
.time-fields > span { padding-bottom: 13px; font-size: 1.8rem; font-weight: 800; }
.time-fields label { display: grid; gap: 6px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.time-fields input {
    width: 128px;
    height: 62px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #edf4ff;
    color: var(--ink);
    text-align: center;
    font: 800 1.9rem "Archivo", sans-serif;
}
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.preset-row button {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f3f7ff;
    font-weight: 700;
    cursor: pointer;
}
.time-preview { display: grid; gap: 2px; }
.time-preview span { color: var(--muted); font-size: .75rem; font-weight: 700; }
.time-preview strong { font-size: 1.55rem; }
.primary-button, .control-button {
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 16px;
    font-weight: 800;
    cursor: pointer;
}
.primary-button { color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 14px 26px rgba(87,74,230,.22); }
.control-button { border: 1px solid var(--line); background: rgba(255,255,255,.9); color: #315f94; }
.control-button--pause { background: linear-gradient(135deg, #ffcf55, #ff985d); color: #6f3e09; }
.control-button--resume { background: linear-gradient(135deg, #42d18b, #31b970); color: #fff; }
.validation-message { min-height: 18px; margin: 8px 0 0; color: #c64343; font-size: .85rem; }

.screen--running { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; }
.running-bar, .running-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border-radius: 24px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 14px 34px rgba(55,88,157,.1);
}
.running-time { display: grid; justify-items: center; }
.running-time span, .elapsed-card span { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.running-time strong { font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1; }
.mode-badge { justify-self: end; padding: 10px 16px; border-radius: 999px; background: #eaf1ff; color: #3f55bd; font-weight: 800; }
.visual-stage {
    min-height: 420px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 36px;
    background: radial-gradient(circle at center, rgba(255,255,255,.9), rgba(255,255,255,.38) 60%, transparent 75%);
}
.journey-scene { position: relative; width: min(100%, 1020px); height: min(48vw, 500px); min-height: 390px; }
.journey-line { position: absolute; left: 8%; right: 17%; top: 64%; height: 14px; overflow: hidden; border-radius: 999px; background: rgba(117,143,193,.2); }
.journey-line span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #42bdf3, #6750ee); transition: width .35s ease; }
.student-marker { position: absolute; left: calc(0% - 45px); top: calc(64% - 115px); width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(48,74,129,.2)); transition: left .35s ease; }
.destination-marker { position: absolute; right: 2%; top: calc(64% - 165px); width: 250px; height: 250px; object-fit: contain; filter: drop-shadow(0 20px 25px rgba(48,74,129,.18)); }
.hourglass-scene { width: 100%; height: 100%; display: grid; place-items: center; }
.hourglass-canvas { width: min(28dvh, 220px); max-height: 100%; height: auto; aspect-ratio: 1 / 2; display: block; }
.running-footer { grid-template-columns: auto 1fr; }
.elapsed-card { display: grid; gap: 4px; min-width: 145px; }
.elapsed-card strong { font-size: 1.35rem; }
.controls { display: flex; justify-content: flex-end; gap: 10px; }

.screen--finish { display: grid; place-items: center; }
.finish-card { width: min(100%, 720px); padding: 42px; border-radius: 36px; background: rgba(255,255,255,.88); box-shadow: var(--shadow); text-align: center; }
.finish-card img { width: 220px; height: 220px; object-fit: contain; }
.finish-card h2 { margin: 8px 0 24px; font-size: clamp(2rem, 5vw, 3.8rem); }
.finish-actions { display: flex; justify-content: center; gap: 12px; }

body.is-fullscreen .timer-app { width: 100%; padding: 14px; }
body.is-fullscreen .app-header { display: none; }
body.is-fullscreen .screen { min-height: calc(100dvh - 28px); }
body.is-fullscreen .visual-stage { min-height: 0; }
body.is-fullscreen .journey-scene { height: min(64vh, 620px); }

@media (max-width: 820px) {
    .timer-app { width: min(100% - 24px, 680px); padding-top: 12px; }
    .mode-grid { grid-template-columns: 1fr; }
    .mode-card { min-height: 120px; grid-template-columns: 128px 1fr; }
    .mode-card img { height: 108px; }
    .setup-footer, .running-footer { align-items: stretch; }
    .running-footer { grid-template-columns: 1fr; }
    .controls { display: grid; grid-template-columns: 1fr 1fr; }
    .visual-stage { min-height: 360px; }
    .journey-scene { min-height: 330px; }
    .destination-marker { width: 160px; height: 160px; top: calc(64% - 105px); }
    .student-marker { width: 104px; height: 104px; top: calc(64% - 80px); }
}

.hourglass-running-layout,
.journey-running-layout {
    height: 100%;
    min-height: 0;
}

.hourglass-running-layout {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.journey-card-classic {
    height: 100%;
    min-height: 0;
    padding: 28px 30px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 40px;
    box-shadow: 0 24px 54px rgba(55, 88, 157, 0.16);
    overflow: hidden;
}

.journey-card-classic.is-lanche {
    background: linear-gradient(180deg, rgba(255, 246, 207, 0.96), rgba(255, 255, 255, 0.98));
}

.journey-card-classic.is-casa {
    background: linear-gradient(180deg, rgba(239, 241, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.journey-card-classic__top {
    display: grid;
    justify-items: start;
}

.mini-label {
    color: #5f7196;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.journey-countdown {
    display: block;
    margin-top: 8px;
    font-size: clamp(3.4rem, 6vw, 5.2rem);
    line-height: .9;
}

.journey-card-classic .journey-scene {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 8px;
    overflow: hidden;
}

.journey-track {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;
}

.journey-path {
    position: absolute;
    left: 46px;
    right: 170px;
    top: 54%;
    height: 12px;
    border-radius: 999px;
    background: rgba(181, 194, 218, 0.44);
}

.journey-path--progress {
    width: 0;
    right: auto;
    background: linear-gradient(90deg, #5d57eb, #4d89f6);
    box-shadow: 0 0 16px rgba(77, 137, 246, 0.26);
    transition: width 360ms ease;
}

.journey-milestones {
    position: absolute;
    left: 46px;
    right: 170px;
    top: calc(54% - 22px);
    display: grid;
}

.journey-milestones span {
    justify-self: center;
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: rgba(240, 109, 109, 0.22);
    box-shadow: 0 6px 12px rgba(82, 109, 176, 0.12);
    transition: transform .2s ease, background .2s ease;
}

.journey-milestones span.is-active {
    background: var(--milestone-color, #f0575f);
    transform: scale(1.18);
}

.journey-card-classic .student-marker {
    position: absolute;
    top: calc(54% - 116px);
    left: 22px;
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(70, 95, 145, 0.22));
    transition: left 600ms ease;
    animation: float-soft 2.1s ease-in-out infinite;
}

.journey-card-classic .destination-marker {
    position: absolute;
    right: 0;
    top: calc(54% - 150px);
    width: 190px;
    height: 190px;
    display: grid;
    place-items: center;
}

.journey-card-classic .destination-marker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px rgba(70, 95, 145, 0.2));
    animation: pulse-soft 2.6s ease-in-out infinite;
}

.journey-elapsed-card {
    width: fit-content;
    min-width: 178px;
    padding: 16px 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(237, 244, 255, 0.94);
}

.journey-elapsed-card strong {
    display: block;
    margin-top: 6px;
    font-size: 1.7rem;
}

.control-button--reset {
    color: #fff;
    background: linear-gradient(135deg, #7a8598, #5f6878);
}

.control-button--back {
    color: #fff;
    background: linear-gradient(135deg, #8d88f9, #5d57eb);
}

.control-button:disabled {
    opacity: .42;
    cursor: default;
}

@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

body[data-screen="timer"] .screen--running {
    grid-template-rows: minmax(0, 1fr) auto;
}

body[data-running-mode="journey"] .timer-app {
    width: min(100% - 48px, 1420px);
    grid-template-rows: 0 minmax(0, 1fr);
}

body[data-running-mode="journey"] .app-header > .round-button,
body[data-running-mode="journey"] .app-logo {
    display: none;
}

body[data-running-mode="journey"] .header-actions {
    position: fixed;
    z-index: 10;
    top: 18px;
    right: max(18px, calc((100vw - 1420px) / 2));
}

body[data-running-mode="journey"] .running-footer {
    display: flex;
    justify-content: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

body[data-running-mode="journey"] .running-footer .elapsed-card {
    display: none;
}

body[data-running-mode="journey"] .controls {
    justify-content: center;
}

body[data-running-mode="journey"] .control-button {
    min-width: 180px;
    color: #fff;
    border: 0;
    box-shadow: 0 14px 26px rgba(55, 88, 157, .16);
}

@media (max-width: 820px) {
    .journey-card-classic {
        padding: 20px;
        border-radius: 30px;
    }

    .journey-countdown { font-size: 2.8rem; }
    .journey-path, .journey-milestones { left: 20px; right: 130px; }
    .journey-card-classic .student-marker { width: 90px; height: 90px; top: calc(54% - 86px); }
    .journey-card-classic .destination-marker { width: 130px; height: 130px; top: calc(54% - 105px); }
    body[data-running-mode="journey"] .control-button { min-width: 0; }
}

@media (max-width: 520px) {
    .app-header { grid-template-columns: 48px 1fr auto; }
    .app-logo { width: 110px; justify-self: center; }
    .header-actions .round-button:last-child { display: none; }
    .title-row { margin-top: 20px; }
    .title-hint { display: none; }
    .mode-card { min-height: 106px; border-radius: 24px; padding: 10px 18px; grid-template-columns: 104px 1fr; }
    .mode-card img { height: 92px; }
    .setup-heading, .setup-footer { align-items: flex-start; }
    .setup-footer { display: grid; grid-template-columns: 1fr auto; }
    .time-fields input { width: 102px; }
    .running-bar { grid-template-columns: 48px 1fr; }
    .mode-badge { display: none; }
    .running-time strong { font-size: 2rem; }
    .visual-stage { min-height: 330px; }
    .hourglass-canvas { width: min(22dvh, 180px); }
    .controls { gap: 8px; }
    .control-button { min-height: 44px; padding: 0 10px; }
    .finish-card { padding: 28px 18px; }
    .finish-actions { display: grid; }
}

body[data-screen="timer"] {
    height: 100dvh;
    overflow: hidden;
}

body[data-screen="timer"] .timer-app {
    height: 100dvh;
    min-height: 0;
    padding: 10px 0;
    display: grid;
    grid-template-rows: 56px minmax(0, 1fr);
    gap: 8px;
}

body[data-screen="timer"] .app-header {
    min-height: 56px;
}

body[data-screen="timer"] .screen--running {
    height: 100%;
    min-height: 0;
    gap: 10px;
    overflow: hidden;
}

body[data-screen="timer"] .running-bar,
body[data-screen="timer"] .running-footer {
    padding: 8px 14px;
}

body[data-screen="timer"] .visual-stage {
    min-height: 0;
}

body[data-screen="timer"] .control-button {
    min-height: 42px;
}

body.is-fullscreen[data-screen="timer"] .timer-app {
    width: 100%;
    height: 100dvh;
    padding: clamp(8px, 1.4vh, 16px);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
}

.timer-app:fullscreen {
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.94), rgba(233, 243, 255, 0.78) 54%, rgba(207, 226, 255, 0.92) 100%);
}

body.is-fullscreen[data-screen="timer"] .screen--running,
.screen--running:fullscreen {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: clamp(8px, 1.4vh, 16px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(8px, 1.2vh, 14px);
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.94), rgba(233, 243, 255, 0.78) 54%, rgba(207, 226, 255, 0.92) 100%);
}

body.is-fullscreen[data-screen="timer"] .screen--running:not(:fullscreen) {
    height: 100%;
    padding: 0;
}

body.is-fullscreen[data-running-mode="hourglass"] .hourglass-running-layout,
.screen--running:fullscreen .hourglass-running-layout {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(8px, 1.2vh, 14px);
}

body.is-fullscreen[data-running-mode="hourglass"] .visual-stage,
.screen--running:fullscreen .visual-stage {
    min-height: 0;
    border-radius: clamp(22px, 3vh, 36px);
}

body.is-fullscreen[data-running-mode="hourglass"] .hourglass-canvas,
.screen--running:fullscreen .hourglass-canvas {
    width: auto;
    height: min(68dvh, 680px);
    max-width: 82vw;
    max-height: 100%;
}

body.is-fullscreen[data-running-mode="hourglass"] .running-bar,
body.is-fullscreen[data-running-mode="hourglass"] .running-footer,
.screen--running:fullscreen .running-bar,
.screen--running:fullscreen .running-footer {
    padding: clamp(8px, 1.1vh, 12px) clamp(12px, 2vw, 18px);
}

@media (max-width: 820px) {
    body[data-screen="timer"] .timer-app {
        width: min(100% - 24px, 680px);
    }

    body[data-screen="timer"] .visual-stage {
        min-height: 0;
    }
}

@media (max-width: 520px) {
    body.is-fullscreen[data-running-mode="hourglass"] .screen--running,
    .screen--running:fullscreen {
        gap: 8px;
        padding: 8px;
    }

    body.is-fullscreen[data-running-mode="hourglass"] .hourglass-canvas,
    .screen--running:fullscreen .hourglass-canvas {
        height: min(58dvh, 480px);
        max-width: 76vw;
    }
}