* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}
html,body {
  width:100%;
  height:100%;
  overflow:hidden
}
body {
  position:fixed;
  inset:0;
  background:#8a422b;
  color:#67351f;
  font-family:Georgia,'Times New Roman',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  overscroll-behavior:none
}
button {
  font-family:inherit;
  cursor:pointer;
  touch-action:manipulation;
  color:inherit;
  border:0;
  background:none;
  font-weight:700
}
button:focus-visible {
  outline:3px solid #c52f48;
  outline-offset:3px
}
button:disabled {
  cursor:default;
  filter:saturate(.5);
  opacity:.62
}
button:active:not(:disabled) {
  translate:0 2px
}
#app {
  position:fixed;
  left:0;
  top:0;
  overflow:hidden;
  transform-origin:0 0;
  background:#fff0bf
}
.screen {
  position:absolute;
  inset:0;
  display:none;
  overflow:hidden
}
.screen.active {
  display:flex
}
#menuIn,.fitwrap {
  position:absolute;
  left:0;
  top:0;
  overflow:hidden;
  width:960px;
  height:540px;
  transform-origin:0 0
}
#world {
  position:absolute;
  inset:0;
  display:none;
  touch-action:none
}
#world.visible {
  display:block
}
.icon {
  width:28px;
  height:28px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle
}
.eyebrow {
  font:800 11px Arial,sans-serif;
  letter-spacing:2px;
  color:#ae5b32
}
.menu-art {
  position:absolute;
  inset:0;
  background:url('../img/menu.jpg') center center/cover no-repeat
}
.menu-title {
  position:absolute;
  right:38px;
  top:21px;
  width:410px;
  text-align:center;
  transform:rotate(-2deg);
  color:#ffeb9b;
  filter:drop-shadow(0 4px 0 #6a361f) drop-shadow(0 7px 3px #713d2880);
  font-weight:900;
  -webkit-text-stroke:1.6px #6d371d
}
.menu-title span {
  display:block;
  font-size:43px;
  line-height:1.06
}
.menu-title strong {
  display:block;
  font-size:39px;
  line-height:1.1
}
.menu-title small {
  display:block;
  font-size:18px;
  margin-top:8px;
  color:#fff6d3;
  -webkit-text-stroke:0;
  text-shadow:0 2px 2px #6a381d
}
.menu-panel {
  position:absolute;
  right:59px;
  top:147px;
  width:360px;
  height:346px;
  background:url('../img/ui/panel.webp') center/100% 100% no-repeat;
  padding:38px 37px 27px;
  display:flex;
  flex-direction:column;
  gap:4px
}
.game-btn {
  position:relative;
  min-height:43px;
  padding:10px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:url('../img/ui/gold.webp') center/100% 100% no-repeat;
  color:#64391e;
  font-size:17px;
  text-shadow:0 1px #fff3bd;
  transition:filter .15s,translate .1s;
  white-space:nowrap;
  line-height:1.2
}
.game-btn:hover {
  filter:brightness(1.08)
}
.game-btn.ruby {
  background-image:url('../img/ui/ruby.webp');
  color:#fff0c7;
  text-shadow:0 2px #8f2c2c
}
.game-btn.primary {
  font-size:26px;
  min-height:59px;
  gap:10px
}
.game-btn.primary .icon {
  width:29px;
  height:29px
}
.menu-row {
  display:flex;
  gap:3px
}
.menu-row .game-btn {
  width:50%;
  font-size:14px;
  padding:10px 8px;
  gap:4px;
  min-height:47px
}
.menu-row .icon {
  width:20px;
  height:20px
}
.all-games {
  min-height:43px;
  font-size:18px
}
.menu-links {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:3px
}
.menu-links button {
  font-size:11px;
  min-height:22px
}
.small-links {
  margin-top:0;
  gap:28px
}
.small-links button {
  font-size:10px
}
.bank-badge {
  position:absolute;
  top:25px;
  left:27px;
  background:#fff0c6;
  border:3px solid #c69743;
  border-radius:13px;
  box-shadow:0 4px #8b4d2a;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 15px;
  min-width:100px;
  font:bold 23px Georgia
}
.bank-badge .icon {
  color:#b97e2c
}
.round-btn {
  width:49px;
  height:49px;
  border-radius:50%;
  background:url('../img/ui/round.webp') center/100% 100% no-repeat;
  padding:11px;
  color:#965329
}
.round-btn .icon {
  width:25px;
  height:25px
}
.menu-sound {
  position:absolute;
  right:25px;
  top:16px;
  width:43px;
  height:43px;
  padding:10px;
  z-index:2
}
.menu-sound .icon {
  width:21px;
  height:21px
}
.menu-progress {
  position:absolute;
  bottom:15px;
  right:55px;
  width:365px;
  text-align:center;
  font:700 12px Arial,sans-serif;
  color:#fff5d3;
  text-shadow:0 2px 3px #6a371e
}
.guest-notice {
  position:absolute;
  bottom:12px;
  left:20px;
  max-width:460px;
  font:11px Arial,sans-serif;
  color:#fff4d1;
  text-shadow:0 1px 3px #59331d;
  background:#733e2470;
  border-radius:6px;
  padding:5px 8px
}
.menu-firefly {
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff1a3;
  box-shadow:0 0 10px #ffe492;
  animation:firefly 6s ease-in-out infinite;
  pointer-events:none
}
.firefly-one {
  left:36%;
  top:34%
}
.firefly-two {
  left:42%;
  top:69%;
  animation-delay:-2s
}
.firefly-three {
  left:15%;
  top:58%;
  animation-delay:-4s
}
@keyframes firefly {
  0%,100% {
    transform:translate(0,0);
    opacity:.3
  }
  50% {
    transform:translate(20px,-17px);
    opacity:1
  }
}
.hud-wrap {
  pointer-events:none
}
.hud-left {
  position:absolute;
  left:20px;
  top:16px;
  background:#fff0c6e8;
  border:2px solid #c89c50;
  border-radius:15px;
  padding:10px 13px;
  box-shadow:0 3px #8b4c2b66
}
.hearts {
  display:flex;
  gap:3px;
  height:23px
}
.hearts .icon {
  width:23px;
  height:23px;
  color:#dc3c5e;
  fill:#e84e68
}
.hearts .empty {
  fill:#e3c39c;
  stroke:#b99265
}
.hud-values {
  display:flex;
  gap:17px;
  margin-top:7px;
  font:bold 15px Arial
}
.hud-values span {
  display:flex;
  gap:4px;
  align-items:center
}
.hud-values .icon {
  width:17px;
  height:17px;
  color:#b4772b
}
.hud-center {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:17px;
  width:300px;
  text-align:center;
  color:#6b371f;
  background:#fff1c8e8;
  border:2px solid #d5ab60;
  border-radius:16px;
  padding:8px 16px 7px;
  box-shadow:0 3px #91502e55
}
.hud-center strong {
  font-size:17px
}
.route-meter {
  height:7px;
  background:#e3bb81;
  border-radius:5px;
  overflow:hidden;
  margin:6px 0
}
.route-meter i {
  height:100%;
  display:block;
  background:linear-gradient(90deg,#de8340,#f5c64e);
  transform-origin:left;
  transform:scaleX(0);
  border-radius:5px
}
.hud-center>span {
  font:11px Arial,sans-serif
}
.hud-right {
  position:absolute;
  right:19px;
  top:16px;
  pointer-events:auto
}
.hint {
  position:absolute;
  top:98px;
  left:50%;
  transform:translateX(-50%);
  width:520px;
  max-height:65px;
  background:#fff2d8ed;
  border:2px solid #dba355;
  border-radius:15px;
  padding:10px 17px;
  text-align:center;
  font:700 13px/1.4 Arial,sans-serif;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none
}
.hint.show {
  opacity:1
}
.boss-hud {
  position:absolute;
  top:98px;
  left:50%;
  transform:translateX(-50%);
  width:330px;
  background:#fff0cde8;
  border:2px solid #b9683a;
  border-radius:12px;
  padding:8px 14px;
  text-align:center;
  display:none
}
.boss-hud.show {
  display:block
}
.boss-hud strong {
  font-size:15px
}
.boss-hud>div {
  height:9px;
  border-radius:6px;
  background:#ddb17c;
  margin-top:6px;
  overflow:hidden
}
.boss-hud i {
  display:block;
  background:linear-gradient(90deg,#cc3549,#f0824b);
  width:100%;
  height:100%;
  transform-origin:left;
  transition:transform .12s
}
.bonus-status {
  position:absolute;
  left:20px;
  top:110px;
  display:flex;
  flex-direction:column;
  gap:5px
}
.bonus-pill {
  font:700 11px Arial,sans-serif;
  color:#71401f;
  background:#fff2cbe6;
  border:1px solid #d9b05d;
  border-radius:12px;
  padding:5px 8px
}
.ctrl-group {
  position:absolute;
  pointer-events:auto
}
#joy-group {
  left:15px;
  bottom:17px;
  transform-origin:left bottom;
  width:127px;
  height:145px
}
#joystick {
  width:118px;
  height:118px;
  border:4px solid #daa84d;
  border-radius:50%;
  background:radial-gradient(circle,#fff3c7bb 0 58%,#e6bd76d9 59% 70%,#f7df9b 72%,#b87d37 83%);
  box-shadow:inset 0 2px #fff5c5,0 5px 0 #92532e,0 8px 15px #673b1d44;
  touch-action:none;
  position:relative;
  opacity:.9
}
.joy-arrows {
  display:flex;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:space-between;
  padding:0 7px;
  font:34px Arial;
  color:#ad6f2b
}
.joy-arrows b {
  font-weight:400
}
#stick {
  position:absolute;
  left:29px;
  top:29px;
  width:52px;
  height:52px;
  border:2px solid #e6b65a;
  border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#fff3b7,#e0aa47 70%,#aa6c2e);
  box-shadow:0 4px 7px #965b3255;
  padding:13px;
  color:#99582e;
  pointer-events:none
}
#stick .icon {
  width:22px;
  height:22px
}
.joy-label {
  display:block;
  text-align:center;
  width:118px;
  margin-top:8px;
  color:#fff4cc;
  font:700 10px Arial,sans-serif;
  text-shadow:0 2px 2px #774326;
  letter-spacing:1px
}
#actions-group {
  right:15px;
  bottom:17px;
  transform-origin:right bottom;
  width:298px;
  height:148px
}
.action-btn {
  position:absolute;
  width:66px;
  height:66px;
  border-radius:50%;
  background:url('../img/ui/round.webp') center/100% 100% no-repeat;
  color:#985329;
  padding:14px 15px 17px;
  touch-action:none;
  filter:drop-shadow(0 3px 1px #8a492955)
}
.action-btn .icon {
  width:31px;
  height:31px
}
.action-btn span {
  display:block;
  font:800 8px Arial,sans-serif;
  margin-top:1px;
  white-space:nowrap
}
.action-btn.pressed {
  translate:0 3px;
  filter:brightness(1.12)
}
.jump-action {
  right:6px;
  bottom:5px;
  width:83px;
  height:83px;
  padding:17px 20px 20px
}
.jump-action .icon {
  width:39px;
  height:39px
}
.jump-action span {
  font-size:9px
}
.attack-action {
  right:95px;
  bottom:5px
}
.shoot-action {
  right:32px;
  bottom:91px
}
.roll-action {
  right:172px;
  bottom:6px
}
.ruby-action {
  color:#b12e46
}
#power-group {
  right:164px;
  bottom:103px;
  transform-origin:right bottom;
  width:151px;
  height:70px
}
.super-action {
  right:0;
  bottom:0
}
.bonus-action {
  right:78px;
  bottom:0
}
.action-btn[hidden],.context-btn[hidden] {
  display:none
}
.super-action {
  animation:powerPulse 1.3s ease-in-out infinite
}
.context-btn {
  position:absolute;
  right:35px;
  bottom:196px;
  min-width:180px;
  height:44px;
  font-size:13px;
  z-index:4;
  padding:10px 22px
}
.keyboard-note {
  position:absolute;
  bottom:8px;
  left:160px;
  right:330px;
  font:9px Arial,sans-serif;
  text-align:center;
  color:#fff3ca;
  text-shadow:0 2px #7d4727;
  pointer-events:none
}
@keyframes powerPulse {
  50% {
    filter:brightness(1.2) drop-shadow(0 0 7px #ffdf8a)
  }
}
.overlay {
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#6a301f91;
  backdrop-filter:blur(4px);
  z-index:50
}
.overlay.show {
  display:flex
}
.panel {
  position:relative;
  background:#fff1cc;
  border:4px solid #c99543;
  border-radius:22px;
  box-shadow:inset 0 0 0 3px #ffe8a4,0 12px 40px #6b351d66;
  text-align:center;
  padding:25px 30px;
  transform-origin:center;
  animation:panelIn .2s ease-out;
  overflow:hidden
}
.panel:before {
  content:'';
  position:absolute;
  inset:9px;
  border:1px solid #d6a356;
  border-radius:13px;
  pointer-events:none
}
.panel h2 {
  font-size:28px;
  color:#a63b39;
  margin:7px 0 15px;
  position:relative
}
.panel p {
  font:14px/1.5 Arial,sans-serif;
  color:#87502a;
  margin:10px 0 17px
}
.close-btn {
  position:absolute;
  right:14px;
  top:12px;
  z-index:2;
  width:37px;
  height:37px;
  border:2px solid #cd9f4d;
  border-radius:50%;
  background:#f6d792;
  color:#96522c;
  font:28px Arial,sans-serif
}
.compact-panel {
  width:400px
}
.compact-panel>.game-btn {
  display:flex;
  width:100%;
  margin-top:9px
}
.pause-links {
  display:flex;
  justify-content:center;
  gap:28px;
  margin-top:16px
}
.pause-links button {
  min-height:28px;
  font-size:13px
}
.sheet-panel {
  width:680px;
  padding:24px 26px 22px
}
.sheet-panel h2 {
  margin-bottom:17px
}
.sheet-list {
  height:285px;
  max-height:285px;
  text-align:left;
  padding:3px 8px 9px
}
.scroller {
  overflow-y:auto;
  scrollbar-width:none
}
.scroller::-webkit-scrollbar {
  display:none
}
.scroller.x {
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap
}
.sheet-footer {
  font:12px/1.5 Arial,sans-serif;
  text-align:center;
  margin-top:14px;
  min-height:19px
}
.sheet-footer .game-btn {
  font-size:14px;
  min-height:38px
}
.map-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.level-card {
  position:relative;
  border:2px solid #c6954a;
  border-radius:13px;
  padding:0 0 10px;
  background:#fff6db;
  overflow:hidden;
  text-align:center;
  min-height:158px
}
.level-card img {
  width:100%;
  height:78px;
  object-fit:cover;
  display:block
}
.level-card strong {
  display:block;
  font-size:13px;
  margin:7px 4px 3px
}
.level-card small {
  font:10px Arial
}
.level-card .map-stars {
  display:flex;
  justify-content:center;
  gap:2px;
  margin-top:5px
}
.map-stars .icon {
  width:15px;
  height:15px;
  color:#cc8c29
}
.map-stars .earned {
  fill:#efb340
}
.level-card.locked img {
  filter:sepia(.8);
  opacity:.65
}
.level-number {
  position:absolute;
  top:6px;
  left:6px;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#fff0ba;
  border:2px solid #b5823c;
  color:#7d451e;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center
}
.level-card.current {
  border-color:#bf3750;
  box-shadow:inset 0 0 0 2px #ed9d9f
}
.shop-row,.achievement-row,.journal-row {
  display:flex;
  align-items:center;
  gap:13px;
  background:#fff7df;
  border:1px solid #dbb676;
  border-radius:12px;
  padding:13px;
  margin:0 0 10px;
  min-height:88px
}
.row-icon {
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f6dc9b;
  border:2px solid #d0a052;
  border-radius:50%;
  flex-shrink:0
}
.row-icon .icon {
  width:29px;
  height:29px;
  color:#ad6432
}
.row-copy {
  flex:1;
  min-width:0
}
.row-copy h3 {
  font-size:17px;
  margin-bottom:5px;
  color:#a13d35
}
.row-copy p {
  font:12px/1.4 Arial,sans-serif;
  margin:0 0 6px
}
.row-copy small {
  font:700 11px Arial,sans-serif;
  color:#a77534
}
.shop-row .game-btn,.achievement-row .game-btn {
  font-size:13px;
  min-width:100px;
  padding:10px 18px;
  align-self:center;
  flex-shrink:0
}
.row-meter {
  height:5px;
  background:#ead0a0;
  border-radius:4px;
  margin-top:7px;
  overflow:hidden
}
.row-meter i {
  display:block;
  height:100%;
  background:#e49b3c
}
.row-tag {
  font:700 11px Arial,sans-serif;
  padding:8px;
  color:#ad6840
}
.journal-row img {
  width:93px;
  height:70px;
  object-fit:cover;
  border:2px solid #dab471;
  border-radius:8px;
  flex-shrink:0
}
.journal-row.locked {
  opacity:.66
}
.help-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.help-item {
  border:1px solid #d6ad6a;
  background:#fff8e0;
  border-radius:11px;
  padding:12px;
  display:flex;
  gap:10px;
  min-height:80px
}
.help-item .icon {
  width:27px;
  height:27px;
  color:#ad6531;
  flex-shrink:0
}
.help-item strong {
  font-size:14px
}
.help-item p {
  font:12px/1.4 Arial,sans-serif;
  margin:5px 0 0
}
kbd {
  font:11px Arial,sans-serif;
  display:inline-block;
  border:1px solid #c9a166;
  background:#f4dfb3;
  border-radius:4px;
  padding:3px 6px;
  color:#7c4725
}
.setting-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  background:#fff7df;
  border:1px solid #d7b172;
  border-radius:12px;
  margin-bottom:12px
}
.setting-row strong {
  font-size:17px
}
.setting-row p {
  font-size:12px;
  margin:5px 0 0
}
.toggle {
  min-width:90px;
  min-height:42px;
  border:2px solid #c99340;
  border-radius:12px;
  background:#f9db92;
  color:#8e4f29
}
.toggle.on {
  background:#e6c061
}
.danger-button {
  min-height:43px;
  color:#b53843;
  border:1px solid #ca8c6c;
  border-radius:9px;
  padding:10px 20px;
  margin-top:15px
}
.lb-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:#fff7e0;
  border:1px solid #dab173;
  border-radius:12px;
  margin-bottom:8px
}
.lb-medal {
  width:30px;
  text-align:center;
  font-size:19px;
  color:#a2672c
}
.lb-avatar {
  position:relative;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#efcf8a;
  color:#a1602d;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0
}
.lb-avatar img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.lb-name {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px
}
.lb-score {
  font:bold 15px Arial
}
.lb-empty {
  text-align:center;
  font:15px/1.6 Arial,sans-serif;
  padding:40px 20px;
  color:#995b31
}
.lb-row.top-1 {
  background:#ffe9a3;
  border-color:#d2a047
}
.lb-row.top-2 {
  background:#fff0cf;
  border-color:#c7a77a
}
.lb-row.top-3 {
  background:#f3d3ad;
  border-color:#bd895c
}
.lb-row.me {
  box-shadow:inset 4px 0 #d84758
}
.result-panel {
  width:480px;
  padding:25px 35px
}
.result-stars {
  display:flex;
  justify-content:center;
  gap:13px
}
.result-stars .icon {
  width:43px;
  height:43px;
  color:#d2a256
}
.result-stars .earned {
  fill:#efbd4d;
  stroke:#a37029
}
.result-stats {
  display:flex;
  justify-content:space-between;
  gap:12px;
  background:#f7dfaa;
  border:1px solid #d5af64;
  border-radius:13px;
  padding:13px
}
.result-stats>div {
  flex:1
}
.result-stats span {
  display:block;
  font:12px Arial;
  margin-bottom:5px
}
.result-stats strong {
  font-size:23px
}
.result-panel>.game-btn {
  width:100%;
  margin-top:8px
}
.result-row {
  display:flex;
  gap:7px;
  margin-top:9px
}
.result-row>.game-btn {
  width:50%;
  font-size:16px
}
.result-panel #result-extra {
  font-size:12px;
  margin:12px 0
}
.daily-icon {
  width:80px;
  height:80px;
  color:#be8231;
  margin-top:8px
}
#daily-claim:disabled {
  opacity:.6
}
.finale-wrap {
  pointer-events:none
}
.finale-heading {
  position:absolute;
  top:28px;
  left:70px;
  right:70px;
  text-align:center;
  background:#fff0c7ed;
  border:3px solid #d7a54c;
  border-radius:20px;
  padding:16px 25px
}
.finale-heading h1 {
  font-size:33px;
  color:#b63e45;
  margin:8px 0
}
.finale-heading p {
  font:14px Arial,sans-serif
}
.finale-buttons {
  position:absolute;
  bottom:19px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  pointer-events:auto
}
.finale-buttons .game-btn {
  font-size:17px;
  min-width:170px;
  min-height:50px
}
.finale-buttons .primary {
  font-size:20px
}
#toast {
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translate(-50%,12px);
  max-width:90%;
  background:#fff0c9;
  border:2px solid #cc9945;
  border-radius:12px;
  padding:11px 20px;
  font:700 14px/1.4 Arial,sans-serif;
  text-align:center;
  color:#8b4d29;
  opacity:0;
  pointer-events:none;
  z-index:100;
  transition:opacity .2s,transform .2s
}
#toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.loading-sun {
  font-size:66px;
  color:#d08b2a;
  animation:loadingSpin 7s linear infinite
}
.load-tip {
  font:13px/1.5 Arial,sans-serif;
  min-height:40px;
  margin-top:15px;
  color:#9d6337
}
#load-text {
  margin-top:8px;
  font:14px Arial
}
#load-pct {
  font:700 18px Arial
}
@keyframes loadingSpin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes panelIn {
  from {
    opacity:0;
    translate:0 8px
  }
  to {
    opacity:1;
    translate:0 0
  }
}
@media(pointer:coarse) {
  .keyboard-note {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  .menu-firefly,.super-action,.loading-sun {
    animation:none
  }
  .panel {
    animation:none
  }
}