/* Visual overrides for the 2D graphics preview. */
:root { --gold:#bea377; --gold-bright:#e7cf9b; --panel-bg:rgba(19,39,36,.94); --panel-border:rgba(174,153,112,.58); --font-heading:'Segoe UI',sans-serif; --font-ui:'Segoe UI',sans-serif; }
#game-container { background:#253a34; height:100dvh; }
#viewport-container { min-height:0; }
#top-hud { background:#172b27; flex-shrink:0; }
#chat-dock { background:#162c28; height:178px; flex-shrink:0; margin:8px 12px 10px; }
.game-title { font-size:20px; letter-spacing:1.5px; }
.glass-panel { box-shadow:0 3px 14px rgba(0,0,0,.24); }
.glass-panel::before,.glass-panel::after { opacity:.5; }
.title-tag { display:none; }
#hint-bubble { color:#f4e7c5; background:rgba(22,46,39,.85); border-color:#ad966a; }
#action-bar { padding:8px; background:rgba(22,46,39,.88); }
.act-btn { border-color:#8d805e; }
.live-dot { background:#86c59f; box-shadow:0 0 7px #86c59f; }
.avatar-icon { background-image:url('graphics2d-20261009/assets2d/walk-atlas.png'); background-size:176px 176px; background-position:-1px -3px; }
#virtual-dpad { opacity:.9; }
#chat-input { user-select:text; }
@media(max-width:900px) {
 #top-hud { height:76px; padding:5px 8px; gap:6px; }
 #player-profile { min-width:210px; padding:5px 8px; gap:7px; }
 .avatar-box { width:42px; height:42px; }
 .avatar-icon { width:34px;height:34px;background-size:140px 140px; }
 .player-title,.currency-row,#server-status { display:none; }
 #minimap-panel { padding:4px 7px; gap:5px; }
 .radar-box { display:none; }
 #chat-dock { height:145px; margin:4px 8px 6px; }
 .hint-toast { top:8px; font-size:10px; padding:4px 9px;white-space:nowrap; }
 #action-bar { bottom:10px;right:10px;gap:5px; }
 .act-btn { min-width:74px;padding:6px 8px;font-size:10px; }
 #virtual-dpad { bottom:12px;left:12px;grid-template-columns:30px 30px 30px;grid-template-rows:30px 30px 30px;gap:3px; }
 .chat-tabs { overflow-x:auto; }
 .tab-btn { padding:4px 6px;white-space:nowrap; }
}
@media(max-height:520px) {
 #top-hud { height:62px; }
 #chat-dock { height:112px; }
 .chat-header { padding:3px 8px; }
 #chat-messages { min-height:15px; }
 .chat-input-container { padding:4px 8px; }
 #hint-bubble { display:none; }
}
@media(max-width:520px) {
 #player-profile { min-width:180px; }
 #minimap-panel { min-width:0; }
 .zone-name { font-size:10px; }
 .hud-buttons { gap:3px; }
 .hud-btn { padding:4px;font-size:10px; }
 #btn-sound { display:none; }
 #action-bar { display:none; }
 #chat-channel-select { max-width:85px; }
}

.avatar-icon { background-size:640px 640px; background-position:-66px -5px; }
@media(max-width:900px) {
 .avatar-icon { background-size:520px 520px; background-position:-54px -4px; }
 .player-details { gap:2px; }
 .bar-container { height:12px; }
 .bar-text { font-size:8px;line-height:12px; }
 .name-row { margin-bottom:1px; }
 .player-name { font-size:12px; }
 #minimap-panel { align-items:center; }
 #btn-sound { display:none; }
 #action-bar { flex-direction:row; bottom:8px;right:8px;padding:4px;gap:4px; }
 #action-bar .act-btn { min-width:32px;min-height:32px;padding:4px; }
 #action-bar .btn-label { display:none; }
 #action-bar .btn-icon { font-size:16px; }
}

@media(max-width:900px) { .bar-text { display:none; } }