:root {
  --paper:#FFFFFF;
  --paper-light:#FFFFFF;
  --paper-shade:#EDF6FC;
  --paper-edge:#CDDFEC;
  --ink:#192744;
  --ink-soft:#415472;
  --ink-faint:#536580;
  --sage:#A6DFC8;
  --sage-deep:#28705B;
  --sage-light:#DEF5EA;
  --table:#75CAE4;
  --coral:#FF7158;
  --coral-deep:#AD343E;
  --gold:#FFC75E;
  --scrim:#15234280;
  --radius:20px;
  --font-ui:'Boba UI',ui-rounded,system-ui,sans-serif;
  --font-title:var(--font-ui);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --fox-greenhouse:url('../menu-greenhouse-DB9lrifc.webp');
  --speed:1;
  color-scheme:light;
}
*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent}
html,body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:#75CAE4;
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none}
#app{
  position:fixed;
  inset:0;
  overflow:clip} #game{
  position:absolute;
  inset:0} #game canvas{
  display:block;
  touch-action:none;
  width:100%!important;
  height:100%!important}
#safe-probe{
  position:absolute;
  visibility:hidden;
  pointer-events:none;
  padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
button,input{
  font:inherit;
  color:inherit} .hidden{
  display:none!important}
.btn{
  appearance:none;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:44px;
  min-height:48px;
  border:1px solid #D5E2ED;
  border-radius:15px;
  padding:11px 17px;
  background:#FFFFFF;
  color:var(--ink);
  font-size:16px;
  font-weight:800;
  line-height:1.3;
  text-align:center;
  cursor:pointer;
  box-shadow:0 3px 0 #17334C16,0 5px 16px #17334C0D;
  transition:transform 100ms,background 100ms,box-shadow 100ms}
.btn:hover{
  background:#F2F8FD}.btn:active,.btn.pressed{
  transform:translateY(2px);
  box-shadow:0 1px 0 #17334C16}
.btn.primary{
  background:#192744;
  color:#FFFFFF;
  border-color:#192744;
  box-shadow:0 4px 0 #101A31,0 7px 18px #19274426}.btn.primary:hover{
  background:#253A61}
.btn.sage{
  background:#DEF5EA;
  color:#192744;
  border-color:#B2DFD0}.btn.round{
  width:48px;
  height:48px;
  min-height:48px;
  padding:0;
  border-radius:16px;
  flex:none}
.btn.small,.btn.round.small{
  min-height:44px;
  padding:8px 12px;
  font-size:14px}.btn.round.small{
  width:44px;
  height:44px;
  padding:0}.btn.wide{
  width:100%}
.btn[disabled]{
  opacity:.5;
  cursor:default;
  pointer-events:none;
  box-shadow:none}.btn svg{
  width:23px;
  height:23px;
  flex:none}
.btn>span:has(>svg){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none}.btn>span:not(:has(>svg)){
  min-width:0}.btn .sub{
  display:block;
  font-size:13px;
  font-weight:700;
  line-height:1.35}
:focus-visible{
  outline:3px solid #275FB8;
  outline-offset:3px}
#hud{
  position:absolute;
  inset:0;
  pointer-events:none}.hud-top{
  position:absolute;
  top:calc(var(--safe-top) + 4px);
  left:calc(var(--safe-left) + 8px);
  right:calc(var(--safe-right) + 8px);
  height:44px;
  display:flex;
  align-items:center;
  gap:8px}.hud-top>*{
  pointer-events:auto}
.hud-top .btn.round{
  width:44px;
  height:44px;
  min-height:44px;
  border-radius:14px}.hud-info{
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:0 13px;
  border-radius:13px;
  background:#FFFFFF;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  min-width:0;
  max-width:calc(100% - 58px);
  box-shadow:0 3px 12px #19274412}.hud-info .dot{
  width:4px;
  height:4px;
  flex:none;
  border-radius:50%;
  background:#7D91A9}.hud-info .mode{
  overflow:hidden;
  text-overflow:ellipsis}.hud-info span:not(.dot){
  min-width:0}
.hud-brand{
  display:none;
  margin-left:auto;
  width:102px;
  height:48px;
  object-fit:contain;
  background:#FFFFFF;
  border-radius:12px;
  padding:5px 10px}
.hud-bar{
  position:absolute;
  left:50%;
  bottom:calc(var(--safe-bottom) + 8px);
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  pointer-events:none}.hud-bar>*{
  pointer-events:auto}.hud-bar .btn{
  min-width:108px;
  min-height:50px;
  flex-shrink:0}.hud-bar .lbl{
  white-space:nowrap}
#screens{
  position:absolute;
  inset:0;
  pointer-events:none}.screen{
  position:absolute;
  inset:0;
  pointer-events:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-top) + 18px) calc(var(--safe-right) + 18px) calc(var(--safe-bottom) + 24px) calc(var(--safe-left) + 18px);
  animation:fadein 160ms ease-out}.screen.dim{
  background:#EAF5FDF5}
@keyframes fadein{from{
  opacity:0}to{
  opacity:1}}@keyframes rise{from{
  opacity:0;
  transform:translateY(8px)}to{
  opacity:1;
  transform:none}}
.panel{
  width:min(560px,100%);
  background:#FFFFFF;
  border:1px solid #D4E4EF;
  border-radius:22px;
  padding:20px;
  box-shadow:0 12px 36px #19274410;
  position:relative;
  flex-shrink:0}.panel+.panel{
  margin-top:16px}.panel h2{
  font-size:26px;
  line-height:1.2;
  margin:2px 0 14px;
  font-weight:900}.panel h3{
  font-size:16px;
  font-weight:900;
  margin:22px 0 10px}.panel p{
  margin:7px 0;
  color:var(--ink-soft);
  line-height:1.5}.panel-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px}.panel-head h2{
  flex:1;
  min-width:0;
  margin:0;
  overflow-wrap:break-word}.screen-head{
  width:min(560px,100%);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  flex-shrink:0}.screen-head h1{
  flex:1;
  min-width:0;
  overflow-wrap:break-word;
  margin:0;
  font-size:30px;
  line-height:1.15;
  font-weight:900}
.modal-wrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:safe center;
  justify-content:center;
  padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);
  background:var(--scrim);
  pointer-events:auto;
  overflow-y:auto;
  animation:fadein 160ms}.modal{
  width:min(430px,100%);
  max-height:100%;
  overflow-y:auto;
  flex-shrink:0}.modal .actions{
  display:grid;
  gap:11px;
  margin-top:18px}.modal .row{
  display:flex;
  gap:10px}.modal .row .btn{
  flex:1;
  min-width:0}
/* The painting owns the character. Controls sit on its quiet blue space. */
.home{
  justify-content:center;
  padding:28px max(24px,4vw)}.home-inner{
  width:min(1440px,100%);
  display:grid;
  grid-template-columns:54% minmax(0,46%);
  gap:20px 0;
  align-items:center;
  justify-items:center;
  flex-shrink:0}.brand{
  grid-column:2;
  grid-row:1;
  text-align:center;
  color:var(--ink);
  width:min(390px,90%)}.brand .logo{
  font-size:52px;
  font-weight:1000;
  line-height:1;
  margin:0}.brand-image{
  display:block;
  width:100%;
  height:auto;
  max-height:230px;
  object-fit:contain;
  margin:0 auto}.brand .sub,.brand .tag{
  display:none}.home-menu{
  grid-column:2;
  grid-row:2;
  width:min(420px,94%);
  display:grid;
  gap:13px}.home-menu .grid2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px}.home-menu .btn.big{
  min-height:66px;
  font-size:23px;
  font-weight:900;
  flex-direction:column;
  gap:3px;
  border-radius:22px}.home-menu .home-new{
  min-height:48px;
  font-size:17px;
  border-radius:15px}.home-modes .btn{
  min-height:60px;
  background:#FFFFFF;
  border:1px solid #D4E5F0;
  font-size:15px;
  padding:12px 9px}.home-utilities .btn{
  min-height:46px;
  padding:9px 7px;
  background:#FFFFFFE8;
  font-size:14px;
  border-radius:13px;
  box-shadow:0 2px 8px #1927440D}.home-menu .btn svg{
  width:22px;
  height:22px}.home-foot{
  font-size:12px;
  text-align:center;
  color:var(--ink-soft)}

