:root{ --botb-text: #ffffff;
--botb-panel-bg: #111111;
--botb-stats-bg: rgba(255,255,255,0.07);
--botb-stats-text: #ffb6c1;
--botb-btn-bg: #ff4d6d;
--botb-btn-bg-hover: #c2185b;
--botb-btn-text: #ffffff;
--botb-vs-grad-a: #ff4d6d;
--botb-vs-grad-b: #c2185b;
--botb-like-off: #a3a3a3;
--botb-like-hover: #d1d5db;
--botb-like-on: #34d399;
--botb-like-on-hover: #2ecc71;
}
body {
margin: 0;
padding: 0;
color: var(--botb-text);
font-family: 'ABeeZee', sans-serif;
}
form { background: transparent; margin: 0; padding: 0; }
.battle-container{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:stretch;
width:100%;
max-width:1200px;
margin:0 auto;
gap:0;
background:transparent;
padding:0;
box-sizing:border-box;
position:relative;
}
.vote-side{
flex:1 1 0;
min-width:0;
display:flex;
flex-direction:column;
justify-content:stretch;
align-items:stretch;
background:var(--botb-panel-bg);
margin:0;
padding:0;
box-sizing:border-box;
overflow:hidden;
}
.vote-content{
flex:1 1 auto;
display:flex;
flex-direction:column;
width:100%;
overflow:hidden;
min-height:0;
}
.hover-preview-container{
position:relative;
width:100%;
flex:1 1 auto;
display:flex;
min-height:0;
}
.hover-preview{
width:100%;
flex:1 1 auto;
display:flex;
min-height:0;
}
.hover-preview img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center;
margin:0;
flex:1 1 auto;
} .statistics{
background:var(--botb-stats-bg);
color:var(--botb-stats-text);
font-size:1em;
padding:8px 10px;
width:100%;
text-align:center;
box-sizing:border-box;
margin:0;
flex:0 0 auto;
font-weight:bold;
} .botb-like-row{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
padding:8px 10px;
background:rgba(255,255,255,0.05);
flex:0 0 auto;
}
.botb-like-btn{
border:none;
background:transparent;
cursor:pointer;
font-size:22px;
line-height:1;
padding:6px 8px;
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--botb-like-off);
transition:transform .15s ease, color .15s ease;
}
.botb-like-btn:hover{ transform:scale(1.08); color:var(--botb-like-hover); }
.botb-like-btn.is-on{ color:var(--botb-like-on); }
.botb-like-btn.is-on:hover{ color:var(--botb-like-on-hover); }
.botb-like-btn:disabled{ cursor:default; opacity:1; }
.botb-like-count{
color:var(--botb-text);
font-size:1em;
font-weight:700;
min-width:32px;
text-align:left;
} .votebutton{
width:100%;
border:none;
padding:20px;
font-size:2em;
background-color:var(--botb-btn-bg);
color:var(--botb-btn-text);
cursor:pointer;
margin:0;
box-sizing:border-box;
flex:0 0 auto;
font-family:'ABeeZee', sans-serif;
font-weight:700;
border-radius:0;
transition:background .3s ease;
}
.votebutton:hover{ background-color:var(--botb-btn-bg-hover); }
.vote-side.left{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
.vote-side.right{ border-top-right-radius:12px; border-bottom-right-radius:12px; }
.vote-side.left .votebutton{ border-radius:0 0 0 12px; }
.vote-side.right .votebutton{ border-radius:0 0 12px 0; } .vs-banner{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) rotate(-10deg);
background:linear-gradient(to right,var(--botb-vs-grad-a),var(--botb-vs-grad-b));
color:#fff;
font-weight:bold;
font-size:1.4em;
padding:10px 28px;
border-radius:50px;
box-shadow:0 4px 10px rgba(0,0,0,.4);
z-index:10;
pointer-events:none;
text-shadow:0 0 4px rgba(0,0,0,.4);
letter-spacing:1px;
}
.view-link{
position:absolute;
bottom:6px;
right:6px;
background:rgba(255,255,255,0.2);
color:rgba(0,0,0,0.6);
padding:2px 6px;
border-radius:4px;
text-decoration:none;
font-size:14px;
z-index:20;
transition:background .2s ease-in-out,color .2s ease-in-out;
}
.view-link:hover{
background:rgba(255,255,255,0.5);
color:rgba(0,0,0,0.9);
}
@media screen and (max-width:768px){
.battle-container{ flex-direction:row; }
.hover-preview-container{ min-height:45vh; }
.vs-banner{ font-size:1em; padding:8px 20px; }
.votebutton{ font-size:1.5em; padding:16px; }
}
.gallery-link-container{ text-align:center; margin-top:20px; }
.gallery-link-button{
padding:12px 24px;
font-size:1.3em;
font-weight:bold;
background-color:var(--botb-btn-bg);
color:var(--botb-btn-text);
border:none;
border-radius:6px;
font-family:'ABeeZee', sans-serif;
cursor:pointer;
box-shadow:0 3px 8px rgba(0,0,0,0.3);
transition:background-color .3s ease;
}
.gallery-link-button:hover{ background-color:var(--botb-btn-bg-hover); }  .loveboobs-style{
--botb-panel-bg:#111111;
--botb-stats-text:#ffb6c1;
--botb-btn-bg:#ff4d6d;
--botb-btn-bg-hover:#c2185b;
--botb-vs-grad-a:#ff4d6d;
--botb-vs-grad-b:#c2185b;
} .wbb-style{
--botb-panel-bg:#0b0b10;
--botb-stats-text:#ffd1dc;
--botb-btn-bg:#e91e63;
--botb-btn-bg-hover:#ad1457;
--botb-vs-grad-a:#e91e63;
--botb-vs-grad-b:#ad1457;
} .knockout-style{
--botb-panel-bg:#0d0d0d;
--botb-stats-text:#ffb6c1;
--botb-btn-bg:#ff2d55;
--botb-btn-bg-hover:#b0002a;
--botb-vs-grad-a:#ff2d55;
--botb-vs-grad-b:#b0002a;
} .battle-container button,
.battle-container button[type="submit"],
.battle-container input[type="submit"]{
background: #ff4d6d !important;
color: #fff !important;
border: 0 !important;
box-shadow: none !important;
background-image: none !important;
-webkit-appearance: none;
appearance: none;
}
.battle-container button:hover,
.battle-container button[type="submit"]:hover,
.battle-container input[type="submit"]:hover{
background: #c2185b !important;
}