body.practice-entry-loading-open { overflow: hidden; }
html.practice-entry-loading-open { overflow: hidden; scrollbar-gutter: auto; }
.practice-entry-loading {
  position: fixed; inset: 0; width: 100vw; max-width: none; max-height: none;
  height: 100vh; height: 100dvh; margin: 0; padding: 0; border: 0;
  overflow: hidden; background: #0E0E10; box-shadow: none; color: white;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.practice-entry-loading::backdrop { background: #0E0E10; }
.practice-entry-loading * { box-sizing: border-box; }
.pel-brand { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.pel-logo { width: 76px; height: 76px; display: block; flex: none; }
.pel-arrow-line, .pel-arrow-head { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pel-draw-line 2.4s ease-in-out infinite; }
.pel-arrow-head { animation-name: pel-draw-head; }
.pel-complete .pel-arrow-line, .pel-complete .pel-arrow-head { animation: none; stroke-dashoffset: 0; opacity: 1; }
.pel-complete .pel-fill { transition: none; }
.pel-complete .pel-fill::after { animation: none; display: none; }
@keyframes pel-draw-line { 0% { stroke-dashoffset: 1; opacity: 1; } 45%,85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pel-draw-head { 0%,40% { stroke-dashoffset: 1; opacity: 1; } 55%,85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.pel-name { margin-top: 22px; font-size: 20px; line-height: 1.4; font-weight: 600; color: rgba(255,255,255,.92); letter-spacing: .5em; padding-left: .5em; white-space: nowrap; }
.pel-bottom { position: absolute; left: 50%; bottom: 9vh; bottom: calc(9vh + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: clamp(320px, 40vw, 720px); display: flex; flex-direction: column; align-items: center; }
.pel-tip { flex: none; width: max-content; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.66); white-space: nowrap; text-align: center; margin: 0 0 4vh; transition: opacity .35s ease, transform .35s ease; }
.pel-tip.pel-hide { opacity: 0; transform: translateY(6px); }
.pel-gold { color: #E3B566; }
.pel-progress { width: 100%; }
.pel-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.pel-label { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.5); letter-spacing: .2em; }
.pel-pct { font-size: 16px; line-height: 1.5; font-weight: 600; color: #E3B566; font-variant-numeric: tabular-nums; }
.pel-bar { height: 10px; border-radius: 999px; background: #18181C; border: 1px solid #26262C; padding: 2px; }
.pel-fill { position: relative; overflow: hidden; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7A5424, #C9964C 60%, #F5D48A); box-shadow: 0 0 10px rgba(245,196,81,.45); transition: width .3s; }
.pel-fill::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; left: -80px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: pel-sheen 1.6s ease-in-out infinite; }
@keyframes pel-sheen { to { left: 100%; } }
@media (min-width: 1920px) { .pel-logo { width: 88px; height: 88px; } .pel-name { font-size: 22px; } .pel-tip { font-size: 15px; } }
@media (max-width: 767px) { .pel-logo { width: 58px; height: 58px; } .pel-name { font-size: 17px; margin-top: 18px; } .pel-bottom { width: 86vw; } .pel-tip { font-size: 13px; } .pel-pct { font-size: 15px; } }
@media (max-width: 359px) { .pel-tip { font-size: 12px; } }
@media (max-height: 700px) { .pel-brand { top: 42%; } .pel-logo { width: 53px; height: 53px; } .pel-name { font-size: 16px; margin-top: 14px; } .pel-tip { margin-bottom: 3vh; } }
@media (max-height: 480px) { .pel-brand { top: 38%; } .pel-logo { width: 41px; height: 41px; } .pel-name { font-size: 14px; margin-top: 10px; } .pel-bottom { bottom: 6vh; bottom: calc(6vh + env(safe-area-inset-bottom, 0px)); width: min(60vw, 520px); } .pel-tip { margin-bottom: 12px; } .pel-meta { margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .pel-arrow-line, .pel-arrow-head { animation: none; stroke-dashoffset: 0; } .pel-fill::after { display: none; } .pel-tip { transition: none; } }