:root {
    color-scheme: light;
}

body {
    margin: 0 0 520px 0;
    background-color: #eef7ff;
    color: #263548;
    font-size: 16px;

    /* ★フォント適用（custom/preset/google 全対応） */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
}

body {
    background-color: light-dark(#eef7ff, #eef7ff);
    color: light-dark(#263548, #263548);
}

form input,
form textarea,
form select,
form button {
    color-scheme: light;

    /* ★フォーム類も同じフォントに */
    font-family: inherit;
}

a {
    color: #1565c0;
    color: light-dark(
        #1565c0,
        #1565c0    );
}
a:visited {
    color: #6a4c93;
    color: light-dark(
        #6a4c93,
        #6a4c93    );
}
a:active {
    color: #b33b32;
    color: light-dark(
        #b33b32,
        #b33b32    );
}

.quote-text {
    color: #5d7189;
    color: light-dark(
        #5d7189,
        #5d7189    );
}

.comment-text {
    color: #43566d;
    color: light-dark(
        #43566d,
        #43566d    );
}

.note-text {
    color: #5d7189;
    color: light-dark(
        #5d7189,
        #5d7189    );
}

.name {
    color: #2f7253;
    color: light-dark(
        #2f7253,
        #2f7253    );
}

.cap {
    color: #b76720;
    color: light-dark(
        #b76720,
        #b76720    );
}

.deleted-message {
    color: #b33b32;
    color: light-dark(
        #b33b32,
        #b33b32    );
}

.error-message {
    color: #b33b32;
    color: light-dark(
        #b33b32,
        #b33b32    );
}

hr {
    border: none;
    border-top: 1px solid #9dbbd8;
    border-top-color: light-dark(
        #9dbbd8,
        #9dbbd8    );
}

.embed-post {
    background-color: #eef7ff;
    color: #263548;
    background-color: light-dark(
        #eef7ff,
        #eef7ff    );
    color: light-dark(
        #263548,
        #263548    );
}

mark {
    background-color: transparent;
    color: inherit;
    margin: 0 5px;
}

/* パンくずリスト */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    list-style: none;
    padding-left: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding: 0 0.5rem;
    content: ">";
    vertical-align: middle;

    color: #263548;
    color: light-dark(
        #263548,
        #263548    );
}

/* 最後のパンくずリスト項目のリンクを無効にする */
.breadcrumb-item:last-child a {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
}

/* 外部サイト埋め込み */
.embed-contents {
    position: relative;
    width: min(100%, 600px);
    max-width: 600px;
    box-sizing: border-box;
}

.nieru-external-embed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
    margin: .5rem 0;
    padding: .75rem;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 8px;
    background: rgba(127, 127, 127, .06);
    overflow: hidden;
}

.nieru-external-embed--sensitive {
    border-color: rgba(180, 45, 45, .55);
    background: rgba(180, 45, 45, .07);
}

.nieru-external-embed--sensitive .nieru-external-embed-load {
    color: #a51f2d;
    background: rgba(255, 255, 255, .72);
}

.nieru-external-embed--amazon {
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: center;
    border-color: rgba(255, 153, 0, .55);
    background: rgba(255, 153, 0, .08);
}

.nieru-amazon-product-media {
    display: grid;
    width: 6rem;
    height: 6rem;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
}

.nieru-amazon-product-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nieru-amazon-product-mark {
    position: relative;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    justify-self: center;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #232f3e;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.nieru-amazon-product-mark::after {
    position: absolute;
    right: .55rem;
    bottom: .55rem;
    left: .55rem;
    height: 3px;
    border-radius: 2px;
    background: #ff9900;
    content: "";
}

.nieru-amazon-product-id,
.nieru-amazon-associate-label,
.nieru-amazon-price-notice,
.nieru-amazon-content-notice {
    display: block;
    color: inherit;
    font-size: .8rem;
    line-height: 1.4;
    opacity: .72;
    overflow-wrap: anywhere;
}

.nieru-amazon-product-title {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: .3rem;
    color: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.nieru-amazon-product-price {
    display: block;
    margin-bottom: .2rem;
    color: #b12704;
    font-size: 1rem;
    line-height: 1.35;
}

.nieru-amazon-product-button {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    padding: .4rem .8rem;
    border: 1px solid #d47f00;
    border-radius: 6px;
    color: #111;
    background: #ffb33b;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

.nieru-amazon-product-button:hover,
.nieru-amazon-product-button:focus-visible {
    background: #ff9900;
}

.nieru-amazon-associate-label {
    margin-top: .45rem;
}

.nieru-amazon-price-notice,
.nieru-amazon-content-notice {
    margin-top: .25rem;
    font-size: .7rem;
}

@media (max-width: 420px) {
    .nieru-external-embed--amazon {
        grid-template-columns: 4.75rem minmax(0, 1fr);
        padding: .65rem;
    }

    .nieru-amazon-product-media {
        width: 4.75rem;
        height: 4.75rem;
    }
}

.nieru-external-embed-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    background: rgba(127, 127, 127, .14);
}

.nieru-external-embed--vertical .nieru-external-embed-thumbnail {
    width: min(100%, 320px);
    aspect-ratio: 9 / 16;
}

.nieru-external-embed-body {
    min-width: 0;
}

.nieru-external-embed-label {
    display: block;
    margin: 0 0 .35rem;
    font-size: .95rem;
    line-height: 1.35;
}

.nieru-external-embed-summary,
.nieru-external-embed-error {
    margin: .35rem 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.nieru-external-embed-error {
    font-size: .88rem;
}

.nieru-external-embed-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-top: .5rem;
}

.nieru-external-embed-load {
    min-height: 2.5rem;
    padding: .45rem .8rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.nieru-external-embed-load:hover,
.nieru-external-embed-load:focus-visible {
    background: rgba(127, 127, 127, .12);
}

.nieru-external-embed-load:disabled {
    cursor: wait;
    opacity: .65;
}

.nieru-external-embed.is-loaded {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.nieru-external-embed-frame {
    display: block;
    width: 100%;
    max-width: 600px;
    border: 0;
    background: rgba(127, 127, 127, .08);
}

.nieru-external-embed-frame--video {
    aspect-ratio: 16 / 9;
    height: auto;
}

.nieru-external-embed-frame--vertical {
    width: min(100%, 360px);
    aspect-ratio: 9 / 16;
    height: auto;
    min-height: 480px;
}

.nieru-external-embed-frame--social {
    height: 560px;
}

.nieru-external-embed-frame--audio-compact {
    height: 152px;
}

.nieru-external-embed-frame--audio {
    height: 352px;
}

.nieru-external-embed-media {
    display: block;
    max-width: 100%;
}

.nieru-external-embed-media--image,
.nieru-external-embed-media--video {
    width: auto;
    max-height: min(70vh, 720px);
}

.nieru-external-embed-media--audio {
    width: 100%;
}

.nieru-external-embed-social-host {
    width: min(100%, 600px);
    max-width: 600px;
    margin: .5rem 0;
    overflow-wrap: anywhere;
}

.nieru-twitter-plaintext {
    white-space: pre-wrap;
}

.img-thumbnail,
.embed-youtube-img,
.embed-image,
.video-thumbnail {
    max-width: 128px;
    height: auto;
}

@media (max-width: 640px) {
    .nieru-external-embed {
        padding: .65rem;
    }

    .nieru-external-embed-frame--vertical {
        min-height: 440px;
    }

    .nieru-external-embed-frame--social {
        height: 520px;
    }
}

img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

img {
    max-height: 512px;
}

@font-face {
    font-family: 'spleen-32x64'; /* フォント名を設定 */
    src: url('https://cdn.hamster.land/system/spleen-32x64.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'spleen-32x64', sans-serif; /* フォントを適用 */
}

/* ------------------------------
   ダークモード削除：常にライト背景
   - data-theme が default/light/dark どれでもライト固定
-------------------------------- */
html {
    --background-image: url('https://cdn.hamster.land/system/backimage-light.gif');
}
html[data-theme="default"],
html[data-theme="light"],
html[data-theme="dark"] {
    --background-image: url('https://cdn.hamster.land/system/backimage-light.gif');
}

body {
    background-image: var(--background-image);
}

/* ------------------------------ */

.breadcrumb {
    margin-top: 16px;
}

.btn-spacing {
    padding: 0px 10px 0px 10px;
    text-align: center; /* テキストの中央揃え */
    letter-spacing: 5px; /* 文字間隔 */
    display: inline-block; /* ボタンをブロック要素のように表示 */
    vertical-align: middle; /* インライン要素内の垂直方向の中央揃え */
    margin-right: 10px;
}

.user-icon {
    flex-shrink: 0;
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #e0e0e0, #f8f8f8); /* グラデーション背景 */
    border: 2px solid #ddd; /* 外枠 */
    border-radius: 12px; /* 丸い形 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ソフトな影 */
    display: flex; /* 中央揃えのためにフレックスボックス */
    align-items: center; /* 垂直方向中央揃え */
    justify-content: center; /* 水平方向中央揃え */
    overflow: hidden; /* 画像が枠を超えないようにする */
}

.user-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミング */
    border-radius: 12px; /* 画像も丸くする */
}

.disabled {
    pointer-events: none; /* クリック無効 */
    background-color: #e0e0e0; /* 背景色を灰色に */
    color: #a0a0a0; /* 文字色を薄い灰色に */
    cursor: not-allowed; /* カーソルを変更 */
}

/* 画像のレスポンシブスタイル */
.responsive-img {
    width: 33%;
    height: auto;
}

/* タブレットサイズ（2列表示） */
@media (min-width: 576px) {
    .grid-item {
        width: 25% !important;
    }
}

/* デスクトップサイズ（4列表示） */
@media (min-width: 768px) {
    .grid-item {
        width: 20% !important;
    }
}

/* 大画面（4列表示） */
@media (min-width: 992px) {
    .grid-item {
        width: 20% !important;
    }
}

/* 超大画面（6列表示） */
@media (min-width: 1200px) {
    .grid-item {
        width: 16.66% !important;
    }
}

/* ファイルサイズオーバーレイを画像の下に表示するスタイル */
.file-size-overlay {
    display: block; /* 幅を100%に広げるため */
    background-color: rgba(0, 0, 0, 0.3); /* 背景色 */
    color: #fff;
    width: 100%; /* 画像と同じ幅で表示 */
    padding: 3px 0;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    border-radius: 0 0 4px 4px; /* 下部だけ角を丸く */
    box-sizing: border-box;
}

/* 画像の下に表示するための調整 */
.file-item img {
    display: block;
}

.thread {
    margin: 0px 0px 8px 8px;
}

/* ------------------------------
   navbar：ダーク条件分岐を削除してライト固定
-------------------------------- */
nav.navbar {
    background-color: #f8f9fa !important; /* ライト */
}
nav.navbar a.nav-link,
nav.navbar .navbar-brand {
    color: #000000 !important;
}
nav.navbar a.nav-link:hover {
    color: #333333 !important;
}
/* 以前の .navbar-dark .navbar-toggler-icon の invert は削除（ライト固定のため） */

/* ------------------------------
   light-dark() を使わずライト固定
-------------------------------- */
.btn.vote-btn[data-vote-type="good"] {
    background-color: #00bbbb;
    color: #ffffff;
}
.btn.vote-btn[data-vote-type="bad"] {
    background-color: #cc0000;
    color: #ffffff;
}

/* 投稿全体 */
.posts {
    position: relative; /* ← 擬似要素の基準 */
    border: 1px solid #000; /* ライト固定 */
    padding: 15px;
    border-radius: 5px;
    margin: 0 3px 15px;
    background-color: #F8F9FA; /* 単色のみ残す */
    overflow: hidden; /* 角丸に合わせる */
}

/* パターンだけ描画して薄くする */
.posts::before {
    content: "";
    position: absolute;
    inset: 0; /* ≒ top:0; right:0; … */
    background: url("https://cdn.hamster.land/1/admin/fd9c18010b.png")
        top left / 120px repeat; /* サイズはお好みで */
    opacity: 0.33; /* ★ 濃さ調整 */
    pointer-events: none; /* クリック透過 */
    z-index: 0; /* 後ろへ */
}

/* 中身を前面へ（任意）*/
.posts > * {
    z-index: 1;
    position: relative;
}

/* 埋め込み用は縁だけ外す（背景は使い回し可）*/
.embed-post .posts {
    border: none;
}

/* === HAMSTER LAND COMMUNITY RETRO TEMPLATE START === */
:root {
    --ham-retro-bg: var(--hamster-community-background, #fff8e8);
    --ham-retro-text: var(--hamster-community-text, #3f3024);
    --ham-retro-link: var(--hamster-community-link, #234f88);
    --ham-retro-visited: var(--hamster-community-visited, #6b4c8a);
    --ham-retro-accent: var(--hamster-community-active, #a5463d);
    --ham-retro-muted: var(--hamster-community-muted, #6d6054);
    --ham-retro-line: var(--hamster-community-border, #8a735d);
    --ham-retro-name: var(--hamster-community-name, #287047);
    --ham-retro-panel: color-mix(in srgb, var(--ham-retro-bg) 93%, var(--ham-retro-text) 7%);
    --ham-retro-panel-alt: color-mix(in srgb, var(--ham-retro-bg) 82%, var(--ham-retro-link) 18%);
    --ham-retro-title: color-mix(in srgb, var(--ham-retro-link) 72%, var(--ham-retro-bg) 28%);
    --ham-retro-highlight: color-mix(in srgb, var(--ham-retro-bg) 70%, #ffd15c 30%);
    --ham-retro-bevel-light: color-mix(in srgb, var(--ham-retro-bg) 76%, white 24%);
    --ham-retro-bevel-dark: color-mix(in srgb, var(--ham-retro-line) 76%, black 24%);
    --ham-retro-font: Verdana, "MS PGothic", "ＭＳ Ｐゴシック", Osaka, sans-serif;
    --ham-retro-mono: "MS Gothic", "ＭＳ ゴシック", Osaka-Mono, monospace;
}

* {
    border-radius: 0 !important;
}

html {
    scrollbar-color: var(--ham-retro-line) var(--ham-retro-bg);
}

body {
    box-sizing: border-box;
    width: min(100%, 960px);
    min-height: 100vh;
    margin: 0 auto !important;
    padding: 0 10px 24px;
    border-right: 1px solid var(--ham-retro-line);
    border-left: 1px solid var(--ham-retro-line);
    color: var(--ham-retro-text);
    font-family: var(--ham-retro-font) !important;
    font-size: 13px;
    line-height: 1.55;
    letter-spacing: 0;
}

body::before {
    content: "★ HAMSTER.LAND COMMUNITY NETWORK ★";
    display: block;
    margin: 0 -10px 8px;
    padding: 3px 8px;
    border-bottom: 3px double var(--ham-retro-line);
    background: var(--ham-retro-title);
    color: var(--ham-retro-bg);
    font: 700 11px/1.4 var(--ham-retro-mono);
    text-align: center;
    letter-spacing: .16em;
}

button,
input,
textarea,
select {
    font-family: var(--ham-retro-font) !important;
    font-size: 13px;
}

a {
    color: var(--ham-retro-link);
    text-decoration: underline !important;
    text-underline-offset: 1px;
    text-decoration-thickness: 1px !important;
}

a:visited {
    color: var(--ham-retro-visited);
}

a:hover,
a:focus-visible {
    color: var(--ham-retro-accent) !important;
    background: var(--ham-retro-highlight);
    outline: 1px dotted var(--ham-retro-accent);
    outline-offset: 1px;
}

a.text-primary,
a.text-dark,
a.text-body,
.thread > p > a {
    color: var(--ham-retro-link) !important;
}

h1,
h2,
h3,
h4 {
    font-family: var(--ham-retro-font) !important;
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: none;
}

h1,
h1.display-5 {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 10px;
    border: 3px double var(--ham-retro-line);
    background: var(--ham-retro-panel-alt);
    color: var(--ham-retro-text);
    box-shadow: inset 1px 1px 0 var(--ham-retro-bevel-light), inset -1px -1px 0 var(--ham-retro-bevel-dark);
    font-size: clamp(22px, 4vw, 30px);
    line-height: 1.25;
    text-align: center;
}

h1::before,
h1::after {
    content: "◇";
    padding: 0 .45em;
    color: var(--ham-retro-accent);
    font-family: var(--ham-retro-mono);
}

h2,
h3,
h4 {
    margin-top: 1rem;
    padding: 3px 6px;
    border: 1px solid var(--ham-retro-line);
    border-left: 8px solid var(--ham-retro-accent);
    background: var(--ham-retro-panel-alt);
    color: var(--ham-retro-text);
    font-size: 1rem;
}

body > .text-center.mt-2 {
    margin-top: 0 !important;
    padding: 5px;
    border: 1px solid var(--ham-retro-line);
    background: var(--ham-retro-panel);
}

body > .text-center.mt-2 > div + div {
    padding-top: 3px;
    color: var(--ham-retro-muted);
    font: 12px/1.4 var(--ham-retro-mono);
}

hr {
    height: 3px;
    margin: 7px 0;
    border: 0;
    border-top: 1px solid var(--ham-retro-line);
    border-bottom: 1px solid var(--ham-retro-line);
    opacity: .78;
}

nav.navbar {
    min-height: auto;
    padding: 3px 6px !important;
    border: 2px solid;
    border-color: var(--ham-retro-bevel-light) var(--ham-retro-bevel-dark) var(--ham-retro-bevel-dark) var(--ham-retro-bevel-light) !important;
    background: var(--ham-retro-panel-alt) !important;
    color: var(--ham-retro-text) !important;
    box-shadow: none;
}

nav.navbar a,
nav.navbar .nav-link,
nav.navbar .navbar-brand {
    color: var(--ham-retro-link) !important;
    font-size: 12px;
}

.my-3 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.my-3 > p {
    margin: 0;
    padding: 3px 6px;
    border: 1px solid var(--ham-retro-line);
    background: var(--ham-retro-panel-alt);
    font-family: var(--ham-retro-mono);
}

.pagination-links {
    margin-bottom: 7px !important;
    padding: 4px 5px;
    border: 2px solid;
    border-color: var(--ham-retro-bevel-light) var(--ham-retro-bevel-dark) var(--ham-retro-bevel-dark) var(--ham-retro-bevel-light);
    background: var(--ham-retro-panel);
    line-height: 1.8;
}

.thread {
    min-width: 0;
    margin: 0 0 5px !important;
    padding: 4px !important;
    gap: 5px !important;
    border: 1px solid var(--ham-retro-line);
    background: var(--ham-retro-panel);
}

.thread:nth-of-type(even) {
    background: color-mix(in srgb, var(--ham-retro-panel) 88%, var(--ham-retro-panel-alt) 12%);
}

.thread > a.flex-shrink-0 > img,
.thread_info img {
    border: 1px solid var(--ham-retro-line);
    background: var(--ham-retro-bg);
    image-rendering: pixelated;
}

.thread .speech_bubble,
.speech_bubble.bg-light {
    min-width: 0;
    padding: 3px 6px !important;
    border: 0 !important;
    border-left: 3px double var(--ham-retro-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ham-retro-text) !important;
    box-shadow: none !important;
    font: 13px/1.45 var(--ham-retro-mono);
}

.thread .speech_bubble::before,
.thread .speech_bubble::after {
    content: none !important;
    display: none !important;
}

.thread_info,
.thread .text-muted,
.posts .text-muted,
.last_msg {
    color: var(--ham-retro-muted) !important;
}

.thread_info {
    margin-top: 2px !important;
    padding-top: 2px;
    border-top: 1px dotted var(--ham-retro-line);
    font: 11px/1.35 var(--ham-retro-mono) !important;
}

.ribbon {
    position: static !important;
    display: inline-grid !important;
    place-items: center;
    min-width: 36px;
    min-height: 16px;
    margin: 0 5px 1px 0;
    padding: 1px 4px !important;
    overflow: hidden;
    border: 2px solid !important;
    border-color: var(--ham-retro-bevel-light) var(--ham-retro-bevel-dark) var(--ham-retro-bevel-dark) var(--ham-retro-bevel-light) !important;
    background: var(--ham-retro-highlight) !important;
    color: var(--ham-retro-accent) !important;
    box-shadow: 1px 1px 0 var(--ham-retro-bevel-dark) !important;
    clip-path: none !important;
    filter: none;
    font-size: 0 !important;
    line-height: 0 !important;
    transform: none !important;
    vertical-align: middle;
}

.ribbon > img,
.ribbon > svg {
    display: none !important;
}

.ribbon::after {
    content: "NEW!";
    display: block;
    color: var(--ham-retro-accent);
    font: 700 9px/1.2 var(--ham-retro-mono);
    letter-spacing: .03em;
}

.posts,
.embed-post .posts {
    margin-bottom: 8px;
    padding: 6px !important;
    border: 3px double var(--ham-retro-line) !important;
    border-radius: 0 !important;
    background: var(--ham-retro-panel) !important;
    color: var(--ham-retro-text) !important;
    box-shadow: none !important;
}

.posts::before {
    content: none !important;
    background-image: none !important;
}

blockquote {
    margin: .5rem 1rem;
    padding: 4px 8px;
    border: 0 !important;
    border-left: 3px double var(--ham-retro-line) !important;
    background: transparent !important;
    color: var(--ham-retro-muted) !important;
}

pre,
code,
kbd,
samp {
    border-color: var(--ham-retro-line) !important;
    background: var(--ham-retro-bg) !important;
    color: var(--ham-retro-text) !important;
    font-family: var(--ham-retro-mono) !important;
}

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::file-selector-button {
    min-height: 0;
    padding: 3px 9px !important;
    border: 2px solid !important;
    border-color: var(--ham-retro-bevel-light) var(--ham-retro-bevel-dark) var(--ham-retro-bevel-dark) var(--ham-retro-bevel-light) !important;
    border-radius: 0 !important;
    background: var(--ham-retro-panel-alt) !important;
    color: var(--ham-retro-text) !important;
    box-shadow: 1px 1px 0 var(--ham-retro-bevel-dark) !important;
    font: 700 12px/1.25 var(--ham-retro-font) !important;
    letter-spacing: 0;
    text-decoration: none !important;
    transition: none;
}

.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="file"]::file-selector-button:hover {
    background: var(--ham-retro-highlight) !important;
    color: var(--ham-retro-text) !important;
    filter: none;
    transform: none;
}

.btn:active,
button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
    border-color: var(--ham-retro-bevel-dark) var(--ham-retro-bevel-light) var(--ham-retro-bevel-light) var(--ham-retro-bevel-dark) !important;
    box-shadow: inset 1px 1px 0 var(--ham-retro-bevel-dark) !important;
    transform: translate(1px, 1px);
}

.btn.disabled,
.btn:disabled,
button:disabled,
input:disabled {
    color: var(--ham-retro-muted) !important;
    filter: grayscale(.35);
    opacity: .62;
    box-shadow: none !important;
}

form:not(.d-inline):not(.d-inline-block) {
    margin: 8px 0;
    padding: 8px;
    border: 3px double var(--ham-retro-line);
    background: var(--ham-retro-panel);
}

fieldset {
    border: 1px solid var(--ham-retro-line) !important;
}

legend,
label {
    color: var(--ham-retro-text);
    font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
    max-width: 100%;
    border: 2px solid !important;
    border-color: var(--ham-retro-bevel-dark) var(--ham-retro-bevel-light) var(--ham-retro-bevel-light) var(--ham-retro-bevel-dark) !important;
    border-radius: 0 !important;
    background: var(--ham-retro-bg) !important;
    color: var(--ham-retro-text) !important;
    box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--ham-retro-text) 20%, transparent) !important;
    caret-color: var(--ham-retro-accent);
}

input:focus,
textarea:focus,
select:focus {
    outline: 1px dotted var(--ham-retro-accent) !important;
    outline-offset: 1px;
}

table {
    width: 100%;
    border: 2px solid var(--ham-retro-line);
    border-collapse: collapse;
    background: var(--ham-retro-panel);
    color: var(--ham-retro-text);
    font-size: 12px;
}

th,
td {
    padding: 3px 5px !important;
    border: 1px solid var(--ham-retro-line) !important;
}

th {
    background: var(--ham-retro-panel-alt) !important;
    text-align: center;
}

.breadcrumb,
.alert,
.card,
.modal-content,
.dropdown-menu {
    border: 3px double var(--ham-retro-line) !important;
    border-radius: 0 !important;
    background: var(--ham-retro-panel) !important;
    color: var(--ham-retro-text) !important;
    box-shadow: none !important;
}

footer,
.footer {
    margin-top: 12px !important;
    padding-top: 7px;
    border-top: 3px double var(--ham-retro-line);
    color: var(--ham-retro-muted);
    font-family: var(--ham-retro-mono) !important;
    font-size: 10px !important;
}

#board-footer ul {
    margin: 4px 0;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    body {
        padding-right: 5px;
        padding-left: 5px;
        border: 0;
        font-size: 12px;
    }

    body::before {
        margin-right: -5px;
        margin-left: -5px;
        font-size: 9px;
        letter-spacing: .07em;
    }

    h1,
    h1.display-5 {
        padding: 6px 4px;
        font-size: clamp(19px, 7vw, 24px);
    }

    h1::before,
    h1::after {
        padding-inline: .2em;
    }

    .pagination-links {
        padding: 3px;
        line-height: 2.05;
    }

    .btn,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        padding: 4px 7px !important;
    }

    .thread {
        padding: 3px !important;
        gap: 3px !important;
    }

    .thread > a.flex-shrink-0 > img {
        width: 26px !important;
        height: 26px !important;
    }

    .thread .speech_bubble,
    .speech_bubble.bg-light {
        padding: 2px 4px !important;
        font-size: 12px;
    }

    form:not(.d-inline):not(.d-inline-block) {
        padding: 6px;
    }
}
/* === HAMSTER LAND COMMUNITY RETRO TEMPLATE END === */
/* hamster.land account community: managed presets always use a solid background. */
:root {
    --hamster-community-background: #eef7ff;
    --hamster-community-text: #263548;
    --hamster-community-link: #1565c0;
    --hamster-community-visited: #6a4c93;
    --hamster-community-active: #b33b32;
    --hamster-community-muted: #5d7189;
    --hamster-community-border: #9dbbd8;
    --hamster-community-name: #2f7253;
}

body {
    background-color: #eef7ff !important;
    background-image: none !important;
    color: #263548 !important;
}

a.text-dark,
a.text-body,
.thread > p > a {
    color: #1565c0 !important;
}

.text-muted {
    color: #5d7189 !important;
}

.posts::before {
    background-image: none !important;
}