:root {
  --paper: #f7f7f7;
  --green: #0b6515;
  --orange: #e89224;
  --text-title: clamp(20px, 2.6vw, 30px);
  --text-heading: clamp(16px, 2.2vw, 24px);
  --text-ui: clamp(14px, 1.7vw, 18px);
  --text-body: clamp(13px, 1.5vw, 16px);
  --text-label: clamp(12px, 1.4vw, 15px);
}

* {
  box-sizing: border-box;
}

html,
body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

body {
  display: grid;
  place-items: center;
  font-family: "Courier New", monospace;
}

.game {
  position: relative;
  width: min(100%, 100vw, 1200px);
  max-width: 100%;
  height: clamp(140px, calc(min(100vw, 1200px) * 7 / 30), min(360px, 100dvh));
  overflow: hidden;
  background: var(--paper);
}

#gameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

.overlay {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.start-overlay,
.game-over {
  top: 27%;
}

.start-overlay h1,
.game-over h2 {
  margin: 0;
  color: var(--green);
  font-size: var(--text-title);
  font-weight: 900;
  letter-spacing: .28em;
  white-space: nowrap;
  text-shadow: 2px 0 var(--paper);
}

.start-overlay p {
  margin: 10px 0 0;
  color: #555;
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: .08em;
}

.game-over[hidden] {
  display: none;
}

#restartButton {
  position: relative;
  width: clamp(38px, 5vw, 54px);
  aspect-ratio: 1;
  margin-top: clamp(15px, 2.2vw, 25px);
  padding: 0;
  border: 4px solid #c87512;
  border-radius: 8px;
  background: var(--orange);
  box-shadow: inset 3px 3px #ffc66f, 0 3px #a95b0c;
  cursor: pointer;
  pointer-events: auto;
}

#restartButton:active {
  transform: translateY(3px);
  box-shadow: inset 3px 3px #ffc66f;
}

#restartButton:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}

.restart-icon {
  position: absolute;
  left: 26%;
  top: 25%;
  width: 48%;
  height: 48%;
  border: 4px solid white;
  border-left-color: transparent;
  border-radius: 50%;
}

.restart-icon::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -5px;
  border-right: 8px solid white;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: rotate(35deg);
}

.hud-left {
  position: absolute;
  z-index: 4;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  overflow: visible;
}

.corner-character-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-bottom: 2px solid var(--green);
  background: var(--paper);
  color: var(--green);
  font: 700 var(--text-ui) "Courier New", monospace;
  letter-spacing: .08em;
  cursor: pointer;
}

.corner-character-button[hidden] {
  display: none;
}

.corner-character-button:hover {
  background: #edf6ed;
}

.corner-character-button:active {
  transform: translateY(2px);
}

.corner-character-button i {
  color: var(--orange);
  font: bold 20px monospace;
  line-height: .7;
}

.character-mini {
  position: relative;
  width: 25px;
  height: 20px;
  background: var(--green);
  clip-path: polygon(32% 10%, 78% 10%, 78% 25%, 100% 25%, 100% 55%, 70% 55%, 70% 75%, 82% 75%, 82% 100%, 65% 100%, 65% 70%, 40% 70%, 40% 100%, 24% 100%, 24% 70%, 12% 70%, 12% 55%, 0 55%, 0 40%, 22% 40%, 22% 25%, 32% 25%);
}

.coin-hud {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 1px 2px;
  color: #8a4b00;
  font: bold var(--text-ui) "Courier New", monospace;
  letter-spacing: .06em;
}

.coin-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #b87300;
  border-radius: 50%;
  background: #efb510;
  box-shadow: inset 0 0 0 2px #ffcf43, 2px 1px 0 #a96700;
}

.coin-icon::after {
  content: "$";
  color: #fff09a;
  font: bold 13px Arial, sans-serif;
  line-height: 1;
  text-shadow: 0 1px #ad7200;
}

.shop-screen {
  position: absolute;
  z-index: 8;
  inset: 3% 6%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 8px 16px;
  overflow: hidden;
  border: 1px solid var(--green);
  background: var(--paper);
  box-shadow: none;
}

.shop-screen[hidden] {
  display: none;
}

.shop-screen header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  flex-shrink: 0;
  align-items: center;
  border-bottom: 2px dashed #9a9a9a;
  padding-bottom: 8px;
}

.shop-screen header h2 {
  margin: 0;
  color: var(--green);
  font-size: var(--text-heading);
  letter-spacing: .14em;
}

.shop-screen header button {
  justify-self: start;
  border: 0;
  background: none;
  color: var(--green);
  font: bold 28px monospace;
  cursor: pointer;
}

.shop-screen header div {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8a4b00;
  font: 700 var(--text-ui) "Courier New", monospace;
}

.shop-tabs {
  height: 34px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 22px;
}

.shop-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 6px 4px 4px;
  color: #666;
  font: 700 var(--text-body) "Courier New", monospace;
  letter-spacing: .08em;
  cursor: pointer;
}