.chapter{
  border:1px solid #D6E4EF;
  border-radius:17px;
  overflow:hidden;
  background:#FFFFFF;
  margin-bottom:16px}.chapter:last-child{
  margin-bottom:0}.chapter-thumb{
  height:170px;
  position:relative;
  overflow:hidden}.chapter-thumb canvas,.chapter-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block}.chapter-thumb .label{
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  padding:10px 14px;
  background:#192744F5;
  color:#FFFFFF;
  font-size:20px;
  line-height:1.25;
  font-weight:900}.chapter-thumb .label small{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  margin-bottom:3px}.chapter .lockmsg{
  position:absolute;
  top:8px;
  right:8px;
  max-width:calc(100% - 16px);
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  background:#FFFFFFF5;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  border-radius:12px}.chapter .lockmsg svg{
  width:16px;
  height:16px;
  flex:none}.chapter-body{
  padding:12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px}.chal{
  min-height:92px;
  min-width:0;
  padding:8px 4px;
  flex-direction:column;
  gap:5px;
  background:#EDF6FC;
  font-size:13px;
  box-shadow:none}.chal .num{
  font-size:27px;
  line-height:1;
  font-weight:900}.chal .diff{
  font-size:12px;
  line-height:1.3;
  color:var(--ink-soft);
  font-weight:800;
  min-width:0;
  max-width:100%;
  text-align:center;
  overflow-wrap:anywhere;
  hyphens:auto}.chal img{
  width:40px;
  height:40px;
  object-fit:contain}.chal.done{
  background:#DEF5EA;
  border-color:#A6DFC8}.progress-line{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900}.bar{
  flex:1;
  height:12px;
  border-radius:8px;
  background:#D7E7F3;
  overflow:hidden}.bar>i{
  display:block;
  height:100%;
  background:#FF7158;
  border-radius:8px}.seal-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px}.seal-row img{
  width:36px;
  height:36px;
  object-fit:contain}.seal-row img.off{
  filter:grayscale(1) opacity(.32)}
.daily-hero{
  display:flex;
  gap:15px;
  align-items:center;
  flex-wrap:wrap}.daily-hero .date{
  font-size:23px;
  font-weight:900}.daily-hero .count{
  font-size:14px;
  color:var(--ink-soft);
  font-weight:700}.cal{
  margin-top:16px}.cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  font-weight:900}.cal-head>span::first-letter{
  text-transform:uppercase}.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px}.cal-grid .wd{
  text-align:center;
  font-size:12px;
  font-weight:800;
  color:var(--ink-soft);
  padding:3px 0}.cal-grid .day{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  font-size:14px;
  font-weight:800;
  background:#EDF6FC;
  color:var(--ink);
  position:relative}.cal-grid .day.empty{
  background:transparent}.cal-grid .day.done{
  background:#192744;
  color:#FFFFFF}.cal-grid .day.today{
  outline:3px solid #E85848;
  outline-offset:0}.cal-grid .day.future{
  color:#536580;
  background:#F0F4F8}.badge-done{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-radius:12px;
  background:#DEF5EA;
  color:#215A48;
  font-weight:900}
.thumbs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px}.thumb{
  appearance:none;
  border:1px solid #D4E4EF;
  padding:9px;
  border-radius:16px;
  background:#F3F9FD;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-weight:800;
  font-size:14px;
  line-height:1.3;
  text-align:center;
  position:relative;
  min-height:44px;
  color:var(--ink)}.thumb:active{
  transform:translateY(1px)}.thumb canvas,.thumb img{
  width:100%;
  border-radius:10px;
  display:block}.thumb.sel{
  outline:3px solid #E85848;
  outline-offset:2px}.thumb.locked canvas,.thumb.locked img{
  filter:grayscale(.85) brightness(.8)}.thumb .lock{
  position:absolute;
  top:12px;
  right:12px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#192744;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#FFFFFF}.thumb .lock svg{
  width:16px;
  height:16px}.thumb .req{
  font-weight:700;
  color:var(--ink-soft);
  font-size:12px}.thumbs.backs canvas{
  width:72%}
.seg{
  display:flex;
  flex-wrap:wrap;
  background:#E7F1F9;
  border-radius:15px;
  padding:4px;
  gap:4px}.seg button{
  flex:1 1 auto;
  appearance:none;
  border:0;
  background:transparent;
  border-radius:11px;
  min-height:44px;
  padding:8px 12px;
  font-weight:800;
  font-size:14px;
  color:var(--ink-soft);
  cursor:pointer}.seg button.on{
  background:#192744;
  color:#FFFFFF}.stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  margin-top:15px}.stat{
  background:#EDF6FC;
  border-radius:15px;
  padding:13px}.stat .v{
  font-size:27px;
  font-weight:900;
  color:var(--ink)}.stat .k{
  font-size:13px;
  font-weight:700;
  color:var(--ink-soft)}.set-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid #E2ECF4}.set-row:last-child{
  border-bottom:0}.set-row label{
  font-weight:800;
  flex:1;
  min-width:0}.set-col{
  padding:12px 0;
  border-bottom:1px solid #E2ECF4}.set-col label{
  display:block;
  font-weight:800;
  margin-bottom:10px}input[type=range]{
  appearance:none;
  width:48%;
  height:44px;
  background:linear-gradient(#BED3E4,#BED3E4) center/100% 8px no-repeat;
  flex-shrink:0;
  cursor:pointer}input[type=range]::-webkit-slider-thumb{
  appearance:none;
  width:27px;
  height:27px;
  border-radius:50%;
  background:#192744;
  border:3px solid #FFFFFF;
  box-shadow:0 2px 7px #19274433}input[type=range]::-moz-range-thumb{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#192744;
  border:3px solid #FFFFFF}.toggle{
  appearance:none;
  width:56px;
  height:44px;
  border-radius:22px;
  background:#B7C8D8;
  position:relative;
  cursor:pointer;
  transition:background 150ms;
  border:0;
  flex:none}.toggle::after{
  content:'';
  position:absolute;
  top:10px;
  left:5px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 2px 4px #19274426;
  transition:transform 150ms}.toggle.on{
  background:#28705B}.toggle.on::after{
  transform:translateX(22px)}.danger{
  color:#AD343E}
.result{
  text-align:center}.result .mimo{
  display:block;
  margin:0 auto 10px;
  height:120px}.result .nums{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:12px 0 5px}.result .nums .stat{
  min-width:0;
  flex:1}.reward{
  display:flex;
  align-items:center;
  gap:13px;
  background:#EDF8F3;
  border-radius:16px;
  padding:12px;
  margin-top:12px;
  text-align:left}.reward img,.reward canvas{
  width:54px;
  height:54px;
  object-fit:contain;
  flex:none}.reward b{
  display:block}.reward span{
  font-size:14px;
  color:var(--ink-soft)}
#toasts{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(var(--safe-bottom) + 76px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  pointer-events:none;
  padding:0 16px}.toast{
  background:#192744;
  color:#FFFFFF;
  font-weight:800;
  font-size:15px;
  line-height:1.4;
  padding:12px 17px;
  border-radius:16px;
  box-shadow:0 8px 24px #19274426;
  max-width:440px;
  text-align:center;
  animation:rise 180ms ease-out;
  display:flex;
  align-items:center;
  gap:10px}.toast.out{
  opacity:0;
  transform:translateY(6px);
  transition:all 200ms}.toast.warm{
  background:#FFFFFF;
  color:var(--ink)}
.bubble{
  position:absolute;
  max-width:min(320px,calc(100vw - 32px));
  background:#FFFFFF;
  color:var(--ink);
  border-radius:19px;
  padding:14px;
  box-shadow:0 12px 34px #19274433;
  display:flex;
  gap:10px;
  align-items:flex-start;
  pointer-events:auto;
  font-weight:800;
  font-size:15px;
  line-height:1.4;
  z-index:5}.bubble canvas{
  width:46px;
  flex:none}.bubble .actions{
  display:flex;
  gap:8px;
  margin-top:10px}.bubble::after{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  background:#FFFFFF;
  transform:rotate(45deg)}.bubble.arrow-up::after{
  top:-7px;
  left:var(--ax,40px)}.bubble.arrow-down::after{
  bottom:-7px;
  left:var(--ax,40px)}.tut-skip{
  position:absolute;
  top:calc(var(--safe-top) + 8px);
  right:calc(var(--safe-right) + 10px);
  pointer-events:auto;
  z-index:6}
.sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  max-height:86%;
  background:#FFFFFF;
  border-radius:24px 24px 0 0;
  box-shadow:0 -10px 40px #19274433;
  padding:15px 16px calc(var(--safe-bottom) + 16px);
  display:flex;
  flex-direction:column;
  pointer-events:auto}.sheet .grab{
  width:44px;
  height:5px;
  border-radius:3px;
  background:#BED3E4;
  margin:0 auto 12px}.sheet .col-view{
  overflow-y:auto;
  display:flex;
  justify-content:center;
  padding:8px 0 4px}.sheet .stack{
  position:relative}.sheet .stack .c{
  position:absolute;
  left:0;
  border-radius:9px;
  cursor:pointer;
  transition:transform 100ms}.sheet .stack .c.pick:hover,.sheet .stack .c.pick:active{
  transform:translateY(-4px)}.sheet .stack .c.nopick{
  cursor:default}
