:root{
  --navy:#000080;
  --blue:#003399;
  --cyan:#00cccc;
  --cream:#fff7d6;
  --yellow:#ffff66;
  --orange:#ff9900;
  --red:#cc0000;
  --green:#008000;
  --purple:#663399;
  --gray:#c0c0c0;
  --dark:#222;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:#0b4ca3;
  font-family:"Times New Roman", Times, serif;
  color:#000;
}
body{
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.08) 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0px;
}
a{color:#0000ee;text-decoration:underline;cursor:pointer}
a:visited{color:#551a8b}
button,input,select{
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
}
.page{
  width:980px;
  margin:10px auto 30px;
  background:#fff;
  border:4px ridge #f3f3f3;
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
}
.top-strip{
  background:#000;
  color:#fff;
  padding:3px 7px;
  font:12px Arial,sans-serif;
  display:flex;
  justify-content:space-between;
}
.header{
  background:linear-gradient(#fff,#f7df83);
  border-bottom:3px ridge #b58b22;
  padding:8px;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:10px;
  align-items:center;
}
.logo{
  border:3px double #000;
  background:#ffff66;
  padding:10px;
  text-align:center;
  transform:rotate(-1deg);
}
.logo .big{
  font-family:Impact, fantasy;
  font-size:31px;
  color:#003399;
  text-shadow:2px 2px #fff, 3px 3px #ff6600;
  letter-spacing:1px;
}
.logo .small{
  font:11px Arial,sans-serif;
  font-weight:bold;
}
.motd{
  border:2px inset #ddd;
  background:#fff;
  padding:8px;
  min-height:72px;
  font-size:14px;
}
.login{
  background:#d9e8ff;
  border:2px outset #fff;
  padding:7px;
  font:12px Arial,sans-serif;
}
.login strong{display:block;color:#000080;margin-bottom:4px}
.login input{
  width:92px;
  border:2px inset #ddd;
  margin:2px 0;
}
.login button,.retro-button{
  border:2px outset #fff;
  background:#c0c0c0;
  padding:2px 9px;
  cursor:pointer;
}
.login button:active,.retro-button:active{border-style:inset}
.marquee-wrap{
  border-top:2px solid #000;
  border-bottom:2px solid #000;
  background:#000080;
  color:#fff;
  font:bold 13px Arial,sans-serif;
  padding:4px 0;
}
.navbar{
  background:#ffcc00;
  border-bottom:3px ridge #b57e00;
  padding:5px;
  text-align:center;
  font:bold 13px Arial,sans-serif;
}
.navbar a{
  color:#000080;
  margin:0 6px;
  text-decoration:none;
}
.navbar a:hover{text-decoration:underline;color:#cc0000}
.layout{
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 190px;
  gap:8px;
  padding:8px;
  background:#e9eef7;
  align-items:stretch;
}
.layout > main{
  min-width:0;
  width:100%;
}
.left-sidebar,
.right-sidebar{
  min-width:0;
  width:190px;
}
.right-sidebar{
  align-self:stretch;
}
.right-sidebar .panel,
.left-sidebar .panel{
  max-width:100%;
  box-sizing:border-box;
}
.section-page,
.profile-page-stack,
.profile-summary-box,
.profile-main-copy,
.comment-box{
  min-width:0;
}
.profile-stat-strip{
  min-width:0;
}
.profile-stat-chip{
  min-width:0;
  overflow:hidden;
}
.profile-stat-chip span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.panel{
  background:#fff;
  border:2px ridge #ddd;
  margin-bottom:8px;
}
.panel-title{
  background:#000080;
  color:#fff;
  font:bold 13px Arial,sans-serif;
  padding:4px 6px;
  border-bottom:2px ridge #ddd;
}
.panel-title.green{background:#006600}
.panel-title.red{background:#990000}
.panel-title.purple{background:#663399}
.panel-title.orange{background:#cc6600}
.panel-body{padding:7px;font-size:13px}
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
}
.nav-list li{
  border-bottom:1px dotted #777;
  padding:4px 2px;
}
.nav-list li::before{content:"» ";color:#cc0000;font-weight:bold}
.currency-table,.mini-table,.recipe-table,.leaderboard{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.currency-table td,.mini-table td,.mini-table th,.recipe-table td,.recipe-table th,.leaderboard td,.leaderboard th{
  border:1px solid #777;
  padding:3px 4px;
}
.currency-table td:first-child{font-weight:bold;background:#ffffdd}
.mini-table th,.recipe-table th,.leaderboard th{
  background:#cfe0ff;
  font-family:Arial,sans-serif;
}
.hero{
  background:#fffbe0;
  border:3px double #cc9900;
  padding:8px;
  margin-bottom:8px;
}
.hero h1{
  font-size:25px;
  color:#000080;
  text-align:center;
  margin:3px 0 6px;
}
.hero p{margin:5px 0}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin:8px 0;
}
.quick-card{
  border:2px outset #fff;
  background:#dfeaff;
  min-height:86px;
  padding:6px;
  text-align:center;
  font-size:12px;
}
.quick-card .icon{
  font-size:28px;
  display:block;
  margin-bottom:3px;
}
.quick-card b{
  display:block;
  color:#000080;
  font-family:Arial,sans-serif;
}
.pet-card{
  display:grid;
  grid-template-columns:86px 1fr;
  gap:8px;
  align-items:start;
}
.pixel-box{
  width:86px;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#9ee6ff;
  border:3px ridge #eee;
  font-size:50px;
}
.statline{
  background:#eee;
  border:1px solid #777;
  margin:3px 0;
  height:14px;
  position:relative;
}
.statfill{
  height:100%;
  background:#00aa00;
}
.stattext{
  position:absolute;
  inset:0;
  text-align:center;
  line-height:12px;
  font:bold 10px Arial,sans-serif;
}
.notice{
  background:#ffff99;
  border:2px dashed #cc6600;
  padding:6px;
  margin-bottom:8px;
  font-size:13px;
}
.item-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
}
.item{
  border:2px outset #fff;
  background:#f5f5f5;
  padding:4px;
  min-height:76px;
  text-align:center;
  font:11px Arial,sans-serif;
}
.item .sprite{font-size:28px;display:block}
.boss-box{
  background:#ffe3e3;
  border:3px ridge #ff9999;
  padding:7px;
}
.boss-head{
  display:flex;
  justify-content:space-between;
  font:bold 13px Arial,sans-serif;
}
.hpbar{
  height:18px;
  border:2px inset #fff;
  background:#777;
  margin:5px 0;
}
.hpbar > div{
  height:100%;
  width:72%;
  background:#cc0000;
}
.small{
  font-size:11px;
  color:#444;
}
.quest{
  border-bottom:1px dotted #777;
  padding:5px 0;
}
.quest:last-child{border-bottom:0}
.badge{
  display:inline-block;
  border:1px solid #000;
  padding:1px 4px;
  font:bold 10px Arial,sans-serif;
  background:#ffff66;
}
.badge.weekly{background:#ccffff}
.badge.done{background:#ccffcc}
.ad{
  border:2px dashed #333;
  background:#fff;
  padding:7px;
  text-align:center;
  font:11px Arial,sans-serif;
}
.ad .bigad{
  display:block;
  font:bold 18px Impact,Arial,sans-serif;
  color:#cc0000;
  margin:3px;
}
.counter{
  font-family:"Courier New",monospace;
  background:#000;
  color:#00ff00;
  padding:3px 5px;
  display:inline-block;
  letter-spacing:1px;
}
.footer{
  background:#d7d7d7;
  border-top:3px ridge #fff;
  padding:8px;
  text-align:center;
  font:11px Arial,sans-serif;
}
.footer .badges{font-size:20px;margin-bottom:4px}
.blink{
  animation:blink 1s steps(2,start) infinite;
}
@keyframes blink{50%{visibility:hidden}}
.section-page{display:none}
.section-page.active{display:block}
hr.retro{
  border:0;
  border-top:2px groove #bbb;
}
.window{
  border:3px ridge #ddd;
  background:#c0c0c0;
  padding:5px;
}
.window-title{
  background:#000080;
  color:#fff;
  padding:3px 5px;
  font:bold 12px Arial,sans-serif;
  margin:-3px -3px 6px;
}
input[type="text"],input[type="number"],select{
  background:#fff;
  border:2px inset #ddd;
  padding:2px 3px;
}
@media(max-width:1000px){
  .page{width:96%}
}
@media(max-width:760px){
  .layout{grid-template-columns:1fr}
  .header{grid-template-columns:1fr}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .item-grid{grid-template-columns:repeat(3,1fr)}
  .boss-grid{grid-template-columns:repeat(3,1fr)}
}

.item, .boss-card, .pet-mini-card { cursor:pointer; }
.item:hover, .boss-card:hover, .pet-mini-card:hover { outline:2px solid #000080; background:#fffbe0; }
.sprite-img{width:48px;height:48px;display:block;margin:0 auto 3px;image-rendering:pixelated;image-rendering:crisp-edges;}
.item-stat{display:block;margin-top:2px;color:#003399;font-weight:bold;line-height:1.15;}
.item-desc{display:block;margin-top:2px;color:#555;font-size:10px;line-height:1.15;}
.detail-window{display:none;margin-top:8px;border:3px ridge #ddd;background:#c0c0c0;padding:5px;}
.detail-window.show{display:block}.detail-title{background:#000080;color:#fff;padding:3px 5px;font:bold 12px Arial,sans-serif;margin:-3px -3px 6px;}
.detail-body{background:#fff;border:2px inset #ddd;padding:7px;font-size:12px;min-height:72px;}
.detail-body img{width:64px;height:64px;image-rendering:pixelated;float:left;margin:0 8px 5px 0;}
.boss-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.boss-card{border:2px outset #fff;background:#f2e6e6;text-align:center;padding:5px;min-height:76px;font:11px Arial,sans-serif}.boss-card b{display:block;color:#800000;margin-bottom:2px}.boss-stat{display:block;margin-top:2px;font-size:10px;color:#222}
.event-row{display:grid;grid-template-columns:42px 1fr;gap:6px;align-items:center;padding:5px 0;border-bottom:1px dotted #777}.event-row:last-child{border-bottom:0}.event-row img{width:38px;height:38px;image-rendering:pixelated;border:1px solid #777;background:#fff}.pet-mini-card img{width:48px;height:48px;image-rendering:pixelated;display:block;margin:0 auto 3px;}


.boss-card.selected,
.item.selected,
.pet-mini-card.selected {
  outline:2px solid #000080;
  background:#fff6b8;
}


.news-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.news-card{
  border:2px ridge #ddd;
  background:#fff;
}
.news-card-title{
  background:#003399;
  color:#fff;
  padding:4px 6px;
  font:bold 13px Arial,sans-serif;
}
.news-card-body{
  padding:7px;
  font-size:13px;
}
.news-meta{
  color:#666;
  font:11px Arial,sans-serif;
  margin-bottom:5px;
}
.news-readmore{
  margin-top:7px;
}
.news-article{
  display:none;
}
.news-article.active{
  display:block;
}
.news-article h2{
  margin:0 0 4px;
  color:#000080;
  font-size:22px;
}
.news-back{
  margin-top:10px;
}


.quick-card[role="button"]{
  cursor:pointer;
}
.quick-card[role="button"]:hover,
.quick-card[role="button"]:focus{
  outline:2px solid #000080;
  background:#fffbe0;
}

.panel + .ad{
  margin-top:8px;
}

.left-sidebar .panel,
.right-sidebar .panel{
  width:100%;
}
.left-sidebar .ad{
  position:static !important;
  display:block;
  clear:both;
  width:100%;
  box-sizing:border-box;
  margin-top:8px !important;
}


.panel-title.with-back{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.panel-title .back-link{
  color:#fff;
  text-decoration:underline;
  font:bold 11px Arial,sans-serif;
  cursor:pointer;
}
.panel-title .back-link:hover{
  color:#ffff66;
}


.sidebar-link-card{
  cursor:pointer;
}
.sidebar-link-card:hover,
.sidebar-link-card:focus{
  outline:2px solid #000080;
}

.left-icon-nav{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
}
.left-icon-button{
  min-height:72px;
  border:2px outset #fff;
  background:#dfeaff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:5px;
}
.left-icon-button:hover,
.left-icon-button:focus{
  outline:2px solid #000080;
  background:#fffbe0;
}
.left-icon-button img{
  width:46px;
  height:46px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}


.news-title-link{
  color:#000080;
  text-decoration:underline;
  cursor:pointer;
  font-weight:bold;
}
.news-title-link:hover{
  color:#cc0000;
}

.retro-button:disabled{
  color:#808080;
  background:#d6d6d6;
  border-color:#eeeeee #777777 #777777 #eeeeee;
  cursor:default;
  opacity:0.75;
}

.side-symmetry-panel{
  height:278px;
  box-sizing:border-box;
}

.wiki-filter-bar{
  margin-bottom:6px;
}
.wiki-filter-bar input{
  width:145px;
}
.wiki-filter-bar select{
  min-width:100px;
}
.wiki-pager{
  text-align:center;
  margin-top:8px;
}
.wiki-pager .retro-button{
  margin:0 2px;
}
.wiki-pager .active-page{
  font-weight:bold;
  background:#fff3a5;
  border-style:inset;
}
.wiki-pager .retro-button:disabled{
  color:#808080;
  background:#d6d6d6;
  cursor:default;
}



/* ===== Optional site themes. Windows 98 remains the default. ===== */
.theme-picker {
  text-align:center;
  margin:6px 0 2px;
  font:11px Arial, sans-serif;
}
.theme-picker select {
  font:11px Arial, sans-serif;
}

/* Windows XP */
html[data-megu-theme="xp"] body {
  background:linear-gradient(#69baff 0 48%, #8bd56b 48% 100%) fixed !important;
  font-family:Tahoma,Verdana,Arial,sans-serif !important;
}
html[data-megu-theme="xp"] .page {
  background:#ece9d8 !important;
  border:2px solid #245edb !important;
  box-shadow:5px 5px 14px rgba(0,0,0,.4) !important;
}
html[data-megu-theme="xp"] .panel {
  border:1px solid #7f9db9 !important;
  border-radius:7px 7px 4px 4px !important;
  overflow:hidden;
  background:#fff !important;
}
html[data-megu-theme="xp"] .panel-title,
html[data-megu-theme="xp"] .detail-title {
  background:linear-gradient(#3f98f4,#075bcc) !important;
  color:#fff !important;
  border:0 !important;
  text-shadow:1px 1px #174b92;
  font-family:Tahoma,Verdana,Arial,sans-serif !important;
}
html[data-megu-theme="xp"] .panel-title[style*="background:#a00000"] {
  background:linear-gradient(#f06b62,#b31c14) !important;
}
html[data-megu-theme="xp"] .panel-body {
  background:#fff !important;
}
html[data-megu-theme="xp"] .top-menu {
  background:linear-gradient(#f8fbff,#dbeafa) !important;
  border:1px solid #7f9db9 !important;
}
html[data-megu-theme="xp"] .top-menu a {
  color:#003399 !important;
  text-shadow:none !important;
}
html[data-megu-theme="xp"] .marquee-bar {
  background:linear-gradient(#287de2,#0e51b4) !important;
  color:#fff !important;
}
html[data-megu-theme="xp"] .left-icon-button,
html[data-megu-theme="xp"] .item,
html[data-megu-theme="xp"] .boss-card,
html[data-megu-theme="xp"] .pet-mini-card {
  background:linear-gradient(#fff,#e7f1fb) !important;
  border:1px solid #9ab7d2 !important;
  border-radius:4px !important;
}
html[data-megu-theme="xp"] .retro-button {
  background:linear-gradient(#fff,#ece9d8) !important;
  border:1px solid #003c74 !important;
  border-radius:3px !important;
}
html[data-megu-theme="xp"] .ad {
  background:#fff !important;
  border:1px solid #7f9db9 !important;
  border-radius:5px !important;
}

/* Windows 98 */
html[data-megu-theme="win98"] body {
  background:#008080 !important;
  background-image:none !important;
  font-family:"MS Sans Serif",Tahoma,Arial,sans-serif !important;
}
html[data-megu-theme="win98"] .page {
  background:#c0c0c0 !important;
  border:3px outset #fff !important;
  box-shadow:5px 5px 0 #004040 !important;
}
html[data-megu-theme="win98"] .panel,
html[data-megu-theme="win98"] .left-icon-button,
html[data-megu-theme="win98"] .item,
html[data-megu-theme="win98"] .boss-card,
html[data-megu-theme="win98"] .pet-mini-card,
html[data-megu-theme="win98"] .ad {
  background:#c0c0c0 !important;
  border:2px outset #fff !important;
  border-radius:0 !important;
}
html[data-megu-theme="win98"] .panel-title,
html[data-megu-theme="win98"] .detail-title,
html[data-megu-theme="win98"] .marquee-bar {
  background:#000080 !important;
  color:#fff !important;
  border:0 !important;
  text-shadow:none !important;
}
html[data-megu-theme="win98"] .panel-body {
  background:#c0c0c0 !important;
}
html[data-megu-theme="win98"] .top-menu {
  background:#c0c0c0 !important;
  border:2px outset #fff !important;
}
html[data-megu-theme="win98"] .top-menu a {
  color:#000080 !important;
  text-shadow:none !important;
}
html[data-megu-theme="win98"] .retro-button {
  background:#c0c0c0 !important;
  border:2px outset #fff !important;
  border-radius:0 !important;
  color:#000 !important;
}
html[data-megu-theme="win98"] .top-strip {
  background:#000 !important;
}

/* Kawaii Pink */
html[data-megu-theme="pink"] body {
  background:
    radial-gradient(circle at 10px 10px,#fff 0 2px,transparent 3px),
    linear-gradient(135deg,#ffc9df 25%,#ffe9f3 25%,#ffe9f3 50%,#ffc9df 50%,#ffc9df 75%,#ffe9f3 75%) !important;
  background-size:28px 28px,40px 40px !important;
  font-family:Verdana,Arial,sans-serif !important;
}
html[data-megu-theme="pink"] .page {
  background:#fff5fa !important;
  border:3px solid #ea8fba !important;
  border-radius:10px !important;
  box-shadow:5px 5px 12px rgba(180,65,120,.28) !important;
}
html[data-megu-theme="pink"] .panel {
  border:2px solid #efa6c8 !important;
  border-radius:8px !important;
  overflow:hidden;
  background:#fff !important;
}
html[data-megu-theme="pink"] .panel-title,
html[data-megu-theme="pink"] .detail-title,
html[data-megu-theme="pink"] .marquee-bar {
  background:linear-gradient(#ff9dcc,#df5d9f) !important;
  color:#fff !important;
  border:0 !important;
  text-shadow:1px 1px #aa3d75 !important;
}
html[data-megu-theme="pink"] .panel-body {
  background:#fffafd !important;
}
html[data-megu-theme="pink"] .top-menu {
  background:#ffd4e6 !important;
}
html[data-megu-theme="pink"] .top-menu a {
  color:#95295e !important;
  text-shadow:none !important;
}
html[data-megu-theme="pink"] .left-icon-button,
html[data-megu-theme="pink"] .item,
html[data-megu-theme="pink"] .boss-card,
html[data-megu-theme="pink"] .pet-mini-card {
  background:#fff8fc !important;
  border:1px solid #eeabc9 !important;
  border-radius:7px !important;
}
html[data-megu-theme="pink"] .retro-button {
  background:linear-gradient(#fff,#ffd8e9) !important;
  border:1px solid #ca6698 !important;
  color:#8d285c !important;
  border-radius:7px !important;
}



/* ---------------- PURPLE DREAM ---------------- */
html[data-megu-theme="purple"] body {
  background:
    linear-gradient(135deg,#5f3c88 25%,#7550a3 25%,#7550a3 50%,#5f3c88 50%,#5f3c88 75%,#7550a3 75%) !important;
  background-size:40px 40px !important;
  font-family:Verdana,Arial,sans-serif !important;
}
html[data-megu-theme="purple"] .page {
  background:#f8f0ff !important;
  border:3px solid #7e55aa !important;
  box-shadow:5px 5px 12px rgba(52,27,80,.38) !important;
}
html[data-megu-theme="purple"] .panel {
  border:2px solid #9d79c7 !important;
  background:#fffaff !important;
  border-radius:7px !important;
  overflow:hidden;
}
html[data-megu-theme="purple"] .panel-title,
html[data-megu-theme="purple"] .detail-title,
html[data-megu-theme="purple"] .marquee-bar {
  background:linear-gradient(#9a6dd0,#60388f) !important;
  color:#fff !important;
  border:0 !important;
  text-shadow:1px 1px #3b225a !important;
}
html[data-megu-theme="purple"] .panel-body {
  background:#fffaff !important;
}
html[data-megu-theme="purple"] .top-menu {
  background:#e2cff7 !important;
}
html[data-megu-theme="purple"] .top-menu a {
  color:#55237d !important;
  text-shadow:none !important;
}
html[data-megu-theme="purple"] .left-icon-button,
html[data-megu-theme="purple"] .item,
html[data-megu-theme="purple"] .boss-card,
html[data-megu-theme="purple"] .pet-mini-card {
  background:#fbf4ff !important;
  border:1px solid #aa87ce !important;
  border-radius:6px !important;
}
html[data-megu-theme="purple"] .retro-button {
  background:linear-gradient(#fff,#e6d3f8) !important;
  border:1px solid #704497 !important;
  color:#542677 !important;
  border-radius:5px !important;
}

/* ---------------- DARK MODE ---------------- */
html[data-megu-theme="dark"] body {
  background:#11151b !important;
  background-image:
    linear-gradient(45deg,#151a21 25%,transparent 25%),
    linear-gradient(-45deg,#151a21 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#151a21 75%),
    linear-gradient(-45deg,transparent 75%,#151a21 75%) !important;
  background-size:24px 24px !important;
  background-position:0 0,0 12px,12px -12px,-12px 0 !important;
  color:#e7e7e7 !important;
  font-family:Tahoma,Verdana,Arial,sans-serif !important;
}
html[data-megu-theme="dark"] .page {
  background:#1c2128 !important;
  border:2px solid #49515c !important;
  box-shadow:0 0 18px #000 !important;
}
html[data-megu-theme="dark"] .panel {
  background:#222831 !important;
  border:1px solid #4e5968 !important;
}
html[data-megu-theme="dark"] .panel-title,
html[data-megu-theme="dark"] .detail-title,
html[data-megu-theme="dark"] .marquee-bar {
  background:linear-gradient(#363f4d,#202630) !important;
  color:#f2f5f7 !important;
  border-color:#566273 !important;
  text-shadow:none !important;
}
html[data-megu-theme="dark"] .panel-body,
html[data-megu-theme="dark"] .detail-window {
  background:#1f252d !important;
  color:#e7e7e7 !important;
}
html[data-megu-theme="dark"] .top-menu {
  background:#252c35 !important;
  border-color:#57616d #111 #111 #57616d !important;
}
html[data-megu-theme="dark"] .top-menu a,
html[data-megu-theme="dark"] a {
  color:#9bc8ff !important;
  text-shadow:none !important;
}
html[data-megu-theme="dark"] .left-icon-button,
html[data-megu-theme="dark"] .item,
html[data-megu-theme="dark"] .boss-card,
html[data-megu-theme="dark"] .pet-mini-card,
html[data-megu-theme="dark"] .ad {
  background:#2a313b !important;
  color:#f0f0f0 !important;
  border-color:#5a6574 !important;
}
html[data-megu-theme="dark"] .retro-button,
html[data-megu-theme="dark"] select,
html[data-megu-theme="dark"] input {
  background:#2c333d !important;
  color:#f2f2f2 !important;
  border:1px solid #66717f !important;
}
html[data-megu-theme="dark"] .top-strip {
  background:#090b0e !important;
}
html[data-megu-theme="dark"] .news-title-link {
  color:#9bc8ff !important;
}

/* ---------------- MINTY ---------------- */
html[data-megu-theme="mint"] body {
  background:
    radial-gradient(circle at 8px 8px,#ffffff 0 2px,transparent 3px),
    #bfead8 !important;
  background-size:24px 24px !important;
  font-family:Verdana,Arial,sans-serif !important;
}
html[data-megu-theme="mint"] .page {
  background:#f3fff9 !important;
  border:3px solid #61b996 !important;
  box-shadow:5px 5px 10px rgba(46,113,86,.24) !important;
}
html[data-megu-theme="mint"] .panel {
  border:2px solid #7bc8aa !important;
  border-radius:8px !important;
  overflow:hidden;
  background:#fff !important;
}
html[data-megu-theme="mint"] .panel-title,
html[data-megu-theme="mint"] .detail-title,
html[data-megu-theme="mint"] .marquee-bar {
  background:linear-gradient(#84d3b5,#4cab86) !important;
  color:#fff !important;
  border:0 !important;
  text-shadow:1px 1px #28745a !important;
}
html[data-megu-theme="mint"] .panel-body {
  background:#fbfffd !important;
}
html[data-megu-theme="mint"] .top-menu {
  background:#d8f4e8 !important;
}
html[data-megu-theme="mint"] .top-menu a {
  color:#226f55 !important;
  text-shadow:none !important;
}
html[data-megu-theme="mint"] .left-icon-button,
html[data-megu-theme="mint"] .item,
html[data-megu-theme="mint"] .boss-card,
html[data-megu-theme="mint"] .pet-mini-card {
  background:#f7fffb !important;
  border:1px solid #91d0b7 !important;
  border-radius:7px !important;
}
html[data-megu-theme="mint"] .retro-button {
  background:linear-gradient(#fff,#d7f3e7) !important;
  border:1px solid #5aa98a !important;
  color:#216e54 !important;
  border-radius:7px !important;
}

/* ---------------- PEACH CREAM ---------------- */
html[data-megu-theme="peach"] body {
  background:
    linear-gradient(135deg,#ffd6bd 25%,#fff0df 25%,#fff0df 50%,#ffd6bd 50%,#ffd6bd 75%,#fff0df 75%) !important;
  background-size:42px 42px !important;
  font-family:Georgia,"Times New Roman",serif !important;
}
html[data-megu-theme="peach"] .page {
  background:#fff9f2 !important;
  border:3px solid #e7a47d !important;
  box-shadow:5px 5px 12px rgba(160,95,55,.22) !important;
}
html[data-megu-theme="peach"] .panel {
  border:2px solid #ebb18e !important;
  border-radius:7px !important;
  overflow:hidden;
  background:#fffdf9 !important;
}
html[data-megu-theme="peach"] .panel-title,
html[data-megu-theme="peach"] .detail-title,
html[data-megu-theme="peach"] .marquee-bar {
  background:linear-gradient(#f3b38b,#d98358) !important;
  color:#fff !important;
  border:0 !important;
  text-shadow:1px 1px #9e5734 !important;
}
html[data-megu-theme="peach"] .panel-body {
  background:#fffdf9 !important;
}
html[data-megu-theme="peach"] .top-menu {
  background:#ffe3d0 !important;
}
html[data-megu-theme="peach"] .top-menu a {
  color:#9a4c2b !important;
  text-shadow:none !important;
}
html[data-megu-theme="peach"] .left-icon-button,
html[data-megu-theme="peach"] .item,
html[data-megu-theme="peach"] .boss-card,
html[data-megu-theme="peach"] .pet-mini-card {
  background:#fffaf5 !important;
  border:1px solid #ecc0a4 !important;
  border-radius:7px !important;
}
html[data-megu-theme="peach"] .retro-button {
  background:linear-gradient(#fff,#ffe3d1) !important;
  border:1px solid #d28b62 !important;
  color:#8d4729 !important;
  border-radius:7px !important;
}

/* ---------------- AQUA CLOUD ---------------- */
html[data-megu-theme="aqua"] body {
  background:
    radial-gradient(ellipse at 20px 15px,#fff 0 7px,transparent 8px),
    radial-gradient(ellipse at 34px 17px,#fff 0 9px,transparent 10px),
    #99dcf2 !important;
  background-size:70px 45px !important;
  font-family:Tahoma,Verdana,Arial,sans-serif !important;
}
html[data-megu-theme="aqua"] .page {
  background:#f5fdff !important;
  border:3px solid #55b6d2 !important;
  box-shadow:5px 5px 12px rgba(42,126,151,.24) !important;
}
html[data-megu-theme="aqua"] .panel {
  border:2px solid #75c6dc !important;
  border-radius:8px !important;
  overflow:hidden;
  background:#fff !important;
}
html[data-megu-theme="aqua"] .panel-title,
html[data-megu-theme="aqua"] .detail-title,
html[data-megu-theme="aqua"] .marquee-bar {
  background:linear-gradient(#65c9e6,#328eb2) !important;
  color:#fff !important;
  border:0 !important;
  text-shadow:1px 1px #236b89 !important;
}
html[data-megu-theme="aqua"] .panel-body {
  background:#fbfeff !important;
}
html[data-megu-theme="aqua"] .top-menu {
  background:#d8f2fa !important;
}
html[data-megu-theme="aqua"] .top-menu a {
  color:#236b89 !important;
  text-shadow:none !important;
}
html[data-megu-theme="aqua"] .left-icon-button,
html[data-megu-theme="aqua"] .item,
html[data-megu-theme="aqua"] .boss-card,
html[data-megu-theme="aqua"] .pet-mini-card {
  background:#f8fdff !important;
  border:1px solid #8fd1e3 !important;
  border-radius:7px !important;
}
html[data-megu-theme="aqua"] .retro-button {
  background:linear-gradient(#fff,#dbf3fa) !important;
  border:1px solid #57aeca !important;
  color:#236b89 !important;
  border-radius:7px !important;
}



/* ===== DARK MODE REBUILD ===== */
html[data-megu-theme="dark"] body {
  background:#0f1115 !important;
  background-image:
    linear-gradient(45deg,#12161c 25%,transparent 25%),
    linear-gradient(-45deg,#12161c 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#12161c 75%),
    linear-gradient(-45deg,transparent 75%,#12161c 75%) !important;
  background-size:24px 24px !important;
  background-position:0 0,0 12px,12px -12px,-12px 0 !important;
  color:#e8edf2 !important;
  font-family:Tahoma,Verdana,Arial,sans-serif !important;
}

html[data-megu-theme="dark"] .page {
  background:#181c22 !important;
  color:#e8edf2 !important;
  border:2px solid #3a4350 !important;
  box-shadow:0 0 18px rgba(0,0,0,.7) !important;
}

html[data-megu-theme="dark"] .panel {
  background:#20262e !important;
  color:#e8edf2 !important;
  border:1px solid #46515f !important;
}

html[data-megu-theme="dark"] .panel-title,
html[data-megu-theme="dark"] .detail-title {
  background:linear-gradient(#394553,#252d36) !important;
  color:#f7f9fb !important;
  border-color:#526070 !important;
  text-shadow:none !important;
}

html[data-megu-theme="dark"] .panel-title[style*="background:#a00000"] {
  background:linear-gradient(#7e3333,#512020) !important;
}

html[data-megu-theme="dark"] .panel-body,
html[data-megu-theme="dark"] .detail-window,
html[data-megu-theme="dark"] .detail-body {
  background:#1b2027 !important;
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .top-strip {
  background:#07090c !important;
  color:#cfd6de !important;
}

html[data-megu-theme="dark"] .marquee-bar {
  background:#222a33 !important;
  color:#e8edf2 !important;
  border-color:#475463 !important;
}

html[data-megu-theme="dark"] .top-menu {
  background:#242b33 !important;
  color:#e8edf2 !important;
  border-color:#4f5b68 #0f1216 #0f1216 #4f5b68 !important;
}

html[data-megu-theme="dark"] .top-menu a,
html[data-megu-theme="dark"] a,
html[data-megu-theme="dark"] .news-title-link,
html[data-megu-theme="dark"] .back-link {
  color:#8fc6ff !important;
  text-shadow:none !important;
}

html[data-megu-theme="dark"] .top-menu a:hover,
html[data-megu-theme="dark"] a:hover,
html[data-megu-theme="dark"] .news-title-link:hover {
  color:#c7e2ff !important;
}

html[data-megu-theme="dark"] .left-icon-button,
html[data-megu-theme="dark"] .item,
html[data-megu-theme="dark"] .boss-card,
html[data-megu-theme="dark"] .pet-mini-card,
html[data-megu-theme="dark"] .fish-mini-card {
  background:#262d35 !important;
  color:#eef2f6 !important;
  border:1px solid #4b5866 !important;
  box-shadow:none !important;
}

html[data-megu-theme="dark"] .left-icon-button:hover,
html[data-megu-theme="dark"] .item:hover,
html[data-megu-theme="dark"] .boss-card:hover,
html[data-megu-theme="dark"] .pet-mini-card:hover,
html[data-megu-theme="dark"] .fish-mini-card:hover {
  background:#313a45 !important;
  border-color:#6b7c8e !important;
}

html[data-megu-theme="dark"] .selected {
  background:#364354 !important;
  border-color:#8bb7e0 !important;
}

html[data-megu-theme="dark"] .ad {
  background:#232931 !important;
  color:#e8edf2 !important;
  border:1px solid #4d5966 !important;
}

html[data-megu-theme="dark"] .bigad {
  color:#ffd76a !important;
}

html[data-megu-theme="dark"] .retro-button,
html[data-megu-theme="dark"] button {
  background:linear-gradient(#343c46,#252c34) !important;
  color:#eef2f6 !important;
  border:1px solid #5c6978 !important;
  box-shadow:none !important;
}

html[data-megu-theme="dark"] .retro-button:hover:not(:disabled),
html[data-megu-theme="dark"] button:hover:not(:disabled) {
  background:#3b4652 !important;
  border-color:#7e92a8 !important;
}

html[data-megu-theme="dark"] .retro-button:disabled,
html[data-megu-theme="dark"] button:disabled {
  background:#20252b !important;
  color:#717983 !important;
  border-color:#3b424a !important;
  opacity:1 !important;
}

html[data-megu-theme="dark"] input,
html[data-megu-theme="dark"] select,
html[data-megu-theme="dark"] textarea {
  background:#14181d !important;
  color:#eef2f6 !important;
  border:1px solid #596573 !important;
}

html[data-megu-theme="dark"] option {
  background:#14181d !important;
  color:#eef2f6 !important;
}

html[data-megu-theme="dark"] .wiki-filter-bar,
html[data-megu-theme="dark"] .archive-tools {
  background:#222831 !important;
  color:#e8edf2 !important;
  border:1px solid #4a5562 !important;
}

html[data-megu-theme="dark"] .wiki-pager,
html[data-megu-theme="dark"] .archive-pagination {
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .wiki-pager .active-page,
html[data-megu-theme="dark"] .archive-pagination .current-page {
  background:#3a4654 !important;
  color:#fff !important;
  border-color:#7890aa !important;
}

html[data-megu-theme="dark"] table {
  background:#1b2027 !important;
  color:#e8edf2 !important;
  border-color:#47515d !important;
}

html[data-megu-theme="dark"] th {
  background:#2a323b !important;
  color:#f5f7fa !important;
  border-color:#505d6b !important;
}

html[data-megu-theme="dark"] td {
  background:#20262e !important;
  color:#e8edf2 !important;
  border-color:#414b56 !important;
}

html[data-megu-theme="dark"] tr:nth-child(even) td {
  background:#1c2229 !important;
}

html[data-megu-theme="dark"] .news-meta {
  color:#9ba8b6 !important;
}

html[data-megu-theme="dark"] .news-page-item,
html[data-megu-theme="dark"] .news-card,
html[data-megu-theme="dark"] .news-card-body,
html[data-megu-theme="dark"] .news-article {
  background:#1b2027 !important;
  color:#e8edf2 !important;
  border-color:#495562 !important;
}

html[data-megu-theme="dark"] .news-card-title {
  background:#2b343e !important;
  color:#eef2f6 !important;
}

html[data-megu-theme="dark"] .news-readmore {
  background:transparent !important;
}

html[data-megu-theme="dark"] footer,
html[data-megu-theme="dark"] .footer,
html[data-megu-theme="dark"] .theme-picker {
  background:#181c22 !important;
  color:#cfd6de !important;
  border-color:#3c4652 !important;
}

html[data-megu-theme="dark"] hr {
  border-color:#46515e !important;
}

html[data-megu-theme="dark"] code,
html[data-megu-theme="dark"] pre {
  background:#11151a !important;
  color:#dce6ef !important;
  border-color:#414c58 !important;
}

html[data-megu-theme="dark"] [style*="background:#fff"],
html[data-megu-theme="dark"] [style*="background: #fff"],
html[data-megu-theme="dark"] [style*="background:white"],
html[data-megu-theme="dark"] [style*="background: white"] {
  background:#1b2027 !important;
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] [style*="color:#000080"],
html[data-megu-theme="dark"] [style*="color: #000080"] {
  color:#8fc6ff !important;
}

html[data-megu-theme="dark"] [style*="color:#000"],
html[data-megu-theme="dark"] [style*="color: #000"] {
  color:#e8edf2 !important;
}



/* ===== DARK MODE SHELL / HEADER COMPLETION ===== */
html[data-megu-theme="dark"] .header,
html[data-megu-theme="dark"] .site-header,
html[data-megu-theme="dark"] .masthead,
html[data-megu-theme="dark"] .header-main,
html[data-megu-theme="dark"] .header-content,
html[data-megu-theme="dark"] .brand-row,
html[data-megu-theme="dark"] .intro,
html[data-megu-theme="dark"] .welcome,
html[data-megu-theme="dark"] .welcome-box,
html[data-megu-theme="dark"] .hero,
html[data-megu-theme="dark"] .top-area {
  background:#181d24 !important;
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .layout,
html[data-megu-theme="dark"] main,
html[data-megu-theme="dark"] .main,
html[data-megu-theme="dark"] .content,
html[data-megu-theme="dark"] .main-content,
html[data-megu-theme="dark"] .section-page,
html[data-megu-theme="dark"] .left-sidebar,
html[data-megu-theme="dark"] .right-sidebar {
  background:#181d24 !important;
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .logo-box,
html[data-megu-theme="dark"] .logo-area {
  background:#222831 !important;
  border-color:#505d6b !important;
}

html[data-megu-theme="dark"] h1,
html[data-megu-theme="dark"] h2,
html[data-megu-theme="dark"] h3,
html[data-megu-theme="dark"] h4,
html[data-megu-theme="dark"] p,
html[data-megu-theme="dark"] span,
html[data-megu-theme="dark"] div {
  color:inherit;
}

/* Preserve intentional colors for the logo/art itself. */
html[data-megu-theme="dark"] .bigad {
  color:#ffd76a !important;
}

/* Catch the actual light shell colors used by the original template. */
html[data-megu-theme="dark"] [style*="background:#fff"],
html[data-megu-theme="dark"] [style*="background: #fff"],
html[data-megu-theme="dark"] [style*="background:white"],
html[data-megu-theme="dark"] [style*="background: white"],
html[data-megu-theme="dark"] [style*="background:#f"],
html[data-megu-theme="dark"] [style*="background: #f"] {
  background:#181d24 !important;
  color:#e8edf2 !important;
}

/* Header text that originally used navy/black. */
html[data-megu-theme="dark"] [style*="color:navy"],
html[data-megu-theme="dark"] [style*="color: navy"],
html[data-megu-theme="dark"] [style*="color:#000080"],
html[data-megu-theme="dark"] [style*="color: #000080"],
html[data-megu-theme="dark"] [style*="color:#000"],
html[data-megu-theme="dark"] [style*="color: #000"] {
  color:#e8edf2 !important;
}

/* Footer/page-bottom shell */
html[data-megu-theme="dark"] .page > div:last-of-type {
  border-color:#3d4651 !important;
}

/* Keep the yellow/original navigation strip readable if it remains yellow. */
html[data-megu-theme="dark"] .top-menu {
  background:#222831 !important;
}


html[data-megu-theme="dark"] .header-table,
html[data-megu-theme="dark"] .welcome-area,
html[data-megu-theme="dark"] .intro-box,
html[data-megu-theme="dark"] .content-shell,
html[data-megu-theme="dark"] .content-area,
html[data-megu-theme="dark"] .site-body {
  background:#181d24 !important;
  color:#e8edf2 !important;
}



/* ===== DARK MODE EXACT HEADER / NAV FIX ===== */
html[data-megu-theme="dark"] .header {
  background:linear-gradient(#1b2027,#14181d) !important;
  border-bottom:3px solid #3e4955 !important;
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .motd {
  background:#151a20 !important;
  color:#dfe6ed !important;
  border:1px solid #46515d !important;
  box-shadow:inset 0 0 0 1px #0e1115 !important;
}

html[data-megu-theme="dark"] .motd h1 {
  color:#f1f5f9 !important;
}

html[data-megu-theme="dark"] .motd .blink,
html[data-megu-theme="dark"] .motd b {
  color:#ffcf5a !important;
}

html[data-megu-theme="dark"] .navbar {
  background:linear-gradient(#2b3440,#202730) !important;
  border-top:1px solid #475464 !important;
  border-bottom:2px solid #11161c !important;
  color:#8fc6ff !important;
}

html[data-megu-theme="dark"] .navbar a {
  color:#9dcdff !important;
  text-shadow:none !important;
}

html[data-megu-theme="dark"] .navbar a:hover {
  color:#ffffff !important;
}

html[data-megu-theme="dark"] .marquee-wrap {
  background:linear-gradient(#1f2731,#151b22) !important;
  border-top:1px solid #44505d !important;
  border-bottom:1px solid #0c1014 !important;
  color:#dce7f2 !important;
}

html[data-megu-theme="dark"] .logo {
  border-color:#596572 !important;
  box-shadow:0 0 0 1px #0f1216 !important;
}



/* ============================================================
   THEMED HEADER / MARQUEE / NAVBAR
   Makes the top shell follow the selected theme.
   ============================================================ */

/* WINDOWS XP */
html[data-megu-theme="xp"] .header {
  background:linear-gradient(#eaf5ff,#cfe7ff) !important;
  border-bottom:2px solid #4f8fda !important;
  color:#17365f !important;
}
html[data-megu-theme="xp"] .motd {
  background:#ffffff !important;
  color:#17365f !important;
  border:1px solid #7f9db9 !important;
  box-shadow:inset 0 0 0 1px #dceafb !important;
}
html[data-megu-theme="xp"] .motd h1 {
  color:#164b9b !important;
}
html[data-megu-theme="xp"] .marquee-wrap {
  background:linear-gradient(#3a8df0,#0d55ba) !important;
  color:#fff !important;
  border-top:1px solid #74aef4 !important;
  border-bottom:1px solid #0a3d87 !important;
}
html[data-megu-theme="xp"] .navbar {
  background:linear-gradient(#eef6ff,#c5dcf4) !important;
  border-top:1px solid #fff !important;
  border-bottom:2px solid #7f9db9 !important;
  color:#174f9a !important;
}
html[data-megu-theme="xp"] .navbar a {
  color:#174f9a !important;
  text-shadow:none !important;
}

/* WINDOWS 98 */
html[data-megu-theme="win98"] .header {
  background:#c0c0c0 !important;
  border-bottom:2px outset #fff !important;
  color:#000 !important;
}
html[data-megu-theme="win98"] .motd {
  background:#c0c0c0 !important;
  color:#000 !important;
  border:2px inset #fff !important;
  box-shadow:none !important;
}
html[data-megu-theme="win98"] .motd h1 {
  color:#000080 !important;
}
html[data-megu-theme="win98"] .marquee-wrap {
  background:#000080 !important;
  color:#fff !important;
  border-top:2px inset #fff !important;
  border-bottom:2px outset #fff !important;
}
html[data-megu-theme="win98"] .navbar {
  background:#c0c0c0 !important;
  border:2px outset #fff !important;
  color:#000 !important;
}
html[data-megu-theme="win98"] .navbar a {
  color:#000080 !important;
  text-shadow:none !important;
}

/* KAWAII PINK */
html[data-megu-theme="pink"] .header {
  background:linear-gradient(#fff3f9,#ffd6e8) !important;
  border-bottom:2px solid #ea8fba !important;
  color:#7f2d59 !important;
}
html[data-megu-theme="pink"] .motd {
  background:#fffafd !important;
  color:#7f2d59 !important;
  border:1px solid #efa6c8 !important;
  box-shadow:inset 0 0 0 1px #ffe8f2 !important;
}
html[data-megu-theme="pink"] .motd h1 {
  color:#a52e69 !important;
}
html[data-megu-theme="pink"] .marquee-wrap {
  background:linear-gradient(#f27bb5,#d94f93) !important;
  color:#fff !important;
  border-color:#f7b6d4 #b43c77 !important;
}
html[data-megu-theme="pink"] .navbar {
  background:linear-gradient(#ffe4f0,#ffc8df) !important;
  border-top:1px solid #fff !important;
  border-bottom:2px solid #e58bb5 !important;
  color:#95295e !important;
}
html[data-megu-theme="pink"] .navbar a {
  color:#95295e !important;
  text-shadow:none !important;
}

/* PURPLE DREAM */
html[data-megu-theme="purple"] .header {
  background:linear-gradient(#fbf5ff,#e6d7f7) !important;
  border-bottom:2px solid #8d65b8 !important;
  color:#522874 !important;
}
html[data-megu-theme="purple"] .motd {
  background:#fffaff !important;
  color:#522874 !important;
  border:1px solid #9f7bc4 !important;
  box-shadow:inset 0 0 0 1px #eee1fa !important;
}
html[data-megu-theme="purple"] .motd h1 {
  color:#663496 !important;
}
html[data-megu-theme="purple"] .marquee-wrap {
  background:linear-gradient(#8d60c2,#5c3488) !important;
  color:#fff !important;
  border-color:#b18ada #422463 !important;
}
html[data-megu-theme="purple"] .navbar {
  background:linear-gradient(#eadcf7,#d2bae9) !important;
  border-top:1px solid #fff !important;
  border-bottom:2px solid #9168b8 !important;
  color:#55287a !important;
}
html[data-megu-theme="purple"] .navbar a {
  color:#55287a !important;
  text-shadow:none !important;
}

/* MINTY */
html[data-megu-theme="mint"] .header {
  background:linear-gradient(#f6fffb,#d6f3e7) !important;
  border-bottom:2px solid #61b996 !important;
  color:#236b54 !important;
}
html[data-megu-theme="mint"] .motd {
  background:#fbfffd !important;
  color:#236b54 !important;
  border:1px solid #7bc8aa !important;
  box-shadow:inset 0 0 0 1px #e0f6ed !important;
}
html[data-megu-theme="mint"] .motd h1 {
  color:#28785c !important;
}
html[data-megu-theme="mint"] .marquee-wrap {
  background:linear-gradient(#6dc9a5,#439c7b) !important;
  color:#fff !important;
  border-color:#9bdac1 #317b60 !important;
}
html[data-megu-theme="mint"] .navbar {
  background:linear-gradient(#e7f8f0,#c6ebdc) !important;
  border-top:1px solid #fff !important;
  border-bottom:2px solid #65b694 !important;
  color:#226f55 !important;
}
html[data-megu-theme="mint"] .navbar a {
  color:#226f55 !important;
  text-shadow:none !important;
}

/* PEACH CREAM */
html[data-megu-theme="peach"] .header {
  background:linear-gradient(#fffaf5,#ffe2cf) !important;
  border-bottom:2px solid #df9b73 !important;
  color:#8b472b !important;
}
html[data-megu-theme="peach"] .motd {
  background:#fffdf9 !important;
  color:#8b472b !important;
  border:1px solid #ebb18e !important;
  box-shadow:inset 0 0 0 1px #fff0e5 !important;
}
html[data-megu-theme="peach"] .motd h1 {
  color:#a45230 !important;
}
html[data-megu-theme="peach"] .marquee-wrap {
  background:linear-gradient(#eca47a,#cf744d) !important;
  color:#fff !important;
  border-color:#f5c2a5 #a85836 !important;
}
html[data-megu-theme="peach"] .navbar {
  background:linear-gradient(#ffeadc,#ffd2b7) !important;
  border-top:1px solid #fff !important;
  border-bottom:2px solid #dc956d !important;
  color:#984a2c !important;
}
html[data-megu-theme="peach"] .navbar a {
  color:#984a2c !important;
  text-shadow:none !important;
}

/* AQUA CLOUD */
html[data-megu-theme="aqua"] .header {
  background:linear-gradient(#f7fdff,#d4f0f8) !important;
  border-bottom:2px solid #55b6d2 !important;
  color:#216985 !important;
}
html[data-megu-theme="aqua"] .motd {
  background:#fbfeff !important;
  color:#216985 !important;
  border:1px solid #75c6dc !important;
  box-shadow:inset 0 0 0 1px #e1f6fb !important;
}
html[data-megu-theme="aqua"] .motd h1 {
  color:#277b9b !important;
}
html[data-megu-theme="aqua"] .marquee-wrap {
  background:linear-gradient(#5fc3df,#328cac) !important;
  color:#fff !important;
  border-color:#90d6e8 #246d87 !important;
}
html[data-megu-theme="aqua"] .navbar {
  background:linear-gradient(#e5f7fc,#c9eaf4) !important;
  border-top:1px solid #fff !important;
  border-bottom:2px solid #62b8d0 !important;
  color:#236b89 !important;
}
html[data-megu-theme="aqua"] .navbar a {
  color:#236b89 !important;
  text-shadow:none !important;
}

/* DARK MODE already has exact shell rules, reaffirm the navbar/marquee flow */
html[data-megu-theme="dark"] .header {
  background:linear-gradient(#1b2027,#14181d) !important;
}
html[data-megu-theme="dark"] .motd {
  background:#151a20 !important;
}
html[data-megu-theme="dark"] .marquee-wrap {
  background:linear-gradient(#1f2731,#151b22) !important;
}
html[data-megu-theme="dark"] .navbar {
  background:linear-gradient(#2b3440,#202730) !important;
}



/* ===== THEMED TOP STRIP ===== */
.top-strip{
  min-height:16px;
}

/* Windows XP */
html[data-megu-theme="xp"] .top-strip{
  background:linear-gradient(#246fd0,#0d4ea8) !important;
  color:#fff !important;
  border-bottom:1px solid #0a3e85 !important;
}

/* Windows 98 */
html[data-megu-theme="win98"] .top-strip{
  background:#000080 !important;
  color:#fff !important;
  border-bottom:2px outset #fff !important;
}

/* Kawaii Pink */
html[data-megu-theme="pink"] .top-strip{
  background:linear-gradient(#e96aa6,#c94b89) !important;
  color:#fff !important;
  border-bottom:1px solid #a83a70 !important;
}

/* Purple Dream */
html[data-megu-theme="purple"] .top-strip{
  background:linear-gradient(#7650a8,#53317f) !important;
  color:#fff !important;
  border-bottom:1px solid #3e245f !important;
}

/* Dark Mode */
html[data-megu-theme="dark"] .top-strip{
  background:#0b0e12 !important;
  color:#dbe3eb !important;
  border-bottom:1px solid #36414c !important;
}

/* Minty */
html[data-megu-theme="mint"] .top-strip{
  background:linear-gradient(#58b690,#37896c) !important;
  color:#fff !important;
  border-bottom:1px solid #2d7059 !important;
}

/* Peach Cream */
html[data-megu-theme="peach"] .top-strip{
  background:linear-gradient(#e59b70,#c9764e) !important;
  color:#fff !important;
  border-bottom:1px solid #a65c38 !important;
}

/* Aqua Cloud */
html[data-megu-theme="aqua"] .top-strip{
  background:linear-gradient(#4cb7d5,#2d87a8) !important;
  color:#fff !important;
  border-bottom:1px solid #246b85 !important;
}

/* Footer counter follows footer theme */
.footer-counter{
  font-family:monospace;
  letter-spacing:1px;
}

/* --- community prototype additions --- */
.community-toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.community-note{font:12px Arial,sans-serif;color:#444}
.mega-flex{display:grid;grid-template-columns:1fr 240px;gap:10px}
.profile-hero{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid #777;padding:10px;margin-bottom:10px}
.profile-avatar-wrap{text-align:center}
.profile-avatar-large{width:92px;height:92px;border:2px outset #ddd;background:#fff;image-rendering:pixelated;object-fit:contain;padding:6px}
.profile-badge{display:inline-block;margin-top:6px;padding:2px 6px;border:1px solid #777;background:#ffffdd;font:bold 11px Arial,sans-serif}
.profile-headline{font-size:26px;color:#000080;margin:0 0 4px}
.profile-sub{font:12px Arial,sans-serif;color:#444;margin-bottom:8px}
.profile-about{border:1px dashed #888;background:#f9f9f9;padding:7px;font-size:13px}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.stat-card{border:1px solid #777;background:#fff;padding:7px}
.stat-card b{display:block;color:#000080;margin-bottom:2px}
.friends-grid,.profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.friend-card{border:1px solid #777;background:#fff;text-align:center;padding:8px}
.friend-card img{width:56px;height:56px;image-rendering:pixelated;object-fit:contain;border:1px solid #999;background:#f7f7f7;padding:4px;margin-bottom:5px}
.friend-card .small{display:block;margin:3px 0 6px}
.avatar-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.avatar-option{border:2px outset #ddd;background:#fff;padding:6px;text-align:center;cursor:pointer}
.avatar-option.selected{border-style:inset;background:#fff7c7}
.avatar-option img{width:48px;height:48px;image-rendering:pixelated;object-fit:contain}
.comment-box,.chat-box{border:1px solid #777;background:#fff;padding:8px}
.comment-item,.chat-message{border-bottom:1px dotted #999;padding:6px 0}
.comment-item:last-child,.chat-message:last-child{border-bottom:none}
.comment-meta,.chat-meta{font:11px Arial,sans-serif;color:#555;margin-bottom:2px}
.comment-body{font-size:13px}
.comment-form textarea,.chat-form input[type="text"],.login-form input[type="text"]{width:100%;border:2px inset #ddd;padding:6px;font:12px Arial,sans-serif}
.comment-form textarea{height:64px;resize:vertical}
.comment-form,.chat-form,.login-form{margin-top:10px}
.community-pager{display:flex;gap:4px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.shout-scroll{max-height:260px;overflow:auto;padding-right:4px}
.chat-form-row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
.login-steps{margin:0 0 10px 18px;padding:0}
.login-steps li{margin-bottom:5px}
.login-help{font-size:13px;background:#ffffdd;border:1px solid #b59b00;padding:8px;margin-top:8px}
.success-box{background:#e6ffe8;border:1px solid #4a8b4a;padding:7px;margin-top:8px;font-size:13px}
.mypage-layout{display:grid;grid-template-columns:1fr;gap:10px}
.section-intro{font-size:13px;margin-bottom:8px}
.profile-mini-link{font:bold 13px Arial,sans-serif}
.comment-count{font:12px Arial,sans-serif;color:#444}
.friend-list-clean{list-style:none;padding:0;margin:0}
.friend-list-clean li{padding:5px 0;border-bottom:1px dotted #999}
.friend-list-clean li:last-child{border-bottom:none}
.sidebar-mini-chat{font-size:12px}
.sidebar-mini-chat .mini-chat-line{border-bottom:1px dotted #aaa;padding:4px 0}
.sidebar-mini-chat .mini-chat-line:last-child{border-bottom:none}
@media (max-width:1000px){
  .mega-flex,.profile-hero{grid-template-columns:1fr}
  .friends-grid,.profile-grid,.avatar-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-grid{grid-template-columns:1fr}
}


/* v77 profile cleanup */
.profile-page-stack{display:flex;flex-direction:column;gap:10px}
.profile-top-panel .panel-title.red{background:#b30000}
.profile-summary-box{background:#fff;border:1px solid #7b7b7b;padding:12px;display:grid;grid-template-columns:136px 1fr;gap:14px;align-items:start}
.profile-avatar-shell{position:relative;width:118px;text-align:center}
.profile-avatar-frame{position:relative;width:110px;height:110px;margin:0 auto;border:4px solid #2c2c2c;background:#fffbe8;box-shadow:3px 3px 0 #999;overflow:hidden;cursor:default}
.profile-avatar-frame img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;padding:8px;box-sizing:border-box}
.profile-avatar-shell.editable .profile-avatar-frame{cursor:pointer}
.avatar-edit-badge{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.8);color:#fff;font:bold 11px Arial,sans-serif;padding:4px 6px;border:1px solid #fff;opacity:0;transition:opacity .15s ease}
.profile-avatar-shell.editable:hover .avatar-edit-badge{opacity:1}
.profile-main-copy h2{margin:0 0 4px 0;font-size:28px;line-height:1;color:#000080}
.profile-title-line{font:normal 12px Arial,sans-serif;color:#444;margin-bottom:10px}
.profile-about-box{border:1px dashed #999;background:#fafafa;padding:10px;font-size:13px;margin-bottom:10px}
.profile-stat-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.profile-stat-chip{background:#f4f4f4;border:2px groove #dcdcdc;padding:8px 6px;text-align:center;min-height:50px}
.profile-stat-chip b{display:block;color:#7a0000;font-size:11px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}
.profile-stat-chip span{font:bold 15px Arial,sans-serif;color:#000}
.profile-friends-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.profile-friend-card{border:1px solid #9c9c9c;background:#ececec;padding:8px;text-align:center;cursor:pointer;min-height:108px}
.profile-friend-card:hover{background:#fff9cf}
.profile-friend-card img{width:54px;height:54px;object-fit:contain;image-rendering:pixelated;background:#fff;border:1px solid #999;padding:4px;margin-bottom:6px}
.profile-friend-card .friend-name{display:block;font:bold 12px Arial,sans-serif;color:#000080;line-height:1.2}
.profile-friend-card .friend-role{display:block;font-size:10px;color:#444;margin-top:3px;line-height:1.15}
.avatar-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;padding:40px 16px;overflow:auto}
.avatar-modal-window{max-width:420px;margin:0 auto;border:2px solid #666;background:#d4d0c8;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.avatar-modal-body{padding:10px}
.popup-avatar-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.comment-box{min-height:150px}
@media (max-width: 900px){
  .profile-summary-box{grid-template-columns:1fr}
  .profile-avatar-shell{margin:0 auto}
  .profile-stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-friends-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* v78 profile + friends editor */
.profile-summary-root{margin-bottom:0}.profile-page-stack>.profile-summary-root{border:1px solid #777;background:#fff}.profile-stat-strip{grid-template-columns:repeat(5,minmax(82px,1fr))!important;gap:6px!important}.profile-stat-chip{display:grid!important;grid-template-columns:28px 1fr!important;grid-template-rows:auto auto!important;column-gap:7px!important;align-items:center!important;text-align:left!important;padding:6px 7px!important;min-height:52px!important;background:#f8f8f8!important;border:1px solid #a0a0a0!important;box-shadow:inset 1px 1px #fff,inset -1px -1px #d4d4d4}.profile-stat-icon{grid-row:1/span 2;width:26px;height:26px;image-rendering:pixelated;object-fit:contain}.profile-stat-chip b{margin:0!important;font:bold 10px Arial,sans-serif!important;color:#666!important;line-height:1.1}.profile-stat-chip span{font:bold 15px Arial,sans-serif!important;color:#111!important;line-height:1.1}.profile-friend-card{position:relative}.profile-friend-card.friend-editing{cursor:grab;border:2px dashed #777;padding-top:21px}.profile-friend-card.friend-editing:active{cursor:grabbing}.profile-friend-card.drag-over{outline:3px solid #ff9900;background:#fff4c7}.friend-remove-button{position:absolute;right:3px;top:3px;border:1px solid #700;background:#c90000;color:#fff;font:bold 10px Arial,sans-serif;line-height:16px;height:18px;padding:0 5px;cursor:pointer}.friend-order-number{position:absolute;left:4px;top:4px;font:bold 10px Arial,sans-serif;color:#555}.friend-edit-note{margin-bottom:8px;padding:6px 8px;border:1px dashed #777;background:#fff7d6;font:12px Arial,sans-serif}.public-friend-add{color:#fff!important;font-weight:bold}.public-friend-added{color:#d7ffd7;font:bold 11px Arial,sans-serif}html[data-megu-theme="dark"] .profile-page-stack>.profile-summary-root,html[data-megu-theme="dark"] .profile-stat-chip{background:#171c22!important;color:#e6edf3!important;border-color:#46515c!important;box-shadow:none}html[data-megu-theme="dark"] .profile-stat-chip b{color:#aeb8c2!important}html[data-megu-theme="dark"] .profile-stat-chip span{color:#fff!important}html[data-megu-theme="dark"] .friend-edit-note{background:#242b33;color:#e6edf3;border-color:#5b6773}@media(max-width:900px){.profile-stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* v83 Top Friends use exact Pets card appearance */
#myTopFriends,
#publicTopFriends{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}
#myTopFriends .boss-card.pet-mini-card,
#publicTopFriends .boss-card.pet-mini-card{
  cursor:pointer;
}
#myTopFriends .boss-card.pet-mini-card b,
#publicTopFriends .boss-card.pet-mini-card b{
  display:block;
}


/* v84: clean normal Top Friends cards, draggable edit mode preserved */
#myTopFriends .boss-card.pet-mini-card,
#publicTopFriends .boss-card.pet-mini-card{
  cursor:pointer;
}


/* v85 cleaner MySpace-style stat strip */
.profile-stat-strip{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  border:1px solid #a6adb5 !important;
  border-radius:8px;
  overflow:hidden;
  background:#f5f7f9;
  margin-top:12px;
}
.profile-stat-chip{
  display:grid !important;
  grid-template-columns:54px 1fr !important;
  grid-template-rows:auto auto !important;
  column-gap:10px !important;
  align-items:center !important;
  text-align:left !important;
  min-height:82px !important;
  padding:10px 14px !important;
  border:0 !important;
  border-right:1px solid #c4c9cf !important;
  background:transparent !important;
  box-shadow:none !important;
}
.profile-stat-chip:last-child{
  border-right:0 !important;
}
.profile-stat-icon-wrap{
  grid-row:1 / span 2;
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef3f7;
}
.profile-stat-icon{
  width:34px !important;
  height:34px !important;
  image-rendering:pixelated;
  object-fit:contain;
}
.profile-stat-chip .stat-value{
  font:bold 24px Arial,sans-serif !important;
  color:#111 !important;
  line-height:1 !important;
  margin-top:2px;
}
.profile-stat-chip .stat-label{
  font:12px Arial,sans-serif !important;
  color:#666 !important;
  text-transform:uppercase;
  letter-spacing:.4px;
  line-height:1.1;
}
.profile-stat-chip.stat-level .profile-stat-icon-wrap{background:#fff4c7}
.profile-stat-chip.stat-coins .profile-stat-icon-wrap{background:#fff0bd}
.profile-stat-chip.stat-aura .profile-stat-icon-wrap{background:#f0dcff}
.profile-stat-chip.stat-lemons .profile-stat-icon-wrap{background:#fff6bf}

html[data-megu-theme="dark"] .profile-stat-strip{
  background:#171c22;
  border-color:#46515c !important;
}
html[data-megu-theme="dark"] .profile-stat-chip{
  border-right-color:#46515c !important;
}
html[data-megu-theme="dark"] .profile-stat-chip .stat-value{
  color:#fff !important;
}
html[data-megu-theme="dark"] .profile-stat-chip .stat-label{
  color:#b9c3cc !important;
}
@media(max-width:900px){
  .profile-stat-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .profile-stat-chip:nth-child(2){
    border-right:0 !important;
  }
  .profile-stat-chip:nth-child(-n+2){
    border-bottom:1px solid #c4c9cf !important;
  }
}


/* v86 profile header: stats span full width below avatar + info */
.profile-summary-box{
  display:grid !important;
  grid-template-columns:136px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  gap:12px 14px !important;
  align-items:start !important;
}
.profile-avatar-shell{
  grid-column:1;
  grid-row:1;
}
.profile-main-copy{
  grid-column:2;
  grid-row:1;
  min-width:0;
}
.profile-summary-box > .profile-stat-strip{
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  margin-top:0 !important;
}
.profile-main-copy > .profile-stat-strip{
  display:none !important;
}
@media(max-width:900px){
  .profile-summary-box{
    grid-template-columns:1fr !important;
  }
  .profile-avatar-shell,
  .profile-main-copy,
  .profile-summary-box > .profile-stat-strip{
    grid-column:1 !important;
  }
  .profile-avatar-shell{grid-row:1}
  .profile-main-copy{grid-row:2}
  .profile-summary-box > .profile-stat-strip{grid-row:3}
}


/* v87 compact stat strip: icon + full number only */
.profile-stat-strip{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  min-height:0 !important;
}
.profile-stat-chip{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:54px !important;
  padding:7px 9px !important;
  overflow:visible !important;
}
.profile-stat-icon-wrap{
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
}
.profile-stat-icon{
  width:24px !important;
  height:24px !important;
}
.profile-stat-chip .stat-value{
  flex:0 1 auto !important;
  min-width:0 !important;
  font:bold 17px Arial,sans-serif !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.profile-stat-chip .stat-label{
  display:none !important;
}
@media(max-width:900px){
  .profile-stat-strip{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .profile-stat-chip{
    padding:6px 5px !important;
    gap:5px !important;
  }
  .profile-stat-icon-wrap{
    flex-basis:30px !important;
    width:30px !important;
    height:30px !important;
  }
  .profile-stat-icon{
    width:22px !important;
    height:22px !important;
  }
  .profile-stat-chip .stat-value{
    font-size:15px !important;
  }
}


/* v88 level line + 3-stat profile strip */
.profile-level-line{
  font:12px Arial,sans-serif;
  color:#222;
  margin:2px 0 3px;
}
.profile-stat-strip{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media(max-width:900px){
  .profile-stat-strip{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
html[data-megu-theme="dark"] .profile-level-line{
  color:#e6edf3;
}


/* v89 auth + home chat */
#rightSidebarChatPanel{
  display:none !important;
}
#home > .panel + .panel{
  margin-top:8px;
}
.auth-error{
  background:#ffe4e4;
  border:1px solid #a33;
  color:#700;
  padding:7px;
  margin-top:8px;
  font-size:13px;
}


/* v90 compact Home chat */
#home .shout-scroll{
  max-height:130px !important;
}

/* v93 dark mode chat fix */
html[data-megu-theme="dark"] .chat-box,
html[data-megu-theme="dark"] .comment-box{
  background:#1b2027 !important;
  border-color:#495562 !important;
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .shout-scroll,
html[data-megu-theme="dark"] .comments-list{
  background:#161b21 !important;
  border:1px solid #414b56 !important;
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .chat-message,
html[data-megu-theme="dark"] .comment-item{
  color:#e8edf2 !important;
  border-bottom:1px dotted #495562 !important;
}

html[data-megu-theme="dark"] .chat-meta,
html[data-megu-theme="dark"] .comment-meta{
  color:#9ba8b6 !important;
}

html[data-megu-theme="dark"] .comment-body{
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .chat-form input[type="text"],
html[data-megu-theme="dark"] .comment-form textarea,
html[data-megu-theme="dark"] .login-form input[type="text"]{
  background:#0f141a !important;
  color:#eef2f6 !important;
  border:1px solid #566272 !important;
}

html[data-megu-theme="dark"] .chat-form input[type="text"]::placeholder,
html[data-megu-theme="dark"] .comment-form textarea::placeholder,
html[data-megu-theme="dark"] .login-form input[type="text"]::placeholder{
  color:#8895a3 !important;
}


/* v94 dark mode: remove red text from pets/bosses/items and detail panes */
html[data-megu-theme="dark"] .boss-card b,
html[data-megu-theme="dark"] .pet-mini-card b,
html[data-megu-theme="dark"] .fish-mini-card b,
html[data-megu-theme="dark"] .item b{
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .boss-stat,
html[data-megu-theme="dark"] .item-stat,
html[data-megu-theme="dark"] .item-desc{
  color:#bfc9d4 !important;
}

html[data-megu-theme="dark"] .detail-body{
  background:#161b21 !important;
  border-color:#495562 !important;
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .detail-body b{
  color:#e8edf2 !important;
}

html[data-megu-theme="dark"] .detail-body b:first-of-type{
  color:#8fc6ff !important;
}


/* v95 dark mode profile readability fixes */
html[data-megu-theme="dark"] .profile-main-copy h2{
  color:#ffffff !important;
}

html[data-megu-theme="dark"] .profile-title-line{
  color:#d7e2ee !important;
}

html[data-megu-theme="dark"] .profile-about-box{
  background:#1a2027 !important;
  color:#eef4fb !important;
  border:1px dashed #5f6d7c !important;
}

html[data-megu-theme="dark"] .profile-about-box,
html[data-megu-theme="dark"] .profile-about-box *{
  color:#eef4fb !important;
}

html[data-megu-theme="dark"] .profile-avatar-frame{
  background:#10151b !important;
  border-color:#5a6672 !important;
  box-shadow:3px 3px 0 #0b0f14 !important;
}



/* v97 news preview layout */
.news-preview{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:9px;
  align-items:start;
  border-bottom:1px dotted #777;
  padding:6px 0 9px;
  margin-bottom:7px;
}
.news-preview-thumb{
  width:52px;
  height:52px;
  object-fit:contain;
  image-rendering:pixelated;
  background:#fff;
  border:1px solid #999;
  padding:3px;
}
.news-preview-copy{
  min-width:0;
}
.news-preview-summary{
  margin-top:2px;
}
.news-preview-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}
.news-preview:last-of-type{
  margin-bottom:5px;
}
.news-article-thumbnail{
  width:96px;
  height:96px;
  object-fit:contain;
  image-rendering:pixelated;
  background:#fff;
  border:2px ridge #ccc;
  padding:6px;
  float:left;
  margin:0 12px 8px 0;
}
.news-article::after{
  content:"";
  display:block;
  clear:both;
}
html[data-megu-theme="dark"] .news-preview-thumb,
html[data-megu-theme="dark"] .news-article-thumbnail{
  background:#141a20 !important;
  border-color:#4c5966 !important;
}
html[data-megu-theme="dark"] .news-preview{
  border-bottom-color:#4a5561 !important;
}
@media(max-width:560px){
  .news-preview{
    grid-template-columns:46px minmax(0,1fr);
    gap:7px;
  }
  .news-preview-thumb{
    width:42px;
    height:42px;
  }
  .news-article-thumbnail{
    width:72px;
    height:72px;
  }
}


/* v98 restore original centered Megupets width */
.page{
  width:980px !important;
  max-width:980px !important;
  min-height:0 !important;
  margin:10px auto 30px !important;
}
@media(max-width:1000px){
  .page{
    width:calc(100% - 12px) !important;
    max-width:980px !important;
    margin:6px auto 20px !important;
  }
}

/* v3 live cleanup */
.social-empty-state{
  padding:14px;
  text-align:center;
  border:1px dashed #888;
  background:#f5f5f5;
  font:12px Arial,sans-serif;
  margin-bottom:8px;
}
html[data-megu-theme="dark"] .social-empty-state{
  background:#1b2027;
  color:#e8edf2;
  border-color:#56616d;
}
.chat-form input:disabled,
.comment-form textarea:disabled,
.chat-form button:disabled,
.comment-form button:disabled{
  opacity:.65;
  cursor:not-allowed;
}


/* v4.2 keep FREE LEMON title permanently visible */
.left-sidebar .ad .bigad{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:static !important;
  height:auto !important;
  min-height:20px !important;
  overflow:visible !important;
  margin:2px 0 5px !important;
  padding:0 !important;
  line-height:20px !important;
  font-family:Impact,"Arial Black",Arial,sans-serif !important;
  font-size:18px !important;
  font-weight:900 !important;
  color:#cc0000 !important;
  text-shadow:none !important;
  white-space:nowrap !important;
}

html[data-megu-theme="xp"] .left-sidebar .ad .bigad,
html[data-megu-theme="win98"] .left-sidebar .ad .bigad,
html[data-megu-theme="pink"] .left-sidebar .ad .bigad,
html[data-megu-theme="purple"] .left-sidebar .ad .bigad,
html[data-megu-theme="mint"] .left-sidebar .ad .bigad,
html[data-megu-theme="peach"] .left-sidebar .ad .bigad,
html[data-megu-theme="aqua"] .left-sidebar .ad .bigad{
  color:#cc0000 !important;
}

html[data-megu-theme="dark"] .left-sidebar .ad .bigad{
  color:#ffd76a !important;
}


/* v4.3 stable FREE LEMON graphic */
.left-sidebar .ad .lemon-ad-title{
  display:block !important;
  width:150px !important;
  max-width:100% !important;
  height:28px !important;
  object-fit:contain !important;
  margin:1px auto 4px !important;
  opacity:1 !important;
  visibility:visible !important;
  position:static !important;
  image-rendering:auto !important;
}

.about-page-copy{
  font-size:13px;
  line-height:1.45;
}
.about-page-copy p{
  margin:0 0 10px;
}
.about-page-copy p:last-child{
  margin-bottom:0;
}

/* v4.6 real My Page/session fix */
#authMenuLink{
  cursor:pointer;
}


/* v4.8 persistent profile editing */
.profile-about-editable{
  position:relative;
  min-height:34px;
  padding-right:34px !important;
}

.profile-about-pencil{
  display:none;
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  padding:0;
  border:1px solid #777;
  background:#ece9d8;
  font-size:16px;
  line-height:20px;
  cursor:pointer;
}

.profile-about-editable:hover .profile-about-pencil,
.profile-about-pencil:focus{
  display:block;
}

#bioEditInput{
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  min-height:90px;
  font:13px Arial,sans-serif;
}

.bio-edit-window{
  max-width:430px;
}

.bio-edit-footer{
  margin-top:7px;
  display:flex;
  gap:6px;
  align-items:center;
}

#bioCharCount{
  margin-right:auto;
  font-size:11px;
}


/* v4.9 social + notification + compact comments */
.comment-box{
  min-height:0 !important;
  height:auto !important;
}
.comment-item{
  min-height:0 !important;
  height:auto !important;
  padding:6px 0 !important;
}
.comment-body{
  min-height:0 !important;
  height:auto !important;
  line-height:1.25 !important;
}
.comment-box:has(.comment-item:only-child){
  padding-top:6px !important;
  padding-bottom:6px !important;
}

.nav-envelope-icon{
  width:16px;
  height:16px;
  vertical-align:-3px;
  image-rendering:pixelated;
}
#notificationMenuLink{
  position:relative;
  display:inline-block;
  min-width:17px;
  cursor:pointer;
}
.notification-badge{
  position:absolute;
  right:-8px;
  top:-8px;
  min-width:13px;
  height:13px;
  padding:0 2px;
  border:1px solid #7a0000;
  border-radius:7px;
  background:#d40000;
  color:#fff;
  font:bold 9px Arial,sans-serif;
  line-height:13px;
  text-align:center;
}
.notifications-list{display:flex;flex-direction:column;gap:5px}
.notification-item{border:1px solid #9aa7b5;background:#f7f9fb;padding:8px}
.notification-item.unread{border-color:#2b65b0;background:#eaf3ff}
.notification-message{font-size:12px}
.notification-meta{margin-top:3px;color:#666;font-size:10px}
.notification-actions{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap}
.notification-empty{padding:12px;text-align:center;border:1px dashed #999}

.profile-summary-root{position:relative}
.profile-poke-button{
  position:absolute;
  right:8px;
  top:8px;
  width:30px;
  height:30px;
  padding:3px;
  border:1px solid #777;
  background:#ece9d8;
  cursor:pointer;
  z-index:5;
}
.profile-poke-button img{width:22px;height:22px;image-rendering:pixelated}
.profile-poke-button.waiting{opacity:.45;cursor:not-allowed}
.profile-level-divider{margin:0 5px;color:#777}
.profile-poke-count{display:inline-flex;align-items:center;gap:2px}
.profile-poke-count img{width:14px;height:14px;image-rendering:pixelated;vertical-align:-2px}

.profile-about-editable{
  position:relative !important;
  min-height:22px !important;
  padding-right:34px !important;
}
.profile-about-pencil{
  display:none !important;
  position:absolute !important;
  right:5px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:24px !important;
  height:22px !important;
  padding:0 !important;
  border:1px solid #777 !important;
  background:#ece9d8 !important;
  cursor:pointer !important;
  font-size:15px !important;
  line-height:18px !important;
}
.profile-about-editable:hover .profile-about-pencil,
.profile-about-pencil:focus{
  display:block !important;
}


/* v5.1 poke emoji cleanup */
.profile-poke-button{
  font-size:20px !important;
  line-height:22px !important;
  text-align:center !important;
}
.profile-poke-button .poke-emoji{
  display:block;
  transform:translateY(-1px);
}
.profile-poke-count img{display:none !important;}
.poke-count-emoji{
  font-size:13px;
  line-height:1;
}


/* v6.3 visible @mentions */
.megupets-mention {
  color: #0000cc;
  font-weight: bold;
}


/* v6.5 — dark-mode notifications + transparent Live Events icons */

/* Live Events icon PNGs already contain their own pixels/transparency.
   Do not force a white tile behind them in any theme. */
.event-row img {
  background: transparent !important;
}

/* Dark mode notifications were inheriting the light notification cards. */
html[data-megu-theme="dark"] .notification-item {
  background: #252c35 !important;
  color: #f2f5f7 !important;
  border-color: #566273 !important;
}

html[data-megu-theme="dark"] .notification-item.unread {
  background: #26384d !important;
  color: #ffffff !important;
  border-color: #6f9bd1 !important;
}

html[data-megu-theme="dark"] .notification-message,
html[data-megu-theme="dark"] .notification-message b {
  color: #f2f5f7 !important;
}

html[data-megu-theme="dark"] .notification-item.unread .notification-message,
html[data-megu-theme="dark"] .notification-item.unread .notification-message b {
  color: #ffffff !important;
}

html[data-megu-theme="dark"] .notification-meta {
  color: #aeb8c4 !important;
}

html[data-megu-theme="dark"] .notification-empty {
  background: #252c35 !important;
  color: #f2f5f7 !important;
  border-color: #66717f !important;
}

/* Keep @mentions readable on dark notification/comment/chat surfaces. */
html[data-megu-theme="dark"] .megupets-mention {
  color: #78b7ff !important;
}


/* v6.7 Fish archive behavior */
#fish .fish-mini-card {
  cursor: pointer;
}
#fish .fish-mini-card:hover {
  outline: 2px solid #000080;
}
#fishDetail .detail-body img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
  float: left;
  margin: 0 8px 5px 0;
}
html[data-megu-theme="dark"] #fish .fish-mini-card:hover {
  outline-color: #8bb7e0 !important;
}


/* v6.8 — sidebar layout fix */
.side-symmetry-panel{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

/* Keep all 8 left-navigation buttons visible as a clean 2x4 grid. */
.left-icon-nav{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}

/* FREE LEMON belongs on the right beneath Live Events now. */
.right-sidebar > .ad{
  margin:8px 0 !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.right-sidebar .lemon-ad-title{
  max-width:100%;
  height:auto;
}


/* CSP-generated replacements for former inline style attributes */
.csp-style-1{justify-content:flex-end;}
.csp-style-2{margin:0 0 6px;font-size:24px;color:#000080;}
.csp-style-3{display:none}
.csp-style-4{text-align:right;}
.csp-style-5{float:right;color:#fff}
.csp-style-6{display:none;}
.csp-style-7{margin-top:6px}
.csp-style-8{float:right}
.csp-style-9{margin-top:8px;}

/* Strict-CSP replacements for dynamically rendered inline styles */
.csp-name-purple{font-size:14px;color:#663399}
.csp-name-blue{font-size:14px;color:#000080}
.csp-name-maroon{font-size:14px;color:#800000}
.csp-clear-both{clear:both}
.csp-margin-top-10{margin-top:10px}
.csp-chat-open-wrap{margin-top:6px;text-align:center}
.csp-grid-full{grid-column:1/-1}


/* v7.7 mobile layout:
   - main content first
   - Navigation panel below main content
   - all 8 navigation icons in one compact row
   - hide the entire right sidebar (Live Events, FREE LEMON, sidebar chat)
*/
@media(max-width:760px){
  .layout{
    grid-template-columns:1fr !important;
    display:grid !important;
  }

  .layout > main{
    order:1 !important;
    width:100% !important;
    min-width:0 !important;
  }

  .left-sidebar{
    order:2 !important;
    width:100% !important;
    min-width:0 !important;
  }

  .right-sidebar{
    display:none !important;
  }

  .left-sidebar .side-symmetry-panel{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
  }

  .left-sidebar .panel-body{
    padding:6px !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .left-icon-nav{
    display:grid !important;
    grid-template-columns:repeat(8,minmax(56px,1fr)) !important;
    gap:5px !important;
    min-width:500px !important;
  }

  .left-icon-button{
    min-height:58px !important;
    padding:4px !important;
  }

  .left-icon-button img{
    width:38px !important;
    height:38px !important;
  }
}

@media(max-width:560px){
  .left-icon-nav{
    grid-template-columns:repeat(8,minmax(52px,1fr)) !important;
    min-width:464px !important;
  }

  .left-icon-button{
    min-height:54px !important;
    padding:3px !important;
  }

  .left-icon-button img{
    width:34px !important;
    height:34px !important;
  }
}


/* v7.9 mobile Navigation header controls */
.mobile-nav-header{
  display:none;
}

@media(max-width:760px){
  /* Mobile uses the bottom Navigation panel instead of the desktop text menu. */
  .navbar{
    display:none !important;
  }

  .desktop-nav-title{
    display:none !important;
  }

  .left-sidebar .panel-title{
    padding:0 !important;
  }

  .mobile-nav-header{
    display:grid !important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    min-height:34px;
    width:100%;
    box-sizing:border-box;
  }

  .mobile-nav-head-button{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:inherit;
    font:bold 12px Arial,sans-serif;
    min-height:34px;
    padding:4px 8px;
    cursor:pointer;
  }

  .mobile-nav-head-button:focus-visible{
    outline:2px solid #fff;
    outline-offset:-3px;
  }

  .mobile-notification-button{
    justify-self:start;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
  }

  .mobile-nav-envelope-icon{
    width:19px;
    height:15px;
    object-fit:contain;
    image-rendering:pixelated;
  }

  .mobile-notification-badge{
    position:absolute;
    top:1px;
    left:28px;
    min-width:14px;
    height:14px;
    line-height:14px;
    padding:0 3px;
    border-radius:8px;
    background:#cc0000;
    color:#fff;
    font:bold 9px Arial,sans-serif;
    text-align:center;
    box-sizing:border-box;
  }

  .mobile-my-page-button{
    justify-self:center;
    white-space:nowrap;
  }

  .mobile-auth-button{
    justify-self:end;
    white-space:nowrap;
  }
}


/* v8.0 mobile navigation placement + restored Navigation label */
@media(max-width:760px){
  /*
    Desktop navbar is hidden on mobile. The layout starts immediately below
    the marquee, so placing the left sidebar first puts the mobile Navigation
    panel exactly where the old top menu used to be.
  */
  .layout{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .left-sidebar{
    order:1 !important;
    width:100% !important;
  }

  .layout > main{
    order:2 !important;
  }

  .right-sidebar{
    order:3 !important;
    display:none !important;
  }

  .mobile-nav-header{
    display:grid !important;
    grid-template-columns:auto auto 1fr auto !important;
    align-items:center !important;
    gap:4px !important;
    min-height:34px;
    padding:0 4px;
    box-sizing:border-box;
  }

  .mobile-nav-label{
    display:block !important;
    font:bold 13px Arial,sans-serif;
    white-space:nowrap;
    padding-left:4px;
  }

  .mobile-notification-button{
    justify-self:start;
    min-width:34px !important;
    padding:4px 5px !important;
  }

  .mobile-my-page-button{
    justify-self:center;
  }

  .mobile-auth-button{
    justify-self:end;
  }

  /* Keep the icon menu directly under the Navigation header. */
  .left-sidebar .side-symmetry-panel{
    margin-bottom:8px !important;
  }
}


/* v8.2 mobile cleanup */
@media(max-width:760px){
  /* Hide the entire desktop-style intro/header area on mobile only. */
  .top-strip,
  .header{
    display:none !important;
  }

  /*
    Mobile Navigation header:
      [Envelope]                              [LOGIN / LOGOUT]
  */
  .mobile-nav-header{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:4px !important;
    min-height:34px;
    padding:0 4px;
    box-sizing:border-box;
  }

  .mobile-notification-button{
    grid-column:1 !important;
    justify-self:start !important;
    min-width:42px !important;
    padding:4px 7px !important;
  }

  .mobile-auth-button{
    grid-column:3 !important;
    justify-self:end !important;
  }

  .mobile-nav-label,
  .mobile-my-page-button{
    display:none !important;
  }
}

/* v8.5 robust profile editor modal visibility */
#avatarModal[hidden],
#bioModal[hidden]{
  display:none !important;
}

/* v8.6 profile editor modal visibility — explicit and CSP-safe */
#avatarModal[hidden],
#bioModal[hidden]{
  display:none !important;
}

#avatarModal:not([hidden]),
#bioModal:not([hidden]){
  display:block !important;
}

/* v9.0 notification pagination */
.notifications-pager{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.notification-page-label{
  min-width:82px;
  text-align:center;
  font-size:11px;
}

/* v9.2 clickable comment notifications */
.notification-item.clickable{
  cursor:pointer;
}

.notification-item.clickable:hover,
.notification-item.clickable:focus{
  outline:1px dotted currentColor;
}

.comment-item.notification-comment-target{
  outline:2px solid currentColor;
  outline-offset:2px;
  animation:notification-comment-flash .55s ease-in-out 3;
}

@keyframes notification-comment-flash{
  0%,100%{opacity:1}
  50%{opacity:.58}
}

/* v9.3 clearer clickable notification hover cue */
.notification-item.clickable{
  transition:background-color .12s ease, filter .12s ease;
}

.notification-item.clickable:hover,
.notification-item.clickable:focus{
  background-color:rgba(0,0,0,.055);
  filter:brightness(.97);
  outline:1px dotted currentColor;
}

/* v9.4 whole-card Poke Back */
.notification-context-link[data-notification-type="poke"].clickable:hover,
.notification-context-link[data-notification-type="poke"].clickable:focus{
  background-color:rgba(0,0,0,.07);
}

/* v9.8 home news cleanup */
#home .panel-title:has(#homeNewsReadAll){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

#homeNewsReadAll{
  margin-left:auto;
  cursor:pointer;
}

/* v9.9 tighten home news card */
#home .news-preview{border-bottom:none;margin-bottom:0;padding-bottom:0;}
#home .news-preview:last-of-type{margin-bottom:0;}
#home .panel > .panel-body{padding-bottom:7px;}

/* v10.1 desktop notification moved into the left Navigation header */
@media(min-width:761px){
  .left-sidebar .panel-title{
    position:relative;
  }

  .desktop-nav-title{
    display:inline-block;
  }

  #notificationMenuLink.desktop-nav-notification{
    float:right;
    margin-left:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    cursor:pointer;
  }
}

/* mobile continues using its dedicated mobile notification button */
@media(max-width:760px){
  #notificationMenuLink.desktop-nav-notification{
    display:none !important;
  }
}

/* v10.2 temporary nav cleanup: Crafting/Coupons hidden from navigation */
@media(min-width:761px){
  .left-icon-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* v11.0 Website Gifts */
#giftMenuLink.desktop-nav-gift{
  float:right;
  margin-left:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  position:relative;
}
.nav-gift-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  image-rendering:pixelated;
}
.mobile-nav-gift-icon{
  width:20px;
  height:20px;
  object-fit:contain;
  image-rendering:pixelated;
}
.gift-page-intro{
  margin-bottom:8px;
  font:12px Arial,sans-serif;
}
.gift-item{
  position:relative;
  border:1px solid #8a8a8a;
  background:#f7f7f7;
  padding:8px;
  margin-bottom:6px;
  font:12px Arial,sans-serif;
}
.gift-item.clickable{
  cursor:pointer;
  transition:background-color .12s ease, filter .12s ease;
}
.gift-item.clickable:hover,
.gift-item.clickable:focus{
  background:#e8e8e8;
  filter:brightness(.98);
  outline:1px dotted currentColor;
}
.gift-item.claimed{
  opacity:.75;
}
.gift-message{
  font-weight:bold;
  margin-bottom:5px;
}
.gift-rewards{
  margin-bottom:5px;
}
.gift-reward-line{
  padding:1px 0;
}
.gift-meta{
  color:#666;
  font-size:10px;
}
.gift-actions{
  text-align:right;
  margin-top:6px;
}
.gift-claimed-label{
  font-weight:bold;
  color:#006600;
}
.gifts-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

/* Mobile header: envelope + gift together on the left, auth on the right. */
@media(max-width:760px){
  .mobile-nav-header{
    grid-template-columns:auto auto 1fr auto !important;
    column-gap:3px !important;
    padding:0 4px !important;
  }
  .mobile-notification-button{
    grid-column:1 !important;
    justify-self:start !important;
    min-width:38px !important;
  }
  .mobile-gift-button{
    grid-column:2 !important;
    justify-self:start !important;
    min-width:38px !important;
    position:relative;
  }
  .mobile-auth-button{
    grid-column:4 !important;
    justify-self:end !important;
  }
  #giftMenuLink.desktop-nav-gift{
    display:none !important;
  }

  /* Fix the horizontal overflow visible on phones. */
  html,body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  .page{
    width:calc(100% - 8px) !important;
    max-width:100% !important;
    margin:4px auto 16px !important;
  }
  .layout,
  .layout > main,
  .left-sidebar,
  .left-sidebar .side-symmetry-panel,
  main .panel,
  main .panel-body,
  .footer,
  .theme-bar{
    min-width:0 !important;
    max-width:100% !important;
  }
  .left-sidebar .panel-body{
    overflow-x:visible !important;
  }
  .left-icon-nav{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    min-width:0 !important;
    width:100% !important;
    gap:4px !important;
  }
  .left-icon-button{
    min-width:0 !important;
    padding:3px !important;
  }
  .left-icon-button img{
    width:32px !important;
    height:32px !important;
  }

  /* The old later .boss-grid rule was overriding mobile and forcing 5 columns. */
  .boss-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
  }
  #realSocialProfiles.boss-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #realSocialProfiles .friend-card,
  #realSocialProfiles .boss-card{
    min-width:0 !important;
    overflow-wrap:anywhere;
  }
}

/* v12.0 code-based website gifts */
.gift-code-label{
  margin-top:8px;
  font-weight:bold;
}
.gift-code-row{
  margin-top:4px;
}
.gift-code-copy-box{
  width:100%;
  border:2px inset #ddd;
  background:#fff;
  color:#000;
  padding:7px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  cursor:pointer;
  text-align:left;
  font:12px Arial,sans-serif;
}
.gift-code-copy-box:hover,
.gift-code-copy-box:focus{
  background:#f0f0f0;
  outline:1px dotted #000;
}
.gift-code-copy-box code{
  font:bold 14px "Courier New",monospace;
  letter-spacing:.5px;
}
.gift-code-copy-box span{
  white-space:nowrap;
  font-size:10px;
}
.gift-redeem-help{
  margin-top:5px;
  font-size:11px;
}
html[data-megu-theme="dark"] .gift-code-copy-box{
  background:#171b20;
  color:#eee;
  border-color:#555;
}
html[data-megu-theme="dark"] .gift-code-copy-box:hover,
html[data-megu-theme="dark"] .gift-code-copy-box:focus{
  background:#242b33;
  outline-color:#ddd;
}

/* v12.3 Gifts are available only to signed-in/linked users */
#giftMenuLink[hidden],
#mobileGiftButton[hidden]{
  display:none !important;
}




/* v13.2 Gifts now literally reuse Pets markup/classes.
   No custom Gift grid/card sizing or typography exists here. */





.gift-code-label{
  margin-top:0;
  font-weight:bold;
}
.gift-detail-expiry{
  margin-top:7px;
}
html[data-megu-theme="dark"] 

/* v13.3 ONE universal Back-link style for every section */
.panel-title.with-back{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}

.panel-title.with-back > .back-link{
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-family:Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:bold !important;
  line-height:14px !important;
  text-decoration:underline !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}

/* Ensure legacy section-specific link classes cannot make Back larger. */
.panel-title.with-back > .csp-style-5,
.panel-title.with-back > .back-link.csp-style-5{
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:14px !important;
}


/* v13.5 Gift detail styled to match the provided mockup */








#giftDetail .gift-code-copy-mockup{
  width:100%;
  box-sizing:border-box;
  background:#f3f3f3;
  border:1px solid #d2d2d2;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  color:#111;
  text-align:left;
  margin:0 0 14px;
}

#giftDetail .gift-code-copy-mockup:hover,
#giftDetail .gift-code-copy-mockup:focus{
  background:#e9e9e9;
  border-color:#a9a9a9;
  outline:1px dotted #333;
}

#giftDetail .gift-code-copy-mockup code{
  font-family:"Consolas","Courier New",monospace;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.35px;
  color:#111;
  background:transparent;
  border:0;
  padding:0;
}

#giftDetail .gift-code-copy-mockup span{
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  color:#111;
  white-space:nowrap;
  text-transform:none;
}

#giftDetail .gift-redeem-help{
  margin:0 0 10px;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:1.35;
}

#giftDetail .gift-redeem-help b{
  font-weight:700;
}

#giftDetail .gift-detail-expiry{
  margin:0;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

html[data-megu-theme="dark"] 

html[data-megu-theme="dark"] #giftDetail .gift-code-copy-mockup{
  background:#24282e;
  color:#eee;
}

html[data-megu-theme="dark"] #giftDetail .gift-code-copy-mockup code,
html[data-megu-theme="dark"] #giftDetail .gift-code-copy-mockup span{
  color:#eee;
}

/* v13.7 coupon-style flair for the redeem-code box */
#giftDetail .gift-code-copy-mockup{
  position:relative;
  overflow:hidden;
  border:1px solid #b8b8b8;
  box-shadow:
    inset 0 0 0 1px #fff,
    inset 0 0 0 3px #e1e1e1;
}

/* dashed coupon cut-line */
#giftDetail .gift-code-copy-mockup::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  border-top:1px dashed #bdbdbd;
  opacity:.55;
  pointer-events:none;
  transform:translateY(-50%);
}

/* little ticket notches */
#giftDetail .gift-code-copy-mockup::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 0 50%, #fff 0 5px, transparent 5.5px),
    radial-gradient(circle at 100% 50%, #fff 0 5px, transparent 5.5px);
}

/* keep text above the decorative coupon lines */
#giftDetail .gift-code-copy-mockup code,
#giftDetail .gift-code-copy-mockup span{
  position:relative;
  z-index:1;
  background:#f3f3f3;
  padding:0 4px;
}

html[data-megu-theme="dark"] #giftDetail .gift-code-copy-mockup code,
html[data-megu-theme="dark"] #giftDetail .gift-code-copy-mockup span{
  background:#24282e;
}

/* v13.8 Gift detail outer shell uses Pets detail-window/title/body exactly */
#giftDetail .gift-code-copy-mockup{
  margin:0 0 8px;
  padding:6px 10px;
}

#giftDetail .gift-code-copy-mockup code{
  font-size:14px;
}

#giftDetail .gift-code-copy-mockup span{
  font-size:11px;
}

#giftDetail .gift-redeem-help{
  margin:0 0 6px;
}

#giftDetail .gift-detail-expiry{
  margin:0;
}

/* v14.6 Mobile Top Friends consistency fix */
@media(max-width:760px){
  /* Keep Top Friends cards square/compact like the desktop retro cards. */
  .top-friends-grid,
  .profile-friends-grid,
  #topFriendsGrid,
  #profileTopFriends{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    align-items:start !important;
  }

  .profile-friend-card{
    box-sizing:border-box !important;
    min-width:0 !important;
    width:100% !important;
    aspect-ratio:1 / 1 !important;
    height:auto !important;
    padding:5px 4px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    overflow:hidden !important;
  }

  .profile-friend-card img{
    display:block !important;
    width:56px !important;
    height:56px !important;
    max-width:68% !important;
    max-height:68% !important;
    object-fit:contain !important;
    image-rendering:pixelated !important;
    margin:0 auto 4px !important;
    flex:0 0 auto !important;
  }

  .profile-friend-card .profile-friend-name,
  .profile-friend-card b,
  .profile-friend-card span{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 2px !important;
    text-align:center !important;
    font-size:11px !important;
    line-height:12px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Prevent long names from visually spilling into neighboring cards. */
  .profile-friend-card{
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
}

@media(max-width:430px){
  .top-friends-grid,
  .profile-friends-grid,
  #topFriendsGrid,
  #profileTopFriends{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
  }

  .profile-friend-card{
    padding:4px 3px !important;
  }

  .profile-friend-card img{
    width:50px !important;
    height:50px !important;
    max-width:66% !important;
    max-height:66% !important;
  }

  .profile-friend-card .profile-friend-name,
  .profile-friend-card b,
  .profile-friend-card span{
    font-size:10px !important;
    line-height:11px !important;
  }
}

/* v14.8 Top Friends mobile names are intentionally capped in JS at 8 chars + ".." */
@media(max-width:760px){
  .profile-friend-card .friend-name,
  .boss-card.pet-mini-card b{
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:clip !important;
    text-align:center !important;
  }
}


/* v15.0 safe external image embeds in profile comments */
.comment-text{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.comment-image-link{
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:6px;
  text-decoration:none;
}

.comment-image-embed{
  display:block;
  width:auto;
  height:auto;
  max-width:min(320px,100%);
  max-height:320px;
  object-fit:contain;
  border:1px solid #9a9a9a;
  background:#fff;
  padding:3px;
  box-sizing:border-box;
}

@media(max-width:760px){
  .comment-image-embed{
    max-width:100%;
    max-height:280px;
  }
}


/* v15.3 clickable comment authors */
.comment-author-link{
  color:#000080;
  text-decoration:underline;
  cursor:pointer;
}
.comment-author-link:hover{
  background:#fff4a8;
}


/* v15.4 comment likes / heart karma */
.comment-like-row{
  display:flex;
  justify-content:flex-end;
  margin-top:5px;
}

.comment-like-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:42px;
  height:23px;
  padding:1px 7px;
  border:2px outset #ddd;
  background:#c0c0c0;
  color:#555;
  font:bold 11px Arial,sans-serif;
  cursor:pointer;
}

.comment-like-button:hover{
  background:#fff0f6;
}

.comment-like-button:active{
  border-style:inset;
}

.comment-like-button.liked{
  color:#d52d66;
  background:#ffe3ef;
}

.comment-like-button:disabled{
  cursor:wait;
  opacity:.72;
}

.comment-like-heart{
  font-size:15px;
  line-height:1;
}

.comment-like-count{
  min-width:10px;
  text-align:center;
}

.profile-heart-count{
  color:#c9275b;
  white-space:nowrap;
}

.profile-heart-emoji{
  font-size:13px;
  vertical-align:-1px;
}

@media(max-width:760px){
  .comment-like-button{
    min-width:44px;
    height:25px;
  }
}


/* v15.5 clean heart-only comment likes */
.comment-like-button,
.comment-like-display{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font:bold 11px Arial,sans-serif !important;
  line-height:1 !important;
}

.comment-like-button{
  color:#777 !important;
  cursor:pointer !important;
}

.comment-like-button:hover{
  color:#d52d66 !important;
  background:transparent !important;
}

.comment-like-button:active{
  border:0 !important;
  background:transparent !important;
}

.comment-like-button.liked{
  color:#d52d66 !important;
  background:transparent !important;
}

.comment-like-button:disabled{
  cursor:wait !important;
  opacity:.72 !important;
}

.comment-like-display{
  color:#aaa !important;
  cursor:default !important;
}

.comment-like-heart{
  font-size:15px !important;
}

.comment-like-count{
  min-width:0 !important;
}

.comment-like-display.liked{
  color:#d52d66 !important;
}


/* v16.0 notification sound toggles */
.notification-title-bar{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

.notification-title-bar > span:first-child{
  flex:0 0 auto;
}

.notification-sound-controls{
  display:flex;
  align-items:center;
  gap:3px;
  margin-left:auto;
  margin-right:7px;
}

.notification-sound-toggle{
  position:relative;
  width:22px;
  height:22px;
  padding:2px;
  margin:0;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.12);
  cursor:pointer;
  box-sizing:border-box;
}

.notification-sound-toggle img{
  display:block;
  width:16px;
  height:16px;
  object-fit:contain;
  image-rendering:pixelated;
}

.notification-sound-toggle:hover{
  background:rgba(255,255,255,.28);
}

.notification-sound-toggle.muted{
  opacity:.48;
}

.notification-sound-toggle.muted::after{
  content:"";
  position:absolute;
  left:2px;
  top:10px;
  width:17px;
  height:2px;
  background:#ff4040;
  transform:rotate(-42deg);
  transform-origin:center;
  box-shadow:0 0 0 1px rgba(80,0,0,.25);
  pointer-events:none;
}

.notification-title-bar .back-link{
  margin-left:0 !important;
  flex:0 0 auto;
}

@media(max-width:760px){
  .notification-title-bar{
    gap:3px !important;
  }

  .notification-sound-controls{
    gap:2px;
    margin-right:4px;
  }

  .notification-sound-toggle{
    width:20px;
    height:20px;
    padding:2px;
  }

  .notification-sound-toggle img{
    width:14px;
    height:14px;
  }

  .notification-sound-toggle.muted::after{
    left:2px;
    top:9px;
    width:15px;
  }
}


/* v16.1 comment/tag sound control + emoji poke */
.notification-sound-toggle.emoji-sound-toggle{
  font-size:15px;
  line-height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.notification-sound-toggle.emoji-sound-toggle span{
  display:block;
  line-height:1;
}

.notification-sound-controls{
  gap:2px;
}

@media(max-width:760px){
  .notification-sound-toggle.emoji-sound-toggle{
    font-size:14px;
  }
}


/* v16.3 safe YouTube embeds in comments */
.comment-youtube-wrap{
  width:min(100%,560px);
  aspect-ratio:16 / 9;
  margin-top:6px;
  background:#000;
  overflow:hidden;
}

.comment-youtube-embed{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

@media(max-width:760px){
  .comment-youtube-wrap{
    width:100%;
  }
}


/* ==========================================================
   v16.5 Interactive Pet Rooms
   ========================================================== */
.pet-room-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.pet-room-title a{
  cursor:pointer;
  color:#fff;
  text-decoration:underline;
}
.pet-room-stage{
  position:relative;
  width:min(100%,640px);
  aspect-ratio:1 / 1;
  margin:0 auto;
  overflow:hidden;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border:2px inset #fff;
  image-rendering:auto;
}
.room-pet-wrap{
  position:absolute;
  left:12%;
  bottom:8%;
  width:96px;
  height:112px;
  cursor:pointer;
  transition:left 2.6s linear, transform .15s ease;
  z-index:5;
  outline:none;
}
.room-pet-wrap.walking{ transition:left 2.6s linear; }
.room-pet-wrap.facing-left .room-pet-sprite{ transform:scaleX(-1); }
.room-pet-wrap.variant-alpha{ transform:scale(1.12); transform-origin:bottom center; }
.room-pet-wrap:focus-visible{ outline:2px dotted #0048a8; outline-offset:2px; }
.room-pet-sprite,.room-pet-accessory{
  position:absolute;
  left:0;
  bottom:12px;
  width:96px;
  height:96px;
  object-fit:contain;
  image-rendering:pixelated;
  pointer-events:none;
}
.room-pet-accessory{ z-index:2; }
.room-pet-name{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  max-width:110px;
  padding:1px 4px;
  background:rgba(255,255,255,.88);
  border:1px solid #777;
  color:#222;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transition:opacity .12s;
}
.room-pet-wrap:hover .room-pet-name,.room-pet-wrap:focus .room-pet-name{ opacity:1; }
.room-pet-bubble{
  position:absolute;
  left:50%;
  bottom:104px;
  transform:translateX(-50%);
  min-width:78px;
  max-width:155px;
  padding:4px 6px;
  background:#fffef5;
  border:2px solid #555;
  color:#222;
  font-size:11px;
  line-height:1.25;
  text-align:center;
  z-index:8;
  box-shadow:2px 2px 0 rgba(0,0,0,.16);
}
.room-pet-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:8px;height:8px;
  margin-left:-4px;
  background:#fffef5;
  border-right:2px solid #555;
  border-bottom:2px solid #555;
  transform:rotate(45deg);
}
.room-pet-variant{
  position:absolute;
  top:-2px;
  right:0;
  z-index:9;
  font-size:18px;
  pointer-events:none;
}
.variant-shiny .room-pet-shiny{
  animation:petSparkle 1.1s ease-in-out infinite alternate;
}
@keyframes petSparkle{
  from{transform:scale(.85) rotate(-8deg);opacity:.65}
  to{transform:scale(1.18) rotate(8deg);opacity:1}
}
.visitor-pet{
  width:76px;height:92px;
  opacity:.92;
  cursor:default;
  z-index:4;
}
.visitor-pet .room-pet-sprite,.visitor-pet .room-pet-accessory{
  width:76px;height:76px;
}
.visitor-pet .room-pet-bubble{ bottom:84px; }
.pet-room-meta{
  text-align:center;
  padding:7px 4px 3px;
  min-height:22px;
}
.pet-room-actions{
  display:flex;
  gap:6px;
  justify-content:center;
  flex-wrap:wrap;
  padding-top:4px;
}
.pet-room-empty{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:54px;
  opacity:.55;
}
.pet-room-editor[hidden]{display:none!important}
.pet-room-editor{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.48);
}
.pet-room-editor-window{
  width:min(680px,96vw);
  max-height:90vh;
  overflow:auto;
  background:var(--panel-bg,#ece9d8);
  border:2px outset #fff;
  box-shadow:5px 5px 0 rgba(0,0,0,.28);
}
.pet-room-editor-close{
  float:right;
  min-width:24px;
  height:20px;
  padding:0 5px;
  border:2px outset #fff;
  background:#ece9d8;
  color:#111;
  font-weight:bold;
  line-height:14px;
  cursor:pointer;
}
.pet-room-editor-big-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:12px 0;
}
.pet-room-editor-big-buttons .retro-button{
  min-height:54px;
  font-size:14px;
}
.pet-room-editor-subtitle{
  font-weight:bold;
  margin-bottom:8px;
}
.pet-choice-grid,.house-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:10px;
}
.pet-choice-card,.house-choice-card{
  border:2px outset #fff;
  background:#ece9d8;
  min-height:94px;
  padding:6px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#111;
}
.pet-choice-card.selected,.house-choice-card.selected{
  outline:3px solid #ff68a0;
  outline-offset:-3px;
}
.pet-choice-card img{
  width:72px;height:72px;object-fit:contain;image-rendering:pixelated;
}
.pet-choice-none{font-size:42px;line-height:52px}
.house-choice-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid #888;
}
.pet-room-editor-status{
  min-height:20px;
  padding-top:6px;
  font-weight:bold;
}
@media(max-width:760px){
  .pet-room-stage{width:100%}
  .room-pet-wrap{width:78px;height:94px}
  .room-pet-sprite,.room-pet-accessory{width:78px;height:78px}
  .room-pet-bubble{bottom:87px}
  .pet-choice-grid,.house-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pet-room-editor-big-buttons{grid-template-columns:1fr}
}


/* ==========================================================
   v16.9 persistent pet interactions
   ========================================================== */
.room-pet-wrap{
  transition:left var(--pet-move-ms, 2.6s) linear, transform .15s ease !important;
}
.room-decoration{
  position:absolute;
  width:64px;
  height:64px;
  object-fit:contain;
  transform:translate(-50%,-50%);
  image-rendering:auto;
  z-index:2;
  pointer-events:none;
}
.room-pet-wrap{z-index:5}
.room-food-item{
  position:absolute;
  width:52px;
  height:52px;
  bottom:8%;
  transform:translateX(-50%);
  object-fit:contain;
  z-index:4;
  animation:petFoodSpawn .28s ease-out;
}
.room-food-item.being-eaten{
  animation:petFoodEat .7s ease-in-out infinite alternate;
}
@keyframes petFoodSpawn{
  from{transform:translateX(-50%) scale(.2);opacity:0}
  to{transform:translateX(-50%) scale(1);opacity:1}
}
@keyframes petFoodEat{
  from{transform:translateX(-50%) scale(1) rotate(-3deg)}
  to{transform:translateX(-50%) scale(.78) rotate(3deg)}
}
.room-pet-wrap.pet-happy{
  animation:petHappyBounce .25s ease-in-out infinite alternate;
}
@keyframes petHappyBounce{
  from{transform:translateY(0)}
  to{transform:translateY(-7px)}
}
.pet-happy-heart{
  position:absolute;
  z-index:8;
  color:#e33c72;
  font-size:18px;
  pointer-events:none;
  animation:petHeartFloat 1.2s ease-out forwards;
}
@keyframes petHeartFloat{
  from{transform:translate(-50%,0) scale(.7);opacity:0}
  20%{opacity:1}
  to{transform:translate(-50%,-60px) scale(1.15);opacity:0}
}

/* Website-wide roaming pet */
.site-pet-roamer{
  position:fixed;
  left:24px;
  top:90px;
  width:72px;
  height:84px;
  z-index:7000;
  pointer-events:auto;
  cursor:pointer;
  transition:left 1.9s linear, top .8s ease, opacity .25s ease, transform .25s ease;
}
.site-pet-roamer-sprite,
.site-pet-roamer-accessory{
  position:absolute;
  left:0;
  bottom:0;
  width:72px;
  height:72px;
  object-fit:contain;
  image-rendering:pixelated;
}
.site-pet-roamer-accessory{z-index:2}
.site-pet-roamer.site-pet-peek{
  clip-path:inset(0 0 40% 0);
}
.site-pet-roamer.site-pet-hide{
  opacity:.12;
  transform:scale(.84);
}
.site-pet-roamer-bubble{
  position:absolute;
  left:50%;
  bottom:75px;
  transform:translateX(-50%);
  padding:3px 6px;
  white-space:nowrap;
  background:#fffef5;
  color:#222;
  border:1px solid #666;
  font-size:10px;
}

/* Decoration editor */
.decoration-choice-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:8px;
}
.decoration-choice-card{
  min-height:92px;
  padding:6px;
  border:2px outset #fff;
  background:#ece9d8;
  color:#111;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.decoration-choice-card.selected{
  outline:3px solid #ff68a0;
  outline-offset:-3px;
}
.decoration-choice-card img{
  width:58px;
  height:58px;
  object-fit:contain;
}
.pet-decoration-help{
  font-size:11px;
  margin:6px 0;
}
.pet-decoration-canvas{
  position:relative;
  width:min(100%,520px);
  aspect-ratio:1/1;
  margin:0 auto 8px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  border:2px inset #fff;
  touch-action:none;
}
.pet-decoration-draft{
  position:absolute;
  width:72px;
  height:72px;
  object-fit:contain;
  transform:translate(-50%,-50%);
  cursor:grab;
  user-select:none;
  touch-action:none;
  z-index:3;
}
.pet-decoration-draft.selected{
  filter:drop-shadow(0 0 5px #ff5c9c);
  animation:decorationHover .75s ease-in-out infinite alternate;
}
.pet-decoration-draft.dragging{
  cursor:grabbing;
  animation:none;
  transform:translate(-50%,-50%) scale(1.08);
}
@keyframes decorationHover{
  from{transform:translate(-50%,-50%) translateY(0)}
  to{transform:translate(-50%,-50%) translateY(-5px)}
}
.pet-decoration-buttons{
  display:flex;
  justify-content:center;
  gap:8px;
}
.pet-room-editor-big-buttons{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media(max-width:760px){
  .decoration-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pet-room-editor-big-buttons{grid-template-columns:1fr !important}
  .site-pet-roamer{width:62px;height:74px}
  .site-pet-roamer-sprite,.site-pet-roamer-accessory{width:62px;height:62px}
}


/* ==========================================================
   v17.0 release/contain roaming + decoration v2
   ========================================================== */
.pet-room-away{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:6px 9px;
  max-width:70%;
  text-align:center;
  background:rgba(255,255,255,.82);
  border:1px solid #777;
  color:#333;
  font-size:11px;
}
.site-pet-roamer{
  transition:
    left .55s ease,
    top .55s ease,
    opacity .35s ease,
    transform .25s ease !important;
}
.site-pet-roamer.roam-hidden{
  opacity:0 !important;
  pointer-events:none !important;
}
.decoration-choice-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:760px){
  .decoration-choice-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ==========================================================
   v17.2 play dates + cleaner roaming
   ========================================================== */
.room-pet-name{
  display:none !important;
}

.room-pet-wrap{
  transition:
    left var(--pet-move-ms,2.6s) linear,
    bottom var(--pet-move-ms,2.6s) ease-in-out,
    transform .15s ease !important;
}

.pet-playdate-button.pet-action-soft-disabled{
  filter:grayscale(1);
  opacity:.48;
}
.pet-playdate-notice{
  margin:5px auto 0;
  max-width:360px;
  padding:4px 7px;
  border:1px solid #b38a00;
  background:#fffbd6;
  color:#4a3b00;
  font-size:11px;
  text-align:center;
}
.playdate-pet{
  z-index:7;
}

.site-pet-roamer.site-pet-peek-left,
.site-pet-roamer.site-pet-peek-right{
  clip-path:none !important;
}
.site-pet-roamer.site-pet-peek-left .site-pet-roamer-sprite,
.site-pet-roamer.site-pet-peek-left .site-pet-roamer-accessory{
  clip-path:inset(0 0 0 48%);
}
.site-pet-roamer.site-pet-peek-right .site-pet-roamer-sprite,
.site-pet-roamer.site-pet-peek-right .site-pet-roamer-accessory{
  clip-path:inset(0 48% 0 0);
}
.site-pet-roamer-bubble{
  z-index:12;
  overflow:visible;
  pointer-events:none;
  max-width:190px;
}


/* ==========================================================
   v17.3 ambient free pets + decoration selector cleanup
   ========================================================== */

/* Other users' released pets wandering around the public site. */
.ambient-free-pet{
  position:fixed;
  left:20px;
  top:70px;
  width:48px;
  height:54px;
  z-index:6400;
  cursor:pointer;
  opacity:.92;
  transition:left 1.7s ease, top 1.05s ease, opacity .32s ease, transform .2s ease;
}
.ambient-free-pet.ambient-pet-hidden{
  opacity:0;
  pointer-events:none;
}
.ambient-free-pet.variant-alpha{
  transform:scale(1.08);
}
.ambient-free-pet-sprite,
.ambient-free-pet-accessory{
  position:absolute;
  left:0;
  bottom:0;
  width:48px;
  height:48px;
  object-fit:contain;
  image-rendering:pixelated;
  pointer-events:none;
}
.ambient-free-pet-accessory{
  z-index:2;
}
.ambient-free-pet-bubble{
  position:absolute;
  left:50%;
  bottom:50px;
  transform:translateX(-50%);
  min-width:88px;
  max-width:185px;
  padding:3px 5px;
  border:1px solid #666;
  background:#fffef5;
  color:#222;
  font-size:10px;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  z-index:4;
  box-shadow:1px 1px 0 rgba(0,0,0,.15);
}

/*
  Decoration chooser now behaves like a horizontal mobile carousel:
  one page = exactly 4 columns x 2 rows (8 items).
*/
.decoration-choice-grid{
  display:flex !important;
  gap:8px !important;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:2px 1px 7px;
  scrollbar-width:thin;
}
.decoration-choice-page{
  flex:0 0 100%;
  min-width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,70px);
  gap:6px;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.decoration-choice-card.pet-choice-card{
  width:100%;
  min-width:0;
  min-height:0 !important;
  height:70px;
  padding:3px 2px !important;
  gap:1px !important;
  border:2px outset #fff;
  background:#ece9d8;
  font-size:9px;
  line-height:1.05;
  overflow:hidden;
}
.decoration-choice-card.pet-choice-card img{
  width:38px !important;
  height:38px !important;
  object-fit:contain;
  flex:0 0 auto;
}
.decoration-choice-card.pet-choice-card b{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  font-size:9px;
}
.decoration-choice-card.pet-choice-card.selected{
  outline:2px solid #ff68a0;
  outline-offset:-2px;
  background:#fff1f6;
}
@media(max-width:760px){
  .decoration-choice-page{
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(2,64px);
    gap:4px;
  }
  .decoration-choice-card.pet-choice-card{
    height:64px;
    padding:2px 1px !important;
  }
  .decoration-choice-card.pet-choice-card img{
    width:34px !important;
    height:34px !important;
  }
  .decoration-choice-card.pet-choice-card b{
    font-size:8px;
  }
}


/* ==========================================================
   v17.4 decorate chooser: one compact square row
   ========================================================== */

/*
  One horizontal row only.
  At desktop editor width, ~8 square cards fit at once.
  On narrower screens the same square cards stay usable and the strip swipes.
*/
.decoration-choice-grid{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  gap:6px !important;
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:2px 1px 7px !important;
}

/* v17.3 page wrappers are no longer produced, but neutralize them if cached. */
.decoration-choice-page{
  display:contents !important;
}

/*
  Pet-card-like compact square:
  - light blue surface
  - thin blue border
  - icon centered
  - small red name underneath
*/
.decoration-choice-card.pet-choice-card{
  flex:0 0 max(64px, calc((100% - 42px) / 8)) !important;
  width:max(64px, calc((100% - 42px) / 8)) !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  min-width:64px !important;
  min-height:64px !important;
  max-width:82px;
  padding:4px 3px 3px !important;
  margin:0 !important;

  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px !important;

  border:1px solid #8fb4da !important;
  border-radius:3px;
  background:#eef6ff !important;
  color:#8b0000 !important;
  box-shadow:none !important;
  overflow:hidden;
  scroll-snap-align:start;
}

.decoration-choice-card.pet-choice-card:hover{
  background:#e1f0ff !important;
  border-color:#6698c8 !important;
}

.decoration-choice-card.pet-choice-card img{
  width:38px !important;
  height:38px !important;
  max-width:58% !important;
  max-height:58% !important;
  object-fit:contain;
  image-rendering:auto;
  flex:0 0 auto;
}

.decoration-choice-card.pet-choice-card b{
  display:block;
  width:100%;
  margin:0 !important;
  padding:0 1px;
  color:#8b0000 !important;
  font:bold 9px Arial,sans-serif !important;
  line-height:1.05 !important;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.decoration-choice-card.pet-choice-card.selected{
  background:#fff3c9 !important;
  border-color:#d58c00 !important;
  outline:2px solid #ffba33 !important;
  outline-offset:-2px !important;
}

@media(max-width:760px){
  .decoration-choice-card.pet-choice-card{
    flex-basis:64px !important;
    width:64px !important;
    min-width:64px !important;
    min-height:64px !important;
    max-width:64px !important;
  }
  .decoration-choice-card.pet-choice-card img{
    width:34px !important;
    height:34px !important;
  }
  .decoration-choice-card.pet-choice-card b{
    font-size:8px !important;
  }
}


/* ==========================================================
   v17.5 decoration selector direct drag/swipe scrolling
   ========================================================== */
.decoration-choice-grid{
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  /*
    Vertical page scrolling still works on touch screens.
    Horizontal motion is handled by the decoration carousel itself.
  */
  touch-action:pan-y;
}
.decoration-choice-grid.decoration-strip-dragging{
  cursor:grabbing;
  scroll-snap-type:none !important;
}
.decoration-choice-card.pet-choice-card,
.decoration-choice-card.pet-choice-card img,
.decoration-choice-card.pet-choice-card b{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}


/* ==========================================================
   v17.7 Pet Room heart store
   ========================================================== */
.pet-heart-balance{
  margin:2px 0 7px;
  padding:4px 7px;
  border:1px solid #c9889a;
  background:#fff0f5;
  color:#8d2145;
  font-size:11px;
  text-align:right;
}
.pet-heart-balance b{
  color:#c2185b;
}

.pet-store-locked{
  position:relative !important;
  overflow:hidden !important;
}
.pet-store-locked > img{
  filter:brightness(.58) saturate(.7);
}
.pet-store-lock-overlay{
  position:absolute;
  inset:0;
  z-index:12;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:4px;
  background:rgba(25,25,35,.34);
  color:#fff;
  text-shadow:0 1px 1px #000;
  pointer-events:none;
}
.pet-store-lock-icon{
  font-size:20px;
  line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.65));
}
.pet-store-buy-label{
  display:block;
  max-width:94%;
  padding:3px 5px;
  border:2px outset #fff;
  background:#ece9d8;
  color:#111;
  font:bold 9px Arial,sans-serif;
  line-height:1.05;
  text-align:center;
  text-shadow:none;
  white-space:normal;
}
.house-choice-card.pet-store-locked .pet-store-lock-icon{
  font-size:28px;
}
.house-choice-card.pet-store-locked .pet-store-buy-label{
  font-size:11px;
  padding:4px 7px;
}

.decoration-choice-card.pet-store-locked .pet-store-lock-overlay{
  gap:2px;
  padding:2px;
}
.decoration-choice-card.pet-store-locked .pet-store-lock-icon{
  font-size:15px;
}
.decoration-choice-card.pet-store-locked .pet-store-buy-label{
  max-width:98%;
  padding:2px;
  border-width:1px;
  font-size:7px;
}


/* ==========================================================
   v17.8 Pet Room store/editor cleanup
   ========================================================== */
.pet-room-editor-subtitle-inline{
  display:flex;
  align-items:center;
  gap:8px;
}
.pet-editor-inline-hearts{
  display:inline-block;
  min-width:32px;
  color:#c2185b;
  font:bold 12px Arial,sans-serif;
  white-space:nowrap;
}

/* Old standalone balance box is no longer used. */
.pet-heart-balance{
  display:none !important;
}

/* Keep locked prices readable inside the small square cards. */
.decoration-choice-card.pet-store-locked .pet-store-lock-overlay{
  justify-content:center;
  gap:3px;
  padding:2px;
}
.decoration-choice-card.pet-store-locked .pet-store-lock-icon{
  font-size:16px;
}
.decoration-choice-card.pet-store-locked .pet-store-buy-label{
  display:block;
  width:auto;
  max-width:96%;
  min-width:42px;
  padding:3px;
  border:1px solid #777;
  background:#fffdf0;
  color:#111;
  font:bold 10px Arial,sans-serif;
  line-height:1;
  white-space:nowrap;
  box-shadow:1px 1px 0 rgba(0,0,0,.22);
}
.house-choice-card.pet-store-locked .pet-store-buy-label{
  font:bold 12px Arial,sans-serif;
  white-space:nowrap;
}


/* ==========================================================
   v17.9 clean Pet Room store cards + purchase preview
   ========================================================== */

/*
  Locked cards no longer darken the art.
  The whole point is that users can actually see what they may buy.
*/
.pet-store-locked > img{
  filter:none !important;
  opacity:1 !important;
}
.pet-store-lock-overlay,
.pet-store-buy-label{
  display:none !important;
}

.pet-store-card-lock{
  position:absolute;
  left:4px;
  top:4px;
  z-index:8;
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(70,70,70,.75);
  border-radius:3px;
  background:rgba(255,255,255,.88);
  font-size:12px;
  line-height:1;
  pointer-events:none;
  box-shadow:1px 1px 0 rgba(0,0,0,.18);
}
.pet-store-price-badge{
  position:absolute;
  right:4px;
  top:4px;
  z-index:8;
  min-width:30px;
  padding:2px 4px;
  border:1px solid #a54e68;
  border-radius:3px;
  background:#fff3f7;
  color:#b3134d;
  font:bold 10px Arial,sans-serif;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:1px 1px 0 rgba(0,0,0,.14);
}

/* Premium cards look like normal cards, not disabled gray blocks. */
.decoration-choice-card.pet-store-locked{
  background:#eef6ff !important;
  border-color:#8fb4da !important;
}
.decoration-choice-card.pet-store-locked:hover{
  background:#e1f0ff !important;
  border-color:#6698c8 !important;
}

/* Keep art large enough to evaluate before opening the preview. */
.decoration-choice-card.pet-choice-card img{
  max-width:68% !important;
  max-height:68% !important;
}

/* Purchase confirmation screen. */
.pet-store-preview-section{
  width:100%;
}
.pet-store-preview-heading{
  margin-bottom:6px;
  font:bold 13px Arial,sans-serif;
  color:#222;
}
.pet-store-preview-card{
  width:min(100%,430px);
  margin:0 auto 10px;
  padding:8px;
  border:2px inset #fff;
  background:#f4f1e8;
  text-align:center;
}
.pet-store-preview-image-wrap{
  position:relative;
  width:min(100%,360px);
  aspect-ratio:1 / 1;
  margin:0 auto 7px;
  border:1px solid #9ba7b5;
  background:#fff;
  overflow:hidden;
}
.pet-store-preview-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.pet-store-preview-lock{
  position:absolute;
  left:7px;
  top:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:1px solid #777;
  border-radius:4px;
  background:rgba(255,255,255,.9);
  font-size:18px;
}
.pet-store-preview-name{
  margin:2px 0 3px;
  font:bold 14px Arial,sans-serif;
  color:#222;
}
.pet-store-preview-price{
  margin:2px 0;
  color:#c2185b;
  font:bold 18px Arial,sans-serif;
}
.pet-store-preview-balance{
  color:#555;
  font:11px Arial,sans-serif;
}
.pet-store-preview-balance.not-enough{
  color:#a40000;
  font-weight:bold;
}
.pet-store-preview-buttons{
  display:flex;
  justify-content:center;
  gap:8px;
}
.pet-store-preview-buttons .retro-button{
  min-width:92px;
}
.pet-store-confirm-buy{
  font-weight:bold;
}

/* Rooms get the same clean lock / corner-price treatment. */
.house-choice-card.pet-store-locked{
  position:relative;
}
.house-choice-card.pet-store-locked > img{
  filter:none !important;
  opacity:1 !important;
}

@media(max-width:760px){
  .pet-store-card-lock{
    left:3px;
    top:3px;
    width:18px;
    height:18px;
    font-size:11px;
  }
  .pet-store-price-badge{
    right:3px;
    top:3px;
    font-size:9px;
    padding:2px 3px;
  }
  .pet-store-preview-card{
    padding:6px;
  }
  .pet-store-preview-image-wrap{
    width:min(100%,320px);
  }
}


/* ==========================================================
   v17.10 store cleanup: no lock icons
   ========================================================== */
.pet-store-card-lock,
.pet-store-preview-lock{
  display:none !important;
}


/* ==========================================================
   v17.16 persistent/shared play dates
   ========================================================== */
.remote-playdate-pet{
  z-index:6;
}
.remote-playdate-pet .room-pet-bubble{
  max-width:120px;
}


/* ==========================================================
   v17.18 clickable play-date pets
   ========================================================== */
.playdate-pet,
.remote-playdate-pet{
  cursor:pointer !important;
}
.playdate-pet:focus-visible,
.remote-playdate-pet:focus-visible{
  outline:2px dotted #0048a8;
  outline-offset:2px;
}


/* ==========================================================
   v17.19 Login / FAQ cleanup
   ========================================================== */
.login-action-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin-top:8px;
}
.login-action-row .retro-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  min-height:28px;
  box-sizing:border-box;
}
@media(max-width:520px){
  .login-action-row{
    flex-wrap:wrap;
  }
}


/* ==========================================================
   v17.22 comment author profile pictures
   ========================================================== */
.comment-meta{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.comment-author-inline{
  display:inline-flex;
  align-items:center;
  gap:5px;
  vertical-align:middle;
}
.comment-author-avatar{
  width:24px;
  height:24px;
  flex:0 0 24px;
  object-fit:cover;
  image-rendering:pixelated;
  border:1px solid #777;
  background:#fff;
  padding:1px;
  box-sizing:border-box;
}
.comment-author-link .comment-author-avatar{
  cursor:pointer;
}


/* ==========================================================
   v17.23 MySpace-style profile comments
   ========================================================== */
.comment-item.myspace-comment{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:10px 4px 12px;
}

.comment-avatar-column{
  width:76px;
}

.comment-avatar-frame{
  display:block;
  width:70px;
  height:70px;
  border:2px solid #777;
  background:#fff;
  padding:2px;
  box-sizing:border-box;
  overflow:hidden;
}

.comment-avatar-link{
  cursor:pointer;
}

.comment-author-avatar{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:auto;
  border:0;
  padding:0;
  background:#fff;
}

.comment-main-column{
  min-width:0;
}

.comment-item.myspace-comment .comment-meta{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin:1px 0 10px;
  line-height:1.2;
}

.comment-author-name{
  font:bold 12px Arial,sans-serif;
}

.comment-date{
  font:11px Arial,sans-serif;
  color:#555;
}

.comment-item.myspace-comment .comment-body{
  font-size:14px;
  line-height:1.3;
  min-height:28px;
}

.comment-item.myspace-comment .comment-like-row{
  margin-top:6px;
}

@media(max-width:520px){
  .comment-item.myspace-comment{
    grid-template-columns:62px minmax(0,1fr);
    gap:9px;
  }

  .comment-avatar-column{
    width:62px;
  }

  .comment-avatar-frame{
    width:58px;
    height:58px;
  }
}


/* ==========================================================
   v17.25 self-like error feedback
   ========================================================== */
.comment-like-self{
  cursor:not-allowed;
}