:root { --ink:#0b1119; --accent:#68a4ff; --accent-2:#ef5c57; }
.game-shell { background:radial-gradient(circle at center,#243549,#0b1119 78%); }
canvas { image-rendering:auto; }
.orders { position:absolute; z-index:5; left:50%; bottom:8px; transform:translateX(-50%); min-width:310px; max-width:62%; margin:0; padding:7px 13px; text-align:center; color:#edf7fb; background:rgba(5,14,23,.84); border:1px solid rgba(151,214,244,.24); border-radius:4px; font:750 10px/1.25 system-ui,sans-serif; letter-spacing:.035em; text-transform:uppercase; box-shadow:0 5px 18px rgba(0,0,0,.28); }
.turn-button { position:absolute; z-index:8; right:14px; bottom:8px; min-height:30px; padding:0 12px; border:1px solid rgba(157,209,255,.58); border-radius:5px; color:#e9f6ff; background:rgba(13,42,64,.88); box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.35); font:750 10px system-ui,sans-serif; letter-spacing:.055em; cursor:pointer; }
.turn-button:hover,.turn-button:focus-visible { border-color:#fff; background:#245b82; outline:none; }
.turn-button[hidden] { display:none; }
@media (pointer:coarse) { .turn-button { display:none; } .orders { bottom:5px; max-width:54%; min-width:260px; font-size:9px; } }
@media (pointer:coarse) and (orientation:landscape) { .orders { top:38px; bottom:auto; max-width:48%; min-width:270px; } }
html.mobile-preview .turn-button,html.mobile-landscape-preview .turn-button { display:none; }
html.mobile-landscape-preview .orders { top:38px; bottom:auto; max-width:48%; min-width:270px; }