/*
 * C.A.T.S. styles.
 *
 * Palette is limited to blues and yellows on purpose: dogs are dichromats and
 * those are the hues they can tell apart. Reds and greens would be lost on
 * the target audience.
 */

:root {
    --sky: #e3eafb;      /* page */
    --paper: #ffffff;    /* human panel */
    --ink: #131c4a;      /* text, dog panel */
    --blue: #3557e0;     /* focus, links, selected */
    --ball: #d9ea3c;     /* tennis ball: the one loud thing */
    --ball-shade: #b9cc1e;
    --mute: #55608f;     /* secondary text on light */
    --mute-dark: #b4bfef;/* secondary text on ink */

    --round: 28px;
    --font: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--sky);
    color: var(--ink);
    font-family: var(--font);
    font-size: 18px;
    line-height: 1.5;
}

.kennel {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px) 40px;
}

/* ---- masthead ---- */

.masthead { margin-bottom: clamp(24px, 4vw, 48px); }

.title {
    margin: 0;
    font-size: clamp(64px, 14vw, 168px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.02em;
}

.subtitle {
    margin: 12px 0 0;
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 500;
    color: var(--mute);
}

/* ---- the bench: human | ball | dog ---- */

.bench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
}

.panel {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    padding: 28px;
    border-radius: var(--round);
}

.panel-name {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.panel--human {
    background: var(--paper);
    border: 3px solid var(--ink);
}

.panel--dog {
    position: relative;
    background: var(--ink);
    color: #fff;
    border: 3px solid var(--ink);
}

/* Speech-bubble tail pointing back at the ball. */
.panel--dog::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border: 22px solid transparent;
    border-left-width: 0;
    border-right-color: var(--ink);
}

textarea {
    flex: 1;
    width: 100%;
    min-height: 180px;
    padding: 0;
    border: 0;
    resize: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 22px;
    line-height: 1.45;
}

textarea::placeholder { color: var(--mute); opacity: 0.75; }
textarea:focus { outline: none; }
.panel--human:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue); }

/* ---- dialect picker ---- */

.dialects {
    margin: 20px 0 0;
    padding: 16px 0 0;
    border: 0;
    border-top: 2px dashed #c3cdf0;
}

.dialects legend {
    float: left;          /* keeps the legend inside the padded box */
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
    font-size: 16px;
    color: var(--mute);
}

.dialect-options { display: flex; flex-wrap: wrap; gap: 8px; clear: both; }

.dialect-options input { position: absolute; opacity: 0; pointer-events: none; }

.dialect-options label {
    display: inline-block;
    padding: 6px 16px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.dialect-options label:hover { background: var(--sky); }
.dialect-options input:checked + label { background: var(--ink); color: #fff; }
.dialect-options input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---- the ball ---- */

.ball {
    position: relative;
    z-index: 1;
    align-self: center;
    width: 128px;
    height: 128px;
    margin: 0 20px;
    padding: 0;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background-color: var(--ball);
    /* Two seams, drawn as an inline SVG so the ball needs no image file. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M12 8c22 20 22 64 0 84M88 8c-22 20-22 64 0 84' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    box-shadow: 0 8px 0 var(--ink);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ball:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--ink); }
.ball:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
.ball:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }

.ball.is-thrown { animation: bounce 0.6s cubic-bezier(.3, .6, .4, 1); }

@keyframes bounce {
    0%   { transform: translateY(0) rotate(0deg); }
    30%  { transform: translateY(-46px) rotate(140deg); }
    55%  { transform: translateY(0) rotate(250deg); }
    75%  { transform: translateY(-14px) rotate(320deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

/* ---- output ---- */

.output {
    flex: 1;
    margin: 0;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ball);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.output:empty { display: none; }

.output .punct { color: #fff; }

.output-empty { flex: 1; margin: 0; font-size: 20px; color: var(--mute-dark); max-width: 22ch; }
.output-empty[hidden] { display: none; }

.output-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.tool {
    padding: 6px 16px;
    border: 2px solid var(--mute-dark);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.tool:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--ink); }
.tool:focus-visible { outline: 3px solid var(--ball); outline-offset: 2px; }
.tool:disabled { opacity: 0.35; cursor: default; }

/* ---- footer ---- */

.smallprint {
    margin-top: clamp(32px, 5vw, 56px);
    max-width: 68ch;
    font-size: 15px;
    color: var(--mute);
}

.smallprint p { margin: 0 0 6px; }
.smallprint a { color: var(--blue); font-weight: 500; }
.smallprint a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- narrow screens: stack, ball sits between the panels ---- */

@media (max-width: 820px) {
    .bench { grid-template-columns: minmax(0, 1fr); }
    .panel { min-height: 0; padding: 22px; }
    .panel--dog { min-height: 240px; }
    textarea { min-height: 140px; font-size: 20px; }
    .ball { justify-self: center; width: 108px; height: 108px; margin: -18px 0 4px; }
    .panel--dog::before {
        left: 50%; top: -22px;
        transform: translateX(-50%);
        border: 22px solid transparent;
        border-top-width: 0;
        border-bottom-color: var(--ink);
    }
    .panel--dog { margin-top: 18px; }
    .output { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .ball, .ball.is-thrown { animation: none; transition: none; }
}