:root {
    --max-board-width: 30rem;
    --board-width: calc(min(var(--max-board-width), 100vmin - 20px));
}
@media (pointer:coarse) {
    :root {
        --board-width: calc(min(var(--max-board-width), 100vmin - 50px));
    }
}

:root {
    --correct: hsla(104, 70%, 45%, 1);
    --correct-curve-dark: hsla(104, 70%, 40%, 1);
    --warm: hsla(47, 89%, 45%, 1);
    --warm-curve-dark: hsla(47, 89%, 40%, 1);
    --def-border-radius: 1rem;
    --tile-lip-tint: rgba(255, 255, 255, 0.2);
    --tile-shadow: inset 0 calc(var(--board-width) / -100) rgba(0, 0, 0, 0.2);
    --tile-shadow-half: inset 0 calc(var(--board-width) / -200) rgba(0, 0, 0, 0.2);
    --tile-corner: calc(var(--board-width) / 50);
    --clock-padding: 0.5em;
    --grid-gap: calc(var(--board-width) / 50);
    --clock-appear: 0.4s;
    --gray-tile-dark: hsl(0, 0%, 78.1%);
    --gray-tile: hsl(0, 0%, 86.2%);
    --gray-text-shadow: 0px 0px 18px #fdfdfd;
    --default-color: #444;  /* dark text on light grey */
    --footer-subtle: #888;
    --white-text-shadow: 0px 0px 18px rgba(0,0,0,0.3);
    --dict-link: hsl(110, 50%, 30%);
    --definitions-bg: #f4f4f469;
    --def-bg: white;
    --aside-bg: #f5ffee;
}

@media  (prefers-color-scheme: dark) {
    :root {
        --correct: hsla(104, 70%, 30%, 1);
        --correct-curve-dark: hsla(104, 70%, 25%, 1);
        --tile-lip-tint: rgba(255, 255, 255, 0.08);
        --gray-tile-dark: hsl(0, 0%, 48.1%);
        --gray-tile: hsl(0, 0%, 56.2%);
        --gray-text-shadow: var(--white-text-shadow);
        --default-color: #eee;  /* light text on dark grey */
        --footer-subtle: #ccc;  /* light text on dark grey */
        --dict-link: hsl(104, 50%, 90%);
        --definitions-bg: #00000010;
        --def-bg: #444;
        --aside-bg: #777;
    }

    a { color: white; }
    a:visited { color: oklch(70% 58% 284); }

    body {
        background: #333;
    }

}

:root {
    --tile-lip: radial-gradient(circle, transparent, transparent 77%, var(--tile-lip-tint) 87%);
}

html {
    overflow-x: hidden;  /* prevent dragging of tiles off to the right of screen (iOS) */
}

body {
    font-family: Sans-Serif;
    font-family: Ranade,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    min-height: 100vh;
    margin: 0;
}

body.preventSelect .dual,
body.preventSelect {
    user-select: none;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}

@media not prefers-reduced-motion {
body.foirfe {
    /* thanks https://stackoverflow.blog/2021/05/31/shipping-confetti-to-stack-overflows-design-system/ */
    background-repeat: repeat-x;
    background-position: top -10px center;
    background-image: url('data:image/svg+xml;utf8,<svg width="600" height="90" viewBox="0 0 600 90" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="42" y="-10" width="6" height="10"/><rect x="84" y="-10" width="6" height="10"/><rect x="126" y="-13" width="5" height="13"/><rect x="168" y="-13" width="5" height="13"/><rect x="210" y="-10" width="6" height="10"/><rect x="252" y="-13" width="5" height="13"/><rect x="294" y="-10" width="6" height="10"/><rect x="336" y="-13" width="5" height="13"/><rect x="378" y="-13" width="5" height="13"/><rect x="420" y="-10" width="6" height="10"/><rect x="462" y="-10" width="6" height="10"/><rect x="504" y="-13" width="5" height="13"/><rect x="546" y="-10" width="6" height="10"/><style type="text/css"> rect { opacity: 0; } rect:nth-child(1) { transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; } rect:nth-child(2) { transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; } rect:nth-child(3) { transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; } rect:nth-child(4) { transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; } rect:nth-child(5) { transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; } rect:nth-child(6) { transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; } rect:nth-child(7) { transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; } rect:nth-child(8) { transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; } rect:nth-child(9) { transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; } rect:nth-child(10) { transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; } rect:nth-child(11) { transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; } rect:nth-child(12) { transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; } rect:nth-child(13) { transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; } rect:nth-child(odd) { fill: %2365BB5C; } rect:nth-child(even) { z-index: 1; fill: %2333AAFF; } rect:nth-child(4n) { animation-duration: 1400ms; fill: %23F23B14; } rect:nth-child(3n) { animation-duration: 1750ms; animation-delay: 700ms; } rect:nth-child(4n-7) { fill: %232A2F6A; } rect:nth-child(6n) { fill: %23FBBA23; } @keyframes blast { from { opacity: 0; } 20%25 { opacity: 1; } to { transform: translateY(90px); } } </style></svg>');
}
}

