/***** THEMES CONFIG *****/

@import "css/themes/blue.css";
@import "css/themes/pink.css";
@import "css/themes/night.css";
@import "css/themes/poker.css";
@import "css/themes/misc.css";
@import "css/themes/bibw.css";
@import "css/themes/fat.css";
@import "css/themes/console.css";
@import "css/themes/mobilew.css";
@import "css/themes/good.css";
@import "css/themes/pro.css";


/* ============================================================
   Holographic palette & timing
   ============================================================ */
:root {
  --holo-duration: 5s;
  --holo-gradient:
    linear-gradient(
      115deg,
      rgba(120, 220, 232, 0.55) 0%,
      rgba(220, 120, 232, 0.55) 35%,
      rgba(255, 210, 120, 0.55) 65%,
      rgba(120, 220, 232, 0.55) 100%
    );
  --holo-sweep:
    linear-gradient(
      115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.0) 40%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.0) 60%,
      transparent 70%
    );
}


font-face {
    font-family: "PokemonGB", monospace;
    src: url("/fonts/PokemonGB.eot") format("eot");
    src: url("/fonts/PokemonGB.ttf") format("truetype"),
    url("/fonts/PokemonGB.woff") format("woff"),
    url("/fonts/PokemonGB.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar,
::-webkit-scrollbar-thumb {
    border: 4px solid #f9f9f9;
}

::-webkit-scrollbar-track {
    background-color: #f9f9f9;
}

::-webkit-scrollbar,
::-webkit-scrollbar-thumb {
    background-color: #DDD;
}

.hidden {
    display: none;
}

html,
body,
header,
main,
footer,
div,
i,
ul,
li,
select,
input {
    transition: background-color 200ms linear;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

input,
select,
option {
    font-family: inherit;
    font-weight: inherit;
}

i {
    user-select: none;
}

html,
body,
header,
main,
footer {
    display: flex;
    flex: 1;
}

html,
body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-family: Verdana, 'DejaVu Sans', 'Bitstream Vera Sans', Geneva, sans-serif;
    font-size: 15px;
    background: #f9f9f9;
    max-height: 100%;
    height: 100%;
    width: 100%;
    color: #333;
}

body {
    overflow: hidden;
}


header {
    max-height: 50px;
    height: 50px;
    z-index: 25;
}

header,
#window > div:first-child {
    background: linear-gradient(to bottom, #EEE 0%, #FFF 100%);
}

header {
    padding-right: 216px;
    justify-content: center;
}

header > div {
    /*width: 200px;
    height: 82px;
    margin: 5px auto 0;
    background: url("/static/img/logo_in.svg") no-repeat;*/
    background-size: 200px 82px !important;
}

header > div > img,
header > div > object {
    opacity: 0;
    width: 200px;
    height: auto; /*82px;*/
    animation: 2s ease-out 1s 1 forwards running opacityin;
}

@-webkit-keyframes opacityin {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes opacityin {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


main {
    min-width: 0;
    min-height: 0;
    height: 100%;
    border-top: 2px solid #BBB;
    border-bottom: 2px solid #BBB;
    display: flex;
    flex-direction: row;
    flex: 1;
}

#left-panel {
    width: 100%;
    flex-direction: column;
    display: flex;
}

#right-panel {
    width: 270px;
    display: flex;
    flex-direction: column;
}

#input {
    height: 50px;
    font-size: 30px;
    padding: 5px 10px 5px 10px;
    outline: 0;
    border: 0;
    border-right: 2px solid rgba(0, 0, 0, 0.5);
    margin-right: 1px;
    min-width: 0;
    background: #f9f9f9;
}

#input-status-text {
    height: 16px;
    font-family: Verdana;
    color: #87b9bd;
    font-size: 14px;
    text-align: right;
    margin: 2px 4px;
}

#input-row {
    position: relative;
    display: flex;
    align-items: stretch;
}

#input-row #input {
    flex: 1 1 auto;
    padding-right: 50px;
}

#recent-embeds-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #87b9bd;
    font-size: 28px;
    user-select: none;
    z-index: 2;
}

#recent-embeds-btn:hover {
    color: #5a9ba0;
}

#recent-embeds-popover {
    position: absolute;
    right: 4px;
    bottom: calc(100% + 6px);
    width: 320px;
    max-width: calc(100vw - 20px);
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 8px 10px;
    z-index: 50;
}

#recent-embeds-popover.hidden {
    display: none;
}

.recent-embeds-section + .recent-embeds-section {
    margin-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 8px;
}

.recent-embeds-title {
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    color: #888;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recent-embeds-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.recent-embed-thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.08s ease, border-color 0.08s ease;
}

.recent-embed-thumb:hover {
    transform: scale(1.08);
    border-color: #87b9bd;
}

.recent-embed-cell {
    position: relative;
    line-height: 0;
}

.recent-embed-remove {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    background: #fff;
    color: #888;
    font-family: Verdana;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.recent-embed-cell:hover .recent-embed-remove {
    display: flex;
}

.recent-embed-remove:hover {
    background: #d9534f;
    border-color: #d9534f;
    color: #fff;
}

/* no hover on touch screens: keep the cross always visible there */
@media (hover: none) {
    .recent-embed-remove {
        display: flex;
    }
}

.embed-picker-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 6px;
}

.embed-picker-tab {
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    color: #888;
    background: transparent;
    border: none;
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
}

