/* LOL Scratch RP – styles (v2.0.10) */
.lol-spt.wrap{
  width:100%;
  max-width:100%;
  margin:12px 0;
  padding:0;
  font-family:var(--lol-font);
  color:var(--lol-text);
  -webkit-tap-highlight-color: transparent;
}
.lol-spt.wrap *{
  -webkit-tap-highlight-color: transparent;
}
.lol-card{
  position:relative; overflow:hidden;
  width:100%;
  background: radial-gradient(140% 140% at 0% 0%, var(--lol-cardA) 0%, var(--lol-cardB) 55%);
  border:1px solid var(--lol-cardStroke);
  border-radius:20px;
  padding:18px;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.lol-glow{
  position:absolute; inset:-40%; pointer-events:none;
  background: radial-gradient(60% 60% at 20% 10%, color-mix(in oklab, var(--lol-primary) 50%, white), transparent 60%),
              radial-gradient(50% 50% at 80% 0%, color-mix(in oklab, var(--lol-secondary) 50%, white), transparent 60%);
  opacity:.15; filter: blur(40px);
}
.lol-ribbon{
  position:absolute; top:12px; right:-36px; transform:rotate(18deg);
  background: linear-gradient(120deg, var(--lol-primary), var(--lol-secondary));
  color:white; font-weight:800; font-size:12px; letter-spacing:.12em;
  padding:6px 40px; border-radius:999px; box-shadow:0 8px 24px color-mix(in oklab, var(--lol-primary) 40%, transparent);
}
.lol-head{margin-bottom:12px}
.lol-title{font-size:22px;font-weight:900;letter-spacing:.01em}
.lol-sub{font-size:12px;color:var(--lol-muted)}
.lol-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.lol-grid.single{grid-template-columns:1fr}
.lol-field{display:flex;flex-direction:column;gap:6px}
.lol-field label{font-size:12px;color:var(--lol-muted)}
.lol-field input{
  width:100%;padding:12px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:12px;color:var(--lol-text);outline:none;transition:border-color .15s, box-shadow .15s;
  -webkit-user-select:text; user-select:text;
}
.lol-field input:focus{border-color:color-mix(in oklab, var(--lol-primary) 50%, white); box-shadow:0 0 0 3px color-mix(in oklab, var(--lol-primary) 25%, transparent)}

.lol-status{
  font-size:12px;
  color:var(--lol-muted);
  margin-top:2px;
}

.lol-scratch{
  position:relative;
  margin:8px 0 0;
  overflow:hidden;
}

.lol-prize{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:900; color:#0f2540; text-shadow:0 1px 0 rgba(255,255,255,.55);
  background: radial-gradient(120% 140% at 20% 10%, #f8fafc 0%, #eef2f7 45%, #e7ebf3 100%);
  border-radius:16px;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

#lol_spt_canvas{
  position:relative; width:100%; height:auto; display:block; border-radius:16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 10px 30px rgba(0,0,0,.25);
  background: transparent;
  touch-action: none;            /* 제스처 제거 */
  -ms-touch-action: none;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  outline:none;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='14' fill='%23facc15' stroke='%23eab308' stroke-width='2'/></svg>") 16 16, pointer;
}
#lol_spt_canvas:focus{outline:none}

.lol-actions{
  margin:14px 0;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.lol-btn{
  padding:12px 14px;border:none;border-radius:var(--lol-radius);cursor:pointer;font-weight:800;letter-spacing:.02em;
  transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
  outline:none;
}
.lol-btn-primary{
  color:white;background:linear-gradient(135deg, var(--lol-primary), var(--lol-secondary));
  box-shadow:0 12px 30px color-mix(in oklab, var(--lol-primary) 38%, transparent);
}
.lol-btn-ghost{
  color:#d1d5db;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)
}
.lol-btn:hover{opacity:.97}
.lol-btn:active{transform:translateY(1px)}
.lol-btn-share{min-width:160px}
.lol-hidden{display:none !important;}

.lol-confetti{pointer-events:none;position:absolute;left:0;right:0;top:0;height:0;overflow:visible}
.lol-confetti-piece{
  position:absolute; top:36px; background:linear-gradient(180deg,#fff,#ddd); border-radius:2px; transform: translateX(-50%) rotate(var(--rot));
  animation:lol-fall 1.4s ease-out forwards;
}
@keyframes lol-fall{
  0%{opacity:0; transform: translateX(-50%) translateY(-10px) rotate(var(--rot))}
  12%{opacity:1}
  100%{opacity:0; transform: translateX(calc(-50% + var(--dx))) translateY(180px) rotate(calc(var(--rot) + 280deg))}
}
.lol-shake{animation: lol-shake .6s ease}
@keyframes lol-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
@media (max-width:560px){
  .lol-grid{grid-template-columns:1fr}
  .lol-actions{flex-direction:column;align-items:stretch}
  .lol-btn-share{width:100%}
}