:root{
  --bg1:#b5cfee;
  --bg2:#5194fe;
  --ink:#21025b;
  --yellow:#ffd65a;
  --green:#58cc6b;
  --green-dark:#36a74c;
  --red:#ff8d99;
  --white:#ffffff;
  --panel:#ffffffee;
  --soft:#efeaff;
  --c-gld-1: #ffe259;
  --c-gld-2: #ffa751;
  --c-pnk-1: #ff9a9e;
  --c-pnk-2: #fecfef;
  --c-blu-1: #4facfe;
  --c-blu-2: #00f2fe;
  --c-grn-1: #43e97b;
  --c-grn-2: #38f9d7;
  --c-prp-1: #c471ed;
  --c-prp-2: #f64f59;
  --shadow:0 10px 24px rgba(93,44,118,.18);
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  min-height:100%;
  overscroll-behavior: none;
  touch-action: manipulation;

}
body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background: linear-gradient(270deg, #b5cfee, #5194fe, #7b68ee, #b5cfee);
    background-size: 600% 600%;
    animation: fluidBg 12s ease infinite;
    color:var(--ink);
    overflow-x:hidden;
    overflow-y:auto;
}

@keyframes fluidBg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#app{
  min-height:100dvh;
  padding:20px;
}

.screen{
  max-width:900px;
  margin:0 auto;
}

.panel{
  background:var(--panel);
  border-radius:var(--radius-xl);
  border:4px solid rgba(255,255,255,.78);
  box-shadow:var(--shadow);
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
}
/* LOGO CENTRADO ABSOLUTO */
.logo-center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none; /* no bloquea clicks */
}

.logo-center img{
  height: 100px;
  width: auto;
  object-fit: contain;
}

.btn-3d {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 99px;
  border: 3px solid rgba(255,255,255,0.9);
  transition: all 0.1s;
  box-shadow: 
  inset 0 6px 10px rgba(255,255,255,0.7),
  inset 0 -6px 10px rgba(0,0,0,0.2),
  0 8px 15px rgba(0,0,0,0.2);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  color: var(--white);
  overflow: hidden;
}

.btn-3d::before {
  content: '';
  position: absolute;
  top: 0; left: 0%; right: 0%; height: 35%; 
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
  border-radius: 99px;
  pointer-events: none;
}

.btn-3d:active {
  transform: translateY(5px) scale(0.96);
  box-shadow: 
  inset 0 2px 5px rgba(255,255,255,0.7),
  inset 0 -2px 5px rgba(0,0,0,0.2),
  0 3px 5px rgba(0,0,0,0.2);
}

.btn-circ { width: 50px; height: 50px; font-size: 26px; flex-shrink: 0; }
.bg-gld { background: linear-gradient(to bottom, var(--c-gld-1), var(--c-gld-2)); color: #784a00; text-shadow: 0 2px 2px rgba(255,255,255,0.6); }
.bg-blu { background: linear-gradient(to bottom, var(--c-blu-1), var(--c-blu-2)); }
.bg-pnk { background: linear-gradient(to bottom, var(--c-pnk-1), var(--c-pnk-2)); color: #8a1344; text-shadow: 0 2px 2px rgba(255,255,255,0.6); }
.bg-grn { background: linear-gradient(to bottom, var(--c-grn-1), var(--c-grn-2)); color: #005230; text-shadow: 0 2px 2px rgba(255,255,255,0.6); }
.bg-prp { background: linear-gradient(to bottom, var(--c-prp-1), var(--c-prp-2)); }
.bg-red { background: linear-gradient(to bottom, var(--red), var(--c-prp-2)); }

.prof-badge {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.25);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 99px;
  padding: 4px 12px 4px 4px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.1);
  position: relative;
  gap: 10px;
}

.avt {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--c-pnk-1); border: 3px solid white;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  margin-right: -20px; z-index: 5; flex-shrink: 0;
}

