*{box-sizing:border-box;margin:0;padding:0}
:root{--gold:#d8a83a;--gold2:#f6d27a;--wood:#4b2a12;--wood2:#2a1609;--paper:#d8b56e;--ink:#2b1708;--storm:#6a55ff;--storm2:#32d4ff;--dark:#120906;--red:#7b1f16}
body{min-height:100vh;background:radial-gradient(circle at top,#392010 0,#120906 48%,#070302 100%);color:#f8e7bd;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
button,a{font-family:inherit}.landing-container{min-height:100vh}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:url('kocsma-bg.png') center/cover no-repeat;position:relative}.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle,rgba(34,14,5,.25),rgba(0,0,0,.82))}.hero-content{position:relative;z-index:2;width:min(760px,92vw);padding:34px}.fallback-logo,.brand{font-family:'Cinzel',serif;color:var(--gold2);text-shadow:3px 3px 0 #000,0 0 18px #000;font-size:44px;letter-spacing:2px}.hero-main-logo{max-width:420px;width:90%;filter:drop-shadow(0 8px 10px #000)}.hero-subtitle{margin:18px auto 28px;line-height:1.55;font-size:18px;color:#fff0c4;text-shadow:2px 2px 0 #000}.parchment-box,.sf-board,.sf-classic-container,.lb-wrapper{background:linear-gradient(rgba(89,46,17,.92),rgba(36,18,7,.96));border:4px solid var(--gold);border-radius:16px;box-shadow:inset 0 0 35px #000,0 12px 35px rgba(0,0,0,.75)}
.sf-btn,.hero-btn,.page-btn,.sf-btn-save{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(#ffe08a,#c9821e 55%,#7a3c10);color:#241006;border:3px solid #fff1a8;border-radius:12px;padding:12px 24px;font-weight:900;text-transform:uppercase;text-decoration:none;cursor:pointer;text-shadow:1px 1px 0 #ffd987;box-shadow:0 5px 0 #4e250b,0 0 18px rgba(255,188,48,.35);transition:.15s}.sf-btn.big{font-size:21px;padding:16px 32px}.sf-btn:hover,.page-btn:hover,.sf-btn-save:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.12)}
.game-container{height:100vh;display:flex;flex-direction:column}.topbar{height:96px;flex:0 0 auto;padding:10px 18px;background:linear-gradient(#3b1f0d,#160a04);border-bottom:4px solid var(--gold);box-shadow:0 7px 20px #000;display:flex;align-items:center;gap:22px}.brand{font-size:28px;white-space:nowrap}.icon-menu{display:flex;gap:9px;align-items:center;flex:1}.menu-btn{min-width:96px;height:70px;padding:8px 10px;background:linear-gradient(#6b3b18,#2c1608);border:3px solid #8b5b22;border-radius:12px;color:#f6d27a;cursor:pointer;text-transform:uppercase;font-weight:900;box-shadow:inset 0 0 12px #000,0 4px 0 #120803;transition:.15s}.menu-btn i{display:block;font-size:23px;margin-bottom:4px;color:#ffe08a;text-shadow:2px 2px 0 #000}.menu-btn span{font-size:12px}.menu-btn:hover,.menu-btn.active{border-color:#ffe08a;filter:brightness(1.15);transform:translateY(-2px)}.logout-btn{margin-left:auto;background:linear-gradient(#8f2a1e,#451009);border-color:#d66b45;color:#fff0d0}.game-area{flex:1;min-height:0;padding:18px;overflow:auto;background:radial-gradient(circle at center,#28120a 0,#080302 70%)}
/* VIHARFOGADÓ HELYSZÍN */
.sf-tavern-screen{position:relative;width:100%;height:calc(100vh - 132px);min-height:560px;border:5px solid #201006;border-radius:18px;background:url('kocsma-bg.png') center/cover no-repeat;box-shadow:inset 0 0 90px #000,0 0 0 4px var(--gold),0 12px 35px #000;overflow:hidden}.sf-tavern-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 55% 35%,transparent 0 45%,rgba(0,0,0,.45) 100%)}.sf-tavern-title{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:3;font-family:'Cinzel',serif;font-size:34px;font-weight:900;color:#ffe08a;text-shadow:3px 3px 0 #000,0 0 12px #000;background:rgba(41,18,7,.72);border:3px solid var(--gold);border-radius:12px;padding:8px 24px}.hotspot{position:absolute;z-index:5;cursor:pointer;border-radius:18px;transition:.15s}.hotspot:hover{background:rgba(255,223,120,.08);box-shadow:0 0 24px #ffe08a,inset 0 0 30px rgba(255,232,150,.12);transform:scale(1.02)}.tavernkeeper-hotspot{left:27%;top:20%;width:14%;height:28%}.questmaster-hotspot{left:63%;top:23%;width:14%;height:42%}.questboard-hotspot{left:40%;top:15%;width:22%;height:46%}.npc-label{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(#5b2f12,#211006);border:2px solid var(--gold);border-radius:10px;padding:6px 12px;color:#ffe08a;font-weight:900;text-shadow:2px 2px #000;opacity:0;transition:.15s}.hotspot:hover .npc-label{opacity:1;bottom:-24px}.sf-energy-container{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;width:min(520px,82%)}.sf-energy-bar-wrap{height:30px;background:#110704;border:3px solid var(--gold);border-radius:16px;overflow:hidden;box-shadow:inset 0 0 12px #000}.sf-energy-bar-fill{height:100%;background:linear-gradient(90deg,#7228ff,#34d7ff);box-shadow:0 0 15px var(--storm2);transition:.3s}.sf-energy-bar-text{position:absolute;inset:0;text-align:center;line-height:30px;font-weight:900;color:white;text-shadow:2px 2px 0 #000}
/* POPUP, KÜLDETÉSEK */
.sf-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:999;opacity:0;pointer-events:none;transition:.2s;padding:18px}.sf-popup-overlay.active{opacity:1;pointer-events:auto}.sf-board{width:min(720px,96vw);padding:22px;color:#fff0c4}.sf-giver{background:rgba(24,9,2,.75);border:2px solid #8b5b22;border-left:8px solid var(--gold);border-radius:12px;padding:14px;margin-bottom:16px}.sf-giver-title,.sf-quest-title{font-family:'Cinzel',serif;color:#ffe08a;text-shadow:2px 2px 0 #000;font-weight:900}.sf-tabs{display:flex;gap:10px;margin-bottom:14px}.sf-tab{flex:1;text-align:center;background:linear-gradient(#5b2c10,#1d0d05);border:2px solid #8b5b22;border-radius:10px;padding:12px;cursor:pointer;color:#d8b56e;font-weight:900}.sf-tab.active,.sf-tab:hover{border-color:#ffe08a;color:#fff}.sf-content{background:rgba(0,0,0,.35);border:2px solid #7b4b18;border-radius:12px;padding:18px}.sf-details-row{display:flex;gap:12px;margin:16px 0}.sf-reward-box,.sf-req-box{flex:1;background:#1b0b05;border:2px solid #6b3b18;border-radius:12px;padding:14px;text-align:center}.sf-reward-label{font-size:12px;color:#d8b56e;font-weight:900}.sf-reward-value,.sf-req-value{font-size:22px;color:#ffe08a;font-weight:900}.sf-close-popup-btn,.sf-btn-cancel{width:100%;margin-top:14px;background:linear-gradient(#803125,#45100a);color:#fff0d0;border:2px solid #d66b45;border-radius:10px;padding:12px;font-weight:900;cursor:pointer;text-transform:uppercase}
/* PROFIL */
.sf-classic-container{display:flex;gap:18px;max-width:980px;margin:0 auto;padding:18px}.sf-classic-left{flex:1.15}.sf-classic-right{flex:.9}.sf-profile-banner{height:140px;background:center/cover;border:3px solid #2b1607;border-radius:12px;margin-bottom:14px;position:relative;box-shadow:inset 0 0 30px #000}.sf-char-top{display:flex;justify-content:center;gap:14px;background:rgba(0,0,0,.25);border:2px solid #8b5b22;border-radius:12px;padding:14px}.sf-col{display:flex;flex-direction:column;gap:8px}.sf-slot{width:52px;height:52px;background:#1b0b05;border:2px solid #7b4b18;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#d8b56e;font-size:22px;box-shadow:inset 0 0 13px #000}.sf-slot.has-item{border-color:var(--gold);color:#fff;background:radial-gradient(circle,#6a4b18,#1b0b05)}.sf-avatar-section{text-align:center;flex:1}.sf-avatar-img{position:relative;width:160px;height:160px;margin:0 auto 8px;background:#130803;border:3px solid var(--gold);border-radius:14px;overflow:hidden}.sf-char-layers{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden}.char-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.char-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:60px;color:#fff}.sf-edit-btn{position:absolute;right:6px;top:6px;z-index:5;background:#4b2a12;color:#ffe08a;border:2px solid var(--gold);border-radius:8px;padding:8px;cursor:pointer}.sf-name{font-family:'Cinzel',serif;font-size:22px;color:#fff;text-shadow:2px 2px #000}.sf-guild{font-size:13px;color:#e2c777}.sf-level-container{position:relative;margin-top:8px}.sf-level-bar,.fn-progress-bg{height:24px;background:#110704;border:2px solid #8b5b22;border-radius:14px;overflow:hidden}.sf-level-fill,#quest-progress-fill{height:100%;background:linear-gradient(90deg,#7a34ff,#26d9ff)}.sf-level-text{position:absolute;inset:0;text-align:center;line-height:24px;font-weight:900;text-shadow:2px 2px #000}.sf-stats-section{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.sf-stat-row{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.35);border:2px solid #7b4b18;border-radius:10px;padding:10px;margin-bottom:8px}.sf-stat-label{flex:1;font-weight:900;color:#e8c16a}.sf-stat-val{font-size:20px;font-weight:900}.sf-stat-plus{width:24px;height:24px;background:#2b1607;border:2px solid var(--gold);border-radius:50%;text-align:center;color:#ffe08a;font-weight:900}.sf-inventory{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;background:rgba(0,0,0,.25);border:2px solid #8b5b22;border-radius:12px;padding:12px}.sf-log-box{margin-top:12px;background:#160904;border:2px solid #7b4b18;border-radius:12px;padding:14px;min-height:150px;color:#d8b56e;font-family:monospace}.sf-log-line{margin-bottom:5px}.lb-wrapper{max-width:900px;margin:0 auto;padding:22px}.lb-maintitle{text-align:center;font-family:'Cinzel',serif;color:#ffe08a}.lb-list{display:flex;flex-direction:column;gap:12px;margin-top:18px}.lb-row{background:#1a0b05;border:2px solid #8b5b22;border-radius:12px;cursor:pointer}.lb-content{display:flex;align-items:center;gap:14px;padding:12px}.lb-rank,.lb-points{color:#ffe08a;font-weight:900}.lb-avatar-container{width:54px;height:54px;border-radius:50%;overflow:hidden}.lb-name{flex:1;font-weight:900}.pagination-controls{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:18px}.page-info{font-weight:900;color:#ffe08a}
#toast-notification{visibility:hidden;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10000;background:#1b0b05;border:3px solid var(--gold);border-radius:12px;padding:14px 20px;color:#fff;font-weight:900;box-shadow:0 0 22px #000;opacity:0;transition:.2s}#toast-notification.show{visibility:visible;opacity:1;bottom:34px}.sf-modal-container{width:min(760px,96vw);background:linear-gradient(#5b2f12,#1b0b05);border:4px solid var(--gold);border-radius:16px;padding:20px}.sf-modal-title{text-align:center;color:#ffe08a;font-family:'Cinzel',serif}.sf-modal-body{display:flex;gap:18px;margin:18px 0}.sf-modal-left,.sf-modal-right{flex:1}.sf-modal-preview-box{height:220px;border:2px solid #8b5b22;border-radius:12px;background:#130803;display:flex;align-items:center;justify-content:center;overflow:hidden}.sf-input-group{margin-bottom:14px}.sf-input-label{display:block;margin-bottom:6px;color:#ffe08a;font-weight:900}.sf-custom-input{width:100%;padding:10px;background:#160904;border:2px solid #8b5b22;border-radius:8px;color:#fff}.sf-input-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.sf-modal-footer{display:flex;gap:12px}.sf-btn-save,.sf-btn-cancel{flex:1;margin:0}
@media(max-width:850px){body{overflow:auto}.topbar{height:auto;display:block;padding:10px}.brand{text-align:center;margin-bottom:8px}.icon-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.menu-btn{min-width:0;width:100%;height:64px}.game-area{padding:10px}.sf-tavern-screen{height:62vh;min-height:390px;background-size:cover}.sf-tavern-title{font-size:22px}.sf-classic-container{flex-direction:column}.sf-details-row,.sf-modal-body{flex-direction:column}.sf-stat-section{grid-template-columns:1fr}.tavernkeeper-hotspot{left:25%;top:18%;width:18%;height:28%}.questboard-hotspot{left:38%;top:13%;width:26%;height:44%}.questmaster-hotspot{left:63%;top:22%;width:17%;height:44%}}
@media(max-width:520px){.icon-menu{grid-template-columns:repeat(2,1fr)}.sf-char-top{gap:6px;padding:8px}.sf-slot{width:40px;height:40px;font-size:17px}.sf-avatar-img{width:128px;height:128px}.sf-inventory{grid-template-columns:repeat(5,1fr)}.sf-stats-section{grid-template-columns:1fr}.sf-tavern-screen{min-height:330px}.npc-label{display:none}}

/* =========================================
   📱 TELEFONOS OPTIMALIZÁLÁS - JAVÍTOTT
   ========================================= */
@media (max-width: 850px) {
  html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  .game-container {
    min-height: 100svh;
    height: auto;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: calc(8px + env(safe-area-inset-top)) 8px 8px;
    border-bottom-width: 3px;
  }

  .brand {
    font-size: 22px;
    line-height: 1;
    padding: 4px 0 8px;
  }

  .icon-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .menu-btn {
    height: 58px;
    padding: 6px 4px;
    border-width: 2px;
    border-radius: 10px;
    box-shadow: inset 0 0 10px #000, 0 3px 0 #120803;
  }

  .menu-btn i {
    font-size: 20px;
    margin-bottom: 3px;
  }

  .menu-btn span {
    font-size: 10px;
    line-height: 1.05;
  }

  .game-area {
    padding: 8px;
    min-height: calc(100svh - 150px);
    overflow: visible;
  }

  .sf-tavern-screen {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 2 / 1;
    max-height: none;
    background-size: cover;
    background-position: center;
    border-width: 3px;
    border-radius: 12px;
  }

  .sf-tavern-title {
    top: 8px;
    font-size: 18px;
    padding: 5px 12px;
    border-width: 2px;
    max-width: 92%;
    white-space: nowrap;
  }

  .sf-energy-container {
    bottom: 8px;
    width: 86%;
  }

  .sf-energy-bar-wrap {
    height: 24px;
    border-width: 2px;
  }

  .sf-energy-bar-text {
    line-height: 24px;
    font-size: 12px;
  }

  .tavernkeeper-hotspot { left: 25%; top: 17%; width: 17%; height: 31%; }
  .questboard-hotspot { left: 38%; top: 12%; width: 26%; height: 47%; }
  .questmaster-hotspot { left: 62%; top: 19%; width: 18%; height: 48%; }

  .sf-classic-container,
  .lb-wrapper,
  .sf-board,
  .sf-modal-container {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    border-width: 3px;
    border-radius: 12px;
  }

  .sf-classic-container {
    flex-direction: column;
    gap: 12px;
  }

  .sf-profile-banner {
    height: 95px;
    margin-bottom: 10px;
  }

  .sf-char-top {
    gap: 8px;
    padding: 10px;
    align-items: flex-start;
  }

  .sf-col {
    gap: 6px;
  }

  .sf-slot {
    width: 40px;
    height: 40px;
    font-size: 17px;
    border-radius: 7px;
  }

  .sf-avatar-img {
    width: 124px;
    height: 124px;
  }

  .sf-name {
    font-size: 18px;
    line-height: 1.1;
  }

  .sf-guild {
    font-size: 11px;
  }

  .sf-stats-section {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .sf-stat-row {
    padding: 8px;
    margin-bottom: 6px;
  }

  .sf-stat-label {
    font-size: 12px;
  }

  .sf-stat-val {
    font-size: 17px;
  }

  .sf-inventory {
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    padding: 9px;
  }

  .sf-log-box {
    min-height: 100px;
    font-size: 12px;
    padding: 10px;
  }

  .sf-popup-overlay {
    align-items: flex-start;
    padding: calc(12px + env(safe-area-inset-top)) 8px 12px;
    overflow-y: auto;
  }

  .sf-tabs {
    gap: 6px;
  }

  .sf-tab {
    padding: 9px 5px;
    font-size: 12px;
  }

  .sf-content {
    padding: 12px;
  }

  .sf-quest-title {
    font-size: 18px;
  }

  .sf-details-row,
  .sf-modal-body,
  .sf-modal-footer {
    flex-direction: column;
  }

  .sf-modal-preview-box {
    height: 170px;
  }

  .sf-input-row {
    grid-template-columns: 1fr;
  }

  .lb-content {
    gap: 8px;
    padding: 9px;
  }

  .lb-avatar-container {
    width: 42px;
    height: 42px;
  }

  .lb-name {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lb-points,
  .lb-rank {
    font-size: 14px;
  }

  .pagination-controls {
    flex-direction: column;
    gap: 8px;
  }

  .page-btn {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .icon-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-btn {
    height: 54px;
  }

  .sf-tavern-screen {
    aspect-ratio: 16 / 9;
    background-position: center top;
  }

  .sf-tavern-title {
    font-size: 15px;
  }

  .sf-char-top {
    display: grid;
    grid-template-columns: 42px 1fr 42px;
  }

  .sf-slot {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .sf-avatar-img {
    width: 110px;
    height: 110px;
  }

  .sf-inventory {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero-content {
    width: 94vw;
    padding: 20px 14px;
  }

  .fallback-logo {
    font-size: 30px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .sf-btn.big {
    width: 100%;
    font-size: 16px;
    padding: 13px 10px;
  }
}

@media (max-width: 850px) and (orientation: landscape) {
  .topbar {
    display: flex;
    gap: 10px;
  }

  .brand {
    width: 140px;
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-menu {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    flex: 1;
  }

  .menu-btn {
    height: 48px;
  }

  .menu-btn i {
    font-size: 17px;
    margin-bottom: 1px;
  }

  .menu-btn span {
    font-size: 9px;
  }

  .game-area {
    min-height: calc(100svh - 70px);
  }

  .sf-tavern-screen {
    height: calc(100svh - 88px);
    aspect-ratio: auto;
  }
}

/* =========================================================
   FINAL CLASSIC FANTASY RPG POLISH - saját Shakes-hangulat
   ========================================================= */
:root{
  --sf-blue:#07192b;
  --sf-blue2:#0f2d46;
  --sf-bronze:#9f6b24;
  --sf-gold:#f5c85b;
  --sf-gold-light:#ffe7a0;
  --sf-brown:#3b1d0a;
  --sf-brown-dark:#160804;
  --sf-red:#6f1912;
  --sf-green:#59b83f;
}

body{
  background:
    radial-gradient(circle at 50% 0%, rgba(60,31,9,.9), rgba(10,4,2,1) 65%),
    #090402 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  color:#f9e3ad;
}

/* felső ikonmenü - festett, játékos gombok */
.topbar{
  height:104px !important;
  background:
    linear-gradient(180deg, #4e2a0e 0%, #1b0b04 100%) !important;
  border-bottom:5px solid var(--sf-bronze) !important;
  box-shadow:0 8px 0 #070200, 0 18px 30px rgba(0,0,0,.75) !important;
}
.brand{
  color:var(--sf-gold-light) !important;
  font-size:30px !important;
  text-shadow:3px 3px 0 #000, 0 0 10px #7a3c12 !important;
}
.menu-btn{
  background:
    radial-gradient(circle at 50% 15%, #7a461b 0%, #3a1b08 55%, #170804 100%) !important;
  border:3px solid #744715 !important;
  color:#ffe6a1 !important;
  border-radius:14px !important;
  box-shadow:
    inset 0 0 16px rgba(0,0,0,.85),
    inset 0 2px 0 rgba(255,255,255,.16),
    0 5px 0 #0c0301 !important;
}
.menu-btn:hover,
.menu-btn.active{
  border-color:var(--sf-gold-light) !important;
  color:#fff6cf !important;
  box-shadow:
    inset 0 0 16px rgba(0,0,0,.8),
    0 0 18px rgba(245,200,91,.55),
    0 5px 0 #0c0301 !important;
}
.menu-btn i{ color:var(--sf-gold-light) !important; }

.game-area{
  background:
    radial-gradient(circle at 50% 20%, rgba(75,41,13,.55), rgba(5,2,1,.96) 70%) !important;
}

/* nagy helyszín: illusztráció központban */
.sf-tavern-screen{
  max-width:1280px;
  margin:0 auto;
  border-radius:10px !important;
  border:6px solid #1b0b03 !important;
  outline:4px solid var(--sf-bronze);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.9),
    0 0 0 2px #f1c75b,
    0 16px 35px rgba(0,0,0,.8) !important;
}
.sf-tavern-title{
  background:linear-gradient(#704015,#281105) !important;
  border:3px solid var(--sf-gold) !important;
  border-radius:8px !important;
  color:#ffe9a6 !important;
  letter-spacing:1px;
}
.hotspot:hover{
  background:rgba(255,210,92,.10) !important;
  box-shadow:0 0 30px rgba(255,226,128,.9), inset 0 0 35px rgba(255,226,128,.18) !important;
}
.npc-label{
  background:linear-gradient(#6f3d13,#211006) !important;
  border:2px solid var(--sf-gold) !important;
  color:#ffe9a6 !important;
}

/* táblák / modalok */
.parchment-box,
.sf-board,
.sf-classic-container,
.lb-wrapper,
.sf-modal-container{
  background:
    linear-gradient(180deg, rgba(95,53,18,.96), rgba(35,15,5,.98)) !important;
  border:5px solid #1b0b03 !important;
  outline:3px solid var(--sf-bronze);
  border-radius:10px !important;
  box-shadow:
    inset 0 0 35px rgba(0,0,0,.85),
    0 10px 25px rgba(0,0,0,.75) !important;
}
.sf-giver,
.sf-content,
.sf-log-box,
.sf-stats-section,
.sf-classic-right,
.sf-char-top{
  background:rgba(9,4,2,.55) !important;
  border:2px solid #7b4b18 !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.75) !important;
}
.sf-giver-title,
.sf-quest-title,
.sf-bp-header,
.lb-maintitle,
.sf-modal-title{
  color:#ffe08a !important;
  text-shadow:3px 3px 0 #000 !important;
}
.sf-tab{
  background:linear-gradient(#6a3a12,#1f0c04) !important;
  color:#e6bd64 !important;
  border:2px solid #7a4d18 !important;
}
.sf-tab.active,
.sf-tab:hover{
  color:#fff4c8 !important;
  border-color:#ffe08a !important;
}
.sf-btn,
.hero-btn,
.page-btn,
.sf-btn-save{
  background:linear-gradient(#fff1a8 0%, #f0bd45 35%, #a95e16 72%, #5b2608 100%) !important;
  color:#2a1004 !important;
  border:3px solid #fff4c8 !important;
  border-radius:10px !important;
  box-shadow:0 5px 0 #3a1503, inset 0 0 10px rgba(255,255,255,.25) !important;
}

/* karakterlap - klasszikusabb kék/barnás panel */
.sf-classic-container{
  max-width:1040px !important;
  background:
    linear-gradient(180deg, #0a2034 0%, #06121f 100%) !important;
  outline:4px solid var(--sf-bronze) !important;
}
.sf-profile-banner{
  border:3px solid #0a0502 !important;
  outline:2px solid var(--sf-bronze);
}
.sf-slot{
  background:linear-gradient(#102b43,#06121f) !important;
  border:2px solid #395a73 !important;
  border-radius:4px !important;
  color:#caa65a !important;
}
.sf-slot:hover,
.sf-slot.has-item{
  border-color:#f5c85b !important;
  box-shadow:0 0 12px rgba(245,200,91,.5), inset 0 0 12px #000 !important;
}
.sf-avatar-img{
  border:3px solid #111 !important;
  outline:3px solid var(--sf-bronze);
  background:#091726 !important;
}
.sf-name{
  color:#fff !important;
  text-shadow:2px 2px 0 #000 !important;
}
.sf-guild{ color:#d6c28b !important; }
.sf-level-bar{
  background:#050b05 !important;
  border:2px solid #10220d !important;
}
.sf-level-fill{
  background:linear-gradient(#8ee46e,#2f8e28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.sf-stat-row{
  background:linear-gradient(#102b43,#06121f) !important;
  border:1px solid #395a73 !important;
}
.sf-stat-label{ color:#d6c28b !important; }
.sf-stat-val{ color:#ffe08a !important; }

/* ranglista */
.lb-wrapper{
  max-width:980px;
  margin:0 auto;
}
.lb-row{
  background-color:#102b43 !important;
  border-color:#8d6325 !important;
}
.lb-row:hover{ border-color:#ffe08a !important; }
.lb-points,.lb-rank{ color:#ffe08a !important; }

/* mobil: nagy menü marad használható */
@media (max-width: 768px){
  body{overflow-y:auto !important;}
  .game-container{height:auto;min-height:100vh;}
  .topbar{
    height:auto !important;
    display:block !important;
    padding:calc(10px + env(safe-area-inset-top)) 8px 10px !important;
  }
  .brand{
    display:block;
    text-align:center;
    margin-bottom:10px;
    font-size:24px !important;
  }
  .icon-menu{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:7px !important;
  }
  .menu-btn{
    min-width:0 !important;
    width:100% !important;
    height:62px !important;
    padding:6px 3px !important;
  }
  .menu-btn i{font-size:20px !important;margin-bottom:3px !important;}
  .menu-btn span{font-size:10px !important;}
  .logout-btn{margin-left:0 !important;}
  .game-area{padding:10px !important;}
  .sf-tavern-screen{
    height:calc(100vh - 160px) !important;
    min-height:430px !important;
    background-size:cover !important;
    background-position:center center !important;
  }
  .sf-tavern-title{
    top:10px !important;
    font-size:20px !important;
    padding:6px 14px !important;
  }
  .tavernkeeper-hotspot{left:20%;top:18%;width:22%;height:33%;}
  .questboard-hotspot{left:38%;top:14%;width:28%;height:48%;}
  .questmaster-hotspot{left:63%;top:20%;width:25%;height:50%;}
  .npc-label{font-size:12px;bottom:-25px;}
  .sf-energy-container{bottom:12px;width:92%;}
  .sf-energy-bar-wrap{height:28px;}
  .sf-energy-bar-text{font-size:12px;line-height:28px;}
  .sf-classic-container{display:block !important;padding:12px !important;}
  .sf-classic-right{margin-top:12px;}
  .sf-char-top{gap:6px !important;padding:8px !important;}
  .sf-slot{width:38px !important;height:38px !important;font-size:17px !important;}
  .sf-avatar-img{width:118px !important;height:118px !important;}
  .sf-name{font-size:18px !important;}
  .sf-popup-overlay{align-items:flex-start !important;overflow:auto !important;padding-top:calc(14px + env(safe-area-inset-top)) !important;}
}

@media (max-width: 420px){
  .icon-menu{grid-template-columns:repeat(2,1fr) !important;}
  .sf-tavern-screen{height:500px !important;}
  .sf-details-row{flex-direction:column !important;}
}

/* =========================================
   ⚡ "VIHARFOGADÓ" - ÚJ KLASSZIKUS FA STÍLUS
   ========================================= */

/* Fő háttérszín: nagyon sötét, meleg barna (fa) */
body { 
    background-color: #120a06 !important; 
}

/* Általános konténerek (Profil, stb.) faragott fa és bőr hatással */
.sf-classic-container {
    background: linear-gradient(rgba(26, 15, 10, 0.85), rgba(26, 15, 10, 0.95)) !important; /* Fa/bőr sötétítés */
    border: 3px solid #54311c !important; /* Középbarna fa keret */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.8) !important;
}

/* A Fogadó háttérképének beállítása (a feltöltött képedre) */
.sf-tavern-screen {
    background: url('/tavern-bg.png') center/cover no-repeat !important;
    border: 4px solid #3e2211 !important;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.9), 0 10px 30px rgba(0,0,0,0.9) !important;
}

/* A menüsáv (Topbar/Sidebar) átalakítása masszív fa gerendává */
.topbar, .sidebar {
    background: linear-gradient(to bottom, #2b170c, #140a05) !important;
    border-bottom: 3px solid #d4af37 !important; /* Arany/Sárgaréz szegély */
    border-right: 3px solid #d4af37 !important;
    box-shadow: inset -5px 0 20px rgba(0,0,0,0.9), 0 5px 20px rgba(0,0,0,0.9) !important;
}

/* Gombok - Faragott fa, arany/pergamen szöveggel */
.menu-btn {
    background: linear-gradient(to bottom, #4a2816 0%, #2b170c 100%) !important;
    border: 2px solid #140a05 !important;
    color: #e8d5a5 !important; /* Pergamen színű szöveg */
    box-shadow: inset 0 0 0 2px #7a4a2b, inset 0 2px 3px rgba(255,255,255,0.1), 0 4px 5px rgba(0,0,0,0.8) !important;
    text-shadow: 2px 2px 3px #000 !important;
    font-family: 'Cinzel', serif !important; /* Lecseréljük a menü betűtípusát a klasszikusra */
    font-weight: 900 !important;
}

/* Gomb Hover (Világosabb fa) */
.menu-btn:hover {
    background: linear-gradient(to bottom, #5c331d 0%, #3d2112 100%) !important;
    box-shadow: inset 0 0 0 2px #9c6038, inset 0 2px 3px rgba(255,255,255,0.2), 0 4px 5px rgba(0,0,0,0.8) !important;
    color: #fff !important;
}

/* Gomb Aktív - Lenyomott állapot, VILLÁMKÉK izzással a kinti viharra reflektálva */
.menu-btn.active {
    background: linear-gradient(to bottom, #140a05 0%, #24130a 100%) !important;
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.9), inset 0 0 0 1px #4a90e2 !important;
    color: #4a90e2 !important; /* Villámkék szöveg */
    text-shadow: 0 0 8px rgba(74, 144, 226, 0.8) !important;
}

/* Kalandvágy sáv hozzáigazítása a meleg fényekhez és fához */
.sf-energy-bar-wrap {
    border: 3px solid #2b170c !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2), inset 0 0 15px rgba(0,0,0,0.9) !important;
}

.sf-tavern-title {
    background: rgba(20, 10, 5, 0.8) !important;
    border-color: #d4af37 !important;
    color: #e8d5a5 !important;
}

/* =========================================
   ⬅️ S&F BAL OLDALI MENÜ ÉS KŐGOMBOK
   ========================================= */

/* A teljes képernyő átalakítása: Balra a menü, jobbra a játék */
.game-container {
    display: flex !important;
    flex-direction: row !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
}

/* A menüsáv (korábbi topbar) balra rögzítése */
.topbar {
    width: 280px !important;
    min-width: 280px !important;
    height: 100% !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    background: #010a14 !important; /* Nagyon sötét háttér a menü mögé */
    border-right: 3px solid #ff00ea !important;
    box-shadow: 5px 0 25px rgba(255, 0, 234, 0.2) !important;
    padding: 20px 15px !important;
    z-index: 100;
}

/* A logó igazítása a bal oldali sávban */
.brand {
    font-size: 28px !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 30px !important;
    color: #00ffcc !important;
    text-shadow: 0 0 15px rgba(0, 255, 204, 0.8) !important;
}

.icon-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
}

/* A fő játéktér (kocsma, profil, stb.) a jobb oldalon */
#main-area {
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    position: relative !important;
}

/* -----------------------------------------
   🛡️ AZ ÚJ KÉPES GOMBOK (image_709543.jpg)
   ----------------------------------------- */
.menu-btn {
    /* A te képed használata háttérként */
    background: url('/image_709543.jpg') center center no-repeat !important;
    background-size: 100% 100% !important; /* Kinyújtja a képet a gomb méretére */
    border: none !important;
    box-shadow: none !important;
    height: 75px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding: 0 15px !important;
    cursor: pointer !important;
    
    /* Szöveg stílusa */
    color: #00ffcc !important;
    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 5px #00ffcc, 0 0 15px #00ffcc, 2px 2px 3px #000 !important;
    transition: transform 0.2s, filter 0.2s !important;
}

/* Az ikonok elhelyezése a gombon belül */
.menu-btn i {
    position: absolute !important;
    left: 25px !important;
    font-size: 24px !important;
    color: #fff !important;
    text-shadow: 0 0 10px #00ffcc !important;
    z-index: 2;
}

/* A szöveg középre igazítása az ikon mellett */
.menu-btn span {
    width: 100% !important;
    text-align: center !important;
    padding-left: 30px !important;
    z-index: 2;
}

/* Rámutatás (Hover) - Vibráló effektus */
.menu-btn:hover {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 0 15px #ff00ea) brightness(1.15) !important;
    color: #ff00ea !important;
    text-shadow: 0 0 5px #ff00ea, 0 0 15px #ff00ea, 2px 2px 3px #000 !important;
}

.menu-btn:hover i {
    color: #fff !important;
    text-shadow: 0 0 10px #ff00ea !important;
}

/* Aktív / Lenyomott állapot */
.menu-btn.active {
    transform: scale(0.96) !important;
    filter: drop-shadow(0 0 20px #00ffcc) brightness(1.3) !important;
    color: #fff !important;
}

/* -----------------------------------------
   📱 MOBILOS NÉZET (Hogy telefonon se törjön szét)
   ----------------------------------------- */
@media (max-width: 850px) {
    .game-container {
        flex-direction: column !important;
    }
    .topbar {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 3px solid #ff00ea !important;
        padding: 10px !important;
    }
    .brand { margin-bottom: 15px !important; }
    .icon-menu {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .menu-btn {
        width: 48% !important; /* Mobilon 2 oszlopba teszi a gombokat */
        height: 65px !important;
    }
    .menu-btn span { font-size: 13px !important; padding-left: 20px !important; }
    .menu-btn i { left: 15px !important; font-size: 20px !important; }
}

/* =========================================
   🪨 KŐGOMBOK + NEON IZZÁS (S&F X NEON)
   ========================================= */

/* A bal oldali sáv (Navbar) alapja */
.topbar {
    background: #030108 !important; /* Extrém sötét alap */
    border-right: 3px solid #ff00ea !important; /* Pink neon keret */
    box-shadow: 5px 0 25px rgba(255, 0, 234, 0.4) !important;
}

/* Az összes gomb alapállapota (KŐ TEXTÚRA BEKÉNSZERÍTÉSE) */
.menu-btn {
    background-color: transparent !important;
    background-image: url('/image_709543.jpg') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 75px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding: 0 !important;
    transition: all 0.2s ease-in-out !important;
    
    /* Cián neon szöveg a kövön */
    color: #fff !important;
    font-size: 15px !important;
    text-shadow: 0 0 8px #00ffcc, 0 0 15px #00ffcc !important;
}

/* Ikonok igazítása a kövön belül */
.menu-btn i {
    position: absolute !important;
    left: 20px !important;
    font-size: 22px !important;
    color: #fff !important;
    text-shadow: 0 0 10px #00ffcc !important;
}

/* Szöveg igazítása */
.menu-btn span {
    width: 100% !important;
    text-align: center !important;
    padding-left: 25px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
}

/* Rámutatás (Hover) - Pink Neon pulzálás */
.menu-btn:hover {
    transform: scale(1.03) !important;
    filter: drop-shadow(0 0 12px #ff00ea) brightness(1.2) !important;
    color: #fff !important;
    text-shadow: 0 0 10px #ff00ea, 0 0 20px #ff00ea !important;
}

.menu-btn:hover i {
    text-shadow: 0 0 10px #ff00ea !important;
}

/* Aktív / Lenyomott állapot - Erős Cián izzás */
.menu-btn.active {
    transform: scale(0.98) !important;
    filter: drop-shadow(0 0 15px #00ffcc) brightness(1.3) !important;
    color: #fff !important;
    text-shadow: 0 0 10px #fff, 0 0 20px #00ffcc !important;
}

.menu-btn.active i {
    color: #00ffcc !important;
    text-shadow: 0 0 15px #fff !important;
}

/* Mobil nézet javítása */
@media (max-width: 850px) {
    .topbar { border-bottom: 3px solid #ff00ea !important; border-right: none !important; }
}

/* =========================================
   🪨 KŐGOMB TÖKÉLETESÍTÉSE (ZOOM ÉS JAVÍTÁS)
   ========================================= */

/* Teljesen legyaluljuk az előző háttereket a gombokról! */
.menu-btn, .menu-btn.active {
    /* A shorthand 'background' parancs eltüntet minden régi színt és színátmenetet */
    background: transparent url('/image_709543.jpg') center center no-repeat !important;
    
    /* ITT A VARÁZSLAT: Ránagyítunk a képre, hogy levágjuk a széléről a felesleges keretet! */
    background-size: 115% 150% !important; 
    
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Hover (Rámutatás) megtartása a kövön */
.menu-btn:hover {
    background: transparent url('/image_709543.jpg') center center no-repeat !important;
    background-size: 115% 150% !important; 
    transform: scale(1.03) !important;
    filter: drop-shadow(0 0 12px #ff00ea) brightness(1.2) !important;
}

/* Aktív állapot megtartása a kövön */
.menu-btn.active {
    transform: scale(0.98) !important;
    filter: drop-shadow(0 0 15px #00ffcc) brightness(1.3) !important;
}

/* =========================================
   🔥 KŐGOMB HOVER: IZZÓ ARANY KÉP CSERE
   ========================================= */

.menu-btn:hover {
    /* Beállítjuk az általad küldött új, izzó képet háttérnek */
    background: transparent url('/gom-hover.jpg') center center no-repeat !important;
    
    /* Megtartjuk a "zoom" effektust, hogy itt is levágja a fekete keretet */
    background-size: 115% 150% !important; 
    
    transform: scale(1.03) !important;
    
    /* A gomb körüli külső árnyékot is aranyra/narancsra cseréljük a pink helyett */
    filter: drop-shadow(0 0 15px #ff9900) brightness(1.1) !important;
    
    color: #fff !important;
    /* A szöveg és az ikon neonfényét az izzó kőhöz igazítjuk */
    text-shadow: 0 0 10px #ffcc00, 0 0 20px #ff9900 !important;
}

.menu-btn:hover i {
    color: #fff !important;
    text-shadow: 0 0 15px #ffcc00 !important;
}

/* =========================================
   🪩 S&F KLASSZIKUS ELRENDEZÉS - NEON STÍLUSBAN
   ========================================= */

/* A bal oldali sáv alapja - Sötét, lila neon kerettel */
.topbar {
    background: #0a0117 !important; 
    border-right: 3px solid #ff00ea !important; 
    box-shadow: inset -3px 0 0 rgba(0,255,204,0.3), 5px 0 20px rgba(255,0,234,0.4) !important;
    padding: 0 !important; /* Szorosan a falig érnek a gombok */
    width: 240px !important;
    min-width: 240px !important;
}

.brand {
    background: #05000a !important;
    border-bottom: 2px solid #00ffcc !important;
    margin-bottom: 0 !important;
    padding: 20px 0 !important;
    font-size: 22px !important;
    color: #ff00ea !important;
    text-shadow: 0 0 10px #ff00ea !important;
}

.icon-menu {
    gap: 0 !important; /* Nincs rés a gombok között */
    padding: 10px 0 !important;
}

/* Gombok - Vékony csíkok, balra zárt tartalommal a kép alapján */
.menu-btn {
    background: linear-gradient(to right, #130030 0%, #220055 100%) !important;
    background-image: none !important; /* Kő textúra és képek eltüntetése */
    border: none !important;
    border-top: 1px solid #00ffcc !important; /* Cián felső él */
    border-bottom: 2px solid #000 !important; /* Sötét alsó él */
    border-radius: 0 !important;
    height: 48px !important; /* Kisebb, kompaktabb gombok */
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Balra zárás */
    padding: 0 20px !important;
    
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 8px #00ffcc !important;
    filter: none !important;
    transition: 0.2s !important;
}

/* Ikonok igazítása */
.menu-btn i {
    position: static !important;
    font-size: 18px !important;
    color: #00ffcc !important;
    text-shadow: 0 0 10px #00ffcc !important;
    margin-right: 15px !important; 
}

/* Szöveg igazítása */
.menu-btn span {
    width: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
    letter-spacing: 1px !important;
}

/* Hover - Rámutatás */
.menu-btn:hover {
    background: linear-gradient(to right, #30006b 0%, #4800a6 100%) !important;
    transform: none !important; /* Nincs nagyítás, stabil marad */
    color: #ff00ea !important;
    text-shadow: 0 0 10px #ff00ea, 0 0 20px #ff00ea !important;
    border-top: 1px solid #ff00ea !important;
}

.menu-btn:hover i {
    color: #ff00ea !important;
    text-shadow: 0 0 10px #ff00ea !important;
}

/* Aktív állapot */
.menu-btn.active {
    background: #05000a !important;
    border-top: 1px solid #ff00ea !important;
    box-shadow: inset 5px 0 15px rgba(255,0,234,0.5) !important;
    color: #00ffcc !important;
    text-shadow: 0 0 15px #00ffcc !important;
}

/* Mobil nézet javítása az új elrendezéshez */
@media (max-width: 850px) {
    .menu-btn {
        justify-content: center !important;
        padding: 0 !important;
        border-top: none !important;
        border-bottom: 2px solid #00ffcc !important;
    }
    .menu-btn i { margin-right: 8px !important; }
}

/* =========================================
   🪨 S&F ELRENDEZÉS: KÉPES GOMBOK ARANY SZÖVEGGEL
   ========================================= */

/* A bal oldali sáv alapja - Sötét kódex stílus, neon NÉLKÜL */
.topbar {
    background: #0d0805 !important; 
    border-right: 3px solid #b28822 !important; /* Klasszikus aranybarna keret */
    box-shadow: 5px 0 20px rgba(0,0,0,0.9) !important;
    padding: 0 !important; /* Szorosan a falig érnek a gombok */
    width: 240px !important;
    min-width: 240px !important;
}

.brand {
    background: #050301 !important;
    border-bottom: 2px solid #b28822 !important;
    margin-bottom: 0 !important;
    padding: 20px 0 !important;
    font-size: 24px !important;
    color: #ffcc00 !important; /* Arany szín */
    text-shadow: 2px 2px 3px #000, 0 0 10px rgba(255, 153, 0, 0.5) !important;
}

.icon-menu {
    gap: 0 !important; /* Nincs rés a gombok között */
    padding: 0 !important;
}

/* GOMBOK: Kő háttérkép, egymás alatt szorosan, balra zárva */
.menu-btn {
    background: transparent url('/button.jpg') center center no-repeat !important;
    background-size: 115% 160% !important; /* Levágja a fehér keretet a képről */
    border: none !important;
    border-bottom: 2px solid #050301 !important; /* Minimális fekete elválasztó a kövek között */
    border-radius: 0 !important;
    height: 55px !important; /* Kicsit vastagabb, hogy a kő textúra látszódjon */
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Balra zárás */
    padding: 0 20px !important;
    
    color: #ffcc00 !important; /* ARANY SZÖVEG */
    font-size: 15px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    /* Erős fekete körvonal a betűknek, hogy a kövön olvasható maradjon */
    text-shadow: 2px 2px 3px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important; 
    filter: none !important;
    transition: 0.2s !important;
    box-shadow: none !important;
}

/* Ikonok aranyozása */
.menu-btn i {
    position: static !important;
    font-size: 20px !important;
    color: #ffcc00 !important; /* Arany ikon */
    text-shadow: 2px 2px 3px #000 !important;
    margin-right: 15px !important; 
}

.menu-btn span {
    width: auto !important;
    text-align: left !important;
    padding-left: 0 !important;
    letter-spacing: 1px !important;
}

/* HOVER: Izzó arany kő kép csere */
.menu-btn:hover {
    background: transparent url('/button-hover.jpg') center center no-repeat !important;
    background-size: 115% 160% !important; 
    transform: none !important; /* Nincs ugrálás, a gomb stabil marad */
    color: #fff !important; /* A szöveg kivilágosodik */
    text-shadow: 0 0 10px #ffcc00, 2px 2px 4px #000 !important;
    border-bottom: 2px solid #050301 !important;
}

.menu-btn:hover i {
    color: #fff !important;
    text-shadow: 0 0 10px #ffcc00 !important;
}

/* AKTÍV ÁLLAPOT (Ami épp meg van nyitva) */
.menu-btn.active {
    background: transparent url('/button-active.jpg') center center no-repeat !important;
    background-size: 115% 160% !important; 
    color: #fff !important;
    text-shadow: 0 0 15px #ffcc00, 2px 2px 4px #000 !important;
    filter: brightness(1.15) !important; /* Picit fényesebb */
}
.menu-btn.active i {
    color: #fff !important;
    text-shadow: 0 0 15px #ffcc00 !important;
}

/* Mobil nézet */
@media (max-width: 850px) {
    .topbar { border-right: none !important; border-bottom: 3px solid #b28822 !important; }
    .menu-btn { justify-content: center !important; height: 50px !important; }
    .menu-btn i { margin-right: 10px !important; }
}

/* =========================================
   🪨 GOMB TORZULÁS JAVÍTÁSA (Képarány megtartása)
   ========================================= */

.menu-btn {
    /* A 'cover' parancs garantálja, hogy az eredeti arány megmaradjon, csak kitöltse a teret! */
    background-size: cover !important; 
    background-position: center !important;
}

.menu-btn:hover {
    background-size: cover !important; 
    background-position: center !important;
}

.menu-btn.active {
    background-size: cover !important; 
    background-position: center !important;
}

/* =========================================
   🖼️ ÚJ FŐ KERET: A DUPLA JÁTÉKABLAK
   ========================================= */

/* Csak asztali gépen és tableten alkalmazzuk ezt a hatalmas keretet, mobilon marad a praktikus nézet */
@media (min-width: 851px) {
    body {
        background: #050301 url('/wood.png') center/cover !important; /* Sötét háttér a játékablak mögé */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100vh !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    .game-container {
        /* A játékablak méretezése, hogy kitöltse a képernyőt, de ne torzuljon szét */
        width: 96vw !important;
        max-width: 1500px !important;
        height: 92vh !important;
        max-height: 850px !important;
        
        /* AZ ÁLTALAD KÜLDÖTT KÉP MINT FŐ KERET */
        background: url('/image_6e4b87.jpg') center center no-repeat !important;
        background-size: 100% 100% !important;
        
        display: grid !important;
        /* A rács pontosan a képen lévő keretekhez igazítva (Bal keret ~17.5%, Jobb ~78.5%) */
        grid-template-columns: 17.5% 78.5% !important;
        gap: 1.5% !important;
        
        /* Belső térköz, hogy a tartalom ne lógjon rá a rajzolt fa/kő keretre */
        padding: 4% 1.5% 4.5% 1.8% !important;
        box-sizing: border-box !important;
        
        /* Eltüntetjük az eddigi szimpla kereteket */
        border: none !important;
        box-shadow: 0 0 50px rgba(0,0,0,0.9) !important;
        border-radius: 0 !important;
    }

    /* A bal oldali Navbar beigazítása a bal rajzolt keretbe */
    .topbar {
        width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        background: transparent !important; /* Átlátszó, hogy a kép fekete/üres közepe látszódjon */
        border: none !important;
        box-shadow: none !important;
        padding: 10px !important;
    }

    /* A jobb oldali játéktér beigazítása a jobb rajzolt keretbe */
    #main-area {
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        border-radius: 6px !important; /* Kicsi lekerekítés, hogy kövesse a belső ívet */
        background: #000 !important; /* Alap fekete háttér a biztonság kedvéért */
    }

    /* Levesszük a belső dobozok (Profil, Fogadó) saját dupla keretét, mert már a kép adja a keretet! */
    .sf-classic-container, .sf-tavern-screen {
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        width: 100% !important;
        min-height: 100% !important;
        border-radius: 6px !important;
    }
    
    /* Gombok igazítása az új, vékonyabb bal oldali sávhoz */
    .menu-btn {
        padding: 0 10px !important;
        height: 50px !important;
    }
    .menu-btn span { font-size: 13px !important; }
}

/* =========================================
   🖼️ JAVÍTÁS: A DUPLA JÁTÉKABLAK ÉS ÁTLÁTSZÓSÁG
   ========================================= */

@media (min-width: 851px) {
    .game-container {
        /* Fixáljuk a kép betöltését külön paraméterekkel, hogy semmi ne írhassa felül */
        background-color: transparent !important;
        background-image: url('/image_6e4b87.jpg') !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;

        /* Pontosítjuk a belső margókat a kerethez mérten */
        display: grid !important;
        grid-template-columns: 19% 79% !important;
        gap: 1.5% !important;
        padding: 4.5% 2% 4.5% 2.2% !important;
    }

    /* 1. Kigyomláljuk a beragadt fekete háttereket a bal sávról */
    .topbar, .brand, .sidebar-user-box {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 2. Kigyomláljuk a beragadt háttereket a jobb oldali főtérből */
    #main-area, .sf-classic-container, .sf-tavern-screen {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 3. A belső elemek (profil bal/jobb oldala) kapnak egy alig észrevehető sötétítést, hogy a szöveg olvasható maradjon a keret belsejében */
    .sf-classic-left, .sf-classic-right {
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(178, 136, 34, 0.3) !important; /* Halvány arany keret */
    }
}

/* =========================================
   📱 MOBIL NÉZET (TÖKÉLETESÍTETT TELEFONOS APP)
   ========================================= */
@media (max-width: 850px) {
    /* Alap háttér mobilon */
    body {
        background: #050301 url('/wood.png') center/cover fixed !important;
    }
    
    /* Konténer: Mobilon eltüntetjük a hatalmas rajzolt dupla keretet */
    .game-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        background: none !important; /* Nincs dupla rajzolt keret! */
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Felső sáv (Menü + Profil) kompaktabbá tétele */
    .topbar {
        width: 100% !important;
        height: auto !important;
        background: #0d0805 !important;
        border-right: none !important;
        border-bottom: 3px solid #b28822 !important;
        padding: 10px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.9) !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 100 !important;
    }

    /* Profil rész (Fejléc) okos összenyomása, hogy pici helyet foglaljon */
    .sidebar-user-box {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 5px !important;
        gap: 10px !important;
    }
    
    /* Avatar apróbb méretre vétele */
    .sidebar-user-box > div:nth-child(1) {
        width: 45px !important;
        height: 45px !important;
        margin-bottom: 0 !important;
    }
    .sidebar-user-box > div:nth-child(1) > div {
        transform: scale(0.25) !important;
    }
    
    /* Név */
    .sidebar-user-box > div:nth-child(2) {
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }

    /* Nyersanyagok (Shard, Pont, Energia) 1 sorba rendezése vízszintesen */
    .sidebar-user-box > div:nth-child(3) {
        flex-direction: row !important;
        width: 100% !important;
        justify-content: space-between !important;
        padding: 6px 10px !important;
        margin-top: 5px !important;
    }
    .sidebar-user-box > div:nth-child(3) > div {
        font-size: 11px !important;
    }

    /* Menügombok 2 oszlopos rácsba tétele helytakarékosság miatt */
    .icon-menu {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 0 0 0 !important;
    }

    .menu-btn {
        height: 40px !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    .menu-btn i {
        margin-right: 5px !important;
        font-size: 14px !important;
    }
    .menu-btn span {
        font-size: 11px !important;
    }

    /* Játéktér (Fő tartalom görgetése) mobilon */
    #main-area {
        width: 100% !important;
        flex: 1 !important;
        padding: 15px !important;
        overflow-y: auto !important;
        background: transparent !important;
    }

    /* Mobilon visszakapják a belső dobozok a saját keretüket és hátterüket (mivel a nagy dupla keret nincs ott) */
    .sf-classic-container {
        background: linear-gradient(rgba(26, 15, 10, 0.85), rgba(26, 15, 10, 0.95)) !important;
        border: 3px solid #54311c !important;
        border-radius: 8px !important;
        padding: 15px !important;
        min-height: 100% !important;
    }
    
    .sf-tavern-screen {
        border: 3px solid #54311c !important;
        border-radius: 8px !important;
        min-height: 100% !important;
    }
}

/* RPGUI fixek, hogy megmaradjon a Te egyedi dizájnod! */
.rpgui-content {
    background: transparent !important; /* Nem engedjük, hogy az RPGUI eltüntesse az eddigi fa háttered! */
    overflow: hidden !important; 
}

/* Gombok betűtípusa, hogy passzoljon a S&F világhoz */
.rpgui-button {
    font-family: 'Cinzel', serif !important;
    font-weight: 900 !important;
}

/* Felugró ablak sötétítő javítása */
.sf-popup-overlay {
    cursor: auto !important; /* Így végig megmarad az RPG kesztyű kurzorod */
}

/* RPGUI fixek, hogy megmaradjon a Te egyedi dizájnod! */
.rpgui-content {
    background: transparent !important; /* Nem engedjük, hogy az RPGUI eltüntesse az eddigi fa háttered! */
    overflow: hidden !important; 
}

/* Gombok betűtípusa, hogy passzoljon a S&F világhoz */
.rpgui-button {
    font-family: 'Cinzel', serif !important;
    font-weight: 900 !important;
}

/* Felugró ablak sötétítő javítása */
.sf-popup-overlay {
    cursor: auto !important; /* Így végig megmarad az RPG kesztyű kurzorod */
}

/* =========================================
   🛡️ KRITIKUS JAVÍTÁS: KÉPERNYŐ ÖSSZEAKADÁS ÉS RPGUI HÁTTÉR
   ========================================= */

/* 1. RPGUI Erőszakos Fehér Hátterének Kigyomlálása */
body, .rpgui-content {
    background-color: #050301 !important;
    background-image: url('/wood.png') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    color: #fff !important;
}

/* 2. Ne tegye egymás mellé a belépő és a játék képernyőt! */
body {
    display: block !important; 
}

/* A Belépő Képernyő középre igazítása */
.landing-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0; left: 0;
    z-index: 1000;
}

/* 3. A játéktér (game-container) SOHA ne jelenjen meg, ha nem vagyunk belépve! */
.game-container[style*="display: none"], 
.game-container[style*="display:none"] {
    display: none !important;
}

/* Asztali nézet rácsa - Csak ha már beléptünk! */
@media (min-width: 851px) {
    .game-container:not([style*="display: none"]):not([style*="display:none"]) {
        display: grid !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 96vw !important;
        max-width: 1500px !important;
        height: 92vh !important;
        max-height: 850px !important;
        
        /* Fekete alap, ha a dupla keret képe lassan töltene be */
        background-color: #000 !important; 
        background-image: url('/image_6e4b87.jpg') !important;
        background-size: 100% 100% !important;
    }
}

/* 4. RPGUI Gombok és Menük Visszaállítása Arany Szövegre */
.menu-btn span, .rpgui-button {
    color: #ffcc00 !important;
    text-shadow: 2px 2px 0px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}
.menu-btn:hover span, .menu-btn.active span, .rpgui-button:hover {
    color: #fff !important;
}

/* =========================================
   ✨ RPGUI PROFIL ELRENDEZÉS ÉS IZZÓ FIXEK
   ========================================= */

.sf-profile-layout {
    display: flex;
    gap: 15px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Bal oldali arany keretes karakterlap */
.profile-left {
    flex: 2;
    display: flex;
    flex-direction: column;
    padding: 20px !important;
    box-sizing: border-box;
}

/* Jobb oldali fa keretes hátizsák */
.profile-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px !important;
    box-sizing: border-box;
}

.sf-profile-banner {
    height: 110px;
    border: 3px solid #3b2513;
    border-radius: 4px;
    margin-bottom: 20px;
    background-size: cover;
    background-position: center;
    position: relative;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}

.sf-equip-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.sf-equip-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Új, gravírozott kinézetű Tárgy-helyek (S&F Stílus) */
.sf-rpgui-slot {
    width: 48px;
    height: 48px;
    background: #110905;
    border: 2px solid #54311c;
    box-shadow: inset 0 0 10px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a5e42;
    font-size: 22px;
    cursor: pointer;
    transition: 0.2s;
}

.sf-rpgui-slot:hover {
    border-color: #d4af37;
    color: #d4af37;
    box-shadow: inset 0 0 15px rgba(212, 175, 55, 0.3);
}

.sf-rpgui-slot.has-item {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 0 #000;
    background: #2a1b10;
    border-color: #d4af37;
}

.sf-avatar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
}

/* A karakter portré körüli kis fa keret */
.avatar-frame {
    width: 140px;
    height: 140px;
    padding: 5px !important;
    margin-bottom: 15px !important;
    background: #000 !important;
    position: relative;
}

.avatar-name {
    color: #ffcc00; font-size: 18px; font-weight: 900; text-shadow: 2px 2px 0 #000; text-transform: uppercase; text-align: center; margin-bottom: 2px;
}

.avatar-guild { color: #888; font-size: 12px; margin-bottom: 8px; text-shadow: 1px 1px 0 #000; }
.avatar-level { color: #fff; font-weight: bold; text-shadow: 1px 1px 0 #000; margin-bottom: 5px; }

.backpack-title {
    color: #ffcc00; text-align: center; text-shadow: 2px 2px 0 #000; margin-top: 0; margin-bottom: 20px; font-size: 20px;
}

.sf-inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-content: start;
}

/* Mobilos elrendezés (Egymás alá kerül a karakter és a hátizsák) */
@media (max-width: 850px) {
    .sf-profile-layout { flex-direction: column; }
    .sf-equip-area { gap: 10px; }
    .sf-avatar-center { width: auto; }
    .sf-inventory-grid { grid-template-columns: repeat(5, 1fr); justify-content: center; }
    .profile-left, .profile-right { padding: 10px !important; }
    .sf-rpgui-slot { width: 42px; height: 42px; font-size: 18px; }
    .avatar-frame { width: 120px; height: 120px; }
}

/* =========================================
   🛡️ PROFIL ELRENDEZÉS JAVÍTÁSA (OVERLAP FIX)
   ========================================= */

.sf-profile-layout {
    display: flex;
    gap: 15px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Az új Wrapperek! Ezek tartják kordában az RPGUI dobozokat */
.sf-profile-left-wrapper {
    flex: 2;
    display: flex;
    flex-direction: column;
}

.sf-profile-right-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sf-equip-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    width: 100%;
}

.avatar-frame {
    width: 140px;
    height: 140px;
    padding: 5px !important;
    margin-bottom: 15px !important;
    background: #000 !important;
}

/* Mobilos alkalmazkodás */
@media (max-width: 850px) {
    .sf-profile-layout { flex-direction: column; }
    .sf-profile-left-wrapper, .sf-profile-right-wrapper { width: 100%; }
}

/* =========================================
   🧨 KERET TÖRLÉSE & TELJES RPGUI ÁTÁLLÁS
   ========================================= */

/* 1. Alap háttér visszaállítása az RPGUI hivatalos textúrájára */
body, .rpgui-content {
    background-color: #222 !important;
    background-image: url('/rpgui/img/background.png') !important;
    background-repeat: repeat !important;
    background-size: auto !important;
}

/* 2. KINYÍRJUK a hatalmas rögzített dupla keretet! (image_6e4b87.jpg törlése) */
.game-container {
    display: flex !important;
    flex-direction: row !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 2% !important;
    gap: 2% !important;
    background: none !important; /* NINCS TÖBBÉ FIX KÉP */
    box-sizing: border-box !important;
    transform: none !important;
    position: relative !important;
    top: 0 !important; left: 0 !important;
}

/* 3. A Navbar mostantól egy natív, gyönyörű RPGUI keret */
.topbar {
    position: relative !important;
    width: 320px !important;
    min-width: 320px !important;
    height: 100% !important;
    padding: 20px !important;
    border: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
}

/* 4. A jobb oldali játéktér felszabadítása (a belső dobozok maradnak RPGUI keretesek) */
#main-area {
    position: relative !important;
    flex: 1 !important;
    height: 100% !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
}

/* 5. Navbar gombok 100%-os RPGUI kőgomb stílusban */
.menu-btn {
    width: 100% !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 20px !important;
    height: auto !important;
    min-height: 50px !important;
}
.menu-btn i {
    margin-right: 15px !important;
    font-size: 20px !important;
    color: #ffcc00 !important;
    text-shadow: 2px 2px 0px #000;
}
.menu-btn span {
    font-size: 16px !important;
    margin: 0 !important;
}

/* 6. Mobilos responsive nézet (Egymás alatt fognak megjelenni a keretek) */
@media (max-width: 850px) {
    .game-container {
        flex-direction: column !important;
        padding: 10px !important;
        gap: 10px !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }
    .topbar {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
    }
}