#loading{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:var(--ink);
  background:#B9E6F6;
  z-index:50;
  transition:opacity 300ms;
  font-weight:900}#loading .logo{
  font-size:36px;
  font-weight:900}.loading-logo{
  width:min(72vw,340px);
  height:auto}#loading.out{
  opacity:0;
  pointer-events:none}.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap}
.compact-land .hud-top{
  flex-direction:column;
  align-items:flex-start;
  width:132px;
  right:auto;
  height:auto;
  gap:8px}.compact-land .hud-info{
  flex-direction:column;
  align-items:flex-start;
  height:auto;
  padding:9px;
  gap:3px;
  border-radius:13px;
  font-size:13px;
  white-space:normal;
  max-width:128px}.compact-land .hud-info .dot{
  display:none}.compact-land .hud-info .mode{
  overflow:visible}.compact-land .hud-bar{
  left:auto;
  right:calc(var(--safe-right) + 10px);
  bottom:auto;
  top:50%;
  transform:translateY(-50%);
  flex-direction:column}.compact-land .hud-bar .btn{
  min-width:112px;
  min-height:48px}.compact-land #toasts{
  bottom:calc(var(--safe-bottom) + 12px)}
@media(min-width:1100px) and (min-height:600px){.hud-info{
  font-size:17px;
  height:44px}.hud-brand{
  display:block}.hud-bar .btn{
  min-width:128px;
  min-height:54px;
  font-size:18px}.hud-bar .btn svg{
  width:26px;
  height:26px}}
@media(max-aspect-ratio:5/4){.home{
  justify-content:flex-start;
  padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 24px) calc(var(--safe-left) + 20px)}.home-inner{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:min(440px,100%);
  position:relative;
  padding-top:54svh}.home .brand{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(44vw,210px);
  height:15svh;
  display:flex;
  align-items:center}.brand-image{
  max-height:15svh;
  width:100%}.home-menu{
  width:100%;
  gap:10px}.home-menu .btn.big{
  min-height:58px;
  font-size:22px}.home-modes .btn{
  min-height:54px}.home-utilities .btn{
  min-height:44px;
  font-size:14px;
  padding:8px 5px}}
@media(max-width:380px){.screen{
  padding-left:14px;
  padding-right:14px}.panel{
  padding:16px}.chapter-body{
  grid-template-columns:repeat(2,minmax(0,1fr))}.hud-top{
  left:6px;
  right:6px;
  gap:6px}.hud-info{
  font-size:13px;
  padding:0 9px;
  gap:6px}.hud-bar{
  gap:8px}.hud-bar .btn{
  min-width:92px;
  padding:10px 12px}.home-menu .grid2{
  gap:8px}.home-modes .btn{
  font-size:13px;
  gap:5px;
  padding:9px 6px}.home-menu .btn svg{
  width:20px;
  height:20px}.home-utilities .btn{
  font-size:13px}.thumbs{
  gap:8px}.thumb{
  padding:7px;
  font-size:12px}.screen-head h1{
  font-size:27px}}
@media(max-height:500px) and (min-aspect-ratio:5/4){.home{
  justify-content:flex-start;
  padding:12px 22px 20px}.home-inner{
  grid-template-columns:52% minmax(0,48%);
  gap:9px 0}.home .brand{
  width:150px}.brand-image{
  max-height:92px}.home-menu{
  gap:7px;
  width:min(350px,100%)}.home-menu .btn.big{
  min-height:48px;
  font-size:19px;
  border-radius:17px}.home-menu .btn .sub{
  font-size:11px}.home-menu .home-new{
  min-height:44px;
  font-size:14px}.home-modes .btn,.home-utilities .btn{
  min-height:44px;
  font-size:13px;
  padding:7px 5px}.home-menu .grid2{
  gap:8px}.home-menu .btn svg{
  width:18px;
  height:18px}.home-menu .home-modes .btn{
  gap:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important}}.reduced *,.reduced *::before,.reduced *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important}
/* Tablet sky strip is shallower than a phone: keep the logo above the ears. */
@media(min-width:600px) and (max-aspect-ratio:5/4){.home .brand{
  top:-6px;
  width:180px;
  height:12svh}.home .brand-image{
  max-height:12svh}}
