/* Settings: readable groups without changing match geometry or saved preferences. */
#settings{
  --settings-surface:#172b3d;
  width:min(calc(100vw - 24px),460px);
  max-height:calc(100dvh - 32px);
  padding:18px;
  background:var(--settings-surface);
  border-color:#8e7956;
  border-radius:12px;
  box-shadow:0 18px 64px #0006;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  font-size:16px;
}
#settings .settings-heading{
  position:sticky;
  top:-18px;
  z-index:2;
  margin:-18px -18px 20px;
  padding:16px 18px 12px;
  border-bottom:1px solid #496072;
  background:var(--settings-surface);
}
#settings .settings-heading h2{font-size:24px;letter-spacing:.05em;}
#settings #settings-close{flex:0 0 44px;width:44px;height:44px;padding:0;}
#settings .settings-sound{
  gap:12px;
  padding:14px 16px;
  margin-bottom:20px;
  background:#20364a;
  border:1px solid #496072;
  border-radius:8px;
}
#settings #sound-toggle{min-width:92px;min-height:44px;font-size:15px;}
#settings .piece-display{margin-bottom:20px;padding:12px 0 0;border-top:0;}
#settings .piece-display legend{font-size:16px;color:#f5ead6;margin-bottom:12px;}
#settings .piece-display-choices{gap:10px;}
#settings .piece-display-choices button{min-height:52px;font-size:15px;padding:10px 6px;}
#settings .piece-display .note{font-size:13px;line-height:1.6;color:#c6d1df;margin-top:10px;}
#settings #piece-display-status{font-size:13px;line-height:20px;max-height:40px;}
#settings .settings-links{border:1px solid #496072;border-radius:8px;overflow:hidden;}
#settings .settings-links a{padding:14px 16px;min-height:54px;font-size:15px;line-height:1.5;}
#settings .settings-links a:last-child{border-bottom:0;}
#settings .settings-links a span{font-size:22px;flex-shrink:0;}
#settings #home-button{margin-top:20px;min-height:48px;font-size:15px;}
#settings #settings-done{margin-top:10px;min-height:48px;font-size:15px;background:#ead4a1;color:#25334a;border-color:#f1deb6;font-weight:650;}
@media(min-width:1024px){
  #settings{width:min(calc(100vw - 64px),620px);padding:28px;font-size:18px;}
  #settings .settings-heading{top:-28px;margin:-28px -28px 26px;padding:22px 28px 16px;}
  #settings .settings-heading h2{font-size:28px;}
  #settings .settings-sound{padding:18px 20px;margin-bottom:24px;}
  #settings .piece-display legend{font-size:18px;}
  #settings .piece-display-choices button{min-height:58px;font-size:17px;}
  #settings .piece-display .note{font-size:14px;}
  #settings .settings-links a{min-height:60px;font-size:17px;padding:16px 20px;}
}