.left-col {
    display: contents;
    position: relative;  /* for the 'copied' message */
}

.mastodon-screen {
    margin: 10px auto;
    display: block;
}


@media screen and (min-width: 1000px) {  /* 60rem doesn't work */
    .left-col {
        display: block;
        float: left;
        width: 50%;
    }

    #definitions {
        /* to show that layout is not broken when no definitions are present */
        min-height: calc(var(--clock-padding) + (103 * var(--board-width) / 100));
        background-color: var(--definitions-bg);
        border-radius: var(--tile-corner);
    }

    body {
        max-width: calc(2.2 * var(--max-board-width));
        margin: 0 auto;
    }

    .sraith {
        box-shadow: none !important;
    }

    .mastodon-screen {
        display: inline;
    }
}

.header > * {
    font-size: calc(1.1 * var(--board-width) / 10);
    padding-top: 0.5em;  /* padding rather than margin so doesn't move body element down */
    color: var(--default-color);
}

.header {
    display: flex;
    justify-content: space-between;
    max-width: var(--board-width);
    margin: 0 auto;
    overflow: hidden;
    max-height: calc(.28 * var(--board-width));
    transition: max-height 500ms ease;
}

.header svg {
    vertical-align: middle;
    height: 0.9em;
    display: inline-block;
    padding-top: 0.62em;
    cursor: pointer;
}

body:not(.no-js) #volume-on-off #off {
    transition: opacity 0.13s ease-in-out;
}
#volume-on-off #off {
    opacity: 1;
}
#volume-on-off.on #off {
    opacity: 0;
}

#stars {
    visibility: hidden;
}
#stars.on {
    visibility: visible;
}

h1 {
    text-align: center;
    text-transform: uppercase;
    /*text-shadow: 2px 0 3px #08bb24, -2px 0 3px #d71f5b, 0 2px 3px #0868bb, 0 -2px 3px #bb8e08;
    color: white;*/
    margin: 0 0 0.5em 0;
    letter-spacing: 0.1em;
}

h1 span {
    visibility: hidden;
}

h2 {
    display: none;
    text-align: center;
    font-size: 1rem;
    text-transform: lowercase;
    color: #999;
}
h2 span {
    color: #555;
    display: block;
    font-style: italic;
    margin: 1em;
}

.dual {
    display: grid;
    width: var(--board-width);
    grid-template-columns: repeat(5, minmax(0,1fr));
    grid-template-rows: repeat(5, minmax(0,1fr));
    grid-gap: var(--grid-gap);
    margin: 0 auto;
    font-weight: bold;
    color: var(--default-color);
}

