html, body { touch-action: pan-x pan-y; }

.game-app{
  background:radial-gradient(#555,#222);
  font-family:Tahoma,Arial,sans-serif;
}
#wrap{
  display:flex;
  height:100%;
  flex-direction:column;
}
#game{
  flex:1;
  background:#2b2b2b;
  position:relative;
  min-height:0;
  min-width:0;
  display:block;
}
#panel{
  width:100%;
  padding:12px;
  color:#fff;
  background:linear-gradient(#555,#333);
  box-shadow:inset 0 0 15px #000;
  display:flex;
  flex-direction:column;
  max-height:40vh;
}

.panel-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
  flex-wrap:wrap;
  gap:10px;
}
#record{
  font-size:22px;
  color:#ff6;
  font-weight:bold;
  flex:1;
  min-width:200px;
}
#score{
  font-size:22px;
  color:#fff;
  flex:1;
  text-align:center;
  min-width:200px;
  font-weight:bold;
}
#controls{
  display:flex;
  gap:10px;
  flex:1;
  justify-content:center;
  min-width:200px;
}
.panel-middle{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  flex-wrap:wrap;
  gap:15px;
}
#counters{
  padding:10px;
  background:rgba(0,0,0,0.3);
  border-radius:6px;
  flex:1;
  min-width:200px;
}
.counter{
  display:flex;
  justify-content:space-between;
  margin:6px 0;
  font-size:15px;
  font-weight:bold;
  align-items:center;
}
.counter-icon{
  margin-right:8px;
  font-size:16px;
}
#difficulty-indicator{
  padding:8px 12px;
  background:rgba(0,0,0,0.3);
  border-radius:6px;
  text-align:center;
  margin-top:8px;
  font-weight:bold;
  font-size:14px;
  border:2px solid transparent;
  transition:all 0.3s;
}
#difficulty-indicator.level-1{
  color:#0f0;
  border-color:#0f0;
}
#difficulty-indicator.level-2{
  color:#ff0;
  border-color:#ff0;
}
#difficulty-indicator.level-3{
  color:#f80;
  border-color:#f80;
}
#difficulty-indicator.level-4{
  color:#f00;
  border-color:#f00;
}
#difficulty-indicator.level-5{
  color:#f0f;
  border-color:#f0f;
  animation:pulse 1s infinite;
}
#difficulty-indicator.hidden{
  display:none;
}
@keyframes pulse{
  0%, 100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:0.7;
    transform:scale(1.05);
  }
}
#next-section{
  padding:10px;
  background:rgba(0,0,0,0.3);
  border-radius:6px;
  flex:1;
  min-width:200px;
}
.hint{
  color:#fff;
  font-size:15px;
  text-align:center;
  margin-bottom:8px;
  font-weight:bold;
}
#next{
  display:flex;
  gap:12px;
  justify-content:center;
}
.bonus-progress{
  padding:6px 10px;
  background:rgba(0,0,0,0.3);
  border-radius:6px;
  flex:2;
  min-width:300px;
}
.bonus-progress > div:first-child{
  color:#fff;
  font-size:15px;
  margin-bottom:4px;
  text-align:center;
  font-weight:bold;
}
.bonus-info{
  display:flex;
  align-items:center;
  margin:4px 0;
  font-size:14px;
}
.bonus-icon{
  margin-right:10px;
  font-size:18px;
}
.progress-bar{
  height:14px;
  border-radius:3px;
  transition:width 0.3s;
  margin:3px 0;
}
#rainbowBar{
  background:linear-gradient(90deg, #f00, #ff0, #0f0);
}
#bombBar{
  background:#f00;
}
#lightningBar{
  background:#ff0;
}
.panel-bottom{
  margin-top:10px;
  padding-bottom:16px;
}
#message{
  font-size:15px;
  color:#ff6;
  min-height:45px;
  padding:10px;
  background:rgba(0,0,0,0.3);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
button{
  padding:10px 15px;
  background:linear-gradient(#777,#444);
  border:1px solid #111;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  border-radius:6px;
  transition:all 0.2s;
  min-height:40px;
  min-width:120px;
}
@media (hover:hover){
button:hover{
  background:linear-gradient(#888,#555);
}
}
button:active{
  background:linear-gradient(#444,#777);
}
.ball{
  width:26px;
  height:26px;
  border-radius:50%;
  position:relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
.bonus-ball{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

#settings-modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.85);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:1000;
}

#game-over-modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.7);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:1200;
  padding:20px;
  box-sizing:border-box;
}
#game-over-modal.show{
  display:flex;
}
#game-over-content{
  background:linear-gradient(#555,#333);
  border-radius:16px;
  padding:32px 40px;
  max-width:420px;
  width:100%;
  box-shadow:0 0 40px rgba(0,0,0,0.7);
  color:#fff;
  text-align:center;
  animation:modalIn .3s ease;
}
#game-over-emoji{
  font-size:48px;
  margin-bottom:14px;
  animation:ballPop .5s cubic-bezier(.34,1.56,.64,1);
}
#game-over-text{
  font-size:19px;
  font-weight:600;
  line-height:1.5;
  white-space:pre-line;
}
#game-over-stats{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:16px;
}
.go-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:rgba(255,255,255,0.08);
  border-radius:10px;
  padding:8px 14px;
  min-width:64px;
}
.go-stat-value{
  font-size:20px;
  font-weight:700;
  color:#ff6;
}
.go-stat-label{
  font-size:12px;
  opacity:0.75;
  margin-top:2px;
}
#settings-content{
  background:linear-gradient(#555,#333);
  border-radius:12px;
  padding:26px 30px;
  max-width:820px;
  width:95%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 0 30px #000;
  color:#fff;
  animation:modalIn .25s ease;
}
#settings-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:2px solid #666;
  color:#fff;
}
#settings-header h2{
  margin:0;
  color:#ff6;
  font-size:22px;
}
.settings-group{
  margin-bottom:25px;
  padding:18px;
  background:rgba(0,0,0,0.2);
  border-radius:8px;
  color:#fff;
}
.settings-group h3{
  margin-top:0;
  color:#ff6;
  font-size:17px;
  margin-bottom:15px;
  text-align:center;
  font-weight:bold;
}
.setting-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 0;
  padding:10px;
  background:rgba(0,0,0,0.1);
  border-radius:5px;
  color:#fff;
  font-size:14px;
  min-height:50px;
  gap:10px;
}
.setting-label{
  flex:0 0 auto;
  max-width:55%;
  color:#fff;
  font-size:14px;
  line-height:1.3;
}
.setting-controls{
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  flex-wrap:nowrap;
  justify-content:flex-end;
  flex:0 0 auto;
  margin-left:auto;
}
.toggle-btn{
  width:60px;
  height:30px;
  background:#444;
  border-radius:15px;
  position:relative;
  cursor:pointer;
  transition:all 0.3s;
  min-width:60px;
  flex-shrink:0;
}
.toggle-btn.active{
  background:#2b2;
}
.toggle-btn::after{
  content:'';
  position:absolute;
  width:26px;
  height:26px;
  background:#fff;
  border-radius:50%;
  top:2px;
  left:2px;
  transition:all 0.3s;
}
.toggle-btn.active::after{
  left:32px;
}
.setting-controls span{
  font-size:14px;
  white-space:nowrap;
  flex-shrink:0;
}

#game{
  cursor:default;
}
#game:focus-visible{
  outline:3px solid #ffd23f;
  outline-offset:2px;
  border-radius:4px;
}

.sound-toggle-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; min-width:38px; min-height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border, rgba(255,255,255,.08));
  cursor:pointer;
  font-size:18px;
  line-height:1;
  padding:0;
  transition:background .2s, border-color .2s, transform .15s;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){
.sound-toggle-btn:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--border-hover, rgba(255,209,63,.35));
}
}
.sound-toggle-btn:active{
  transform:scale(.92);
}

