/* ==================================================
   09 · APP STYLES
================================================== */

/* ===============================
   WEATHER APP
=============================== */
.app-icon-weather{
  background:linear-gradient(180deg, #4eb6ff 0%, #7ccdff 100%);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:"PP Neue Bit", monospace;
}
.weatherTemp,
#weatherIconTemp{
  font-size:54px !important;
  font-weight:bold;
  line-height:1;
  letter-spacing:-1px;
  max-width:none !important;
  overflow:visible !important;
}

/* App window */
.appWindow.weatherApp{
  background:linear-gradient(180deg, #4eb6ff 0%, #7ccdff 100%);
  color:#fff;
}
.appWindow.weatherApp .appHeader{
  background:transparent;
}
.appWindow.weatherApp .appHeader .appTitle,
.appWindow.weatherApp .appHeader .closeBtn{ color:#fff; }
.appWindow.weatherApp .appContent{
  background:transparent;
  padding:0;
  display:block;
}

.weatherInner{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  gap:10px;
  padding:20px;
  box-sizing:border-box;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  font-family:"PP Neue Bit", monospace;
}
.weatherEmoji{ font-size:80px; line-height:1; }
.weatherCondition{
  font-size:var(--t-hero);
  letter-spacing:2px;
  font-weight:bold;
  text-transform:uppercase;
}
.weatherBigTemp{
  font-size:180px;
  font-weight:bold;
  line-height:1;
  margin:-6px 0;
}
.weatherCity{
  font-size:var(--t-title);
  opacity:0.85;
  letter-spacing:1px;
}
.weatherHint{
  margin-top:18px;
  font-size:var(--t-secondary);
  opacity:0.7;
  letter-spacing:2px;
}

/* Rain overlay */
#rainOverlay{
  position:fixed;
  inset:0;
  z-index:9500;
  pointer-events:none;
  overflow:hidden;
}
.raindrop{
  position:absolute;
  top:-20vh;
  width:2px;
  height:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(220,240,255,0.85) 100%);
  animation-name:rainFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes rainFall{
  0%   { transform: translate(0, -10vh) rotate(18deg); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform: translate(-40vh, 120vh) rotate(18deg); opacity:0; }
}

body.isRaining #homeSlider .appIcon,
body.isRaining #homeSlider .folderPreview,
body.isRaining #dock .appIcon{
  filter: brightness(0.75) saturate(0.85) blur(0.3px);
  transition: filter 0.6s ease;
}

/* ===============================
   CALENDAR APP
=============================== */
.app-icon-cal{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro", sans-serif;
  image-rendering:auto;
}
.calMonth{
  background:#ff3b30;
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-align:center;
  padding:3px 0 2px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-family:-apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1;
}
.calDay{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  font-weight:bold;
  color:#000;
  line-height:1;
  font-family:"PP Neue Bit", monospace;
  padding-top:2px;
}

/* Calendar app window */
.appWindow.calendarApp,
.appWindow.calendarApp .appHeader,
.appWindow.calendarApp .appContent{
  background:#fff;
  color:#000;
}
.appWindow.calendarApp .appHeader .appTitle,
.appWindow.calendarApp .appHeader .closeBtn{ color:#000; }
.calInner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 20px;
  text-align:center;
  font-family:-apple-system, BlinkMacSystemFont, sans-serif;
  color:#000;
  height:100%;
  box-sizing:border-box;
}
.calWeekday{
  font-size:var(--t-title);
  color:#ff3b30;
  font-weight:600;
  text-transform:capitalize;
  letter-spacing:1px;
}
.calBigDay{
  font-size:200px;
  font-weight:bold;
  line-height:1;
  margin:6px 0 4px;
  color:#000;
  font-family:"PP Neue Bit", monospace;
}
.calMonthYear{
  font-size:var(--t-title);
  color:#666;
  text-transform:capitalize;
}

