*{ box-sizing:border-box; }
html, body { height:100%; margin:0; }

html {
  -webkit-text-size-adjust: 100%;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 18px;
  background: var(--bg);
  color: var(--text);

  /* Critical: stop whole-page scroll/bounce */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 8px;
}

.mood-sheet .inner:focus {
  outline: none;
}

button {
  font: inherit;
  color: inherit;
}

.subtle-state{
  color:var(--accent);
}

.feel-title{
  opacity: 0;
  transform: translateX(360px);
  animation: journeyImageIn 840ms ease-in forwards;
  animation-delay: 80ms;
  text-align: center;
}

.icon-btn{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:flex;
  position: relative;
  overflow: hidden;
  align-items:center;
  justify-content:center;
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--control-text);

  cursor:pointer;
  box-shadow:
    0 4px 0px rgba(0,0,0,0.12),
    inset 0 -2px 0 rgba(255,255,255,0.25);
  /*transition: box-shadow 0.15s ease, filter 0.15s ease;*/
}

.icon-btn{
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 120ms ease;
}

/* the highlight layer */
.icon-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--control-highlight);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

/* pressed */
.icon-btn:active::after{
  opacity: 1;
}

/* Pressed (touch + click) + slightly darken border on press */
.icon-btn:active{
  border-color: var(--shadow-soft);
  transform: scale(0.96);
}

/* Hover (desktop only — won’t affect touch devices) */
@media (hover: hover){
  .icon-btn:hover{
    background: var(--control-hover-bg);
    border-color: var(--control-hover-border);
    box-shadow: 0 6px 16px var(--control-hover-shadow);
  }
}

/* Keyboard focus */
.icon-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(100,150,255,.25);
}

/* Icon system (shared) */
.icon-btn svg{
  width: 30px;
  height: 30px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn.refresh-btn{
  background: var(--active);
  width:40px;
  height:40px;
  flex:0 0 auto;
  box-shadow:
   var(--control-hover-shadow) 0px 2px 0px,
   var(--control-highlight) 0px -2px 0px inset;
}

/* slightly lighter for refresh only */
.icon-btn svg.icon-refresh{ stroke-width: 2.2; }

.icon-refresh{
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1);
}

.icon-refresh.spin{
  transform: rotate(180deg);
}

