/* Wooden pixel interface of the game (off with ?look=3d): parchment in wooden frames, a pixel font */
@font-face { font-family: 'Tiny5'; font-display: swap; src: url(../../fonts/tiny5-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Tiny5'; font-display: swap; src: url(../../fonts/tiny5-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; }

.look-wood {
  --wood-ink: #4a230b;
  --wood: #b06a2e;
  --wood-light: #d18a45;
  --parch: #f7dca6;
  --parch-dark: #e5bd78;
  --text: #3d2210;
  --text-soft: #6b4220;
  --panel: var(--wood);
  --ink: var(--text);
  font-family: 'Tiny5', 'Rubik', system-ui, sans-serif;
  /* the pixel font has one weight; a faked bold would smear its pixels */
  font-synthesis: none;
}
.look-wood img { image-rendering: pixelated; }
.look-wood .product-card, .look-wood .ad-card { color: var(--text); background: #fce8be; border: 3px solid #a5652a; border-radius: 3px; box-shadow: inset 0 -3px 0 var(--parch-dark); }
.look-wood .product-card.featured { background: #ffe3a0; border-color: #a85f0d; box-shadow: inset 0 0 0 2px #fff3cb, inset 0 -4px 0 #e3b65e; }
.look-wood .offer-label { color: #84500b; }

/* parchment boxes with a dark wooden rim */
.look-wood .stat, .look-wood .round-btn, .look-wood .chip, .look-wood #hint, .look-wood .toast {
  background: var(--parch); color: var(--text); border: 3px solid var(--wood-ink); border-radius: 4px;
  box-shadow: inset 0 -3px 0 var(--parch-dark), inset 0 2px 0 #fff3d2, 0 3px 0 rgba(40, 18, 4, 0.45);
}
.look-wood .stat { font-weight: 700; }
.look-wood .basket { background: var(--wood-light); color: #fff4dc; text-shadow: 2px 2px 0 rgba(60, 25, 5, 0.55); box-shadow: inset 0 -3px 0 var(--wood), 0 3px 0 rgba(40, 18, 4, 0.45); }
.look-wood .round-btn svg, .look-wood .stat svg { filter: drop-shadow(1px 1px 0 rgba(60, 25, 5, 0.35)); }
.look-wood .level-badge { border-radius: 4px; box-shadow: 0 0 0 3px var(--wood-ink), 0 3px 0 3px rgba(40, 18, 4, 0.45); }
/* the pixel font is sharp at whole multiples of 8 px; at 17 px its narrow 8 smears into a blot */
.look-wood .level-badge b { border-radius: 3px; background: var(--wood); color: #fff4dc; text-shadow: 2px 2px 0 rgba(60, 25, 5, 0.55); font-size: 24px; }
.look-wood .chip[class*='weather-'] { border-color: var(--wood-ink); }
.look-wood .toast.good { color: #2f6a14; }
.look-wood .toast.bad { color: #a0261a; }
.look-wood #hint { font-weight: 600; }

/* side buttons and the seed bar are wooden */
.look-wood .side-btn {
  background: var(--wood-light); color: #fff4dc; text-shadow: 2px 2px 0 rgba(60, 25, 5, 0.6); border: 3px solid var(--wood-ink); border-radius: 4px;
  box-shadow: inset 0 -4px 0 var(--wood), inset 0 2px 0 #f0b06a, 0 4px 0 rgba(40, 18, 4, 0.45);
}
.look-wood #seedbar {
  background: var(--wood); border: 3px solid var(--wood-ink); border-radius: 4px;
  box-shadow: inset 0 3px 0 var(--wood-light), inset 0 -3px 0 #8a4f20, 0 4px 0 rgba(40, 18, 4, 0.45);
}
.look-wood .seed-card, .look-wood .tool { background: var(--parch); border-radius: 3px; box-shadow: inset 0 -3px 0 var(--parch-dark), 0 2px 0 rgba(40, 18, 4, 0.4); }
.look-wood .seed-card.selected, .look-wood .tool.selected { box-shadow: 0 0 0 3px #d8382a, 0 5px 0 rgba(40, 18, 4, 0.45); }
.look-wood .seed-card .count { border-radius: 3px; background: var(--wood-ink); color: #fff4dc; }

/* labels over the beds */
.look-wood .tag { background: #fff1cf; color: var(--text); border: 2px solid var(--wood-ink); border-radius: 3px; box-shadow: 0 2px 0 rgba(40, 18, 4, 0.35); font-weight: 700; }
.look-wood .tag.ready { background: #ffe58a; box-shadow: 0 0 0 2px #d8a020, 0 2px 0 rgba(40, 18, 4, 0.35); }
.look-wood .tag.price { background: var(--wood-ink); color: #fff4dc; }
.look-wood .tag.price.ok { background: #4f8a2a; }
.look-wood .tag.pest { background: #c8352a; color: #fff; }
.look-wood .tag .size { border-radius: 2px; }
.look-wood .floater { text-shadow: 2px 2px 0 #3d2210, -1px -1px 0 #3d2210, 1px -1px 0 #3d2210, -1px 1px 0 #3d2210; }

/* buttons: wooden plaques with a dark rim, colored by their role */
.look-wood .btn {
  border: 3px solid var(--wood-ink); border-radius: 4px; color: #fff8e4; font-weight: 700; text-shadow: 2px 2px 0 rgba(50, 20, 4, 0.5);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22), inset 0 3px 0 rgba(255, 255, 255, 0.25), 0 4px 0 var(--wood-ink);
}
.look-wood .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 1px 0 var(--wood-ink); }
.look-wood .btn-green { background: #5f9a2e; }
.look-wood .btn-blue { background: var(--wood-light); }
.look-wood .btn-orange { background: #e0882a; }
.look-wood .btn-ad { background: #8a52c0; }

/* windows: parchment in a wooden frame */
.look-wood .screen.modal { background: rgba(40, 20, 6, 0.45); }
.look-wood .screen .panel {
  margin: 13px; max-width: min(calc(94vw - 26px), 460px); max-height: calc(100% - 34px); color: var(--text); background: var(--parch); border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 3px #fff3d2, inset 0 -8px 0 var(--parch-dark), 0 0 0 4px var(--wood-ink), 0 0 0 10px var(--wood), 0 0 0 13px var(--wood-ink), 0 14px 0 12px rgba(30, 12, 2, 0.4);
}
.look-wood .screen .panel.wide { max-width: min(calc(96vw - 26px), 780px); }
.look-wood .screen h2 { color: #6b2c0a; text-shadow: 2px 2px 0 #f0c47e; font-weight: 700; }
.look-wood .screen .sub { color: var(--text-soft); opacity: 1; }
.look-wood .close-btn { top: 8px; right: 8px; border: 3px solid var(--wood-ink); border-radius: 4px; background: #c8352a; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.look-wood .tab { border: 2px solid var(--wood-ink); border-radius: 3px; background: var(--wood-light); color: #fff4dc; text-shadow: 1px 1px 0 rgba(50, 20, 4, 0.5); }
.look-wood .tab.on { background: #fff1cf; color: var(--text); text-shadow: none; }
.look-wood .row, .look-wood .pet-card, .look-wood .alm-card, .look-wood .gift-day, .look-wood .board-row {
  background: rgba(255, 246, 220, 0.6); border: 2px solid #c99858; border-radius: 3px;
}
.look-wood .row[class*='rarity-'] { border-left-width: 6px; }
.look-wood .row-text small, .look-wood .pet-card small, .look-wood .alm-card small, .look-wood .gift-day small { color: var(--text-soft); opacity: 1; }
.look-wood .row .thumb, .look-wood .record-best img, .look-wood .egg-card .thumb { background: #fff8e4; border: 2px solid #c99858; border-radius: 3px; }
.look-wood .egg-card { background: rgba(255, 210, 63, 0.35); border: 2px solid #c99858; border-radius: 3px; }
.look-wood .rarity-uncommon .rarity, .look-wood .guarantee .rarity-uncommon { color: #2f7a1a; }
.look-wood .rarity-rare .rarity, .look-wood .guarantee .rarity-rare { color: #1f5fa8; }
.look-wood .rarity-epic .rarity, .look-wood .guarantee .rarity-epic { color: #7a3ab8; }
.look-wood .rarity-legendary .rarity, .look-wood .guarantee .rarity-legendary { color: #a8620a; }
.look-wood .rarity-mythic .rarity, .look-wood .guarantee .rarity-mythic { color: #c02a6a; }
.look-wood .maxed, .look-wood .record-best b { color: #a8620a; }
.look-wood .pips i { background: rgba(90, 45, 10, 0.25); border-radius: 1px; }
.look-wood .pips i.on { background: #e0a020; }
.look-wood .quest .progress, .look-wood .level-progress .progress { background: rgba(90, 45, 10, 0.3); border: 2px solid var(--wood-ink); border-radius: 2px; }
.look-wood .level-big, .look-wood .level-num { border-radius: 4px; }
.look-wood .land-card { border-radius: 4px; border-color: var(--wood-ink); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45); }
.look-wood .land-card.here { border-color: #ffd23f; }
.look-wood .beauty, .look-wood .coins-line { color: var(--text); }
.look-wood .mut, .look-wood .size-dot { border-radius: 2px; }

.look-wood #loading { background: #6b8a3a; }
@media (max-height: 520px) {
  .look-wood .close-btn { width: 32px; height: 32px; top: 5px; right: 5px; }
}
@media (max-width: 560px), (max-height: 520px) {
  .look-wood .level-badge b { font-size: 16px; }
}