/* ============================================================
   GameRent — component styles
   ============================================================ */

/* ---------- Game card ---------- */
.gcard { cursor: pointer; display: flex; flex-direction: column; }
.gcard .cover { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s; }
.gcard:hover .cover {
  transform: translateY(-6px);
  box-shadow: var(--sh-hover), inset 0 0 0 1px var(--ac-line);
}
.gcard-badges { position: absolute; top: 9px; left: 9px; display: flex; gap: 5px; z-index: 2; }
.gcard-wish {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,9,13,.55); color: #fff; backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  opacity: 0; transform: translateY(-4px); transition: all .2s;
}
.gcard:hover .gcard-wish { opacity: 1; transform: none; }
.gcard-wish:hover { background: rgba(8,9,13,.8); }
.gcard-wish.on { opacity: 1; transform: none; color: var(--danger); }

.gcard-hover {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 12px; display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(transparent, rgba(6,7,10,.55) 30%, rgba(6,7,10,.95));
  opacity: 0; transform: translateY(8px); transition: all .26s cubic-bezier(.22,.61,.36,1);
}
.gcard:hover .gcard-hover { opacity: 1; transform: none; }
.gcard-hover-meta { display: flex; gap: 6px; justify-content: space-between; }

.gcard-body { padding: 13px 2px 4px; display: flex; flex-direction: column; gap: 8px; }
.gcard-title { font-size: 15.5px; font-weight: 600; line-height: 1.2; min-height: 2.4em; }
.gcard:hover .gcard-title { color: var(--ac); }
.gcard-rate { display: flex; align-items: center; gap: 6px; }
.gcard-price { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 2px; }
.gcard-from { font-size: 12px; color: var(--ac); font-weight: 600; padding-bottom: 2px; }

/* ---------- Platform tile ---------- */
.platgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 980px){ .platgrid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .platgrid { grid-template-columns: repeat(2,1fr); } }
.ptile {
  position: relative; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 18px 16px 16px; border-radius: var(--r-md);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .18s, box-shadow .2s; min-height: 122px;
}
.ptile:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--ac-line), var(--sh-hover); }
.ptile .plat-glyph { height: 24px; font-size: 12px; padding: 0 9px; }
.ptile-name { font-size: 18px; font-weight: 600; margin-top: 14px; }
.ptile-count { font-size: 12.5px; color: var(--tx-mute); margin-top: 3px; }
.ptile-arrow { position: absolute; right: 14px; bottom: 14px; color: var(--tx-mute); transition: transform .2s, color .2s; }
.ptile:hover .ptile-arrow { color: var(--ac); transform: translateX(3px); }
.ptile-glow { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; pointer-events: none;
  background: radial-gradient(80% 60% at 100% 0%, var(--ac-soft), transparent 70%); }
.ptile:hover .ptile-glow { opacity: 1; }

/* ---------- Rental selector ---------- */
.rentsel.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rentsel.row  { display: flex; gap: 10px; flex-wrap: wrap; }
.rentopt {
  position: relative; text-align: left; padding: 13px 14px;
  border-radius: var(--r-md); background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: all .16s;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.rentopt:hover { box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg-3); }
.rentopt.on { background: var(--ac-soft); box-shadow: inset 0 0 0 1.5px var(--ac); }
.rentopt-top { display: flex; align-items: baseline; gap: 4px; }
.rentopt-days { font-size: 20px; font-weight: 700; line-height: 1; }
.rentopt-unit { font-size: 12px; color: var(--tx-mute); }
.rentopt.on .rentopt-unit { color: var(--ac); }
.rentopt-price { font-size: 17px; font-weight: 700; margin-top: 4px; }
.rentopt-perday { font-size: 11.5px; color: var(--tx-mute); }
.rentopt-check { position: absolute; top: 10px; right: 10px; color: var(--ac); }

/* ---------- Trust bar ---------- */
.trustbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
}
.trustbar-item { display: flex; gap: 12px; align-items: center; padding: 6px 12px; }
.trustbar-item + .trustbar-item { border-left: 1px solid var(--line); }
.trustbar-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--ac-soft); color: var(--ac); flex-shrink: 0; }
.trustbar-t { font-weight: 700; font-size: 14px; }
.trustbar-s { font-size: 12.5px; color: var(--tx-mute); }
@media (max-width: 1000px){
  .trustbar { grid-template-columns: repeat(2,1fr); }
  .trustbar-item:nth-child(odd) { border-left: 0; }
  .trustbar-item:nth-child(3), .trustbar-item:nth-child(4){ border-top: 1px solid var(--line); }
}
@media (max-width: 460px){
  .trustbar { grid-template-columns: 1fr; }
  .trustbar-item { border-left: 0 !important; }
  .trustbar-item + .trustbar-item { border-top: 1px solid var(--line); }
}

