@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800;900&family=Silkscreen:wght@400;700&display=swap');
@font-face{font-family:"MMOnsterpatch Game";src:local("Mintsoda - Lime Green 13x16 Regular"),local("Mintsoda Lime Green 13x16 Regular"),local("Mintsoda-LimeGreen_13x16");font-display:swap;}

:root {
  --game-ink:#173326;
  --game-paper:#fffaf0;
  --game-paper-2:#f7efd9;
  --game-line:#a9b99f;
  --game-gold:#d79c45;
  --game-gold-light:#f5e7ad;
  --pixel-shadow:4px 4px 0 color-mix(in srgb,var(--primary-strong) 24%,transparent);
  --radius:13px;
  --shadow:0 2px 0 rgba(23,51,38,.12),0 7px 18px rgba(23,51,38,.08);
  --shadow-lg:0 3px 0 rgba(23,51,38,.18),0 22px 55px rgba(10,35,26,.26);
}
:root[data-mode="dark"] {
  --game-ink:#eaf3e8;
  --game-paper:#19231d;
  --game-paper-2:#202d25;
  --game-line:#4c6254;
  --game-gold-light:#594b26;
}
body { font-family:"MMOnsterpatch Game","Silkscreen","Nunito",system-ui,sans-serif; background-color:var(--page); background-image:url("world-pattern.svg"); background-attachment:fixed; }
h1,h2,h3,.top-brand,.brand-lockup strong,.auth-copy h1,.profile-title h1,.page-head h1,.thread-head h1,.document-card h1 { font-family:"MMOnsterpatch Game","Silkscreen","Fredoka",system-ui,sans-serif !important; letter-spacing:-.025em; }
.eyebrow,.rank-badge,.verified-badge,.main-character-label,.player-count,.server-player-block strong { font-family:"Silkscreen",monospace; letter-spacing:-.04em; }
.sidebar-card,.content-card,.post-card,.auth-card,.modal,.floating-panel { border-width:2px; border-color:color-mix(in srgb,var(--line) 84%,var(--primary)); }
.primary-button,.secondary-button,.danger-button,.auth-tab,.side-nav a,.profile-tabs a,.tab-bar button { border-radius:9px; }
.primary-button { box-shadow:0 3px 0 var(--primary-strong); transform:translateY(-1px); }
.primary-button:active { transform:translateY(2px); box-shadow:none; }
.boot-screen { background-image:radial-gradient(circle at 50% 20%,rgba(245,231,173,.24),transparent 28%),url("world-pattern.svg"),linear-gradient(145deg,var(--primary-strong),var(--primary)); }
.boot-mark { width:86px;height:86px;padding:7px;border-radius:16px;background:rgba(255,255,255,.08);box-shadow:0 5px 0 rgba(0,0,0,.17); }
.boot-mark img { width:100%;height:100%;image-rendering:pixelated; }
.auth-brand-panel { background-image:radial-gradient(circle at 84% 7%,rgba(245,231,173,.32),transparent 30%),url("world-pattern.svg"),linear-gradient(145deg,#0e3428,#245d47 60%,#718253); }
.auth-brand-panel::after { content:""; right:-80px; bottom:-70px; width:470px;height:300px; background:url("feature-screenshot.png") center/contain no-repeat; opacity:.36; }
.auth-world-card { position:relative; z-index:1; width:min(470px,100%); margin:14px 0 18px; padding:11px; border:2px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(9,38,28,.28); box-shadow:0 7px 0 rgba(0,0,0,.12); }
.auth-world-card img { display:block;width:100%;height:180px;object-fit:cover;object-position:center 45%;border-radius:12px;image-rendering:pixelated; }
.auth-highlights > div { border-width:2px; border-radius:11px; }
.brand-lockup img,.top-brand img,.document-topbar img { image-rendering:pixelated; filter:drop-shadow(0 3px 0 rgba(0,0,0,.13)); }
.topbar { border-bottom-width:2px; }
.top-nav-button,.icon-button { border:1px solid var(--line); }
.nav-icon,.feature-icon,.empty-card .empty-icon,.error-card .empty-icon { border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line)); box-shadow:inset 0 -2px 0 rgba(23,51,38,.08); }
.avatar { border-radius:10px; border:2px solid var(--surface); background:var(--primary-soft); box-shadow:0 2px 0 color-mix(in srgb,var(--primary) 28%,transparent); }
.avatar img { object-fit:contain; image-rendering:pixelated; }
.avatar-fallback { width:100%;height:100%;object-fit:contain;image-rendering:pixelated; }
.avatar-xl { border-radius:18px; }
.verified-badge { color:#6a4b12; border-width:2px; box-shadow:0 2px 0 rgba(106,75,18,.12); }
:root[data-mode="dark"] .verified-badge { color:#ffe8a6; }
.rank-badge { border:1px solid var(--line); }
.server-card { overflow:hidden; position:relative; }
.server-card::after { content:""; position:absolute; right:-18px; bottom:-22px; width:90px;height:90px; background:url("monsterpatch-title-logo.png") center/contain no-repeat; opacity:.07; }
.status-dot { border-radius:3px !important; transform:rotate(45deg); }
.server-player-block { border:2px solid var(--line); border-radius:10px; background-image:linear-gradient(135deg,var(--primary-soft),var(--accent-soft)); }
.post-card { overflow:visible; }
.post-card::before { content:""; display:block; height:4px; border-radius:11px 11px 0 0; background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary)); opacity:.82; }
.context-menu { border-width:2px; box-shadow:var(--pixel-shadow),var(--shadow-lg); }
.post-actions button,.composer-photo { font-weight:900; }
.profile-cover { background-image:linear-gradient(125deg,rgba(12,48,36,.25),transparent 60%),url("world-pattern.svg"),linear-gradient(125deg,var(--primary-strong),var(--primary) 55%,var(--accent)); }
.profile-cover::before { content:""; position:absolute; left:22px; top:18px; width:145px;height:145px; background:url("monsterpatch-title-logo.png") center/contain no-repeat; opacity:.11; image-rendering:pixelated; }
.profile-cover::after { font-family:"Fredoka",sans-serif !important; font-weight:700; }
.character-card { border-width:2px; }
.character-art { position:relative; background-image:url("world-pattern.svg"),linear-gradient(145deg,var(--primary-soft),var(--accent-soft)); }
.character-art::before { content:""; position:absolute; width:105px;height:14px; bottom:17px; border-radius:50%; background:rgba(22,50,38,.16); filter:blur(1px); }
.character-art img { position:relative; z-index:1; width:148px;height:148px; image-rendering:pixelated; }
.character-card.main { box-shadow:0 0 0 2px var(--accent),4px 4px 0 color-mix(in srgb,var(--accent) 28%,transparent); }
.main-character-label { border-radius:6px; }
.main-character-control input { appearance:none; width:19px;height:19px;border:2px solid var(--primary);border-radius:4px;display:grid;place-content:center;background:var(--surface); }
.main-character-control input::before { content:""; width:9px;height:9px; transform:scale(0); background:var(--primary); clip-path:polygon(50% 0,62% 34%,100% 38%,70% 61%,79% 100%,50% 79%,21% 100%,30% 61%,0 38%,38% 34%); }
.main-character-control input:checked::before { transform:scale(1); }
.message-list { background-image:url("world-pattern.svg"),linear-gradient(var(--surface-2),var(--page)); }
.message-bubble { border-width:2px; border-radius:12px 12px 12px 3px; }
.message-row.mine .message-bubble { border-radius:12px 12px 3px 12px; box-shadow:0 2px 0 var(--primary-strong); }
.theme-preset { border-radius:9px; border-width:2px; }
.theme-swatch { border:1px solid rgba(23,51,38,.22); background-image:url("world-pattern.svg"),var(--preset-gradient); }
.auth-server-card { border-width:2px; }
.document-card { border-width:2px; }
@media (max-width:800px){ .auth-world-card{display:none}.auth-brand-panel::after{opacity:.22;width:320px;height:220px}.profile-cover::before{width:95px;height:95px}.avatar{border-radius:8px} }

