/* farmdelights: flat, outlined "sticker" UI around the 3D farm.
   On wide screens everything fits in the window (no page scroll), which also
   makes F11 full screen fill nicely. */

:root {
  --paper: #f4ead5;
  --paper-2: #ebdcbc;
  --card: #fffaf0;
  --ink: #3d2a14;
  --ink-soft: #6e5a3f;
  --outline: #2f3d1c;
  --line: #d4c19a;
  --green: #4e8a36;
  --green-dark: #356524;
  --grass: #6aa04a;
  --red: #c4483a;
  --gold: #e0a92e;
  --sun: #ffd34d;
  --blue: #3b7fc4;
  --pop: 0 3px 0 var(--outline);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: radial-gradient(circle at 10px 10px, rgba(160, 120, 60, 0.12) 2px, transparent 2.5px);
  background-size: 22px 22px;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
kbd {
  font: bold 11px/1 ui-monospace, Consolas, monospace;
  border: 1.5px solid var(--outline);
  border-radius: 4px;
  padding: 1px 4px;
  background: var(--card);
  box-shadow: 0 1.5px 0 var(--outline);
}
svg { display: block; }

/* ---------- top bar: calm, modern farm-game HUD ---------- */
.top {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 18px;
  background: linear-gradient(180deg, #263423 0%, #1c271a 100%);
  color: #efe8d8;
  border-bottom: 1px solid rgba(214, 186, 120, 0.35);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  z-index: 2;
  font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
}
.brand { display: flex; align-items: center; gap: 11px; color: #d6ba78; }
.crest { width: 38px; height: 38px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: 0.06em; color: #f3ead6; }
.brand-sub { font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase; color: #c9a86a; margin-top: 3px; }
.hud {
  flex-wrap: wrap;
  max-width: 100%;
  display: flex; align-items: stretch;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
}
.hud-block { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 16px; min-width: 96px; }
.hud-block + .hud-block { border-left: 1px solid rgba(255, 255, 255, 0.09); }
.hud-time, .hud-weather, .hud-coins { flex-direction: row; align-items: center; gap: 10px; }
.hud-stack { display: flex; flex-direction: column; gap: 2px; }
.hud-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #a3ad94; white-space: nowrap; }
.hud-value { font-size: 15px; font-weight: 600; color: #f3ecdc; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud-value.clock { font-size: 19px; letter-spacing: 0.02em; min-width: 54px; }
.ring { width: 34px; height: 34px; }
.ring circle.ring-track, .ring circle.ring-fill { fill: none; stroke-width: 2.6; }
.ring .ring-track { stroke: rgba(255, 255, 255, 0.12); }
.ring .ring-fill { stroke: #d6ba78; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 20px 20px; transition: stroke 1s; }
.wx { width: 28px; height: 28px; color: #e8c46a; }
.wx svg { width: 28px; height: 28px; }
.coin { width: 24px; height: 24px; }
.hud-coins.bump { animation: bump 0.4s; }
@keyframes bump { 40% { transform: scale(1.06); } }
.controls { display: flex; align-items: center; gap: 8px; }
.speed { display: flex; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px; padding: 2px; }
.speed button { background: none; border: 0; border-radius: 7px; color: #cfd6c4; padding: 5px 9px; min-width: 36px; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.speed button:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.speed button svg { width: 14px; height: 14px; fill: currentColor; margin: 0 auto; }
.speed button.on { background: #d6ba78; color: #1d2a1c; }
.ghost-btn, .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, 0.06); color: #e6e0d0;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px;
  font-weight: 600; font-size: 13px;
}
.ghost-btn { padding: 6px 12px; }
.ghost-btn svg { width: 14px; height: 14px; color: #d6ba78; }
.icon-btn { width: 34px; height: 34px; padding: 0; font-size: 15px; }
.icon-btn svg { width: 15px; height: 15px; }
.ghost-btn:hover, .icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 2.5px solid var(--outline);
  border-radius: 10px;
  padding: 5px 11px;
  font-weight: bold;
  box-shadow: var(--pop);
}
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); }
.chip svg { width: 16px; height: 16px; }

/* ---------- layout ---------- */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 14px;
  padding: 14px 14px 12px;
}
.field { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6e8f4a;
  border: 3px solid var(--outline);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--outline);
  overflow: hidden;
}
canvas { display: block; touch-action: none; cursor: crosshair; }
#farm { border-radius: 8px; }
canvas.farm3d { width: 100%; height: 100%; }
.floats3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.float3d {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: bold 16px "Trebuchet MS", sans-serif; color: var(--ink);
  -webkit-text-stroke: 4px #fffaf0;
  paint-order: stroke fill;
}
.corner-buttons { position: absolute; left: 12px; top: 12px; display: flex; gap: 8px; }
.shop-btn svg { width: 20px; height: 20px; }
.cam-controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.cam-controls button {
  width: 36px; height: 36px; border-radius: 10px;
  border: 2.5px solid var(--outline); background: var(--card);
  font-weight: bold; font-size: 18px; line-height: 1; box-shadow: var(--pop);
}
.cam-controls button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); }
.cam-help {
  position: absolute; left: 12px; bottom: 12px; margin: 0;
  background: rgba(255, 250, 240, 0.92); border: 2px solid var(--outline); border-radius: 10px;
  padding: 5px 30px 5px 10px; font-size: 13px; color: var(--ink);
}
.cam-help button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 17px; font-weight: bold; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; gap: 8px; margin-top: 12px; flex: none; }
.tool {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--card);
  border: 2.5px solid var(--outline);
  border-radius: 12px;
  padding: 7px 6px 9px;
  box-shadow: var(--pop);
  font-size: 13px; font-weight: bold;
  white-space: nowrap;
}
.tool svg { width: 30px; height: 30px; flex: none; }
.tool span { overflow: hidden; text-overflow: ellipsis; }
.tool kbd { position: absolute; top: -8px; left: -6px; }
.tool.on { background: var(--sun); transform: translateY(-2px); box-shadow: 0 5px 0 var(--outline); }
.tool b { font-weight: normal; color: var(--ink-soft); }
.meter { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 4px; background: #dfe7ee; border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--blue); width: 100%; }
.picker {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding: 8px; flex: none;
  background: var(--card); border: 2.5px dashed var(--outline); border-radius: 12px;
}
.picker button { display: flex; align-items: center; gap: 6px; background: #fff; border: 2px solid var(--outline); border-radius: 8px; padding: 4px 9px; font-weight: bold; }
.picker button.on { background: var(--sun); }
.hint { margin: 8px 2px 0; color: var(--ink-soft); font-size: 14px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- side panel ---------- */
.panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--card);
  border: 3px solid var(--outline);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--outline);
  overflow: hidden;
}
.tabs { display: flex; flex-wrap: wrap; background: var(--paper-2); border-bottom: 2.5px solid var(--outline); flex: none; }
.tabs button { flex: 1 1 auto; background: none; border: 0; padding: 9px 8px; font-weight: bold; color: var(--ink-soft); position: relative; }
.tabs button.on { background: var(--card); color: var(--ink); box-shadow: inset 0 -4px 0 var(--grass); }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; border: 1.5px solid var(--outline); }
.tab-body { padding: 14px; flex: 1; min-height: 0; overflow-y: auto; }
.tab-body h2 { font-family: Georgia, serif; font-size: 19px; margin: 0 0 6px; }
.tab-body h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin: 18px 0 6px; }
.tab-body p { margin: 4px 0 10px; line-height: 1.4; }
.muted { color: var(--ink-soft); font-size: 13px; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 2px solid var(--line); border-radius: 10px; background: #fff; flex-wrap: wrap; }
.row .grow { flex: 1 1 10em; min-width: 0; }
.row.locked { background: #f3eee2; color: var(--ink-soft); }
/* How-many picker in the store: − [n] + then Buy. */
.qty { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.qty .step { border: 0; border-radius: 0; padding: 4px 9px; min-width: 0; box-shadow: none; font-weight: bold; }
.qty input { width: 3.2em; border: 0; border-left: 2px solid var(--line); border-right: 2px solid var(--line); padding: 4px 2px; text-align: center; font: inherit; font-weight: bold; color: var(--ink); background: #fff; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: 2px solid var(--grass); outline-offset: -2px; }
.btn.buy { min-width: 6.5em; }
.swatch { display: inline-block; vertical-align: -2px; width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1.5px solid var(--outline); }
.stars { color: var(--gold); letter-spacing: -1px; }
.btn {
  background: var(--green); color: #fff; border: 2px solid var(--outline); border-radius: 8px; padding: 4px 10px; font-weight: bold; font-size: 13px;
  box-shadow: 0 2px 0 var(--outline);
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 var(--outline); }
.btn.ghost { background: #fff; color: var(--ink); }
.btn.warn { background: var(--red); }
.price { width: 64px; padding: 4px; border: 2px solid var(--line); border-radius: 6px; font: inherit; }
.card { border: 2px dashed var(--line); border-radius: 12px; padding: 10px; background: #fff; margin-bottom: 8px; }
.card.ready { border-color: var(--green); border-style: solid; }
.callout { background: #fff4d6; border: 2px solid #ecd28f; border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.log { font: 12px/1.5 ui-monospace, Consolas, monospace; max-height: 160px; overflow-y: auto; background: #faf5e8; border-radius: 6px; padding: 6px 8px; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; }
.pips i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--outline); }
.pips i.full { background: var(--grass); }
.goal { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; }
.goal .tick { width: 20px; height: 20px; flex: none; border: 2px solid var(--outline); border-radius: 6px; display: grid; place-items: center; font-size: 12px; background: #fff; }
.goal.done .tick { background: var(--grass); color: #fff; }
.goal.done span:last-child { color: var(--ink-soft); text-decoration: line-through; }
table.board { width: 100%; border-collapse: collapse; font-size: 14px; }
table.board td { padding: 4px 6px; border-bottom: 1px dashed var(--line); }
table.board tr.you { font-weight: bold; background: #eef6dc; }

/* ---------- toasts and dialogs ---------- */
.toasts { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 10; max-width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  background: var(--card); border: 2.5px solid var(--outline); border-left: 8px solid var(--ink-soft); border-radius: 10px;
  padding: 8px 12px; box-shadow: var(--pop); animation: slide 0.25s ease-out; font-weight: bold;
}
.toast.good { border-left-color: var(--green); }
.toast.warn { border-left-color: var(--red); }
.toast.goal, .toast.win { border-left-color: var(--gold); background: #fff4d6; }
.toast.day { border-left-color: var(--blue); }
.toast.out { opacity: 0; transition: opacity 0.4s; }
@keyframes slide { from { transform: translateY(-10px); opacity: 0; } }
.dialog {
  border: 3px solid var(--outline); border-radius: 18px; background: var(--card); color: var(--ink);
  padding: 18px 22px; max-width: min(440px, calc(100vw - 32px)); box-shadow: 0 6px 0 var(--outline), 0 20px 40px rgba(40, 25, 10, 0.35);
}
.dialog.wide { max-width: min(660px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(50, 35, 15, 0.45); }
.dialog h2 { font-family: Georgia, serif; margin-top: 0; }
.dialog h3 { margin-bottom: 4px; }
.dialog li { margin-bottom: 6px; line-height: 1.4; }
.dialog menu { display: flex; justify-content: flex-end; gap: 8px; padding: 0; margin: 16px 0 0; }
.dialog .btn { font-size: 15px; padding: 7px 14px; }

/* Marigold's shop: a panel that slides in beside her while the camera walks up. */
.shop-panel {
  position: absolute;
  top: 14px; right: 14px; bottom: 14px;
  width: min(440px, 44%);
  display: flex; flex-direction: column;
  background: rgba(255, 250, 240, 0.97);
  border: 1px solid rgba(60, 45, 20, 0.25);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(30, 20, 5, 0.35);
  overflow: hidden;
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 3;
}
.shop-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.shop-head { position: relative; display: flex; gap: 12px; align-items: center; padding: 16px 52px 10px 16px; background: linear-gradient(180deg, #f3e6c6, #efe0bc); border-bottom: 1px solid rgba(60, 45, 20, 0.15); flex: none; }
.shop-face { width: 50px; height: 50px; flex: none; }
.shop-title { display: flex; flex-direction: column; }
.shop-kicker { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #8a6a3a; }
.shop-title h2 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 22px; font-weight: normal; }
.speech { margin: 12px 14px 4px; background: #fff; border: 1px solid rgba(60, 45, 20, 0.2); border-radius: 12px; padding: 9px 12px; font-size: 14px; line-height: 1.4; font-style: italic; color: #4a3820; flex: none; }
.shop-close { position: absolute; right: 12px; top: 14px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(60, 45, 20, 0.25); background: rgba(255, 255, 255, 0.7); font-size: 18px; line-height: 1; }
.shop-tabs { display: flex; gap: 6px; padding: 8px 14px 0; flex: none; border-bottom: 1px solid rgba(60, 45, 20, 0.15); }
.shop-tabs button { flex: 1; border: 0; background: none; padding: 8px; font-weight: 600; font-size: 15px; color: var(--ink-soft); border-bottom: 3px solid transparent; }
.shop-tabs button.on { color: var(--ink); border-bottom-color: #b98d3e; }
.shop-body { flex: 1; min-height: 0; overflow-y: auto; }
.leave-btn { flex: none; margin: 0 14px 14px; padding: 9px; border-radius: 10px; border: 1px solid rgba(60, 45, 20, 0.3); background: #f3e6c6; font-weight: 600; }
.leave-btn:hover { background: #ecdcb4; }
/* While you're in the shop, the field controls step aside and the edges dim. */
.canvas-wrap .corner-buttons, .canvas-wrap .cam-controls, .canvas-wrap .cam-help { transition: opacity 0.3s; }
.canvas-wrap.in-shop .corner-buttons, .canvas-wrap.in-shop .cam-controls, .canvas-wrap.in-shop .cam-help { opacity: 0; pointer-events: none; }
.canvas-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s; background: radial-gradient(ellipse at 30% 55%, transparent 45%, rgba(20, 12, 4, 0.35) 100%); z-index: 2; }
.canvas-wrap.in-shop::after { opacity: 1; }

/* ---------- smaller screens: stack and scroll ---------- */
@media (max-width: 1000px), (max-height: 560px) {
  body { height: auto; min-height: 100%; }
  .layout { grid-template-columns: 1fr; padding: 12px 10px 10px; }
  .shop-panel { width: min(440px, 62%); }
  .shop-panel .shop-body { overflow-y: auto; }
  .canvas-wrap { flex: none; aspect-ratio: 8 / 7; }
  .tab-body { overflow: visible; }
  .panel { overflow: visible; }
  .hud { margin-left: 0; }
}
@media (max-width: 640px) {
  .top { gap: 10px; padding: 8px 10px; }
  .hud { margin-left: 0; flex-wrap: wrap; }
  .hud-block { padding: 5px 10px; min-width: 0; }
  .shop-panel { left: 10px; right: 10px; top: auto; width: auto; height: 78%; }
  .toolbar { flex-wrap: wrap; }
  .tool { flex: 1 1 30%; }
  .hint { white-space: normal; }
  .cam-help { display: none; }
}

/* ---------- Market and orchard bits ---------- */
.float3d.coin { color: #a5761f; font-size: 18px; }
.row.empty-slot { border-style: dashed; background: #fbf7ec; }
details.prices { margin-top: 14px; }
details.prices summary { cursor: pointer; font-weight: bold; color: var(--ink-soft); }
details.prices table { margin-top: 6px; }
.picker-label { flex-basis: 100%; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- level, game menu, decorations, trucks ---------- */
.hud-level { flex-direction: row; align-items: center; gap: 10px; min-width: 120px; }
.lvl-badge { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #d6ba78; color: #1d2a1c; font-weight: 700; font-size: 14px; }
.xp-bar { display: block; width: 74px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; margin-top: 3px; }
.xp-bar i { display: block; height: 100%; width: 0; background: #d6ba78; transition: width 0.4s; }
.hud-coins.bump, .hud-level.bump { animation: bump 0.4s; }
.ghost-btn:disabled { opacity: 0.45; }
.menu-wrap { position: relative; }
.game-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px;
  background: #22301f; border: 1px solid rgba(214, 186, 120, 0.4); border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); display: grid; gap: 4px;
}
.game-menu button { text-align: left; background: none; border: 0; color: #efe8d8; padding: 8px 10px; border-radius: 7px; font-weight: 600; }
.game-menu button:hover { background: rgba(255, 255, 255, 0.08); }
.game-menu button.danger { color: #f0a090; }
.menu-note { margin: 4px 10px 4px; font-size: 11px; color: #a3ad94; }
.decor-bar {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(255, 250, 240, 0.97); border: 1px solid rgba(60, 45, 20, 0.3); border-radius: 12px; box-shadow: 0 8px 20px rgba(30, 20, 5, 0.25);
}
.decor-bar span { font-weight: 700; margin-right: 4px; }
.card.truck .bar { height: 7px; border-radius: 4px; background: #eadfc6; overflow: hidden; margin: 6px 0 2px; }
.card.truck .bar i { display: block; height: 100%; background: #3b7fc4; }

/* ---------- friends and visits ---------- */
.friends-btn .badge { margin-left: 2px; }
.friends-btn span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friends-dialog .profile-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
.friends-dialog label { display: grid; gap: 3px; font-weight: 600; font-size: 13px; }
.friends-dialog input { font: inherit; padding: 6px 8px; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); min-width: 0; }
.friends-dialog form.profile-row input { flex: 1 1 160px; text-transform: uppercase; letter-spacing: 1px; }
.friend-code { font: 700 17px/1 ui-monospace, Consolas, monospace; letter-spacing: 2px; background: #fff4d6; border: 2px solid #ecd28f; border-radius: 8px; padding: 4px 8px; }
.friends-dialog .rows { margin-bottom: 6px; }
.friends-dialog .signout { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 14px; }
.btn.google { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1f1f1f; font-size: 15px; padding: 8px 14px; }
.btn.google svg { width: 18px; height: 18px; }
.btn:disabled { opacity: 0.5; }
.friend-banner {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center;
  background: #22301f; color: #efe8d8; border: 1px solid rgba(214, 186, 120, 0.5); border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.friend-banner b { color: #f0d79a; }
/* Looking round a friend's farm: their tools and panels can't be used. */
body.visiting .toolbar, body.visiting .tab-body, body.visiting #shop-btn, body.visiting #market-btn, body.visiting #sleep, body.visiting .speed { pointer-events: none; opacity: 0.45; }
body.visiting .hint { visibility: hidden; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--red); text-decoration: underline; cursor: pointer; }

/* ---------- phones held sideways: the whole farm on one screen ----------
   Slim top bar, the tools in one row along the bottom, and the panels as a
   rail of buttons down the right that open a drawer over the farm. */
.tab-ico, .drawer-close { display: none; }
@media (orientation: landscape) and (max-height: 540px) {
  html, body { height: 100%; overflow: hidden; }
  body { height: 100dvh; min-height: 0; }
  .top {
    flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 4px max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left));
  }
  .top::-webkit-scrollbar { display: none; }
  .brand-text { display: none; }
  .crest { width: 28px; height: 28px; }
  .hud { margin-left: auto; flex-wrap: nowrap; border-radius: 9px; flex: none; }
  .hud-block { padding: 3px 9px; min-width: 0; }
  .hud-time, .hud-weather, .hud-coins, .hud-level { gap: 6px; min-width: 0; }
  .hud-label { font-size: 8.5px; letter-spacing: 0.08em; }
  .hud-value { font-size: 13px; }
  .hud-value.clock { font-size: 15px; min-width: 42px; }
  .ring { width: 24px; height: 24px; }
  .wx, .wx svg { width: 20px; height: 20px; }
  .hud-weather .hud-stack { display: none; }
  .coin { width: 18px; height: 18px; }
  .lvl-badge { width: 24px; height: 24px; font-size: 12px; }
  .xp-bar { width: 52px; }
  .controls { gap: 5px; flex: none; }
  .speed button { padding: 4px 6px; min-width: 28px; font-size: 12px; }
  .ghost-btn { padding: 5px 8px; font-size: 12px; }
  #sleep { font-size: 0; gap: 0; }
  .friends-btn span { max-width: 64px; }
  .icon-btn { width: 30px; height: 30px; }

  .layout {
    grid-template-columns: minmax(0, 1fr) 52px; gap: 6px;
    padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  .field { position: relative; }
  .canvas-wrap { flex: 1; aspect-ratio: auto; border-width: 2px; border-radius: 12px; box-shadow: none; }
  .corner-buttons { left: 8px; top: 8px; gap: 5px; }
  .chip { padding: 3px 8px; font-size: 12px; border-width: 2px; box-shadow: 0 2px 0 var(--outline); }
  .shop-btn svg { width: 16px; height: 16px; }
  .cam-controls { right: 8px; bottom: 8px; gap: 4px; }
  .cam-controls button { width: 30px; height: 30px; font-size: 15px; border-width: 2px; border-radius: 8px; box-shadow: 0 2px 0 var(--outline); }
  .cam-help, .hint { display: none; }

  .toolbar { margin-top: 6px; gap: 5px; flex-wrap: nowrap; }
  .tool {
    flex: 1 1 0; flex-direction: column; gap: 0; padding: 3px 2px 5px;
    border-width: 2px; border-radius: 10px; font-size: 10.5px; box-shadow: 0 2px 0 var(--outline);
  }
  .tool svg { width: 22px; height: 22px; }
  .tool span { max-width: 100%; }
  .tool kbd { display: none; }
  .tool.on { transform: translateY(-1px); box-shadow: 0 3px 0 var(--outline); }
  .meter { left: 8px; right: 8px; bottom: 2px; height: 3px; }
  /* The seed and sprinkler row floats over the bottom of the farm. */
  .picker {
    position: absolute; left: 8px; right: 8px; bottom: 58px; z-index: 4; margin: 0;
    max-height: 45%; overflow-y: auto; padding: 6px; gap: 5px;
    background: rgba(255, 250, 240, 0.95); border-width: 2px;
  }
  .picker button { padding: 3px 8px; font-size: 13px; }
  .picker-label { font-size: 9px; }

  /* The rail of panel buttons. */
  .panel { overflow: visible; border-width: 2px; border-radius: 12px; box-shadow: none; background: var(--paper-2); }
  .tabs { flex: 1; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 3px; border-bottom: 0; background: none; overflow-y: auto; scrollbar-width: none; }
  .tabs button {
    flex: 1 1 0; min-height: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2px 1px; border-radius: 8px; font-size: 9px; line-height: 1.1;
  }
  .tab-ico { display: block; font-style: normal; font-size: 17px; line-height: 1.15; }
  .tabs button.on { box-shadow: none; }
  body:not(.drawer-open) .tabs button.on { background: none; color: var(--ink-soft); }
  body.drawer-open .tabs button.on { background: var(--sun); color: var(--ink); }
  .tabs .badge { position: absolute; top: 1px; right: 1px; min-width: 15px; padding: 0 3px; font-size: 9.5px; line-height: 14px; }

  /* The drawer the panels open in, over the right of the farm. */
  #tab-body {
    position: fixed; z-index: 6; overflow-y: auto; overscroll-behavior: contain;
    top: calc(var(--top-h, 42px) + 6px); bottom: max(6px, env(safe-area-inset-bottom));
    right: calc(64px + env(safe-area-inset-right)); width: min(340px, 52vw);
    padding: 12px 14px; background: var(--card);
    border: 2px solid var(--outline); border-radius: 14px; box-shadow: 0 12px 30px rgba(30, 20, 5, 0.35);
    opacity: 0; visibility: hidden; transform: translateX(24px);
    transition: opacity 0.2s, transform 0.25s ease, visibility 0s 0.25s;
  }
  body.drawer-open #tab-body { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.25s ease; }
  .tab-body h2 { font-size: 17px; padding-right: 30px; }
  .drawer-close {
    position: fixed; z-index: 7; top: calc(var(--top-h, 42px) + 12px); right: calc(72px + env(safe-area-inset-right));
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--outline); background: #fff;
    font-size: 18px; font-weight: bold; line-height: 1; padding: 0;
  }
  body.drawer-open .drawer-close { display: grid; place-items: center; }

  /* Marigold's shop and the Market stand. */
  .shop-panel { top: 8px; right: 8px; bottom: 8px; width: min(400px, 54%); }
  .shop-head { padding: 8px 48px 6px 12px; gap: 8px; }
  .shop-face { width: 36px; height: 36px; }
  .shop-title h2 { font-size: 17px; }
  .shop-close { top: 8px; right: 8px; width: 30px; height: 30px; }
  .speech { margin: 6px 10px 2px; padding: 6px 10px; font-size: 12.5px; }
  .shop-tabs { padding: 4px 10px 0; }
  .shop-tabs button { padding: 5px; font-size: 13px; }
  .leave-btn { display: none; } /* the × closes it */

  .toasts { top: calc(var(--top-h, 42px) + 8px); }
  .dialog { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 14px 18px; }
}
/* Narrower phones: drop the crest and the smaller labels to keep one row. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 900px) {
  .brand { display: none; }
  .hud { margin-left: 0; }
  .top { justify-content: space-between; gap: 6px; }
  .hud-coins .hud-label, .hud-time .hud-label { display: none; }
  .hud-block { padding: 3px 7px; }
  .friends-btn span { display: none; }
  .speed button { min-width: 25px; padding: 4px 5px; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 760px) {
  .hud-level .hud-label, #week-label { display: none; }
  .top { gap: 4px; }
  .controls { gap: 4px; }
  .speed button { min-width: 21px; padding: 4px 3px; }
}
@media (orientation: landscape) and (max-height: 420px) {
  .shop-panel .speech { display: none; }
}

/* ---------- wide screens: the panels' tabs as a rail down the right ----------
   The same icon-over-label buttons as on a phone held sideways, but the
   panel stays open beside them since there's room. Buttons keep a fixed
   height rather than stretching down a tall window. */
@media (min-width: 1001px) and (min-height: 561px) {
  .layout { grid-template-columns: minmax(0, 1fr) 368px; }
  .panel { flex-direction: row; }
  .tabs {
    order: 2; flex: none; width: 70px;
    flex-direction: column; flex-wrap: nowrap; gap: 4px;
    padding: 8px 6px; overflow-y: auto; scrollbar-width: none;
    border-bottom: 0; border-left: 2.5px solid var(--outline);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    flex: none; height: 58px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 2px; border-radius: 10px; font-size: 11.5px; line-height: 1.1;
  }
  .tabs button:hover { background: rgba(255, 255, 255, 0.45); color: var(--ink); }
  .tab-ico { display: block; font-style: normal; font-size: 22px; line-height: 1; }
  .tab-body { padding: 12px; }
  .tabs button.on { background: var(--sun); color: var(--ink); box-shadow: 0 2px 0 var(--outline); }
  .tabs .badge { position: absolute; top: 3px; right: 4px; min-width: 17px; padding: 0 4px; font-size: 10.5px; line-height: 15px; }
  .tab-body { order: 1; min-width: 0; }
}

/* ---------- Friends and Account windows ---------- */
.friends-dialog { width: min(520px, calc(100vw - 32px)); max-width: none; }
.friends-dialog h2 { margin-bottom: 10px; }
.friends-dialog h3 { display: flex; align-items: center; gap: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin: 18px 0 8px; }
.friends-dialog h3 .count { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--paper-2); color: var(--ink); font-size: 12px; line-height: 20px; text-align: center; letter-spacing: 0; }
.friends-dialog .center { text-align: center; }
.friends-dialog .foot { margin-top: 16px; }
.friends-dialog .btn.small { padding: 3px 8px; font-size: 12px; }
/* Your code, big and easy to copy. */
.code-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px;
  background: #fff4d6; border: 2px solid #ecd28f; border-radius: 14px; padding: 10px 14px;
}
.code-card .code-label { grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6a3a; font-weight: 700; }
.code-card .code-tip { grid-column: 1 / -1; }
.friend-code.big { font-size: 24px; letter-spacing: 4px; background: none; border: 0; padding: 0; color: var(--ink); justify-self: start; }
.add-friend { margin: 14px 0 4px; display: grid; gap: 4px; }
.add-friend label { font-weight: 700; font-size: 13px; }
.add-row { display: flex; gap: 8px; }
.add-row input { flex: 1 1 auto; min-width: 0; font: inherit; padding: 7px 10px; border: 2px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); text-transform: uppercase; letter-spacing: 1.5px; }
.add-row input:focus { outline: 2px solid var(--grass); outline-offset: -1px; }
/* A friend: coloured initial, name and details, buttons on the right. */
.friend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.friend-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; background: #fff; border: 2px solid var(--line); border-radius: 12px;
}
.friend-card.request { background: #fbf7ec; border-style: dashed; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 700 18px/1 "Trebuchet MS", sans-serif; border: 2.5px solid var(--outline); box-shadow: 0 2px 0 var(--outline);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.friend-card .who { display: grid; gap: 1px; min-width: 0; }
.friend-card .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-card .actions { display: flex; gap: 6px; align-items: center; }
.seen { white-space: nowrap; }
.seen.now { color: var(--green-dark); font-weight: 700; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #b9b2a2; margin-right: 5px; vertical-align: 1px; }
.seen.now .dot, .dot.on { background: #4fb33a; box-shadow: 0 0 0 3px rgba(79, 179, 58, 0.2); }
.empty-friends { text-align: center; padding: 14px 10px 6px; border: 2px dashed var(--line); border-radius: 14px; background: #fbf7ec; }
.empty-friends .empty-art { font-size: 34px; line-height: 1.2; margin-bottom: 4px; }
.empty-friends p { margin: 6px 0; }
/* Account: tidy sections. */
.settings section { padding: 2px 0 8px; border-bottom: 1px dashed var(--line); }
.settings section:last-child { border-bottom: 0; }
.settings .profile-row input { flex: 1 1 160px; text-transform: none; letter-spacing: 0; }
.settings .signout { border-top: 0; padding-top: 0; margin-top: 0; }
.status-line { display: flex; align-items: center; margin: 4px 0; }
/* Settings: the game's own options, then the account part. */
.settings-dialog h2.sub { margin: 18px 0 0; padding-top: 14px; border-top: 2px solid var(--line); font-size: 18px; }
.settings-dialog > .settings section:first-child h3 { margin-top: 6px; }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--paper-2); border: 2px solid var(--line); }
.seg button { flex: 1 1 0; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--ink-soft); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.seg button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.seg button.on { background: #d6ba78; color: #1d2a1c; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); }
.seg button:disabled { cursor: default; opacity: 0.55; }
.settings-btn svg { width: 16px; height: 16px; }
/* The cog sits in the top right corner, at the far end of the controls row. */
.controls { flex: 1 1 auto; }
.settings-btn { margin-left: auto; }
/* Small screens: buttons drop under the name. */
@media (max-width: 520px), (orientation: landscape) and (max-height: 540px) {
  .friend-card { grid-template-columns: auto 1fr; }
  .friend-card .actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .friends-dialog { width: min(560px, calc(100vw - 24px)); padding: 12px 16px; }
  .friends-dialog h2 { font-size: 19px; margin-bottom: 6px; }
  .friend-card .actions { grid-column: auto; }
  .friend-card { grid-template-columns: auto 1fr auto; }
  .code-card { padding: 8px 12px; }
  .friend-code.big { font-size: 20px; }
}
/* Phone held sideways: the rail already has a Friends button, so the top
   bar's one makes room for the cog. */
@media (orientation: landscape) and (max-height: 540px) {
  .controls .friends-btn { display: none; }
}

/* ---------- top bar: one steady layout per screen size ----------
   Each changing text in the HUD carries its longest form in data-fit
   ("Late morning", "Wednesday", "888,888"...). An invisible copy of that
   text holds the space open, so every block keeps one width and the bar
   only wraps because of the window's width, never because the time,
   weather or coins changed. Nothing is cut off. */
[data-fit] { display: inline-flex; flex-direction: column; }
[data-fit]::after { content: attr(data-fit); height: 0; overflow: hidden; visibility: hidden; }
.hud-block { flex: none; }
.hud-value.clock { min-width: 0; }
.day-short { display: none; }
.xp-lv { margin-right: 0.35em; }
/* The name button keeps one width; only a very long name gets "…". */
.friends-btn { width: 132px; justify-content: flex-start; }
.friends-btn span { flex: 1 1 auto; min-width: 0; max-width: none; text-align: left; }
@media (max-width: 640px) {
  .friends-btn { width: 112px; }
  .controls { flex-wrap: wrap; row-gap: 6px; }
  /* The corner chips (2D view, Farm shop, Well, Orchard) wrap, never squash. */
  .corner-buttons { right: 12px; flex-wrap: wrap; }
  .corner-buttons .chip { white-space: nowrap; }
}
/* Phones held sideways: just the XP (the badge has the level). */
@media (orientation: landscape) and (max-height: 540px) {
  .xp-lv { display: none; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 900px) {
  .day-long { display: none; }
  .day-short { display: inline-flex; }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 760px) {
  .xp-bar { width: 42px; }
  .hud-block { padding: 3px 6px; }
}

/* ---------- phones held upright: a slim two-row top bar ----------
   Row one: day, clock, weather, coins and level, numbers only. Row two:
   speed, sleep and the buttons, icons only. Tap the first row to show the
   details (week, part of day, forecast, XP) and tap again to hide them. */
@media (orientation: portrait) and (max-width: 640px) {
  .top { flex-wrap: wrap; gap: 4px; padding: 4px 8px 5px; }
  .brand { display: none; }
  .hud {
    order: 1; flex: 1 1 100%; margin: 0; flex-wrap: nowrap; justify-content: space-between;
    border-radius: 9px; cursor: pointer;
  }
  .hud-block { padding: 3px 6px; min-width: 0; }
  .hud-time, .hud-weather, .hud-coins, .hud-level { gap: 5px; min-width: 0; }
  .top .hud-label, .hud-weather .hud-stack { display: none; }
  .hud-value { font-size: 13px; }
  .hud-value.clock { font-size: 15px; }
  .day-long { display: none; }
  .day-short { display: inline-flex; }
  .xp-lv { display: none; }
  .ring { width: 22px; height: 22px; }
  .wx, .wx svg { width: 20px; height: 20px; }
  .coin { width: 18px; height: 18px; }
  .lvl-badge { width: 22px; height: 22px; font-size: 12px; }
  .xp-bar { width: 44px; margin-top: 0; }
  .controls { order: 2; flex: 1 1 100%; flex-wrap: nowrap; gap: 4px; }
  .speed button { padding: 4px 5px; min-width: 26px; font-size: 12px; }
  .ghost-btn { padding: 5px 7px; font-size: 12px; }
  #sleep { font-size: 0; gap: 0; }
  .friends-btn { width: auto; }
  .friends-btn span { display: none; }
  .icon-btn { width: 30px; height: 30px; }
  /* Tapped open: everything with its label, wrapped over a few rows. */
  body.hud-more .hud { flex-wrap: wrap; justify-content: flex-start; }
  body.hud-more .top .hud-label, body.hud-more .hud-weather .hud-stack { display: flex; flex-direction: column; }
  body.hud-more .xp-lv { display: inline-flex; }
  body.hud-more .day-long { display: inline-flex; }
  body.hud-more .day-short { display: none; }
}

/* ---------- pop-up messages: × to close, swipe to throw away ---------- */
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 8px;
  padding-right: 6px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: transform 0.25s ease, opacity 0.4s;
}
.toast > span { flex: 1 1 auto; min-width: 0; }
.toast.dragging { transition: none; }
.toast-x {
  flex: none; width: 24px; height: 24px; margin: -2px 0 -2px 2px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--ink-soft);
  font-size: 18px; font-weight: bold; line-height: 1;
}
.toast-x:hover { background: rgba(0, 0, 0, 0.08); color: var(--ink); }
@media (pointer: coarse) { .toast-x { width: 30px; height: 30px; margin: -5px -2px -5px 0; } }

/* ---------- phones: a Well button beside the Farm shop button ---------- */
.well-btn { display: none; }
.well-btn svg { width: 18px; height: 18px; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  .well-btn { display: inline-flex; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .well-btn svg { width: 15px; height: 15px; }
}

/* ---------- Dark UI (Settings → Menus and panels) ----------
   Only the menus, panels and buttons change; the farm's lighting has its own
   setting. Light is the default. */
:root { color-scheme: only light; }
:root[data-ui="dark"] {
  color-scheme: only dark;
  --paper: #1b2219;
  --paper-2: #2b3428;
  --card: #252e22;
  --ink: #eee7d6;
  --ink-soft: #b5b8a5;
  --line: #485241;
  --outline: #0c120a;
}
:root[data-ui="dark"] body { background-image: radial-gradient(circle at 10px 10px, rgba(214, 186, 120, 0.06) 2px, transparent 2.5px); }
:root[data-ui="dark"] :is(.row, .qty, .qty input, .card, .picker button, .btn.ghost, .friends-dialog input, .add-row input, .friend-card, .goal .tick, .price, .drawer-close, .speech, .shop-close) {
  background: #2f392b; color: var(--ink);
}
:root[data-ui="dark"] :is(.row.locked, .row.empty-slot, .friend-card.request, .empty-friends, .log) { background: #212a1f; }
:root[data-ui="dark"] :is(.callout, .code-card, .friend-code, .toast.goal, .toast.win) { background: #3a3622; border-color: #6b5f32; }
:root[data-ui="dark"] table.board tr.you { background: #34452a; }
:root[data-ui="dark"] .meter { background: #1a2018; }
:root[data-ui="dark"] .picker button.on, :root[data-ui="dark"] .tool.on { background: #c9a64a; color: #1d2a1c; }
:root[data-ui="dark"] .tool.on b { color: #3d2a14; }
:root[data-ui="dark"] .shop-panel, :root[data-ui="dark"] .decor-bar { background: rgba(37, 46, 34, 0.97); border-color: rgba(214, 186, 120, 0.3); }
:root[data-ui="dark"] .shop-head { background: linear-gradient(180deg, #303a2b, #2a3326); border-color: rgba(214, 186, 120, 0.2); }
:root[data-ui="dark"] .shop-kicker { color: #c9a86a; }
:root[data-ui="dark"] .leave-btn { background: #303a2b; border-color: rgba(214, 186, 120, 0.3); }
:root[data-ui="dark"] .leave-btn:hover { background: #3a4534; }
:root[data-ui="dark"] .cam-help { background: rgba(37, 46, 34, 0.92); }
:root[data-ui="dark"] .tabs button:hover { background: rgba(255, 255, 255, 0.08); }
:root[data-ui="dark"] .seg button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
:root[data-ui="dark"] .toast-x:hover { background: rgba(255, 255, 255, 0.1); }
:root[data-ui="dark"] .dialog::backdrop { background: rgba(5, 8, 4, 0.6); }
:root[data-ui="dark"] .btn.google { background: #fff; color: #1f1f1f; }
:root[data-ui="dark"] .tabs button.on { color: #1d2a1c; }
@media (min-width: 1001px) and (min-height: 561px) {
  :root[data-ui="dark"] .tabs button.on { background: #c9a64a; }
}
@media (orientation: landscape) and (max-height: 540px) {
  :root[data-ui="dark"] .picker { background: rgba(37, 46, 34, 0.95); }
  :root[data-ui="dark"] body.drawer-open .tabs button.on { background: #c9a64a; color: #1d2a1c; }
  :root[data-ui="dark"] body:not(.drawer-open) .tabs button.on { color: var(--ink-soft); }
}

/* ---------- the ?debug readout ----------
   Bottom left of the farm view, above the camera tip when it's showing.
   It sits under every button and wraps before it can reach the camera
   buttons, so it never covers anything you need to press. */
.debug-readout {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: calc(100% - 250px);
  padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); color: #d6f5c0;
  font: 12px/1.4 ui-monospace, Consolas, monospace; pointer-events: none;
}
.cam-help:not([hidden]) ~ .debug-readout { bottom: 52px; }
.corner-buttons, .cam-controls, .cam-help { z-index: 2; }
@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) {
  .debug-readout, .cam-help:not([hidden]) ~ .debug-readout { left: 8px; bottom: 8px; max-width: calc(100% - 200px); font-size: 10px; padding: 2px 6px; }
}
@media (orientation: portrait) and (max-width: 640px) {
  .debug-readout, .cam-help:not([hidden]) ~ .debug-readout { max-width: calc(100% - 240px); }
}

/* ---------- the Friends window: cozy, part of the farm ----------
   A wooden-sign header with the tractor, your code as a ticket of letter
   tiles, friend cards with a big coloured initial, level and last played,
   and a little gate scene when nobody is here yet. The middle scrolls. */
.friends-panel { width: min(540px, calc(100vw - 32px)); max-height: min(740px, calc(100dvh - 32px)); padding: 0; overflow: hidden; }
.friends-panel[open] { display: flex; flex-direction: column; }
.friends-panel .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.friends-panel .btn svg { width: 15px; height: 15px; flex: none; }
.fp-head {
  position: relative; flex: none; display: flex; align-items: center; gap: 14px;
  padding: 16px 58px 14px 18px;
  background: repeating-linear-gradient(180deg, transparent 0 21px, rgba(120, 80, 30, 0.08) 21px 23px), linear-gradient(180deg, #f5e8c8, #ead6a8);
  border-bottom: 3px solid var(--outline);
  box-shadow: inset 0 -5px 0 #8fbf74;
}
.fp-tractor { width: 66px; height: 50px; flex: none; }
.fp-title { min-width: 0; padding-bottom: 4px; }
.fp-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #8a6a3a; }
.fp-title h2 { margin: 1px 0 2px; font-family: Georgia, serif; font-size: 27px; line-height: 1.1; }
.fp-title p { margin: 0; font-size: 13px; color: var(--ink-soft); }
.fp-head form { margin: 0; }
.fp-close {
  position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 2px solid var(--outline); background: #fffaf0; box-shadow: 0 2px 0 var(--outline);
  font-size: 20px; font-weight: bold; line-height: 1;
}
.fp-close:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--outline); }
.fp-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 6px; }
.fp-foot { flex: none; display: flex; justify-content: flex-end; margin: 0; padding: 10px 18px 14px; border-top: 1px dashed var(--line); }
.fp-foot .btn { font-size: 15px; padding: 7px 16px; }

/* Your code: a seed-packet ticket with notches. */
.fp-ticket {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px;
  padding: 12px 18px; background: #fff4d6; border: 2.5px dashed #d2a94c; border-radius: 14px;
}
.fp-ticket::before, .fp-ticket::after {
  content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--card); border: 2.5px dashed #d2a94c;
}
.fp-ticket::before { left: -10px; clip-path: inset(0 0 0 50%); }
.fp-ticket::after { right: -10px; clip-path: inset(0 50% 0 0); }
.fp-ticket-label { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6a3a; }
.fp-tiles { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.fp-tiles b {
  display: grid; place-items: center; min-width: 30px; height: 38px; padding: 0 4px;
  background: #fffaf0; border: 2px solid var(--outline); border-radius: 8px; box-shadow: 0 2px 0 var(--outline);
  font: 700 20px/1 ui-monospace, Consolas, monospace; color: var(--ink);
}
.fp-copy { font-size: 14px; padding: 8px 14px; }
.fp-copy.done { background: var(--blue); }
.fp-ticket-tip { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-soft); }

/* Adding a friend. */
.fp-add { display: grid; gap: 5px; margin: 16px 0 2px; }
.fp-add label { font-weight: 700; font-size: 13px; }
.fp-add .add-row input { padding: 9px 12px; border-radius: 10px; font-weight: 700; letter-spacing: 2px; }
.fp-add .btn { flex: none; white-space: nowrap; font-size: 14px; padding: 8px 13px; }
.fp-add .add-row input { flex: 1 1 0; width: 0; }
.friends-panel .callout { margin: 12px 0 0; }

/* Section headings with a dashed rule after them. */
.friends-panel h3.fp-h { margin: 20px 0 10px; }
.friends-panel h3.fp-h::after { content: ""; flex: 1; border-top: 1.5px dashed var(--line); margin-left: 4px; }

/* Friend cards. */
.friends-panel .friend-list { gap: 10px; }
.friends-panel .friend-card {
  grid-template-columns: auto 1fr auto; gap: 12px; padding: 10px 12px;
  background: #fffdf7; border: 2px solid var(--outline); border-radius: 14px; box-shadow: 0 3px 0 var(--outline);
}
.friends-panel .friend-card.playing { background: linear-gradient(90deg, #eaf5dc, #fffdf7 65%); }
.friends-panel .friend-card.request { background: #fbf7ec; border: 2px dashed var(--line); box-shadow: none; }
.friends-panel .friend-card.request.incoming { background: #fff4d6; border: 2px solid #d2a94c; box-shadow: 0 3px 0 #d2a94c; }
.fp-face { position: relative; display: block; }
.friends-panel .avatar {
  width: 48px; height: 48px; font-size: 21px;
  box-shadow: 0 2px 0 var(--outline), inset 0 -5px 0 rgba(0, 0, 0, 0.14), inset 0 3px 0 rgba(255, 255, 255, 0.25);
}
.fp-online { position: absolute; right: -3px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%; background: #4fb33a; border: 2.5px solid #fffdf7; }
.friends-panel .friend-card .who b { font-size: 16px; }
.fp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: 12.5px; color: var(--ink-soft); }
.fp-level { padding: 1px 7px; border-radius: 9px; background: #d6ba78; color: #1d2a1c; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.friends-panel .friend-card:not(.request) .actions { flex-direction: column; align-items: stretch; gap: 3px; }
.fp-visit { padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.fp-remove { border: 0; background: none; padding: 2px; font-size: 12px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.fp-remove:hover { color: var(--red); }

/* Nobody here yet, or not signed in. */
.fp-empty { text-align: center; padding: 6px 10px 2px; }
.fp-empty.small { margin-top: 2px; padding: 12px 14px 8px; border: 2px dashed var(--line); border-radius: 14px; background: #fbf7ec; }
.fp-gate { width: 210px; max-width: 72%; height: auto; margin: 0 auto 4px; }
.fp-empty p { margin: 6px 0; line-height: 1.4; }
.fp-empty-title { font-family: Georgia, serif; font-size: 19px; font-weight: bold; color: var(--ink); }
.fp-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 4px; }
.fp-empty-actions .btn { font-size: 14px; padding: 7px 13px; }
.fp-account { text-align: center; margin: 16px 0 8px; font-size: 13px; }

/* Small screens: the buttons go under the name, in a row. */
@media (max-width: 520px) {
  .friends-panel { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .fp-head { padding: 12px 52px 12px 14px; gap: 10px; }
  .fp-tractor { width: 52px; height: 40px; }
  .fp-title h2 { font-size: 23px; }
  .fp-body { padding: 14px 14px 6px; }
  .fp-ticket { padding: 10px 14px; }
  .fp-tiles b { min-width: 26px; height: 34px; font-size: 17px; }
  .friends-panel .friend-card:not(.request) .actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; align-items: center; gap: 10px; }
}
/* Phones held sideways: a slimmer header, and the whole height to scroll in. */
@media (orientation: landscape) and (max-height: 540px) {
  .friends-panel { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 16px); padding: 0; }
  .fp-head { padding: 8px 50px 8px 14px; gap: 10px; }
  .fp-tractor { width: 44px; height: 34px; }
  .fp-kicker, .fp-title p { display: none; }
  .fp-title h2 { font-size: 20px; margin: 0; }
  .fp-title { padding-bottom: 3px; }
  .fp-close { top: 7px; right: 10px; width: 30px; height: 30px; font-size: 18px; }
  .fp-body { padding: 10px 14px 4px; }
  .fp-ticket { padding: 8px 14px; gap: 6px 10px; }
  .fp-tiles b { min-width: 24px; height: 30px; font-size: 16px; }
  .fp-add { margin-top: 10px; }
  .friends-panel h3.fp-h { margin: 14px 0 8px; }
  .fp-gate { width: 150px; }
  .fp-foot { padding: 6px 14px 8px; }
  .fp-foot .btn { font-size: 14px; padding: 5px 14px; }
}
/* Dark UI. */
:root[data-ui="dark"] .fp-head {
  background: repeating-linear-gradient(180deg, transparent 0 21px, rgba(0, 0, 0, 0.12) 21px 23px), linear-gradient(180deg, #34402e, #2b3527);
  box-shadow: inset 0 -5px 0 #4e7a3a;
}
:root[data-ui="dark"] .fp-kicker { color: #c9a86a; }
:root[data-ui="dark"] .fp-close, :root[data-ui="dark"] .fp-tiles b { background: #2f392b; color: var(--ink); }
:root[data-ui="dark"] .fp-ticket, :root[data-ui="dark"] .friends-panel .friend-card.request.incoming { background: #3a3622; border-color: #8a7438; }
:root[data-ui="dark"] .fp-ticket::before, :root[data-ui="dark"] .fp-ticket::after { border-color: #8a7438; }
:root[data-ui="dark"] .fp-ticket-label { color: #d6ba78; }
:root[data-ui="dark"] .friends-panel .friend-card { background: #2f392b; }
:root[data-ui="dark"] .friends-panel .friend-card.playing { background: linear-gradient(90deg, #304a26, #2f392b 65%); }
:root[data-ui="dark"] .friends-panel .friend-card.request, :root[data-ui="dark"] .fp-empty.small { background: #212a1f; }
:root[data-ui="dark"] .fp-online { border-color: #2f392b; }