:root{
  --bg:#0f1220;
  --card:#171a2b;
  --accent:#8ad1ff;
  --text:#e8ecff;
  --muted:#9aa3c7;
  --radius:18px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body{ height:100%;background: #0f1220; }

body{
  margin:0;
  min-height:100dvh;                 /* 모바일 주소창 변동 대응 */
  display:grid; place-items:center;  /* 가운데 정렬 */
  background:radial-gradient(1200px 700px at 50% -10%, #1b1f35, var(--bg));
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
}

input, select, textarea{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:#0f1326; color:var(--text);
}
#viewHome{
  height:100%;
}
/* 화면 중앙의 앱 캔버스: 최대 1280x800, 그 이하 화면에선 자동으로 맞춤 */
.app{
  width:min(100vw, 1280px);
  height:min(100vh, 800px);
  background:var(--card);
  border-radius:var(--radius);
  position:relative;        /* 절대 positioned 자식들의 기준 */
  overflow:hidden;          /* 자식이 부모를 벗어나지 않도록 클리핑 */
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  contain: layout paint;    /* 성능/누수 방지(선택) */
}

/* 스크롤이 필요한 영역이 있다면 내부에 별도 컨테이너를 두고 스크롤만 허용 */
.app .scroll{
  position:absolute; inset:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:16px;
}

/* 미디어가 튀어나가지 않도록 */
.app img, .app video, .app canvas{
  max-width:100%;
  max-height:100%;
  display:block;
}

/* 칩/게임 오브젝트 등 절대 배치 컨테이너는 .bounded로 감싸서 경계 보장 */
.bounded{
  position:absolute; inset:0;
  overflow:hidden;           /* 드래그/애니메가 경계 밖으로 못 나가게 */
  border-radius:inherit;     /* 테두리와 일체감 */
}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.2); backdrop-filter: blur(6px);
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:700;
  cursor: pointer;
}


.logo{
  width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, var(--accent), #a78bfa); box-shadow:0 4px 12px rgba(138,209,255,0.35);
 background-image: url("https://dp.pohang.io/assets/img/dp_logo.png");
  background-size: contain; /* 비율 유지하면서 꽉 차게 */
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;    /* 옆에 텍스트와 같이 배치 가능 */
}
.title{font-size:18px;}
.top-actions{display:flex; gap:10px; align-items:center;}
.btn{
      height: 60px;
  border:1px solid rgba(255,255,255,0.12); background:var(--card); color:var(--text);
  padding:10px 14px; border-radius:12px; font-size:14px; cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform: translateY(-1px);}
