html.page, html.page body { height: auto; min-height: 100%; overflow: auto; overflow-x: hidden; }
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
html.page body { background: #000 url(assets/img/l-watch.webp) 0 0 / 170px; padding-bottom: 46px; cursor: crosshair; }

:root { --acc: #a4cf3c; --gs: linear-gradient(90deg, #37a6e6, #d349a8 50%, #e8d03c); }
#bio { font: 11px/1.4 Verdana, Tahoma, sans-serif; color: #b9b9b9; max-width: 1240px; margin: 0 auto; padding: 6px; }
#bio a { color: var(--acc); }
#bio[hidden] { display: none; }

/* header */
.top {
  background: #111; border: 1px solid #3c3c3c; outline: 1px solid #000; padding: 10px 14px; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.top::before, .w::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gs); }
.word { font: 700 clamp(30px, 6vw, 64px)/1 Verdana, sans-serif; color: #eee; letter-spacing: -.03em; }
.word em { font-style: normal; color: var(--acc); }
.top small { color: #e8c75a; font: 700 13px Verdana, sans-serif; }
.news { background: #000; color: var(--acc); font: 11px/20px "Lucida Console", Consolas, monospace; height: 22px; overflow: hidden; position: relative; border: 1px solid #3c3c3c; margin-top: 4px; }
.news div { position: absolute; left: 0; top: 0; white-space: nowrap; animation: bio-news 60s linear infinite; will-change: transform; }
@keyframes bio-news { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }

.cols { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 6px; margin-top: 6px; align-items: start; }
.col { display: grid; gap: 6px; min-width: 0; }

/* the cheat menu box */
.w { position: relative; background: #171717; border: 1px solid #3c3c3c; outline: 1px solid #000; overflow: hidden; }
.w > h3 { font: 700 11px/22px Verdana, sans-serif; color: #ddd; padding: 2px 8px 0; border-bottom: 1px solid #2a2a2a; white-space: nowrap; overflow: hidden; }
.w .in { padding: 7px 8px; }
.w table { width: 100%; border-collapse: collapse; }
.w td { padding: 2px 4px; vertical-align: top; overflow-wrap: anywhere; color: #ddd; }
.w td:first-child { color: #868686; width: 44%; }
.w tr[hidden] { display: none; }

/* profile */
.who { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 9px; }
.who img { width: 100%; display: block; border: 1px solid #e8c75a; cursor: pointer; }
.nm { font: 700 19px/1.1 Verdana, sans-serif; color: #e8c75a; }
.st { color: var(--acc); margin: 2px 0 6px; }
#age { font: 700 13px Consolas, monospace; color: var(--acc); letter-spacing: .08em; }
.no { display: inline-block; width: 20px; height: 14px; vertical-align: -2px; margin-right: 4px;
  background: linear-gradient(#0000 37.5%, #002868 37.5% 62.5%, #0000 62.5%), linear-gradient(90deg, #0000 28%, #002868 28% 40%, #0000 40%), linear-gradient(#0000 31%, #fff 31% 69%, #0000 69%), linear-gradient(90deg, #ba0c2f 22%, #fff 22% 46%, #ba0c2f 46%); }
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.gal img { width: 100%; display: block; }
.gal img:nth-child(2) { transform: scaleX(-1); }
.gal img:nth-child(3) { filter: grayscale(1) contrast(1.4); }
.gal img:nth-child(4) { transform: rotate(180deg); }
.post { padding: 6px 0; border-bottom: 1px solid #2a2a2a; color: #ddd; }
.post b { color: #e8c75a; }
.post i { color: #666; font-size: 10px; font-style: normal; display: block; }
.like { font: 10px Verdana, sans-serif; background: #222; color: #aaa; border: 1px solid #3c3c3c; cursor: pointer; padding: 0 6px; margin-top: 3px; }
.like.liked { color: var(--acc); border-color: var(--acc); }
.btn { font: 700 11px Verdana, sans-serif; border: 1px solid #3c3c3c; background: linear-gradient(#2a2a2a, #1c1c1c); padding: 4px 12px; cursor: pointer; color: #ddd; }
.btn:hover { color: var(--acc); }
#cmForm input, #cmForm textarea { display: block; width: 100%; margin-bottom: 4px; padding: 4px 6px; font: 11px Verdana, sans-serif; color: #ddd; background: #0e0e0e; border: 1px solid #3c3c3c; resize: vertical; }
#cmErr { color: #e05050; }
#cmList .post div { white-space: pre-wrap; overflow-wrap: anywhere; }

/* rage tab */
.tg { display: flex; align-items: center; gap: 7px; padding: 2px 0; cursor: pointer; color: #ccc; }
.tg input { position: absolute; opacity: 0; }
.tg i { width: 9px; height: 9px; border: 1px solid #000; outline: 1px solid #3c3c3c; background: #2a2a2a; }
.tg input:checked + i { background: var(--acc); }
.sl { display: block; margin-top: 7px; color: #ccc; }
.sl b { float: right; color: var(--acc); }
.sl input { display: block; width: 100%; margin: 3px 0 0; accent-color: var(--acc); }

/* weather */
.wx-now { display: grid; grid-template-columns: 76px 1fr; align-items: center; padding: 5px 7px; }
.wx-now img { width: 72px; height: 72px; display: block; }
.wx-t { font: 700 32px/1 Verdana, sans-serif; color: #eee; }
.wx-tabs { display: flex; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
.wx-tabs button { flex: 1; font: 10px Verdana, sans-serif; border: 0; background: #111; padding: 3px 4px; cursor: pointer; color: #888; }
.wx-tabs button.on { background: #171717; color: var(--acc); }
.wx-p[hidden] { display: none; }
.wx-days { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-size: 10px; }
.wx-days div { padding: 3px 0; }
.wx-days img { width: 32px; height: 32px; display: block; margin: 0 auto; }
.wx-foot { font-size: 10px; color: #666; border-top: 1px solid #2a2a2a; padding: 2px 8px; display: flex; justify-content: space-between; }

.count { font: 700 22px Consolas, monospace; color: #e8c75a; letter-spacing: .15em; }
.ad-slot { display: block; width: 100%; height: 170px; object-fit: contain; }
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 5px; }
.brands a { display: flex; align-items: center; justify-content: center; height: 58px; padding: 8px; background: #e9e9e9; border: 1px solid #000; }
.brands a:hover { background: #fff; outline: 1px solid var(--acc); }
.brands img { display: block; max-width: 100%; max-height: 100%; }

/* cheat hud */
#hitlog { position: fixed; left: 6px; top: 6px; z-index: 65; pointer-events: none; font: 700 11px/15px "Lucida Console", Consolas, monospace; color: #fff; text-shadow: 1px 1px 0 #000; }
#hitlog em { font-style: normal; color: var(--acc); }
#wm { position: fixed; right: 6px; top: 6px; z-index: 65; pointer-events: none; padding: 5px 8px; background: #111; border: 1px solid #3c3c3c; border-top: 2px solid #d349a8; color: #ddd; font: 11px Verdana, sans-serif; white-space: nowrap; }
#feed { position: fixed; right: 6px; top: 36px; z-index: 65; pointer-events: none; display: grid; justify-items: end; gap: 2px; }
.kf { display: flex; gap: 7px; align-items: center; padding: 3px 9px; background: #000b; border: 2px solid #c8222a; border-radius: 3px; color: #ddd; font: 700 11px Verdana, sans-serif; white-space: nowrap; }
.kf b { color: #6fb7ff; }
.kf i { color: #fff; font-style: normal; font-weight: 400; }
.kf span { color: #e8c75a; }

/* the arrival */
#show { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #000 url(assets/img/l-cash2.webp) 0 0 / 200px; contain: strict; }
#show .it { position: absolute; z-index: 2; }
#show .kf { position: absolute; z-index: 3; }
.inst { position: absolute; left: 50%; top: 50%; width: min(420px, 92vw); margin: -60px 0 0 calc(min(420px, 92vw) / -2); z-index: 70; background: #171717; border: 1px solid #3c3c3c; outline: 1px solid #000; color: #ccc; font: 11px Verdana, sans-serif; }
.inst::before { content: ""; display: block; height: 2px; background: var(--gs); }
.inst header { padding: 9px 12px 2px; font: 700 22px Verdana, sans-serif; color: #eee; letter-spacing: -.03em; }
.inst header em { font-style: normal; color: var(--acc); }
.inst p { padding: 4px 12px; height: 24px; font-family: Consolas, monospace; color: var(--acc); }
.bar { margin: 4px 12px 12px; height: 6px; background: #000; border: 1px solid #3c3c3c; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--acc); transform-origin: 0 0; transform: scaleX(0); }
.shout { position: absolute; z-index: 80; left: 50%; top: 12%; white-space: nowrap; color: #ffd84a; font: 400 clamp(34px, 10vw, 120px)/1 Impact, "Arial Black", sans-serif; -webkit-text-stroke: 2px #000; }
.mini { position: absolute; z-index: 75; left: 50%; top: 50%; width: min(340px, 74vw); background: #171717; border: 2px solid #e8c75a; padding: 7px; color: #e8c75a; font: 700 18px Verdana, sans-serif; text-align: center; will-change: transform; }
.mini img { display: block; width: 100%; }
#blast { position: absolute; inset: 0; z-index: 90; background: #fff; opacity: 0; pointer-events: none; }

.fall { position: fixed; pointer-events: none; z-index: 94; will-change: transform; width: 110px; height: auto; }
#bigHand { position: fixed; left: 0; top: 50%; z-index: 93; pointer-events: none; transform-origin: 0 50%; visibility: hidden; will-change: transform; }

#player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: #111; border-top: 1px solid #3c3c3c; color: #ccc; font: 11px Verdana, sans-serif;
}
#player:empty { display: none; }
#player button { width: 28px; height: 24px; border: 1px solid #3c3c3c; background: linear-gradient(#2a2a2a, #1c1c1c); color: #ccc; font: 11px Verdana, sans-serif; cursor: pointer; flex: none; padding: 0; }
#player .tn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#player .tm { flex: none; font-variant-numeric: tabular-nums; }
#player .pr { flex: 2; min-width: 40px; height: 4px; background: #000; overflow: hidden; }
#player .pr i { display: block; height: 100%; background: var(--acc); transform-origin: 0 0; transform: scaleX(0); }
#player input { flex: none; width: 80px; accent-color: var(--acc); }

@media (max-width: 1040px) {
  .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .col { display: contents; }
  .first { grid-column: 1 / -1; order: -3; }
  #wx { order: -2; }
  .wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .who { grid-template-columns: 120px minmax(0, 1fr); }
  #hitlog { display: none; }
  #bio { padding-top: 54px; }
  #wm { font-size: 9px; padding: 3px 5px; }
  #feed { top: 26px; }
  .kf { font-size: 9px; padding: 2px 5px; }
  #player .pr, #player input { display: none; }
}
@media (min-width: 1041px) {
  .top small { margin-right: 350px; }
}