/*#############################################################
Name: TUNG TUNG SKIBIDI - Dark Skeuomorphic Edition
Structure based on Bitter Sweet by Viktor Persson (vikpe) / Arcsin.
All textures replaced with CSS. Dark + HEV orange.
########################################################################*/

/* tokens */
@font-face{
  font-family:"Black Ops One";
  src:url(/fonts/BlackOpsOne-Regular.ttf) format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --f-display:"Black Ops One","Arial Black",Impact,sans-serif;
  --f-head:"Arial Black","Arial Bold",Impact,"Helvetica Neue",sans-serif;
  --f-body:"Lucida Grande","Segoe UI",Tahoma,Geneva,sans-serif;
  --f-mono:Consolas,"Courier New",monospace;
  --orange:#FF6600;
  --orange-hi:#FF9433;
  --orange-lo:#C24E00;
  --orange-dk:#7A3200;
  --ink:#0d0a07;
  --panel1:#2a2118;
  --panel2:#1c1610;
  --line:#0a0806;
  --line-soft:#3a2f22;
  --text:#e8e0d4;
  --text-dim:#a89880;
  --amber:#FFA53C;
}

/* standard elements */
*{margin:0;padding:0}
html{height:100%;margin-bottom:1px}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-hi)}
body{
  background:#14100c;
  background-image:
    radial-gradient(ellipse at 50% 0%,rgba(255,102,0,.06),transparent 60%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 2px,transparent 2px 6px);
  color:var(--text);
  font:normal 12.5px/1.55 var(--f-body);
}
input,textarea,select{color:var(--text);font:normal 14px var(--f-body)}
input:focus,textarea:focus{outline:none;border-color:var(--orange)!important;box-shadow:0 0 6px rgba(255,102,0,.5)}
p,cite,code,ul{font-size:100%;padding-bottom:1.1em}
ul{margin-left:1.2em}
li{list-style:none}
h1{font-size:1.4em}
h1,h2,h3{
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:1px;
  color:var(--amber);text-shadow:0 2px 0 #000,0 3px 6px rgba(0,0,0,.7);
}
blockquote{
  background:linear-gradient(#241c12,#1a140c);border-left:4px solid var(--orange);
  border-right:1px solid var(--line);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line);
  color:var(--text);display:block;font-size:.95em;margin-bottom:1.1em;padding:8px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),2px 2px 4px rgba(0,0,0,.4);
}
blockquote p{padding:3px 0}
dl{width:100%;overflow:hidden}
dt{clear:left;float:left;color:var(--amber);font-size:.9em;width:30%}
dd{float:left;width:68%;padding-bottom:.6em}

/* misc */
.clearer{clear:both}
.hidden{display:none!important}
.right{text-align:right}
.mut{color:var(--text-dim);font-size:.95em}
.err{color:#FF5540;font-size:.95em;font-weight:700}
.ok-note{color:var(--orange);font-size:.95em}
.mono,td.num{font-family:var(--f-mono)}

/* structure: riveted dark plate */
.container{
  width:702px;margin:0 auto;
  background:linear-gradient(180deg,#2b2118 0%,#1e1710 40%,#191309 100%);
  border-left:2px solid #000;border-right:2px solid #000;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(255,255,255,.04),
    0 0 40px rgba(0,0,0,.9);
  position:relative;
}
.container::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.08) 3px 4px);
}