/* ---------- Review ---------- */
.review { padding: 18px; border-radius: var(--r-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  display: flex; flex-direction: column; gap: 12px; }
.review-av { width: 38px; height: 38px; border-radius: 99px; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-disp); font-weight: 700; color: #fff; font-size: 15px; flex-shrink: 0; }
.review-body { font-size: 14.5px; color: var(--tx-dim); line-height: 1.55; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--bg-3); color: var(--tx); font-weight: 600; font-size: 14px;
  box-shadow: var(--sh-3), inset 0 0 0 1px var(--line-2);
  animation: toastIn .32s cubic-bezier(.22,1.2,.4,1) both;
}
@keyframes toastIn { from { opacity:0; transform: translate(-50%, 16px) scale(.96); } to { opacity:1; transform: translate(-50%,0) scale(1); } }
.toast-ic { width: 24px; height: 24px; border-radius: 99px; display: flex; align-items: center; justify-content: center; flex-shrink:0; }
.toast-ok .toast-ic { background: var(--ok); color: var(--ok-ink); }
.toast-vi .toast-ic { background: var(--vi); color: var(--vi-ink); }
.toast-mute .toast-ic { background: var(--bg-4); color: var(--tx-dim); }

/* ---------- Empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 24px; }
.empty-ic { width: 70px; height: 70px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--tx-mute); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 18px; }

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--tx-mute); }
.crumbs a { color: var(--tx-dim); cursor: pointer; }
.crumbs a:hover { color: var(--ac); }
.crumbs-cur { color: var(--tx); font-weight: 600; }
.crumbs-sep { color: var(--tx-faint); }

/* ============================================================
   Navbar
   ============================================================ */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(var(--bg-rgb),.82); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 20px; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--ac); color: var(--ac-ink); box-shadow: 0 4px 16px -4px var(--ac-glow); }
.brand-name { font-family: var(--f-disp); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand-name b { color: var(--ac); font-weight: 700; }

.nav-links { display: flex; align-items: center; gap: 3px; }
.nav-link { padding: 8px 13px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 600; color: var(--tx-dim);
  cursor: pointer; transition: background .14s, color .14s; display: flex; align-items: center; gap: 6px; }
.nav-link:hover { color: var(--tx); background: var(--bg-2); }
.nav-link.active { color: var(--ac); }

.nav-search { flex: 1; max-width: 420px; position: relative; }
.nav-search input { width: 100%; height: 42px; border-radius: var(--r-pill); background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-2); padding: 0 16px 0 42px; font-size: 14px; transition: box-shadow .16s, background .16s; }
.nav-search input::placeholder { color: var(--tx-mute); }
.nav-search input:focus { outline: none; background: var(--bg-1); box-shadow: inset 0 0 0 1.5px var(--ac-line); }
.nav-search .si { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tx-mute); pointer-events: none; }
.nav-search-kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--tx-faint);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; font-family: var(--f-disp); }

.nav-cart { position: relative; }
.nav-cart-count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 99px; background: var(--ac); color: var(--ac-ink); font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-family: var(--f-disp);
  box-shadow: 0 0 0 2px var(--bg); }

/* search results dropdown */
.nav-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--bg-1);
  border-radius: var(--r-md); box-shadow: var(--sh-3), inset 0 0 0 1px var(--line-2); padding: 6px; z-index: 120; max-height: 420px; overflow:auto; }
.nav-result { display: flex; gap: 11px; align-items: center; padding: 8px; border-radius: var(--r-sm); cursor: pointer; }
.nav-result:hover { background: var(--bg-3); }
.nav-result img, .nav-result .nr-fb { width: 34px; height: 46px; border-radius: 5px; object-fit: cover; flex-shrink: 0; background: var(--bg-3); }
.nav-result-t { font-size: 14px; font-weight: 600; }
.nav-result-s { font-size: 12px; color: var(--tx-mute); }

.nav-mob-toggle { display: none; }
@media (max-width: 1080px){
  .nav-links { display: none; }
  .nav-search { max-width: none; }
}
@media (max-width: 720px){
  .nav-inner { gap: 10px; padding-inline: 16px; }
  .nav-search { display: none; }
  .nav-mob-toggle { display: inline-flex; }
}

/* mobile menu sheet */
.mobmenu { position: fixed; inset: calc(var(--nav-h) + var(--ann-h, 0px)) 0 0; z-index: 99; background: var(--bg); padding: 20px; display: flex; flex-direction: column; gap: 6px; animation: fadeIn .2s; overflow: auto; }
.nav:has(.announce) { --ann-h: 36px; }
.mobmenu a { padding: 16px; border-radius: var(--r-md); background: var(--bg-2); font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: space-between; }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--line); background: var(--bg-1); margin-top: 40px; }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; padding-block: 56px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--tx-mute); font-family: var(--f-body); font-weight: 700; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14px; color: var(--tx-dim); cursor: pointer; }
.footer-col a:hover { color: var(--ac); }
.footer-blurb { font-size: 14px; color: var(--tx-mute); line-height: 1.6; margin-top: 16px; max-width: 280px; }
.footer-pay { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.footer-pay span { font-size: 11px; font-weight: 700; color: var(--tx-dim); padding: 5px 9px; border-radius: 6px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--f-disp); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--tx-mute); flex-wrap: wrap; }
@media (max-width: 880px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } }