/* index.css — 연습용 (난이도 선택 UI 추가) */
@font-face {
  font-family: "HancomMalangMalang-Regular";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2406-1@1.0/HancomMalangMalang-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

*:not(i) {
  font-family: "HancomMalangMalang-Regular" !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  color: inherit;
}

:root {
  --stage-w: 360px;
  --stage-scale: 1;
  --anchor-x: 50%;
  --anchor-y: 50%;
  --lock-rot: 0deg;
  --lock-wp: 0.5;
  --pick-wp: 0.05;
  --driver-wp: 0.9;
  --lock-ox: 50%;
  --lock-oy: 50%;
  --pick-ox: 50%;
  --pick-oy: 100%;
  --driver-ox: 2%;
  --driver-oy: -20%;
  --pick-rot: 0deg;
  --driver-rot: 15deg;
  --pick-off-x: 0;
  --pick-off-y: 0;
  --driver-off-x: 0;
  --driver-off-y: 0;
  --pick-shake-x: 0px;
  --pick-shake-y: 0px;
  --pick-shake-rot: 0deg;
  --pick-fly-x: 0px;
  --pick-fly-y: 0px;
  --pick-fly-rot: 0deg;
  --progress-ratio: 0;
  --stage-progress-deg: 0deg;
  --ring-scale: .75;
  --ring-offset-x: 0.00;
  --ring-offset-y: -0.00;
  --ring-start: -90deg;
  --ring-color:  #ffb300;
  --ring-track:  rgba(255,255,255,.10);
  --ring-stroke: 5;
}

#wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* ===== 난이도 바 ===== */
#control-bar{
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.18);
  padding: 6px 10px; border-radius: 10px;
  pointer-events: auto; z-index: 300;
}
.lv-btn{
  padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); color: #fff; cursor: pointer;
}
.lv-btn:focus{ outline: 2px solid #ffb300; outline-offset: 1px; }
.lv-btn.active{ background: rgba(255,255,255,.18); }
.lv-tip{ color: #eee; opacity: .9; font-size: 12px; }

#lockpick-stage {
  position: relative;
  --stage-size: min(var(--stage-w), 95vmin);
  width: var(--stage-size);
  aspect-ratio: 1 / 1;
  transform: scale(var(--stage-scale));
  transform-origin: center;
  pointer-events: auto;
}

#pivot {
  position: absolute;
  left: var(--anchor-x);
  top: var(--anchor-y);
  width: 0;
  height: 0;
  transform-origin: 0 0;
  transform: rotate(calc(var(--lock-rot) * -1));
}

#lock, #pick, #driver {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

#lock {
  width: calc(var(--stage-size) * var(--lock-wp));
  transform-origin: var(--lock-ox) var(--lock-oy);
  transform: translate(calc(-1 * var(--lock-ox)), calc(-1 * var(--lock-oy)));
  z-index: 1;
}

#pick {
  width: calc(var(--stage-size) * var(--pick-wp));
  transform-origin: var(--pick-ox) var(--pick-oy);
  transform:
    translate(calc(-1 * var(--pick-ox)), calc(-1 * var(--pick-oy)))
    translate(calc(var(--stage-size) * var(--pick-off-x)),
              calc(var(--stage-size) * var(--pick-off-y)))
    rotate(var(--pick-rot))
    translate(var(--pick-shake-x), var(--pick-shake-y))
    rotate(var(--pick-shake-rot))
    translate(var(--pick-fly-x), var(--pick-fly-y))
    rotate(var(--pick-fly-rot));
  z-index: 3;
}

#driver {
  width: calc(var(--stage-size) * var(--driver-wp));
  transform-origin: var(--driver-ox) var(--driver-oy);
  transform:
    translate(calc(-1 * var(--driver-ox) + var(--stage-size) * var(--driver-off-x)),
              calc(-1 * var(--driver-oy) + var(--stage-size) * var(--driver-off-y)))
    rotate(var(--driver-rot));
  z-index: 4;
}

