:root{
  --cream:#fff9ef;
  --panel:#fffdf8e8;
  --ink:#2a425b;
  --blue:#1f96d0;
  --blue-dark:#117cb2;
  --green:#74c44b;
  --gold:#e7b659;
  --shadow:0 18px 42px rgba(28, 54, 74, 0.15);
  --radius:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Trebuchet MS', Arial, sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:#dff6ff;
}
.page-bg{
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.22)),
    url('../images/background/fantasy-island-map.png') center top / cover no-repeat;
  z-index:-2;
}
.page-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.40));
}
.topbar{
  width:min(1320px, calc(100% - 32px));
  margin:18px auto 0;
  background:rgba(255, 251, 240, 0.88);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.75);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand-wrap{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.brand-badge{
  width:56px;
  height:56px;
  border-radius:18px;
  background:linear-gradient(135deg, #ffe286, #ffd17a);
  display:grid;
  place-items:center;
  font-size:28px;
  box-shadow:0 8px 18px rgba(231, 182, 89, 0.35);
}
.brand-text h1{
  margin:0;
  font-size:1.45rem;
  line-height:1.1;
  color:#103d68;
}
.brand-text span{
  color:#68859b;
  font-size:0.9rem;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav-links a{
  color:#173f63;
  text-decoration:none;
  font-weight:700;
  padding:10px 14px;
  border-radius:14px;
}
.nav-links a:hover{
  background:#edf7ff;
}
.admin-btn,.hero-search button,.secondary-btn,.request-btn,.primary-link{
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.admin-btn{
  background:linear-gradient(180deg, #2aa7ea, #167dc0);
  color:#fff;
  padding:12px 18px;
  box-shadow:0 10px 18px rgba(31, 150, 208, 0.26);
}
.admin-btn:hover,.hero-search button:hover,.secondary-btn:hover,.request-btn:hover,.primary-link:hover{
  transform:translateY(-1px);
}
main{
  width:min(1320px, calc(100% - 32px));
  margin:18px auto 36px;
}
.hero{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:52px 16px 30px;
}
.hero-board{
  width:min(860px, 100%);
  background:rgba(255, 250, 240, 0.90);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:32px;
  box-shadow:var(--shadow);
  padding:34px 34px 28px;
  text-align:center;
  backdrop-filter:blur(8px);
}
.hero-kicker{
  display:inline-block;
  font-weight:800;
  color:#5b8b3a;
  background:#eef8d8;
  border-radius:999px;
  padding:8px 14px;
  margin-bottom:14px;
}
.hero-board h2{
  margin:0 0 12px;
  font-size:clamp(1.9rem, 4vw, 3rem);
  line-height:1.1;
  color:#70451e;
}
.hero-board p{
  margin:0 auto 22px;
  max-width:680px;
  color:#557189;
  font-size:1.05rem;
}
.hero-search{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-search input,.market-controls input,.market-controls select{
  border:2px solid #d9e5ef;
  background:#fff;
  color:#2f4d67;
  padding:14px 18px;
  border-radius:999px;
  outline:none;
  font-size:1rem;
}
.hero-search input{
  width:min(620px, 100%);
}
.hero-search button{
  background:linear-gradient(180deg, #7ccd50, #54ac2d);
  color:#fff;
  padding:14px 26px;
  box-shadow:0 10px 18px rgba(84, 172, 45, 0.24);
}
.hero-actions{
  margin-top:20px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.primary-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:linear-gradient(180deg, #ffcb73, #e8a94f);
  color:#6c4216;
  padding:14px 22px;
  box-shadow:0 10px 18px rgba(232, 169, 79, 0.24);
}
.secondary-btn{
  background:#f1f8ff;
  color:#175b8e;
  padding:14px 22px;
}
.market-shell{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:20px;
  align-items:start;
}
.sidebar-card,.market-panel,.info-card{
  background:var(--panel);
  backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,0.72);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.sidebar-card{
  padding:22px 18px;
  position:sticky;
  top:18px;
}
.sidebar-card h3,.market-top h3,.info-card h3{
  margin:0 0 14px;
  font-size:1.45rem;
  color:#22496a;
}
.category-group{
  border-top:1px solid #e6efe9;
  padding-top:14px;
  margin-top:14px;
}
.category-title{
  font-weight:800;
  color:#233f5d;
  margin-bottom:8px;
}
.sub-options{
  display:grid;
  gap:8px;
}
.filter-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 4px;
  color:#43627a;
  font-size:0.95rem;
}
.filter-option input{
  width:17px;
  height:17px;
}
.market-panel {
    display: flex;
    flex-direction: column;
}

#itemsGrid {
    width: 100%;
}

#pagination {
    align-self: center;
}
.market-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.market-top p{
  margin:6px 0 0;
  color:#68859b;
  font-weight:700;
}
.market-controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.items-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(185px, 1fr));
  gap:16px;
}
.item-card{
  background:#fffefa;
  border:1px solid #edf1ee;
  border-radius:22px;
  padding:14px;
  box-shadow:0 8px 16px rgba(29, 49, 66, 0.08);
  text-align:center;
}
.item-image{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:18px;
  background:#fdf8ef;
  padding:12px;
  margin-bottom:10px;
}
.item-card h4{
  margin:0 0 8px;
  font-size:1.08rem;
  color:#213f5d;
}
.item-meta{
  margin:4px 0;
  color:#607a90;
  font-size:0.93rem;
}
.badge{
  display:inline-block;
  border-radius:999px;
  padding:5px 11px;
  font-size:0.82rem;
  font-weight:800;
  margin-bottom:8px;
  color:#fff;
}
.badge.common{background:#9aa4af}
.badge.uncommon{background:#67be45}
.badge.rare{background:#3d7bff}
.badge.epic{background:#9255dd}
.request-btn{
  margin-top:10px;
  width:100%;
  padding:12px 12px;
  background:linear-gradient(180deg, #2ca8ea, #1885cb);
  color:#fff;
  box-shadow:0 10px 18px rgba(31, 150, 208, 0.22);
}
.empty-state{
  grid-column:1/-1;
  text-align:center;
  padding:32px 18px;
  background:#fffefa;
  border-radius:20px;
  color:#68859b;
}
.info-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}
.info-card{
  padding:22px;
}
.info-card p,.info-card li{
  color:#ffffff;
}
@media (max-width: 1024px){
  .topbar{flex-direction:column; align-items:stretch}
  .nav-links{justify-content:flex-start}
  .market-shell{grid-template-columns:1fr}
  .sidebar-card{position:static}
}
@media (max-width: 680px){
  main,.topbar{width:min(100% - 18px, 100%)}
  .hero-board{padding:24px 18px}
  .hero-board h2{font-size:1.8rem}
  .hero-search input,.market-controls input,.market-controls select{width:100%}
  .market-controls{width:100%}
  .info-section{grid-template-columns:1fr}
}

.market-panel{
 background:rgba(17,27,45,.45)!important;
 backdrop-filter:blur(12px);
}

.items-grid{
    height:auto;
}

#pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 30px auto 10px;
    padding: 10px 0;
}

#pagination button{
    background:rgba(255,220,130,.18)!important;
    border:1px solid rgba(255,215,130,.5);
    color:#ffe7ad!important;
}

#pagination .active-page{
    background:#d99b32!important;
    color:#241507!important;
}

/* =====================================
   Fantasy Item Card Layout Fix
===================================== */

.items-grid {
    align-items: stretch;
}

.item-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 360px;
    padding: 18px !important;
}


/* Image area */
.item-image {
    width: 100%;
    height: 170px;
    object-fit: contain;
    margin-bottom: 15px;
}


/* Item name */
.item-card h4 {
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 5px 0 10px !important;

    font-family: 'Cinzel', serif;
    font-size: 18px;
    line-height: 1.3;
    text-align: center;

    color: #ffe7ad !important;
}


/* Price */
.item-price {
    margin: 8px 0 !important;
    font-size: 18px;
    font-weight: 800;
    color: #7de3ff !important;
}


/* Add button */
.cart-btn {
    margin-top: auto !important;

    height: 42px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:20px !important;

    background:
    linear-gradient(
        135deg,
        #657cff,
        #394cb8
    ) !important;

    font-size:15px;
}

/* =========================
   MOBILE RESPONSIVE FIX
========================= */

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    /* Main containers */
    .container,
    .glass-panel,
    .card,
    section {
        width: 94% !important;
        margin: 15px auto !important;
        padding: 20px !important;
        border-radius: 25px;
    }


    /* Header */
    header,
    .navbar,
    .nav-container {
        padding: 15px !important;
    }


    .logo,
    .site-title {
        font-size: 32px !important;
        line-height: 1.1;
        text-align: center;
    }


    /* Navigation */
    nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }


    nav a {
        font-size: 18px !important;
        padding: 8px;
    }


    .admin-btn {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }


    /* Hero section */

    .hero h1 {
        font-size: 38px !important;
        line-height: 1.2;
        text-align: center;
    }


    .hero p {
        font-size: 18px !important;
        text-align: center;
    }


    .hero {
        padding: 25px 15px !important;
    }


    /* Category section */

    .categories h2 {
        font-size: 36px !important;
    }


    .category-title {
        font-size: 25px !important;
        margin-top: 20px;
    }


    .category-item {
        padding: 10px 0;
        font-size: 18px;
    }


    input[type="radio"] {
        transform: scale(1.2);
        margin-right: 12px;
    }


    /* Search */

    input,
    select,
    button {
        width: 100%;
        font-size: 16px !important;
    }

}

/* Currency and price controls */
#currencySelect{
  min-width:118px;
  font-weight:800;
  cursor:pointer;
}
#sortSelect{
  min-width:190px;
}
.currency-note{
  font-size:.82rem;
  color:#68859b;
  font-weight:700;
}
@media (max-width:680px){
  #currencySelect,#sortSelect{min-width:0;width:100%}
}