.settings-action-btn{ transition:transform .12s ease, filter .12s ease, box-shadow .12s ease; }
.settings-action-btn:active,
.settings-action-btn.pressed{
  transform:scale(.93);
  filter:brightness(.82);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55);
}

.sound-toggle-btn .sound-icon-off{ display:none; }
.sound-toggle-btn.muted .sound-icon-on{ display:none; }
.sound-toggle-btn.muted .sound-icon-off{ display:flex; }

@media (max-width:860px){
  .sound-toggle-btn{
    width:34px; height:34px; min-width:34px; min-height:34px;
    font-size:16px;
  }
}

#rotate-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:#17151a url('../img/castle-wall-bg.webp') repeat;
  background-size:240px auto;
  color:#f3e7c9;
  text-shadow:0 2px 6px rgba(0,0,0,.65);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
  padding:24px;
}
#rotate-overlay .rotate-icon{
  font-size:52px;
  animation:rotate-hint 1.6s ease-in-out infinite;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
}
#rotate-overlay p{
  max-width:340px;
  font-size:15px;
  line-height:1.5;
  color:#d8c49a;
}
@media (orientation: landscape){
  body.device-portrait-only .game-app{ display:none; }
  body.device-portrait-only #rotate-overlay{ display:flex; }
}
@media (max-width: 900px) and (orientation: landscape) and (pointer: coarse){
  .game-app{ display:none; }
  #rotate-overlay{ display:flex; }
}
@keyframes rotate-hint{
  0%, 100%{ transform:rotate(0deg); }
  50%{ transform:rotate(90deg); }
}

@media (orientation: landscape) and (min-height: 460px) and (min-width: 901px), (orientation: portrait) and (pointer: fine) and (min-width: 901px) {
  #wrap{
    flex-direction:row;
    height:100%;
    height:min(100%, calc(100svh - var(--nav-h)));
  }
  #panel{
    width:350px;
    max-height:100vh;
    overflow-y:auto;
    scrollbar-width:thin;
    flex-direction:column;
    flex-wrap:nowrap;
    padding:15px;
  }
  .panel-top{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  #record, #score{
    text-align:center;
    font-size:20px;
    min-width:auto;
  }
  #controls{
    justify-content:center;
    min-width:auto;
  }
  .panel-middle{
    flex-direction:column;
    gap:10px;
  }
  #counters, #next-section, .bonus-progress{
    min-width:auto;
  }
  button{
    min-width:140px;
  }
  .panel-bottom{
    padding-bottom:60px;
  }
}

@media (max-width: 768px) {
  #panel{
    max-height:35vh;
  }
  #record, #score{
    font-size:18px;
  }
  button{
    font-size:14px;
    padding:8px 12px;
    min-width:100px;
  }
  .counter{
    font-size:13px;
  }
  #message{
    font-size:13px;
    padding:6px;
    min-height:40px;
  }
  #settings-content{
    padding:15px;
    width:95%;
    max-width:620px;
  }
  #game-over-content{
    padding:24px 22px;
  }
  #game-over-emoji{
    font-size:38px;
  }
  #game-over-text{
    font-size:16px;
  }
  .setting-controls{
    gap:4px;
  }
  .setting-label{
    min-width:120px;
    font-size:13px;
  }
}

@media (max-width: 600px) {
  .panel-top{
    flex-direction:column;
    align-items:center;
  }
  #record, #score, #controls{
    min-width:100%;
    text-align:center;
  }
  .panel-middle{
    flex-direction:column;
  }
  #counters, #next-section, .bonus-progress{
    min-width:100%;
  }
  .bonus-progress > div:first-child{
    font-size:14px;
  }
  .bonus-info{
    font-size:13px;
  }
  .panel-bottom{
    padding-bottom:60px;
  }
  .setting-item{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .setting-label{
    text-align:center;
    min-width:100%;
  }
  .setting-controls{
    justify-content:center;
    width:100%;
    min-width:auto;
  }
}

@media (max-width: 480px) {
  #panel{
    flex-direction:column;
    max-height:40vh;
  }
  #top-bar{
    flex-direction:row;
    flex-wrap:wrap;
  }
  #record, #score{
    font-size:16px;
    flex:1 1 100%;
    text-align:center;
  }
  #controls{
    flex:1 1 100%;
    justify-content:center;
  }
  #settings-content{
    padding:12px;
    max-height:85vh;
    max-width:380px;
  }
  .setting-item{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .setting-controls{
    width:100%;
    justify-content:center;
  }
  .panel-bottom{
    padding-bottom:60px;
  }
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg, #444, #666);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #2b2;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #3d3;
  transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #2b2;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

input[type="range"]::-moz-range-thumb:hover {
  background: #3d3;
  transform: scale(1.1);
}

@media (max-width: 900px), (orientation: portrait) and (pointer: coarse), (orientation: portrait) and (max-width: 900px), (orientation: landscape) and (max-height: 459px) {
  .game-app{
    height:auto;
    overflow:visible;
    touch-action:pan-y;
    overscroll-behavior:auto;
    padding-bottom:28px;
  }
  #wrap{
    height:auto;
    min-height:calc(100dvh - var(--nav-h));
  }
  #game{
    flex:none;
    width:100%;
    max-width:560px;
    aspect-ratio:1 / 1;
    margin:0 auto;
  }
  #panel{
    max-height:none;
    width:100%;
    max-width:560px;
    margin:0 auto;
  }
  .panel-middle{
    flex-direction:column;
  }
  #next-section{
    order:-1;
  }
  #counters{
    order:0;
  }
  .bonus-progress{
    order:1;
  }
  .panel-bottom{
    padding-bottom:16px;
  }
}