.icon-btn.fav-btn.fav-on{
  background: var(--active);
}
.icon-btn.fav-btn.fav-on svg{
  color: white;
}
.icon-btn.fav-btn svg {
  color: var(--active)
}
.icon-btn.fav-on {
  transform: scale(1.05);
}
.fav-btn{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}
.app{
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

/* Header */
.app-header{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .2rem .6rem;
  background: linear-gradient(135deg, var(--iris-1), var(--iris-2), var(--iris-3));
  color: #fff;
  position: relative;
}

.header-spacer{
  width: 44px;
  height: 38px;
  flex: 0 0 44px;
}

.header-center{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
}

.brand{
  font-weight: 900;
  letter-spacing: .25px;
  text-align:center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80vw;
  transition: transform 180ms ease, opacity 180ms ease;
}

.brand.title-swap{
  transform: translateY(-4px);
  opacity: 0.35;
}

.brand.is-clickable{
  cursor: pointer;
  border-radius: 12px;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.brand.is-clickable:hover{
  border: 2px solid white;
  border-radius: 14px;
  padding: 0 .35rem;
  transform: scale(1.1);
  transform: scale(1.03);
}

.brand.is-clickable:active{
  transform: scale(1.1);
  transform: scale(1.02);
  opacity: 0.7;
  opacity: 0.9;
  /*border: 2px solid white;
  border-radius: 14px;
  padding: 0 .35rem;*/
}

@media (prefers-reduced-motion: reduce){
  .brand.is-clickable{
    transition: none;
  }
}

/*-----If IOS is still a little bitch add-----*/
/*.brand.is-clickable,
.brand.is-clickable *{
  -webkit-user-select: none;
  user-select: none;
}*/

.about-inner {
  max-width: 560px;
}

.about-links {
  display: grid;
  gap: 0.75rem;
}

.theme-btn{
  border: 0;
  background: rgba(255,255,255,.16);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 32px;
  font-size: 20px;
  font-weight: 800;
}

.theme-btn:active{
  transform: translateY(1px);
}

.theme-btn:focus-visible{
  outline:3px solid var(--ring);
  outline-offset: 3px;
}

/* Main scrolling region */
.app-main{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  --main-pad: .5rem;
  padding: var(--main-pad);
  width: 100%;
  max-width: 1200px;
  margin: auto;

}
@media (min-width: 640px){
  .app-main{
    --main-pad: 1rem;
    padding: var(--main-pad);
  }
}

/* Bottom bar (fixed, prevents “giant home button” bugs) */
.app-bottom{
  flex: 0 0 auto;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-right: calc(1.75rem + env(safe-area-inset-right));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  padding-left:calc(1.75rem + env(safe-area-inset-left));

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  background: linear-gradient(135deg, var(--iris-1), var(--iris-2), var(--iris-3));
  color: var(--text);
}

#btnBack {
  svg {
    margin-right: 8px;
  }
}
.btnBack{
  width:42px;
  height:42px;
  border-radius:10px;
  padding-left:2px;
}
.btnHome{
  width:42px;
  height:42px;
  border-radius:10px;
}

/* Journey styles */
.journey-screen{
  padding-bottom:8rem;
}

.journey-intro-card {
  margin-bottom: 1rem;
  padding: 1rem;
  font-weight: 650;
  font-size: 1.08rem;
}

.journey-item-btn{
  padding: .9rem;
  margin-bottom: .75rem;
}

.journey-item-title{
  margin: .2rem 0 .7rem;
}

.journey-step-kicker {
  margin: 0 0 1rem;
  width:100px;
  @media (min-width:460px){
    width:140px;
  }
}

.journey-intro-line {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.journey-intro-progress {
  font-size: 0.85rem;
  opacity: 0.65;
}

.journey-relax .journey-intro-card,
.journey-support .journey-intro-card,
.journey-engage .journey-intro-card {
  border-radius: 18px;
}

.journey-step-header{
  transition: margin-bottom 180ms ease, background-color 180ms ease;
  h2 {
    margin: .2rem 0 .5rem;
  }
}

.bigbtn.journey-step-header{
  background: linear-gradient(135deg, #88ccee82, #44aa9987, #33228880);
  padding: .75rem 1rem;
}

.journey-step-header-main{
  display:flex;
  align-items:center;
  h3{
    font-size: 1.1rem;
  }
}

.journey-step-tools{
  display:flex;
  align-items: center;
  gap: 8px;
}

.journey-step-body .card-grid{
  grid-template-columns: repeat(auto-fit, minmax(120px, 170px));
}

.journey-step-card.is-expanded > .journey-step-header {
  margin-bottom: 1.25rem;
}

/*.journey-complete-card{
  margin-bottom: 12rem;
}*/

.journey-sheet-top{
  display: grid;
  grid-template-columns: 1fr 160px; /* ~25% feel without being too large */
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.journey-sheet-text{
  text-align: center;
  h2{
    margin: 0 0 0.75rem;
  }
  p{
    margin: 0;
  }
}

.journey-sheet-media{
  width: 100%;
}

.journey-sheet-media img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;

  opacity: 0;
  transform: translateX(10px);
  animation: journeyImageIn 240ms ease-out forwards;
  animation-delay: 60ms;
}

@keyframes journeyImageIn{
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile stack */
@media (max-width: 420px){
  .journey-sheet-top{
    grid-template-columns: 1fr 90px;
  }
  /*.journey-sheet-top{
    grid-template-columns: 1fr;
  }

  .journey-sheet-media{
    order: -1;
  }*/
}

.journey-complete-top{
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.journey-complete-text h2{
  margin: 0 0 0.5rem;
}

.journey-complete-text p{
  margin: 0;
}

.journey-complete-media img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;

  opacity: 0;
  transform: translateX(10px);
  animation: journeyImageIn 240ms ease-out forwards;
  animation-delay: 60ms;
}

.bigbtn.primary-btn{
  text-align: center;
  margin-bottom:.75rem;
  appearance: none;
  -webkit-appearance: none;  
}

.bigbtn.close-btn{
  margin-top:2rem;
}
.j-sheet-emoji {
  display: none;
}

.inner.journey-inner{
  min-height: 0 !important;
  .journey-actions{
    margin-top:3rem;
  }
}

.journey-step-chevron{
  position: absolute;
  top: 49%;
  left: 36px;
  font-size: 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .journey-step-header,
  .journey-step-body,
  .journey-step-chevron {
    transition: none;
  }
  .journey-sheet-media img{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.pill{
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--control-text);
  border-radius: 18px;
  padding: .95rem 1rem;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow:
    0 4px 0px rgba(0,0,0,0.12),
    inset 0 -2px 0 rgba(255,255,255,0.25);
}

.pill.primary{
  background: var(--active);
  color: #fff;
  border-color: transparent;
}

.pill:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.pill, .bigbtn, .icon-btn{
  transition: transform 120ms ease, filter 120ms ease;
  will-change: transform;
  touch-action: manipulation;
}

.pill:active{
  transform: translateY(1px) scale(0.99);
  filter: brightness(0.97);
}

/* Cards + buttons */
.card{
  background: var(--surface);
  border:1px solid var(--control-border);
  border-radius: 18px;
  --card-pad: .75rem;
  padding: var(--card-pad);
  box-shadow: 0 6px 7px var(--shadow-soft);
}
@media (min-width: 640px){
  .card{
    --card-pad: 1rem;
    padding: var(--card-pad);
  }
}
.card.test-bckgrnd {
  background: url(/assets/images/background.png);
}

h2{ font-size: 1.25rem; margin: .2rem 0 1rem; }

.grid{ display:grid; gap:.9rem; }

/* === Games Hub === */
.games-cats{
  position: sticky;
  top: calc(var(--main-pad) * -1); /* cancels .app-main padding-top */
  z-index: 5;
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--shadow-soft);
  gap:.5rem;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--control-border);
  background: var(--surface);
  display:flex;
  margin-bottom: 1rem;
  padding: var(--main-pad, 1rem);
  scroll-snap-type: x mandatory;
  /* Cancel the card’s horizontal padding so sticky spans full width */
  margin: 0 -var(--card-pad, 1rem);
}
.games-cats::-webkit-scrollbar{ display:none; }

.games-cats :first-child {
  margin-left: .6rem;
}
.games-cats :last-child {
  margin-right: .6rem;
}

.cat-chip{
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.12);
  background: var(--control-bg);
  color: var(--text);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-weight: 900;
  font-size: .95rem;
  scroll-snap-align: start;
}

.cat-chip.active{
  background: var(--active);
  border-color: transparent;
  color: #fff;
}
.cat-chip:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.games-cats + .games-grid{
  margin-top: 1rem;
}

.games-hub{
  background: rgba(34, 136, 128, 0.1);
}

.games-head{
  display: flex;
  justify-content: flex-end;
  margin-bottom: .75rem;
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  /*grid-template-columns: repeat(auto-fit, 160px);*/
  gap: .9rem;
  margin-top: 1rem;
  /* Prevent giant cards on wide screens 
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;*/
  justify-content: center;
  width: 100%;
  @media (max-width:520px){
    grid-template-columns: repeat(2, minmax(80px, 220px));
    margin-left: auto;
    margin-right: auto;
  }
  @media (max-width:300px){
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.card-tile{
  position: relative;
}

.card-btn{
  width:100%;
  height:100%;
  position: relative;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  border-radius: 18px;
  padding: .5rem;
  text-align: left;
  box-shadow:
    0 4px 0px var(--control-border),
    inset 0 -2px 0 var(--control-highlight);
}
.card-btn:active{
  transform: translateY(1px);
}

.card-fav.fav-on{
  color: #e14b5a;
}
/* Games hub list-mode uses shared item rows; make the grid behave */
.card-grid.as-list{
  display: grid;
  gap: .6rem;
}

/* Ensure media box controls sizing */
.card-media{
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,.06);
  display: grid;
  place-items: center;
}

/* 4:3 media on category tiles */
.card-grid.media-4x3 .card-media{
  aspect-ratio: 4 / 3;
}

/* Make BOTH image and fallback fill the media box */
.card-media > .card-thumb{
  width: 100%;
  height: 100%;
  display: block;
}

/* Only images should use object-fit */
img.card-thumb{
  object-fit: cover;
  display: block;
}

/* Center the fallback letter */
.card-thumb.fallback{
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.8rem;
  color: rgba(0,0,0,.55);
}

/* Favorite overlay */
.card-fav{
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.75);
  svg {
    stroke: var(--shadow-strong);
  }
}
.card-fav:hover{
  opacity: .9;
}
.card-title{
  text-align: center;
  margin-top: .65rem;
  font-weight: 850;
  line-height: 1.15;
  font-size: 1.02rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 420px){
  .app-main {
    padding: 0;
  }
  .card>.mood-wrap{
    padding: 0;
    margin: 0;
  }
  .games-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
  .game-card{
    border-radius: 16px;
    padding: .75rem;
  }
  .game-fav{
    top: .55rem;
    right: .55rem;
    width: 40px;
    height: 40px;
  }
  .card, .mini-card{
    border-radius: 0;
  }
  /* Slightly scale down spacing */
  .bigbtn{
    padding: .95rem .85rem;
    border-radius: 16px;
    font-size: 1.0rem;
  }
  .item-grid{
    grid-template-columns: 48px minmax(0, 1fr);
    gap: .75rem;
  }
  .mini-card .mini-grid{
    grid-template-columns: 1fr;
  }
  .row-title{
    font-size: 1.02rem;
    gap: .5rem;
  }
  .row-sub{
    margin-top: .25rem;
    font-size: .85rem;
  }
  .badge{
    font-size: .78rem;
    padding: .14rem .5rem;
  }
  /* 🔹 2-line clamp only on small phones */
  @supports (-webkit-line-clamp: 2){
    .title-text{
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
  .mood-sheet .inner {
    padding:.75rem .25rem !important;
    margin: 0 2px 20px !important;
  }
  .mood-sheet .sec{
    overflow: auto;
  }
}

.note{
  color: var(--text-muted);
  font-weight: 650;
  line-height: 1.35;
}

/* Mood row */
.mood-wrap{
  display:flex;
  margin: .75rem 0 1rem;
  padding: .25rem 0;
  flex-wrap: wrap;
  align-items:center;
  gap: 5px;
  justify-content:space-evenly;
  @media (min-width: 720px){
    justify-content: space-evenly;
    gap: clamp(.25rem, 2.5vw, 1.5rem);
  }
}

.mood-btn:hover{
  box-shadow:
    0 2px 4px var(--control-hover-shadow),
    inset 0 -1px 0 var(--control-bg);
}
.mood-btn{
  flex: 0 0 auto;
  width: 60px;
  height: 76px;
  border: 0;
  background: transparent;
  padding: .25rem;
  /*font-size: clamp(1.5rem, 10vw, 6.5rem);
  line-height: 1;*/
  border-radius: 10px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}
.mood-icon{
  width: 52px;
  height: 56px;
  pointer-events: none;
  padding: .35rem .25rem;
}

.mood-btn span{
  font-size:14px;
  margin: .25rem 0;
}

@media (max-width:360px) {
  .mood-btn{
    width: 53px;
    height: 68px;
    border-radius: 12px;
  }
  .mood-icon{
    width: 44px;
    height: 44px;
    padding: .35rem;
  }
}
@media (min-width:420px) {
  .mood-btn{
    width: 70px;
    height: 86px;
  }
  .mood-icon{
    width: 64px;
    height: 64px;
    padding: .35rem;
  }
}
@media (min-width:580px){
  .mood-btn{
    width: 84px;
    height: 102px;
    border-radius: 12px;
  }
  .mood-icon{
    width: 78px;
    height: 78px;
    padding: .5rem;
  }
}
@media (min-width: 720px) {
  .mood-btn {
    width: 110px;
    height: 126px;
    border-radius: 18px;
  }
  .mood-icon {
    width: 100px;
    height: 100px;
    padding:.5rem;
  }
}

.mood-sheet .mood-wrap{
  justify-content: space-between;
  gap: .25rem;
  margin: .75rem 0;
}

.mood-sheet .mood-btn{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: var(--control-bg);
  border: 1px solid var(--control-hover-shadow);
  box-shadow: 0 2px 4px var(--shadow-soft);*/
  @media (max-width:440px) {
    border-radius: 999px;
    height: 45px;
    width: 45px;
  }
}

.mood-sheet .mood-btn .mood-icon{
  width: 60px;
  height: 60px;
  pointer-events: none;
  padding:.3rem;
  @media (max-width:440px) {
    width: 40px;
    height: 40px;
  }
}

.mood-btn:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 4px;
}
.mood-btn.selected{
  background: rgba(136,204,238,.32);
  box-shadow: inset 0 0 0 2px rgba(136,204,238,.35);
}

.mood-sheet{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  opacity: 0;
  pointer-events: none;
  /*backdrop-filter: blur(2px);*/
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    opacity 220ms ease,
    backdrop-filter 220ms ease,
    -webkit-backdrop-filter 220ms ease;

  z-index: 1000;
}

.mood-sheet .content{
  overflow: auto;
}

.mood-sheet.open{
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mood-sheet .inner{
  width: 100%;
  max-width: 520px;
  margin: 0 12px 20px;
  background: var(--bg);
  border-radius: 20px;
  padding: 18px;
  border: 1px solid var(--control-border);
  box-shadow: 0 12px 28px var(--shadow-soft);
  transform: translateY(20px) scale(.985);
  opacity: .96;

  transition:
    transform 240ms cubic-bezier(.22, .8, .24, 1),
    opacity 200ms ease,
    box-shadow 240ms ease;

  min-height: 80vh;
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mood-sheet.open .inner{
  transform: translateY(0) scale(1);
  opacity: 1;
  box-shadow: 0 24px 56px var(--shadow-strong);

}

.mood-sheet .title{
  display: none;
  font-weight: 800;
  margin-bottom: .4rem;
}

.mood-sheet .text{
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 18px;
  line-height: 1.45;
  opacity: .9;
}

.mood-sheet .close{
  color: var(--control-active-text);
  font-size: 14px;
  margin-top: 2rem;
  width: 100%;
  padding: .9rem;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid var(--ring);
  background: var(--control-bg);
/* Continue button should stay visible and not scroll away */
  flex: 0 0 auto;
}

/* Content wrapper inserted by updated showMoodSheet() */
.mood-sheet .content{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* Four sections stack */
.mood-sheet .sections{
  display: grid;
  gap: 1rem;
}

/* Section title + desc */
.mood-sheet .sec-title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: .35rem;
}

.mood-sheet .sec{
  font-weight: 650;
  line-height: 1.4;
  border: 1px solid var(--control-border);
  border-radius: 16px;
  padding: .9rem 1rem;
  background: var(--control-bg);
  opacity: .92;
  .mood-wrap>.mood-btn{
    font-size: clamp(1.5rem, 10vw, 3.5rem);
  }
}

.sec-link{
  margin-top: .7rem;
}

.sec-pill{
  display: inline-flex;
  align-items: center;
  padding: .25rem .8rem;
  border-radius: 999px;
  border:1px solid var(--control-border);
  background: var(--control-bg);
  color: inherit;
  text-decoration: none;
  font-weight: 650;
  font-size: .92rem;
  box-shadow: 0 6px 16px var(--control-hover-shadow);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.sec-pill:hover{
  background: rgba(255,255,255,.60);
}

.sec-pill:active{
  transform: translateY(1px);
}

/* Info sections: subtle left accent */
.mood-sheet .sec.info, .callout-blue{
  border-left: 5px solid rgba(90, 130, 255, .45);
}

.mood-sheet .sec.concern, .callout-orange{
  border-left: 4px solid rgba(255, 120, 0, .85);
}

.mood-sheet .sec.warn, .callout-red{
  border-left: 4px solid rgba(255, 60, 60, .9); padding-left: 10px;
}

.gradiant-border{
  border-radius: 14px;
  border: transparent 6px solid;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, red, orange) border-box;
}

/* Pinboard/message-board vibe (no heart badge, no images needed) */
/* Pinboard section = outer board */
.mood-sheet .sec.pinboard{
  position: relative;
  border-radius: 20px;
  padding: 1.1rem;
  border-left: 5px solid rgb(87 32 204 / 45%);
  .sec-title{
    display: none;
  }
}

.mood-sheet .pin-note{
  text-align: center;
  min-height: 120px;
  place-content: center;
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgb(0 0 0 / 13%);
  background: radial-gradient(180px 80px at 12% 0%, rgb(81 6 242 / 15%), rgba(200, 220, 255, 0) 60%),
  linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgb(249 245 255 / 96%));  
  box-shadow: 0 14px 34px var(--shadow-soft);
  @media (min-width:360px){
    margin: 0 4vw;
  }
    /*for blue color=background:
    radial-gradient(120px 80px at 25% 0%, rgba(200,220,255,.55), rgba(200,220,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,250,255,.92));
    Or Just
    linear-gradient(80deg, rgb(126 74 197 / 42%), rgba(245, 250, 255, .92))
    */
}

.mood-sheet .pin-note::before{
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), #4d290c);
  box-shadow: 0 2px 8px var(--shadow-soft);
  opacity: .95;
}

.mood-sheet .pin-note .pin-msg{
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: .1px;
  margin: 0;
  color: darkslategrey;
  font-family: serif;
  font-style: italic;
}

/* Breadcrumb orientation hints */
.breadcrumb{
  color: var(--muted);
  font-weight: 800;
  font-size: .98rem;
  margin: -0.25rem 0 0.85rem;
}
/* Viewer: full height, no internal header 
.viewer{
  height: calc(100dvh - 88px - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
  background: #fff;
}*/
/*.viewer{
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  position: relative;
  min-height: 50vh;
}

.viewer iframe{
  width:100%;
  height:100%;
  border:0;
}*/

.viewer-loading{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  transition: opacity .18s ease;
}

.viewer-loading.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.viewer-loadingInner{
  display:flex;
  gap:.6rem;
  align-items:center;
}

.spinner{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.45);
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .app-main.screen-anim{ animation: none; }
  .spinner{ animation: none; }
  .viewer-loading{ transition: none; }
  .icon-btn{ transition: background-color 160ms ease, border-color 160ms ease; }
  .icon-btn:active{ transform: none; }
  .icon-btn::after{ transition: none; }
  .icon-refresh{ transition: none; }
  .mood-sheet,
  .mood-sheet .inner{
    transition: none;
  }
}

/* -----------------------------
   Viewer mode shell
-------------------------------- */

.app.viewer-mode .app-header {
  display: none !important;
}

.app.viewer-mode .app-main {
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  overscroll-behavior: none;
}

.app.viewer-mode .viewer {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg, #000);
}

.app.viewer-mode .viewer iframe[data-frame] {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -----------------------------
   Portrait:
   keep app-bottom visible
   hide floating overlay
-------------------------------- */

@media (orientation: portrait) {
  .app.viewer-mode .app-main {
    height: calc(100dvh - var(--bottom-h, 56px) - env(safe-area-inset-bottom));
    min-height: calc(100dvh - var(--bottom-h, 56px) - env(safe-area-inset-bottom));
  }

  .viewer-back-overlay {
    display: none !important;
  }
}

/* -----------------------------
   Landscape:
   hide app-bottom
   show floating overlay
-------------------------------- */

@media (orientation: landscape) {
  .app.viewer-mode .app-bottom,
  .app.viewer-mode footer {
    display: none !important;
  }

  .app.viewer-mode .app-main {
    height: 100dvh;
    min-height: 100dvh;
  }

  .viewer-back-overlay {
    position: fixed;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    z-index: 9999;

    width: 50px;
    height: 50px;
    border-radius: 14px;
    border: 1px solid var(--control-highlight);

    display: grid;
    place-items: center;

    margin-bottom: 5px;
    background: rgba(20, 28, 36, 0.72);
    color: white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    cursor: pointer;
  }

  .viewer-back-overlay:active {
    transform: scale(0.98);
  }
}

/* -----------------------------
   Reduced motion
-------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .viewer-back-overlay {
    transition: none;
  }
}

.app-main.screen-anim{
  animation: t4lFadeSlide 180ms ease-out both;
}

@keyframes t4lFadeSlide{
  from{ opacity: .01; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.section-title{
  font-weight: 900;
  margin: 0 0 .6rem;
  font-size: 1.05rem;
}

.row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px; /* main button + fixed fav */
  align-items: center;
  gap: .9rem;
  width: 100%;
}

.bigbtn{
  width: 100%;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  border-radius: 18px;
  padding: 1.15rem 1rem;
  text-align: left;
  font-weight: 850;
  font-size: 1.08rem;
  line-height: 1.15;
  box-shadow:
    0 4px 0px var(--shadow-soft),
    inset 0 -2px 0 var(--control-highlight);
}
.bigbtn.narrow {
  padding:.4rem;
  .thumb {
    border-radius: 14px;
  }
}
.bigbtn small{
  display:block;
  margin-top:.4rem;
  color: var(--muted);
  font-weight: 650;
}

.bigbtn .row{
  display: block; /* safety fallback */
}

/* Inner layout inside bigbtn */
.item-grid{
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  width: 100%;
}

/* --- Thumb polish (square thumbs) --- */
.thumb{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border:1px solid var(--control-border);
  box-shadow:
    0 2px 6px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.thumb img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Glass highlight */
.thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.20),
    rgba(255,255,255,.06) 30%,
    rgba(255,255,255,0) 60%
  );
  pointer-events: none;
}