.shop-tabs button.active {
  border-color: var(--green);
  color: var(--green);
}

.skin-grid {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  align-items: center;
}

.skin-card {
  min-width: 0;
  min-height: 0;
  padding: 5px 4px;
  border: 2px solid #aaa;
  background: #fff;
  text-align: center;
  color: #333;
  font: 700 var(--text-body) "Courier New", monospace;
  letter-spacing: .04em;
  cursor: pointer;
}

.skin-card.selected {
  border-color: var(--green);
  box-shadow: none;
  color: var(--green);
}

.skin-card.locked {
  border-color: #c69432;
  color: #8a5e00;
}

.skin-preview {
  position: static;
  display: block;
  width: min(96px, 100%);
  height: auto;
  max-height: 66px;
  aspect-ratio: 96 / 66;
  margin: 0 auto 4px;
  image-rendering: pixelated;
  pointer-events: none;
}

.skin-card b,
.skin-card small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skin-card b {
  font-size: var(--text-body);
  line-height: 1.25;
}

.skin-card small {
  min-height: 16px;
  margin-top: 4px;
  color: #8a4b00;
  font-size: var(--text-label);
  line-height: 1.25;
}

.shop-pager {
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.shop-pager button {
  width: 28px;
  height: 22px;
  border: 0;
  background: none;
  color: var(--green);
  font: bold 22px monospace;
  line-height: 1;
  cursor: pointer;
}

.shop-pager button:disabled {
  opacity: .25;
  cursor: default;
}

.shop-pager span {
  min-width: 52px;
  text-align: center;
  color: #555;
  font: 700 var(--text-label) "Courier New", monospace;
}

.jump-zone {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

.rotate-screen {
  display: none;
}

@media (orientation:portrait) and (max-width:768px) {
  .game {
    visibility: hidden;
  }

  .rotate-screen {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    color: var(--green);
    text-align: center;
  }

  .rotate-screen h2 {
    margin: 24px 0 5px;
    font-size: clamp(20px, 7vw, 32px);
  }

  .rotate-screen p {
    margin: 0;
    color: #555;
    font: 700 var(--text-body) "Courier New", monospace;
    letter-spacing: .12em;
  }

  .phone-icon {
    position: relative;
    width: 58px;
    height: 92px;
    border: 5px solid var(--green);
    border-radius: 9px;
    animation: rotate-phone 1.8s ease-in-out infinite;
  }

  .phone-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 16px;
    height: 3px;
    transform: translateX(-50%);
    background: var(--green);
  }

  .phone-icon span {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 7px;
    height: 7px;
    transform: translateX(-50%);
    border: 2px solid var(--green);
    border-radius: 50%;
  }

  .phone-icon::after {
    content: "";
    position: absolute;
    left: -28px;
    top: 15px;
    width: 18px;
    height: 18px;
    border-left: 4px solid var(--orange);
    border-top: 4px solid var(--orange);
    transform: rotate(-45deg);
  }

  @keyframes rotate-phone {

    0%,
    25% {
      transform: rotate(0)
    }

    65%,
    100% {
      transform: rotate(90deg)
    }
  }
}

@media (max-width: 900px) {
  .game {
    width: 100%;
  }

  .start-overlay h1,
  .game-over h2 {
    letter-spacing: .28em;
  }

  .hud-left {
    top: max(6px, env(safe-area-inset-top, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    gap: 2px;
  }

  .corner-character-button {
    padding: 3px 6px 3px 3px;
  }

  .shop-screen {
    inset: 2% 2%;
    padding: 6px 8px;
  }

  .shop-screen header {
    padding-bottom: 4px;
  }

  .shop-screen header h2 {
    letter-spacing: .1em;
  }

  .skin-grid {
    gap: 4px;
  }

  .skin-card {
    min-height: 0;
    padding: 3px 1px;
  }

  .skin-preview {
    width: min(72px, 100%);
    max-height: 52px;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .game {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  #gameCanvas {
    object-fit: contain;
    object-position: center;
  }

  .start-overlay,
  .game-over {
    top: 50%;
    transform: translate(-50%, -58%);
  }

  .shop-screen {
    position: fixed;
    inset: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    padding: 6px 10px;
  }

  .shop-screen header h2 {
    font-size: clamp(16px, 5vh, 22px);
  }

  .shop-screen header button {
    font-size: 26px;
  }

  .shop-tabs {
    height: 32px;
    gap: 16px;
  }

  .shop-tabs button {
    font-size: clamp(13px, 3.4vh, 16px);
  }

  .skin-card {
    min-height: 0;
  }

  .skin-card b {
    font-size: clamp(13px, 3.6vh, 16px);
  }

  .skin-card small {
    font-size: clamp(12px, 3.2vh, 14px);
  }

  .skin-preview {
    width: min(64px, 100%);
    max-height: 44px;
    margin-bottom: 2px;
  }

  .shop-pager {
    height: 28px;
    gap: 10px;
  }

  .shop-pager span {
    font-size: 14px;
  }
}