:root {
    /* Buttons from sitenew, fields and panels from the illustrated siteold theme. */
    --pandora-gold-fill: linear-gradient(180deg, #fff6dc, #f0d28e 14%, #ddb35f 38%,
        #c9992f 54%, #cfa244 68%, #d8b25c 86%, #92671f);
    --pandora-gold-edge: #52380f;
    --pandora-gold-shadow: inset 0 1px 0 rgb(255 251 235 / .9), inset 0 -1px 0 rgb(74 50 12 / .55),
        0 2px 0 #3b2809, 0 5px 14px rgb(0 0 0 / .5);
    --pandora-dark-fill: linear-gradient(#2b383e, #1b1f23);
    --pandora-panel: linear-gradient(145deg, #2c4c58, #1f3238 55%, #18262c);
    --pandora-panel-edge: #786341;
    --pandora-field: rgba(28, 29, 28, .72);
    --pandora-field-edge: #826b3d;
}

.messenger__button,
#pandora-notice-poll .btn-primary,
#pandora-notice-poll [data-poll-voted="1"] [data-poll-close],
#app .btn-yellow,
#site-main .panel-user-actions .btn-yellow,
#site-main .login-form button,
#site-main .form-horizontal button[type="submit"] {
    --button-fill: var(--pandora-gold-fill);
    --button-shadow: var(--pandora-gold-shadow);
    --button-edge: var(--pandora-gold-edge);
    --button-ink: #1b1305;
    --button-inset: rgb(255 247 221 / .42);
    --button-text-shadow: 0 1px 0 rgb(255 246 216 / .5);
}

.messenger__button,
#pandora-notice-poll :is(.btn-primary, .btn-ghost) {
    position: relative;
    box-sizing: border-box;
    border: 1px solid var(--button-edge, #746641);
    background: var(--button-fill, var(--pandora-dark-fill));
    box-shadow: var(--button-shadow, none);
    color: var(--button-ink, #ecd6a5);
    text-shadow: var(--button-text-shadow, 0 1px 2px #000);
}

.messenger__button::before,
#pandora-notice-poll :is(.btn-primary, .btn-ghost)::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid var(--button-inset, transparent);
    pointer-events: none;
}

#pandora-notice-poll :is([data-notice], [data-poll]) .frame {
    background: linear-gradient(#18262c, #121619);
    box-shadow: inset 0 0 0 1px var(--pandora-panel-edge);
}

#pandora-notice-poll :is([data-notice], [data-poll]) .panel-header {
    background: var(--pandora-panel);
    border-color: var(--pandora-panel-edge);
    border-bottom-color: #a78756;
}

.footer-payment {
    display: block;
    padding-top: 15px;
}

.footer-payment img {
    width: 200px;
    height: auto;
}

.sidebar-frame {
    display: contents;
}

#site-main .panel-heading,
.main-header .shortcut-label,
.wrapper .mobile-navigation {
    display: none;
}

/* The illustrated desktop header needs 1132px at its original scale. */
@media (max-width: 1131px) {
    body > .wrapper {
        --pandora-panel: linear-gradient(145deg, #223b44, #19292e 55%, #141f24);
        min-height: 100vh;
        padding-bottom: 52px;
    }

    div.wrapper header figure {
        margin: 0 auto;
        padding: 12px 0;
        text-align: center;
    }

    div.wrapper header figure img {
        display: block;
        width: 78%;
        max-width: 440px;
        height: auto;
        margin: auto;
    }

    #site-main {
        --pandora-panel: linear-gradient(145deg, #1b2e35, #152327 55%, #10191d);
        box-sizing: border-box;
        width: 100%;
        max-width: 850px;
        margin: 0 auto;
        padding: 0 12px;
    }

    #site-main .main-header,
    #site-main .main-content {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: auto;
        height: auto;
        margin: 0 auto 16px;
        background: none;
    }

    #site-main .panel-login,
    #site-main .main-header > .panel-user,
    #site-main .main-side-center {
        grid-column: 1 / -1;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-width: 0;
        margin: 0;
        border: 1px solid var(--pandora-panel-edge);
        background: var(--pandora-panel);
        color: #d7c9a4;
    }

    #site-main .login-form,
    #site-main .panel-user-content {
        padding: 8px;
    }

    #site-main .login-form form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(64px, 26%);
        gap: 8px;
    }

    #site-main .login-form [name="username"],
    #site-main .login-form button {
        grid-column: 1 / -1;
    }

    #site-main .login-form form input:not([type="hidden"]),
    #site-main .login-form form button {
        width: 100%;
        min-width: 0;
        height: 44px;
        margin: 0;
        font-size: 16px;
    }

    #site-main :is(.login-form button, .panel-user-actions a, .panel-download a, .panel-shop a,
        #app .btn-yellow, .form-horizontal button[type="submit"]) {
        position: relative;
        box-sizing: border-box;
        border: 1px solid var(--button-edge, #746641);
        background: var(--button-fill, var(--pandora-dark-fill));
        box-shadow: var(--button-shadow, none);
        color: var(--button-ink, #ecd6a5) !important; /* Legacy .btn-yellow sets an important text colour. */
        text-shadow: var(--button-text-shadow, 0 1px 2px #000);
    }

    #site-main :is(.login-form button, .panel-user-actions a, .panel-download a, .panel-shop a,
        #app .btn-yellow, .form-horizontal button[type="submit"])::before {
        content: '';
        position: absolute;
        inset: 3px;
        border: 1px solid var(--button-inset, transparent);
        pointer-events: none;
    }

    #site-main input[type="text"],
    #site-main input[type="password"],
    #site-main input[type="email"],
    #site-main .form-horizontal select,
    #site-main .form-horizontal textarea {
        border: 1px solid var(--pandora-field-edge);
        background: var(--pandora-field);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .38);
        color: #f0e4c6;
    }

    #site-main input::placeholder {
        color: #c1c8bc;
        opacity: 1;
    }

    #site-main .login-form .login-form-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 16px;
        padding: 6px 0 0;
    }

    #site-main .login-form-links a {
        padding: 6px 0;
        color: #9ac5cb;
    }

    #site-main .main-header .user-details {
        padding: 9px 4px 12px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    #site-main .panel-user-actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 6px;
    }

    #site-main .panel-user-content .btn-yellow {
        display: grid;
        place-items: center;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 6px 2px;
        font-size: clamp(12px, 3vw, 15px);
        line-height: 1.2;
        margin: 0;
    }

    #site-main .panel-download,
    #site-main .panel-shop {
        width: auto;
        height: auto;
        margin: 0;
        background: none;
    }

    #site-main .panel-download a,
    #site-main .panel-shop a {
        inset: auto;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 46px;
        font-weight: bold;
    }

    .main-header .shortcut-label {
        display: inline;
    }

    #site-main .main-side-center {
        grid-row: 1;
    }

    #site-main .panel-login,
    #site-main .main-header > .panel-user,
    #site-main .main-side-center,
    #site-main .sidebar-frame {
        isolation: isolate;
    }

    #site-main .panel-heading {
        display: block;
        justify-self: stretch;
        margin: 0;
        text-transform: none;
    }

    #site-main .page-title,
    #site-main .panel-heading {
        position: relative;
        padding: 10px 22px 18px;
    }

    #site-main .page-title::before,
    #site-main .panel-heading::before {
        content: '';
        position: absolute;
        inset: 0 0 6px;
        z-index: -1;
        pointer-events: none;
        border-block: 1px solid #746445;
        background:
            linear-gradient(135deg, transparent 43%, #ae9865 48%, #655633 56%, transparent 61%) left top / 9px 9px no-repeat,
            linear-gradient(225deg, transparent 43%, #ae9865 48%, #655633 56%, transparent 61%) right top / 9px 9px no-repeat,
            radial-gradient(ellipse at center, #26383e, #19272c 62%, #10181c);
        box-shadow: inset 0 1px 2px #0d1416, inset 0 -2px 3px #10171a;
    }

    #site-main .page-title::after,
    #site-main .panel-heading::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 2px;
        width: 6px;
        height: 6px;
        border: 1px solid #a18b59;
        background: linear-gradient(135deg, #73623f, #283136 70%);
        transform: translateX(-50%) rotate(45deg);
        pointer-events: none;
    }

    #site-main .page {
        padding: 12px;
    }

    #contents {
        max-height: none;
        overflow: auto;
        padding: 0;
    }

    #app .table-responsive {
        max-width: 100%;
        overflow-x: auto;
    }

    #app .panel-user-buttons,
    #app .ranking-tab-btn,
    #app .form-group {
        max-width: 100%;
    }

    #app .panel-user > .panel-user-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
        width: 100%;
        padding: 4px 4px 14px;
    }

    #app .panel-user > .panel-user-buttons .btn-yellow {
        display: grid;
        place-items: center;
        width: 100%;
        height: auto;
        min-height: 44px;
        margin: 0;
        padding: 6px;
        line-height: 1.25;
    }

    #app .btn-yellow {
        max-width: 100%;
        background-size: 100% 100%;
    }

    #app .form-horizontal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    #app .form-horizontal select,
    #app .form-horizontal textarea {
        box-sizing: border-box;
        max-width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    #site-main .sidebar-frame {
        display: grid;
        justify-items: center;
        align-content: start;
        min-width: 0;
        row-gap: 12px;
        padding: 0 0 12px;
        border: 1px solid var(--pandora-panel-edge);
        background: var(--pandora-panel);
    }

    #site-main .main-side-left,
    #site-main .main-side-right {
        height: auto;
        min-height: 715px;
    }

    #site-main .ranking-buttons {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    #app .ranking-tab-btn {
        gap: 8px;
        justify-content: center;
    }

    #app .news {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        max-width: 493px;
        height: auto;
        display: flow-root;
        margin: 0 auto 30px;
        background-size: 100% 100%;
        overflow-wrap: break-word;
    }

    #app .news::before {
        content: '';
        float: left;
        width: 0;
        padding-top: 66.126%; /* Native parchment ratio: 326 / 493. */
    }

    #app .news .news-title {
        padding-inline: 16px;
    }

    #app .news .news-content {
        display: flow-root;
        height: auto;
        padding-bottom: 16px;
    }

    #app .news > .btn-large {
        position: absolute;
        top: calc(100% - 2px);
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }

    #app .news-content img,
    #app .news-content video {
        max-width: 100%;
        height: auto;
    }

    #app .pagination {
        box-sizing: border-box;
        max-width: 100%;
        background-size: 100% 100%;
    }

    #site-main :focus-visible,
    div.wrapper nav a:focus-visible {
        outline: 2px solid #edce85;
        outline-offset: 1px;
    }

    body > .wrapper > footer {
        padding: 16px 12px 0;
    }

    .wrapper > footer p {
        margin: 0 0 8px;
    }

    .footer-payment {
        display: grid;
        place-items: center;
        min-height: 44px;
        padding: 0;
    }

    .footer-payment img {
        width: 100px;
    }


}

