/* FORM CLASH / style.css / v0.7.7 */
.result-share-actions{display:flex;gap:8px;width:min(92%,360px);margin-top:12px;flex-shrink:0}.result-share-actions #shareResultButton,.result-share-actions #shareGameButton{flex:1;width:auto;min-width:0;min-height:42px;margin:0;border:1px solid #6db8ff;border-radius:10px;background:linear-gradient(135deg,#1778d2,#1855a0);color:#fff;font-size:12px;font-weight:800}.result-share-actions #shareGameButton:disabled{opacity:.5}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#080b12;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  touch-action:manipulation;
  overscroll-behavior:none
}

button{font:inherit;color:inherit}
button:disabled{cursor:default}

#app{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:radial-gradient(circle at 50% 20%,#18243a 0,#0d1422 38%,#070a10 100%)
}

.screen{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden
}

.hidden-screen{display:none!important}

/* COMMON */

.screen-title{
  font-size:22px;
  font-weight:900;
  letter-spacing:1.5px
}

.screen-subtitle{
  margin-top:3px;
  color:#7d91ad;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px
}

.back-button{
  width:42px;
  height:42px;
  flex:0 0 auto;
  border:1px solid #44536b;
  border-radius:12px;
  background:#151d2a;
  font-size:23px;
  font-weight:900
}

.back-button:active{transform:scale(.95)}

/* HOME */

#homeScreen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:max(14px,env(safe-area-inset-top)) 24px max(14px,env(safe-area-inset-bottom));
  background:#050608;
  overflow-y:auto
}
#homeScreen>*{flex-shrink:0}
#homeScreen .home-battle-art{margin-top:auto}
#homeScreen .home-copyright{margin-bottom:auto}

