/* Presentation only. Viewport, input coordinates and game rules remain unchanged. */
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice{border:0!important;box-shadow:none!important;clip-path:none!important}
@media(hover:hover){#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice:hover{outline:none!important;transform:translateX(2px)!important}}
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice:focus-visible{outline:2px solid #497b36!important;outline-offset:2px}
#howToOverlay#howToOverlay#howToOverlay .frog-panel{width:540px!important}
#howToOverlay .ui-help-intro{font:24px/1.25 ReferencePixel,monospace!important;text-align:center;color:#497b36!important;margin:8px 0 20px!important}
.ui-help-steps{display:grid;gap:18px}
.ui-help-steps section{display:grid;grid-template-columns:54px minmax(0,1fr);gap:18px;align-items:center}
.ui-help-steps img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
#howToOverlay#howToOverlay#howToOverlay .ui-help-steps h3{font:28px/1.1 ReferencePixel,monospace!important;margin:0 0 5px!important;color:#073720!important}
#howToOverlay#howToOverlay#howToOverlay .ui-help-steps p{font:23px/1.25 ReferencePixel,monospace!important;margin:0!important;color:#35553a!important}
#howToOverlay#howToOverlay#howToOverlay .ui-help-note{font:21px/1.3 ReferencePixel,monospace!important;color:#35553a!important;border-top:1px solid #bdcb9e;margin:22px 0 8px!important;padding-top:14px}
#dashboardOverlay#dashboardOverlay#dashboardOverlay .frog-panel{width:500px!important}
.ui-profile{font-family:ReferencePixel,monospace;color:#073720}
.ui-profile-heading{display:flex;align-items:center;justify-content:center;gap:18px;margin:4px 0 18px}
.ui-profile-heading img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
#dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardCurrentTag{font-size:32px!important;margin:0!important;overflow-wrap:anywhere}
.ui-profile-heading p{margin:4px 0 0!important;font-size:23px!important;color:#497b36!important}
.ui-progress{height:9px;background:#dbe5bf;border-radius:7px;overflow:hidden;max-width:300px;margin:auto}
.ui-progress i{display:block;height:100%;background:#6ba74c;border-radius:inherit}
#dashboardOverlay .ui-progress-caption{font-size:21px!important;text-align:center;margin:8px 0 20px!important;color:#497b36!important}
.ui-records{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;border-top:1px solid #bdcb9e;border-bottom:1px solid #bdcb9e;padding:18px 0;margin-bottom:22px}
.ui-records>div{display:flex;flex-direction:column;gap:4px}
#dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records span{font-size:20px!important;color:#497b36!important}
#dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records strong{font-size:32px!important;font-weight:400!important;color:#006b83!important;line-height:1.1!important}
.ui-tag-label{display:block;font-size:20px!important;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.ui-tag-editor{display:flex;gap:8px;align-items:center}
#dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardTagInput{flex:1;min-width:0!important;min-height:44px!important;font:24px/1.2 ReferencePixel,monospace!important;padding:9px 12px!important;border:0!important;border-radius:7px!important;background:#fff8db!important;color:#073720!important}
#dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardSaveTagBtn{width:auto!important;margin:0!important;font:24px/1.2 ReferencePixel,monospace!important;padding:8px 14px!important;min-height:44px!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#073720!important}
#dashboardTagMessage{font-size:20px!important;margin:6px 0!important;color:#35553a!important}
@media(pointer:coarse),(max-width:600px){
 #howToOverlay#howToOverlay#howToOverlay .frog-panel,#dashboardOverlay#dashboardOverlay#dashboardOverlay .frog-panel{width:880px!important;max-width:calc(94 * var(--app-vw,1vw))!important}
 #howToOverlay#howToOverlay#howToOverlay .ui-help-intro{font-size:36px!important}
 .ui-help-steps{gap:28px}.ui-help-steps section{grid-template-columns:76px minmax(0,1fr);gap:24px}.ui-help-steps img{width:70px;height:70px}
 #howToOverlay#howToOverlay#howToOverlay .ui-help-steps h3{font-size:42px!important}
 #howToOverlay#howToOverlay#howToOverlay .ui-help-steps p{font-size:38px!important;line-height:1.25!important}
 #howToOverlay#howToOverlay#howToOverlay .ui-help-note{font-size:34px!important}
 .ui-profile-heading img{width:80px;height:80px}
 #dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardCurrentTag{font-size:46px!important}
 #dashboardOverlay .ui-profile-heading p,#dashboardOverlay .ui-progress-caption{font-size:34px!important}
 .ui-progress{max-width:520px;height:12px}.ui-records{gap:24px;padding:24px 0}
 #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records span,#dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-tag-label{font-size:32px!important}
 #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records strong{font-size:46px!important}
 #dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardTagInput,#dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardSaveTagBtn{font-size:38px!important;min-height:64px!important}
 #dashboardOverlay #dashboardTagMessage{font-size:30px!important}
}

/* Upgrade feedback: move lettering only, leave row and icon stationary. */
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice:is(:hover,:active){transform:none!important;box-shadow:none!important}
#upgradeOverlay .frog-upgrade-title,#upgradeOverlay .frog-upgrade-desc{transition:transform 120ms ease-out}
@media(hover:hover) and (pointer:fine){
 #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice:hover .frog-upgrade-title,
 #upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice:hover .frog-upgrade-desc{transform:translateX(4px)!important}
}
@media(prefers-reduced-motion:reduce){#upgradeOverlay .frog-upgrade-title,#upgradeOverlay .frog-upgrade-desc{transition:none!important;transform:none!important}}

/* Compact personal stats, readable level details, stepped progress meter. */
#dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-profile-heading p{font:27px/1.25 ReferencePixel,monospace!important;color:#35553a!important}
#dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-progress-caption{font:25px/1.25 ReferencePixel,monospace!important;color:#35553a!important;margin:10px 0 16px!important}
.ui-progress{max-width:100%;height:14px;border:2px solid #073720;border-radius:0;background:#dbe5bf;position:relative}
.ui-progress i{border-radius:0;background:#6ba74c;box-shadow:inset 0 3px #97c969}
.ui-progress:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(5% - 2px),#073720 calc(5% - 2px),#073720 5%);pointer-events:none}
.ui-records{display:flex;flex-direction:column;gap:0;padding:8px 0;margin-bottom:16px}
.ui-records>div{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;gap:18px;padding:5px 0}
#dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records span{font-size:23px!important}
#dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records strong{font-size:27px!important;text-align:right}
@media(pointer:coarse),(max-width:600px){
 #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-profile-heading p{font-size:40px!important}
 #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-progress-caption{font-size:38px!important}
 .ui-progress{height:20px}.ui-records{gap:0;padding:12px 0}.ui-records>div{padding:7px 0}
 #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records span{font-size:34px!important}
 #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records strong{font-size:38px!important}
}

/* Desktop How to Play / My Stats — panel width dialed back down from
   ChatGPT's original 540/500px (confirmed too big on a normal 1920px
   monitor), but font-sizes are kept close to original. Two earlier
   attempts here also shrank the fonts along with the width and both
   came back reported as too small — on a real 1920x1080 monitor AND on
   a smaller/scaled laptop — so the width reduction alone was likely
   the whole fix needed; font-size didn't need to shrink this much (if
   at all). Erring toward the larger/original side this time rather
   than risk a third "too small" report.
   dashboardTagInput/SaveTagBtn are intentionally left alone — their
   24px already exact-matches #endSummaryTagInput from an earlier fix. */
@media (min-width: 601px) and (pointer: fine) {
  #howToOverlay#howToOverlay#howToOverlay .frog-panel { width: 490px !important; }
  #howToOverlay#howToOverlay#howToOverlay .ui-help-intro { font-size: 21px !important; }
  #howToOverlay#howToOverlay#howToOverlay .ui-help-steps h3 { font-size: 24px !important; }
  #howToOverlay#howToOverlay#howToOverlay .ui-help-steps p { font-size: 20px !important; }
  #howToOverlay#howToOverlay#howToOverlay .ui-help-note { font-size: 18px !important; }

  #dashboardOverlay#dashboardOverlay#dashboardOverlay .frog-panel { width: 470px !important; }
  #dashboardOverlay#dashboardOverlay#dashboardOverlay #dashboardCurrentTag { font-size: 26px !important; }
  #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-profile-heading p { font-size: 21px !important; }
  #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-progress-caption { font-size: 20px !important; }
  #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records span { font-size: 19px !important; }
  #dashboardOverlay#dashboardOverlay#dashboardOverlay .ui-records strong { font-size: 22px !important; }
}

/* Upgrade cards: clipped pixel corners; preserve existing text hover. */
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice {
 border-radius:0!important;
 clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)!important;
}
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-emoji {image-rendering:pixelated!important}
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-emoji[data-approved="role draft"] {
 width:64px!important;height:28px!important;left:3px!important;
 background-size:64px 28px!important;image-rendering:pixelated!important;
}

/* Short gold pixel cue at the crowned frog; no panel or text. */
.frog-crown-upgrade-cue{position:absolute;left:50%;top:-8px;width:0;height:0;z-index:30;pointer-events:none}
.frog-crown-upgrade-cue i{position:absolute;width:2px;height:2px;background:#ffe885;box-shadow:0 -2px #ffe885,0 2px #ffe885,-2px 0 #ffe885,2px 0 #ffe885;left:calc(-12px + var(--spark)*12px);top:0;opacity:0;animation:crown-spark .5s steps(4,end) forwards;animation-delay:calc(var(--spark)*.06s)}
@keyframes crown-spark{0%{opacity:1;translate:0 3px}65%{opacity:1;translate:0 -5px}100%{opacity:0;translate:0 -8px}}
.frog-crown-pop::before{animation:crown-upgrade-pop .55s steps(5,end)}
@keyframes crown-upgrade-pop{0%{translate:0 0}45%{translate:0 -3px}100%{translate:0 0}}

/* Card surface stays identical in every interaction state; only text moves. */
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice,
#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-choice:is(:hover,:focus,:active){
 background:linear-gradient(110deg,#fffbea,#fff6d6)!important;
 filter:none!important;box-shadow:none!important;transform:none!important;
 -webkit-tap-highlight-color:transparent;
}

/* Approved orb preview: stationary pixel outline, brightness-only pulse. */
#frog-game .frog-orb::after {
 width:100%!important;height:100%!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 background:url("../game-assets/sprites/orb-pixel-ring.svg") center/contain no-repeat!important;
 image-rendering:pixelated;
 transform:translate(-50%,-50%)!important;
 animation:orb-pixel-ring-pulse 1.6s steps(3,end) infinite!important;
}
@keyframes orb-pixel-ring-pulse {0%,100%{opacity:.45}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){
 #frog-game .frog-orb::after{animation:none!important;opacity:.8}
}

/* In-run tutorial bubbles; coordinates follow the game's viewport scaling. */
#runTutorial{position:fixed;inset:0;z-index:2147483000;isolation:isolate;touch-action:none;font-family:ReferencePixel,monospace;}
#runTutorial .tutorial-pointer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
#runTutorial line{stroke:#fff3c4;stroke-width:4;stroke-linecap:round;}
#runTutorial .tutorial-ring{position:absolute;border:3px solid #fff3c4;border-radius:8px;box-shadow:0 0 0 3px #214a35;pointer-events:none;box-sizing:border-box;}
#runTutorial .tutorial-bubble{position:absolute;box-sizing:border-box;width:390px;max-width:calc(100% - 32px);max-height:calc(100% - 32px);overflow:auto;background:#fff3d0;color:#153f2c;border:3px solid #284f35;border-radius:9px;padding:18px 20px;box-shadow:0 5px 0 #163926;font-size:27px;line-height:1.2;}
#runTutorial p{margin:0 0 16px;}
#runTutorial footer{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
#runTutorial button{font:inherit;cursor:pointer;border:0;border-radius:7px;padding:10px 14px;background:#28563c;color:#fff3d0;min-height:44px;}
#runTutorial [data-skip]{background:transparent;color:#35563f;font-size:.8em;}
#runTutorial button:focus-visible{outline:3px solid #007d91;outline-offset:3px;}
@media(pointer:coarse){#runTutorial .tutorial-bubble{width:660px;font-size:40px;padding:24px;}#runTutorial button{min-height:80px;padding:14px 20px;}}

/* Approved A + shine: larger chunky sprite, with its own animated rim. */
#frog-game .frog-orb::before{
  width:72%;height:72%;
  background:url("../game-assets/sprites/orb-a-shine.svg") center/contain no-repeat!important;
  border-radius:0!important;filter:none!important;image-rendering:pixelated;
}
#frog-game .frog-orb::after{
  display:block!important;width:100%;height:100%;border:0;border-radius:0;
  background:url("../game-assets/sprites/orb-a-ring.svg") center/contain no-repeat;
  image-rendering:pixelated;box-shadow:none!important;
  animation:orb-a-ring-pulse 1.6s steps(3,end) infinite;
}
@keyframes orb-a-ring-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.6;}
  50%{transform:translate(-50%,-50%) scale(1.04);opacity:.95;}
}
@media(prefers-reduced-motion:reduce){
  #frog-game .frog-orb::after{animation:none;transform:translate(-50%,-50%);opacity:.8;}
  #frog-game .frog-orb::before{background-image:url("../game-assets/sprites/orb-a-static.svg")!important;}
}


/* Long Tongue: short pixel tongue and a visual-only copy of the collected orb. */
#frog-game .frog-tongue-effect{position:absolute;inset:0;z-index:26;pointer-events:none;overflow:visible;}
#frog-game .frog-tongue-shaft{position:absolute;display:block;left:0;top:0;height:3px;margin-top:-1px;background:#ef548c;box-shadow:0 -1px #79223f,0 1px #79223f;transform-origin:0 50%;pointer-events:none;}
#frog-game .frog-tongue-tip{position:absolute;display:block;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;background:#ff8fb3;box-shadow:inset -2px -2px #df3e78;clip-path:polygon(0 2px,2px 2px,2px 0,5px 0,5px 1px,6px 1px,6px 5px,4px 5px,4px 6px,1px 6px,1px 4px,0 4px);transform-origin:center;pointer-events:none;}
#frog-game .frog-tongue-orb{position:absolute;left:0;top:0;pointer-events:none;}
/* Wide tongue artwork stays legible beside the existing upgrade text. */
#upgradeOverlay .frog-upgrade-emoji[data-approved="long tongue"]{background-size:contain!important;background-position:center!important;}

/* Original menu geometry; restrained Epic-only color treatment. */
#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay .upgrade-rarity-label{display:none!important}
#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay[data-rarity="epic"] .frog-upgrade-choice,
#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay[data-rarity="epic"] .frog-upgrade-choice:is(:hover,:focus,:active){background:linear-gradient(110deg,#fff5e2,#f7e5c5)!important;box-shadow:none!important}

/* Match visible artwork size while preserving the approved image files. */
#upgradeOverlay .frog-upgrade-emoji[data-approved="long tongue"]{background-size:157.08% auto!important;background-position:57.77% 64.25%!important}
#upgradeOverlay .frog-upgrade-emoji[data-approved="deep pond"]{background-size:174.99% auto!important;background-position:50.08% 88.51%!important}
img[src*="upgrade-long-tongue.png"],img.upgrade-icon-long-tongue{transform:translate(-4.45%,-6.1%) scale(1.5708)!important;transform-origin:center!important}
img[src*="upgrade-deep-pond.png"],img.upgrade-icon-deep-pond{transform:translate(-0.06%,-6.38%) scale(1.7499)!important;transform-origin:center!important}

/* Epic value accents retain the approved light orange. */
#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay[data-rarity="epic"] .frog-upgrade-desc :is(.menu-number-accent,[data-card-accent],.stat-highlight,span){color:#b88249!important}

/* Second Bloom: center its visible pixels within the standard icon slot. */
#upgradeOverlay .frog-upgrade-emoji[data-approved="second bloom"]{background-size:162.13% auto!important;background-position:45.65% 59.9%!important}
img[src*="upgrade-second-bloom.png"],img.upgrade-icon-second-bloom{transform:translate(2.7%,-5.98%) scale(1.6213)!important;transform-origin:center!important}

/* Uniform upgrade sprite slots, using Common Deathrattle proportions. */
#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-emoji[data-approved]{width:42px!important;height:42px!important;left:14px!important;top:50%!important;scale:1!important;transform:translateY(-50%)!important;background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
@media(pointer:coarse),(max-width:600px){#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay#upgradeOverlay .frog-upgrade-emoji[data-approved]{width:56px!important;height:56px!important;left:36px!important}}

/* Game controls should never invoke native long-press text selection. */
html, body, body *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
body img{-webkit-user-drag:none;}
body input,body textarea,body [contenteditable="true"],body [contenteditable=""],body [contenteditable="plaintext-only"],body [contenteditable="true"] *,body [contenteditable=""] *,body [contenteditable="plaintext-only"] *{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}