/* A newly earned sticker lands in its collection slot; copy stays still. */
.result-modal{
  padding:22px;
  box-shadow:0 18px 58px #19274435}.result-modal>.panel-head{
  justify-content:center;
  margin-bottom:8px}.result-modal>.panel-head h2{
  text-align:center;
  font-size:30px}.result-modal>.mimo{
  height:112px;
  margin:0 auto 8px;
  filter:drop-shadow(0 7px 8px #19274412)}.result-modal .nums{
  margin:16px 0}.result-modal .stat{
  background:#EDF6FC}.result-modal .reward{
  padding:12px;
  gap:13px;
  border:1px solid #C9E8DB;
  background:#F1FAF6;
  overflow:visible}.reward-slot{
  width:66px;
  height:66px;
  border-radius:17px;
  border:2px dashed #9CCFBA;
  background:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none}.reward .reward-slot .reward-sticker{
  width:54px;
  height:54px;
  object-fit:contain;
  animation:sticker-land 480ms cubic-bezier(.2,.7,.3,1.15) var(--reward-delay,120ms) both}.reward-copy{
  min-width:0}.reward-copy b{
  font-size:15px;
  line-height:1.3}.reward-copy span{
  display:block;
  margin-top:3px;
  font-size:13px;
  line-height:1.4}.result-modal .reward-arrival{
  animation:reward-reveal 220ms ease-out var(--reward-delay,120ms) both}.result-modal .actions{
  margin-top:20px}.result-modal .row .btn{
  font-size:14px}
@keyframes sticker-land{0%{
  opacity:0;
  transform:translate(-14px,-23px) rotate(-14deg) scale(1.15)}65%{
  opacity:1;
  transform:translate(0,2px) rotate(3deg) scale(.95)}100%{
  opacity:1;
  transform:none}}
@keyframes reward-reveal{from{
  opacity:0;
  transform:translateY(7px)}to{
  opacity:1;
  transform:none}}
@media(max-height:600px){.result-modal>.mimo{
  height:80px}.result-modal{
  padding:18px}.result-modal>.panel-head h2{
  font-size:26px}.result-modal .nums{
  margin:10px 0}.result-modal .reward{
  padding:9px}.result-modal .actions{
  margin-top:14px}}

/* ── Dinamismo: transições, hover/press, contador ── */
@keyframes bump{0%{
  transform:scale(1)}35%{
  transform:scale(1.3);
  color:#FF6F55}100%{
  transform:scale(1)}}
.hud-info .bump{
  display:inline-block;
  animation:bump 340ms cubic-bezier(.34,1.56,.64,1)}
@keyframes pop-in{from{
  opacity:0;
  transform:translateY(16px) scale(.94)}to{
  opacity:1;
  transform:none}}
.modal{
  animation:pop-in 260ms cubic-bezier(.34,1.3,.64,1)}
@keyframes slide-up{from{
  transform:translateY(100%)}to{
  transform:none}}
.sheet{
  animation:slide-up 280ms cubic-bezier(.2,.9,.3,1)}
.screen>*{
  animation:rise 200ms cubic-bezier(.2,.9,.3,1) backwards}
.screen>:nth-child(2){
  animation-delay:30ms}.screen>:nth-child(3){
  animation-delay:60ms}.screen>:nth-child(4){
  animation-delay:90ms}.screen>:nth-child(n+5){
  animation-delay:120ms}
@keyframes bounce-in{0%{
  opacity:0;
  transform:scale(.7) translateY(-12px)}60%{
  opacity:1;
  transform:scale(1.06)}100%{
  transform:none}}
.brand-image{
  animation:bounce-in 520ms cubic-bezier(.34,1.4,.64,1) 120ms backwards}
.home-menu>*{
  animation:rise 340ms cubic-bezier(.2,.9,.3,1) backwards}
.home-menu>:nth-child(1){
  animation-delay:200ms}.home-menu>:nth-child(2){
  animation-delay:260ms}.home-menu>:nth-child(3){
  animation-delay:320ms}.home-menu>:nth-child(4){
  animation-delay:380ms}.home-menu>:nth-child(n+5){
  animation-delay:440ms}
.btn:hover:not(:active):not(.pressed):not([disabled]){
  transform:translateY(-1px);
  box-shadow:0 5px 0 #17334C16,0 9px 20px #17334C14}
.btn.primary:hover:not(:active):not(.pressed):not([disabled]){
  box-shadow:0 5px 0 #101A31,0 10px 22px #19274433}
.btn:active,.btn.pressed{
  transform:translateY(2px) scale(.98)}
.hud-bar .btn:not([disabled]).nudge{
  animation:bump 520ms cubic-bezier(.34,1.56,.64,1)}

/* ── Resultado: contadores, recordes, sequência; Desfazer chamando atenção ── */
@keyframes nudge{0%,70%,100%{
  transform:none}78%{
  transform:translateY(-3px) scale(1.06)}86%{
  transform:translateY(1px) scale(.98)}93%{
  transform:translateY(-1px) scale(1.02)}}
.btn.nudge-loop{
  animation:nudge 1.8s ease-in-out infinite;
  border-color:#FF8972}
@keyframes badge-pop{0%{
  opacity:0;
  transform:scale(.4) rotate(-6deg)}55%{
  opacity:1;
  transform:scale(1.18) rotate(2deg)}100%{
  transform:none}}
@keyframes record-glow{0%,100%{
  box-shadow:0 0 0 0 #FF897200}50%{
  box-shadow:0 0 0 7px #FF897233}}
.result-modal .stat .badge{
  margin-top:6px;
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:#FF8972;
  color:#FFFFFF;
  font-size:12.5px;
  font-weight:900;
  letter-spacing:.2px;
  animation:badge-pop 520ms cubic-bezier(.34,1.56,.64,1) 900ms backwards}
.result-modal .stat.record{
  border-color:#FF8972;
  animation:record-glow 1.6s ease-in-out 900ms 3}
.result-modal .stat .best{
  margin-top:5px;
  font-size:12px;
  font-weight:700;
  color:#7D91A9}
.result-modal .stat .v.done{
  animation:bump 360ms cubic-bezier(.34,1.56,.64,1)}
.result-modal .streak{
  margin:0 auto 6px;
  width:max-content;
  max-width:100%;
  padding:5px 13px;
  border-radius:999px;
  background:#FFF1C9;
  color:#8A5A00;
  font-size:13.5px;
  font-weight:900;
  animation:badge-pop 520ms cubic-bezier(.34,1.56,.64,1) 600ms backwards}
@keyframes mimo-hop{0%{
  transform:translateY(14px) scale(.9,1.08);
  opacity:0}45%{
  transform:translateY(-12px) scale(1.04,.96);
  opacity:1}70%{
  transform:translateY(0) scale(1.06,.93)}100%{
  transform:none}}
.result-modal>.mimo{
  animation:mimo-hop 640ms cubic-bezier(.3,.7,.4,1) 120ms backwards}

/* Menu de idioma (14 idiomas): <select> nativo, no mesmo visual dos segmentos. */
.lang-select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:44px;
  border:0;
  border-radius:15px;
  padding:8px 38px 8px 14px;
  background:#E7F1F9 url("../select-arrow-CrHWVjqf.svg") no-repeat right 14px center;
  color:var(--ink);
  font:800 14px var(--font-ui);
  cursor:pointer;
  text-overflow:ellipsis}
.lang-select:focus-visible{
  outline:3px solid #192744;
  outline-offset:2px}

/* Escolha de compra: palco com cartas grandes sobre o fundo desfocado (sem caixa branca). */
.modal-wrap.stage{
  overflow-x:hidden;
  flex-direction:column;
  justify-content:safe center;
  align-items:center;
  background:radial-gradient(ellipse 72% 62% at 50% 46%,#15234233 0%,#0C142CCC 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  animation:fadein 320ms}
.stage-panel{
  --cw:clamp(54px,min(calc((90vw - 40px)/4.1),calc((100dvh - 300px)/1.4)),190px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,3.4dvh,32px);
  width:min(900px,100%);
  color:#fff;
  pointer-events:none}
.stage-title{
  margin:0;
  font:900 clamp(22px,4.4vw,36px)/1.15 var(--font-title);
  text-align:center;
  color:#fff;
  text-shadow:0 3px 20px #0A1230AA;
  pointer-events:auto;
  animation:rise 480ms cubic-bezier(.2,.9,.3,1) 60ms backwards}
.stage-options{
  display:flex;
  justify-content:center;
  gap:clamp(12px,4vw,48px);
  width:100%}
.stage-opt{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  pointer-events:auto;
  flex:1 1 0;
  min-width:0;
  max-width:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(8px,1.8dvh,16px);
  padding:8px 6px 14px;
  border-radius:28px;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  animation:stage-in 560ms cubic-bezier(.2,.9,.25,1.1) backwards;
  animation-delay:calc(140ms + var(--i) * 120ms);
  transition:transform 220ms cubic-bezier(.3,1.4,.5,1),background 220ms,opacity 300ms}
.stage-opt.last{
  background:#FFFFFF1A}
.stage-opt:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px}
.stage-opt:active{
  transform:scale(.97)}
.stage-hand{
  position:relative;
  display:block;
  width:calc(var(--cw) * 1.9);
  height:calc(var(--cw) * 1.4 + 22px);
  transition:transform 300ms cubic-bezier(.3,1.4,.5,1)}
.stage-glow{
  position:absolute;
  left:50%;
  top:52%;
  width:100%;
  height:130%;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.85);
  background:radial-gradient(closest-side,#FFFFFF73,#FFE8A033 55%,transparent);
  opacity:.45;
  transition:opacity 300ms,transform 420ms cubic-bezier(.3,1.3,.5,1);
  pointer-events:none}
.sc{
  --k:1;
  position:absolute;
  left:50%;
  bottom:0;
  width:var(--cw);
  margin-left:calc(var(--cw) / -2);
  aspect-ratio:1/1.4;
  border-radius:calc(var(--cw) * .075);
  filter:drop-shadow(0 calc(var(--cw) * .06) calc(var(--cw) * .1) #0A123099);
  transform-origin:50% 115%;
  transform:translate(calc(var(--x) * var(--cw) * var(--k)),calc(var(--lift) * -1px)) rotate(calc(var(--r) * var(--k))) scale(1);
  transition:transform 380ms cubic-bezier(.3,1.35,.5,1);
  animation:stage-card 620ms cubic-bezier(.2,.9,.3,1.15) backwards;
  animation-delay:calc(300ms + var(--i) * 120ms + var(--n) * 90ms)}
.stage-name{
  font:900 clamp(19px,2.8vw,26px)/1.15 var(--font-title);
  text-shadow:0 2px 14px #0A1230AA}
.stage-desc{
  font-size:clamp(12.5px,1.7vw,15px);
  font-weight:700;
  line-height:1.35;
  opacity:.92;
  max-width:27ch;
  text-shadow:0 1px 10px #0A1230AA;
  text-wrap:balance}
.stage-opt:focus-visible .stage-hand{
  transform:translateY(-10px) scale(1.05)}.stage-opt:focus-visible .sc{
  --k:1.25}.stage-opt:focus-visible .stage-glow{
  opacity:.95;
  transform:translate(-50%,-50%) scale(1.05)}
@media(hover:hover){.stage-opt:hover .stage-hand{
  transform:translateY(-10px) scale(1.05)}.stage-opt:hover .sc{
  --k:1.25}.stage-opt:hover .stage-glow{
  opacity:.95;
  transform:translate(-50%,-50%) scale(1.05)}}
.stage-close{
  position:absolute;
  top:calc(var(--safe-top) + 14px);
  right:calc(var(--safe-right) + 14px);
  z-index:2;
  animation:rise 400ms 200ms backwards}
.stage-mimo{
  position:absolute;
  z-index:-1;
  left:max(3vw,var(--safe-left));
  bottom:0;
  height:clamp(120px,30dvh,260px);
  aspect-ratio:1;
  pointer-events:none;
  animation:stage-mimo 700ms cubic-bezier(.2,.9,.3,1.1) 380ms backwards}
.stage-mimo canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transform:scale(.94);
  transform-origin:50% 100%;
  transition:opacity 160ms,transform 260ms cubic-bezier(.3,1.5,.5,1)}
.stage-mimo canvas.on{
  opacity:1;
  transform:none}
/* escolha: a mão escolhida sobe e some, a outra apaga, o palco se dissolve */
.modal-wrap.stage.choosing{
  opacity:0;
  transition:opacity 340ms 140ms}
.modal-wrap.stage.choosing .stage-opt:not(.picked){
  opacity:0;
  transform:scale(.92) translateY(10px)}
.stage-opt.picked{
  pointer-events:none;
  animation:stage-pick 460ms cubic-bezier(.4,0,.2,1) forwards}
.stage-opt.picked .stage-glow{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.6)}
@keyframes stage-in{from{
  opacity:0;
  transform:translateY(46px) scale(.88)}}
@keyframes stage-card{from{
  opacity:0;
  transform:translate(0,40px) rotate(0deg) scale(.85)}}
@keyframes stage-mimo{from{
  opacity:0;
  transform:translateY(60px)}}
@keyframes stage-pick{35%{
  transform:translateY(-14px) scale(1.1)}to{
  transform:translateY(-70px) scale(.72);
  opacity:0}}
@media(max-aspect-ratio:5/4){.stage-mimo{
  left:50%;
  height:clamp(96px,17dvh,170px);
  margin-left:calc(clamp(96px,17dvh,170px) / -2)}}
@media(max-height:500px){.stage-panel{
  --cw:clamp(54px,min(calc((90vw - 40px)/4.1),calc((100dvh - 235px)/1.4)),190px)}.stage-mimo{
  display:none}}

/* Pausa e vitória no mesmo palco: sem caixa branca, botões e números soltos sobre o fundo desfocado. */
.stage-panel .btn.primary{
  background:#FF7158;
  border-color:#FF7158;
  box-shadow:0 4px 0 #C4472F,0 8px 22px #FF715855}
.stage-panel .btn.primary:hover:not(:active):not(.pressed):not([disabled]){
  background:#FF8670;
  box-shadow:0 5px 0 #C4472F,0 10px 24px #FF715866}
.stage-menu{
  display:grid;
  gap:11px;
  width:min(340px,100%);
  pointer-events:auto}
.stage-menu .row{
  display:flex;
  gap:10px}.stage-menu .row .btn{
  flex:1;
  min-width:0}
.stage-menu .btn{
  min-height:52px}.stage-menu .lang-select{
  background-color:#FFFFFFE0}
.stage-menu>*{
  animation:rise 380ms cubic-bezier(.2,.9,.3,1) backwards}
.stage-menu>:nth-child(1){
  animation-delay:140ms}.stage-menu>:nth-child(2){
  animation-delay:190ms}.stage-menu>:nth-child(3){
  animation-delay:240ms}.stage-menu>:nth-child(4){
  animation-delay:290ms}.stage-menu>:nth-child(5){
  animation-delay:340ms}.stage-menu>:nth-child(n+6){
  animation-delay:390ms}
@media(max-height:500px){.stage-menu{
  grid-template-columns:1fr 1fr;
  width:min(560px,100%)}.stage-menu .row{
  display:contents}.stage-menu>.btn.primary{
  grid-column:1/-1}.stage-menu .btn{
  min-height:46px}}

.victory-wrap.stage{
  background:radial-gradient(ellipse 75% 60% at 50% 34%,#FFB45F59 0%,#0C142CD1 100%);
  -webkit-backdrop-filter:blur(4px) saturate(1.15);
  backdrop-filter:blur(4px) saturate(1.15)}
.stage-panel.result-modal{
  width:min(440px,100%);
  padding:0;
  box-shadow:none;
  gap:clamp(8px,1.6dvh,16px)}
.victory-wrap .stage-title{
  font-size:clamp(34px,8vw,58px);
  text-shadow:0 0 30px #FFC95A99,0 3px 20px #0A1230AA;
  animation:title-pop 620ms cubic-bezier(.34,1.5,.64,1) 260ms backwards}
.stage-panel .result{
  width:100%;
  pointer-events:auto;
  text-shadow:0 1px 10px #0A123099}
.stage-panel .result .nums{
  margin:6px 0 4px}
.stage-panel .result .actions{
  display:grid;
  gap:11px;
  margin-top:clamp(10px,2dvh,20px);
  text-shadow:none}
.stage-panel .result .row{
  display:flex;
  gap:10px}.stage-panel .result .row .btn{
  flex:1;
  min-width:0}
.stage-panel .stat{
  background:#FFFFFF24;
  border:1px solid #FFFFFF47;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px)}
.stage-panel .stat .v{
  color:#fff}.stage-panel .stat .k{
  color:#FFFFFFD1}.stage-panel .stat .best{
  color:#FFFFFFB3}
.stage-panel .reward{
  color:var(--ink);
  text-shadow:none}
.victory-hero{
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  pointer-events:none}
.victory-hero .mimo{
  position:relative;
  display:block;
  height:clamp(96px,22dvh,190px);
  width:auto;
  aspect-ratio:1;
  margin:0;
  filter:drop-shadow(0 10px 14px #0A123066);
  animation:mimo-hop 700ms cubic-bezier(.3,.7,.4,1) 200ms backwards}
.stage-rays{
  position:absolute;
  left:50%;
  top:50%;
  width:min(calc(100vw - 32px),62dvh,820px);
  aspect-ratio:1;
  translate:-50% -50%;
  background:repeating-conic-gradient(from var(--ray-a),#FFE3A04D 0 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(closest-side,#000 8%,transparent 92%);
  mask:radial-gradient(closest-side,#000 8%,transparent 92%);
  animation:rays-in 900ms ease-out backwards,rays-spin 50s linear infinite}
@keyframes title-pop{from{
  opacity:0;
  transform:scale(.6) translateY(10px)}}
@keyframes rays-in{from{
  opacity:0;
  scale:.4}}
/* gira o ângulo do gradiente (não a caixa): uma caixa girando alarga a rolagem horizontal do palco */
@property --ray-a{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg}
@keyframes rays-spin{to{
  --ray-a:360deg}}
/* paisagem: Mimo e título à esquerda, números, adesivo e botões à direita (nada fica abaixo da dobra) */
@media(max-height:500px){
.victory-wrap .stage-rays{
  display:none}
.stage-panel.result-modal{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  column-gap:28px;
  row-gap:4px;
  width:min(780px,100%);
  align-items:center;
  align-content:center}
.victory-wrap .victory-hero{
  grid-column:1;
  grid-row:1;
  align-self:end}
.victory-wrap .victory-hero .mimo{
  height:clamp(80px,34dvh,130px)}
.victory-wrap .stage-title{
  grid-column:1;
  grid-row:2;
  align-self:start;
  font-size:30px}
.stage-panel.result-modal>.result{
  grid-column:2;
  grid-row:1/3}
.stage-panel .result .nums{
  margin:4px 0}.stage-panel .stat{
  padding:7px}.stage-panel .stat .v{
  font-size:22px}
.stage-panel .result .actions{
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px}.stage-panel .result .row{
  display:contents}
.stage-panel .result .btn{
  min-height:44px;
  padding:8px 10px}
.result-modal .reward{
  margin-top:8px;
  padding:8px}.reward-slot{
  width:54px;
  height:54px}.reward .reward-slot .reward-sticker{
  width:44px;
  height:44px}
}

/* ── Tela de toque: logo em gelatina, bolhas de chá, abertura suave da home ── */
#loading{
  overflow:hidden;
  transition:opacity 900ms ease 120ms;
  background:transparent}
#loading::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 42%,#D8F2FB 0%,#B9E6F6 55%,#9ED9F0 100%);
  transition:opacity 700ms ease}
#loading.go{
  pointer-events:none}
#loading.fly::before,#loading.fly .bubble-fx{
  opacity:0}
.bubble-fx{
  transition:opacity 600ms ease}
.loading-logo{
  position:relative;
  z-index:1;
  width:min(78vw,420px);
  filter:drop-shadow(0 14px 18px #19274422);
  transform-origin:50% 60%}
#loading-text{
  position:relative;
  z-index:1;
  min-height:1.4em;
  font-size:17px;
  text-align:center;
  padding:0 20px}
#loading.ready{
  cursor:pointer}
#loading.ready .loading-logo{
  animation:jelly-in 1000ms cubic-bezier(.2,.9,.3,1) backwards,jelly 3.4s ease-in-out 1000ms infinite}
#loading.ready #loading-text{
  font-size:22px;
  letter-spacing:.02em;
  animation:tap-pulse 1.7s ease-in-out infinite}
#loading.out .loading-logo{
  transform:scale(1.06);
  transition:transform 900ms ease}
#loading.go #loading-text{
  animation:none;
  opacity:0;
  transition:opacity 200ms}
.bubble-fx{
  position:absolute;
  left:var(--x);
  bottom:-60px;
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#FFFFFFE6 0 10%,#FFFFFF55 11% 55%,#FFFFFF2E 100%);
  box-shadow:inset 0 0 0 1.5px #FFFFFF99;
  animation:bubble-rise var(--d) linear var(--delay) infinite;
  pointer-events:none}
@keyframes bubble-rise{from{
  transform:translate(0,0)}50%{
  transform:translate(var(--sway),-55dvh)}to{
  transform:translate(calc(var(--sway) * -1),-115dvh)}}
@keyframes jelly{0%,58%,100%{
  transform:none}10%{
  transform:scale(1.08,.93)}22%{
  transform:scale(.95,1.06)}34%{
  transform:scale(1.04,.97)}46%{
  transform:scale(.99,1.015)}}
@keyframes jelly-in{0%{
  opacity:0;
  transform:translateY(-70px) scale(.7,1.25)}45%{
  opacity:1;
  transform:translateY(8px) scale(1.18,.78)}62%{
  transform:translateY(-6px) scale(.92,1.1)}80%{
  transform:scale(1.04,.97)}100%{
  transform:none}}
@keyframes tap-pulse{0%,100%{
  opacity:.55;
  transform:scale(1)}50%{
  opacity:1;
  transform:scale(1.06)}}
@keyframes jelly-pop{0%{
  transform:none}30%{
  transform:scale(1.1,.9)}62%{
  transform:scale(.97,1.03)}100%{
  transform:none}}
@keyframes home-intro{from{
  opacity:0}}
/* a classe fica no próprio elemento da home: remover uma classe do body trocaria o nome da animação e a reiniciaria (era o piscar) */
.screen.home.intro{
  animation:home-intro 1000ms cubic-bezier(.2,.9,.3,1) backwards}
.home.intro .home-menu>*{
  animation-duration:700ms}
.home.intro .home-menu>:nth-child(1){
  animation-delay:480ms}.home.intro .home-menu>:nth-child(2){
  animation-delay:560ms}.home.intro .home-menu>:nth-child(3){
  animation-delay:640ms}.home.intro .home-menu>:nth-child(4){
  animation-delay:720ms}.home.intro .home-menu>:nth-child(n+5){
  animation-delay:800ms}

/* ── Som e configurações sempre no canto superior direito (como num videogame) ── */
#sysbar{
  position:absolute;
  top:calc(var(--safe-top) + 6px);
  right:calc(var(--safe-right) + 10px);
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  pointer-events:none;
  animation:rise 400ms 300ms backwards}
.sys-btns,.sys-pop{
  pointer-events:auto}
.sys-btns{
  display:flex;
  gap:8px}
.sys-btns .btn{
  background:#FFFFFFDB;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 10px #19274420}
.sys-pop{
  width:min(240px,calc(100vw - 20px));
  padding:4px 14px;
  background:#FFFFFF;
  border-radius:18px;
  box-shadow:0 12px 34px #19274433;
  animation:pop-in 200ms cubic-bezier(.34,1.3,.64,1)}
.sys-pop .set-row{
  padding:8px 0}
body:has(.modal-wrap) #sysbar{
  visibility:hidden}
body:not(.compact-land) #hud .hud-top{
  right:calc(var(--safe-right) + 112px)}
@media(max-width:780px){.screen-head{
  padding-right:104px}}

/* ── Transições suaves: telas e modais saem com fade; refazer a mesma tela não anima ── */
@keyframes fadeout{to{
  opacity:0}}
.screen.leaving,.modal-wrap.leaving{
  pointer-events:none;
  animation:fadeout 170ms ease forwards}
.screen.leaving>*{
  animation:none}
.screen.same,.screen.same>*{
  animation:none!important}
.modal-wrap{
  animation-duration:200ms}

/* ── Configurações: abas e cartões (sem lista de campos) ── */
.screen.wide .screen-head,.screen.wide>.panel{
  width:min(760px,100%)}
.modal.modal-wide{
  width:min(640px,100%)}
.settings{
  display:grid;
  gap:14px}
.set-tabs{
  margin:0}
.set-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:12px;
  align-items:stretch}
.set-grid.one{
  grid-template-columns:1fr}
.set-card{
  background:#EEF6FC;
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0}
.set-card>label{
  font-weight:800;
  line-height:1.3}
.set-card.full{
  grid-column:1/-1}
.set-card .seg{
  background:#DCEAF5}
.set-card .lang-select{
  background-color:#FFFFFF}
.set-tile{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:14px}
.set-foot{
  align-items:flex-start;
  background:none;
  padding:4px 2px 0}.set-foot p{
  margin:0;
  font-size:12.5px;
  color:var(--ink-soft);
  line-height:1.5}
.snd-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"b l" "b r";
  align-items:center;
  column-gap:14px;
  row-gap:0;
  padding:12px 14px}
.snd-row .snd-btn{
  grid-area:b}.snd-row>label{
  grid-area:l;
  align-self:end}.snd-row input[type=range]{
  grid-area:r;
  width:100%;
  align-self:start}
.snd-btn{
  appearance:none;
  width:54px;
  height:54px;
  border:0;
  border-radius:17px;
  background:#192744;
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 200ms,transform 120ms}
.snd-btn svg{
  width:27px;
  height:27px}.snd-btn:active{
  transform:scale(.94)}
.snd-row.off .snd-btn{
  background:#B7C8D8}.snd-row.off input[type=range]{
  opacity:.4}

/* celular em pé: a barra de som e engrenagem encolhe e o HUD cede espaço sem estourar o texto */
@media(max-width:430px){#sysbar{
  right:calc(var(--safe-right) + 6px)}.sys-btns{
  gap:6px}.sys-btns .btn{
  width:40px;
  height:40px;
  min-height:40px;
  border-radius:12px}body:not(.compact-land) #hud .hud-top{
  right:calc(var(--safe-right) + 94px)}.hud-info{
  font-size:13px;
  padding:0 10px;
  gap:6px}}

/* ── Tutorial guiado: Mochi, foco e mãozinha ── */
#tutor{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity 280ms ease}
#tutor.on{
  opacity:1}
body:has(.modal-wrap) #tutor{
  visibility:hidden}
.tutor-veil{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 72% 62% at 50% 46%,#15234233 0%,#0C142CCC 100%);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity 320ms}
.tutor-veil.on{
  opacity:1}
.tutor-spot{
  position:absolute;
  border-radius:16px;
  box-shadow:0 0 0 100vmax #0C142C94,0 0 0 3px #FFFFFFD9,0 0 26px 4px #FFE8A099;
  opacity:0;
  transition:left 420ms cubic-bezier(.2,.9,.3,1),top 420ms cubic-bezier(.2,.9,.3,1),width 420ms cubic-bezier(.2,.9,.3,1),height 420ms cubic-bezier(.2,.9,.3,1),opacity 300ms}
.tutor-hand{
  position:absolute;
  left:0;
  top:0;
  width:76px;
  height:76px;
  margin:-5px 0 0 -33px;
  transform:translate(var(--x,0px),var(--y,0px));
  transition:transform 560ms cubic-bezier(.2,.9,.3,1),opacity 260ms,visibility 0s linear 260ms;
  opacity:0;
  visibility:hidden}
.tutor-hand.on{
  opacity:1;
  visibility:visible;
  transition:transform 560ms cubic-bezier(.2,.9,.3,1),opacity 260ms,visibility 0s}
.tutor-hand.down{
  transform:translate(var(--x,0px),var(--y,0px)) rotate(180deg);
  transform-origin:33px 5px}
.tutor-hand span{
  position:absolute;
  left:-17px;
  top:-19px;
  display:block;
  width:120px;
  height:120px;
  transform-origin:42% 20%;
  filter:drop-shadow(0 4px 5px #0C142C77);
  animation:hand-tap 1.35s ease-in-out infinite}
.tutor-hand img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain}
@media(max-width:600px){.tutor-hand span{
  left:-6px;
  top:-13px;
  width:92px;
  height:92px}}
.tutor-ring{
  position:absolute;
  left:33px;
  top:5px;
  width:70px;
  height:70px;
  margin:-35px 0 0 -35px;
  border-radius:50%;
  border:4px solid #FFFFFF;
  opacity:0;
  animation:hand-ring 1.35s ease-out infinite}
@keyframes hand-tap{0%,100%{
  transform:translate(0,0) rotate(-4deg) scale(1)}38%{
  transform:translate(3px,10px) rotate(0deg) scale(.9)}52%{
  transform:translate(3px,10px) rotate(0deg) scale(.9)}72%{
  transform:translate(0,-2px) rotate(-4deg) scale(1.02)}}
@keyframes hand-ring{0%,34%{
  transform:scale(.25);
  opacity:0}46%{
  opacity:.95}100%{
  transform:scale(1.3);
  opacity:0}}
/* abertura e fim: Mochi grande no centro, sem foco na mesa */
/* convite da primeira vez */
.ask-wrap .stage-title{
  font-size:clamp(30px,6vw,46px)}
.mochi-ask{
  width:min(380px,100%)}
.mochi-say{
  margin:0 0 6px;
  text-align:center;
  font-size:18px;
  font-weight:800;
  line-height:1.4;
  text-shadow:0 2px 12px #0A1230AA}

/* ── Balão do Mochi: limpo, com respiro (substitui o cartão anterior) ── */
.tutor-card{
  position:absolute;
  left:50%;
  bottom:calc(var(--safe-bottom) + 86px);
  width:min(620px,calc(100vw - 24px));
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  gap:0;
  pointer-events:auto}
.tutor-card.top{
  bottom:auto;
  top:calc(var(--safe-top) + 58px)}
.tutor-card.pop{
  animation:tutor-pop 480ms cubic-bezier(.3,1.3,.5,1)}
@keyframes tutor-pop{from{
  opacity:0;
  transform:translateX(-50%) translateY(22px) scale(.95)}}
.tutor-mochi{
  flex:none;
  width:auto;
  aspect-ratio:1;
  margin:0 -8px -8px 0;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 10px 12px #0C142C55)}
.tutor-say{
  position:relative;
  flex:1;
  min-width:0;
  background:#FFFFFF;
  border-radius:26px;
  padding:16px 22px 24px;
  box-shadow:0 26px 50px -14px #0C142CB3,0 0 0 1px #FFFFFF55;
  overflow:hidden}
.tutor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px}
.tutor-name{
  display:inline-flex;
  align-items:center;
  background:var(--coral);
  color:#FFFFFF;
  font-weight:900;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:999px;
  padding:5px 13px}
.tutor-tools{
  display:flex;
  gap:6px}
.tutor-tool{
  appearance:none;
  border:0;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#EEF4FA;
  color:var(--ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background 120ms,transform 120ms}
.tutor-tool:hover{
  background:#DEEAF5}.tutor-tool:active{
  transform:scale(.92)}
.tutor-tool svg{
  width:20px;
  height:20px}
.tutor-say p{
  margin:0 0 22px;
  font-size:18px;
  line-height:1.5;
  font-weight:700;
  color:var(--ink);
  text-wrap:pretty}
.tutor-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px}
.tutor-skip{
  appearance:none;
  background:none;
  border:0;
  color:#7A8AA3;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  padding:10px 2px;
  min-height:44px}
.tutor-skip:hover{
  color:var(--ink);
  text-decoration:underline}
.tutor-go{
  appearance:none;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:0 20px 0 28px;
  border:0;
  border-radius:999px;
  background:linear-gradient(180deg,#FF8E74 0%,#FF6247 100%);
  color:#FFFFFF;
  font:900 17.5px/1 var(--font-ui);
  letter-spacing:.01em;
  text-shadow:0 1px 0 #C9432B66;
  cursor:pointer;
  box-shadow:0 12px 24px -8px #FF5A3FB3,0 4px 0 #D9472D,inset 0 1px 0 #FFFFFF59;
  transition:transform 140ms,box-shadow 140ms}
.tutor-go .tutor-arrow{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#FFFFFF2E}
.tutor-go svg{
  width:18px;
  height:18px;
  animation:go-nudge 2.4s ease-in-out 1.2s infinite}
@keyframes go-nudge{0%,68%,100%{
  transform:none}80%{
  transform:translateX(4px)}90%{
  transform:translateX(0)}}
.tutor-go:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px -8px #FF5A3FC2,0 4px 0 #D9472D,inset 0 1px 0 #FFFFFF6B}
.tutor-go:active{
  transform:translateY(3px);
  box-shadow:0 5px 12px -6px #FF5A3FB3,0 1px 0 #D9472D,inset 0 1px 0 #FFFFFF59}
.tutor-go:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px}
.tutor-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:6px;
  background:#EAF1F8}
.tutor-progress i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#28705B,#52C4A3);
  border-radius:0 4px 4px 0;
  transition:width 480ms cubic-bezier(.2,.9,.3,1)}
/* abertura e fim: Mochi grande no centro */
#tutor.big .tutor-card{
  top:50%;
  bottom:auto;
  transform:translate(-50%,-50%);
  flex-direction:column;
  align-items:center;
  width:min(520px,calc(100vw - 32px))}
#tutor.big .tutor-card.pop{
  animation-name:tutor-pop-big}
@keyframes tutor-pop-big{from{
  opacity:0;
  transform:translate(-50%,-46%) scale(.94)}}
#tutor.big .tutor-mochi{
  margin:0 0 -26px}
#tutor.big .tutor-say{
  width:100%;
  padding:34px 28px 32px}
#tutor.big .tutor-head{
  justify-content:center}
#tutor.big .tutor-tools{
  position:absolute;
  right:14px;
  top:14px}