.dual.dnd {
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

body.no-js .dual div[data-value],
.dual.disabled div[data-value]:not(.failed-but-good) {
    opacity: 0.8;
}

.failed .dual div[data-value]:not(.failed-but-good) {
    filter: grayscale(.75);
}

.success .def h2,
.success .dual div.correct {
    background: radial-gradient(circle, rgba(12,207,144,1) 0%, var(--correct) 35%, rgba(115,184,47,1) 43%, rgba(153,177,59,1) 52%, rgba(190,138,62,1) 68%, rgba(176,34,190,1) 100%);  /* https://cssgradient.io/ */
    background-size: 200vmax 200vmax;
    background-position: -100vmax -100vmax;
    background-attachment: fixed;
    color: white;
}

body.show-timer .def h2,
body.show-timer .dual div.correct {
    animation-play-state: paused; /* glowing animation on semi transparent clock segment is too much on top of this animation */
}

@media screen and (min-width: 700px) {
    body.show-timer.foirfe {
        background-image: none;  /* FF slows up with this animation, so only play for a short while */
    }
}

@media screen and (max-device-width: 1000px) {  /* 60rem doesn't work */
    .success .def h2,
    .success .dual div.correct {
        animation: success 10s linear infinite;
    }
}

@media (prefers-reduced-motion) {
    .success .def h2,
    .success .dual div.correct {
        animation: none !important;
    }
}

@keyframes success {
    0% {background-position: -100vmax -100vmax}
    100% {background-position: 300vmax 300vmax}
}

.dual div[data-value] {
    display: flex;
    border-radius: var(--tile-corner);
    background-image: var(--tile-lip), linear-gradient(var(--gray-tile-dark), var(--gray-tile));
    background-size: 100% 94.7%, 100% 100%;
    background-repeat: no-repeat;
    box-shadow: var(--tile-shadow);
    aspect-ratio: 1;
    padding-bottom: calc(var(--board-width) / 100);  /* this appears to be applied after aspect ratio which is good for it's purpose (make room for the inset drop shadow) */
    font-size: calc(var(--board-width) / 10);
    text-shadow: var(--gray-text-shadow);
}

.dual div.jumping {
    animation: twist 0.5s infinite;
}

.success .dual div.correct.jumping {
    animation: twist 0.5s infinite, success 10s linear infinite;
}

@media (prefers-reduced-motion) {
    .dual div.jumping,
    .success .dual div.correct.jumping {
        animation: none;
    }
}

.actions-area {
    margin: 0 auto;
    width: var(--board-width);
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    padding-bottom: 0;
}
body:not(.no-js) .actions-area {
    transition: max-height 500ms ease, margin-bottom 500ms ease, padding-bottom 100ms ease;
}


.success .actions-area,
.failed .actions-area {
    max-height: 6rem;
    margin-bottom: 4rem;
    padding-bottom:  calc(var(--board-width) / 100);  /* to accomodate button shadow without cutoff */
}

.failed .actions-area {
    max-height: 15rem;
}

.success #retry {
    display: none;
}

.actions-area .failure-msg {
    display: none;
}

.failed .actions-area .failure-msg {
    display: block;
}

button {
    cursor: pointer;
    color: white;
    border: none;
    font-size: 2rem;
    padding: 0.5em 1em;
    background-color: hsl(205, 49%, 65%);
    box-shadow: 0 calc(var(--board-width) / 100) hsl(205, 49%, 45%);
    border-radius: var(--tile-corner);
}

button:active {
    box-shadow: none;
    position: relative;
    top: calc(var(--board-width) / 100);
}

@keyframes twist {
    0% { transform: rotate(0); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}

.dual div[data-value]::before {
    text-transform: uppercase;
    content: attr(data-value);
    margin: auto;
    transition: filter calc(var(--clock-appear) / 2) linear calc(var(--clock-appear) / 2);
}
body.show-timer div.correct::before {
    /*filter: blur(.03em);*/
}

body.success.today.show-timer div.correct:not(.cfs)::before,
body.failed.today.show-timer div.correct:not(.cfs)::before {
    filter: blur(.18em);
}

.dual div.correct {
    background-image: var(--tile-lip), linear-gradient(var(--correct-curve-dark), var(--correct));
    text-shadow: var(--white-text-shadow);
    color: white;
}
.dual div.warm {
    background-image: var(--tile-lip), linear-gradient(var(--warm-curve-dark), var(--warm))  !important;
    text-shadow: var(--white-text-shadow);
    color: white;
}

.dual div.correct.jumping {
    text-shadow: 0px 0px 7px #7bd951;
}

.leader-line { filter: drop-shadow(0px 0px 2px white); }
.dual div.highlighted { z-index: 100; }  /* so that it is obscures the start of the arrow */

.dual div.sortable-drag { }
.dual div.sortable-ghost { opacity: 0; }
.dual div.sortable-fallback {
    opacity: 1 !important;
    transform: scale(1.1);
    filter: drop-shadow(0 calc(var(--board-width) / 100) calc(var(--board-width) / 100) rgba(0,0,0, 0.3))
}
.placeholder {
    visibility: hidden;
    user-select: none;
    -webkit-user-select: none !important;
}
.dual div.sortable-ghost, #dual div.sortable-chosen { /* transform: scale(1.2);*/      background-color: #eee;
 }

