:root{
  --bg:#17151a;
  --bg2:#1f1c22;
  --surface:rgba(30,25,20,.94);
  --surface2:rgba(42,35,26,.96);
  --border:rgba(255,182,74,.2);
  --border-hover:rgba(255,182,74,.45);
  --gold:#ffb64a;
  --yellow:#ffb64a;
  --text:#f2e8d8;
  --muted:#b3a68e;
  --muted2:#8a7f6c;
}

body{
  background:#17151a url('../img/castle-wall-bg.webp') repeat;
  background-size:240px auto;
}
::selection{ background:rgba(255,182,74,.35); color:#fff; }

#siteNav{ background:rgba(22,17,12,.78); border-bottom:1px solid rgba(255,182,74,.22); }
#siteNav.scrolled{ background:rgba(22,17,12,.95); }
.nav-links a::after{ background:linear-gradient(90deg,#ffc55e,#d9952f); }

.nav-logo{
  font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  background:linear-gradient(180deg,#ffedbe 0%,#ffc55e 48%,#c98f33 80%,#ffe1a0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.5));
}

.btn-primary{
  background:linear-gradient(135deg,#ffc55e,#d9952f);
  color:#2a1c06;
  box-shadow:0 10px 24px rgba(255,182,74,.3);
}
.btn-primary:hover{ box-shadow:0 14px 30px rgba(255,182,74,.45); }

.game-app{
  background:#17151a url('../img/castle-wall-bg.webp') repeat;
  background-size:240px auto;
}
#game{
  background:#17151a url('../img/castle-wall-bg.webp') repeat;
  background-size:240px auto;
}
#panel{
  background:linear-gradient(#3a3136,#26201f);
  border-top:1px solid rgba(255,182,74,.28);
  box-shadow:inset 0 0 15px #000;
}
.game-app button{
  background:linear-gradient(#8a6a2e,#5e4318);
  border:1px solid #2e2210;
  color:#ffe9c2;
}
@media (hover:hover){
.game-app button:hover{ background:linear-gradient(#a07c38,#6e5020); }
}
.game-app button:active{ background:linear-gradient(#5e4318,#8a6a2e); }
.game-app .primary-btn{
  background:linear-gradient(135deg,#ffc55e,#d9952f)!important;
  color:#2a1c06!important;
  border-color:#8a6a2e!important;
}
.game-app .secondary-btn{ background:#453c33!important; border-color:#2a2318!important; color:#f2e8d8!important; }
.settings-select{ background:#26201a; border-color:#6e5f4a; }
.bonus-choice{ background:#2a241f; border-color:#4d4234; }
.bonus-choice:hover{ background:#332c25; border-color:#6e5f4a; }
.character-speech{ border-color:#ffb64a; }
.character-speech:after{ border-right-color:#ffb64a; border-bottom-color:#ffb64a; }

#settings-modal{ background:transparent; }
#settings-content{
  background:linear-gradient(rgba(52,42,32,.93), rgba(30,24,17,.93));
  border:1px solid rgba(255,182,74,.35);
  box-shadow:0 12px 42px rgba(0,0,0,.75);
}
#settings-header{ border-bottom:2px solid rgba(255,182,74,.3); }
.settings-layout .settings-group{
  background:rgba(18,13,8,.5);
  border:1px solid rgba(255,182,74,.18);
}
.settings-intro{ color:#d8c9ae; }
.settings-note{
  background:rgba(255,182,74,.12);
  border:1px solid rgba(255,182,74,.4);
  color:#ffe2b0;
}

#game-over-modal{ background:rgba(14,10,5,.35); }
#game-over-content{
  background:linear-gradient(rgba(52,42,32,.94), rgba(30,24,17,.94));
  border:1px solid rgba(255,182,74,.4);
  box-shadow:0 12px 42px rgba(0,0,0,.75);
}
.go-stat{ background:rgba(255,182,74,.12); }
.go-stat-value{ color:#ffcf75; }

.game-app #panel-collapse{
  background:#3a2e1f;
  background-image:none;
  border:0;
  border-left:1px solid rgba(255,182,74,.3);
  color:#d9b87e;
}
.game-app #panel-collapse:hover{
  background:#4a3b28;
  background-image:none;
  color:#ffe9c2;
}
.game-app #panel-collapse:active{
  background:#33291c;
  background-image:none;
}
.profile-card,.leaderboard-card{
  background:rgba(30,25,20,.94);
  border:1px solid rgba(255,182,74,.2);
}
.profile-row input{ background:#171310; border-color:#4d4234; }
.profile-row button{ background:#ffb64a; color:#2a1c06; }
th{ background:#1d1813; }
td em{ background:#ffb64a; }
.score-cell{ color:#ffcf75; }
#empty-state a{ color:#241505; }

.nav-links{
  gap:10px;
}
.nav-links a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 16px;
  border-radius:999px;
  border:1.5px solid rgba(255,182,74,.55);
  background:rgba(36,28,18,.55);
  color:#e8d5aa;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.03em;
  transition:background .18s, border-color .18s, color .18s, box-shadow .18s;
  white-space:nowrap;
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{
  background:rgba(255,182,74,.18);
  border-color:#ffb64a;
  color:#ffe9c2;
  box-shadow:0 0 12px rgba(255,182,74,.22);
}

.nav-links a::after{ display:none !important; }
.ni{
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
  opacity:.85;
}

.settings-action-btn{
  height:42px !important;
  min-height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:0 20px !important;
  border-radius:8px !important;
  font-weight:700 !important;
  font-size:.88rem !important;
  letter-spacing:.03em !important;
  border:1.5px solid rgba(255,182,74,.4) !important;
  transition:filter .15s, box-shadow .15s !important;
}
.settings-action-btn .bi{ flex-shrink:0; }
.primary-btn{
  background:linear-gradient(135deg,rgba(180,130,40,.9),rgba(120,80,20,.9)) !important;
  border-color:#ffb64a !important;
  color:#fff5dc !important;
  min-width:240px !important;
}
.primary-btn:hover{ filter:brightness(1.15); box-shadow:0 4px 16px rgba(255,182,74,.3) !important; }
.secondary-btn{
  background:rgba(36,28,18,.8) !important;
  border-color:rgba(255,182,74,.5) !important;
  color:#e8d5aa !important;
}
.secondary-btn:hover{ background:rgba(255,182,74,.15) !important; }

body:not([class*="theme-"]) .settings-footer .settings-action-btn.secondary-btn{ background:#2b2520 !important; border-color:#ffb64a !important; color:#f2e8d8 !important; }
body:not([class*="theme-"]) .settings-footer .settings-action-btn.secondary-btn:hover{ background:rgba(255,182,74,.15) !important; border-color:#ffb64a !important; }

.settings-action-btn:not(.primary-btn):not(.secondary-btn):hover{ background:rgba(255,182,74,.15) !important; border-color:#ffb64a !important; }

#newGame{
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:0 18px !important;
  border-radius:8px !important;
  background:linear-gradient(135deg,rgba(160,110,30,.9),rgba(100,64,14,.9)) !important;
  border:1.5px solid #ffb64a !important;
  color:#fff5dc !important;
  font-weight:700 !important;
  font-size:.92rem !important;
  letter-spacing:.03em !important;
  transition:filter .15s, box-shadow .15s !important;
  cursor:pointer !important;
}
@media (hover:hover){
#newGame:hover{ filter:brightness(1.15); box-shadow:0 4px 14px rgba(255,182,74,.3) !important; }
}
#newGame b{ font-weight:inherit; }
#newGame .bi{ flex-shrink:0; }

.sound-toggle-btn svg{ display:block; }
.sound-toggle-btn{
  background:rgba(36,28,18,.6);
  border:1.5px solid rgba(255,182,74,.4);
  border-radius:8px;
  padding:5px;
  color:#d4a855;
  transition:background .18s, border-color .18s;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
@media (hover:hover){
.sound-toggle-btn:hover{ background:rgba(255,182,74,.18); border-color:#ffb64a; color:#ffe9c2; }
}

.pi{
  display:inline-block;
  vertical-align:middle;
  color:#c87832;
  flex-shrink:0;
  margin-right:5px;
}
#record, #score{
  display:flex;
  align-items:center;
  gap:5px;
  color:#e8c87a;
  font-weight:700;
}
#record .pi, #score .pi{ color:#c87832; }
#recordVal, #scoreVal{ color:#d4913a; font-weight:800; }
.counter{
  display:flex;
  align-items:center;
  gap:4px;
  color:#d8c5a0;
}
.counter .pi{ color:#c87832; }
.counter-icon{ display:inline-flex; align-items:center; }
#difficulty-indicator{
  display:flex;
  align-items:center;
  gap:5px;
  color:#d8c5a0;
}
#difficulty-indicator .pi{ color:#c87832; }
#levelVal{ color:#d4913a; font-weight:700; }

.panel-top{ flex-direction:row; flex-wrap:wrap; gap:8px; }
#record, #score{
  flex:1 1 45%;
  min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,182,74,.22);
  border-radius:8px;
  padding:8px 4px 7px;
  text-align:center;
}
.sc-label{
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:#c9a86a;
}
#recordVal, #scoreVal{ font-size:20px; line-height:1; color:#ffd27a; font-weight:800; }
.hint, .bonus-progress > div:first-child{ color:#e8c87a; }
.bonus-info, .bonus-info b{ color:#d8c5a0; }
#message{ color:#e8c87a; }

.mi{ display:inline-block; vertical-align:-2.5px; color:#d4913a; margin-right:3px; }

.records-page{ color:var(--text); }
.records-hero h1{ font:700 clamp(1.8rem,5vw,2.6rem)/1.15 Inter,sans-serif; margin:10px 0 12px; }
.records-hero p{ font-size:1rem; }
.records-hero p, .profile-label, .board-head p, #empty-state p, .stats, td small, .profile-card small{ color:var(--muted); }
.profile-card code{ color:#c9a86a; }
th{ color:var(--muted2); }
.stats b{ color:var(--text); }
.option-tags span{ color:#e8c87a; background:rgba(255,182,74,.08); border:1px solid rgba(255,182,74,.28); }

#difficulty-indicator{
  display:flex; align-items:center; gap:8px;
  padding:8px 22px 8px 12px; margin-top:8px;
  font-weight:700; font-size:13px; text-align:left;
  border-radius:0;
  clip-path:polygon(0 0,100% 0,93% 50%,100% 100%,0 100%);
}
#difficulty-indicator .di-chevs{ color:#d4913a; flex-shrink:0; }
.di-stripe{ width:4px; align-self:stretch; border-radius:2px; flex-shrink:0; }
#difficulty-indicator.level-1,#difficulty-indicator.level-2,#difficulty-indicator.level-3,#difficulty-indicator.level-4,#difficulty-indicator.level-5{
  color:#f2e8d8;
  border:1px solid rgba(255,182,74,.35);
  animation:none;
}
#difficulty-indicator.level-1{ background:linear-gradient(90deg,rgba(111,174,94,.33),rgba(0,0,0,0) 60%),linear-gradient(#3a3136,#26201f); }
#difficulty-indicator.level-1 .di-stripe{ background:#6fae5e; }
#difficulty-indicator.level-2{ background:linear-gradient(90deg,rgba(201,168,58,.33),rgba(0,0,0,0) 60%),linear-gradient(#3a3136,#26201f); }
#difficulty-indicator.level-2 .di-stripe{ background:#c9a83a; }
#difficulty-indicator.level-3{ background:linear-gradient(90deg,rgba(224,138,58,.33),rgba(0,0,0,0) 60%),linear-gradient(#3a3136,#26201f); }
#difficulty-indicator.level-3 .di-stripe{ background:#e08a3a; }
#difficulty-indicator.level-4{ background:linear-gradient(90deg,rgba(208,92,58,.38),rgba(0,0,0,0) 60%),linear-gradient(#3a3136,#26201f); }
#difficulty-indicator.level-4 .di-stripe{ background:#d05c3a; }
#difficulty-indicator.level-5{ background:linear-gradient(90deg,rgba(194,58,58,.42),rgba(0,0,0,0) 60%),linear-gradient(#3a3136,#26201f); }
#difficulty-indicator.level-5 .di-stripe{ background:#c23a3a; }
#difficulty-indicator.hidden{ display:none; }
.progress-trough{
  height:13px; background:#1d1813; border:1px solid #4d4234; border-radius:8px;
  padding:1.5px; box-shadow:inset 0 2px 4px rgba(0,0,0,.6); margin:4px 0 10px;
}
.progress-trough .progress-bar{ position:relative; height:100%; border-radius:6px; margin:0; overflow:visible; }
#rainbowBar{ background:linear-gradient(90deg,#e5484d,#f5a524,#f7ce46,#46c46b,#3b82f6,#8b5cf6); }
#bombBar{ background:linear-gradient(90deg,#7a2418,#d95b25,#ffc23f); box-shadow:0 0 7px rgba(255,140,50,.5); }
#lightningBar{ background:linear-gradient(90deg,#c9931c,#ffe27a); box-shadow:0 0 7px rgba(255,220,90,.55); }
.bar-tip{ position:absolute; right:-8px; top:-10px; pointer-events:none; }

#next .next-ball{ background:none !important; box-shadow:none; display:flex; align-items:center; justify-content:center; overflow:visible; }
#next .next-ball canvas{ display:block; flex:none; }

.character-speech{
  background:rgba(38,32,31,.88);
  color:#f2e8d8;
  border-color:#ffb64a;
  backdrop-filter:blur(2px);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.character-speech:after{ background:rgba(38,32,31,.88); }

#settings-content{ color:#f2e8d8; }
#settings-header h2{ color:#ffb64a; }
.settings-group h3{ color:#ffb64a; }
.setting-label{ color:#f2e8d8; }
.settings-layout .setting-item{ background:rgba(0,0,0,.18); }
.settings-layout .setting-item small{ color:#b3a68e; }
.bonus-choice strong{ color:#f2e8d8; }
.bonus-choice small{ color:#b3a68e; }
.settings-select{ color:#f2e8d8; }

.settings-layout .setting-item .setting-label{ max-width:none; flex:1 1 auto; }

.toggle-btn{ background:#3a3136; box-shadow:inset 0 0 0 1px #6e5f4a, inset 0 2px 5px rgba(0,0,0,.45); }
.toggle-btn::after{ background:#d8c9ae; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.toggle-btn.active{ background:linear-gradient(135deg,#c98a2e,#8a5a1a); box-shadow:inset 0 0 0 1px #ffb64a, inset 0 2px 5px rgba(0,0,0,.3); }
.toggle-btn.active::after{ background:#fff5dc; }

#settings-content{ scrollbar-width:thin; scrollbar-color:rgba(255,182,74,.45) transparent; }
#settings-content::-webkit-scrollbar{ width:10px; }
#settings-content::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
#settings-content::-webkit-scrollbar-thumb{ background:rgba(255,182,74,.35); border-radius:8px; }
#settings-content::-webkit-scrollbar-thumb:hover{ background:rgba(255,182,74,.55); }

.difficulty-levels{ margin-top:10px; }
.difficulty-levels small{ display:block; color:#b3a68e; font-size:12px; line-height:1.4; margin-bottom:6px; }
.difficulty-levels ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.difficulty-levels li{ display:flex; justify-content:space-between; gap:10px; padding:6px 10px; background:rgba(0,0,0,.18); border:1px solid rgba(255,182,74,.14); border-radius:6px; font-size:12px; }
.difficulty-levels li b{ color:#ffd28a; font-weight:700; }
.difficulty-levels li span{ color:#c9bca0; text-align:right; }

.balance-summary{ background:rgba(255,182,74,.08) !important; border-color:rgba(255,182,74,.35) !important; }
.balance-summary strong{ color:#ffd28a !important; }
.balance-summary span{ color:#f2e8d8 !important; }
.balance-summary small{ color:#b3a68e !important; }

.settings-select{ color-scheme:dark; }
.settings-select option{ background:#26201a; color:#f2e8d8; }
.settings-select:focus{ outline:none; border-color:#ffb64a; }

#settings-content{ overflow:hidden !important; padding:0 !important; display:flex; flex-direction:column; }
#settings-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:24px; scrollbar-width:thin; scrollbar-color:rgba(255,182,74,.45) transparent; }
#settings-scroll::-webkit-scrollbar{ width:10px; }
#settings-scroll::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
#settings-scroll::-webkit-scrollbar-thumb{ background:rgba(255,182,74,.35); border-radius:8px; }
#settings-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,182,74,.55); }
@media(max-width:760px){ #settings-scroll{ padding:15px; } }

html{ scrollbar-width:thin; scrollbar-color:#8a6a2e #1d1813; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#1d1813; }
::-webkit-scrollbar-thumb{ background:#6e5230; border:2px solid #1d1813; border-radius:7px; }
::-webkit-scrollbar-thumb:hover{ background:#8a6a2e; }
::-webkit-scrollbar-corner{ background:#1d1813; }

.hs-num .counter{ display:inline; color:inherit; }

.settings-select,
.settings-select::picker(select){ appearance:base-select; }
.settings-select::picker(select){
  background:#26201a;
  border:1px solid rgba(255,182,74,.5);
  border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.55);
  padding:5px;
  margin-top:4px;
}
.settings-select option{ background:#26201a; color:#f2e8d8; padding:8px 12px; border-radius:6px; font-weight:700; font-size:15px; }
.settings-select option:hover,
.settings-select option:focus{ background:#3a2f22; }
.settings-select option:checked{ background:linear-gradient(135deg,#c98a2e,#8a5a1a); color:#fff5dc; }
.settings-select option::checkmark{ color:#ffd28a; }

.dd-wrap{ position:relative; display:inline-block; }
.dd-native{ display:none !important; }
.dd-btn{ display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-width:130px; padding:10px 12px; cursor:pointer; }
.dd-btn::after{ content:'\25BE'; color:#ffd28a; font-size:12px; }
.dd-list{ position:absolute; top:calc(100% + 4px); left:0; right:0; margin:0; padding:5px; list-style:none; background:#26201a; border:1px solid rgba(255,182,74,.5); border-radius:10px; box-shadow:0 10px 26px rgba(0,0,0,.55); z-index:60; }
.dd-list li{ padding:8px 12px; border-radius:6px; font-weight:700; font-size:15px; color:#f2e8d8; cursor:pointer; }
.dd-list li:hover, .dd-list li:focus{ background:#3a2f22; outline:none; }
.dd-list li.dd-checked{ background:linear-gradient(135deg,#c98a2e,#8a5a1a); color:#fff5dc; }
.dd-list li.dd-checked::after{ content:'\2713'; float:right; color:#ffd28a; }

#pwa-install{ border:1px solid rgba(255,182,74,.5); box-shadow:0 8px 24px rgba(0,0,0,.55); }
#pwa-install button{ background:linear-gradient(#3a3136,#26201f); color:#f2e8d8; }
#pwa-install-btn{ font-weight:700; }
#pwa-install button:hover{ background:#463b33; }
#pwa-install-close{ color:#b3a68e; border-left:1px solid rgba(255,182,74,.35) !important; }
#pwa-install-close:hover{ color:#ffd28a; }

.bonus-limit-note{ display:block; margin:8px 0 10px; padding:7px 9px; border-left:3px solid #ffb64a; border-radius:4px; background:rgba(255,182,74,.12); font-size:12px; color:#ffd28a; line-height:1.4; }
.bonus-limit-note.limit-flash{ animation:limit-flash .6s ease; }
@keyframes limit-flash{ 0%{ color:#ff6b5e; transform:translateX(0); } 25%{ transform:translateX(-3px); } 50%{ transform:translateX(3px); color:#ff6b5e; } 100%{ transform:translateX(0); } }

.back-link{ color:#ffb64a; }
.back-link:hover{ color:#ffd28a; }

#pwa-install button{ min-width:0; min-height:0; font:600 14px/1.2 'Segoe UI',system-ui,sans-serif; }
@media (max-width:600px){ #pwa-install button{ font-size:13px; } }

.demo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.demo-card{ margin:0; background:linear-gradient(135deg,#3a3136,#26201f); border:1px solid rgba(255,182,74,.4); border-radius:14px; padding:14px; }
.demo-card img, .demo-card video{ width:100%; height:auto; display:block; border-radius:10px; border:1px solid rgba(255,182,74,.25); image-rendering:auto; background:#26201f; }
.demo-card figcaption{ margin-top:10px; font-size:13px; line-height:1.45; color:#b3a68e; }
.demo-card figcaption b{ color:#ffd28a; }
@media (max-width:1000px){ .demo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .demo-grid{ grid-template-columns:1fr; } }

#sound-settings-modal{ background:transparent; }
#sound-settings-content{
  background:linear-gradient(rgba(52,42,32,.93), rgba(30,24,17,.93));
  border:1px solid rgba(255,182,74,.35);
  box-shadow:0 12px 42px rgba(0,0,0,.75);
  color:#f2e8d8;
  overflow:hidden !important; padding:0 !important; display:flex; flex-direction:column;
}
#sound-settings-header{ border-bottom:2px solid rgba(255,182,74,.3); }
#sound-settings-header h2{ color:#ffb64a; }
#sound-settings-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:24px; scrollbar-width:thin; scrollbar-color:rgba(255,182,74,.45) transparent; }
#sound-settings-scroll::-webkit-scrollbar{ width:10px; }
#sound-settings-scroll::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
#sound-settings-scroll::-webkit-scrollbar-thumb{ background:rgba(255,182,74,.35); border-radius:8px; }
#sound-settings-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,182,74,.55); }
@media(max-width:760px){ #sound-settings-scroll{ padding:15px; } }

#counters, #next-section, .bonus-progress, #message{ border:1px solid rgba(255,182,74,.18); }

#characters-settings-modal{ background:transparent; }
#characters-settings-content{
  background:linear-gradient(rgba(52,42,32,.93), rgba(30,24,17,.93));
  border:1px solid rgba(255,182,74,.35);
  box-shadow:0 12px 42px rgba(0,0,0,.75);
  color:#f2e8d8;
  overflow:hidden !important; padding:0 !important; display:flex; flex-direction:column;
}
#characters-settings-header{ border-bottom:2px solid rgba(255,182,74,.3); }
#characters-settings-header h2{ color:#ffb64a; }
#characters-settings-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:24px; scrollbar-width:thin; scrollbar-color:rgba(255,182,74,.45) transparent; }
#characters-settings-scroll::-webkit-scrollbar{ width:10px; }
#characters-settings-scroll::-webkit-scrollbar-track{ background:transparent; margin:14px 0; }
#characters-settings-scroll::-webkit-scrollbar-thumb{ background:rgba(255,182,74,.35); border-radius:8px; }
#characters-settings-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,182,74,.55); }
@media(max-width:760px){ #characters-settings-scroll{ padding:15px; } }

.char-choice-grid .char-choice{ background:rgba(18,13,8,.4); border-color:rgba(255,182,74,.22); }
.char-choice-grid .char-choice small{ color:#b3a68e; }
.char-choice-grid .char-choice:hover{ border-color:rgba(255,182,74,.6); background:rgba(255,182,74,.10); }
.char-choice-grid .char-choice.active{ border-color:#ffb64a; background:rgba(255,182,74,.14); box-shadow:0 0 0 1px #ffb64a inset; }
.char-choice-grid .char-choice .char-check{ color:#ffd98f; }