/* Focused staking visual corrections. Do not modify the existing craft win/loss screen. */
#nav .nav-main {min-width:0;display:flex;align-items:center}
#nav .nav-main > button {flex:1 1 0;min-width:0;white-space:nowrap}
#nav .nav-main .stake-nav-icon {
    display:grid;place-items:center;width:27px;height:27px;min-height:27px;margin:0 auto;
}
#nav .stake-nav-icon svg {display:block;width:24px;height:24px;stroke-width:1.9}
#nav .games-entry {
    display:flex;flex:0 0 52px;width:52px;height:52px;flex-direction:column;align-items:center;
    justify-content:center;gap:1px;border-radius:50%;padding:0;font-size:9px;
    background:#282828e6;border:1px solid #454545;color:#d0d2d5;backdrop-filter:blur(20px);
}
#nav.games-nav .nav-main button {
    width:100%;height:54px;min-width:0;font-size:11px;
}
#nav.games-nav .nav-main button.active {
    background:#172c42!important;
    color:#49adff;
    border:1px solid #459bea32;
}
#nav.games-nav .profile-nav {flex:0 0 57px}
#nav .nav-main > button span:last-child {font-size:10px;white-space:nowrap}
@media(max-width:370px){
    #nav .nav-main > button span:last-child {font-size:8.5px;letter-spacing:0}
    #nav .nav-main .stake-nav-icon {width:22px;height:25px;min-height:25px}
    #nav .stake-nav-icon .staking-machine-png {width:23px;height:23px}
}

