/* Shared height and text inset for editable fields throughout the game */
#game-shell{--field-background:rgba(14,14,14,.8);--field-border-color:rgb(0,0,0);--field-text-color:#eee0bc}
#game-shell :is(input:not([type]),input:is([type=text],[type=password],[type=email],[type=search],[type=tel],[type=url],[type=number]),textarea){
  box-sizing:border-box;
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  padding-left:4px!important;
}

/* Reuse the email field appearance for new editable text fields */
#game-shell .game-text-input{min-width:0;padding:0 8px;border:1px solid var(--field-border-color);border-radius:0;font:400 11px 'IBM Plex Sans',sans-serif}

/* Profile typography; all black buttons share the original states in hud.css */
#game-shell #profile-nav{
  font:11px/22px Arial,sans-serif;
  color:#ccc;
  text-shadow:none;
  box-shadow:none!important;
  border-radius:0;
}

#game-shell :is(#profile-dialog,#player-profile-dialog,#shop-panel)
  :where(h2,h3,h4,p,small,b,strong,span,dt,dd,label,input,select,textarea,button,div,a,em,legend):not(:where(.rank-star,.level-star,.artifact-icon)){font-size:11px!important}

#game-shell :is(#profile-nickname,#profile-player-id,#player-profile-name,#player-profile-id,#profile-clan-id,#player-profile-clan-id),
#game-shell :is(#profile-nickname,#player-profile-name) :where(*){font-size:12px!important}

#game-shell :is(#profile-dialog,#player-profile-dialog) .skill-row>b{font-size:12px!important}

#game-shell :is(#shop-weapons,#profile-inventory-list,#player-profile-inventory-list) .armory-weapon-name{font-family:Arial,sans-serif!important;font-size:11px!important;font-weight:700!important;font-style:normal;letter-spacing:normal;color:rgb(200,200,200)}

#game-shell :is(#profile-dialog,#player-profile-dialog,#shop-panel) :is(.armory-characteristics,.armory-requirements),
#game-shell :is(#profile-dialog,#player-profile-dialog,#shop-panel) :is(.armory-characteristics,.armory-requirements)
  :where(h4,dl,dt,dd,span,b,strong,small){font-size:11px!important}

.lobby-overlay>.topbar .currency-icon{
  display:block;
  flex:0 0 20px;
  width:20px;
  height:20px;
  object-fit:contain;
}

