:root {
  --ink: #17150e;
  --panel: #302c1b;
  --paper: #f1df9a;
  --grass: #697635;
  --line: #ecda91;
  --red: #b44331;
  --yellow: #d7ad35;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--paper); font-family: STKaiti, KaiTi, serif; }
button { font: inherit; color: var(--paper); background: #39331d; border: 2px solid var(--line); box-shadow: 3px 3px 0 #090804; touch-action: none; user-select: none; }
button:focus-visible { outline: 2px solid #fff0aa; outline-offset: 2px; }
button:active, button.active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #090804; }
button:disabled { opacity: .48; }

.app { width: min(100%, 1240px); margin: auto; padding: 10px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 12px; background: var(--panel); border: 2px solid #74662d; }
.brand strong { display: block; font-size: 21px; }
.brand small { display: block; color: #bfb078; font-size: 12px; }
.top-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.top-actions button { min-height: 32px; padding: 4px 8px; font-size: 11px; }
#audio { border-color: #8b927b; }

.stage { position: relative; margin-top: 8px; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--line); background: var(--grass); }
canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; touch-action: none; }
.hud { position: absolute; z-index: 3; inset: 10px 12px auto; display: grid; grid-template-columns: 1fr 100px 1fr; gap: 12px; pointer-events: none; }
.life, .middle { padding: 6px 8px; background: #1e1b10e6; border: 2px solid #d8c26f; box-shadow: 3px 3px #080704; }
.life span { display: block; font-size: 11px; }
.life small { display: block; margin-top: 3px; color: #c8bd85; font-size: 9px; }
.foe { text-align: right; }
.life i { display: block; height: 12px; margin-top: 4px; border: 1px solid #f2e09b; background: #15130b; }
.life b { display: block; width: 100%; height: 100%; background: #d65239; transition: width .12s; }
.foe b { margin-left: auto; background: #9a8e62; }
.middle { text-align: center; }
.middle strong { display: block; font: 900 25px/1 monospace; }
.middle span { font-size: 10px; }
.notice { position: absolute; z-index: 4; left: 50%; top: 79px; transform: translateX(-50%); min-width: 210px; max-width: 58%; padding: 5px 10px; text-align: center; background: #1e1b10e6; border: 1px solid #d8c26f; font-size: 12px; pointer-events: none; }

.cover { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; background: #17150ebf; }
.cover.hide { display: none; }
.cover-card { width: min(520px, 82%); padding: 19px 20px; text-align: center; background: #302c1b; border: 3px solid var(--line); box-shadow: 7px 7px #080704; }
.cover-kicker { color: #cbbb7c; font-size: 11px; letter-spacing: .08em; }
.cover h1 { margin: 5px 0 0; font-size: 30px; transform: rotate(-.5deg); }
.cover p { margin: 9px auto; max-width: 430px; line-height: 1.5; font-size: 13px; }
.howto { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 12px 0 15px; }
.howto span { min-height: 42px; display: grid; place-content: center; padding: 4px; border: 1px solid #75672d; color: #d7ca8c; font-size: 9px; line-height: 1.2; }
.howto b { display: block; color: #fff0aa; font-size: 12px; }
.cover-actions { display: flex; justify-content: center; gap: 8px; }
.cover button { min-height: 42px; padding: 8px 18px; font-size: 17px; }
.cover button.quiet { font-size: 12px; color: #d1c58c; border-color: #75672d; }

.controls { position: absolute; z-index: 5; inset: auto 0 0; height: 42%; pointer-events: none; }
.joystick, .actions { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); pointer-events: auto; }
.joystick { left: max(15px, env(safe-area-inset-left)); width: 142px; height: 142px; border: 2px solid #cbbb7c; border-radius: 50%; background: #252415d9; box-shadow: 4px 4px #080704, inset 0 0 0 9px #a6a55d24; touch-action: none; user-select: none; }
.joystick-ring { position: absolute; inset: 21px; border: 1px dashed #aaa05f; border-radius: 50%; }
.joystick-knob { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; border: 2px solid #ead88e; border-radius: 50%; background: #4a4529; box-shadow: 3px 3px #080704; transform: translate(-50%, -50%); }
.joystick small { position: absolute; right: 0; bottom: 14px; left: 0; color: #d7ca8c; text-align: center; font-size: 10px; pointer-events: none; }
.actions { right: max(15px, env(safe-area-inset-right)); width: 286px; height: 158px; }
.actions button { position: absolute; display: grid; place-content: center; width: 66px; height: 66px; border-radius: 50%; }
.actions button b { font: 900 18px/1 STKaiti, KaiTi, serif; }
.actions button small { display: block; margin-top: 3px; color: #d1c58c; font-size: 8px; }
.attack { top: 43px; right: 5px; width: 90px !important; height: 90px !important; border-width: 3px !important; border-color: #eb7a5f !important; background: #5a2e25 !important; }
.attack b { font-size: 27px !important; }
.jump { top: 0; right: 87px; }
.guard { bottom: 0; right: 154px; border-color: var(--yellow) !important; }
.resolve { top: 0; left: 0; border-style: dashed; border-color: #aeb27d !important; }
.resolve small { color: #dce1b0 !important; }

.legend { display: grid; gap: 3px; margin-top: 8px; padding: 8px 10px; background: var(--panel); border: 1px solid #74662d; color: #d4c98f; font-size: 12px; }
.legend p { margin: 0; }
.legend b { color: #fff0aa; }
.rotate { display: none; }

@media (max-height: 650px) and (orientation: landscape) {
  .app { padding: 4px; }
  .stage { width: 100%; height: calc(100vh - 48px); max-height: none; aspect-ratio: auto; }
  .legend { display: none; }
  header { padding: 4px 8px; }
  .brand small { display: none; }
  .hud { inset: 6px 7px auto; }
  .notice { top: 61px; }
  .joystick { transform: scale(.82); transform-origin: bottom left; }
  .actions { transform: scale(.82); transform-origin: bottom right; }
}

@media (max-width: 820px) and (orientation: landscape) {
  .brand strong { font-size: 15px; }
  .top-actions button { min-height: 28px; padding: 3px 5px; font-size: 9px; }
  .hud { grid-template-columns: 1fr 76px 1fr; gap: 5px; }
  .life span { font-size: 9px; }
  .life small { font-size: 8px; }
  .cover-card { width: min(520px, 86%); padding: 11px 14px; }
  .cover h1 { font-size: 23px; }
  .cover p { margin: 5px auto; font-size: 10px; }
  .howto { margin: 7px 0 9px; }
  .howto span { min-height: 31px; font-size: 7px; }
  .howto b { font-size: 9px; }
  .cover button { min-height: 34px; padding: 5px 12px; font-size: 13px; }
}

@media (orientation: portrait) and (max-width: 800px) {
  .rotate { position: fixed; z-index: 99; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center; background: var(--ink); }
  .rotate b { font-size: 25px; }
  .rotate span { color: #cbbb7c; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }