/* Stick Kombact v0.81.13 - Page Shell condiviso, cleanup finale */
:root{
  --sk-page-header-height-desktop:54px;
  --sk-page-header-height-compact:42px;
  --sk-page-back-size-desktop:36px;
  --sk-page-back-size-compact:31px;
  --sk-page-counter-height-desktop:32px;
  --sk-page-counter-height-compact:27px;
  --sk-page-counter-gap-desktop:8px;
  --sk-page-counter-gap-compact:5px;
  --sk-page-nav-height-desktop:42px;
  --sk-page-nav-height-compact:34px;
  --sk-page-content-padding-x-desktop:14px;
  --sk-page-content-padding-y-desktop:12px;
  --sk-page-content-padding-x-compact:8px;
  --sk-page-content-padding-y-compact:7px;
  --sk-page-content-max:1040px;
  --sk-page-rail-width:clamp(160px,22vw,238px);
  --sk-page-rail-width-compact:clamp(116px,25vw,165px);
  --sk-page-rail-gap-desktop:10px;
  --sk-page-rail-gap-compact:6px;
  --sk-page-title-color:#fde68a;
  --sk-page-subtitle-color:#94a3b8;
}

/*
 * PAGE SHELL - contratto strutturale comune.
 * Tutte le pagine target usano la geometria comune. La v0.81.13 rimuove
 * gli ultimi override legacy e mantiene il Page Shell come unica fonte per
 * header, Back, contatori, navigazione e geometria responsive.
 */
.sk-page-shell{
  --sk-page-accent:var(--sk-page-title-color);
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
}
.sk-page-shell[hidden],
.sk-page-shell.is-hidden{display:none!important}
.sk-page-shell--content,
.sk-page-shell--tabs,
.sk-page-shell--rail{
  min-width:0;
  min-height:0;
}

.sk-page-nav{
  flex:0 0 auto;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
}

