* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #10180a; overflow: hidden; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Alegreya Sans', 'Trebuchet MS', sans-serif; color: #f6e8c8; }
#wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); --u: 1px; }
#c { width: 100%; height: 100%; display: block; outline: none; }
#ui { position: absolute; inset: 0; pointer-events: none; font-size: calc(var(--u) * 16); }
.ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.ov.dim { background: rgba(12, 18, 6, .55); }
.ov.bottom { align-items: flex-end; padding-bottom: calc(var(--u) * 26); background: transparent; }
.panel { background: linear-gradient(#4a3018, #26170a); border: calc(var(--u) * 2) solid #c9a24a; border-radius: calc(var(--u) * 14);
  box-shadow: 0 0 0 calc(var(--u) * 4) rgba(20, 12, 4, .7), 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0, 0, 0, .5);
  padding: calc(var(--u) * 22) calc(var(--u) * 30); max-width: calc(var(--u) * 560); text-align: center; }
.panel h2 { font-family: 'Alegreya', Georgia, serif; font-weight: 800; font-size: calc(var(--u) * 34); margin: 0 0 calc(var(--u) * 10); color: #ffe9a8; }
.panel p { font-size: calc(var(--u) * 17); line-height: 1.5; margin: calc(var(--u) * 6) 0; color: #efe0bf; }
.panel p.gold { color: #ffd23a; font-weight: 700; }
.title-panel { background: rgba(30, 20, 9, .9); padding: calc(var(--u) * 26) calc(var(--u) * 40) calc(var(--u) * 18); }
h1.title { font-family: 'Alegreya', Georgia, serif; font-weight: 800; margin: 0; font-size: calc(var(--u) * 50); line-height: 1.02; color: #f6e8c8;
  text-shadow: 0 calc(var(--u) * 3) 0 #1e1206; letter-spacing: calc(var(--u) * .3); }
h1.title span { display: block; font-size: calc(var(--u) * 34); color: #ff8a1a; font-weight: 700; letter-spacing: calc(var(--u) * 1); }
.tagline { font-size: calc(var(--u) * 18) !important; max-width: calc(var(--u) * 380); margin: calc(var(--u) * 12) auto !important; }
.welcome { color: #bff08a !important; font-weight: 700; }
.row { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); }
.btn { font-family: inherit; font-weight: 800; font-size: calc(var(--u) * 20); color: #f6ffe8; cursor: pointer;
  background: linear-gradient(#6aa83e, #3e6e22); border: calc(var(--u) * 1.5) solid #bfe88a; border-radius: calc(var(--u) * 10);
  padding: calc(var(--u) * 10) calc(var(--u) * 26); min-height: calc(var(--u) * 46); text-shadow: 0 1px 0 #1e3a0e; }
.btn:hover, .btn:focus-visible { background: linear-gradient(#7ec04a, #4a8228); outline: calc(var(--u) * 2) solid #ffd23a; outline-offset: calc(var(--u) * 2); }
.btn.alt { background: rgba(12, 7, 2, .6); border-color: rgba(201, 162, 74, .7); color: #f6e8c8; text-shadow: none; }
.btn.alt:hover, .btn.alt:focus-visible { background: rgba(80, 52, 22, .9); }
.btn.small { font-size: calc(var(--u) * 16); padding: calc(var(--u) * 7) calc(var(--u) * 16); min-height: calc(var(--u) * 40); }
a.link { display: inline-block; margin-top: calc(var(--u) * 14); color: #ffd23a; font-size: calc(var(--u) * 15); font-weight: 700; text-decoration: none; padding: calc(var(--u) * 4); pointer-events: auto; }
a.link:hover, a.link:focus-visible { text-decoration: underline; }
.caption { background: rgba(255, 248, 232, .96); color: #2a1a10; border: calc(var(--u) * 2.5) solid #8a4ad8; border-radius: calc(var(--u) * 14);
  padding: calc(var(--u) * 14) calc(var(--u) * 22); max-width: calc(var(--u) * 680); }
.caption p { margin: 0 0 calc(var(--u) * 6); font-family: 'Alegreya', Georgia, serif; font-size: calc(var(--u) * 21); line-height: 1.4; font-weight: 500; }
.caption .row { justify-content: flex-end; }
.caption .btn.alt { color: #4a2a6a; background: transparent; border-color: #b8a0d8; }
/* world map */
.map { position: absolute; inset: 0; pointer-events: auto; }
.maphead { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * 8) calc(var(--u) * 12); background: linear-gradient(rgba(38, 23, 10, .92), rgba(38, 23, 10, .75)); border-bottom: calc(var(--u) * 1.5) solid #c9a24a; }
.wname { font-family: 'Alegreya', Georgia, serif; font-weight: 800; font-size: calc(var(--u) * 24); color: #f6e8c8; }
.startotal { display: flex; align-items: center; gap: calc(var(--u) * 6); font-weight: 700; font-size: calc(var(--u) * 17); color: #ffe08a; }
.startotal svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.stone { position: absolute; transform: translate(-50%, -50%); width: calc(var(--u) * 74); height: calc(var(--u) * 66); border-radius: 46% 54% 50% 50%;
  background: radial-gradient(circle at 35% 30%, #e6dcc6, #8a8070 75%); border: calc(var(--u) * 2) solid #2a241b; color: #2a1a10; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2); font-family: inherit;
  box-shadow: calc(var(--u) * 4) calc(var(--u) * 6) 0 rgba(0, 0, 0, .35); padding: 0; }
.stone .num { font-family: 'Alegreya', Georgia, serif; font-weight: 800; font-size: calc(var(--u) * 20); }
.stone .st { display: flex; gap: 1px; }
.stone .st svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.stone .lock { font-size: calc(var(--u) * 12); font-weight: 700; color: #5a4a3a; }
.stone .crown { color: #c99a10; margin-left: calc(var(--u) * 3); font-size: calc(var(--u) * 16); }
.stone .bun { position: absolute; right: calc(var(--u) * -4); top: calc(var(--u) * -6); color: #fff; font-size: calc(var(--u) * 16); text-shadow: 0 0 calc(var(--u) * 3) #8a4ad8; }
.stone.next { animation: bob 1.2s ease-in-out infinite alternate; border-color: #ffd23a; box-shadow: 0 0 0 calc(var(--u) * 4) rgba(255, 210, 58, .45), calc(var(--u) * 4) calc(var(--u) * 6) 0 rgba(0, 0, 0, .35); }
.stone.done { background: radial-gradient(circle at 35% 30%, #fff1c8, #c9a24a 80%); }
.stone[disabled] { cursor: default; opacity: .72; filter: saturate(.4); }
.stone:focus-visible { outline: calc(var(--u) * 3) solid #ffd23a; outline-offset: calc(var(--u) * 3); }
@keyframes bob { from { transform: translate(-50%, -50%); } to { transform: translate(-50%, -58%); } }
@media (prefers-reduced-motion: reduce) { .stone.next { animation: none; } }
.stagename { position: absolute; transform: translateX(-50%); font-family: 'Alegreya', Georgia, serif; font-weight: 800; font-size: calc(var(--u) * 17);
  color: #fff8e0; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 3) #000; white-space: nowrap; pointer-events: none; }
.soonnote { position: absolute; right: calc(var(--u) * 16); top: calc(var(--u) * 76); width: calc(var(--u) * 210); color: #2a1a10; font-weight: 600;
  font-size: calc(var(--u) * 14); line-height: 1.35; background: rgba(255, 248, 232, .92); border: calc(var(--u) * 1.5) solid #c9a24a;
  border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 8) calc(var(--u) * 10); }
.chlabel { position: absolute; left: calc(var(--u) * 670); top: calc(var(--u) * 400); transform: translateX(-50%); font-family: 'Alegreya', Georgia, serif;
  font-weight: 800; font-size: calc(var(--u) * 17); color: #fff8e0; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 3) #000; white-space: nowrap; pointer-events: none; }
.mapfoot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 8); background: linear-gradient(rgba(38, 23, 10, .75), rgba(38, 23, 10, .92)); border-top: calc(var(--u) * 1.5) solid #c9a24a; }
.diff { display: flex; align-items: center; gap: calc(var(--u) * 4); font-weight: 700; font-size: calc(var(--u) * 15); }
.diff span { margin-right: calc(var(--u) * 6); color: #c9b48a; }
.seg { font-family: inherit; font-weight: 800; font-size: calc(var(--u) * 16); cursor: pointer; min-height: calc(var(--u) * 40);
  padding: calc(var(--u) * 6) calc(var(--u) * 14); background: rgba(12, 7, 2, .6); color: #f6e8c8; border: calc(var(--u) * 1.5) solid rgba(201, 162, 74, .6); border-radius: calc(var(--u) * 20); }
.seg.on { background: #c9a24a; color: #2a1a08; border-color: #ffd23a; }
.seg:focus-visible { outline: calc(var(--u) * 2) solid #ffd23a; outline-offset: calc(var(--u) * 2); }
/* field guide */
.guide { max-width: calc(var(--u) * 920); padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 12); }
.guide h2 { font-size: calc(var(--u) * 26); margin-bottom: calc(var(--u) * 6); }
.gcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 6); }
.gcard { background: #fff8e8; color: #2a1a10; border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 6); text-align: left; border: calc(var(--u) * 1.5) solid #c9a24a;
  display: grid; grid-template-columns: calc(var(--u) * 84) 1fr; column-gap: calc(var(--u) * 8); align-items: start; }
.gcard img { width: 100%; height: auto; border-radius: calc(var(--u) * 6); display: block; grid-row: span 2; }
.gcard b { display: block; font-family: 'Alegreya', Georgia, serif; font-size: calc(var(--u) * 17); line-height: 1.1; }
.gcard p { font-size: calc(var(--u) * 12.5); line-height: 1.3; margin: calc(var(--u) * 2) 0 0; color: #4a3a2a; }
.guide .btn { margin-top: calc(var(--u) * 4); }
.gcard.unknown { background: #d8c9a4; border-color: #8a7a5a; }
/* end of stage */
.stars { display: flex; justify-content: center; gap: calc(var(--u) * 14); margin: calc(var(--u) * 6) 0 calc(var(--u) * 8); }
.stars svg { width: calc(var(--u) * 54); height: calc(var(--u) * 54); }
#rotate { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: #10180a; z-index: 9;
  font-size: 20px; font-weight: 700; line-height: 1.6; text-align: center; padding: 24px; color: #ffd23a; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }