*{box-sizing:border-box}body{margin:0;background:#0b0e14;color:#ded0ac;font-family:monospace}main{max-width:1250px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font:bold 30px Georgia;letter-spacing:5px;margin:6px 0}small{font-size:10px;letter-spacing:3px;color:#a88364}button{background:#867352;color:#10151b;border:1px solid #ac9470;padding:10px 13px;font:bold 12px monospace;cursor:pointer}button:hover{background:#b09b75}canvas{display:block;width:100%;aspect-ratio:16/9;image-rendering:pixelated;border:2px solid #494341;margin:14px 0;outline:none;box-shadow:0 12px 60px #0008}.controls{display:flex;flex-wrap:wrap;gap:8px 15px;font-size:11px;line-height:25px;color:#a9aca5}kbd{background:#222d35;padding:4px 6px;border-bottom:2px solid #59615c;color:#e8d5ae}p{font-size:12px;line-height:1.7;color:#a7a59a}.touch{display:flex;justify-content:space-between;gap:4px}.touch div{display:flex;gap:4px}.touch button{touch-action:none;user-select:none;padding:11px}footer{font-size:10px;letter-spacing:2px;color:#667576;margin-top:20px}@media(min-width:1000px){.touch{display:none}}@media(max-width:600px){main{padding:7px}h1{font-size:22px}.controls{font-size:10px;gap:6px}.touch button{padding:10px 7px}footer{line-height:2}}

.arena-link{display:inline-block;color:#e4c58d;text-decoration:none;border:1px solid #776b52;padding:10px 12px;font:700 11px monospace;letter-spacing:1px;margin:4px 8px 4px 0}.arena-link:hover{background:#35454a}

/* Static pixel lettering: shaded fill and outline baked into the SVG grid. */
.brand-logo{display:block;width:344px;max-width:100%;height:auto;image-rendering:pixelated}.brand-title{line-height:1;margin:6px 0}header>div:first-child,header>a{min-width:0;flex-shrink:0}@media(max-width:700px){header{flex-wrap:wrap}.brand-logo{width:258px}}

.field-guide{margin:12px 0;border:1px solid #494341;background:#111820}.field-guide summary{cursor:pointer;padding:12px 14px;color:#cdb48a;font:bold 11px monospace;letter-spacing:1px}.field-guide[open]{padding-bottom:12px}.field-guide>p,.guide-grid{margin:8px 14px}.guide-grid{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:24px}.guide-grid h2{font:bold 12px monospace;color:#decda9}.guide-grid p{margin:8px 0}.field-guide summary:focus-visible{outline:2px solid #decda9;outline-offset:2px}@media(max-width:700px){.guide-grid{grid-template-columns:1fr;gap:8px}}

.brand-monogram{display:block;width:86px;height:48px;image-rendering:pixelated}