#arena-stage{position:relative;flex:1;min-width:0;min-height:0;display:flex;align-items:stretch;justify-content:center;overflow:hidden;--board-left:15%;--board-right:85%;--board-bottom:1.5%}
#arena-stage #game{width:100%;z-index:2}
.field-character{display:none;position:absolute;bottom:var(--board-bottom,1.5%);z-index:4;width:196px;height:88%;pointer-events:none;--pillar-height:40%;--avatar-x:0px;--avatar-w:185px;--avatar-h:228px}
.field-character-left{left:calc(var(--board-left) - 222px);--avatar-x:17px}
.field-character-right{left:calc(var(--board-right) + 26px);--avatar-x:-10px;--avatar-w:196px;--avatar-h:235px}
.character-pedestal{position:absolute;left:50%;bottom:-4px;width:120px;height:36px;transform:translateX(-50%);background:url(../img/stone-pedestal.webp);background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));z-index:2}
.field-character:before{content:"";position:absolute;left:50%;bottom:calc(var(--pillar-height) - 5px);width:94px;height:16px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.42) 0%,rgba(0,0,0,.2) 48%,rgba(0,0,0,0) 78%);z-index:2;pointer-events:none;transition:bottom .65s cubic-bezier(.2,.8,.2,1)}
.field-character:after{content:"";position:absolute;left:50%;bottom:-10px;width:112px;height:22px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.48) 0%,rgba(0,0,0,.22) 48%,rgba(0,0,0,0) 78%);z-index:0;pointer-events:none}
.character-column{position:absolute;left:50%;bottom:26px;width:80px;height:calc(var(--pillar-height) - 26px);transform:translateX(-50%);background:url(../img/stone-column-shaft.webp);background-size:100% auto;background-position:center bottom;background-repeat:repeat-y;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));transition:height .65s cubic-bezier(.2,.8,.2,1);z-index:1}
.character-column:before{content:"";position:absolute;left:50%;top:-6px;width:94px;height:28px;transform:translateX(-50%);background:url(../img/stone-column-cap.webp);background-size:100% 100%;background-repeat:no-repeat;z-index:2}
.character-avatar{position:absolute;left:50%;bottom:calc(var(--pillar-height) + 4px);width:var(--avatar-w);height:var(--avatar-h);object-fit:contain;object-position:center bottom;transform:translateX(calc(-50% + var(--avatar-x)));transform-origin:50% 100%;transition:bottom .65s cubic-bezier(.2,.8,.2,1);user-select:none;z-index:3;filter:none}
.character-speech{position:absolute;left:50%;bottom:calc(var(--pillar-height) + var(--avatar-h) + 10px);box-sizing:border-box;width:max-content;max-width:200px;min-width:64px;transform:translate(-50%,10px) scale(.9);opacity:0;background:#fff;color:#27232f;border:2px solid #ffd23f;border-radius:10px;padding:10px 12px;font:800 15px/1.32 Inter,Arial,sans-serif;text-align:center;word-break:normal;overflow-wrap:break-word;white-space:normal;transition:bottom .65s cubic-bezier(.2,.8,.2,1),opacity .2s,transform .2s;z-index:5}
.field-character-left .character-speech{left:auto;right:26px;transform:translate(0,10px) scale(.9)}
.field-character-right .character-speech{left:26px;right:auto;transform:translate(0,10px) scale(.9)}
.character-speech:after{content:"";position:absolute;left:50%;bottom:-7px;width:10px;height:10px;background:#fff;border-right:2px solid #ffd23f;border-bottom:2px solid #ffd23f;transform:translateX(-50%) rotate(45deg)}
.field-character-left.reacting .character-speech{opacity:1;transform:translate(0,0) scale(1)}
.field-character-right.reacting .character-speech{opacity:1;transform:translate(0,0) scale(1)}
.field-character-left.line .character-avatar,.field-character-left.cross .character-avatar{animation:king-strike .78s ease}
.field-character-right.line .character-avatar,.field-character-right.cross .character-avatar{animation:guardian-cheer .78s ease}
.field-character.bonus .character-avatar{filter:none;animation:bonus-pulse .8s ease}
.field-character.milestone .character-avatar{filter:none;animation:milestone-jump 1.1s ease}
@keyframes king-strike{35%{transform:translateX(calc(-50% + var(--avatar-x))) rotate(-5deg) scale(1.08)}70%{transform:translateX(calc(-50% + var(--avatar-x))) rotate(3deg)}}
@keyframes guardian-cheer{35%{transform:translateX(calc(-50% + var(--avatar-x))) translateY(-13px) rotate(5deg) scale(1.08)}70%{transform:translateX(calc(-50% + var(--avatar-x))) translateY(0)}}
@keyframes bonus-pulse{45%{transform:translateX(calc(-50% + var(--avatar-x))) scale(1.13)}}
@keyframes milestone-jump{35%{transform:translateX(calc(-50% + var(--avatar-x))) translateY(-25px) scale(1.13)}65%{transform:translateX(calc(-50% + var(--avatar-x))) translateY(0) scale(1.04)}}
@media (min-width:950px) and (orientation:landscape) and (min-height:460px),(min-width:950px) and (orientation:portrait) and (pointer:fine){.field-character{display:block}#wrap{overflow:hidden}}

@media (max-width:949px),((orientation:portrait) and (pointer:coarse)),(orientation:landscape) and (max-height:459px){#arena-stage{flex:none;width:100%;max-width:560px;aspect-ratio:1/1;margin:0 auto}#arena-stage #game{width:100%;height:100%;margin:0}#charactersToggle{display:none}}
@media(prefers-reduced-motion:reduce){.character-avatar{animation:none!important}.character-column,.character-avatar,.character-speech{transition:none}}

.settings-content-compact{max-width:900px!important;padding:24px!important}
.settings-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.settings-layout .settings-group{margin:0;padding:16px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2)}
.settings-intro{color:#c3c3c8;font-size:13px;line-height:1.5;margin:-4px 0 14px}
.settings-layout .setting-item{margin:8px 0;padding:12px;min-height:58px}
.settings-layout .setting-item small{display:block;color:#a9a9b0;font-size:12px;margin-top:4px;line-height:1.35}
.settings-select{min-width:112px;padding:10px 34px 10px 12px;border:1px solid #74747d;border-radius:7px;background:#24242a;color:#fff;font-weight:700;font-size:15px}
.settings-select:disabled{opacity:.55;cursor:not-allowed}
.settings-note{display:none;padding:10px 12px;border-radius:7px;background:rgba(39,131,222,.14);border:1px solid rgba(94,159,232,.35);color:#cfe6ff;font-size:12px;margin-top:8px}.settings-note.show{display:block}
.bonus-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bonus-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;min-height:142px;padding:13px;background:#29292f;border:1px solid #4a4a52;border-radius:9px;text-align:left;color:#fff}
.bonus-choice:hover{background:#323239;border-color:#666}.bonus-choice>span{font-size:25px}.bonus-choice strong{font-size:13px}.bonus-choice small{color:#aaa;font-size:11px;line-height:1.3}.bonus-choice .toggle-btn{position:absolute;right:9px;top:10px;transform:scale(.7);transform-origin:top right}
.balance-summary{display:flex;flex-direction:column;gap:5px;padding:13px;margin-top:10px;border:1px solid rgba(70,161,113,.45);border-radius:8px;background:rgba(70,161,113,.12)}
.balance-summary strong{color:#8ee0ad;font-size:14px}.balance-summary span{font-size:12px;color:#fff}.balance-summary small{font-size:11px;color:#aebcb3;line-height:1.4}.settings-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.primary-btn{background:#2f8b50!important;min-width:250px!important}.secondary-btn{background:#484850!important}
@media(max-width:760px){.settings-content-compact{padding:15px!important}.settings-layout{grid-template-columns:1fr}.bonus-choice-grid{grid-template-columns:1fr}.bonus-choice{min-height:78px;padding-right:70px}.settings-footer{flex-direction:column-reverse}.settings-footer button{width:100%}.primary-btn{min-width:0!important}}

body.characters-hidden .field-character{display:none!important;animation:none!important}

body.characters-hidden #titles-block{display:none!important}
body.characters-hidden #title-popup{display:none!important}
body.characters-hidden .field-character *,body.characters-hidden .field-character:before,body.characters-hidden .field-character:after{animation:none!important;transition:none!important}

#panel-collapse{display:none}
@media (orientation: landscape) and (min-height: 460px) and (min-width: 901px), (orientation: portrait) and (pointer: fine) and (min-width: 901px){
  #panel-collapse{
    display:block;
    flex:0 0 24px;
    width:24px;
    min-width:24px;
    padding:0;
    border:0;
    border-left:1px solid rgba(255,255,255,.15);
    background:linear-gradient(90deg,#4b4b4b,#3a3a3a);
    color:#ddd;
    font-size:15px;
    cursor:pointer;
  }
  #panel-collapse:hover{background:#555;color:#fff}
  body.panel-collapsed #panel{display:none}
}

.field-character-left{left:calc(var(--board-left) - 222px)}
.field-character-right{left:calc(var(--board-right) + 26px)}

@media (min-width:950px) and (max-width:1439px) and (orientation:landscape) and (min-height:460px),(min-width:950px) and (max-width:1439px) and (orientation:portrait) and (pointer:fine){
  .field-character{transform:scale(.6);transform-origin:50% 100%}
  .field-character .character-speech{font-size:18px}
  .field-character-left{left:calc(var(--board-left) - 174px)}
  .field-character-right{left:calc(var(--board-right) - 23px)}

  #panel{width:248px;padding:10px;font-size:13px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  #difficulty-indicator{padding:6px 8px;font-size:13px;margin:6px 0}
  .panel-top{gap:6px}
  #record,#score{font-size:16px}
  #panel button{min-width:104px;padding:8px 10px;font-size:13px}
  .panel-middle{gap:8px;margin-bottom:8px}
  #counters,#next-section,.bonus-progress{padding:8px;min-width:auto}
  .hint,.bonus-progress > div:first-child{font-size:13px;margin-bottom:6px}
  #next{gap:8px}
  #message{font-size:13px;min-height:34px;padding:6px}
  .panel-bottom{margin-top:6px;padding-bottom:8px}

  #titles-block{padding:2px 8px}
  #titles-block > div:first-child{margin:0 0 2px}
  #titles-block .title-current{margin:0}
  #titles-block .bonus-info{margin:1px 0}
  #titles-block .progress-trough{margin:1px 0 0}
  #titles-block .titles-row{margin-top:1px}
}

.bonus-chance-info { margin-top: 12px; padding: 10px 12px; background: linear-gradient(135deg, var(--theme-card), var(--theme-card-2)); border: 1px solid color-mix(in srgb, var(--theme-accent) 40%, transparent); border-radius: 12px; max-width: 100%; min-width: 0; overflow: hidden; color: var(--theme-ink); box-shadow: 0 2px 8px var(--theme-shadow); }
.bci-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bonus-chance-info h4 { margin: 0; font-size: 0.92rem; letter-spacing: 0.02em; color: var(--theme-ink); }
.bci-size { font-size: 0.72rem; color: var(--theme-muted); white-space: nowrap; }
.bci-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; scrollbar-width: thin; scrollbar-color: var(--theme-muted,#888) transparent; }
.bci-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; background: var(--theme-accent-soft); border: 1px solid color-mix(in srgb, var(--theme-accent) 45%, transparent); border-radius: 999px; padding: 4px 10px; white-space: nowrap; color: var(--theme-ink); }
.bci-chip img { display: block; }
.bci-chip-off { opacity: 0.45; }
.bci-details { margin-top: 9px; }
.bci-details summary { cursor: pointer; font-size: 0.78rem; color: var(--theme-muted); user-select: none; transition: color .15s ease; }
.bci-details summary:hover { color: var(--theme-accent); }
.bci-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; margin-top: 8px; scrollbar-width: thin; scrollbar-color: var(--theme-muted,#888) transparent; }
.bci-table { width: 100%; border-collapse: collapse; font-size: 0.67rem; }
.bci-table th, .bci-table td { padding: 2px 3px; text-align: center; border-bottom: 1px solid color-mix(in srgb, var(--theme-line) 55%, transparent); white-space: nowrap; }
.bci-table th { font-weight: 600; color: var(--theme-muted); font-size: 0.72rem; }
.bci-table td:first-child, .bci-table th:first-child { text-align: left; font-weight: 600; }
.bci-table tr.bci-current td { background: var(--theme-accent-soft); }
.bci-table tr.bci-current td:first-child { color: var(--theme-accent); }
.bci-off { opacity: 0.35; }
.bci-note { display: block; margin-top: 8px; line-height: 1.4; color: var(--theme-muted); font-size: 0.72rem; }
@media (max-width: 560px) { .bci-chip { font-size: 0.72rem; padding: 3px 8px; } .bci-table { font-size: 0.7rem; } .bci-table th, .bci-table td { padding: 3px 5px; } }

.setting-disabled{opacity:.45;pointer-events:none}
.setting-disabled .toggle-btn{cursor:not-allowed}

.settings-x-btn{display:inline-flex!important;align-items:center;justify-content:center;width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;max-width:27px;padding:0!important;border-radius:8px;cursor:pointer;background:rgba(36,28,18,.6);border:1px solid rgba(255,182,74,.45);color:#ffb64a;transition:background .15s ease,color .15s ease,border-color .15s ease}
.settings-x-btn:hover{background:rgba(255,182,74,.16);color:#ffd98f;border-color:#ffb64a}

html{scrollbar-gutter:stable}

#sound-settings-modal{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.85);
  display:none; justify-content:center; align-items:center;
  z-index:1000;
}
#sound-settings-content{
  background:linear-gradient(#555,#333);
  border-radius:12px; padding:26px 30px;
  max-width:880px; width:95%; max-height:90vh; overflow-y:auto;
  box-shadow:0 0 30px #000; color:#fff;
  animation:modalIn .25s ease;
}
#sound-settings-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid #666; color:#fff;
}
#sound-settings-header h2{ margin:0; color:#ff6; font-size:22px; }
.snd-row{ margin:12px 0; }
.snd-row-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.snd-row-head .setting-label, .snd-row-head small{ white-space:nowrap; }
.snd-row-head > div{ min-width:max-content; }

#sound-settings-modal .setting-item .setting-label{ max-width:none; white-space:nowrap; }

.appearance-fold{
  margin:12px 0;
  background:linear-gradient(135deg, var(--theme-card), var(--theme-card-2));
  border:1px solid color-mix(in srgb, var(--theme-accent) 55%, transparent);
  border-left:4px solid var(--theme-accent);
  border-radius:7px;
  padding:0 12px;
  box-shadow:0 2px 8px var(--theme-shadow);
}
.appearance-fold[open]{ padding-bottom:8px; }
.appearance-fold > summary{
  cursor:pointer; color:var(--theme-ink); font-size:14.5px; font-weight:700;
  padding:11px 0; list-style:none; display:flex; align-items:center; gap:9px;
  user-select:none; transition:color .15s ease;
}
.appearance-fold > summary::-webkit-details-marker{ display:none; }
.appearance-fold > summary::before{ content:'▸'; color:var(--theme-accent); transition:transform .15s ease; }
.appearance-fold[open] > summary::before{ transform:rotate(90deg); }
.appearance-fold > summary:hover{ color:var(--theme-accent); }

#spawn-hint-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 14px); z-index:1200;
  display:flex; align-items:flex-start; gap:9px; max-width:min(440px, calc(100vw - 32px));
  background:linear-gradient(135deg, var(--theme-card), var(--theme-card-2));
  border:1px solid color-mix(in srgb, var(--theme-accent) 55%, transparent);
  border-left:4px solid var(--theme-accent);
  border-radius:9px; padding:11px 13px; color:var(--theme-ink);
  font-size:13.5px; line-height:1.45; box-shadow:0 6px 22px var(--theme-shadow);
  opacity:0; transition:opacity .3s ease, transform .3s ease;
}
#spawn-hint-toast.spawn-hint-show{ opacity:1; transform:translate(-50%, 0); }
#spawn-hint-toast.spawn-hint-hide{ opacity:0; transform:translate(-50%, 14px); }
#spawn-hint-toast b{ color:var(--theme-accent); }
.spawn-hint-icon{ flex-shrink:0; }

#spawn-hint-toast .spawn-hint-close{
  flex-shrink:0; min-width:0!important; min-height:0!important;
  width:20px!important; height:20px!important; padding:0!important; margin:0 0 0 2px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none!important; border:none!important; box-shadow:none!important;
  border-radius:50%; cursor:pointer; color:var(--theme-muted)!important;
  font-size:11px; line-height:1; transition:color .15s ease, background-color .15s ease;
}
#spawn-hint-toast .spawn-hint-close:hover{
  color:var(--theme-accent)!important; background:var(--theme-accent-soft)!important;
}
.snd-row-head img{ flex-shrink:0; }
.snd-ball{
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 33% 30%, #ffd1d1, #e5484d 62%, #7d1f22);
  box-shadow:inset -2px -3px 5px rgba(0,0,0,.35);
}
.snd-spark{ font-size:20px; line-height:1; flex-shrink:0; }
.snd-strip{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; }
.snd-strip-hint{ display:block; margin-top:7px; font-size:12px; line-height:1.35; opacity:.68; }
.snd-swatch{
  height:34px !important; min-width:0 !important; border-radius:8px !important; cursor:pointer; padding:0 !important;
  font-weight:800 !important; font-size:12px !important;
  color:var(--theme-ink,#f2e8d8) !important;
  background:color-mix(in srgb, var(--theme-card,#2b2520) 80%, transparent) !important;
  border:2px solid var(--theme-line,#5a4a33) !important;
  box-shadow:none !important;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.snd-swatch:hover{ transform:translateY(-2px); background:color-mix(in srgb, var(--theme-card,#2b2520) 80%, transparent) !important; border-color:var(--theme-muted,#bfae93) !important; }
.snd-swatch.active{ border-color:var(--theme-accent,#ffb64a) !important; box-shadow:0 0 0 2px var(--theme-accent-soft,rgba(255,182,74,.28)) !important; }

.snd-swatch.playing{ color:var(--theme-accent,#ffb64a) !important; }
.snd-swatch.playing svg{ display:inline-block; vertical-align:middle; }
@media(max-width:640px){
  .snd-strip{ grid-template-columns:repeat(5,1fr); }
  .snd-swatch{ height:32px; }

  .snd-row-head > div{ min-width:0; flex:1 1 auto; }
  .snd-row-head .setting-label, .snd-row-head small{ white-space:normal; }
}

.settings-group h3.fx-subtitle{ margin:20px 0 10px; }
.effect-intro{ margin:6px 0 10px; }
.effect-picker{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.effect-picker .effect-option{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:0; min-height:0; padding:10px 6px; border-radius:9px; cursor:pointer;
  background:var(--theme-card); border:1px solid var(--theme-line);
  color:var(--theme-ink); box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.effect-picker .effect-option b{ font-size:12.5px; line-height:1.12; text-align:center; overflow-wrap:anywhere; }
.effect-picker .effect-option small{ color:var(--theme-muted); font-size:10.5px; line-height:1.15; text-align:center; overflow-wrap:anywhere; }
@media (hover:hover){
  .effect-picker .effect-option:hover{ background:var(--theme-card); border-color:var(--theme-accent); transform:translateY(-1px); }
}
.effect-picker .effect-option.active{
  background:linear-gradient(160deg, var(--theme-card), var(--theme-card-2));
  border-color:var(--theme-accent);
  box-shadow:0 0 0 1px var(--theme-accent), 0 4px 12px var(--theme-accent-soft);
}

.fx-dot{ width:26px; height:26px; border-radius:50%; position:relative; flex-shrink:0; }
.effect-picker .effect-option.active .fx-dot{ animation:fxPulse 1.6s ease-in-out infinite; }
@keyframes fxPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.15); } }
.fx-none{ box-shadow:inset 0 0 0 2px var(--theme-muted); }
.fx-none::after{ content:''; position:absolute; left:50%; top:50%; width:2px; height:15px;
  background:var(--theme-muted); border-radius:1px; transform:translate(-50%,-50%) rotate(45deg); }
.fx-sparks{
  background:
    radial-gradient(circle at 50% 45%, #e6faff 12%, #7fe4ff 42%, rgba(127,228,255,0) 66%),
    radial-gradient(circle, #0a1a24 0 100%);
  box-shadow:inset 0 0 0 1px var(--theme-line);
}

.fx-stardust{
  background:
    radial-gradient(circle at 30% 32%, #fff 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 66% 26%, #ffe9a8 0 2px, transparent 3px),
    radial-gradient(circle at 72% 62%, #cfe4ff 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 40% 70%, #ffd6f2 0 2px, transparent 3px),
    linear-gradient(180deg, #1c2340, #0f1428);
  box-shadow:inset 0 0 0 1px var(--theme-line);
}
.fx-wave{ background:repeating-radial-gradient(circle at 50% 50%, var(--theme-accent) 0 1.5px, transparent 1.5px 6px), radial-gradient(circle, var(--theme-card-2) 0 100%); box-shadow:inset 0 0 0 1px var(--theme-line); }
.fx-bubbles{
  background:
    radial-gradient(circle at 36% 64%, transparent 0 2.6px, #cfeaff 2.6px 3.8px, transparent 4.6px),
    radial-gradient(circle at 66% 34%, transparent 0 2px, #cfeaff 2px 3px, transparent 3.8px),
    radial-gradient(circle at 62% 72%, transparent 0 1.3px, rgba(207,234,255,.8) 1.3px 2.1px, transparent 2.8px),
    linear-gradient(180deg, #16324a, #0d1f30);
  box-shadow:inset 0 0 0 1px var(--theme-line);
}

.fx-vortex{
  background:
    conic-gradient(from 20deg, #8ceebe 0 40deg, transparent 40deg 90deg,
      #5fe0a8 90deg 130deg, transparent 130deg 180deg,
      #34d399 180deg 220deg, transparent 220deg 270deg,
      #d8ffe9 270deg 310deg, transparent 310deg 360deg),
    radial-gradient(circle, #07231a 0 100%);
  box-shadow:inset 0 0 0 1px var(--theme-line);
}
.fx-vortex::after{ content:''; position:absolute; left:50%; top:50%; width:8px; height:8px;
  border-radius:50%; background:#07231a; box-shadow:0 0 0 1.5px rgba(255,255,255,.75); transform:translate(-50%,-50%); }
.fx-fountain{
  background:
    radial-gradient(circle at 50% 22%, #d6ecff 0 2px, transparent 3px),
    radial-gradient(circle at 32% 36%, #8fd3ff 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 68% 36%, #8fd3ff 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 22% 56%, #8fd3ff 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 78% 56%, #8fd3ff 0 1.6px, transparent 2.6px),
    linear-gradient(0deg, #2a6a9e 0 7px, transparent 7px),
    linear-gradient(180deg, #10263a, #0b1a29);
  box-shadow:inset 0 0 0 1px var(--theme-line);
}
.fx-crystals{ background:linear-gradient(180deg, #0d2430, #081722); box-shadow:inset 0 0 0 1px var(--theme-line); }
.fx-crystals::before{ content:''; position:absolute; left:6px; top:8px; width:7px; height:7px;
  background:linear-gradient(135deg, #e6f9ff, #8fd3ff); transform:rotate(45deg); }
.fx-crystals::after{ content:''; position:absolute; left:14px; top:12px; width:5px; height:5px;
  background:linear-gradient(135deg, #bfefff, #5fb8e8); transform:rotate(45deg); }
.fx-hearts{ background:linear-gradient(180deg, #2a1620, #1a0d14); box-shadow:inset 0 0 0 1px var(--theme-line); }
.fx-hearts::before{ content:''; position:absolute; left:7px; top:8px; width:6px; height:6px;
  border-radius:50%; background:#ff6b8d; box-shadow:6px 0 0 #ff6b8d; }
.fx-hearts::after{ content:''; position:absolute; left:9px; top:10px; width:8px; height:8px;
  background:#ff6b8d; transform:rotate(45deg); }
.fx-pulsar{
  background:
    radial-gradient(circle at 50% 50%, #fff 0 2.5px, transparent 3.5px),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, #ffe0a0 4px 5.5px, transparent 5.5px 9px),
    radial-gradient(circle at 50% 50%, #182238 0, #0d1526 100%);
  box-shadow:inset 0 0 0 1px var(--theme-line);
}
@media (max-width:900px){ .effect-picker{ grid-template-columns:repeat(auto-fit, minmax(88px, 1fr)); } }
@media (max-width:600px){ .effect-picker{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.score-toast{
  position:fixed;
  z-index:1200;
  pointer-events:none;
  padding:6px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:16px;
  letter-spacing:.3px;
  white-space:nowrap;

  color:var(--theme-accent,#ffe9a8);
  background:color-mix(in srgb,var(--theme-card,#191510) 94%,transparent);
  border:1px solid color-mix(in srgb,var(--theme-accent,#ffd682) 60%,transparent);
  box-shadow:0 4px 14px var(--theme-shadow,rgba(0,0,0,.35));
  opacity:0;
  transform:translateY(6px) scale(.9);
  transition:transform .25s ease, opacity .25s ease;
}
.score-toast-show{opacity:1;transform:translateY(-16px) scale(1)}
.score-toast-hide{opacity:0;transform:translateY(-34px) scale(.95);transition:transform .45s ease, opacity .45s ease}

body.theme-paper .score-toast{
  color:#c14f3f;
  background:rgba(255,253,246,.96);
  border-color:rgba(233,108,92,.55);
  box-shadow:0 4px 12px rgba(64,91,102,.25);
}
@media (max-width:600px){.score-toast{font-size:14px;padding:5px 11px}}

.settings-layout .compact-group .setting-item,
.compact-group .setting-item{margin:5px 0;padding:7px 10px;min-height:0}
.settings-layout .compact-group .setting-item small,
.compact-group .setting-item small{font-size:11px;margin-top:2px;line-height:1.3}
.compact-group h3{margin-bottom:10px}
.compact-group .settings-note{font-size:11px;margin:4px 0 8px}
.compact-group .setting-label{font-size:13.5px}

.title-current{display:flex;align-items:center;gap:7px;margin:4px 0;font-size:13px}
.title-current b{font-size:13.5px;color:var(--theme-ink,#f2e8d8)}
.title-shield{display:inline-flex;width:26px;flex:0 0 auto}
.title-shield img,.title-mini img,#title-popup-card .tp-shield img{width:100%;height:auto;aspect-ratio:95/112;display:block}

.title-shield.locked img,.title-mini:not(.achieved) img{filter:var(--tsi-tint,grayscale(1) sepia(.8) hue-rotate(-8deg) saturate(1.15) brightness(.8))}

.title-next{font-size:14px}
#titleBar{background:linear-gradient(90deg,color-mix(in srgb,var(--theme-accent,#b06af0) 55%,#5c3d8a),var(--theme-accent,#d9b8ff))}
.titles-row{display:flex;justify-content:space-between;gap:4px;margin-top:4px}
.title-mini{display:inline-flex;width:23px;opacity:.55;transition:opacity .3s}
.title-mini.achieved{opacity:1}

#counters #difficulty-indicator{margin:4px 0 0;padding:4px 10px}

.title-shield-glow{--tsg:#ffc450;position:absolute;left:50%;bottom:calc(var(--pillar-height) + 4px);width:var(--avatar-w);height:var(--avatar-h);transform:translateX(calc(-50% + var(--avatar-x)));pointer-events:none;z-index:4;transition:bottom .65s cubic-bezier(.2,.8,.2,1)}
.title-shield-glow:before,.title-shield-glow:after{content:"";position:absolute;left:var(--tsg-x,40%);top:var(--tsg-y,66.2%);width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;opacity:0}
.title-shield-glow:before{background:radial-gradient(circle,color-mix(in srgb,var(--tsg) 42%,#fff) 0%,color-mix(in srgb,var(--tsg) 58%,transparent) 40%,transparent 70%)}
.title-shield-glow:after{border:3px solid color-mix(in srgb,var(--tsg) 60%,#fff);box-shadow:0 0 18px 4px color-mix(in srgb,var(--tsg) 82%,transparent),inset 0 0 12px color-mix(in srgb,var(--tsg) 45%,rgba(255,255,255,.65))}
.title-shield-glow.tsg-burst:before{animation:tsg-glow 1.8s ease-out}
.title-shield-glow.tsg-burst:after{animation:tsg-ring 1.8s ease-out}
@keyframes tsg-glow{0%{opacity:0;transform:scale(.25)}18%{opacity:1;transform:scale(.9)}55%{opacity:.85;transform:scale(1.1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes tsg-ring{0%{opacity:0;transform:scale(.2)}22%{opacity:1;transform:scale(.75)}100%{opacity:0;transform:scale(1.9)}}
#title-popup{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:rgba(8,6,14,.5);opacity:0;pointer-events:none;transition:opacity .25s}
#title-popup.tp-show{opacity:1;pointer-events:auto}
body.theme-paper #title-popup{background:rgba(63,84,92,.28)}
#title-popup-card{background:linear-gradient(180deg,var(--theme-card,#2b2520),var(--theme-card-2,#201a16));color:var(--theme-ink,#f2e8d8);border:2px solid var(--theme-accent,#ffb64a);border-radius:14px;box-shadow:0 18px 48px var(--theme-shadow,rgba(0,0,0,.45));padding:22px 30px 20px;text-align:center;max-width:330px;margin:16px;transform:scale(.7);transition:transform .3s cubic-bezier(.34,1.56,.64,1);cursor:pointer}
#title-popup.tp-show #title-popup-card{transform:scale(1)}
#title-popup-card .tp-shield{display:inline-flex;width:84px;margin-bottom:6px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.35))}
#title-popup-card .tp-head{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--theme-accent,#ffb64a);font-weight:800;margin-bottom:2px}
#title-popup-card .tp-name{font-size:22px;font-weight:800;margin-bottom:4px}
#title-popup-card .tp-sub{font-size:13px;color:var(--theme-muted,#b3a68e)}

#characters-settings-modal{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.85);
  display:none; justify-content:center; align-items:center;
  z-index:1000;
}
#characters-settings-content{
  background:linear-gradient(#555,#333);
  border-radius:12px; padding:26px 30px;
  max-width:760px; width:95%; max-height:90vh; overflow-y:auto;
  box-shadow:0 0 30px #000; color:#fff;
  animation:modalIn .25s ease;
}
#characters-settings-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid #666; color:#fff;
}
#characters-settings-header h2{ margin:0; color:#ff6; font-size:22px; }
#characters-settings-modal .setting-item .setting-label{ max-width:none; white-space:nowrap; }

.char-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
.char-choice-grid .char-choice{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:16px 12px 14px; border-radius:12px; border:2px solid #555;
  background:rgba(0,0,0,.18); color:#fff; cursor:pointer; font:inherit;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.char-choice-grid .char-choice:hover{ border-color:#888; background:rgba(255,255,255,.06); }
.char-choice .char-portrait{ display:flex; align-items:flex-end; justify-content:center; width:132px; height:152px; }
.char-choice .char-portrait img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); transition:transform .2s; }
.char-choice:hover .char-portrait img{ transform:scale(1.05); }
.char-choice strong{ font-size:15.5px; }
.char-choice small{ color:#aaa; font-size:12px; line-height:1.35; text-align:center; max-width:230px; }
.char-choice .char-check{ position:absolute; top:8px; right:11px; font-size:11.5px; font-weight:800; color:#8ee0ad; opacity:0; transition:opacity .2s; }
.char-choice-grid .char-choice.active{ border-color:#8ee0ad; background:rgba(142,224,173,.08); box-shadow:0 0 0 1px #8ee0ad inset; }
.char-choice.active .char-check{ opacity:1; }
@media(max-width:560px){ .char-choice-grid{ grid-template-columns:1fr; } }

body.hero-wizard .field-character-right{--avatar-w:208px}
body.hero-wizard .title-shield-glow{--tsg:#b18cff;--tsg-x:36.1%;--tsg-y:60.6%}
body.hero-wizard .title-shield-glow:before,body.hero-wizard .title-shield-glow:after{width:56px;height:56px;margin:-28px 0 0 -28px}

body.hero-wizard .title-shield-glow[data-top-variant="proud"]{--tsg-x:39.5%;--tsg-y:60.7%}
body.hero-wizard .title-shield-glow[data-top-variant="glow"]{--tsg-x:39.8%;--tsg-y:60.9%}
body.hero-wizard .title-shield-glow[data-top-variant="thumbs"]{--tsg-x:36.9%;--tsg-y:63.5%}
body.hero-wizard .title-shield-glow[data-top-variant="point"]{--tsg-x:39.5%;--tsg-y:60.6%}
body.hero-wizard .title-shield-glow[data-top-variant="finger"]{--tsg-x:36.9%;--tsg-y:63.5%}

.title-shield-glow[data-top-variant="kthumbs"]{--tsg-x:40.7%;--tsg-y:64.1%}
.title-shield-glow[data-top-variant="ksalute"]{--tsg-x:40.5%;--tsg-y:64.3%}
.title-shield-glow[data-top-variant="kvictory"]{--tsg-x:40.0%;--tsg-y:64.8%}
.title-shield-glow[data-top-variant="kfist"]{--tsg-x:40.2%;--tsg-y:64.6%}
.title-shield-glow[data-top-variant="kfinger"]{--tsg-x:39.8%;--tsg-y:64.6%}

.title-shield-glow.tsg-burst-wizard:before{animation:tsgw-moon 2.2s ease-out}
.title-shield-glow.tsg-burst-wizard:after{border-style:dashed;border-width:2.5px;animation:tsgw-stardust 2.2s ease-out}
@keyframes tsgw-moon{0%{opacity:0;transform:scale(.2)}15%{opacity:1;transform:scale(.85)}35%{opacity:.5;transform:scale(1)}55%{opacity:1;transform:scale(1.15)}75%{opacity:.65;transform:scale(1.35)}100%{opacity:0;transform:scale(1.8)}}
@keyframes tsgw-stardust{0%{opacity:0;transform:scale(.2) rotate(0deg)}18%{opacity:1;transform:scale(.7) rotate(50deg)}60%{opacity:.85;transform:scale(1.25) rotate(210deg)}100%{opacity:0;transform:scale(1.95) rotate(330deg)}}

@media (max-width:949.98px),(orientation:portrait) and (pointer:coarse),(max-height:459.98px){
  #titles-block,#title-popup{display:none!important}
}

body.device-portrait-only #textureFold,
body.device-portrait-only .fold-note{display:none!important}

.settings-layout{min-width:0}
.settings-layout .settings-group{min-width:0;max-width:100%;overflow:hidden}
#settings-scroll{overflow-x:hidden}
#settings-content{max-width:min(1120px,100vw - 12px)}
.bonus-chance-info{max-width:100%}

body.characters-unfit .field-character{display:none!important;animation:none!important}
body.characters-unfit #titles-block,body.characters-unfit #title-popup{display:none!important}
body.characters-unfit #charactersToggle{display:none!important}
body.characters-unfit .field-character *,body.characters-unfit .field-character:before,body.characters-unfit .field-character:after{animation:none!important;transition:none!important}

#rotate-overlay .ro-dual{display:none}
@media (horizontal-viewport-segments:2),(vertical-viewport-segments:2),(screen-spanning:single-fold-vertical),(screen-spanning:single-fold-horizontal){
  .game-app{display:none!important}
  #rotate-overlay{display:flex!important}
  #rotate-overlay .ro-rotate{display:none}
  #rotate-overlay .ro-dual{display:block}
}

@media (min-width:2200px) and (min-height:1200px),(min-width:1800px) and (min-height:2800px){
  :root{--nav-h:88px}

  #siteNav .nav-inner{zoom:1.35;height:calc(88px / 1.35)}
  #panel{zoom:1.35}
  #settings-content,#sound-settings-content,#characters-settings-content,#game-over-content,#title-popup-card{zoom:1.3}

  #settings-content,#sound-settings-content,#characters-settings-content{max-height:calc(90vh / 1.3)}
  #rotate-overlay{zoom:1.4}
  .field-character{transform:scale(1.35);transform-origin:50% 100%}

  .field-character-left{left:calc(var(--board-left) - 265px)}
  .field-character-right{left:calc(var(--board-right) + 69px)}

  .score-toast{font-size:22px;padding:8px 19px}
  #spawn-hint-toast{font-size:18px;max-width:min(600px,calc(100vw - 32px))}
  #spawn-hint-toast .spawn-hint-close{width:27px!important;height:27px!important;font-size:15px}
}
@media (min-width:3400px) and (min-height:1800px),(min-width:2800px) and (min-height:3400px){
  :root{--nav-h:122px}
  #siteNav .nav-inner{zoom:1.9;height:calc(122px / 1.9)}
  #panel{zoom:1.9}
  #settings-content,#sound-settings-content,#characters-settings-content,#game-over-content,#title-popup-card{zoom:1.8}
  #settings-content,#sound-settings-content,#characters-settings-content{max-height:calc(90vh / 1.8)}
  #rotate-overlay{zoom:2}
  .field-character{transform:scale(1.9);transform-origin:50% 100%}

  .field-character-left{left:calc(var(--board-left) - 333px)}
  .field-character-right{left:calc(var(--board-right) + 135px)}

  .score-toast{font-size:30px;padding:11px 26px}
  #spawn-hint-toast{font-size:25px;max-width:min(840px,calc(100vw - 32px))}
  #spawn-hint-toast .spawn-hint-close{width:38px!important;height:38px!important;font-size:20px}
}

body.dual-screen-span .game-app{display:none!important}
body.dual-screen-span #rotate-overlay{display:flex!important}
body.dual-screen-span #rotate-overlay .ro-rotate{display:none}
body.dual-screen-span #rotate-overlay .ro-dual{display:block}

#zoom-guard{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;background:var(--theme-card-2,#efe8da)}
#zoom-guard[hidden]{display:none!important}
#zoom-guard .zg-card{max-width:560px;transform-origin:50% 50%;text-align:center;background:var(--theme-card,#fffdf6);border:1px solid var(--theme-line,rgba(0,0,0,.14));border-radius:18px;box-shadow:0 24px 70px var(--theme-shadow,rgba(0,0,0,.2));padding:34px 32px 28px;color:var(--theme-ink,#2c2620)}
#zoom-guard .zg-icon{color:var(--theme-accent,#e96c5c);margin-bottom:6px}
#zoom-guard h2{margin:0 0 10px;font-size:1.5rem;color:var(--theme-ink,#2c2620)}
#zoom-guard p{margin:0 0 20px;font-size:1.02rem;line-height:1.55;color:var(--theme-muted,#6d635a)}
#zoom-guard .zg-hint{margin:4px 0 0;font-size:.9rem;opacity:.85;color:var(--theme-ink,#2c2620)}

.field-character-left.at-bottom .character-avatar{bottom:calc(var(--pillar-height) + 4px)}

.field-character-left .character-avatar[data-king-pose="sulk"],
.field-character-left .character-avatar[data-king-pose="pout"]{bottom:calc(var(--pillar-height) - 8px)}
.field-character-right.at-top .character-avatar{filter:drop-shadow(0 0 12px rgba(255,210,63,.4))}

.pillar-trophies{position:absolute;left:50%;bottom:26px;width:80px;height:calc(var(--pillar-height) - 56px);transform:translateX(-50%);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;box-sizing:border-box;padding-top:8px;gap:3px;z-index:2;pointer-events:none}
.pillar-flag{font-size:21px;line-height:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));animation:flag-pop .5s ease}
.pillar-flag::before{content:"⚔️";display:inline-block}
body.hero-wizard .pillar-flag::before{content:"⭐"}
.pillar-flag:nth-child(odd)::before{transform:translateX(-14px) rotate(-12deg)}
.pillar-flag:nth-child(even)::before{transform:translateX(14px) rotate(12deg)}

body.characters-hidden .pillar-trophies,body.characters-unfit .pillar-trophies{display:none!important}
@keyframes flag-pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.pillar-flag{animation:none}}

#svc-panel{display:none;position:fixed;right:16px;bottom:16px;z-index:9000;width:340px;max-width:calc(100vw - 20px);padding:14px;border-radius:14px;background:linear-gradient(180deg,var(--theme-card,#2b2520),var(--theme-card-2,#201a16));color:var(--theme-ink,#f2e8d8);border:1px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 55%,transparent);box-shadow:0 14px 40px var(--theme-shadow,rgba(0,0,0,.5));font-size:14px}
#svc-panel .svc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-14px -14px 12px;padding:9px 12px 9px 14px;border-bottom:1px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 40%,transparent);border-radius:14px 14px 0 0;background:var(--theme-accent-soft,rgba(255,182,74,.12));user-select:none;-webkit-user-select:none}

#svc-panel .svc-drag{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:move;touch-action:none}
#svc-panel .svc-head b{white-space:nowrap;color:var(--theme-accent,#ffb64a);font-size:15px}

#svc-panel .svc-close{flex-shrink:0}
#svc-panel .svc-row{display:flex;gap:8px;align-items:center;margin-bottom:10px;white-space:nowrap}
#svc-panel input{flex:1;min-width:0;padding:8px 10px;border-radius:9px;border:1px solid var(--theme-line,#6e5f4a);background:var(--theme-card-2,#201a16);color:var(--theme-ink,#f2e8d8);font-size:14px}
body.theme-paper #svc-panel input{background:#fff}
#svc-panel input:focus{outline:none;border-color:var(--theme-accent,#ffb64a)}
#svc-panel .svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#svc-panel .svc-grid button{min-width:0;padding:8px 6px;border-radius:9px;border:1px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 45%,transparent);background:color-mix(in srgb,var(--theme-card-2,#201a16) 88%,transparent);color:var(--theme-ink,#f2e8d8);cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#svc-panel .svc-grid button:hover{background:var(--theme-accent-soft,rgba(255,182,74,.16));border-color:var(--theme-accent,#ffb64a)}
#svc-panel .svc-wide2{grid-column:span 2}
#svc-panel .svc-wide3{grid-column:span 3}
#svc-panel .svc-flag{margin-top:10px;font-size:12px;line-height:1.35;color:var(--theme-accent,#e8c87a)}

#svc-pass-modal{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;background:var(--theme-shadow,rgba(0,0,0,.45))}
#svc-pass-card{width:min(340px,calc(100vw - 32px));padding:18px;border-radius:14px;background:linear-gradient(180deg,var(--theme-card,#2b2520),var(--theme-card-2,#201a16));color:var(--theme-ink,#f2e8d8);border:1px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 55%,transparent);box-shadow:0 18px 48px var(--theme-shadow,rgba(0,0,0,.5))}
#svc-pass-card h3{margin:0 0 12px;font-size:16px;color:var(--theme-accent,#ffb64a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#svc-pass-card input{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:9px;border:1px solid var(--theme-line,#6e5f4a);background:var(--theme-card-2,#201a16);color:var(--theme-ink,#f2e8d8);font-size:14px}
body.theme-paper #svc-pass-card input{background:#fff}
#svc-pass-card input:focus{outline:none;border-color:var(--theme-accent,#ffb64a)}
.svc-pass-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.svc-pass-actions button{padding:8px 16px;border-radius:9px;font-size:13.5px;font-weight:700;cursor:pointer;border:1px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 45%,transparent);background:color-mix(in srgb,var(--theme-card-2,#201a16) 88%,transparent);color:var(--theme-ink,#f2e8d8)}
.svc-pass-actions button:hover{background:var(--theme-accent-soft,rgba(255,182,74,.16))}
.svc-pass-actions .svc-pass-ok{background:linear-gradient(135deg,var(--theme-accent,#ffb64a),color-mix(in srgb,var(--theme-accent,#ffb64a) 62%,#315b64));color:var(--bg,#17151a);border-color:var(--theme-accent,#ffb64a)}
body.theme-paper .svc-pass-actions .svc-pass-ok{color:#fff}
.svc-pass-actions .svc-pass-ok:hover{filter:brightness(1.1)}

#svc-panel .svc-eggs-toggle{width:100%;margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 45%,transparent);background:color-mix(in srgb,var(--theme-card-2,#201a16) 88%,transparent);color:var(--theme-ink,#f2e8d8);cursor:pointer;font-size:13px;font-weight:700;text-align:left}
#svc-panel .svc-eggs-toggle:hover{background:var(--theme-accent-soft,rgba(255,182,74,.16));border-color:var(--theme-accent,#ffb64a)}
#svc-panel .svc-eggs{display:flex;flex-direction:column;gap:5px;margin-top:7px;max-height:210px;overflow:auto;padding-right:2px}
#svc-panel .svc-eggs[hidden]{display:none}
#svc-panel .svc-eggs button{text-align:left;padding:7px 9px;border-radius:9px;border:1px solid color-mix(in srgb,var(--theme-accent,#ffb64a) 35%,transparent);background:color-mix(in srgb,var(--theme-card-2,#201a16) 88%,transparent);color:var(--theme-ink,#f2e8d8);cursor:pointer;font-size:12.5px;font-weight:600;line-height:1.25}
#svc-panel .svc-eggs button:hover:not(:disabled){background:var(--theme-accent-soft,rgba(255,182,74,.16));border-color:var(--theme-accent,#ffb64a)}
#svc-panel .svc-eggs button:disabled{opacity:.45;cursor:default}
#svc-panel .svc-eggs-note{font-size:11px;line-height:1.35;color:var(--theme-muted,#bda98c);margin:2px 0}

@media (max-width:949px),((orientation:portrait) and (pointer:coarse)),(orientation:landscape) and (max-height:459px){#svc-panel,#svc-pass-modal{display:none!important}}

@media (min-width:950px) and (max-width:1439px) and (orientation:landscape) and (min-height:460px),(min-width:950px) and (max-width:1439px) and (orientation:portrait) and (pointer:fine){
  body.panel-collapsed .field-character{transform:scale(.8)}
  body.panel-collapsed .field-character-left{left:calc(var(--board-left) - 197px)}
  body.panel-collapsed .field-character-right{left:calc(var(--board-right) + 1px)}
}

@media (min-width:1440px) and (max-width:2199px) and (orientation:landscape) and (min-height:460px),(min-width:1440px) and (max-width:2199px) and (orientation:portrait) and (pointer:fine){
  body.panel-collapsed .field-character{transform:scale(1.15);transform-origin:50% 100%}
  body.panel-collapsed .field-character-left{left:calc(var(--board-left) - 241px)}
  body.panel-collapsed .field-character-right{left:calc(var(--board-right) + 45px)}
}

@media (min-width:2200px) and (min-height:1200px),(min-width:1800px) and (min-height:2800px){
  body.panel-collapsed .field-character{transform:scale(1.5)}
  body.panel-collapsed .field-character-left{left:calc(var(--board-left) - 284px)}
  body.panel-collapsed .field-character-right{left:calc(var(--board-right) + 88px)}
}

@media (min-width:3400px) and (min-height:1800px),(min-width:2800px) and (min-height:3400px){
  body.panel-collapsed .field-character{transform:scale(2.05)}
  body.panel-collapsed .field-character-left{left:calc(var(--board-left) - 352px)}
  body.panel-collapsed .field-character-right{left:calc(var(--board-right) + 156px)}
}