.btn:active{transform: translateY(0);}
.btn-accent{background:linear-gradient(135deg, #2a325a, #1d2752); border-color:rgba(138,209,255,0.35);}
.btn-primary{
  WIDTH: 130PX;
    height: 60px;
  background:linear-gradient(135deg, #3257ff33, #8ad1ff22); border:1px solid rgba(138,209,255,0.4);
}
.pill{
  height: 60px;
    padding: 20px 12px; border-radius:999px; font-size:13px; color:var(--muted); background:rgba(255,255,255,0.06);}
.pill-head{padding:8px 12px; border-radius:999px; font-size:24px; color:var(--muted); background:rgba(255,255,255,0.06);}
#whoResult, #saveResult{
      background:rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    font-size:30px !important;
    margin-bottom:20px;
    margin-top:20px !important;
}
.content{flex:1; display:flex; padding:10px; gap:10px; overflow:hidden;}
.panel{
  flex:1; background:var(--card); border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.08); padding:20px;
  display:flex; flex-direction:column; gap:14px; overflow:auto;
}
.panel h2{margin:0; font-size:22px;}
.panel .sub{color:var(--muted); font-size:14px;}

.center-chooser{flex:1; display:flex; align-items:center; justify-content:center; gap:15px; flex-wrap:wrap;height: 100%;}
.big-btn {
  width:100%;
  aspect-ratio: 16/8;
  border-radius:20px;
  background:linear-gradient(160deg, #27305a, #1b234b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 10px 20px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease;
  position:relative;
  overflow:hidden;
  user-select: none; /* 텍스트 드래그 방지 */
  -webkit-tap-highlight-color: transparent; /* 모바일 하이라이트 제거 */
}

/* 눌렀을 때 효과 */
.big-btn:active {
  transform: scale(0.96) translateY(2px);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.3);
  opacity: 0.9;
}

.big-btn:hover{transform:translateY(-2px);}
.big-btn .label{font-weight:800; font-size:40px; letter-spacing:0.6px; text-shadow:0 2px 10px rgba(0,0,0,0.25);}
.big-btn .mini{font-weight:500; font-size:24px;}
.big-btn.lucky{background:linear-gradient(160deg, #2a365f, #1c2242);}
.big-btn.brain{background:linear-gradient(160deg, #423058, #26183c);}

/* .list{
  display:flex; flex-direction:column; gap:10px; 
} */
/* 5) Lucky/Brain 리스트 영역만 스크롤 */
.list {
  display:flex; flex-direction:column; gap:10px; 
  min-height: 0;            /* ⬅️ 중요: flex 자식이 스크롤 가지려면 0 필요 */
  overflow-y: auto;         /* 여기만 세로 스크롤 */
  overscroll-behavior: contain;
  padding-right: 6px;       /* 스크롤바 겹침 여유 */
  max-height: 520px;         /* 필요시 제거 */
}



.list-save{
  display:flex; gap:10px; 
  font-size: 24px;
  list-style: none;
}
.list-save li:not(:last-child)::after{
  content: ", ";
}
.card-title, .section-title{
  padding:10px;
}

.list-item-10{
  background:linear-gradient(180deg, #1a1f36, #151a2e);
  border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  transition: background .2s ease, transform .06s ease;
  margin-bottom: 10px;
  min-height:82px;
}

.list-item{
  background:linear-gradient(180deg, #1a1f36, #151a2e);
  border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  transition: background .2s ease, transform .06s ease;
}
.list-item:hover{transform:translateY(-1px);}
.li-title{font-weight:700;}
.li-sub{font-size:12px; color:var(--muted); margin-top:4px;}
.badge{padding:6px 10px; border-radius:10px; background:rgba(255,255,255,0.06); color:var(--muted);}

.detail{
  background:linear-gradient(180deg, #1a1f36, #151a2e);
  border:1px solid rgba(255,255,255,0.08); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:14px;
}
.detail h3{margin:0;}
.hr{height:1px; background:rgba(255,255,255,0.08); margin:6px 0 0;}
.muted{color:var(--muted);}
.footer-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:auto;align-items:center;}

.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); z-index:20; padding:20px;}
.sheet{width:min(720px, 94vw); background:var(--card); border-radius:20px; border:1px solid rgba(255,255,255,0.12); padding:18px; display:flex; flex-direction:column; gap:12px;}
.sheet-top{display:flex; justify-content:space-between; align-items:center;}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.row > *{flex:1;}


.team-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:12px; margin-top:8px;
}
.team-card{
  background:linear-gradient(180deg, #1a1f36, #151a2e);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:12px;
}
.team-card h4{margin:0 0 8px 0;}
.team-list{margin:0; padding-left:18px;}
.team-list li{margin:2px 0;}

/* ----- Who-Drinks (jQuery 모듈) ----- */
#gameMount .who-wrap .roll-stage{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px; margin-top:10px;
}
#gameMount .who-wrap .roll-box{
  background:linear-gradient(180deg, #1a1f36, #151a2e);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px; padding:16px; text-align:center;
  min-height:230px; display:flex; flex-direction:column; justify-content:center; gap:8px;
}
#gameMount .who-wrap .roll-label{font-size:21px; color:var(--muted);}
#gameMount .who-wrap .roll-value{
  font-size:65px; font-weight:800; letter-spacing:0.5px; min-height:36px;
}

#gameMount{
  width: 100%;
  padding: 10px;
}

@keyframes pop {
  0%{ transform: scale(0.95); }
  55%{ transform: scale(1.05); }
  100%{ transform: scale(1.0); }
}
#gameMount .who-wrap .roll-value.pop{ animation: pop 260ms ease; }


@media (max-width: 640px){
  .big-btn .label{font-size:22px;}
  .title{font-size:16px;}
}


/* ----- Save-Me (좀비 술래잡기) ----- */
#gameMount .save-wrap{display:flex;flex-direction:column;gap:12px;}
#gameMount .save-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
#gameMount .save-arena{
  display:grid;grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap:12px;margin-top:4px;
}
#gameMount .spot{
  background:linear-gradient(180deg,#1a1f36,#151a2e);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;padding:12px;
}
#gameMount .spot h4{margin:0 0 6px 0;font-size:16px;}
#gameMount .spot .count{font-size:12px;color:var(--muted);}
#gameMount .spot ul{margin:6px 0 0 18px;padding:0;}
#gameMount .result-line{font-size:14px;margin-top:4px;}
#gameMount .muted{color:var(--muted);}
#gameMount .zombie-rolling{font-weight:700;}

/* ----- Save-Me (좀비 술래잡기) ----- */

#gameMount .save-wrap{display:flex;flex-direction:column;gap:12px;}
#gameMount .save-controls{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content: right;}
#gameMount .save-stage{position:relative;}
#gameMount .save-arena{
  display:grid;grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap:12px;margin-top:4px;
}
#gameMount .spot{
  background:linear-gradient(180deg,#1a1f36,#151a2e);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;padding:12px;
}
#gameMount .spot h4{margin:0 0 6px 0;font-size:16px;}
#gameMount .spot .count{font-size:12px;color:var(--muted);}
#gameMount .spot ul{margin:6px 0 0 18px;padding:0;}
#gameMount .result-line{font-size:14px;margin-top:4px;}
#gameMount .muted{color:var(--muted);}
.save-stage{
  margin-top: 180px;
}

