* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", "Malgun Gothic", sans-serif; }
body { background: #d49a53; color: #3d3d3d; }
.topbar { background: #ff7c00; height: 62px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: 500; letter-spacing: .5px; }
.topbar b { font-weight: 800; }

.topbar { position: relative; }
.bgm { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 14px 4px 10px;
  border: 2px solid #fff; border-radius: 999px; background: #fff; color: #b85a00; font: 600 13px "Poppins", "Malgun Gothic", sans-serif; cursor: pointer; }
.bgm .slash { display: none; }
.bgm[aria-pressed="false"] { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.55); }
.bgm[aria-pressed="false"] .slash { display: block; }
.skins { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; }
.skin { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px 4px 6px; border: 2px solid rgba(255,255,255,.55); border-radius: 999px;
  background: rgba(255,255,255,.18); color: #fff; font: 600 13px "Poppins", "Malgun Gothic", sans-serif; cursor: pointer; }
.skin img { width: 30px; height: 30px; object-fit: contain; }
.skin img.px, .pixel-skin .ring img, .pixel-skin .next-bubble img { image-rendering: pixelated; }
.skin.sel { background: #fff; color: #b85a00; border-color: #fff; }
@media (max-width: 640px) { .topbar { flex-wrap: wrap; justify-content: center; height: auto; min-height: 62px; padding: 6px 8px; gap: 4px 8px; }
  .skins, .bgm { position: static; transform: none; } .brand { order: -1; width: 100%; text-align: center; } }

#game { display: flex; justify-content: space-between; align-items: flex-start; max-width: 1200px; width: 100%; margin: 1.5rem auto; gap: 12px; }
.left, .right { width: 275px; flex: none; display: flex; flex-direction: column; align-items: center; margin-top: 1.5rem; }
.center { flex: 0 1 654px; max-width: 654px; }
.stage { position: relative; }
#canvas { width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair; } /* 스킨 로드 후 캐릭터 커서로 교체 */

.label { font-size: 2em; font-weight: 700; color: #fefcfb; -webkit-text-stroke: 2px #8c6127; paint-order: stroke fill; letter-spacing: -1px;
  text-shadow: 0 0 3px #a36610, 0 0 3px #a36610, 0 0 3px #a36610; text-align: center; }
.label.small { font-size: 1.6em; margin-bottom: 4px; }

.bubble { position: relative; width: 190px; height: 190px; margin-top: 2em; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.08) 55%, rgba(255,255,255,.55) 100%);
  box-shadow: inset 0 0 10px rgba(255,255,255,.7), 0 2px 6px rgba(120,70,10,.25); animation: mover .8s infinite alternate; }
.bubble::before { content: ""; position: absolute; left: 22px; top: 24px; width: 26px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.75); transform: rotate(-35deg); }
.bubble::after { content: ""; position: absolute; right: 24px; bottom: 26px; width: 20px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.7); transform: rotate(-35deg); }
.bubble .label { position: absolute; top: -1.15em; left: 0; width: 100%; }
@keyframes mover { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
.score-bubble .values { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.current { font-size: 2.5em; font-weight: 800; color: #ffefd4; -webkit-text-stroke: 2px #8c6127; paint-order: stroke fill; margin-bottom: 6px; }
.best .t { font-size: 1.1em; color: rgba(236,220,155,.87); text-align: center; font-weight: 500; }
.best .v { font-size: 1.4em; font-weight: 700; color: #eee1af; text-align: center; }
.next-bubble { display: flex; align-items: center; justify-content: center; }
.next-bubble img { width: 96px; height: 96px; object-fit: contain; }

.board { margin-top: 1.2rem; width: 275px; border-radius: 15px; background: #ffe9b6; border: 4px solid #e3b52d; overflow: hidden; }
.board h2 { text-align: center; padding: 10px 0; font-size: 1.8em; font-weight: 700; color: #fefcfb; -webkit-text-stroke: 1px #8c6127; paint-order: stroke fill; text-shadow: 0 0 3px #a36610, 0 0 3px #a36610; }
.tabs { display: flex; }
.tabs button { flex: 1; border: 0; padding: 10px 0; background: #e9a75a; color: #fff; font-weight: 600; cursor: pointer; border-left: 2px solid #ffe9b6; min-height: 44px; }
.tabs button.sel { background: #e58f2a; }
.board ol { list-style: none; padding: 12px 10px 14px; display: grid; gap: 10px; }
.board li { position: relative; height: 35px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 1.3em; text-align: center; line-height: 35px; background: #b3b3b3; }
.board li i { position: absolute; left: 0; top: 0; width: 35px; height: 35px; border-radius: 50%; font-style: normal; font-size: .6em; display: grid; place-items: center; background: #999; }
.board li.r1 { background: #ffd65a; } .board li.r1 i { background: #ffbe00; }
.board li.r2 { background: #a3c2f2; } .board li.r2 i { background: #6aa0ff; }
.board li.r3 { background: #dfae85; } .board li.r3 i { background: #cc7f33; }
.board li.empty { opacity: .45; }

.evo { margin-top: 1.4rem; text-align: center; }
.ring { position: relative; width: 200px; height: 200px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 28%, rgba(236,244,150,.95) 29% 72%, rgba(255,255,255,.7) 73% 100%); box-shadow: 0 0 8px rgba(255,255,255,.7); }
.ring img { position: absolute; width: 30px; height: 30px; object-fit: contain; transform: translate(-50%, -50%); }

.over { position: absolute; z-index: 5; top: 40%; left: 50%; transform: translate(-50%, -40%); width: 15em; padding: 1em; text-align: center; background: #dd8c1a; border-radius: 6px; box-shadow: 0 4px 14px rgba(80,40,0,.35); }
.over[hidden] { display: none; }
.over .text { font-size: 1.8em; font-weight: 700; color: #fefcfb; -webkit-text-stroke: 1px #8c6127; paint-order: stroke fill; letter-spacing: -1px; }
.over .value { font-size: 2.5em; font-weight: 800; color: #ffefd4; -webkit-text-stroke: 2px #8c6127; paint-order: stroke fill; margin-bottom: 10px; }
.over .best2 { margin-bottom: 1em; color: #fff; display: flex; gap: 6px; justify-content: center; align-items: baseline; }
.over .best2 b { font-size: 1.3em; color: #eee1af; }
.over button { width: 100%; border: 0; background: #fff5df; color: #3d3d3d; padding: 10px 20px; border-radius: 5px; font-size: 1.2em; cursor: pointer; min-height: 44px; }
.shake { animation: shake .5s; }
@keyframes shake { 0%,100% { transform: translate(0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(6px, -3px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(4px, 2px); } }

.legal { text-align: center; padding: 8px 0 24px; font-size: 13px; }
.legal a { color: #5b3a0a; }

@media (max-width: 1000px) {
  #game { flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 4px 16px; margin-top: .5rem; }
  .left, .right { display: contents; }
  .bubble { width: 120px; height: 120px; margin-top: 2.2em; }
  .bubble .label { font-size: 1.5em; }
  .current { font-size: 1.7em; margin-bottom: 2px; }
  .best .t { font-size: .75em; } .best .v { font-size: 1em; }
  .next-bubble img { width: 64px; height: 64px; }
  .score-bubble, .next-bubble { order: 0; }
  .center { order: 1; flex: 0 0 100%; max-width: 654px; }
  .board { order: 2; } .evo { order: 3; width: 100%; }
}