/*
Theme Name: BBS 2.0
Theme URI: https://blog.denismekshun.com/
Author: Denis Mekshun
Description: Вырвиглазный форум 2005 года: phpBB-посты с профилем автора, глянцевые кнопки Web 2.0, облако тегов, "beta"-ленточка. Без JavaScript.
Version: 1.0
License: GPL-2.0-or-later
Text Domain: bbs20
*/

html { background: #000; }
body {
  margin: 0; padding: 12px;
  background-color: #020802;
  background-image: repeating-linear-gradient(45deg, #020802 0, #020802 14px, #051005 14px, #051005 28px);
  color: #b8ffcc;
  font: 12px/1.45 Verdana, Tahoma, Arial, sans-serif;
}
a:link, a:visited { color: #19e6ff; font-weight: bold; text-decoration: none; }
a:hover, a:active { color: #000; background: #00ff66; text-decoration: underline; }
img { max-width: 100%; height: auto; border: 2px solid #00aa44; border-radius: 6px; box-shadow: 0 0 8px rgba(0,255,102,.45); }

#wrap {
  width: 980px; max-width: 100%; margin: 0 auto; box-sizing: border-box;
  background: #0a120a; border: 4px solid #00ff66; border-radius: 14px;
  box-shadow: 0 0 0 6px #003d1a, 0 0 28px 6px rgba(0,255,102,.55);
  overflow: hidden;
}

/* верхняя полоска */
.topbar { background: linear-gradient(#0f4d1f, #062b12); color: #9dffbd; border-bottom: 2px solid #00ff66; padding: 3px 10px; font-size: 11px; }
.topbar .blink { color: #00ff66; font-weight: bold; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* шапка */
.head {
  position: relative; padding: 16px 20px 12px;
  background: linear-gradient(#064d24 0%, #022813 55%, #000 100%);
  border-bottom: 4px solid #00ff66;
}
.head::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(rgba(0,255,102,.28), rgba(0,255,102,0)); pointer-events: none; }
.logo { margin: 0; font: bold 46px/1.1 "Trebuchet MS", Verdana, sans-serif; letter-spacing: -1px; }
.logo a:link, .logo a:visited {
  background: linear-gradient(#d6ffe4, #00ff66 55%, #00a844);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px #00ff66) drop-shadow(2px 2px 0 #000);
  -webkit-box-reflect: below -4px linear-gradient(transparent 55%, rgba(255,255,255,.35));
  text-decoration: none;
}
.logo a:hover { background: none; color: #fff; }
.tag { color: #fff; font-style: italic; text-shadow: 1px 1px 0 #000; margin: 2px 0 0; }
.beta {
  position: absolute; right: -34px; top: 18px; transform: rotate(35deg);
  background: #ff2d2d; color: #fff; font: bold 13px Arial, sans-serif; letter-spacing: 2px;
  padding: 3px 44px; border: 2px dashed #fff; box-shadow: 0 2px 4px #000; z-index: 2;
}
.starburst {
  position: absolute; right: 90px; top: 8px; z-index: 2;
  width: 84px; height: 84px; line-height: 84px; text-align: center; transform: rotate(-12deg);
  background: #00ff66; color: #001a09; font: bold 16px Impact, Arial, sans-serif; text-shadow: none;
  clip-path: polygon(50% 0,61% 12%,76% 6%,80% 22%,95% 25%,89% 40%,100% 50%,89% 60%,95% 75%,80% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 78%,5% 75%,11% 60%,0 50%,11% 40%,5% 25%,20% 22%,24% 6%,39% 12%);
}

/* глянцевые кнопки меню */
.nav { background: #000; padding: 6px 10px; }
.nav a:link, .nav a:visited, .btn {
  display: inline-block; position: relative; margin: 2px 4px 2px 0; padding: 4px 16px;
  color: #fff; font: bold 13px "Trebuchet MS", Arial, sans-serif; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  background: linear-gradient(#8aff4d, #1fb800 55%, #0e8f00 56%, #2fd400); border: 1px solid #064d00; border-radius: 14px;
  box-shadow: 0 2px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7);
}
.nav a:nth-child(2n):link, .nav a:nth-child(2n):visited { background: linear-gradient(#6af5ff, #00b8d9 55%, #007a94 56%, #00c8e8); border-color: #00424f; }
.nav a:nth-child(3n):link, .nav a:nth-child(3n):visited { background: linear-gradient(#ffd060, #ff8a00 55%, #e06a00 56%, #ff9f1a); border-color: #7a3500; }
.nav a:hover, .btn:hover { background: #00ff66; color: #000; text-shadow: none; filter: brightness(1.1); }
.rss { background: linear-gradient(#ffb15c, #ff6a00) !important; border-color: #7a3500 !important; }

.ticker { background: #021407; border-bottom: 3px solid #00ff66; color: #00ff66; font: bold 13px Arial, sans-serif; padding: 2px 0; }

/* раскладка */
table.layout { width: 100%; border-collapse: collapse; }
table.layout > tbody > tr > td { vertical-align: top; padding: 10px; }
td.main { background: #0a120a; }
td.side { width: 250px; background: #050d07; border-left: 3px double #00aa44; }

/* заголовки-бары */
.cat, .box h3 {
  margin: 0; padding: 4px 10px; color: #fff; font: bold 13px "Trebuchet MS", Arial, sans-serif; text-align: left;
  text-shadow: 1px 1px 0 #000; border-radius: 8px 8px 0 0;
  background: linear-gradient(#25a14f, #0e6a2d 50%, #07461d 51%, #108a3a); border: 1px solid #00ff66;
}
.cat.blue { background: linear-gradient(#2cc3d6, #0f8a9c 50%, #086070 51%, #0f9fb3); border-color: #00e5ff; }
.box { margin-bottom: 12px; border: 2px solid #00aa44; border-radius: 10px; background: #0a120a; box-shadow: 0 0 10px rgba(0,255,102,.35); overflow: hidden; }
.box h3 { border-radius: 0; }
.box .in { padding: 6px 10px; }
.box ul { margin: 0; padding-left: 16px; list-style: square; }
.box input[type=text], .box input[type=search] { width: 92%; background: #000; color: #00ff66; border: 2px inset #00aa44; padding: 2px; font-family: "Courier New", monospace; }
.box input[type=submit], .comments input[type=submit] {
  margin-top: 4px; padding: 3px 14px; color: #fff; font: bold 12px Arial; cursor: pointer; border: 1px solid #064d00; border-radius: 12px;
  background: linear-gradient(#8aff4d, #1fb800 55%, #0e8f00 56%, #2fd400); box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.cloud a { line-height: 1.1; }

/* пост в стиле phpBB */
table.postbox { width: 100%; margin-bottom: 14px; border-collapse: separate; border-spacing: 0; background: #00aa44; border: 2px solid #00aa44; border-radius: 10px; box-shadow: 0 0 14px rgba(0,255,102,.4); overflow: hidden; }
table.postbox th { padding: 0; }
.postbox .topic { font-size: 15px; }
.postbox .topic a:link, .postbox .topic a:visited { color: #fff; text-shadow: 1px 1px 0 #000; }
.postbox .topic a:hover { background: #c6ff00; color: #000; text-shadow: none; }
.postbox .sub { background: #0d2a14; color: #7dffa6; font-size: 11px; padding: 3px 10px; border-bottom: 1px solid #00aa44; }
.postbox td.profile { width: 150px; background: linear-gradient(#10301a, #07150c); border-right: 1px solid #00aa44; padding: 10px; vertical-align: top; font-size: 11px; text-align: center; }
.avatar { width: 84px; height: 84px; margin: 0 auto 6px; border: 3px solid #000; border-radius: 12px; background: linear-gradient(135deg, #00ff6a, #00b7ff, #7b00ff); color: #fff; font: bold 34px/84px Impact, Arial, sans-serif; text-shadow: 2px 2px 0 #000; box-shadow: 0 0 10px #00ff66; }
.uname { font-size: 13px; font-weight: bold; color: #00ff66; }
.rank { color: #ff4d4d; font-weight: bold; }
.stars { color: #ff8a00; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; }
.postbox td.body { background: #08110a; padding: 10px 14px; vertical-align: top; }
.entry p { margin: 0.5em 0; font-size: 13px; }
.entry blockquote { margin: 0.6em 12px; padding: 6px 10px; background: #0d2a14; border: 1px dashed #00aa44; }
.entry pre, .entry code { background: #000; color: #c6ff00; padding: 2px 4px; }
.postfoot { margin-top: 10px; padding-top: 6px; border-top: 1px dotted #00aa44; font-size: 11px; }
.new { display: inline-block; background: #ff2d2d; color: #fff; font: bold 10px Arial; padding: 0 5px; border-radius: 8px; border: 1px solid #fff; vertical-align: middle; }

.pager { text-align: center; margin: 10px 0; font-size: 13px; }
.pager .page-numbers { display: inline-block; margin: 1px; padding: 2px 8px; border: 2px solid #00aa44; border-radius: 8px; background: #0a120a; }
.pager .current { background: #00aa44; color: #fff; }

/* футер */
.foot { background: linear-gradient(#06240f, #020b05); color: #9dffbd; padding: 10px 14px; border-top: 4px solid #00ff66; font-size: 11px; text-align: center; }
.foot a:link, .foot a:visited { color: #00ff66; }
.badge { display: inline-block; margin: 2px; padding: 1px 6px; border: 1px solid #00aa44; border-radius: 4px; background: linear-gradient(#1c3524, #0d1a11); color: #9dffbd; font: bold 10px Arial; }
.badge.g { background: linear-gradient(#8aff4d, #1fb800); } .badge.o { background: linear-gradient(#ffb15c, #ff6a00); } .badge.b { background: linear-gradient(#5cc8ff, #0a84ff); color: #fff; }
.counter { background: #000; color: #00ff40; font: bold 13px "Courier New", monospace; letter-spacing: 3px; padding: 1px 6px; border: 2px inset #888; }

.comments { margin-top: 12px; }
.comments h3 { margin: 0 0 6px; color: #00e5ff; }
.comments ol { padding-left: 22px; }
.comments textarea, .comments input[type=text], .comments input[type=email], .comments input[type=url] { background: #000; color: #00ff66; border: 2px inset #00aa44; }

.alignleft { float: left; margin: 0 10px 6px 0; } .alignright { float: right; margin: 0 0 6px 10px; } .aligncenter { display: block; margin: 0 auto; }
.screen-reader-text { position: absolute; left: -9999px; }
@media (prefers-reduced-motion: reduce) { .topbar .blink { animation: none; } }
@media (max-width: 800px) {
  table.layout, table.layout tbody, table.layout tr, table.layout td, table.postbox, table.postbox tbody, table.postbox tr, table.postbox td, table.postbox th { display: block; width: auto !important; }
  td.side { border-left: 0; }
  .beta, .starburst { display: none; }
  .logo { font-size: 32px; }
}

/* fix: фиксированная раскладка, чтобы большие картинки не распирали таблицу */
table.layout { table-layout: fixed; }
td.main { overflow: hidden; word-wrap: break-word; }
td.side { overflow: hidden; }
.entry { overflow: hidden; }
.entry img, .entry figure, .entry iframe, .entry video { max-width: 100%; height: auto; }

/* hacker overlay */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px); }
::selection { background: #00ff66; color: #000; }
.entry p { font-family: "Courier New", Courier, monospace; color: #c8ffd8; }
.postbox .topic a:link, .postbox .topic a:visited { text-shadow: 0 0 6px #00ff66, 1px 1px 0 #000; }
.tag { color: #9dffbd; text-shadow: 0 0 6px #00ff66; }

/* stickers: как на denismekshun.com */
.stickers { position: relative; height: 240px; padding: 0 !important; }
.stickers img { position: absolute; max-width: none; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 6px rgba(0,255,102,.5)); }
.stickers .s-fb { width: 200px; height: 64px; left: calc(50% - 100px); top: 103px; transform: rotate(-45deg); }
.stickers .s-ms { width: 100px; height: 31px; left: 8px; top: 10px; transform: rotate(10deg); }