/* Wooden plaques */
.plaque {
    position: fixed;
    z-index: 1000;
    display: none;
    flex-direction: column;
    width: 60vh;
    max-width: 92vw;
    max-height: 82vh;
    background-image: url(../assets/ui/wood.png);
    background-size: cover;
    background-position: center;
    border-radius: 1vh;
    box-shadow: 0 1.2vh 3vh rgba(0, 0, 0, 0.85), inset 0 0 0 0.5vh rgba(58, 34, 20, 0.9), inset 0 0.6vh 0.6vh rgba(255, 255, 255, 0.14), inset 0 -0.6vh 1vh rgba(0, 0, 0, 0.5);
    transform-origin: 50% -6vh;
}
.plaque.corner {
    right: 1.5vh;
    bottom: 1.5vh;
}
.plaque.center {
    width: 56vh;
    left: 50%;
    margin-left: -28vh;
    top: 12vh;
}
.plaque.open {
    display: flex;
}
.plaqueTitle {
    margin: 1.4vh 4vh 0.5vh;
    text-align: center;
    font-size: 3.2vh;
    color: #f2dfc2;
    text-shadow: 0 0.3vh 0.4vh #000;
}
.plaqueBody {
    margin: 0.5vh 1.5vh 1.5vh;
    padding: 1.5vh;
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 0.6vh;
    box-shadow: inset 0 0.3vh 1vh rgba(0, 0, 0, 0.8);
    overflow-y: auto;
    min-height: 0;
}
.plaqueBody::-webkit-scrollbar {
    width: 1vh;
}
.plaqueBody::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.5vh;
}
.plaqueBody::-webkit-scrollbar-thumb {
    background: #6b4830;
    border-radius: 0.5vh;
    box-shadow: inset 0 0 0.3vh rgba(255, 255, 255, 0.25);
}
.plaqueBody p {
    font-family: "Open Sans", sans-serif;
    font-size: 2.1vh;
    color: #eee;
    user-select: text;
    margin: 0 0 1.2vh;
}
.plaqueBody p:last-child {
    margin-bottom: 0;
}
.plaqueBody .centerText {
    text-align: center;
}
.plaqueBody h3 {
    font-size: 2.6vh;
    margin: 1vh 0 0.5vh;
}
.plaqueBody h5 {
    margin: 1vh 0 0.4vh;
    font-size: 2.2vh;
    color: #f2dfc2;
}
.plaqueBody.credits h6 {
    margin: 0.5vh 0;
    padding: 1vh;
    font-size: 4vh;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 10px #000;
}
/* Secret "Oops! All Kings" button, hidden among the credits */
#secretKing {
    display: block;
    width: 5vh;
    height: 5vh;
    margin: 2vh auto 0;
    background-image: url(../assets/ui/wood.png);
    background-size: 220%;
    border-radius: 0.6vh;
    box-shadow: 0 0.4vh 0.8vh rgba(0, 0, 0, 0.6), inset 0 0.2vh 0 rgba(255, 255, 255, 0.18), inset 0 -0.4vh 0.6vh rgba(0, 0, 0, 0.45);
    opacity: 0.35;
    transition: opacity 0.25s ease, filter 0.25s ease;
}
#secretKing::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../assets/pieces/cburnett/wK.svg);
    background-size: 75%;
    background-position: center;
    background-repeat: no-repeat;
}
#secretKing:hover {
    opacity: 1;
    filter: brightness(1.15);
}
#secretKing:active {
    transform: translateY(0.2vh);
    box-shadow: inset 0 0.3vh 0.8vh rgba(0, 0, 0, 0.7);
}
/* Credits: the piece-set attributions. Smaller than the names above them —
   the artists are thanked, not billed over the game. */
