/* PLAY ON 체험하기 — 고객 체험 페이지 공용 틀(럭키픽 public/demo.html · GOAL STOP games/stop/public/demo.html).
   PC: 왼쪽 행사장 배경 속 가로형 TV(실제 /screen) · 오른쪽 휴대폰 목업(실제 컨트롤러). 모바일: 두 칸 축소 대신 게임별 배치.
   행사 색은 /config 테마에서 --accent·--bg·--ink 로 받는다. 행사장 원본 이미지는 테마 venueImage(/assets/…)가 있을 때만 배경으로 쓴다. */
:root { --accent:#a7dbe5; --bg:#0b203c; --ink:#f4f7fb; --sub:#a8b4ba; --line:#ffffff24; --panel:#ffffff0d; --head:58px; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; }
body { background:var(--bg); color:var(--ink); font:14px/1.5 "Apple SD Gothic Neo","Pretendard",system-ui,sans-serif;
  min-height:100svh; display:flex; flex-direction:column; }
a { color:inherit; }

/* 머리: PLAY ON 체험하기 · 행사명 · 게임 선택 */
.ds-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:8px 20px; border-bottom:1px solid var(--line); min-height:var(--head); }
.ds-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.ds-cta-name { font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.ds-event { color:var(--accent); font-weight:700; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-nav { display:flex; gap:8px; flex-wrap:wrap; }
.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border-radius:10px;
  border:1px solid #ffffff38; background:transparent; color:var(--ink); font:inherit; font-size:14px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; }
.ds-btn:hover { background:#ffffff14; }
.ds-btn.primary { background:var(--accent); border-color:transparent; color:#0b203c; }
.ds-btn.primary:hover { filter:brightness(.95); }
.ds-btn.warn { border-color:#ffd49a80; color:#ffe2b8; }
.ds-btn.armed { background:#ffd49a; color:#3a2600; border-color:transparent; }
.ds-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* 첫 안내 */
.ds-guide { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:10px 20px 4px; }
.ds-title { margin:0; font-size:20px; letter-spacing:.02em; }
.ds-lead { margin:0; font-size:15px; font-weight:700; color:var(--accent); }

/* 본문: 행사장 TV + 휴대폰 */
.ds-main { flex:1; min-height:540px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; padding:10px 20px; }
.ds-venue { position:relative; min-width:0; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.ds-stage { position:absolute; inset:0; container-type:size; display:grid; place-items:center;
  background:
    radial-gradient(ellipse 70% 28% at 50% 104%, rgba(255,212,150,.22), transparent 70%),
    conic-gradient(from 196deg at 12% -6%, transparent 0 9deg, rgba(150,210,255,.10) 13deg, transparent 24deg),
    conic-gradient(from 142deg at 88% -6%, transparent 0 9deg, rgba(150,210,255,.10) 13deg, transparent 24deg),
    linear-gradient(180deg, #08111f 0%, #0f1e36 52%, #191826 100%); }
.ds-stage.has-photo { background:linear-gradient(180deg, rgba(5,10,20,.35), rgba(5,10,20,.55)), var(--venue-img) center/cover no-repeat; }
.ds-stage::after { /* 관객 실루엣 — 장식(사진이 없을 때만) */
  content:""; position:absolute; left:-2%; right:-2%; bottom:-14px; height:46px; pointer-events:none;
  background:radial-gradient(circle at 50% 40%, #05070d 0 13px, transparent 14px) 0 0/42px 46px repeat-x,
             radial-gradient(circle at 50% 40%, #070a12 0 12px, transparent 13px) 21px 10px/42px 46px repeat-x; opacity:.9; }
.ds-stage.has-photo::after { display:none; }
.ds-tv { position:relative; width:min(calc(100cqw - 56px), calc((100cqh - 90px) * 16 / 9)); aspect-ratio:16/9;
  border:clamp(6px, 1.1cqw, 12px) solid #0a0b0f; border-radius:12px; background:#000;
  box-shadow:0 0 0 1px #2c2d36, 0 28px 60px rgba(0,0,0,.6), 0 0 80px rgba(120,190,255,.08); margin-bottom:22px; }
.ds-tv::after { content:""; position:absolute; left:50%; bottom:-24px; width:18%; height:18px; transform:translateX(-50%);
  background:linear-gradient(#25262e,#0d0e12); border-radius:0 0 8px 8px; }
.ds-tv iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }
/* TV 크게 보기 — TV 화면을 가리지 않게 행사장 오른쪽 아래(크게 보기 중에는 화면 위쪽에 떠 있음) */
.ds-tv-zoom { position:absolute; right:12px; bottom:8px; z-index:2; min-height:44px; padding:0 16px; border-radius:10px; border:1px solid #ffffff40;
  background:rgba(8,12,20,.78); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.ds-tv-zoom.on { position:fixed; right:18px; top:14px; bottom:auto; z-index:61; }
.ds-venue-cap { position:absolute; left:14px; bottom:10px; z-index:1; font-size:12px; color:#d9e2ea; background:rgba(5,9,16,.6); padding:3px 10px; border-radius:999px; }
.ds-tv.zoom { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(96vw, calc(92svh * 16 / 9)); z-index:60; margin:0; }
.ds-tv.zoom::after { display:none; }
.ds-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:55; }

.ds-phone-col { display:flex; flex-direction:column; align-items:center; gap:8px; min-height:0; }
.ds-phone { position:relative; flex:1; min-height:0; width:380px; border-radius:44px; padding:30px 12px 14px; background:#0b0c10;
  box-shadow:0 0 0 2px #2c2e38, 0 24px 50px rgba(0,0,0,.55); }
.ds-phone::before { /* 카메라 — 위쪽 테두리 안(화면을 가리지 않음) */ content:""; position:absolute; top:10px; left:50%; width:72px; height:12px; transform:translateX(-50%); background:#1c1e26; border-radius:8px; }
.ds-phone iframe { width:100%; height:100%; border:0; border-radius:30px; background:var(--bg); display:block; }
.ds-phone-cap { font-size:12px; color:var(--sub); }

/* 조작 방법 · 버튼 */
.ds-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; align-items:start; padding:6px 20px 8px; }
.ds-rules { min-width:0; }
.ds-rules b { font-size:12px; letter-spacing:.12em; color:var(--sub); }
.ds-rules ol { margin:4px 0 0; padding-left:20px; display:flex; flex-wrap:wrap; gap:2px 26px; }
.ds-rules li { font-size:14px; }
.ds-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.ds-help { grid-column:1 / -1; margin:0; font-size:12.5px; color:var(--sub); }
.ds-mobile-only { display:none; }

/* 데모 고지 — 한 곳 */
.ds-notice { padding:9px 20px 12px; font-size:12.5px; color:#d6dee6; border-top:1px solid var(--line); background:#ffffff08; }
#warning { padding:50px; text-align:center; }
#toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#0f2a4d; border:1px solid #ffffff2b; padding:10px 16px;
  border-radius:10px; font-size:13px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:70; max-width:92vw; }
#toast.show { opacity:1; }

/* 중간 폭(태블릿·작은 노트북): 휴대폰 목업을 조금 줄인다 */
@media (max-width:1100px) and (min-width:761px) {
  .ds-phone { width:340px; border-radius:38px; padding:26px 10px 12px; }
}

/* 작은 화면(휴대폰): PC 두 칸을 줄이지 않고 게임별 배치. 실제 휴대폰 단독 체험은 실기기 확인 전 */
@media (max-width:760px) {
  :root { --head:auto; }
  .ds-head { padding:8px 14px; }
  .ds-nav { width:100%; }
  .ds-nav .ds-btn { flex:1; }
  .ds-guide { padding:8px 14px 2px; }
  .ds-title { font-size:18px; }
  .ds-lead { font-size:13.5px; }
  .ds-main { display:flex; flex-direction:column; gap:10px; padding:8px 14px; min-height:0; }
  .ds-venue { flex:none; border-radius:12px; }
  .ds-stage { position:relative; inset:auto; display:block; container-type:normal; padding:10px; }
  .ds-stage::after { display:none; }
  .ds-tv { width:100%; margin:0; border-width:6px; }
  .ds-tv::after { display:none; }
  .ds-venue-cap { display:none; }
  .ds-phone-col { width:100%; }
  .ds-phone { width:100%; flex:none; border-radius:16px; padding:0; box-shadow:none; background:transparent; }
  .ds-phone::before { display:none; }
  .ds-phone iframe { border-radius:14px; border:1px solid var(--line); }
  .ds-phone-cap { display:none; }
  .ds-controls { grid-template-columns:1fr; padding:6px 14px 8px; }
  .ds-actions { justify-content:stretch; }
  .ds-actions .ds-btn { flex:1; }
  .ds-mobile-only { display:block; }
  .ds-pc-only { display:none; }
  .ds-notice { padding:9px 14px 14px; }
  /* 럭키픽: 집게를 보면서 조작 — TV(16:9) 위, 조작 화면 아래 */
  body[data-game="claw"] .ds-phone { height:max(540px, calc(100svh - 56.25vw - 150px)); }
  /* GOAL STOP: 현재 숫자 + STOP 중심 — 조작 화면 먼저, TV 는 펼쳐 보기 */
  body[data-game="stop"] .ds-phone-col { order:-1; }
  body[data-game="stop"] .ds-phone { height:max(560px, calc(100svh - 190px)); }
  body[data-game="stop"] .ds-venue:not(.open) .ds-stage { display:none; }
  .ds-tv-toggle { display:flex; width:100%; }
  .ds-tv-zoom { position:static; width:100%; margin-top:8px; }
  .ds-tv-zoom.on { position:fixed; width:auto; margin:0; }
}
@media (min-width:761px) { .ds-tv-toggle { display:none !important; } }
@media (prefers-reduced-motion:reduce) { #toast { transition:none; } }

/* 효과음 켜기/끄기 — 상단 작은 버튼(기본 꺼짐). 상태를 글자로도 구분 */
.ds-sfx { min-height:44px; padding:0 12px; font-size:13px; border-color:#ffffff30; color:var(--sub); }
.ds-sfx.on { color:var(--ink); border-color:var(--accent); background:#ffffff12; }
/* 체험방 안내(이전 서버·새 방) · 종료 배너(새로 시작) */
.ds-room-note { margin:2px 20px 0; font-size:12.5px; color:#ffe2b8; }
.ds-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:8px 20px 0; padding:10px 14px;
  border-radius:12px; border:1px solid #ffd49a80; background:#3a260080; color:#ffe2b8; font-weight:700; }
.ds-banner[hidden] { display:none !important; }
@media (max-width:760px) {
  .ds-brand { width:100%; }
  .ds-sfx { margin-left:auto; flex:none; }
  .ds-room-note, .ds-banner { margin-left:14px; margin-right:14px; }
}

/* EVENT ON 에서 연 체험(?from=eventon) — 돌아가기 버튼·안내. 출처 표시일 뿐 권한·행사 정보가 아니다 */
.ds-eventon { border-color:var(--accent); color:var(--accent); }
.ds-eventon-note { margin:6px 20px 0; padding:8px 12px; border-radius:10px; background:#ffffff10; border:1px solid var(--accent); font-size:13px; font-weight:700; }
.ds-eventon-note[hidden] { display:none !important; }
@media (max-width:760px) { .ds-nav .ds-eventon { flex-basis:100%; } .ds-eventon-note { margin-left:14px; margin-right:14px; } }