* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0c0306; overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Press Start 2P', ui-monospace, monospace; color: #ffe9cf; }
#wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); --u: 2px; }
#c { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
#ui { position: absolute; inset: 0; pointer-events: none; }
.ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.ov.dim { background: rgba(10, 2, 5, .55); }
.panel { background: rgba(26, 7, 12, .94); border: calc(var(--u) * 2) solid #ff6a2a; box-shadow: 0 0 0 calc(var(--u) * 2) #3a0b0b, 0 0 calc(var(--u) * 20) rgba(255, 90, 30, .35);
  padding: calc(var(--u) * 10) calc(var(--u) * 12); max-width: calc(var(--u) * 400); text-align: center; }
.small { font-size: calc(var(--u) * 6); line-height: 1.6; color: #e8c9a8; }
.med { font-size: calc(var(--u) * 8); line-height: 1.7; }
.big { font-size: calc(var(--u) * 12); line-height: 1.4; color: #ffcf4a; text-shadow: calc(var(--u)) calc(var(--u)) 0 #7a1010; }
h1.title { margin: 0; font-size: calc(var(--u) * 22); line-height: 1.25; color: #ff4a2a; letter-spacing: calc(var(--u) * .5);
  text-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 #2a0505, 0 0 calc(var(--u) * 12) rgba(255, 80, 20, .6); }
.by { font-size: calc(var(--u) * 6); color: #e8c9a8; margin-top: calc(var(--u) * 6); }
.btn { font-family: inherit; font-size: calc(var(--u) * 8); color: #2a0606; background: #ffb43a; border: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 10); margin: calc(var(--u) * 4); cursor: pointer;
  box-shadow: 0 calc(var(--u) * 2) 0 #a8461a, inset 0 calc(var(--u)) 0 #ffe08a; min-height: calc(var(--u) * 22); }
.btn:hover, .btn:focus-visible { background: #ffd05a; outline: none; }
.btn.alt { background: #5a2430; color: #ffe9cf; box-shadow: 0 calc(var(--u) * 2) 0 #2a0a10, inset 0 calc(var(--u)) 0 #7a3a48; }
.btn.alt:hover { background: #6e2e3c; }
.btn[disabled] { opacity: .4; cursor: default; }
a.link { color: #ffb43a; font-size: calc(var(--u) * 6); text-decoration: none; display: inline-block; margin-top: calc(var(--u) * 8); padding: calc(var(--u) * 3); }
a.link:hover { text-decoration: underline; }
.corner { position: absolute; left: calc(var(--u) * 6); top: calc(var(--u) * 4); pointer-events: auto; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 4); margin: calc(var(--u) * 8) 0; }
.chip { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); background: #2e1218; padding: calc(var(--u) * 3);
  min-width: calc(var(--u) * 34); font-size: calc(var(--u) * 6); }
.chip img { width: calc(var(--u) * 24); height: calc(var(--u) * 24); image-rendering: pixelated; }
.stars { display: flex; justify-content: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 8) 0; }
.star { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 5); color: #e8c9a8; width: calc(var(--u) * 60); }
.star svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
/* world map */
.map { position: absolute; inset: 0; background: linear-gradient(#f7c58a 0%, #8a4a5a 14%, #3a1426 30%, #2a0c14 60%, #3d0e0a 100%);
  pointer-events: auto; display: flex; flex-direction: column; padding: calc(var(--u) * 6) calc(var(--u) * 8); }
.maphead { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * 7); color: #2a0606; }
.maphead .btn { margin: 0; font-size: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 6); min-height: 0; }
.worlds { flex: 1; display: flex; flex-direction: column; justify-content: space-around; margin-top: calc(var(--u) * 4); }
.world { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.wname { width: calc(var(--u) * 92); font-size: calc(var(--u) * 6); line-height: 1.5; color: #ffe9cf; text-shadow: calc(var(--u) * .5) calc(var(--u) * .5) 0 #000; }
.wname span { color: #e8a878; font-size: calc(var(--u) * 5); }
.stones { flex: 1; display: flex; justify-content: space-between; }
.stone { font-family: inherit; width: calc(var(--u) * 30); height: calc(var(--u) * 32); background: #6b3a2a; color: #ffe9cf; border: 0;
  font-size: calc(var(--u) * 7); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2);
  box-shadow: inset 0 calc(var(--u) * 2) 0 #8f5440, inset 0 calc(var(--u) * -2) 0 #3e1e14; padding: 0; }
.stone:hover:not([disabled]) { background: #8a4a30; }
.stone.done { background: #8a3020; }
.stone.next { background: #ff8a2a; color: #2a0606; animation: pulse 1s ease-in-out infinite alternate; }
.stone[disabled] { background: #2e1a1e; color: #6a4a50; cursor: default; box-shadow: none; }
.stone .st { display: flex; gap: calc(var(--u) * .5); height: calc(var(--u) * 6); }
.stone .st svg { width: calc(var(--u) * 6); height: calc(var(--u) * 6); }
.soon { flex: 1; font-size: calc(var(--u) * 6); color: #8a6a70; text-align: center; border: calc(var(--u)) dashed #5a3a40; padding: calc(var(--u) * 10) 0; }
@keyframes pulse { from { transform: translateY(0); } to { transform: translateY(calc(var(--u) * -2)); } }
#rotate { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: #0c0306; z-index: 9;
  font-size: 14px; line-height: 1.8; text-align: center; padding: 24px; color: #ffcf4a; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }