@font-face {
  font-family: Fondamento;
  src: url('data/fonts/Fondamento-Regular.ttf');
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  height: 100dvh;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  min-width: calc(100vw - (100vw - 100%));
  overflow: hidden;
  background-color: #1a1a1a;
}

#main {
  position: absolute;
  z-index: 1;
  background: url('data/art/scenes/title_bg.png') center / cover;
  height: 100%;
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#main[hidden] { display: none; }

canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
}

#status {
  max-width: min(90vw, 36em);
  padding: 0.8em 1.2em;
  color: #fff3d6;
  background: #241a13e8;
  text-align: center;
  font: 1.1em sans-serif;
}

.button-3d {
  display: block;
  position: relative;
  margin: 0.5em 0;
  padding: 0.8em 2.2em;
  cursor: pointer;
  background: url('data/art/ui/button.png') center / 100% 100%;
  color: #302014;
  border: none;
  border-radius: 0.4em;
  font-size: 1.4em;
  font-family: Fondamento, serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (hover: hover) {
  .button-3d:hover, .touch-button:hover { filter: brightness(1.1); }
}

.button-3d:disabled { cursor: wait; opacity: 0.7; }
.button-3d:focus-visible { outline: 3px solid #fff3d6; }


/* The browser controls reuse Hondel's authored parchment button art. */
:root { --hondel-ink: #302014; --hondel-cream: #fff3d6; --hondel-focus: #ffe17b; }
#touch-controls { position: fixed; inset: 0; pointer-events: none; }
#touch-controls[hidden] { display: none; }
.touch-button {
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  min-width: 48px;
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  background: url('data/art/ui/button.png') center / 100% 100%;
  color: var(--hondel-ink);
  font: bold 16px Fondamento, serif;
  cursor: pointer;
}
.touch-button:focus-visible, canvas:focus-visible { outline: 3px solid var(--hondel-focus); outline-offset: -3px; }
.touch-button:active, .touch-button.held, .button-3d:active { filter: brightness(0.8); transform: translateY(1px); }
.touch-button:disabled { opacity: 0.6; cursor: default; }
.touch-tools { position: absolute; top: max(4px, env(safe-area-inset-top)); right: max(4px, env(safe-area-inset-right)); display: flex; gap: 4px; }
.touch-pad { position: absolute; bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: 2px; }
.touch-up { grid-column: 2; }
.touch-left { grid-column: 1; grid-row: 2; }
.touch-down { grid-column: 2; grid-row: 2; }
.touch-right { grid-column: 3; grid-row: 2; }
.touch-actions { position: absolute; bottom: max(8px, env(safe-area-inset-bottom)); right: max(8px, env(safe-area-inset-right)); display: grid; grid-template-columns: repeat(2, minmax(64px, auto)); gap: 4px; }
.touch-hint { position: absolute; top: 52px; width: 100%; text-align: center; color: var(--hondel-cream); font: 16px sans-serif; padding: 4px; pointer-events: none; }
@media (orientation: landscape) { .touch-hint { display: none; } }
@media (orientation: portrait) {
  .touch-hint { top: auto; bottom: 110px; }
  .touch-actions { grid-template-columns: repeat(2, 72px); }
  .touch-button { font-size: 14px; padding: 6px; }
}

/* Reserve actual canvas space: controls never cover a market row or a choice. */
.touch-game canvas { height: calc(100% - 164px) !important; margin-top: 56px; }
.touch-button { white-space: nowrap; }

.touch-game .touch-hint { display: none; }