:root {
  --ink: #fff;
  --dim: #d9c6ff;
  --deep: #2a0f3d;
  --night: #0026b4;   /* the ball's blue, deepened */
  --pink: #ff4f9a;
  --yellow: #ffd23f;
  --blue: #3ec7ff;
  --green: #7cf07c;
  --font: Fredoka, 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--night); color: var(--ink); overflow: hidden; overscroll-behavior: none;
  font: 500 16px/1.4 var(--font); -webkit-tap-highlight-color: transparent;
  /* A game, not a document: no double-tap zoom, text selection or long-press callout anywhere. */
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input { -webkit-user-select: text; user-select: text; }
[hidden] { display: none !important; }

#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: none; touch-action: none; }

.btn { font: 600 16px var(--font); color: var(--deep); background: #fff; border: 0; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 0 var(--deep), inset 0 -3px 0 rgba(42, 15, 61, 0.15); transition: transform 0.08s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--deep); }
.btn:disabled { opacity: 0.5; cursor: progress; }
.btn.primary { background: var(--pink); color: #fff; }
.btn.small { font-size: 13px; padding: 5px 11px; }
/* Tip jar: always on top, top right, over the menu, the game and the results card. */
#tip { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  font-size: 22px; line-height: 1; text-decoration: none; border: 3px solid var(--deep); }

/* --- menu --- */
#menu { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(circle at 50% 20%, #1a7aff 0, #0048ec 40%, var(--night) 80%); }
#menu::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 85% 15%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 70%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 25%, #fff 50%, transparent 51%);
  background-size: 300px 300px; }
#attract { position: absolute; left: 50%; top: 0; width: min(420px, 90vw); height: min(300px, 34vh); transform: translateX(-50%); pointer-events: none; }
.panel { position: relative; width: min(620px, 100%); margin-top: min(190px, 22vh); background: #fff; color: var(--deep); padding: 26px 28px 20px;
  border-radius: 28px; box-shadow: 0 8px 0 var(--deep), 0 0 0 4px var(--deep), 0 30px 80px rgba(0, 0, 0, 0.5); }
h1 { font: 700 clamp(52px, 12vw, 84px)/0.95 var(--font); text-align: center; letter-spacing: 1px; margin-top: -4px; }
h1 span { display: inline-block; color: var(--c); -webkit-text-stroke: 2px var(--deep); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--deep); animation: bob 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.12s); }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
h1 span:nth-child(6n+1) { --c: var(--pink); --i: 1; } h1 span:nth-child(6n+2) { --c: var(--yellow); --i: 2; }
h1 span:nth-child(6n+3) { --c: var(--blue); --i: 3; } h1 span:nth-child(6n+4) { --c: var(--green); --i: 4; }
h1 span:nth-child(6n+5) { --c: #b78cff; --i: 5; } h1 span:nth-child(6n) { --c: #ff8a3d; --i: 6; }
.sub { text-align: center; color: #5b3d78; font-size: 18px; margin: 12px auto 18px; max-width: 30em; }
form { display: flex; gap: 10px; }
#url { flex: 1; min-width: 0; font: 500 19px var(--font); color: var(--deep); background: #f4ecff; border: 3px solid var(--deep); border-radius: 999px;
  padding: 9px 16px; outline: none; }
#url:focus { border-color: var(--pink); }
#progress { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: #5b3d78; }
.track { flex: 0 0 160px; height: 12px; background: #f4ecff; border: 2px solid var(--deep); border-radius: 99px; overflow: hidden; }
#bar { height: 100%; width: 0; background: var(--pink); transition: width 0.2s; }
#error { color: #d4145a; margin-top: 10px; min-height: 1.4em; text-align: center; }
.note { color: #9a86b3; font-size: 14px; text-align: center; margin-top: 4px; }

/* --- in game --- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; opacity: 0; }
#banner b { display: block; font: 700 clamp(34px, 8vw, 72px)/1 var(--font); color: var(--yellow); -webkit-text-stroke: 3px var(--deep); paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--deep); }
#banner span { display: inline-block; margin-top: 12px; font: 600 clamp(16px, 3vw, 24px) var(--font); background: var(--deep); padding: 5px 16px; border-radius: 99px; }
#banner.show { animation: banner 2.4s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: scale(0.4); } 12% { opacity: 1; transform: scale(1.08); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
#toast { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); font: 700 26px var(--font); color: #fff; opacity: 0; white-space: nowrap;
  -webkit-text-stroke: 2px var(--deep); paint-order: stroke fill; text-shadow: 0 3px 0 var(--pink); }
#toast.show { animation: toast 1.3s ease-out forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 25% { transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px); } }
#ticker { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; width: min(92vw, 560px); }
.tick { display: flex; align-items: center; gap: 8px; max-width: 100%; background: #fff; color: var(--deep); padding: 5px 14px; border-radius: 99px;
  box-shadow: 0 3px 0 var(--deep); font: 600 18px var(--font); animation: pop 0.18s ease-out; transition: opacity 0.6s, transform 0.6s; }
.tick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick i { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; background: var(--blue); color: #fff; padding: 1px 7px; border-radius: 99px; }
.tick.image i { background: #ff8a3d; } .tick.control i { background: var(--green); color: var(--deep); } .tick.box i { background: #b78cff; }
.tick.link span { color: #1a5fd0; text-decoration: underline; }
.tick.bonk { background: var(--deep); color: var(--yellow); }
.tick em { font-style: normal; color: var(--pink); font-weight: 700; }
.tick:not(:first-child) { opacity: 0.75; transform: scale(0.88); }
.tick.old { opacity: 0; }
@keyframes pop { from { transform: scale(0.5); } }
.hud-bottom { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center; }
.hud-bottom > * { pointer-events: auto; }
.stats { margin-left: auto; background: rgba(20, 8, 40, 0.78); padding: 4px 12px; border-radius: 99px; font-size: 14px; color: var(--dim); }
.stats b { color: #fff; }

/* --- results --- */
#results { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0, 24, 120, 0.5); animation: fade 0.4s; }
@keyframes fade { from { opacity: 0; } }
.card { width: min(420px, 100%); background: #fff; color: var(--deep); border-radius: 28px; padding: 24px; text-align: center;
  box-shadow: 0 8px 0 var(--deep), 0 0 0 4px var(--deep); animation: pop 0.3s cubic-bezier(.3,1.6,.6,1); }
#r-title { font: 700 48px/1 var(--font); -webkit-text-stroke: 2px var(--deep); paint-order: stroke fill; text-shadow: 0 4px 0 var(--deep); }
#r-title { color: var(--yellow); }
#r-time { color: #5b3d78; margin-top: 10px; }
.r-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 560px) {
  #ticker { bottom: 50px; }
  .tick { font-size: 15px; }
  #toast { top: 100px; font-size: 21px; }
  .panel { padding: 20px 16px 16px; }
}

/* --- gacha --- */
@keyframes holo { to { background-position: 300% 50%; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.holo, .rar.t4, .tick.t4, #pull.t-UR .pull-card::before { background: linear-gradient(90deg, #ff4f9a, #ffd23f, #7cf07c, #3ec7ff, #b78cff, #ff4f9a) 0 50% / 300% 100%; animation: holo 1.6s linear infinite; }
.rar { font: 700 11px var(--font); letter-spacing: 0.5px; padding: 2px 7px; border-radius: 6px; color: var(--deep); background: #eee; box-shadow: 0 2px 0 var(--deep); }
.rar.t0 { background: #e8e2f2; } .rar.t1 { background: var(--blue); color: #fff; } .rar.t2 { background: var(--yellow); }
.rar.t3 { background: var(--pink); color: #fff; } .rar.t4 { color: #fff; text-shadow: 0 1px 0 var(--deep); }
.rar.luck { background: #fff; color: var(--pink); border: 2px solid var(--pink); box-shadow: none; }
@keyframes blink { 50% { filter: brightness(1.4) hue-rotate(60deg); } }
.tick.t2 { box-shadow: 0 3px 0 var(--deep), 0 0 0 2px var(--yellow); }
.tick.t3 { box-shadow: 0 3px 0 var(--deep), 0 0 0 2px var(--pink); }
.tick.t4 { color: #fff; text-shadow: 0 2px 0 var(--deep); }
.tick.t4 span { color: #fff !important; text-decoration: none !important; }

#pull { position: absolute; right: max(16px, 5vw); top: 50%; width: 210px; height: 270px; transform: translateY(-50%); }
#pull.show { animation: pullIn 2.3s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes pullIn { 0% { opacity: 0; transform: translateY(-50%) translateX(120px) rotateY(90deg) scale(0.6); }
  14% { opacity: 1; transform: translateY(-50%) rotateY(0) scale(1.08); } 22% { transform: translateY(-50%) scale(1); }
  85% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-80%) scale(0.85); } }
.pull-rays { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.55) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 5s linear infinite; }
#pull.t-SSR .pull-rays { background: repeating-conic-gradient(rgba(255, 79, 154, 0.6) 0 8deg, rgba(255, 210, 63, 0.5) 8deg 14deg, transparent 14deg 22deg); }
.pull-card { position: relative; height: 100%; border-radius: 20px; background: #fff; color: var(--deep); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 0 0 4px var(--deep), 0 8px 0 4px var(--deep), 0 0 40px rgba(255, 255, 255, 0.8); overflow: hidden; }
.pull-card::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.35; background: var(--pink); }
.pull-card::after { content: ''; position: absolute; inset: -40%; z-index: 2; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.9) 50%, transparent 60%);
  transform: translateX(-100%); animation: shine 1.2s 0.25s ease-in-out 2; pointer-events: none; }
@keyframes shine { to { transform: translateX(100%); } }
.pull-card > * { position: relative; z-index: 1; }
.pull-tier { font: 700 46px/1 var(--font); color: #fff; -webkit-text-stroke: 3px var(--deep); paint-order: stroke fill; text-shadow: 0 4px 0 var(--deep); }
#pull.t-SSR .pull-tier { color: var(--pink); }
.pull-tier:empty { display: none; }
#pull.t-UR .pull-tier { background: linear-gradient(90deg, #ff4f9a, #ffd23f, #7cf07c, #3ec7ff, #b78cff) 0 50% / 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0; text-shadow: none; animation: holo 1.2s linear infinite; filter: drop-shadow(0 3px 0 var(--deep)); }
.pull-img { flex: 1; display: grid; place-items: center; width: 100%; background: rgba(255, 255, 255, 0.85); border-radius: 12px; border: 3px solid var(--deep); }
.pull-img canvas { max-width: 150px; max-height: 96px; }
.pull-stars { color: var(--yellow); font-size: 24px; letter-spacing: 2px; -webkit-text-stroke: 1.5px var(--deep); }
.pull-name { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#toast { background: linear-gradient(90deg, #ff4f9a, #ffd23f, #7cf07c, #3ec7ff, #b78cff, #ff4f9a) 0 50% / 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0; text-shadow: none; filter: drop-shadow(0 3px 0 var(--deep)) drop-shadow(0 0 2px var(--deep)); font-size: 26px; }
#toast.show { animation: toast 1.3s ease-out forwards; }
#banner b { background: linear-gradient(180deg, #fff6b0, #ffd23f 50%, #ff8a3d) ; -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0; text-shadow: none; filter: drop-shadow(0 5px 0 var(--deep)) drop-shadow(0 0 3px var(--deep)); }


.sunburst { position: absolute; left: 50%; top: min(130px, 16vh); width: 760px; height: 760px; pointer-events: none; opacity: 0.12;
  background: repeating-conic-gradient(#ffffff 0 6deg, transparent 6deg 15deg, #00faff 15deg 21deg, transparent 21deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); mask: radial-gradient(circle, #000 10%, transparent 62%); transform: translate(-50%, -50%); animation: spin 30s linear infinite; }
h1 span { text-shadow: 0 4px 0 var(--deep), 0 0 18px var(--c); }
.panel { box-shadow: 0 8px 0 var(--deep), 0 0 0 4px var(--deep), 0 0 0 9px rgba(255, 255, 255, 0.15), 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 79, 154, 0.35); }


@media (max-width: 560px) {
  #toast { font-size: 26px; }
}

/* --- level select (hidden until a level is beaten) --- */
body.locked #select, body.locked #back, body.locked .note.custom { display: none; }
#levels { display: grid; gap: 10px; }
.level { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 10px 16px 10px 10px; border-radius: 18px;
  background: #f4ecff; box-shadow: 0 4px 0 var(--deep), 0 0 0 3px var(--deep); }
.level .n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pink); color: #fff;
  font: 700 22px var(--font); -webkit-text-stroke: 1px var(--deep); paint-order: stroke fill; }
.level:nth-child(2) .n { background: var(--blue); } .level:nth-child(3) .n { background: #ff8a3d; }
.level .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.level .t b { font-size: 22px; } .level .t small { font-weight: 500; font-size: 15px; color: #7a5d99; }
.level .best { flex: none; font-size: 15px; color: #7a5d99; }
.or { text-align: center; color: #7a5d99; font-size: 16px; margin: 18px 0 10px; }
.section { font: 700 17px var(--font); color: #7a5d99; letter-spacing: 1px; margin: 0 0 10px 4px; }
#go { font-size: 18px; }
#r-unlock { margin: 6px 0 2px; color: #5b3d78; } #r-unlock b { color: var(--pink); }

/* The menu is all lowercase (except what you type: URLs are case-sensitive). */
#menu, #menu button { text-transform: lowercase; }
#menu #url { text-transform: none; }