@media (max-width: 767px) {
    .mobile-button {
        left: env(safe-area-inset-left, 0px);
        bottom: calc(var(--visible-notice-height, 0px) + env(safe-area-inset-bottom, 0px) + 5.5rem);
        z-index: 39;
        width: 44px;
        height: 104px;
    }

    .mobile-button img {
        position: absolute;
        top: 0;
        left: 0;
        width: 104px;
        transform-origin: top left;
        transform: rotate(90deg) translateY(-100%);
    }

    .mobile-button:focus-visible {
        outline: 2px solid #edce85;
        outline-offset: 1px;
    }
}

@media (max-width: 1131px) {
    div.wrapper > nav .desktop-navigation {
        display: none;
    }

    .wrapper .mobile-navigation {
        display: block;
    }

    div.wrapper > nav {
        height: auto;
        background: var(--pandora-panel);
        border-block: 1px solid var(--pandora-panel-edge);
    }

    .wrapper .menu-toggle {
        box-sizing: border-box;
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 48px;
        min-height: 44px;
        padding: 0;
        margin-right: 6px;
        border: 0;
        background: transparent;
        color: #e9c87c;
    }

    .wrapper .menu-toggle:focus-visible {
        outline: 2px solid #edce85;
        outline-offset: -2px;
    }

    .menu-icon {
        width: 20px;
        height: 10px;
        border-block: 2px solid currentColor;
        background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
    }

    .wrapper .menu-toggle::-webkit-details-marker {
        display: none;
    }

    div.wrapper > nav ul {
        display: block;
        max-width: none;
        height: auto;
        padding: 0 16px;
    }

    div.wrapper > nav a {
        display: grid;
        align-items: center;
        min-height: 44px;
        padding: 0;
        text-align: left;
    }

    div.wrapper > nav li {
        border-top: 1px solid var(--pandora-panel-edge);
    }
}

