:root {
    --button-active: #EBEBEB;

    --button-height: calc(2*var(--line-height));

    --keyboard-button-height: 60px;

    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --ink-hsl: 0, 0%, 0%;
    --ink: hsla(var(--ink-hsl), 1.0);
    --control: white;
    --line-height-ratio: 1.4;
    --line-height: calc(var(--line-height-ratio) * 1rem);
    --top-height: calc(var(--sat) + var(--button-height));
    --bg: white;

    --keyboard-gap: 0.75rem;
    --keyboard-height: calc( 3*var(--keyboard-button-height) + 2*var(--keyboard-gap) + max(1rem, var(--sab)) ); /* soft keyboard height */
}


@media (prefers-color-scheme: dark) {
    :root {
        --ink-hsl: 0, 0%, 100%;
        --control: hsla(var(--ink-hsl), 0.25);
        --bg: hsla(0, 0%, 12%, 1.0);
    }
}

/* begin resets */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img, video, svg, canvas {
  display: block;
  max-width: 100%;
}


input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* end resets */

html {
    -webkit-text-size-adjust: 100%;
    min-height: 100%;

    /* prevent page bounce */
    overscroll-behavior-y: none;
}

body {
    -webkit-font-smoothing: antialiased;

/*    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;*/

    /* this is the default */
    /*font-size: 1rem;*/
    font-family: sans-serif;
    color: var(--ink);

    line-height: var(--line-height-ratio);

    background-color: var(--bg);
}

@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-display: block;
    src: url(MaterialSymbolsRounded-FILL,GRAD,opsz,wght.woff2) format('woff2');
}


/* material symbols outlined */
.ms {
    font-family: 'Material Symbols Rounded';
    font-weight: 300;
    font-style: normal;
    font-size: 24px;  
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

h1 {
    font-weight: 400;
    font-size: 1.5rem;
}

input {
    color: var(--ink);
    background-color: var(--control);
    border: 1px solid hsla(var(--ink-hsl), 0.12);
}

p {
    margin-block-start: var(--line-height);
    margin-block-end: var(--line-height);
}

button {
    height: var(--button-height);
    min-width: var(--button-height);

    border: 1px solid hsla(var(--ink-hsl), 0.12);
    border-radius: calc(var(--button-height) / 5);
    background-color: var(--control);
    color: var(--ink);
    -webkit-user-select: none; /* For Safari/Chrome on iOS */
    user-select: none;

    /* disable tap-flash on mobile safari for a more native feel */
    -webkit-tap-highlight-color: transparent;
}

button:active {
    background-color: var(--button-active);
}

button.inline {
    display: inline;
    height: auto;
    min-width: 0;
    padding: 0 0.25rem;
}


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

.flex {
    flex:1;
}

header {
    min-height: var(--top-height);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;

    display: flex;
    align-items: center; 
    gap: 1rem;

    padding-top: var(--sat);
    background-color: var(--bg);
}

header .menubutton {
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

main {
    padding: var(--top-height) 1rem 1rem 1rem;
}

header .stats {
    text-align: right;
    margin: 0 0.5rem;
}

main.log pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere; /* optional: break very long tokens */
    text-indent: 4ch hanging each-line;
    font-size: 9px;
}

main.card {
    display: flex;
    flex-direction: column;
    max-width: 430px;
    width: 100%;
    margin: 0 auto;

    padding-bottom: var(--keyboard-height);
}

main.card .prompt {
    margin-top: var(--line-height);
    font-size: 1.25rem;
    line-height: calc(1.5*var(--line-height));
    text-align: center;
    text-wrap: pretty; /* prevents orphans somewhat */
}

main.card button.play-button {
    border-radius: 50%;
    width: var(--button-height);
    font-size: 2rem;
    font-variation-settings: 'FILL' 1;
}

main.card .keyboard button {
    height: var(--keyboard-button-height);
    min-width: 0;
}

main.card .keyboard {
    position: fixed;
    z-index: 30;
    bottom: 0;
    left: 0;
    right: 0;   

    display: grid;
    grid-template-columns: repeat(4, var(--keyboard-button-height));
    gap: var(--keyboard-gap);
    margin-bottom: max(1rem, var(--sab));
    justify-content: center;

    /* I don't think this is necessary? */
    /*transform: translateZ(0);*/
}

main.card .keyboard button.wide {
    grid-column: span 2;
}

main.card .keyboard button.autoplay {
    grid-column: span 4;
    justify-self: center;
    width: var(--keyboard-button-height);
}


@keyframes splash_subtle_zoom {
  0% {
    transform: scale(1);
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}


main.card .splash-clip {
    position: fixed;
    top: 0;
    left: 50%;
    bottom: calc(var(--keyboard-height) + 1rem);
    width: min(100%, 430px);
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

main.card .splash {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the photo fills the clip area without distortion */
    
    transform-origin: 50% 0%;
    animation: splash_subtle_zoom 5s ease-in-out forwards;
}



/* try mitigating the annoying double tap to zoom bug on mobile safari */
/* if this doesn't work then try making the custom soft-keyboard persistent */
html,
body,
main,
button,
.keyboard {
    touch-action: manipulation;
}

main.menu button {
    border-radius: calc(var(--button-height) / 2);
}

main.menu .setting {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding-left: 1rem;

    height: var(--button-height);
}

main.menu input.num {
    width: 5em;
    text-align: right;
}

main.menu .icon {
    margin-right: 0.5rem;
}

main.menu .qcount {
    text-align: right;
    margin-right: 0.5rem;
    width: 5ex;
}

main.menu .display-none {
    display: none;
}

main.scheduled table {
    border-spacing: 0.5rem 0.25rem;
}

main.scheduled .unit {
    font-family: monospace;
}

main.login form {
    display: flex;
    flex-direction: column;
    max-width: 430px;
    width: 100%;
    margin: 0 auto;
    gap: var(--line-height);
}

main.login input {
    width: 100%;
    height: 3rem;
    padding: 0 0.75rem;
}

main.login button {
    width: 100%;
}

/* hearts */

.heart {
    position: absolute;
    font-size: 24px;
    pointer-events: none;
    animation: float-up var(--duration) ease-out forwards;
    opacity: 0;
    z-index: 10;
}
@keyframes float-up {
    0% {
        opacity: 0.9;
        transform: translateY(0) translateX(0) scale(0.5) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: translateY(-40px) translateX(var(--drift)) scale(1) rotate(var(--rot1));
    }
    60% {
        opacity: 0.8;
        transform: translateY(-120px) translateX(calc(var(--drift) * 1.5)) scale(1.1) rotate(var(--rot2));
    }
    100% {
        opacity: 0;
        transform: translateY(-240px) translateX(var(--drift-end)) scale(0.6) rotate(var(--rot3));
    }
}

/* end hearts */