/* 67SKIN desktop: the landscape is artwork; windows remain real, accessible UI. */
@font-face {
  font-family:'Grib Pixel';
  src:url('assets/grib-pixel.ttf') format('truetype');
  font-weight:400 900;
  font-display:swap
}
.profile-level-summary {
  margin:18px 0
}
.profile-level-summary .level-badge {
  background:var(--panel2);
  border-radius:2px
}
.profile-level-summary .level-badge>span:not(.level-kicker) {
  font-size:12px;
  color:var(--muted)
}
.folder-link>span:last-child {
  white-space:nowrap;
  font-size:17px!important;
  overflow-wrap:normal!important
}
.header-nav {
  gap:14px!important
}
.hero-button .hero-character {
  background-image:url('assets/grib-heroes-fast.webp');
  background-repeat:no-repeat
}
@media(max-width:1300px) {
  .folder-link>span:last-child {
    font-size:14px!important
  }
}
@media(max-width:700px) {
  .folder-link>span:last-child {
    font-size:8px!important
  }
  .welcome-dialog h1 {
    font-size:25px!important
  }
  .welcome-text {
    font-size:21px!important
  }
  .header-nav {
    gap:0!important
  }
  .header-nav button {
    padding-inline:3px!important;
    font-size:12px!important
  }
  .welcome-scene {
    min-height:310px!important
  }
}
.grib-sprite[data-grib="1"] {
  background-size:533.3333333333333% 250.98039215686273%;
  background-position:0.9615384615384616% 11.363636363636363%;
}
.grib-sprite[data-grib="2"] {
  background-size:531.4878892733564% 250.98039215686273%;
  background-position:25.902165196471532% 11.363636363636363%;
}
.grib-sprite[data-grib="3"] {
  background-size:554.5126353790613% 250.98039215686273%;
  background-position:50.03971405877681% 11.363636363636363%;
}
.grib-sprite[data-grib="4"] {
  background-size:538.9473684210526% 250.98039215686273%;
  background-position:74.1806554756195% 11.363636363636363%;
}
.grib-sprite[data-grib="5"] {
  background-size:533.3333333333333% 250.98039215686273%;
  background-position:99.19871794871796% 11.363636363636363%;
}
.grib-sprite[data-grib="6"] {
  background-size:495.48387096774195% 275.2688172043011%;
  background-position:0.9787928221859705% 84.04907975460122%;
}
.grib-sprite[data-grib="7"] {
  background-size:552.5179856115108% 275.2688172043011%;
  background-position:26.073131955484897% 84.04907975460122%;
}
.grib-sprite[data-grib="8"] {
  background-size:546.6192170818506% 275.2688172043011%;
  background-position:49.9601593625498% 84.04907975460122%;
}
.grib-sprite[data-grib="9"] {
  background-size:506.9306930693069% 275.2688172043011%;
  background-position:75.26358475263585% 84.04907975460122%;
}
.grib-sprite[data-grib="10"] {
  background-size:548.5714285714286% 275.2688172043011%;
  background-position:98.96496815286623% 84.04907975460122%;
}
html:root,html[data-theme="light"] {
  color-scheme:light;
  --bg:#a2d9fa;
  --panel:#f5f3fc;
  --panel2:#e6e0f3;
  --ink:#201b30;
  --muted:#736586;
  --pink:#f638a0;
  --pink2:#a73586;
  --mint:#387b59;
  --lav:#a98edb;
  --yellow:#ffe19d;
  --line:#b9a5d6;
  --window:#f3f1faee;
  --title:linear-gradient(110deg,#e5a6e0,#ef87c2);
  --shade:0
}
html[data-theme="dark"] {
  --window:#252138f5;
  --panel:#252138;
  --panel2:#342d49;
  --ink:#f5efff;
  --muted:#b5a7ce;
  --line:#75648d;
  --title:linear-gradient(110deg,#694772,#b55791);
  --shade:.5
}
html[data-theme="cosmic"] {
  --window:#171636ef;
  --panel:#171636;
  --panel2:#2b2450;
  --ink:#f4eeff;
  --muted:#b8aedc;
  --line:#8570b7;
  --title:linear-gradient(110deg,#4c388b,#b950a9);
  --shade:.48
}
html[data-theme="pink"] {
  --window:#fff0f8f2;
  --panel:#fff0f8;
  --panel2:#f4d7e9;
  --line:#d5a0c8;
  --title:linear-gradient(110deg,#eba9df,#fa8ec2);
  --shade:0
}
html[data-theme="pastel"] {
  --window:#f4f2fff2;
  --panel:#f4f2ff;
  --panel2:#e4e4f7;
  --line:#b2aad2;
  --title:linear-gradient(110deg,#b8c1ee,#e6b5d6);
  --shade:0
}
html[data-theme="mono"] {
  --window:#eeeeeff5;
  --panel:#eee;
  --panel2:#ddd;
  --ink:#222;
  --muted:#595959;
  --line:#777;
  --title:linear-gradient(110deg,#b9b9b9,#ddd);
  --pink:#555;
  --pink2:#444;
  --mint:#555;
  --shade:.1;
  color-scheme:light
}
html[data-theme="mono"] body {
  background-blend-mode:luminosity;
  background-color:#999
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  background:#a2d9fa url('assets/grib-world-fast.webp') center center/cover fixed no-repeat;
  font-family:'Trebuchet MS','Segoe UI',sans-serif;
  color:var(--ink);
  padding:16px 18px 88px;
  min-width:320px
}
@media(max-width:700px) {
  body { background-attachment:scroll; }
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  background:#141029;
  opacity:var(--shade);
  transform:none;
  z-index:0;
  pointer-events:none;
  font-size:0
}
button,input,select,textarea {
  font:inherit
}
button {
  touch-action:manipulation
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #4c90f3;
  outline-offset:4px
}
button:disabled {
  cursor:not-allowed;
  opacity:.58
}
[hidden] {
  display:none!important
}
.pixel-icon {
  width:35px;
  height:35px;
  flex:none;
  image-rendering:pixelated
}
.coin-icon {
  width:30px;
  height:30px;
  object-fit:contain;
  image-rendering:pixelated;
  flex:none
}
.pixel-window {
  border:3px solid var(--line);
  border-top-color:#fff1fc;
  box-shadow:inset 2px 2px 0 #fff9,inset -2px -2px 0 #a886c375,4px 4px 0 #6c5e976b,-3px 0 0 #c98ad2;
  background:var(--window);
  border-radius:3px
}
.desktop-header {
  position:relative;
  z-index:3;
  min-height:78px;
  background:var(--title);
  display:flex;
  align-items:center;
  gap:20px;
  padding:10px 17px;
  max-width:1600px;
  margin:auto;
  border-color:#c878c1;
  border-top-color:#fff0ff;
  box-shadow:inset 2px 2px 0 #fff9,inset -2px -2px 0 #c772ba,4px 4px 0 #756596aa,-3px 0 0 #696896
}
.wordmark {
  display:flex;
  align-items:center;
  gap:12px;
  background:none;
  padding:0;
  flex:none
}
.wordmark .coin-icon {
  width:51px;
  height:51px
}
.wordmark span {
  font-family:'Grib Pixel',monospace;
  font-size:44px;
  letter-spacing:-3px;
  line-height:1;
  font-weight:1000;
  color:#fff7fc;
  text-shadow:3px 3px 0 #c65a9c,-2px -1px 0 #fff9
}
.header-nav {
  display:flex;
  gap:18px;
  align-items:center;
  flex:1
}
.header-nav button {
  background:none;
  color:#fff;
  padding:8px 0;
  font-family:'Grib Pixel',Consolas,monospace;
  font-size:16px;
  font-weight:bold;
  white-space:nowrap
}
.header-nav button:hover,.header-nav button.active {
  color:#542854;
  text-shadow:1px 1px 0 #ffe8f8
}
.header-actions {
  display:flex;
  align-items:center;
  gap:9px;
  flex:none
}
.header-actions button,.pixel-primary {
  border:2px solid #ffe8f5;
  border-radius:4px;
  box-shadow:inset 2px 2px 0 #fff4,3px 3px 0 #ba64a280;
  background:#726386;
  color:#fff;
  font-weight:800;
  letter-spacing:.5px;
  padding:11px 17px
}
.header-actions #registerEntry,.pixel-primary {
  background:linear-gradient(#ff50ac,#ee3096);
  color:white
}
.header-actions button:hover,.pixel-primary:hover {
  filter:brightness(1.08);
  transform:translateY(-1px)
}
.header-wallet {
  display:flex;
  align-items:center;
  gap:5px!important;
  background:#fff0d7!important;
  color:#493342!important;
  padding:5px 8px!important
}
.window-controls {
  display:flex;
  gap:6px;
  flex:none
}
.window-controls button {
  width:31px;
  height:32px;
  background:linear-gradient(#f4d3ef,#d88bcf);
  border:2px solid #35273f;
  color:#252235;
  border-radius:1px;
  box-shadow:inset 2px 2px #fff9,2px 2px #844b88;
  font-size:24px;
  line-height:20px;
  font-weight:900
}
.window-controls button:last-child {
  font-size:20px
}
.skin-strip {
  position:relative;
  z-index:2;
  display:flex;
  max-width:1600px;
  height:128px;
  margin:8px auto 24px;
  padding:9px;
  gap:9px
}
.strip-caption {
  flex:0 0 158px;
  padding:12px 12px;
  align-self:center
}
.strip-caption strong {
  font-size:23px;
  line-height:1;
  display:block
}
.strip-caption small {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:12px;
  margin-top:10px
}
.strip-caption i {
  width:9px;
  height:9px;
  display:block;
  background:#55b657;
  border-radius:50%
}
.skin-ticker {
  display:flex;
  min-width:0;
  overflow-x:auto;
  gap:7px;
  scrollbar-width:none;
  flex:1
}
.skin-ticker::-webkit-scrollbar {
  display:none
}
.ticker-item {
  display:flex;
  align-items:center;
  min-width:184px;
  flex:1 0 184px;
  text-align:left;
  gap:5px;
  padding:6px;
  border:2px solid #d6c7ef;
  background:linear-gradient(140deg,var(--panel2),var(--panel));
  border-radius:7px;
  border-bottom-color:#eaa5d7;
  overflow:hidden
}
.ticker-item>span:last-child {
  min-width:0;
  flex:1
}
.ticker-item b {
  font-size:13px;
  display:block
}
.ticker-item small {
  font-size:11px;
  color:var(--muted);
  display:block;
  margin-top:6px;
  line-height:1.1
}
.ticker-item .skin-art {
  width:95px;
  height:78px;
  flex:none
}
.skin-art {
  display:block;
  aspect-ratio:1.5;
  background-image:url('assets/grib-skins-fast.webp');
  background-size:300% 200%;
  background-position:var(--skin-x) var(--skin-y);
  background-repeat:no-repeat;
  image-rendering:pixelated;
  border-radius:6px
}
.strip-next {
  background:var(--panel2);
  border:1px solid var(--line);
  width:32px;
  flex:none;
  font-size:36px;
  color:var(--muted)
}
.app {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:30px;
  max-width:1600px;
  margin:0 auto;
  min-height:calc(100vh - 340px);
  align-items:start;
  z-index:1;
  position:relative
}
.app aside.desktop-sidebar {
  padding:13px 11px;
  display:flex;
  background:var(--window);
  gap:14px;
  border:3px solid var(--line);
  border-top-color:#fff1fc;
  align-self:start
}
.nav {
  gap:3px
}
.nav button,html[data-theme] .nav button {
  display:flex;
  align-items:center;
  gap:15px;
  min-height:58px;
  background:none;
  color:var(--ink);
  border:1px solid transparent;
  border-radius:3px;
  padding:9px 8px;
  font-size:21px;
  letter-spacing:0;
  font-weight:700;
  transition:background .15s
}
.nav button:hover,html[data-theme] .nav button:hover,.nav button.active,html[data-theme] .nav button.active {
  transform:none;
  background:color-mix(in srgb,var(--pink) 12%,var(--panel));
  border:1px solid var(--line);
  color:var(--ink)
}
.nav .soon-dot {
  margin-left:auto;
  color:var(--pink2)
}
.sidebar-rank {
  border-top:1px solid var(--line);
  padding-top:12px
}
.sidebar-rank .level-badge {
  margin:0;
  border:0;
  padding:0 8px;
  background:none;
  border-radius:0;
  gap:5px
}
.level-badge strong {
  font-size:17px
}
.level-badge .level-future {
  font-size:10px
}
.level-kicker {
  font-size:10px
}
.level-track {
  height:7px;
  border-radius:1px
}
.level-track span {
  border-radius:0
}
.level-ladder {
  background:none;
  border:0;
  padding:7px 8px;
  margin:0
}
.level-ladder li span:last-child {
  float:none;
  margin-left:9px
}
.secondary-nav {
  border-top:1px solid var(--line);
  padding-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.secondary-nav button {
  display:flex;
  gap:5px;
  align-items:center;
  padding:4px 5px;
  color:var(--muted);
  background:none;
  font-size:11px
}
.secondary-nav .pixel-icon {
  width:16px;
  height:16px
}
main {
  padding:0;
  min-width:0
}
.welcome-scene {
  display:grid;
  grid-template-columns:minmax(220px,.86fr) minmax(320px,1.25fr);
  align-items:center;
  min-height:490px;
  gap:12px;
  padding:26px 9% 20px 0
}
.mascot-stage {
  position:relative;
  display:grid;
  place-items:center;
  align-self:stretch
}
.mascot-shadow {
  position:absolute;
  bottom:15%;
  width:75%;
  height:25px;
  border-radius:50%;
  background:#29664b55;
  filter:blur(5px)
}
.hero-button {
  width:100%;
  max-width:430px;
  aspect-ratio:.8;
  background:none;
  padding:0;
  position:relative;
  align-self:end
}
.hero-button:hover {
  transform:translateY(-5px)
}
.hero-button .hero-character {
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(3px 4px 0 #3b533b55);
  object-fit:contain
}
.grib-sprite {
  display:block;
  aspect-ratio:.8;
  background-image:url('assets/grib-heroes-fast.webp');
  background-repeat:no-repeat;
  background-size:500% 200%;
  background-position:var(--sprite-x,50%) var(--sprite-y,0%);
  image-rendering:pixelated;
  object-fit:contain
}
.welcome-dialog {
  position:relative;
  padding:38px 38px 24px;
  border-color:#d985bd;
  border-top-color:#fff3fa;
  min-width:0
}
.welcome-dialog::before {
  content:'';
  position:absolute;
  width:24px;
  height:24px;
  background:var(--panel);
  border-left:3px solid #d985bd;
  border-bottom:3px solid #d985bd;
  transform:rotate(45deg);
  left:-15px;
  top:50%
}
.dialog-decoration {
  position:absolute;
  right:15px;
  top:6px;
  color:#c677b6;
  font-size:24px;
  font-weight:bold
}
.welcome-eyebrow {
  color:var(--muted);
  font-size:10px;
  letter-spacing:2px;
  margin:0 0 13px
}
.welcome-dialog h1 {
  font-size:clamp(34px,3.5vw,51px);
  line-height:1.12;
  font-weight:850;
  margin:0 0 16px;
  letter-spacing:-1.7px
}
.welcome-text {
  font-family:'Grib Pixel',Consolas,monospace;
  font-size:clamp(23px,2.4vw,34px);
  margin:0 0 28px;
  line-height:1.2;
  letter-spacing:-1px
}
.welcome-cta {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  width:100%;
  font-size:clamp(24px,2.7vw,39px);
  padding:14px 8px;
  border:3px solid #ffc4e8;
  box-shadow:inset 2px 2px #fff4,3px 4px 0 #dc74b1;
  font-family:'Grib Pixel',Consolas,monospace;
  font-weight:bold
}
.welcome-cta span {
  font-size:27px
}
.welcome-dialog>small {
  font-size:10px;
  color:var(--muted);
  display:block;
  text-align:center;
  margin-top:13px
}
.folder-categories {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px;
  margin:6px 0 65px
}
.folder-link {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:14px;
  background:none;
  padding:0;
  min-width:0
}
.folder-icon {
  display:grid;
  place-items:center;
  width:105px;
  height:70px;
  background:linear-gradient(#ffe49d,#f4c767);
  border:4px solid #352d36;
  box-shadow:3px 3px 0 #31483a55,inset 3px 3px #fff2c8;
  position:relative;
  margin-top:14px;
  transform:rotate(-2deg)
}
.folder-icon::before {
  content:'';
  position:absolute;
  width:43px;
  height:13px;
  top:-17px;
  left:4px;
  background:#ffe8a9;
  border:4px solid #352d36;
  border-bottom:0
}
.folder-icon .pixel-icon {
  width:40px;
  height:40px
}
.folder-link>span:last-child {
  background:#326447d9;
  color:#fff;
  padding:6px 10px;
  font-size:16px;
  font-weight:bold;
  max-width:100%;
  overflow-wrap:anywhere
}
.folder-link:hover .folder-icon {
  transform:translateY(-5px) rotate(2deg)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin:14px 0 21px
}
.section-heading h2 {
  font-size:30px;
  letter-spacing:-.7px;
  margin:4px 0;
  color:var(--ink)
}
.home-screen>.section-heading {
  background:var(--window);
  padding:18px;
  border:2px solid var(--line)
}
.section-heading p {
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  font-weight:800;
  color:var(--muted)
}
.text-button {
  color:var(--pink2);
  background:none;
  font-weight:bold;
  white-space:nowrap
}
.case-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:17px
}
.case-card {
  position:relative;
  overflow:hidden;
  border:2px solid var(--line);
  border-top-color:#fff;
  background:var(--window);
  box-shadow:4px 4px 0 #67518055;
  padding:0 12px 14px;
  color:var(--ink);
  text-align:center;
  border-radius:3px;
  transition:transform .15s
}
.case-card:hover {
  transform:translateY(-5px)
}
.case-art {
  position:relative;
  display:block;
  height:180px;
  margin:0 -12px 10px;
  background:radial-gradient(ellipse at 50% 70%,var(--case-color),transparent 72%)
}
.case-card.green {
  --case-color:#a4dc83
}
.case-card.pink {
  --case-color:#f5a0d3
}
.case-card.orange {
  --case-color:#edbd7b
}
.case-card.violet {
  --case-color:#ba9ae8
}
.case-mascot {
  height:180px;
  width:150px;
  margin:auto;
  transform:translateY(-2px)
}
.pixel-crate {
  position:absolute;
  bottom:2px;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  width:105px;
  height:59px;
  background:linear-gradient(#ffe196 0 20%,#946346 20% 26%,#e6b165 26% 75%,#b38154 75%);
  border:3px solid #483645;
  box-shadow:inset 4px 0 #f9d799,inset -4px 0 #a87343,3px 3px 0 #3d264d4d
}
.pixel-crate::before {
  content:'';
  position:absolute;
  inset:-3px 19px;
  border-inline:7px solid #b898c0;
  pointer-events:none
}
.pixel-crate .coin-icon {
  z-index:1;
  width:36px;
  height:36px
}
.case-tag {
  position:absolute;
  top:11px;
  left:10px;
  font-size:9px;
  font-weight:bold;
  color:var(--muted);
  letter-spacing:1px
}
.case-card h3 {
  font-size:17px;
  margin:9px 0 11px
}
.case-price {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px 4px;
  background:var(--panel2);
  border:1px solid var(--line)
}
.case-price b {
  font-size:19px
}
.case-price small {
  font-size:10px;
  font-weight:bold
}
.case-price .coin-icon {
  width:25px;
  height:25px
}
.case-details {
  display:block;
  margin-top:10px;
  font-size:11px;
  color:var(--muted)
}
.catalog-coin {
  display:flex;
  align-items:center;
  font-size:12px;
  gap:7px
}
.case-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0
}
.case-filters button {
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--ink);
  padding:8px 12px;
  font-size:13px
}
.case-filters button[aria-pressed=true] {
  background:var(--pink);
  color:#fff
}
.catalog-note {
  font-size:12px;
  color:var(--muted)!important;
  margin:24px 0 0
}
.coming-layout {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:32px;
  align-items:center;
  min-height:420px
}
.coming-layout>.grib-sprite {
  width:100%;
  max-width:350px
}
.coming-layout h2 {
  font-size:48px!important;
  margin:12px 0!important
}
.coming-layout p {
  max-width:390px;
  margin:15px 0 25px
}
.coming-badge {
  padding:6px 10px;
  border:1px solid var(--line);
  background:var(--panel2);
  font-size:10px;
  letter-spacing:2px
}
html[data-theme] .panel {
  background:var(--window);
  color:var(--ink);
  border:3px solid var(--line);
  border-top-color:#fff6fb;
  border-radius:3px;
  padding:27px;
  box-shadow:4px 4px 0 #68568466
}
html[data-theme] .panel h2 {
  color:var(--ink);
  font-size:30px
}
html[data-theme] .panel h3 {
  color:var(--pink2)
}
html[data-theme] .panel p,html[data-theme] .panel li {
  color:var(--muted)
}
html[data-theme] .field,html[data-theme] .wallet-action,html[data-theme] .wallet-history li,html[data-theme] .coupon-row,html[data-theme] .admin-panel,html[data-theme] .demo-cashback {
  background:var(--panel2);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:3px
}
html[data-theme] .field input,html[data-theme] .panel input,html[data-theme] select,html[data-theme] textarea {
  border:2px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  border-radius:2px
}
.panel button.action,.back,.preference-select,.wallet-action button {
  border-radius:2px!important
}
.panel button.action {
  background:var(--pink);
  color:#fff;
  border-color:#ffc5e5
}
.wallet-balance-card {
  background:var(--title)!important;
  color:var(--ink)!important;
  border:2px solid var(--line);
  border-radius:3px
}
.wallet-demo-badge {
  border-radius:2px
}
.auth-profile-avatar {
  height:250px!important;
  width:200px!important;
  object-fit:contain
}
.avatar-picker {
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px
}
.avatar-option {
  height:auto!important;
  padding:3px!important;
  border-radius:2px!important;
  background:var(--panel)!important
}
.avatar-option .grib-sprite {
  width:100%;
  height:auto
}
.avatar-option.selected {
  border-color:var(--pink)!important;
  background:color-mix(in srgb,var(--pink) 15%,var(--panel))!important
}
.games {
  gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.games-heading {
  grid-column:1/-1;
  padding:17px 21px;
  background:var(--window);
  border:2px solid var(--line)
}
.games-heading h2 {
  font-size:32px;
  margin:5px 0
}
.games-heading p {
  font-size:13px;
  color:var(--muted);
  margin:5px 0
}
.games .card {
  border:2px solid var(--line);
  border-radius:3px;
  background:var(--window);
  color:var(--ink);
  min-height:390px;
  box-shadow:4px 4px #67518055;
  position:relative
}
.games .art {
  height:200px;
  margin:-16px -16px 10px;
  background:linear-gradient(160deg,var(--card),transparent);
  border:0;
  border-radius:0
}
.games .art .grib-sprite {
  height:195px;
  width:155px
}
.games .card h3 {
  font-family:'Grib Pixel',Consolas,monospace;
  font-size:24px
}
.games .card p {
  color:var(--muted);
  font-size:13px
}
.games .play {
  border-radius:2px;
  border:2px solid var(--line);
  background:var(--pink);
  color:white
}
html[data-theme] .game21-board {
  background:var(--panel);
  border-radius:3px;
  color:var(--ink)
}
html[data-theme] .game21-side,html[data-theme] .arcade-controls,html[data-theme] .arcade-message {
  background:var(--panel2);
  color:var(--ink);
  border-color:var(--line);
  border-radius:3px
}
.game21-hero img {
  width:110px;
  height:145px
}
.game21-actions button,.game21-betbox button {
  border-radius:3px
}
.arcade-hero-card {
  border-radius:3px
}
.arcade-hero-card img.grib-sprite {
  height:140px;
  width:112px
}
.run-player img.grib-sprite,.run-enemy img.grib-sprite {
  object-fit:contain
}
.auth-dialog,.support-dialog {
  background:var(--panel)!important;
  color:var(--ink)!important;
  border:3px solid var(--line)!important;
  border-radius:3px!important;
  box-shadow:8px 8px #49374c88!important
}
.auth-dialog h2,.support-header h2 {
  color:var(--pink2)!important
}
.auth-dialog input {
  background:var(--panel2)!important;
  color:var(--ink)!important;
  border-color:var(--line)!important;
  border-radius:3px!important
}
.auth-dialog button {
  border-radius:3px!important
}
.auth-message,.auth-help {
  color:var(--muted)!important
}
.auth-methods button,.auth-secondary {
  background:var(--panel2)!important;
  color:var(--ink)!important;
  border-color:var(--line)!important
}
.auth-methods .auth-primary,.auth-primary {
  background:var(--pink)!important;
  color:#fff!important
}
.auth-build {
  color:var(--muted)!important
}
.case-dialog {
  width:min(700px,calc(100vw - 30px));
  max-height:calc(100dvh - 30px);
  padding:0;
  color:var(--ink)
}
.case-dialog::backdrop {
  background:#392743a6;
  backdrop-filter:blur(3px)
}
.case-dialog-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--title);
  padding:9px 13px;
  font-size:12px;
  font-weight:bold;
  color:#fff
}
.case-dialog-title button {
  width:29px;
  height:29px;
  background:#fac1e6;
  border:2px solid #784870;
  color:#382139;
  font-size:22px
}
.case-dialog-body {
  padding:25px;
  text-align:center
}
.case-dialog-body h2 {
  font-size:30px;
  margin:0 0 12px
}
.case-dialog-body h3 {
  font-size:15px;
  margin-top:27px
}
.case-dialog-body p {
  font-size:13px;
  color:var(--muted);
  line-height:1.5
}
.modal-price {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  color:var(--ink)!important;
  font-weight:bold
}
.case-items {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:16px 0 20px
}
.case-items article {
  border:1px solid var(--line);
  background:var(--panel2);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:7px
}
.case-items b {
  font-size:13px
}
.case-items article>span:last-child {
  font-size:11px;
  color:var(--muted)
}
.case-dialog-body>.skin-art {
  max-width:390px;
  margin:20px auto
}
.case-dialog-body>.pixel-primary {
  margin-top:12px
}
.desktop-footer {
  position:fixed;
  z-index:4;
  bottom:10px;
  left:12px;
  right:12px;
  min-height:53px;
  display:flex;
  align-items:center;
  gap:21px;
  padding:6px 17px;
  background:var(--title);
  color:#49305a;
  max-width:1612px;
  margin:auto
}
.footer-brand {
  display:flex;
  align-items:center;
  gap:11px;
  background:none;
  padding-right:22px;
  border-right:2px solid #ab7cbd;
  flex:none
}
.footer-brand strong {
  font-family:'Grib Pixel',Consolas,monospace;
  font-size:27px;
  letter-spacing:1px
}
.footer-brand .coin-icon {
  width:36px;
  height:36px
}
.desktop-footer>span {
  font-family:'Grib Pixel',Consolas,monospace;
  font-size:12px;
  letter-spacing:.7px;
  color:#715881
}
.footer-help {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  background:none;
  font-size:12px
}
.footer-help .pixel-icon {
  width:22px;
  height:22px
}
#desktopClock {
  font-family:'Grib Pixel',Consolas,monospace;
  font-size:23px;
  padding-left:17px;
  border-left:2px solid #ab7cbd;
  font-weight:bold
}
.bottom {
  display:none
}
@media(min-width:1600px) {
  .welcome-scene {
    min-height:545px
  }
  .hero-button {
    max-width:460px
  }
  .welcome-dialog {
    padding:42px
  }
  .welcome-dialog h1 {
    font-size:57px
  }
}
@media(max-width:1300px) {
  .desktop-header {
    gap:14px;
    padding-inline:12px
  }
  .wordmark span {
    font-size:35px
  }
  .wordmark .coin-icon {
    width:40px;
    height:40px
  }
  .header-nav {
    gap:12px
  }
  .header-nav button {
    font-size:13px
  }
  .header-actions button {
    font-size:12px;
    padding:10px 12px
  }
  .window-controls {
    gap:4px
  }
  .window-controls button {
    width:25px;
    height:28px
  }
  .app {
    grid-template-columns:215px minmax(0,1fr);
    gap:23px
  }
  .nav button,html[data-theme] .nav button {
    font-size:18px;
    min-height:54px;
    gap:12px
  }
  .nav .pixel-icon {
    width:30px;
    height:30px
  }
  .welcome-scene {
    padding-right:5%;
    grid-template-columns:minmax(180px,.85fr) minmax(270px,1.2fr);
    min-height:450px
  }
  .welcome-dialog {
    padding:32px 28px 20px
  }
  .folder-categories {
    gap:10px
  }
  .folder-link>span:last-child {
    font-size:13px
  }
  .case-grid {
    gap:12px
  }
  .case-card {
    padding-inline:9px
  }
  .case-card h3 {
    font-size:15px
  }
  .case-price small {
    font-size:8px
  }
  .case-art {
    height:155px
  }
  .case-mascot {
    height:155px;
    width:125px
  }
  .pixel-crate {
    width:92px;
    height:52px
  }
  .case-price {
    gap:3px
  }
  .case-price b {
    font-size:17px
  }
}
@media(max-width:1050px) {
  .window-controls {
    display:none
  }
  .header-nav {
    gap:10px
  }
  .desktop-header {
    flex-wrap:wrap;
    gap:8px 15px
  }
  .header-actions {
    margin-left:auto
  }
  .header-nav {
    order:3;
    flex-basis:100%;
    justify-content:center
  }
  .header-nav button {
    padding:5px 10px;
    font-size:14px
  }
  .app {
    grid-template-columns:180px minmax(0,1fr);
    gap:19px
  }
  .nav button,html[data-theme] .nav button {
    font-size:16px;
    gap:8px;
    padding-inline:4px
  }
  .nav .pixel-icon {
    width:27px;
    height:27px
  }
  .welcome-scene {
    padding:15px 0 20px;
    min-height:390px;
    grid-template-columns:minmax(140px,.8fr) minmax(235px,1.2fr);
    gap:0
  }
  .welcome-dialog {
    padding:29px 20px 19px
  }
  .welcome-dialog h1 {
    font-size:34px
  }
  .welcome-text {
    font-size:24px
  }
  .welcome-cta {
    font-size:26px
  }
  .folder-icon {
    width:77px;
    height:58px
  }
  .folder-link>span:last-child {
    font-size:11px;
    padding:5px
  }
  .folder-categories {
    margin-bottom:38px
  }
  .case-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .case-card h3 {
    font-size:18px
  }
  .case-price small {
    font-size:11px
  }
  .strip-caption {
    flex-basis:135px
  }
  .strip-caption strong {
    font-size:20px
  }
  .case-art {
    height:185px
  }
  .case-mascot {
    height:185px;
    width:150px
  }
}
@media(max-width:700px) {
  body {
    padding:8px 9px 88px;
    background-position:center;
  }
  .desktop-header {
    padding:8px;
    min-height:65px;
    gap:5px 10px
  }
  .wordmark {
    gap:4px
  }
  .wordmark span {
    font-size:27px;
    letter-spacing:-2px
  }
  .wordmark .coin-icon {
    width:31px;
    height:31px
  }
  .header-actions {
    gap:4px
  }
  .header-actions button {
    font-size:10px;
    padding:8px 7px;
    letter-spacing:0
  }
  .header-wallet .coin-icon {
    width:18px;
    height:18px
  }
  .header-wallet {
    font-size:11px!important
  }
  .header-nav {
    justify-content:space-between;
    gap:0;
    overflow:auto
  }
  .header-nav button {
    font-size:10px;
    padding:7px 5px
  }
  .skin-strip {
    height:90px;
    margin:7px auto 14px;
    padding:5px;
    gap:5px
  }
  .strip-caption {
    flex-basis:94px;
    padding:6px
  }
  .strip-caption strong {
    font-size:15px;
    line-height:1.1
  }
  .strip-caption small {
    font-size:10px;
    margin-top:6px
  }
  .ticker-item {
    min-width:145px;
    flex-basis:145px;
    padding:2px;
    gap:2px
  }
  .ticker-item .skin-art {
    width:72px;
    height:62px
  }
  .ticker-item b {
    font-size:11px
  }
  .ticker-item small {
    font-size:9px;
    margin-top:4px
  }
  .strip-next {
    width:23px;
    font-size:29px
  }
  .app {
    display:block;
    min-height:60vh
  }
  .app aside.desktop-sidebar {
    display:none
  }
  main {
    padding:0
  }
  .welcome-scene {
    grid-template-columns:.85fr 1.15fr;
    min-height:305px;
    padding:0 2px;
    gap:0
  }
  .mascot-stage {
    align-self:center
  }
  .hero-button {
    width:100%;
    max-width:240px
  }
  .welcome-dialog {
    padding:24px 14px 14px;
    box-shadow:3px 3px #75659688
  }
  .welcome-dialog::before {
    width:17px;
    height:17px;
    left:-11px
  }
  .welcome-eyebrow {
    font-size:7px;
    letter-spacing:1px;
    margin-bottom:9px
  }
  .welcome-dialog h1 {
    font-size:27px;
    letter-spacing:-1px;
    margin-bottom:12px
  }
  .welcome-text {
    font-size:18px;
    letter-spacing:-.5px;
    margin-bottom:17px
  }
  .welcome-cta {
    font-size:23px;
    gap:7px;
    padding:11px 4px
  }
  .welcome-cta span {
    font-size:19px
  }
  .welcome-dialog>small {
    font-size:8px;
    line-height:1.3
  }
  .dialog-decoration {
    font-size:16px;
    right:9px
  }
  .folder-categories {
    gap:6px;
    margin:15px 0 28px
  }
  .folder-icon {
    width:54px;
    height:43px;
    border-width:3px;
    margin-top:9px;
    box-shadow:2px 2px #31483a55,inset 2px 2px #fff2c8
  }
  .folder-icon::before {
    width:27px;
    height:9px;
    top:-12px;
    border-width:3px
  }
  .folder-icon .pixel-icon {
    width:27px;
    height:27px
  }
  .folder-link {
    gap:9px
  }
  .folder-link>span:last-child {
    font-size:8px;
    padding:5px 3px;
    min-height:22px;
    line-height:1.2
  }
  .section-heading {
    gap:8px;
    margin:14px 0
  }
  .home-screen>.section-heading {
    padding:11px
  }
  .section-heading h2 {
    font-size:22px
  }
  .section-heading .text-button {
    font-size:11px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1px
  }
  .case-grid {
    gap:10px
  }
  .case-card h3 {
    font-size:15px
  }
  .case-price small {
    font-size:9px
  }
  .case-art {
    height:153px
  }
  .case-mascot {
    height:150px;
    width:120px
  }
  .case-details {
    font-size:10px
  }
  .case-tag {
    font-size:8px;
    left:7px
  }
  .catalog-coin {
    display:none
  }
  .case-filters {
    gap:5px;
    margin:17px 0
  }
  .case-filters button {
    font-size:11px;
    padding:7px
  }
  .panel,html[data-theme] .panel {
    padding:17px
  }
  .panel h2,html[data-theme] .panel h2 {
    font-size:25px
  }
  .back {
    font-size:11px;
    padding:6px!important
  }
  .coming-layout {
    grid-template-columns:1fr;
    gap:0;
    min-height:0;
    text-align:center
  }
  .coming-layout>.grib-sprite {
    width:170px;
    margin:auto
  }
  .coming-layout h2 {
    font-size:34px!important
  }
  .coming-layout p {
    margin:15px auto 22px
  }
  .games {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px
  }
  .games .card {
    display:flex;
    padding:12px;
    min-height:360px;
    gap:0
  }
  .games .art {
    margin:-12px -12px 10px;
    height:158px
  }
  .games .art .grib-sprite {
    height:150px;
    width:120px
  }
  .games .card h3 {
    font-size:18px
  }
  .games .card p {
    font-size:11px;
    line-height:1.4;
    margin:8px 0;
    flex:1
  }
  .games .play {
    font-size:11px;
    width:100%;
    padding:10px 4px!important
  }
  .games-heading h2 {
    font-size:25px
  }
  .games-heading {
    padding:15px
  }
  .panel-grid {
    grid-template-columns:1fr
  }
  .desktop-footer {
    display:none
  }
  .bottom {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:fixed;
    z-index:10;
    left:0;
    right:0;
    bottom:0;
    padding:9px 4px max(10px,env(safe-area-inset-bottom));
    background:var(--window);
    border-top:3px solid var(--line);
    box-shadow:0 -3px #fff9;
    gap:2px
  }
  .bottom button {
    color:var(--muted);
    background:none;
    padding:0;
    font-weight:bold;
    display:grid;
    place-items:center;
    gap:4px
  }
  .bottom button.active,.bottom button:first-child.active {
    color:var(--pink2)
  }
  .bottom button:first-child {
    color:var(--muted)
  }
  .bottom .pixel-icon {
    width:24px;
    height:24px
  }
  .bottom span {
    font-size:9px
  }
  .wallet-balance-card strong {
    font-size:26px
  }
  .case-dialog-body {
    padding:17px
  }
  .case-items {
    gap:6px
  }
  .case-items b {
    font-size:11px
  }
  .case-items article>span:last-child {
    font-size:9px
  }
  .auth-profile-avatar {
    margin:auto
  }
  .case-dialog-body h2 {
    font-size:25px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.welcome-dialog h1,.welcome-text,.nav button,.strip-caption strong,.games-heading h2,.section-heading h2,.coming-layout h2,.case-dialog-body h2,.folder-link>span:last-child {
  font-family:'Grib Pixel','Trebuchet MS',sans-serif;
  font-weight:400;
  letter-spacing:0
}
.wordmark span {
  font-weight:400;
  letter-spacing:0;
  font-size:48px
}
.welcome-dialog h1 {
  font-weight:400;
  font-size:54px
}
.nav button,html[data-theme] .nav button {
  font-size:24px;
  font-weight:400
}
.header-nav button {
  font-size:19px;
  font-weight:400
}
.welcome-cta {
  font-weight:400
}
.welcome-text {
  font-size:37px
}
.folder-link>span:last-child {
  font-size:21px
}
.section-heading h2 {
  font-size:35px
}
.strip-caption strong {
  font-size:29px
}
.grib-sprite {
  image-rendering:pixelated
}
@media(max-width:1300px) {
  .wordmark span {
    font-size:37px
  }
  .header-nav button {
    font-size:16px
  }
  .nav button,html[data-theme] .nav button {
    font-size:22px
  }
  .welcome-dialog h1 {
    font-size:47px
  }
  .welcome-text {
    font-size:30px
  }
  .folder-link>span:last-child {
    font-size:17px
  }
}
@media(max-width:1050px) {
  .nav button,html[data-theme] .nav button {
    font-size:20px
  }
  .welcome-dialog h1 {
    font-size:39px
  }
  .welcome-text {
    font-size:26px
  }
  .folder-link>span:last-child {
    font-size:14px
  }
}
@media(max-width:700px) {
  .wordmark span {
    font-size:28px
  }
  .header-nav button {
    font-size:13px
  }
  .welcome-dialog h1 {
    font-size:30px
  }
  .welcome-text {
    font-size:21px
  }
  .folder-link>span:last-child {
    font-size:11px
  }
  .section-heading h2 {
    font-size:26px
  }
  .strip-caption strong {
    font-size:19px
  }
}

/* Compact promo: live, readable content with the site's existing character and case art. */
.promo67 {
  position:relative;
  width:100%;
  max-width:1100px;
  min-height:290px;
  margin:0 auto 18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 36%;
  overflow:hidden;
  background:linear-gradient(110deg,#fffaff 0%,#f7efff 66%,#f3dcfa 100%);
  border-color:#ed53d9;
}
.promo67-content {
  position:relative;
  z-index:1;
  min-width:0;
  align-self:center;
  padding:24px clamp(18px,3vw,44px);
  color:#17121b;
}
.promo67-eyebrow {font:700 11px system-ui,sans-serif;letter-spacing:2px;color:#b2289b}
.promo67 h1 {font-family:'Grib Pixel',system-ui,sans-serif;font-size:clamp(30px,3.5vw,55px);line-height:1.05;margin:11px 0 8px;color:#17121b}
.promo67 h1 strong,.promo67 p b {color:#ee149f}
.promo67 p {font-family:'Grib Pixel',system-ui,sans-serif;font-size:clamp(19px,2.1vw,31px);line-height:1.2;margin:0 0 18px;color:#17121b}
.promo67-actions {display:flex;align-items:stretch;gap:10px;max-width:650px}
.promo67-copy {display:flex;justify-content:space-between;align-items:center;flex:0 0 83px;min-height:54px;padding:7px 10px;border:2px solid #e93ac8;background:#fff;color:#19131d;font:700 27px 'Grib Pixel',system-ui,sans-serif}
.promo67-copy span:last-child {font:20px system-ui,sans-serif;color:#635d6c}
.promo67-claim {flex:1;min-width:0;min-height:54px;padding:9px 12px;border:2px solid #f7b7e9;background:#f62b9f;color:white;box-shadow:3px 3px 0 #a03185;font:700 clamp(14px,1.9vw,26px) 'Grib Pixel',system-ui,sans-serif;white-space:nowrap}
.promo67-claim:hover {background:#d8128a}
.promo67-claim span {margin-left:5px}
.promo67-art {
  position:relative;
  min-width:0;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 48% 53%,#ffd2ed 0%,#f9e4ff 54%,#f2d8f4 100%);
  overflow:hidden;
}
.promo67-mascot {width:min(85%,240px);height:260px;position:relative;z-index:1;margin-top:-28px;filter:drop-shadow(5px 5px 0 #d987ce)}
.promo67-crate {left:52%;bottom:16px;width:170px;height:96px;z-index:2;transform:translateX(-50%)}
.promo67-crate .coin-icon {width:57px;height:57px}
.promo67-sparkle {position:absolute;top:12%;right:12%;font-size:40px;color:#f131b1}
.promo67-copy:focus-visible,.promo67-claim:focus-visible {
  outline:3px solid #18111e;
  outline-offset:2px;
}
@media(max-width:700px) {
  .promo67 {grid-template-columns:minmax(0,1fr) 33%;min-height:230px}
  .promo67-content {padding:15px 0 15px 15px}
  .promo67-eyebrow {font-size:8px;letter-spacing:.7px}
  .promo67 h1 {font-size:clamp(24px,6.8vw,31px);margin:9px 0}
  .promo67 p {font-size:clamp(17px,4.4vw,22px);margin-bottom:11px}
  .promo67-actions {flex-wrap:wrap;gap:7px}
  .promo67-copy {flex-basis:70px;min-height:44px;font-size:22px}
  .promo67-claim {flex-basis:100%;min-height:44px;font-size:clamp(12px,3.6vw,17px)}
  .promo67-mascot {width:120px;height:190px;margin-top:-20px}
  .promo67-crate {width:93px;height:56px;bottom:18px}
  .promo67-crate .coin-icon {width:33px;height:33px}
  .promo67-sparkle {font-size:23px}
}

/* The mobile menu exposes every section without squeezing desktop navigation. */
.mobile-menu-trigger {display:none}
.mobile-nav-dialog {
  width:min(460px,calc(100vw - 20px));
  max-height:calc(100dvh - 24px);
  padding:16px;
  overflow:auto;
  color:var(--ink);
  background:var(--window);
}
.mobile-nav-dialog::backdrop {background:#1b1229c9}
.mobile-nav-title {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.mobile-nav-title h2 {font-family:'Grib Pixel',system-ui,sans-serif;font-size:24px;line-height:1.2;margin:0}
.mobile-nav-title button {width:44px;height:44px;border:2px solid var(--line);background:var(--panel2);color:var(--ink);font-size:24px}
.mobile-nav-dialog nav {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mobile-nav-dialog nav button {display:flex;align-items:center;gap:7px;min-width:0;min-height:52px;padding:7px;border:2px solid var(--line);background:var(--panel2);color:var(--ink);text-align:left;font-size:14px;font-weight:800}
.mobile-nav-dialog nav button.active {border-color:var(--pink);background:#fae5f5;color:#2c2234}
.mobile-nav-dialog .pixel-icon {width:27px;height:27px}
.mobile-nav-dialog nav button span {min-width:0;overflow-wrap:anywhere}
.case-dialog-title {position:sticky;top:0;z-index:2}
.case-dialog-title button {min-width:44px;min-height:44px}
@media(max-width:700px) {
  .desktop-header .header-nav {display:none}
  .mobile-menu-trigger {display:block;order:3;flex-basis:100%;min-height:44px;border:2px solid #fff8;background:#fff4;color:#3e2750;font-family:'Grib Pixel',system-ui,sans-serif;font-size:17px}
  .wordmark,.header-actions button {min-height:44px!important}
  .header-actions button {font-size:11px!important}
  .skin-strip {height:72px}
  .strip-next {width:44px;min-width:44px;min-height:44px}
  .strip-caption {flex-basis:88px}
  .ticker-item {min-width:126px;flex-basis:126px}
  .ticker-item .skin-art {width:59px;height:50px}
  .folder-categories {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 7px;margin:15px 0 23px}
  .folder-link {gap:7px;min-height:84px}
  .folder-link>span:last-child {white-space:normal!important;font-size:11px!important;line-height:1.2;min-height:31px;display:grid;place-items:center;text-align:center}
  .case-filters button {min-height:44px;font-size:13px;padding:8px}
  .games .card p {font-size:13px}
  .games .play {font-size:13px;min-height:44px}
  .panel .back {min-height:44px;font-size:13px;padding:9px!important}
  .panel input,.panel select,.panel textarea {font-size:16px;max-width:100%}
  .panel input,.panel select,.panel button.action,.panel button.pixel-primary {min-height:44px}
  .skin-search {display:grid;grid-template-columns:1fr}
  .skin-search label,.skin-search input,.skin-search button {width:100%;min-width:0}
  .skin-card-foot button,.skin-pages button {min-height:44px;font-size:13px}
  .skin-card p {font-size:13px}
  .case-items,.skin-case-items {grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-items b {font-size:12px;overflow-wrap:anywhere}
  .case-items article>span:last-child {font-size:11px}
  .skin-case-items img {height:82px}
  .bottom span {font-size:11px}
  .bottom button {min-height:48px}
  .promo67-claim {font-size:14px}
  .game21-betbox select {min-width:0;width:100%}
  .game21-player-row {grid-template-columns:70px minmax(0,1fr);gap:8px}
  .game21-cards {gap:5px}
  .playing-card {width:52px;height:78px}
  .arcade-controls button,.arcade-quickcash {min-height:44px}
  .apple-cell {height:44px}
  .case-dialog,.support-dialog,.auth-dialog {max-height:calc(100dvh - 20px);overflow:auto}
  .support-header button {min-width:44px;min-height:44px}
}