@media (orientation: portrait) {
  :root:is(#pt#pt#pt#pt, *) {
    
    
    & { overflow-x: hidden; }
    & body { padding: 0; padding-top: var(--ad-top, 0px); overflow-x: clip; }   
    
    & body:not(:has(#title.show)) { background-image: var(--corner-deco);
      background-size: calc(100px * var(--k, 1)) calc(100px * var(--k, 1)), calc(100px * var(--k, 1)) calc(100px * var(--k, 1)), calc(100px * var(--k, 1)) calc(100px * var(--k, 1)),
        calc(38px * var(--k, 1)) calc(70px * var(--k, 1)), calc(34px * var(--k, 1)) calc(48px * var(--k, 1)), calc(52px * var(--k, 1)) calc(80px * var(--k, 1)), calc(28px * var(--k, 1)) calc(28px * var(--k, 1));
      
      background-position: left top, right top, right bottom, left 0 top calc(50% + 14.6px * var(--k, 1)), left bottom, right 0 top calc(50% - 172.8px * var(--k, 1)), left calc(7px * var(--k, 1)) bottom calc(56px * var(--k, 1)); }
    & .key-hint { display: none !important; }                                
    & #gallery-hint, & #title > .result-hint, & #result .result-hint { display: none !important; }

    
    & .app:not(:has(#title.show)) {
      display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 8px;
      width: 390px; min-height: var(--pfit-h, 0px); margin: 0; padding: 10px 14px 14px; position: relative;
    }
    
    & .app:not(:has(#title.show)) > div:first-child,
    & .app:not(:has(#title.show)) .panel { display: contents; }
    & .app:not(:has(#title.show)) .title-name.play-logo { display: none; }   

    
    & .app:not(:has(#title.show)) #side-sec-misc { order: 1; width: auto; margin: 0; padding: 0; border: none; border-radius: 0; background: none; }
    & .app:not(:has(#title.show)) #side-sec-misc .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: auto; margin: 0; }
    & .app:not(:has(#title.show)) #side-sec-misc .row button {
      flex: 0 0 auto; height: 40px; padding: 0 14px; background: #fff; border: 2px solid var(--frame) !important; border-radius: 10px; box-shadow: none;
    }
    & .app:not(:has(#title.show)) #side-sec-misc #btn-quit-title { order: 1; display: inline-flex; align-items: center; text-align: left; }
    & .app:not(:has(#title.show)) #side-sec-misc #btn-quit-title::before { width: 18px; height: 18px; margin: 0 8px 0 0; }
    & .app:not(:has(#title.show)) #side-sec-misc #btn-quit-title::after { margin-left: 8px; }
    & .app:not(:has(#title.show)) #side-sec-misc #btn-mute { order: 2; width: 48px; padding: 0 !important; position: relative; }
    & .app:not(:has(#title.show)) #side-sec-misc #btn-mute::before { left: 0; right: 0; margin: auto; width: 30px; height: 24px; background-size: contain; background-position: center; }

    
    & .app:not(:has(#title.show)) #side-sec-info {
      order: 2; display: grid; grid-template-rows: auto auto; grid-template-columns: 0.85fr 1.2fr 1.2fr 1fr 0.95fr; align-items: center;
      width: auto; height: 56px; margin: 0; padding: 0; border: 2px solid var(--frame); border-radius: 12px; background: #fff; overflow: hidden;
    }
    & .app:not(:has(#title.show)) #side-sec-info::before,
    & .app:not(:has(#title.show)) #side-sec-info::after,
    & #side-sec-info > .side-box-title { display: none; }
    & #side-sec-info > .hud:not([style*="none"]) { display: contents; }
    & .app:not(:has(#title.show)) #side-sec-info .hud .k,
    & .app:not(:has(#title.show)) #side-sec-info .hud .v {
      position: relative; display: flex; align-items: center; justify-content: center; height: auto; min-width: 0; margin: 0; padding: 0 2px;
      border: none; border-left: 1.5px solid #c6dbef; text-align: center; white-space: nowrap; line-height: 1.15; background: none;
    }
    & .app:not(:has(#title.show)) #side-sec-info .hud .k { align-self: end; padding-top: 5px; color: var(--text); font-weight: 800; }
    & .app:not(:has(#title.show)) #side-sec-info .hud .v { align-self: start; padding-bottom: 4px; font-size: 18px; font-weight: 900; }
    & .app:not(:has(#title.show)) #side-sec-info .hud .k[data-text="hud.item"]::before,
    & .app:not(:has(#title.show)) #side-sec-info .hud .k[data-text="hud.bonus"]::before { width: 10px; height: 10px; margin-right: 3px; }
    & .app:not(:has(#title.show)) #side-sec-info #hud-stage,
    & .app:not(:has(#title.show)) #side-sec-info #hud-rounds { font-size: 22px; line-height: 1.05; letter-spacing: 0; }
    
    & #hud-stage-block > * { grid-column: 1; }
    & .k[data-text="hud.rounds"]:has(+ #hud-rounds), & #hud-rounds { grid-column: 2; }
    & .k[data-text="hud.item"], & #hud-item { grid-column: 3; }
    & .k[data-text="hud.bonus"], & #hud-bonus { grid-column: 4; }
    & .k[data-text="hud.fuel"], & #hud-lives { grid-column: 5; }
    & #hud-tries-k, & #hud-tries { grid-column: 6; }
    & #hud-score-k, & #hud-score { grid-column: 7; }
    & #hud-floor-k, & #hud-floor { grid-column: 8; }
    & #side-sec-info .hud .k { grid-row: 1; }
    & #side-sec-info .hud .v { grid-row: 2; }
    & .app:not(:has(#title.show)) #side-sec-info #hud-stage-block > * { border-left: none; }
    
    & .app:not(:has(#title.show)) #side-sec-info .hud-frac { position: static; top: 0; left: 0; white-space: nowrap; }
    & .app:not(:has(#title.show)) #side-sec-info .hud-num { letter-spacing: 0; font-size: inherit; }
    & .app:not(:has(#title.show)) #side-sec-info .hud-sep { display: inline-block; width: 0.42em; height: 0.78em; margin: 0 0.16em; vertical-align: -0.04em; font-size: inherit; }
    & .app:not(:has(#title.show)) #hud-rounds .hud-note { display: none; }
    
    & .app:not(:has(#title.show)) #side-sec-info .hud .v.life .fuel-gauge { position: static; left: 0; top: 0; gap: 3px; vertical-align: 0; }
    & .app:not(:has(#title.show)) #side-sec-info .hud .v.life .fuel-tri { width: 14px; height: 13px; }

    
    & .app:not(:has(#title.show)) #side-sec-info.hud-compact { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; height: 98px; }
    & #side-sec-info.hud-compact .hud .k { grid-row: 1; }
    & #side-sec-info.hud-compact .hud .v { grid-row: 2; }
    & #side-sec-info.hud-compact #hud-stage-block > * { grid-column: 1 / 5; }
    & #side-sec-info.hud-compact .k[data-text="hud.rounds"], & #side-sec-info.hud-compact #hud-rounds { grid-column: 5 / 9; }
    & #side-sec-info.hud-compact #hud-score-k, & #side-sec-info.hud-compact #hud-score { grid-column: 9 / 13; }
    & #side-sec-info.hud-compact #hud-floor-k, & #side-sec-info.hud-compact #hud-floor { grid-column: 1 / 5; }
    & #side-sec-info.hud-compact .k[data-text="hud.item"], & #side-sec-info.hud-compact #hud-item { grid-column: 1 / 4; }
    & #side-sec-info.hud-compact .k[data-text="hud.bonus"], & #side-sec-info.hud-compact #hud-bonus { grid-column: 4 / 7; }
    & #side-sec-info.hud-compact #hud-tries-k, & #side-sec-info.hud-compact #hud-tries { grid-column: 7 / 10; }
    & #side-sec-info.hud-compact .k[data-text="hud.fuel"], & #side-sec-info.hud-compact #hud-lives { grid-column: 10 / 13; }
    & #side-sec-info.hud-compact :is(.k[data-text="hud.item"], .k[data-text="hud.bonus"], #hud-tries-k, .k[data-text="hud.fuel"]) { grid-row: 3; }
    & #side-sec-info.hud-compact :is(#hud-item, #hud-bonus, #hud-tries, #hud-lives) { grid-row: 4; }
    & .app:not(:has(#title.show)) #side-sec-info.hud-compact :is(.k[data-text="hud.item"], .k[data-text="hud.bonus"], #hud-tries-k, .k[data-text="hud.fuel"]) { border-top: 1.5px solid #c6dbef; }
    & .app:not(:has(#title.show)) #side-sec-info.hud-compact :is(.k[data-text="hud.item"], #hud-item) { border-left: none; }
    & .app:not(:has(#title.show)) #side-sec-info.hud-compact .hud .k { padding-top: 4px; }
    & .app:not(:has(#title.show)) #side-sec-info.hud-compact .hud .v { padding-bottom: 3px; font-size: 17px; }
    & .app:not(:has(#title.show)) #side-sec-info.hud-compact #hud-stage,
    & .app:not(:has(#title.show)) #side-sec-info.hud-compact #hud-rounds { font-size: 20px; }

    
    & .app:not(:has(#title.show)) .stage { order: 3; align-self: center; margin: -8px -14px -10px; }   
    & .app:not(:has(#title.show)) #board,
    & .app:not(:has(#title.show)) #board-fx { width: 390px !important; height: 390px !important; border-radius: 0; }
    
    & .app:not(:has(#title.show)) #board { touch-action: manipulation; cursor: pointer; }
    
    & .app:not(:has(#title.show)) #board-fx { left: 0 !important; top: 0 !important; }

    
    & .app:not(:has(#title.show)) #side-sec-ops {
      order: 4; flex: 1 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(10px, 2fr) auto;
      grid-template-areas: ". ." "ttl ttl" "slots slots" ". ." "dpad btns"; column-gap: 18px; row-gap: 0;
      width: auto; margin: 0; padding: 0; border: none; border-radius: 0; background: none;
    }
    & .app:not(:has(#title.show)) #side-sec-ops > .side-box-title { grid-area: ttl; display: flex; align-items: center; gap: 12px; margin: 0; line-height: 1.2; text-align: center; }
    & .app:not(:has(#title.show)) #side-sec-ops > .side-box-title::before,
    & .app:not(:has(#title.show)) #side-sec-ops > .side-box-title::after { content: ""; flex: 1 1 0; height: 2px; background: var(--frame); }
    & .app:not(:has(#title.show)) #side-sec-ops > .slots { grid-area: slots; width: auto; margin: 6px 0 0; gap: 9px; }
    & .app:not(:has(#title.show)) .slot { position: relative; flex: 1 1 0; width: auto; height: 64px; margin-left: 0; justify-content: center; padding-top: 16px; border-radius: 12px; }
    & .app:not(:has(#title.show)) .slot::before { position: absolute; top: 5px; left: 0; right: 0; margin: 0; font-size: 15px; line-height: 1; text-align: center; }
    & .app:not(:has(#title.show)) .slot.filled { background-size: 32px 32px; background-position: center 24px; }
    & .app:not(:has(#title.show)) #side-sec-ops > .section-title { display: none; }          
    & .app:not(:has(#title.show)) #side-sec-ops > .dpad {
      grid-area: dpad; align-self: end; grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); gap: 3px; margin: 0 0 0 2px;
    }
    & .app:not(:has(#title.show)) .dpad button { width: 60px; height: 60px; }
    & .app:not(:has(#title.show)) #side-sec-ops > .row {
      grid-area: btns; align-self: center; display: flex; flex-direction: column; gap: 10px; width: auto; margin: 0;
    }
    & .app:not(:has(#title.show)) #btn-execute,
    & .app:not(:has(#title.show)) #btn-clear { width: auto; min-width: 0; height: 68px; min-height: 0; margin: 0; padding: 0 10px; flex: none; }
    & .app:not(:has(#title.show)) #btn-clear { height: 62px; }
    & .app:not(:has(#title.show)) .btn-exec::before { top: 0; width: 18px; height: 23px; margin-right: 10px; }
    & .app:not(:has(#title.show)) #btn-clear::before { width: 21px; height: 21px; margin-right: 10px; }

    
    & #result { position: fixed; inset: 122px 0 0 0; z-index: 40; padding: 6px 14px 14px; background: rgba(253, 250, 240, 0.55); }
    & .app:has(#side-sec-info.hud-compact) #result { top: 164px; }
    & #result.show { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: auto; }
    & #result.result-centered { justify-content: center; align-items: center; }
    & :is(#result, #quit-overlay) .result-card,
    & #result.result-centered .result-card {
      position: relative; left: auto; top: auto; right: auto; flex: 0 0 auto; width: 100%; max-width: 362px; min-height: 0; margin: auto 0; padding: 14px 14px 18px;
    }
    & :is(#result, #quit-overlay) .result-card::after { top: auto; bottom: 8px; }
    & :is(#result, #quit-overlay) .result-title { width: auto; max-width: 300px; height: auto; min-height: 58px; padding: 6px 24px 8px; }
    
    & :is(#result, #quit-overlay) .result-title::before { left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
    
    & :is(#result, #quit-overlay) .result-title:not(.ng):not(.all) { letter-spacing: calc(-2.58px * var(--st-ST33-portrait, 1) * var(--tfit-size, 1)); }
    & #result .result-title.ng { letter-spacing: calc(-4.54px * var(--st-ST34-portrait, 1) * var(--tfit-size, 1)); }
    & #result .result-title.all { letter-spacing: calc(2.53px * var(--st-ST35-portrait, 1)); line-height: calc(56.25px * var(--st-ST35-portrait, 1)); text-indent: 0; }
    
    & #result .result-title.all { width: 300px; max-width: 300px; height: 96px; min-height: 0; padding: 22px 24px 0; }
    & #result .result-title.all::first-line { font-size: calc(59.31px * var(--st-ST35-portrait, 1)); letter-spacing: calc(-0.3px * var(--st-ST35-portrait, 1)); }
    & #result .tfit { transform: none; margin: 0; }
    & #result #result-body { width: 100%; }
    
    & #result #result-collect { gap: 10px; }
    & #result .rc-slot, & #result .rc-slot.rc-item { width: 84px; height: 84px; }
    & #result .rc-sil, & #result .rc-piece { left: calc(50% - 27px); top: calc(50% - 26px); width: 54px; height: 54px; }
    
    & #result #result-reason { font-size: 21px; line-height: 26px; margin: 6px 0 0; top: 0; }
    & :is(#result, #quit-overlay) .result-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin-top: 14px; }
    & :is(#result, #quit-overlay) .result-actions button { width: 100%; min-height: 52px; margin: 0; white-space: nowrap; }
    & :is(#result, #quit-overlay) .result-actions button.primary { min-height: 62px; }
    
    & :is(#result, #quit-overlay) .result-actions button::before { width: 22px; height: 22px; margin-right: 10px; vertical-align: -5px; }
    & #result .result-actions button.half::before { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }
    & :is(#result, #quit-overlay) .result-actions button.primary::before { width: 26px; height: 26px; margin-right: 12px; vertical-align: -6px; }

    
    & .app:has(#title.show) { width: 390px; padding: 0; border: none; border-radius: 0; box-shadow: none; }
    
    & body:has(#title.show) { --tks: calc(0.5 * var(--k, 1)); background-image: var(--title-deco);
      background-position: left 0 top calc(-100px * var(--tks)), left 0 top calc(124.4px * var(--tks)), right 0 top calc(-100px * var(--tks)), right 0 bottom 0,
        left 0 top calc(50% - 68.4px * var(--tks)), left 0 bottom calc(18.6px * var(--tks)), right calc(10.7px * var(--tks)) top calc(50% - 123.9px * var(--tks)),
        left calc(89.2px * var(--tks)) bottom calc(18.1px * var(--tks)), right calc(140.7px * var(--tks)) top 0, right 0 bottom calc(124.3px * var(--tks)),
        left 0 bottom calc(0.3px * var(--tks)), right calc(211.6px * var(--tks)) bottom calc(3.1px * var(--tks)), right calc(138.5px * var(--tks)) bottom 0;
      background-size: calc(170.1px * var(--tks)) calc(290.3px * var(--tks)), calc(147.9px * var(--tks)) calc(326.8px * var(--tks)), calc(128.5px * var(--tks)) calc(261.6px * var(--tks)),
        calc(142.9px * var(--tks)) calc(181.1px * var(--tks)), calc(109px * var(--tks)) calc(219px * var(--tks)), calc(65.5px * var(--tks)) calc(137.2px * var(--tks)),
        calc(106.4px * var(--tks)) calc(193px * var(--tks)), calc(66.3px * var(--tks)) calc(63.4px * var(--tks)), calc(288.8px * var(--tks)) calc(63.4px * var(--tks)),
        calc(116.4px * var(--tks)) calc(221.6px * var(--tks)), calc(88.9px * var(--tks)) calc(62.6px * var(--tks)), calc(74.9px * var(--tks)) calc(67.3px * var(--tks)),
        calc(59.1px * var(--tks)) calc(75.7px * var(--tks)); }
    & .app:has(#title.show) #title { background-image: none; }
    & .app:has(#title.show) .stage { width: 390px; height: max(800px, var(--pfit-h, 0px)); border-radius: 0; }
    & .app:has(#title.show) #title.show {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto;
      grid-template-areas: "lang mute" "logo logo" "gap gap" "acts acts"; column-gap: 8px; align-items: start;
      padding: 14px 16px 40px; border-radius: 0;
    }
    & #title > #btn-lang-title { grid-area: lang; position: static; justify-self: end; }
    & #title > #btn-mute-title { grid-area: mute; position: static; }
    & #title > #btn-privacy-title { right: 16px; bottom: 4px; padding: 4px 10px; }   
    & #title > #btn-games-title { left: 16px; bottom: 4px; padding: 4px 10px; }   
    & #title > .title-name { grid-area: logo; justify-self: center; width: 330px; height: 95px; margin: 44px 0 0; }
    & #title > .title-spacer { grid-area: gap; }
    & #title > #title-prod-actions { grid-area: acts; grid-template-columns: 340px; justify-content: center; gap: 14px; margin: 0; }
    & #btn-mode-stage25, & #btn-mode-prod-endless { min-height: 78px; padding: 12px 40px 12px 64px; }
    & #btn-mode-stage25 > span, & #btn-mode-prod-endless > span { letter-spacing: 0.04em; }
    
    & #btn-mode-stage25::before { left: 24px; width: 26px; height: 26px; transform: translateY(-50%); }
    & #btn-mode-prod-endless::before { left: 26px; width: 24px; height: 26px; transform: translateY(-50%); }
    & #btn-mode-stage25::after, & #btn-mode-prod-endless::after { right: 20px; width: 12px; height: 20px; transform: translateY(-50%); }
    & .stage:has(#title.show) #board { width: 350px !important; height: 350px !important; top: 226px;   
      
      transform: translateX(-50%) perspective(1300px) rotateX(45deg); }

    
    & #lang-pop { left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); zoom: var(--k, 1);
      width: 300px; gap: 6px; padding: 12px; }
    & #lang-pop .lang-item { min-width: 0; min-height: 46px; padding: 0 16px; border-color: #c6dbef; }
    & #lang-pop .lang-item.focus { border-color: var(--cyan-line); }

    
    & #quit-overlay .quit-box { width: 362px; margin: auto 0; padding: 14px 14px 20px; }
    & #quit-overlay #quit-confirm-msg { margin: 14px 6px 14px; }
    & #quit-overlay #quit-confirm-msg.has-note { margin-bottom: 4px; }   
    & #quit-overlay #quit-confirm-note { margin: 0 6px 14px; }

    
    
    & #gallery-overlay.is-select { padding: calc(12px + var(--gal-ad-top, 0px)) 10px 24px 10px !important;   
      background-position: left top, right top, right bottom, left 0 top calc(50% - 34.64px), left 0 bottom 34.82px, right -2.18px top calc(50% - 50.32px), left 20.54px bottom 13.72px,
        left 0 top 16.14px, right 2.42px top calc(50% + 44.17px), left 6.46px top calc(50% + 43.53px), right 96.45px bottom -1.52px, left 58.11px bottom -1.52px, right 0 top 0,
        right -73px top 1.68px, left 68.6px top 0 !important;
      background-size: 80.71px 74.25px, 85.55px 96.85px, 98.46px 123.48px, 48.55px 97.49px, 44.39px 83.93px, 53.67px 91.08px, 27.6px 28.33px, 100.88px 112.99px, 53.19px 116.78px,
        31.48px 56.09px, 114.61px 42.37px, 127.11px 27.04px, 100.9px 22px, 282.47px 18.16px, 52.46px 20.99px !important; }
    & #gallery-overlay.is-select > .gallery-bar {
      display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-areas: "back . mute" "head head head" !important; align-items: center !important; row-gap: 6px !important;
      width: 370px !important; max-width: 100% !important; height: auto !important; margin: 0 auto 12px !important;
    }
    & #gallery-overlay.is-select .gallery-logo { display: none !important; }
    & #gallery-overlay.is-select #gallery-heading { grid-area: head !important; justify-self: center !important; position: relative !important; left: auto !important; top: auto !important; transform: none !important; line-height: 50px !important; margin: 0 !important; }
    & #gallery-overlay.is-select #gallery-heading::before { left: -36px !important; width: 24px !important; height: 30px !important; margin-top: -15px !important; }
    & #gallery-overlay.is-select #gallery-heading::after { right: -36px !important; width: 24px !important; height: 32px !important; margin-top: -16px !important; }
    
    & #gallery-overlay.is-select #gallery-crystals { grid-area: head !important; justify-self: end !important; position: static !important; height: 36px !important; margin: 0 !important; font-size: 22px !important; gap: 5px !important;
      padding: 0 10px !important; background: #fff !important; border: 2px solid var(--frame) !important; border-radius: 10px !important; box-sizing: border-box !important; }   
    & #gallery-overlay.is-select .gallery-crystals-gem { width: 22px !important; height: 22px !important; }
    
    & #gallery-overlay.is-select #gallery-mute {
      grid-area: mute !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 48px !important; height: 40px !important;
      margin: 0 !important; padding: 0 !important; font-size: 0 !important; background: #fff !important; border: 2px solid var(--frame) !important; border-radius: 10px !important; box-shadow: none !important;
    }
    & #gallery-overlay.is-select #gallery-mute::before { position: relative !important; left: 0 !important; width: 30px !important; height: 24px !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; }
    & #gallery-overlay.is-select #gallery-close.to-title { grid-area: back !important; position: static !important; min-width: 0 !important; height: 40px !important; padding: 0 14px !important; }
    & #gallery-overlay.is-select #gallery-close.to-title::before { width: 18px !important; height: 18px !important; margin-right: 6px !important; vertical-align: -3px !important; }
    & #gallery-overlay.is-select > .gallery-grid {
      width: 370px !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: none !important; grid-auto-rows: 150px !important; gap: 8px !important;
      padding: 0 !important; border: none !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; top: 0 !important;   
    }
    
    & #gallery-overlay.is-select > .gallery-grid > .gallery-card { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; padding: 6px !important; position: relative !important; }
    & #gallery-overlay.is-select > .gallery-grid > .gallery-card:not(.gallery-card-locked) { padding: 6px 6px 20px !important; }
    & #gallery-overlay.is-select > .gallery-grid > .gallery-card:not(.gallery-card-locked) > .gallery-card-head {
      grid-column: 1 !important; grid-row: 1 !important; position: static !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; min-height: 28px !important; padding: 2px 6px !important; border-radius: 8px !important;
    }
    
    & #gallery-overlay.is-select > .gallery-grid > .gallery-card .gallery-card-no { font-size: 20px !important; line-height: 24px !important; letter-spacing: -0.06em !important;
      position: static !important; top: 0 !important; left: 0 !important; }   
    & #gallery-overlay.is-select > .gallery-grid > .gallery-card:not(.gallery-card-locked) > canvas {
      grid-column: 1 !important; grid-row: 2 !important; position: static !important; transform: none !important; width: 84px !important; height: 84px !important; justify-self: center !important; align-self: start !important; margin: 3px 0 0 !important;
    }
    & #gallery-overlay.is-select > .gallery-grid > .gallery-card:not(.gallery-card-locked) .gallery-medal { width: 22px !important; height: 22px !important; margin: 0 0 0 auto !important; }   
    & #gallery-overlay.is-select > .gallery-grid > .gallery-card:not(.gallery-card-locked) .gallery-clear-rounds {
      position: absolute !important; left: 0 !important; right: 0 !important; bottom: 4px !important; margin: 0 !important; text-align: center !important;
      color: var(--text) !important;   
    }
    
    
    & #gallery-overlay.is-select .gallery-card-locked > .gallery-card-head { left: 0 !important; top: 0 !important; margin: 0 !important; min-height: 28px !important; padding: 2px 6px !important;
      display: flex !important; align-items: center !important; box-sizing: border-box !important; }
    & #gallery-overlay.is-select .gallery-card-locked .gallery-lock-need { left: 0 !important; right: 0 !important; top: 46px !important; }
    & #gallery-overlay.is-select .gallery-card-locked .gallery-lock-q { margin-top: 52px !important; line-height: 1 !important; }
    & #gallery-overlay.is-select .gallery-lock-gem { width: 16px !important; height: 16px !important; }

    
    & #gallery-overlay.is-select > .gallery-grid:has(.survival-wrap) { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
    & #gallery-overlay .survival-wrap { height: auto !important; gap: 10px !important; }
    & #gallery-overlay .survival-slot { flex: none !important; }
    & #gallery-overlay .survival-slot:not(.gallery-card-locked) { flex-wrap: nowrap !important; height: 64px !important; min-height: 64px !important; align-items: stretch !important; }
    
    & #gallery-overlay .survival-slot:not(.gallery-card-locked) .survival-head {
      flex: 0 0 114px !important; width: 114px !important; min-width: 0 !important; padding: 0 10px !important; box-sizing: border-box !important; border-radius: 11px 0 0 11px !important;
      display: grid !important; grid-template-columns: auto 1fr !important; align-content: center !important; justify-content: start !important; column-gap: 5px !important; row-gap: 3px !important;
    }
    & #gallery-overlay .survival-num { grid-row: 1 !important; grid-column: 1 !important; font-size: 34px !important; line-height: 1 !important; margin: 0 !important; }
    & #gallery-overlay .survival-unit { grid-row: 1 !important; grid-column: 2 !important; align-self: start !important; margin: 0 !important; line-height: 1.15 !important; }
    & #gallery-overlay .survival-diff { grid-row: 2 !important; grid-column: 1 / 3 !important; flex-wrap: nowrap !important; width: auto !important; margin: 0 !important; gap: 0 2px !important; }
    & #gallery-overlay .survival-diff-label { display: none !important; }
    
    & #gallery-overlay .survival-stack {
      order: 0 !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; height: 54px !important; margin: auto 4px !important;
      display: flex !important; flex-direction: row-reverse !important; justify-content: flex-end !important; overflow: visible !important;
    }
    & #gallery-overlay .survival-mini { position: relative !important; left: auto !important; top: 0 !important; width: 54px !important; height: 54px !important; margin-left: -30px !important; flex: none !important; }
    & #gallery-overlay .survival-mini:last-child { margin-left: 0 !important; }
    
    & #gallery-overlay .survival-resume { flex-direction: column !important; gap: 2px !important; }
    & #gallery-overlay .survival-mini:nth-last-child(n+5) { display: none !important; }   
    
    & #gallery-overlay .survival-side { flex: 0 0 118px !important; width: 118px !important; padding: 0 10px 0 0 !important; box-sizing: border-box !important; }
    
    & #gallery-overlay .survival-rec { width: 100% !important; grid-template-columns: 41px minmax(0, 1fr) !important; column-gap: 4px !important; row-gap: 2px !important; }
    
    & #gallery-overlay .survival-slot .survival-new { right: 120px !important; }
    & #gallery-overlay .survival-slot.gallery-card-locked { min-height: 64px !important; }
    & #gallery-overlay .survival-slot.gallery-card-locked .gallery-lock-q { width: 40px !important; height: 56px !important; margin-top: 0 !important; line-height: 56px !important; }
    
    & #gallery-overlay .survival-lock-note { right: 40px !important; left: calc(50% + 22px) !important; text-align: right !important; }
    
    & #unlock-toasts { left: 12px; right: 12px; top: 70px; transform: none; }
    & #unlock-toasts .ut-toast { gap: 8px; padding: 8px 10px 8px 9px; }
    & #unlock-toasts .ut-icon { width: 26px; height: 26px; }
    & #unlock-toasts .ut-text { white-space: normal; }
  }
  
  & #title > #btn-soundtest-title { right: auto; left: 50%; bottom: 224px; width: 60px; height: 60px; transform: translateX(-50%); }
  & #title > #btn-soundtest-title::before { width: 34px; height: 34px; }
  
  & .app.is-soundtest #side-sec-sound { display: contents; }
  & .app.is-soundtest #side-sec-sound .snd-head { order: 2; height: 56px; margin: 0; padding: 0 14px; gap: 12px; border: 2px solid var(--frame); border-radius: 12px; background: #fff; }
  & .app.is-soundtest #side-sec-sound .snd-icon { width: 38px; height: 38px; border-radius: 9px; background-size: 22px; }
  & .app.is-soundtest #side-sec-sound .snd-list { order: 4; flex: 1 0 auto; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: column;
    grid-template-rows: repeat(7, auto); align-content: start; gap: 4px 6px; padding: 0; }
  & .app.is-soundtest #side-sec-sound .snd-row { min-height: 36px; padding: 3px 6px 3px 4px; gap: 6px; background: #fff; border-color: #c6dbef; }
  & .app.is-soundtest #side-sec-sound .snd-row.is-playing { background: #fff3cc; border-color: var(--gold); }
  & .app.is-soundtest #side-sec-sound .snd-no { width: 28px; }
  & .app.is-soundtest #side-sec-sound .snd-play { width: 12px; height: 12px; }
}