.embed-picker-tab:hover {
    background: #f2f2f2;
    color: #5a9ba0;
}

.embed-picker-tab.active {
    background: #87b9bd;
    color: #fff;
}

#bank-search {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 8px;
    padding: 5px 8px;
    font-family: Verdana;
    font-size: 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    outline: none;
}

#bank-search:focus {
    border-color: #87b9bd;
}

.bank-themes-row {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.bank-theme-chip {
    flex: 0 0 auto;
    width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}

.bank-theme-chip:hover {
    background: #f2f2f2;
}

.bank-theme-chip.active {
    border-color: #87b9bd;
    background: #eef6f7;
}

.bank-theme-chip img,
.bank-theme-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.bank-theme-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: Verdana;
    font-size: 15px;
    font-weight: bold;
    color: #87b9bd;
}

.bank-theme-chip span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 10px;
    color: #888;
}

.bank-theme-chip.active span {
    color: #5a9ba0;
    font-weight: bold;
}

.recent-embeds-empty {
    font-family: Verdana;
    font-size: 12px;
    color: #aaa;
    font-style: italic;
}

/***** UPLOAD BUTTON *****/

#file-upload {
    display: none;
}

#upload > label {
    cursor: pointer;
}


/****** RECORD BUTTON AND POPOVER MENU ******/


#record > img {
    cursor: pointer;
}

/* Make the microphone icon pulsate when recording is active */
#record > img.recording-active {
    animation: pulsate 1s ease-out infinite;
}

@-webkit-keyframes pulsate {
    0% {
        filter: drop-shadow(0px 0px 0px green);
    }

    50% {
        filter: drop-shadow(0px 0px 10px green);
    }

    100% {
        filter: drop-shadow(0px 0px 0px green);
    }
}

#record-menu {
    height: 128px;
    width: 64px;
    right: 220px;
    bottom: 64px;
}

/*
#record-menu:after {
    right: 7px;
}

#record-menu:before {
    right: 15px;
}
*/
#record-menu > div {
    margin: 0 12px;
    border-bottom: unset;
    margin: 0 auto;
}

#record-menu > div > i {
    font-size: 30px;
    cursor: pointer;
}

#record-menu > div > i[disabled] {
    opacity: 0.4;
    color: lightgrey;
    cursor: not-allowed;
    margin: 0 auto;
}

#play-button {
    color: limegreen;
}

#pause-button {
    color: grey;
}

#stop-button,
#record-button,
#restart-button {
    color: red;
}

#send-button {
    color: blue;
}


/****** CHAT AREA ********/

#chat {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow-y: scroll;
    z-index: 20;
    height: 100%;
    overflow-wrap: anywhere;
}

#chat > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 5px 0;
    position: relative;
}

#chat > div:first-of-type {
    padding-top: 120px;
}

#chat > div > :not(:nth-child(2)) {
    white-space: nowrap;
    width: 70px;
}

#chat > div > div:last-child {
    font-family: monospace;
    padding-right: 5px;
    text-align: right;
    line-height: 24px;
    font-size: 11px;
}

#chat > div > :first-child {
    margin: 0 10px;
    text-align: center;
}

#chat > div > div:first-child {
    background-color: #DDD;
    border-radius: 99px;
    position: relative;
    overflow: hidden;
    height: 70px;
    border-right: 2px solid rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(0, 0, 0, 0.5);
    display: flex;
}

#chat > div > div:first-child > img,
#chat > div > div:first-child > span.shiny-wrap {
    margin: auto;
    display: none;
}


#chat > div > :nth-child(2) {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    word-break: keep-all;
}

#chat > div > div > div {
    padding: 5px;
}

/*#chat > div > :nth-child(2) > div {
    color: #333;
} */

#chat > div > div > img {
    width: auto;
    max-height: 30vh;
    max-width: 100%;
}

#chat > div > div > img.sticker-embed {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 100px;
    object-fit: contain;
}

img.emoji-embed {
    height: 2.4em;
    width: auto;
    max-height: 2.4em;
    vertical-align: middle;
    object-fit: contain;
    margin: 0 1px;
}

#chat > div > div > video {
    width: auto;
    max-height: 50vh;
    max-width: 100%;
}

#chat > div > div > iframe {
    display: block;
    width: 480px;
    max-width: 100%;
    height: 270px;
    margin-top: 4px;
}

#chat > .msg > :nth-child(3) {
    color: #999;
}

#userlist {
    width: 100%;
    height: 100%;
    border-left: 2px solid #BBB;
    overflow-x: visible;
    overflow-y: scroll;
    background: #f9f9f9;
    padding-bottom: 10px;
}


/****** USER LIST ELEMENTS ******/


/* Username text: iridescent gradient clipped to the text */
.holo-name {
  background-image:
    var(--holo-sweep),
    var(--holo-gradient),
    linear-gradient(0deg, currentColor, currentColor);
  background-size:  300% 100%, 200% 200%, 100% 100%;
  background-position: 150% 0, 0% 0%, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: holo-text var(--holo-duration) linear infinite;
}

@keyframes holo-text {
  0%   { background-position: 150% 0,   0%   0%, 0 0; }
  50%  { background-position:  50% 0, 100% 100%, 0 0; }
  100% { background-position: -50% 0,   0%   0%, 0 0; }
}