/* ===============================
   SNAKE APP
=============================== */
.app-icon-snake{
  background-image:url("../icons/snake.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:14px;
  image-rendering:pixelated;
}

.appWindow.snakeApp,
.appWindow.snakeApp .appHeader,
.appWindow.snakeApp .appContent{
  background:#B8D426;
  color:#000;
}
.appWindow.snakeApp .appHeader .appTitle,
.appWindow.snakeApp .appHeader .closeBtn{ color:#000; }
.appWindow.snakeApp .appContent{
  padding:0;
  overflow:hidden;
  display:block;
}

.snakeApp-inner{
  position:relative;
  width:100%;
  height:100%;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-family:"PP Neue Bit", monospace;
  color:#000;
  outline:none;
  touch-action:none;
  box-sizing:border-box;
  background:#B8D426;
}

.snakeTopBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:var(--t-body);
  letter-spacing:2px;
  font-weight:bold;
  padding:0 4px;
}

.snakeCanvasWrap{
  flex:1;
  border:3px dashed #000;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height:0;
}

#snakeCanvas{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  max-width:100%;
  max-height:100%;
  display:block;
}

.snakeOverlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#B8D426;
  z-index:10;
  padding:20px;
  gap:22px;
}

.snakeTitle{
  font-size:86px;
  font-weight:bold;
  letter-spacing:6px;
  line-height:0.9;
  color:#000;
}
.snakeTitleSmall{
  display:block;
  font-size:32px;
  letter-spacing:3px;
  margin-top:-4px;
}
.snakeHint{
  font-size:var(--t-hero);
  letter-spacing:3px;
  line-height:1.2;
  font-weight:bold;
}

.snakeGOTitle{
  font-size:72px;
  font-weight:bold;
  line-height:0.85;
  letter-spacing:4px;
  color:#000;
}
.snakeGOScore{
  font-size:var(--t-hero);
  letter-spacing:2px;
  font-weight:bold;
}
.snakeRetry{
  margin-top:10px;
  background:#1a1a1a;
  color:#fff;
  border:none;
  padding:14px 42px;
  border-radius:40px;
  font-family:"PP Neue Bit", monospace;
  font-size:var(--t-title);
  font-weight:bold;
  letter-spacing:3px;
  cursor:pointer;
}
.snakeRetry:active{ transform:scale(0.96); }

/* ===============================
   SETTINGS APP
=============================== */
.app-icon-settings{
  background-image:url("../icons/setting2.png");
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  image-rendering:pixelated;
}