.sk-page-tabs{
  flex:0 0 auto;
  min-width:0;
  min-height:var(--sk-page-nav-height-desktop);
  box-sizing:border-box;
  display:flex;
  align-items:stretch;
  gap:6px;
  padding:7px 10px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sk-page-tabs--fill .sk-page-tab{flex:1 1 0;min-width:0}
.sk-page-tabs--scrollable{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.sk-page-tabs--scrollable .sk-page-tab{flex:0 0 auto}
.sk-page-tab{
  min-width:0;
  min-height:28px;
  padding:7px 10px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.045);
  color:#bbb;
  font:inherit;
  font-size:10px;
  font-weight:900;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
.sk-page-tab.active,
.sk-page-tab[aria-selected="true"]{
  color:#fff;
  border-color:var(--sk-page-tab-accent,var(--sk-page-accent,#00d2ff));
  background:var(--sk-page-tab-active-bg,rgba(0,210,255,.13));
  box-shadow:0 0 12px var(--sk-page-tab-active-shadow,rgba(0,210,255,.18));
}
.sk-page-tab:focus-visible{outline:2px solid #67e8f9;outline-offset:2px}

.sk-page-body{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:
    var(--sk-page-content-padding-y-desktop)
    max(var(--sk-page-content-padding-x-desktop),env(safe-area-inset-right))
    max(var(--sk-page-content-padding-y-desktop),env(safe-area-inset-bottom))
    max(var(--sk-page-content-padding-x-desktop),env(safe-area-inset-left));
}
.sk-page-content{
  width:min(100%,var(--sk-page-content-max));
  min-width:0;
  box-sizing:border-box;
  margin:0 auto;
}

.sk-page-rail-layout{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:var(--sk-page-rail-width) minmax(0,1fr);
  gap:var(--sk-page-rail-gap-desktop);
  padding:
    var(--sk-page-content-padding-y-desktop)
    max(var(--sk-page-content-padding-x-desktop),env(safe-area-inset-right))
    max(var(--sk-page-content-padding-y-desktop),env(safe-area-inset-bottom))
    max(var(--sk-page-content-padding-x-desktop),env(safe-area-inset-left));
  box-sizing:border-box;
  overflow:hidden;
}
.sk-page-rail{
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.sk-page-rail-layout>.sk-page-body{height:100%}

/* Shell comune: le colonne laterali restano simmetriche, quindi il titolo e' centrato geometricamente. */
.sk-page-header{
  position:relative;
  flex:0 0 auto;
  width:100%;
  min-width:0;
  min-height:var(--sk-page-header-height-desktop);
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(44px,1fr) minmax(0,auto) minmax(44px,1fr);
  align-items:center;
  gap:8px;
  margin:0;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(8,9,15,.97);
}
.sk-page-header-left{
  grid-column:1;
  min-width:0;
  justify-self:start;
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
}
.sk-page-header-center{
  grid-column:2;
  min-width:0;
  max-width:min(48vw,580px);
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-align:center;
}
.sk-page-header-right{
  grid-column:3;
  min-width:0;
  max-width:100%;
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:max(0px,env(safe-area-inset-right));
}
.sk-page-title{
  display:block;
  max-width:100%;
  margin:0;
  color:var(--sk-page-accent);
  font-size:18px;
  line-height:1.05;
  font-weight:1000;
  letter-spacing:1px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sk-page-subtitle{
  display:block;
  max-width:100%;
  margin:0;
  color:var(--sk-page-subtitle-color);
  font-size:10px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.25px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sk-page-subtitle:empty{display:none}
.sk-page-back{
  flex:0 0 auto;
  width:var(--sk-page-back-size-desktop);
  height:var(--sk-page-back-size-desktop);
  min-width:var(--sk-page-back-size-desktop);
  min-height:var(--sk-page-back-size-desktop);
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.sk-page-back:hover{background:rgba(255,255,255,.13)}
.sk-page-back:active{transform:scale(.97)}
.sk-page-back:focus-visible{outline:2px solid #67e8f9;outline-offset:2px}

.sk-page-counters{
  min-width:0;
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sk-page-counter-gap-desktop);
  white-space:nowrap;
}
.sk-counter{
  height:var(--sk-page-counter-height-desktop);
  min-width:0;
  box-sizing:border-box;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#f8fafc;
  font-size:11px;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
}
.sk-counter-icon{flex:0 0 auto;font-size:1.05em;line-height:1}
.sk-counter-value{flex:0 0 auto;color:inherit;font-size:1.03em;font-weight:1000;font-variant-numeric:tabular-nums}
.sk-counter-label{flex:0 0 auto;color:rgba(255,255,255,.72);font-size:.88em;font-weight:850;letter-spacing:.2px}
.sk-counter.tokens{color:#f1c40f;border-color:rgba(241,196,15,.28);background:rgba(241,196,15,.08)}
.sk-counter.crystals{color:#67e8ff;border-color:rgba(103,232,255,.25);background:rgba(103,232,255,.07)}
.sk-counter.pp{color:#ffd869;border-color:rgba(255,216,105,.32);background:rgba(255,216,105,.08)}


/* Migrazione delle pagine esistenti al template comune completata. */


@media (pointer:coarse),(max-width:900px){
  .sk-page-tabs{
    min-height:var(--sk-page-nav-height-compact);
    gap:4px;
    padding:5px 7px;
  }
  .sk-page-tab{min-height:24px;padding:5px 7px;font-size:10px}
  .sk-page-body{
    padding:
      var(--sk-page-content-padding-y-compact)
      max(var(--sk-page-content-padding-x-compact),env(safe-area-inset-right))
      max(var(--sk-page-content-padding-y-compact),env(safe-area-inset-bottom))
      max(var(--sk-page-content-padding-x-compact),env(safe-area-inset-left));
  }
  .sk-page-rail-layout{
    grid-template-columns:var(--sk-page-rail-width-compact) minmax(0,1fr);
    gap:var(--sk-page-rail-gap-compact);
    padding:
      var(--sk-page-content-padding-y-compact)
      max(var(--sk-page-content-padding-x-compact),env(safe-area-inset-right))
      max(var(--sk-page-content-padding-y-compact),env(safe-area-inset-bottom))
      max(var(--sk-page-content-padding-x-compact),env(safe-area-inset-left));
  }
  .sk-page-header{
    min-height:var(--sk-page-header-height-compact);
    grid-template-columns:minmax(35px,1fr) minmax(0,auto) minmax(35px,1fr);
    gap:5px;
    padding:4px 0;
  }
  .sk-page-header-center{max-width:min(43vw,390px);gap:1px}
  .sk-page-header-left{margin-left:0;padding-left:0}
  .sk-page-title{font-size:14px;letter-spacing:.65px}
  .sk-page-subtitle{font-size:10px;letter-spacing:.1px}
  .sk-page-back{
    width:var(--sk-page-back-size-compact);
    height:var(--sk-page-back-size-compact);
    min-width:var(--sk-page-back-size-compact);
    min-height:var(--sk-page-back-size-compact);
    font-size:14px;
  }
  .sk-page-counters{gap:var(--sk-page-counter-gap-compact)}
  .sk-counter{
    height:var(--sk-page-counter-height-compact);
    gap:4px;
    padding:0 7px;
    font-size:10px;
  }
  .sk-counter-label{display:none}

}

/* Su desktop (puntatore fine) i contatori restano sempre landscape expanded, anche con viewport stretta. */
@media (pointer:fine){
  .sk-page-counters{gap:var(--sk-page-counter-gap-desktop)}
  .sk-counter{
    height:var(--sk-page-counter-height-desktop);
    gap:6px;
    padding:0 11px;
    font-size:11px;
  }
  .sk-counter-label{display:inline}
}

@media (max-height:430px) and (orientation:landscape){
  .sk-page-header{min-height:40px}
  .sk-page-title{font-size:13px}
  .sk-page-subtitle{font-size:10px}
  .sk-counter{height:26px;padding-left:6px;padding-right:6px}
}

@media (prefers-reduced-motion:reduce){
  .sk-page-back:active{transform:none}
}