/* Interface: shared ornamental system with Records, Account and Sound.
   Strictly scoped; all settings functionality remains in the original renderer. */
#settings-screen #settings-content.settings-section-content.tg-interface-redesign{
  left:6%!important;
  right:6%!important;
  top:60px!important;
  bottom:55px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
#settings-screen #settings-content.tg-interface-redesign>.settings-section-title.tg-interface-page-heading{
  display:block!important;
  width:100%!important;
  flex-shrink:0!important;
  margin:0 auto!important;
  padding:0!important;
  color:#d2b983!important;
  font:400 clamp(32px,8.3vw,37px)/1.1 'Monomakh Unicode',serif!important;
  font-synthesis:none!important;
  letter-spacing:0!important;
  text-align:center!important;
  text-transform:uppercase!important;
}
#settings-screen #settings-content.tg-interface-redesign>.tg-interface-page-rule{
  position:relative;
  display:block;
  flex:0 0 1px;
  width:78%;
  max-width:400px;
  height:1px;
  margin:7px auto 18px;
  background:linear-gradient(90deg,transparent,#806b48 24%,#b49b64 50%,#806b48 76%,transparent);
  opacity:.72;
  pointer-events:none;
}
#settings-screen #settings-content.tg-interface-redesign>.tg-interface-page-rule::after{
  content:"";
  position:absolute;
  left:50%;
  top:-3px;
  width:6px;
  height:6px;
  border:1px solid #a28b65;
  background:#1b1917;
  transform:translateX(-50%) rotate(45deg);
}
#settings-screen #settings-content.tg-interface-redesign>.settings-section-body.tg-interface-body{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  gap:15px!important;
  width:100%!important;
  max-height:none!important;
  min-height:0!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:2px 3px 30px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin!important;
  scrollbar-color:#a48a5d transparent!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body::-webkit-scrollbar{display:block!important;width:4px!important}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body::-webkit-scrollbar-thumb{background:#a48a5d!important;border-radius:6px!important}