#userlist > li {
    position: relative;
    overflow: visible;
    padding-left: 66px;
    line-height: 36px;
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

#userlist > li > img,
#userlist > li > .shiny-wrap {
    position: absolute;
    left: 30px;
    bottom: 6px;
    pointer-events: none;
    display: block;
}

#userlist > li > i {
    margin: 1px 0;
    padding: 6px 5px;
    color: #333;
}

a {
    color: #06A;
    text-decoration: none;
}

audio + a {
    margin-left: 5px;
}

a:hover,
li > i:hover,
footer i:hover,
#window input:hover,
#window label:hover,
select:hover {
    cursor: pointer;
}

#userlist > li:hover > div {
    display: block;
}

#userlist > li > div {
    z-index: 25;
    color: #333;
    display: none;
    position: absolute;
    top: 57px;
    right: 222px;
    width: 400px;
    font-size: 11px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35px, #f9f9f9 35px, #f9f9f9 100%);
    display: none !important;
}

#userlist > li > div > div:first-child {
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 10px;
    text-align: center;
}

#userlist > li > div > div:first-child > div {
    background-color: #DDD;
    border-radius: 99px;
    overflow: hidden;
    height: 70px;
    width: 70px;
    position: relative;
    display: inline-block;
    border-right: 2px solid rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}

#userlist > li > div > div:first-child > div > img {
    position: absolute;
    display: block;
    margin: auto;
}

#userlist > li > div > div:last-child {
    padding: 5px 10px;
    line-height: 25px;
    border: 2px solid #BBB;
    border-top: 0;
}

#userlist > li > div > div:last-child > i {
    position: relative;
    top: 3px;
    font-size: 15px;
    margin-right: 5px;
}

.backlog {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

.log,
.log > div > div {
    color: #3C3;
    border-color: #3C3;
}

.part,
.part > div > div {
    color: #1AC;
    border-color: #1AC;
}

.error,
.error > div > div {
    color: #F33;
    border-color: #F33;
}

#chat > .me > div > div {
    color: inherit;
}

.log,
.part,
.me,
.error {
    text-align: center;
}

.bot > :nth-child(2) {
    font-style: italic;
}

.spoiler,
.spoiler * {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

.spoiler:hover,
.spoiler:hover * {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

.greentext {
    color: #792;
    font-family: monospace;
}

.pinktext {
    color: #F6F;
}

#close:hover {
    background: #F33 !important;
}

#underlay {
    position: fixed;
    opacity: 0.025;
    z-index: 10;
    top: 50px;
    left: 0;
    right: 216px;
    bottom: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    filter: invert(50%) brightness(0%);
}

.pulse {
    -webkit-animation: pulse 200ms forwards;
    animation: pulse 200ms forwards;
}

@-webkit-keyframes pulse {
    50% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.025;
    }
}

@keyframes pulse {
    50% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.025;
    }
}

.blur-in {
    -webkit-animation: blurin 500ms forwards;
    animation: blurin 500ms forwards;
}

@-webkit-keyframes blurin {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
    }
}

@keyframes blurin {
    0% {
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        -o-filter: blur(0px);
        -ms-filter: blur(0px);
        filter: blur(0px);
    }

    100% {
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
    }
}


/***** INVENTAIRE *****/


#inventory_display {
    position: fixed;
    z-index: 99;
    background: #070c17;
    transition: 200ms linear;
    border-radius: 50px;
    display: none;
    flex-wrap: wrap;
    align-content: flex-start;
    max-width: 220px;
    bottom: 64px;
    right: 220px;
    min-width: 85px;
    padding: 7px;
    padding: 25px 25px 25px 30px;
}


#inventory_display::after {
    content: " ";
    position: absolute;
    top: 98%;
    right: 75px;
    border-width: 15px;
    border-left: 0px;
    border-style: solid;
    border-color: #070c17 transparent transparent transparent;
    opacity: 0 !important;
}

.item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    box-sizing: border-box;
    padding: 5px;
}

#inventory_display > span,
#bank_display > span {
    letter-spacing: 0px;
    font-family: 'Pokemon GB';
    margin-top: 20px;
    margin-bottom: 20px;
    width: 74px;
    text-align: center;
    padding-top: 1px;
    padding-bottom: 1px;
}

.item > a {
    text-decoration: none;
    color: #fff;
    font-family: 'Pokemon GB';
    display: flex;
    align-items: center;
    font-size: 12px;
}

.item > a > img {
    width: 38px;
    height: 38px;
}

#bank_display {
    display: none;
    position: fixed;
    z-index: 99;
    background: #070c17;
    transition: 200ms linear;
    border-radius: 50px;
    left: 25px;
    bottom: 70px;
    width: auto;
    height: auto;
    max-width: 100%;
    padding: 15px 15px 15px 10px;
    margin-right: 225px;
    flex-flow: wrap;
    flex-direction: initial;
    flex: 1;
    flex-shrink: 1;
    align-items: normal;
}

#bank_display::after {
    content: "";
    flex: auto;
}

#bank_display > .item {
    display: inline-table;
    padding: 10px;
}

#bank_display > .item > a > span {
    display: block;
    width: 32px;
    height: auto;
    text-align: center
}

/***** MENUS POKEDEX & PARAMETERS *****/

.menu-popover > div,
#wiki-popover-head,
#wiki-last-edits ul,
#popover-menu-footer a,
#wiki-popover-footer {
    margin: 0 15px;
    border-bottom: 1px solid #9e9e9e;
    font-size: .9em;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: black;
}

