/* all UI: square corners, no emoji, no external resources */
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  overflow: hidden; position: fixed; inset: 0;
  overscroll-behavior: none; background: #1d2330; color: #eef1f6;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; image-rendering: pixelated; image-rendering: crisp-edges; }

#title, #place, #hint {
  position: fixed; background: rgba(24, 30, 44, .88); border: 2px solid #eef1f6; color: #eef1f6;
  padding: 4px 10px; font-size: 14px; line-height: 1.3; pointer-events: none; letter-spacing: .04em;
}
#title { top: calc(8px + env(safe-area-inset-top)); left: 8px; font-weight: 700; font-size: 15px; }
#place { top: calc(48px + env(safe-area-inset-top)); right: 8px; font-size: 12px; max-width: calc(100vw - 16px); }
#place1 { font-size: 14px; font-weight: 700; line-height: 1.35; }
#place2 { font-size: 11px; line-height: 1.3; color: #c9d0dd; }
#place2[hidden] { display: none; }
.sw { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 1px solid #fff; vertical-align: baseline; flex: none; }
#mapbtn {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 8px; z-index: 30; margin: 0; min-width: 64px; height: 34px; padding: 0 12px;
  border: 2px solid #eef1f6; background: rgba(24, 30, 44, .88); color: #eef1f6; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .04em;
  -webkit-appearance: none; appearance: none; outline: none; touch-action: manipulation; cursor: pointer;
}
#mapbtn[aria-pressed=true] { background: #e8c640; color: #1d2330; }
#mini { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; background: rgba(16, 20, 30, .92); padding: 50px 10px 40px; }
#minipanel { width: 100%; max-width: 420px; overflow-y: auto; background: rgba(24, 30, 44, .96); border: 2px solid #eef1f6; padding: 6px; font-size: 12px; -webkit-overflow-scrolling: touch; }
#minicats { display: flex; flex-wrap: wrap; gap: 4px; }
.chip, .item { margin: 0; font: inherit; font-size: 12px; color: #eef1f6; background: transparent; border: 1px solid #8a93a6; padding: 3px 7px; line-height: 1.3; -webkit-appearance: none; appearance: none; outline: none; touch-action: manipulation; cursor: pointer; }
.chip { display: inline-flex; align-items: center; font-weight: 700; border: 2px solid #eef1f6; }
.chip.on, .item.on { background: #e8c640; color: #1d2330; border-color: #e8c640; }
#minisel { margin-top: 6px; padding: 3px 6px; background: #d4322a; color: #fff; font-weight: 700; }
#minisel[hidden] { display: none; }
#minilist { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
#minilist.hintline { display: block; color: #c9d0dd; font-size: 11px; line-height: 1.5; }
@media (min-aspect-ratio: 11/10) { #mini { flex-direction: row; } #minipanel { width: 280px; flex: none; } }
#mini[hidden] { display: none; }
#minicv { display: block; border: 2px solid #eef1f6; image-rendering: pixelated; image-rendering: crisp-edges; background: #1d2330; }
#place[hidden] { display: none; }
#hint { top: calc(46px + env(safe-area-inset-top)); left: 8px; font-size: 11px; transition: opacity .6s; }
#hint.gone { opacity: 0; }

#attr {
  position: fixed; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px; line-height: 1;
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); background: rgba(24, 30, 44, .85); color: #c9d0dd;
}
#attr a { color: #c9d0dd; text-decoration: underline; }

#dpad {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(26px + env(safe-area-inset-bottom));
  display: none; grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(3, 62px); gap: 3px;
  touch-action: none;
}
#dpad button {
  width: 62px; height: 62px; margin: 0; padding: 0; border: 2px solid #eef1f6; background: rgba(24, 30, 44, .78); color: #eef1f6;
  touch-action: none; display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; outline: none;
}
#dpad button.on { background: #e8c640; }
#dpad button i { display: block; width: 0; height: 0; border: 11px solid transparent; }
#dpad button[data-dir=up]    { grid-column: 2; grid-row: 1; } #dpad button[data-dir=up] i    { border-bottom: 16px solid #eef1f6; border-top-width: 0; }
#dpad button[data-dir=left]  { grid-column: 1; grid-row: 2; } #dpad button[data-dir=left] i  { border-right: 16px solid #eef1f6; border-left-width: 0; }
#dpad button[data-dir=right] { grid-column: 3; grid-row: 2; } #dpad button[data-dir=right] i { border-left: 16px solid #eef1f6; border-right-width: 0; }
#dpad button[data-dir=down]  { grid-column: 2; grid-row: 3; } #dpad button[data-dir=down] i  { border-top: 16px solid #eef1f6; border-bottom-width: 0; }
#dpad button.on i { filter: invert(1); }
#dpad .mid { grid-column: 2; grid-row: 2; background: rgba(24, 30, 44, .5); border: 2px solid rgba(238, 241, 246, .4); }

@media (pointer: coarse), (max-width: 700px) { #dpad { display: grid; } }
body.dpad-on #dpad { display: grid; }