:root{--blue:#003399;--blue2:#6699cc;--sky:#d5e8fb;--or:#ff6600;--ink:#111;--mut:#555;--link:#003399;--pink:#ff0099;--line:#99b7d8;--lime:#99ff00}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font:13px/1.45 Verdana,Tahoma,Arial,sans-serif;color:var(--ink);overflow:hidden;display:flex;flex-direction:column;
  background:#0a2a6b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'%3E%3Crect width='48' height='48' fill='%23123a8c'/%3E%3Cpath fill='%231b4aa8' d='M0 0h24v24H0zM24 24h24v24H24z'/%3E%3Cpath fill='%2399ccff' d='M10 10h2v2h-2zM34 34h2v2h-2z'/%3E%3C/svg%3E")}
a{color:var(--link)}button{font:inherit;cursor:pointer}

#top{display:flex;align-items:center;gap:20px;padding:8px 14px;background:linear-gradient(#2d62c8,var(--blue));color:#fff;border-bottom:2px solid #001a66}
#brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:none}
#brand img{height:52px;width:auto;display:block}
#brand em{font-style:normal;font-size:11px;color:#cfe0ff;white-space:nowrap}
#pitch{flex:1;font-size:14px;color:#dbe7ff;min-width:0}#pitch b{color:#fff}
#coin{display:flex;align-items:center;gap:8px;background:#fff;color:#000;border:2px inset #ccc;padding:5px 9px;flex:none;max-width:300px}
#coin span{font-size:10px;color:var(--mut);text-transform:uppercase}#coin b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#coinCopy{font-size:11px;background:var(--or);color:#fff;border:1px solid #a33f00;padding:2px 7px}
#counter{flex:none;text-align:center}#counter span{display:block;font-size:9px;text-transform:uppercase;color:#cfe0ff}
#counter b{display:block;font:bold 17px/1 "Courier New",monospace;letter-spacing:2px;background:#000;color:var(--lime);padding:4px 6px;border:2px inset #777;font-variant-numeric:tabular-nums}

#nav{display:flex;align-items:center;background:var(--blue2);border-bottom:2px solid #336699;color:#fff;font-weight:bold;font-size:12px;height:28px;flex:none}
#nav>a{color:#fff;text-decoration:none;padding:0 13px;line-height:28px;border-right:1px solid #8ab;cursor:pointer}
#nav>a:hover,#nav>a.on{background:var(--blue)}
#tape{flex:1;overflow:hidden;white-space:nowrap;font-weight:normal;min-width:0;background:#000;color:#fff;line-height:28px;font:12px/28px "Courier New",monospace}
#tapeIn{display:inline-block;animation:tape 60s linear infinite;padding-left:30px}
#tapeIn a{color:#fff;text-decoration:none;margin-right:26px}#tapeIn u{text-decoration:none;color:var(--lime)}#tapeIn u.dn{color:#ff5555}
#tape:hover #tapeIn{animation-play-state:paused}
@keyframes tape{to{transform:translateX(-100%)}}
#online{padding:0 12px;white-space:nowrap;font-weight:normal;font-size:12px}
#online i{display:inline-block;width:9px;height:9px;background:var(--lime);border:1px solid #060;margin-right:5px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

#app{flex:1;min-height:0;display:grid;grid-template-columns:262px minmax(0,1fr) 300px;gap:10px;padding:10px;max-width:1500px;width:100%;margin:0 auto}
aside{display:flex;flex-direction:column;gap:10px;min-height:0}
.box{background:#fff;border:1px solid var(--blue2);min-height:0}
.box h2{font-size:12px;color:#fff;padding:4px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.box h2 small{font-weight:normal;font-size:10px}
.or{background:var(--or)}.bl{background:var(--blue2)}
.in{padding:8px}

#profile .pname{font:bold 16px Arial,sans-serif;padding:7px 9px 0;overflow-wrap:anywhere}
#profile .row{display:flex;gap:9px;padding:6px 9px 8px}
#profile img{width:112px;height:112px;object-fit:cover;border:1px solid #000;flex:none}
#profile .facts{font-size:11px;line-height:1.5;min-width:0}
#profile .on{display:inline-block;color:#fff;background:#f90;font-weight:bold;font-size:10px;padding:0 4px;margin-top:3px;animation:blink 1.2s steps(2) infinite}
#profile .mood{padding:5px 9px;background:var(--sky);font-size:11px;border-top:1px solid var(--line)}
#profile .song{padding:5px 9px;font-size:11px;border-top:1px solid var(--line);display:flex;gap:7px;align-items:center}
#profile .song i{font-style:normal;color:var(--or);font-weight:bold}
#profile .bio{padding:6px 9px 8px;font-size:12px;border-top:1px solid var(--line)}
#profile .contact{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
#profile .contact button{all:unset;cursor:pointer;font-size:10px;color:var(--link);text-align:center;padding:4px 2px;background:var(--sky);outline:1px solid #fff}
#profile .contact button:hover{background:#ffe6cc}
#left>.box:last-child{flex:1;display:flex;flex-direction:column;overflow:hidden}
#threads{list-style:none;padding:0;overflow:auto;flex:1}
#threads li{border-bottom:1px dotted var(--line)}
#threads button{all:unset;display:block;padding:5px 8px;font-size:11px;color:var(--link);cursor:pointer;width:100%;box-sizing:border-box}
#threads button:hover,#threads .now button{background:var(--sky)}
#threads b{display:block;font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#threads span{color:var(--mut);font-size:10px}

#mid{display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid var(--blue2)}
#tHead{background:linear-gradient(#e8f2fd,#c8dcf5);border-bottom:1px solid var(--blue2);padding:8px 10px;display:flex;gap:10px;align-items:center;flex:none}
#tHead img{width:42px;height:42px;object-fit:cover;border:1px solid #000;background:#000;flex:none}
#tHead .t{min-width:0;flex:1}
#tHead h1{font:bold 17px/1.2 Arial,sans-serif;color:var(--blue);text-wrap:balance}
#tHead .meta{font-size:11px;color:#333;margin-top:2px;font-variant-numeric:tabular-nums}
#tHead .meta b.up{color:#090}#tHead .meta b.dn{color:#c00}
.hot{background:#f00;color:#ff0;font-size:10px;font-weight:bold;padding:0 4px;margin-right:6px;animation:blink 1s steps(2) infinite;vertical-align:2px}
.lock{background:#555;color:#fff;font-size:10px;font-weight:bold;padding:0 4px;margin-right:6px;vertical-align:2px}
#posts{flex:1;overflow:auto;min-height:0;background:#fff}
.post{display:grid;grid-template-columns:118px minmax(0,1fr);border-bottom:1px solid var(--line)}
.post:nth-child(even) .who,.post:nth-child(even) .body{background:#f1f6fd}
.post.new{animation:flash 1.4s ease-out}
@keyframes flash{from{background:#fff7a8}}
.who{padding:7px;background:#e3edf9;border-right:1px solid var(--line);font-size:10px;text-align:center}
.who button{all:unset;cursor:pointer;display:block}
.who img{width:72px;height:72px;object-fit:cover;border:1px solid #000;display:block;margin:0 auto 3px}
.who b{display:block;font-size:11px;color:var(--link);overflow-wrap:anywhere;line-height:1.2}
.who span{color:var(--mut)}
.body{padding:8px 11px;min-width:0;display:flex;flex-direction:column}
.body p{flex:1;font-size:14px;line-height:1.5;overflow-wrap:anywhere;text-wrap:pretty}
.body footer{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:10px;color:var(--mut);border-top:1px dotted var(--line);padding-top:3px}
.plus{all:unset;cursor:pointer;color:var(--link);font-weight:bold;font-size:11px;padding:2px 4px}.plus:hover{background:var(--sky)}
.plus[disabled]{color:#090;cursor:default}
.post.mod .who,.post.mod .body{background:#fff0e0}.post.mod p{font-weight:bold;color:#a33f00}
.empty{padding:40px 20px;text-align:center;color:var(--mut)}
#typing[hidden]{display:none}
#typing{flex:none;padding:6px 10px;font-size:11px;color:var(--mut);background:#fffbe0;border-bottom:1px solid var(--line)}
#reply{display:flex;gap:7px;padding:7px;border-top:1px solid var(--blue2);background:#e3edf9;flex:none}
#reply textarea{flex:1;font:12px Verdana,sans-serif;border:2px inset #ddd;padding:4px;resize:none}
.btn{background:linear-gradient(#fff,#d6d6d6);border:2px outset #ddd;padding:3px 11px;font-size:12px;font-weight:bold;color:#000;min-height:30px}
.btn:active{border-style:inset}

#right>.box:first-child{flex:none}
#top8{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:6px}
#top8 button{all:unset;cursor:pointer;text-align:center;font-size:9px;color:var(--link);min-width:0;line-height:1.15;display:block}
#top8 img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #000;display:block;margin-bottom:2px}
#top8 button:hover img{outline:2px solid var(--or)}
#top8 span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#topicBox{flex:1;overflow:auto}
#topicBox p{font-size:11px;margin-bottom:6px}
#topic{width:100%;font:12px Verdana,sans-serif;border:2px inset #ddd;padding:4px;margin-bottom:6px}
#topicGo{width:100%}
#topicMsg{margin:6px 0 0;color:#a33f00;font-weight:bold}#topicMsg:empty{display:none}
#queue{font-size:11px;padding-left:18px;margin-top:6px}
#banBox .in{display:flex;align-items:center;gap:9px;background:#000;color:#fff}
#banBox b{font:bold 22px/1 "Courier New",monospace;color:#ff3b3b;font-variant-numeric:tabular-nums}
#banBox span{font-size:11px}

#blinkies{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:none}
#blinkies span{font:bold 9px/18px Verdana,sans-serif;text-align:center;white-space:nowrap;overflow:hidden;color:#fff;border:1px solid #000;background:var(--pink);animation:bl 1.1s steps(2) infinite}
#blinkies span:nth-child(2){background:#000;color:var(--lime);animation-delay:-.3s}
#blinkies span:nth-child(3){background:var(--blue);animation-delay:-.6s}
#blinkies span:nth-child(4){background:#7a2fd0;animation-delay:-.9s}
@keyframes bl{50%{filter:brightness(1.35) saturate(1.3)}}
.spark{position:fixed;z-index:60;pointer-events:none;font:bold 13px/1 Verdana,sans-serif;font-style:normal;animation:spark .7s ease-out forwards}
@keyframes spark{to{transform:translateY(24px) scale(.3);opacity:0}}
#popup{position:fixed;inset:0;background:#0006;display:grid;place-items:center;z-index:50;padding:16px}
#popup[hidden]{display:none}
.win{width:min(440px,100%);max-height:85vh;overflow:auto;background:#ece9d8;border:2px solid #0a3ec0;box-shadow:3px 3px 0 #0005}
.bar{display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:bold;font-size:12px;padding:4px 5px 4px 8px;background:linear-gradient(#2d7cf0,#0a3ec0)}
.bar button{background:#e0483a;color:#fff;border:1px solid #fff;width:24px;height:22px;font-weight:bold;line-height:1}
.win .body{padding:14px;display:block;font-size:13px}
.win .body .ban{display:flex;gap:11px;align-items:flex-start}
.win .body .ban img{width:62px;height:62px;object-fit:cover;border:1px solid #000;flex:none}
.win .body h3{font-size:14px;margin-bottom:6px;color:#a00}
.win .body .act{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}
.member{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.member button{all:unset;cursor:pointer;font-size:10px;text-align:center;color:var(--link)}
.member img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #000;display:block}
.wallets{display:flex;flex-direction:column;gap:6px}.wallets button{display:flex;gap:8px;align-items:center}.wallets img{width:22px;height:22px}

@media (max-width:1100px){
  body{overflow:auto;height:auto;display:block}html{height:auto}
  #pitch{display:none}
  #app{display:flex;flex-direction:column;padding:8px}
  #mid{order:-1;height:72vh}
  #top{flex-wrap:wrap;gap:10px}
  #coin{order:3;flex:1;max-width:none}
  #left>.box:last-child{max-height:260px}
}
@media (max-width:600px){
  #brand img{height:44px}#brand em{display:none}
  #counter{margin-left:auto}#online{display:none}#nav>a{padding:0 9px}
  .post{grid-template-columns:76px minmax(0,1fr)}.who{padding:5px}.who img{width:54px;height:54px}.body p{font-size:13px}
  #reply .btn{padding:3px 7px}
}
@media (prefers-reduced-motion:reduce){#tapeIn,.hot,#online i,#profile .on,#blinkies span{animation:none}.post.new{animation:none}}