main{height:auto;min-height:0;gap:0;padding:0 6px}.octo-layout{max-width:1080px;margin:auto}#arena{min-height:0;height:calc(100svh - 176px);min-height:380px;max-height:690px;border:0;background:radial-gradient(ellipse at 50% 65%,#f6c9630c,transparent 65%);overflow:hidden;display:grid;place-items:center;touch-action:manipulation}#arena:before{display:none}.scene{position:relative;height:100%;width:min(100%,520px);isolation:isolate}.captain,.barrel{position:absolute;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}.captain{width:68%;height:49%;left:16%;top:16%;z-index:1;filter:drop-shadow(0 5px 8px #0004);transform-origin:50% 70%}.barrel{width:92%;height:68%;left:4%;bottom:0;z-index:2;filter:drop-shadow(0 14px 15px #0004)}#slots{position:absolute;left:23%;width:54%;top:54%;height:25%;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));column-gap:12%;row-gap:14%}.slot{position:relative;padding:0;min-height:0!important;border:2px solid #734014;border-radius:22%;background:linear-gradient(120deg,#2d1508,#572908);box-shadow:inset 3px 4px 6px #1b0b06,0 2px 0 #ffe5aa77;transition:transform .18s,filter .18s;touch-action:manipulation}.slot:before{content:'';position:absolute;inset:12%;border-radius:20%;border:1px solid #0a040433}.slot:disabled{opacity:1}.slot.inserted{background:linear-gradient(90deg,#905326,var(--pin));box-shadow:inset 3px 2px 4px #0005,0 2px 1px #361403}.slot.inserted:after{content:'';position:absolute;inset:-8% 12% 3% 0;background:radial-gradient(ellipse at 30% 20%,#ffffff99,transparent 50%),var(--pin);border:2px solid #ffffff44;border-radius:50%;box-shadow:3px 4px 3px #2c0f0866;animation:peg-in .22s ease-out}.game-message{position:absolute;left:12%;top:42%;width:76%;padding:12px 7px;z-index:5;border-radius:18px;background:#10172bef;border:1px solid #ffffff22;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}#status{font-family:'Black Han Sans',sans-serif;font-weight:400;font-size:clamp(16px,4vw,23px);color:#fff3d7}#hint{color:#c0c6d2;font-size:11px}#start{padding:5px 22px;min-height:36px;background:#f6c963;color:#17203a;border:0;font-size:13px}#arena[data-phase=playing] .game-message{top:44%;background:#271708c9;border:0;pointer-events:none;padding:4px 7px}#arena[data-phase=playing] #status{font-family:'IBM Plex Sans KR',sans-serif;font-size:12px}#arena[data-phase=playing] #hint,#arena[data-phase=playing] #start{display:none}#arena[data-phase=ready] #slots{visibility:hidden}#arena[data-phase=popping] .captain,#arena[data-phase=result] .captain{z-index:4;transform:translateY(-34%) rotate(-7deg)}#arena[data-phase=popping] .captain{animation:captain-pop .8s cubic-bezier(.2,.8,.2,1)}#arena[data-phase=popping] .barrel{animation:barrel-wobble .4s ease-in-out}#arena[data-phase=popping] .game-message{visibility:hidden}#arena[data-phase=result] .game-message{top:auto;bottom:7%;background:#10172bf5}#arena[data-phase=result] #slots{pointer-events:none;filter:brightness(.65)}.pop-rays{position:absolute;left:14%;top:5%;font-size:65px;color:#f6c963;opacity:0;z-index:5;pointer-events:none}#arena[data-phase=popping] .pop-rays{animation:rays .8s ease-out}.ad-space{margin:8px auto 14px;min-height:90px;width:calc(100% - 24px);border:1px dashed var(--line);border-radius:8px;font-size:10px}@keyframes peg-in{from{transform:translateX(-12px) scale(1.18);opacity:.5}to{transform:none;opacity:1}}@keyframes captain-pop{0%{transform:translateY(0) rotate(0)}48%{transform:translateY(-44%) rotate(-12deg)}75%{transform:translateY(-24%) rotate(-4deg)}100%{transform:translateY(-34%) rotate(-7deg)}}@keyframes barrel-wobble{25%{transform:rotate(-3deg)}70%{transform:rotate(3deg)}}@keyframes rays{20%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.5) rotate(18deg)}}@media(min-width:800px),(orientation:landscape) and (max-height:550px){.octo-layout{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px;padding:0 8px;align-items:center}#arena{height:calc(100svh - 60px);min-height:260px}.scene{max-width:430px}#slots{left:27%;width:46%;top:54%}.game-message{padding:6px;gap:4px}#hint{font-size:10px}.ad-space{margin:0;width:100%;height:min(250px,65svh)}.captain{width:60%;left:20%}.barrel{width:80%;left:10%}}@media(max-width:360px){header a{font-size:10px}h1{font-size:18px}#hint{font-size:10px}#slots{column-gap:10%}}@media(prefers-reduced-motion:reduce){.slot.inserted:after,#arena[data-phase=popping] .captain,#arena[data-phase=popping] .barrel,#arena[data-phase=popping] .pop-rays{animation:none}}
/* One aspect-ratio scene owns both sprite layers and all slot coordinates. */
#arena{height:auto;min-height:0;max-height:none;overflow:hidden}.scene{width:min(100%,calc((100svh - 176px)*.83),560px);height:auto;aspect-ratio:.83;max-width:none}.barrel{width:110%;height:auto;left:-5%;bottom:0;z-index:1;object-fit:initial}.captain{width:66%;height:auto;left:17%;top:8%;z-index:2;object-fit:initial}.barrel-front{z-index:3;clip-path:inset(14% 0 0 0);filter:none}#slots{left:20%;width:60%;top:47%;height:35%;z-index:4;column-gap:12%;row-gap:12%}.game-message{z-index:6;top:41%}#arena[data-phase=playing] .game-message{top:37%;left:21%;width:58%;background:#271708d9}#arena[data-phase=popping] .captain,#arena[data-phase=result] .captain{z-index:5;transform:translateY(-12%) rotate(-7deg)}#arena[data-phase=popping] .barrel-front{animation:barrel-wobble .4s ease-in-out}@keyframes captain-pop{0%{transform:translateY(0) rotate(0)}48%{transform:translateY(-20%) rotate(-12deg)}75%{transform:translateY(-6%) rotate(-4deg)}100%{transform:translateY(-12%) rotate(-7deg)}}@media(min-width:800px),(orientation:landscape) and (max-height:550px){#arena{height:auto;min-height:0}.scene{width:min(100%,calc((100svh - 65px)*.83),560px);height:auto;max-width:none}.captain{width:66%;left:17%}.barrel{width:110%;left:-5%}#slots{left:20%;width:60%;top:47%}}
.captain{width:82%;left:9%;top:20%}#arena[data-phase=popping] .captain,#arena[data-phase=result] .captain{transform:translateY(-34%) rotate(-7deg)}@keyframes captain-pop{0%{transform:translateY(0) rotate(0)}48%{transform:translateY(-40%) rotate(-12deg)}75%{transform:translateY(-25%) rotate(-4deg)}100%{transform:translateY(-34%) rotate(-7deg)}}
/* The covered round and the roaring reveal share the same fixed barrel. */
.captain{top:0;left:0;width:100%;height:72%;object-fit:contain;z-index:5;opacity:0;transform:none;transform-origin:50% 65%;filter:drop-shadow(0 6px 7px #0004)}.captain-hat{position:absolute;top:14%;left:7%;width:86%;height:auto;z-index:4;pointer-events:none;filter:drop-shadow(0 5px 3px #2b110a66);transform-origin:50% 80%}#arena[data-phase=popping] .captain,#arena[data-phase=result] .captain{opacity:1;transform:none}#arena[data-phase=popping] .captain{animation:roar-reveal .8s cubic-bezier(.16,.8,.2,1)}#arena[data-phase=popping] .captain-hat{animation:lid-off .4s ease-in forwards}#arena[data-phase=result] .captain-hat{opacity:0}#arena[data-phase=popping] .barrel,#arena[data-phase=popping] .barrel-front{animation:none}.pop-rays{z-index:6}@keyframes roar-reveal{0%{opacity:0;transform:translateY(20%) scale(.65)}35%{opacity:1}65%{transform:translateY(-2%) scale(1.04)}100%{opacity:1;transform:none}}@keyframes lid-off{to{opacity:0;transform:translate(-12%,-80%) rotate(-24deg)}}@media(min-width:800px),(orientation:landscape) and (max-height:550px){.captain{width:100%;left:0;top:0;height:72%}}@media(prefers-reduced-motion:reduce){#arena[data-phase=popping] .captain,#arena[data-phase=popping] .captain-hat{animation:none}#arena[data-phase=popping] .captain-hat{opacity:0}}
.scene{aspect-ratio:.72;width:min(100%,calc((100svh - 176px)*.72),560px)}#arena[data-phase=ready] .game-message{top:51%}#arena[data-phase=playing] .game-message{top:43%}.captain-hat{top:7%}@media(min-width:800px),(orientation:landscape) and (max-height:550px){.scene{width:min(100%,calc((100svh - 65px)*.72),560px);aspect-ratio:.72}}
.captain-hat{top:30.5%;left:12%;width:76%;z-index:2;filter:none}.slot.side-nine,.slot.side-three{position:absolute;top:38%;width:16%;height:24%;border-radius:35%;z-index:1}.slot.side-nine{left:-17%}.slot.side-three{right:-17%}