/* Additional block textures and game-like surface details. */
.site-header { border-bottom: 5px solid #3d663b; box-shadow: 0 4px 0 #263d2c; }
.brand-mark { transform: none; grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(2, 10px); gap: 0; }
.brand-mark i { box-shadow: inset -3px -3px #43683b; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: #80ae63; }
.brand-mark i:nth-child(4) { background: #5d432e; box-shadow: inset -3px -3px #3f3025; }
.hero { background: radial-gradient(circle at 72% 42%, #4d5b4a 0, transparent 38%), #121e1d; }
.hero:before { opacity: .28; background-size: 32px 32px; }
.scene { box-shadow: 0 0 0 5px #5f7e58, 0 0 0 10px #2a4233, 22px 26px 0 rgba(3,12,11,.63); }
.scene:before { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(223,238,180,.26), inset 0 0 80px rgba(0,0,0,.12); }
.world { shape-rendering: crispEdges; }
.scene-caption { z-index: 2; border-top: 4px solid #51754b; background: #1b2f25; }
.scene-caption-end { color: #8da878; font-size: 9px; letter-spacing: 4px; }
.eyebrow, .section-index { letter-spacing: .09em; }
.pixel-button { border: 3px solid #e8f5b3; border-right-color: #708751; border-bottom-color: #708751; box-shadow: inset -4px -4px 0 rgba(26,52,29,.2), 5px 5px 0 #243b29; }
.pixel-button:hover { box-shadow: inset -2px -2px 0 rgba(26,52,29,.2), 2px 2px 0 #243b29; }
.signal { position: relative; overflow: hidden; background-color: #e4e4d0; background-image: linear-gradient(rgba(57,87,57,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(57,87,57,.035) 1px,transparent 1px); background-size: 32px 32px; border-top: 14px solid #547a45; box-shadow: inset 0 8px 0 #765b3f; }
.signal:before { content: ''; position: absolute; right: -30px; top: 54px; width: 140px; height: 140px; background: linear-gradient(#79a960 0 22%, #6a543d 22% 100%); box-shadow: inset -22px -22px 0 rgba(31,47,31,.16), 12px 12px 0 rgba(28,41,30,.14); transform: rotate(14deg); opacity: .52; }
.signal-intro, .terminal-wrap { position: relative; z-index: 1; }
.terminal-wrap { border: 6px solid #596b54; box-shadow: 8px 8px 0 #a6b49e, 15px 15px 0 #72866e; }
.terminal-top { border-bottom: 4px solid #25392c; }
.finale { border-top: 9px solid #4a7144; box-shadow: inset 0 8px 0 #293f2e; }
.finale-blocks i { width: 55px; height: 55px; border: 0; opacity: .5; transform: none; background: linear-gradient(#75a55d 0 25%, #66523b 25% 100%); box-shadow: inset 0 -11px 0 rgba(30,36,25,.28), inset -11px 0 0 rgba(25,43,25,.18), 11px 11px 0 rgba(0,0,0,.2); animation: block-float 8s ease-in-out infinite; }
.finale-blocks i:nth-child(2), .finale-blocks i:nth-child(5) { background: linear-gradient(#65776c 0 25%, #4a6355 25% 100%); }
.finale-blocks i:nth-child(3) { background: linear-gradient(#d1c083 0 25%, #aa8f59 25% 100%); }
.finale-blocks i:nth-child(6) { background: linear-gradient(#6b9b5e 0 25%, #4e7d4b 25% 100%); }
@keyframes block-float { 50% { transform: translate(0,-16px); } }
@media(max-width:800px) { .signal:before { width: 90px; height: 90px; top: 28px; opacity: .22; } }
@media(max-width:510px) { .site-header { border-bottom-width: 4px; } .scene { box-shadow: 0 0 0 4px #5f7e58, 0 0 0 8px #2a4233, 13px 17px 0 rgba(3,12,11,.63); } .scene-caption-end { font-size: 7px; letter-spacing: 1px; } .finale-blocks i { opacity: .25; } .finale-blocks i:nth-child(1), .finale-blocks i:nth-child(4) { display: none; } }
@media(prefers-reduced-motion:reduce) { .finale-blocks i { animation: none; } }