#tutor.big .tutor-say p{
  font-size:20px;
  text-align:center;
  margin-bottom:24px}
#tutor.big .tutor-foot{
  flex-direction:column-reverse;
  justify-content:center;
  gap:2px}
#tutor.big .tutor-go{
  margin:0;
  min-height:58px;
  font-size:19px;
  padding:0 24px 0 34px}
@media(max-width:520px){.tutor-say{
  padding:14px 16px 22px;
  border-radius:22px}.tutor-say p{
  font-size:16.5px;
  margin-bottom:16px}.tutor-go{
  min-height:50px;
  font-size:16px;
  padding:0 14px 0 20px}.tutor-skip{
  font-size:13px}#tutor.big .tutor-say p{
  font-size:18px}}
@media(max-height:500px){.tutor-card{
  bottom:calc(var(--safe-bottom) + 8px);
  width:min(580px,calc(100vw - 150px))}.tutor-card.top{
  bottom:auto;
  top:calc(var(--safe-top) + 6px)}.tutor-say{
  padding:10px 16px 18px}.tutor-head{
  margin-bottom:4px}.tutor-say p{
  font-size:15px;
  margin-bottom:10px}.tutor-go{
  min-height:44px;
  font-size:15px}.tutor-skip{
  min-height:40px}.tutor-tool{
  width:32px;
  height:32px}#tutor.big .tutor-card{
  width:min(460px,calc(100vw - 32px))}#tutor.big .tutor-say{
  padding:24px 22px 20px}#tutor.big .tutor-say p{
  font-size:16px;
  margin-bottom:12px}#tutor.big .tutor-go{
  min-height:48px;
  font-size:16px}}