.plaqueBody .attribution {
    margin-top: 2.5vh;
    padding-top: 1.5vh;
    border-top: 0.2vh solid rgba(255, 255, 255, 0.12);
}
.plaqueBody .attribution p,
.plaqueBody .attribution li {
    font-family: "Open Sans", sans-serif;
    font-size: 1.7vh;
    color: #cfc0ab;
    user-select: text;
}
.plaqueBody .attribution ul {
    margin: 0 0 1.2vh;
    padding-left: 2.2vh;
}
.plaqueBody .attribution li {
    margin-bottom: 0.3vh;
}
.plaqueBody .attribution b {
    color: #f2dfc2;
}
.plaqueBody .attribution code {
    font-size: 1.5vh;
    color: #f2dfc2;
}

/* Settings: the piece-set picker. Each set is a carved tile with its white king
   standing on it. */
.pieceSetGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8vh;
    margin-bottom: 1vh;
}
.pieceSetBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8vh 0.4vh 0.6vh;
    border-radius: 0.6vh;
    background-image: url(../assets/ui/wood.png);
    background-size: 300%;
    box-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.5), inset 0 0.2vh 0 rgba(255, 255, 255, 0.14), inset 0 -0.3vh 0.6vh rgba(0, 0, 0, 0.45);
    /* Dimmed, but not so far that the credit under it stops being readable:
       two of these sets are CC BY, and an attribution nobody can read is not
       an attribution. */
    opacity: 0.85;
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.pieceSetBtn:hover {
    opacity: 1;
    filter: brightness(1.12);
}
.pieceSetBtn.chosen {
    opacity: 1;
    box-shadow: 0 0 0 0.3vh #d8b98d, 0 0.3vh 0.8vh rgba(0, 0, 0, 0.6), inset 0 0.2vh 0 rgba(255, 255, 255, 0.2);
}
.pieceSetArt {
    width: 5.5vh;
    height: 5.5vh;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0.2vh 0.3vh rgba(0, 0, 0, 0.55));
}
.pieceSetName {
    margin-top: 0.3vh;
    font-family: "Open Sans", sans-serif;
    font-size: 1.7vh;
    color: #f2dfc2;
    text-shadow: 0 0.2vh 0.3vh #000;
}
.pieceSetCredit {
    font-family: "Open Sans", sans-serif;
    font-size: 1.35vh;
    line-height: 1.3;
    text-align: center;
    color: #dcc9ac;
    text-shadow: 0 0.1vh 0.3vh #000, 0 0 0.4vh #000;
}

/* Settings: the toggle row above the piece-set picker. Three wooden icon
   buttons; the icon itself flips with the state (speaker/muted, carved/flat
   gem, enter/leave fullscreen) and an "on" button wears the same lit frame
   as a chosen piece set, so the two vocabularies match. */
.settingToggles {
    display: flex;
    gap: 0.8vh;
    margin-bottom: 1.4vh;
}
.toggleBtn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4vh;
    padding: 0.9vh 0.4vh 0.7vh;
    border-radius: 0.6vh;
    background-image: url(../assets/ui/wood.png);
    background-size: 300%;
    box-shadow: 0 0.3vh 0.6vh rgba(0, 0, 0, 0.5), inset 0 0.2vh 0 rgba(255, 255, 255, 0.14), inset 0 -0.3vh 0.6vh rgba(0, 0, 0, 0.45);
    opacity: 0.7;
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.toggleBtn:hover {
    opacity: 1;
    filter: brightness(1.12);
}
.toggleBtn.on {
    opacity: 1;
    box-shadow: 0 0 0 0.3vh #d8b98d, 0 0.3vh 0.8vh rgba(0, 0, 0, 0.6), inset 0 0.2vh 0 rgba(255, 255, 255, 0.2);
}
.toggleIcon {
    width: 3.4vh;
    height: 3.4vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0.2vh 0.3vh rgba(0, 0, 0, 0.55));
}
.toggleLabel {
    font-family: "Open Sans", sans-serif;
    font-size: 1.5vh;
    color: #f2dfc2;
    text-shadow: 0 0.2vh 0.3vh #000;
}

