.q-graphics-button{width:auto!important;min-width:44px;min-height:44px;border:1px solid #416853;border-radius:12px;padding:8px 12px;background:#fffbea;color:#173f35;font:700 13px/1.3 Arial,sans-serif;white-space:nowrap;pointer-events:auto}
.q-graphics-dialog{box-sizing:border-box;width:min(660px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:2px solid #315e49;border-radius:20px;color:#173f35;background:#fffbea;font:16px/1.45 Arial,sans-serif;overflow:auto;overscroll-behavior:contain;box-shadow:0 14px 60px #0c292750}
.q-graphics-dialog::backdrop{background:#10352b75}
.q-graphics-dialog *{box-sizing:border-box}
.q-graphics-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;background:#fffbea;z-index:2;padding:12px 18px;border-bottom:1px solid #b9ccb4}
.q-graphics-dialog h2{font:700 22px/1.2 Arial;margin:0;letter-spacing:0;color:#173f35}
.q-graphics-dialog button{font:700 14px/1.3 Arial;min-height:44px;padding:10px;border:1px solid #71937c;border-radius:10px;color:#173f35;background:#fffbea;cursor:pointer}
.q-graphics-dialog>header button{width:44px;font-size:26px;padding:2px;flex:none}
.q-graphics-body{padding:0 18px 18px}
.q-graphics-body p{font:16px/1.45 Arial;margin:14px 0;color:#365743}
.q-graphics-dialog .graphics-presets{display:flex;flex-wrap:wrap;gap:7px}
.q-graphics-dialog .graphics-presets button{flex:1;min-width:78px}
.q-graphics-dialog button[aria-pressed=true],.q-graphics-dialog button.primary{background:#ffdf51;border-color:#315e49}
.q-graphics-dialog .graphics-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q-graphics-dialog .graphics-options label{display:grid;gap:8px;align-content:start;min-width:0;padding:12px;border:1px solid #b1c4ac;border-radius:12px;background:#edf3e5}
.q-graphics-dialog .graphics-options strong{font:700 16px/1.3 Arial;color:#173f35}
.q-graphics-dialog .graphics-options select{width:100%;max-width:100%;min-height:46px;font:16px Arial;background:#fffbea;color:#173f35;border:1px solid #71937c;border-radius:8px;padding:8px}
.q-graphics-dialog .graphics-options small{font:14px/1.4 Arial;color:#42614f}
.q-graphics-dialog .graphics-live{background:#173f35;color:#fffbea;border-radius:10px;padding:12px;font:700 14px/1.5 Arial}
.q-graphics-dialog .graphics-actions{display:flex;gap:8px;position:sticky;bottom:-1px;background:#fffbea;padding:10px 0}
.q-graphics-dialog .graphics-actions button{flex:1}
.q-graphics-dialog :focus-visible,.q-graphics-button:focus-visible{outline:3px solid #0b8083;outline-offset:2px}
@media(max-width:560px){.q-graphics-dialog .graphics-options{grid-template-columns:1fr}.q-graphics-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:14px}.q-graphics-body{padding:0 12px max(12px,env(safe-area-inset-bottom))}.q-graphics-dialog>header{padding:10px 12px}.q-graphics-button{font-size:12px;padding:6px;max-width:120px;white-space:normal}}
@media(max-height:500px) and (min-width:561px){.q-graphics-dialog{max-height:calc(100dvh - 8px)}.q-graphics-dialog>header{padding:6px 14px}}

/* Reserve room for the new control in existing compact HUDs. */
.q-graphics-button>span,.q-graphics-button>small{display:block;font:inherit;line-height:1.25}.q-graphics-button>small{font-size:11px}
html[data-phone-ui] .quack-ui #home-game .header-actions #graphics-open{width:calc(74 * var(--phone-unit))!important;min-width:calc(74 * var(--phone-unit));height:calc(44 * var(--phone-unit));min-height:44px;padding:calc(3 * var(--phone-unit));font:700 max(11px,calc(12 * var(--phone-unit)))/1.2 Arial}
html[data-phone-ui] .quack-ui #home-game #menu-link{max-width:calc(100% - calc(218 * var(--phone-unit)))}
@media(max-width:700px){#game .top-actions{gap:4px;flex-shrink:0}#game .top-actions #graphics-open{min-width:68px;width:68px!important;padding:3px;font-size:12px}#game .topbar .brand{min-width:0;overflow:hidden}#game .top-actions .edition{display:none}}

.quack-ui #home-game .home-header #graphics-open{height:44px;min-height:44px;font:700 13px/1.25 Arial;padding:4px 10px}
html[data-phone-ui][data-phone-layout=landscape] .quack-ui #home-game .wallet{right:calc(231 * var(--phone-unit))}
@media(orientation:landscape) and (max-height:600px){.quack-ui #game .hud .objectives{right:232px}.quack-ui #game .top-actions #graphics-open{width:68px!important;padding:3px;font-size:12px}}

.classic-style-option{padding:16px;margin:0 0 16px;border:2px solid #83c5ad;border-radius:14px;background:#183c35;color:#fff8de;display:grid;gap:10px}.classic-style-option label{font-size:16px;font-weight:800}.classic-style-option select{width:100%;min-height:44px;font:inherit;font-weight:700;font-size:16px;padding:10px;border:2px solid #87bca5;border-radius:9px;background:#fffbea;color:#173e33}.classic-style-option p{font-size:14px;line-height:1.5;margin:0;color:#e1eee4}body.playing #world{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}