/* Retro AOL / late-90s aesthetics with modern CSS sanity */
:root {
  --bg: #004f87;
  --bg-alt: #0b5f9f;
  --panel: #f4f4f8;
  --panel-alt: #ffffff;
  --accent: #ffcc33;
  --accent2: #0099cc;
  --text: #111;
  --link: #004a99;
  --link-hover: #c400ff;
  --shadow: 0 0 0 1px #000, 0 0 0 2px #d3d3d3, 0 0 0 3px #000;
  font-family: 'Verdana', 'Trebuchet MS', Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#083d66; color:var(--text); }
body { display:flex; min-height:100vh; justify-content:center; padding:12px; }
#aol-shell { width: min(1400px, 100%); background: var(--bg); border:3px solid #002c4d; display:flex; flex-direction:column; box-shadow:0 0 0 3px #001f35, 0 0 25px #001a2c inset; }

.toolbar { display:flex; align-items:center; background:linear-gradient(#0d6fb4,#074b7a); color:#fff; padding:2px 8px; font-size:13px; }
.menu-bar { display:flex; gap:12px; }
.menu { cursor:pointer; text-shadow:1px 1px 0 #000; }
.menu:hover { text-decoration:underline; }
.title { flex:1; text-align:center; font-weight:bold; letter-spacing:.5px; }
.sys-buttons button { background:#ddd; border:1px solid #333; margin-left:4px; cursor:pointer; width:26px; height:22px; font-weight:bold; box-shadow:0 0 0 1px #fff inset; }
.sys-buttons button:hover { background:#fff; }

.banner-bar { padding:0; margin:0; width:100%; }
.banner { width:100%; max-width:none; height:auto; object-fit:cover; }

.address-bar { display:flex; gap:6px; align-items:center; background:linear-gradient(#0d6fb4,#074b7a); padding:4px 10px; font-size:12px; color:#fff; border-bottom:2px solid #022a47; }
.address-bar input { background:#fff; border:2px inset #eee; padding:2px 4px; font-size:12px; }
.address-bar button { background:#ffe173; border:2px outset #fff; padding:2px 10px; cursor:pointer; font-weight:bold; }
.address-bar button:active { border-style:inset; }
.addr-status { margin-left:auto; font-weight:bold; background:#0a7a1f; padding:2px 8px; border:1px solid #0c5317; }

/* Ads */
.ad-block { background:#f4f4f8; border:3px ridge #d0d0d0; padding:6px 8px; text-align:center; font-size:11px; color:#012f52; box-shadow:0 0 0 1px #fff inset; }
.ad-block h3 { margin:0 0 4px; font-size:13px; color:#c80000; }
.ad-block.small img, .ad-block.wide img { width:100%; height:70px; object-fit:cover; border:2px inset #012f52; margin-bottom:4px; }
.ad-block.wide img { height:100px; }
.ad-block button { margin-top:4px; background:#ffe173; border:2px outset #fff; padding:2px 12px; font-weight:bold; cursor:pointer; }
.ad-block button:active { border-style:inset; }

/* Reviews */
.reviews { list-style:square inside; padding:0; margin:10px 0; }
.reviews li { margin:6px 0; font-style:italic; }
.review-block { text-align:left; font-size:12px; }
.review-block h3 { color:#0d3e68; font-size:12px; margin:0 0 6px; }
.review-block p { margin:0; line-height:1.3; }

/* Adjust right sidebar spacing */
.sidebar.right .ad-block { margin-bottom:10px; }

.main-layout { flex:1; display:grid; grid-template-columns:220px 1fr 260px; gap:6px; padding:6px; }
.sidebar { background:linear-gradient(#0a5f9e,#063a61); padding:10px; color:#fff; border:2px solid #022a47; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); }
.sidebar.left .logo { font-size:34px; margin:0; line-height:1; font-family:Impact, sans-serif; text-align:center; text-shadow:2px 2px 0 #000; color:#ffeb7b; }
.nav-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.nav-list a { display:block; padding:6px 10px; background:#f4f4f8; color:#012f52; font-weight:bold; font-size:13px; border:2px outset #eee; text-decoration:none; }
.nav-list a:hover, .nav-list a.active { background:#ffe173; color:#000; border-style:inset; }

.content { background:#cfd9e5; border:4px double #0a436e; padding:14px; overflow:auto; box-shadow:inset 0 0 12px #073452; font-size:15px; }
.panel { display:none; animation:fade .35s ease; }
.panel.show { display:block; }
@keyframes fade { from { opacity:0; transform:translateY(4px);} to { opacity:1; opacity:1; } }
.head-wrap { display:flex; align-items:center; gap:18px; }
.hero-head { width:120px; height:120px; object-fit:contain; image-rendering:crisp-edges; border:3px groove #0b4c7b; background:#012f52; padding:4px; }
.lore-text p { line-height:1.4; }

.tokenomics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:18px 0; }
.card { background:var(--panel); border:3px ridge #d0d0d0; padding:10px; box-shadow:0 0 0 1px #fff inset; }
.card h3 { margin-top:0; font-size:15px; }
.note { font-size:12px; opacity:.8; font-style:italic; }

.roadmap { background:#fff; padding:14px 20px; border:3px ridge #ddd; }
.bullet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; padding:0; list-style:square inside; background:#fff; padding:12px; border:3px ridge #ddd; }
.links { list-style:none; padding:0; display:flex; flex-direction:column; gap:6px; }
.links a { background:#fff; padding:6px 10px; border:2px outset #ccc; text-decoration:none; font-weight:bold; color:#004c80; }
.links a:hover { border-style:inset; background:#ffe173; }

.sidebar.right { font-size:13px; }
.mini-window { background:#dce6f0; border:3px ridge #eef3f7; margin-bottom:10px; display:flex; flex-direction:column; }
.mini-title { background:linear-gradient(#0d6fb4,#074b7a); color:#fff; padding:4px 8px; font-weight:bold; font-size:12px; }
.mini-body { padding:8px; min-height:60px; color:#012f52; }
.stub { font-style:italic; opacity:.7; }

.status-bar { display:flex; justify-content:space-between; align-items:center; background:#0d6fb4; color:#fff; padding:4px 10px; font-size:12px; border-top:2px solid #022a47; }
.status-bar div { font-family:Tahoma, sans-serif; }

.legal-disclaimer { background:#031f33; color:#fff; font-size:11px; padding:10px 14px; line-height:1.4; border-top:2px solid #022a47; font-family:Tahoma, sans-serif; }

/* Scrollbars retro */
* { scrollbar-width:thin; scrollbar-color:#074b7a #cfd9e5; }
*::-webkit-scrollbar { width:10px; }
*::-webkit-scrollbar-track { background:#cfd9e5; }
*::-webkit-scrollbar-thumb { background:#074b7a; border:2px solid #cfd9e5; }
*::-webkit-scrollbar-thumb:hover { background:#0d6fb4; }

.flash-label { position:absolute; bottom:4px; left:4px; background:#ff0000; color:#fff; font-weight:bold; padding:2px 6px; font-size:14px; animation:flash 1s steps(2,start) infinite; box-shadow:0 0 0 2px #fff,0 0 6px #ff0000; }
@keyframes flash { 50% { opacity:0; } }
.merch-modal { position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; }
.merch-overlay { position:absolute; inset:0; background:rgba(0,0,0,.75); }
.merch-content { position:relative; max-width:800px; margin:40px auto; background:#012f52; padding:10px; border:4px ridge #d0d0d0; box-shadow:0 0 0 3px #fff inset,0 0 25px #000; animation:pop .35s ease; }
.merch-content img { width:100%; height:auto; display:block; }
.merch-close { position:absolute; top:4px; right:4px; background:#ffe173; border:2px outset #fff; font-weight:bold; cursor:pointer; }
.merch-close:active { border-style:inset; }
@keyframes pop { from { transform:scale(.85); opacity:0;} to { transform:scale(1); opacity:1;} }

/* Merch block overrides to show full image */
.merch-block img { height:auto !important; max-height:none !important; object-fit:contain !important; background:#000; }
.merch-block { display:block; }
/* Merch block center label + modal sizing overrides */
.merch-block { position:relative; }
.merch-block .flash-label { top:50% !important; left:50% !important; bottom:auto !important; transform:translate(-50%, -50%); font-size:22px; padding:6px 14px; animation:flash .8s steps(2,start) infinite; }
.merch-modal { display:flex; align-items:center; justify-content:center; }
.merch-content { max-width:700px; max-height:calc(100vh - 120px); overflow:auto; }
.merch-content img { max-height:calc(100vh - 160px); object-fit:contain; }

@media (max-width: 1100px) {
  .main-layout { grid-template-columns:170px 1fr 220px; }
  .hero-head { width:90px; height:90px; }
}
@media (max-width: 900px) {
  .main-layout { grid-template-columns:1fr; }
  .sidebar.left, .sidebar.right { flex-direction:row; flex-wrap:wrap; }
  .sidebar.right { order:3; }
  .content { order:2; }
  .nav-list { flex-direction:row; flex-wrap:wrap; }
  .nav-list a { flex:1 1 120px; }
}

/* Desktop-style fixed layout hint for very narrow screens */
@media (max-width: 800px) {
  body { padding:0; }
  #aol-shell { width:1200px; transform:scale(.8); transform-origin:top left; }
}
@media (max-width: 620px) {
  #aol-shell { transform:scale(.7); }
}
@media (max-width: 500px) {
  #aol-shell { transform:scale(.6); }
}