* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #171b2b; color: #fff5de; }
body { margin: 0; font: 600 16px/1.45 system-ui, sans-serif; overscroll-behavior: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, [role=button]:focus-visible { outline: 2px solid #f9d886; outline-offset: 4px; }
#frame { position: absolute; width: min(100vw, 160vh); width: min(100vw, 160svh); aspect-ratio: 8/5; inset: 0; margin: auto; overflow: hidden; background: #303749; }
#stage { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#stage [role=button] { cursor: pointer; outline: none; }
.hit { fill: transparent; }
#hud { position: absolute; left: 3%; right: 3%; top: 3%; display: flex; align-items: start; justify-content: space-between; pointer-events: none; }
#location { font-size: clamp(10px, 1.2vw, 15px); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 5px #000; }
#inventory { display: flex; gap: 5px; pointer-events: auto; }
#inventory button { width: clamp(30px, 4.7vw, 56px); height: clamp(30px, 4.7vw, 56px); border: 1px solid #fff3; border-radius: 3px; background: #191b2bbc; padding: 4px; }
#inventory button:hover { background: #454359; border-color: #ffe3a0; }
#inventory svg { width: 100%; height: 100%; }
#bubble { position: absolute; z-index: 3; max-width: min(440px, 88%); padding: .8em 1em; background: #fff5de; color: #282737; border-radius: 5px; box-shadow: 0 4px 0 #151a2933; font-size: clamp(12px, 1.65vw, 21px); font-weight: 550; }
#bubble:after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -10px; border: 6px solid transparent; border-top: 6px solid #fff5de; }
#speaker { display: block; font-size: .64em; text-transform: uppercase; letter-spacing: .14em; margin-bottom: .4em; color: #806343; font-weight: 800; }
#next { display: block; margin-top: .5em; text-align: right; font-size: .58em; letter-spacing: .1em; opacity: .65; }
#choices { display: grid; gap: .2em; }
#choices button { border: 0; padding: .35em 0; background: none; text-align: left; color: #32324a; }
#choices button:hover { color: #9a4d42; text-decoration: underline; }
#footer { position: absolute; bottom: 0; width: 100%; min-height: 7%; padding: .7% 3%; background: #161a2acc; display: flex; align-items: center; gap: 1em; }
#info { flex: 1; font-size: clamp(10px, 1.3vw, 17px); }
#footer button { background: none; border: 0; padding: 3px; font-size: clamp(10px, 1.1vw, 14px); opacity: .8; }
#cover, #menu { position: absolute; inset: 0; z-index: 4; padding: 8% 7%; background: linear-gradient(90deg, #191c2bc9, #191c2b00 85%); }
.eyebrow { font-size: clamp(9px, 1.2vw, 15px); letter-spacing: .23em; text-transform: uppercase; color: #eac992; }
h1 { font: 500 clamp(32px, 7.3vw, 100px)/.96 Georgia, serif; letter-spacing: -.045em; margin: 5% 0 3%; }
#cover p { max-width: 27em; width: 52%; font-size: clamp(10px, 1.5vw, 20px); font-weight: 400; color: #e7ddd1; }
.primary { display: inline-block; background: #f1d398; color: #282737; border: 0; border-radius: 2px; padding: .65em 1.2em; margin: 1em .5em 0 0; font-size: clamp(11px, 1.5vw, 19px); }
.secondary { background: #202538dd; border: 1px solid #d6bd8870; color: #f9e8cb; }
#cover .footnote { position: absolute; bottom: 5%; font-size: clamp(9px, 1.1vw, 14px); letter-spacing: .06em; opacity: .65; }
#menu { background: #191c2bee; text-align: center; padding: 10% 8%; font-size: clamp(12px, 1.6vw, 20px); overflow: auto; }
#menu h2 { font: 500 2.4em Georgia, serif; margin: 0 0 .6em; }
#menu p { max-width: 35em; margin: 1em auto; }
[hidden] { display: none !important; }
.drift { animation: drift 10s linear infinite alternate; }
.turn { transform-box: fill-box; transform-origin: center; animation: turn 14s linear infinite; }
.flow { animation: flow 1.8s linear infinite; }
.rain { animation: rain 2.8s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes drift { to { transform: translateX(12px); } }
@keyframes flow { to { stroke-dashoffset: -12; } }
@keyframes rain { to { transform: translate(-8px, 24px); } }
@media (prefers-reduced-motion: reduce) { *, *:after { animation: none !important; } }
@media (max-aspect-ratio: 4/5) {
	#frame { width: 100vw; overflow: visible; }
	#bubble { font-size: 15px; max-width: 94%; }
	#inventory button { width: 35px; height: 35px; }
	#footer { min-height: 35px; transform: translateY(100%); }
	#menu { inset: -20vh 0; padding-top: 20%; }
}

#cover {background:linear-gradient(90deg,#161c29f5 0%,#161c29e0 38%,#161c2930 100%),url("kingdom.webp") center/cover}#cover h1{font-size:clamp(32px,8vw,104px)}#cover p{margin-top:5%}#frame{border:1px solid #b9a07544;box-shadow:0 15px 90px #0008}#map-panel{position:absolute;inset:0;z-index:6;background:#f0e2c5;color:#303b3b;padding:2% 3%;overflow:auto;user-select:text}.map-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.map-heading small{font-size:clamp(8px,.9vw,12px);letter-spacing:.2em}.map-heading h2{font:500 clamp(18px,2.5vw,34px) Georgia;margin:.2em 0 .5em}.map-heading button{background:#293f42;color:#fff3d8;border:0;border-radius:4px;padding:10px;font-size:clamp(11px,1.1vw,15px)}#map-art{position:relative;height:66%;min-height:150px;border-radius:6px;overflow:hidden}#map-art img{width:100%;height:100%;object-fit:fill;display:block}#map-stops{position:absolute;inset:0}#map-stops button{position:absolute;transform:translate(-50%,-50%);padding:7px 10px;border:1px solid #dac195;border-radius:20px;background:#243c3ce8;color:#fff2d2;font-size:clamp(10px,1.15vw,15px);box-shadow:0 2px 8px #0004}#map-stops button:disabled{background:#e9d7bacc;color:#675f50;cursor:default}#map-stops button[aria-current=true]{outline:2px solid #fff3b0;outline-offset:2px}#map-objective{font-size:clamp(12px,1.4vw,18px);margin:.6em 0}.map-note{font-size:clamp(10px,1vw,13px);opacity:.8;margin:.2em 0}#footer button{min-height:30px;padding:4px 9px}#stage [role=button]:focus-visible .hit{stroke:#f9d886;stroke-width:.4} @media(max-aspect-ratio:4/5){#frame{top:0;bottom:auto;margin-top:12vh}#cover{padding:6%}#cover h1{margin:4% 0}#cover .footnote{bottom:3%}#map-panel{position:fixed;inset:5vh 0;max-height:90vh;padding:16px 12px}#map-art{height:65%;min-height:240px}#map-stops button{font-size:11px;padding:9px}#map-objective{font-size:14px}.map-heading h2{font-size:23px}#cover p{font-size:11px;width:65%}.primary{margin-top:.4em}}