/* Dark minimal staking screen, consistent with Portal-style inventory cards. */
.staking-page {
    padding:0 0 30px;
    background:transparent;
    color:#f4f5f6;
}
.staking-page .staking-welcome {
    min-height:calc(100dvh - 166px);
    padding:clamp(24px,5vh,54px) 14px 35px;
    justify-content:center;
    gap:12px;
}
.staking-page .staking-welcome-glow {
    width:clamp(180px,55vw,246px);
    height:clamp(166px,49vw,221px);
    border-radius:0;
    background:radial-gradient(ellipse at 50% 55%,#24b66a25,transparent 68%);
}
.staking-page .staking-machine-png {
    display:block;object-fit:contain;border-radius:0;
    filter:drop-shadow(0 18px 22px #16be6224);
}
.staking-page .staking-welcome-glow .staking-machine-png {
    height:min(100%,210px);width:min(100%,220px);
    max-width:220px;max-height:210px;
    margin:auto;
}
.staking-page .staking-welcome h1 {
    margin:5px 0 0;font-size:clamp(24px,7vw,30px);line-height:1.15;
    letter-spacing:-.035em;
}
.staking-page .staking-welcome .staking-apr {
    font-size:25px;font-weight:800;line-height:1.2;
    letter-spacing:-.02em;color:#1ce778;
}
.staking-page .staking-welcome p {
    max-width:290px;font-size:12px;color:#989ca2;
    line-height:1.5;
}
.staking-page .staking-activate {
    margin-top:22px;
    width:min(100%,325px);min-height:53px;
    border-radius:28px;
    color:#131613;background:#fff;
    box-shadow:none;font-size:14px;
    transition:transform .15s ease,opacity .15s ease;
}
.staking-page .staking-activate:active {transform:scale(.97)}
.staking-page .staking-main {gap:18px;padding-top:5px}
#app > header > .staking-rules-button {display:none}
#app.staking-view > header {justify-content:space-between}
#app.staking-view > header > .staking-rules-button {
    display:flex;gap:7px;align-items:center;
    background:#232529;color:#aeb0b8;
    border:1px solid #2b2e34;
    border-radius:25px;padding:8px 11px;font-weight:750;
}
.staking-rules-dot {
    display:grid;place-items:center;
    flex:0 0 17px;width:17px;height:17px;
    font-size:12px;font-weight:900;
    border-radius:50%;background:#696e79;color:#18191d;
}
.staking-page .staking-highlight {
    padding:22px 8px 0;
    gap:2px;
}
.staking-page .staking-highlight-icon {
    width:148px;height:132px;
    margin:0 auto 7px;
    border-radius:0;
    background:radial-gradient(ellipse,#24a76f20,transparent 68%);
}
.staking-page .staking-highlight-icon .staking-machine-png {
    display:block;width:135px;height:135px;object-fit:contain;
}
.staking-page .staking-highlight h1 {
    color:#f7f7f8;
    font-size:clamp(22px,5.9vw,28px);
    font-weight:800;margin:0 0 7px;letter-spacing:-.025em;
}
.staking-apr-display {
    display:inline-flex;align-items:center;justify-content:center;
    gap:7px;color:#17e478;font-size:22px;font-weight:800;
}
.staking-apr-info {
    display:grid;place-items:center;
    width:17px;height:17px;padding:0;
    border-radius:50%;background:#1de476;color:#14271d;
    font-size:11px;font-weight:800;
}
.staking-page .staking-highlight p {
    color:#868b94;font-size:12px;line-height:1.45;
    max-width:265px;margin:9px auto 0;
}
.staking-page .staking-empty {
    border-radius:26px;background:#1f2023;
    border:1px solid #303138;
    padding:20px 20px 23px;
}
.staking-page .staking-empty-symbol {
    width:65px;height:65px;background:#303238;border-radius:19px;
    margin-bottom:2px;
}
.staking-page .staking-empty-symbol svg {width:29px;height:29px;color:#d5e4ef}
.staking-page .staking-empty h2 {font-size:18px;letter-spacing:-.02em}
.staking-page .staking-empty p {color:#91949a}
.staking-page .staking-deposit-button {
    min-height:48px;border-radius:27px;
    background:#fff;color:#151515;
    padding:10px 18px;gap:8px;
    box-shadow:none;
}
.staking-page .staking-deposit-button svg {width:19px;height:19px;color:#26313b}
.staking-page .staking-stats {
    background:#232326;border:1px solid #303036;border-radius:26px;padding:4px 16px;
}
.staking-page .staking-stat {padding:13px 0}
.staking-page .staking-stat b {font-size:13px}
.staking-page .staking-stat strong {font-size:13px}
.staking-page .staking-claim-card {
    background:#25262a;border:1px solid #36373c;border-radius:26px;
}
.staking-claim-icon {
    background:#273b31!important;border-radius:12px!important;
}
.staking-claim-icon svg {width:20px;height:20px;color:#a5e6bb}
.staking-page .staking-gift-grid {gap:10px}
.staking-page .stake-gift-card {background:#232326;border-color:#31323a}
.staking-page .stake-gift-card .stake-gift-art img {object-fit:contain}
.staking-page .stake-gift-card .stake-gift-art {border-radius:16px}

/* Four-step educational sheet. Product images rather than vector gift icons. */
.staking-tutorial-sheet {background:#202023!important;border-color:#45454a}
.staking-tutorial {gap:17px}
.staking-tutorial-art {border-radius:27px;height:clamp(198px,55vw,326px)}
.staking-tutorial-art.gift {
    background:radial-gradient(ellipse at 50% 33%,#55cc9a 0%,#146039 62%,#0e3e2c 100%);
}
.staking-tutorial-art.gift .staking-machine-png {
    width:min(72%,240px);
    height:90%;object-fit:contain;
    filter:drop-shadow(0 15px 20px #004f3830);
}
.staking-tutorial-art.deposit {
    background:radial-gradient(circle at 50% 45%,#ba43ec 0%,#8736bd 48%,#592b83 100%);
}
.staking-tutorial-art.deposit .staking-tutorial-deposit {
    display:grid;place-items:center;
    width:100%;height:100%;
    background:transparent;border:0;border-radius:0;
    padding:0;box-shadow:none;
}
.staking-tutorial-art.deposit .staking-tutorial-deposit svg {
    display:block;width:min(55%,210px);height:min(62%,220px);
    object-fit:contain;
    filter:drop-shadow(0 16px 13px #2b095047);
    transform:rotate(-8deg);
}
.staking-tutorial-art.activate .staking-tutorial-play {
    background:#20be73;
    box-shadow:0 12px 25px #20503d3b;
}
.staking-tutorial-art.limit .staking-tutorial-limit {
    background:#244b80d8;
}
.staking-tutorial h2 {letter-spacing:-.03em}
.staking-tutorial-next {background:#37383d}
@media(prefers-reduced-motion:reduce){
    .staking-page .staking-activate {transition:none}
}
html[data-crafter-theme="light"] .staking-page .staking-welcome h1,
html[data-crafter-theme="light"] .staking-page .staking-highlight h1 {color:#151a22}
html[data-crafter-theme="light"] .staking-page .staking-empty,
html[data-crafter-theme="light"] .staking-page .staking-claim-card,
html[data-crafter-theme="light"] .staking-page .staking-stats {background:#fff;border-color:#dfe2e8}
html[data-crafter-theme="light"] .staking-page .staking-empty h2,
html[data-crafter-theme="light"] .staking-page .staking-stat b {color:#252a33}
html[data-crafter-theme="light"] #app.staking-view > header > .staking-rules-button {background:#e9edf2;border-color:#d8dee6;color:#666c77}
html[data-crafter-theme="light"] #nav .games-entry {background:#fff;color:#414752;border-color:#d8dee6}

/* Top-layer toasts and a permanently visible staking picker action area. */
#toast {
  z-index: 2147483647;
  pointer-events: none;
  max-width: min(410px, calc(100vw - 24px));
  box-sizing: border-box;
  text-align: center;
}
#sheet.staking-picker-sheet[open] {
  position: fixed;
  inset: auto 0 0;
  display: flex !important;
  flex-direction: column;
  height: min(88dvh, 750px) !important;
  max-height: 88dvh !important;
  overflow: hidden;
  padding-bottom: 0;
}
#sheet.staking-picker-sheet .sheet-head {
  flex: none;
  padding-bottom: 10px;
}
#sheet.staking-picker-sheet #sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  display: flex;
  overflow: hidden;
}
#sheet.staking-picker-sheet .staking-picker {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#sheet.staking-picker-sheet .staking-picker-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#sheet.staking-picker-sheet .staking-picker-bottom {
  flex: none;
  position: relative;
  bottom: auto;
  z-index: 1;
  padding: 11px 0 calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #383b41;
}
#sheet.staking-picker-sheet .staking-picker-bottom .primary {
  display: block;
  min-height: 49px;
}
#sheet.staking-picker-sheet .staking-pick-error {
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
@media (max-height: 550px) {
  #sheet.staking-picker-sheet[open] {height: 94dvh !important;max-height:94dvh !important}
}

/* 2026-11-04 — compact game Hub highlight and overflow-safe mobile navigation.
   The *icon only* is selected, never the full-width Hub button. */
#nav {
  gap:3px;
  min-width:0;
}
#nav .nav-main {
  flex:1 1 0;
  min-width:0!important;
  max-width:100%;
  overflow:hidden;
  padding:3px!important;
}
#nav .nav-main > button {
  flex:1 1 0!important;
  width:0;
  min-width:0!important;
  max-width:100%;
  height:54px;
  min-height:54px;
  padding:1px!important;
  gap:2px!important;
  overflow:hidden;
  white-space:normal!important;
}
#nav .nav-main > button .nav-label {
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  font-size:clamp(9px,2.7vw,10px)!important;
  font-weight:700;
  letter-spacing:-.1px;
  line-height:1.06;
  text-align:center;
  overflow:hidden;
  text-overflow:clip;
  overflow-wrap:break-word;
  white-space:normal!important;
  text-wrap:balance;
}
#nav .games-entry {
  flex:0 0 clamp(44px,13.5vw,52px)!important;
  width:clamp(44px,13.5vw,52px)!important;
  height:clamp(44px,13.5vw,52px)!important;
  min-width:0;
  padding:0!important;
  gap:1px!important;
}
#nav .games-entry .nav-label {
  font-size:clamp(8px,2.4vw,9px);
  line-height:1.02;
  max-width:100%;
  overflow:hidden;
}
#nav .profile-nav {
  flex:0 0 clamp(46px,14vw,57px)!important;
  width:clamp(46px,14vw,57px)!important;
  height:clamp(46px,14vw,57px)!important;
  min-width:0;
}
/* Keep the two game tabs together and give Market and profile their own space. */
#nav.games-nav {
  justify-content:space-between;
  gap:clamp(8px, 3vw, 20px);
}
#nav.games-nav .nav-main {
  flex:0 1 clamp(132px, 43vw, 210px);
  gap:2px;
}
#nav.games-nav > .games-entry,
#nav.games-nav > .profile-nav {
  --games-side-size:clamp(49px, 15.5vw, 62px);
  flex:0 0 var(--games-side-size)!important;
  width:var(--games-side-size)!important;
  height:var(--games-side-size)!important;
}
#nav.games-nav > .games-entry .nav-label {
  font-size:clamp(9px, 2.75vw, 11px);
}
/* Highlight the active game inside its own tab. */
#nav.games-nav .nav-main > button.active {
  color:#7bc7ff!important;
  background:#17334c!important;
  border:1px solid #58adff6b!important;
  border-radius:26px!important;
  box-shadow:none!important;
}
/* Responsive on the very narrow Telegram mini-app viewport. */
@media(max-width:380px) {
  #nav {width:calc(100% - 16px);padding:4px;gap:2px}
  #nav .nav-main {padding:2px!important}
  #nav .nav-main > button {height:51px;min-height:51px;gap:1px!important}
  #nav .nav-main > button .stake-nav-icon {width:22px;height:23px;min-height:23px}
  #nav .nav-main > button .stake-nav-icon svg {width:21px;height:21px}
  #nav .nav-main > button .nav-label {
    font-size:clamp(8px,2.65vw,9.5px)!important;
    line-height:1.04;
    padding:0 1px;
  }

}
@media(max-width:325px) {
  #nav .games-entry {flex-basis:42px!important;width:42px!important;height:42px!important}
  #nav .profile-nav {flex-basis:43px!important;width:43px!important;height:43px!important}
  #nav .nav-main > button .nav-label {font-size:8px!important}
}
html[data-crafter-theme="light"] #nav.games-nav .nav-main > button.active {
  color:#1174c5!important;background:#d7ebff!important;border-color:#8dc9f5!important;
}

/* Small Crafter anvil icon integrated into referral progress without stretching. */
.portal-ref-heading>b{display:flex;align-items:center;gap:7px}
.portal-ref-heading .referral-mini-anvil,.portal-ref-heading b svg{
 width:18px;height:18px;flex:0 0 18px;object-fit:contain
}
.portal-ref-grid .ref-label{display:inline-flex;align-items:center;gap:7px}
.portal-ref-grid .referral-mini-anvil,.portal-ref-grid .ref-label svg{
 width:17px;height:17px;flex:0 0 17px;object-fit:contain
}