:root{
  --tp-ink:#191d2d;--tp-muted:rgba(25,29,45,.66);--tp-card:rgba(255,255,255,.90);
  --tp-line:rgba(25,29,45,.13);--tp-gold:#ffd369;--tp-orange:#ff9f45;
  --tp-coral:#ff5c7a;--tp-mint:#66d2ce;--tp-blue:#4d96ff;--tp-violet:#8b7cff;
  --tp-bg1:#fff6d7;--tp-bg2:#dff7ff;--tp-shadow:0 16px 42px rgba(25,29,45,.15)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  width:100%;height:100%;min-width:0;min-height:0;margin:0;overflow:hidden;
  overscroll-behavior:none;background:linear-gradient(135deg,var(--tp-bg1),var(--tp-bg2));
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  color:var(--tp-ink);touch-action:none;user-select:none;-webkit-user-select:none
}
body{position:fixed;inset:0}
button{font:inherit;color:inherit}
.tp-root{
  width:100vw;height:100vh;height:100dvh;min-width:0;min-height:0;overflow:hidden;
  display:block;outline:none;position:relative;isolation:isolate
}
.tp-root:before{
  content:"";position:absolute;inset:-14%;z-index:-1;
  background:radial-gradient(circle at 16% 18%,rgba(255,211,105,.55),transparent 28%),
  radial-gradient(circle at 84% 8%,rgba(102,210,206,.48),transparent 30%),
  radial-gradient(circle at 70% 92%,rgba(255,92,122,.30),transparent 28%),
  radial-gradient(circle at 34% 86%,rgba(139,124,255,.28),transparent 32%);
  filter:blur(14px)
}
.tp-shell{
  width:100%;height:100%;min-width:0;min-height:0;max-width:none;
  padding-top:max(6px,env(safe-area-inset-top));
  padding-right:max(6px,env(safe-area-inset-right));
  padding-bottom:max(6px,env(safe-area-inset-bottom));
  padding-left:max(6px,env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.56);backdrop-filter:blur(14px)
}
.tp-shell:after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 38%,rgba(255,255,255,.12))
}
.tp-topbar{
  flex:0 0 auto;display:grid;grid-template-columns:1.15fr repeat(4,.82fr) auto;
  gap:7px;align-items:stretch;position:relative;z-index:10
}
.tp-stat,.tp-small-btn,.tp-pill{
  border:1px solid var(--tp-line);background:rgba(255,255,255,.86);
  border-radius:16px;box-shadow:0 7px 18px rgba(25,29,45,.08)
}
.tp-stat{
  min-height:46px;padding:6px 9px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;line-height:1.05;white-space:nowrap;overflow:hidden
}
.tp-stat span{font-size:10px;color:var(--tp-muted);font-weight:850;margin-bottom:4px}
.tp-stat strong{font-size:19px;font-weight:1000;letter-spacing:-.03em}
.tp-score strong{color:#e56e20}.tp-time strong{color:#386ee8}
.tp-small-btn{
  border:0;cursor:pointer;min-width:66px;min-height:46px;padding:0 12px;font-weight:950;
  background:linear-gradient(135deg,#202433,#303852);color:#fff;touch-action:manipulation
}
.tp-small-btn:disabled{opacity:.46;cursor:not-allowed;filter:saturate(.5)}
.tp-stage-wrap{
  display:flex;flex-direction:column;gap:7px;min-width:0;min-height:0;flex:1 1 auto;
  position:relative;z-index:5;overflow:hidden
}
.tp-stage-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.76);border:1px solid var(--tp-line);border-radius:17px;
  padding:7px 11px;min-height:51px;overflow:hidden
}
.tp-stage-head>div{min-width:0}.tp-stage-head h1{
  margin:0;font-size:clamp(16px,2.3vw,25px);line-height:1.1;font-weight:1000;
  letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.tp-stage-head p{
  margin:0;color:var(--tp-muted);font-weight:850;font-size:clamp(11px,1.7vw,14px);
  text-align:left;direction:rtl;max-width:58%;line-height:1.5
}
.tp-badge{
  display:inline-flex;align-items:center;border-radius:999px;
  background:linear-gradient(135deg,var(--tp-gold),var(--tp-orange));
  padding:3px 8px;margin-bottom:3px;font-size:10px;font-weight:1000;color:#252a3b;
  box-shadow:0 5px 12px rgba(255,159,69,.22)
}
.tp-canvas-box{
  position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;
  border-radius:20px;border:1px solid rgba(25,29,45,.14);background:#14182c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 10px 28px rgba(25,29,45,.12)
}
.tp-canvas{
  display:block;width:100%;height:100%;min-width:0;min-height:0;
  touch-action:none;background:#15192e
}
.tp-toast{
  position:absolute;z-index:60;left:50%;top:max(10px,env(safe-area-inset-top));
  transform:translate(-50%,-10px) scale(.96);opacity:0;padding:10px 15px;border-radius:16px;
  background:rgba(25,29,45,.94);color:#fff;font-weight:950;font-size:13px;line-height:1.55;
  box-shadow:0 12px 28px rgba(0,0,0,.24);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;max-width:min(92%,560px);
  width:max-content;text-align:center;white-space:normal
}
.tp-toast.is-show{opacity:1;transform:translate(-50%,0) scale(1)}
.tp-overlay{
  position:absolute;inset:0;z-index:80;background:linear-gradient(135deg,rgba(20,24,44,.88),rgba(25,29,45,.66));
  display:grid;place-items:center;padding:16px
}
.tp-overlay[hidden]{display:none}
.tp-overlay-card{
  width:min(440px,94%);max-height:92%;overflow:auto;background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.75);border-radius:24px;padding:22px;text-align:center;
  box-shadow:0 26px 70px rgba(0,0,0,.29)
}
.tp-overlay-badge{
  display:inline-flex;padding:5px 11px;border-radius:999px;
  background:linear-gradient(135deg,var(--tp-coral),var(--tp-orange));
  color:#fff;font-weight:1000;font-size:11px
}
.tp-overlay-card h2{margin:10px 0 7px;font-size:clamp(25px,6vw,34px);line-height:1.08;font-weight:1000}
.tp-overlay-card p{margin:0;color:var(--tp-muted);font-weight:850;line-height:1.85}
.tp-main-btn{
  min-width:150px;min-height:50px;margin-top:14px;border:0;border-radius:16px;padding:10px 18px;
  background:linear-gradient(135deg,#202433,#37415f);color:#fff;font-weight:1000;cursor:pointer;
  box-shadow:0 12px 24px rgba(25,29,45,.22);touch-action:manipulation
}
.tp-controls{
  flex:0 0 auto;height:clamp(74px,12.5vh,96px);min-height:74px;
  display:grid;grid-template-columns:1fr 1.22fr 1fr;grid-template-areas:"left jump right";
  gap:9px;direction:ltr;position:relative;z-index:15
}
.tp-control{
  min-width:0;min-height:64px;border:0;border-radius:22px;
  background:linear-gradient(180deg,#fff,#eef1ff);
  box-shadow:0 10px 22px rgba(25,29,45,.15),inset 0 -4px 0 rgba(25,29,45,.09);
  font-weight:1000;cursor:pointer;transition:transform .07s ease,box-shadow .07s ease,filter .07s ease;
  display:flex;align-items:center;justify-content:center;gap:7px;touch-action:none;
  -webkit-user-select:none;user-select:none;overflow:hidden
}
.tp-left{grid-area:left}.tp-jump{grid-area:jump}.tp-right{grid-area:right}
.tp-control:active,.tp-control.is-down{
  transform:translateY(3px) scale(.985);
  box-shadow:0 5px 12px rgba(25,29,45,.13),inset 0 -1px 0 rgba(25,29,45,.08)
}
.tp-direction{color:#202433}
.tp-arrow{
  display:block;width:clamp(48px,8.5vw,70px);height:clamp(48px,8.5vw,70px);
  fill:currentColor;filter:drop-shadow(0 2px 0 rgba(255,255,255,.7))
}
.tp-jump{
  background:linear-gradient(135deg,var(--tp-gold),var(--tp-orange));color:#252a3b;
  flex-direction:column;gap:0
}
.tp-jump-icon{font-size:clamp(30px,5vw,44px);line-height:.8;font-weight:1000}
.tp-jump-label{font-size:clamp(14px,2vw,19px);line-height:1.1;font-weight:1000}
.tp-bottom{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:9px;
  position:relative;z-index:10
}
.tp-help{
  display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.72);
  border:1px solid var(--tp-line);border-radius:15px;padding:7px 11px;
  font-size:11px;color:var(--tp-muted);font-weight:850;min-width:0;overflow:hidden
}
.tp-help strong{color:var(--tp-ink);font-weight:1000}
.tp-help span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-pill{padding:7px 11px;font-size:11px;font-weight:950;white-space:nowrap;color:#303852}
@media (max-width:760px){
  .tp-shell{gap:6px}
  .tp-topbar{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .tp-stat,.tp-small-btn{min-height:39px;border-radius:13px}
  .tp-stat{padding:4px 6px}.tp-stat span{font-size:9px;margin-bottom:3px}.tp-stat strong{font-size:16px}
  .tp-small-btn{min-width:0;padding:0 8px;font-size:13px}
  .tp-stage-head{padding:6px 9px;min-height:47px;border-radius:14px}
  .tp-stage-head p{font-size:10px;max-width:50%;line-height:1.45}
  .tp-stage-head h1{font-size:16px}.tp-badge{font-size:9px}
  .tp-canvas-box{border-radius:16px}
  .tp-controls{height:clamp(82px,13vh,104px);min-height:82px;gap:7px}
  .tp-control{min-height:72px;border-radius:19px}
  .tp-arrow{width:clamp(56px,17vw,76px);height:clamp(56px,17vw,76px)}
  .tp-jump-icon{font-size:38px}.tp-jump-label{font-size:16px}
  .tp-bottom{display:none}
}
@media (max-width:380px){
  .tp-controls{grid-template-columns:1fr 1.12fr 1fr;gap:5px}
  .tp-control{border-radius:17px}
  .tp-arrow{width:56px;height:56px}
}
@media (max-height:560px){
  .tp-shell{gap:5px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}
  .tp-topbar{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .tp-stat,.tp-small-btn{min-height:36px;border-radius:11px}
  .tp-stat span{font-size:8px;margin-bottom:2px}.tp-stat strong{font-size:14px}
  .tp-small-btn{font-size:11px;padding:0 5px}
  .tp-stage-head{display:none}
  .tp-controls{height:64px;min-height:64px;gap:6px}
  .tp-control{min-height:58px;border-radius:16px}
  .tp-arrow{width:46px;height:46px}
  .tp-jump-icon{font-size:28px}.tp-jump-label{font-size:13px}
  .tp-toast{top:7px;font-size:11px;padding:7px 11px}
}
@media (hover:hover) and (pointer:fine){
  .tp-small-btn:hover,.tp-control:hover,.tp-main-btn:hover{filter:brightness(1.025)}
}
@media (prefers-reduced-motion:reduce){
  .tp-control,.tp-toast{transition:none}
}