:root {
    --paper: #f5eedc;
    --paper-line: rgba(87, 127, 157, 0.22);
    --paper-line-strong: rgba(87, 127, 157, 0.32);
    --ink: #263241;
    --ink-soft: #4f6275;
    --page-blue: #1f6fae;
    --marker-yellow: rgba(255, 238, 0, 0.82);
    --notebook-grid: 28px;
    --notebook-half: calc(var(--notebook-grid) / 2);
    --page-content-grid-offset: var(--notebook-grid);
    --page-text-baseline-shift: 5px;
    --gamestat-row-height: 32px;
    --marker-lift: 5px;
    --pen-blue: #253f8f;
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--paper);
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    font-family: var(--font-main);
    background:
        linear-gradient(var(--paper-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--paper-line) 1px, transparent 1px),
        var(--paper);
    background-size: var(--notebook-grid) var(--notebook-grid), var(--notebook-grid) var(--notebook-grid), auto;
}

button {
    font: inherit;
}

.material-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

a {
    color: var(--page-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
    color: var(--page-blue);
}

.game-page {
    width: 100%;
    max-width: 620px;
    padding: 0 16px var(--notebook-half);
}

.breadcrumbs {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: var(--notebook-grid);
}

.breadcrumbs a {
    color: var(--page-blue);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.breadcrumbs span {
    margin: 0 4px;
}

.breadcrumbs span[aria-current="page"] {
    position: relative;
    z-index: 0;
    display: inline-block;
    color: var(--page-blue);
}

.breadcrumbs span[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -5px;
    bottom: var(--marker-lift);
    z-index: -1;
    height: 1.35em;
    background: var(--marker-yellow);
    border-radius: 3px 6px 4px 5px;
    clip-path: polygon(1% 20%, 6% 8%, 14% 14%, 24% 5%, 36% 12%, 48% 6%, 60% 14%, 73% 7%, 84% 15%, 94% 10%, 99% 22%, 98% 88%, 92% 96%, 80% 90%, 68% 97%, 56% 91%, 43% 98%, 29% 90%, 18% 95%, 7% 88%, 1% 80%);
    transform: rotate(-1.2deg);
}

.game-hero {
    margin: 0 0 var(--notebook-grid);
    padding: 0 4px;
    text-align: left;
}

.game-hero h1 {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    letter-spacing: 0;
    line-height: var(--notebook-grid);
    text-transform: uppercase;
}

.game-hero p {
    position: relative;
    top: var(--page-text-baseline-shift);
    max-width: 34rem;
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    line-height: var(--notebook-grid);
}

.game-screen-layer {
    position: relative;
    margin: 0;
    padding: 0;
}

.game-screen-sheet {
    position: relative;
    padding: 8px 8px 12px;
}

.gamestat-module {
    position: relative;
    margin: 0 0 10px;
}

.gamestat-row {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(var(--gamestat-columns, 3), 1fr);
    grid-template-rows: repeat(2, var(--gamestat-row-height));
    gap: 0;
    background: transparent;
    border: 0;
    transform: rotate(-0.45deg);
    transform-origin: 52% 48%;
}

.mini-status-panel {
    position: absolute;
    top: calc((var(--gamestat-row-height) * 2) + 10px);
    right: 0;
    z-index: 14;
    display: grid;
    width: min(100%, 260px);
    gap: 5px;
    padding: 13px 14px 14px;
    color: rgba(28, 33, 34, 0.88);
    background: rgba(255, 248, 218, 0.97);
    border: 1px solid rgba(188, 153, 61, 0.72);
    box-shadow:
        0 13px 24px rgba(40, 31, 18, 0.2),
        -2px 2px 0 rgba(109, 83, 31, 0.14),
        inset 0 -4px 0 rgba(145, 104, 23, 0.08);
    transform: rotate(0.6deg);
}

.mini-status-panel[hidden] {
    display: none;
}

.mini-status-panel p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
}

.mini-status-panel__close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 24px;
    height: 24px;
    color: rgba(28, 33, 34, 0.78);
    cursor: pointer;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 22px;
}

