.atkinson-hyperlegible-next-regular {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.atkinson-hyperlegible-next-bold {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.atkinson-hyperlegible-next-regular-italic {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.atkinson-hyperlegible-next-bold-italic {
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-weight: 700;
  font-style: italic;
}


.atkinson-hyperlegible-mono-regular {
  font-family: "Atkinson Hyperlegible Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.atkinson-hyperlegible-mono-bold {
  font-family: "Atkinson Hyperlegible Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.atkinson-hyperlegible-mono-regular-italic {
  font-family: "Atkinson Hyperlegible Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
}

.atkinson-hyperlegible-mono-bold-italic {
  font-family: "Atkinson Hyperlegible Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
}


.play-regular {
  font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.play-bold {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.nunito-regular {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200 1000;
  font-style: normal;
}

.roboto-mono-regular {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100 700;
  font-style: normal;
}

@property --dlg-margin-size {
    syntax: "<percentage";
    inherit: false;
    initial-value: 4%;
}

@property --text-shadow-color {
    syntax: "<color>";
    inherits: true;
    initial-value: currentColor;
}

@property --text-shadow-position-1{
    syntax:"<length> <length>";
    inherits: false;
    initial-value: 0 0;
}

@property --text-shadow-position-2{
    syntax: "<length> <length>";
    inherits: false;
    initial-value: 0 0;
}

@property --breathing-gradient-value {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%
}

@property --blur-filter {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
}

@keyframes breathing{
    0%, 100% {
        opacity:100%;
        --breathing-gradient-value: 95%;
    }
    50% {
        opacity:80%;
        --breathing-gradient-value: 5%;
    }
}

@keyframes burning{
  0%, 100%{
    filter:
      drop-shadow(red -0.05em 0 0.4px)
      drop-shadow(#fd80 0.0125em 0.075em 0.5px)
      drop-shadow(#f000 -0.025em -0.3em 0.5px)
      drop-shadow(#f30 -0.0125em -0.15em 2.5px)
      drop-shadow(#f70c 0.025em 0.1em 1px)
      blur(var(--blur-filter));
  }
  25% {
    filter:
      drop-shadow(red 0.05em 0 0.4px)
      drop-shadow(#f70c 0.0125em 0.1em 1px)
      drop-shadow(#fd80 -0.025em 0.075em 0.5px)
      drop-shadow(#f000 -0.0125em -0.3em 0.5px)
      drop-shadow(#f30 0.025em -0.15em 2.5px)
      blur(var(--blur-filter));
  }
  50% {
    filter:
      drop-shadow(red -0.05em 0 0.4px)
      drop-shadow(#f30 0.0125em -0.15em 2.5px)
      drop-shadow(#f70c -0.025em 0.1em 1px)
      drop-shadow(#fd80 -0.0125em 0.075em 0.5px)
      drop-shadow(#f000 0.025em -0.3em 0.5px)
      blur(var(--blur-filter));
  }
  75% {
    filter:
      drop-shadow(red 0.05em 0 0.4px)
      drop-shadow(#f000 0.0125em -0.3em 0.5px)
      drop-shadow(#f30 -0.025em -0.15em 2.5px)
      drop-shadow(#f70c -0.0125em 0.1em 1px)
      drop-shadow(#fd80 0.025em 0.075em 0.5px)
      blur(var(--blur-filter));
  }
}

@keyframes burning-cold{
  0%, 100% {
    filter:
      drop-shadow(slategray -0.05em 0 0.4px)
      drop-shadow(#f000 0.0125em 0.075em 0.5px)
      drop-shadow(#7890 -0.025em -0.3em 0.5px)
      drop-shadow(#c89 -0.0125em -0.15em 2.5px)
      drop-shadow(#dbbc 0.025em 0.1em 1px)
      blur(var(--blur-filter));
  }
  25% {
    filter:
      drop-shadow(slategray 0.05em 0 0.4px)
      drop-shadow(#dbbc 0.0125em 0.1em 1px)
      drop-shadow(#f000 -0.025em 0.075em 0.5px)
      drop-shadow(#7890 -0.0125em -0.3em 0.5px)
      drop-shadow(#889 0.025em -0.15em 2.5px)
      blur(var(--blur-filter));
  }
  50% {
    filter:
      drop-shadow(slategray -0.05em 0 0.4px)
      drop-shadow(#c89 0.0125em -0.15em 2.5px)
      drop-shadow(#dbbc -0.025em 0.1em 1px)
      drop-shadow(#f000 -0.0125em 0.075em 0.5px)
      drop-shadow(#7890 0.025em -0.3em 0.5px)
      blur(var(--blur-filter));
  }
  75% {
    filter:
      drop-shadow(slategray 0.05em 0 0.4px)
      drop-shadow(#7890 0.0125em -0.3em 0.5px)
      drop-shadow(#889 -0.025em -0.15em 2.5px)
      drop-shadow(#dbbc -0.0125em 0.1em 1px)
      drop-shadow(#f000 0.025em 0.075em 0.5px)
      blur(var(--blur-filter));
  }
}

@keyframes blur_pulse {
    0%, 100% {--blur-filter: 0px}
    25% {--blur-filter: 0.5px}
    50% {--blur-filter: 0px}
    75% {--blur-filter: 0.5px}
}

@keyframes glitch{
  0%,5%,12.5%,20%,100%{filter:drop-shadow(#000 0px 0) grayscale(12.5%) blur(var(--blur-filter));}
  10%{filter:drop-shadow(color-mix(currentColor, red, transparent 50%) -2px 0.25px) blur(var(--blur-filter));}
  15%{filter:drop-shadow(color-mix(currentColor, dodgerblue, transparent 50%) 2px 0.5px) blur(var(--blur-filter));}}

@keyframes pulsing{
  0%, 100%{
    opacity: 100%;
  }
  50% {
    opacity: 90%;
  }
}

@keyframes scanlines {
  0% {
    background-size: auto 0.9lh;
    background-position-y: 0;
    mask-size: auto 0.9lh;
    mask-position: 0 0;
  }
  100% {
    background-size: auto 0.9lh;
    background-position-y: 0.9lh;
    mask-size: auto 0.9lh;
    mask-position: 0 0.9lh;
  }
}

@keyframes wobbling{
    0%, 100% {transform: translate(-0.015em, 0)}
    25% {transform: translate(0, 0.015em)}
    50% {transform: translate(0.015em, 0)}
    75% {transform: translate(0, -0.015em);}
}

@keyframes wobbling-drop-shadow {
  0%, 100%{
    filter:
      drop-shadow(slategray -0.17ch 0.15em 1.1px)
      drop-shadow(slategray 0.13ch -0.15em 1.1px);
  }
  25% {
    filter:
      drop-shadow(slategray -0.15ch 0.17em 1px)
      drop-shadow(slategray 0.15ch -0.13em 1px);
  }
  50% {
    filter:
      drop-shadow(slategray -0.13ch 0.15em 0.9px)
      drop-shadow(slategray 0.17ch -0.15em 0.9px);
  }
  75% {
    filter:
      drop-shadow(slategray -0.15ch 0.13em 1px)
      drop-shadow(slategray 0.15ch -0.16em 1px);
  }
}

@keyframes wobbling-shadow{
    0%, 100% {
        --text-shadow-position-1: 0.13ch -0.15em;
        --text-shadow-position-2: -0.17ch 0.15em;
    }
    25% {
        --text-shadow-position-1: 0.15ch -0.13em;
        --text-shadow-position-2: -0.15ch 0.17em;
    }
    50% {
        --text-shadow-position-1: 0.17ch -0.15em;
        --text-shadow-position-2: -0.13ch 0.15em;
    }
    75% {
        --text-shadow-position-1: 0.15ch -0.17em;
        --text-shadow-position-2: -0.15ch 0.13em;
    }
}

body {
    background-color: #000;
    color: #EEE;
    --text-shadow-color: slategray;
    text-decoration-color:var(--text-shadow-color);
    font-family: 'Atkinson Hyperlegible Next';
    font-size: 1.2em;
    font-size-adjust: cap-height;
    overflow-wrap: break-word;
    margin:auto;
    max-width: 64ch;
    width: 100%;
}

::selection {
    background-color: transparent;
    color: white;
    text-shadow:
        -0.05ch -0.35ex 0.2ch var(--text-shadow-color),
        0.05ch -0.35ex 0.2ch var(--text-shadow-color);
    text-decoration: underline color-mix(var(--text-shadow-color), transparent,transparent) solid;
    text-decoration-thickness: 0.975lh;
    text-decoration-skip-ink: none;
    text-underline-offset: -0.75lh;
}
.dlg ::selection, q::selection {
    text-decoration-thickness: 1.25ex;
    text-underline-offset: -1.125ex;
}

em {
    font-style: italic;
}

strong {
    font-weight: 800;
}

p, blockquote {
    margin: 1.25em 4ch;
    transition: margin 0.075s ease-in-out;
}
p {
    text-align: justify;
}


q{
    margin-inline: 1ch;
}
q, blockquote.dlg>p {
    quotes: '“' ' ' '‘' ' ' '⌜' ' ';
    text-align:left;
}
q.punc, blockquote.dlg>p.punc{
    quotes: '“' ' ' '‘' ' ' '⌜' ' ';
}
blockquote.dlg>p{
/*    background: border-box radial-gradient(circle 2.5ch at top left, color-mix(currentColor 20%, transparent), transparent) no-repeat;
    background-image: linear-gradient(0deg, color-mix(currentColor, transparent 90%), transparent)
    background-size: 2ch;*/
    inline-size: fit-content;
/*    max-inline-size: 40ch;*/
    overflow-wrap: break-word;
    text-wrap: balance;
    display: block;
    position: relative;
    margin: 0 4% 0.35em;
    padding: 1px;
    border-radius: 0.2lh
}
blockquote.dlg>p::before, blockquote.dlg>p.punc::before {
    content:open-quote;
}
blockquote.dlg>p::after, blockquote.dlg>p.punc::after {
    content:close-quote;
}
blockquote.dlg>p:not(.punc)::before, q:not(.punc)::before {
    margin-right:1ch;
}


/* character list */
/*blockquote.dlg>p[data-char]{
    +p[data-char=attr(data-char)]{
        margin-bottom:0em;
    }
}*/
[data-char=gray], .gray {
    color: #BBD;
    --text-shadow-color: #BBD;
    font-family: 'Atkinson Hyperlegible Next';
    &.radio.radio {
        font-family: 'Atkinson Hyperlegible Mono';
    }
}
[data-char=oll], .oll {
    color: #EC0;
    --text-shadow-color: #EC0;
    font-family: 'Nunito';
}
[data-char=pasc], [data-char=piroska], .pasc, .piroska{
    color: #E99;
    --text-shadow-color: #E99;
    font-family: 'Play';
    line-height: 1.025lh;
}
[data-char=mc], .mc {
    color: #922;
    --text-shadow-color: #b44;
}

.angry {
    font-size: 109%;
    font-weight: 500;
/*    text-shadow:
        0 0 1em red,
        0 -0.2em 0.25em #900,
        0 0.2em 0.25em #400;*/
    filter:
        drop-shadow(red 0 0 2px)
        drop-shadow(#930 0 -0.2em 0.75px)
        drop-shadow(#410 0 0.2em 1px);
    will-change: transform;
    animation-name: burning, blur_pulse;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.angry.whisper{
    opacity: 70%;
    animation: burning 4s linear infinite;
}
p.angry {
    animation-delay:0.5s;
}

.dream {
    color: white;
    font-style: italic;
    filter:blur(0.035em) grayscale(50%) hue-rotate(-12.5deg);
}
.dream :is(.dlg>p, q), .dream :is(.dlg>p,q) .manual-effect::before {
    color: white;
/*    text-shadow:
        0 0 1em var(--text-shadow-color),
        0 0 0.9em var(--text-shadow-color),
        0 0 0.05em black;*/
    filter:
        drop-shadow(0 0 0.75em color-mix(var(--text-shadow-color), transparent 25%))
        drop-shadow(0 0 0.3em var(--text-shadow-color))
        drop-shadow(0 0 0.1em black);
}

.muffled, .muffled.manual-effect::before {
/*    text-shadow:
        0 0 1.2em,
        0 0 1em,
        0 0 0.5em;
        */
    filter:
        drop-shadow(0 0 0.4em color-mix(currentColor, transparent))
        drop-shadow(0 0 0.5em color-mix(currentColor, transparent))
        drop-shadow(0 0 0.25em color-mix(currentColor, transparent));
    animation:breathing 3.5s ease-in-out infinite;
}
:is(p, .muffled) {
    mask-clip: no-clip;
    mask-image: linear-gradient(150deg, #ffffffcc, white var(--breathing-gradient-value), #ffffffcc);
}


.radio.radio {
    font-family: 'Atkinson Hyperlegible Mono';
}
p.radio, q.radio, span.radio, blockquote.radio>p{
    background-image: linear-gradient(transparent 0, color-mix(currentColor, transparent) 1.5px, transparent 3px);
    background-size: auto 1cap;
    background-clip: border-box;
    background-position: 0 0;
    mask-image: linear-gradient(white 2.25px, #fffc 0px, white);
    mask-size: auto 1cap;
    mask-clip: border-box;
    mask-position: 0 0;
    font-variant-caps:small-caps;
    padding-top:0;
    border-radius:0.25lh;
    filter:
    drop-shadow(color-mix(currentColor, red, transparent) -1px 0)
    drop-shadow(color-mix(currentColor, green, transparent) 1px 0)
    grayscale(25%);
    animation-name: scanlines, glitch; 
    animation-duration: 3s, 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.scared, .scared.manual-effect::before {
    filter:
        drop-shadow(slategray 0.15ch -0.15em 0.1em)
        drop-shadow(slategray -0.15ch 0.15em 0.1em);
/*    --text-shadow-position-1: 0.15ch -0.15em;
    --text-shadow-position-2: -0.15ch 0.15em;

    text-shadow:
        var(--text-shadow-position-1) 0.1em slategray,
        var(--text-shadow-position-2) 0.1em slategray;*/
    animation: wobbling-drop-shadow 1s cubic-bezier(.79,.14,.15,.86) infinite;
}
p.scared{
    animation-delay:0.25s;
}
.scared.angry, .scared.angry.manual-effect::before {
    animation-name: wobbling, burning-cold; 
    animation-duration: 1s, 4s;
    animation-timing-function: cubic-bezier(.79,.14,.15,.86), linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
.scared.muffled, .scared.muffled.manual-effect::before {
/*    text-shadow:
        0 0 1.2em,
        0 0 1em,
        0 0 0.5em,
        0.7ch -0.35em 0.15em color-mix(slategray 75%, transparent),
        -0.7ch 0.35em 0.15em color-mix(slategray 75%, transparent);*/
    filter: 
        drop-shadow(0 0 0.6em color-mix(currentColor, transparent 25%))
        drop-shadow(0 0 0.5em color-mix(currentColor, transparent 25%))
        drop-shadow(0 0 0.25em color-mix(currentColor, transparent 25%))
        drop-shadow(0.7ch -0.35em 0.05em color-mix(slategray, transparent 50%))
        drop-shadow(-0.7ch 0.35em 0.05em color-mix(slategray, transparent 50%));
    animation-name: wobbling, breathing;
    animation-duration: 1s, 3.5s;
    animation-timing-function: cubic-bezier(.79,.14,.15,.86), ease-in-out;
    animation-iteration-count: infinite;
}
p.text, q.text, .dlg.text>p {
    background-color: color-mix(var(--text-shadow-color), transparent 20%);
    color: color-mix(var(--text-shadow-color) 15%, white);
    padding: 3px 0.9ch 3px 0.75ch;
    border-radius: 0.375lh;

    &.last.left::after{
        background-image: linear-gradient(-45deg,transparent 50%,color-mix(var(--text-shadow-color), transparent 22.5%) 50%);
        mask-image: linear-gradient(transparent 2px, white 3px 8px, transparent);
        position: absolute;
        display: block;
        z-index:1;
        width:10px;
        height:10px;
        left:0;
    }
    &.last.right::after{
        background-image: linear-gradient(45deg,transparent 50%,color-mix(var(--text-shadow-color), transparent 22.5%) 50%);
        mask-image: linear-gradient(transparent 2px, white 3px 8px, transparent);
        position: absolute;
        display: block;
        z-index:1;
        width:10px;
        height:10px;
        right:0;
    }
    
    &::selection, ::selection {
        background-color: #000c;
    }
}
.whisper {
    font-size:95%;
    --blur-filter:0.04em;
    filter:
        blur(var(--blur-filter));
}
.text p.whisper, .text.whisper {
    background-color: color-mix(var(--text-shadow-color), transparent 45%);
    &.last.left::after {
        background-image: linear-gradient(-45deg,transparent 50%,color-mix(var(--text-shadow-color), transparent 47.5%) 50%);
    }
    &.last.right::after {
        background-image: linear-gradient(45deg,transparent 50%,color-mix(var(--text-shadow-color), transparent 47.5%) 50%);
    }
}

/* animated text class delays */
:is(.scared, .angry, .muffled):nth-of-type(1) { 
    animation-delay: 0.34s;
}
:is(.scared, .angry, .muffled):nth-of-type(2) { 
    animation-delay: 0.12s;
}
:is(.scared, .angry, .muffled):nth-of-type(3) { 
    animation-delay: 0.27s;
}
:is(.scared, .angry, .muffled):nth-of-type(4) { 
    animation-delay: 0.42s;
}

div.dream{
    margin: 0 4ch;
    background-color: #FED4;
    --text-shadow-color: transparent;
    box-shadow: 0 0 4ch 4ch #FED4;
    border-radius: 8ch;
}
div.dream>blockquote{
    margin: 1.25em 0;
}

/* no-filter applies filters to pseudo-elements */
.manual-effect.manual-effect.manual-effect.manual-effect {
    text-shadow: none;
    filter: none;
    animation: none;
}

/* dialog speaker orders */
blockquote.dlg{
    >p{
        --dlg-margin-size: 4%;
        margin-left: var(--dlg-margin-size); }
    &.text>p, >p.text {
        margin-left: auto;
        margin-right: calc(28% - var(--dlg-margin-size));
    }
    &[data-char=gray] {
        >p[data-char=oll]{
            --dlg-margin-size: 12%; }
        >p:is([data-char=pasc],[data-char=piroska]){
            --dlg-margin-size: 20%; }
    }
    &[data-char=oll] {
        >p[data-char=gray]{
            --dlg-margin-size: 12%; }
        >p:is([data-char=pasc],[data-char=piroska]){
            --dlg-margin-size: 28%;}
    }
    &[data-char=pasc], &[data-char=piroska]{
        >p:is([data-char=gray],[data-char=oll]){
            --dlg-margin-size: 20%; }    
    }
}


@media (min-width: 780px) {
    p, blockquote {
        p{
            max-width:40ch;}
    }
}

@media (max-width: 780px) {
    p, blockquote {
        margin: 1.25em 4%;
    }
}

@media (max-width: 720px) {
    body {
        max-width:100%;
        margin:0;
    }
    
    p, blockquote {
        margin: 1em;
        p{
            max-width:72%;}
    }
}