@media (max-width: 619px) {
    #site-main .main-content {
        grid-template-columns: minmax(0, 1fr);
    }

    #app .chestList a,
    #app .chestListSpecial a,
    #app .chestListSeasonal a {
        width: 49%;
    }

    #app .chestList img,
    #app .chestListSpecial img,
    #app .chestListSeasonal img {
        box-sizing: border-box;
        max-width: 100%;
    }
}

/* Leave room for the registration widget at its native 304px width. */
@media (max-width: 369px) {
    #site-main,
    #site-main .page {
        padding-left: 3px;
        padding-right: 3px;
    }
}

/* Keep the artwork, prize positions and tap targets on the same wheel scale. */
@media (max-width: 525px) {
    #app {
        --wheel-scale: .84;
    }

    #app .fortune-wheel,
    #app .fortune-container .level-section,
    #app .fortune-container .wheel-wrapper,
    #app .fortune-container .keys-slots {
        zoom: var(--wheel-scale);
    }
}

@media (max-width: 459px) {
    #app {
        --wheel-scale: .74;
    }
}

@media (max-width: 409px) {
    #app {
        --wheel-scale: .64;
    }
}

.messenger {
  box-sizing: border-box;
  --messenger-text: 22rem;
  --messenger-height: 3.5rem;
  position: fixed;
  right: 1.5rem;
  /* Widoczna belka komunikatu podnosi dymek o swoją wysokość (--visible-notice-height). */
  bottom: calc(1.5rem + var(--visible-notice-height, 0px));
  z-index: 40;
  display: flex;
  align-items: stretch;
  height: var(--messenger-height);
  background: linear-gradient(180deg, #0c3944 0%, #08252f 100%);
  border: 1px solid transparent;
  border-image: linear-gradient(
      160deg,
      color-mix(in oklab, #e9c87c 62%, transparent),
      color-mix(in oklab, #1d6971 78%, transparent) 45%,
      color-mix(in oklab, #a87524 48%, transparent)
    )
    1;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.6);
  animation: messenger-enter 500ms cubic-bezier(.16, 1, .3, 1) 650ms both;
}

/* Komórka tekstu zwija się do zera szerokości. Wysokość płytki jest równa
   szerokości pola z ikoną, więc jest ono kwadratem w każdym stanie
   i nic nie podskakuje, gdy zdanie znika. Szerokość zmienia się na komórce,
   a nie na tekście w środku, więc zdanie nie przelewa się w trakcie
   zwijania. Zwinięty tekst zostaje w drzewie dostępności i to on nazywa
   odnośnik, dlatego nie ma tu visibility ani display. */
.messenger__message {
  display: flex;
  align-items: center;
  overflow: hidden;
  animation: messenger-message 9550ms cubic-bezier(.16, 1, .3, 1) 2000ms both;
}

/* flex-shrink: 0, bo w zwijanej komórce tekst musi trzymać swoją szerokość
   — inaczej zdanie przelewałoby się w trakcie animacji. */
.messenger__text {
  box-sizing: border-box;
  flex-shrink: 0;
  display: block;
  width: var(--messenger-text);
  padding: 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #f1ece3;
}

.messenger__tag {
  font-weight: 700;
  color: #e9c87c;
}

/* Złote pole ma wygląd .btn-primary, ale jest wtopione w płytkę: bez cienia
   pod spodem, bez odskoku przy najechaniu i z krawędzią tylko od strony
   tekstu — resztę obwodu rysuje rama płytki. Podświetla się od najechania
   na cały odnośnik, nie na samo pole. */
.messenger__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  width: var(--messenger-height);
  font-size: 1.5rem;
  border: 0;
  border-left: 1px solid #52380f;
  box-shadow:
    inset 0 1px 0 rgb(255 251 235 / 0.9),
    inset 0 -1px 0 rgb(74 50 12 / 0.55);
}

.messenger__button:hover,
.messenger__button:active {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgb(255 251 235 / 0.9),
    inset 0 -1px 0 rgb(74 50 12 / 0.55);
}

.messenger:hover .messenger__button {
  filter: brightness(1.07);
}

.messenger:active .messenger__button {
  filter: brightness(0.97);
}

/* Na telefonie płytka jest węższa i bliżej krawędzi, żeby nie zasłaniała
   pól formularza logowania w dolnej części ekranu. */
@media (max-width: 639px) {
  .messenger {
    --messenger-text: min(15rem, calc(100vw - 5.5rem));
    right: 0.75rem;
    bottom: calc(0.75rem + var(--visible-notice-height, 0px));
  }

  /* Kwadrat zostaje ten sam, więc na wąskiej płytce zdanie idzie w trzy
     wiersze i musi się w nim zmieścić: stąd mniejszy stopień i ciaśniejsza
     interlinia. */
  .messenger__text {
    padding: 0 0.875rem;
    font-size: 0.75rem;
    line-height: 1.35;
  }
}

@keyframes messenger-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 9550 ms liczone od 2 s: rozwinięcie do 3 s (10%), spokój do 10 s (84%),
   zwijanie do 11,55 s. */
@keyframes messenger-message {
  0% {
    width: 0;
    opacity: 0;
  }
  10%,
  84% {
    width: var(--messenger-text);
    opacity: 1;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
    .messenger, .messenger__message { animation: none; }
    .messenger__message { width: 0; }
}