/***** MENUS POKEDEX (Wiki last edits) *****/

#wiki-last-edits {
    position: fixed;
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #0b6dcf 0%, #0884ad 50%, #4e8da6 100%);
    border-radius: 18px;
    top: 50%;
    left: 50%;
    transform: translate(-73%, -45%);
    z-index: 50;
    color: #fff;
    grid-template-columns: 100%;
    padding: 0;
    border: 2px solid #0066cc;
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.4);
}

#wiki-popover-head,
#wiki-popover-footer {
    border: 0 !important;
}

#wiki-popover-head {
    padding: 20px 15px 15px 15px;
    font-size: 1.2em;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

#wiki-popover-head > p {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

#wiki-popover-footer {
    padding-top: 20px;
    background: rgba(0, 0, 0, 0.1);
    border-top: 2px solid rgba(255, 255, 255, 0.3);
}

ul#articles-list {
    background: transparent;
    margin: 0;
    padding: 10px 8px;
    width: auto;
    display: grid;
    grid-template-columns: 100%;
    overflow-y: auto;
    gap: 8px;
}

ul#articles-list > li {
    color: #fff;
    width: 100%;
    border: none;
    font-size: 0.95em;
    font-weight: 600;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
    padding: 12px 15px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    transition: all 200ms ease;
    border: 2px solid transparent;
}

ul#articles-list > li:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

ul#articles-list > li > a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    width: 100%;
    font-family: 'Pokemon GB', monospace;
    letter-spacing: 1px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

ul#articles-list > li > a:hover {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

ul#articles-list > li > h3,
ul#articles-list > li > p {
    margin: 0;
    padding: 0;
    line-height: 1.4em;
}

ul#articles-list > li > p:nth-of-type(2) {
    text-align: right;
}

/***** MENU PARAMETERS *****/

#menu-gear-display {
    -webkit-transition: -webkit-transform .33s ease-in-out !important;
    transition: transform .33s ease-in-out !important;
}


.rotation {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

/* Rotation appliquée à l'image #gear quand le conteneur a la classe rotation */
#menu-gear-display.rotation #gear {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.menu-popover {
    display: grid;
    position: absolute;
    height: 512px;
    width: 280px;
    background-color: #f2fbff;
    border-radius: 18px;
    bottom: 70px;
    right: 220px;
    z-index: 50;
    color: #000;
    grid-template-columns: 100%;
    padding: 10px 0 !important;
    border: 1px solid #a7a7a7;
}

.popover-display-false {
    display: none;
}

.menu-popover > div:last-child,
#wiki-popover-head,
#wiki-last-edits ul,
#wiki-last-edits ul > li > h3 > a {
    border: none;
    color: black
}

#popover-menu-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#popover-menu-footer > a {
    color: #2D8CE5;
    text-decoration: none;
    margin: 0;
    border-bottom: none;
}

.volrange {
    height: 1px;
    margin-top: 7px;
    margin-left: 10px;
    width: 95%;
}

.volrange::-moz-range-track {
    background: black;
    height: 1px;
}

.volrange::-moz-range-progress {
    background-color: #2D8CE5;
    height: 1px;
}

.volrange::-moz-range-thumb {
    background-color: #2D8CE5;
    border: none;
    width: 12px;
    height: 12px;
}

#loult-menu input,
#loult-menu option,
#loult-menu select {
    font-family: inherit;
    font-weight: inherit;
}

.menu-popover > div:first-of-type {
    padding-bottom: 4px;
}

.menu-popover > div > select {
    text-align: right;
    font-size: 1em;
    font-weight: 700;
    color: black;
    background: transparent;
    text-align-last: right;
    border: none;
}

#cookie,
#change-cookie {
    box-sizing: border-box;
    border: 1px solid #2D8CE5;
    font-family: inherit;
    font-weight: 700;
    font-size: 1em;
    height: 56px;
    text-align: center;
    margin: 8px 0 8px 0;
}

#cookie {
    border-radius: 0 28px 28px 0;
    border-left: none;
    width: 50%;
    font-size: 1em;
    font-weight: 500 !important;
    background: #FFF;
}

#cookie:focus,
#change-cookie:active {
    border: 1px solid rgb(20, 121, 251);
    box-shadow: 0 0 0px 1px rgba(20, 121, 251, .25);
}

#change-cookie:active {
    background: linear-gradient(#acd8ff 0%, #0074d9 66%, #acd8ff 100%) !important;
}

#change-cookie {
    border-radius: 28px 0 0 28px;
    width: 50%;
    text-align: left;
    background: linear-gradient(#acd8ff 0%, #0074d9 100%) !important;
    color: white;
}

#change-cookie div {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
}

#cookie_icon {
    display: block;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    margin-top: 6px;
}

#change-cookie:hover {
    cursor: pointer;
}

#cookie-set {
    /*	display: block;*/
}

button:focus,
input:focus {
    outline: none;
    border: 0;
}

#embed-check,
#automute-check,
#autoreverse-mute-check,
#sticker-embed-check {
    width: 15px;
    height: 15px;
    border-radius: 20px;
    margin-top: 0px;
}

#popover-menu-footer > a:nth-of-type(2) {
    margin-left: -15px;
}