.item-grid-43{
  grid-template-columns: 76px minmax(0, 1fr);
}
/* 4:3 thumb box */
.thumb-43{
  width: 100%;
  min-width: 76px;;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Cover images */
.thumb-43 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* subtle sheen on cards too */
.thumb-43::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.06) 30%,
    rgba(255,255,255,0) 62%
  );
  pointer-events:none;
}

/* Content column */
.row-main{
  min-width: 0; /* required for ellipsis in grid */
}

/* Title row: title left, badge pinned right */
.row-title{
  color: var(--text);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: .6rem;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: 1.15;
  margin: 0;
}

/* Title text clamps nicely */
.title-text{
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* use 2-line clamp below if you prefer */
}
.title-text.title-wrap {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-sub{
  margin-top: .35rem;
  color: var(--text-muted);
  font-weight: 750;
  font-size: .95rem;
  letter-spacing: .02em;
}

/* Badge: sits at right, doesn't wrap */
.badge{
  justify-self: end;
  white-space: nowrap;
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  border:1px solid var(--control-border);
  font-weight: 850;
  font-size: .85rem;
  color: rgba(0,0,0,.70);
  background: rgba(255,255,255,.8);
}

/* Home page mini grid: 2 columns by default */
.mini-grid{
  display:grid;
  gap:.75rem;
}

.mini-grid .bigbtn{
  padding:.25rem;
}
.mini-grid .game-card{
  padding: .85rem;
}

.mini-grid .game-title{
  margin-top: .6rem;
  font-size: 1rem;
}

.mini-grid .row-sub{
  margin-top: .25rem;
  font-size: .85rem;
  opacity: .75;
}

.mini-card{
  border:1px solid var(--control-border);
  background: var(--surface);
  box-shadow: 0 6px 7px var(--shadow-soft);
  border-radius: 18px;
  padding: .9rem;
}

.mini-card .grid{
  margin-top: .7rem;
}

.mini-card .mini-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  @media (min-width: 520px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mini-grid.mini-wide{
  grid-template-columns: 1fr;
}

.card-head{
  display:flex;
  margin-bottom:1.25rem;
  justify-content:flex-end;
}

.mini-card-head{
    display:flex;
  justify-content:space-between;
  gap:.75rem;
  align-items:center;
  margin-bottom:1.25rem;

}
.view-toggle{
  display:flex;
  gap:.35rem;
}

.vt-btn{
  width:36px;
  height:32px;
  border-radius:10px;

  border:1px solid var(--control-border);
  background:var(--control-bg);
  color:var(--control-text);

  display:grid;
  place-items:center;

  box-shadow:
    var(--control-shadow) 0px 2px 0px,
    var(--control-highlight) 0px -2px 0px inset;
}

.vt-btn.is-on{
  background:var(--control-active-bg);
  color:var(--control-active-text);
}

/* press (mobile) */
.bigbtn:active{
  transform: scale(.99);
  box-shadow: var(--control-hover-shadow);
}


.time-chooser{
  display: flex;
  place-content: center;
  overflow: scroll;
  gap: clamp(1rem, 4.5vw, 1.5rem);
  padding: .5rem;
}

.time-chooser .pill{
  padding: .55rem .75rem;
  border-radius: 999px;
  font-size: .9rem;
  box-shadow:
    rgba(0, 0, 0, 0.12) 0px 2px 0px,
    rgba(255, 255, 255, 0.25) 0px -2px 0px inset;
}

/* === High impact / low risk UI bits === */
.step-chip{
  display:inline-flex;
  align-items:center;
  padding:.2rem .5rem;
  margin-right:.5rem;
  border-radius:999px;
  font-weight:900;
  font-size:.75rem;
  letter-spacing:.02em;
  background: rgba(0,0,0,.06);
  color: var(--text);
}
.shortcut-row{
  display:flex;
  gap:.65rem;
  margin-top:1rem;
}
.shortcut-row .pill{
  flex:1 1 0;
  text-align:center;
  padding:.75rem 1rem;
  border-radius: 14px;
}