/* Nastavení postavy: jediné rozložení pro PC, telefon i nízkou obrazovku. */
#castle-settings-dialog {
  width:min(1100px,calc(100vw - 24px));
  height:auto!important;
  min-height:0!important;
  max-height:calc(100dvh - 24px)!important;
  position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;
  overflow:hidden;
}
#castle-settings-dialog[open] {display:flex!important;flex-direction:column;align-content:normal}
#castle-settings-dialog .castle-dialog-header {padding:16px 24px;min-height:0;gap:12px}
#castle-settings-dialog .castle-dialog-header h2 {font-size:clamp(21px,2.25vw,33px);margin:3px 0 0}
#castle-settings-dialog .castle-dialog-close {width:38px;height:38px;font-size:26px}
#castle-settings-dialog .castle-dialog-body {
  display:flex;flex-direction:column;flex:0 1 auto;min-height:0;
  gap:8px;padding:10px 24px 14px;overflow:hidden;scrollbar-gutter:auto;
}
#castle-settings-dialog .castle-shop-intro {margin:0;gap:12px;flex:0 0 auto;flex-wrap:nowrap;align-items:center}
#castle-settings-dialog .castle-shop-intro > p {font-size:13px;line-height:1.35;margin:0}
#castle-settings-dialog .castle-shop-balance {flex:none;padding:6px 10px;border-radius:9px;gap:5px}
#castle-settings-dialog .castle-shop-balance img {width:26px;height:26px}
#castle-settings-dialog .castle-shop-balance strong {font-size:19px}
#castle-settings-dialog .castle-rename {
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  margin:0;padding:9px 14px;gap:3px 14px;border-radius:12px;flex:0 0 auto;
}
#castle-settings-dialog .castle-rename h3 {font-size:19px;line-height:1.2;margin:2px 0 3px}
#castle-settings-dialog .castle-rename p {font-size:11px;line-height:1.3;margin:0}
#castle-settings-dialog .castle-rename form {gap:7px;align-items:center;min-width:0;flex-wrap:nowrap}
#castle-settings-dialog .castle-rename input {width:210px;max-width:100%;min-width:0;padding:9px 10px;font-size:14px}
#castle-settings-dialog .castle-rename .castle-buy-button {min-height:36px;padding:7px 10px;white-space:nowrap}
#castle-settings-dialog .castle-action-message {margin:0;min-height:0;font-size:12px;line-height:1.3}
#castle-settings-dialog .castle-action-message:empty {display:none}
#castle-settings-dialog .castle-avatar-toolbar {margin:0;padding:0 2px;flex:0 0 auto;gap:8px}
#castle-settings-dialog .castle-avatar-toolbar h3 {font-size:21px;line-height:1.25;margin:0}
#castle-settings-dialog .castle-avatar-navigation button {width:36px;height:34px;font-size:24px}
#castle-settings-dialog #castle-avatar-grid.castle-avatar-grid {
  display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;
  grid-auto-columns:calc((100% - 48px) / 4)!important;grid-template-rows:minmax(0,1fr)!important;
  gap:14px!important;height:clamp(150px,calc(100dvh - 310px),324px)!important;
  min-height:0!important;max-height:none!important;flex:0 0 auto!important;
  margin:0;padding:2px 3px 8px!important;overflow-x:auto!important;overflow-y:hidden!important;
  scroll-snap-type:x mandatory;scroll-padding-inline:3px;overscroll-behavior-x:contain;
}
#castle-settings-dialog #castle-avatar-grid .castle-avatar-choice {
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;
  align-items:center;justify-items:stretch;gap:6px;padding:12px 10px;
  min-width:0;min-height:0;height:100%;max-height:100%;overflow:hidden;scroll-snap-align:start;
}
#castle-settings-dialog #castle-avatar-grid .castle-avatar-choice > img {
  width:100%;height:100%;min-height:0;max-height:222px;align-self:end;object-fit:contain;object-position:center bottom;
}
#castle-settings-dialog #castle-avatar-grid .castle-avatar-choice h3 {font-size:clamp(16px,1.5vw,21px);line-height:1.15;margin:0;text-align:center}
#castle-settings-dialog #castle-avatar-grid .castle-avatar-choice .castle-buy-button {min-height:37px;padding:8px 7px;font-size:12px;line-height:1.2}
#castle-settings-dialog .castle-avatar-price {display:none}
@media (min-width:701px) and (max-width:919px) {
  #castle-settings-dialog #castle-avatar-grid.castle-avatar-grid {grid-auto-columns:calc((100% - 30px) / 3)!important;gap:12px!important}
}
@media (max-width:700px) {
  #castle-settings-dialog {width:calc(100vw - 12px);max-width:calc(100vw - 12px);max-height:calc(100dvh - 12px)!important;border-radius:14px}
  #castle-settings-dialog .castle-dialog-header {padding:10px 12px}
  #castle-settings-dialog .castle-dialog-header h2 {font-size:21px}
  #castle-settings-dialog .castle-dialog-body {padding:8px 10px 10px;gap:7px}
  #castle-settings-dialog .castle-shop-intro {gap:8px}
  #castle-settings-dialog .castle-shop-intro > p {font-size:11px}
  #castle-settings-dialog .castle-shop-balance {padding:5px 6px;font-size:12px}
  #castle-settings-dialog .castle-shop-balance img {width:22px;height:22px}
  #castle-settings-dialog .castle-rename {grid-template-columns:minmax(0,1fr);padding:7px 10px;gap:5px}
  #castle-settings-dialog .castle-rename h3 {font-size:17px;margin:0}
  #castle-settings-dialog .castle-rename .eyebrow {display:none}
  #castle-settings-dialog .castle-rename input {width:0;flex:1;font-size:16px;padding:7px 8px}
  #castle-settings-dialog .castle-rename form {width:100%}
  #castle-settings-dialog .castle-avatar-toolbar h3 {font-size:18px}
  #castle-settings-dialog #castle-avatar-grid.castle-avatar-grid {grid-auto-columns:calc((100% - 15px) / 2)!important;gap:9px!important;height:clamp(120px,calc(100dvh - 340px),285px)!important}
  #castle-settings-dialog #castle-avatar-grid .castle-avatar-choice {padding:8px 6px;gap:4px}
  #castle-settings-dialog #castle-avatar-grid .castle-avatar-choice > img {max-height:190px}
  #castle-settings-dialog #castle-avatar-grid .castle-avatar-choice h3 {font-size:15px}
  #castle-settings-dialog #castle-avatar-grid .castle-avatar-choice .castle-buy-button {min-height:34px;padding:6px 4px;font-size:11px}
}
@media (max-height:520px) {
  #castle-settings-dialog .castle-dialog-header {padding:7px 12px}
  #castle-settings-dialog .castle-dialog-header .eyebrow {display:none}
  #castle-settings-dialog .castle-dialog-header h2 {font-size:20px}
  #castle-settings-dialog .castle-dialog-body {padding:6px 12px 8px;gap:5px}
  #castle-settings-dialog .castle-rename {padding:5px 9px}
  #castle-settings-dialog .castle-rename > div {display:none}
  #castle-settings-dialog .castle-rename {grid-template-columns:1fr}
  #castle-settings-dialog .castle-rename form {justify-content:flex-end}
  #castle-settings-dialog .castle-rename input {width:100%;max-width:none}
  #castle-settings-dialog .castle-avatar-toolbar h3 {font-size:16px}
  #castle-settings-dialog #castle-avatar-grid.castle-avatar-grid {height:clamp(100px,calc(100dvh - 237px),220px)!important}
  #castle-settings-dialog #castle-avatar-grid .castle-avatar-choice {padding:5px;gap:3px}
  #castle-settings-dialog #castle-avatar-grid .castle-avatar-choice h3 {font-size:13px}
  #castle-settings-dialog #castle-avatar-grid .castle-avatar-choice .castle-buy-button {min-height:28px;padding:4px;font-size:10px}
}