.amárach {
    position: absolute;
    margin-top: calc(var(--clock-padding) / 2 + (2 * var(--board-width) / 100));  /* extra adjustment as the tiles are not square, but have a shadow */
    margin-left: calc(var(--clock-padding) / 2);
    z-index: 100;
    background-color: rgba(236, 236, 236, 0.8);
    width: calc(var(--board-width) - var(--clock-padding));
    height: calc(var(--board-width) - var(--clock-padding));
    box-sizing: border-box;  /* interaction between padding and width/height */
    font-size: calc(min(1.8em, 0.76 * var(--board-width) / 10));
    color: var(--correct);
    border-radius: 100em;
    display: none;
    vertical-align: middle;
    padding: 0.3em 0.7em;
    text-align: center;
    line-height: 1.3em;
    transform: scale(0);
    transform-origin: center;
    transition: transform var(--clock-appear) ease-in-out;
}

#time-left {
    color: #358618;
}

body.success.today .amárach,
body.failed.today .amárach {
    display: table;
}

body.show-timer .amárach {
    transform: scale(1);
}

.amárach span {
    display: table-cell;
    vertical-align: middle;
}

.amárach svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    margin-bottom: calc((-1ex / 2) + 0.05em);
}

#clock path {
    stroke: var(--correct);
}

#clock path.hour-grey {
    stroke: white;
}

.remaining {
    font-size: 1.6rem;
    text-align: center;
    margin: 1em auto;
    max-width: var(--board-width);
}

.remaining svg {
    width: 1em;
    vertical-align: bottom;
    display: inline;
    height: 1em;
    margin-left: 0.3em;
}

.focal-count {
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.4s ease-in-out;
    display: none;
    font-size: 1.5rem;
    text-align: center;
    margin: 2em 0;
}

.failed .focal-count {
    display: block;
}

.focal-count.comhairdeachas {
    transform: scale(1);
}

#definitions {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: var(--board-width);
}

.def {
    background: var(--def-bg);
    box-shadow: 0 0.5rem 3rem -1rem rgba(0,0,0,0.4);
    border-radius: var(--def-border-radius);
    padding: 0 1rem;
    margin-bottom: 0;
    font-size: 1.25rem;
    max-height: 0;
    overflow: hidden;
    transition: margin-bottom 500ms ease, padding-top 500ms ease 250ms, padding-bottom 500ms ease 250ms, max-height 500ms ease 1000ms;
}

