/* Platik Rancher v2 — UI shell. Dark navy glass panels, lime → violet accents, Lilita One titles. */
:root { --pr-bg: #12061f; --pr-panel: rgba(18, 8, 36, .92); --pr-line: rgba(190, 170, 255, .22); --pr-text: #eef0ff; --pr-muted: #b7b3d6;
  --pr-lime: #a4e633; --pr-mint: #4cf04c; --pr-violet: #813df5; --pr-gold: #ffd54a; --pr-coral: #ff5d73; --pr-sky: #7fd6ff; }
.frame.pr { background: var(--pr-bg); touch-action: none; -webkit-tap-highlight-color: transparent; font-family: Nunito, "Noto Sans", system-ui, sans-serif; color: var(--pr-text); }
.frame.pr canvas { width: 100%; height: 100%; display: block; }
.frame.pr .screen { position: absolute; inset: 0; }
.frame.pr [hidden] { display: none !important; }
.frame.pr svg { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -0.2em; flex: none; }

/* buttons */
.frame.pr .btn, .frame.pr .icon-btn, .top .icon-btn { font: 800 16px Nunito, system-ui, sans-serif; color: #fff; border: 0; cursor: pointer; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 44px; padding: 0 1.3em; transition: transform .12s, filter .12s; }
.frame.pr .btn { background: linear-gradient(180deg, #b8f04a, #7fbf1a); color: #10240a; box-shadow: 0 5px 0 #4d7a0e, 0 10px 24px rgba(164, 230, 51, .25); }
.frame.pr .btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.frame.pr .btn:active { transform: translateY(3px) scale(.98); box-shadow: 0 2px 0 #4d7a0e; }
.frame.pr .btn.alt { background: linear-gradient(180deg, #4a4470, #2e2a4e); color: #e9e6ff; box-shadow: 0 5px 0 #1a172e; }
.frame.pr .btn.alt:active { box-shadow: 0 2px 0 #1a172e; }
.frame.pr .btn.danger { background: linear-gradient(180deg, #ff7d8f, #d0304d); color: #fff; box-shadow: 0 5px 0 #7a1226; }
.frame.pr .btn.link { text-decoration: none; }
.frame.pr .icon-btn, .top .icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(20, 8, 40, .7); border: 1px solid var(--pr-line); color: #fff; backdrop-filter: blur(6px); }
.frame.pr .icon-btn svg, .top .icon-btn svg { width: 22px; height: 22px; }
.frame.pr .icon-btn:active, .top .icon-btn:active { transform: scale(.92); }
.top .icon-btn { width: 40px; height: 40px; }
.icon-btn .off, #mute .off { display: none; } .icon-btn.off .on, #mute.off .on { display: none; } .icon-btn.off .off, #mute.off .off { display: block; }
.frame.pr button:focus-visible, .top button:focus-visible { outline: 3px solid var(--pr-sky); outline-offset: 2px; }

/* HUD buttons & banner */
#hudBtns { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; z-index: 5; }
#banner { position: absolute; left: 50%; top: 22%; transform: translate(-50%, 0) scale(.9); text-align: center; opacity: 0; pointer-events: none; z-index: 4; width: min(90%, 620px); }
#banner b { display: block; font: 400 clamp(26px, 5vw, 44px)/1.05 "Lilita One", Nunito, sans-serif; color: #fff; -webkit-text-stroke: 1.5px rgba(20, 8, 40, .6); text-shadow: 0 4px 0 rgba(20, 8, 40, .5), 0 10px 30px rgba(0, 0, 0, .5); letter-spacing: .5px; }
#banner span { display: inline-block; margin-top: 8px; font: 800 clamp(12px, 1.8vw, 15px)/1.4 Nunito, sans-serif; color: #fff; background: rgba(20, 8, 40, .75); border: 1px solid var(--pr-line); padding: 8px 16px; border-radius: 999px; }
#banner.show { animation: banner 3.6s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -12px) scale(1); } }
#fsMsg { position: absolute; right: 14px; top: 60px; margin: 0; font-size: 12px; color: var(--pr-coral); z-index: 5; }
#err { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px; background: rgba(120, 0, 30, .9); color: #fff; font: 12px/1.4 monospace; white-space: pre-wrap; max-height: 40%; overflow: auto; z-index: 50; }

/* intro */
#intro { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background-size: cover; background-position: center; padding-bottom: 5%; transition: opacity .3s; }
#intro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 4, 24, .15), rgba(10, 4, 24, 0) 40%, rgba(10, 4, 24, .55)); }
#intro > *:not(.intro-title):not(.intro-tag) { position: relative; }
.intro-tag { position: absolute; top: 5%; font: 800 clamp(10px, 1.5vw, 13px) Nunito, sans-serif; letter-spacing: 2.5px; text-transform: uppercase; color: #d9b0ff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
#intro .intro-title { top: 11%; font-size: clamp(30px, 7vw, 74px); background: linear-gradient(180deg, #fff 30%, #d9b0ff 70%, #7fd6ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(0 4px 0 rgba(40, 10, 70, .8)) drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.intro-sub { margin-bottom: 14px; font: 800 clamp(13px, 2.2vw, 20px) Nunito, sans-serif; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
#play-btn { font: 400 clamp(20px, 3.4vw, 32px) "Lilita One", Nunito, sans-serif; letter-spacing: 1px; color: #10240a; background: linear-gradient(180deg, #c7ff5a, #8ad21c); box-shadow: 0 6px 0 #4d7a0e, 0 14px 40px rgba(164, 230, 51, .45); padding: .45em 1.6em; border-radius: 999px; display: inline-flex; align-items: center; gap: .3em; animation: breathe 2.2s ease-in-out infinite; }
#play-btn svg { width: .9em; height: .9em; }
#play-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #4d7a0e; animation: none; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.intro-foot { margin-top: 12px; font: 700 clamp(10px, 1.5vw, 13px) Nunito, sans-serif; color: #e5ddff; letter-spacing: 1px; text-transform: uppercase; opacity: .85; }

/* panels */
.panelwrap { display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(8, 3, 20, .45); backdrop-filter: blur(3px); overflow: hidden; }
.panel { position: relative; width: min(94%, 470px); max-height: 96%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; background: var(--pr-panel); border: 1px solid var(--pr-line); border-radius: 20px; padding: 18px 22px 20px; box-shadow: 0 10px 50px rgba(120, 60, 220, .3), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(8px); animation: pop .32s cubic-bezier(.2, 1.4, .4, 1); scrollbar-width: thin; }
.panel.small { width: min(94%, 360px); } .panel.wide { width: min(96%, 560px); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
.panel .tag { font: 800 11px Nunito, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #c9a0ff; }
.panel h2 { margin: 2px 0 8px; font: 400 clamp(24px, 4.5vw, 34px)/1.05 "Lilita One", Nunito, sans-serif; background: linear-gradient(90deg, #fff, #d9b0ff 60%, #7fd6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel p { margin: 6px 0; color: var(--pr-muted); font-size: 14px; line-height: 1.5; }
.panel p.sub { color: #fff; font-weight: 800; }
.panel .btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
.panel .btns.col { flex-direction: column; align-items: stretch; }
.panel .btns.col .btn { justify-content: center; }
.panel .hint { font-size: 12px; margin-top: 12px; }
kbd { display: inline-block; font: 800 11px Nunito, sans-serif; color: #fff; background: #352d5a; border: 1px solid #5a5090; border-bottom-width: 3px; border-radius: 6px; padding: 1px 6px; margin: 0 1px; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(20, 8, 40, .75); border: 1px solid var(--pr-line); border-radius: 999px; padding: 6px 12px 6px 8px; font: 800 15px Nunito, sans-serif; color: #fff; }
.pill svg { width: 20px; height: 20px; }
.pill.coins b { color: var(--pr-gold); } .pill.stars b { color: #fff; }
.stars { display: inline-flex; gap: 1px; } .stars i { display: inline-block; width: 15px; height: 15px; color: #3a3350; }
.stars i.on { color: var(--pr-gold); filter: drop-shadow(0 0 4px rgba(255, 213, 74, .7)); } .stars i svg { width: 100%; height: 100%; }

/* level map */
#map { flex-direction: column; justify-content: flex-start; padding: 0; background: radial-gradient(ellipse at 50% 0%, rgba(129, 61, 245, .25), transparent 60%), rgba(8, 3, 20, .55); }
.mapbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; width: 100%; z-index: 2; }
.mapbar .grow { flex: 1; }
.mapscroll { flex: 1; width: 100%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 0 16px 20px; scrollbar-width: thin; }
.world { position: relative; margin: 6px auto 14px; max-width: 760px; background: rgba(18, 8, 36, .75); border: 1px solid var(--pr-line); border-radius: 18px; padding: 12px 14px 14px; }
.world h3 { margin: 0 0 10px; font: 400 22px "Lilita One", Nunito, sans-serif; color: #fff; display: flex; align-items: baseline; gap: 10px; }
.world h3 span { font: 800 11px Nunito, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #c9a0ff; }
.world.w0 h3 { color: #c7ff5a; } .world.w1 h3 { color: #ffb86b; } .world.w2 h3 { color: #b9a8ff; }
.nodes { display: flex; gap: 8px; justify-content: space-between; position: relative; }
.nodes::before { content: ""; position: absolute; left: 10%; right: 10%; top: 30px; border-top: 3px dashed rgba(255, 255, 255, .18); z-index: 0; }
.node { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #fff; cursor: pointer; padding: 0 2px 4px; font-family: Nunito, sans-serif; }
.node b { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font: 400 24px "Lilita One", Nunito, sans-serif; background: linear-gradient(180deg, #4a4470, #2e2a4e); border: 3px solid #6a62a0; box-shadow: 0 5px 0 #1a172e; transition: transform .15s; }
.node b svg { width: 24px; height: 24px; fill: #9a93c6; }
.node.done b { background: linear-gradient(180deg, #b8f04a, #7fbf1a); border-color: #dfff9a; color: #10240a; box-shadow: 0 5px 0 #4d7a0e; }
.node.cur b { background: linear-gradient(180deg, #c48aff, #7a3fd0); border-color: #e6ccff; box-shadow: 0 5px 0 #4a1f8a, 0 0 24px rgba(196, 138, 255, .7); animation: pulse 1.6s ease-in-out infinite; }
.node.boss b { border-radius: 30%; }
.node.locked { cursor: not-allowed; opacity: .55; }
.node:not(.locked):hover b { transform: translateY(-3px) scale(1.06); }
.node.shake { animation: shake .4s; }
.node small { font: 800 11px/1.2 Nunito, sans-serif; color: var(--pr-muted); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* level card */
.cardrow { display: flex; gap: 14px; align-items: flex-start; }
.cropbox { flex: none; width: 96px; text-align: center; background: rgba(255, 255, 255, .05); border: 1px solid var(--pr-line); border-radius: 14px; padding: 6px 4px; }
.cropbox canvas { width: 48px; height: 48px; display: block; margin: 0 auto; }
.cropbox small { font: 800 11px Nunito, sans-serif; color: #c9a0ff; }
.cardtext { flex: 1; min-width: 0; }
.panel p.obj { color: #fff; font-size: 15px; margin-top: 0; } .panel p.obj b { color: var(--pr-lime); }
.criteria { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--pr-muted); }
.criteria li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.panel p.tip { background: rgba(164, 230, 51, .1); border-left: 3px solid var(--pr-lime); padding: 8px 10px; border-radius: 0 10px 10px 0; color: #e8ffc8; }
.panel p.best { font-size: 12px; color: var(--pr-gold); font-weight: 800; min-height: 1em; }

/* results */
.bigstars { display: flex; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.bigstars .stars i { width: 52px; height: 52px; opacity: .7; color: #5a5280; transform: scale(.7); transition: none; }
.bigstars .stars i:nth-child(2) { width: 64px; height: 64px; margin-top: -8px; }
.bigstars .stars i.on { opacity: 1; }
.bigstars .stars i.pop { animation: starpop .6s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes starpop { 0% { transform: scale(2.4) rotate(-30deg); opacity: 0; } 60% { transform: scale(.9) rotate(5deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.score { text-align: center; margin: 4px 0 8px; }
.score small { display: block; font: 800 11px Nunito, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #c9a0ff; }
.score b { font: 400 48px/1 "Lilita One", Nunito, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
#results.won .score b { color: var(--pr-gold); text-shadow: 0 0 24px rgba(255, 213, 74, .5); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14px; color: var(--pr-muted); }
.rows li b { color: #fff; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.rows li.coins b { color: var(--pr-gold); } .rows li.coins svg { width: 16px; height: 16px; }

/* shop */
.shophead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uprow { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.upicon { width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--pr-line); overflow: hidden; }
.upicon canvas { width: 44px; height: 44px; display: block; margin: 4px; }
.uptext { min-width: 0; } .uptext b { display: block; font-size: 15px; color: #fff; } .uptext span { display: block; font-size: 12px; color: var(--pr-muted); } .uptext em { display: block; font-style: normal; font-size: 12px; color: var(--pr-lime); font-weight: 800; }
.uptier { display: flex; gap: 3px; } .uptier i { width: 8px; height: 18px; border-radius: 3px; background: #2e2a4e; border: 1px solid #4a4470; } .uptier i.on { background: var(--pr-lime); border-color: #dfff9a; box-shadow: 0 0 8px rgba(164, 230, 51, .6); }
.buy { font: 800 14px Nunito, sans-serif; color: #10240a; background: linear-gradient(180deg, #ffe68a, #f0b820); border: 0; border-radius: 12px; min-height: 40px; padding: 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 4px 0 #9a6a00; white-space: nowrap; }
.buy svg { width: 16px; height: 16px; } .buy:active { transform: translateY(2px); box-shadow: 0 2px 0 #9a6a00; }
.buy.poor { filter: grayscale(.7); opacity: .6; cursor: not-allowed; } .buy.maxed { background: linear-gradient(180deg, #4a4470, #2e2a4e); color: #cfc8ff; box-shadow: 0 4px 0 #1a172e; cursor: default; }

/* settings */
.panel label.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-weight: 800; font-size: 14px; }
.panel input[type=range] { width: 50%; accent-color: var(--pr-lime); }
.panel input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--pr-lime); }
.version { text-align: right; font-size: 11px; color: var(--pr-muted); margin-top: 6px; }

/* daily */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0; }
.day { background: rgba(255, 255, 255, .05); border: 1px solid var(--pr-line); border-radius: 12px; padding: 8px 2px; text-align: center; font: 800 12px Nunito, sans-serif; color: var(--pr-muted); }
.day svg { width: 22px; height: 22px; display: block; margin: 4px auto; } .day b { color: #fff; } .day small { font-size: 10px; display: block; }
.day.on { background: rgba(164, 230, 51, .12); border-color: rgba(164, 230, 51, .5); } .day.now { border-color: var(--pr-gold); box-shadow: 0 0 16px rgba(255, 213, 74, .5); transform: scale(1.06); }
.day:last-child svg { width: 28px; height: 28px; }

/* touch controls — inside the frame, safe-area aware, 44px+ targets */
#touch { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#stick { position: absolute; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 124px; height: 124px; border-radius: 50%; background: rgba(20, 8, 40, .45); border: 2px solid rgba(255, 255, 255, .25); backdrop-filter: blur(4px); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
#stick span { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font: 800 10px Nunito, sans-serif; letter-spacing: 2px; color: rgba(255, 255, 255, .6); }
#knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9b0ff, #7a3fd0 70%); box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .25); border: 2px solid rgba(255, 255, 255, .5); transition: transform .06s; pointer-events: none; }
#stick.on #knob { transition: none; }
#tbtns { position: absolute; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 14px; align-items: flex-end; }
#tbtns button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; width: 74px; height: 74px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); color: #fff; display: grid; place-items: center; gap: 0; padding: 0; font: 800 10px Nunito, sans-serif; letter-spacing: 1.5px; box-shadow: 0 5px 0 rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .35); backdrop-filter: blur(4px); cursor: pointer; }
#tbtns button svg { width: 30px; height: 30px; pointer-events: none; } #tbtns button small { pointer-events: none; }
#tbtns button.on, #tbtns button:active { transform: translateY(3px) scale(.96); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); filter: brightness(1.15); }
#tJump { background: linear-gradient(180deg, rgba(196, 138, 255, .95), rgba(122, 63, 208, .95)); width: 86px; height: 86px; }
#tAct { background: linear-gradient(180deg, rgba(184, 240, 74, .95), rgba(127, 191, 26, .95)); color: #10240a; }
#rotateHint { display: none; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(20, 8, 40, .8); border: 1px solid var(--pr-line); font: 800 12px Nunito, sans-serif; color: #fff; z-index: 7; pointer-events: none; white-space: nowrap; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) { #rotateHint { display: flex; } }
@media (max-width: 480px) { #stick { width: 100px; height: 100px; } #knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; } #tbtns button { width: 60px; height: 60px; } #tJump { width: 70px; height: 70px; } #tbtns button svg { width: 24px; height: 24px; } }

/* fullscreen */
.frame.pr:fullscreen { border-radius: 0; width: 100vw; height: 100vh; }
body.fs .top, body.fs .info { display: none; }
body.fs .stage { padding: 0; max-width: none; }
@media (max-width: 480px) { .panel { padding: 14px 14px 16px; } .node b { width: 48px; height: 48px; font-size: 19px; } .nodes::before { top: 24px; } .node small { font-size: 9px; } .uprow { grid-template-columns: 44px 1fr auto; } .uptier { display: none; } .mapbar .btn { padding: 0 .8em; } }
@media (prefers-reduced-motion: reduce) { #play-btn, .node.cur b { animation: none; } .panel { animation: none; } }

/* immersive (app-like) mode on touch devices: the frame fills the screen, the page chrome disappears */
body.immersive { overflow: hidden; background: #12061f; }
body.immersive .top, body.immersive .info { display: none; }
body.immersive .stage { padding: 0; max-width: none; }
body.immersive .frame.pr { position: fixed; inset: 0; width: auto; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; z-index: 50; }
body.immersive #hudBtns { top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); }
body.immersive .mapbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
#mapHome { display: none; } body.touch #mapHome { display: inline-flex; }
#touch:not([hidden]) + #rotateHint { display: none !important; }