.appWindow.settingsApp,
.appWindow.settingsApp .appHeader,
.appWindow.settingsApp .appContent{
  background:#000;
  color:#fff;
}
.appWindow.settingsApp .appHeader .appTitle,
.appWindow.settingsApp .appHeader .closeBtn{ color:#fff; }
.appWindow.settingsApp .appContent{
  overflow-y:auto;
  overflow-x:hidden;
  padding:0;
  display:block;
  touch-action:pan-y;
}

.settingsInner{
  padding:4px 16px 40px;
  display:flex;
  flex-direction:column;
  gap:18px;
  font-family:"PP Neue Bit", monospace;
}
.settingsTitle{
  font-size:var(--t-display);
  font-weight:bold;
  color:#fff;
  margin:6px 0 4px;
}

.settingsCard{
  background:#1c1c1e;
  border-radius:14px;
  overflow:hidden;
}
.settingsRow{
  display:flex;
  align-items:center;
  padding:12px 16px;
  gap:12px;
  min-height:52px;
  cursor:pointer;
}
.settingsRow:active{ background:#2c2c2e; }
.settingsLabel{
  flex:1;
  font-size:var(--t-body);
  color:#fff;
  line-height:1.2;
}
.settingsValue{
  color:#8e8e93;
  font-size:var(--t-secondary);
  white-space:nowrap;
}
.settingsChevron{
  color:#8e8e93;
  font-size:var(--t-title);
  line-height:1;
}
.settingsBadge{
  background:#ff3b30;
  color:#fff;
  font-size:var(--t-label);
  font-weight:bold;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:-apple-system, BlinkMacSystemFont, sans-serif;
}
.settingsDivider{
  height:1px;
  background:#2c2c2e;
  margin-left:52px;
}
.settingsCard.noIcon .settingsDivider{ margin-left:16px; }

/* Account pill */
.settingsAccount{
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
}
.settingsAccountAvatar{
  width:56px;
  height:56px;
  background:#fff;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.settingsAccountAvatar img{
  width:56px;
  height:56px;
  object-fit:cover;
  image-rendering:pixelated;
}
.settingsAccountText{ flex:1; min-width:0; }
.settingsAccountName{
  font-size:var(--t-title);
  font-weight:bold;
  color:#fff;
}
.settingsAccountSub{
  font-size:var(--t-secondary);
  color:#8e8e93;
  margin-top:2px;
}

.settingsIcon{
  width:32px;
  height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
  color:#fff;
  font-family:-apple-system, BlinkMacSystemFont, sans-serif;
}

.settingsToggle{
  width:46px;
  height:28px;
  background:#39393d;
  border-radius:14px;
  padding:2px;
  display:flex;
  align-items:center;
  transition:background .2s ease;
  cursor:pointer;
  flex-shrink:0;
}
.settingsToggle.on{
  background:#34c759;
  justify-content:flex-end;
}
.settingsToggleThumb{
  width:24px;
  height:24px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 4px rgba(0,0,0,0.3);
}

.settingsSearch{
  display:flex;
  align-items:center;
  gap:10px;
  background:#1c1c1e;
  border-radius:14px;
  padding:12px 14px;
  color:#8e8e93;
  font-size:var(--t-body);
  margin-top:4px;
}
.settingsSearchIcon{ font-size:var(--t-title); }


/* ===============================
   MUSIC APP
=============================== */

.musicList {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.musicItem {
  display: flex;
  align-items: center;
  gap: 12px;
}

.musicCover{
  width:48px;
  height:48px;
  border-radius:6px;
  background:#333;
}

.musicMeta{
  display:flex;
  flex-direction:column;
}

.musicTitle{
  font-size:var(--t-secondary);
  color:#000;
}

.musicArtist{
  font-size:var(--t-body);
  color:#000;
}

/* Player fijo abajo */
.musicPlayer{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:16px;
}

.playerTitle{
  font-size:var(--t-title);
  color:#000;
}

.playerArtist{
  font-size:var(--t-secondary);
  color:#333;
  margin-bottom:8px;
}

/* ===============================
   DANCE
=============================== */

@keyframes iconDance {
  0%   { transform: rotate(-2deg) scale(1); }
  25%  { transform: rotate(2deg) scale(1.05); }
  50%  { transform: rotate(-1deg) scale(1.02); }
  75%  { transform: rotate(1deg) scale(1.05); }
  100% { transform: rotate(-2deg) scale(1); }
}

body.iconDanceMode .appIcon{
  animation: iconDance 0.4s infinite ease-in-out;
  transform-origin: center;
}

body.iconDanceMode .app:nth-child(odd) .appIcon{
  animation-delay: .1s;
}

body.iconDanceMode .app:nth-child(even) .appIcon{
  animation-delay: .2s;
}

/* ===============================
   MUSIC · PROGRESS BAR (AISLADO)
=============================== */

.appWindow.music .progressBar{
  width:100%;
  height:4px;
  background:#333;
  border-radius:2px;
  margin-bottom:16px;
  position:relative;
  cursor:pointer;
}

.appWindow.music .progress{
  height:100%;
  width:0%;
  background:#fff;
  border-radius:2px;
}

.playerControls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;
}

.playerControls button{
  background:none;
  border:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.playerControls button img{
  height:36px;
  display:block;
}

.playBtn img{
  height:52px;
}

.musicSpotify {
  text-align: center;
  padding: 16px 0 8px;
}
.musicSpotifyText {
  font-size: var(--t-label);
  font-weight: 600;
  color: #000;
  margin: 0 0 10px;
}
.musicSpotifyBtn {
  height: 40px;
  display: inline-block;
}

/* ===============================
   MUSIC APP THEME
=============================== */

.appWindow.music{
  background: #8FFF73;
  color: black;
}

.appWindow.music .appHeader{
  background: transparent;
}
.appWindow.music .appHeader .closeBtn{
  color: #000;
}

.appWindow.music .appContent{
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.musicScrollArea {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}

.musicFixedBottom {
  flex-shrink: 0;
  padding: 10px 16px 16px;
}

.appWindow.datingApp .appContent{
  background: transparent;
}

.appWindow.datingApp .appHeader{
  background: transparent;
}

/* FIN */

.card{
  height:320px;
  background:var(--bg-soft);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
}

.cardButtons{
  display:flex;
  justify-content:space-around;
}

.cardButtons button{
  width:64px;height:64px;border-radius:50%;border:none;font-size:var(--t-body);
}

.photosApp{
  padding: 20px 16px 32px;
}

.photoGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.photoItem{
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ===============================
   PHOTO VIEWER (FINAL · STABLE)
=============================== */

.photoViewer{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 3000;

  opacity: 0;
  transform: translateX(-100%);

  transition:
    transform .3s ease,
    opacity .25s ease;

  display: flex;
  flex-direction: column;
}

.photoViewer.open{
  transform: translateX(0);
  opacity: 1;
}

.photoViewer.open{
  opacity: 1;
  transform: translateY(0);
}

/* Header fijo (no se mueve nunca) */
.photoViewerHeader{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 20;
}

/* UI fija (contador, etc) */
.photoViewerUI{
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.photoCounter{
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--t-label);
  color: rgba(255,255,255,0.8);
}

/* Escenario interactivo */
.photoViewerStage{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen */
.viewerImage{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Zonas táctiles grandes */
.photoViewer .prev,
.photoViewer .next{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-xl);
  color: white;
  background: none;
  border: none;
}

.photoViewer .prev{ left: 0; }
.photoViewer .next{ right: 0; }

.backBtn{
  font-size: var(--t-xl);
  background: none;
  border: none;
  color: white;
}

.photoViewerHeaderOnly{
  justify-content:flex-start;
}

.photoCounter{
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--t-label);
  color: rgba(255,255,255,0.8);
}

/* ===============================
   MEET
=============================== */


#appWindow.open .appContent{
  padding: 0;
  height: 100%;
}

/* MEET header */
.appWindow.meetApp .appHeader {
  background: #fff;
}
.appWindow.meetApp .appHeader .appTitle,
.appWindow.meetApp .appHeader .closeBtn {
  color: #000;
}
.appWindow.meetApp .appHeader .appTitle {
  padding-top: 0;
  padding-left: 0;
  font-size: var(--t-xl);
}

/* FIX: header siempre por encima del fondo meet */
.appWindow.open .appHeader{
  position: relative;
  z-index: 10;
}

.appWindow .appHeader{
  position: relative;
  z-index: 10;
  width: 100%;
}

.meetInner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  background: #fff;
  padding: 0 24px 32px;
  box-sizing: border-box;
}

.meetVideoCard {
  width: 100%;
  position: relative;
}

.meetVideoCard img.meetFrame {
  width: 100%;
  display: block;
}

.meetVideoCard video.meetVideo {
  position: absolute;
  top: 9.75%;
  left: 4.64%;
  width: 90.47%;
  height: 73.56%;
  object-fit: cover;
  display: block;
}

.meetBtn{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 80%;
}

.meetBtn img {
  width: 100%;
  display: block;
}

.meetBtn:active{
  transform:scale(.96);
}

.meetHint{
  font-size:var(--t-label);
  opacity:.7;
  text-align: center;
  color: #000;
}
/* ===============================
   CALL / RECENTS
=============================== */

.callItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.callAvatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#3a3a3c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:var(--t-secondary);
  color:#fff;
  flex-shrink:0;
}

.callInfo{
  flex:1;
  min-width:0;
}

.callName{
  font-size:var(--t-title);
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.callType{
  font-size:var(--t-secondary);
  color:#8e8e93;
}

.callType.missed{
  color:#ff453a;
}

.callTime{
  font-size:var(--t-secondary);
  color:#8e8e93;
  margin-left:8px;
  white-space:nowrap;
}

.dialDisplay{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:70px;
  font-family: "PP Neue Bit", monospace;
  line-height:1;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
  color: #fff;
  background: #000;
  letter-spacing: 4px;
}

/* ===============================
   CALL TABS – BOTONES
=============================== */

/* ===============================
   CALL · BOTÓN DE LLAMADA (FINAL)
=============================== */

/* ===============================
   DIALPAD · CLEAN & STABLE
=============================== */

/* botón llamar centrado */
.dialpad .callBtn{
  grid-column:2;
}

/* Estado desactivado */
.callBtn.disabled,
.deleteBtn.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.callTabs{
  display:flex;
  justify-content:center;
  gap:12px;
  padding:12px 0 18px;
}

.callTabs button{
  width:110px;
  height:40px;
  background:#000;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:12px;
  color:#8e8e93;
  font-size:var(--t-label);
}

.callTabs button.active{
  color:#fff;
  border-color:#fff;
}

.dialpad{
  flex:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  padding:24px 32px 32px;
  align-content:center;
  place-items:center;
  background: #000;
}

.dialpad button{
  width:88px;
  height:88px;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-size: var(--t-jumbo);
  font-family: "PP Neue Bit", monospace;
  border: 3px solid #fff;
  outline: none;
  box-shadow: none;
  image-rendering: pixelated;
  clip-path: polygon(
    5px 0, calc(100% - 5px) 0,
    100% 5px, 100% calc(100% - 5px),
    calc(100% - 5px) 100%, 5px 100%,
    0 calc(100% - 5px), 0 5px
  );
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dialpad button:active {
  background: #222;
  transform: scale(0.94);
}

.dialpad .dialKey {
  background-color: transparent !important;
  border: none !important;
  font-size: 0 !important;
  padding: 0 !important;
  clip-path: none !important;
  width: 88px !important;
  height: 88px !important;
}

.dialpad .callBtn{
  background: url('../call/button-call.svg') center/contain no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  width: 88px !important;
  height: 88px !important;
  font-size: 0 !important;
  padding: 0 !important;
}

.dialpad .deleteBtn{
  background: url('../call/arrow.svg') center/contain no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  font-size: 0 !important;
  width: 88px !important;
  height: 88px !important;
  padding: 0 !important;
  clip-path: none !important;
}

/* ===============================
   CALL APP LAYOUT (FIXED TABS)
=============================== */

.callApp{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
}

#callContent{
  flex:1;
  overflow:hidden;   /* NO scroll */
  display:flex;
  flex-direction:column;
}

/* ===============================
   FEED / STORIES (INSTAGRAM STYLE)
=============================== */

.feedViewer{
  position: fixed;   /* 🔥 no absolute */
  inset: 0;
  background:#000;
  z-index: 5000;     /* 🔥 por encima de todo */
  display:flex;
  flex-direction:column;
  touch-action: none;
}

/* Top bar */
.feedTop{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:1500;
  padding-top:12px;   /* 👈 mucho más fino */
}

.feedProgressWrap{
  display:flex;
  gap:6px;
  padding:0 10px;
}

.feedProgress{
  flex:1;
  height:3px;
  background:rgba(255,255,255,0.3);
  border-radius:2px;
  overflow:hidden;
}

.feedProgressFill{
  height:100%;
  width:0%;
  background:#fff;
}

/* Close button */
.feedClose{
  margin-left:8px;
  font-size:var(--t-hero);
  color:#fff;
  background:none;
  border:none;
}

/* Image area */
.feedContent{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.feedImage{
  height:100%;
  width:auto;
  object-fit:cover;
}

/* ===============================
   SYSTEM CLOSE / BACK BUTTON
=============================== */

.systemClose{
  position:absolute;
  width:40px;
  height:40px;
  font-size:var(--t-xl);      /* 👈 tamaño visual */
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:none;
  border:none;
  z-index:2000;
  -webkit-tap-highlight-color:transparent;
}

.feedViewer .systemClose{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
}

/* ===============================
   NOTES APP (STABLE)
=============================== */

.appWindow.notes{
 background: #F4E55A; /* amarillo plano */   
}

.appWindow.notes .appHeader{
  background: #F4E55A;
}
.appWindow.notes .appHeader .appTitle,
.appWindow.notes .appHeader .closeBtn {
  color: #000;
}

.appWindow.notes .appContent{
  background: transparent;
}

.notesApp{
  position:relative;
  height:100%;
  background: #F4E55A;
  color: #000;
}

/* LISTA */
.notesList {
  padding: 12px 14px 20px;
  background: #F4E55A;
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

.newNoteBtn{
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 14px 6px;
  cursor: pointer;
  text-align: left;
}

.newNoteBtn img {
  display: block;
  height: 44px;
  width: auto;
}

.notesGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.noteCard {
  position: relative;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.noteCardFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 1;
}

.noteCardBody {
  position: relative;
  z-index: 2;
  padding: 18px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 200px;
}

.noteCardTitle {
  font-family: "PP Neue Bit", monospace;
  font-size: var(--t-hero);
  font-weight: bold;
  line-height: 0.8;
}

.noteCardTitle.active {
}

.noteCardPreview {
  font-family: "PP Neue Bit", monospace;
  font-size: var(--t-title);
  font-weight: bold;
  opacity: 0.75;
  line-height: 0.9;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.noteCardPreview.done {
  opacity: 0.75;
}

.noteCardReadMore {
  font-size: var(--t-title);
  font-family: "PP Neue Bit", monospace;
  font-weight: bold;
  margin-top: auto;
  opacity: 0.7;
}

.noteDetail{
  position: fixed;
  inset: 0;
  background: #F4E55A;
  z-index: 2000;
  color:#000;

  opacity: 0;
  transform: translateX(-100%);

  transition:
    transform .3s ease,
    opacity .25s ease;

  display: flex;
  flex-direction: column;
}

.noteDetail.open{
  transform: translateX(0);
  opacity: 1;
}

/* HEADER DE LA NOTA */
.noteHeader{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0;
  flex-shrink:0;
}

.noteHeader button{
  background:none;
  border:none;
  color:#000;
  font-size:var(--t-jumbo);
  line-height:1;
  padding:8px 14px;
  margin-left:-4px;
  min-width:48px;
  min-height:48px;
  cursor:pointer;
}

/* TEXTO */
#noteContent{
  flex:1;
  background:none;
  border:none;
  color:#000;
  font-family:"PP Neue Bit", monospace;
  font-size:var(--t-hero);
  font-weight:bold;
  line-height:0.9;
  resize:none;
  outline:none;
}

.noteEditor{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.noteTitle{
  font-size:var(--t-display);
  font-family:"PP Neue Bit", monospace;
  line-height:1;
  outline:none;
}

.noteSubtitle{
  font-size:var(--t-secondary);
  opacity:.7;
  outline:none;
}

.noteBody{
  margin-top:10px;
  background:none;
  border:none;
  color:#000;
  font-family:"PP Neue Bit", monospace;
  font-size:var(--t-hero);
  font-weight:bold;
  line-height:0.9;
  resize:none;
  outline:none;
  min-height:50vh;
}

/* ===============================
   PIO · TWITTER STYLE
=============================== */

.pioFeed{
  padding: 12px 0 40px;
}

.pioPost{
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pioAvatar img{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.pioBody{
  flex: 1;
  min-width: 0;
}

.pioHeader{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-secondary);
  white-space: nowrap;
}

.pioName{
  font-weight: 600;
  color: #fff;
}

.pioUser,
.pioTime{
  color: #8e8e93;
}

.pioDot{
  color: #8e8e93;
}

.pioText{
  margin: 6px 0 10px;
  font-size: var(--t-title);
  line-height: 1.05;
}

.pioImage{
  width: 100%;
  border-radius: 14px;
  margin-bottom: 10px;
  object-fit: cover;
}

.pioActions{
  display: flex;
  justify-content: space-between;
  max-width: 320px;
  font-size: var(--t-label);
  color: #8e8e93;
}

/* ===============================
   FOUNDERS · UNIFIED
=============================== */

/* Fondo único para TODA la app Founder */
.appWindow.founderApp{
  background: #FF5864;
  color: #fff;
}

/* ZONA BASE (intro, card, noLikes) */
.founderIntro,
.founderCard,
.noLikes{
  height:100%;
  padding:24px 20px;
  box-sizing:border-box;
}

/* ===============================
   INTRO
=============================== */

.founderIntro{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  text-align:center;
}

.founderLogo{
  width:260px;
  margin-bottom:12px;
  opacity:0;
  animation:fadeIn 1s ease forwards;
}

.founderIntroText{
  max-width:320px;
  margin:0 auto;
  opacity:0;
  animation:fadeIn 1s ease forwards;
  animation-delay:.35s;
}

@keyframes fadeIn{
  to{ opacity:1 }
}

/* ===============================
   WIN
=============================== */

.founderFlash {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: flashFade 0.6s ease forwards;
}

.founderFlash img {
  width: 220px;               /* más grande */
  height: auto;
  border-radius: 16px;
  object-fit: cover;
  filter: contrast(1.2) brightness(1.1);
  transform: scale(1.05);
}

@keyframes flashFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

.founderFlash img{
  animation: flashScale .6s ease;
}

@keyframes flashScale{
  0% { transform: scale(0.9); opacity: 0; }
  20% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* ===============================
   FOUNDER CARD
=============================== */

.founderCard{
  position:relative;
  display:flex;
  flex-direction:column;
}

.founderPhoto{
  width:100%;
  height:65%;
  object-fit:cover;
  border-radius:12px;
}

.founderMeta{
  padding:16px 4px 0;
}

.founderName{
  font-size:var(--t-title);
  font-weight:600;
}

.founderCompany{
  font-size:var(--t-label);
  opacity:.75;
  margin-bottom:8px;
}

.founderBio{
  font-size:var(--t-secondary);
  line-height:1.4;
  opacity:.95;
}

/* ===============================
   ACTIONS
=============================== */

.founderActions{
  position:absolute;
  bottom:28px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:40px;
}

.rejectBtn,
.likeBtn{
  width:72px;
  height:72px;
  border-radius:50%;
  border:none;
  font-size:var(--t-hero);
}

.rejectBtn{
  background:#1c1c1e;
  color:#fff;
}

.likeBtn{
  background:#fff;
  color:#c5161d;
}

/* ===============================
   NO LIKES
=============================== */

.noLikes{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.noLikesContent{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.noLikes p{
  font-size: var(--t-xl);
  font-weight: 500;
  font-family: "PP Neue Bit", monospace;
  letter-spacing:0.04em;
  margin-bottom:6px;
}

.noLikes .countdown{
  font-size: 100px;
  font-weight: 500;
  font-family: "PP Neue Bit", monospace;
}

.noLikes .systemClose{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
}

/* ===============================
   HEADER CONTROL
=============================== */

.appWindow.noHeaderClose .appHeader .closeBtn,
.appWindow.noHeaderClose .appHeader .systemClose{
  display:none;
}

/* ===============================
   SHAKE · MAREO OVERLAY
=============================== */

#mareoOverlay{
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 5000;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.25s ease;
}

#mareoOverlay.visible{
  opacity: 1;
  pointer-events: auto;
}

#mareoOverlay img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===============================
   FIT FINGER
=============================== */

/* ===============================
   FIT FINGER · THEME
=============================== */

.appWindow.fitFinger{
  background: #FDC600;
}

/* FIX: permitir cerrar Fit Finger */
.appWindow.fitFinger .appHeader{
  position: relative;
  z-index: 50000;
  pointer-events: auto;
  color: #000;
}

.appWindow.fitFinger .closeBtn{
  pointer-events: auto;
  color: #000;
}

.appWindow.fitFinger .appTitle{
  color: #000;
}

.fitFinger {
  background: #000;
  color: #fff;
  font-family: 'PP NeueBit', monospace;
}

.fitHero{
  position: absolute;
  top: 56px;      /* respeta header */
  left: 0;
  right: 0;
  bottom: 0;      /* ocupa TODO hasta abajo */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: auto;   /* ✅ permitir interacción */
}

#fitStartBtn{
  position: relative;
  z-index: 5;
}

.fitHeader {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  font-size: var(--t-display);
}

#fitFingerApp .fitStats{
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);

  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 3000;
  pointer-events: none;
}

#fitFingerApp .fitStats.hidden {
  opacity: 0;
  pointer-events: none;
}

#fitFingerApp{
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.fitStats > div{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fitStats > div > div{
  font-size: var(--t-jumbo);          /* número grande */
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: -10px;
}

.fitStats span{
  font-size: var(--t-hero);
  letter-spacing: 4px;
  opacity: 0.65;
}

.fitStats{
  order: 2;
  margin-top: 16px;
}

.fitGame{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#gameOver {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FDC600;
  color: #000;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#gameOver.show {
  opacity: 1;
  pointer-events: auto;
}

.gameOverContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(92vw, 420px);
  padding: 28px 16px 24px;
}

.fitFinalScore {
  font-family: "PP Neue Bit", monospace;
  font-size: var(--t-jumbo);
  line-height: 0.9;
}

.fitFinalCoinImg{
  width: 220px;
  height: 220px;
  object-fit: contain;
  margin: 10px 0 8px;
}

.fitResultMsg{
  font-family: "PP Neue Bit", monospace;
  font-size: 60px;
  letter-spacing: 2px;
  margin-bottom: 12px;
  color: #000;
  opacity: 0.9;
}

.fitBestRecord{
  font-family: "PP Neue Bit", monospace;
  font-size: var(--t-hero);
  letter-spacing: 2px;
  opacity: 0.7;
  margin-top: 4px;
  text-transform: uppercase;
}

.tryAgainBtn {
  font-family: "PP Neue Bit", monospace;
  font-size: var(--t-display);
  letter-spacing: 4px;
  padding: 18px 36px;
  background: white;
  color: black;
  border: none;
  cursor: pointer;
  margin-top: 20px;
  animation: arcadePulse 1.1s infinite ease-in-out;
}

.fitGameOverBtn{
  background: #FFF;
  color: #000;
}

.tryAgainBtn:active {
  transform: scale(0.92);
}

@keyframes arcadePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.fitExitHint{
  animation: pulse 1.6s infinite;
}

@keyframes pulse{
  0%{ opacity: .4 }
  50%{ opacity: .7 }
  100%{ opacity: .4 }
}

#gameOver.show .gameOverContent {
  animation: fadeUp 0.35s ease;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fitIntro{
  position: absolute;
  inset: -56px 0 0 0;   /* 👈 respeta el header */
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: auto;   /* ✅ permitir click en START */
}

.fitIntroLogo,
.fitIntroText{
  pointer-events: none;
}

.fitIntroLogo{
  width:220px;
  margin-bottom:20px;
  transform: translateY(-8px); /* micro-ajuste óptico */
}

.fitIntroText{
  font-size:var(--t-secondary);
  opacity:.85;
  color: black;
}

#fitFingerApp .fitHeader,
#fitFingerApp .fitStats,
#fitFingerApp #playArea {
  position:absolute;
  z-index:1;
}

@keyframes bgBlinkInverse {
  0%   { background-color: #000; }
  50%  { background-color: #FFF; }
  100% { background-color: #000; }
}

#fitCoinField{
  position: absolute;
  inset: 0;
  z-index: 4;
}

.fitTapCoin{
  position: absolute;
  width: 110px;
  height: 110px;
  perspective: 800px;
  touch-action: manipulation;
}

.fitTapCoin .coin3d{
  width: 100%;
  height: 100%;
}

.coin3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}

.coinFace {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* cara */
.coinFace.front {
  background-image: url("../fit/coin.webp");
}

/* cruz */
.coinFace.back {
  background-image: url("../fit/face.webp");
  transform: rotateY(180deg);
}

.coin {
  width: 96px;
  height: 96px;
  perspective: 800px;
}

.coinInner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}

.coinFace {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  image-rendering: pixelated;
}

.coinFace.back {
  transform: rotateY(180deg);
}

#time, #hits {
  font-variant-numeric: tabular-nums;
  font-family: "PP Neue Bit", monospace;
}

.hidden {
  display: none !important;
}

.appWindow.compass.moneyWin{
  animation: winFlash .8s ease-in-out infinite;
}

@keyframes winFlash{
  0%   { background:#F4E55A; }
  50%  { background:#E0C93A; }
  100% { background:#F4E55A; }
}