.def.expanded {
    max-height: 10rem;
    margin-bottom: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.def.expanded.unconstrained {
    max-height: none;
}

.def h2 {
    display: block;
    border-top-left-radius: var(--def-border-radius);
    border-top-right-radius: var(--def-border-radius);
    background-color: var(--correct);
    margin: -2rem -2rem 2rem -2rem;
    padding: 1rem 2rem;
    color: white;
    font-size: 1.5rem;
    line-height: 2rem;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.def h2 img {
    cursor: pointer;
    height: 1.3em;
}
.def.no-audio h2 img {
    cursor: default;
    opacity: 0.3;
}

.def ul {
    color: var(--default-color);
    padding: 0 1.3rem;  /* so centering works */
}

.def li {
    text-align: left;
    hyphens: auto;
    font-size: 1.15em;
    margin-bottom: 0.5em;
}
.def li:only-child {
    list-style-type: none;
    text-align: center;
    font-size: 1.5em;
}

.dics {
    display: flex;
    margin-top: 1.25em;
    align-items: space-between;
}

.dics > a {
    text-decoration: none;
    color: var(--dict-link);
    background-image: url('data:image/svg+xml;utf8,<svg width="80" height="80" version="1.1" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="40" cy="40" r="40" fill="white" /><g fill="none" transform="translate(6 22)"><rect x="13" y="5" width="42" height="26" rx="11" ry="11" stroke="%23f9b311" stroke-width="9"/><path d="m0 18h23" stroke="%23ea5c0f" stroke-linecap="round" stroke-width="9.1"/><path d="m45 18h23" stroke="%23ea5c0f" stroke-linecap="round" stroke-width="9.1"/></g></svg>');
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: 1.6em;
    line-height: 1.6em;
    flex-grow: 1;
    padding-left: 1.8em;
}
.dics > a + a {
    background-image: url('data:image/svg+xml;utf8,<svg width="80" height="80" version="1.1" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="40" cy="40" r="40" fill="white" /><g fill="none" transform="translate(6 22)"><rect x="13" y="5" width="42" height="26" rx="11" ry="11" stroke="%23e63023" stroke-width="9"/><path d="m0 18h23" stroke="%239f1916" stroke-linecap="round" stroke-width="9.1"/><path d="m45 18h23" stroke="%239f1916" stroke-linecap="round" stroke-width="9.1"/></g></svg>');
}


@media screen and (max-width: 410px) {
    .dics > a {
        font-size: 1.1rem;
    }
}


aside {
    color: var(--default-color);
    font-size: 1rem;
    background-color: var(--aside-bg);
    text-align: left;
    padding: 0.7em 0.3em 1em 2em;
    border-top: 2px solid hsl(110, 50%, 40%);
    margin: 2em -20px 0 -20px;
    text-indent: -1.3em;
}

small {
    margin: 0.7em 0 1em 0;
    font-size: 0.7em;
    display: block;
    text-align: left;
}

aside small {
    font-size: 1em;
    margin-left: 1.2em;
    text-indent: 0;
}

aside::before {
    content: '\261E';  /* the pointy grammar hand */
    margin-right: 0.3em;
}
aside + aside {
    margin-top: 1em;
}
aside ul {
    margin-top: 0;
    padding-top: 0;
}
aside li {
    text-indent: 0;
    margin-left: -1.85em;
    margin-top: 0;
}
aside li small {
    margin-top: 0;
}

.glowing {
    animation: glowing 1.2s ease-in-out infinite;
}

@keyframes glowing {
    0% {stroke: var(--correct);}
    50% {stroke: #eee;}
    100% {stroke: var(--correct);}
}

#treoracha {
    z-index: 101;
    font-size: 3vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease-in;
    width: var(--board-width);
    padding: 0.3em 0.7em;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
    bottom: -1px;
    border: 1px solid var(--correct);
    border-top-left-radius: 1.2em;
    border-top-right-radius: 1.2em;
    display: block;
    text-align: center;
    line-height: 1.3em;
    background-color: white;
}

#treoracha.is-plural .singular,
#treoracha:not(.is-plural) .plural {
    display: none;
}

#treoracha h3 {
    text-align: left;
    color: #999;
    margin: 0.3em 0 0.6em 0;
    font-size: 1em;
}
#treoracha > div {
    display: none;
}

.hl-correct {
    color: var(--correct);
}

.hl-warm {
    color: var(--warm);
}

#treoracha-btn {
    display: none;
    cursor: pointer;
}
#treoracha-btn.functional {
    display: inline-block;
}
.success-impending #treoracha-btn.functional,
.success #treoracha-btn.functional {
    display: none;  /* why not visibility: hidden? so that it doesn't put off centering of message */
}

#treoracha button {
    font-size: 1em;
    margin-top: 1em;
    float: right;
}

#treoracha button.ar-aghaidh.no-more,
#treoracha button.ar-aghaidh:not(.no-more) + button {
    display: none;
}

#treoracha button.dismiss {
    filter: grayscale(1) brightness(1.9);
    background-color: transparent;
    box-shadow: none;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0.6em;
}

@media (min-aspect-ratio: 4/8) {
  body.treoracha .header {
      max-height: var(--grid-gap);
  }
}

body.treoracha .dual {
    pointer-events: none;  /* better than disabling it we'd have to check whether it was previously disabled */
}

body.treoracha .dual div {
    /* transitions on transform would mess up the drag and drop */
    transition: text-shadow 0.3s ease-in-out, opacity 0.75s ease-in-out, filter 0.75s ease-in-out, transform 0.5s ease-in-out;
}