/* sem barras de rolagem do sistema (rolagem por roda, toque e teclado continua) */
*{
  scrollbar-width:none}
*::-webkit-scrollbar{
  display:none}

/* a logo da home fica escondida enquanto a da tela de toque voa até ela; sem animação própria para não reiniciar */
body.logo-flight .home .brand-image{
  visibility:hidden}
.screen.home.intro .brand-image{
  animation:none}
.screen.home.intro>*{
  animation:none} /* o contêiner não sobe 8px: a logo em voo precisa da posição final para pousar */

/* Menus compartilham a arte da abertura; apenas o conteúdo rola sobre a cena. */
.screen.menu-scene{
  background:transparent;
  align-items:flex-end;
  padding:calc(var(--safe-top) + 56px) max(24px,4vw) calc(var(--safe-bottom) + 24px)}
.menu-surface{
  width:min(680px,46vw);
  flex:none;
  background:#F8FCFEF5;
  border:1px solid #FFFFFFD9;
  border-radius:24px;
  padding:16px;
  box-shadow:0 14px 42px #19274420}
.menu-surface .screen-head,.menu-surface>.panel{
  width:100%}
.menu-surface .screen-head{
  margin-bottom:14px;
  padding-right:0}
.menu-surface .screen-head .hud-brand{
  display:none}
.menu-surface>.panel{
  background:#FFFFFFE8;
  box-shadow:none;
  padding:16px}
.menu-surface>.panel+.panel{
  margin-top:12px}
.menu-surface .chapter{
  margin-bottom:10px}
.menu-surface .chapter:last-child{
  margin-bottom:0}
.menu-surface .chapter-thumb{
  height:115px}
.menu-surface .chapter-thumb .label{
  top:0;
  right:auto;
  width:65%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  overflow-wrap:anywhere;
  background:linear-gradient(90deg,#192744ed 0%,#192744a6 44%,#19274400 100%);
  text-shadow:0 1px 5px #101a31}
.menu-surface .chapter-thumb img{
  object-position:center 48%}
.screen-campaign .chapter:first-child .chapter-thumb img{
  object-position:center 30%}
.menu-surface .chapter-body{
  padding:9px}
.menu-surface .chal{
  min-height:64px}
.menu-surface .seal-row{
  gap:6px;
  margin-top:8px}
.menu-surface .seal-row img{
  width:30px;
  height:30px}
@media(max-aspect-ratio:5/4){
  .screen.menu-scene{
  align-items:center;
  padding:calc(var(--safe-top) + 34svh) calc(var(--safe-right) + 14px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 14px)}
  .menu-surface{
  width:min(560px,100%);
  padding:14px;
  border-radius:22px}
  .menu-surface .screen-head{
  padding-right:0}
}
@media(max-width:430px){.menu-surface .chapter-body{
  grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:500px) and (min-aspect-ratio:5/4){
  .screen.menu-scene{
  padding-top:calc(var(--safe-top) + 54px);
  padding-right:calc(var(--safe-right) + 12px)}
  .menu-surface{
  width:min(520px,49vw);
  padding:12px}
}
/* Draw mode is a compact illustrated dialog, with both real choices retained. */
.modal-wrap.draw-choice{
  background:#063f53a8;
  -webkit-backdrop-filter:none;
  backdrop-filter:none}
.modal-wrap.ask-wrap{
  -webkit-backdrop-filter:none;
  backdrop-filter:none}
.draw-choice .stage-panel{
  --cw:34px;
  position:relative;
  pointer-events:auto;
  width:min(430px,100%);
  margin-top:65px;
  padding:58px 22px 22px;
  gap:16px;
  border:3px solid #fff;
  border-radius:26px;
  background:#fff;
  color:#192744;
  box-shadow:0 7px 0 #087f88,0 16px 36px #053e4c55}
.draw-choice .draw-mascot{
  position:absolute;
  z-index:1;
  left:50%;
  top:-75px;
  transform:translateX(-50%);
  width:min(260px,75%);
  height:auto;
  pointer-events:none}
.draw-choice .stage-title{
  color:#192744;
  text-shadow:none;
  font-size:clamp(24px,4vw,30px)}
.draw-choice .stage-close{
  top:12px;
  right:12px;
  animation:none}
.draw-choice .stage-options{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px}
.draw-choice .stage-opt,.draw-choice .stage-opt.last{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:12px;
  row-gap:2px;
  align-items:center;
  width:100%;
  max-width:none;
  min-height:88px;
  padding:10px 16px;
  border:3px solid #fff;
  border-radius:22px;
  background:linear-gradient(#ffa522,#ff7900);
  box-shadow:0 4px 0 #c35c05,0 6px 12px #133c4240;
  color:#fff;
  text-align:left}
.draw-choice .stage-opt:nth-child(2),.draw-choice .stage-opt.last:nth-child(2){
  background:linear-gradient(#bc7cf3,#8744d1);
  box-shadow:0 4px 0 #6529a3,0 6px 12px #133c4240}
.draw-choice .stage-opt:focus-visible{
  outline:3px solid #1d3e73;
  outline-offset:3px}
.draw-choice .stage-hand{
  grid-column:1;
  grid-row:1/3;
  justify-self:center;
  width:82px;
  height:55px}
.draw-choice .stage-name{
  grid-column:2;
  grid-row:1;
  align-self:end;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:21px;
  text-shadow:0 2px 2px #6a376c80}
.draw-choice .stage-desc{
  grid-column:2;
  grid-row:2;
  align-self:start;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:12px;
  line-height:1.2;
  text-shadow:0 1px 2px #5d3b5970}
.draw-choice .stage-opt:focus-visible .stage-hand,.draw-choice .stage-opt:hover .stage-hand{
  transform:none}
@media(max-height:500px) and (min-aspect-ratio:5/4){.draw-choice .stage-panel{
  width:min(720px,100%);
  margin-top:26px;
  padding:28px 18px 16px;
  gap:8px}.draw-choice .draw-mascot{
  width:140px;
  top:-45px}.draw-choice .stage-options{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px}.draw-choice .stage-opt,.draw-choice .stage-opt.last{
  min-height:72px;
  padding:6px 10px}.draw-choice .stage-title{
  font-size:23px}}
.victory-wrap .victory-hero .mimo{
  width:min(260px,65vw);
  height:auto;
  aspect-ratio:auto}
@media(min-height:700px){.victory-wrap .victory-hero{
  top:-85px}}
@media(max-height:500px){.victory-wrap .victory-hero .mimo{
  width:min(200px,28vw)}}
@media(max-height:650px) and (orientation:portrait){
 .stage-panel.result-modal{
  padding:12px 16px;
  gap:3px}
 .victory-wrap .victory-hero .mimo{
  width:170px}
 .victory-wrap .stage-title{
  font-size:25px}
 .stage-panel .result .nums{
  margin:6px 0}
 .stage-panel .result .stat{
  padding:7px}
 .stage-panel .result .stat .v{
  font-size:22px}
 .stage-panel .result .reward{
  padding:7px;
  margin-top:6px}
 .stage-panel .result .reward-slot{
  width:48px;
  height:48px}
 .stage-panel .result .reward-sticker{
  width:40px;
  height:40px}
 .stage-panel .result .actions{
  gap:7px;
  margin-top:10px}
 .stage-panel .result .btn{
  min-height:44px;
  padding:8px 10px;
  font-size:14px}
}

/* convite do Mochi em tela baixa (celular deitado): compacto, sem raios, botões lado a lado */
@media(max-height:500px){.ask-wrap .stage-rays{
  display:none}.ask-wrap .victory-hero .mimo{
  height:76px}.ask-wrap .stage-title{
  font-size:26px}.ask-wrap .stage-panel{
  gap:8px}.mochi-say{
  font-size:15px;
  margin:0 0 2px}.mochi-ask{
  grid-template-columns:1fr 1fr;
  width:min(520px,100%)}.mochi-ask .mochi-say{
  grid-column:1/-1}.mochi-ask>.btn.primary{
  grid-column:auto}}
/* Fox Club visual direction */
:root{
  --table:#17d2c9;
  --coral:#ff8209;
  --coral-deep:#ce5400;
  --sage:#2bd5ad;
  --sage-deep:#048d78;
  --paper-shade:#e4f8f7;
  --paper-edge:#b4e9e2}
html,body{
  background:#18d2c8}
.btn.primary,.btn.primary:hover{
  color:#fff;
  background:linear-gradient(#ffa624,#ff7900);
  border:3px solid #fff;
  box-shadow:0 4px 0 #c65a04,0 7px 14px #054f5a44;
  text-shadow:0 2px 2px #c75900}
.btn.primary:hover:not(:active):not(.pressed):not([disabled]){
  box-shadow:0 5px 0 #c65a04,0 9px 18px #054f5a44}
.home-modes .btn,.home-utilities .btn{
  border:2px solid white;
  box-shadow:0 4px 0 #038d8980,0 6px 14px #056f7540}
.home-menu .btn.big{
  border-radius:28px}
.screen.dim{
  background:#14d5cb url('../landscape-Dwj4tnih.webp') center/cover fixed}
.panel{
  border:3px solid #fff;
  box-shadow:0 5px 0 #068b8980,0 9px 22px #04596730}
.screen-head h1{
  color:#fff;
  text-shadow:0 3px 0 #076d72,2px 0 #076d72,-2px 0 #076d72,0 -2px #076d72}
.hud-bar .btn{
  border:2px solid white;
  color:white;
  font-weight:900;
  text-shadow:0 2px 2px #005969;
  box-shadow:0 4px 0 #006f7a}
/* End of src/ui/style.css */
/* End of dist-buyer/assets/ui/style-BZ5sECp8.css */