html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: #7cc96b;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Rounded Mplus 1c", system-ui, sans-serif;
}
body { position: fixed; inset: 0;
  background: radial-gradient(circle at 15% 20%, #8fd47e 0 60px, transparent 61px), radial-gradient(circle at 85% 80%, #8fd47e 0 90px, transparent 91px), #7cc96b; }
#app {
  position: absolute; inset: 0; box-sizing: border-box;
  padding: calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 24px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh;
}
h1 { margin: 0; font-size: clamp(32px, 6vh, 56px); color: #fff; text-shadow: 0 4px 0 #4f9a42; letter-spacing: .08em; }
#tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; max-width: 100%; }
.tile {
  box-sizing: border-box; width: clamp(200px, 27vw, 300px); height: clamp(220px, 50vh, 340px);
  border: none; border-radius: 36px; padding: 18px 12px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: var(--c); box-shadow: 0 10px 0 var(--s);
  color: #fff; text-decoration: none; font: inherit; font-weight: bold;
  font-size: clamp(24px, 4.2vh, 36px); white-space: nowrap;
  touch-action: manipulation; cursor: pointer; position: relative;
  -webkit-touch-callout: none; transition: transform .08s;
}
.tile .pic { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0;
  background: #fff8e7; border-radius: 24px; margin-bottom: 14px; }
.tile .pic svg { width: 75%; height: 75%; pointer-events: none; }
.tile span { pointer-events: none; }
.tile:active { transform: translateY(6px); box-shadow: 0 4px 0 var(--s); }
.tile.locked { background: #b9b9b9; box-shadow: 0 10px 0 #8c8c8c; color: #f4f4f4; }
.tile.locked .pic { background: #e6e6e6; }
.tile.locked .pic svg { filter: grayscale(1); opacity: .45; }
.tile.locked:active { transform: none; box-shadow: 0 10px 0 #8c8c8c; }
.tile .lock { position: absolute; top: -14px; right: -14px; width: 64px; height: 64px; pointer-events: none; }
.tile .soon { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  background: #fff; color: #888; border-radius: 20px; padding: 8px 18px; font-size: 26px; pointer-events: none;
  box-shadow: 0 4px 0 #ccc; transition: opacity .2s, transform .2s; }
.tile.show-soon .soon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tile.wiggle { animation: wiggle .4s; }
@keyframes wiggle { 0%,100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@media (orientation: portrait) {
  .tile { width: clamp(180px, 40vw, 300px); height: clamp(200px, 28vh, 320px); }
}