/* 소이오락실 공용 스타일 — 색이나 여백을 바꾸려면 여기만 고치면 됩니다. */

@font-face{
  font-family:'DungGeunMo';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/DungGeunMo.woff') format('woff');
  font-display:swap;
}

:root{
  --red:#FF3B3B;
  --bg:#121017;
  --surface:#1B1823;
  --surface-2:#252030;
  --line:#322C41;
  --text:#F0ECF5;
  --muted:#8C8399;
  --amber:#FFC94A;
  --mint:#57E0B0;
  --rose:#FF5C8A;

  --r:14px;
  --r-sm:8px;
  --pad:clamp(16px,4vw,28px);
  --max:1080px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.01em;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;}
.num{font-family:'DungGeunMo',ui-monospace,monospace;font-weight:400;letter-spacing:.02em;}
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 72px;}
.hide{display:none!important;}

/* ── 상단 바 ─────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(18,16,23,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .in{
  max-width:var(--max);margin:0 auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:14px;
}
.brand{display:flex;align-items:center;gap:9px;font-size:17px;}
.brand .mark{
  width:27px;height:27px;border-radius:7px;flex:none;
  background:var(--red);color:#FFF4F4;
  display:grid;place-items:center;font-size:16px;
  font-family:'DungGeunMo',monospace;
  box-shadow:0 0 12px rgba(255,59,59,.45);
}
.brand .king{
  font-style:normal;font-size:1.10em;font-weight:800;
  color:var(--red);text-shadow:0 0 10px rgba(255,59,59,.35);
}
.topbar .sp{flex:1;}
.back{color:var(--muted);font-size:14px;}
.back:hover{color:var(--text);}

/* ── 버튼 ────────────────────────────── */
.btn{
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  padding:9px 15px;border-radius:var(--r-sm);font:inherit;font-size:14px;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.btn:hover{background:#2F2940;border-color:#443B58;}
.btn-primary{
  background:var(--amber);border-color:var(--amber);color:#1A1200;font-weight:600;
  padding:12px 26px;font-size:16px;
}
.btn-primary:hover{background:#FFD76F;border-color:#FFD76F;}
.btn-icon{padding:8px 11px;font-size:15px;line-height:1;}
.btn[aria-pressed="false"]{color:var(--muted);}

/* ── 헤드라인 ────────────────────────── */
.hero{padding:48px 0 0;max-width:620px;margin:0 auto;text-align:center;}
.hero h1{margin:0;font-size:clamp(28px,6vw,42px);line-height:1.22;letter-spacing:-.03em;font-weight:700;}
.hero h1 .king{
  font-style:normal;font-size:1.10em;font-weight:800;
  color:var(--red);
  text-shadow:0 0 18px rgba(255,59,59,.55), 2px 2px 0 rgba(120,0,0,.35);
}
.hero p{margin:12px 0 0;color:var(--muted);font-size:16px;}
.hero .sub{
  margin:10px 0 0;
  font-family:'Gungsuh','궁서','GungsuhChe','Batang','바탕',
              'Nanum Myeongjo','Apple SD Gothic Neo',serif;
  font-weight:700;
  font-size:clamp(22px,5.2vw,32px);
  color:var(--amber);letter-spacing:-.01em;
}
.hero .sub .sp{display:inline-block;width:.18em;}
.hero .sub + p{margin-top:10px;font-size:15px;}

/* ── 타일 ────────────────────────────── */
.tiles{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.tile{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  transition:border-color .16s, transform .16s;
}
.tile:hover,.tile:focus-visible{border-color:#4A4062;transform:translateY(-2px);}
.tile .art{aspect-ratio:1;display:block;width:100%;background:#0E0C14;}
.tile .meta{padding:12px 13px 14px;}
.tile .name{font-size:15px;font-weight:600;letter-spacing:-.02em;}
.tile .sub{margin-top:2px;font-size:13px;color:var(--muted);
  display:flex;justify-content:space-between;gap:8px;}
.tile .sub b{color:var(--mint);font-weight:400;}
.tile.lead{grid-column:span 2;grid-row:span 2;}
.tile.lead .name{font-size:19px;}
.tile.soon{opacity:.5;pointer-events:none;}

.tile .art .blink{animation:blink 1.4s steps(2) infinite;}
.tile .art .fall{animation:fall 2.6s linear infinite;}
@keyframes blink{50%{opacity:.2;}}
@keyframes fall{from{transform:translateY(-14px);}to{transform:translateY(58px);}}

/* ── 섹션 / 기록 ─────────────────────── */
.sec{margin-top:44px;}
.sec h2{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--muted);text-align:center;
  letter-spacing:.06em;text-transform:none;}
.records{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.records li{display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--line);font-size:15px;}
.records li:last-child{border-bottom:0;}
.records .g{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:center;}
.records .who{color:var(--muted);font-size:14px;}
.records .v{color:var(--mint);font-size:16px;}
.records .none{color:var(--muted);font-size:14px;justify-content:center;}
ul,ol{list-style:none;margin:0;padding:0;}

/* ── 게임 화면 ───────────────────────── */
.stage{
  position:relative;background:#0B0910;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;touch-action:none;
}
.stage canvas{display:block;width:100%;height:auto;}
.stage::after{             /* 유일하게 남긴 브라운관 흔적 */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(rgba(255,255,255,.035) 0 1px, transparent 1px 3px);
}
.hud{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:0 2px 10px;font-size:13px;color:var(--muted);}
.hud b{font-family:'DungGeunMo',monospace;font-size:19px;color:var(--text);font-weight:400;}
.hud .combo{color:var(--amber);}

.overlay{
  position:absolute;inset:0;z-index:10;   /* 게임 안 버튼(폭탄 등)보다 위 */
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:14px;
  padding:26px;background:rgba(11,9,16,.9);
}
.overlay h2{margin:0;font-size:clamp(22px,6vw,30px);letter-spacing:-.02em;}
.overlay p{margin:0;color:var(--muted);font-size:14px;max-width:290px;}
.overlay .big{font-family:'DungGeunMo',monospace;font-size:clamp(40px,12vw,62px);
  color:var(--amber);margin:0;line-height:1;}
.overlay .grade{color:var(--mint);font-size:17px;margin:0;}
.row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;}

/* ── 엔딩 화면 ───────────────────────────
   게임을 깼을 때만 나옵니다. 폭죽 캔버스는 맨 아래에 깔고
   글자와 버튼은 그 위로 올립니다. */
.overlay.win{background:rgba(11,9,16,.82);gap:11px;overflow-y:auto;}
.overlay.win > *{position:relative;z-index:1;}
.overlay .fx{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;}
.overlay.win h2{
  color:var(--amber);
  text-shadow:0 0 18px rgba(255,201,74,.45);
}
.endwin{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:320px;}
.endwin .cheer{
  margin:0;font-family:'DungGeunMo','Apple SD Gothic Neo',monospace;
  font-size:clamp(16px,4.4vw,21px);color:var(--text);line-height:1.45;
  word-spacing:-.3em;
}
.endwin .taunt-end{
  margin:0;font-size:clamp(12.5px,3.4vw,14px);color:var(--rose);
  line-height:1.55;max-width:300px;
}
/* 반짝이는 후원 버튼 */
.btn-coffee.sparkle{
  position:relative;overflow:hidden;
  animation:coffeePulse 1.9s ease-in-out infinite;
}
.btn-coffee.sparkle::after{
  content:'';position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  animation:coffeeShine 2.4s ease-in-out infinite;
}
@keyframes coffeePulse{
  50%{box-shadow:0 0 22px rgba(255,235,0,.6);transform:translateY(-1px);}
}
@keyframes coffeeShine{
  0%{left:-140%;} 55%{left:140%;} 100%{left:140%;}
}
@media (prefers-reduced-motion:reduce){
  .btn-coffee.sparkle::after{display:none;}
}

input[type=text]{
  width:130px;padding:11px;text-align:center;font-size:16px;
  background:#15121D;color:var(--text);border:1px solid var(--line);
  border-radius:var(--r-sm);font-family:'DungGeunMo',monospace;
}
input[type=text]:focus{border-color:var(--amber);}

.note{margin-top:14px;text-align:center;color:var(--muted);font-size:13px;}
.note b{color:var(--amber);font-weight:400;}

.foot{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:10px;
  flex-direction:column;align-items:center;text-align:center;}
.foot a{text-decoration:underline;text-underline-offset:3px;}

@media (max-width:560px){
  .hero{padding:30px 0 0;}
  .tiles{grid-template-columns:repeat(2,1fr);gap:11px;}
  .tile.lead{grid-column:span 2;grid-row:auto;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}


/* ── 게임 페이지: 스크롤 없이 화면을 가득 채웁니다 ──
   브라우저 주소창이 나왔다 사라지는 건 페이지가 스크롤되기 때문입니다.

   ★ 중요 ★ 예전에는 html 에 overflow:hidden 을 걸어 스크롤을 막았는데,
   모바일(특히 아이폰 사파리)에서 이 '스크롤 잠금' 상태가 다음 화면인
   오락실 목록까지 따라붙어, 목록이 아래로 안 내려가는 문제가 있었습니다.
   지금은 아무것도 잠그지 않고 내용을 화면 높이에 딱 맞춰서
   '스크롤할 것이 애초에 없게' 만듭니다. 효과는 같고 뒤탈이 없습니다. */
html.gp body{
  display:flex;flex-direction:column;
  height:100dvh;
  overscroll-behavior:none;
}
html.gp .topbar{flex:none;}
html.gp .shell{
  flex:1;min-height:0;height:auto;
  display:flex;flex-direction:column;gap:8px;
  padding:0 12px calc(10px + env(safe-area-inset-bottom));
}
/* ★ .wrapn 의 margin:0 auto 는 세로 flex 안에서 '늘리기'를 꺼버립니다.
   그래서 캔버스가 없는 게임(헷갈리네·타자대장)은 무대가 글자 폭만큼
   쪼그라들었습니다. 폭을 명시해 두면 max-width 440 안에서 꽉 찹니다. */
html.gp .shell.wrapn{width:100%;}

/* ── 오락실 목록 화면: 무슨 일이 있어도 스크롤됩니다 ──
   게임 화면에서 쓰던 잠금이 혹시라도 남아 있어도 여기서 전부 풀립니다. */
html.arcade, html.arcade body{
  height:auto!important;
  min-height:100%;
  overflow:visible!important;
  position:static!important;
  display:block!important;
}
html.gp .hud{padding:0 2px 4px;flex:none;}
html.gp .stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;}
html.gp .stage canvas{max-width:100%;max-height:100%;width:auto;height:auto;}
html.gp #g-area{width:100%;height:100%;overflow:auto;}
html.gp .note{flex:none;margin:0;}

/* 게임이 도는 동안에는 군더더기를 감춥니다 */
html.playing .note{display:none;}
html.playing .topbar .brand span:last-child{display:none;}
html.playing .topbar .in{padding-top:7px;padding-bottom:7px;}

.fsbtn{margin-left:6px;}

.stagebar{display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--muted);padding:2px 2px 6px;flex:none;}
.stagebar b{color:var(--amber);font-family:'DungGeunMo',monospace;font-size:16px;font-weight:400;}
.stagebar #g-goal{color:var(--mint);}

/* ── 후원 ─────────────────────────────── */
.support{
  margin:30px 0;padding:18px;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,#1A1622,#151220);
  /* 문구와 버튼을 세로로 쌓아 가운데 정렬합니다(다른 영역과 결을 맞춤) */
  display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;
  text-align:center;
}
.support p{
  margin:0 auto;font-size:14px;line-height:1.65;max-width:560px;
  color:var(--text);font-weight:600;text-align:center;
}
.btn-coffee{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:var(--r-sm);
  background:#FFEB00;color:#191600;border:1px solid #E0CE00;
  font-weight:700;font-size:15px;white-space:nowrap;
  transition:filter .15s, transform .15s;
}
.btn-coffee:hover{filter:brightness(1.06);transform:translateY(-1px);}
.btn-coffee .ico{font-size:17px;}
@media (max-width:560px){
  .support{padding:14px;gap:12px;margin:0 0 16px;}
  .support p{font-size:13.5px;}
  .btn-coffee{width:100%;justify-content:center;padding:14px 20px;}
}

/* ── 신작 공개 안내 ─────────────────────── */
.hero .drop{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;padding:7px 14px 7px 12px;
  border:1px solid #4A3A1E;border-radius:999px;
  background:rgba(255,201,74,.07);
  color:var(--amber);font-size:13.5px;
}
.hero .drop .txt{word-spacing:-.06em;}
.hero .drop b{color:#FFE08A;font-weight:700;}
.hero .drop .dot{
  width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 8px rgba(255,59,59,.8);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.25;transform:scale(.75);}}
@media (max-width:560px){ .hero .drop{font-size:12.5px;padding:6px 12px 6px 10px;} }

/* ── 도발 멘트 ─────────────────────────── */
.hero .taunt{
  margin:14px 0 0;
  font-family:'DungGeunMo','Apple SD Gothic Neo',monospace;
  font-size:clamp(16px,3.8vw,20px);
  color:var(--text);letter-spacing:.01em;line-height:1.5;
  word-spacing:-.34em;          /* 도트 폰트의 공백이 전각이라 좁혀줍니다 */
}
.hero .taunt em{font-style:normal;color:var(--red);}
.hero .small{margin:8px 0 0;font-size:13.5px;color:var(--muted);}

/* 후원 문구 다듬기 */
.support p b.hot{color:var(--amber);font-weight:600;}   /* 색만 다르고 두께는 같습니다 */
@media (max-width:560px){
  .support{text-align:center;}
  /* 좁은 화면에서도 한 줄에 들어가도록 글자를 살짝 조입니다 */
  .support p{
    font-size:clamp(11.5px,3.35vw,13.5px);
    line-height:1.6;letter-spacing:-.03em;white-space:nowrap;
  }
}
@media (max-width:340px){
  .support p{white-space:normal;letter-spacing:-.02em;}
}

/* ── 공통 푸터 ───────────────────────────────
   게임 중(html.gp)에는 화면을 잡아먹지 않게 감춥니다. */
.sitefoot{
  border-top:1px solid var(--line);
  margin-top:40px;padding:22px 0 34px;
}
.sitefoot-in{max-width:900px;margin:0 auto;padding:0 18px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.sf-copy{margin:0;font-size:13px;color:var(--text);letter-spacing:.02em;}
.sf-note{margin:0;font-size:12px;color:var(--muted);line-height:1.7;}
.sf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:6px;}
.sf-links a{font-size:12px;color:var(--muted);text-decoration:none;
  border-bottom:1px solid transparent;}
.sf-links a:hover{color:var(--mint);border-bottom-color:var(--mint);}
html.gp .sitefoot{display:none;}

/* ── 커밍순: 목록 카드 덮개 ─────────────────── */
.tile.locked{opacity:1;pointer-events:none;position:relative;}
.tile.locked .art{visibility:hidden;}
.tile .cover{
  position:absolute;left:0;right:0;top:0;
  aspect-ratio:1;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  border-bottom:1px solid var(--line);
}
.tile .cover .cv-k{
  font-family:'DungGeunMo',monospace;font-size:13px;letter-spacing:.16em;
  color:var(--amber);
}
.tile .cover .cv-d{
  font-family:'DungGeunMo',monospace;font-size:26px;color:var(--paper);
}
.tile .sub .soon-date{font-size:12px;color:var(--amber);white-space:nowrap;}
.tile .cover .cv-c{
  font-family:'DungGeunMo',monospace;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ── 커밍순: 게임 페이지 전체 덮개 ───────────── */
.soonwall{
  position:fixed;inset:0;z-index:9999;background:#000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}
.soonwall-in{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:420px;}
.soon-kicker{margin:0;font-family:'DungGeunMo',monospace;
  font-size:15px;letter-spacing:.28em;color:var(--amber);}
.soon-name{margin:2px 0 0;font-family:'DungGeunMo',monospace;
  font-size:clamp(30px,9vw,44px);font-weight:400;color:var(--paper);letter-spacing:.06em;}
.soon-when{margin:6px 0 0;font-size:14px;color:var(--mint);}
.soon-clock{margin:2px 0 0;font-family:'DungGeunMo',monospace;
  font-size:clamp(26px,8vw,38px);color:var(--paper);font-variant-numeric:tabular-nums;}
.soon-note{margin:10px 0 16px;font-size:12px;color:var(--muted);line-height:1.7;}