body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.hero {
position: relative;
min-height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.hero-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.35);
z-index: 2;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 4;
max-width: 700px;
padding: 20px;
}
.hero-logo img {
max-width: 360px;
margin-bottom: 20px;
z-index: 3;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.hero-content p {
font-size: 1.2rem;
opacity: 0.85;
}
.about, .posts {
padding: 60px 20px;
}
.site-header {
position: fixed;
top: 20px;
left: 0;
width: 100%;
z-index: 1000;
padding: 0 20px;
box-sizing: border-box;
transition: transform 0.35s ease;
}
.site-header-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 14px 22px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 8px 30px rgba(0, 0, 0, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
position: relative;
overflow: hidden;
}
.site-header.header-hidden {
transform: translateY(-140%);
}
.site-branding a {
display: inline-flex;
align-items: center;
text-decoration: none;
flex: 0 0 auto;
}
.site-title {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 0.95rem;
letter-spacing: 0.28em;
text-transform: uppercase;
}
.site-nav {
flex: 1;
}
.main-menu {
list-style: none;
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 20px;
margin: 0;
padding: 0;
width: 100%;
}
.main-menu li {
display: flex;
align-items: center;
justify-content: center;
}
.site-nav ul {
list-style: none;
display: flex;
align-items: center;
gap: 18px;
margin: 0;
padding: 0;
}
.site-nav a {
color: white;
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.92;
display: inline-block; transition: 
transform 0.25s ease,
opacity 0.25s ease;
}
.site-nav a:hover {
opacity: 1;
transform: scale(1.08) translateY(-2px);
}
.site-nav a::after {
content: "";
display: block;
height: 2px;
width: 0%;
background: white;
margin-top: 4px;
transition: width 0.25s ease;
}
.site-nav a:hover::after {
width: 100%;
}
.site-footer {
background: #000;
padding: 40px 20px 60px;
text-align: center;
}
.social-footer {
display: flex;
justify-content: center;
align-items: center;
gap: 28px;
}
.social-footer a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
transition: transform 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.social-footer a:hover {
transform: translateY(-4px) scale(1.05);
background: rgba(255, 255, 255, 0.14);
}
.social-footer img {
width: 24px;
height: 24px;
object-fit: contain;
display: block;
}
.about {
background: #111;
color: white;
padding: 80px 20px;
text-align: center;
}
.about p {
max-width: 600px;
margin: 20px auto 0;
line-height: 1.6;
}
.cta {
background: #c30010;
color: black;
text-align: center;
padding: 80px 20px;
}
.cta-button {
display: inline-block;
margin-top: 20px;
padding: 15px 30px;
background: black;
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
}
.cta-button:hover {
background: #333;
}
.contact-page {
background: #000;
color: white;
}
.contact-hero {
position: relative;
min-height: 55vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 120px 20px 80px;
overflow: hidden;
background: url(//www.theothervenue.co.za/wp-content/uploads/2026/04/contact-bg.jpg) center/cover no-repeat;
}
.contact-hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.contact-hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
.contact-hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 12px;
}
.contact-hero p {
font-size: 1.05rem;
opacity: 0.9;
}
.contact-section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
align-items: start;
}
.contact-details h2 {
font-size: 2rem;
margin-bottom: 18px;
}
.contact-details p {
line-height: 1.7;
opacity: 0.9;
}
.contact-links {
margin-top: 28px;
}
.contact-form-wrap {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
padding: 30px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.contact-form-wrap .wpforms-container {
max-width: none;
margin: 0;
padding: 0;
}
.contact-form-wrap .wpforms-container input,
.contact-form-wrap .wpforms-container textarea {
color: white;
}
.contact-form-wrap .wpforms-container .wpforms-field-medium {
color: #fff;
background: rgba(255, 255, 255, 0.07);
}
.contact-form-wrap .wpforms-container textarea.wpforms-field-medium::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.contact-form-wrap .wpforms-container textarea.wpforms-field-medium:focus {
color: #fff;
outline: none;
}
.contact-form-wrap .wpforms-field label {
color: white;
font-weight: 600;
margin-bottom: 8px;
}
.contact-form-wrap .wpforms-container .wpforms-field-name .wpforms-field-label,
.contact-form-wrap .wpforms-container .wpforms-field-name label,
.contact-form-wrap .wpforms-container .wpforms-field-label{
color: white;
}
.contact-form-wrap .wpforms-container .wpforms-field-name .wpforms-field-sublabel {
color: rgba(255, 255, 255, 0.6);
}
.contact-form-wrap .wpforms-field input,
.contact-form-wrap .wpforms-field textarea,
.contact-form-wrap .wpforms-field select {
width: 100%;
padding: 14px 16px;
font-size: 16px;
color: white;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
box-sizing: border-box;
}
.contact-form-wrap .wpforms-field input::placeholder,
.contact-form-wrap .wpforms-field textarea::placeholder {
color: rgba(255, 255, 255, 0.55);
}
.contact-form-wrap .wpforms-field textarea {
min-height: 160px;
resize: vertical;
color: white;
}
.contact-form-wrap .wpforms-field form input {
color: white;
}
.contact-form-wrap .wpforms-submit {
padding: 14px 28px;
background: white;
color: black;
border: none;
border-radius: 999px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.contact-form-wrap .wpforms-submit:hover {
transform: translateY(-2px);
opacity: 0.9;
}
.events {
background: #000;
color: white;
padding: 80px 0;
overflow: hidden;
}
.events-header {
text-align: center;
margin-bottom: 30px;
padding: 0 20px;
}
.events h2 {
font-size: clamp(2rem, 4vw, 3.5rem);
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}
.events-carousel {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
position: relative;
padding: 20px 0;
scrollbar-width: thin;
cursor: grab;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.events-carousel::before,
.events-carousel::after {
content: "";
position: absolute;
top: 0;
width: 120px;
height: 100%;
z-index: 30;
pointer-events: none;
}
.events-carousel:active {
cursor: grabbing;
}
.events-track {
display: flex;
align-items: stretch;
gap: 24px;
width: max-content;
}
.events-carousel::-webkit-scrollbar {
height: 10px;
}
.events-carousel::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
}
.events-carousel::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.28);
border-radius: 999px;
}
.events-carousel::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.42);
}
.events-carousel:hover .events-track {
animation-play-state: paused;
}
.event-card {
position: relative;
flex: 0 0 calc((100vw - 48px) / 3);
max-width: 360px;
min-width: 280px;
border-radius: 18px;
overflow: visible;
background: #111;
z-index: 1;
}
.event-card:hover {
transform: scale(1.08);
z-index: 20;
}
.event-link {
display: block;
color: inherit;
text-decoration: none;
border-radius: 18px;
overflow: hidden;
position: relative;
}
.event-poster {
position: relative;
width: 100%;
padding-top: 177%;
overflow: hidden;
background: #111;
border-radius: 18px;
}
.event-poster img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 2;
} .event-poster::after {
display: none;
}
.event-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 18px 16px;
z-index: 3;
text-align: left;
pointer-events: none;
}
.event-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 18px 16px;
z-index: 3;
text-align: left;
pointer-events: none;
}
.event-date {
display: inline-block;
margin: 0;
padding: 8px 12px;
font-size: 0.8rem;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
background: rgba(0, 0, 0, 0.65);
border-radius: 999px;
backdrop-filter: blur(6px);
}
.custom-logo-link {
display: inline-block;
}
.custom-logo {
display: block;
height: 40px;
margin-top: 8px;
width: auto;
}
.contact-form-wrap .forminator-ui input,
.contact-form-wrap .forminator-ui textarea,
.contact-form-wrap .forminator-ui select {
width: 100%;
padding: 14px 16px;
font-size: 16px;
color: white;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 14px;
}
.contact-form-wrap .forminator-ui label {
color: white;
font-weight: 600;
margin-bottom: 6px;
}
.contact-form-wrap .forminator-button {
padding: 14px 28px;
background: white;
color: black;
border-radius: 999px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: transform 0.25s ease;
}
.contact-form-wrap .forminator-button:hover {
transform: translateY(-2px);
}
.guest-ticket {
text-align: center;
color: white;
padding: 20px 0;
}
.ticket-box {
margin: 30px auto;
padding: 24px;
max-width: 420px;
border-radius: 24px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(12px);
}
.ticket-label {
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.6;
}
#ticket-code {
margin: 10px 0 0;
font-size: 2.5rem;
letter-spacing: 0.15em;
}
.ticket-note {
font-size: 0.9rem;
opacity: 0.7;
}
.about-page {
background: #000;
color: white;
}
.about-hero {
position: relative;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 120px 20px 80px;
overflow: hidden;
background: url(//www.theothervenue.co.za/wp-content/uploads/2026/04/about-bg.jpg) center/cover no-repeat;
}
.about-hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}
.about-hero-content {
position: relative;
z-index: 2;
max-width: 700px;
}
.about-hero h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 12px;
}
.about-gallery-section {
padding: 120px 10px 40px;
}
.about-gallery-header {
text-align: center;
margin-bottom: 40px;
}
.about-gallery-header h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0;
}
.about-gallery-intro {
text-align: center;
margin-bottom: 40px;
}
.about-gallery-intro h2 {
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.about-gallery-content .wp-block-gallery.has-nested-images {
display: block;
columns: 3;
column-gap: 14px;
gap: 0;
}
.about-gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image {
display: inline-block;
width: 100%;
margin: 0 0 14px 0;
break-inside: avoid;
background: transparent;
box-shadow: none;
border: 0;
outline: 0;
overflow: hidden;
border-radius: 0;
}
.about-gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image a {
display: block;
}
.about-gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
display: block;
width: 100%;
height: auto;
margin: 0;
border: 0;
outline: 0;
box-shadow: none;
object-fit: contain;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.about-gallery-content .wp-block-gallery.has-nested-images figure.wp-block-image:hover img {
transform: scale(1.02);
opacity: 0.95;
}
.about-gallery-content .wp-block-gallery.has-nested-images figcaption {
display: none;
}
.final-tiles-gallery {
background: #000;
}
.final-tiles-gallery .ftg-item {
border: none;
box-shadow: none;
}
.final-tiles-gallery img {
border-radius: 6px;
}
@media (max-width: 1024px) {
.about-gallery-content .wp-block-gallery.has-nested-images {
columns: 2;
}
}
@media (max-width: 700px) {
.about-gallery-content .wp-block-gallery.has-nested-images {
columns: 1;
}
}
@keyframes scrollEvents {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
} @media (max-width: 1024px) {
.event-card {
flex: 0 0 320px;
}
} @media (max-width: 767px) {
.event-card {
flex: 0 0 260px;
}
.events-track {
gap: 16px;
animation: scrollEvents 24s linear infinite;
}
}
@media (max-width: 900px) {
.site-header {
top: 12px;
padding: 0 12px;
}
.site-header-inner {
gap: 16px;
padding: 12px 16px;
}
.main-menu {
justify-content: space-between;
gap: 12px;
}
.site-nav ul {
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
.site-nav a {
font-size: 0.72rem;
}
.custom-logo {
height: 30px;
}
.contact-section {
grid-template-columns: 1fr;
gap: 28px;
}
.contact-hero {
min-height: 45vh;
padding: 110px 20px 60px;
}
.contact-form-wrap {
padding: 22px;
}
}
.spin-page {
background: #000;
color: white;
min-height: 100vh;
padding: 150px 20px 80px;
}
.spin-game {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.spin-game h1 {
font-size: clamp(2.2rem, 5vw, 4.5rem);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.spin-game p {
opacity: 0.8;
}
.spin-board {
position: relative;
width: min(80vw, 520px);
height: min(80vw, 520px);
margin: 50px auto 30px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.18);
background:
radial-gradient(circle, rgba(255,255,255,0.09), rgba(255,255,255,0.02)),
rgba(255,255,255,0.03);
box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.prize {
position: absolute;
left: 50%;
top: 50%;
width: 130px;
text-align: center;
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
transform:
rotate(var(--angle))
translate(200px)
rotate(calc(-1 * var(--angle)))
translate(-50%, -50%);
}
.bottle {
position: absolute;
left: 50%;
top: 50%;
width: 220px;
height: 220px;
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: center center;
transition: transform 4s cubic-bezier(.12,.75,.18,1);
z-index: 20;
}
.bottle img {
width: 100%;
height: auto;
display: block;
user-select: none;
pointer-events: none;
}
.spin-button {
padding: 15px 38px;
border-radius: 999px;
border: none;
background: white;
color: black;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.12em;
cursor: pointer;
}
.spin-result {
margin-top: 28px;
font-size: 1.4rem;
font-weight: 800;
}
.spin-slots {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
width: min(100%, 650px);
margin: 26px auto;
}
.spin-slot {
min-height: 82px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 18px;
background: rgba(255, 255, 255, 0.06);
color: white;
font-size: 0.9rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.06em;
text-align: center;
text-transform: uppercase;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
transform 0.25s ease,
background 0.25s ease,
border-color 0.25s ease;
}
.spin-slot.is-filled {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.35);
transform: translateY(-3px);
}
.spin-slot.is-winner {
background: rgba(255, 255, 255, 0.2);
border-color: white;
transform: scale(1.04);
}
.spin-button:disabled {
cursor: wait;
opacity: 0.55;
}
.spin-result {
min-height: 34px;
margin-top: 24px;
} @media (max-width: 768px) {
.spin-page {
padding: 110px 15px 40px;
}
.spin-game h1 {
font-size: 2rem;
}
.spin-game p {
font-size: 0.95rem;
}
.spin-board {
width: 92vw;
height: 92vw;
max-width: 360px;
max-height: 360px;
margin: 30px auto;
}
.prize {
width: 90px;
font-size: 0.65rem;
line-height: 1.2;
transform:
rotate(var(--angle))
translate(135px)
rotate(calc(-1 * var(--angle)))
translate(-50%, -50%);
}
.bottle{
width:110px;
height:110px;
}
.spin-button {
width: 220px;
max-width: 80%;
font-size: 1rem;
}
.spin-result {
font-size: 1.15rem;
padding: 0 15px;
}
}
@media (max-width: 600px) {
.spin-slots {
gap: 8px;
}
.spin-slot {
min-height: 68px;
padding: 8px 5px;
border-radius: 12px;
font-size: 0.68rem;
letter-spacing: 0.03em;
}
} .bottle-rpg-page {
min-height: 100vh;
padding: 110px 20px 50px;
background:
radial-gradient(circle at top, rgba(255,255,255,0.09), transparent 38%),
#050505;
color: white;
}
.rpg-shell {
width: min(1100px, 100%);
margin: 0 auto;
}
.rpg-title {
max-width: 760px;
margin-bottom: 28px;
text-align: center;
}
.rpg-eyebrow {
margin-bottom: 10px;
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.75rem;
}
.rpg-title h1 {
margin: 0 0 12px;
font-size: clamp(2.5rem, 7vw, 5.5rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rpg-title > p:last-child {
opacity: 0.75;
}
.bottle-selection {
margin-bottom: 22px;
}
.bottle-selection > h2,
.battle-log-panel > h2 {
margin-bottom: 18px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 1rem;
}
.bottle-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.bottle-option {
padding: 24px;
display: grid;
gap: 7px;
text-align: left;
color: white;
font: inherit;
cursor: pointer;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px;
transition:
transform 0.25s ease,
border-color 0.25s ease,
background 0.25s ease;
}
.bottle-option:hover {
transform: translateY(-3px);
background: rgba(255,255,255,0.08);
}
.bottle-option.is-selected {
border-color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.12);
}
.bottle-option-icon {
font-size: 2.4rem;
}
.bottle-option strong {
font-size: 1.2rem;
}
.bottle-option small {
opacity: 0.65;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.bottle-option > span:last-child {
opacity: 0.85;
line-height: 1.5;
}
.battle-arena {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: stretch;
margin: 0 0 16px;
}
.fighter-card {
padding: 18px 20px;
min-height: 0;
border-radius: 18px;
background: rgba(255,255,255,0.055);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}
.fighter-label {
margin-bottom: 5px;
font-size: 0.72rem;
opacity: 0.55;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.fighter-card h2 {
margin: 0 0 14px;
font-size: clamp(1.05rem, 2vw, 1.45rem);
}
.health-row {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
font-size: 0.82rem;
font-weight: 700;
}
.health-bar {
height: 10px;
overflow: hidden;
border-radius: 999px;
background: rgba(255,255,255,0.1);
}
.health-bar-fill {
height: 100%;
border-radius: inherit;
background: white;
transition: width 0.4s ease;
}
.enemy-health-fill {
background: rgba(255,255,255,0.55);
}
.fighter-passive {
margin: 12px 0 0;
opacity: 0.72;
line-height: 1.4;
font-size: 0.78rem;
}
.versus-mark {
font-size: 0.8rem;
font-weight: 900;
opacity: 0.4;
letter-spacing: 0.15em;
align-self: center;
}
.spin-combat {
padding: 20px;
text-align: center;
border-radius: 22px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.09);
}
.combat-slots {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
max-width: 680px;
margin-bottom: 14px;
}
.combat-slot {
min-height: 120px;
padding: 15px;
display: flex;
flex-direction: column;
gap: 9px;
align-items: center;
justify-content: center;
border-radius: 20px;
background: rgba(0,0,0,0.32);
border: 1px solid rgba(255,255,255,0.1);
font-size: 2.3rem;
transition:
transform 0.25s ease,
border-color 0.25s ease;
}
.combat-spin-group,
.combat-phase {
margin-bottom: 14px;
}
.combat-spin-label {
margin: 0 0 12px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.6;
}
.enemy-spin-group {
opacity: 0.78;
}
.enemy-combat-slot {
background: rgba(255, 255, 255, 0.025);
border-color: rgba(255, 255, 255, 0.07);
}
.enemy-spin-group.is-active {
opacity: 1;
}
.enemy-spin-group.is-active .enemy-combat-slot {
border-color: rgba(255, 255, 255, 0.4);
}
.combat-spin-group.is-resolving {
animation: combatPulse 0.55s ease;
}
@keyframes combatPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.015);
}
100% {
transform: scale(1);
}
}
.combat-slot small {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.combat-slot.is-set {
transform: translateY(-4px);
border-color: rgba(255,255,255,0.48);
}
.battle-spin-button,
.battle-reset-button {
padding: 14px 28px;
margin: 4px;
border-radius: 999px;
font: inherit;
font-weight: 800;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.battle-spin-button {
color: black;
background: white;
border: 1px solid white;
}
.battle-reset-button {
color: white;
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
}
.battle-spin-button:disabled {
opacity: 0.45;
cursor: wait;
}
.battle-result {
min-height: 30px;
margin-top: 14px;
font-weight: 700;
}
.battle-log-panel {
margin-top: 18px;
padding: 26px;
border-radius: 22px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.09);
}
.battle-log {
max-height: 220px;
overflow-y: auto;
}
.battle-log p {
margin: 0;
padding: 11px 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
opacity: 0.78;
line-height: 1.5;
} @media (max-width: 760px) {
.bottle-rpg-page {
padding: 95px 10px 35px;
}
.rpg-title {
margin-bottom: 22px;
}
.bottle-options {
grid-template-columns: 1fr;
}
.battle-arena {
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 10px;
}
.versus-mark {
padding: 2px 0;
text-align: center;
}
.fighter-card {
min-height: auto;
padding: 14px;
}
.fighter-passive {
display: none;
}
.spin-combat {
padding: 12px 8px;
}
.combat-phase {
padding: 12px 8px;
}
.combat-slots {
gap: 8px;
}
.combat-slot {
min-height: 88px;
padding: 8px 4px;
font-size: 1.7rem;
border-radius: 14px;
}
.combat-slot small {
font-size: 0.58rem;
letter-spacing: 0.04em;
}
.battle-spin-button,
.battle-reset-button {
width: min(100%, 280px);
}
.battle-log-panel,
.combat-legend {
padding: 14px;
}
} .combat-legend {
margin: 20px 0 0;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
background: rgba(255, 255, 255, 0.035);
}
.combat-legend > h2 {
margin-bottom: 16px;
text-align: center;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.legend-groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.legend-group {
padding: 14px;
border-radius: 18px;
background: rgba(0, 0, 0, 0.25);
}
.legend-group h3 {
margin: 0 0 16px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.68;
}
.legend-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.legend-item {
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 14px;
background: rgba(255, 255, 255, 0.03);
}
.legend-icon {
flex: 0 0 auto;
font-size: 1.25rem;
}
.legend-item strong,
.legend-item small {
display: block;
}
.legend-item strong {
font-size: 0.82rem;
}
.legend-item small {
margin-top: 3px;
font-size: 0.7rem;
opacity: 0.62;
}
.legend-note {
margin: 20px 0 0;
text-align: center;
font-size: 0.78rem;
line-height: 1.5;
opacity: 0.58;
} .combat-phase {
padding: 16px;
border-radius: 16px;
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.combat-phase-heading {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 14px;
text-align: left;
}
.combat-phase-heading h2 {
margin: 4px 0 0;
font-size: 1.2rem;
}
.combat-spin-label {
margin: 0;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.55;
}
.combat-totals {
display: flex;
gap: 7px;
}
.combat-total {
min-width: 76px;
padding: 8px 10px;
border-radius: 13px;
text-align: center;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.09);
}
.combat-total span {
margin-bottom: 3px;
font-size: 0.54rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.58;
}
.combat-total strong {
font-size: 1.05rem;
}
.damage-total strong,
.taken-total strong {
color: #ffb5b5;
}
.block-total strong {
color: #b9d5ff;
}
.spin-summary {
min-height: 24px;
margin-top: 10px;
font-size: 0.82rem;
line-height: 1.5;
opacity: 0.72;
}
.combat-divider {
display: flex;
align-items: center;
gap: 14px;
margin: 12px 0;
color: rgba(255, 255, 255, 0.42);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.combat-divider::before,
.combat-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.09);
}
.enemy-combat-phase {
opacity: 0.78;
transition: opacity 0.25s ease, border-color 0.25s ease;
}
.enemy-combat-phase.is-active {
opacity: 1;
border-color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 700px) {
.legend-groups {
grid-template-columns: 1fr;
}
.legend-grid {
grid-template-columns: 1fr 1fr;
}
.combat-phase-heading {
align-items: flex-start;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
}
.combat-totals {
width: 100%;
padding: 7px 5px;
}
.combat-total {
flex: 1;
min-width: 0;
}
} .starting-gift-panel{
margin:40px 0;
padding:32px;
border-radius:22px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.05),
rgba(0,0,0,.45)
);
border:1px solid rgba(255,255,255,.12);
}
.starting-gift-options{
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:22px;
margin-top:24px;
}
.starting-gift-option{
padding:26px;
border-radius:18px;
cursor:pointer;
transition:
all .25s ease;
border:1px solid rgba(255,255,255,.15);
background:
rgba(255,255,255,.04);
text-align:center;
color: white;
}
.starting-gift-option:hover{
transform:
translateY(-6px)
scale(1.02);
border-color:#d6af4c;
box-shadow:
0 18px 40px rgba(214,175,76,.15);
}
.starting-gift-option h3{
margin-top:12px;
}
.starting-gift-option .gift-icon{
font-size:3rem;
display:block;
margin-bottom:10px;
} .skill-tree-panel{
margin-top:35px;
padding:28px;
border-radius:20px;
background:
rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.1);
}
.skill-tree-options{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:20px;
margin-top:20px;
}
.skill-option{
padding:22px;
border-radius:18px;
cursor:pointer;
transition:.25s;
border:2px solid transparent;
}
.skill-option:hover{
transform:translateY(-5px);
}
.skill-option--force{
background:
rgba(220,70,70,.12);
border-color:
rgba(220,70,70,.28);
}
.skill-option--fortune{
background:
rgba(80,120,255,.12);
border-color:
rgba(80,120,255,.28);
}
.skill-option--fortitude{
background:
rgba(70,190,110,.12);
border-color:
rgba(70,190,110,.28);
} .gambling-panel{
margin-top:35px;
padding:32px;
border-radius:24px;
background:
linear-gradient(
180deg,
#191919,
#050505
);
border:2px solid rgba(255,210,90,.25);
box-shadow:
0 0 40px rgba(255,210,90,.08);
}
.gambling-reels{
display:flex;
justify-content:center;
gap:18px;
margin:30px 0;
}
.gambling-reel{
width:82px;
height:82px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:2.3rem;
background:#111;
border:2px solid rgba(255,255,255,.12);
}
.gamble-button{
padding:14px 34px;
font-size:1rem;
font-weight:700;
border-radius:999px;
background:#d6af4c;
color:#111;
cursor:pointer;
transition:.25s;
}
.gamble-button:hover{
transform:scale(1.05);
box-shadow:
0 0 24px rgba(214,175,76,.3);
}
.current-gift{
display:flex;
align-items:center;
gap:14px;
margin-top:18px;
padding:16px;
border-radius:14px;
background:
rgba(214,175,76,.08);
border:
1px solid rgba(214,175,76,.25);
}
.current-skills{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:18px;
}
.skill-chip{
padding:8px 14px;
border-radius:999px;
font-size:.75rem;
font-weight:700;
}
.skill-chip.force{
background:
rgba(220,70,70,.18);
}
.skill-chip.fortune{
background:
rgba(80,120,255,.18);
}
.skill-chip.fortitude{
background:
rgba(70,190,110,.18);
}
@media(max-width:850px){
.starting-gift-options,
.skill-tree-options{
grid-template-columns:1fr;
}
.gambling-reels{
gap:10px;
}
.gambling-reel{
width:60px;
height:60px;
font-size:1.8rem;
}
} .relic-shop-panel {
margin-top: 28px;
padding: 26px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 18px;
background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.055),
rgba(0, 0, 0, 0.32)
);
box-shadow:
0 22px 60px rgba(0, 0, 0, 0.25);
}
.relic-shop-panel[hidden] {
display: none;
}
.relic-shop-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.relic-shop-header h2 {
margin: 4px 0 8px;
}
.relic-shop-description {
max-width: 620px;
margin: 0;
opacity: 0.72;
line-height: 1.55;
} .bottle-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.bottle-option {
position: relative;
min-height: 150px;
}
.bottle-option[hidden] {
display: none;
}
.bottle-option[data-bottle="champagne"] {
border-color: rgba(232, 216, 160, 0.28);
background:
linear-gradient(
145deg,
rgba(232, 216, 160, 0.08),
rgba(255, 255, 255, 0.035)
);
}
.bottle-option[data-bottle="cognac"] {
border-color: rgba(191, 120, 61, 0.35);
background:
linear-gradient(
145deg,
rgba(191, 120, 61, 0.11),
rgba(255, 255, 255, 0.035)
);
}
.bottle-option[data-bottle="champagne"].is-selected {
border-color: rgba(245, 222, 145, 0.9);
box-shadow:
inset 0 0 24px rgba(235, 210, 120, 0.08);
}
.bottle-option[data-bottle="cognac"].is-selected {
border-color: rgba(220, 140, 75, 0.9);
box-shadow:
inset 0 0 24px rgba(195, 105, 45, 0.1);
} .bottle-unlock-card {
color: #d9c6ff;
border-color: rgba(173, 127, 255, 0.58);
background:
linear-gradient(
160deg,
rgba(126, 73, 215, 0.18),
rgba(0, 0, 0, 0.4)
);
box-shadow:
inset 0 0 34px rgba(142, 89, 225, 0.06);
}
.bottle-unlock-card::before {
opacity: 0.2;
background:
radial-gradient(
circle at top right,
rgba(198, 164, 255, 0.85),
transparent 52%
);
}
.bottle-unlock-card:hover {
border-color: rgba(207, 178, 255, 0.95);
box-shadow:
0 0 30px rgba(126, 73, 215, 0.16),
0 18px 44px rgba(0, 0, 0, 0.28);
}
.bottle-unlock-card .relic-shop-icon {
color: #e5d7ff;
border-color: rgba(207, 178, 255, 0.75);
background:
rgba(126, 73, 215, 0.15);
}
.bottle-unlock-card .relic-shop-cost {
color: rgba(235, 220, 255, 0.9);
} .bottle-unlock-badge {
color: #ddcaff;
border-color: rgba(207, 178, 255, 0.72);
background: rgba(126, 73, 215, 0.15);
}
.unlock-bottle-button {
color: #e4d3ff;
border-color: rgba(207, 178, 255, 0.7);
background: rgba(126, 73, 215, 0.13);
}
.unlock-bottle-button:hover:not(:disabled),
.unlock-bottle-button:focus-visible:not(:disabled) {
background: rgba(143, 88, 230, 0.27);
border-color: rgba(225, 207, 255, 0.95);
} .bottle-unlock-card:has(
.relic-shop-name
) {
isolation: isolate;
} .bottle-unlock-card .relic-shop-name {
color: #eee4ff;
}
.bottle-unlock-card .relic-shop-effect {
color: rgba(239, 229, 255, 0.76);
} .current-bottles-panel {
margin-top: 22px;
}
.current-bottles-panel h3 {
margin: 0 0 12px;
font-size: 0.84rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.72;
}
.current-bottles {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.unlocked-bottle-chip {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 14px;
border: 1px solid rgba(173, 127, 255, 0.34);
border-radius: 999px;
background:
linear-gradient(
135deg,
rgba(126, 73, 215, 0.12),
rgba(255, 255, 255, 0.035)
);
color: rgba(255, 255, 255, 0.9);
}
.unlocked-bottle-chip > span {
font-size: 1.2rem;
line-height: 1;
}
.unlocked-bottle-chip strong {
font-size: 0.82rem;
font-weight: 700;
} .relic-shop-options {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
.relic-shop-card {
min-width: 0;
} .bottle-unlock-card .relic-shop-name::after {
content: "New Playstyle";
display: block;
width: fit-content;
margin-top: 8px;
padding: 4px 8px;
border: 1px solid rgba(207, 178, 255, 0.4);
border-radius: 999px;
background: rgba(126, 73, 215, 0.1);
color: rgba(226, 208, 255, 0.82);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
} @media (max-width: 1100px) {
.relic-shop-options {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 850px) {
.bottle-options {
grid-template-columns: 1fr;
}
.relic-shop-options {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.unlocked-bottle-chip {
width: 100%;
justify-content: flex-start;
}
.bottle-option {
min-height: 0;
}
.bottle-unlock-card {
padding: 17px;
}
} @media (prefers-reduced-motion: reduce) {
.bottle-unlock-card,
.unlock-bottle-button {
transition: none;
}
} .relic-shop-wallet {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 130px;
padding: 14px 18px;
border: 1px solid rgba(230, 190, 70, 0.45);
border-radius: 14px;
background: rgba(230, 190, 70, 0.08);
text-align: center;
}
.relic-shop-wallet span {
font-size: 0.68rem;
letter-spacing: 0.09em;
text-transform: uppercase;
opacity: 0.68;
}
.relic-shop-wallet strong {
margin-top: 3px;
font-size: 1.7rem;
line-height: 1;
} .relic-shop-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
} .relic-shop-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 290px;
padding: 20px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 16px;
background:
linear-gradient(
160deg,
rgba(255, 255, 255, 0.07),
rgba(0, 0, 0, 0.34)
);
transition:
transform 0.22s ease,
border-color 0.22s ease,
box-shadow 0.22s ease,
opacity 0.22s ease;
}
.relic-shop-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.13;
background:
radial-gradient(
circle at top right,
currentColor,
transparent 50%
);
}
.relic-shop-card:hover {
transform: translateY(-4px);
}
.relic-shop-card.is-unaffordable {
opacity: 0.58;
}
.relic-shop-card.is-unaffordable:hover {
transform: none;
}
.relic-shop-card.is-owned {
opacity: 0.5;
} .relic-shop-card--common {
color: #d9d9d9;
border-color: rgba(210, 210, 210, 0.28);
}
.relic-shop-card--common:hover {
border-color: rgba(230, 230, 230, 0.68);
box-shadow:
0 14px 35px rgba(0, 0, 0, 0.26);
} .relic-shop-card--uncommon {
color: #6fd7a5;
border-color: rgba(90, 210, 155, 0.38);
background:
linear-gradient(
160deg,
rgba(54, 172, 121, 0.12),
rgba(0, 0, 0, 0.35)
);
}
.relic-shop-card--uncommon:hover {
border-color: rgba(100, 230, 170, 0.8);
box-shadow:
0 14px 38px rgba(45, 180, 120, 0.13),
0 18px 40px rgba(0, 0, 0, 0.24);
} .relic-shop-card--legendary {
color: #f1c85b;
border-color: rgba(238, 190, 55, 0.55);
background:
linear-gradient(
160deg,
rgba(216, 161, 28, 0.17),
rgba(0, 0, 0, 0.38)
);
box-shadow:
inset 0 0 30px rgba(218, 164, 35, 0.055);
}
.relic-shop-card--legendary::after {
content: "";
position: absolute;
top: -75%;
left: -120%;
width: 70%;
height: 260%;
pointer-events: none;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.13),
transparent
);
transform: rotate(25deg);
animation: legendary-relic-shine 5.5s ease-in-out infinite;
}
.relic-shop-card--legendary:hover {
border-color: rgba(255, 211, 80, 0.95);
box-shadow:
0 0 28px rgba(225, 170, 35, 0.15),
0 18px 45px rgba(0, 0, 0, 0.28);
}
@keyframes legendary-relic-shine {
0%,
65% {
left: -120%;
}
100% {
left: 160%;
}
} .relic-shop-card--cursed {
position: relative;
color: #ff7272;
border: 2px solid rgba(255,70,70,.45);
background:
linear-gradient(
160deg,
rgba(120,0,0,.35),
rgba(20,0,0,.9)
);
box-shadow:
inset 0 0 30px rgba(255,0,0,.08),
0 0 20px rgba(255,0,0,.08);
}
.relic-shop-card--cursed::before {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(
circle at center,
rgba(255,0,0,.18),
transparent 70%
);
animation:
cursedPulse 2.5s infinite;
}
@keyframes cursedPulse{
0%{
opacity:.2;
}
50%{
opacity:.65;
}
100%{
opacity:.2;
}
}
.cursed-badge{
display:inline-flex;
align-items:center;
padding:5px 10px;
margin-bottom:12px;
border-radius:999px;
font-size:.65rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:#ff9b9b;
border:1px solid rgba(255,80,80,.5);
background:rgba(255,0,0,.15);
}
.cursed-price-tier{
margin-top:8px;
font-size:.72rem;
font-weight:700;
opacity:.85;
}
.price-bargain{
color:#63ff84;
}
.price-cheap{
color:#8cffba;
}
.price-normal{
color:#ffffff;
}
.price-expensive{
color:#ffca6a;
}
.price-extortionate{
color:#ff5d5d;
}
.relic-shop-card--cursed:hover{
transform:
translateY(-6px)
scale(1.03);
box-shadow:
0 0 35px rgba(255,40,40,.18);
}
.owned-relic--cursed{
border:2px solid rgba(255,70,70,.4);
background:
linear-gradient(
145deg,
rgba(120,0,0,.18),
rgba(20,0,0,.65)
);
color:#ffb2b2;
}
.owned-relic--cursed::after{
content:"☠";
margin-left:auto;
font-size:1rem;
opacity:.85;
} .relic-shop-card-header {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
}
.relic-shop-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border: 1px solid currentColor;
border-radius: 14px;
background: rgba(0, 0, 0, 0.23);
font-size: 1.8rem;
line-height: 1;
} .relic-rarity {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 9px;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.09em;
line-height: 1;
text-transform: uppercase;
}
.relic-rarity--common {
color: #d8d8d8;
background: rgba(210, 210, 210, 0.08);
}
.relic-rarity--uncommon {
color: #6fd7a5;
background: rgba(70, 200, 140, 0.09);
}
.relic-rarity--legendary {
color: #f1c85b;
background: rgba(235, 180, 45, 0.1);
} .relic-shop-name {
position: relative;
z-index: 1;
margin: 0 0 10px;
color: inherit;
font-size: 1.18rem;
}
.relic-shop-effect {
position: relative;
z-index: 1;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.78);
font-size: 0.9rem;
line-height: 1.6;
} .relic-shop-purchase-row {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
margin-top: auto;
}
.relic-shop-cost {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.035em;
color: rgba(255, 255, 255, 0.82);
}
.buy-relic-button {
width: 100%;
min-height: 44px;
padding: 11px 14px;
border: 1px solid currentColor;
border-radius: 11px;
background: rgba(255, 255, 255, 0.065);
color: inherit;
font: inherit;
font-size: 0.84rem;
font-weight: 800;
cursor: pointer;
transition:
transform 0.18s ease,
background 0.18s ease,
opacity 0.18s ease;
}
.buy-relic-button:hover:not(:disabled),
.buy-relic-button:focus-visible:not(:disabled) {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.14);
}
.buy-relic-button:disabled {
cursor: not-allowed;
opacity: 0.5;
} .relic-shop-controls {
display: flex;
justify-content: flex-end;
margin-top: 22px;
}
.leave-shop-button {
min-height: 46px;
padding: 12px 22px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 12px;
background: rgba(255, 255, 255, 0.07);
color: inherit;
font: inherit;
font-size: 0.88rem;
font-weight: 800;
cursor: pointer;
transition:
transform 0.2s ease,
background 0.2s ease,
border-color 0.2s ease;
}
.leave-shop-button:hover,
.leave-shop-button:focus-visible {
transform: translateY(-2px);
border-color: rgba(230, 190, 70, 0.7);
background: rgba(230, 190, 70, 0.1);
} .empty-relic-shop-message {
grid-column: 1 / -1;
margin: 0;
padding: 28px;
border: 1px dashed rgba(255, 255, 255, 0.16);
border-radius: 14px;
text-align: center;
opacity: 0.62;
} .current-build-panel {
margin-top: 28px;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 17px;
background: rgba(255, 255, 255, 0.035);
}
.current-build-panel > h2 {
margin-top: 0;
}
.current-upgrades-panel,
.current-relics-panel {
margin-top: 22px;
}
.current-upgrades-panel h3,
.current-relics-panel h3 {
margin: 0 0 12px;
font-size: 0.84rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.72;
} .current-relics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.owned-relic {
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 105px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 13px;
background: rgba(0, 0, 0, 0.23);
}
.owned-relic-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 39px;
height: 39px;
border: 1px solid currentColor;
border-radius: 10px;
font-size: 1.25rem;
}
.owned-relic-content {
display: flex;
flex-direction: column;
min-width: 0;
}
.owned-relic-name {
color: inherit;
font-size: 0.88rem;
}
.owned-relic-rarity {
margin-top: 2px;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.68;
}
.owned-relic-description {
margin-top: 7px;
color: rgba(255, 255, 255, 0.66);
font-size: 0.72rem;
line-height: 1.42;
}
.owned-relic--common {
color: #d8d8d8;
border-color: rgba(210, 210, 210, 0.2);
}
.owned-relic--uncommon {
color: #6fd7a5;
border-color: rgba(80, 205, 145, 0.3);
background: rgba(50, 165, 115, 0.07);
}
.owned-relic--legendary {
color: #f1c85b;
border-color: rgba(230, 175, 40, 0.42);
background: rgba(220, 165, 35, 0.08);
box-shadow:
inset 0 0 18px rgba(230, 175, 40, 0.04);
} .no-relics-message,
.no-upgrades-message {
margin: 0;
opacity: 0.58;
} .temporary-bonus-display {
margin: 13px 0 0;
padding: 9px 11px;
border: 1px solid rgba(241, 200, 91, 0.38);
border-radius: 9px;
background: rgba(241, 200, 91, 0.08);
color: #f1c85b;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.4;
}
.temporary-bonus-display[hidden] {
display: none;
} .run-status-panel {
grid-template-columns:
repeat(6, minmax(0, 1fr));
} .buy-relic-button:focus-visible,
.leave-shop-button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
} @media (prefers-reduced-motion: reduce) {
.relic-shop-card,
.buy-relic-button,
.leave-shop-button {
transition: none;
}
.relic-shop-card--legendary::after {
animation: none;
display: none;
}
} .enemy-card,
.enemy-combat-phase {
--enemy-accent: rgba(255, 255, 255, 0.72);
--enemy-accent-soft: rgba(255, 255, 255, 0.08);
--enemy-accent-border: rgba(255, 255, 255, 0.18);
transition:
border-color 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease,
transform 0.3s ease;
}
.enemy-card {
position: relative;
overflow: hidden;
border-color: var(--enemy-accent-border);
background:
linear-gradient(
145deg,
var(--enemy-accent-soft),
rgba(0, 0, 0, 0.28)
);
}
.enemy-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at top right,
var(--enemy-accent-soft),
transparent 55%
);
}
.enemy-card > * {
position: relative;
z-index: 1;
}
.enemy-card .fighter-label {
color: var(--enemy-accent);
}
.enemy-card #enemy-name {
color: var(--enemy-accent);
}
.enemy-card .enemy-health-fill {
background:
linear-gradient(
90deg,
var(--enemy-accent),
rgba(255, 255, 255, 0.75)
);
}
.enemy-combat-phase {
border-color: var(--enemy-accent-border);
}
.enemy-combat-phase.is-active {
border-color: var(--enemy-accent);
background: var(--enemy-accent-soft);
box-shadow:
inset 0 0 24px var(--enemy-accent-soft);
}
.enemy-combat-slot {
border-color: var(--enemy-accent-border);
}
.enemy-combat-slot.is-set {
border-color: var(--enemy-accent);
} .enemy-card::after {
content: "Opponent";
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
padding: 5px 9px;
border: 1px solid var(--enemy-accent-border);
border-radius: 999px;
background: rgba(0, 0, 0, 0.34);
color: var(--enemy-accent);
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}  body.enemy-street-challenger .enemy-card,
body.enemy-street-challenger .enemy-combat-phase {
--enemy-accent: #d7d7d7;
--enemy-accent-soft: rgba(215, 215, 215, 0.07);
--enemy-accent-border: rgba(215, 215, 215, 0.26);
}
body.enemy-street-challenger .enemy-card::after {
content: "Balanced";
} body.enemy-bouncer .enemy-card,
body.enemy-bouncer .enemy-combat-phase {
--enemy-accent: #8eb8e8;
--enemy-accent-soft: rgba(88, 142, 205, 0.12);
--enemy-accent-border: rgba(120, 174, 235, 0.42);
}
body.enemy-bouncer .enemy-card::after {
content: "Defensive";
} body.enemy-bartender .enemy-card,
body.enemy-bartender .enemy-combat-phase {
--enemy-accent: #72d49d;
--enemy-accent-soft: rgba(70, 185, 120, 0.11);
--enemy-accent-border: rgba(95, 210, 145, 0.4);
}
body.enemy-bartender .enemy-card::after {
content: "Sustain";
} body.enemy-dj .enemy-card,
body.enemy-dj .enemy-combat-phase {
--enemy-accent: #bf8cff;
--enemy-accent-soft: rgba(146, 76, 225, 0.13);
--enemy-accent-border: rgba(180, 120, 245, 0.46);
}
body.enemy-dj .enemy-card::after {
content: "Volatile";
} body.enemy-promoter .enemy-card,
body.enemy-promoter .enemy-combat-phase {
--enemy-accent: #ef8b68;
--enemy-accent-soft: rgba(215, 90, 50, 0.13);
--enemy-accent-border: rgba(235, 115, 75, 0.46);
}
body.enemy-promoter .enemy-card::after {
content: "Aggressive";
} body.is-boss-battle .bottle-rpg-page {
background:
radial-gradient(
circle at 50% 18%,
rgba(185, 42, 42, 0.15),
transparent 34%
),
radial-gradient(
circle at top,
rgba(255, 255, 255, 0.06),
transparent 42%
),
#050505;
}
body.is-boss-battle .battle-arena {
position: relative;
}
body.is-boss-battle .battle-arena::before {
content: "Boss Battle";
position: absolute;
top: -14px;
left: 50%;
z-index: 5;
transform: translateX(-50%);
padding: 7px 16px;
border: 1px solid rgba(245, 190, 70, 0.68);
border-radius: 999px;
background: #080808;
color: #f1c85b;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
}
body.is-boss-battle .enemy-card {
transform: translateY(-3px);
border-width: 2px;
}
body.is-boss-battle .enemy-card::after {
content: "Boss";
}
body.is-boss-battle .enemy-card #enemy-name {
font-size: clamp(1.35rem, 3vw, 2.2rem);
}
body.is-boss-battle .enemy-combat-phase {
border-width: 2px;
}
body.is-boss-battle .versus-mark {
color: #f1c85b;
opacity: 0.9;
font-size: 1rem;
}
body.is-boss-battle .enemy-health-fill {
position: relative;
overflow: hidden;
}
body.is-boss-battle .enemy-health-fill::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.34),
transparent
);
animation: boss-health-shine 2.8s linear infinite;
}
@keyframes boss-health-shine {
from {
transform: translateX(-120%);
}
to {
transform: translateX(120%);
}
} body.enemy-club-owner .enemy-card,
body.enemy-club-owner .enemy-combat-phase {
--enemy-accent: #f1c85b;
--enemy-accent-soft: rgba(220, 165, 35, 0.14);
--enemy-accent-border: rgba(240, 195, 70, 0.62);
}
body.enemy-club-owner .enemy-card {
background:
linear-gradient(
145deg,
rgba(205, 150, 30, 0.16),
rgba(0, 0, 0, 0.42)
);
}
body.enemy-club-owner .enemy-card::after {
content: "Adaptive Boss";
} body.enemy-house-champion .enemy-card,
body.enemy-house-champion .enemy-combat-phase {
--enemy-accent: #e96b6b;
--enemy-accent-soft: rgba(195, 45, 45, 0.15);
--enemy-accent-border: rgba(230, 90, 90, 0.62);
}
body.enemy-house-champion .enemy-card {
background:
linear-gradient(
145deg,
rgba(185, 40, 40, 0.17),
rgba(0, 0, 0, 0.44)
);
}
body.enemy-house-champion .enemy-card::after {
content: "Combo Boss";
} body.is-boss-battle .enemy-card.is-low-health {
animation: boss-danger-pulse 1.25s ease-in-out infinite;
}
@keyframes boss-danger-pulse {
0%,
100% {
box-shadow:
0 0 0 rgba(230, 70, 70, 0);
}
50% {
box-shadow:
0 0 28px rgba(230, 70, 70, 0.18);
}
} .enemy-combat-phase.is-active .combat-spin-label,
.enemy-combat-phase.is-active h2 {
color: var(--enemy-accent);
}
.enemy-combat-phase.is-resolving {
animation: enemy-resolve-pulse 0.55s ease;
}
@keyframes enemy-resolve-pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.012);
border-color: var(--enemy-accent);
}
100% {
transform: scale(1);
}
} body.is-boss-battle .battle-result {
border-color: rgba(241, 200, 91, 0.34);
background: rgba(241, 200, 91, 0.06);
}
body.is-boss-battle #battle-result {
color: rgba(255, 240, 195, 0.92);
} body.is-boss-battle #battle-number {
color: #f1c85b;
}
body.is-boss-battle .run-status-item:first-child {
border-color: rgba(241, 200, 91, 0.52);
background: rgba(241, 200, 91, 0.09);
} @media (max-width: 760px) {
.enemy-card::after {
top: 10px;
right: 10px;
}
body.is-boss-battle .battle-arena::before {
top: -11px;
padding: 5px 12px;
font-size: 0.58rem;
}
body.is-boss-battle .enemy-card {
transform: none;
}
} @media (prefers-reduced-motion: reduce) {
body.is-boss-battle .enemy-health-fill::after,
body.is-boss-battle .enemy-card.is-low-health {
animation: none;
}
.enemy-card,
.enemy-combat-phase {
transition: none;
}
} @media (max-width: 1050px) {
.run-status-panel {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.current-relics {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 850px) {
.relic-shop-options {
grid-template-columns: 1fr;
}
.relic-shop-card {
min-height: 0;
}
.relic-shop-purchase-row {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
align-items: center;
}
.buy-relic-button {
width: auto;
min-width: 140px;
}
}
@media (max-width: 680px) {
.relic-shop-panel {
padding: 18px;
}
.relic-shop-header {
flex-direction: column;
}
.relic-shop-wallet {
width: 100%;
}
.current-relics {
grid-template-columns: 1fr;
}
.relic-shop-controls {
justify-content: stretch;
}
.leave-shop-button {
width: 100%;
}
}
@media (max-width: 520px) {
.run-status-panel {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.relic-shop-purchase-row {
display: flex;
}
.buy-relic-button {
width: 100%;
}
.owned-relic {
min-height: 0;
}
}