*{margin:0;padding:0;box-sizing:border-box}
:root{--gold:#c9a84c;--gold-light:#f0d080;--dark:#0e0a14;--dark2:#1a1225;--dark3:#251838;--accent:#7b2d8b;--accent2:#a03060;--cream:#f5ead8;--green:#2d6a4f}
body{background:var(--dark);font-family:'Lato',sans-serif;color:var(--cream);min-height:100vh;overflow-x:hidden}
header{background:linear-gradient(135deg,var(--dark2),var(--dark3));border-bottom:2px solid var(--gold);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 4px 30px rgba(201,168,76,.2)}
.logo{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--gold);letter-spacing:2px}
.logo span{font-style:italic;color:var(--gold-light)}
.hud{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hud-box{background:rgba(0,0,0,.4);border:1px solid var(--gold);border-radius:8px;padding:6px 14px;text-align:center}
.hud-label{font-size:.62rem;text-transform:uppercase;letter-spacing:1px;color:var(--gold);opacity:.7}
.hud-val{font-size:1.1rem;font-weight:700;color:var(--gold-light)}
main{display:grid;grid-template-columns:1fr 330px;height:calc(100vh - 65px)}
#floor{background:radial-gradient(ellipse at 50% 0%,rgba(123,45,139,.25),transparent 70%),linear-gradient(180deg,#1a0e2e,#0e0a14);position:relative;overflow:hidden;padding:20px;overflow-y:auto}
#floor::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 0,transparent 50%),repeating-linear-gradient(-45deg,rgba(201,168,76,.04) 0,rgba(201,168,76,.04) 1px,transparent 0,transparent 50%);background-size:40px 40px;pointer-events:none}
.chandeliers{display:flex;justify-content:space-around;margin-bottom:10px}
.chandelier{font-size:2rem;filter:drop-shadow(0 0 12px #f0d08088);animation:sway 4s ease-in-out infinite}
.chandelier:nth-child(2){animation-delay:1s}.chandelier:nth-child(3){animation-delay:2s}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
#tables-area{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.table-slot{background:rgba(30,15,50,.7);border:1px solid rgba(201,168,76,.3);border-radius:16px;padding:14px;min-height:195px;position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;transition:border-color .3s,box-shadow .3s}
.table-slot.has-customer{border-color:var(--gold);box-shadow:0 0 20px rgba(201,168,76,.2)}
.table-slot.ready{border-color:#4caf50;box-shadow:0 0 20px rgba(76,175,80,.3);animation:pg .8s infinite alternate}
@keyframes pg{from{box-shadow:0 0 10px rgba(76,175,80,.2)}to{box-shadow:0 0 25px rgba(76,175,80,.5)}}
.table-num{font-size:.62rem;text-transform:uppercase;letter-spacing:2px;color:var(--gold);opacity:.5}
.table-surface{width:90px;height:46px;background:linear-gradient(135deg,#4a2c1a,#3a1c0a);border-radius:8px;border:2px solid #6b3d20;box-shadow:0 4px 12px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.speech{background:white;color:#222;border-radius:12px;padding:7px 11px;font-size:.76rem;position:relative;text-align:center;max-width:138px;box-shadow:0 4px 15px rgba(0,0,0,.4);line-height:1.4}
.speech::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top-color:white;border-bottom:0}
.speech .emo{font-size:1rem;display:block;margin-bottom:2px}
.btn{border:none;border-radius:8px;padding:7px 14px;font-family:'Lato',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:1px}
.btn-take{background:linear-gradient(135deg,var(--accent),var(--accent2));color:white}
.btn-take:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(123,45,139,.5)}
.btn-serve{background:linear-gradient(135deg,#2d6a4f,#1b4332);color:white}
.btn-serve:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(45,106,79,.5)}
.btn-checkout{background:linear-gradient(135deg,#388e3c,#1b5e20);color:white}
.btn-checkout:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(56,142,60,.5)}
.empty-msg{color:rgba(255,255,255,.2);font-size:.72rem;text-align:center;margin-top:16px}
#sidebar{background:linear-gradient(180deg,var(--dark2),var(--dark));border-left:1px solid rgba(201,168,76,.3);display:flex;flex-direction:column;overflow:hidden}
.tabs{display:flex;border-bottom:1px solid rgba(201,168,76,.2)}
.tab{flex:1;padding:12px;text-align:center;cursor:pointer;font-size:.78rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.4);transition:all .2s;border:none;background:transparent}
.tab.active{color:var(--gold);border-bottom:2px solid var(--gold);background:rgba(201,168,76,.06)}
.tab-panel{display:none;flex:1;overflow-y:auto;flex-direction:column}
.tab-panel.active{display:flex}
.s-section{padding:16px;border-bottom:1px solid rgba(201,168,76,.12)}
.s-title{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--gold);margin-bottom:11px;display:flex;align-items:center;gap:7px}
.menu-item{background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.2);border-radius:10px;padding:9px 13px;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.menu-item.unlocked{border-color:rgba(76,175,80,.4);background:rgba(76,175,80,.06)}
.mi-left{display:flex;align-items:center;gap:9px}
.mi-icon{font-size:1.3rem}
.mi-name{font-size:.82rem;font-weight:700;color:var(--cream)}
.mi-cat{font-size:.67rem;color:rgba(255,255,255,.35)}
.mi-price{font-family:'Playfair Display',serif;font-size:.92rem;color:var(--gold-light);font-weight:700}
.upg-card{background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.25);border-radius:12px;padding:13px;margin-bottom:10px;transition:all .3s}
.upg-card.affordable{border-color:rgba(201,168,76,.6);box-shadow:0 0 12px rgba(201,168,76,.15)}
.upg-card.owned{border-color:rgba(76,175,80,.5);background:rgba(76,175,80,.08);opacity:.7}
.upg-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.upg-emoji{font-size:1.8rem}
.upg-name{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--cream);font-weight:700}
.upg-sub{font-size:.7rem;color:rgba(255,255,255,.4)}
.upg-desc{font-size:.73rem;color:rgba(255,255,255,.55);margin-bottom:10px;line-height:1.5}
.upg-footer{display:flex;align-items:center;justify-content:space-between}
.upg-cost{font-size:.82rem;color:var(--gold-light);font-weight:700}
.upg-cost.cant-afford{color:#e57373}
.btn-buy{border:none;border-radius:7px;padding:6px 14px;font-family:'Lato',sans-serif;font-size:.75rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .2s;background:linear-gradient(135deg,var(--gold),#a07830);color:#0e0a14}
.btn-buy:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px rgba(201,168,76,.4)}
.btn-buy:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-owned{background:rgba(76,175,80,.2);color:#4caf50;border:1px solid #4caf50;border-radius:7px;padding:6px 14px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.tier-badge{font-size:.65rem;padding:2px 8px;border-radius:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.tier-premium{background:rgba(160,48,96,.3);color:#e88;border:1px solid rgba(160,48,96,.5)}
.tier-budget{background:rgba(45,106,79,.3);color:#8d8;border:1px solid rgba(45,106,79,.5)}
#log-panel{flex:1;overflow-y:auto}
.log-inner{padding:14px;display:flex;flex-direction:column;gap:5px}
.log-item{background:rgba(255,255,255,.04);border-radius:8px;padding:7px 11px;font-size:.76rem;border-left:3px solid var(--gold);animation:fi .3s ease-out}
.log-item.tip{border-left-color:#4caf50;color:#a5d6b0}
.log-item.serve{border-left-color:#8888ff;color:#c0c0ff}
.log-item.arrive{border-left-color:var(--gold-light);color:var(--gold-light)}
.log-item.upg{border-left-color:#e88;color:#ffc0c0}
@keyframes fi{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.log-time{font-size:.62rem;color:rgba(255,255,255,.3);margin-right:5px}
#toast{position:fixed;bottom:28px;right:28px;z-index:999;background:linear-gradient(135deg,#1a1225,#251838);border:1px solid var(--gold);border-radius:12px;padding:13px 20px;font-size:.88rem;box-shadow:0 8px 30px rgba(0,0,0,.5);transform:translateX(130%);transition:transform .4s cubic-bezier(.175,.885,.32,1.275);max-width:270px}
#toast.show{transform:translateX(0)}
.coin-pop{position:fixed;pointer-events:none;font-size:1.2rem;animation:cf 1s ease-out forwards;z-index:50}
@keyframes cf{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(1.5)}}
.speed-btn{background:rgba(201,168,76,.15);border:1px solid var(--gold);color:var(--gold);border-radius:6px;padding:4px 10px;font-size:.72rem;cursor:pointer;transition:background .2s}
.speed-btn.active{background:rgba(201,168,76,.4)}
.capy-name{font-size:.72rem;color:var(--gold);font-weight:700}
.decor{position:absolute;font-size:1.4rem;opacity:.35}
#sidebar::-webkit-scrollbar,#log-panel::-webkit-scrollbar,.tab-panel::-webkit-scrollbar{width:4px}
#sidebar::-webkit-scrollbar-thumb,.tab-panel::-webkit-scrollbar-thumb,#log-panel::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}
#sidebar::-webkit-scrollbar-track,.tab-panel::-webkit-scrollbar-track,#log-panel::-webkit-scrollbar-track{background:transparent}
.timer-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:3px}
.timer-track{width:100%;height:6px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
.timer-fill{height:100%;border-radius:4px;transition:width 1s linear,background .5s}
.timer-label{font-size:.68rem;font-weight:700;letter-spacing:.5px}
.log-item.late{border-left-color:#f44336;color:#ffb3b3}
.log-item.upg{border-left-color:#e88;color:#ffc0c0}

#start-menu{position:fixed;inset:0;background:rgba(14,10,20,0.95);z-index:9999;display:flex;align-items:center;justify-content:center;text-align:center;backdrop-filter:blur(8px)}
.start-content{background:linear-gradient(135deg,var(--dark2),var(--dark3));padding:60px 80px;border-radius:24px;border:2px solid var(--gold);box-shadow:0 10px 50px rgba(201,168,76,.3)}
.btn-start{background:linear-gradient(135deg,var(--gold),#a07830);border:none;border-radius:12px;padding:16px 48px;font-family:'Lato',sans-serif;font-size:1.4rem;font-weight:700;color:#0e0a14;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:2px}
.btn-start:hover{transform:scale(1.05);box-shadow:0 10px 30px rgba(201,168,76,.4)}
#btn-leave{background:linear-gradient(135deg,#f44336,#d32f2f);color:white;border:none;border-radius:8px;padding:8px 16px;font-weight:700;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px rgba(244,67,54,.3)}
#btn-leave:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(244,67,54,.5)}

.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:900px;width:95%}
.hub-box-item{background:rgba(255,255,255,.05);border:2px solid rgba(201,168,76,.2);border-radius:24px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}
.hub-box-item.active:hover{transform:scale(1.05);border-color:var(--gold);box-shadow:0 0 40px rgba(201,168,76,.3);background:rgba(201,168,76,.1)}
.hub-box-item.locked{cursor:not-allowed;opacity:.5}
.hub-box-content{display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center}
.hub-box-img{width:140px;height:140px;border-radius:20px;object-fit:cover;box-shadow:0 8px 25px rgba(0,0,0,.3)}
.hub-box-label{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--gold-light);font-weight:700;letter-spacing:1px}
.hub-box-placeholder{width:140px;height:140px;background:rgba(255,255,255,.1);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:2px}

.gender-btn{border:none;border-radius:20px;padding:20px 40px;font-size:1.8rem;font-weight:700;cursor:pointer;transition:all .3s;font-family:'Lato',sans-serif;color:white;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.gender-btn.boy{background:linear-gradient(135deg,#2196f3,#0b7dda)}
.gender-btn.girl{background:linear-gradient(135deg,#e91e63,#c2185b)}
.gender-btn:hover{transform:scale(1.1);box-shadow:0 15px 40px rgba(0,0,0,.5)}

.leave-btn{position:fixed;top:30px;right:30px;background:linear-gradient(135deg,#f44336,#d32f2f);color:white;border:none;border-radius:12px;padding:12px 24px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s;z-index:12000;box-shadow:0 8px 25px rgba(244,67,54,.4)}
.leave-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(244,67,54,.6)}

.rod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:900px;padding:20px}
.rod-box{background:rgba(255,255,255,.03);border:2px solid rgba(255,255,255,.1);border-radius:24px;min-height:220px;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:15px}
.rod-box:hover{transform:scale(1.05) translateY(-5px);border-color:var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.rod-content{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.rod-visual{font-size:3.5rem;transition:transform .4s;line-height:1}
.rod-box:hover .rod-visual{transform:scale(1.1) rotate(-5deg)}
.rod-name{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--gold-light);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.fire-rod:hover{box-shadow:0 0 50px rgba(244,67,54,.4);border-color:#f44336;background:rgba(244,67,54,.1)}
.fire-rod .rod-visual{filter:drop-shadow(0 0 15px #f44336)}

.glitch-rod:hover{box-shadow:0 0 50px rgba(76,175,80,.4);border-color:#4caf50;background:rgba(76,175,80,.1)}
.glitch-rod .rod-visual{color:#4caf50;text-shadow:0 0 10px rgba(76,175,80,.8);font-family:monospace}
.glitch-rod::after{content:'';position:absolute;inset:0;background:rgba(76,175,80,.05);opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:inset 0 0 30px rgba(76,175,80,.3)}
.glitch-rod:hover::after{opacity:1}

.ice-rod:hover{box-shadow:0 0 50px rgba(33,150,243,.4);border-color:#2196f3;background:rgba(33,150,243,.1)}
.ice-rod .rod-visual{filter:drop-shadow(0 0 15px #2196f3)}

/* OTHER GAMES FONT */
#life-overlay, #fishing-overlay, #fishing-overlay *, #life-overlay * {
    font-family: 'Outfit', sans-serif !important;
}

/* EVENT DISPLAY */
#event-status {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: rgba(0,0,0,0.6);
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid var(--gold);
    color: var(--gold-light);
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    animation: pulse 2s infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.7; transform: scale(1); }
    to { opacity: 1; transform: scale(1.05); }
}

/* CODES OVERLAY */
#codes-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(20, 15, 30, 0.98);
    border: 2px solid var(--gold);
    padding: 30px;
    border-radius: 20px;
    z-index: 13000;
    box-shadow: 0 0 100px rgba(0,0,0,0.8);
    display: none;
    flex-direction: column;
    gap: 15px;
    min-width: 300px;
}

#codes-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--gold);
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 1.2rem;
    text-align: center;
    width: 100%;
}

.codes-btn {
    position: absolute;
    top: 30px;
    right: 140px; /* To the left of Leave button */
    background: rgba(0,0,0,0.4);
    padding: 12px 24px;
    border-radius: 12px;
    border: 1px solid #4caf50;
    color: #4caf50;
    font-weight: bold;
    cursor: pointer;
    z-index: 12000;
    transition: all 0.3s;
}

.codes-btn:hover {
    background: #4caf50;
    color: white;
}

/* FISHING BOX ENHANCEMENTS */
.fishing-box-special {
    background: linear-gradient(180deg, #ff7e5f, #feb47b) !important; /* Sunset gradient */
    position: relative;
    overflow: hidden;
}

.fishing-box-special::before {
    content: '🌊';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 200%;
    font-size: 2rem;
    opacity: 0.3;
    animation: ripple 8s linear infinite;
    white-space: nowrap;
    pointer-events: none;
}

.fishing-box-special:hover {
    box-shadow: 0 0 50px rgba(255, 126, 95, 0.5) !important;
}

.fishing-box-special:hover .hub-box-img {
    filter: sepia(0.3) saturate(1.5) brightness(1.1);
    transform: scale(1.1) translateY(-5px);
}

@keyframes ripple {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes sunset-glow {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.2) saturate(1.2); }
    100% { filter: brightness(1); }
}


/* FIGHT GAME STYLES */
#fight-overlay * {
    font-family: 'Outfit', sans-serif !important;
}

.fighter-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 300px;
}

.fighter-name {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 2px;
}

.health-bar-bg {
    width: 100%;
    height: 20px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.health-bar-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f44336, #ff1744);
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.5);
    transition: width 0.3s ease-out;
}

.health-text {
    font-size: 0.9rem;
    font-weight: bold;
    color: rgba(255,255,255,0.6);
}

.arena {
    perspective: 1000px;
}

.fighter {
    width: 280px;
    height: 280px;
    position: relative;
    transition: transform 0.2s;
}

.fighter-img {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    border: 3px solid rgba(255,255,255,0.1);
}

.ai-img-filter {
    filter: sepia(0.5) hue-rotate(300deg) brightness(0.8) contrast(1.2);
}

.ability-btn {
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(201,168,76,0.3);
    border-radius: 16px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.ability-btn:hover {
    background: rgba(201,168,76,0.15);
    border-color: var(--gold);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(201,168,76,0.2);
}

.ability-key {
    background: var(--gold);
    color: var(--dark);
    width: 35px;
    height: 35px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
}

.ability-info {
    text-align: left;
}

.ability-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--gold-light);
}

.ability-desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ability-cooldown {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(0,0,0,0.7);
    transition: height 0.1s linear;
    pointer-events: none;
}

.fighter.hit {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.fighter.attacking {
    animation: lunge 0.3s ease-out;
}

@keyframes lunge {
    0% { transform: translateX(0); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(0); }
}

.ai-fighter.attacking {
    animation: lunge-ai 0.3s ease-out;
}

@keyframes lunge-ai {
    0% { transform: scaleX(-1) translateX(0); }
    50% { transform: scaleX(-1) translateX(50px); }
    100% { transform: scaleX(-1) translateX(0); }
}

.fight-box-special {
    background: linear-gradient(135deg, #443366, #221144) !important;
}

.fight-box-special:hover {
    box-shadow: 0 0 50px rgba(123, 45, 139, 0.5) !important;
}