.mini-status-panel__title,
.mini-status-panel .mini-status-panel__focus-label {
    display: block;
    padding-right: 22px;
    color: rgba(37, 63, 143, 0.92);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 11px;
    font-weight: 900;
    line-height: 15px;
    text-transform: uppercase;
}

.mini-status-panel .mini-status-panel__focus-label {
    margin-top: 4px;
    padding-right: 0;
    color: rgba(64, 43, 24, 0.72);
}

.mini-status-panel .mini-status-panel__focus {
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 18px;
}

.mini-status-panel__link {
    width: max-content;
    max-width: 100%;
    margin-top: 4px;
    color: rgba(37, 63, 143, 0.95);
    font-size: 13px;
    font-weight: 900;
    line-height: 18px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gamestat-card {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.gamestat-card-layer {
    vector-effect: non-scaling-stroke;
}

.gamestat-card-face {
    fill: #d2b48c;
    filter: url(#cardboard-grain);
    stroke: rgba(108, 82, 51, 0.38);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.gamestat-item {
    display: contents;
}

.gamestat-notebook-link {
    position: relative;
    z-index: 2;
    display: grid;
    grid-column: 4;
    grid-row: 1 / 3;
    grid-template-rows: repeat(2, var(--gamestat-row-height));
    min-width: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    font: inherit;
}

.gamestat-label,
.gamestat-value {
    position: relative;
    z-index: 1;
    display: block;
    height: var(--gamestat-row-height);
    padding: 0 5px;
    overflow: hidden;
    color: rgba(64, 43, 24, 0.78);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: var(--gamestat-row-height);
    text-align: center;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 0 rgba(255, 239, 203, 0.34),
        0 -1px 0 rgba(64, 43, 24, 0.24);
    white-space: nowrap;
    background: transparent;
}

.gamestat-item:nth-of-type(1) > .gamestat-label,
.gamestat-item:nth-of-type(1) > .gamestat-value {
    grid-column: 1;
}

.gamestat-item:nth-of-type(2) > .gamestat-label,
.gamestat-item:nth-of-type(2) > .gamestat-value {
    grid-column: 2;
}

.gamestat-item:nth-of-type(3) > .gamestat-label,
.gamestat-item:nth-of-type(3) > .gamestat-value {
    grid-column: 3;
}

.gamestat-item:nth-of-type(4) > .gamestat-label,
.gamestat-item:nth-of-type(4) > .gamestat-value {
    grid-column: 4;
}

.gamestat-label {
    grid-row: 1;
    margin: 0;
    text-transform: uppercase;
    transform: translateY(4px);
}

.gamestat-value {
    grid-row: 2;
    margin: 0;
    color: rgba(46, 30, 15, 0.84);
    text-shadow:
        0 1px 0 rgba(255, 239, 203, 0.18),
        0 -1px 0 rgba(39, 24, 11, 0.46),
        1px 0 0 rgba(255, 239, 203, 0.1),
        -1px 0 0 rgba(39, 24, 11, 0.22);
    transform: translateY(-4px);
}

.gamestat-notebook-label,
.gamestat-notebook-value {
    color: rgba(26, 85, 159, 0.96);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.game-slot-module {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.gameplay-module {
    position: relative;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.paper-tile-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.paper-tile-layer,
.paper-tile-top {
    vector-effect: non-scaling-stroke;
}

.paper-tile-top--grain {
    filter: url(#tile-paper-grain);
}

.paper-tile-motion-appear {
    animation: paper-tile-pop-in 0.18s ease-out;
}

.paper-tile-motion-emphasis {
    animation: paper-tile-press-pop 0.18s ease-out;
}

.paper-tile-motion-press {
    animation: paper-tile-press 0.14s ease-out;
}

@keyframes paper-tile-pop-in {
    0% {
        opacity: 0;
        transform: rotate(calc(var(--tile-rotation, 0deg) - 1deg)) scale(0.92) translateY(-2px);
    }

    100% {
        opacity: 1;
        transform: rotate(var(--tile-rotation, 0deg)) scale(1) translateY(0);
    }
}

@keyframes paper-tile-press-pop {
    0% {
        transform: rotate(var(--tile-rotation, 0deg)) scale(1);
    }

    45% {
        transform: rotate(calc(var(--tile-rotation, 0deg) + 0.35deg)) scale(0.985) translateY(1px);
    }

    100% {
        transform: rotate(var(--tile-rotation, 0deg)) scale(1) translateY(0);
    }
}

@keyframes paper-tile-press {
    0% {
        transform: rotate(var(--tile-rotation, 0deg)) translateY(0);
    }

    50% {
        transform: rotate(var(--tile-rotation, 0deg)) translateY(1px);
    }

    100% {
        transform: rotate(var(--tile-rotation, 0deg)) translateY(0);
    }
}

@keyframes stamp-toast-enter {
    0% {
        opacity: 0;
        transform: rotate(-2deg) translateY(-12px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: rotate(-1deg) translateY(0) scale(1);
    }
}

@keyframes stamp-toast-leave {
    0% {
        opacity: 1;
        transform: rotate(-1deg) translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: rotate(0.5deg) translateY(-8px) scale(0.98);
    }
}

.overlay-layer {
    position: absolute;
    inset: -10px;
    z-index: 10;
    display: grid;
    padding: 24px 18px;
    background: rgba(245, 238, 220, 0.48);
    backdrop-filter: blur(4px) sepia(20%);
    -webkit-backdrop-filter: blur(4px) sepia(20%);
    place-items: center;
    text-align: center;
    transition: opacity 0.24s ease;
}

.overlay-hidden {
    opacity: 0;
    pointer-events: none;
}

.overlay-visible {
    opacity: 1;
    pointer-events: auto;
}

.stamp-toast-stack {
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    z-index: 12;
    display: grid;
    justify-items: end;
    pointer-events: none;
}

.stamp-toast {
    display: grid;
    max-width: min(100%, 270px);
    min-height: 58px;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 13px 10px 11px;
    color: rgba(27, 35, 40, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 248, 218, 0.96), rgba(246, 231, 166, 0.96));
    border: 1px solid rgba(188, 153, 61, 0.72);
    border-radius: 4px;
    box-shadow:
        0 10px 20px rgba(40, 31, 18, 0.18),
        -2px 2px 0 rgba(109, 83, 31, 0.16),
        inset 0 -4px 0 rgba(145, 104, 23, 0.1);
    transform: rotate(-1deg);
    animation: stamp-toast-enter 0.28s ease-out both;
}

.stamp-toast--leaving {
    animation: stamp-toast-leave 0.28s ease-in both;
}

.stamp-toast__mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #b64034;
    font-size: 21px;
    line-height: 1;
    border: 2px solid rgba(182, 64, 52, 0.76);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 247, 220, 0.82);
}

.stamp-toast__copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.stamp-toast__title,
.stamp-toast__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stamp-toast__title {
    color: rgba(37, 63, 143, 0.92);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 11px;
    font-weight: 900;
    line-height: 14px;
    text-transform: uppercase;
}

.stamp-toast__label {
    color: rgba(28, 33, 34, 0.88);
    font-size: 16px;
    font-weight: 900;
    line-height: 20px;
}

.msg-container {
    display: grid;
}

.message-sticker {
    --sticker-fill: #91d389;
    --sticker-stroke: #5fa75b;
    --sticker-underlay: rgba(40, 48, 34, 0.28);
    position: relative;
    isolation: isolate;
    width: min(100%, 278px);
    min-height: 168px;
    padding: 26px 24px 24px;
    place-items: center;
    transform: rotate(-1.2deg);
}

.message-sticker.is-lose {
    --sticker-fill: #dc6f66;
    --sticker-stroke: #b84f48;
    --sticker-underlay: rgba(57, 31, 28, 0.32);
    transform: rotate(1.1deg);
}

.message-sticker-underlay,
.message-sticker-face {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.message-sticker-underlay path {
    fill: var(--sticker-underlay);
}

.message-sticker-face {
    z-index: -1;
    filter: url(#message-sticker-grain);
}

.message-sticker-face path {
    fill: var(--sticker-fill);
    stroke: var(--sticker-stroke);
    stroke-width: 1.2;
}

.msg-content {
    position: relative;
    z-index: 1;
}

.msg-title {
    margin: 0;
    color: rgba(28, 33, 34, 0.88);
    font-size: 24px;
    font-weight: 900;
    line-height: 28px;
    text-transform: uppercase;
}

.msg-body {
    margin: 8px 0 0;
    color: rgba(28, 33, 34, 0.82);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.notebook-progress {
    display: grid;
    gap: 2px;
    margin: 11px 0 0;
    padding: 8px 10px;
    color: rgba(28, 33, 34, 0.84);
    background: rgba(255, 248, 218, 0.36);
    border: 1px dashed rgba(37, 63, 143, 0.42);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: left;
}

.notebook-progress p {
    margin: 0;
}

.notebook-progress__title {
    color: rgba(37, 63, 143, 0.88);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 10px;
    font-weight: 900;
    line-height: 13px;
    text-transform: uppercase;
}

.notebook-progress__link {
    width: max-content;
    max-width: 100%;
    margin-top: 2px;
    color: rgba(37, 63, 143, 0.95);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.overlay-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.action-btn {
    --action-fill: #f7e6a2;
    --action-stroke: #d3b85f;
    --action-shadow: rgba(35, 29, 20, 0.4);
    position: relative;
    isolation: isolate;
    min-height: 42px;
    padding: 8px 10px;
    color: rgba(28, 33, 34, 0.88);
    cursor: pointer;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-radius: 0;
    transform: rotate(var(--action-tilt, -0.8deg));
}

.action-btn:nth-child(2) {
    --action-fill: #8ed3e3;
    --action-stroke: #5faebd;
    --action-tilt: 1deg;
}

.is-lose .action-btn:first-child {
    --action-fill: #f3dc76;
    --action-stroke: #d3bc4e;
}

.is-lose .action-btn:nth-child(2) {
    --action-fill: #f2a095;
    --action-stroke: #cf6b61;
}

.action-sticker-underlay,
.action-sticker-face {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.action-sticker-underlay path {
    fill: var(--action-shadow);
}

.action-sticker-face {
    z-index: -1;
    filter: url(#message-sticker-grain);
}

.action-sticker-face path {
    fill: var(--action-fill);
    stroke: var(--action-stroke);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.action-btn-label {
    position: relative;
    z-index: 1;
}

.action-btn:hover,
.action-btn:focus-visible {
    filter: saturate(1.05);
    outline: none;
}

.game-controls-module {
    margin: 8px 0 0;
    padding: 4px 0;
}

.control-sticker-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.controls-layer {
    --control-sticker-size: 82px;
    --difficulty-meter-width: max-content;
    --controls-grid-columns: var(--control-sticker-size) var(--control-sticker-size) var(--control-sticker-size) var(--difficulty-meter-width);
    --controls-grid-gap: 8px;
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.controls-row {
    display: grid;
    grid-template-columns: var(--controls-grid-columns);
    align-items: stretch;
    gap: var(--controls-grid-gap);
}

.controls-key {
    --control-fill: #79cbd9;
    --control-stroke: #5fb5c4;
    --control-underlay: rgba(25, 23, 19, 0.54);
    --sticker-offset-y: 0px;
    --sticker-rotation: -1.05deg;
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: grid;
    width: var(--control-sticker-size);
    min-height: var(--control-sticker-size);
    color: #2c3033;
    cursor: pointer;
    font-size: 15px;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    border-radius: 0;
    place-items: center;
    transform: translateY(var(--sticker-offset-y)) rotate(var(--sticker-rotation));
    transform-origin: 50% 18%;
    -webkit-tap-highlight-color: transparent;
}

.controls-key-underlay,
.controls-key-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.controls-key-underlay {
    z-index: 0;
    transition: opacity 0.08s ease;
}

.controls-key-face {
    z-index: 1;
}

.controls-key-underlay path {
    fill: var(--control-underlay);
}

.controls-key-face path {
    fill: var(--control-fill);
    filter: url(#control-paper-grain);
    stroke: var(--control-stroke);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.controls-key:hover,
.controls-key:focus-visible {
    filter: saturate(1.04);
    outline: none;
}

.controls-key:active,
.controls-key.is-pressing {
    transform: translateY(calc(var(--sticker-offset-y) + 1px)) rotate(var(--sticker-rotation));
}

.controls-key:active .controls-key-underlay,
.controls-key.is-pressing .controls-key-underlay {
    opacity: 0.12;
}

.controls-key:disabled {
    cursor: default;
    opacity: 1;
}

.controls-key--undo {
    --control-fill: #f3dc76;
    --control-stroke: #d9bd4f;
    --control-underlay: rgba(29, 25, 18, 0.5);
    --sticker-offset-y: 2px;
    --sticker-rotation: 1.35deg;
}

.controls-key--undo:hover,
.controls-key--undo:focus-visible {
    --control-fill: #efd35f;
}

.controls-key--undo:disabled {
    --control-fill: rgba(243, 220, 118, 0.54);
    --control-stroke: rgba(191, 164, 64, 0.42);
    --control-underlay: rgba(29, 25, 18, 0.3);
    color: rgba(44, 48, 51, 0.44);
}

.controls-key--hint {
    --control-fill: #f3dc76;
    --control-stroke: #d9bd4f;
    --control-underlay: rgba(29, 25, 18, 0.5);
    --sticker-offset-y: 2px;
    --sticker-rotation: 1.35deg;
}

.controls-key--hint .controls-key-face {
    filter: none;
}

.controls-key--hint:disabled .controls-key-face,
.controls-key--hint:disabled .controls-key-label {
    opacity: 0.72;
}

.hint-face-state {
    display: none;
    fill: var(--control-fill);
    filter: url(#control-paper-grain);
    stroke: transparent;
    stroke-width: 0;
    vector-effect: non-scaling-stroke;
}

.controls-key--hint[data-hints-remaining="3"] .hint-face-state[data-hints="3"],
.controls-key--hint[data-hints-remaining="2"] .hint-face-state[data-hints="2"],
.controls-key--hint[data-hints-remaining="1"] .hint-face-state[data-hints="1"],
.controls-key--hint[data-hints-remaining="0"] .hint-face-state[data-hints="0"] {
    display: block;
}

.hint-tear-tab-shadow {
    fill: var(--control-underlay);
    stroke-width: 0;
    vector-effect: non-scaling-stroke;
}

.hint-tear-tab-shadow[data-hint-tab="1"] {
    transform: none;
    transform-origin: 14px 64px;
}

.hint-tear-tab-shadow[data-hint-tab="2"] {
    transform: none;
    transform-origin: 44px 64px;
}

.hint-tear-tab-shadow[data-hint-tab="3"] {
    transform: none;
    transform-origin: 74px 64px;
}

.hint-tear-tab-shadow.is-used {
    visibility: hidden;
    opacity: 0;
}

.controls-key--reset,
.controls-key--new {
    --control-fill: #d87066;
    --control-stroke: #bd5149;
    --control-underlay: rgba(30, 18, 15, 0.54);
    --sticker-offset-y: -2px;
    --sticker-rotation: -1.25deg;
}

.controls-key--reset:hover,
.controls-key--reset:focus-visible,
.controls-key--new:hover,
.controls-key--new:focus-visible {
    --control-fill: #d45f55;
}

.controls-key-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    align-content: center;
    align-items: center;
    justify-items: center;
    gap: 1px;
    overflow: hidden;
    padding: 0 8px;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-weight: 500;
    line-height: 0.92;
    white-space: normal;
}

.controls-key-label span {
    display: block;
}

.controls-difficulty-meter {
    position: relative;
    display: grid;
    min-height: 72px;
    align-content: center;
    justify-items: center;
    gap: 0;
    padding: 2px 4px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.controls-difficulty-level {
    position: relative;
    display: block;
    color: rgba(37, 63, 143, 0.5);
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 0.88;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.controls-difficulty-level::before {
    content: "";
    position: absolute;
    top: 58%;
    right: 11%;
    left: 16%;
    z-index: 1;
    height: 0.22em;
    background:
        linear-gradient(90deg, transparent 0 9%, rgba(250, 247, 238, 0.96) 9% 42%, transparent 42% 50%, rgba(250, 247, 238, 0.96) 50% 100%);
    transform: translateY(-50%) rotate(1.5deg);
}

.controls-difficulty-level::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 6%;
    left: 8%;
    z-index: 2;
    height: 0.42em;
    background:
        linear-gradient(90deg, rgba(250, 247, 238, 0.98) 0 21%, transparent 21% 25%, rgba(250, 247, 238, 0.98) 25% 61%, transparent 61% 66%, rgba(250, 247, 238, 0.98) 66% 100%);
    transform: translateY(-50%) rotate(-5deg);
    transform-origin: center;
}

.controls-difficulty-level:nth-child(even)::after {
    right: 13%;
    left: 5%;
    transform: translateY(-50%) rotate(4deg);
}

.controls-difficulty-level:nth-child(even)::before {
    right: 18%;
    left: 8%;
    transform: translateY(-50%) rotate(-2deg);
}

.controls-difficulty-level.is-active {
    color: var(--pen-blue);
}

.controls-difficulty-level.is-active::before,
.controls-difficulty-level.is-active::after {
    content: none;
}

.page-content {
    width: 100%;
    margin-top: var(--page-content-grid-offset);
    padding: 0 16px;
    color: var(--ink);
}

.content-block,
.faq-block,
.guide-block,
.how-to-play {
    width: 100%;
    margin: 0 0 var(--notebook-grid);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.content-block h2,
.faq-block h2,
.guide-block h2,
.how-to-play h2 {
    position: relative;
    top: var(--page-text-baseline-shift);
    display: inline;
    margin: 0;
    padding: 0 4px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    line-height: var(--notebook-grid);
    text-transform: uppercase;
    background:
        linear-gradient(177deg, transparent 0 15%, rgba(255, 238, 0, 0.7) 15% 86%, transparent 86% 100%),
        linear-gradient(2deg, transparent 0 24%, rgba(255, 238, 0, 0.5) 24% 94%, transparent 94% 100%),
        linear-gradient(90deg, rgba(255, 238, 0, 0.72), rgba(255, 238, 0, 0.82) 42%, rgba(255, 238, 0, 0.64));
    background-position: 0 4px, 0 5px, 0 4px;
    background-repeat: no-repeat;
    background-size: 100% 1.35em;
    border-radius: 3px 6px 4px 5px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.content-block p,
.faq-item p,
.line-list p,
.guide-section p,
.intro-block p {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
    line-height: var(--notebook-grid);
}

.intro-block,
.guide-block,
.faq-block {
    overflow: hidden;
}

.intro-block-content,
.guide-block-content,
.faq-block-content {
    padding: 0;
}

.guide-section,
.faq-item {
    margin-bottom: var(--notebook-grid);
}

.guide-section:last-child,
.faq-item:last-child {
    margin-bottom: 0;
}

.content-block h3,
.guide-section h3 {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
    line-height: var(--notebook-grid);
}

.faq-item h3 {
    position: relative;
    top: var(--page-text-baseline-shift);
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: var(--notebook-grid);
}

.line-list {
    margin: 0;
}

.related-games-list a {
    color: var(--page-blue);
    font-weight: 700;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (min-width: 641px) {

    .game-controls-module {
        margin: 8px 8px 0;
        padding: 8px;
    }

    .controls-layer {
        --control-sticker-size: 92px;
        --difficulty-meter-width: max-content;
        --controls-grid-columns: var(--control-sticker-size) var(--control-sticker-size) var(--control-sticker-size) var(--difficulty-meter-width);
        --controls-grid-gap: 16px;
    }

    .controls-difficulty-meter {
        min-height: 79px;
    }
}

@media (max-width: 640px) {

    .game-page {
        padding: 0 10px var(--notebook-half);
    }

    .game-hero {
        margin-bottom: var(--notebook-grid);
    }

    .game-screen-sheet {
        padding: 6px 4px 10px;
    }

    .content-block,
    .faq-block,
    .guide-block,
    .how-to-play {
        padding: 0;
    }

    .page-content {
        padding: 0 10px;
    }
}