/* 캡슐 뽑기 — 클래스는 모두 gc- 접두사 (다른 사이트 CSS와 겹치지 않게) */
:root{--gc-ink:#4a3320;--gc-bg:#fff4e6;--gc-pink:#ff8fb1;--gc-gold:#ffcf5a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--gc-bg);color:var(--gc-ink);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-tap-highlight-color:transparent}
.gc-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:2px solid #f0dcc2}
.gc-top b{flex:1;text-align:center;font-size:17px}
.gc-brand{color:var(--gc-ink);text-decoration:none;font-weight:800;font-size:13px}
.gc-mute{border:0;background:#fff4e6;border-radius:10px;font-size:18px;padding:4px 8px;cursor:pointer}
.gc-main{max-width:440px;margin:0 auto;padding:12px 14px 28px;display:flex;flex-direction:column;gap:10px}
.gc-play{display:flex;flex-direction:column;gap:10px}
.gc-chips{display:flex;gap:8px;justify-content:center;order:-1}
.gc-ad-slot,.gc-joystick,.gc-fullscreen,.gc-mobile-only{display:none}
.gc-chip{background:#fff;border:2px solid #f0dcc2;border-radius:999px;padding:5px 14px;font-size:14px;display:flex;align-items:center;gap:6px}
.gc-chu{width:20px;height:20px;object-fit:contain}
.gc-machine{position:relative;touch-action:none;user-select:none}
#gcCv{display:block;width:100%;aspect-ratio:4/5;border-radius:22px;box-shadow:0 8px 24px rgba(120,60,30,.28);background:#ffe9d6;touch-action:none}
.gc-msg{position:absolute;left:0;right:0;bottom:6px;margin:0;text-align:center;font-size:13px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55);pointer-events:none}
.gc-ctrl{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:4px 6px}
.gc-dpad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,58px);gap:2px}
.gc-arrow{width:58px;height:58px;border-radius:16px;border:0;background:#fff;box-shadow:0 4px 0 #e2c9a6;font-size:22px;color:var(--gc-ink);cursor:pointer;touch-action:manipulation;user-select:none}
.gc-arrow.u{grid-column:2;grid-row:1}.gc-arrow.l{grid-column:1;grid-row:2}.gc-arrow.r{grid-column:3;grid-row:2}.gc-arrow.d{grid-column:2;grid-row:3}
.gc-arrow:active,.gc-arrow.on{transform:translateY(3px);box-shadow:0 1px 0 #e2c9a6}
.gc-go{width:128px;height:128px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ffb3c9,#ff5f8f 70%);color:#fff;font:inherit;font-weight:900;font-size:24px;box-shadow:0 7px 0 #c8456f;cursor:pointer;touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.gc-go small{font-size:13px;font-weight:700;opacity:.95}
.gc-go:active{transform:translateY(6px);box-shadow:0 1px 0 #c8456f}
.gc-go[disabled]{filter:grayscale(.7);opacity:.7;cursor:default}
/* 캡슐 열기 연출 */
.gc-rv{position:fixed;inset:0;z-index:9000;background:radial-gradient(circle at 50% 42%,rgba(60,40,24,.82),rgba(20,12,6,.94));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;cursor:pointer;animation:gcIn .25s ease-out}
.gc-rv[hidden]{display:none}
.gc-rv.out{opacity:0;transition:opacity .25s}
.gc-rv-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gc-rv-title{font-weight:900;font-size:20px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.gc-rv-stage{position:relative;width:min(300px,74vw);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;perspective:900px}
.gc-cap{position:relative;width:62%;aspect-ratio:1;animation:gcDrop .55s cubic-bezier(.2,1.4,.4,1)}
.gc-cap i{position:absolute;left:0;right:0;height:50%;display:block;box-shadow:inset 0 -6px 12px rgba(0,0,0,.12)}
.gc-cap .t{top:0;border-radius:999px 999px 0 0;background:var(--gc-c1,#ff7fa8)}
.gc-cap .b{bottom:0;border-radius:0 0 999px 999px;background:var(--gc-c2,#fff3e0)}
.gc-cap::after{content:"";position:absolute;left:18%;top:12%;width:22%;height:14%;border-radius:50%;background:rgba(255,255,255,.7);transform:rotate(-30deg)}
.gc-cap.shake{animation:gcShake .22s linear infinite}
.gc-cap.glow{filter:drop-shadow(0 0 22px var(--gc-glow,#fff)) drop-shadow(0 0 50px var(--gc-glow,#fff))}
.gc-cap.crack .t{transition:transform .35s ease-in,opacity .35s;transform:translate(-40px,-120px) rotate(-40deg);opacity:0}
.gc-cap.crack .b{transition:transform .35s ease-in,opacity .35s;transform:translate(30px,120px) rotate(30deg);opacity:0}
.gc-rv.flash::after{content:"";position:absolute;inset:0;background:#fff;pointer-events:none;animation:gcFlash .45s ease-out forwards}
.gc-card{position:absolute;inset:0;margin:auto;width:100%;height:auto;opacity:0;transform:scale(.4) rotateY(180deg);transition:transform .7s cubic-bezier(.2,1.3,.4,1),opacity .3s;border-radius:7%}
.gc-card.in{opacity:1;transform:scale(1) rotateY(0)}
.gc-card.aura{filter:drop-shadow(0 0 18px var(--gc-glow)) drop-shadow(0 0 40px var(--gc-glow))}
.gc-card.thump{animation:gcThump .35s}
.gc-rv-foot{text-align:center;max-width:90vw}
.gc-rv-foot p{margin:0 0 10px;font-size:15px;line-height:1.5}.gc-rv-foot small{opacity:.8}
.gc-rv-btns{display:flex;gap:10px;justify-content:center}
.gc-rv-btns button{border:0;border-radius:12px;background:#ffcf5a;color:#4a3320;font:inherit;font-weight:800;font-size:15px;padding:10px 26px;cursor:pointer}
.gc-rv-btns button.sub{background:rgba(255,255,255,.18);color:#fff}
.gc-rv-hint{opacity:.6;font-size:12px}.gc-rv-hint[hidden]{display:none}
@keyframes gcIn{from{opacity:0}to{opacity:1}}
@keyframes gcDrop{from{transform:translateY(-220px)}to{transform:none}}
@keyframes gcShake{0%{transform:rotate(-7deg) translateX(-3px)}50%{transform:rotate(7deg) translateX(3px)}100%{transform:rotate(-7deg) translateX(-3px)}}
@keyframes gcFlash{from{opacity:.95}to{opacity:0}}
@keyframes gcThump{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
/* 안내 글: 모든 줄 같은 글꼴·크기, 줄은 의미 단위로 끊는다 */
.gc-chip{font-size:14px;font-weight:600}.gc-chip b{font-size:inherit;font-weight:inherit}
.gc-note{text-align:center;font-size:13px;font-weight:500;line-height:1.7;color:var(--gc-ink);opacity:.85;word-break:keep-all}
.gc-note p{margin:0 0 8px}.gc-note b{font-weight:700}.gc-note a{color:#c8456f;font-weight:700}

/* 휴대폰: 광고 → 넓은 게임 화면 → 상태 → 조이스틱과 내리기를 한 화면에 배치한다. */
@media (max-width:700px), (max-height:500px) and (max-width:1000px){
  .gc-top{height:calc(48px + env(safe-area-inset-top));padding:calc(6px + env(safe-area-inset-top)) 10px 6px;gap:6px;border-bottom-width:1px}
  .gc-brand{font-size:12px;white-space:nowrap}.gc-top b{font-size:15px;white-space:nowrap}
  .gc-mute{font-size:19px;min-width:34px;height:34px;padding:3px}
  .gc-fullscreen:not([hidden]){display:grid;place-items:center;width:34px;height:34px;padding:6px;border:0;border-radius:9px;background:#fff4e6;color:var(--gc-ink);cursor:pointer}
  .gc-fullscreen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .gc-main{max-width:none;width:100%;padding:0;gap:0}
  .gc-play{height:calc(100vh - 48px - env(safe-area-inset-top));height:calc(100dvh - 48px - env(safe-area-inset-top));display:grid;grid-template-rows:clamp(52px,9vh,88px) minmax(120px,1fr) 34px 122px;grid-template-rows:clamp(52px,9dvh,88px) minmax(120px,1fr) 34px 122px;gap:0;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .gc-ad-slot{display:block;grid-row:1;position:relative;width:100%;min-width:0;background:#fff4e6;border-bottom:1px solid #efddc7}
  .gc-ad-label{position:absolute;left:12px;top:5px;font-size:9px;line-height:1;color:#a78d75;pointer-events:none}
  .gc-ad-mount{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  .gc-machine{grid-row:2;min-height:0;overflow:hidden}
  #gcCv{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .gc-msg{left:12px;right:12px;bottom:8px;padding:5px 8px;border-radius:8px;background:rgba(74,51,32,.76);font-size:12px;line-height:1.35;text-shadow:none}
  .gc-chips{grid-row:3;order:0;align-items:center;gap:10px}
  .gc-chip{height:28px;padding:2px 10px;border-width:1px;font-size:13px;font-variant-numeric:tabular-nums}
  .gc-chu{width:18px;height:18px}
  .gc-ctrl{grid-row:4;padding:5px clamp(22px,8vw,44px) 10px;gap:20px}
  .gc-dpad{display:none}
  .gc-joystick{position:relative;display:block;flex:none;width:104px;height:104px;border-radius:50%;border:2px solid #e7c7ab;background:radial-gradient(circle,#fff9f0 36%,#f3dec9 72%);box-shadow:inset 0 3px 8px #d8b79566,0 3px 0 #d7b996;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
  .gc-joystick:focus-visible{outline:3px solid #c8456f;outline-offset:4px}
  .gc-joystick.active{cursor:grabbing}
  .gc-stick-thumb{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border:2px solid #c8456f;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffcfdf,#ff719e 72%);box-shadow:0 5px 0 #b64d6b,0 8px 10px #6b3f3030;transform:translate(var(--gc-stick-x,0px),var(--gc-stick-y,0px));pointer-events:none}
  .gc-stick-arrow{position:absolute;font-size:10px;line-height:12px;color:#9d7354;pointer-events:none}
  .gc-stick-arrow.up{left:calc(50% - 5px);top:5px}.gc-stick-arrow.down{left:calc(50% - 5px);bottom:4px}.gc-stick-arrow.left{left:5px;top:calc(50% - 6px)}.gc-stick-arrow.right{right:5px;top:calc(50% - 6px)}
  .gc-go{flex:none;width:104px;height:104px;font-size:23px;box-shadow:0 5px 0 #c8456f}.gc-go small{font-size:13px}
  .gc-note{padding:20px 16px 28px;border-top:1px solid #efddc7;margin:0}
  .gc-mobile-only{display:block}
}
@media (max-height:500px) and (max-width:1000px){
  .gc-top{height:calc(44px + env(safe-area-inset-top));padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:4px}
  .gc-play{height:calc(100vh - 44px - env(safe-area-inset-top));height:calc(100dvh - 44px - env(safe-area-inset-top));grid-template-rows:40px minmax(100px,1fr) 28px 88px}
  .gc-ctrl{padding:2px max(24px,env(safe-area-inset-left)) 8px}
  .gc-joystick,.gc-go{width:78px;height:78px}.gc-go{font-size:19px}.gc-go small{font-size:11px}
  .gc-stick-thumb{width:40px;height:40px;margin:-20px 0 0 -20px}
  .gc-chip{height:24px;font-size:12px}
}