/* Rebirth panel structure, adapted to the pen's mint/blue palette. */
.pen-upgrade-dialog {
  box-sizing:border-box; position:relative; width:min(520px,calc(100vw - 28px));
  max-height:calc(100dvh - 32px); overflow:auto; padding:14px 28px 16px;
  border:4px solid #153b3b; border-radius:24px; color:#fff;
  background:radial-gradient(circle at 18% 18%,#fff7,transparent 25%),
    repeating-linear-gradient(-18deg,#ffffff1a 0 9px,transparent 9px 24px),
    linear-gradient(150deg,#9df5ba 0%,#75ded7 48%,#69bdf0 100%);
  box-shadow:inset 0 5px #ffffff66,inset 0 -7px #236c8133,0 9px #143d4866,0 20px 48px #0005;
  font-family:GameHeavy,Arial,sans-serif; text-align:center;
}
.pen-upgrade-dialog::before {content:"";position:absolute;inset:10px;border:2px solid #24616b88;border-radius:15px;pointer-events:none;}
.pen-upgrade-dialog::backdrop {background:#142a397d;}
.pen-upgrade-dialog *, .pen-upgrade-dialog *::before, .pen-upgrade-dialog *::after {box-sizing:border-box;}
.pen-upgrade-dialog h2 {display:flex;align-items:center;justify-content:center;gap:6px;margin:0 26px 4px 0;font:inherit;font-size:clamp(25px,5vw,38px);line-height:1.1;white-space:nowrap;-webkit-text-stroke:4px #163d42;paint-order:stroke fill;text-shadow:0 3px #163d42;}
.pen-upgrade-dialog h2 img {width:53px;height:53px;object-fit:contain;}
.pen-upgrade-close {position:absolute;top:13px;right:13px;z-index:2;width:35px;height:35px;display:grid;place-items:center;padding:0 0 3px;border:3px solid #491c38;border-radius:10px;background:linear-gradient(#ff9bcc,#eb468f);color:#fff;font:bold 30px/1 Arial,sans-serif;box-shadow:inset 0 2px #fff6,0 3px #491c3855;cursor:pointer;}
.pen-upgrade-levels {position:relative;display:grid;place-items:center;width:min(320px,100%);height:46px;margin:0 auto 17px;padding:8px 12px;white-space:nowrap;border:3px solid #4a4120;border-radius:12px;background:linear-gradient(#fff393,#ffd34d);font-size:22px;line-height:1.1;-webkit-text-stroke:3px #4a3416;paint-order:stroke fill;box-shadow:inset 0 3px #fff7,0 4px #39474040;}
.pen-upgrade-comparison {display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:10px;align-items:center;}
.pen-upgrade-capacity {position:relative;display:grid;gap:5px;justify-items:center;padding:12px 5px;border:3px solid #23556a;border-radius:15px;background:linear-gradient(#c5f2ff,#69c2ee);box-shadow:inset 0 4px #fff8,0 4px #23556a44;}
.pen-upgrade-capacity.is-next {background:linear-gradient(#d5ff9c,#73e482);border-color:#286244;}
.pen-upgrade-capacity span {color:#fff;font-size:16px;-webkit-text-stroke:2px #174657;paint-order:stroke fill;}
.pen-upgrade-capacity strong {font-size:52px;line-height:1;-webkit-text-stroke:4px #204b50;paint-order:stroke fill;text-shadow:0 3px #204b50;}
.pen-upgrade-capacity small {color:#fff;font-size:13px;-webkit-text-stroke:2px #174657;paint-order:stroke fill;}
.pen-upgrade-capacity b {position:absolute;top:-12px;right:-7px;padding:4px 7px;border:2px solid #5d2e4e;border-radius:8px;background:#ff8eca;font-size:12px;-webkit-text-stroke:2px #5d2e4e;paint-order:stroke fill;transform:rotate(6deg);}
.pen-upgrade-arrow {font:34px/1 Arial,sans-serif;color:#fff194;-webkit-text-stroke:2px #22525c;paint-order:stroke fill;}
.pen-upgrade-cost {display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:8px;width:min(300px,100%);height:52px;white-space:nowrap;margin:12px auto 0;padding:2px 10px;border:3px solid #20515f;border-radius:12px;background:linear-gradient(#286d79,#205260);box-shadow:inset 0 3px #ffffff26;font-size:21px;text-align:left;}
.pen-upgrade-cost div {display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:2px;}
.pen-upgrade-cost strong {color:#fff28a;font-size:27px;font-variant-numeric:tabular-nums;-webkit-text-stroke:2px #3a321d;paint-order:stroke fill;}
.pen-upgrade-cost img {width:38px;height:38px;object-fit:contain;transform:translateY(-2px);}
.pen-upgrade-actions {display:flex;justify-content:center;margin-top:10px;}
.pen-upgrade-actions button {width:65%;height:53px;white-space:nowrap;padding:8px 10px;border:3px solid #235032;border-radius:13px;background:linear-gradient(#b8ff73,#45d65e);color:#fff;font:clamp(17px,4vw,27px)/1.1 GameHeavy,Arial,sans-serif;-webkit-text-stroke:3px #234c2e;paint-order:stroke fill;box-shadow:inset 0 4px #fff7,0 5px #234c2e66;cursor:pointer;}
.pen-upgrade-actions button:disabled {filter:saturate(.45);opacity:.65;cursor:default;}
.pen-upgrade-dialog button:enabled:hover {filter:brightness(1.08);}
.pen-upgrade-dialog button {touch-action:manipulation;user-select:none;}
.pen-upgrade-dialog button:enabled:active {filter:brightness(.96);}
.pen-upgrade-dialog button:focus-visible {outline:3px solid #fff;outline-offset:3px;}
/* The treadmill's longer labels need a quieter scale than the pen's slot counts. */
#treadmillUpgradeDialog h2 {display:block;font-size:28px;margin:0 0 14px;padding:8px 0;-webkit-text-stroke-width:3px;}
#treadmillUpgradeDialog h2 > span {display:inline-block;position:relative;}
#treadmillUpgradeDialog h2 img {display:block;position:absolute;left:calc(100% + 8px);top:50%;width:40px;height:40px;transform:translateY(calc(-50% - 3px));}
#treadmillUpgradeDialog .treadmill-upgrade-icon {width:96px;max-width:100%;height:96px;object-fit:contain;}
#treadmillUpgradeDialog .pen-upgrade-capacity strong {font-size:24px;white-space:nowrap;-webkit-text-stroke-width:2px;text-shadow:0 2px #204b50;}
#treadmillUpgradeDialog .pen-upgrade-capacity span {font-size:15px;}
#treadmillUpgradeDialog .pen-upgrade-capacity small {font-size:12px;}
#treadmillUpgradeDialog .pen-upgrade-cost {width:fit-content;max-width:100%;grid-template-columns:auto auto;gap:10px;padding-inline:8px;font-size:18px;}
#treadmillUpgradeDialog .pen-upgrade-cost strong {font-size:24px;}
#treadmillUpgradeDialog .pen-upgrade-actions button {width:auto;max-width:100%;height:46px;padding:8px 12px;font-size:18px;}
@media(max-width:400px),(max-height:560px) {
  .pen-upgrade-dialog {padding:12px 19px 14px;border-radius:19px;}
  .pen-upgrade-dialog h2 {font-size:25px;margin-top:0;margin-bottom:4px;}
  .pen-upgrade-dialog h2 img {width:35px;height:35px;}
  .pen-upgrade-levels {font-size:18px;height:40px;padding:6px 10px;margin-bottom:14px;}
  .pen-upgrade-capacity {padding:9px 4px;gap:3px;}
  .pen-upgrade-capacity strong {font-size:38px;}
  .pen-upgrade-capacity span {font-size:13px;}
  .pen-upgrade-capacity small {font-size:11px;}
  .pen-upgrade-comparison {gap:6px;grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr);}
  .pen-upgrade-arrow {font-size:27px;}
  .pen-upgrade-cost {grid-template-columns:minmax(0,1fr) 108px;gap:6px;font-size:16px;height:50px;padding:2px 9px;}
  .pen-upgrade-cost strong {font-size:23px;}
  .pen-upgrade-actions button {height:44px;font-size:17px;}
}
@media(max-width:480px),(max-height:560px) {
  #treadmillUpgradeDialog h2 {font-size:18px;padding:8px 0;margin:0 0 10px;-webkit-text-stroke-width:2px;}
  #treadmillUpgradeDialog h2 img {left:calc(100% + 5px);width:28px;height:28px;}
  #treadmillUpgradeDialog .treadmill-upgrade-icon {width:72px;height:72px;}
  #treadmillUpgradeDialog .pen-upgrade-capacity strong {font-size:clamp(12px,4vw,22px);}
  #treadmillUpgradeDialog .pen-upgrade-capacity span {font-size:13px;}
  #treadmillUpgradeDialog .pen-upgrade-capacity small {font-size:11px;}
  #treadmillUpgradeDialog .pen-upgrade-cost {font-size:16px;}
  #treadmillUpgradeDialog .pen-upgrade-cost strong {font-size:22px;}
  #treadmillUpgradeDialog .pen-upgrade-actions button {font-size:17px;}
}
@media(max-width:360px) {
  #treadmillUpgradeDialog h2 {padding-top:32px;font-size:16px;}
}