/* 또또스쿨 놀이 게임 공통 스타일 */
.arc-host { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.arc-cv { position: absolute; display: block; touch-action: none; }
.arc-pad { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 5; }
.arc-pad.always { display: block; }
@media (pointer: coarse) { .arc-pad { display: block; } }
.arc-btn { --bc: rgba(255, 255, 255, .28); position: absolute; transform: translate(-50%, -50%); width: clamp(46px, min(11vh, 12vw), 92px); height: clamp(46px, min(11vh, 12vw), 92px); border-radius: 50%; border: 3px solid rgba(255, 255, 255, .55); background: var(--bc); color: #fff; font-size: clamp(18px, min(4.4vh, 5vw), 36px); font-weight: 900; pointer-events: auto; touch-action: none; display: grid; place-items: center; backdrop-filter: blur(2px); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.arc-btn.wide { width: clamp(110px, 20vh, 160px); border-radius: 40px; font-size: clamp(18px, 3vh, 24px); }
.arc-btn.on { background: rgba(255, 255, 255, .55); transform: translate(-50%, -50%) scale(.94); }
.arc-msg { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 6; background: rgba(20, 24, 40, .82); color: #fff; padding: 14px 28px; border-radius: 22px; font-family: var(--sp-font-display); font-size: clamp(18px, min(4vh, 5.5vw), 36px); text-align: center; pointer-events: none; white-space: nowrap; }
.arc-msg[hidden] { display: none; }
.arc-msg small { display: block; font-family: var(--sp-font-body); font-size: 15px; opacity: .85; margin-top: 4px; }
.arc-side { position: absolute; z-index: 4; font-family: var(--sp-font-display); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }

/* 세로 휴대폰에서 가로 돌리기 안내(눌러서 닫기) */
.arc-rotate { display: none; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 7; background: rgba(20, 24, 40, .82); color: #fff; padding: 8px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; text-align: center; max-width: 92%; }
.arc-rotate span { display: block; font-size: 22px; }
@media (orientation: portrait) and (max-width: 640px) { .arc-rotate { display: block; } }