html,body,#game{width:100%;height:100%;margin:0;overflow:hidden;background:#182028;color:#f5f2e9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{font:inherit}canvas{display:block;width:100%;height:100%}.ui-layer{--health: 100%;--stamina: 84%;position:fixed;inset:0;pointer-events:none}.hud{position:fixed;top:16px;left:16px;width:min(220px,calc(100vw - 32px));display:grid;gap:7px;padding:12px;border:1px solid rgb(245 242 233 / 18%);border-radius:8px;background:#141b23c2;box-shadow:0 16px 40px #0000003d;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.hud__row,.quest-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;color:#f5f2e9b8;font-size:12px;line-height:1.2}.hud strong,.quest-panel strong{color:#fff9dc;font-size:14px}.meter{height:7px;overflow:hidden;border-radius:999px;background:#ffffff1a}.meter span{display:block;width:var(--health);height:100%;border-radius:inherit;background:linear-gradient(90deg,#bf4752,#ecb65b)}.meter--stamina span{width:var(--stamina);background:linear-gradient(90deg,#4e9f70,#c6d86f)}.quest-panel{position:fixed;top:16px;right:16px;width:min(260px,calc(100vw - 32px));align-items:flex-start;flex-direction:column;padding:12px;border:1px solid rgb(245 242 233 / 16%);border-radius:8px;background:#141b23ad;box-shadow:0 16px 40px #0003;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.quest-panel__label{color:#e6c06a;font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}.action-bar{position:fixed;left:50%;bottom:18px;display:grid;grid-template-columns:repeat(3,54px);gap:9px;transform:translate(-50%);pointer-events:auto}.action-bar button{position:relative;width:54px;height:54px;border:1px solid rgb(255 249 220 / 20%);border-radius:8px;background:radial-gradient(circle at 50% 38%,rgb(243 211 123 / 32%),transparent 34%),linear-gradient(145deg,#242d38eb,#141b23eb);box-shadow:inset 0 1px #ffffff1f,0 14px 28px #0000003d;color:#fff9dc}.action-bar button span{position:absolute;top:5px;left:7px;color:#f5f2e9b3;font-size:11px;font-weight:700}.action-bar button strong{position:absolute;inset:17px;border-radius:50%;background:#e6c06a;box-shadow:0 0 18px #e6c06a7a}.action-bar button:nth-child(2) strong{border-radius:4px;background:#74a9d8;box-shadow:0 0 18px #74a9d87a}.action-bar button:nth-child(3) strong{background:#8bbf78;box-shadow:0 0 18px #8bbf787a}.pause-shade{position:fixed;inset:0;display:grid;place-items:center;background:#0a0d1161;color:#fff9dc;font-size:22px;font-weight:800;pointer-events:none}.pause-shade[hidden]{display:none}@media(max-width:680px){.hud{top:10px;left:10px;width:150px;padding:10px}.quest-panel{top:10px;right:10px;width:154px;padding:10px}.quest-panel strong{font-size:13px}.action-bar{bottom:12px;grid-template-columns:repeat(3,48px);gap:7px}.action-bar button{width:48px;height:48px}}