:root{--bg-a: #d8ccb8;--bg-b: #e9ddd0;--hud-bg: rgba(33, 24, 18, .78);--hud-text: #f6f0e7;--accent: #c5792f}html,body{width:100%;height:100%;margin:0;padding:0}body{font-family:Avenir Next,Gill Sans,Trebuchet MS,sans-serif;background:radial-gradient(circle at 20% 15%,#efe8de 0%,transparent 42%),linear-gradient(155deg,var(--bg-a),var(--bg-b));color:#1d1712;overflow:hidden}#app{position:relative;width:100vw;height:100vh}#viewport{width:100%;height:100%}canvas{display:block;width:100%;height:100%;cursor:grab}canvas:active{cursor:grabbing}#turn-hud{position:absolute;top:1rem;left:1rem;display:grid;gap:.5rem;padding:.8rem .95rem;border-radius:.75rem;background:var(--hud-bg);color:var(--hud-text);box-shadow:0 .8rem 1.8rem #00000038;min-width:240px}#turn-indicator{font-weight:700;font-size:1rem;letter-spacing:.01em}#control-instructions{position:absolute;left:1rem;right:1rem;bottom:1rem;padding:.4rem .8rem;background:transparent;color:#705a3e;font-size:.88rem;line-height:1.3;text-align:center}#winner-banner{font-size:.95rem;color:#ffe8cf}#restart-btn{justify-self:start;border:none;border-radius:.55rem;padding:.5rem .8rem;background:var(--accent);color:#1f160f;font-weight:700;cursor:pointer}#restart-btn:hover{filter:brightness(1.08)}@media (max-width: 720px){#turn-hud{min-width:0;max-width:calc(100vw - 2rem)}#control-instructions{font-size:.8rem;padding:.55rem .75rem}}