/* Nehemiah's Wall — portrait first. The page is a column: the open tab
   fills the height, the tab bar sits at the bottom in thumb reach. */

:root {
  --ink: #2b1a0e;
  --ink-soft: #5a3c22;
  --paper: #fff8ea;
  --sand: #f3e2bd;
  --terra: #b4462a;
  --terra-dark: #7e2c16;
  --gold: #ffcf3f;
  --blue: #1d5f80;
  --gap-a: #2b3a52;
  --gap-b: #46566e;
  --font: ui-rounded, "SF Pro Rounded", Nunito, "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 16px/1.4 var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, #f9e3c4, #f0d7a8);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.loading { padding: 24px; text-align: center; }

#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 560px; margin: 0 auto; }
#page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; outline: none; }
#page > section { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- Bottom tab bar ---- */
.tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #5c2d13; padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(60, 30, 10, 0.25);
}
.tab {
  min-height: 56px; min-width: 44px; border: 0; border-radius: 12px; background: transparent; color: #f6e2bf;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 16px; font-weight: 700;
}
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tab[aria-current="page"] { background: #fff1d6; color: #5c2d13; }

/* ---- Header bar of a page (not a menu) ---- */
.bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-height: 52px; }
.bar h1, .bar h2 { margin: 0; flex: 1; font-size: 20px; font-family: "Palatino Linotype", Palatino, Georgia, serif; color: #5c2d13; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .count { font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.pill {
  min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 22px; border: 2px solid #b98b55; background: var(--paper);
  font-weight: 800; display: inline-flex; align-items: center; gap: 4px;
}
.pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ---- Buttons ---- */
.big {
  min-height: 52px; padding: 10px 22px; border-radius: 26px; border: 0; background: var(--terra); color: #fff;
  font-size: 18px; font-weight: 800; box-shadow: 0 3px 0 var(--terra-dark);
}
.big:disabled { background: #8d7c6c; box-shadow: none; color: #fff; }
.soft { min-height: 48px; padding: 8px 18px; border-radius: 24px; border: 2px solid #b98b55; background: #fbf1da; font-weight: 800; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.acts .big { flex: 1 1 auto; }
.card { background: var(--paper); border-radius: 18px; margin: 8px 10px; padding: 12px 14px; box-shadow: 0 2px 0 #d8b98a; }
.card h3 { margin: 0 0 6px; font-size: 19px; color: #5c2d13; }
.card p { margin: 6px 0; }
.say { font-size: 18px; font-weight: 700; }
.fine { font-size: 16px; color: #5e4129; display: block; }
.note { background: #fde7c2; border-left: 5px solid #b4462a; padding: 8px 10px; border-radius: 8px; font-weight: 700; margin: 6px 10px; }
.status-line:empty { display: none; }

/* ---- Play tab: the city ---- */
.city-page .pack-scene { height: 120px; flex: none; margin: 6px 10px 0; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 3px #8a5a2b; }
.city-page .pack-scene svg { width: 100%; height: 100%; display: block; }
/* The city keeps a readable height on short phones; the page scrolls instead. */
#page > section.city-page { flex: 1 0 auto; }
.city-page .scene { flex: 1; min-height: 320px; position: relative; margin: 0 10px; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 3px #8a5a2b; background: #f7c9a8; }
.city-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.city-svg .seg { cursor: pointer; }
.city-svg .seg:focus-visible { outline: none; }
.city-svg .seg:focus-visible rect:first-child { stroke: var(--blue); stroke-width: 4; }
.goal-ring { animation: ring 1.6s ease-in-out infinite; }
@keyframes ring { 50% { opacity: 0.35; } }
.fresh { animation: fresh 1.4s ease-out both; }
@keyframes fresh { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.chips { display: flex; justify-content: center; gap: 6px; padding: 8px 10px 0; }
.replay-line { margin: 8px 10px 0; text-align: center; font-size: 15px; font-weight: 700; color: #5e4129; }
.rules { margin: 8px 0 12px; padding-left: 22px; text-align: left; font-size: 17px; line-height: 1.4; }
.chip {
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid #46566e; background: #34445c; color: #fff; font-weight: 800; font-size: 18px;
  display: grid; place-items: center; padding: 0;
}
.chip.next { border-color: var(--gold); box-shadow: 0 0 0 3px #7e2c16; }
.chip.done { background: #e9cf9b; border: 3px solid #8a6a3e; color: #2f6a2a; }
.chip svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Board pages (campaign and Daily Wall) ---- */
.goal { margin: 0 12px 4px; font-weight: 800; font-size: 17px; }
.board-area { flex: 1; min-height: 150px; display: grid; place-items: center; position: relative; padding: 4px; }
.board {
  --cell: 56px;
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell);
  padding: 6px; border-radius: 12px; background: #7a5233; box-shadow: 0 4px 0 #4a2f1b, inset 0 0 0 2px #5c3a20;
}
.cell { width: var(--cell); height: var(--cell); margin: 0; border: 0; padding: 0; position: relative; display: grid; place-items: center; font-size: calc(var(--cell) * 0.36); }
.cell.old {
  background-color: #dcbc82;
  background-image:
    radial-gradient(circle at 28% 32%, rgba(255, 250, 230, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 68%, rgba(110, 72, 30, 0.45) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 60% 22%, rgba(110, 72, 30, 0.3) 0 1.2px, transparent 2px),
    linear-gradient(180deg, #efd6a6, #cfae74);
  box-shadow: inset 0 0 0 1px #8a6a3e, inset 0 3px 0 rgba(255, 255, 255, 0.35);
}
.cell.gap {
  background: linear-gradient(180deg, var(--gap-a), var(--gap-b));
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.45);
  outline: 2px dashed rgba(234, 242, 255, 0.55); outline-offset: -5px;
}
.cell.placed {
  color: #4a2c12; font-weight: 800;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 70%, rgba(90, 50, 20, 0.35) 0 1.5px, transparent 2.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.08));
  border: 0 solid #5c3a20;
}
.cell.placed.bt { border-top-width: 3px; } .cell.placed.br { border-right-width: 3px; }
.cell.placed.bb { border-bottom-width: 3px; } .cell.placed.bl { border-left-width: 3px; }
.pc0 { background-color: #e9b97c; } .pc1 { background-color: #c9935e; } .pc2 { background-color: #e3d0a4; }
.pc3 { background-color: #b9a27a; } .pc4 { background-color: #e2a76c; } .pc5 { background-color: #cdb98f; } .pc6 { background-color: #d9a383; }
.cell.placed.arch { background-color: #e3b64a; }
.cell.ghost-ok { background: #ffe08a !important; outline: 4px solid var(--gold); outline-offset: -4px; box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.6); }
.cell.ghost-bad {
  background: repeating-linear-gradient(45deg, #5a2a2a 0 6px, #7a3b3b 6px 12px) !important;
  outline: 4px dashed #ffb4a8; outline-offset: -5px; color: #fff;
}
.cell.help { box-shadow: inset 0 0 0 5px #fff6c8, 0 0 14px #ffe08a; outline: 3px dotted #fff6c8; outline-offset: -9px; }
.gmk { font-weight: 900; color: #4a2c12; }
.ghost-bad .gmk { color: #fff; }
.support-tip {
  position: absolute; right: 8px; bottom: 6px; display: flex; align-items: center; gap: 6px; background: var(--paper);
  padding: 4px 10px 4px 4px; border-radius: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); font-weight: 700; max-width: 75%;
}
.support-tip svg { width: 64px; height: 32px; flex: none; }
.msg { margin: 2px 12px; min-height: 2.8em; font-weight: 700; font-size: 17px; }
.hand { display: inline-block; margin-right: 6px; animation: tapme 1.2s ease-in-out infinite; }
@keyframes tapme { 50% { transform: translateY(-4px); } }

.tray-row { display: flex; gap: 8px; align-items: stretch; padding: 4px 10px 8px; }
.tray { flex: 1; display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; min-height: 76px; align-items: center; }
.stone {
  flex: none; min-width: 56px; min-height: 60px; padding: 4px 6px; border-radius: 12px; border: 2px solid #b98b55; background: #fbf1da;
  display: grid; place-items: center; transition: transform 0.15s;
}
.stone svg { max-height: 58px; max-width: 76px; width: auto; height: auto; }
.stone.sel { transform: translateY(-5px); border: 3px solid #7e2c16; box-shadow: 0 0 0 4px var(--gold), 0 6px 10px rgba(0, 0, 0, 0.25); background: #fff4c8; }
.tools { display: flex; gap: 8px; }
.tool {
  min-width: 64px; min-height: 64px; border-radius: 16px; border: 0; background: var(--blue); color: #fff; font-weight: 800; font-size: 17px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 3px 0 #0f3a50;
}
.tool.soft { background: #fbf1da; color: var(--ink); border: 2px solid #b98b55; box-shadow: none; }
.tool:disabled { background: #9aa6ae; box-shadow: none; }
.tool svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pulse { animation: pulse 0.6s ease-in-out 2; }
@keyframes pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px var(--gold); } }
.shake { animation: shake 0.35s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

.finish { padding: 4px 10px 10px; }
.choices { display: grid; gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 10px; text-align: left; min-height: 60px; padding: 8px 12px; border-radius: 14px;
  border: 2px solid #b98b55; background: var(--paper);
}
.choice svg { width: 44px; height: 44px; flex: none; }
.choice b { display: block; font-size: 17px; }
.choice span span { display: block; color: #5e4129; }

/* ---- Daily ---- */
.moves { display: flex; align-items: center; gap: 8px; margin: 0 12px 4px; flex-wrap: wrap; }
.mv-row { display: inline-flex; gap: 4px; }
.mv { width: 18px; height: 14px; border-radius: 4px; background: #e2a76c; border: 2px solid #7a4a22; }
.mv.used { background: transparent; border-style: dashed; border-color: #a89070; }
.moves b { font-size: 18px; }
.tag { background: #1d5f80; color: #fff; padding: 2px 10px; border-radius: 10px; font-weight: 800; }
.intro svg { width: 100%; max-height: 160px; }
.end.won { box-shadow: 0 0 0 3px #2f6a2a; }
.end.lost { box-shadow: 0 0 0 3px #7e2c16; }
/* The marked block of the Daily v2 scored try: a ringed dot (a shape, not only a color). */
.gdot { display: inline-block; width: 42%; max-width: 30px; min-width: 14px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #2b1708 0 30%, #fff 32% 58%, #2b1708 60%); box-shadow: 0 0 0 2px #fff; vertical-align: middle; }
.dot-tip { display: flex; align-items: center; gap: 8px; font-weight: 800; margin: 4px 0; }
.dot-tip .gdot { width: 24px; flex: none; }

/* ---- Shop ---- */
.price b { font-size: 26px; color: #5c2d13; }
.pack-list { margin: 6px 0; padding-left: 22px; }
.pack-list li { margin: 3px 0; }
.preview-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; align-items: center; }
.preview-row svg { width: 100%; height: auto; display: block; border-radius: 10px; }
.gate-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.gate-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; border: 1px solid #3b2614; }

/* ---- Settings ---- */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ecd9b4; }
.set-text b { display: block; font-size: 18px; }
.switch {
  flex: none; min-width: 84px; min-height: 44px; border-radius: 22px; border: 2px solid #8a6a3e; background: #e8dcc6;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 4px; font-weight: 800;
}
.switch .knob { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #8a6a3e; }
.switch[aria-checked="true"] { background: #2f6a2a; color: #fff; flex-direction: row-reverse; padding: 0 4px 0 10px; }
.how p { margin: 4px 0; }

/* ---- Story card ---- */
.overlay { position: fixed; inset: 0; background: rgba(43, 26, 14, 0.55); display: grid; place-items: end center; z-index: 5; }
.sheet { background: var(--paper); width: 100%; max-width: 560px; border-radius: 20px 20px 0 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
.sheet h2 { margin: 0 0 8px; color: #5c2d13; }

/* ---- Reduced motion: fades and outlines only ---- */
body.less-motion *, body.less-motion *::before, body.less-motion *::after { animation: none !important; transition: none !important; }
body.less-motion .stone.sel { transform: none; }
body.less-motion .pulse { outline: 4px solid var(--gold); outline-offset: 2px; }
body.less-motion .fresh { animation: fade 0.6s both !important; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stone.sel { transform: none; }
  .pulse { outline: 4px solid var(--gold); outline-offset: 2px; }
  .fresh { animation: fade 0.6s both !important; }
}

/* ---- Short screens (320x568) ---- */
@media (max-height: 620px) {
  .bar { min-height: 46px; padding: 2px 8px; }
  .bar h1, .bar h2 { font-size: 18px; }
  .msg { min-height: 2.6em; font-size: 16px; margin: 0 10px; }
  .goal { font-size: 16px; margin-bottom: 2px; }
  .tray { min-height: 66px; padding: 4px 2px; }
  .stone { min-height: 56px; }
  .stone svg { max-height: 48px; }
  .tool { min-width: 58px; min-height: 58px; }
  .card { margin: 6px 8px; padding: 8px 12px; }
  .say { font-size: 17px; }
  .chips { padding-top: 6px; }
}