/* SettingsUI: Basic actions and three Advanced weapon/key pairs */
#game-shell #settings-dialog,
#game-shell #settings-dialog :where(h2,h3,h4,p,small,b,strong,span,dt,dd,label,input,select,textarea,button,div,a,em,legend,output,option):not(:where(#sound-btn,#fullscreen-btn)),
#game-shell .settings-picker :where(button,span,select,option){font-size:11px!important}
#game-shell #settings-dialog :is(.checkbox-label,.settings-checkbox){text-transform:none}
#game-shell #settings-dialog{width:364px;height:auto;max-height:calc(100% - 8px);padding:4px;gap:4px}
#game-shell #settings-dialog .settings-content{display:block;min-height:0;overflow:hidden;padding:0}
#settings-dialog:not(.lobby-settings) :is(#settings-title,.settings-audio){display:none}
#game-shell #settings-dialog:not(.lobby-settings) .settings-content{flex:0 0 auto}
#settings-dialog:not(.lobby-settings) .settings-controls{height:var(--settings-controls-height,309px)}
#game-shell #settings-dialog .dialog-actions{gap:4px;margin:0}
#game-shell #settings-dialog .dialog-actions button{min-width:0;padding-inline:4px}
#game-shell #settings-dialog #settings-actions{flex-direction:column;align-items:flex-start;flex-shrink:0;margin:auto 0 0;padding-top:4px}
#game-shell #settings-dialog #settings-actions button{flex:0 0 22px;width:100%}
#settings-dialog .settings-game-actions{margin-top:0}
.settings-controls{font:11px Arial,sans-serif}
.settings-controls-main{min-width:0}
.settings-controls-audio{display:none}
.settings-tabs{display:flex;gap:4px;flex:none;margin-bottom:4px}
.settings-lobby-tabs{display:none}
#game-shell .settings-tabs button{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip;font:11px Arial,sans-serif}
#game-shell #settings-dialog .character-binding-row{display:grid;grid-template-columns:minmax(0,1fr) 50%;gap:4px;min-height:24px;padding:1px 0;border:0}
#game-shell #settings-dialog #settings-basic-panel .character-binding-row{min-height:22px;padding-block:0}
#game-shell #settings-dialog #settings-advanced-panel .character-binding-row{min-height:22px;margin-top:4px;padding-block:0}
#game-shell #settings-dialog .character-binding-row label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip;font:11px Arial,sans-serif;letter-spacing:0;text-transform:none;margin:0;color:#ccc;cursor:default}
#game-shell #settings-dialog .settings-controls select{width:100%;height:22px;min-height:22px;padding:1px 5px;background:#111;color:#ccc;border:1px solid #4b4439;font:11px Arial,sans-serif}
#game-shell #settings-dialog .settings-controls select:focus-visible{outline:1px solid #d49a50;outline-offset:1px}
#game-shell #settings-dialog .sound-settings{grid-template-columns:54px minmax(0,1fr) 28px;gap:4px}
#game-shell #settings-dialog .sound-settings .checkbox-label{margin:2px 0}
#game-shell #settings-dialog .sound-settings>small{grid-column:1/-1;font-size:9px}
.settings-volume-controls{display:grid;grid-column:1/-1;grid-template-columns:54px minmax(0,1fr) 28px;gap:4px;min-width:0}
#game-shell #settings-dialog .settings-volume-controls label{margin:0;font-size:8px}
.settings-volume-controls input[type=range]{padding:0;height:20px;accent-color:#d4a64e;border:0}
.settings-volume-controls output{font:9px var(--mono);text-align:right}
.settings-volume-controls>small{grid-column:1/-1;font-size:9px}
.settings-nickname{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:22px 22px;align-items:center;gap:8px;min-width:0;margin:0 0 8px}
#game-shell #settings-dialog:not(.lobby-settings) .settings-nickname{display:none}
#game-shell #settings-dialog .settings-nickname :is(label,#settings-email-label){grid-column:1;font:11px/22px Arial,sans-serif;color:#ccc;margin:0}
#settings-email{grid-column:2;display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#ccc;font:11px/22px Arial,sans-serif}
.settings-nickname-controls{grid-column:2;display:flex;align-items:center;gap:4px;min-width:0}
#game-shell #settings-dialog .settings-nickname input{flex:1;min-width:0;width:0}
.nickname-change-price{display:inline-flex;flex-shrink:0;align-items:center;gap:4px;height:22px;white-space:nowrap}
.nickname-change-price img{width:16px;height:12px;object-fit:contain}
.nickname-change-cost{color:rgb(220,0,0)}
#settings-account-save{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.settings-account{margin:0 4px 8px;font:11px Arial,sans-serif;color:#ccc}
#settings-dialog:not(.lobby-settings) .settings-account{display:none}
.settings-account label{font:11px/22px Arial,sans-serif;letter-spacing:0;color:#ccc;margin:0}
#settings-about-form{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-bottom:8px}
#settings-about-form>label{grid-column:1;grid-row:1}
#game-shell #settings-about{grid-column:1/-1;grid-row:2;width:100%;height:60px!important;min-height:60px!important;max-height:60px!important;padding:0 0 0 4px!important;resize:none}
#settings-password-form{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:8px}
#settings-password-form input{width:100%;min-width:0}
.settings-account small{grid-column:1/-1;color:#ccc;font:11px/14px Arial,sans-serif;overflow-wrap:anywhere}
.settings-account small:empty{display:none}
.settings-account :is(input,textarea):disabled{--field-text-color:rgba(238,224,188,.4)}
.profile-information{position:absolute;inset:0;display:grid;grid-template-rows:minmax(18px,max-content) minmax(0,1fr);gap:4px;min-width:0;min-height:0;padding:4px;overflow:hidden;color:#eee0bc;font:11px/16px Arial,sans-serif}
.profile-information-meta{grid-row:1;align-self:center;overflow-wrap:anywhere}
#game-shell :is(#profile-dialog,#player-profile-dialog) textarea.profile-information-text{grid-row:2;width:100%;height:100%!important;min-height:0!important;max-height:none!important;margin:0;padding:0 0 0 4px!important;resize:none;overflow:auto;scrollbar-width:thin;line-height:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.weapon-hotkey{display:grid;grid-template-columns:minmax(0,1fr) 50%;gap:4px;margin:0;padding-right:4px}
.weapon-hotkey+.weapon-hotkey{margin-top:4px}
#game-shell #settings-dialog .weapon-hotkey label{grid-column:1/-1;font:11px Arial,sans-serif;letter-spacing:0;text-transform:none;color:#ccc;margin:0;cursor:default}
#game-shell #settings-dialog .binding-key-list{position:absolute;z-index:20;padding:0;background:#111;color:#ccc;border:1px solid #b58d52;font:11px/20px Arial,sans-serif;box-shadow:0 2px 8px #000a}
#game-shell #settings-dialog .binding-key-list option{padding:2px 4px}

/* Lobby settings occupy the same two columns as the shop */
#settings-panel{grid-column:1/3;grid-row:1/3;position:relative;isolation:isolate;display:flex;min-width:0;min-height:0;margin-right:4px;padding:0;overflow:hidden;background:none;box-shadow:none}
#settings-lobby-background{display:none}
#game-shell #settings-panel #settings-dialog{position:relative;isolation:isolate;inset:auto;transform:none;z-index:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:minmax(0,1fr) auto auto;gap:0 4px;width:100%;height:100%;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;overflow:hidden}
#settings-panel #settings-lobby-background,#settings-panel #settings-dialog::after{grid-column:1;grid-row:1/3;z-index:-1;pointer-events:none}
#settings-panel #settings-lobby-background{display:block;min-width:0;min-height:0;margin:1px;background:#2d2117 url('/assets/my_yellow.png') center/cover no-repeat;opacity:.4;clip-path:var(--clan-texture-clip,none)}
#settings-panel #settings-dialog::after{content:'';box-shadow:inset 0 0 0 1px #000}
#game-shell #settings-panel #settings-dialog .settings-content{display:contents}
#settings-panel .settings-lobby-tabs{position:relative;isolation:isolate;display:flex;grid-column:1;grid-row:3;margin:4px 0 0;padding:8px;box-shadow:inset 0 0 0 1px #000}
#settings-panel .settings-lobby-tabs::before{content:'';position:absolute;inset:1px;z-index:-1;pointer-events:none;background:#2d2117 url('/assets/my_yellow.png') center/cover no-repeat;opacity:.4}
#settings-panel .settings-audio{grid-column:1;grid-row:1;min-width:0;min-height:0;padding:8px;overflow:auto;scrollbar-width:thin}
#settings-panel .settings-nickname{margin-left:0;margin-right:0}
#settings-panel .settings-account{margin:0}
#settings-panel #settings-account-panel{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr)) minmax(0,3fr) repeat(3,minmax(0,1fr));gap:4px 8px;overflow:clip}
#settings-panel #settings-account-panel :is(.settings-nickname,.settings-account,#settings-about-form,#settings-password-form){display:contents}
#game-shell #settings-panel #settings-account-panel :is(label,#settings-email,#settings-email-label){align-self:center;line-height:1;min-height:0;margin:0}
#settings-panel #settings-email-label{grid-column:1;grid-row:1;align-self:center}
#settings-panel #settings-email{grid-column:2;grid-row:1}
#settings-panel .settings-nickname>label{grid-column:1;grid-row:2}
#settings-panel .settings-nickname-controls{grid-column:2;grid-row:2;height:100%;min-height:0}
#settings-panel .settings-nickname-controls .nickname-change-price{height:100%}
#settings-panel #settings-about-form>label{grid-column:1/-1;grid-row:3}
#settings-panel #settings-password-form>label{grid-column:1}
#settings-panel #settings-password-form>input{grid-column:2}
#game-shell #settings-panel #settings-account-panel :is(input,textarea){height:100%!important;min-height:0!important;max-height:none!important;margin:0;padding-block:0!important}
#game-shell #settings-panel #settings-about{grid-column:1/-1;grid-row:4}
#settings-panel .settings-controls{grid-column:2;grid-row:1/4}
#settings-account-actions{display:none}
#settings-panel #settings-account-actions{grid-column:1;grid-row:2;display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;min-width:0;min-height:38px;margin:0;padding:8px}
#settings-panel #settings-account-save{flex:0 0 50%;width:50%;min-width:0}
#game-shell #settings-panel #settings-quick-play-row{display:flex;align-items:center;gap:4px;min-width:0;margin:0;font:11px/14px Arial,sans-serif;color:#ccc;white-space:nowrap}
#settings-dialog .settings-controls{position:relative;isolation:isolate;display:flex;align-items:flex-start;gap:8px;min-width:0;min-height:0;padding:8px;overflow:clip;box-shadow:inset 0 0 0 1px #000}
#settings-dialog .weapon-hotkey{padding-right:0}
#settings-dialog .settings-controls-main{display:flex;flex-direction:column;align-self:stretch;flex:1 1 20px;min-height:0}
#settings-dialog :is(#settings-basic-panel,#settings-advanced-panel){flex:1 1 auto;min-height:0;overflow:visible}
#settings-dialog:not(.lobby-settings) :is(#settings-basic-panel,#settings-advanced-panel){padding-bottom:18px}
#settings-worker-status{position:absolute;right:8px;bottom:8px;color:rgb(220,0,0);font:400 11px/14px Arial,sans-serif}
#settings-worker-status[data-ready=true]{color:rgb(0,220,0)}
#settings-dialog.lobby-settings #settings-worker-status{display:none}
#settings-dialog .settings-controls-audio{display:flex;flex-direction:column;order:-1;flex:1 1 0;align-self:stretch;min-width:0;margin:0;padding:0;background:transparent;border:0}
/* The common settings panel supplies the 8px left inset for these controls */
#settings-dialog .settings-volume-controls{grid-template-columns:minmax(0,1fr) auto;gap:4px;margin:0;padding:0}
#game-shell #settings-dialog .settings-volume-controls label{grid-column:1;margin:0;font:11px/14px Arial,sans-serif;white-space:nowrap}
.settings-volume-controls .settings-checkbox{grid-column:1/-1;display:flex;align-items:center;gap:4px}
#game-shell #settings-dialog .settings-volume-controls .settings-checkbox{grid-column:1/-1;margin:0;white-space:normal}
#game-shell #settings-dialog .settings-volume-controls .settings-checkbox+.settings-checkbox{margin-top:4px}
#game-shell #settings-dialog :is(.checkbox-label,.settings-checkbox) input[type=checkbox]{margin:0}
#settings-dialog .settings-volume-controls small{display:none}
#settings-dialog .settings-volume-controls output{grid-column:2;margin-right:0;font:11px/14px Arial,sans-serif;text-align:right}
#settings-dialog #music-volume-value{grid-row:1}
#settings-dialog #effects-volume-value{grid-row:3}
#settings-dialog .settings-volume-controls input[type=range]{appearance:none;-webkit-appearance:none;grid-column:1/-1;width:100%;height:16px;min-height:16px;max-height:16px;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}
#settings-dialog .settings-volume-controls input[type=range]:active{cursor:default!important}
#settings-dialog .settings-volume-controls input[type=range]::-webkit-slider-runnable-track{height:6px;border:0;border-radius:0;background:rgba(20,20,20,.4)}
#settings-dialog .settings-volume-controls input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:6px;height:16px;margin-top:-5px;border:0;border-radius:0;background:#2d2117 url('/assets/my_yellow.png') center/cover no-repeat;opacity:.6;box-shadow:none;cursor:inherit}
#settings-dialog .settings-volume-controls input[type=range]:enabled::-webkit-slider-thumb:hover,#settings-dialog .settings-volume-controls input[type=range]:enabled:active::-webkit-slider-thumb{opacity:.8}
#settings-dialog .settings-volume-controls input[type=range]::-moz-range-track{height:6px;border:0;border-radius:0;background:rgba(20,20,20,.4)}
#settings-dialog .settings-volume-controls input[type=range]::-moz-range-thumb{width:6px;height:16px;border:0;border-radius:0;background:#2d2117 url('/assets/my_yellow.png') center/cover no-repeat;opacity:.6;box-shadow:none;cursor:inherit}
#settings-dialog .settings-volume-controls input[type=range]:enabled::-moz-range-thumb:hover,#settings-dialog .settings-volume-controls input[type=range]:enabled:active::-moz-range-thumb{opacity:.8}
#settings-dialog .settings-volume-controls input[type=range]::-moz-range-progress{height:6px;background:transparent}
#settings-dialog :is(#settings-music-volume,#settings-effects-volume)::-webkit-slider-runnable-track{background:rgba(0,0,0,.8)}
#settings-dialog :is(#settings-music-volume,#settings-effects-volume)::-moz-range-track{background:rgba(0,0,0,.8)}
#settings-dialog .settings-controls::before{content:'';position:absolute;inset:1px;z-index:-1;pointer-events:none;background:#2d2117 url('/assets/my_yellow.png') center/cover no-repeat;opacity:.4}