.where-to-play-page { min-height: 100vh; }
.venues-directory { min-height: calc(100vh - 180px); padding-top: clamp(135px, 13vw, 185px); }
.venue-search-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; align-items: end; gap: 12px; margin-bottom: 28px; padding: 18px; border: 1px solid rgba(65,200,255,.2); border-radius: 22px; background: linear-gradient(125deg, rgba(65,200,255,.07), rgba(83,104,255,.045)); }
.venue-search-panel label { display: grid; gap: 8px; color: #9ea8bf; font-size: .63rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.venue-search-panel select,
.venue-search-panel input { min-width: 0; width: 100%; padding: 14px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: white; background: #0a1026; outline: none; }
.venue-search-panel input::placeholder { color: #8995ae; opacity: 1; }
.venue-search-panel input:focus { border-color: rgba(65,200,255,.7); box-shadow: 0 0 0 3px rgba(65,200,255,.1); }
.venue-search-panel select option,
.venue-search-panel select optgroup { color: #081326; background: #f7f9ff; }
.venue-search-autocomplete { position: relative; display: block; min-width: 0; }
.venue-search-suggestions { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; right: 0; max-height: 290px; overflow-y: auto; padding: 6px; border: 1px solid rgba(65,200,255,.36); border-radius: 14px; background: #f7f9ff; box-shadow: 0 22px 55px rgba(0,0,0,.45); }
.venue-search-suggestions[hidden] { display: none !important; }
.venue-search-panel .venue-search-suggestion { width: 100%; min-height: 0; display: grid; gap: 2px; padding: 10px 11px; border: 0; border-radius: 9px; color: #081326; background: transparent; font-size: .82rem; font-weight: 850; letter-spacing: 0; text-align: left; text-transform: none; cursor: pointer; }
.venue-search-panel .venue-search-suggestion small { color: #5a6578; font-size: .68rem; font-weight: 700; }
.venue-search-panel .venue-search-suggestion:hover,
.venue-search-panel .venue-search-suggestion.is-active { color: #03101d; background: #9ddfff; }
.venue-search-panel button { min-height: 47px; padding: 12px 19px; border: 1px solid rgba(65,200,255,.45); border-radius: 12px; color: #03101d; background: linear-gradient(135deg, #67dcff, #42b4ff); font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.venue-search-panel button b { margin-left: 10px; }
.venue-search-panel .venue-search-reset { border-color: var(--line); color: #e7edf9; background: rgba(255,255,255,.045); }
.public-venues-status { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; color: #aeb8cf; background: rgba(255,255,255,.03); }
.public-venues-status.is-error { border-color: rgba(239,68,68,.4); color: #fecaca; }
.public-venues-status a { color: #7edcff; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.public-venues-list { display: grid; gap: 16px; }
.public-venue-card { position: relative; isolation: isolate; display: grid; grid-template-columns: clamp(110px, 14vw, 168px) minmax(0, 1fr) 145px; align-items: center; gap: clamp(18px, 3vw, 38px); min-height: 200px; overflow: hidden; padding: clamp(18px, 2.7vw, 30px); border: 1px solid var(--line); border-radius: 27px; background: linear-gradient(120deg, rgba(15,22,50,.92), rgba(7,11,28,.96)); box-shadow: 0 24px 62px rgba(0,0,0,.2); }
.public-venue-card::before { content: ""; position: absolute; z-index: -1; width: min(48vw, 620px); aspect-ratio: 1; right: 9%; top: 50%; transform: translateY(-50%); opacity: .035; background: url("assets/icona-nexp-wh.png") center / contain no-repeat; }
.public-venue-card::after { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 12% 40%, rgba(65,200,255,.1), transparent 34%), radial-gradient(circle at 88% 60%, rgba(244,76,190,.075), transparent 32%); }
.public-venue-logo { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border: 1px solid rgba(65,200,255,.32); border-radius: 22px; box-shadow: 0 15px 36px rgba(0,0,0,.25); }
.public-venue-summary { min-width: 0; }
.public-venue-game { height: 48px; max-width: 150px; display: block; margin-bottom: 11px; object-fit: contain; object-position: left center; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.public-venue-summary h3 { margin: 0 0 8px; font-size: clamp(1.55rem, 3.5vw, 3rem); letter-spacing: -.055em; }
.public-venue-location { margin: 0 0 13px; color: #9ba7c0; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.public-venue-schedule { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 9px 12px; border: 1px solid rgba(65,200,255,.25); border-radius: 999px; color: #dff7ff; background: rgba(65,200,255,.065); font-size: .78rem; font-weight: 900; }
.public-venue-schedule::before { content: "◷"; color: var(--cyan); }
.public-venue-info { width: 126px; height: 126px; justify-self: end; display: grid; place-items: center; padding: 20px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: white; background: rgba(255,255,255,.075); backdrop-filter: blur(13px); font-size: .63rem; font-weight: 950; line-height: 1.25; letter-spacing: .12em; text-align: center; text-transform: uppercase; cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.public-venue-info:hover { transform: scale(1.045); border-color: var(--cyan); background: rgba(65,200,255,.12); }
.venue-detail-dialog { width: min(980px, calc(100% - 28px)); max-height: calc(100vh - 28px); overflow: auto; padding: 0; border: 1px solid rgba(65,200,255,.28); border-radius: 28px; color: white; background: linear-gradient(145deg, #0d1533, #050817 72%); box-shadow: 0 40px 120px rgba(0,0,0,.7); }
.venue-detail-dialog::backdrop { background: rgba(1,3,11,.82); backdrop-filter: blur(8px); }
.venue-detail-close { position: sticky; z-index: 4; top: 14px; float: right; width: 44px; height: 44px; margin: 14px 14px -58px 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; background: rgba(3,6,17,.78); font-size: 1.5rem; cursor: pointer; }
.venue-detail { padding: clamp(22px, 4vw, 46px); }
.venue-detail-header { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 25px; align-items: center; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.venue-detail-logo { width: 150px; height: 150px; object-fit: cover; border: 1px solid rgba(65,200,255,.3); border-radius: 24px; }
.venue-detail-game { max-width: 140px; height: 48px; object-fit: contain; object-position: left center; }
.venue-detail h2 { margin: 8px 0; font-size: clamp(2rem, 5vw, 4.2rem); line-height: .92; letter-spacing: -.065em; }
.venue-detail-location { margin: 0; color: #aeb8cf; }
.venue-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.venue-detail-block { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.032); }
.venue-detail-block.full { grid-column: 1 / -1; }
.venue-detail-block strong { display: block; margin-bottom: 8px; color: var(--cyan); font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; }
.venue-detail-block p { margin: 0; color: #d2daea; line-height: 1.65; white-space: pre-wrap; }
.venue-detail-links { display: flex; flex-wrap: wrap; gap: 8px; }
.venue-detail-links a { padding: 9px 11px; border: 1px solid rgba(65,200,255,.24); border-radius: 999px; color: #dff7ff; background: rgba(65,200,255,.055); font-size: .72rem; font-weight: 800; text-decoration: none; }
.venue-detail-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.venue-detail-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: 14px; }

@media (max-width: 850px) {
  .venue-search-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-venue-card { grid-template-columns: 115px minmax(0, 1fr); }
  .public-venue-info { grid-column: 1 / -1; width: 100%; height: auto; min-height: 48px; border-radius: 999px; }
  .venue-detail-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .venues-directory { padding-top: 112px; }
  .venue-search-panel { grid-template-columns: 1fr; padding: 14px; }
  .public-venue-card { grid-template-columns: 82px minmax(0, 1fr); gap: 15px; min-height: 0; padding: 16px; border-radius: 21px; }
  .public-venue-logo { border-radius: 16px; }
  .public-venue-game { height: 34px; max-width: 100px; }
  .public-venue-summary h3 { font-size: 1.45rem; }
  .public-venue-location { font-size: .63rem; }
  .public-venue-schedule { align-items: flex-start; border-radius: 14px; font-size: .67rem; }
  .venue-detail-header { grid-template-columns: 90px minmax(0, 1fr); gap: 15px; }
  .venue-detail-logo { width: 90px; height: 90px; border-radius: 18px; }
  .venue-detail-game { height: 34px; max-width: 100px; }
  .venue-detail-grid { grid-template-columns: 1fr; }
  .venue-detail-block.full { grid-column: auto; }
  .venue-detail-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}