/* Touch layout uses one set of safe-area anchors in either orientation. */
/* iOS needs the prefixed rules on overlay contents as well as the page. */
html.has-touch-controls,
html.has-touch-controls body,
html.has-touch-controls body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html.has-touch-controls :is(input, textarea, [contenteditable]:not([contenteditable="false"])),
html.has-touch-controls [contenteditable]:not([contenteditable="false"]) * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
html.has-touch-controls img {
  -webkit-user-drag: none;
}
/* Small laptops need the full menu stack to fit above the bottom edge. */
@media (max-height:700px) {
 html:not(.has-touch-controls) {--left-menu-top:180px;--left-menu-step:66px;--left-hud-lift:0px;}
 html:not(.has-touch-controls) :is(.trail-shop-launcher,.player-trail-shop-launcher,.skins-shop-launcher,.daily-rewards-launcher,.emoji-hud-slot) {scale:.8;transform-origin:top left;}
 html:not(.has-touch-controls) #coinsPerSecondPanel {top:85px;left:14px;transform:none;}
 html:not(.has-touch-controls) #speedMultiplierPanel {top:85px;left:104px;transform:none;}
}
@media (max-height:520px) {
 html:not(.has-touch-controls) {--left-menu-top:140px;--left-menu-step:52px;}
 html:not(.has-touch-controls) :is(.trail-shop-launcher,.player-trail-shop-launcher,.skins-shop-launcher,.daily-rewards-launcher,.emoji-hud-slot) {scale:.6;}
}
html.has-touch-controls {
  --touch-top: calc(env(safe-area-inset-top, 0px) + 8px);
  --touch-left: calc(env(safe-area-inset-left, 0px) + 10px);
  --touch-right: calc(env(safe-area-inset-right, 0px) + 10px);
  --touch-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  --touch-menu: 52px;
  --touch-menu-step: 62px;
  --touch-menu-top: calc(var(--touch-top) + 132px);
}
html.has-touch-controls .mobile-controls { position:fixed; inset:0; display:block; z-index:35; pointer-events:none; }
html.has-touch-controls .mobile-controls.is-blocked { visibility:hidden; }
html.has-touch-controls :is(.mobile-stick,.mobile-jump,.mobile-attack,.mobile-camera-zone) { position:absolute; pointer-events:auto; touch-action:none; user-select:none; -webkit-user-select:none; }
html.has-touch-controls .mobile-stick { left:var(--touch-left); bottom:calc(var(--touch-bottom) + 65px); width:104px; height:104px; border:3px solid #ffffffe0; border-radius:50%; background:#332d5970; box-shadow:inset 0 0 0 5px #a7ddff33; }
html.has-touch-controls .mobile-stick span { position:absolute; left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border:3px solid white;border-radius:50%;background:linear-gradient(#f59ddd,#bf53ac);box-shadow:0 3px 0 #50276680; }
html.has-touch-controls :is(.mobile-jump,.mobile-attack) { right:var(--touch-right); bottom:calc(var(--touch-bottom) + 65px); width:68px;height:68px;display:grid;place-items:center;padding:12px;border:3px solid white;border-radius:50%;background:linear-gradient(#76dfff,#4a8ee8);box-shadow:0 4px 0 #3566ac;color:white;font:22px var(--font-heavy);text-shadow:2px 2px #183254; }
html.has-touch-controls .mobile-jump img {width:100%;height:100%;object-fit:contain;}
html.has-touch-controls .mobile-attack {right:calc(var(--touch-right) + 78px);width:54px;height:54px;bottom:calc(var(--touch-bottom) + 68px);background:linear-gradient(#ffb2de,#da66ab);}
html.has-touch-controls .mobile-attack[hidden] {display:none;}
html.has-touch-controls .mobile-camera-zone {left:32%;right:0;top:125px;bottom:155px;z-index:-1;}
html.has-touch-controls :is(#playerTestButton,#cycleTestButton,#statTestControls) {display:none!important;}
html.has-touch-controls #playerCard {left:var(--touch-left);top:var(--touch-top);width:150px;transform:none;}
html.has-touch-controls .settings-toggle {left:auto;right:var(--touch-right);top:var(--touch-top);bottom:auto;width:44px;height:44px;transform:none;}
html.has-touch-controls .gameplay-resources {top:calc(var(--touch-top) + 52px);left:var(--touch-left);right:var(--touch-right);transform:none;}
html.has-touch-controls .gameplay-resources .top-hud {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
html.has-touch-controls .resource-balance-spacer {display:none;}
html.has-touch-controls .resource-pill:is(.resource-money,.resource-speed) {width:100%;height:38px;min-height:38px;justify-self:stretch;transform:none;margin:0;border-width:3px;}
html.has-touch-controls .resource-pill .resource-icon {left:2px;top:50%;width:38px;height:38px;transform:translateY(-50%);}
html.has-touch-controls .resource-pill .speed-title-copy {padding:0 5px 0 38px;transform:none;}
html.has-touch-controls .resource-pill .speed-title-copy strong {font-size:23px;line-height:1;}
html.has-touch-controls .resource-pill .speed-title-copy > span {font-size:11px;}
html.has-touch-controls #coinsPerSecondPanel, html.has-touch-controls #speedMultiplierPanel {top:calc(var(--touch-top) + 96px);left:var(--touch-left);right:auto;width:92px;height:30px;transform:none;flex-direction:row;gap:4px;padding:2px 4px;border-width:2px;box-shadow:0 2px #0004;}
html.has-touch-controls #speedMultiplierPanel {left:auto;right:var(--touch-right);width:100px;}
html.has-touch-controls .speed-multiplier-panel span {font-size:11px;}
html.has-touch-controls .speed-multiplier-panel strong {font-size:15px;}
html.has-touch-controls .coins-per-second-value-row img {width:18px;height:18px;transform:none;}
html.has-touch-controls .coins-per-second-title {position:static;transform:none;}
html.has-touch-controls .coins-per-second-value-row {gap:1px;transform:none;}
html.has-touch-controls :is(.trail-shop-launcher,.player-trail-shop-launcher,.skins-shop-launcher,.daily-rewards-launcher,.emoji-hud-slot) {left:var(--touch-left);right:auto;top:var(--touch-menu-top);bottom:auto;transform:none;z-index:40;}
html.has-touch-controls .player-trail-shop-launcher {top:calc(var(--touch-menu-top) + var(--touch-menu-step));}
html.has-touch-controls .skins-shop-launcher {top:calc(var(--touch-menu-top) + var(--touch-menu-step)*2);}
html.has-touch-controls .daily-rewards-launcher {top:calc(var(--touch-menu-top) + var(--touch-menu-step)*3);}
html.has-touch-controls .emoji-hud-slot {top:calc(var(--touch-menu-top) + var(--touch-menu-step)*4);}
html.has-touch-controls :is(.icon-button,.emoji-hud-button) {width:var(--touch-menu);height:var(--touch-menu);padding:3px;border-width:2px;transform:none;}
html.has-touch-controls :is(.icon-button,.emoji-hud-button) strong {font-size:12px;bottom:-4px;transform:none;}
html.has-touch-controls :is(.menu-icon-image,.emoji-hud-icon img) {max-width:100%;max-height:100%;}
html.has-touch-controls .collection-menu-buttons {--collection-button-width:var(--touch-menu);--collection-button-height:var(--touch-menu);right:var(--touch-right);left:auto;top:var(--touch-menu-top);bottom:auto;gap:10px;transform:none;z-index:40;}
html.has-touch-controls #penEquipBestButton {right:var(--touch-right);}
html.has-touch-controls .collection-menu-button {width:var(--touch-menu);height:var(--touch-menu);min-height:0;border-width:2px;}
html.has-touch-controls .collection-menu-button strong {font-size:12px;}
html.has-touch-controls .collection-menu-badge {font-size:12px;min-width:20px;height:20px;padding:0 3px;right:-4px;top:-5px;}
html.has-touch-controls .item-hotbar {left:var(--touch-left);right:var(--touch-right);bottom:var(--touch-bottom);width:auto;max-width:none;transform:none;justify-content:center;gap:4px;overflow-x:auto;padding:5px 3px;touch-action:pan-x;scrollbar-width:none;}
html.has-touch-controls .hotbar-slot {flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:8px;}
html.has-touch-controls .hotbar-slot.is-selected {transform:translateY(-2px);}
html.has-touch-controls .cycle-hud {left:50%;right:auto;bottom:calc(var(--touch-bottom) + 144px);width:150px;height:38px;transform:translateX(-50%);}
html.has-touch-controls .cycle-hud img {width:42px;height:42px;flex-basis:42px;transform:none;}
html.has-touch-controls .cycle-hud strong {font-size:18px;}
html.has-touch-controls .cycle-hud span {font-size:12px;}
html.has-touch-controls .biome-stage-box {top:var(--touch-top);left:50%;right:auto;bottom:auto;transform:translateX(-50%);max-width:130px;height:35px;font-size:18px;}
html.has-touch-controls .leaderboard {display:none;}
html.has-touch-controls .escape-egg-alert {top:calc(var(--touch-top) + 134px);width:136px;min-height:34px;}
html.has-touch-controls .escape-egg-alert-label {font-size:20px;}
html.has-touch-controls .forest-entrance-popup {max-width:calc(100vw - 140px);font-size:17px;}
html.has-touch-controls .game-action-button.is-visible {display:block;right:calc(var(--touch-right) + 78px);bottom:calc(var(--touch-bottom) + 130px);max-width:150px;min-height:44px;}
html.has-touch-controls .action-prompt {display:none;}
html.has-touch-controls .drop-egg-button {bottom:calc(var(--touch-bottom) + 200px);width:120px;min-height:40px;}
html.has-touch-controls .sell-stall-prompt {bottom:calc(var(--touch-bottom) + 195px);max-width:calc(100vw - 24px);flex-wrap:wrap;}
html.has-touch-controls .egg-received-popup {max-width:calc(100vw - 24px);}
/* Menus scroll inside the safe viewport instead of cropping their actions. */
html.has-touch-controls .modal-overlay {padding:calc(env(safe-area-inset-top,0px) + 12px) calc(env(safe-area-inset-right,0px) + 12px) calc(env(safe-area-inset-bottom,0px) + 12px) calc(env(safe-area-inset-left,0px) + 12px);}
html.has-touch-controls :is(.trail-modal,.skin-modal,.character-modal,.daily-modal,.settings-modal,.player-name-modal,.sell-confirm-modal,.collection-panel) {box-sizing:border-box;max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 32px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;}
html.has-touch-controls :is(.trail-list,.skin-list,.collection-list,.backpack-grid,.album-grid) {touch-action:pan-y;overscroll-behavior:contain;}
html.has-touch-controls :is(.menu-close-button,.modal-close,.math-quiz-close,.pen-upgrade-close) {min-width:44px;min-height:44px;}
html.has-touch-controls :is(.collection-panel button,.album-close,.album-claim-all,.daily-page-arrow) {min-width:44px;min-height:44px;}
html.has-touch-controls #activeAnimalsView .animal-equip-button {min-height:44px;}
html.has-touch-controls .backpack-panel {left:50%;top:var(--touch-top);bottom:auto;transform:translateX(-50%);width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;touch-action:pan-y;}
html.has-touch-controls .collection-panel-header {flex-wrap:wrap;gap:8px;padding-right:38px;}
html.has-touch-controls .collection-panel-header strong {white-space:normal;font-size:23px;}
html.has-touch-controls .collection-panel-header img {width:32px;height:32px;flex-basis:32px;}
@media (max-width:600px) {
 html.has-touch-controls .biome-stage-box {top:calc(var(--touch-top) + 99px);height:24px;max-width:95px;font-size:15px;}
 html.has-touch-controls .trail-modal {padding:10px;}
 html.has-touch-controls .trail-shop-header {flex-wrap:wrap;gap:6px;padding-right:40px;}
 html.has-touch-controls .trail-modal h2 {font-size:30px;}
 html.has-touch-controls .trail-card {grid-template-columns:70px minmax(0,1fr);gap:8px;}
 html.has-touch-controls .trail-preview {width:70px;height:70px;}
 html.has-touch-controls .trail-card > button {grid-column:1/-1;min-height:44px;}
 html.has-touch-controls .trail-copy strong {font-size:19px;}
 html.has-touch-controls .daily-reward-list {grid-template-columns:1fr;}
 html.has-touch-controls .daily-card {min-height:160px;}
 html.has-touch-controls .daily-modal {padding:12px;}
 html.has-touch-controls .daily-rewards-browser {grid-template-columns:44px minmax(0,1fr) 44px;gap:4px;}
 html.has-touch-controls .daily-page-arrow {width:36px;}
}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls {--touch-menu:44px;--touch-menu-step:50px;--touch-menu-top:calc(var(--touch-top) + 94px);}
 html.has-touch-controls #playerCard {width:136px;}
 html.has-touch-controls .gameplay-resources {top:var(--touch-top);left:calc(var(--touch-left) + 150px);right:calc(var(--touch-right) + 60px);}
 html.has-touch-controls .gameplay-resources .top-hud {gap:14px;}
 html.has-touch-controls :is(#coinsPerSecondPanel,#speedMultiplierPanel) {top:calc(var(--touch-top) + 45px);}
 html.has-touch-controls #coinsPerSecondPanel {left:calc(var(--touch-left) + 150px);}
 html.has-touch-controls #speedMultiplierPanel {right:calc(var(--touch-right) + 60px);}
 html.has-touch-controls .biome-stage-box {top:calc(var(--touch-top) + 48px);height:25px;max-width:110px;font-size:16px;}
 html.has-touch-controls .skins-shop-launcher {left:calc(var(--touch-left) + 54px);top:var(--touch-menu-top);}
 html.has-touch-controls .daily-rewards-launcher {left:calc(var(--touch-left) + 54px);top:calc(var(--touch-menu-top) + 50px);}
 html.has-touch-controls .emoji-hud-slot {left:calc(var(--touch-left) + 54px);top:calc(var(--touch-menu-top) + 100px);}
 html.has-touch-controls .collection-menu-buttons {display:grid;grid-template-columns:44px 44px;gap:10px;}
 html.has-touch-controls .mobile-stick {width:88px;height:88px;bottom:var(--touch-bottom);}
 html.has-touch-controls .mobile-stick span {width:42px;height:42px;}
 html.has-touch-controls .mobile-jump {width:60px;height:60px;bottom:var(--touch-bottom);}
 html.has-touch-controls .mobile-attack {bottom:calc(var(--touch-bottom) + 4px);}
 html.has-touch-controls .item-hotbar {left:calc(var(--touch-left) + 112px);right:calc(var(--touch-right) + 142px);}
 html.has-touch-controls .cycle-hud {bottom:calc(var(--touch-bottom) + 58px);}
 html.has-touch-controls .mobile-camera-zone {top:90px;bottom:115px;}
 html.has-touch-controls .escape-egg-alert {top:calc(var(--touch-top) + 85px);}
 html.has-touch-controls .drop-egg-button {bottom:calc(var(--touch-bottom) + 100px);}
 html.has-touch-controls .game-action-button.is-visible {bottom:calc(var(--touch-bottom) + 74px);}
 html.has-touch-controls .sell-stall-prompt {bottom:calc(var(--touch-bottom) + 105px);}
}
.mobile-room-button {display:none;}
html.has-touch-controls .mobile-room-button {position:fixed;z-index:86;display:block;top:var(--touch-top);left:calc(var(--touch-left) + 160px);min-width:60px;height:44px;padding:4px 10px;border:2px solid #163a56;border-radius:10px;background:linear-gradient(#9fe8ff,#59bdeb);color:white;font:15px var(--font-heavy);text-shadow:1px 2px #163a56;}
html.has-touch-controls .leaderboard.is-touch-open {display:block;z-index:85;top:calc(var(--touch-top) + 52px);right:var(--touch-right);left:auto;bottom:auto;width:min(330px,calc(100vw - 24px));max-height:calc(100dvh - 80px);overflow:auto;transform:none;touch-action:pan-y;}
html.has-touch-controls .leaderboard.is-touch-open .room-code-form {display:flex;flex-wrap:wrap;gap:6px;}
html.has-touch-controls .leaderboard.is-touch-open :is(button,input) {min-height:44px;}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls .mobile-room-button {left:var(--touch-left);top:calc(var(--touch-top) + 45px);height:40px;}
}
html.has-touch-controls .resource-pill:is(.resource-money,.resource-speed) {position:relative;inset:auto;grid-column:auto;}
html.has-touch-controls .resource-pill .speed-title-copy strong {left:calc(50% + 14px);top:4px;width:calc(100% - 44px);font-size:21px;}
html.has-touch-controls .resource-pill .speed-title-copy > span {display:none;}
html.has-touch-controls :is(.trail-shop-launcher,.player-trail-shop-launcher,.skins-shop-launcher,.daily-rewards-launcher,.emoji-hud-slot) {margin:0;}
html.has-touch-controls .item-hotbar {justify-content:flex-start;}
html.has-touch-controls .hotbar-slot:first-child {margin-left:auto;}
html.has-touch-controls .hotbar-slot:last-child {margin-right:auto;}
html.has-touch-controls #playerCard .loading-player-name-row {overflow:hidden;}
html.has-touch-controls #playerCardName {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html.has-touch-controls .trail-card {grid-template-columns:70px minmax(0,1fr);grid-template-areas:"preview copy" "buy buy";min-height:146px;padding:8px;gap:6px;}
html.has-touch-controls .trail-preview {grid-area:preview;width:70px;height:70px;}
html.has-touch-controls .trail-preview.has-icon img {width:100%;height:100%;transform:none;}
html.has-touch-controls .trail-copy {grid-area:copy;transform:none!important;min-width:0;}
html.has-touch-controls .trail-copy strong {font-size:18px!important;white-space:normal;}
html.has-touch-controls .trail-copy span {font-size:13px!important;white-space:normal;}
html.has-touch-controls .trail-buy {grid-area:buy;min-height:44px;font-size:18px;}
html.has-touch-controls .trail-list {max-height:calc(100dvh - 145px);padding-left:4px;margin-left:0;width:100%;}
html.has-touch-controls .trail-preview.has-icon {width:70px;height:70px;}
html.has-touch-controls .skin-list {grid-template-areas:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:230px;max-height:calc(100dvh - 130px);overflow:auto;touch-action:pan-y;}
html.has-touch-controls .skin-list > .skin-card-shell {grid-area:auto!important;}
html.has-touch-controls .skin-card,html.has-touch-controls .skin-card.has-skin-image {grid-template-rows:minmax(0,1fr) 34px 44px;}
html.has-touch-controls .skin-buy {min-height:44px;}
html.has-touch-controls .daily-reward-list {max-height:calc(100dvh - 165px);overflow-y:auto;touch-action:pan-y;padding-inline:4px;}
html.has-touch-controls .animal-album {max-width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 24px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px);overflow:auto;touch-action:pan-y;}
html.has-touch-controls .album-header-actions {flex-wrap:wrap;}
html.has-touch-controls .album-claim-all {left:0;}
html.has-touch-controls #animalAlbumButton .album-launcher-label {font-size:12px;}
@media (min-width:700px) {
 html.has-touch-controls .trail-card {grid-template-columns:80px minmax(0,1fr) 110px;grid-template-areas:"preview copy buy";min-height:96px;}
 html.has-touch-controls .skin-list {grid-template-columns:repeat(3,minmax(0,1fr));}
}
html.has-touch-controls {--left-hud-lift:0px;}
html.has-touch-controls .first-time-tutorial {top:calc(var(--touch-top) + 143px);max-width:calc(100vw - 145px);padding:6px;}
html.has-touch-controls .first-time-tutorial strong {font-size:16px;}
html.has-touch-controls #dailyOverlay.modal-overlay {padding:12px;place-items:center;overflow:hidden;}
html.has-touch-controls .daily-modal {width:min(900px,100%);max-width:100%;padding:12px;overflow:hidden;}
html.has-touch-controls .daily-modal .daily-title-box {position:relative;top:auto;left:auto;transform:none;max-width:calc(100% - 42px);width:max-content;white-space:normal;font-size:24px;margin:0 0 8px;padding:6px;}
html.has-touch-controls .daily-calendar {display:none;}
html.has-touch-controls .daily-close {top:8px;right:6px;width:44px;height:44px;}
html.has-touch-controls .daily-streak-box {position:relative;inset:auto;margin-bottom:6px;}
html.has-touch-controls .daily-rewards-browser {grid-template-columns:44px minmax(0,1fr) 44px;gap:3px;min-width:0;}
html.has-touch-controls .daily-reward-list {min-width:0;max-height:calc(100dvh - 260px);overflow-x:hidden;gap:36px;padding:34px 4px 8px;}
html.has-touch-controls .daily-card {min-width:0;grid-template-rows:60px auto 44px;min-height:186px;padding:16px 4px 6px;}
html.has-touch-controls .daily-card strong {font-size:15px;white-space:normal;}
html.has-touch-controls .daily-card button {min-height:44px;font-size:15px;}
html.has-touch-controls .daily-page-arrow {width:32px;}
@media (max-width:480px) and (orientation:portrait) {
 html.has-touch-controls .item-hotbar {display:grid;grid-template-columns:repeat(5,44px);justify-content:center;overflow:visible;}
 html.has-touch-controls .hotbar-slot {margin:0!important;}
 html.has-touch-controls :is(.mobile-stick,.mobile-jump) {bottom:calc(var(--touch-bottom) + 116px);}
 html.has-touch-controls .mobile-attack {bottom:calc(var(--touch-bottom) + 119px);}
 html.has-touch-controls .cycle-hud {bottom:calc(var(--touch-bottom) + 200px);}
 html.has-touch-controls .drop-egg-button {bottom:calc(var(--touch-bottom) + 249px);}
}
@media (max-width:480px) and (max-height:700px) and (orientation:portrait) {
 html.has-touch-controls {--touch-menu:44px;--touch-menu-step:52px;}
 html.has-touch-controls .skins-shop-launcher {left:calc(var(--touch-left) + 52px);top:var(--touch-menu-top);}
 html.has-touch-controls .daily-rewards-launcher {left:calc(var(--touch-left) + 52px);top:calc(var(--touch-menu-top) + 52px);}
 html.has-touch-controls .emoji-hud-slot {left:calc(var(--touch-left) + 52px);top:calc(var(--touch-menu-top) + 104px);}
 html.has-touch-controls .first-time-tutorial {top:calc(var(--touch-top) + 302px);max-width:calc(100vw - 24px);}
 html.has-touch-controls .mobile-stick {width:88px;height:88px;}
}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls .first-time-tutorial {top:calc(var(--touch-top) + 85px);max-width:calc(100vw - 250px);}
 html.has-touch-controls .daily-reward-list {max-height:calc(100dvh - 190px);grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 10px;}
 html.has-touch-controls .daily-modal .daily-title-box {font-size:20px;margin-bottom:5px;}
 html.has-touch-controls .daily-streak-box {position:absolute;top:12px;left:auto;right:60px;}
}
html.has-touch-controls .collection-menu-button strong {position:absolute;left:0;right:0;bottom:-3px;width:100%;font-size:11px;transform:none;text-align:center;}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls .mobile-room-button {top:calc(var(--touch-top) + 51px);height:40px;}
}
@media (orientation:landscape) and (max-width:740px) {
 html.has-touch-controls .item-hotbar {display:grid;grid-template-columns:repeat(5,44px);justify-content:center;overflow:visible;}
 html.has-touch-controls .hotbar-slot {margin:0!important;}
 html.has-touch-controls .cycle-hud {bottom:calc(var(--touch-bottom) + 112px);}
 html.has-touch-controls .emoji-hud-slot {left:calc(var(--touch-left) + 108px);top:calc(var(--touch-menu-top) + 50px);}
}
@media (orientation:landscape) and (max-height:350px) {
 html.has-touch-controls .first-time-tutorial {max-width:calc(100vw - 340px);}
 html.has-touch-controls .first-time-tutorial strong {font-size:13px;}
}
html.has-touch-controls #mathQuizOverlay .math-quiz-modal {max-height:calc(100dvh - 24px)!important;overflow:auto;touch-action:pan-y;}
html.has-touch-controls #mathQuizOverlay .math-quiz-keypad button {min-height:44px!important;font-size:20px!important;}
html.has-touch-controls #mathQuizOverlay .math-quiz-close {width:44px!important;height:44px!important;font-size:24px!important;}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls #mathQuizOverlay .math-quiz-modal {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto;gap:5px 16px;width:min(650px,100%)!important;padding:14px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-kicker {grid-column:1;grid-row:1;font-size:11px!important;margin:0!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-modal h2 {grid-column:1;grid-row:2;font-size:25px!important;margin:0!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-progress {grid-column:1;grid-row:3;font-size:12px!important;margin:0!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-question {grid-column:1;grid-row:4;width:100%!important;margin:0!important;font-size:30px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-form {grid-column:1;grid-row:5;width:100%!important;grid-template-columns:minmax(0,1fr) 65px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-answer-field,html.has-touch-controls #mathQuizOverlay .math-quiz-answer-field input {height:44px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-form button {font-size:16px!important;min-height:44px;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-keypad {grid-column:2;grid-row:1 / span 6;width:100%!important;padding-top:38px;margin:0!important;gap:5px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-feedback {grid-column:1;grid-row:6;font-size:12px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-dots {grid-column:1;grid-row:7;}
}
html.has-touch-controls #mathQuizOverlay .math-quiz-question-canvas {width:100%!important;max-width:100%;height:auto!important;}
@media (orientation:landscape) and (max-width:740px) {
 html.has-touch-controls .biome-stage-box {left:calc(50% + 20px);max-width:90px;}
 html.has-touch-controls .collection-menu-button strong {font-size:10px;}
}
html.has-touch-controls :is(#gameplayMenuClose,#playerNameClose) {top:6px;right:6px;left:auto;transform:none;}
html.has-touch-controls :is(.trail-close,.skin-close) {min-width:44px;min-height:44px;}
html.has-touch-controls .collection-panel {width:min(440px,calc(100vw - 28px));}
@media (max-width:360px) and (max-height:620px) and (orientation:portrait) {
 html.has-touch-controls .cycle-hud {width:120px;bottom:calc(var(--touch-bottom) + 196px);}
 html.has-touch-controls .first-time-tutorial {top:292px;}
}
html.has-touch-controls .backpack-panel {z-index:90;}
html.has-touch-controls .gameplay-menu-overlay .collection-panel {width:min(440px,calc(100vw - 28px));}
html.has-touch-controls .gameplay-menu-overlay .collection-panel-header strong {font-size:20px;}
html.has-touch-controls .gameplay-menu-overlay {right:14px;left:14px;width:auto;}
@media (max-width:360px) and (max-height:620px) and (orientation:portrait) {
 html.has-touch-controls .first-time-tutorial {max-width:calc(100vw - 126px);}
}
html.has-touch-controls #characterOverlay .character-modal {grid-template-rows:auto minmax(260px,1fr) auto;height:min(680px,calc(100dvh - 28px));padding:10px;overflow-x:hidden;}
html.has-touch-controls #characterOverlay .character-title-box {position:relative;inset:auto;transform:none;max-width:calc(100% - 48px);font-size:26px;min-height:40px;padding:4px 8px;margin:0 0 4px;}
html.has-touch-controls #characterOverlay .character-title-icon {display:none;}
html.has-touch-controls #characterOverlay .character-close {top:6px;right:6px;width:44px;height:44px;}
html.has-touch-controls #characterOverlay .character-palette-panel {min-width:0;max-width:100%;}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls #characterOverlay .character-modal {width:min(600px,100%);height:auto;grid-template-columns:minmax(0,1fr) 120px;grid-template-rows:32px 220px;gap:5px 10px;padding:8px;}
 html.has-touch-controls #characterOverlay .character-title-box {grid-column:1/-1;min-height:30px;font-size:22px;margin:0;}
 html.has-touch-controls #characterOverlay .character-preview-shell {grid-column:1;grid-row:2;height:220px;}
 html.has-touch-controls #characterOverlay .character-palette-panel {grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:8px;padding:5px;}
 html.has-touch-controls #characterOverlay .character-palette-swatch {width:44px;height:44px;}
 html.has-touch-controls #characterOverlay .character-arrow {width:44px;height:44px;}
 html.has-touch-controls #characterOverlay .row-face {top:22px;}
 html.has-touch-controls #characterOverlay .row-hair {top:66px;}
 html.has-touch-controls #characterOverlay .row-shirt {top:110px;}
 html.has-touch-controls #characterOverlay .row-pants {top:154px;}
 html.has-touch-controls #characterOverlay .row-shoes {top:198px;}
}
html.has-touch-controls :is(#coinsPerSecondPanel,#speedMultiplierPanel) {z-index:40;}
html.has-touch-controls body:has(.modal-overlay:not(.hidden),dialog[open],#backpackPanel:not(.hidden)) .mobile-room-button {visibility:hidden;}
html.has-touch-controls body:has(#backpackPanel:not(.hidden)) :is(.trail-shop-launcher,.player-trail-shop-launcher,.skins-shop-launcher,.daily-rewards-launcher,.collection-menu-buttons) {visibility:hidden;}
@media (max-width:480px) {
 html.has-touch-controls .album-page-heading {flex-wrap:wrap;gap:5px;}
 html.has-touch-controls .album-page-heading h3 {font-size:20px;overflow-wrap:anywhere;}
 html.has-touch-controls .album-page-heading > b {font-size:14px;padding:3px 5px;}
}
@media (max-width:420px) {
 html.has-touch-controls .pen-upgrade-dialog h2 {padding-right:42px;margin-right:0;font-size:24px;}
 html.has-touch-controls .pen-upgrade-dialog h2 img {display:none;}
}
@media (orientation:landscape) and (max-height:400px) {
 html.has-touch-controls .pen-upgrade-dialog {padding:8px 18px;}
 html.has-touch-controls .pen-upgrade-dialog h2 {font-size:24px;min-height:30px;margin-bottom:3px;}
 html.has-touch-controls .pen-upgrade-dialog h2 img {width:28px;height:28px;}
 html.has-touch-controls .pen-upgrade-levels {height:30px;font-size:17px;padding:3px 8px;margin-bottom:10px;}
 html.has-touch-controls .pen-upgrade-capacity {padding:6px 4px;gap:2px;}
 html.has-touch-controls .pen-upgrade-capacity strong {font-size:28px;}
 html.has-touch-controls .pen-upgrade-capacity span {font-size:12px;}
 html.has-touch-controls .pen-upgrade-capacity small {font-size:10px;}
 html.has-touch-controls .pen-upgrade-cost {height:40px;margin-top:8px;}
 html.has-touch-controls .pen-upgrade-actions {margin-top:6px;}
 html.has-touch-controls .pen-upgrade-actions button {height:44px;}
}
html.has-touch-controls .leaderboard.is-touch-open .room-code-toggle {display:none;}

/* AI-generated tap hint replaces keyboard letters on touch devices. */
html.has-touch-controls :is(.action-prompt,.sell-stall-prompt) kbd {
  font-size:0;
  color:transparent;
  -webkit-text-stroke:0;
  text-shadow:none;
  border:0;
  box-shadow:none;
  background:url("../assets/icons/gameplay-ai/touch-hand-white.webp") center / contain no-repeat;
  width:36px;
  height:36px;
  flex:0 0 36px;
}
html.has-touch-controls .egg-steal-desktop-key {display:none;}
html.has-touch-controls .egg-steal-touch-icon {display:block;}

/* Compact touch HUD: keep the playfield clear and both thumbs at the corners. */
html.has-touch-controls {
  --touch-menu-top:calc(var(--touch-top) + 132px);
  --touch-stick-size:clamp(56px,16vw,88px);
  --touch-jump-size:clamp(48px,14vw,72px);
  --touch-toolbar-width:min(330px,calc(100vw - var(--touch-left) - var(--touch-right) - var(--touch-stick-size) - var(--touch-jump-size) - 16px));
}
html.has-touch-controls :is(#coinsPerSecondPanel,#speedMultiplierPanel,#mobileRoomButton) {display:none!important;}
html.has-touch-controls #playerCard {
  top:var(--touch-top);left:calc(var(--touch-left) + 44px);
  width:40px;height:40px;min-height:0;padding:0;border:0;
  background:none;box-shadow:none;transform:none;
}
html.has-touch-controls #playerCard > :not(#playerNameEdit) {display:none;}
html.has-touch-controls #playerCard::before,
html.has-touch-controls #playerCard::after {display:none;}
html.has-touch-controls #playerNameEdit {width:40px;height:40px;flex:0 0 40px;margin:0;}
html.has-touch-controls .settings-toggle {top:var(--touch-top);left:var(--touch-left);right:auto;width:40px;height:40px;padding:0;display:grid;place-items:center;}
html.has-touch-controls .settings-toggle > img {position:static;width:30px;height:30px;margin:0;transform:none;object-fit:contain;}
html.has-touch-controls .gameplay-resources {
  top:calc(var(--touch-top) + 4px);left:calc(var(--touch-left) + 88px);right:var(--touch-right);width:auto;
}
html.has-touch-controls .gameplay-resources .top-hud {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
html.has-touch-controls .resource-pill:is(.resource-money,.resource-speed) {min-width:0;height:32px;min-height:32px;border-width:2px;}
html.has-touch-controls .resource-pill .resource-icon {width:32px;height:32px;}
html.has-touch-controls .resource-pill .speed-title-copy strong {top:50%;left:calc(50% + 12px);width:calc(100% - 30px);font-size:clamp(14px,4vw,19px);line-height:1;transform:translate(-50%,-50%);}
html.has-touch-controls .biome-stage-box {top:auto;bottom:calc(var(--touch-bottom) + (var(--touch-toolbar-width) - 16px)/9 + 7px);left:calc(50% + (var(--touch-stick-size) - var(--touch-jump-size))/2);height:22px;width:84px;max-width:100px;padding:0;display:grid;place-items:center;font-size:12px;line-height:1;text-shadow:-1px -1px 0 #050306,1px -1px 0 #050306,-1px 1px 0 #050306,1px 1px 0 #050306;}
html.has-touch-controls .mobile-stick {left:var(--touch-left);bottom:var(--touch-bottom);width:var(--touch-stick-size);height:var(--touch-stick-size);}
html.has-touch-controls .mobile-stick span {width:48%;height:48%;}
html.has-touch-controls .mobile-jump {
  right:var(--touch-right);bottom:var(--touch-bottom);width:var(--touch-jump-size);height:var(--touch-jump-size);
  padding:0;border:0;background:transparent;box-shadow:none;opacity:.72;
  -webkit-tap-highlight-color:transparent;
}
/* The source artwork has white corners outside its circular badge. */
html.has-touch-controls .mobile-jump img {clip-path:circle(45.5% at 50% 50%);pointer-events:none;}
html.has-touch-controls .mobile-jump:active {opacity:1;}
html.has-touch-controls .mobile-attack {right:var(--touch-right);bottom:calc(var(--touch-bottom) + 82px);}
html.has-touch-controls .item-hotbar {
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px;
  left:calc(50% + (var(--touch-stick-size) - var(--touch-jump-size))/2);right:auto;bottom:var(--touch-bottom);
  width:var(--touch-toolbar-width);
  max-width:none;transform:translateX(-50%);padding:0;overflow:visible;
}
html.has-touch-controls .hotbar-slot {
  width:100%;height:auto;aspect-ratio:1;min-width:0;min-height:0;max-width:none;max-height:none;
  margin:0!important;padding:1px;border-width:1px;border-radius:6px;
}
html.has-touch-controls .hotbar-slot > b {font-size:8px;left:2px;top:2px;}
html.has-touch-controls .mobile-camera-zone {top:90px;bottom:115px;}
html.has-touch-controls .first-time-tutorial {top:calc(var(--touch-top) + 98px);}
@media (orientation:landscape) and (max-height:600px) {
  html.has-touch-controls {--touch-menu-top:calc(var(--touch-top) + 112px);}
  html.has-touch-controls .item-hotbar {
    bottom:var(--touch-bottom);
    width:var(--touch-toolbar-width);
  }
}
@media (orientation:landscape) and (max-height:400px) {
  html.has-touch-controls .emoji-hud-slot {left:calc(var(--touch-left) + 108px);top:calc(var(--touch-menu-top) + 50px);}
}

/* Quantity badges must scale with the compact touch toolbar. */
html.has-touch-controls .hotbar-slot .slime-trap-count {
  right:2px;
  bottom:2px;
  font-size:clamp(8px,2.3vw,10px);
  line-height:1;
  -webkit-text-stroke:1.5px #172800;
}

/* Consistent artwork and labels; cap resource bars on wide touch screens. */
html.has-touch-controls .gameplay-resources {right:auto;width:min(340px,calc(100vw - var(--touch-left) - var(--touch-right) - 88px));}
html.has-touch-controls {--touch-menu:56px;--touch-menu-step:64px;--touch-button-height:56px;--touch-art-size:40px;}
html.has-touch-controls :is(.icon-button,.emoji-hud-button,.collection-menu-button) {
  width:var(--touch-menu);min-width:var(--touch-menu);max-width:var(--touch-menu);
  height:var(--touch-button-height);min-height:var(--touch-button-height);max-height:var(--touch-button-height);
  padding:0;position:relative;
}
html.has-touch-controls :is(#trailsButton,#playerTrailsButton,#skinsButton,#giftButton,#backpackToggle) > span:first-child {
  position:absolute;left:50%;top:3px;width:var(--touch-art-size);height:var(--touch-art-size);
  margin:0;transform:translateX(-50%);display:grid;place-items:center;
}
html.has-touch-controls :is(#trailsButton,#playerTrailsButton,#skinsButton,#giftButton,#backpackToggle) > span:first-child > img {
  width:100%;height:100%;max-width:none;max-height:none;margin:0;transform:none;object-fit:contain;
}
html.has-touch-controls .collection-menu-button > img {
  position:absolute;left:50%;top:3px;width:var(--touch-art-size);height:var(--touch-art-size);
  margin:0;transform:translateX(-50%);object-fit:contain;
}
html.has-touch-controls :is(#growingEggsButton,#activeAnimalsButton) > img {top:50%;transform:translate(-50%,-50%);}
html.has-touch-controls :is(#trailsButton,#playerTrailsButton,#skinsButton,#giftButton,#backpackToggle,#animalAlbumButton,#characterButton,#emojiButton) > strong {
  position:absolute;left:0;right:0;top:auto;bottom:2px;width:100%;margin:0;padding:0;
  transform:none;font-size:12px;line-height:12px;text-align:center;white-space:nowrap;
  -webkit-text-stroke:0.7px #050306;text-shadow:0 1px 0 #050306;
}
html.has-touch-controls :is(.icon-button,.emoji-hud-button,.collection-menu-button) > strong::before,
html.has-touch-controls :is(.icon-button,.emoji-hud-button,.collection-menu-button) > strong::after {display:none;}
html.has-touch-controls .collection-menu-buttons {display:flex;flex-direction:column;gap:8px;}
@media (orientation:landscape) and (max-height:600px) {
  html.has-touch-controls {
    --touch-menu-top:calc(var(--touch-top) + 52px);--touch-menu-step:50px;
    --touch-button-height:48px;--touch-art-size:28px;--touch-stick-size:64px;--touch-jump-size:60px;
    --touch-toolbar-width:min(330px,calc(100vw - var(--touch-left) - var(--touch-right) - 284px));
  }
  html.has-touch-controls :is(.trail-shop-launcher,.player-trail-shop-launcher,.skins-shop-launcher,.daily-rewards-launcher,.emoji-hud-slot) {left:var(--touch-left);}
  html.has-touch-controls .skins-shop-launcher {top:calc(var(--touch-menu-top) + var(--touch-menu-step)*2);}
  html.has-touch-controls .daily-rewards-launcher {top:calc(var(--touch-menu-top) + var(--touch-menu-step)*3);}
  html.has-touch-controls .emoji-hud-slot {top:calc(var(--touch-menu-top) + var(--touch-menu-step)*4);}
  html.has-touch-controls .collection-menu-buttons {gap:4px;}
  html.has-touch-controls .mobile-stick {left:calc(var(--touch-left) + 72px);}
  html.has-touch-controls .mobile-jump {right:calc(var(--touch-right) + 72px);}
  html.has-touch-controls .mobile-attack {right:calc(var(--touch-right) + 72px);}
}
@media (orientation:portrait) {
  html.has-touch-controls :is(.skins-shop-launcher,.daily-rewards-launcher,.emoji-hud-slot) {left:var(--touch-left);}
  html.has-touch-controls .skins-shop-launcher {top:calc(var(--touch-menu-top) + var(--touch-menu-step)*2);}
  html.has-touch-controls .daily-rewards-launcher {top:calc(var(--touch-menu-top) + var(--touch-menu-step)*3);}
  html.has-touch-controls .emoji-hud-slot {top:calc(var(--touch-menu-top) + var(--touch-menu-step)*4);}
}

html.has-touch-controls #animalAlbumButton > img {left:50%;top:3px;transform:translateX(-50%);}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls :is(#trailsButton,#playerTrailsButton,#skinsButton,#giftButton,#backpackToggle) > span:first-child,
 html.has-touch-controls :is(#animalAlbumButton,#characterButton) > img {top:1px;}
 html.has-touch-controls .collection-menu-buttons {gap:2px;}
}

/* Center the resource bars and their Settings/Edit controls as one top row. */
html.has-touch-controls {
  --touch-resource-width:min(340px,calc(100vw - var(--touch-left) - var(--touch-right) - 88px));
  --touch-top-row-left:calc((100vw - var(--touch-resource-width) - 88px)/2);
}
html.has-touch-controls .settings-toggle {left:var(--touch-top-row-left);}
html.has-touch-controls #playerCard {left:calc(var(--touch-top-row-left) + 44px);}
html.has-touch-controls .gameplay-resources {left:calc(var(--touch-top-row-left) + 88px);width:var(--touch-resource-width);}

/* Phone landscape leaves the bottom corners free for both thumbs. */
@media (orientation:landscape) and (max-height:600px) {
  html.has-touch-controls {
    --touch-menu:54px;--touch-button-height:36px;--touch-menu-step:38px;
    --touch-menu-top:calc(var(--touch-top) + 44px);--touch-art-size:18px;
    --touch-stick-size:60px;--touch-jump-size:56px;
    --touch-toolbar-width:min(330px,calc(100vw - var(--touch-left) - var(--touch-right) - 132px));
  }
  html.has-touch-controls .mobile-stick {left:var(--touch-left);}
  html.has-touch-controls .mobile-jump {right:var(--touch-right);}
  html.has-touch-controls .mobile-attack {right:calc(var(--touch-right) + 66px);}
  html.has-touch-controls :is(#trailsButton,#playerTrailsButton,#skinsButton,#giftButton,#backpackToggle,#animalAlbumButton,#characterButton,#emojiButton) > strong {font-size:10px;line-height:10px;}
}
/* Full-size tablets have room for larger inventory targets in either orientation. */
@media (min-width:600px) and (min-height:600px) {
  html.has-touch-controls {
    --touch-stick-size:120px;--touch-jump-size:100px;
    --touch-toolbar-width:min(510px,calc(100vw - var(--touch-left) - var(--touch-right) - 236px));
  }
  html.has-touch-controls .item-hotbar {bottom:calc(var(--touch-bottom) + 24px);}
  html.has-touch-controls .biome-stage-box {bottom:calc(var(--touch-bottom) + 24px + (var(--touch-toolbar-width) - 16px)/9 + 7px);}
  html.has-touch-controls .hotbar-slot > b {font-size:11px;}
  html.has-touch-controls .hotbar-slot .slime-trap-count {font-size:13px;right:3px;bottom:3px;}
  html.has-touch-controls .mobile-attack {bottom:calc(var(--touch-bottom) + 112px);}
}

/* Shared label rendering avoids the Album outline eating into its letters. */
html.has-touch-controls :is(#trailsButton,#playerTrailsButton,#skinsButton,#giftButton,#backpackToggle,#animalAlbumButton,#characterButton,#emojiButton) > strong {
  font-family:var(--font-heavy);font-weight:1000;paint-order:stroke fill;letter-spacing:normal;
}
@media (orientation:portrait) and (max-width:599px) {
  html.has-touch-controls {--touch-menu:52px;--touch-button-height:52px;--touch-menu-step:60px;--touch-art-size:38px;}
  html.has-touch-controls :is(.trail-shop-launcher,.player-trail-shop-launcher,.skins-shop-launcher,.daily-rewards-launcher,.emoji-hud-slot) {left:calc(env(safe-area-inset-left,0px) + 4px);}
  html.has-touch-controls :is(.collection-menu-buttons, #penEquipBestButton) {right:calc(env(safe-area-inset-right,0px) + 4px);}
  html.has-touch-controls :is(#trailsButton,#playerTrailsButton,#skinsButton,#giftButton,#backpackToggle,#animalAlbumButton,#characterButton,#emojiButton) > strong {font-size:10px;line-height:11px;}
  html.has-touch-controls .collection-menu-badge {right:0;}
}

/* Touch menu refinements: preserve desktop layout and animations. */
html.has-touch-controls #mathQuizOverlay .math-quiz-modal h2 {font-size:clamp(27px,7vw,34px)!important;line-height:1.15!important;}
html.has-touch-controls #mathQuizOverlay .math-quiz-progress {font-size:clamp(17px,4.5vw,22px)!important;}
html.has-touch-controls :is(#equipBestButton, #penEquipBestButton) {display:none;}
html.has-touch-controls #trailOverlay .trail-copy,
html.has-touch-controls #trailOverlay .trail-copy strong,
html.has-touch-controls #trailOverlay .trail-copy span {overflow:visible;line-height:1.25;}
html.has-touch-controls #trailOverlay .trail-preview,
html.has-touch-controls #trailOverlay .trail-preview.has-icon {overflow:visible;}
html.has-touch-controls #trailOverlay .trail-copy strong {padding-block:3px;margin-block:-3px;}
html.has-touch-controls .backpack-panel {
  top:auto;bottom:calc(var(--touch-bottom) + (var(--touch-toolbar-width) - 16px)/9 + 14px);
  width:min(440px,calc(100vw - 24px));
  max-height:calc(100dvh - var(--touch-top) - var(--touch-bottom) - (var(--touch-toolbar-width) - 16px)/9 - 28px);
}
html.has-touch-controls .backpack-content {grid-template-columns:72px minmax(0,1fr);gap:5px;}
html.has-touch-controls .backpack-grid {grid-auto-rows:64px;height:139px;min-height:139px;max-height:139px;gap:4px;}
html.has-touch-controls .backpack-item {height:64px;min-height:64px;}
html.has-touch-controls .backpack-item strong {font-size:10px;}
html.has-touch-controls .backpack-item-art {top:4px;width:min(40px,calc(100% - 6px));height:40px;}
html.has-touch-controls .backpack-item-art.is-egg {width:min(38px,calc(100% - 6px));height:38px;}
html.has-touch-controls.is-backpack-open #backpackToggle {visibility:hidden;pointer-events:none;}
html.has-touch-controls .gameplay-menu-overlay:has(#activeAnimalsView:not(.hidden)) .collection-panel {
  width:min(360px,calc(100vw - 44px));padding:10px;
  max-height:min(480px,calc(100dvh - 48px));
}
html.has-touch-controls #activeAnimalsView .collection-panel-header {gap:5px;padding-right:32px;flex-wrap:nowrap;}
html.has-touch-controls #activeAnimalsView .collection-panel-header strong {font-size:15px;line-height:1.2;}
html.has-touch-controls #activeAnimalsView .collection-panel-header img {width:26px;height:26px;flex-basis:26px;}
html.has-touch-controls #activeAnimalsCount {min-width:0;padding:5px;font-size:12px;white-space:nowrap;}
html.has-touch-controls .gameplay-menu-overlay:has(#activeAnimalsView:not(.hidden)) .collection-panel-close {top:8px;right:8px;width:32px;height:32px;min-width:32px;min-height:32px;}
html.has-touch-controls .gameplay-menu-overlay:has(#activeAnimalsView:not(.hidden)) .collection-panel-close::after {content:'';position:absolute;inset:-6px;}
html.has-touch-controls #activeAnimalsList {max-height:min(300px,45dvh);}
html.has-touch-controls #equipBestButton {min-width:140px;min-height:44px;padding:6px 34px 6px 10px;font-size:17px;}
html.has-touch-controls #equipBestButton span {width:auto;transform:none;white-space:nowrap;}
html.has-touch-controls #equipBestButton img {top:auto;bottom:7px;right:6px;width:23px;height:23px;}
html.has-touch-controls #characterOverlay .character-title-box {width:max-content;justify-self:center;justify-content:center;text-align:center;padding:5px 14px;margin:0 0 4px;max-width:calc(100% - 88px);}
html.has-touch-controls #characterOverlay .character-close {background:linear-gradient(145deg,#ff8c9b,#df254a);}
html.has-touch-controls .sound-toggle.settings-toggle,
html.has-touch-controls .sound-toggle.settings-toggle:hover,
html.has-touch-controls .sound-toggle.settings-toggle:active {transform:none;touch-action:manipulation;}
html.has-touch-controls .sound-toggle.settings-toggle > img {pointer-events:none;transform:none;}
html.has-touch-controls .resource-pill .speed-title-copy strong,
html.has-touch-controls .resource-pill .speed-title-copy strong:is(.is-changing,.is-increasing) {animation:none!important;transition:none;top:50%;transform:translate(-50%,-50%);}
html.has-touch-controls .sell-stall-prompt {bottom:calc(var(--touch-bottom) + max(var(--touch-stick-size),var(--touch-jump-size)) + 22px);width:min(380px,calc(100vw - 24px));max-width:none;flex-wrap:nowrap;gap:8px;}
html.has-touch-controls .sell-stall-prompt button {flex:1 1 0;min-width:0;padding:6px;min-height:48px;}
html.has-touch-controls .sell-stall-prompt button span {font-size:14px;line-height:1.2;white-space:normal;}
html.has-touch-controls .sell-stall-prompt button strong {font-size:inherit;}
html.has-touch-controls .sell-stall-prompt kbd {flex:0 0 28px;width:28px;height:32px;margin-right:5px;}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls #mathQuizOverlay .math-quiz-modal h2 {font-size:27px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-progress {font-size:16px!important;}
 html.has-touch-controls #activeAnimalsList {max-height:35dvh;}
}
html.has-touch-controls .gameplay-menu-overlay.modal-overlay {padding:0;}
html.has-touch-controls .gameplay-menu-overlay .collection-panel {margin-inline:auto;}
@media (min-width:600px) and (min-height:600px) {
 html.has-touch-controls .backpack-panel {bottom:calc(var(--touch-bottom) + 24px + (var(--touch-toolbar-width) - 16px)/9 + 14px);max-height:calc(100dvh - var(--touch-top) - var(--touch-bottom) - (var(--touch-toolbar-width) - 16px)/9 - 52px);}
}

/* Fixed notification circles: both left and right offsets must not stretch
   ready badges across the button on touch layouts. */
html.has-touch-controls .collection-menu-badge {
  --touch-badge-size: 20px;
  box-sizing: border-box;
  width: var(--touch-badge-size);
  min-width: var(--touch-badge-size);
  max-width: var(--touch-badge-size);
  height: var(--touch-badge-size);
  min-height: var(--touch-badge-size);
  max-height: var(--touch-badge-size);
  padding: 0;
  flex: none;
  border-radius: 50%;
  white-space: nowrap;
  text-align: center;
  letter-spacing: -0.025em;
  animation: none;
  transition: none;
}
html.has-touch-controls #animalAlbumBadge {--touch-badge-size: 26px;}
html.has-touch-controls .collection-menu-ready-badge {right: auto;left: -4px;}

/* The explicit attack target remains available above the jump control. */
html.has-touch-controls #mobileAttackButton:not([hidden]) {display:grid;}

/* Short landscape screens keep portrait menu structure at a compact size. */
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls {
  --touch-left:max(4px,env(safe-area-inset-left,0px));
  --touch-right:max(4px,env(safe-area-inset-right,0px));
  --touch-bottom:max(4px,env(safe-area-inset-bottom,0px));
  --touch-stick-size:84px;--touch-jump-size:80px;
  --touch-button-height:clamp(28px,9dvh,36px);
  --touch-menu-step:calc(var(--touch-button-height) + 3px);
  --touch-menu-top:calc(var(--touch-top) + 44px);
  --touch-art-size:clamp(16px,5dvh,20px);
 }
 html.has-touch-controls :is(.trail-shop-launcher,.player-trail-shop-launcher,.skins-shop-launcher,.daily-rewards-launcher,.emoji-hud-slot) {left:var(--touch-left);right:auto;}
 html.has-touch-controls .collection-menu-buttons {right:var(--touch-right);left:auto;gap:3px;}
 html.has-touch-controls .mobile-stick {left:var(--touch-left);bottom:var(--touch-bottom);}
 html.has-touch-controls .mobile-jump {right:var(--touch-right);bottom:var(--touch-bottom);}
 html.has-touch-controls .item-hotbar {bottom:var(--touch-bottom);left:50%;}
 html.has-touch-controls .biome-stage-box {left:50%;bottom:calc(var(--touch-bottom) + (var(--touch-toolbar-width) - 16px)/9 + 4px);}
 html.has-touch-controls .escape-egg-alert {top:var(--touch-top);bottom:auto;}
 html.has-touch-controls .drop-egg-button {top:auto;bottom:var(--touch-bottom);left:50%;transform:translateX(-50%);}

 html.has-touch-controls #mathQuizOverlay {padding:8px;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-modal {
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:300px!important;max-height:calc(100dvh - 16px)!important;
  padding:8px 12px!important;border-width:3px;border-radius:16px;overflow-y:auto;
 }
 html.has-touch-controls #mathQuizOverlay .math-quiz-modal::before {inset:4px;border-radius:11px;pointer-events:none;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-kicker {flex:none;width:max-content;font-size:11px!important;margin:0!important;line-height:1.2;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-modal h2 {flex:none;font-size:24px!important;margin:1px 32px 0!important;line-height:1.05!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-progress {font-size:14px!important;line-height:1.1;margin:0!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-close {top:4px;right:4px;width:32px!important;height:32px!important;min-width:32px;min-height:32px;border-width:2px;font-size:22px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-question {flex:none;box-sizing:border-box;width:100%!important;margin:2px 0!important;padding:4px 10px;font-size:30px!important;line-height:1;border-width:2px;border-radius:10px;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-question-canvas {max-height:44px;object-fit:contain;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-form {flex:none;grid-template-columns:minmax(0,1fr) 88px!important;gap:6px;margin:0!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-answer-field,
 html.has-touch-controls #mathQuizOverlay .math-quiz-answer-field input {height:34px!important;min-height:0;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-answer-field input {padding:0;border-width:2px;border-radius:8px;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-form button {min-width:0;min-height:34px;font-size:17px!important;padding:0 4px;border-width:2px;border-radius:8px;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-keypad {flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%!important;padding:0;margin:0!important;gap:4px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-keypad button {min-height:clamp(28px,9dvh,36px)!important;padding:0 3px;font-size:20px!important;border-width:2px;border-radius:8px;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-feedback {min-height:0;margin:0;font-size:12px!important;line-height:1.1;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-feedback:empty {display:none;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-dots {margin:2px 0;gap:5px;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-dots span {width:9px;height:9px;border-width:2px;}

 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-modal {width:430px;max-width:100%;padding:10px;border-width:3px;border-radius:16px;overflow:hidden;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-shop-header {display:flex;min-height:36px;margin:0 38px 8px 0;padding:0;gap:10px;flex-wrap:nowrap;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-modal h2 {font-size:28px;line-height:1.1;transform:none;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-balance {position:static;min-width:70px;min-height:28px;padding:2px 5px;transform:none;font-size:18px;gap:3px;border-width:2px;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-balance img {width:24px;height:24px;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-close {top:5px;right:5px;width:34px;height:34px;min-width:34px;min-height:34px;border-width:2px;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-list {max-height:calc(100dvh - 112px);padding:4px;gap:10px;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-card {grid-template-columns:76px minmax(0,1fr);grid-template-areas:"preview copy" "buy buy";min-height:136px;padding:8px;gap:6px;border-width:3px;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-preview.has-icon {width:76px;height:76px;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-buy {width:100%;min-width:0;min-height:44px;font-size:20px;padding:4px 8px;gap:5px;}
 html.has-touch-controls :is(#trailOverlay,#playerTrailOverlay) .trail-buy img {width:26px;height:26px;}

 html.has-touch-controls #characterOverlay .character-modal {width:280px;height:calc(100dvh - 28px);grid-template-columns:minmax(0,1fr);grid-template-rows:32px minmax(0,1fr) 46px;gap:5px;padding:8px;border-width:3px;overflow:hidden;}
 html.has-touch-controls #characterOverlay .character-title-box {grid-column:1;grid-row:1;min-height:0;font-size:21px;padding:2px 12px;margin:0;}
 html.has-touch-controls #characterOverlay .character-preview-shell {grid-column:1;grid-row:2;height:auto;min-height:0;}
 html.has-touch-controls #characterOverlay .character-palette-panel {grid-column:1;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-height:0;gap:7px;padding:3px 8px;border-width:2px;}
 html.has-touch-controls #characterOverlay .character-palette-swatch {width:34px;height:34px;min-height:0;border-width:2px;justify-self:center;}
 html.has-touch-controls #characterOverlay .character-arrow {width:32px;height:32px;min-height:0;border-width:2px;top:clamp(0px,calc(var(--arrow-row) - 16px),calc(100% - 32px));}
 html.has-touch-controls #characterOverlay .character-close {width:32px;height:32px;min-width:32px;min-height:32px;border-width:2px;}

 html.has-touch-controls .settings-modal {width:380px;min-height:0;padding:10px 12px 14px;transform:none;border-width:3px;}
 html.has-touch-controls .settings-title-box {font-size:22px;min-height:34px;padding:2px 10px;border-width:2px;}
 html.has-touch-controls .settings-title-box img {width:28px;height:28px;}
 html.has-touch-controls .settings-close {width:32px;height:32px;min-width:32px;min-height:32px;border-width:2px;}
 html.has-touch-controls :is(.settings-controls,.settings-actions) {gap:8px;margin-top:8px;grid-template-columns:repeat(2,minmax(0,1fr));}
 html.has-touch-controls :is(.settings-option,.settings-feedback-button,.settings-respawn-button) {min-height:52px;padding:4px 6px;gap:5px;border-width:2px;}
 html.has-touch-controls .settings-option-icon {flex-basis:30px;width:30px;height:30px;}
 html.has-touch-controls :is(.settings-option-icon img,.settings-feedback-button > img,.settings-respawn-button > img) {width:30px;height:30px;}
 html.has-touch-controls :is(.settings-option-copy strong,.settings-feedback-button strong,.settings-respawn-button strong) {font-size:17px;}
 html.has-touch-controls .settings-pets-button {margin-top:8px;}
}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls #mathQuizOverlay .math-quiz-keypad [data-quiz-key="0"] {grid-column:span 2;}
}
@media (orientation:landscape) and (max-height:350px) {
 html.has-touch-controls #mathQuizOverlay .math-quiz-modal {gap:3px;padding:6px 12px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-keypad button {min-height:26px!important;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-question {padding-block:3px;}
 html.has-touch-controls #mathQuizOverlay .math-quiz-question-canvas {max-height:34px;}
}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls #characterOverlay .character-modal:has(.has-palette-purchases) {grid-template-rows:32px minmax(0,1fr) 68px;}
 html.has-touch-controls #characterOverlay .character-palette-option {grid-template-rows:34px 20px;gap:3px;}
}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls #characterOverlay .character-arrow {transform:none;border-radius:9px;}
 html.has-touch-controls #characterOverlay .character-arrow span {width:28px;height:28px;}
}

/* Touch inventory uses pointer dragging; empty grid space remains scrollable. */
html.has-touch-controls :is(#itemHotbar,#backpackGrid) [data-inventory-key] {touch-action:none;-webkit-user-drag:none;}
.inventory-touch-drag-preview {position:fixed;left:0;top:0;width:64px;height:64px;z-index:100000;pointer-events:none;display:grid;place-items:center;background:#243f4ddd;border:2px solid #fff;border-radius:12px;}
.inventory-touch-drag-preview :is(span,img) {position:static!important;display:block;width:54px!important;height:54px!important;object-fit:contain;transform:none!important;}
html.has-touch-controls #playerTrailOverlay :is(.trail-copy,.trail-copy strong,.trail-copy span) {overflow:visible;line-height:1.25;}
html.has-touch-controls #playerTrailOverlay .trail-copy strong {padding-block:3px;margin-block:-3px;}

/* Mobile rewards: two readable cards per row, with paging below the cards. */
html.has-touch-controls .daily-modal {width:min(620px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:12px;display:flex;flex-direction:column;gap:6px;}
html.has-touch-controls .daily-modal .daily-title-box {position:relative;inset:auto;transform:none;width:max-content;max-width:calc(100% - 48px);margin:0;font-size:22px;line-height:1.15;padding:5px 8px;}
html.has-touch-controls .daily-streak-box {position:relative;inset:auto;align-self:flex-start;height:28px;margin:0;font-size:13px;border-width:2px;}
html.has-touch-controls .daily-streak-box strong {font-size:17px;}
html.has-touch-controls .daily-streak-box > img {width:24px;height:24px;}
html.has-touch-controls .daily-rewards-browser {min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 40px;gap:8px;}
html.has-touch-controls .daily-reward-list {grid-column:1/-1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:calc(100dvh - 175px);overflow-y:auto;overflow-x:hidden;padding:5px 5px 10px;align-items:stretch;}
html.has-touch-controls .daily-card-shell {min-width:0;}
html.has-touch-controls .daily-card {height:100%;min-height:190px;box-sizing:border-box;grid-template-rows:28px 54px minmax(40px,1fr) 36px;gap:5px;padding:6px;border-width:3px;}
html.has-touch-controls .daily-card .daily-day {position:static;transform:none;min-width:0;max-width:100%;padding:2px 8px;border-width:2px;font-size:17px;line-height:1.1;}
html.has-touch-controls .daily-card .daily-icon {width:100%;height:54px;}
html.has-touch-controls .daily-card .daily-icon img {position:static;transform:none;width:auto;height:54px;max-width:100%;max-height:54px;object-fit:contain;}
html.has-touch-controls .daily-card strong[class] {min-height:0;width:100%;font-size:14px;line-height:1.2;white-space:normal;overflow-wrap:anywhere;text-shadow:var(--outline-1);}
html.has-touch-controls .daily-card button {min-height:36px;padding:4px;font-size:14px;line-height:1.1;border-width:2px;text-shadow:var(--outline-1);}
html.has-touch-controls .daily-page-arrow {width:44px;height:36px;border-width:3px;}
html.has-touch-controls .daily-page-arrow.is-left {grid-column:1;grid-row:2;justify-self:start;}
html.has-touch-controls .daily-page-arrow.is-right {grid-column:2;grid-row:2;justify-self:end;}
html.has-touch-controls .daily-page-arrow span::before {height:22px;width:18px;}
@media (orientation:landscape) and (max-height:600px) {
 html.has-touch-controls .daily-modal {width:min(760px,calc(100vw - 20px));padding:8px;gap:4px;}
 html.has-touch-controls .daily-modal .daily-title-box {font-size:19px;}
 html.has-touch-controls .daily-streak-box {position:absolute;right:58px;top:12px;}
 html.has-touch-controls .daily-reward-list {grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:calc(100dvh - 105px);}
 html.has-touch-controls .daily-card {min-height:170px;grid-template-rows:24px 44px minmax(32px,1fr) 34px;gap:4px;padding:4px;}
 html.has-touch-controls .daily-card .daily-day {font-size:14px;}
 html.has-touch-controls .daily-card .daily-icon,html.has-touch-controls .daily-card .daily-icon img {height:44px;max-height:44px;}
 html.has-touch-controls .daily-card strong[class],html.has-touch-controls .daily-card button {font-size:12px;}
}
html.has-touch-controls .daily-duration {top:40px;right:3px;gap:2px;padding:2px 4px;font-size:10px;border-width:2px;text-shadow:var(--outline-1);}
html.has-touch-controls .daily-duration img {width:12px;height:12px;}

/* On taller landscape phones the five menus fit with full touch targets. */
@media (orientation:landscape) and (min-height:380px) and (max-height:600px) {
 html.has-touch-controls {--touch-button-height:44px;--touch-menu-step:47px;--touch-art-size:28px;}
}

/* Use the same square target size on both sides of a short viewport. */
@media (orientation:landscape) and (max-height:600px) {
  html.has-touch-controls {--touch-menu:var(--touch-button-height);}
  html.has-touch-controls :is(#trailsButton,#playerTrailsButton,#skinsButton,#giftButton,#backpackToggle,#animalAlbumButton,#characterButton,#emojiButton) > strong {font-size:9px;line-height:10px;bottom:1px;}
  html.has-touch-controls .first-time-tutorial {top:calc(var(--touch-top) + 48px);max-width:calc(100vw - 140px);}
}
html.has-touch-controls .animal-album {overflow:hidden;}
html.has-touch-controls .mobile-attack {right:var(--touch-right);bottom:calc(var(--touch-bottom) + var(--touch-jump-size) + 8px);width:48px;height:48px;}
html.has-touch-controls .egg-steal-prompt {max-width:calc(100vw - 170px);}

/* Storm information fits between the resources and tutorial on portrait phones. */
html.has-touch-controls .cycle-hud {
  display:flex;left:50%;right:auto;top:calc(var(--touch-top) + 46px);bottom:auto;
  width:154px;height:40px;transform:translateX(-50%);padding:0 4px;gap:2px;
}
html.has-touch-controls .cycle-hud::before {width:154px;}
html.has-touch-controls .cycle-hud img {width:44px;height:44px;flex-basis:44px;}
html.has-touch-controls .cycle-hud-copy {transform:none;width:94px;flex-basis:94px;}
html.has-touch-controls .cycle-hud-copy strong {font-size:10px;}
html.has-touch-controls .cycle-hud-copy > span {font-size:17px;}
html.has-touch-controls .cycle-announcement {display:block;top:calc(var(--touch-top) + 48px);max-width:calc(100vw - 128px);font-size:16px;}
html.has-touch-controls:has(.cycle-announcement.is-visible) .cycle-hud,
html.has-touch-controls:has(.cycle-announcement.is-visible) .first-time-tutorial {visibility:hidden;}
@media (orientation:landscape) and (max-height:600px) {
  html.has-touch-controls .cycle-hud {left:auto;right:calc(var(--touch-right) + 52px);top:var(--touch-top);transform:none;}
}