body.treoracha #treoracha {
    pointer-events: auto;
    opacity: 1;
}
body.highlight-warm #t2,
body.highlight-correct #t1 {
    display: block;
}

body.treoracha .dual div:not(.highlighted) {
    opacity: 0.8;
    filter: grayscale(.85);
}
body.treoracha .dual div.enlarged,
body.treoracha .dual div.highlighted {
    transform: scale(1.06);
}

#digit-tooltip { display: none; }
.remaining.highlighted ~ #digit-tooltip {
    /*display: block;*/
    position: absolute;
    margin-top: -22rem;
    border: 1px solid #444;
    background: white;
    border-radius: 100%;
    left: 50%;
    font-size: 3em;
    padding: 0.4em;
    transform: translateX(-150%);
}

#submsg {
    color: var(--default-color);
}

.remaining.highlighted #submsg span {
    position: relative;
}
.remaining.highlighted span.cúig::before,
.remaining.highlighted span.ceithre::before,
.remaining.highlighted span.trí::before,
.remaining.highlighted span.dhá::before,
.remaining.highlighted span.aon::before,
.remaining.highlighted span.déag::before {
    position: absolute;
    margin-top: -1.1em;
    left: 50%;
    transform: translateX(-50%);
    color: hsl(182.9, 68.2%, 48%);
}
.remaining.highlighted span.cúig::before { content: '5'; }
.remaining.highlighted span.ceithre::before { content: '4'; }
.remaining.highlighted span.trí::before { content: '3'; }
.remaining.highlighted span.dhá::before { content: '2'; }
.remaining.highlighted span.aon::before { content: '1'; }
.remaining.highlighted span.déag::before { content: '+10'; }

.sraith {
    display: block;
    font-size: 0.8em;
    margin-top: 1em;
    padding: 0.7em;
    --bgc: hsl(343, 74%, 51%);
    background: var(--bgc) radial-gradient(circle, #ffc414, var(--bgc));
    box-shadow: 400px 0px var(--bgc), -400px 0px var(--bgc);
}

.stars{
    white-space: nowrap;
    position: relative;
}
.stars::after {
    content: '🌟🌟🌟🌟🌟';
    position: absolute;
    bottom: 0;
    transform: translate(-50%, 100%);
    font-size: 0.6em;
    left: 50%;
}

dl {
    float: left;
    text-align: left;
    font-size: 0.7em;
    color: #888;
    font-style: italic;
    position: absolute;
    bottom: 0;
    margin-bottom: 0.2em;
}

dt, dd { display: inline; margin: 0;}
dd::before { content: ' = '; }
dd::after { content: ' '; display: block; }


.actions {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    justify-content: space-between;
    gap: 12px;
}

.actions button {
    font-size: calc(max(1.3rem, var(--board-width) / 20));
    flex-grow: 1;
    padding: 0.5em;
}

button svg {
    vertical-align: middle;
    height: 1em;
}

.copied {
    transform: scale(0) translate(0%, -110%);
    transform-origin: top right;
    transition: transform 0.4s ease-in-out;
    position: absolute;
    padding: 1em;
    margin: auto;
    left: 50%;
    font-size: 1.4em;
    line-height: 1.5em;
    background-color: rgb(255 255 255 / 0.9);
    border: 1px solid hsl(205, 49%, 65%);
    border-radius: var(--tile-corner);
    right: 25px;
    left: 25px;
    text-align: center;
}

.success .copied {
    transform-origin: top center;  /* retry button is not showing */
}

.copied.flash {
    transform: scale(1) translate(0%, -110%);
}

.footer {
    color: var(--footer-subtle);
    clear: both;
    position: sticky;
    top: 100vh;
}
.footer > div {
    padding: 1em;
}

.mastodon-link {
    text-align: center;
    font-size: 1.4em;
}
.mastodon-link img {
    max-height: 1em;
    position: relative;
    bottom: -0.35em;
}


.plural em {
    font-weight: bold;
}
.plural em,
.feminine i,
.masculine i {
    font-style: normal;
}
.masculine b {
    color: rgb(20, 50, 255);
}
.feminine b {
    color: rgb(255, 120, 220);
}

#debug {
    display: none;
}