/* Header language selector */
.language-select{
  width:auto;
  max-width:170px;
  border:1px solid rgba(255,227,160,.55);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(28,34,42,.72);
  color:#fff3d1;
  font-weight:800;
  cursor:pointer;
}
.language-select option{
  background:#fff;
  color:#173f63;
}
@media (max-width:680px){
  .nav-links .language-select{width:100%;max-width:none;}
}


/* Compact language and currency controls - mobile */
@media (max-width: 768px) {
  .topbar{
    padding:12px 14px;
    gap:12px;
  }

  .brand-text h1{
    font-size:1.2rem;
    text-align:center;
  }

  .nav-links{
    width:100%;
    justify-content:center;
    gap:7px;
  }

  .nav-links a{
    width:auto !important;
    font-size:14px !important;
    padding:7px 9px;
    white-space:nowrap;
  }

  .nav-links .language-select{
    width:auto !important;
    max-width:172px;
    min-width:135px;
    flex:1 1 145px;
    padding:9px 10px;
    font-size:14px !important;
    margin:0;
  }

  .nav-links .admin-btn{
    width:auto !important;
    min-width:122px;
    flex:0 1 auto;
    padding:9px 12px;
    margin-top:0;
    font-size:14px !important;
  }

  .market-controls{
    display:grid;
    grid-template-columns:minmax(105px, .8fr) minmax(150px, 1.2fr);
    gap:8px;
    align-items:center;
  }

  .market-controls #marketSearch{
    grid-column:1 / -1;
    width:100% !important;
  }

  .market-controls #currencySelect,
  .market-controls #sortSelect{
    width:100% !important;
    min-width:0 !important;
    padding:10px 11px;
    font-size:14px !important;
  }
}

@media (max-width: 420px) {
  .nav-links{
    gap:6px;
  }

  .nav-links a{
    font-size:13px !important;
    padding:6px 7px;
  }

  .nav-links .language-select{
    min-width:130px;
    max-width:158px;
    flex-basis:138px;
    font-size:13px !important;
  }

  .nav-links .admin-btn{
    min-width:112px;
    font-size:13px !important;
  }

  .market-controls{
    grid-template-columns:minmax(96px, .75fr) minmax(135px, 1.25fr);
  }
}