.namePlayer{
  margin-left: 20px;
  margin-right: 10px;
  font-weight: bold;
  color: var(--white);
}

.menu-buttons{
  display: flex;
  justify-content: center;   /* horizontal */
  align-items: center;       /* vertical */
  height: 100%;              /* clave */
}

.menu-buttons button {
  animation: fadeUp .4s ease forwards;
  opacity: 0;
}

.menu-buttons button:nth-child(1){ animation-delay:.1s }
.menu-buttons button:nth-child(2){ animation-delay:.2s }
.menu-buttons button:nth-child(3){ animation-delay:.3s }

@keyframes fadeUp{
  from{ transform:translateY(20px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.main-act {
  position: relative;
  width: 100%;
  margin-bottom: 25px;
}

.act-btn {
  width: 420px;
  margin: 40px auto;
  padding: 28px 20px;

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

  font-size: 28px;
  font-weight: bold;
  color: #5b3b00;

  box-shadow: 0 10px 25px rgba(0,0,0,.2);

  position: relative;
  z-index: 1;
}

.act-icon {
  position: absolute;
  right: calc(50% - 210px - 20px); /* se alinea con el botón */
  top: 50%;
  transform: translateY(-50%) rotate(15deg);

  width: 85px;
  height: 85px;

  border-radius: 25px;
  border: 4px solid rgba(255,255,255,0.9);

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

  font-size: 45px;

  z-index: 20;

  box-shadow:
    inset 0 6px 10px rgba(255,255,255,0.7),
    inset 0 -6px 10px rgba(0,0,0,0.2),
    0 8px 15px rgba(0,0,0,0.2);
}

.act-icon{
  animation: floatIcon 2s infinite ease-in-out;
}

@media (max-width:425px) {

  .act-btn {
  width: 100%;
  margin: 40px auto;
  padding: 28px 20px;

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

  font-size: 28px;
  font-weight: bold;
  color: #5b3b00;

  box-shadow: 0 10px 25px rgba(0,0,0,.2);

  position: relative;
  z-index: 1;
}

.act-icon {
  position: absolute;
  right: calc(50% - 130px - 20px); /* se alinea con el botón */
  top: 50%;
  transform: translateY(-50%) rotate(15deg);

  width: 85px;
  height: 85px;

  border-radius: 25px;
  border: 4px solid rgba(255,255,255,0.9);

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

  font-size: 45px;

  z-index: 20;

  box-shadow:
    inset 0 6px 10px rgba(255,255,255,0.7),
    inset 0 -6px 10px rgba(0,0,0,0.2),
    0 8px 15px rgba(0,0,0,0.2);
}
  
}

@keyframes floatIcon{
  0%{ transform: translateY(-50%) rotate(15deg); }
  50%{ transform: translateY(-60%) rotate(18deg); }
  100%{ transform: translateY(-50%) rotate(15deg); }
}

.main-play{
  width: 90%;
  max-width: 420px;
  margin: 40px auto;
  padding: 28px 20px;
  border-radius: 30px;

  background: linear-gradient(180deg, #ffcc66, #f5a623);
  box-shadow: 0 10px 25px rgba(0,0,0,.2);

  font-size: 28px;
  font-weight: bold;
  color: #5b3b00;

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

  transition:.2s;
}

.main-play:active{
  transform: scale(.96);
}

.main-play .icon{
  font-size:40px;
}

.game-btn{
  border:none;
  min-height:90px;
  border-radius:28px;
  padding:18px 24px;
  font-size:28px;
  font-weight:900;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
}

.orange{background:linear-gradient(180deg,#ffd979,#f0a93f); color:#8a4b00;}
.pink{background:linear-gradient(180deg,#ffd3e1,#f3a7bf); color:#91204e;}
.cyan{background:linear-gradient(180deg,#76e8ff,#17c9ef); color:#fff;}

.bubble{
  width:72px;
  height:72px;
  border-radius:22px;
  background:rgba(255,255,255,.8);
  display:grid;
  place-items:center;
  font-size:34px;
}

.support-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-radius:16px;
  background:var(--panel);
  margin-top:10px;
  cursor:pointer;
  transition:all .2s ease;
}

.support-row:active{
  transform:scale(.98);
}

.support-meta{
  display:flex;
  flex-direction:column;
}

.support-meta span{
  font-size:.85rem;
  opacity:.7;
}

.support-arrow{
  font-size:18px;
  opacity:.6;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}

.badge,.btn{
  background:#fff;
  padding:12px 16px;
  border-radius:18px;
  border:none;
  font-weight:700;
}

.question-box{
  text-align:center;
  margin-bottom:20px;
}

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

.fruit-card{
  min-height:140px;
  border:none;
  border-radius:24px;
  background:#fff;
  font-size:24px;
  font-weight:700;
}

.emoji img{
  max-width:200px;
  max-height:200px;
}


.emoji{
  font-size:56px;
}

.wrong{
  background:#ffd4d4;
}

@media (max-width: 744px) and (orientation: portrait){
    .fruit-grid.fruit-grid-3 .emoji img{
    width: min(100%, 110px);
    height: auto;
    max-width: 110px !important;
    max-height: 110px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

}
@media (max-width: 480px) and (orientation: portrait){

  .fruit-grid.fruit-grid-3{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px !important;
  }

  .fruit-grid.fruit-grid-3 .fruit-card{
    min-height: 170px;
    padding: 12px 8px;
    border-radius: 22px;
  }

  .fruit-grid.fruit-grid-3 .fruit-card:nth-child(3){
    grid-column: 1 / -1;
    max-width: 70%;
    justify-self: center;
  }

  .fruit-grid.fruit-grid-3 .emoji{
    font-size: 0;
  }

  .fruit-grid.fruit-grid-3 .emoji img{
    width: min(100%, 110px);
    height: auto;
    max-width: 110px !important;
    max-height: 110px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  .fruit-grid.fruit-grid-3 .fruit-name{
    font-size: 18px;
    margin-top: 8px;
    text-align: center;
  }
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px;
}

.modal{
  width:min(100%,600px);
  background:#fff;
  border-radius:28px;
  padding:20px;
}

.actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
}

.input{
  width:100%;
  min-height:52px;
  border-radius:18px;
  padding:12px 14px;
  border:1px solid #ddd;
}

@media (max-width: 480px){
  .game-btn{
    font-size:22px;
    min-height:78px;
  }

  .bubble{
    width:60px;
    height:60px;
    font-size:28px;
  }

  .fruit-grid{
    grid-template-columns:repeat(2,1fr);
  }
}


.particles-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.ptc {
    position: absolute;
    width:12px;
    height:12px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    animation: floatUp linear infinite;
    box-shadow: 0 0 10px rgba(255,255,255,0.8);
}
@keyframes floatUp {
    0% { transform: translateY(110vh) scale(0.5) rotate(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-10vh) scale(2.5) rotate(360deg); opacity: 0; }
}

.screen-home{
  min-height: 100dvh; /* mejor para móviles */
  display: flex;
  flex-direction: column;
}

.home-decor{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.home-header,
.menu-buttons{
  position: relative;
  z-index: 2;
}

.home-header{
  text-align: center;
}

.global-decor{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}

.app{
  position:relative;
  z-index:2;
}


.floating-item{
  position:absolute;
  opacity:.18;
  font-size:42px;
  line-height:1;
  animation-duration:7s;
  animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
  animation-fill-mode:both;
  will-change:transform;
}

.floating-item img{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
}

.floating-1{ animation-name: floatA; }
.floating-2{ animation-name: floatB; }
.floating-3{ animation-name: floatC; }
.floating-4{ animation-name: floatD; }

@keyframes floatA{
  0% { transform: translateY(110vh) scale(0.5) rotate(0); opacity: 0; }
    20% { opacity: .21; }
    80% { opacity: .21; }
    100% { transform: translateY(-10vh) scale(2.5) rotate(360deg); opacity: 0; }
}

@keyframes floatB{
0% { transform: translateY(110vh) scale(0.5) rotate(0); opacity: 0; }
    20% { opacity: .21; }
    80% { opacity: .21; }
    100% { transform: translateY(-10vh) scale(2.5) rotate(360deg); opacity: 0; }
}

@keyframes floatC{
0% { transform: translateY(110vh) scale(0.5) rotate(0); opacity: 0; }
    20% { opacity: .21; }
    80% { opacity: .21; }
    100% { transform: translateY(-10vh) scale(2.5) rotate(360deg); opacity: 0; }
}

@keyframes floatD{
  0% { transform: translateY(110vh) scale(0.5) rotate(0); opacity: 0; }
    20% { opacity: .21; }
    80% { opacity: .21; }
    100% { transform: translateY(-10vh) scale(2.5) rotate(360deg); opacity: 0; }
}

/*Modals*/
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(72,26,88,.4);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:1000;
}

.modal-backdrop.show{display:flex}

.modal{
  width:min(100%, 720px);
  max-height:min(92dvh, 820px);
  overflow:auto;
  background:linear-gradient(180deg,#f8dff3,#efe9ff);
  border-radius:34px;
  border:5px solid rgba(255,255,255,.82);
  box-shadow:0 24px 50px rgba(54,18,74,.28);
  padding:18px;
}

.modal-shell{
  background:rgba(255,255,255,.55);
  border-radius:28px;
  border:4px solid rgba(255,255,255,.68);
  padding:18px;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.modal-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.modal-icon{
  width:64px;
  height:64px;
  border-radius:22px;
  background:linear-gradient(180deg,#ffd981,#efb145);
  border:4px solid rgba(255,255,255,.9);
  display:grid;
  place-items:center;
  font-size:30px;
  box-shadow:var(--shadow);
}

.modal-title{
  margin:0;
  font-size:clamp(26px,4vw,36px);
  color:#7f3d00;
}

.modal-sub{
  margin:4px 0 0;
  font-size:15px;
}

.close-btn{
  width:58px;
  height:58px;
  border:none;
  border-radius:18px;
  background:linear-gradient(180deg,#ffc1cf,#f08fa9);
  color:#821d4c;
  font-size:28px;
  font-weight:900;
  border:4px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow);
  cursor:pointer;
}


.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.field,
.field-full{
  display:grid;
  gap:8px;
}

.field-full{grid-column:1 / -1}

.label{
  font-size:15px;
  font-weight:900;
  color:#7d3f00;
}

.input,
.select,
.textarea{
  width:100%;
  border:none;
  outline:none;
  min-height:58px;
  border-radius:22px;
  background:#fff;
  padding:14px 16px;
  font-size:17px;
  color:#5b2b00;
  border:4px solid #fff;
  box-shadow:inset 0 -4px 0 rgba(192,158,217,.25), 0 8px 14px rgba(114,71,142,.08);
}

.input:focus,
.select:focus,
.textarea:focus{
  border-color:#d4a0ff;
}

.textarea{
  min-height:120px;
  resize:vertical;
}

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

.choice{
  position:relative;
}

.choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.choice-card{
  min-height:72px;
  border-radius:24px;
  background:rgba(255,255,255,.86);
  border:4px solid rgba(255,255,255,.86);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px;
  font-weight:900;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}

.choice-card .mini{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:22px;
  background:linear-gradient(180deg,#ffe79e,#f4bc4f);
  color:#7f4b00;
}

.choice input:checked + .choice-card{
  border-color:#b56de8;
  background:linear-gradient(180deg,#fff,#f3e8ff);
  transform:translateY(-2px);
}

.switch-row{
  display:grid;
  gap:12px;
}

.switch-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:72px;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  border:4px solid rgba(255,255,255,.88);
  box-shadow:var(--shadow);
  padding:10px 14px;
}

.switch-meta strong{display:block;font-size:17px}
.switch-meta span{display:block;font-size:14px;opacity:.85}

.toggle{
  position:relative;
  width:68px;
  height:40px;
  flex:0 0 auto;
}

.toggle input{opacity:0;position:absolute}
.toggle-track{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#e9d2ff;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);
  transition:background .15s ease;
}
.toggle-thumb{
  position:absolute;
  top:4px;
  left:4px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 6px 10px rgba(0,0,0,.18);
  transition:transform .15s ease;
}
.toggle input:checked + .toggle-track{background:#81eaa1}
.toggle input:checked + .toggle-track + .toggle-thumb{transform:translateX(28px)}

.actions{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.modal-btn{
  border:none;
  min-width:140px;
  min-height:58px;
  border-radius:22px;
  padding:12px 18px;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  border:4px solid rgba(255,255,255,.85);
  box-shadow:var(--shadow);
}
.modal-btn.cancel{background:linear-gradient(180deg,#ffd0df,#f2a3bd); color:#871f50}
.modal-btn.save{background:linear-gradient(180deg,#ffe28b,#efbb43); color:#7b4900}
.modal-btn.alt{background:linear-gradient(180deg,#8ceaff,#1fd0ef); color:#fff}

@media (max-width: 700px){
  .form-grid,
  .controls,
  .option-grid{grid-template-columns:1fr}
  .brand{min-width:100%}
}

@media (max-width: 420px){
  .page{padding:10px}
  .modal{padding:10px;border-radius:26px}
  .modal-shell{padding:12px;border-radius:22px}
  .modal-header{align-items:flex-start}
  .close-btn{width:52px;height:52px}
  .game-btn{min-height:82px;font-size:24px}
  .game-btn .bubble{width:76px;height:76px;font-size:32px}
}

/* ===== TRANSICIONES SPA ===== */

.screen {
  opacity: 0;
  transform: scale(0.96);
  filter: blur(6px);
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
}

/* ENTRADA */
.screen.active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* SALIDA */
.screen.exit {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(8px);
}

/* Variante tipo "pop" */
.screen.pop {
  animation: bubbleIn .35s cubic-bezier(.34,1.56,.64,1);
}


@keyframes bubbleIn {
  0% {
    transform: scale(0.85);
    opacity: 0;
    filter: blur(8px);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* SALIDA POP */
@keyframes bubbleOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.85);
    opacity: 0;
    filter: blur(6px);
  }
}


/*Acciones*/
.fruit-card.correct{
  animation: correctBounce .45s ease;
  background:#dfffe1;
  border-color:#58cc6b;
}

.fruit-card.wrong{
  animation: wrongShake .28s ease;
  background:#ffe7ec;
  border-color:#ff8d99;
}

@keyframes correctBounce{
  0%{transform:scale(1)}
  30%{transform:scale(1.08)}
  55%{transform:scale(.98)}
  100%{transform:scale(1)}
}

@keyframes wrongShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}


/*grid 3*/
.fruit-grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.fruit-grid-3 .fruit-card{
  min-height:170px;
}

.fruit-grid-3 .emoji{
  font-size:72px;
}

.fruit-grid-3 .fruit-name{
  font-size:22px;
  margin-top:8px;
}
@media (max-width: 480px){
  .fruit-grid-3{
    gap:10px;
  }

  .fruit-grid-3 .fruit-card{
    min-height:130px;
    padding:10px 6px;
  }

  .fruit-grid-3 .emoji{
    font-size:52px;
  }

  .fruit-grid-3 .fruit-name{
    font-size:16px;
  }
}
.screen{
  min-height: 100dvh;
}