/* One bordered illuminated card per existing settings group. */
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body>.settings-control-block:is(.settings-performance-card,.settings-interface-group){
  position:relative!important;
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:17px 16px 19px!important;
  text-align:left!important;
  border:1px solid rgba(190,158,102,.57)!important;
  border-radius:0!important;
  background:linear-gradient(155deg,rgba(58,46,31,.36),rgba(17,15,13,.81) 65%,rgba(26,22,17,.92))!important;
  box-shadow:inset 0 0 0 4px rgba(18,16,14,.86),inset 0 0 0 5px rgba(194,159,98,.13),0 3px 15px rgba(0,0,0,.16)!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body>.settings-control-block:is(.settings-performance-card,.settings-interface-group)::before,
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body>.settings-control-block:is(.settings-performance-card,.settings-interface-group)::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  width:5px!important;
  height:5px!important;
  border:1px solid #ac905e!important;
  background:#292219!important;
  transform:rotate(45deg)!important;
  pointer-events:none!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body>.settings-control-block:is(.settings-performance-card,.settings-interface-group)::before{
  top:6px!important;right:6px!important;left:auto!important;bottom:auto!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body>.settings-control-block:is(.settings-performance-card,.settings-interface-group)::after{
  bottom:6px!important;left:6px!important;right:auto!important;top:auto!important;
}

/* Gold pictograms are decorative: not extra text, controls or game assets. */
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-performance-heading,
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-group-title{
  display:flex!important;
  flex-direction:row!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:33px!important;
  margin:0 0 12px!important;
  padding:0 0 10px!important;
  border:0!important;
  border-bottom:1px solid rgba(174,143,89,.24)!important;
  color:#e0c58e!important;
  font:400 clamp(19px,4.5vw,23px)/1.18 'Old Standard TT',Georgia,serif!important;
  text-align:left!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-performance-heading .settings-performance-title{
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  color:inherit!important;
  font:inherit!important;
  text-align:left!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-performance-heading .settings-performance-value{
  flex:0 0 auto!important;
  margin-left:auto!important;
  color:#c6a76e!important;
  font:400 clamp(18px,4.5vw,23px)/1.2 'Old Standard TT',Georgia,serif!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-section-icon{
  display:block;
  flex:0 0 28px;
  width:28px;
  height:28px;
  fill:none;
  stroke:#c3a36a;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(199,153,80,.13));
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-icon-divider{
  display:block;
  align-self:center;
  flex:0 0 1px;
  width:1px;
  height:24px;
  background:linear-gradient(180deg,transparent,rgba(205,172,110,.65),transparent);
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body :is(.settings-performance-copy,.settings-interface-note){
  width:100%!important;
  max-width:100%!important;
  margin:10px auto 4px!important;
  padding:0!important;
  color:#b3a081!important;
  font:400 clamp(14px,3.35vw,17px)/1.42 'Old Standard TT',Georgia,serif!important;
  text-align:left!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-performance-quality{
  width:100%!important;
  margin:0!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body :is(.settings-performance-slider,.settings-interface-range){
  max-width:100%!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body :is(.settings-performance-range,.settings-interface-range){
  width:94%!important;
  margin:12px auto!important;
}
/* Tall enough for touch, but visually quiet. No global .settings-toggle-row changes. */
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body button:is(.settings-toggle-row,.settings-performance-toggle){
  display:flex!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  width:100%!important;
  min-height:50px!important;
  margin:6px 0!important;
  padding:11px 12px!important;
  border:1px solid rgba(194,158,99,.58)!important;
  border-radius:0!important;
  background:linear-gradient(180deg,rgba(61,49,32,.27),rgba(22,19,15,.67))!important;
  box-shadow:inset 0 0 0 3px rgba(19,17,14,.55),inset 0 0 0 4px rgba(200,166,108,.09)!important;
  color:#d5b985!important;
  font:400 clamp(17px,4vw,20px)/1.25 'Old Standard TT',Georgia,serif!important;
  text-align:left!important;
  -webkit-tap-highlight-color:transparent!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body button:is(.settings-toggle-row,.settings-performance-toggle):hover{
  border-color:#ccac70!important;
  background:rgba(67,52,33,.43)!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body :is(.settings-switch,.settings-performance-switch){
  width:46px!important;
  height:25px!important;
  border:1px solid #a28a5c!important;
  border-radius:16px!important;
  background:#1b1813!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body :is(.settings-switch-knob,.settings-performance-knob){
  top:4px!important;
  left:4px!important;
  width:15px!important;
  height:15px!important;
  border-radius:50%!important;
  background:#8d7b58!important;
  box-shadow:0 0 4px rgba(0,0,0,.3);
  transition:left .15s ease,background .15s ease;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body :is(.settings-switch.on .settings-switch-knob,.settings-performance-switch.on .settings-performance-knob){
  left:25px!important;
  background:#d9c28d!important;
}

/* The authored theme images and carousel stay intact. */
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-themes{
  display:flex!important;
  gap:12px!important;
  justify-content:flex-start!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:12px auto 0!important;
  padding:8px 9% 16px!important;
  overflow-x:auto!important;
  scroll-snap-type:x mandatory!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-theme{
  position:relative!important;
  flex:0 0 87%!important;
  width:87%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0 0 12px!important;
  border:1px solid rgba(171,143,91,.57)!important;
  border-radius:0!important;
  background:rgba(16,14,12,.77)!important;
  box-shadow:inset 0 0 0 4px rgba(21,19,15,.75)!important;
  color:#dbc08a!important;
  scroll-snap-align:center!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-theme.selected{
  border-color:#ddbb7d!important;
  box-shadow:inset 0 0 0 4px rgba(21,19,15,.75),0 0 12px rgba(194,151,82,.20)!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-theme-preview{
  width:100%!important;
  margin-bottom:10px!important;
  border-bottom:1px solid rgba(188,154,95,.43)!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-theme-name{
  color:#dfc38f!important;
  font:400 clamp(18px,4.2vw,22px)/1.2 'Old Standard TT',Georgia,serif!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-theme-caption{
  margin:5px 0 0!important;
  color:#b9a075!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-theme-placeholder{
  opacity:.42!important;
}

/* Text size: same gold track, labels, preview, and restrained reset control. */
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-size-value{
  margin:5px auto 0!important;
  color:#e0c58e!important;
  font:400 clamp(18px,4.2vw,22px)/1.2 'Old Standard TT',Georgia,serif!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-range-labels{
  width:88%!important;
  margin:0 auto 8px!important;
  color:#aa956e!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-text-preview{
  width:94%!important;
  margin:34px auto 30px!important;
  color:#ddc491!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body button:is(.settings-interface-text-reset,.settings-performance-reset){
  display:block!important;
  box-sizing:border-box!important;
  width:92%!important;
  min-height:44px!important;
  margin:16px auto 0!important;
  padding:10px 14px!important;
  border:1px solid rgba(190,158,102,.55)!important;
  background:linear-gradient(180deg,rgba(55,46,31,.42),rgba(18,16,13,.86))!important;
  color:#dac08b!important;
  font:400 clamp(16px,3.8vw,19px)/1.22 'Old Standard TT',Georgia,serif!important;
  box-shadow:inset 0 0 0 3px #171512,inset 0 0 0 4px rgba(202,173,113,.13)!important;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px)!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body button:focus-visible,
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body input[type="range"]:focus-visible{
  outline:2px solid #ddbf85!important;
  outline-offset:3px!important;
}
@media(max-width:390px){
  #settings-screen #settings-content.settings-section-content.tg-interface-redesign{
    left:5%!important;
    right:5%!important;
    top:50px!important;
    bottom:35px!important;
  }
  #settings-screen #settings-content.tg-interface-redesign>.tg-interface-page-rule{
    margin-bottom:14px;
  }
  #settings-screen #settings-content.tg-interface-redesign>.settings-section-body.tg-interface-body{
    gap:11px!important;
  }
  #settings-screen #settings-content.tg-interface-redesign .tg-interface-body>.settings-control-block:is(.settings-performance-card,.settings-interface-group){
    padding:14px 12px 16px!important;
  }
}

/* Real central showcase: the selected theme is in front; left and right are
   narrow folded previews. Only catalogued themes can be activated. */
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .settings-interface-themes.tg-theme-showcase{
  display:block!important;
  position:relative!important;
  isolation:isolate!important;
  perspective:850px!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:clamp(285px,102vw,460px)!important;
  max-height:none!important;
  margin:10px auto 3px!important;
  padding:0!important;
  overflow:hidden!important;
  scroll-snap-type:none!important;
  scrollbar-width:none!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.settings-interface-theme{
  display:none!important;
  position:absolute!important;
  top:7px!important;
  bottom:9px!important;
  left:17%!important;
  right:auto!important;
  flex:none!important;
  box-sizing:border-box!important;
  width:66%!important;
  max-width:66%!important;
  height:calc(100% - 16px)!important;
  min-height:0!important;
  margin:0!important;
  padding:0 0 12px!important;
  transform-origin:center center!important;
  transition:transform .28s ease,filter .28s ease,opacity .28s ease!important;
  cursor:pointer!important;
  overflow:hidden!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.settings-interface-theme.tg-theme-center{
  display:block!important;
  z-index:4!important;
  transform:translateX(0) rotateY(0) scale(1)!important;
  opacity:1!important;
  border-color:#c5a66d!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.settings-interface-theme.tg-theme-left{
  display:block!important;
  z-index:2!important;
  transform:translateX(-79%) rotateY(48deg) scale(.90)!important;
  opacity:.80!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.settings-interface-theme.tg-theme-right{
  display:block!important;
  z-index:2!important;
  transform:translateX(79%) rotateY(-48deg) scale(.90)!important;
  opacity:.80!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase .settings-interface-theme-preview{
  display:block!important;
  position:relative!important;
  box-sizing:border-box!important;
  height:calc(100% - 62px)!important;
  min-height:0!important;
  width:100%!important;
  aspect-ratio:auto!important;
  margin:0 0 9px!important;
  background:radial-gradient(ellipse at 45% 34%,#493b28 0%,#191714 64%,#0f0e0c 100%)!important;
  border-bottom:1px solid rgba(188,154,95,.43)!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase .settings-interface-theme-image{
  height:100%!important;width:100%!important;object-fit:cover!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase .settings-interface-theme-name,
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase .settings-interface-theme-caption{
  display:block!important;
  padding:0 5px!important;
  white-space:normal!important;
  text-align:center!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.tg-theme-locked{
  background:linear-gradient(145deg,#272624,#141414)!important;
  border-color:rgba(151,150,146,.5)!important;
  box-shadow:inset 0 0 0 4px rgba(27,27,27,.8)!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.tg-theme-locked .settings-interface-theme-preview{
  background:
    radial-gradient(ellipse at 50% 34%,#777 0%,#414141 45%,#161616 100%)!important;
  filter:grayscale(1) blur(2.5px) brightness(.65)!important;
  opacity:.65!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.tg-theme-locked .settings-interface-theme-name,
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.tg-theme-locked .settings-interface-theme-caption{
  color:#999!important;
  filter:grayscale(1)!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.tg-theme-locked::before,
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.tg-theme-locked::after{
  border-color:#777!important;background:#292929!important;
}
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.settings-interface-theme.tg-theme-left .settings-interface-theme-name,
#settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.settings-interface-theme.tg-theme-right .settings-interface-theme-name{
  opacity:.45!important;
}
@media(prefers-reduced-motion:reduce){
  #settings-screen #settings-content.tg-interface-redesign .tg-interface-body .tg-theme-showcase>.settings-interface-theme{transition:none!important}
}