/* BAD PENNY — cabinet shell.  The game itself is all canvas; this is the
   plywood around it.  Inherits the arcade's CRT/neon look. */
:root { --ink:#07060c; --brass:#d8a657; --bone:#e9dfc7; --dim:#6b5f52; }
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: #05040a; color: var(--bone);
  font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  min-height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  overscroll-behavior: none; touch-action: manipulation;
}
/* ONE padding source (html+body each padding 12px used to double up and,
   with flex min-width:auto, let the canvas push body wider than the phone) */
body { padding: 12px; width: 100%; min-width: 0; }
#cab { position: relative; line-height: 0; max-width: 100%; }
canvas {
  display: block; image-rendering: pixelated; image-rendering: crisp-edges;
  width: min(96vw, calc((100vh - 190px) * 1.481), 960px); height: auto;
  max-width: 100%;   /* 96vw ignores the body's 12px padding on phones */
  background: #000; border: 3px solid #191424; border-radius: 4px;
  box-shadow: 0 0 0 3px #06050b, 0 0 34px rgba(216,166,87,.13);
  outline: none;
}
canvas:focus-visible { box-shadow: 0 0 0 3px var(--brass), 0 0 34px rgba(216,166,87,.3); }
#crt {
  position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: multiply; opacity: .55;
}
#legend, #tag { margin: 0; text-align: center; color: var(--dim); font-size: 11px; }
#legend b { color: var(--brass); font-weight: 600; }
#tag a { color: var(--dim); }
#tag a:hover { color: var(--brass); }



/* ===========================================================================
   TOUCH CONTROLS.  Phones hold the device at the BOTTOM CORNERS, so the pad
   lives there rather than centred under the screen, and every control clears
   Apple's 44pt minimum.  Everything the game can ask for is reachable: move,
   crouch, talk, jump, sword, song, item, and a real CONFIRM — without which
   you cannot buy anything, dismiss a death screen, or start the game.
   ========================================================================= */
#pad { display: none; }
#mantrakeys { position: fixed; opacity: 0; pointer-events: none; left: -9999px; width: 1px; height: 1px; }

@media (pointer: coarse) {
  #legend { display: none; }
  /* the base sheet centres on BOTH html and body; overriding only body left
     the screen floating in the middle with 250px of dead space above it */
  html, body { justify-content: flex-start; }
  body { padding: 6px 6px 0; min-height: 100dvh; }
  canvas { width: 100%; max-width: 100vw; }

  #pad {
    display: block; position: fixed; inset: 0; pointer-events: none; z-index: 5;
    padding: 0 max(10px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom))
             max(10px, env(safe-area-inset-right));
  }
  #pad button {
    pointer-events: auto; position: absolute; touch-action: none; user-select: none;
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none;
    background: rgba(24,18,32,.82); color: var(--bone);
    border: 2px solid #3a2f4a; border-radius: 14px;
    font: 20px/1 ui-monospace, monospace; backdrop-filter: blur(2px);
  }
  #pad button.pressed { background: var(--brass); color: #140f1e; border-color: var(--brass); }

  #title-tools {
    display: none; position: absolute; top: max(12px, env(safe-area-inset-top));
    left: 50%; transform: translateX(-50%); gap: 8px; pointer-events: auto;
  }
  body.bw-title #title-tools { display: flex; }
  #title-tools button {
    position: static; min-width: 104px; height: 44px; padding: 0 12px;
    border-color: var(--brass); color: var(--brass); border-radius: 9px;
    font-size: 12px; font-weight: 700;
  }
  #title-tools button.pressed { color: #140f1e; }

  #status-btn { display: none; }
  body.bw-game #status-btn {
    display: block; left: calc(50% - 128px); bottom: 200px;
    width: 82px; height: 44px; color: var(--brass); border-color: var(--brass);
    border-radius: 9px; font-size: 12px; font-weight: 700;
  }

  /* --- left thumb: a real cross, so diagonals and up+attack are possible --- */
  .dpad { position: absolute; left: max(12px, env(safe-area-inset-left));
          bottom: max(18px, env(safe-area-inset-bottom)); width: 168px; height: 168px; }
  .dhub { position: absolute; left: 56px; bottom: 56px; width: 56px; height: 56px;
          border-radius: 8px; background: rgba(24,18,32,.5); }
  .d { width: 56px; height: 56px; }
  .du { left: 56px; bottom: 112px; }
  .dl { left: 0;    bottom: 56px; }
  .dr { left: 112px; bottom: 56px; }
  .dd { left: 56px; bottom: 0; }

  /* --- right thumb: sword and jump big, the rest small above them --- */
  .acts { position: absolute; right: max(12px, env(safe-area-inset-right));
          bottom: max(18px, env(safe-area-inset-bottom)); width: 168px; height: 178px; }
  .big { width: 74px; height: 74px; font-size: 26px; }
  .atk { right: 78px; bottom: 6px; background: rgba(58,22,22,.82); border-color: #6b2a24; }
  .jmp { right: 0;    bottom: 30px; background: rgba(20,34,44,.82); border-color: #2a4a5c; }
  .mini { width: 46px; height: 42px; font-size: 13px; }
  .minis .mini:nth-child(1) { right: 122px; bottom: 92px; }
  .minis .mini:nth-child(2) { right: 72px;  bottom: 92px; }
  .minis .mini:nth-child(3) { right: 122px; bottom: 138px; }
  .minis .mini:nth-child(4) { right: 72px;  bottom: 138px; }

  /* --- confirm: centred and unmissable, because menus depend on it --- */
  /* CONFIRM sits ABOVE both thumb clusters.  At 375px wide the dpad and the
     action cluster leave no centre gap at thumb height, so a centred OK down
     there lands on top of the sword button. */
  #okbtn { left: 50%; transform: translateX(-50%); bottom: 200px;
           width: 78px; height: 44px; font-size: 14px; font-weight: 700;
           background: rgba(72,54,18,.85); border-color: var(--brass); }
  #okbtn.pressed { transform: translateX(-50%); }
}

/* landscape phones: keep the pad off the picture by shrinking the canvas */
@media (pointer: coarse) and (orientation: landscape) {
  canvas { width: min(100%, calc(100vh - 40px) * 1.481); }
  .dpad, .acts { bottom: max(8px, env(safe-area-inset-bottom)); }
}