.menu-blog-pokeball {
    position: absolute;
    margin-right: 20px !important;
    float: left;
    right: 33px;
    margin-top: 0 !important;
}

/***** FONTS CONFIG *****/


.opensans {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
}

.comic {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    font-weight: bold;
}

.mono {
    font-family: monospace;
}

/***** SHINY IRIDESCENT EFFECT *****/

.shiny-wrap {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.shiny-wrap > img {
    display: block;
    width: auto;
    max-height: 30vh;
    max-width: 100%;
}

.shiny-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--holo-sweep);
    background-size: 300% 100%;
    background-position: 150% 0;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: holo-text var(--holo-duration) linear infinite;
    animation-delay: var(--holo-delay, 0s);
    -webkit-mask-image: var(--sprite-url);
            mask-image: var(--sprite-url);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

/***** POKEMON SPRITES CONFIG *****/

.small #chat > div > div:first-child > img:nth-child(1),
.medium #chat > div > div:first-child > img:nth-child(2),
.mini #chat > div > div:first-child > img:nth-child(4),
.small #chat > div > div:first-child > span.shiny-wrap:nth-child(1),
.medium #chat > div > div:first-child > span.shiny-wrap:nth-child(2),
.mini #chat > div > div:first-child > span.shiny-wrap:nth-child(4) {
    display: block;
}

.small #chat > div > div:first-child > img:nth-child(1) {
    transform: scale(2);
    image-rendering: crisp-edges;
}

.small #chat > div > div:first-child > span.shiny-wrap:nth-child(1) {
    transform: scale(2);
}

.small #chat > div > div:first-child > span.shiny-wrap:nth-child(1) > img {
    image-rendering: crisp-edges;
}


/***** INITIALS AVATARS (poketype "Initiales") *****/
/* Works in ANY theme: hides the Pokémon sprite and draws a coloured disc with
   the user's initial. --user-color / data-initial are set in JS (addLine, userlist). */

.initials #chat > div > div:first-child > img,
.initials #chat > div > div:first-child > span.shiny-wrap,
.initials #userlist > li > img,
.initials #userlist > li > .shiny-wrap {
    display: none !important;
}

.initials #chat > div > div:first-child {
    background: var(--user-color, #888) !important;
    border: none !important;
    border-radius: 50% !important;
    align-items: center;
    justify-content: center;
}

.initials #chat > div > div:first-child::before {
    content: attr(data-initial);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: var(--initial-size, 28px);
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.initials #userlist > li::before {
    content: attr(data-initial);
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--user-color, #888);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}


/***** FOOTER MENU *****/

#footer-menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* grid-gap: 3px; */
    height: 120px;
    width: 100%;
    min-width: 216px;
}


.footer-menu-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 5px;
    border: 0;
    overflow: hidden;
}

.footer-menu-icon > img,
.footer-menu-icon > label > img,
.footer-menu-icon > a > img {
    margin: 2px;
    transition: 0.25s;
}

#gear:hover > img:first-of-type {
    display: none;
}

.footer-menu-icon:hover > img,
.footer-menu-icon:hover > label > img,
.footer-menu-icon:hover > a > img {
    transform: scale(1.3);
}

/* Rotation combinée avec scale pour #gear quand #menu-gear-display a la classe rotation */
#menu-gear-display.rotation:hover > #gear {
    transform: scale(1.3) rotate(60deg);
}

.tooltiptext {
    font-family: Verdana;
    font-size: 10px;
    visibility: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    width: 178px;
    height: 10px;
    /* Position du tooltip */
    position: absolute;
    bottom: 110px;
    right: 10px;
    text-align: right;
    z-index: 1;
}

.userlist-folded > main > #right-panel > #footer-menu > .footer-menu-icon:hover .tooltiptext {
    visibility: visible;
    position: absolute;
    right: 64px;
    top: 0;
    text-align: right;
    top: 16px;
}


main > #right-panel > #footer-menu > .footer-menu-icon:hover .tooltiptext {
    visibility: visible;
    right: 28px;
}

@-webkit-keyframes fader {
    0% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }

    50% {
        -webkit-filter: hue-rotate(180deg);
        filter: hue-rotate(180deg);
    }

    100% {
        -webkit-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

@keyframes fader {
    0% {
        -webkit-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }

    50% {
        -webkit-filter: hue-rotate(180deg);
        filter: hue-rotate(180deg);
    }

    100% {
        -webkit-filter: hue-rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

.pokeball {
    width: 17px;
    height: 17px;
    margin-top: 6px;
}

.sword {
    width: 24px;
    height: auto;
    right: 40px;
    position: absolute;
    display: none;
    z-index: 999;
    padding-top: 7px;
}

#userlist > li:hover .sword {
    display: block;
}


/******* USERLIST FOLDING ******/

.userlist-folded #right-panel {
    width: 50px;
    position: absolute;
    right: 0;
    z-index: 1000;
    top: -2px;
}

.userlist-folded #chat > .log > div > div,
.userlist-folded #chat div.part > div > div {
    margin-left: 50px;
}

@media screen and (max-width: 680px) {

    .userlist-folded #chat > .log > div > div,
    .userlist-folded #chat div.part > div > div {
        margin-left: 0;
    }

    .cozy.userlist-folded #footer-menu {
        position: relative;
        right: 12px;
    }

    .cozy.userlist-folded > main > #right-panel > #footer-menu > .footer-menu-icon:hover .tooltiptext {
        display: none !important;
    }

    .night header, .night #window > div:first-child {
        background: none;
    }
}


