/* =====================================================================
   choice.css — 입구 선택(게임 / 생성) · 게임 창
   ===================================================================== */
.hxc-choice { position: relative; border-top: 1px solid #140808; background: var(--bg); scroll-margin-top: 44px; }
.hxc-choice-head { max-width: 1180px; margin: 0 auto; padding: 64px 24px 28px; }
.hxc-choice-head h2 { font-family: var(--disp); font-weight: 700; font-size: clamp(30px, 4vw, 52px); letter-spacing: 4px; line-height: 1; color: var(--hi); }
.hxc.is-ko .hxc-choice-head h2 { font-family: var(--kr); letter-spacing: 0; }

.hxc-choice-grid { max-width: 1180px; margin: 0 auto; padding: 0 24px 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.hxc-door {
  position: relative; z-index: 10000;                 /* 스토어 CRT 가로선 위 (영상·이미지가 깨끗하게) */
  display: grid; grid-template-rows: 1fr auto auto auto auto; text-align: left;
  min-height: 460px; padding: 0 26px 26px; overflow: hidden; cursor: pointer;
  background: var(--surf); border: 1px solid #1e1e1e; color: inherit; font: inherit;
  transition: border-color .2s, box-shadow .25s, transform .25s;
}
.hxc-door:hover, .hxc-door:focus-visible { border-color: var(--red-dk); box-shadow: 0 0 34px rgba(200,30,30,.16); transform: translateY(-3px); }
.hxc-door::after {                                   /* 하단 붉은 글로우 — 스토어 카드 호버와 같은 결 */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  box-shadow: inset 0 -2px 0 rgba(200,20,20,.85);
  background: linear-gradient(to top, rgba(140,10,10,.2), transparent 55%);
}
.hxc-door:hover::after, .hxc-door.is-on::after { opacity: 1; }

.door-media { position: relative; margin: 0 -26px 22px; min-height: 260px; overflow: hidden; background: #060606; }
.door-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: .85; }
.door-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--surf)); }

.door-fan { display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 70%, rgba(64,192,64,.08), transparent 70%), #060606; }
.door-fan img { position: absolute; bottom: -4%; width: 44%; transition: transform .4s cubic-bezier(.2,.7,.3,1); filter: drop-shadow(0 16px 18px rgba(0,0,0,.6)); }
.door-fan img.f0 { left: 8%; transform: rotate(-8deg); }
.door-fan img.f1 { left: 28%; z-index: 2; width: 46%; }
.door-fan img.f2 { right: 8%; transform: rotate(8deg); }
.hxc-door:hover .door-fan img.f0 { transform: rotate(-12deg) translateX(-10px); }
.hxc-door:hover .door-fan img.f2 { transform: rotate(12deg) translateX(10px); }

.door-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 4px; color: #aa2828; }
.door-title { margin-top: 8px; font-family: var(--disp); font-size: 34px; font-weight: 700; letter-spacing: 3px; color: var(--hi); line-height: 1.05; }
.hxc.is-ko .door-title { font-family: var(--kr); letter-spacing: 0; font-size: 30px; }
.door-sub { margin-top: 8px; font-family: var(--mono); font-size: 13px; letter-spacing: .5px; color: #6a6a6a; }
.hxc.is-ko .door-sub { font-family: var(--kr); font-size: 15px; letter-spacing: 0; }
.door-go {
  justify-self: start; margin-top: 20px; padding: 10px 18px;
  border: 1px solid var(--red-dk); background: #1a0404; color: var(--red);
  font-family: var(--mono); font-size: 12px; letter-spacing: 4px; transition: all .15s;
}
.hxc.is-ko .door-go { font-family: var(--kr); font-weight: 700; letter-spacing: 1px; }
.hxc-door:hover .door-go { border-color: var(--red); color: #ee4444; background: #280606; }

/* ---------- 게임 창 ---------- */
.hxc-game {
  position: fixed; inset: 0; z-index: 10002; display: flex; flex-direction: column;
  background: rgba(5,3,4,.96);
}
.hxc-game[hidden] { display: none; }
.hxc-game-bar {
  display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px 0 20px;
  border-bottom: 1px solid #2a0a0a; font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: #aa2828;
}
.hxc-game-x {
  width: 36px; height: 36px; background: #1a0404; border: 1px solid var(--red-dk); color: var(--red);
  font-size: 16px; cursor: pointer;
}
.hxc-game-x:hover { border-color: var(--red); background: #280606; }
.hxc-game-frame { flex: 1; width: 100%; border: 0; background: #000; }

@media (max-width: 899px) {
  .hxc-choice-head { padding: 48px 16px 20px; }
  .hxc-choice-grid { grid-template-columns: 1fr; padding: 0 16px 52px; gap: 14px; }
  .hxc-door { min-height: 0; padding: 0 18px 20px; }
  .door-media { margin: 0 -18px 16px; min-height: 200px; }
  .door-title { font-size: 26px; }
  .hxc.is-ko .door-title { font-size: 24px; }
}