/* Wooden interface of the pixel look (off with ?look=3d): parchment in wooden frames, the text stays Rubik */
.look-wood {
  --wood-ink: #4a230b;
  --wood: #b06a2e;
  --wood-light: #d18a45;
  --parch: #f7dca6;
  --parch-dark: #e5bd78;
  --parch-light: #fff1cf;
  --line: #c99858;
  --text: #3d2210;
  --text-soft: #6b4220;
  --amber: #a8620a;
  --panel: var(--parch);
  --ink: var(--text);
}
.look-wood img { image-rendering: pixelated; }
.look-wood .lb-avatar, .look-wood .price img { image-rendering: auto; }

/* parchment boxes with a dark wooden rim */
.look-wood .stat, .look-wood #wave-label, .look-wood #boss-bar, .look-wood #hint, .look-wood .toast, .look-wood .stars-total {
  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 .ico svg, .look-wood .stars-total svg { filter: drop-shadow(1px 1px 0 rgba(60, 25, 5, 0.35)); }
.look-wood #boss-bar .track { background: rgba(90, 45, 10, 0.3); border: 2px solid var(--wood-ink); border-radius: 2px; }
.look-wood .toast.good { color: #2f6a14; }
.look-wood .toast.bad { color: #a0261a; }
.look-wood .stars-total small { color: var(--amber); }
.look-wood .floater { text-shadow: 2px 2px 0 #3d2210, -1px -1px 0 #3d2210, 1px -1px 0 #3d2210, -1px 1px 0 #3d2210; }
.look-wood .floater.red { text-shadow: 2px 2px 0 #4a0a0a, -1px -1px 0 #4a0a0a, 1px -1px 0 #4a0a0a, -1px 1px 0 #4a0a0a; }
.look-wood .floater.purple { text-shadow: 2px 2px 0 #2a0a48, -1px -1px 0 #2a0a48, 1px -1px 0 #2a0a48, -1px 1px 0 #2a0a48; }

/* small round buttons and the battle cry are wooden plaques, their white icons stay readable */
.look-wood .round-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 .round-btn svg { filter: drop-shadow(2px 2px 0 rgba(60, 25, 5, 0.5)); }
.look-wood #btn-cry { background: var(--wood-light); border: 3px solid var(--wood-ink); box-shadow: inset 0 -4px 0 var(--wood), 0 4px 0 rgba(40, 18, 4, 0.45); }
.look-wood #btn-cry.ready { border-color: #e0a020; animation-name: cry-ready-wood; }
.look-wood #btn-cry:not(.ready) { border-color: var(--wood-ink); }
@keyframes cry-ready-wood { 50% { box-shadow: inset 0 -4px 0 var(--wood), 0 4px 0 rgba(40, 18, 4, 0.45), 0 0 16px rgba(255, 210, 63, 0.8); } }

/* 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; 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 svg { filter: drop-shadow(2px 2px 0 rgba(50, 20, 4, 0.45)); }
.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; }
.look-wood .btn-red { background: #c8352a; }
.look-wood .btn-teal { background: #2a8f84; }
.look-wood .btn .badge { border-radius: 3px; }

/* the build panel: parchment cards, the price on a dark wooden chip */
.look-wood .build-card, .look-wood .action-card, .look-wood .tower-card {
  background: var(--parch); color: var(--text); border: 3px solid var(--wood-ink); border-radius: 4px;
  box-shadow: inset 0 -4px 0 var(--parch-dark), inset 0 2px 0 #fff3d2, 0 4px 0 rgba(40, 18, 4, 0.45);
}
.look-wood .build-card .info, .look-wood .tower-card .info { color: var(--text-soft); opacity: 1; }
.look-wood .action-card.temper:not(:disabled) { border-color: #e0a020; box-shadow: inset 0 0 0 2px #e0a020, inset 0 -4px 0 var(--parch-dark), 0 4px 0 rgba(40, 18, 4, 0.45); }
.look-wood .tower-card .info.temper { color: var(--amber); }
.look-wood .build-card:not(:disabled):hover, .look-wood .action-card:not(:disabled):hover { border-color: #e0a020; }
.look-wood .action-card.sell.armed { border-color: #a0261a; background: #f2b39a; }
.look-wood .tower-card .ammo { background: rgba(90, 45, 10, 0.3); border: 2px solid var(--wood-ink); border-radius: 2px; }
.look-wood .ammo-fill { background: #e0a020; }
.look-wood .cost { border-radius: 3px; background: var(--wood-ink); color: #fff4dc; }
.look-wood .key { border-radius: 3px; background: var(--wood-ink); color: #fff4dc; }
.look-wood .sell-icon svg { filter: drop-shadow(1px 1px 0 rgba(60, 25, 5, 0.4)); }

/* 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); 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), 820px); }
.look-wood .screen h2 { color: #6b2c0a; text-shadow: 2px 2px 0 #f0c47e; }
.look-wood .screen .sub { color: var(--text-soft); opacity: 1; }
.look-wood .world-title { color: var(--text-soft); opacity: 1; }
.look-wood .level-card { border: 3px solid var(--wood-ink); border-radius: 4px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 4px 0 rgba(40, 18, 4, 0.45); }
.look-wood .level-card .resume { border-radius: 3px; border: 2px solid var(--wood-ink); }
.look-wood .upgrade-card {
  background: var(--parch-light); color: var(--text); border: 3px solid var(--wood-ink); border-radius: 4px;
  box-shadow: inset 0 0 0 3px #e0a020, inset 0 -6px 0 var(--parch-dark), 0 5px 0 var(--wood-ink);
}
.look-wood .result.win h2 { color: var(--amber); }
.look-wood .result.lose h2 { color: #a0261a; }
.look-wood .result .record { color: #2f7a1a; }
.look-wood .big-number { color: var(--amber); text-shadow: 2px 2px 0 #f0c47e; }

/* rows and tiles inside the windows */
.look-wood .forge-stars, .look-wood .daily-rule, .look-wood .perk, .look-wood .lb-row, .look-wood .shop-row, .look-wood .hero-card, .look-wood .tower-pick {
  background: rgba(255, 246, 220, 0.6); border: 2px solid var(--line); border-radius: 3px;
}
.look-wood .perk.owned, .look-wood .shop-row.owned { border-color: #e0a020; }
.look-wood .lb-row.me, .look-wood .hero-card.picked, .look-wood .tower-pick.picked { background: rgba(255, 210, 63, 0.35); border-color: #e0a020; }
.look-wood .hero-card { border-width: 3px; }
.look-wood .perk-icon, .look-wood .shop-icon { background: var(--parch-light); border: 2px solid var(--line); border-radius: 3px; }
.look-wood .lb-avatar { background: var(--parch-dark); }
.look-wood .pips i { background: rgba(90, 45, 10, 0.25); border-radius: 1px; }
.look-wood .pips i.on { background: #e0a020; }
.look-wood .perk-max, .look-wood .lb-score, .look-wood .shop-owned, .look-wood .loadout-count { color: var(--amber); }
.look-wood .daily-rule { border-color: #2a8f84; }
.look-wood .rule-name, .look-wood .hero-line.cry { color: #1f6f67; }
.look-wood .hero-stat b { background: rgba(90, 45, 10, 0.3); border-radius: 2px; }
.look-wood .hero-stat u { background: linear-gradient(90deg, #5f9a2e, #e0a020); }

.look-wood #loading { background: #6b8a3a; }