/* top title plate */
.top{
  background:linear-gradient(180deg,var(--orange-hi) 0%,var(--orange) 45%,var(--orange-lo) 100%);
  font:normal 1.7em/60px var(--f-display);text-transform:uppercase;letter-spacing:1px;
  height:60px;margin:0 auto;width:630px;position:relative;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:3px solid var(--orange-dk);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.6);
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}
.top a{color:#1a0c00;display:block;line-height:60px;text-decoration:none;flex:1}
.top span{padding-left:20px;letter-spacing:1px}
.top .tag{
  font:normal 700 11px/1 var(--f-mono);color:#3a1500;letter-spacing:1px;
  padding-right:14px;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.top a:hover{background:linear-gradient(180deg,#FFB366,var(--orange-hi) 50%,var(--orange));color:#1a0c00}

/* header banner (image only) */
.header{
  background:url(/img/bsm/header.jpg?v=hl7) no-repeat center center;
  background-size:cover;
  height:180px;margin:0 auto;width:630px;overflow:hidden;position:relative;
  border-bottom:3px solid #000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 -20px 30px rgba(0,0,0,.35);
}

/* main column */
.main{float:left;margin-left:36px}
.item{clear:both}
.content{float:left;width:420px}
.item .body,.body{padding:12px 18px}
.contentheading,.componentheading{font-family:var(--f-display);font-size:1.3em;color:var(--amber);padding-bottom:5px}
.small,.createdate,.modifydate{color:var(--text-dim);font-size:90%}

/* date tag */
.item .date{
  background:linear-gradient(180deg,var(--orange-hi),var(--orange-lo));
  color:#fff;float:left;height:44px;text-align:center;width:40px;margin-left:-40px;
  border:1px solid var(--orange-dk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.35),2px 2px 4px rgba(0,0,0,.5);
}
.item .date div{padding:3px 0 0}
.item .date .d{text-align:center;font-weight:700;font-size:1.6em;font-family:var(--f-head);line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.item .date .m{font-size:.7em;text-transform:uppercase;letter-spacing:1px;font-weight:700}

/* posts: raised dark plates */
.post{
  margin-bottom:14px;padding:10px 12px;
  background:linear-gradient(180deg,var(--panel1),var(--panel2));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 8px rgba(0,0,0,.5);
}
.post h2,.contentheading{font-size:1.35em;color:var(--amber);padding-bottom:5px}
.rule{height:2px;border-bottom:1px solid #000;border-top:1px solid var(--line-soft);margin-bottom:10px;background:none}
.meta{margin:0 0 10px;color:var(--text-dim);font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.meta b{color:var(--amber)}
p{margin:0 0 10px;color:var(--text)}

/* amber CRT screen */
.screen{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#0e0b07;
  background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,102,0,.05) 2px 3px);
  border:2px solid #000;color:var(--amber);
  font:1.15em/1.5 var(--f-mono);text-shadow:0 0 8px rgba(255,165,60,.7);
  padding:10px 14px;margin:4px 0 12px;
  box-shadow:inset 0 0 14px rgba(0,0,0,.95),inset 0 0 3px #000,0 1px 0 rgba(255,255,255,.06);
}
.screen.off{color:#FF5540;background-image:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,85,64,.05) 2px 3px)}
.screen .dot{color:var(--orange);animation:pulse 1.6s infinite}
.screen.off .dot{color:#FF5540;animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* big CTA button */
a.join{
  display:block;text-align:center;padding:16px 10px;margin:14px 0 6px;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 50%,var(--orange-lo));
  color:#1a0c00;text-decoration:none;
  font:bold 1.6em/1.1 var(--f-head);letter-spacing:4px;text-transform:uppercase;
  border:1px solid var(--orange-dk);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.6);
}
a.join:hover{background:linear-gradient(180deg,#FFC084,var(--orange-hi) 50%,var(--orange));color:#1a0c00}
a.join:active{box-shadow:inset 0 3px 8px rgba(0,0,0,.6);transform:translateY(1px)}

/* fieldset forms */
.field{
  display:block;width:100%;padding:9px 10px;color:var(--text);
  font:normal 14px var(--f-body);
  background:#120e0a;border:1px solid #000;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.05);
}
textarea.field{resize:vertical;min-height:110px}
.label{margin-bottom:4px}
.btn{
  display:inline-block;cursor:pointer;text-decoration:none;padding:9px 16px;
  font:bold 12px var(--f-head);letter-spacing:1px;text-transform:uppercase;color:#1a0c00;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 55%,var(--orange-lo));
  border:1px solid var(--orange-dk);
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.3),0 2px 5px rgba(0,0,0,.5);
}
.btn:hover{background:linear-gradient(180deg,#FFC084,var(--orange-hi) 55%,var(--orange));color:#1a0c00}
.btn:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.6);transform:translateY(1px)}
.btn.steel,.btn.dark{
  color:var(--text);
  background:linear-gradient(180deg,#4a4038,#362e26 55%,#241e18);
  border-color:#0a0806;text-shadow:0 -1px 0 rgba(0,0,0,.6);
}
.btn.steel:hover,.btn.dark:hover{background:linear-gradient(180deg,#5c5044,#453b31 55%,#2e261e);color:var(--text)}
.btn.red{
  color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.5);
  background:linear-gradient(180deg,#FF6A55,#D63A28 55%,#96220F);border-color:#5A1005;
}
.btn.red:hover{background:linear-gradient(180deg,#FF8A75,#E64A38 55%,#A6321F);color:#fff}
.btn.sel{
  color:#1a0c00;
  background:linear-gradient(180deg,#C97A3A,#A85E20 55%,#7A4210);border-color:#4A2808;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55);
}

/* sidebar */
.navigation{float:left;margin-left:1px;width:208px}
.box{margin-bottom:15px}
.box h3,.navhead{
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 50%,var(--orange-lo));
  color:#1a0c00;font-family:var(--f-head);font-size:1.05em;line-height:2.4em;height:2.4em;
  padding-left:12px;text-transform:uppercase;letter-spacing:1px;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  border-bottom:2px solid var(--orange-dk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 5px rgba(0,0,0,.5);
}
.bd{padding:6px}
.bd p{padding-bottom:.8em}
.bd p.about{
  font-family:var(--f-display);font-size:1.05em;line-height:1.7;
  letter-spacing:.3px;color:var(--amber);
  text-shadow:0 1px 0 #000;
}
.bd ul{margin:0;padding:0}
.bd li{list-style:none;border-bottom:1px solid #000}
.bd .toplist a,.bd li a{
  display:block;padding:8px 10px;text-decoration:none;color:var(--text);
  background:linear-gradient(180deg,#322820,#241c14);
  border:1px solid #0a0806;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.4);
}
.bd .toplist a:hover,.bd li a:hover{background:linear-gradient(180deg,#4a3520,#332414);color:var(--amber)}
.bd .toplist{list-style:none}
.bd .toplist li{display:flex;align-items:center;border-bottom:1px solid #000;margin-bottom:2px}
.bd .toplist .n{
  width:26px;text-align:center;color:#1a0c00;font-weight:700;flex:none;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange-lo));
  align-self:stretch;line-height:1.9;font-family:var(--f-head);
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.bd .toplist .e{margin-left:auto;padding-right:8px;color:var(--amber);font-family:var(--f-mono);font-weight:700}
.bd .toplist a{flex:1}
ol.top{list-style:none}
.bd li a.on{
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 50%,var(--orange-lo));
  color:#1a0c00;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.bd li a.on:hover{background:linear-gradient(180deg,#FFC084,var(--orange-hi) 50%,var(--orange));color:#1a0c00}

/* Quick Links buttons */
.navigation a{
  display:block;text-align:center;
  padding:10px 12px;margin:0 0 6px;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 55%,var(--orange-lo));
  color:#1a0c00;text-decoration:none;
  font:bold 12px var(--f-head);letter-spacing:1px;text-transform:uppercase;
  border:1px solid var(--orange-dk);
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.3),0 2px 5px rgba(0,0,0,.5);
}
.navigation a:hover{background:linear-gradient(180deg,#FFC084,var(--orange-hi) 55%,var(--orange));color:#1a0c00}
.navigation a:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.6);transform:translateY(1px)}

/* tables */
.tblwrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:11.5px}
table.data th{
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 50%,var(--orange-lo));
  color:#1a0c00;text-align:right;font-weight:700;font-family:var(--f-head);letter-spacing:.5px;text-transform:uppercase;
  padding:8px 8px;cursor:pointer;user-select:none;white-space:nowrap;
  border-right:1px solid var(--orange-dk);border-bottom:2px solid var(--orange-dk);
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
table.data th:hover{background:linear-gradient(180deg,#FFC084,var(--orange-hi) 50%,var(--orange))}
table.data th.on{box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data td{
  padding:7px 8px;text-align:right;color:var(--text);
  border-bottom:1px solid #000;border-right:1px solid rgba(0,0,0,.4);white-space:nowrap;
  background:linear-gradient(180deg,#241c14,#1c1610);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
table.data tr:nth-child(even) td{background:linear-gradient(180deg,#1e1812,#181209)}
table.data tr:hover td{background:linear-gradient(180deg,#3a2a16,#2a1e10)}
table.data a.pn{color:var(--amber);font-weight:700;text-decoration:none}
table.data a.pn:hover{color:var(--orange-hi);text-decoration:underline}
td.num{font-family:var(--f-mono)}

/* footer plate */
.footer{
  background:linear-gradient(180deg,#2b2118,#17110a);
  color:var(--text-dim);font-size:1.05em;line-height:42px;
  margin:0 auto;width:626px;position:relative;
  border-top:3px solid var(--orange-lo);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.footer a{color:var(--amber)}
.footer a:hover{color:var(--orange-hi)}
.footer .left,.footer .right{padding:0 12px}
.footer div.clearer{line-height:0;height:0}

/* floats */
.left{float:left}
.right{float:right}

/* rich post content (TinyMCE HTML posts) */
.pbody a{color:var(--orange);text-decoration:underline}
.pbody img{max-width:100%;height:auto;margin:4px 0;border:1px solid #000;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.pbody ul{margin:8px 0 10px;padding-left:20px}
.pbody ul li{list-style:disc;margin-bottom:3px;color:var(--text)}
.pbody ol{margin:8px 0 10px;padding-left:20px}
.pbody ol li{list-style:decimal;margin-bottom:3px}
.pbody li{margin-bottom:3px}
.pbody blockquote{
  border-left:4px solid var(--orange);border-top:none;border-bottom:none;
  margin:8px 0;padding:4px 14px;color:var(--amber);font-style:italic;
  background:linear-gradient(90deg,rgba(255,102,0,.1),transparent);display:block;
}
.pbody h2,.pbody h3,.pbody h4{color:var(--amber);margin:13px 0 6px}
.pbody hr{border:none;border-top:1px solid var(--line-soft);border-bottom:1px solid #000;margin:12px 0}
.pbody code{font:1.05em var(--f-mono);background:#120e0a;border:1px solid var(--line-soft);padding:1px 5px;color:var(--amber)}
.pbody pre{font:1.05em/1.45 var(--f-mono);background:#120e0a;border:1px solid var(--line-soft);padding:10px;overflow-x:auto;white-space:pre-wrap;color:var(--amber);box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
.pbody table{border-collapse:collapse;margin:10px 0;width:100%;background:#1a140c}
.pbody table th,.pbody table td{border:1px solid var(--line-soft);padding:4px 8px;color:var(--text)}
.pbody table th{background:linear-gradient(180deg,var(--orange-hi),var(--orange-lo));color:#1a0c00;font-family:var(--f-head);font-size:.95em;text-shadow:0 1px 0 rgba(255,255,255,.3)}

/* profile resume */
.ptop{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ptop .av{
  width:48px;height:48px;line-height:48px;text-align:center;color:#1a0c00;font-size:1.8em;font-weight:700;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange-lo));flex:none;
  border:1px solid var(--orange-dk);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 5px rgba(0,0,0,.5);
}
.ptop .nm{font-size:1.45em;font-weight:400;color:var(--amber);font-family:var(--f-display);text-shadow:0 2px 0 #000}
.ptop .sid{font-family:var(--f-mono);color:var(--text-dim);font-size:.95em}
.rankline{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rk{
  display:inline-block;color:#1a0c00;font-weight:700;padding:6px 14px;
  font-family:var(--f-head);text-transform:uppercase;letter-spacing:1px;font-size:.95em;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 50%,var(--orange-lo));
  border:1px solid var(--orange-dk);
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 5px rgba(0,0,0,.5);
}
.elo{
  display:inline-block;background:linear-gradient(180deg,#322820,#241c14);
  border:1px solid #0a0806;color:var(--amber);padding:6px 12px;font-weight:700;font-family:var(--f-mono);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.5);
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{
  background:linear-gradient(180deg,#2a2118,#1a140c);
  border:1px solid #0a0806;padding:9px 4px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.45);
}
.stat .v{font:bold 1.6em var(--f-head);color:var(--amber);line-height:1.1;text-shadow:0 2px 0 #000}
.stat .l{font-size:.8em;letter-spacing:1px;color:var(--orange);text-transform:uppercase;margin-top:3px;font-weight:700}
.srow{
  display:flex;align-items:center;gap:8px;padding:7px 6px;border-bottom:1px solid #000;cursor:pointer;
  background:linear-gradient(180deg,#241c14,#1c1610);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.srow:hover{background:linear-gradient(180deg,#3a2a16,#2a1e10)}
.srow .pos{width:24px;color:var(--text-dim);font-family:var(--f-mono)}
.srow .nm{font-weight:700;color:var(--text)}.srow:hover .nm{color:var(--amber)}
.srow .rnk{margin-left:auto;font-size:.85em;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.srow .el{width:44px;text-align:right;font-family:var(--f-mono);font-weight:700;color:var(--amber)}

/* tinymce basic skin tweak to fit template */
.mce-container{font-family:var(--f-body)!important}
.mce-panel{border-color:#0a0806!important}
.mce-btn{border-radius:0!important}
.mce-menu,.mce-window{border-radius:0!important}
.mce-btn.mce-primary{background:#C24E00!important}

/* mobile */
@media(max-width:760px){
  .top{width:100%;font-size:1.15em;line-height:48px;height:48px}
  .top a{line-height:48px}
  .top .tag{display:none}
  .header{width:100%;background-size:cover}
  .container{width:100%!important}
  .main{float:none;margin:0;width:100%;padding:0 8px}
  .content{width:100%}
  .item .date{position:static;float:none;margin:0 0 8px;display:inline-block;width:auto;height:auto;padding:3px 8px}
  .item .date div{padding:0}
  .item .date .d,.item .date .m{display:inline;font-size:1em;line-height:1.2}
  .navigation{float:none;width:100%;margin:14px 0 0;padding:0 8px}
  .stats{grid-template-columns:repeat(3,1fr)}
  .footer{width:100%;line-height:1.6;padding:8px 0}
  .footer .left,.footer .right{display:block;text-align:center;padding:2px 8px}
}