.userlist-folded #userlist {
    display: none;
}


.userlist-folded .footer-menu-icon {
    overflow: unset;
}

.userlist-folded #footer-menu {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    width: 100%;
    grid: none;
    height: 100%;
    overflow-y: scroll;
    gap: 8px;
}

.userlist-folded #vol {
    order: 1;
}

.userlist-folded #upload {
    order: 2;
}

.userlist-folded #record {
    order: 3;
}

.userlist-folded #menu-gear-display {
    order: 4;
}

.userlist-folded #chest {
    order: 5;
}

.userlist-folded #bnl-link {
    order: 6;
}

.userlist-folded #menu-wiki-display {
    order: 7;
}

.userlist-folded #userlist-toggle {
    order: 8;
}

.userlist-folded header {
    padding-right: 0px;
    position: relative;
    z-index: 1;
}

.userlist-folded .tooltiptext {
    top: 60px;
    right: 60px;
}

.userlist-folded .menu-popover {
    right: 70px;
}

.userlist-folded #record-menu {
    right: 70px;
}

.userlist-folded #inventory_display {
    right: 70px;
}

.userlist-folded #chat {
    padding-right: 50px;
}

/* Snowflakes animation */
.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px #000;
}

.snowflake,
.snowflake .inner {
    animation-iteration-count: infinite;
    animation-play-state: running
}

@keyframes snowflakes-fall {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(110vh)
    }
}

@keyframes snowflakes-shake {

    0%,
    100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(80px)
    }
}

.snowflake {
    position: fixed;
    top: -10%;
    z-index: 9999;
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    animation-name: snowflakes-shake;
    animation-duration: 3s;
    animation-timing-function: ease-in-out
}

.snowflake .inner {
    animation-duration: 10s;
    animation-name: snowflakes-fall;
    animation-timing-function: linear
}

/* Lightrope effect */
#lightrope {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 5000;
    margin: -15px 0 0 0;
    padding: 0;
    pointer-events: none;
    width: 100%;

    li {
        position: relative;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
        width: 12px;
        height: 28px;
        border-radius: 50%;
        margin: 25px;
        display: inline-block;
        background: #00f7a5;
        box-shadow: 0px 4.6px 24px 3px #00f7a5;
        -webkit-animation-name: flash-1;
        animation-name: flash-1;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }

    li:nth-child(2n+1) {
        background: aqua;
        box-shadow: 0px 4.6px 24px 3px rgba(0, 255, 255, 0.5);
        -webkit-animation-name: flash-2;
        animation-name: flash-2;
        -webkit-animation-duration: 0.4s;
        animation-duration: 0.4s;
    }

    li:nth-child(4n+2) {
        background: #f70094;
        box-shadow: 0px 4.6px 24px 3px #f70094;
        -webkit-animation-name: flash-3;
        animation-name: flash-3;
        -webkit-animation-duration: 1.1s;
        animation-duration: 1.1s;
    }

    li:nth-child(odd) {
        -webkit-animation-duration: 1.8s;
        animation-duration: 1.8s;
    }

    li:nth-child(3n+1) {
        -webkit-animation-duration: 1.4s;
        animation-duration: 1.4s;
    }

    li:before {
        content: "";
        position: absolute;
        background: #222;
        width: 10px;
        height: 9px;
        border-radius: 3px;
        top: -4.6666666667px;
        left: 1px;
    }

    li:after {
        content: "";
        top: -14px;
        left: 9px;
        position: absolute;
        width: 62px;
        height: 19px;
        border-bottom: solid #222 2px;
        border-radius: 50%;
    }

    li:last-child:after {
        content: none;
    }

    li:first-child {
        margin-left: -50px;
    }
}

@-webkit-keyframes flash-1 {

    0%,
    100% {
        background: #00f7a5;
        box-shadow: 0px 5px 24px 3px #00f7a5;
    }

    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 5px 24px 3px rgba(0, 247, 165, 0.2);
    }
}

@keyframes flash-1 {

    0%,
    100% {
        background: #00f7a5;
        box-shadow: 0px 5px 24px 3px #00f7a5;
    }

    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 5px 24px 3px rgba(0, 247, 165, 0.2);
    }
}

@-webkit-keyframes flash-2 {

    0%,
    100% {
        background: aqua;
        box-shadow: 0px 5px 24px 3px aqua;
    }

    50% {
        background: rgba(0, 255, 255, 0.4);
        box-shadow: 0px 5px 24px 3px rgba(0, 255, 255, 0.2);
    }
}

@keyframes flash-2 {

    0%,
    100% {
        background: aqua;
        box-shadow: 0px 5px 24px 3px aqua;
    }

    50% {
        background: rgba(0, 255, 255, 0.4);
        box-shadow: 0px 5px 24px 3px rgba(0, 255, 255, 0.2);
    }
}

@-webkit-keyframes flash-3 {

    0%,
    100% {
        background: #f70094;
        box-shadow: 0px 5px 24px 3px #f70094;
    }

    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 5px 24px 3px rgba(247, 0, 148, 0.2);
    }
}

@keyframes flash-3 {

    0%,
    100% {
        background: #f70094;
        box-shadow: 0px 5px 24px 3px #f70094;
    }

    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 5px 24px 3px rgba(247, 0, 148, 0.2);
    }
}

