/* 土佐うまいもん市場探検: スマホ縦画面を基準にしたUI */

:root {
  color: #fff9ea;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  background: #1b2e36;
}

* { box-sizing: border-box; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; }
.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

.start-screen {
  display: grid;
  align-items: end;
  justify-items: center;
  min-height: 100dvh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 29, 34, 0.04) 20%, rgba(8, 24, 29, 0.93) 78%),
    url("../images/title-market.png") center top / cover no-repeat,
    #315458;
}

.start-content {
  width: min(92vw, 420px);
  padding: 24px 6px calc(24px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.eyebrow { margin: 0 0 7px; color: #ffe08a; font-size: 14px; font-weight: 700; letter-spacing: 0; }
h1 { margin: 0; color: #fff7d9; font-size: 38px; line-height: 1.25; letter-spacing: 0; text-shadow: 0 3px 14px #10201f; }
.start-lead { margin: 15px 0 24px; font-size: 15px; line-height: 1.75; text-shadow: 0 2px 4px #10201f; }
.start-note { margin: 13px auto 0; max-width: 300px; color: #c1d4cb; font-size: 11px; line-height: 1.5; }

.button {
  display: block;
  width: min(82vw, 310px);
  min-height: 50px;
  margin: 0 auto 11px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
}
.button.primary { color: #422313; background: #f2bd48; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.28); }
.button.subtle { color: #fff9ea; background: rgba(17, 47, 49, 0.86); border-color: rgba(255, 255, 255, 0.42); }
.button:active, .choice:active, .discover-button:active { transform: translateY(2px); }

#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  color: #fff9e8;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 2px 4px #142020;
}
.hud-top p { margin: 0; }
#hud-score { color: #ffe184; }
#hud-target {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 43px);
  left: 50%;
  width: max-content;
  max-width: calc(100% - 28px);
  transform: translateX(-50%);
  padding: 7px 11px;
  color: #f7fff4;
  background: rgba(12, 42, 43, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.29);
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
}
#minimap {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 83px);
  right: 11px;
  width: 150px;
  height: auto;
  background: rgba(247, 239, 210, 0.83);
  border: 2px solid rgba(87, 57, 39, 0.75);
  border-radius: 5px;
}
.discover-button {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  min-width: 172px;
  min-height: 62px;
  padding: 15px 20px;
  pointer-events: auto;
  touch-action: manipulation;
  border: 2px solid #fff0bb;
  border-radius: 8px;
  color: #3b2412;
  background: #ffcf57;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.52);
  font-size: 19px;
  font-weight: 800;
}
#stick-zone { position: absolute; inset: 0; pointer-events: none; }
#stick-base {
  display: block;
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 18px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  width: 104px;
  height: 104px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: 50%;
  background: rgba(5, 33, 38, 0.3);
}
#stick-knob { position: absolute; left: 33px; top: 33px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 230, 143, 0.9); }

@media (hover: hover) and (pointer: fine) {
  #stick-base { display: none; }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 17px;
  background: rgba(4, 20, 23, 0.56);
}
.modal-panel {
  width: min(94vw, 470px);
  max-height: min(82dvh, 680px);
  overflow: auto;
  padding: 21px;
  color: #26302b;
  background: #fff9ea;
  border: 4px solid #d99b3d;
  border-radius: 8px;
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.4);
}
.modal-kicker { margin: 0 0 7px; color: #a55725; font-size: 13px; font-weight: 800; }
.modal-panel h2 { margin: 0 0 13px; color: #273f39; font-size: 25px; line-height: 1.35; }
.modal-panel p { margin: 0 0 15px; font-size: 15px; line-height: 1.75; }
.modal-panel .source { color: #597068; font-size: 11px; line-height: 1.5; }
#modal-actions { display: grid; gap: 9px; margin-top: 14px; }
.choice {
  min-height: 45px;
  padding: 10px 13px;
  border: 1px solid #a36e38;
  border-radius: 6px;
  color: #2b3b35;
  background: #fffdf7;
  cursor: pointer;
  font-weight: 700;
  text-align: left;
}
.choice.correct { color: #174326; background: #dff2c5; border-color: #4d9b54; }
.choice.wrong { color: #702923; background: #f7d3cb; border-color: #c65b4e; }
.modal-close { color: #fff9ea; background: #356f65; border: none; border-radius: 6px; text-align: center; }

@media (min-width: 720px) {
  .start-content { padding-bottom: 34px; }
  h1 { font-size: 43px; }
  #minimap { width: 180px; }
}