/* Zombie */
#zombie{position:absolute; left:50%; top:-215px; width:120px; height:120px; margin-left:-60px; pointer-events:none; opacity:1;}
#zombie .inner{font-size:90px; display:block;}
#zombie.z-moving .inner{animation: z-wobble .5s linear infinite;}
@keyframes z-wobble{
  0%{ transform: rotate(-6deg); }
  50%{ transform: rotate(6deg); }
  100%{ transform: rotate(-6deg); }
}

.spot {
  transition: opacity 0.4s ease;
}

.spot.dimmed {
  opacity: 0.2;              /* 디절브 느낌 */
  pointer-events: none;      /* 클릭 막기 */
}

/* 맥주잔 css */
.cardflip-wrap .grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; margin-top:10px; }
#cardGrid { perspective: 1000px; }

.cf-card {
  position:relative; width:100%; aspect-ratio:3/2; border-radius:12px;
  cursor:pointer; user-select:none; background:transparent; border:none; padding:0;
}
.cf-card.disabled { 
  pointer-events:none; 
    background: #fff;
}

.cf-card-inner{
  position:absolute; inset:0; border-radius:12px; overflow:hidden;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform .35s ease;
}

.cf-face{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

.cf-front{
  background:linear-gradient(160deg,#27305a,#1b234b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 20px rgba(0,0,0,.35);
  color:#9fb4ff; font-weight:700; letter-spacing:1px; font-size:18px;
  z-index:2; /* 기본은 앞면 위 */
}

.cf-back{
  background:#0f1a2b;
  transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
  font-size:40px; line-height:1;
  z-index:1;
}

.cf-card.flipped .cf-card-inner { transform: rotateY(180deg); }
.cf-card.safe .cf-back { outline:3px solid rgba(80,200,120,.6); }
.cf-card.bomb .cf-back { outline:3px solid rgba(255,80,80,.7); }
.order-list { display:flex; gap:6px; flex-wrap:wrap; }
.order-item { padding:12px 18px; border-radius:10px; background:#1b234b; color:#d7defa; }
.order-item.on { background:#4a5af7; color:#fff; }
.pop { animation: pop .22s ease; } @keyframes pop { 0%{transform:scale(.96)} 100%{transform:scale(1)} }

/* 3D 플립 */
.cf-card.flipped .cf-card-inner{
  transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}

/* ✅ 폴백: 혹시 3D가 꼬일 경우에도 뒷면을 강제로 위로 */
.cf-card.flipped .cf-front{ z-index:1; }
.cf-card.flipped .cf-back{ z-index:2; }

/* (선택) 안전/폭탄 테두리 */
.cf-card.safe .cf-back { outline:3px solid rgba(80,200,120,.6); }
.cf-card.bomb .cf-back { outline:3px solid rgba(255,80,80,.7); }

.turn-line{
  padding: 12px 10px;
}


#flipResult{
  margin-right:auto;
  /* 선택: 한 줄 처리 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

    background:rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    min-height: 60px;
    font-size:22px !important;
    margin-bottom:20px;
    margin-top:20px !important;
}

/* 폭탄 뒤집힌 뒤 나머지 카드 흐리게 */
.cf-card.dim { opacity: .25; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease; }


/* 룰렛 */
#rouletteResult{
    background:rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    min-height: 60px;
    font-size:30px !important;
    margin-bottom:20px;
    margin-top:20px !important;
    width:60%;
    margin:0 auto;
}
#gameDesc{
  line-height: 30px;
}


/* 죽음의 주사위 */
  .dd-wrap{ display:flex; flex-direction:column; gap:10px; }
  .dd-row{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
  .dd-card{
    width:15%; height:180px; border-radius:12px; background:#1b2030; color:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 16px rgba(0,0,0,0.35);
    position:relative; transition:transform .15s ease, opacity .25s ease, filter .25s ease;
  }
  .dd-card.dead{ filter:grayscale(100%) contrast(0.7); opacity:0.55; }
  .dd-card .avatar{ font-size:60px; line-height:1.2; }
  .dd-card .name{ font-size:30px; margin-top:6px; text-align:center; max-width:64px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .dd-gun{
    width:64px; height:30px; position:absolute; top:-34px; left:50%; transform:translateX(-50%);
    background: linear-gradient(180deg,#444,#111); border-radius:6px; box-shadow:0 6px 12px rgba(0,0,0,.4);
  }
  .dd-gun:after{ content:''; position:absolute; right:-18px; top:8px; width:18px; height:6px; background:#666; border-radius:3px; }
  .dd-gun.shoot { animation: dd-bang .18s ease; }
  @keyframes dd-bang { 0%{transform:translateX(-50%) scale(1);} 50%{transform:translateX(-50%) scale(1.05);} 100%{transform:translateX(-50%) scale(1);} }

  .dd-stage{ position:relative; padding-top:45px; }
  .dd-dice{ display:flex; gap:12px; justify-content:center; align-items:center; }
  .dd-die{
    width:120px; height:120px; border-radius:10px; background:#fff; color:#111; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:60px; box-shadow:0 6px 14px rgba(0,0,0,.3); user-select:none;
  }
  .dd-die.spin{ animation: dd-spin .7s linear infinite; }
  @keyframes dd-spin{ 0%{transform:rotate(0)}100%{transform:rotate(360deg)} }

  .pill-head { background:#243055; color:#bcd1ff; padding:10px 20px; border-radius:999px;  }
  .result-line { text-align:center; font-size:14px; opacity:.9; }
  .result-line.muted { opacity:.6; }
  .footer-actions{ display:flex; gap:8px; justify-content:center; margin-top:6px; }
  .btn{ padding:10px 16px; border-radius:10px; background:#29314a; color:#fff; border:none; cursor:pointer; }
  .btn:hover{ filter:brightness(1.05); }
  .btn-primary{ background:#3a57ff; }
  .btn-danger{ background:#ff3b3b; }

   /* 🔪 칼 포인터 */
        .dd-knife{
          position:absolute; top:78px; left:8px; transform:translateX(-50%);
          font-size:120px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
          z-index: 99999;
        }
        .dd-knife.shoot { animation: dd-stab .18s ease;  z-index: 99999;}
        @keyframes dd-stab { 0%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.12)} 100%{transform:translateX(-50%) scale(1)} }
#ddResult{
    background:rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    min-height: 60px;
    font-size:30px !important;
    margin-bottom:20px;
    margin-top:20px !important;
    width:80%;
    margin:0 auto;
}
#ddAssign{
  width:120px;
}


/* 사디라 타기 */
.ladder-stage { position:relative; width:100%; max-width:820px; margin:0 auto; }
.ladder-top, .ladder-bottom {
  display:grid; gap:0; align-items:end; justify-items:center; margin:6px 0;
}
.ladder-top .beer { font-size:22px; line-height:1; transform:translateY(-4px); }
.ladder-bottom .name { padding:4px 8px; border-radius:10px; background:#1e243e; color:#ddd; font-size:14px; }

.ladder-area { position:relative; height:380px; border-radius:14px;
  background:linear-gradient(160deg, #131833, #0d122b);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
  overflow:hidden;
}

/* 레이어링 */
.vline { position:absolute; top:16px; bottom:16px; width:3px; background:#3a4474; border-radius:3px; z-index:1; }
.rung  { position:absolute; height:3px; background:#6b77b7; border-radius:2px; z-index:2; }
.path-v{ position:absolute; width:5px; background:#ffb703; border-radius:3px; z-index:3; }
.path-h{ position:absolute; height:5px; background:#ffb703; border-radius:3px; z-index:3; }

.pop { animation:pop .18s ease; }
@keyframes pop { 0%{transform:scale(.95)} 100%{transform:scale(1)} }

@media (max-width:600px){
  .ladder-area { height:360px; }
  .ladder-bottom .name { font-size:13px; }
}

#ladderBottom .name.dimmed {
  opacity: 0.4;
}
#ladderResult, #aptResult{
    background:rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    min-height: 60px;
    font-size:23px !important;
    margin-bottom:20px !important;
    margin-top:20px !important;
    width:100%;
    margin:0 auto;
}

/* 아파트 아파트 */
.apt-wrap{ display:flex; gap:20px; align-items:stretch; }
.apt-left{ flex:1; display:flex; }
.apt-right{ flex:1; display:flex; flex-direction:column; }
.apt-building{
  position:relative; width:100%; border:2px solid #2b3155; border-radius:12px;
  background: linear-gradient(180deg,#1a2143,#121735);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.35);
  display:flex; flex-direction:column-reverse;  /* 1층이 아래쪽으로 보이게 */
  overflow:hidden;
}
.apt-floor{
  position:relative;
  border-top:1px solid rgba(255,255,255,.08);
  min-height:80px; display:flex; align-items:center; justify-content:flex-start;
  padding:6px 10px; gap:8px; color:#e8edff; font-weight:600;
}
.apt-floor .fno{
  flex:1; text-align:right; opacity:.7; font-weight:700;
}
.apt-floor .fname{
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9;
}
.apt-floor.active{
  background: linear-gradient(90deg, rgba(255,235,59,.18), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(255,235,59,.25);
  color:#fff6bf;
}
.apt-floor.winner{
  background: linear-gradient(90deg, rgba(76,175,80,.24), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(76,175,80,.35);
  color:#dbffdc;
}
.apt-right .type-line{
  min-height:163px; font-size:28px; font-weight:800; letter-spacing:.02em;line-height: 50px;
  color:#dce4ff; padding:03px 12px; border-radius:10px;
  background:linear-gradient(160deg, #1e2650, #171d3e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.apt-right .rand-boxes{
  display:flex; gap:10px; margin-top:12px;
}
.mini-box{
  flex: 1; padding:10px 12px; border-radius:10px;  min-height:145px;
  background:linear-gradient(160deg, #242b54, #171d3e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  color:#dce4ff;
}
.mini-title{ font-size:28px; opacity:.75; margin-bottom:6px; }
.mini-value{ font-size:60px; font-weight:800; text-align: center; }
.result-line{
  margin-top:14px; font-size:18px; color:#d7ffec;
}
.muted{ color:#99a3c7; }
.footer-actions{ margin-top:16px; display:flex; gap:8px; }
.btn{
  padding:10px 16px; border-radius:10px; background:#2a325f; color:#e9edff; border:none; cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn-primary{ background:#4752d1; }
.pop{ transform:scale(1.06); transition:transform .15s ease; }


/* ox 퀴즈- 브레인 */
/* ===== 레이아웃 / 공통 ===== */
  .ox-wrap{display:flex; flex-direction:column; gap:14px;}
  .ox-top{display:flex; align-items:flex-start; justify-content:end; gap:10px;}
  .pill-head{background:#17204a; border:1px solid rgba(255,255,255,.12); padding:4px 10px; border-radius:999px; font-size:12px; opacity:.95}
  .ox-q{font-size:20px; font-weight:700; letter-spacing:.2px}
  .ox-stage{display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:10px; align-items:stretch}

  /* ===== O / X 드롭존 ===== */
  .ox-zone{
    position:relative; border-radius:18px; min-height:260px;
    background:linear-gradient(160deg, #12162a, #0d1122);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 20px rgba(0,0,0,.35);
    overflow:hidden;
  }
  .ox-zone .zone-title{position:absolute; top:10px; left:12px; font-size:14px; opacity:.7}
  .ox-zone .watermark{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:120px; font-weight:900; opacity:.08; user-select:none; pointer-events:none;}
  .drop-hl{outline:2px solid rgba(255,255,255,.25)}
  .drop-correct{box-shadow:inset 0 0 0 2px #2f8f4a !important; background:rgba(15,60,30,.15) !important}
  .drop-wrong{box-shadow:inset 0 0 0 2px #c24855 !important; background:rgba(80,20,25,.12) !important}

  /* ===== 중앙 라인/이름 영역 ===== */
  .ox-center{display:flex; flex-direction:column; gap:10px;}
  .mid-title{font-size:12px; opacity:.7}
  .ox-lines{
    position:relative; border-radius:18px; padding:12px; overflow:hidden;
    background:linear-gradient(160deg, #0d1226, #0b0f1d);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);min-height:260px;
  }
  .ox-lines::before{content:""; position:absolute; inset:0; background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 28px); opacity:.35; pointer-events:none}

  /* === 핵심: 로컬 좌표를 쓸 것이므로 nameBin, zoneO, zoneX 모두 position:relative === */
  #nameBin{ position:relative; width:100%; height:220px; }

  /* ===== 이름 칩 ===== */
  .chip{
    position:absolute; transform:translate(-50%,-50%); top:50%; left:50%;
    background:#1b2142; border:1px solid rgba(255,255,255,.12);
    padding:8px 12px; border-radius:999px; font-weight:600; cursor:grab; user-select:none;
    box-shadow:0 8px 16px rgba(0,0,0,.35); color:#fff; touch-action:none; z-index:10;
  }
  .chip.dragging{opacity:.97; cursor:grabbing; box-shadow:0 12px 24px rgba(0,0,0,.5)}
  .chip.correct{background:#10351f !important; border-color:#2f8f4a !important}
  .chip.wrong{background:#3a1016 !important; border-color:#c24855 !important}

  /* ===== 결과/버튼/점수판 ===== */
  .result-line{padding:10px 12px; border-radius:12px; background:#0d1226; opacity:.9}
  .muted{opacity:.6}
  .ox-footer{
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    justify-content: right;

  }
  .btn{padding:10px 14px; border-radius:12px; background:#1f274a; border:1px solid rgba(255,255,255,.12); cursor:pointer}
  .btn-primary{background:#3a47a7}
  .btn-ghost{background:transparent; border:1px dashed rgba(255,255,255,.25)}

  /* 점수판: 수평 칩 */
  .scoreboard{min-width:240px; padding:10px; border-radius:12px; background:#0d1226;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)}
  .scoreboard h4{margin:0 0 6px 0; font-size:14px; opacity:.85}
  #scoreRows{display:flex; flex-wrap:wrap; gap:8px}
  .chip-score{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
    background:#1b2142; border:1px solid rgba(255,255,255,.12); font-size:13px; font-weight:600}
  .chip-score strong{font-weight:700; color:#ffd54f}

  .pop{animation:pop .22s ease}
  @keyframes pop{0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)}}

.ex10{
  background: linear-gradient(180deg, #1a1f36, #151a2e);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding:10px;
    line-height: 3;


  }

  .btn-measure{
    width:120px;

  }


/* ------- */
/* 승마게임 */
/* ------- */
.hr-wrap{display:flex; flex-direction:column; gap:10px;}
.hr-head{display:flex; align-items:center; justify-content:space-between;}
.hr-track{
  position:relative; width:100%; height:auto; 
  display:flex; flex-direction:column; gap:10px; margin:6px 0 2px;
}
.hr-lane{
  position:relative; width:100%; height:64px; 
  background:rgba(255,255,255,0.04);
  border-radius:14px; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.hr-finish{
  position:absolute; top:0; right:72px; height:100%;
  width:4px; background:linear-gradient(180deg, #ff8a8a, #ff3b3b);
  box-shadow: 0 0 10px rgba(255,59,59,0.45);
}
.hr-horse{
  position:absolute; top:50%; left:8px; transform:translate(0,-50%);
  width:60px; height:44px; border-radius:10px;
  background:linear-gradient(160deg, #2a335f, #1f2750);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform .08s linear, left .1s linear;
}
.hr-horse .emoji{font-size:30px;}
.hr-name{
  position:absolute; top:9px; left:76px; 
  background:rgba(0,0,0,0.25); padding:3px 8px; border-radius:999px;
  font-size:30px; letter-spacing:0.2px;
}
.hr-rank{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  padding:4px 10px; border-radius:12px; font-size:12px; display:none;
}
.hr-lane.finished .hr-rank{ display:inline-block; }
.hr-meta{display:flex; gap:6px; flex-wrap:wrap;}
.pill-head{background:rgba(255,255,255,0.08); padding:6px 10px; border-radius:999px; font-size:12px;}
.result-line{padding:10px 12px; background:rgba(255,255,255,0.03); border-radius:10px; min-height:22px;}
.result-line.muted{opacity:0.7}
.footer-actions{display:flex; gap:8px; justify-content:flex-end;}
.btn{padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.06); cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn-primary{background:linear-gradient(160deg, #5aa6ff, #347bff); border:none}
.pop{animation:pop .22s ease}
@keyframes pop{0%{transform:scale(1.0)} 50%{transform:scale(1.06)} 100%{transform:scale(1.0)}}

/* 팝업 */
.hr-overlay{display:none; position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,0.5);
  align-items:center; justify-content:center;}
.hr-modal{
  width:min(440px, 90vw); background:linear-gradient(160deg, #242a4a, #1a1f3c);
  border-radius:16px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
.hr-modal h3{margin:0 0 4px 0}
.hr-modal .muted{opacity:.8; font-size:14px; margin-bottom:10px}
.hr-modal .btn-row{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}


/* 야바위 */
 .yg-wrap{display:flex; flex-direction:column; gap:14px;}
        .yg-stage{display:flex; align-items:center; justify-content:center; padding:20px 8px;}
        .yg-table{
          position:relative; width:90%; height:300px; margin:auto;
          border-radius:18px; background:linear-gradient(160deg,#27305a,#1b234b);
          box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.35);
          overflow:hidden;
        }
        .yg-cards{position:absolute; left:45%; top:49%; transform:translate(-50%,-50%); height:210px;}
        .yg-card{
          position:absolute; width:150px; height:210px; border-radius:14px;
          transform-style:preserve-3d; transition: transform .42s cubic-bezier(.22,.8,.32,1);
          box-shadow: 0 8px 18px rgba(0,0,0,.35);
          cursor:pointer;
        }
        .yg-face{position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; overflow:hidden;}
        .yg-back{
          background: radial-gradient(120px 80px at 50% 20%, rgba(255,255,255,.08), rgba(0,0,0,0) 55%), #0f152b;
          display:flex; align-items:center; justify-content:center; font-size:28px;
          box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
        }
        .yg-front{
          background: linear-gradient(135deg, #2a2f49, #161a2f);
          transform: rotateY(180deg);
          display:flex; align-items:center; justify-content:center; font-size:44px;
          box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
        }
        .yg-card.is-flipped{ transform: translateX(var(--x,0px)) rotateY(180deg); }
        .yg-card{ transform: translateX(var(--x,0px)) rotateY(0deg); }

        .yg-side{font-size:18px; text-align:center; opacity:.9}
        .yg-result{padding:20px 12px; border-radius:12px; background:rgba(255,255,255,0.06); text-align:center; font-size:22px;margin-top:10px;margin-bottom: 10px;}
        .yg-footer{display:flex; gap:10px; justify-content:center;}
        .btn{padding:10px 14px; border-radius:12px; background:#2a315d; color:#e8ecff; border:none; cursor:pointer;}
        .btn-primary{background:#4a66ff;}

        /* 중앙 팝업 오버레이 (정확 중앙 고정) */
        .yg-pop{position:fixed; inset:0; display:none; z-index:99999; background:rgba(0,0,0,.6);}
        .yg-pop .box{
          position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
          width:min(520px,90vw); border-radius:18px; padding:22px;
          background:var(--card,#171a2b); color:var(--text,#e8ecff);
          box-shadow: 0 20px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
          text-align:center;
        }
        .yg-pop h3{margin:0 0 8px 0; font-size:20px;}
        .yg-pop p{margin:0 0 16px 0; opacity:.95; font-size:24px;padding:20px}
        .yg-pop .btns{display:flex; gap:10px; justify-content:center;}
        

/* =========================
   📱 Mobile overrides (≤500px)
   ========================= */
@media (max-width: 500px){
  .yg-table{
    width:100%;
    height:190px;
  }
  .yg-result{
    font-size:16px;
  }
  .yg-cards{
      left:36%;
      top:72%;
  }

  .yg-card{
    width:80px;
    height:120px;
  }
  #tenClose, #rankClose{
    line-height: 30px;
  }
  #tenTimer{
    font-size: 80px !important;
  }
  .btn-measure{
    width:55px;

  }

  #whoResult, #saveResult{
    font-size: 18px !important;
  }
  .roll-value{
     font-size: 18px !important;
  }
  .panel{
    display: block;
    padding:10px 10px 0 10px;
  }
  .panel h2{margin:0; font-size:22px; padding:0 0 5px 0px }
  .panel .sub{color:var(--muted); font-size:14px;padding:5px 0 15px 0}

  .cf-front{
    font-size:12px;
  }

  .content{
    max-height: calc(100dvh - 100px) ;   /* 기기 화면 높이 이상 커지지 않도록 */
    overflow-y: auto;     /* 세로 스크롤 허용 */
    overflow-x: hidden;   /* 가로는 숨김 */
    display: grid;
  }
  #btnTeamView, #btnTeam{
    padding: 5px 5px;
    font-size: 0.7em;
  }
  #teamSummary{
    display: none;
  }
  #mainImg img{
    max-width:300px !important;
  }
  /* 레이아웃 기본 */
  body{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .app{
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .app .scroll{ padding: 12px; }

  /* 상단바/공통 버튼 */
  .topbar{ padding: 12px 14px; }
  .logo{ width: 28px; height: 28px; }
  .title{ font-size: 16px; }
  .top-actions{ gap: 8px; }
  .btn{
    height: 48px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .btn-primary{ height: 48px; }
  .pill{ height: 44px; padding: 10px 12px; font-size: 12px; }
  .pill-head{ font-size: 14px; padding: 8px 12px; }

  /* 홈 그리드 / 리스트 */
  .center-chooser{ gap: 10px; padding: 8px; }
  .big-btn{ aspect-ratio: 16/10; }
  .big-btn .label{ font-size: 20px; }
  .big-btn .mini{ font-size: 16px; }
  .list{
    max-height: 70vh;   /* 리스트 스크롤 여유 */
    padding-right: 4px;
    padding-bottom: 10px;
  }

  /* 공통 카드/텍스트 */
  .list-item, .list-item-10{
    min-height: 68px;
    padding: 12px;
  }
  .li-sub{ font-size: 11px; }

  /* 게임 마운트 공통 패딩 */
  #gameMount{ padding: 8px; }

  /* ========== 범인 찾기(지문 스캐너) ========== */
  .scanner-grid{
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 8px !important;
  }
  .scanner{ padding: 10px; border-radius: 14px; }
  .scan-pad{ width: 68px; height: 88px; border-radius: 12px; }
  .scan-name{ font-size: 12px; }
  #findResult{
    font-size: 16px !important;
  }
  /* ========== Save-Me(좀비) ========== */
  #gameMount .save-controls{ gap: 10px; justify-content: flex-end; }
  #gameMount .save-arena{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }
  .save-stage{ margin-top: 120px; }
  #zombie{ top:-160px; width:90px; height:90px; margin-left:-45px; }
  #ddAssign{ width: 100px; }

  /* ========== 카드 뒤집기 ========== */
  .cardflip-wrap .grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .cf-card{ border-radius: 10px; }
  .order-item{ padding: 10px 14px; font-size: 13px; }

  #flipResult{
    font-size: 18px !important;
    min-height: 50px;
    margin-top: 12px !important;
    margin-bottom: 12px;
  }

  /* ========== 룰렛 ========== */
  #rouletteResult{
    width: 100%;
    font-size: 22px !important;
    min-height: 52px;
  }

  /* ========== 죽음의 주사위 ========== */
  .dd-row{ gap: 8px; }
  .dd-card{
    flex: 1 1 45%;      /* 2열 배치 */
    height: 140px;
  }
  .dd-card .avatar{ font-size: 46px; }
  .dd-card .name{ font-size: 22px; max-width: 56px; }
  .dd-die{ width: 90px; height: 90px; font-size: 44px; }
  #ddResult{ width: 100%; font-size: 16px !important; }

  /* ========== 사다리 타기 ========== */
  .ladder-area{ height: 300px; }
  .ladder-bottom .name{ font-size: 12px; padding: 2px 6px; }
  #ladderResult, #aptResult{
    font-size: 18px !important;
    width: 100%;
  }

  /* ========== 아파트 게임 ========== */
  .apt-wrap{ flex-direction: column; gap: 12px; }
  .apt-right .type-line{
    min-height: 120px;
    font-size: 20px;
    line-height: 36px;
    padding: 6px 10px;
  }
  .apt-right .rand-boxes{
    flex-direction: column;
  }
  .mini-box{
    min-height: 110px;
  }
  .mini-title{ font-size: 18px; }
  .mini-value{ font-size: 40px; }

  /* ========== OX 퀴즈 ========== */
  .ox-top{ justify-content: space-between; }
  .ox-q{ font-size: 18px; }
  .ox-stage{
    grid-template-columns: 1fr; /* 세로 1열 */
    gap: 10px;
  }
  .ox-zone{ min-height: 200px; }
  #nameBin{ height: 200px; }
  .chip{ padding: 6px 10px; font-size: 12px; }

  /* ========== 승마 게임 ========== */
  .hr-track{ gap: 8px; }
  .hr-lane{ height: 56px; }
  .hr-horse{ width: 50px; height: 38px; left: 6px; }
  .hr-horse .emoji{ font-size: 26px; }
  .hr-name{
    top: 8px; left: 64px;
    font-size: 14px;
    padding: 2px 8px;
  }
  .hr-finish{ right: 48px; }
  .hr-rank{ font-size: 11px; padding: 3px 8px; }

  /* ========== 팀/그리드 공통 ========== */
  .team-grid{
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .team-card{ padding: 10px; }
  .team-list{ padding-left: 16px; }

  /* 공통 결과/푸터 정리 */
  .result-line{ font-size: 14px; }
  .footer-actions{ gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

}