/* ===== STATUS BUBBLE FEATURE ===== */

@keyframes status-icon-bounce {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.35); }
    30%  { transform: scale(0.92); }
    45%  { transform: scale(1.22); }
    60%  { transform: scale(0.97); }
    80%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Mute buttons (eye + speaker): shrunk from the 24px default. No colour here
   on purpose — they inherit each theme's `#userlist > li > i` colour, like
   every other userlist icon (#1AC under bibw, the green accents under good). */
#userlist > li > i.reverse-mute-btn,
#userlist > li > i.mute-btn {
    font-size: 18px;
    line-height: 1;
    align-self: center;
    margin: 0;
    padding: 6px 4px;
}

/* The eye is the first right-aligned item of the row, so it carries the auto
   margin that pushes the [eye][volume] group right. */
#userlist > li > i.reverse-mute-btn {
    margin-left: auto;
}

#userlist > li > i.reverse-mute-btn.active {
    color: #c0392b;
}

/* Counts of users who (reverse-)muted this one — exponents pinned to the
   top-right corner of their button. Out of flow, so they never widen the row;
   the buttons themselves carry the "mute par N" tooltips. Emptied by JS (and
   thus hidden) when nobody muted the user. Themes shift `--mute-count-right`
   to match their own li padding-right. */
#userlist > li > .mute-count,
#userlist > li > .reverse-mute-count {
    position: absolute;
    top: 7px;
    right: var(--mute-count-right, 2px);
    font-size: 8px;
    font-weight: bold;
    line-height: 1;
    color: #c0392b;
    pointer-events: none;
}

/* the reverse-mute count rides the eye, one button-width (18px glyph +
   2×4px padding) further left than the mute count */
#userlist > li > .reverse-mute-count {
    right: calc(var(--mute-count-right, 2px) + 26px);
}

#userlist > li > .mute-count:empty,
#userlist > li > .reverse-mute-count:empty {
    display: none;
}

/* Global kill-switch for the per-user mute + reverse-mute feature. When
   /static/features.js sets muteButtons:false, features.js/script.js add the
   `.mute-features-off` class to <html>; these rules then hide every part of the
   feature's UI — the per-user buttons and their count badges, plus the Automute
   and Auto reverse-mute rows in the gear menu. Purely cosmetic: the enforcement
   is disabled in JS too, and nothing here touches anyone's saved mutes, so
   removing the class brings the whole feature back untouched. */
html.mute-features-off #userlist > li > i.mute-btn,
html.mute-features-off #userlist > li > i.reverse-mute-btn,
html.mute-features-off #userlist > li > .mute-count,
html.mute-features-off #userlist > li > .reverse-mute-count,
html.mute-features-off #automute,
html.mute-features-off #automute-check,
html.mute-features-off #autoreverse-mute-row {
    display: none !important;
}

/* Per-user icon — lives inside its <li>, invisible until the user has a status
   or has been muted. One icon, two visual states (white speech bubble vs.
   red transparent variant via filter). Living in the li means it moves
   correctly when other users leave. */
#userlist > li > .user-icon {
    position: absolute;
    left: 2px;
    top: 12px;
    width: 30px;
    height: 30px;
    cursor: default;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.12s ease, filter 0.18s ease;
    transform-origin: center center;
    z-index: 5;
    line-height: 0;
}

#userlist > li > .user-icon.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

/* While its bubble is open, hide the icon so only the overlay shows */
#userlist > li > .user-icon.bubble-open {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

#userlist > li > .user-icon .ui-fill { fill: #ffffff; stroke: #555555; }
#userlist > li > .user-icon .ui-dot  { fill: #555555; }

#userlist > li > .user-icon.muted.visible {
    opacity: 0.5;
    filter: hue-rotate(-25deg);
}
#userlist > li > .user-icon.muted .ui-fill { fill: #ff5252; stroke: #a02020; }
#userlist > li > .user-icon.muted .ui-dot  { fill: #a02020; }

#userlist > li > .user-icon.has-status:not(.muted).hovered,
#userlist > li > .user-icon.has-status:not(.muted):hover {
    transform: scale(1.18);
}

#userlist > li > .user-icon.muted.visible:hover,
#userlist > li > .user-icon.muted.visible.hovered {
    opacity: 0.9;
    transform: scale(1.18);
}

#userlist > li > .user-icon.bouncing {
    animation: status-icon-bounce 600ms ease-in-out;
}

#userlist > li > .user-icon svg {
    display: block;
    pointer-events: none;
}

/* Fixed-position overlay bubble — bypasses #userlist overflow-y:scroll clipping */
#status-bubble-overlay {
    position: fixed;
    background: linear-gradient(to bottom, #ffffff, #e3e8f0);
    border: 1.5px solid;
    border-radius: 10px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.4;
    max-width: 150px;
    min-width: 40px;
    word-wrap: break-word;
    white-space: normal;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    display: none;
    font-weight: normal;
    color: #2b2b2b;
}

/* Links in the bubble keep the bubble's color (incl. muted red variant),
   underlined so they read as clickable; long URLs wrap inside the bubble */
#status-bubble-overlay a {
    color: inherit;
    text-decoration: underline;
    word-break: break-all;
}

/* Tail pointing right, anchored near the top of the bubble */
#status-bubble-overlay::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent currentColor;
}

