/* The site in the style of the farm: Sprout Lands colours (its palette), wooden frames and plank buttons
   (static/ui/, our own pixel art at 2x), and a pixel font for headings and buttons. */
@font-face {
  font-family: 'Jersey 10'; font-display: swap; src: url('../fonts/jersey10-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jersey 10'; font-display: swap; src: url('../fonts/jersey10-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --bg: #e8cfa6;
  --surface: #f3e5c2;
  --field: #f3f4e7;
  --text: #5f3d4f;
  --muted: #8c6660;
  --accent: #a35b70;
  --accent-text: #f3f4e7;
  --border: #c49a6c;
  --wood-dark: #754c60;
  --felt: #67835c;
  --felt-text: #f3f4e7;
  --red: #c8283d;
  --black: #1d1b22;
  --meld: #e8eeaa;
  --dead: #f3d8c5;
  --laid: #d6f1cd;
  --pixel: 'Jersey 10', system-ui, sans-serif; /* a pixel font: it runs small, so sizes using it are bumped */
  color-scheme: light;
}
* { box-sizing: border-box; }
html, * { scrollbar-color: var(--border) var(--surface); }
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border: 3px solid var(--surface); box-shadow: inset 0 0 0 2px var(--wood-dark); }
::-webkit-scrollbar-thumb:hover { background: #b68962; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; letter-spacing: .03em; }
h1 { font-size: 2.4em; } h2 { font-size: 1.8em; } h3 { font-size: 1.35em; }
h1 { margin: 8px 0 16px; }
.muted { color: var(--muted); }
.error { color: var(--accent); min-height: 1.5em; }
.hidden { display: none !important; }

/* The wooden pieces. Frames: 6px slices at 2x. Buttons and fields: 4px slices at 2x. */
.card, .farm-shop, .farm-away, .farm-hotbar, .notify-panel, .toolbar, .table, .board, .paper, .c4-board {
  border: 12px solid transparent; border-image: url('../ui/frame.png') 6 / 12px round; border-radius: 0;
  background-clip: padding-box; image-rendering: pixelated; box-shadow: 0 4px 0 rgba(117, 76, 96, .22);
}
.card, .farm-shop, .farm-away, .farm-hotbar, .notify-panel, .toolbar { background-color: var(--surface); }
img, video, svg { image-rendering: auto; }

button { font: 20px/1.1 var(--pixel); padding: 3px 8px; border: 8px solid transparent; border-image: url('../ui/button.png') 4 fill / 8px stretch;
  border-radius: 0; background: none; color: var(--text); cursor: pointer; image-rendering: pixelated; }
button:hover:not(:disabled) { filter: brightness(1.06); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; }
button[type=submit], button.accent { border-image-source: url('../ui/button-green.png'); color: var(--accent-text); text-shadow: 0 2px 0 #566560; }
a.button { display: inline-block; font: 20px/1.1 var(--pixel); padding: 3px 8px; border: 8px solid transparent; border-image: url('../ui/button.png') 4 fill / 8px stretch;
  color: var(--text); text-decoration: none; image-rendering: pixelated; }
a.button:hover { filter: brightness(1.06); }
a.button.play { margin-left: auto; border-image-source: url('../ui/button-green.png'); color: var(--accent-text); text-shadow: 0 2px 0 #566560; }
button.link { border: 0; border-image: none; background: none; padding: 0; color: var(--accent); }
button.link.danger { color: var(--muted); }
input[type=text], input[type=password], input[type=file], input[type=number], select, textarea {
  font: inherit; padding: 2px 6px; border: 8px solid transparent; border-image: url('../ui/inset.png') 4 fill / 8px stretch;
  border-radius: 0; background: none; color: var(--text); width: 100%; image-rendering: pixelated; }
input[type=file]::file-selector-button { font: 18px/1.1 var(--pixel); color: var(--text); padding: 2px 8px; margin-right: 10px; cursor: pointer;
  border: 6px solid transparent; border-image: url('../ui/button.png') 4 fill / 6px stretch; background: none; image-rendering: pixelated; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid #f2cf8c; outline-offset: 0; }

.card { padding: 12px; }
.flash { border: 8px solid transparent; border-image: url('../ui/parchment.png') 4 fill / 8px stretch; padding: 2px 8px; margin-bottom: 12px; image-rendering: pixelated; }

/* The top bar: planks. */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px;
  background: #c49a6c url('../ui/planks.png') 0 0 / 64px 32px; image-rendering: pixelated; border-bottom: 4px solid var(--wood-dark); }
.topbar nav, .topbar .who { display: flex; gap: 16px; align-items: center; }
.topbar nav a { font-family: var(--pixel); font-size: 1.45em; text-decoration: none; color: var(--field); text-shadow: 0 2px 0 var(--wood-dark); }
.topbar nav a:hover { color: #f2cf8c; }
.topbar .brand { color: #f3d8c5; font-size: 1.6em; }
.topbar .who { color: var(--field); text-shadow: 0 2px 0 var(--wood-dark); font: 1.2em var(--pixel); }
.topbar .who small { color: var(--surface); opacity: .8; }
.topbar button.link { color: var(--field); text-shadow: 0 2px 0 var(--wood-dark); font-size: 1em; }

.login { max-width: 340px; margin: 12vh auto; display: grid; gap: 14px; text-align: center; }
.login h1 { color: var(--accent); font-size: 2.5em; margin: 0; }
.login label { display: grid; gap: 4px; text-align: left; color: var(--muted); font: 1.25em var(--pixel); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tile { text-decoration: none; color: var(--text); display: grid; gap: 8px; font: 1.5em/1.2 var(--pixel); transition: transform .12s; }
.tile:hover { transform: translateY(-3px); }
.tile span { font-size: 2.2em; }

.upload { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; margin-bottom: 16px; }
@media (max-width: 640px) { .upload { grid-template-columns: 1fr; } }
.filters { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.filters a { color: var(--muted); text-decoration: none; }
.filters a { font: 1.25em var(--pixel); }
.filters a.active { color: var(--accent); font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.item { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; border-width: 6px; border-image-width: 6px; }
.item img, .item video { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--wood-dark); }
.item audio { width: 100%; padding: 12px; }
.item .file { display: block; padding: 32px 16px; word-break: break-all; text-decoration: none; }
.item figcaption { padding: 10px 12px; display: grid; gap: 4px; }
.item figcaption p { margin: 0; }
.item .actions { display: flex; gap: 12px; }
.item .actions form { display: inline; }

.games { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 16px; }
.games li { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Gin Rummy table */
.table { background-color: var(--felt); color: var(--felt-text); padding: 16px; display: grid; gap: 18px; }
.table .muted { color: #d2e077; }
.player-line { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.score { background: rgba(0,0,0,.25); padding: 0 10px; border-radius: 99px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #777; display: inline-block; }
.dot.online { background: #5de08f; }
.middle { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.pile { display: grid; justify-items: center; gap: 4px; }
.status { font-size: 1.1em; font-weight: 600; }

.hand { display: flex; flex-wrap: wrap; gap: 14px; }
.hand.backs { gap: 0; }
.hand.backs .pc { margin-right: -28px; }
.group { display: flex; gap: 4px; padding: 6px; border-radius: 10px; }
.group.meld { background: rgba(255,255,255,.14); }
.group.laid { background: rgba(120,150,255,.25); }
.group.dead { background: rgba(0,0,0,.18); }

.pc { width: 54px; height: 78px; border-radius: 7px; background: #fff; color: var(--black); border: 1px solid #ccc; padding: 4px 6px; display: flex; flex-direction: column; justify-content: space-between; font-weight: 700; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .12s; text-align: left; }
.pc span { font-size: 1.6em; line-height: 1; align-self: flex-end; }
.pc.red { color: var(--red); }
.pc.back { background: repeating-linear-gradient(45deg, #b8354f 0 6px, #9c2a42 6px 12px); border: 3px solid #fff; }
.pc.empty { background: transparent; border: 2px dashed rgba(255,255,255,.35); box-shadow: none; }
button.pc { cursor: pointer; }
button.pc:disabled { opacity: 1; cursor: default; }
button.pc:not(:disabled):hover { transform: translateY(-4px); }
.pc.selected { transform: translateY(-12px); outline: 3px solid var(--accent); }
.pc.fresh { outline: 2px dashed #ffd66b; }
.hand.small .pc { width: 40px; height: 58px; font-size: .8em; padding: 3px 4px; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.result { background: rgba(0,0,0,.22); border-radius: 12px; padding: 12px 16px; display: grid; gap: 10px; }
.result h2 { margin: 0; }
.reveal { display: grid; gap: 4px; }
.log { font-size: .9em; }
.log ol { list-style: none; padding: 0; margin: 8px 0 0; max-height: 200px; overflow: auto; }
.table .error { color: #ffd0da; }
@media (max-width: 520px) {
  .pc { width: 38px; height: 56px; padding: 2px 4px; font-size: .8em; }
  .hand { gap: 8px; }
  .group { gap: 2px; padding: 4px; flex-wrap: wrap; }
}

/* Games list */
.game-section { margin-bottom: 28px; }
.section-head { display: flex; align-items: center; gap: 16px; }
.section-head h2 { margin: 0; }
.turn-badge { font: 1.1em var(--pixel); padding: 0 6px; border: 6px solid transparent; border-image: url('../ui/parchment.png') 4 fill / 6px stretch; color: var(--muted); image-rendering: pixelated; }
.turn-badge.mine { border-image-source: url('../ui/button-green.png'); color: var(--accent-text); text-shadow: 0 2px 0 #566560; font-weight: 600; }

/* Chess */
.chess { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.board-col { flex: 0 1 560px; min-width: 0; width: 100%; max-width: 560px; }
.board { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; overflow: hidden; container-type: inline-size; }
.sq { position: relative; border: 0; border-image: none; border-radius: 0; padding: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sq.light { background: #f3e5c2; }
.sq.dark { background: #b68962; }
.sq.last::before, .sq.selected::before { content: ''; position: absolute; inset: 0; background: rgba(255, 221, 60, .45); }
.sq.check::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(230,30,30,.9) 0, rgba(230,30,30,.4) 50%, transparent 72%); }
.sq.target::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(20, 60, 20, .35); }
.sq.capture::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; border: 5px solid rgba(20, 60, 20, .35); }
.piece { position: relative; z-index: 1; font-size: 10cqw; line-height: 1; font-family: 'DejaVu Sans', 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif; user-select: none; }
.piece.w { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 1px 2px rgba(0,0,0,.5); }
.piece.b { color: #111; text-shadow: 0 0 1px #fff4; }
.sq i { position: absolute; font-style: normal; font-size: 2.2cqw; font-weight: 700; opacity: .7; color: #5a3f25; }
.sq.dark i { color: #f3e5c2; }
.sq .rank { top: 2px; left: 3px; }
.sq .file { bottom: 1px; right: 4px; }
.promo { display: flex; gap: 8px; margin-top: 10px; container-type: inline-size; }
.promo button { width: 64px; height: 64px; padding: 0; }
.promo .piece { font-size: 44px; }
.chess-side { flex: 1 1 240px; display: grid; gap: 8px; }
.chess-side .error:empty, .chess-side .actions:empty, .c4 .error:empty, .c4 .actions:empty { display: none; }
.chess-side .actions { margin-top: 0; }
.moves { margin: 8px 0 0; padding-left: 2.2em; max-height: 360px; overflow: auto; font-variant-numeric: tabular-nums; }
.moves li span { display: inline-block; min-width: 5em; }

/* Connect Four */
.c4 { max-width: 520px; margin: 0 auto; display: grid; gap: 12px; }
.c4-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.c4-player { display: flex; align-items: center; gap: 8px; }
.c4 .score { background: var(--border); color: var(--text); }
.disc-icon { display: inline-block; width: .9em; height: .9em; border-radius: 50%; vertical-align: -.1em; margin: 0 4px; }
.disc-icon.red, .disc.red { background: #e0344f; }
.disc-icon.yellow, .disc.yellow { background: #f4c430; }
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 8px; background-color: #577297; }
.c4-col { display: grid; gap: 6px; padding: 0; border: 0; border-image: none; border-radius: 99px; background: transparent; }
.c4-col:disabled { cursor: default; opacity: 1; }
.c4-board.active .c4-col:not(:disabled):hover { background: rgba(255,255,255,.12); }
.c4-cell { aspect-ratio: 1; border-radius: 50%; background: var(--bg); box-shadow: inset 0 3px 6px rgba(0,0,0,.35); position: relative; overflow: visible; }
.disc { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.disc.drop { animation: c4-drop calc(.08s * var(--fall) + .12s) cubic-bezier(.5, 0, 1, 1); }
.disc.win { outline: 4px solid #fff; outline-offset: -8px; animation: c4-pulse 1s ease-in-out infinite alternate; }
@keyframes c4-drop { from { transform: translateY(calc(-118% * var(--fall))); } }
@keyframes c4-pulse { to { transform: scale(.88); } }
@media (prefers-reduced-motion: reduce) { .disc.drop, .disc.win { animation: none; } }

/* Drawing */
.drawings .preview svg { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--border); }
.draw { display: grid; gap: 10px; }
.draw-head { display: flex; justify-content: space-between; align-items: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 4px 6px; }
.toolbar .spacer { flex: 1; }
.swatches, .sizes { display: flex; gap: 6px; align-items: center; }
.swatch { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); border-image: none; box-shadow: 0 0 0 2px var(--wood-dark); }
.swatch.on { box-shadow: 0 0 0 2px var(--accent); }
#custom-color { width: 32px; height: 32px; padding: 0; border: 0; border-image: none; background: none; cursor: pointer; }
.size { width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; }
.size i { display: block; border-radius: 50%; background: var(--text); max-width: 22px; max-height: 22px; }
.size.on, .tool.on { border-image-source: url('../ui/button-green.png'); color: var(--accent-text); }
.tool { padding: 6px 12px; }
.paper { position: relative; width: min(100%, calc((100dvh - 210px) * 4 / 3)); justify-self: center; background-color: #fff; overflow: hidden; }
#canvas { display: block; width: 100%; aspect-ratio: 4 / 3; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.opacity { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9em; }
.opacity input { width: 90px; accent-color: var(--accent); }
.opacity output { min-width: 3.2em; font-variant-numeric: tabular-nums; }
.draw .error:empty { display: none; }

/* Farm: the game fills the window below the top bar */
.farm-page { height: 100dvh; display: flex; flex-direction: column; }
.farm-page main { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.farm-page .flash { margin: 8px; }
.farm { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #2f7d32; user-select: none; -webkit-user-select: none; }
#farm-game { position: absolute; inset: 0; }
#farm-game canvas { display: block; }
#farm-hud { position: absolute; inset: 0; pointer-events: none; font-size: 15px; }
#farm-hud > * { pointer-events: auto; }
.farm-status { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #fff; font-weight: 600; background: rgba(0,0,0,.35); }
.farm.loading .farm-status, .farm.offline .farm-status { display: flex; }
.farm.offline .farm-status::after { content: ' (reconnecting)'; }
.farm-missing { max-width: 520px; margin: 40px auto; }

.farm-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none !important; }
.farm-coins, .farm-partner { pointer-events: auto; color: var(--text); padding: 0 6px; font: 20px/1.3 var(--pixel); border: 8px solid transparent; border-image: url('../ui/button.png') 4 fill / 8px stretch; image-rendering: pixelated; }
.farm-partner { font-weight: 500; display: flex; align-items: center; gap: 6px; }

.farm-hotbar { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 2px; max-width: calc(100% - 20px); overflow: auto hidden; scrollbar-width: thin; }
.farm-slot { position: relative; flex: none; width: 52px; height: 52px; padding: 0; border-image-source: url('../ui/inset.png'); color: var(--text); }
.farm-slot:hover:not(:disabled) { filter: brightness(1.04); }
.farm-slot.on { border-image-source: url('../ui/button-green.png'); }

.farm-slot-count { position: absolute; right: -4px; bottom: -6px; font: 16px var(--pixel); color: var(--text); text-shadow: 1px 0 var(--field), -1px 0 var(--field), 0 1px var(--field), 0 -1px var(--field); }
.farm-slot-key { position: absolute; left: -4px; top: -7px; font: 13px var(--pixel); opacity: .65; }
.farm-slot-seed { position: absolute; left: -5px; bottom: -6px; font: 12px/1 var(--pixel); background: var(--wood-dark); color: var(--surface); padding: 0 3px; }

.farm-tooltip { position: absolute; max-width: 260px; color: var(--text); padding: 2px 6px; font: 18px/1.2 var(--pixel); border: 8px solid transparent; border-image: url('../ui/parchment.png') 4 fill / 8px stretch; image-rendering: pixelated; pointer-events: none !important; }
.farm-affection { position: relative; display: block; width: max-content; font-size: 14px; letter-spacing: 1px; line-height: 1.2; }
.farm-affection-empty { color: rgba(117, 76, 96, .25); }
.farm-affection-full { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #d9467a; }
.farm-roofs { display: flex; gap: 8px; flex-wrap: wrap; }
.farm-roof { width: 36px; height: 36px; border-radius: 50%; padding: 0; border: 3px solid var(--surface); border-image: none; box-shadow: 0 0 0 2px var(--wood-dark); }
.farm-roof.on { box-shadow: 0 0 0 3px var(--wood-dark), 0 0 0 6px #f2cf8c; }
.farm-roof-pink { background: #e8a0b4; } .farm-roof-orange { background: #f0b36b; } .farm-roof-yellow { background: #e6d36a; }
.farm-roof-green { background: #9ccc6b; } .farm-roof-teal { background: #8fd3c8; } .farm-roof-lavender { background: #b2aee8; }
.farm-frame-photo { display: block; max-width: 100%; max-height: 60vh; margin: 12px auto 0; border: 4px solid var(--wood-dark); }
.farm-frame-actions { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.farm-frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; }
.farm-frame-pick { padding: 0; aspect-ratio: 1; overflow: hidden; border: 3px solid var(--wood-dark); border-image: none; background: var(--border); }
.farm-frame-pick.on { border-color: #78a158; box-shadow: 0 0 0 3px #a4c263; }
.farm-frame-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.farm-name-form { display: flex; gap: 8px; margin-top: 12px; }
.farm-name-input { flex: 1; min-width: 0; }
.farm-toast { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); color: var(--accent-text); padding: 2px 8px; font: 20px var(--pixel); text-shadow: 0 2px 0 #713970; border: 8px solid transparent; border-image: url('../ui/button-pink.png') 4 fill / 8px stretch; image-rendering: pixelated; }

.farm-shop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; color: var(--text); padding: 8px 12px; }
.farm-shop-head { display: flex; align-items: center; gap: 12px; }
.farm-shop-head h2 { margin: 0; flex: 1; }
.farm-shop h3 { margin: 14px 0 6px; font-size: 1.35em; color: var(--muted); letter-spacing: .04em; }
.farm-shop-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 2px dotted var(--border); }
.farm-shop-row > span:first-child { flex: 1; }
.farm-shop-row button { padding: 1px 6px; font-size: 18px; }

.farm-dpad { position: absolute; left: 14px; bottom: 80px; width: 132px; height: 132px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 2px; touch-action: none; }
.farm-dpad button { font-size: 18px; padding: 0; opacity: .85; }
.farm-dpad button:nth-child(1) { grid-area: 1 / 2; }
.farm-dpad button:nth-child(2) { grid-area: 2 / 1; }
.farm-dpad button:nth-child(3) { grid-area: 2 / 3; }
.farm-dpad button:nth-child(4) { grid-area: 3 / 2; }
.farm-sprite { display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; vertical-align: middle; }
.farm-slot .farm-sprite.farm-slot-icon { margin-top: 8px; }
.farm-emoji.farm-slot-icon { font-size: 26px; line-height: 48px; }
.farm-shop-name { flex: 1; display: flex; align-items: center; gap: 6px; }
.farm-credit { position: absolute; right: 10px; bottom: 4px; font-size: 11px; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px #000; pointer-events: none !important; }
@media (max-width: 700px) { .farm-credit { bottom: auto; top: 44px; } }
.farm-shop-hint { margin: -4px 0 4px; font-size: .85em; }
.farm-rotate { position: absolute; right: 12px; bottom: 16px; width: 52px; height: 52px; font-size: 22px; padding: 0; }
@media (max-width: 700px) { .farm-rotate { bottom: 84px; } }
.farm-top-left { display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.farm-top-left > * { pointer-events: auto; }
.farm-budget { font-weight: 500; }
.farm-upgrade { align-items: flex-start; }
.farm-upgrade-text { flex-direction: column; align-items: flex-start !important; gap: 0 !important; }
.farm-storage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.farm-storage-col .farm-shop-row button { padding: 3px 8px; font-size: .85em; }
@media (max-width: 640px) { .farm-storage { grid-template-columns: 1fr; } }
.farm-shop { width: min(620px, calc(100% - 24px)); }
.farm-wardrobe-row { display: flex; flex-wrap: wrap; gap: 6px; }
.farm-wardrobe-option { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; }
.farm-wardrobe-option.on { border-image-source: url('../ui/button-green.png'); color: var(--accent-text); }
.farm-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); }
.farm-away { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); color: var(--text); padding: 6px 10px; }
.farm-away-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 1.3em var(--pixel); }
.farm-away ul { margin: 6px 0 0; padding-left: 1.2em; }
.farm-letter-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 4px; }
.farm-letter-row { font-family: system-ui, sans-serif; font-size: 15px; }
.farm-letter-row.unread { border-image-source: url('../ui/button-pink.png'); color: var(--accent-text); font-weight: 600; }
.farm-letter-row.unread .farm-letter-date { color: var(--surface); }
.farm-letter-date { color: var(--muted); min-width: 4em; font-size: .85em; }
.farm-letter-snippet { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.farm-letter-body { white-space: pre-wrap; padding: 4px 8px; border: 8px solid transparent; border-image: url('../ui/parchment.png') 4 fill / 8px stretch; image-rendering: pixelated; }
.farm-letter-text { min-height: 90px; resize: vertical; }
.farm-letter-attach { display: flex; gap: 6px; margin: 8px 0; }
.farm-letter-attach select { flex: 1; min-width: 0; }
.farm-letter-attach input { width: 72px; }
.farm-letter-attached { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.farm-chip { padding: 0 6px; font-size: .85em; }

/* Notification settings (the bell in the top bar) */
.notify { position: relative; }
.notify-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 280px; padding: 8px 10px; display: grid; gap: 8px; color: var(--text); text-shadow: none; font-family: system-ui, sans-serif; }
.notify-kind { display: flex; align-items: center; gap: 6px; }