.home-battle-art{display:block;width:min(100%,360px);height:auto;max-height:clamp(96px,19vh,154px);flex-shrink:0;margin-bottom:14px}
.home-art-unit text{font:800 11px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;fill:#fff;text-anchor:middle}
.home-art-unit .home-art-dark{fill:#382d08}

.home-title{
  font-size:clamp(34px,10vw,52px);
  line-height:1;
  font-weight:1000;
  letter-spacing:2px;
  text-align:center
}

.home-japanese-title{margin-top:9px;font-size:14px;font-weight:700;letter-spacing:2px;color:#c4d2e3;text-align:center}
.home-subtitle{
  margin:10px 0 22px;
  color:#758ba8;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px
}

.home-menu{
  width:min(100%,330px);
  display:flex;
  flex-direction:column;
  gap:10px
}

.home-button{
  min-height:58px;
  border:1px solid #40516a;
  border-radius:16px;
  background:linear-gradient(180deg,#1b2637,#111925);
  font-size:17px;
  font-weight:900;
  letter-spacing:1px;
  box-shadow:0 8px 20px rgba(0,0,0,.2)
}

.home-button.primary{
  border-color:#2379c9;
  background:linear-gradient(180deg,#1976d2,#0d47a1);
  box-shadow:0 0 22px rgba(25,118,210,.25)
}

.home-button:active{transform:scale(.98)}
.home-button.locked{opacity:.45}

.home-button.locked span{
  display:block;
  margin-top:3px;
  font-size:8px;
  letter-spacing:2px
}

.sound-toggle{min-height:44px;flex-shrink:0;padding:8px 20px;margin-top:12px;border:1px solid #41546a;border-radius:22px;background:#101721;color:#bdd3e9;font-size:12px;letter-spacing:1px}
.sound-toggle[aria-pressed="false"]{color:#8190a0;border-color:#303944}
@media(max-height:700px){.home-battle-art{max-height:90px;margin-bottom:8px}.sound-toggle{margin-top:7px}.home-copyright{margin-top:7px}}
.home-copyright{
  margin-top:18px;
  color:#46556a;
  font-size:8px;
  font-weight:800;
  letter-spacing:1px
}

/* DIFFICULTY */

#difficultyScreen{
  padding:max(18px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));
  overflow-y:auto
}

.difficulty-header{
  width:100%;
  max-width:520px;
  margin:0 auto 24px;
  display:flex;
  align-items:center;
  gap:14px
}

.difficulty-list{
  width:100%;
  max-width:420px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:13px
}

.difficulty-button{
  position:relative;
  width:100%;
  min-height:108px;
  padding:17px 20px;
  border:1px solid #40516a;
  border-radius:18px;
  background:linear-gradient(135deg,#182232,#101722);
  text-align:left;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.2)
}

.difficulty-button::after{
  content:"›";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:34px;
  font-weight:300;
  opacity:.55
}

.difficulty-button:active:not(:disabled){transform:scale(.98)}

.difficulty-name{
  font-size:23px;
  line-height:1;
  font-weight:1000;
  letter-spacing:1.5px
}

.difficulty-description{
  margin-top:11px;
  font-size:12px;
  font-weight:900;
  letter-spacing:1px
}

.difficulty-detail{
  margin-top:5px;
  color:#8494aa;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px
}

.difficulty-button.easy{border-left:5px solid #43a047}
.difficulty-button.normal{border-left:5px solid #1976d2}
.difficulty-button.hard{border-left:5px solid #e53935}

.difficulty-button.extra{
  border-left:5px solid #b46cdb;
  background:linear-gradient(135deg,#241b35,#141b28)
}

/* DESIGN */

#designScreen{
  padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
  overflow-y:auto
}

.design-header{
  width:100%;
  max-width:600px;
  margin:0 auto 10px;
  display:flex;
  align-items:center;
  gap:12px
}

.unit-selector{
  width:100%;
  max-width:600px;
  margin:0 auto 10px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px
}

.unit-select-button{
  min-width:0;
  height:50px;
  padding:4px 2px;
  border:1px solid #36445a;
  border-radius:10px;
  background:#111925;
  color:#8494aa
}

.unit-select-button span{
  display:block;
  font-size:8px;
  font-weight:900
}

.unit-select-button strong{
  display:block;
  margin-top:2px;
  font-size:17px;
  line-height:1
}

.unit-select-button.selected{
  border-color:#fff;
  background:#253246;
  color:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.12)
}

/* PREVIEW */

.design-preview{
  position:relative;
  width:100%;
  max-width:600px;
  height:150px;
  margin:0 auto 8px;
  border:1px solid #2e3b50;
  border-radius:16px;
  background:radial-gradient(circle at center,#1b2940 0,#101824 65%,#0b111b 100%);
  overflow:hidden;
  touch-action:pan-y
}

.preview-unit-name{
  position:absolute;
  left:12px;
  top:10px;
  color:#91a2b8;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.5px
}

.preview-hint{
  position:absolute;
  right:10px;
  bottom:8px;
  color:#53647b;
  font-size:8px;
  font-weight:800;
  letter-spacing:1.2px
}

.design-unit-graphic{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-44%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  margin:0;
  border:0;
  text-decoration:none;
  background:#fff;
  overflow:hidden;
  transition:width .18s,height .18s,border-radius .18s,clip-path .18s
}

.design-unit-core{
  position:relative;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:17px;
  font-weight:1000;
  line-height:1;
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.8)
}

.design-unit-core .sniper-glass{
  position:absolute;
  top:42%;
  width:30%;
  height:19%;
  border:1px solid rgba(255,255,255,.8);
  border-radius:2px 2px 5px 5px;
  background:#080a0d;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.9)
}

.design-unit-core .sniper-glass.left{left:17%;transform:rotate(5deg)}
.design-unit-core .sniper-glass.right{right:17%;transform:rotate(-5deg)}

.design-unit-core .sniper-glass.left::after{
  content:"";
  position:absolute;
  left:100%;
  top:30%;
  width:22%;
  height:2px;
  background:#080a0d
}

/* POINTS */

.point-panel{
  width:100%;
  max-width:600px;
  margin:0 auto 8px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px
}

.point-panel>div{
  padding:8px 10px;
  border:1px solid #2d3a4e;
  border-radius:10px;
  background:#111925;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.point-panel span{
  color:#7f91aa;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px
}

.point-panel strong{font-size:13px}

.reset-unit-button{
  min-width:0;
  padding:8px 6px;
  border:1px solid #5b3b43;
  border-radius:10px;
  background:#21151a;
  color:#ff8a96;
  font-size:9px;
  font-weight:1000;
  letter-spacing:1px
}

/* PARAMETERS */

.parameter-list{
  width:100%;
  max-width:600px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:5px
}

.parameter-row{
  min-height:39px;
  padding:5px 6px;
  border:1px solid #283649;
  border-radius:10px;
  background:rgba(17,25,37,.92);
  display:grid;
  grid-template-columns:53px 27px 29px minmax(45px,1fr) 29px 62px;
  align-items:center;
  gap:4px
}

.parameter-name{
  min-width:0;
  font-size:9px;
  font-weight:1000;
  white-space:nowrap
}

.parameter-number{
  min-width:0;
  color:#fff;
  font-size:13px;
  line-height:1;
  font-weight:1000;
  text-align:center;
  font-variant-numeric:tabular-nums
}

.parameter-button{
  width:29px;
  height:27px;
  padding:0;
  border:1px solid #3a4b63;
  border-radius:7px;
  background:#1b2636;
  font-size:16px;
  font-weight:900;
  line-height:1
}

.parameter-button:active{transform:scale(.93)}

.parameter-bar{
  position:relative;
  width:100%;
  height:27px;
  border:1px solid #35455c;
  border-radius:7px;
  background:#090e16;
  overflow:hidden;
  touch-action:none
}

.parameter-bar::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  height:6px;
  transform:translateY(-50%);
  border-radius:5px;
  background:#182334;
  pointer-events:none
}

.parameter-fill{
  position:absolute;
  left:8px;
  top:50%;
  width:0;
  height:6px;
  transform:translateY(-50%);
  border-radius:5px;
  background:linear-gradient(90deg,#1976d2,#64b5f6);
  pointer-events:none
}

.parameter-fill::after{
  content:"";
  position:absolute;
  right:-7px;
  top:50%;
  width:15px;
  height:15px;
  transform:translateY(-50%);
  border:2px solid #fff;
  border-radius:50%;
  background:#1976d2;
  box-shadow:0 0 5px rgba(100,181,246,.65)
}

.parameter-real{
  min-width:0;
  color:#79baff;
  font-size:13px;
  line-height:1;
  font-weight:1000;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.parameter-real.max-bonus{
  color:#d7ecff;
  text-shadow:0 0 3px rgba(255,255,255,.65),0 0 7px rgba(100,181,246,.45)
}

/* BOOST */

.boost-panel{
  width:100%;
  max-width:600px;
  margin:8px auto 0;
  padding:8px;
  border:1px solid #2d3a4e;
  border-radius:11px;
  background:#111925
}

.boost-title{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
  color:#8798ae;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px
}

.boost-buttons{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px
}

.boost-button{
  min-width:0;
  height:31px;
  padding:0 2px;
  border:1px solid #3a4a61;
  border-radius:7px;
  background:#182231;
  font-size:9px;
  font-weight:900
}

.boost-button.selected{
  border-color:#ffca28;
  background:#5a4510;
  color:#ffe082;
  box-shadow:0 0 8px rgba(255,202,40,.22)
}

/* SAVE */

.save-panel{
  width:100%;
  max-width:600px;
  margin:8px auto 10px;
  text-align:center
}

.unit-status{
  margin-bottom:4px;
  color:#ffca28;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px
}

.save-unit-button{
  width:100%;
  height:40px;
  border:1px solid #1976d2;
  border-radius:10px;
  background:linear-gradient(180deg,#1976d2,#0d47a1);
  font-size:12px;
  font-weight:1000
}

.save-unit-button.saved{
  border-color:#39485c;
  background:#182231;
  color:#8798ae
}

.save-message{
  min-height:14px;
  margin-top:5px;
  color:#74869e;
  font-size:8px
}

/* MEDAL */

#medalScreen{padding-bottom:max(16px,env(safe-area-inset-bottom))}

.simple-header{
  padding:max(16px,env(safe-area-inset-top)) 18px 0;
  display:flex;
  align-items:center;
  gap:14px
}

.medal-container{
  width:min(calc(100% - 28px),520px);
  margin:22px auto 0
}

.medal-page-header{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:10px;
  margin-bottom:12px
}

.medal-page-button{
  width:42px;
  height:38px;
  padding:0;
  border:1px solid #40516a;
  border-radius:10px;
  background:#151d2a;
  font-size:24px;
  font-weight:900;
  line-height:1
}

.medal-page-button:active{transform:scale(.94)}
.medal-page-button:disabled{opacity:.25}

.medal-page-label{
  color:#8fa2ba;
  text-align:center;
  font-size:10px;
  font-weight:900;
  letter-spacing:2px
}

.medal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}

#medalConditionDialog{width:min(88vw,360px);max-height:85dvh;overflow-y:auto;padding:24px 20px;border:1px solid #a89155;border-radius:18px;background:#131d2b;color:#edf4ff;text-align:center}
#medalConditionDialog::backdrop{background:#000b}
.medal-condition-icon{font-size:36px;color:#f4d883}
#medalConditionTitle{font-size:20px;margin:10px 0 18px}
.medal-condition-label{font-size:11px;color:#f4d883;letter-spacing:2px}
#medalConditionText{font-size:14px;line-height:1.8;white-space:pre-line;text-align:left}
#closeMedalCondition{width:100%;min-height:44px;margin-top:12px;border:1px solid #566b86;border-radius:10px;background:#243650}
button.medal-item{appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;color:inherit;padding:0}
button.medal-item:focus-visible{outline:2px solid #f4d883;outline-offset:2px}
.medal-item{
  min-width:0;
  height:76px;
  padding:8px;
  border:1px solid #344257;
  border-radius:12px;
  background:linear-gradient(145deg,#151e2b,#0e151f);
  display:flex;
  align-items:center;
  gap:9px;
  overflow:hidden
}

.medal-item-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:2px solid #53647b;
  border-radius:50%;
  background:#111925;
  color:#53647b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:1000;
  box-shadow:inset 0 0 0 3px #0c121b
}

.medal-item-title{
  min-width:0;
  color:#66788f;
  font-size:11px;
  font-weight:1000;
  line-height:1.25;
  overflow-wrap:anywhere
}

.medal-item.unlocked{
  border-color:#8f762c;
  background:linear-gradient(145deg,#302714,#17140d);
  box-shadow:0 0 10px rgba(255,202,40,.08)
}

.medal-item.unlocked .medal-item-icon{
  border-color:#ffca28;
  background:radial-gradient(circle,#fff3b0 0,#d7a915 58%,#72560a 100%);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.2),0 0 9px rgba(255,202,40,.25)
}

.medal-item.unlocked .medal-item-title{color:#ffe082}
.medal-item.coming{opacity:.35}
.medal-item.coming .medal-item-icon{font-size:12px}

.medal-item.coming .medal-item-title{
  color:#75869d;
  font-size:9px;
  letter-spacing:.7px
}

.medal-page-dots{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:7px
}

.medal-page-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#35445a
}

.medal-page-dot.selected{
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.55)
}

/* HOW TO */

#howToScreen{
  padding-bottom:max(20px,env(safe-area-inset-bottom));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
}

.howto-container{
  width:min(calc(100% - 28px),520px);
  margin:22px auto 28px
}

.howto-block{
  position:relative;
  margin-bottom:12px;
  padding:18px 16px 16px;
  border:1px solid #344257;
  border-radius:15px;
  background:linear-gradient(145deg,#151e2b,#0e151f);
  overflow:hidden
}

.howto-number{
  position:absolute;
  right:12px;
  top:8px;
  color:#25344a;
  font-size:32px;
  line-height:1;
  font-weight:1000
}

.howto-title{
  position:relative;
  color:#64b5f6;
  font-size:11px;
  font-weight:1000;
  letter-spacing:2px
}

.howto-lead{
  position:relative;
  margin-top:5px;
  font-size:16px;
  line-height:1.35;
  font-weight:1000
}

.howto-block p{
  position:relative;
  margin:11px 0 0;
  color:#a9b8ca;
  font-size:12px;
  line-height:1.75;
  font-weight:700
}

.howto-note{
  position:relative;
  margin-top:12px;
  padding:9px 10px;
  border-left:3px solid #ffca28;
  border-radius:4px;
  background:rgba(255,202,40,.07);
  color:#ffe082;
  font-size:10px;
  line-height:1.55;
  font-weight:900
}

.howto-charge{
  position:relative;
  margin-top:13px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px
}

.howto-charge div{
  min-width:0;
  padding:8px 2px;
  border:1px solid #35465d;
  border-radius:8px;
  background:#0b121d;
  text-align:center
}

.howto-charge span,
.howto-charge strong{
  display:block
}

.howto-charge span{
  color:#7f92aa;
  font-size:7px;
  font-weight:900;
  white-space:nowrap
}

.howto-charge strong{
  margin-top:4px;
  font-size:13px;
  font-weight:1000
}

.howto-swipe{
  position:relative;
  width:min(100%,280px);
  height:190px;
  margin:14px auto 2px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  align-items:center;
  justify-items:center
}

.howto-swipe>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px
}

.howto-swipe strong{
  width:39px;
  height:39px;
  border:1px solid #53677f;
  border-radius:50%;
  background:#182434;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  line-height:1
}

.howto-swipe span{
  color:#8396ae;
  font-size:7px;
  font-weight:900;
  white-space:nowrap
}

.howto-up{grid-column:2;grid-row:1}
.howto-left{grid-column:1;grid-row:2}
.howto-center{grid-column:2;grid-row:2}
.howto-right{grid-column:3;grid-row:2}
.howto-down{grid-column:2;grid-row:3}

.howto-center strong{
  border-color:#64b5f6;
  background:#174c7e;
  box-shadow:0 0 12px rgba(100,181,246,.22)
}

.howto-result{
  position:relative;
  margin-top:13px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px
}

.howto-result div{
  min-width:0;
  padding:9px 3px;
  border:1px solid #35465d;
  border-radius:8px;
  background:#0b121d;
  text-align:center
}

.howto-result strong,
.howto-result span{
  display:block
}

.howto-result strong{
  font-size:9px;
  font-weight:1000
}

.howto-result span{
  margin-top:5px;
  color:#8193aa;
  font-size:7px;
  line-height:1.35;
  font-weight:800
}

.howto-secret{
  border-color:#69571e;
  background:radial-gradient(circle at 50% 120%,#302714 0,#151711 48%,#0e151f 100%)
}

.howto-secret .howto-title{color:#ffca28}
.howto-secret .howto-number{color:#342d19}

.howto-secret-message{
  position:relative;
  margin-top:17px;
  color:#ffe082;
  text-align:center;
  font-size:12px;
  font-weight:1000;
  letter-spacing:2px
}

.howto-credit{
  padding:16px 0 4px;
  color:#53647b;
  text-align:center
}

.howto-credit strong,
.howto-credit span{
  display:block
}

.howto-credit strong{
  color:#8193aa;
  font-size:11px;
  letter-spacing:2px
}

.howto-credit span{
  margin-top:6px;
  font-size:8px;
  font-weight:800;
  letter-spacing:1px
}

/* NEW MEDAL POPUP */

.medal-popup{
  position:absolute;
  z-index:300;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  background:rgba(4,7,12,.28)
}

.medal-popup-card{
  width:min(78vw,270px);
  padding:20px 16px 22px;
  border:1px solid #ffca28;
  border-radius:16px;
  background:radial-gradient(circle at 50% 38%,#3d3218 0,#19170f 48%,#0d1118 100%);
  text-align:center;
  box-shadow:0 0 18px rgba(255,202,40,.28),0 14px 36px rgba(0,0,0,.55);
  animation:medalPopup 2s ease forwards
}

.medal-popup-new{
  color:#ffe082;
  font-size:12px;
  font-weight:1000;
  letter-spacing:2px
}

.medal-popup-icon{
  width:74px;
  height:74px;
  margin:14px auto 12px;
  border:4px solid #ffca28;
  border-radius:50%;
  background:radial-gradient(circle,#fff6bd 0,#e0ae17 56%,#755708 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  line-height:1;
  text-shadow:0 2px 3px rgba(0,0,0,.55);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.2),0 0 20px rgba(255,202,40,.45)
}

.medal-popup-title{
  min-height:20px;
  color:#fff;
  font-size:17px;
  font-weight:1000;
  letter-spacing:.5px
}

@keyframes medalPopup{
  0%{opacity:0;transform:scale(.65)}
  10%{opacity:1;transform:scale(1.06)}
  18%{transform:scale(1)}
  82%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.96)}
}

/* BATTLE */

#battleScreen{background:#090e16}

.game{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  background:linear-gradient(180deg,#101a28 0%,#172334 48%,#121b27 100%)
}

.game *{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none
}

.battle-header{
  position:absolute;
  z-index:80;
  left:0;
  top:0;
  width:100%;
  height:52px;
  padding:max(6px,env(safe-area-inset-top)) 9px 0;
  display:grid;
  grid-template-columns:65px 1fr 65px;
  align-items:center;
  pointer-events:none
}

.battle-home-button{
  height:30px;
  border:1px solid #44546b;
  border-radius:8px;
  background:rgba(12,18,27,.85);
  font-size:9px;
  font-weight:900;
  pointer-events:auto
}

.battle-state{
  text-align:center;
  font-size:11px;
  font-weight:1000;
  letter-spacing:2px
}

.timer-label{
  text-align:right;
  font-size:13px;
  font-weight:1000;
  font-variant-numeric:tabular-nums
}

/* COUNTERS */

.enemy-count-display{
  position:absolute;
  z-index:75;
  top:132px;
  left:50%;
  transform:translateX(-50%);
  min-width:96px;
  padding:3px 9px;
  border:1px solid rgba(255,100,100,.35);
  border-radius:10px;
  background:rgba(7,11,17,.78);
  color:#ff9a9a;
  text-align:center;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
  pointer-events:none
}

.player-count-display{
  position:absolute;
  z-index:75;
  left:4px;
  right:4px;
  bottom:max(3px,env(safe-area-inset-bottom));
  height:32px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:3px;
  pointer-events:none
}

.unit-count{
  min-width:0;
  height:29px;
  padding:2px 3px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:rgba(7,11,17,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:8px;
  font-weight:1000;
  line-height:1;
  white-space:nowrap
}

.unit-count.blue{color:#64b5f6}
.unit-count.red{color:#ef5350}
.unit-count.yellow{color:#fdd835}
.unit-count.green{color:#66bb6a}
.unit-count.purple{color:#ab6ac7}
.unit-count.full{opacity:.38}

.unit-count.used{
  opacity:.3;
  filter:grayscale(1)
}

.unit-count.used .unit-count-value{
  color:#ffca28;
  font-size:7px;
  letter-spacing:.5px
}

.unit-count-symbol{
  flex:0 0 auto;
  min-width:8px;
  text-align:center;
  font-size:9px;
  line-height:1
}

.unit-count-mini{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2px;
  background:#fff;
  overflow:hidden
}

.unit-count-mini-core{
  display:block;
  width:100%;
  height:100%
}

.unit-count-value{
  flex:0 0 auto;
  color:#fff;
  font-size:8px;
  font-weight:1000;
  font-variant-numeric:tabular-nums
}

.unit-limit-message{
  position:absolute;
  z-index:90;
  left:50%;
  bottom:150px;
  transform:translateX(-50%);
  padding:7px 12px;
  border:1px solid #ffca28;
  border-radius:9px;
  background:rgba(10,12,16,.9);
  color:#ffe082;
  font-size:11px;
  font-weight:1000;
  white-space:nowrap;
  pointer-events:none
}

/* ENEMY FORTRESS */

.enemy-tower{
  position:absolute;
  z-index:10;
  left:50%;
  top:56px;
  width:min(82vw,320px);
  height:72px;
  transform:translateX(-50%)
}

.enemy-sponsor{
  position:absolute;
  z-index:6;
  inset:0;
  overflow:hidden;
  border:2px solid #f6d45a;
  border-radius:10px;
  background:radial-gradient(circle at 50% 42%,#fff 0,#fffbe7 45%,#f3d66e 100%);
  color:#171717;
  display:flex;
  align-items:center;
  justify-content:center
}

.ad-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.05;
  text-align:center
}

.ad-placeholder strong{
  font-size:20px;
  font-weight:1000;
  letter-spacing:2px
}

.ad-placeholder span{
  margin-top:6px;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
  opacity:.62
}

.fortress-hp-ring{
  position:absolute;
  z-index:5;
  inset:-4px;
  border-radius:13px;
  background:conic-gradient(#fff 100%,rgba(255,255,255,.12) 0);
  pointer-events:none
}

.fortress-hp-ring::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)
}

.enemy-fortress{
  position:absolute;
  z-index:10;
  inset:0;
  overflow:hidden;
  border-radius:9px;
  pointer-events:none
}

.tower-brick{position:absolute;background:#3a2923;box-shadow:inset 0 0 0 .3px #251b17}
.tower-brick::before{content:"";position:absolute;inset:.7px;background:linear-gradient(165deg,#c88b65 0%,#aa6548 38%,#915037 80%,#75422f 100%);border-top:1px solid #e1a37b;border-left:1px solid #cf916a;border-bottom:1px solid #693724;border-right:1px solid #75402a;box-shadow:inset 0 1px 1px #ffcc9630;filter:brightness(var(--brick-tone,1));border-radius:1px}
.brick-missing{visibility:hidden}
#towerDebris{position:absolute;inset:0;z-index:35;overflow:visible;pointer-events:none}
.brick-debris{animation:brickTumble .86s linear both;will-change:transform,opacity;box-shadow:1px 3px 3px #0008}
@keyframes brickTumble{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  18%{opacity:1;transform:translate(calc(var(--chip-x)*.22),var(--chip-lift)) rotate(calc(var(--chip-spin)*.18))}
  48%{opacity:1;transform:translate(calc(var(--chip-x)*.55),calc(var(--chip-fall)*.22)) rotate(calc(var(--chip-spin)*.5))}
  76%{opacity:1;transform:translate(calc(var(--chip-x)*.82),calc(var(--chip-fall)*.58)) rotate(calc(var(--chip-spin)*.8))}
  100%{opacity:0;transform:translate(var(--chip-x),var(--chip-fall)) rotate(var(--chip-spin))}
}
#enemyTower #enemySponsor.revealed{z-index:6;box-shadow:0 0 18px #ffe49a,0 0 42px #e5b74199;animation:brickSponsorReveal 1.1s ease-out both}
#enemySponsor.revealed::after{content:"";position:absolute;inset:-70%;background:linear-gradient(110deg,transparent 38%,#fff9 49%,transparent 60%);transform:translateX(-70%);animation:brickSponsorShine 1.2s .15s ease-out both;pointer-events:none}
@keyframes brickSponsorReveal{0%{filter:brightness(1)}30%{filter:brightness(1.8)}100%{filter:brightness(1.08)}}
@keyframes brickSponsorShine{to{transform:translateX(70%)}}
.tower-cleared .fortress-emblem{opacity:0;transition:opacity .15s}
@media(prefers-reduced-motion:reduce){.brick-debris{display:none}#enemyTower #enemySponsor.revealed,#enemySponsor.revealed::after{animation:none}.sponsor-burst{display:none}}

.fortress-emblem{
  position:absolute;
  z-index:25;
  left:50%;
  top:-11px;
  transform:translate(-50%,-50%);
  padding:4px 9px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:4px;
  background:rgba(17,23,31,.78);
  color:#e3e8ee;
  font-size:8px;
  font-weight:1000;
  letter-spacing:1.5px;
  white-space:nowrap;
  pointer-events:none
}

.enemy-sponsor.revealed{
  z-index:20;
  animation:sponsorReveal 1.25s ease-out
}

@keyframes sponsorReveal{
  0%{filter:brightness(1)}
  15%{filter:brightness(3.5)}
  40%{filter:brightness(1.8)}
  100%{filter:brightness(1)}
}

.sponsor-burst{
  position:absolute;
  z-index:65;
  left:50%;
  top:50%;
  width:60px;
  height:60px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,#fff 0,#fffad2 17%,rgba(255,220,90,.75) 38%,rgba(255,180,20,0) 75%);
  box-shadow:0 0 25px #fff,0 0 55px rgba(255,220,90,.9);
  pointer-events:none;
  animation:sponsorBurst .9s ease-out forwards
}

@keyframes sponsorBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  20%,55%{opacity:1}
  55%{transform:translate(-50%,-50%) scale(4)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(6)}
}

/* MOAT */

.moat{
  position:absolute;
  z-index:2;
  left:0;
  top:142px;
  width:100%;
  height:8px;
  background:repeating-linear-gradient(90deg,#0c4f77 0 16px,#12658e 16px 32px);
  border-top:1px solid #4ca4ca;
  border-bottom:1px solid #4ca4ca
}

.bridge{
  position:absolute;
  left:50%;
  top:-1px;
  width:100px;
  height:10px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(90deg,#8a6841 0 12px,#a67c49 12px 24px);
  border-left:2px solid #5f452c;
  border-right:2px solid #5f452c
}

/* DEPLOY GUIDE */

.spawn-guide{
  position:absolute;
  z-index:8;
  left:12px;
  right:12px;
  bottom:150px;
  height:1px;
  border-top:1px dashed rgba(100,181,246,.28);
  pointer-events:none
}

.spawn-guide::before,.spawn-guide::after{
  content:"";
  position:absolute;
  top:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(100,181,246,.45)
}

.spawn-guide::before{left:0}
.spawn-guide::after{right:0}

.spawn-guide span{
  position:absolute;
  left:50%;
  top:-7px;
  transform:translate(-50%,-100%);
  padding:2px 7px;
  border-radius:6px;
  background:rgba(9,14,22,.62);
  color:rgba(130,190,240,.62);
  font-size:7px;
  font-weight:900;
  letter-spacing:2px;
  white-space:nowrap
}

/* PLAYER TOWER */

.player-tower{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:42px;
  width:132px;
  height:82px;
  transform:translateX(-50%)
}

.player-tower-body{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:0;
  height:62px;
  border:3px solid #7a8aa0;
  border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,#35465b,#1b2635);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

.player-tower-label{
  margin-bottom:5px;
  color:#d7e2ef;
  font-size:9px;
  font-weight:1000;
  letter-spacing:1.2px
}

.player-tower-hp{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px
}

.player-hp-label{
  color:#8fa2ba;
  font-size:9px;
  font-weight:900
}

#playerHP{
  font-size:19px;
  font-weight:1000;
  line-height:1
}

.player-sponsor{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:0;
  width:min(82vw,320px);
  height:72px;
  transform:translateX(-50%) scale(.7);
  opacity:0;
  border:2px solid #64b5f6;
  border-radius:9px;
  background:radial-gradient(circle,#fff 0,#eaf5ff 70%,#bbdefb 100%);
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .3s,transform .3s
}

.player-sponsor.revealed{
  z-index:10;
  opacity:1;
  transform:translateX(-50%) scale(1)
}

.player-tower.destroyed .player-tower-body{opacity:0}

/* SOLDIERS */

.soldier{
  position:absolute;
  z-index:20;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  margin:0;
  border:0;
  text-decoration:none;
  background:conic-gradient(#fff var(--hp,100%),rgba(255,255,255,.12) 0);
  pointer-events:none;
  will-change:left,top
}

.soldier-core{
  position:relative;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:14px;
  font-weight:1000;
  line-height:1;
  text-align:center;
  text-shadow:0 1px 2px #000,0 0 3px #000
}

/* METEOR */

.soldier.meteor{
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #ffe082) drop-shadow(0 0 13px #ffca28);
  animation:meteorGlow .22s ease-in-out infinite alternate
}

.soldier.meteor .soldier-core{
  box-shadow:inset 0 0 8px rgba(255,255,255,.9),0 0 7px #fff,0 0 14px #ffe082
}

.soldier.meteor::before,.soldier.meteor::after{
  content:"";
  position:absolute;
  z-index:40;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
  box-shadow:-17px -8px 0 -1px #fff,15px -14px 0 -1px #ffe082,20px 7px 0 -1px #fff,-13px 17px 0 -1px #ffe082;
  pointer-events:none
}

.soldier.meteor::before{animation:meteorSparkA .45s linear infinite}
.soldier.meteor::after{animation:meteorSparkB .55s linear infinite}

@keyframes meteorGlow{
  from{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #ffe082) drop-shadow(0 0 9px #ffca28)}
  to{filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 13px #ffe082) drop-shadow(0 0 20px #ffca28)}
}

@keyframes meteorSparkA{
  0%{opacity:.25;transform:translate(-50%,-50%) rotate(0) scale(.6)}
  50%{opacity:1}
  100%{opacity:.2;transform:translate(-50%,-50%) rotate(180deg) scale(1.25)}
}

@keyframes meteorSparkB{
  0%{opacity:.2;transform:translate(-50%,-50%) rotate(45deg) scale(1.2)}
  50%{opacity:1}
  100%{opacity:.25;transform:translate(-50%,-50%) rotate(225deg) scale(.55)}
}

/* SNIPER */

.soldier.sniper{
  filter:drop-shadow(0 0 3px rgba(255,255,255,.7)) drop-shadow(0 2px 4px rgba(0,0,0,.8))
}

.soldier.sniper .soldier-core::before,.soldier.sniper .soldier-core::after{
  content:"";
  position:absolute;
  top:42%;
  width:30%;
  height:19%;
  border:1px solid rgba(255,255,255,.8);
  border-radius:2px 2px 5px 5px;
  background:#080a0d;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.9)
}

.soldier.sniper .soldier-core::before{left:17%;transform:rotate(5deg)}
.soldier.sniper .soldier-core::after{right:17%;transform:rotate(-5deg)}

/* PROJECTILE */

.projectile{
  position:absolute;
  z-index:30;
  width:7px;
  height:7px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none
}

.projectile.critical{
  background:#fff!important;
  box-shadow:0 0 4px #fff,0 0 8px #fff,0 0 13px #ffe082;
  animation:criticalSpark .16s linear infinite alternate
}

.projectile.critical::before,.projectile.critical::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  border-radius:2px
}

.projectile.critical::before{width:17px;height:2px}
.projectile.critical::after{width:2px;height:17px}

@keyframes criticalSpark{
  from{filter:brightness(1);transform:translate(-50%,-50%) rotate(0) scale(.85)}
  to{filter:brightness(2.5);transform:translate(-50%,-50%) rotate(45deg) scale(1.15)}
}

/* CRITICAL HIT */

.critical-hit{
  position:absolute;
  z-index:45;
  width:30px;
  height:30px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:criticalHit .28s ease-out forwards
}

.critical-hit::before,.critical-hit::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:#fff;
  box-shadow:0 0 8px #fff,0 0 14px #ffe082;
  transform:translate(-50%,-50%)
}

.critical-hit::before{width:30px;height:3px}
.critical-hit::after{width:3px;height:30px}

@keyframes criticalHit{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(.35)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(90deg) scale(1.8)}
}

.soldier.stunned{filter:brightness(1.6)}

/* CHARGE */

.spawn-effect{
  --charge-fill:0%;
  --charge-color:#1565c0;
  position:absolute;
  z-index:35;
  width:44px;
  height:44px;
  transform:translate(-50%,-50%);
  border:3px solid var(--charge-color);
  border-radius:50%;
  overflow:hidden;
  background:rgba(5,10,18,.72);
  box-shadow:0 0 8px #fff,0 0 18px var(--charge-color),0 0 32px var(--charge-color);
  pointer-events:none;
  transition:width .12s ease-out,height .12s ease-out;
  animation:chargePulse .7s ease-in-out infinite alternate
}

.spawn-effect::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  right:0;
  bottom:0;
  height:var(--charge-fill);
  background:var(--charge-color);
  opacity:.78;
  box-shadow:inset 0 4px 8px rgba(255,255,255,.22),0 0 12px var(--charge-color);
  transition:height .03s linear
}

@keyframes chargePulse{
  from{transform:translate(-50%,-50%) scale(.94);opacity:.72}
  to{transform:translate(-50%,-50%) scale(1.06);opacity:1}
}

.charge-label{
  position:absolute;
  z-index:36;
  transform:translate(-50%,-100%);
  min-width:64px;
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:7px;
  background:rgba(7,11,17,.72);
  color:#fff;
  text-align:center;
  font-size:9px;
  font-weight:1000;
  pointer-events:none
}

/* START */

.start-screen{
  position:absolute;
  z-index:100;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  background:rgba(4,7,12,.72);
  backdrop-filter:blur(3px)
}

.start-title{
  font-size:36px;
  font-weight:1000;
  letter-spacing:5px
}

.start-button{
  width:180px;
  height:58px;
  border:1px solid #64b5f6;
  border-radius:14px;
  background:linear-gradient(180deg,#1976d2,#0d47a1);
  font-size:18px;
  font-weight:1000;
  letter-spacing:2px
}

/* RESULT */

#shareResultButton{width:min(92%,330px);min-height:44px;margin-top:12px;flex-shrink:0;border:1px solid #6db8ff;border-radius:10px;background:linear-gradient(135deg,#1778d2,#1855a0);color:#fff;font-size:14px;font-weight:800}
#shareResultButton:disabled{opacity:.5}
#shareStatus{font-size:11px;color:#afc7e1;min-height:14px;margin-top:3px;text-align:center}
#shareFallback{width:min(92vw,420px);max-height:88dvh;overflow:auto;box-sizing:border-box;padding:18px;border:1px solid #526880;border-radius:16px;background:#111e30;color:#fff}
#shareFallback::backdrop{background:#000b}
#shareFallback h2{font-size:18px;margin:0 0 12px}
#sharePreview{width:100%;height:auto;border-radius:9px}
#shareFallback p{font-size:12px;color:#bed0e5}
#shareFallback button,#saveShareImage{display:block;box-sizing:border-box;width:100%;min-height:44px;margin:9px 0;border:1px solid #577599;border-radius:9px;padding:12px;background:#203b5c;color:#fff;text-align:center;text-decoration:none;font-size:14px}
#shareFallback [hidden]{display:none}
#shareText{width:100%;height:88px;box-sizing:border-box;background:#0c1420;color:#d5e5f7;border:1px solid #42556e;border-radius:6px;font-size:12px;user-select:text;-webkit-user-select:text}
#resultScreen{
  z-index:150;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:12px;
  overflow-y:auto;
  background:rgba(4,7,12,.87)
}

#resultTitle{
  font-size:34px;
  line-height:1;
  font-weight:1000;
  letter-spacing:2px
}

#resultScore{
  width:min(92%,330px);
  margin-top:14px;
  padding:12px 14px;
  border:1px solid #41516a;
  border-radius:10px;
  background:#111925;
  font-size:12px;
  font-weight:800
}

.result-rank{
  margin-bottom:9px;
  text-align:center;
  font-size:14px;
  font-weight:900
}

.result-rank strong{
  margin-left:6px;
  font-size:25px;
  line-height:1
}

.result-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px 12px;
  padding-bottom:9px;
  border-bottom:1px solid #2d3a4e
}

.result-summary-item{
  display:flex;
  justify-content:space-between;
  gap:7px;
  align-items:center
}

.result-summary-item span{
  color:#8fa2ba;
  font-size:9px;
  font-weight:900;
  white-space:nowrap
}

.result-summary-item strong{
  font-size:12px;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.result-evaluation{
  margin-top:9px;
  display:flex;
  flex-direction:column;
  gap:5px
}

.result-evaluation-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center
}

.result-evaluation-row span{
  color:#aebdce;
  font-size:10px;
  font-weight:900
}

.result-evaluation-row strong{
  min-width:74px;
  text-align:right;
  font-size:11px;
  font-weight:1000;
  font-variant-numeric:tabular-nums
}

.result-calculation{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid #2d3a4e;
  text-align:center
}

.result-total{
  font-size:18px;
  line-height:1.1;
  font-weight:1000;
  font-variant-numeric:tabular-nums
}

.result-rank-rule{
  margin-top:6px;
  color:#8fa2ba;
  font-size:9px;
  font-weight:900
}

.result-buttons{
  width:min(80%,300px);
  margin-top:14px;
  display:flex;
  gap:10px
}

.result-buttons button{
  flex:1;
  height:42px;
  border:1px solid #43546c;
  border-radius:10px;
  background:#172232;
  font-weight:900
}

.enemy-tower:has(.enemy-sponsor.revealed),
.player-tower:has(.player-sponsor.revealed){z-index:160}

.enemy-sponsor.revealed,
.player-sponsor.revealed{z-index:161}

/* SHORT SCREEN */

@media(max-height:700px){
  .design-preview{height:125px}

  .parameter-row{
    min-height:35px;
    padding-top:3px;
    padding-bottom:3px
  }

  .boost-panel,.save-panel{margin-top:5px}

  .difficulty-button{
    min-height:95px;
    padding-top:13px;
    padding-bottom:13px
  }

  .home-subtitle{margin-bottom:18px}
  .home-button{min-height:48px}
  .home-menu{gap:7px}
  .home-copyright{margin-top:11px}

  .medal-container{margin-top:12px}
  .medal-grid{gap:6px}

  .medal-item{
    height:62px;
    padding:6px
  }

  .medal-item-icon{
    width:31px;
    height:31px;
    flex-basis:31px;
    font-size:15px
  }

  .medal-item-title{font-size:10px}
  .medal-page-dots{margin-top:9px}

  .howto-container{margin-top:12px}

  .howto-block{
    padding:15px 14px 13px;
    margin-bottom:9px
  }

  #resultTitle{font-size:28px}

  #resultScore{
    margin-top:9px;
    padding:9px 12px
  }

  .result-rank{margin-bottom:6px}

  .result-evaluation{
    margin-top:6px;
    gap:3px
  }

  .result-calculation{
    margin-top:6px;
    padding-top:6px
  }

  .result-buttons{margin-top:9px}
  .result-buttons button{height:38px}
}
/* v0.7.7 — difficulty × time controls */
.difficulty-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:16px 12px;min-height:112px;cursor:default}.difficulty-card::after{display:none}.difficulty-card:active{transform:none!important}.difficulty-info{min-width:0}.difficulty-card .difficulty-name{font-size:21px;letter-spacing:.8px}.difficulty-card .difficulty-description{font-size:10px;line-height:1.55;letter-spacing:.25px;margin-top:8px;overflow-wrap:break-word}.difficulty-card .difficulty-detail{font-size:8px;line-height:1.5;letter-spacing:.5px}.battle-time-buttons{display:grid;grid-template-columns:repeat(3,45px);gap:5px}.battle-time-button{min-height:46px;width:45px;padding:6px 2px;border:1px solid #667d99;border-radius:9px;background:#263a51;color:#f3f7fc;font-size:12px;font-weight:850;touch-action:manipulation}.battle-time-button:active{transform:scale(.94);background:#426185}.battle-time-button:focus-visible{outline:3px solid #e5bd6a;outline-offset:2px}#resultMode{font-size:13px;font-weight:800;letter-spacing:1px;color:#a9bfd8;margin-bottom:10px}@media(max-width:360px){.difficulty-card{padding:14px 9px;gap:7px}.difficulty-card .difficulty-name{font-size:18px}.battle-time-buttons{grid-template-columns:repeat(3,44px);gap:4px}.battle-time-button{width:44px;font-size:11px}}

.difficulty-time-hint{max-width:420px;margin:-8px auto 16px;font-size:11px;line-height:1.6;color:#a0b2ca}