:root[data-font="game"] body{font-family:"MMOnsterpatch Game","Silkscreen","Courier New",monospace;}
:root[data-font="comfortable"] body{font-family:"Nunito",system-ui,sans-serif;}
:root[data-font="system"] body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;}
:root[data-font="comfortable"] h1,:root[data-font="comfortable"] h2,:root[data-font="comfortable"] h3{font-family:"Fredoka",system-ui,sans-serif!important;}
:root[data-font="system"] h1,:root[data-font="system"] h2,:root[data-font="system"] h3{font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;}

.auth-brand-panel{
  background-image:linear-gradient(90deg,rgba(7,26,32,.82),rgba(15,57,52,.72)),url("header-forest.png");
  background-size:cover;
  background-position:center;
}
.auth-brand-panel::after{background:url("feature-screenshot.png") center/cover no-repeat;border:3px solid rgba(255,255,255,.18);border-radius:18px;right:-100px;bottom:-30px;width:560px;height:300px;opacity:.30;}
.auth-world-card img{content:url("feature-screenshot.png");}
.brand-lockup img{width:auto;height:56px;max-width:310px;}
.top-brand img{width:auto;height:40px;max-width:220px;}
.top-brand span{display:none;}
.boot-mark{width:min(330px,80vw);height:auto;padding:12px 18px;}
.boot-mark img{width:100%;height:auto;}
.profile-cover{background-image:linear-gradient(110deg,rgba(14,50,40,.28),rgba(10,30,44,.15)),url("header-forest.png");background-size:cover;background-position:center;}
.profile-cover::before{background:url("mmonsterpatch-title-logo.png") center/contain no-repeat;width:230px;height:100px;opacity:.22;}
.primary-button,.secondary-button,.auth-tab{position:relative;overflow:hidden;}
.primary-button::after,.secondary-button::after,.auth-tab::after{content:"";position:absolute;inset:0;background:url("game-button.png") center/100% 100% no-repeat;opacity:.09;pointer-events:none;image-rendering:pixelated;}
.character-art img,.avatar img{image-rendering:pixelated;object-fit:contain;}

/* v0.5.3 character-card containment and matching Preferences icon.
   Character portraits stay entirely inside the artwork panel above the details. */
.character-card {
  overflow: hidden;
}
.character-art {
  box-sizing: border-box;
  height: 180px;
  min-height: 180px;
  overflow: hidden;
  padding: 16px 18px 10px;
  isolation: isolate;
}
.character-art img,
.character-art img[src*="/community-character-assets/"],
.character-art img[src*="community-character-assets/"] {
  display: block;
  position: relative;
  z-index: 1;
  width: auto !important;
  height: 140px !important;
  max-width: 100% !important;
  max-height: 150px !important;
  margin: auto;
  object-fit: contain !important;
  object-position: center bottom !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.character-info {
  position: relative;
  z-index: 3;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.settings-pixel-icon .icon {
  width: 28px;
  height: 28px;
  color: var(--primary);
  stroke-width: 2;
}