#status-bubble-overlay::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 9px;
    transform: translateX(-2px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent #ffffff;
    z-index: 1;
}

/* Red-themed variant of the shared bubble overlay (used when opened from muted icon) */
#status-bubble-overlay.muted-bubble {
    background: linear-gradient(to bottom, rgba(255, 240, 240, 0.85), rgba(255, 210, 210, 0.85));
    color: #c0392b;
    border-color: #c0392b;
}

#status-bubble-overlay.muted-bubble::after {
    border-color: transparent transparent transparent #c0392b;
}

#status-bubble-overlay.muted-bubble::before {
    border-color: transparent transparent transparent rgba(255, 240, 240, 0.85);
}

/* Hide the bubble overlay when userlist is folded or on mobile.
   Per-user icons live inside <li>, so they hide automatically with the userlist. */
body.userlist-folded #status-bubble-overlay {
    display: none !important;
}

@media screen and (max-width: 680px) {
    #status-bubble-overlay {
        display: none !important;
    }
}

/***** SESSION TIMER POPUP *****/

/* Elapsed-time readout in the parameters menu. Matches the bold black
   value styling used by the menu selects. */
#timer-elapsed {
    font-weight: 700;
    color: black;
    font-variant-numeric: tabular-nums;
}

/* Centered reminder popup. Reuses the menu palette (#f2fbff background,
   black text, #2D8CE5 accent) so it looks consistent in every theme. The
   large-spread box-shadow doubles as a full-window dimmed backdrop. */
#timer-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    width: 280px;
    max-width: 85vw;
    box-sizing: border-box;
    padding: 24px 20px;
    background-color: #f2fbff;
    color: #000;
    border: 1px solid #a7a7a7;
    border-radius: 18px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-weight: 700;
}

#timer-popup-text {
    display: block;
    font-size: 1.1em;
    line-height: 1.4em;
    margin-bottom: 18px;
}

#timer-popup-close {
    font-family: inherit;
    font-weight: 700;
    color: #fff;
    background-color: #2D8CE5;
    border: none;
    border-radius: 10px;
    padding: 8px 28px;
    cursor: pointer;
    transition: background-color 150ms ease;
}

#timer-popup-close:hover {
    background-color: #1c6fc0;
}

/***** WELCOME POPUP (invite links /i/<code>) *****/

/* Same visual language as the session-timer popup (menu palette: #f2fbff
   background, black text, #2D8CE5 accent) so it fits every theme. */
#welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
}

#welcome-overlay.hidden {
    display: none;
}

#welcome-box {
    width: 420px;
    max-width: 88vw;
    max-height: 85vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 26px 26px 22px;
    background-color: #f2fbff;
    color: #000;
    border: 1px solid #a7a7a7;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    font-size: 14px;
    line-height: 1.5;
}

#welcome-box h2 {
    margin: 0 0 12px;
    font-size: 1.35em;
    color: #2D8CE5;
}

#welcome-box ul {
    padding-left: 20px;
    margin: 10px 0;
}

#welcome-box li {
    margin-bottom: 6px;
}

#welcome-box .welcome-note {
    font-style: italic;
    color: #444;
}

#welcome-close {
    display: block;
    margin: 16px auto 0;
    font-family: inherit;
    font-weight: 700;
    font-size: 1em;
    color: #fff;
    background-color: #2D8CE5;
    border: none;
    border-radius: 10px;
    padding: 10px 34px;
    cursor: pointer;
    transition: background-color 150ms ease;
}

#welcome-close:hover {
    background-color: #1c6fc0;
}

/***** POKEDEX PANEL (idea box + current projects) *****/
/* Rides on .menu-popover for the box + per-theme positioning; everything below
   is only there to undo the "one label/control row per child div" styling that
   .menu-popover > div imposes, which doesn't suit stacked panes. */

#ideas-panel {
    grid-template-rows: auto 1fr;
    width: 320px;
    height: 420px;
}

#ideas-panel > div {
    display: block;
    border-bottom: none;
    font-weight: 400;
}

#ideas-tabs {
    display: flex;
    flex-direction: row;
    gap: 4px;
    border-bottom: 1px solid #9e9e9e;
    padding-bottom: 6px;
}

/* .hidden alone loses to .menu-popover > div, so the inactive pane needs this */
#ideas-panel .ideas-pane.hidden {
    display: none;
}

#ideas-panel .ideas-intro {
    font-size: .85em;
    color: #444;
    margin: 8px 0;
}

#idea-text {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
    font-size: .9em;
    color: #000;
    background: #fff;
    border: 1px solid #a7a7a7;
    border-radius: 8px;
    padding: 6px;
}

/* the global "button:focus, input:focus { border: 0 }" rule would strip this */
#idea-text:focus {
    border: 1px solid #2D8CE5;
    outline: none;
}

#ideas-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

#idea-status {
    font-size: .8em;
    color: #444;
}

#idea-status.idea-error {
    color: #c0392b;
}

#idea-send {
    background-color: #2D8CE5;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: .9em;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
}

#idea-send:hover {
    background-color: #1c6fc0;
}

#idea-send:disabled {
    background-color: #9e9e9e;
    cursor: default;
}

#projects-list {
    margin: 8px 0;
    padding-left: 20px;
    font-size: .9em;
    color: #000;
}

#projects-list > li {
    margin-bottom: 6px;
}