#top-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 150;
  top: 250px;
}
.hint-row{ display:flex; gap:8px; }
.tile{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; color:#fff; background:#000;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  border-radius:6px; pointer-events:none;
}
.key{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:28px; height:24px; padding:0 8px;
  font-weight:700; letter-spacing:.04em; line-height:1;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
}
.label{ font-weight:700; letter-spacing:.04em; opacity:.92; }
.tile--lmb{ position:relative; padding-left:42px; }
.tile--lmb .arc{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px;
  border-left:2px solid rgba(255,255,255,.85);
  border-top: 2px solid rgba(255,255,255,.85);
  border-bottom:2px solid rgba(255,255,255,.85);
  border-right:0; border-radius:999px 0 0 999px; opacity:.9;
}
.tile--abort{ padding:8px 14px; background:#000; border:1px solid rgba(255,255,255,.18); }

#progress-ring{
  position:absolute;
  width:  calc(var(--stage-size) * var(--lock-wp) * var(--ring-scale));
  height: calc(var(--stage-size) * var(--lock-wp) * var(--ring-scale));
  transform-origin: calc(var(--lock-ox) * var(--ring-scale))
                    calc(var(--lock-oy) * var(--ring-scale));
  transform:
    translate(calc(-1 * var(--lock-ox)), calc(-1 * var(--lock-oy)));
  pointer-events:none;
  z-index: 2;
}
#progress-ring .ring-svg{ width:100%; height:100%; display:block; }
#progress-ring .ring-track,
#progress-ring .ring-bar{
  fill:none; stroke-linecap:round; stroke-width: var(--ring-stroke);
}
#progress-ring .ring-track{ stroke: var(--ring-track); }
#progress-ring .ring-bar{
  stroke: var(--ring-color);
  transform: rotate(var(--ring-start));
  transform-origin: 50% 50%;
  stroke-dasharray: 276.46;
  stroke-dashoffset: calc(276.46 * (1 - var(--progress-ratio)));
  filter: drop-shadow(0 0 4px rgba(255,165,0,.45));
}

#hud-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 150;
  top: 350px;
}
.hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background-color: black;
  transform: translateZ(0);
}
#pick-icon {
  color: #e5e7eb;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.hud-text {
  font-weight: 700;
  letter-spacing: .5px;
  color: #f3f4f6;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  font-size: 15px;
  line-height: 1;
}
.hud-pill.bump { animation: hud-bump .28s ease; }
@keyframes hud-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

#break-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
}
#break-fx .flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%);
  opacity: 0;
  animation: break-flash .22s ease-out forwards;
}
@keyframes break-flash {
  0% { opacity: 0; }
  10% { opacity: .8; }
  100% { opacity: 0; }
}
#break-fx .shard {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 2px;
  background: linear-gradient(90deg, #d1d5db, #9ca3af);
  border-radius: 1px;
  transform-origin: left center;
  opacity: 0;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
  animation: shard-pop var(--dur, .6s) cubic-bezier(.2,.7,.1,1) var(--delay, 0s) forwards;
}
@keyframes shard-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(0.6); }
  8%   { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 60px)), calc(-50% + var(--dy, -40px)))
               rotate(calc(var(--rot, 0deg) + 180deg))
               scaleX(1);
  }
}
#pick-icon.breaking {
  animation: pick-shake .28s ease-in-out;
  color: #fca5a5;
  filter: drop-shadow(0 0 6px rgba(239,68,68,.55));
}
@keyframes pick-shake {
  0% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-2px) rotate(-6deg); }
  50% { transform: translateX(2px) rotate(6deg); }
  75% { transform: translateX(-1px) rotate(-3deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hud-pill.bump,
  #pick-icon.breaking,
  #break-fx .flash,
  #break-fx .shard {
    animation: none !important;
  }
}