:root {
  color-scheme: dark;
  --night: #101820;
  --night-2: #182730;
  --wood-1: #281a14;
  --wood-2: #4a2e20;
  --wood-3: #71462b;
  --wood-4: #9a673b;
  --paper: #f2dfab;
  --paper-2: #d8bc7f;
  --paper-3: #b78d55;
  --ink: #2a1c15;
  --brass-1: #fff0a0;
  --brass-2: #d7a841;
  --brass-3: #815421;
  --red: #9b4034;
  --green: #557b54;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* iOS Safari の拡大を止める。2回タップの拡大は touch-action、
     文字サイズの自動調整は text-size-adjust、URLバーのはみ出しは position:fixed で押さえる。 */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 50% 10%, #31414a 0 1px, transparent 2px) 0 0 / 12px 12px,
    linear-gradient(145deg, var(--night-2), var(--night));
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

button,
a { font: inherit; }

button {
  border: 0;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.app {
  width: min(100%, 414px);
  height: 100svh;
  max-height: 896px;
  margin: auto;
  padding: env(safe-area-inset-top) 8px calc(7px + env(safe-area-inset-bottom));
  overflow: hidden;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  gap: 6px;
  background:
    linear-gradient(90deg, #ffffff08 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(var(--night-2), var(--night));
  border-inline: 3px solid var(--wood-1);
  box-shadow: inset 3px 0 var(--wood-3), inset -3px 0 var(--wood-3);
}

.topbar {
  position: relative;
  z-index: 7;
  height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 4px;
  color: var(--paper);
  background:
    linear-gradient(90deg, #ffffff08 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(var(--wood-4), var(--wood-2));
  border: 2px solid var(--wood-1);
  box-shadow: inset 0 0 0 2px var(--wood-3), 0 3px var(--brass-3);
}

.icon-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--brass-2);
  border-radius: 2px;
  background: linear-gradient(var(--wood-3), var(--wood-1));
  box-shadow: inset 0 0 0 2px var(--wood-2), 2px 2px #180d09;
  color: var(--brass-1);
}

.icon-button img {
  display: block;
  width: 32px;
  height: 32px;
  margin: auto;
  image-rendering: pixelated;
  filter: drop-shadow(1px 2px #130a07);
}

/* 元PNGの透明余白を光学中心へ補正する。44pxボタンで実ピクセルの中心差を1px以内に保つ。 */
#settingsButton img { transform: translate(-2px, -2px); }
#inventoryButton img { transform: translate(0, 0); }
#moreButton img { transform: translate(0, -2px); }

.icon-button:active { transform: translateY(2px); }

.quick-tools { display: grid; grid-template-columns: repeat(3, 44px); gap: 3px; }

.game-shell {
  position: relative;
  width: min(calc(100vw - 24px), 390px);
  height: auto;
  max-height: 100%;
  min-height: 0;
  justify-self: center;
  /* 縦画面では HUD の直下へ寄せ、世界を先に見せる。 */
  align-self: start;
  aspect-ratio: 208 / 400;
  overflow: hidden;
  background: #252a35;
  border: 5px solid var(--wood-1);
  border-radius: 3px;
  outline: 2px solid var(--brass-3);
  outline-offset: -4px;
  box-shadow: 0 5px 0 #080b0eaa, 0 9px 18px #0008;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

.hud {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(84px, .78fr) minmax(102px, 1.22fr);
  gap: 4px;
  pointer-events: none;
}

.day-clock,
.gold-panel {
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 2px solid var(--brass-2);
  background: linear-gradient(#40291e, #20140f);
  box-shadow: inset 0 0 0 2px var(--wood-3), 1px 2px #140b08;
}

.day-clock { padding: 4px 5px; gap: 5px; }

.sky-orb {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 2px solid #342016;
  border-radius: 50%;
  background: linear-gradient(135deg, #82c9df, #38607f 55%, #101d38);
  box-shadow: inset 0 0 0 2px #d9bd6b, 0 0 5px #ffd86d66;
}

/* 針は時刻を文字で説明せず、朝→昼→夕→夜の軌道位置を示す。 */
.sky-orb::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 5px;
  width: 2px;
  height: 12px;
  transform-origin: 1px 12px;
  transform: rotate(calc(var(--day-progress, 0) * 360deg));
  background: #fff5a5;
  box-shadow: 0 0 2px #20150d;
}

.sun,
.moon { position: absolute; width: 12px; height: 12px; border-radius: 50%; transition: opacity .2s steps(2), transform .2s steps(2); }
.sun { top: 4px; left: 5px; background: #ffe26f; box-shadow: 0 0 5px #ffdc58; }
.moon { right: 4px; bottom: 4px; background: #e9efff; box-shadow: inset 4px 0 #8294bd; }
.hud[data-phase="morning"] .sky-orb { background: linear-gradient(135deg, #f4c278, #72bad3 58%, #355778); }
.hud[data-phase="morning"] .moon { opacity: .08; }
.hud[data-phase="noon"] .sky-orb { background: linear-gradient(135deg, #8ed7ec, #4183ad 70%, #24486b); }
.hud[data-phase="noon"] .sun { transform: translate(7px, -1px); }
.hud[data-phase="noon"] .moon { opacity: 0; }
.hud[data-phase="evening"] .sky-orb { background: linear-gradient(135deg, #e68c55, #754f72 58%, #172742); }
.hud[data-phase="evening"] .sun { transform: translate(-2px, 13px); background: #ffb552; }
.hud[data-phase="evening"] .moon { opacity: .35; }
.hud[data-phase="night"] .sky-orb { background: linear-gradient(135deg, #203d67, #0d1937 68%, #060d22); }
.hud[data-phase="night"] .sun { opacity: 0; }
.hud[data-phase="night"] .moon { opacity: 1; transform: translate(-4px, -7px); }

.clock-copy,
.gold-panel > span:last-child { min-width: 0; display: block; }
.clock-copy strong,
.gold-panel small,
.gold-panel strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clock-copy strong { color: var(--brass-1); font-size: 13px; line-height: 1.2; text-shadow: 1px 1px #000; }

.gold-panel { padding: 3px 6px 3px 4px; gap: 4px; background: linear-gradient(#624121, #27170e); }
.coin-pouch {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #4e2d15;
  border: 3px solid #7b491f;
  border-radius: 45% 45% 50% 50%;
  background: radial-gradient(circle at 38% 35%, #fff19b 0 10%, #e1a931 12% 52%, #8c551f 55%);
  box-shadow: 0 -3px #b87b31, 2px 2px #170b07;
  font-size: 8px;
}
.gold-panel small { color: #d9b75c; font: 900 9px/1 Georgia, serif; letter-spacing: .12em; }
.gold-panel strong { color: #fff09a; font: 900 clamp(17px, 5vw, 22px)/1 Georgia, "Yu Mincho", serif; text-shadow: 1px 2px #3a210e, 0 0 5px #e8b33b; transform-origin: center; }

#goldValue.gold-gain { animation: goldGain .48s steps(4, end); }
#goldValue.gold-loss { animation: goldLoss .42s steps(3, end); }
.hud.settlement-ready .sky-orb { animation: settlementClock .9s steps(3, end) 2; }
@keyframes settlementClock { 50% { box-shadow: inset 0 0 0 2px #fff2a0, 0 0 9px 3px #f2bd45; } }
@keyframes goldGain { 0% { transform: scale(1); } 40% { transform: translateY(-4px) scale(1.2); color: #fffbd0; filter: drop-shadow(0 0 7px #ffd44d); } 100% { transform: scale(1); } }
@keyframes goldLoss { 0% { transform: translateY(0); color: #fff09a; } 45% { transform: translateY(4px) scale(.92); color: #ff796d; } 100% { transform: translateY(0); } }

.screen-panel {
  position: absolute;
  z-index: 5;
  inset: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
  text-align: center;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 20%, #916c3822 0 1px, transparent 2px) 0 0 / 13px 11px,
    linear-gradient(135deg, var(--paper), #e6cc91);
  border: 3px solid var(--wood-2);
  border-radius: 2px;
  outline: 2px solid var(--brass-2);
  outline-offset: -5px;
  box-shadow: 0 0 0 500px #101820ee, inset 0 0 18px #8c5d2875;
}

.start-screen {
  background:
    linear-gradient(90deg, transparent 49%, #9f773d20 50% 51%, transparent 52%) 0 0 / 24px 24px,
    radial-gradient(circle at 50% 31%, #fff6c9 0 4%, transparent 34%),
    linear-gradient(135deg, var(--paper), #e3c480);
}

.screen-panel h1 {
  max-width: 100%;
  margin: 3px 0 7px;
  color: #4b2b1d;
  font: 900 28px/1.18 Georgia, "Yu Mincho", serif;
  letter-spacing: .03em;
  text-shadow: 2px 2px #fff2b8, 3px 3px var(--paper-3);
  text-wrap: balance;
}

.screen-panel h2 {
  margin: 4px 0 9px;
  color: #4b2b1d;
  font: 900 21px/1.25 Georgia, "Yu Mincho", serif;
  text-shadow: 1px 1px #fff2bc;
}

.screen-panel p {
  margin: 5px 0 12px;
  line-height: 1.45;
}

.eyebrow {
  margin-bottom: 2px !important;
  color: var(--brass-3) !important;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .18em;
}

.screen-panel a {
  min-height: 44px;
  margin-top: 7px;
  padding: 13px 7px 0;
  color: #6b3d25;
  font-size: 12px;
  font-weight: 900;
}

.primary,
.secondary {
  min-height: 44px;
  width: min(230px, 100%);
  margin: 4px;
  border: 2px solid var(--wood-1);
  border-radius: 2px;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px #ffffff30, 2px 3px #6a4929;
}

.primary {
  color: #2e1b0c;
  background: linear-gradient(var(--brass-1), var(--brass-2) 58%, #af742f 59%);
}

.secondary {
  color: #fff0c1;
  background: linear-gradient(var(--wood-4), var(--wood-2));
}

.modal {
  justify-content: flex-start;
  padding-top: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hidden { display: none !important; }

.slot-list {
  width: 100%;
  display: grid;
  gap: 6px;
  margin: 5px 0;
}

.slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  min-height: 54px;
  padding: 5px 6px;
  text-align: left;
  color: var(--ink);
  border: 2px solid var(--paper-3);
  border-radius: 2px;
  background: #f6e7bd;
  box-shadow: inset 0 0 0 1px #fff6ce;
}

.slot div { min-width: 0; }
.slot > div:last-child { display: flex; gap: 3px; justify-content: flex-end; }
.slot strong,
.slot small { display: block; }
.slot small { color: #684c31; }

.slot button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: #fff1c8;
  border: 2px solid var(--wood-1);
  border-radius: 2px;
  background: linear-gradient(var(--wood-4), var(--wood-2));
  font-size: 11px;
  font-weight: 900;
}

.slot .delete { background: linear-gradient(#b65b4d, #71312d); }

.toast {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 31%;
  transform: translate(-50%, -5px);
  max-width: 88%;
  padding: 6px 9px;
  border: 2px solid var(--brass-2);
  border-radius: 2px;
  background: var(--wood-1);
  box-shadow: inset 0 0 0 2px var(--wood-3), 2px 3px #0008;
  color: var(--brass-1);
  font-size: 9px;
  font-weight: 900;
  opacity: 0;
  transition: .2s;
  pointer-events: none;
  text-align: center;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.drawer {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: calc(6px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100% - 14px), 414px);
  max-height: min(72svh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 24px 14px calc(14px + env(safe-area-inset-bottom));
  color: var(--ink);
  border: 4px solid var(--wood-2);
  border-radius: 4px 4px 2px 2px;
  outline: 2px solid var(--brass-2);
  outline-offset: -6px;
  background:
    radial-gradient(circle at 16% 18%, #916c3820 0 1px, transparent 2px) 0 0 / 13px 11px,
    linear-gradient(var(--paper), var(--paper-2));
  box-shadow: 0 -7px 0 #120c09aa, 0 0 24px #000a, inset 0 0 17px #8d5a2460;
  font-size: 14.5px;
}

.drawer::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 44px;
  height: 4px;
  transform: translateX(-50%);
  background: var(--wood-3);
  box-shadow: 0 1px var(--brass-1);
}

.drawer h3 {
  margin: 0 0 8px;
  color: #57311f;
  font: 900 20px/1.25 Georgia, "Yu Mincho", serif;
}

.drawer p { margin: 5px 0; line-height: 1.5; }

.drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.drawer button {
  min-height: 52px;
  padding: 8px;
  color: #fff3d4;
  border: 2px solid var(--wood-1);
  border-radius: 2px;
  background: linear-gradient(var(--wood-4), var(--wood-2));
  box-shadow: inset 0 0 0 1px #b08057, 1px 2px #765230;
  font-size: 16px;
  font-weight: 900;
}

.drawer button strong,
.drawer button small { display: block; }
.drawer button small { margin-top: 3px; color: #ead6aa; font-size: 12px; line-height: 1.15; }
.action-cards button { min-height: 62px; }

.profile-portrait {
  float: left;
  width: 48px;
  height: 64px;
  margin: 0 10px 8px 0;
  border: 2px solid var(--brass-2);
  background: #39251b;
  image-rendering: pixelated;
}

.drawer button:disabled {
  opacity: .52;
  filter: grayscale(.6);
  cursor: not-allowed;
}

.drawer button.warn { background: linear-gradient(#a85b50, #6e302f); }
.settlement-total {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3px 8px;
  align-items: end;
  margin: 4px 0 9px;
  padding: 9px 8px 7px;
  color: #fff0c2;
  border: 3px solid #4e2e1d;
  outline: 2px solid #c89343;
  outline-offset: -6px;
  background: linear-gradient(135deg, #5a3420, #211711);
  box-shadow: inset 0 0 0 2px #9e6938, 1px 3px #0008;
}
.settlement-total span { min-width: 0; font-size: 12px; line-height: 1.15; }
.settlement-total span:last-of-type { text-align: right; }
.settlement-total span b { display: block; margin-top: 2px; color: #ffe28b; font-size: 20px; line-height: 1; white-space: nowrap; }
.settlement-total i { padding-bottom: 1px; color: #e7bd65; font-size: 21px; font-style: normal; font-weight: 900; }
.settlement-total > strong { grid-column: 1 / -1; margin-top: 2px; font-size: clamp(31px, 9vw, 42px); line-height: .95; letter-spacing: -.04em; text-align: center; text-shadow: 2px 2px #25140e; }
.settlement-total small { grid-column: 1 / -1; color: #e4c796; font-size: 11px; text-align: center; }
.settlement-status { margin: 6px 0 !important; color: #623a22; font-size: 12px; font-weight: 800; }
.settlement-currency { float: right; margin-top: 5px; color: #9c672f; font: 900 11px/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .04em; }
.settlement-lines { margin-top: 4px; }
.settlement-lines .settlement-subtotal { margin-top: 3px; border-top: 2px solid #b98243; font-weight: 900; }
.settlement-lines .gain, .gain { color: #1d7a4b; }
.settlement-lines .loss, .loss { color: #b53e36; }
.settlement-next { width: 100%; min-height: 60px !important; margin-top: 10px; font-size: 21px !important; }
.layout-help { font-size: 11px; }
.layout-help b { color: #8c4426; }

.offer-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 44px 22px 44px;
  gap: 4px;
  align-items: center;
  margin: 5px 0;
  padding: 5px;
  color: var(--ink);
  border: 1px solid var(--paper-3);
  background: #f7e7bcaa;
  box-shadow: inset 0 0 0 1px #fff1bf;
}

.offer-art {
  width: 20px;
  height: 20px;
  align-self: center;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 0 #211714) drop-shadow(-1px 0 #211714) drop-shadow(0 1px #211714) drop-shadow(0 -1px #211714) drop-shadow(0 0 3px #fff0af88);
}

.offer-row span,
.offer-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-row small { font-size: 9px; }
.offer-row em { display: block; color: var(--red); font-size: 10px; font-style: normal; text-align: right; }
/* 誰が買う品かを売値の下に出す。買い手のいない品は赤で目立たせる。 */
.offer-demand { display: block; font-size: 9px; font-style: normal; color: var(--ink); opacity: .78; }
.offer-demand.warn { color: var(--red); font-weight: 700; }
/* 在庫一覧では同じ出典の買い手表示を、行の末尾へ字並びで出す。 */
.inventory-row .offer-demand { display: inline; font-size: inherit; opacity: 1; }
.offer-row strong { text-align: center; }
.offer-row button { min-height: 44px; padding: 0; font-size: 18px; }

.good-icon {
  width: 12px;
  height: 12px;
  border: 2px solid #4a3929;
  background: var(--good);
  box-shadow: inset 2px 2px #ffffff66;
}
.inventory-art { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(1px 0 #211714) drop-shadow(-1px 0 #211714) drop-shadow(0 1px #211714) drop-shadow(0 -1px #211714); }

.inventory-head,
.inventory-row {
  display: grid;
  grid-template-columns: 20px minmax(64px, 1fr) 58px 52px 50px;
  gap: 4px;
  align-items: center;
}
.inventory-head { margin-top: 10px; padding: 4px 6px; color: #79542f; font-size: 11px; font-weight: 900; }
.inventory-head span:first-child { grid-column: 1 / 3; }
.inventory-row { min-height: 42px; padding: 5px 6px; border-top: 1px solid #b78d5577; background: #fff1c155; }
.inventory-row b { font-size: 14px; }
.inventory-row span { font-size: 12px; }
.inventory-row strong { color: #8c4426; text-align: right; }
.inventory-row small { grid-column: 2 / 6; color: #755333; font-size: 11px; }

.info-list { display: grid; gap: 5px; margin: 10px 0; }
.info-list div { display: grid; grid-template-columns: minmax(78px, .8fr) 1.2fr; gap: 8px; padding: 7px 9px; background: #fff0bd88; border: 1px solid #b98c4f; }
.info-list dt { color: #725031; font-weight: 900; }
.info-list dd { margin: 0; text-align: right; font-weight: 900; }

.high-contrast .game-shell,
.high-contrast .topbar { filter: contrast(1.14) saturate(1.08); }

@media (max-width: 374px) {
  .app { padding-inline: 5px; }
  .topbar { gap: 3px; padding-inline: 3px; }
  .quick-tools { gap: 2px; }
  .hud { grid-template-columns: 84px minmax(96px, 1fr); gap: 3px; }
  .sky-orb { flex-basis: 30px; width: 30px; height: 30px; }
  .gold-panel { padding-inline: 3px; }
  .coin-pouch { flex-basis: 24px; width: 24px; height: 24px; }
  .offer-row { grid-template-columns: 32px minmax(0, 1fr) 44px 18px 44px; }
  .inventory-head,
  .inventory-row { grid-template-columns: 18px minmax(56px, 1fr) 52px 48px 44px; }
}

@media (max-width: 390px) {
  .day-clock { padding-inline: 3px; gap: 3px; }
  .sky-orb { flex-basis: 30px; width: 30px; height: 30px; }
  .clock-copy strong { font-size: 11px; }
}

@media (max-height: 720px) {
  .app { grid-template-rows: 56px minmax(0, 1fr); }
  .topbar { height: 56px; padding-block: 1px; }
  .icon-button { width: 44px; height: 44px; }
  .day-clock, .gold-panel { height: 48px; }
  .screen-panel { padding: 13px; }
  .screen-panel h1 { font-size: 23px; }
  .drawer { max-height: 78svh; }
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  #goldValue { animation: none !important; }
}