/* Settings: a labelled row (the volume slider lives in one). */
.settingRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5vh;
    padding: 1.2vh 0;
    border-top: 0.2vh solid rgba(255, 255, 255, 0.12);
}
.settingLabel {
    font-family: "Open Sans", sans-serif;
    font-size: 2.1vh;
    color: #f2dfc2;
}
.settingLabel span {
    display: block;
    margin-top: 0.2vh;
    font-size: 1.5vh;
    line-height: 1.35;
    color: #c0ab92;
}
.settingSlider {
    flex: none;
    width: 16vh;
    height: 2.4vh;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.settingSlider::-webkit-slider-runnable-track {
    height: 0.8vh;
    border-radius: 0.4vh;
    background-color: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0.3vh 0.6vh rgba(0, 0, 0, 0.8);
}
.settingSlider::-moz-range-track {
    height: 0.8vh;
    border-radius: 0.4vh;
    background-color: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0.3vh 0.6vh rgba(0, 0, 0, 0.8);
}
.settingSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2.4vh;
    height: 2.4vh;
    margin-top: -0.8vh;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e9d6ac, #7a5636 55%, #241207 90%);
    box-shadow: 0 0.2vh 0.4vh rgba(0, 0, 0, 0.8);
}
.settingSlider::-moz-range-thumb {
    width: 2.4vh;
    height: 2.4vh;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e9d6ac, #7a5636 55%, #241207 90%);
    box-shadow: 0 0.2vh 0.4vh rgba(0, 0, 0, 0.8);
}
.plaqueBody .settingNote {
    font-size: 1.5vh;
    line-height: 1.4;
    color: #c0ab92;
    border-top: 0.2vh solid rgba(255, 255, 255, 0.12);
    padding-top: 1.2vh;
}

/* Four modes across one plaque row left each button ~100px: labels wrapped
   and the left-pinned icons sat on top of them. Two per row gives every
   label its line and every icon its column. */
.plaqueModeBtns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8vh;
    margin-top: 1.5vh;
}
.plaqueModeBtns .modeBtn {
    flex: 1 1 40%;
    margin-bottom: 0;
    padding: 0.8vh;
    font-size: 2vh;
}
/* Full-screen shade behind the saves browser. It sits over every other layer
   (the sidebar and its drawer top out at z-index 1001), so while the window is
   open nothing else in the game can be clicked — play is frozen. Clicking the
   shade itself closes the window: it carries the same data-action as the ✕. */
#plaqueShade {
    position: fixed;
    inset: 0;
    z-index: 1002;
    display: none;
    background-color: rgba(15, 6, 0, 0.55);
}
#plaqueShade.open {
    display: block;
}
#plaqueSaves {
    z-index: 1003; /* above its own shade */
}

.nail {
    position: absolute;
    width: 1.4vh;
    height: 1.4vh;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e9d6ac, #7a5636 55%, #241207 90%);
    box-shadow: 0 0.2vh 0.4vh rgba(0, 0, 0, 0.8);
}
.nail.tl { top: 1vh; left: 1vh; }
.nail.tr { top: 1vh; right: 1vh; }
.nail.bl { bottom: 1vh; left: 1vh; }
.nail.br { bottom: 1vh; right: 1vh; }
.plaqueClose {
    position: absolute;
    top: 0.8vh;
    right: 3.2vh;
    width: 2.8vh;
    height: 2.8vh;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.45);
    color: #d8b98d;
    font-size: 1.7vh;
    line-height: 1;
    box-shadow: inset 0 0.2vh 0.5vh #000;
    z-index: 1;
}
.plaqueClose:hover {
    color: #fff;
}

@media screen and (max-width: 1011px) {
    .plaque.corner {
        right: 1vh;
        bottom: 1vh;
    }
    .plaque.center {
        width: auto;
        left: 2vw;
        right: 2vw;
        margin-left: 0;
    }
}