/* Componentes de: multijugador local, caras y bocadillos de los bots, formas de accesibilidad,
   vista previa de la jugada, tutorial, ajustes / estadísticas, avisos y transiciones. */

/* ---------- menú: tres botones de la misma altura ---------- */
.mActions .mBtn { min-height: 50px; }
.mActions .mRow { align-items: stretch; }
.mBtn.continue { padding-block: 6px; }
.mBtn.continue .cTxt { gap: 1px; }

/* ---------- menú: entrada animada ---------- */
body[data-screen="menu"]:not(.loading) .mFrame { animation: menuFrameIn .6s var(--ease-out) both; }
body[data-screen="menu"]:not(.loading) .mArt svg { animation: menuArtIn 1.1s var(--ease-out) both; transform-origin: 60% 45%; }
body[data-screen="menu"]:not(.loading) .mTitle .l1 { animation: titleIn .7s .12s var(--ease-out) both; }
body[data-screen="menu"]:not(.loading) .mTitle .l2 { animation: titleIn .7s .22s var(--ease-out) both; }
body[data-screen="menu"]:not(.loading) .mTitle .l2::after { animation: dotDrop .5s .75s cubic-bezier(.3,1.6,.5,1) both; }
body[data-screen="menu"]:not(.loading) .mActions > *, body[data-screen="menu"]:not(.loading) .mRow > * { animation: btnUp .45s var(--ease-out) both; }
body[data-screen="menu"]:not(.loading) .mActions > :nth-child(1) { animation-delay: .38s; }
body[data-screen="menu"]:not(.loading) .mRow > :nth-child(1) { animation-delay: .46s; }
body[data-screen="menu"]:not(.loading) .mRow > :nth-child(2) { animation-delay: .54s; }
body[data-screen="menu"]:not(.loading) .mTag { animation: fadeIn .6s .7s both; }
body[data-screen="menu"]:not(.loading) .mBottom { animation: fadeIn .5s .8s both; }
@keyframes menuFrameIn { from { transform: translateY(18px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes menuArtIn { from { transform: scale(1.08); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes titleIn { from { transform: translateY(.35em); opacity: 0; clip-path: inset(0 0 100% 0); } to { transform: none; opacity: 1; clip-path: inset(0 0 -20% 0); } }
@keyframes dotDrop { from { transform: translateY(-1.2em) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- transición entre pantallas ---------- */
.screenIn { animation: screenIn .32s var(--ease-out) both; }
#gameScreen.screenIn { animation: screenFade .35s var(--ease-out) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes screenFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- movimiento reducido (ajuste del juego o del sistema) ---------- */
html.reduceMotion *, html.reduceMotion *::before, html.reduceMotion *::after {
  animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html.reduceMotion #turnBanner { display: none; }
html.reduceMotion .portalRing, html.reduceMotion .portalCore { animation: none !important; }
html.reduceMotion .portalRing { opacity: .5; } html.reduceMotion .portalRing:nth-child(1) { transform: scale(.35); } html.reduceMotion .portalRing:nth-child(2) { transform: scale(.68); }

/* ---------- avatares con cara (bots) y formas de accesibilidad ---------- */
.avatar { position: relative; }
.avatar.hasFace { padding: 0; }
.avatar .face { width: 88%; height: 88%; display: block; }
.avatar.lg { width: 76px; height: 76px; font-size: 22px; box-shadow: 5px 5px 0 var(--shadow), inset -5px -5px 0 rgba(0,0,0,.1), inset 5px 5px 0 rgba(255,255,255,.18); }
.shp { display: none; }
html.cbShapes .shp { display: block; }
html.cbShapes .avatar .shp {
  position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; padding: 2px;
  color: var(--ink); background: var(--cream); border-radius: 50%; box-shadow: 1px 1px 0 var(--shadow);
}
html.cbShapes .avatar.xs .shp { width: 11px; height: 11px; padding: 1.5px; right: -3px; bottom: -3px; }
html.cbShapes .tile-ball .circ .shp {
  position: absolute; left: 50%; top: -2px; width: 34%; height: 34%; transform: translate(-50%, -30%);
  color: var(--ink); background: #fff; border-radius: 50%; padding: 5%; box-shadow: 1px 1px 0 var(--shadow);
}

/* ---------- bocadillos de los bots ---------- */
.bubble {
  --pc: var(--ink);
  position: fixed; left: 0; top: 0; z-index: 38; pointer-events: none;
  max-width: 180px; padding: 7px 12px; border-radius: 14px;
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  box-shadow: 0 0 0 1.5px var(--pc), 4px 4px 0 var(--shadow);
  animation: bubbleIn .28s cubic-bezier(.3,1.5,.5,1) both;
}
.bubble::after { /* rabito hacia el avatar */
  content: ''; position: absolute; left: -6px; top: calc(50% - 5px); width: 10px; height: 10px; background: #fff;
  box-shadow: -1.5px 1.5px 0 0 var(--pc); transform: rotate(45deg);
}
.bubble[data-side="top"]::after { left: calc(50% - 5px); top: auto; bottom: -5px; box-shadow: 1.5px 1.5px 0 0 var(--pc); }
.bubble[data-side="below"]::after { left: 14px; top: -5px; box-shadow: -1.5px -1.5px 0 0 var(--pc); }
.bubble.hit, .bubble.fall { background: #FFF3EC; }
.bubble.hit::after, .bubble.fall::after { background: #FFF3EC; }
.bubble.out { opacity: 0; transition: opacity .3s; }
.bubble.still { animation: none; }
@keyframes bubbleIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

/* ---------- multijugador local: asientos y pantalla de pasar el dispositivo ---------- */
.seatReact { margin-top: 6px; padding: 3px 11px; font-size: 11.5px; --b-line: var(--accent); --b-bg: rgba(232,135,58,.12); }
.seatReact:hover { background-color: rgba(232,135,58,.25); }
#passScreen {
  --pc: var(--accent);
  position: fixed; inset: 0; z-index: 44; display: none; align-items: center; justify-content: center; padding: 20px;
  background-image: var(--grain), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pc) 45%, #2B4E42), #1D3A2E 75%);
}
#passScreen.visible { display: flex; animation: fadeIn .25s var(--ease-out); }
.passCard {
  width: min(420px, 100%); text-align: center; padding: 34px 28px 24px; border-radius: 22px;
  background-image: var(--grain); background-color: var(--cream);
  box-shadow: 0 30px 70px rgba(10,25,10,.4), 0 0 0 2px var(--pc);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: winPop .35s var(--ease-out);
}
.passCard h2 { font-size: 28px; font-weight: 500; letter-spacing: -.035em; line-height: 1.05; margin-top: 6px; }
.passCard p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.4; max-width: 30ch; }
.passCard .btn-primary { margin-top: 8px; width: 100%; }
.passCard .avatar.lg { animation: passBob 2.4s ease-in-out infinite; }
@keyframes passBob { 50% { transform: translateY(-5px); } }

/* ---------- vista previa de la jugada ---------- */
#previewSvg { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .12s; }
#previewSvg.visible { opacity: 1; }
#previewSvg .pvLine { fill: none; stroke: var(--pc); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 8; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.9)); }
#previewSvg .pvLine.fall { stroke: var(--accent-deep); stroke-dasharray: 5 6; }
#previewSvg .pvGhost { fill: color-mix(in srgb, var(--pc) 45%, transparent); stroke: #fff; stroke-width: 2.4; stroke-dasharray: 4 3; }
#previewSvg .pvGhost.hole { fill: rgba(36,36,36,.55); }
#previewSvg .pvPortal { fill: none; stroke: #7FA0CF; stroke-width: 2.4; }
#previewSvg .pvRespawn { fill: none; stroke: var(--pc); stroke-width: 2; stroke-dasharray: 2 3; }
#previewSvg .pvOut path { stroke: var(--accent-deep); stroke-width: 3; stroke-linecap: round; }
#previewSvg .pvHit path { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 1px rgba(0,0,0,.4)); }
#previewSvg .pvSink { fill: none; stroke: var(--accent); stroke-width: 3; }
#previewSvg.jaque .pvSink { animation: pvPulse .9s ease-in-out infinite; }
#previewSvg .pvSand { fill: none; stroke: var(--sand); stroke-width: 2.4; stroke-dasharray: 3 3; }
#previewSvg .pvTap rect { fill: var(--ink); }
#previewSvg .pvTap text { fill: var(--cream); font: 600 11px var(--font); text-anchor: middle; }
@keyframes pvPulse { 50% { stroke-width: 5; } }

/* ---------- cadena de choques cortada ---------- */
.chainStop {
  position: absolute; z-index: 9; pointer-events: none; transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--accent-deep); color: var(--cream);
  font-size: 12.5px; font-weight: 600; box-shadow: 3px 3px 0 var(--shadow);
  animation: chainUp 1.6s var(--ease-out) forwards;
}
.chainStop.still { animation: none; }
@keyframes chainUp { 0% { opacity: 0; translate: 0 6px; } 12% { opacity: 1; translate: 0 0; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -14px; } }

/* ---------- aviso tras un rato sin jugar ---------- */
#hands .card.nudge { animation: nudge 1.6s ease-in-out infinite; box-shadow: 0 0 0 3px var(--accent), 4px 4px 0 var(--shadow); }
@keyframes nudge { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-9px) rotate(-2deg); } 90% { transform: translateY(0) rotate(1deg); } }
.hint.nudgeHint { background: rgba(232,135,58,.92); color: var(--ink); font-weight: 500; }

/* ---------- tutorial ---------- */
#coach {
  position: fixed; left: 0; top: 0; z-index: 42; width: min(330px, calc(100vw - 20px));
  padding: 14px 16px 12px; border-radius: 16px;
  background-image: var(--grain); background-color: var(--cream); color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-soft), 8px 8px 0 rgba(20,40,20,.2);
  display: none;
}
#coach.visible { display: block; animation: coachIn .3s var(--ease-out); }
#coach::after { /* flecha hacia el objetivo */
  content: ''; position: absolute; left: calc(var(--ax, 50%) - 7px); width: 14px; height: 14px;
  background: var(--cream); transform: rotate(45deg);
}
#coach[data-side="top"]::after { bottom: -7px; box-shadow: 1.5px 1.5px 0 0 var(--accent); }
#coach[data-side="bottom"]::after { top: -7px; box-shadow: -1.5px -1.5px 0 0 var(--accent); }
#coach[data-side="mid"]::after { display: none; }
#coach[data-side="left"]::after { left: -7px; top: var(--ay, 40px); box-shadow: -1.5px 1.5px 0 0 var(--accent); }
#coach[data-side="right"]::after { left: auto; right: -7px; top: var(--ay, 40px); box-shadow: 1.5px -1.5px 0 0 var(--accent); }
.coachBody p { font-size: 14px; line-height: 1.42; }
.coachBody p + p { margin-top: 6px; }
.coachCard { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.coachCard > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.coachCard b { font-size: 15px; font-weight: 600; }
.coachCard small { font-size: 11.5px; color: var(--ink-soft); }
.coachCard .hintCard { width: 34px; height: 46px; }
.coachBtns { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.coachBtns .btn-text { margin-right: auto; padding-left: 0; }
#coachRing {
  position: fixed; left: 0; top: 0; z-index: 41; pointer-events: none; border-radius: 16px;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px rgba(232,135,58,.25);
  opacity: 0; transition: opacity .2s;
}
#coachRing.visible { opacity: 1; animation: ringPulse 1.6s ease-in-out infinite; }
#coachRing.round { border-radius: 50%; }
@keyframes ringPulse { 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 14px rgba(232,135,58,.12); } }
@keyframes coachIn { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }

/* ---------- ajustes y estadísticas ---------- */
#settingsOverlay {
  position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20,40,20,.5); backdrop-filter: blur(6px);
}
#settingsOverlay.visible { display: flex; animation: fadeIn .2s var(--ease-out); }
.setBox {
  width: min(620px, 100%); max-height: min(760px, calc(100dvh - 32px)); display: flex; flex-direction: column;
  background-image: var(--grain); background-color: var(--cream); border-radius: 22px;
  box-shadow: 0 30px 70px rgba(10,25,10,.35); overflow: hidden; animation: winPop .3s var(--ease-out);
}
.setBox header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 4px; }
.setBox header h2 { font-size: 32px; font-weight: 500; letter-spacing: -.045em; text-transform: lowercase; line-height: 1; }
.setBox header h2::after { content: '.'; color: var(--accent); }
.setClose { --b-fg: var(--ink); --b-line: var(--cream-line); --b-bg: transparent; width: 34px; height: 34px; padding: 0; }
.setTabs { display: flex; gap: 6px; padding: 10px 22px 12px; border-bottom: 1px solid var(--cream-line); }
.setTabs button { --b-line: var(--cream-line); }
.setTabs button[aria-selected="true"] { --b-bg: var(--ink); --b-fg: var(--cream); --b-line: var(--ink); }
.setBody { overflow: auto; padding: 4px 22px 22px; }
.setBody section { padding: 14px 0 6px; }
.setBody section + section { border-top: 1px solid var(--cream-line); }
.setBody h4 { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); margin-bottom: 10px; }
.setRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; font-size: 14px; flex-wrap: wrap; }
.setRow.col { flex-direction: column; align-items: stretch; }
.muted { color: var(--ink-soft); font-size: 13px; }
.segBtns { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.segBtns button { padding: 5px 12px; font-size: 12.5px; }
.segBtns button[aria-pressed="true"], #sndPanel .speedBtns button[aria-pressed="true"] { --b-bg: var(--ink); --b-fg: var(--cream); --b-line: var(--ink); }
.setRange { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; }
.setRange span { width: 64px; }
.setRange .i { color: var(--ink-soft); }
.setRange input { flex: 1; accent-color: var(--grass-dark); }
.setToggle { display: flex; align-items: center; gap: 12px; margin: 10px 0; cursor: pointer; }
.setToggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.setToggle .sw { flex: 0 0 auto; width: 40px; height: 23px; border-radius: 999px; background: var(--cream-line); position: relative; transition: background-color .2s; }
.setToggle .sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 1px 1px 0 var(--shadow); transition: transform .2s var(--ease-out); }
.setToggle input:checked + .sw { background: var(--grass-dark); }
.setToggle input:checked + .sw::after { transform: translateX(17px); }
.setToggle input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.setToggle .tl { display: flex; flex-direction: column; line-height: 1.25; }
.setToggle .tl b { font-size: 14px; font-weight: 500; }
.setToggle .tl small { font-size: 12px; color: var(--ink-soft); }
.themeOpts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.themeOpt { flex-direction: column; gap: 7px; padding: 10px 6px 9px; border-radius: 14px; --b-line: var(--cream-line); }
.themeOpt[aria-pressed="true"] { --b-line: var(--ink); --b-bg: rgba(163,193,115,.3); }
.themeOpt b { font-size: 12.5px; font-weight: 500; }
.themeOpt .sw { display: flex; width: 46px; height: 30px; border-radius: 8px; overflow: hidden; }
.themeOpt .sw i { flex: 1; }
.stCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stCard { border: 1px solid var(--cream-line); border-radius: 14px; padding: 12px 12px 10px; display: flex; flex-direction: column; }
.stCard small { font-size: 11px; color: var(--ink-soft); letter-spacing: .02em; }
.stCard > b { font-size: 30px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; margin-top: 4px; }
.stCard > span { font-size: 12px; color: var(--ink-soft); }
.stWin { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cream-line); font-size: 12px; }
.stWin b { font-weight: 600; }
.stTotals { display: flex; flex-wrap: wrap; gap: 8px; }
.stTotals .st { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); border: 1px solid var(--cream-line); border-radius: 999px; padding: 5px 12px; }
.stTotals .st b { color: var(--ink); font-weight: 600; }
.stTableWrap { overflow-x: auto; }
.stTable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.stTable th { text-align: left; font-weight: 500; font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; padding: 4px 8px; }
.stTable td { padding: 7px 8px; border-top: 1px solid var(--cream-line); }
.stTable td.n { font-weight: 600; width: 32px; }
#sndPanel #moreSettings { width: 100%; margin-top: 10px; }

/* ---------- partida rápida: personas, dificultad y continuar ---------- */
.pveOpt.hum, .pveOpt.diff { flex: 1; min-width: 70px; }
.pveOpt:disabled { opacity: .3; }
.optPeople { display: flex; gap: 3px; height: 22px; align-items: flex-end; }
.optPeople i { width: 10px; height: 16px; border-radius: 5px 5px 2px 2px; background: var(--accent); box-shadow: 2px 2px 0 var(--shadow); position: relative; }
.optPeople i::before { content: ''; position: absolute; left: 1.5px; top: -7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.optBots:empty::after { content: '—'; color: var(--ink-soft); font-size: 14px; }
.pveNote { display: none; margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
#pveCard.local .pveNote { display: block; }
#pveContinue { width: 100%; margin-top: 22px; justify-content: space-between; }
#pveContinue + #pvePlay { margin-top: 10px; }

/* ---------- Modo Historia: continuar, récord y nivel a medias ---------- */
#storyContinue { margin: -2vh 0 3vh; }
#storyContinue:empty { display: none; }
#storyContinue .mBtn { min-width: 260px; justify-content: space-between; box-shadow: 0 10px 26px rgba(232,135,58,.35); }
.lvlFoot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 4px; }
.lvlFoot .lvlState { margin: 0; }
.lvlBest { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.lvlBest .i { width: 12px; height: 12px; color: var(--accent); }
.lvlSaved { position: absolute; top: 16px; right: 16px; z-index: 1; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: 2px 2px 0 var(--shadow); }
.lvlCard.saved { --b-line: var(--accent); }

/* ---------- resumen final: récord del nivel ---------- */
.winRec { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--cream-line); color: var(--ink-soft); }
.winRec.new { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 3px 3px 0 var(--shadow); animation: recPop .6s .2s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes recPop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 560px) {
  .themeOpts { gap: 6px; }
  .themeOpt { padding: 8px 2px 7px; gap: 5px; }
  .themeOpt b { font-size: 11px; }
  .themeOpt .sw { width: 38px; height: 24px; }
  .stCards { grid-template-columns: 1fr; }
  .setBox header h2 { font-size: 26px; }
}

/* tarjeta de partida rápida más compacta (ahora tiene más opciones) */
#pveCard { padding: 26px 28px 16px; }
#pveCard h4 { margin: 16px 0 8px; }
#pveCard .pveOpt { padding-block: 8px 7px; }
#pveCard .pveOpt.size { gap: 4px; }
#pveCard .optGrid { width: 34px; height: 34px; }
#pveCard .pveColor { width: 36px; height: 36px; }
#pvePlay { margin-top: 18px; padding: 12px; }

/* ---------- móvil en vertical ---------- */
@media (max-width: 760px) {
  /* el tablero siempre en la fila flexible (sin asientos, antes caía en la fila automática) */
  #table #seats { grid-row: 1; }
  #table #boardCol { grid-row: 2; }
  #table.noSeats { grid-template-rows: 0 minmax(0, 1fr); gap: 0; }
  /* asientos compactos: caben 3 en una fila */
  #seats { gap: 6px; padding: 2px 0 6px; scroll-snap-type: x proximity; }
  .seat { padding: 5px 9px 5px 5px; gap: 6px; border-radius: 13px; scroll-snap-align: start; min-width: 0; }
  .seat .avatar { width: 30px; height: 30px; }
  .seatName { font-size: 12.5px; gap: 4px; }
  .seatName .botTag { display: none; }
  .seatStatus { font-size: 10.5px; margin: 0 0 3px; }
  .seatCards { min-height: 0; gap: 3px; }
  .seatCards .card.mini { --cw: 20px; }
  .seatReact { margin-top: 3px; padding: 2px 8px; font-size: 10.5px; }
  /* en partida: el panel de ajustes (con silencio dentro) en lugar del botón de silencio */
  body[data-screen="game"] #sndCfgBtn { display: inline-flex; right: 8px; top: 9px; width: 32px; height: 32px; }
  body[data-screen="game"] #sfxBtn { display: none; }
  body[data-screen="game"] #sndPanel { top: 50px; right: 8px; }
  #turnPill .avatar.hasFace .face { width: 92%; height: 92%; }
  /* menú: navegación inferior solo con iconos */
  .mBottom .cornerBtn span { display: none; }
  .mBottom .cornerBtn { width: 36px; padding: 0; }
  .mBottom { overflow: visible; }
}
@media (max-width: 560px) {
  #pveCard { padding: 22px 18px 14px; }
  #pveCard h2 { font-size: 30px; }
  .pveOpts { gap: 7px; flex-wrap: nowrap; }
  #pveColors { flex-wrap: wrap; }
  .pveOpt.size, .pveOpt.opp, .pveOpt.hum, .pveOpt.diff { min-width: 0; flex: 1 1 0; padding-inline: 4px; }
  .optBots i { width: 9px; height: 9px; }
  .optPeople i { width: 8px; }
  .optPeople i::before { left: .5px; }
  #pveCard .pveColor { width: 32px; height: 32px; }
  .pveOpt small { font-size: 10px; }
  #storyContinue .mBtn { min-width: 0; width: min(340px, 90vw); }
}
#sndPanel .muteRow { margin-top: 0; padding-bottom: 8px; border-bottom: 1px solid var(--cream-line); }
@media (min-width: 761px) { #sndPanel .muteRow { display: none; } }

/* panel rápido: la velocidad en su propia fila (tres botones no caben junto a la etiqueta) */
#sndPanel .speedRow { flex-direction: column; align-items: stretch; gap: 6px; }
#sndPanel .speedBtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#sndPanel .speedBtns button { padding: 4px 4px; min-width: 0; }

/* =========================================================
   Calidad de vida: pausa, reglas, historial, carga, perfil,
   logros, resumen final y accesibilidad extra
   ========================================================= */

/* ---------- pantalla de carga ---------- */
#loadScreen {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background-image: var(--grain); background-color: var(--cream);
  transition: opacity .45s var(--ease-out), visibility .45s;
}
#loadScreen.done { opacity: 0; visibility: hidden; }
.ldTitle { display: flex; flex-direction: column; font-size: clamp(48px, 9vw, 92px); font-weight: 500; line-height: .88; letter-spacing: -.055em; color: var(--grass-dark); }
.ldTitle span:last-child { color: #7FA95A; }
.ldTitle i { display: inline-block; width: .17em; height: .17em; margin-left: .06em; border-radius: 50%; background: var(--accent); animation: ldBounce .8s ease-in-out infinite; }
@keyframes ldBounce { 50% { transform: translateY(-.25em); } }
.ldBar { width: min(220px, 60vw); height: 4px; border-radius: 999px; background: var(--cream-line); overflow: hidden; }
.ldBar i { display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--grass-dark); animation: ldSlide 1.1s ease-in-out infinite; }
@keyframes ldSlide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- menú: repetir la última partida rápida ---------- */
.mRepeat { gap: 7px; padding: 4px 2px; font-size: 13.5px; text-decoration: none; color: var(--ink); animation-delay: .6s; }
.mRepeat .i { color: var(--accent); }
.mRepeat small { color: var(--ink-soft); font-size: 12px; }
.mRepeat small::before { content: '·'; margin: 0 6px 0 2px; }
.mRepeat:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- pausa ---------- */
#pauseOverlay {
  position: fixed; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20,40,20,.55); backdrop-filter: blur(6px);
}
#pauseOverlay.visible { display: flex; animation: fadeIn .2s var(--ease-out); }
.pauseBox {
  width: min(360px, 100%); text-align: center; padding: 28px 24px 18px; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background-image: var(--grain); background-color: var(--cream); box-shadow: 0 30px 70px rgba(10,25,10,.35);
  animation: winPop .3s var(--ease-out);
}
.pauseIco { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--cream); font-size: 24px; }
.pauseBox h2 { font-size: 30px; font-weight: 500; letter-spacing: -.04em; text-transform: lowercase; }
.pauseBox h2::after { content: '.'; color: var(--accent); }
.pauseBox p { color: var(--ink-soft); font-size: 14px; margin-bottom: 6px; }
.pauseBox .btn-primary { width: 100%; }
.pauseRow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
html.paused #game .cell.selectable, html.paused #game .piece .turnMark, html.paused .thinkDots i { animation-play-state: paused; }

/* ---------- hoja de reglas ---------- */
#rulesOverlay {
  position: fixed; inset: 0; z-index: 91; display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20,40,20,.5); backdrop-filter: blur(6px);
}
#rulesOverlay.visible { display: flex; animation: fadeIn .2s var(--ease-out); }
.rulesBox header { padding-bottom: 12px; border-bottom: 1px solid var(--cream-line); }
.rulesBox h4 { display: flex; align-items: center; gap: 7px; }
.rulesBox h4 .i { color: var(--accent); width: 15px; height: 15px; }
.rulesBox section p { font-size: 14px; line-height: 1.5; }
.rlCards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rlCard { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--cream-line); border-radius: 12px; }
.rlCard.orange { border-color: color-mix(in srgb, var(--accent) 45%, var(--cream-line)); }
.rlCard .hintCard { flex: 0 0 auto; width: 32px; height: 42px; }
.rlCard > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rlCard b { font-size: 13.5px; font-weight: 600; }
.rlCard small { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.rlKeys kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin: 0 2px; border-radius: 6px; border: 1px solid var(--cream-line); background: #fff; font: 600 12px var(--font); text-align: center; }
@media (max-width: 560px) { .rlCards { grid-template-columns: 1fr; } }

/* ---------- historial: grupos por turno, icono y color de quien juega ---------- */
#logHead { gap: 8px; }
#logHead h4 { margin-right: auto; }
.logMine { padding: 4px 10px; font-size: 11.5px; }
.logMine[aria-pressed="true"] { --b-bg: var(--ink); --b-fg: var(--cream); --b-line: var(--ink); }
#logList .lgGroup { padding: 6px 0 8px; border-bottom: 1px solid var(--cream-line); }
#logList .lgGroup div { border: 0; padding: 0; }
#logList .lgHead { display: flex; align-items: center; gap: 7px; margin: 4px 0 4px; color: var(--ink); font-size: 12px; }
#logList .lgHead b { font-weight: 600; }
#logList .lg { --pc: var(--cream-line); display: flex; align-items: flex-start; gap: 7px; padding: 3px 0 3px 9px !important; margin-left: 10px;
  border-left: 2px solid var(--pc) !important; color: var(--ink-soft); font-weight: 400; }
#logList .lg .i { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--ink-soft); }
#logList .lgGroup:first-child .lg:first-of-type { color: var(--ink); font-weight: 500; }
#logList .lg.muted { border: 0 !important; margin: 10px 0; }

/* ---------- partida rápida: nombres y colores de cada persona ---------- */
#pvePeople { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#pvePeople:empty { display: none; }
.pveName, .setName {
  width: 100%; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--cream-line); background: #fff;
  font-size: 14px; color: var(--ink); outline: none;
}
.pveName:focus, .setName:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(163,193,115,.35); }
.setName { width: min(240px, 100%); }
.pvePerson { display: flex; gap: 10px; align-items: center; }
.pveDot { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; box-shadow: 3px 3px 0 var(--shadow), inset -3px -3px 0 rgba(0,0,0,.1); }
.pveDot:hover { transform: rotate(-20deg) scale(1.05); }
.setColors { display: flex; gap: 8px; flex-wrap: wrap; }
.setColors .pveColor { width: 34px; height: 34px; }

/* ---------- Lo básico: progreso y dos tarjetas por fila en móvil ---------- */
#storyProgress { width: min(420px, 90vw); margin: -2.5vh 0 3.5vh; }
#storyProgress:empty { display: none; }
.spText { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--cream); font-size: 14px; margin-bottom: 8px; }
.spText b { font-weight: 500; }
.spAll { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--cream); background: rgba(241,241,220,.18); padding: 3px 10px; border-radius: 999px; }
.spBar { height: 8px; border-radius: 999px; background: rgba(241,241,220,.25); overflow: hidden; }
.spBar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .6s var(--ease-out); }
@media (max-width: 560px) {
  .lvlRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lvlCard { width: auto; padding: 8px 8px 10px; gap: 7px; }
  .lvlPreview { height: 88px; padding: 7px; }
  .lvlName { font-size: 13.5px; }
  .lvlNum { top: 12px; left: 12px; min-width: 22px; height: 22px; font-size: 11px; }
  .lvlSaved { top: 12px; right: 12px; }
  .lvlFoot { flex-wrap: wrap; }
  .lvlSection { padding: 16px 14px 18px; }
  #storyScreen { padding-top: 12vh; }
}

/* ---------- resumen final ---------- */
#winSummary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 22px; text-align: left; }
#winSummary:empty { display: none; }
.sumTile { display: flex; gap: 9px; align-items: center; padding: 9px 12px; border-radius: 14px; background: rgba(163,193,115,.18); }
.sumTile .i { flex: 0 0 auto; width: 18px; height: 18px; color: var(--grass-dark); }
.sumTile span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sumTile small { font-size: 11px; color: var(--ink-soft); }
.sumTile b { font-size: 13.5px; font-weight: 600; }
#winChips { gap: 8px; }

/* ---------- logros ---------- */
.achToast {
  position: fixed; top: 14px; right: 14px; z-index: 96; display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--ink); color: var(--cream);
  box-shadow: 0 12px 30px rgba(10,25,10,.35); animation: achIn .45s cubic-bezier(.3,1.4,.5,1);
}
.achToast.out { opacity: 0; transform: translateY(-10px); transition: opacity .35s, transform .35s; }
.achToast .achIco { background: var(--accent); color: var(--ink); }
.achToast small { color: rgba(241,241,220,.7); }
@keyframes achIn { from { opacity: 0; transform: translateY(-16px) scale(.9); } }
.achIco { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cream-line); color: var(--ink-soft); }
.achTxt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.achTxt small { font-size: 11px; letter-spacing: .04em; }
.achTxt b { font-size: 14px; font-weight: 600; }
.achCount { margin-bottom: 10px; }
.achGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ach { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 14px; border: 1px dashed var(--cream-line); opacity: .6; }
.ach .achTxt small { color: var(--ink-soft); letter-spacing: 0; }
.ach.got { opacity: 1; border-style: solid; background: rgba(232,135,58,.1); border-color: color-mix(in srgb, var(--accent) 40%, var(--cream-line)); }
.ach.got .achIco { background: var(--accent); color: var(--ink); }
@media (max-width: 560px) { .achGrid { grid-template-columns: 1fr; } }

/* ---------- texto grande ---------- */
html.bigText #gameBar, html.bigText #dock, html.bigText #seats, html.bigText #piles, html.bigText #logPanel,
html.bigText .setBox, html.bigText #pveCard, html.bigText .mContent, html.bigText #storyScreen .sSub,
html.bigText .lvlSection, html.bigText #toast, html.bigText #coach, html.bigText #cardTip,
html.bigText .pauseBox, html.bigText .passCard, html.bigText #winOverlay .box, html.bigText .mBottom, html.bigText #sndPanel { zoom: 1.14; }

/* ---------- alto contraste ---------- */
html.hiContrast { --ink-soft: #33382F; --cream-line: #8E8E73; --ink-line: #242424; --on-grass: #fff; }
html.hiContrast .cell { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
html.hiContrast .cell.selectable { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--ink); }
html.hiContrast .cell.selectable-out { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--accent-deep); }
html.hiContrast .btn-ghost { --b-bg: rgba(36,36,36,.55); --b-line: #fff; --b-fg: #fff; }
html.hiContrast .hint { background: #151515; }
html.hiContrast .seat { opacity: 1; border-color: var(--ink-line); }
html.hiContrast .card.dimmed, html.hiContrast .card.unplayable { opacity: .75; filter: grayscale(.6); }
html.hiContrast .tile-ball .circ { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink), 4px 4px 0 var(--shadow); }
html.hiContrast :focus-visible { outline: 3px solid var(--accent-deep) !important; outline-offset: 2px; }
html.hiContrast .pileLbl, html.hiContrast #lastPlay { text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* ---------- zurdos: botones de turno a la izquierda ---------- */
html.leftHand #dockRow { grid-template-columns: auto minmax(0, 1fr) 190px; }
html.leftHand #turnActions { order: -1; flex-direction: row-reverse; }
@media (max-width: 1060px) { html.leftHand #dockRow { grid-template-columns: auto minmax(0, 1fr); } }
@media (max-width: 760px) {
  html.leftHand #dockRow { grid-template-columns: 1fr; }
  html.leftHand #turnActions { order: 0; }
}
html.leftHand #dockOwner { order: 1; }
/* el cajón del historial por encima de los botones de sonido (tapaban su botón de cerrar) */
#logPanel { z-index: 70; }
.setTabs button[aria-selected="true"]:hover { background-color: var(--ink); }
@media (max-width: 760px) {
  /* en el móvil la partida no admite más zoom sin desbordar: ahí se agranda solo el texto clave */
  html.bigText #gameBar, html.bigText #dock, html.bigText #seats, html.bigText #piles { zoom: 1; }
  html.bigText .hint { font-size: 14px; }
  html.bigText .seatName { font-size: 14px; }
  html.bigText .seatStatus { font-size: 12px; }
  html.bigText .tpText b { font-size: 16px; }
  html.bigText #turnActions button { font-size: 15px; }
  /* barra superior del móvil: las reglas se abren desde la pausa */
  #rulesBtn { display: none; }
  #gameBar .barSide.right { gap: 4px; }
}
#game { grid-template-columns: minmax(0, 1fr); } /* nada puede ensanchar la partida más que la pantalla */
.pauseLog { display: none; }
@media (max-width: 760px) {
  #logTab { display: none; }
  .pauseLog { display: inline-flex; grid-column: 1 / -1; }
}

/* ---------- JAQUE: la pelota embocada se ve como fantasma dentro del hoyo ---------- */
.piece.ghostHoled { z-index: 6; }
.piece.ghostHoled .tile-ball .circ {
  opacity: .5; transform: scale(.78);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3.5px var(--pc);
  outline: 2px dashed rgba(255,255,255,.95); outline-offset: 3px;
  transition: opacity .2s, transform .2s var(--ease-out);
}
.piece.ghostHoled .turnMark { display: none !important; }
/* tienes un palo 1 reactivo: halo suave para que sepas que se puede sacar */
.piece.ghostCan .tile-ball .circ { opacity: .7; animation: ghostCan 1.8s ease-in-out infinite; }
@keyframes ghostCan { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px var(--accent); } }
/* palo 1 reactivo elegido: objetivo claro, casi opaco, latiendo y con etiqueta */
.piece.ghostPick .tile-ball .circ { opacity: .9; transform: scale(.86); outline-color: var(--accent); animation: ghostPick 1s ease-in-out infinite; }
@keyframes ghostPick { 50% { transform: scale(.95); box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--accent); } }
.piece.ghostPick::after, .piece.ghostCan::after {
  content: attr(data-pull); position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 600; box-shadow: 2px 2px 0 var(--shadow);
}
.piece.ghostCan::after { opacity: .85; }
html.reduceMotion .piece.ghostCan .tile-ball .circ, html.reduceMotion .piece.ghostPick .tile-ball .circ { animation: none; }

/* =========================================================
   Modos, rivales, ayudas, celebraciones y zoom
   ========================================================= */

/* ---------- menú: "Más modos" ---------- */
.mBtn.modes { --b-bg: transparent; --b-fg: var(--ink); --b-line: var(--cream-line); min-height: 44px; padding-block: 8px; font-size: 14.5px; }
.mBtn.modes .i { color: var(--grass-dark); }
.mDot { position: absolute; top: 7px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--cream); }
body[data-screen="menu"]:not(.loading) .mActions > .mBtn.modes { animation-delay: .6s; }

/* ---------- pantalla de Modos ---------- */
#modesScreen { display: none; min-height: 100vh; flex-direction: column; align-items: center; padding: 8vh 20px 60px; position: relative; z-index: 1; }
body[data-screen="modes"] #scene { display: block; }
body[data-screen="modes"] #scene::after { background: rgba(20,40,20,.34); }
#modesGrid { display: flex; flex-direction: column; gap: 20px; width: min(920px, 94vw); }
.mdSection { background-image: var(--grain); background-color: var(--cream); border-radius: 20px; padding: 18px 20px 20px; box-shadow: 0 24px 60px rgba(10,25,10,.3); }
.mdSection > h3, .lvlSection h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); }
.lvlCount { font-size: 11px; letter-spacing: .04em; padding: 1px 8px; border-radius: 999px; background: var(--grass-dark); color: var(--cream); }
.mdRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.modeCard { border: 1px solid var(--cream-line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.modeCard p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
.mdHead { display: flex; align-items: center; gap: 10px; }
.mdHead h3 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.mdHead small { font-size: 12px; color: var(--ink-soft); display: block; }
.mdHead small::first-letter { text-transform: uppercase; }
.mdIco { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--grass-dark); color: var(--cream); font-size: 18px; }
.modeCard.daily .mdIco { background: var(--accent); color: var(--ink); }
.modeCard.rush .mdIco { background: var(--navy); }
.mdPreview { height: 110px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background-image: var(--grain); background-color: var(--grass-dark); padding: 8px; }
.mdPreview svg { max-height: 100%; max-width: 100%; }
.mdStats { display: flex; flex-wrap: wrap; gap: 6px; }
.mdStat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--cream-line); color: var(--ink-soft); }
.mdStat .i { width: 13px; height: 13px; color: var(--accent); }
.mdBtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.mdCfg { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.mdTable { display: flex; flex-wrap: wrap; gap: 6px; }
.mdTable span { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: rgba(163,193,115,.2); }
.mdTable span.me { background: var(--accent); color: var(--ink); }
.chGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.chCard { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border: 1px solid var(--cream-line); border-radius: 14px; position: relative; }
.chCard > button { flex: 0 0 auto; margin-left: auto; }
.chCard.done { background: rgba(163,193,115,.15); }
.chTxt { flex: 1 1 150px; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.chTxt b { font-size: 14px; font-weight: 600; }
.chTxt small { font-size: 12px; color: var(--ink-soft); }
.chDone { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--grass-dark); color: var(--cream); font-size: 12px; }
.lvlSub { font-size: 13px; color: var(--ink-soft); margin: -8px 0 12px; }
.lvlSection.puzzles .lvlCard.next { --b-line: var(--accent); }

/* ---------- etiqueta del modo en la partida ---------- */
#gameBar { position: relative; }
#modeChip { position: absolute; left: 50%; top: calc(100% - 2px); transform: translateX(-50%); z-index: 31; white-space: nowrap;
  padding: 3px 12px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 11.5px; font-weight: 500; box-shadow: 2px 2px 0 var(--shadow); }

/* ---------- rivales (partida rápida) ---------- */
.pveOpt.rival { flex: 1; min-width: 92px; gap: 3px; }
.pveOpt.rival .avatar { width: 36px; height: 36px; }
.pveOpt.rival.picked { --b-line: var(--ink); }
.rivalRandom { background: var(--cream-line); color: var(--ink-soft); font-size: 16px; font-weight: 600; box-shadow: 3px 3px 0 var(--shadow); }
#pveRivals { flex-wrap: wrap; }

/* ---------- ayudas: consejo y deshacer ---------- */
.assistBtns { display: flex; flex-direction: column; gap: 6px; }
.assistBtns:not(:has(button:not([hidden]))) { display: none; }
#caddieBtn .i { color: var(--accent); }
#hands .card.caddiePick { box-shadow: 0 0 0 3px var(--accent), 0 0 0 7px rgba(232,135,58,.25), 4px 4px 0 var(--shadow); transform: translateY(-8px); }
#board .cell.caddieCell { box-shadow: inset 0 0 0 3px var(--accent) !important; }
#endTurnBtn.caddiePick { box-shadow: 0 0 0 4px var(--accent), 0 6px 16px rgba(20,40,20,.2); }
@media (max-width: 760px) {
  /* en el móvil, consejo y deshacer van en la fila de los botones de turno, solo con icono */
  .assistBtns { flex-direction: row; flex: 0 0 auto; gap: 6px; }
  #turnActions .assistBtns button { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; }
  .assistBtns .btn-icon span { display: none; }
}

/* ---------- explicación de la jugada del bot ---------- */
.hint.botWhy { display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 0 0 1.5px var(--pc), 0 8px 24px rgba(20,40,20,.2); background: rgba(36,36,36,.82); padding: 4px 14px 4px 5px; }
#lastPlay .lastWhy { max-width: 190px; font-size: 11px; line-height: 1.3; letter-spacing: 0; text-transform: none; opacity: .9; }

/* ---------- resumen final: celebración, tabla del torneo y "¿por qué he perdido?" ---------- */
#winStyle:empty { display: none; }
#winStyle { margin: -6px 0 8px; }
.wsChip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  background: var(--ink); color: var(--cream); animation: recPop .6s .1s cubic-bezier(.3,1.6,.5,1) both; }
.wsChip.portal { background: var(--navy); } .wsChip.chain { background: #B8860B; } .wsChip.swallow { background: #5C4A2E; }
.wsChip.steal { background: var(--accent-deep); } .wsChip.first { background: var(--accent); color: var(--ink); }
.winTable { display: flex; flex-direction: column; gap: 4px; width: min(300px, 100%); margin: 0 auto 6px; }
.winTable span { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 10px; background: rgba(163,193,115,.18); font-size: 14px; text-align: left; }
.winTable span i { margin-left: auto; font-style: normal; font-weight: 600; }
.winTable span.me { background: rgba(232,135,58,.22); }
.winTable span.champ { box-shadow: inset 0 0 0 1.5px var(--accent); }
#winChips { flex-wrap: wrap; justify-content: center; }
#winWhy:empty { display: none; }
#winWhy { margin: -8px 0 18px; }
.winWhyBtn { gap: 6px; }
.whyPanel { margin-top: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--cream-line); text-align: left; }
.whyHead b { font-size: 14px; }
.whyHead p { font-size: 13.5px; margin-top: 3px; color: var(--ink-soft); }
.whyBoards { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0; }
.whyBoards figure { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.whyBoards figure svg { width: min(140px, 30vw); max-height: 170px; border-radius: 8px; background: #3F7440; padding: 3px; }
.whyBoards .whyArrow { width: 22px; height: 22px; }
.whyBoards figcaption { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .12em; }
.whyArrow { color: var(--ink-soft); }
.whyTip { display: flex; gap: 7px; align-items: flex-start; font-size: 13px; }
.whyTip .i { color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
#winOverlay { overflow-y: auto; padding: 48px 12px 24px; } /* resúmenes largos: se desplaza la capa, no la caja (el icono sobresale) */
#winOverlay .box { margin: auto; }

/* ---------- zoom del tablero ---------- */
#boardZoom { transform-origin: 0 0; width: max-content; margin: 0 auto; }
#boardWrap.zoomed { overflow: hidden; }
#zoomReset { position: absolute; top: 8px; right: 8px; z-index: 12; width: 34px; height: 34px; padding: 0; box-shadow: var(--shadow-soft); }
@media (pointer: coarse) { #boardWrap { touch-action: none; } }
@media (max-width: 760px) {
  #modeChip { position: static; transform: none; grid-column: 1 / -1; justify-self: center; margin-top: 2px; font-size: 11px; padding: 2px 10px; }
  #modeChip[hidden] { display: none; }
}
@media (max-width: 760px) {
  #gameBar > .barSide:first-child { grid-row: 1; grid-column: 1; }
  #gameBar > #turnPill { grid-row: 1; grid-column: 2; }
  #gameBar > .barSide.right { grid-row: 1; grid-column: 3; }
  #gameBar > #modeChip { grid-row: 2; }
}

/* =========================================================
   Menú reorganizado, partida rápida, contrarreloj y sin barras de desplazamiento
   ========================================================= */

/* ---------- sin barras de desplazamiento a la vista (se sigue pudiendo desplazar) ---------- */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
#boardWrap { overflow: hidden; }          /* el tablero cabe siempre (y el zoom lo mueve) */
#pveScreen { align-items: flex-start; }
#pveCard { margin: auto; }                /* centrada si cabe; si no, la pantalla entera se desplaza */

/* ---------- menú principal: limpio, sin sombras ---------- */
#menuScreen button, body[data-screen="menu"] #sfxBtn, body[data-screen="menu"] #sndCfgBtn { box-shadow: none !important; }
.mActions { width: min(460px, 100%); align-items: stretch; }
.mActions .mRow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mActions .mRow .mBtn { justify-content: space-between; min-height: 50px; }
.mBtn.modes { --b-bg: transparent; --b-fg: var(--ink); --b-line: var(--ink-line); min-height: 50px; font-size: 15.5px; padding: 13px 22px; }
.mTitle { margin-bottom: 26px; }
/* tarjeta del reto diario */
.mDaily {
  --b-bg: var(--accent); --b-fg: var(--ink); --b-line: var(--accent);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  width: 100%; padding: 10px 16px 10px 10px; border-radius: 18px; text-align: left;
}
.mDaily:hover { background-color: #EE9550; }
.mDaily.done { --b-bg: rgba(232,135,58,.14); --b-line: var(--accent); }
.mDaily.done:hover { background-color: rgba(232,135,58,.24); }
.dPreview { width: 58px; height: 58px; border-radius: 12px; background: var(--grass-dark); display: flex; align-items: center; justify-content: center; padding: 5px; }
.dPreview svg { max-width: 100%; max-height: 100%; }
.dTxt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dTxt b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.dWhen { font-size: 11.5px; opacity: .75; }
.dWhen::first-letter { text-transform: uppercase; }
.dMeta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; margin-top: 2px; opacity: .85; }
.dStreak { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.dStreak .i { width: 12px; height: 12px; }
.dPlay { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.mDaily.done .dPlay { background: var(--accent); color: var(--ink); }
body[data-screen="menu"]:not(.loading) .mActions > .mDaily { animation: btnUp .45s .34s var(--ease-out) both; }
@media (max-width: 820px) {
  .mFrame { grid-template-rows: minmax(30vh, 1fr) auto; } /* la ilustración ocupa el sitio sobrante: sin hueco vacío */
  .mActions { width: 100%; }
}
@media (max-width: 420px) {
  .dPreview { width: 48px; height: 48px; }
  .dPlay { padding: 7px 11px; }
  .mActions .mRow .mBtn { padding-inline: 14px; font-size: 14.5px; }
}

/* ---------- Partida rápida: contra la máquina / multijugador local ---------- */
.pveKind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pveOpt.kind { align-items: flex-start; text-align: left; gap: 3px; padding: 12px 14px; }
.pveOpt.kind .i { width: 20px; height: 20px; color: var(--accent); margin-bottom: 3px; }
.pveOpt.kind b { font-size: 15px; }
.pveOpt.kind.sel { --b-bg: rgba(163,193,115,.35); --b-line: var(--ink); }
#pveHumansRow[hidden], #pveRivalsRow[hidden], #pveDiffRow[hidden] { display: none; }
/* rivales con flechas: se ve que se pueden cambiar */
.pveOpt.rival { display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 8px 6px; min-width: 150px; flex: 1 1 150px;
  border: 1px solid var(--cream-line); border-radius: 14px; background: transparent; }
.pveOpt.rival.picked { border-color: var(--ink); background: rgba(163,193,115,.18); }
.pveOpt.rival:hover { background-color: transparent; }
.rivalBody { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.rivalBody b { font-size: 14px; }
.rivalArrow { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; --b-line: var(--cream-line); --b-bg: #fff; }
.rivalArrow:hover { --b-bg: var(--cream); background-color: var(--green-light); }
.rivalArrow .i { width: 15px; height: 15px; }

/* ---------- contrarreloj: la cuenta atrás, bien visible, y el tablero que se tiñe de rojo ---------- */
#rushTimer {
  --left: 1;
  grid-row: 2; grid-column: 2; justify-self: center; z-index: 31;
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 5px 14px 5px 10px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-size: 18px; font-variant-numeric: tabular-nums;
}
#rushTimer[hidden] { display: none; }
#rushTimer b { font-weight: 600; min-width: 42px; text-align: center; }
#rushTimer .i { width: 18px; height: 18px; color: var(--accent); }
.rtBar { display: block; width: 80px; height: 5px; border-radius: 999px; background: rgba(241,241,220,.25); overflow: hidden; }
.rtBar i { display: block; height: 100%; width: calc(var(--left) * 100%); border-radius: inherit; background: var(--accent); transition: width .25s linear; }
#rushTimer.danger { background: #C8341F; animation: rtBeat 1s ease-in-out infinite; }
#rushTimer.danger .i { color: #fff; }
#rushTimer.danger .rtBar i { background: #fff; }
@keyframes rtBeat { 50% { transform: scale(1.08); } }
/* con el modo en la barra, la etiqueta pasa a la segunda fila (junto al reloj si lo hay) */
#gameBar { grid-template-rows: auto auto; }
#gameBar > .barSide:first-child { grid-row: 1; grid-column: 1; }
#gameBar > #turnPill { grid-row: 1; grid-column: 2; }
#gameBar > .barSide.right { grid-row: 1; grid-column: 3; }
#modeChip { position: static; transform: none; grid-row: 2; grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
#rushTimer:not([hidden]) ~ #modeChip, #modeChip:has(~ #rushTimer:not([hidden])) { grid-column: 1; justify-self: end; margin-right: 8px; }
#gameBar:has(#rushTimer:not([hidden])) #modeChip { grid-column: 1; justify-self: end; align-self: center; }
/* tinte rojo: viñeta sobre el campo y velo sobre el tablero, según el tiempo que queda */
#game::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(205,45,30,.6) 100%);
  opacity: var(--urgency, 0); transition: opacity .6s linear;
}
#boardArea::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: 8px;
  background: rgba(214,48,32,.42); mix-blend-mode: multiply;
  opacity: var(--urgency, 0); transition: opacity .6s linear;
}
#game.urgent #boardWrap { box-shadow: 0 0 0 4px rgba(214,48,32,.85), 14px 14px 0 rgba(20,40,20,.22); animation: rtGlow 1s ease-in-out infinite; }
@keyframes rtGlow { 50% { box-shadow: 0 0 0 8px rgba(214,48,32,.35), 14px 14px 0 rgba(20,40,20,.22); } }
html.reduceMotion #rushTimer.danger, html.reduceMotion #game.urgent #boardWrap { animation: none; }
@media (max-width: 760px) {
  #rushTimer { font-size: 15px; padding: 3px 10px 3px 8px; margin-top: 3px; }
  .rtBar { width: 50px; }
}
@media (max-width: 760px) {
  #gameBar:has(#rushTimer:not([hidden])) #modeChip { grid-row: 3; grid-column: 1 / -1; justify-self: center; margin-right: 0; }
  #gameBar > #rushTimer { grid-column: 1 / -1; }
}

/* tarjetas de Partida rápida y Contrarreloj en Modos: con su propio fondo */
#modesGrid > .mdRow > .modeCard { background-image: var(--grain); background-color: var(--cream); border: none; padding: 18px; box-shadow: 0 24px 60px rgba(10,25,10,.3); border-radius: 20px; }
#modesGrid > .mdRow > .modeCard .mdHead h3 { font-size: 21px; }

/* reto diario: los dos rivales del día (cara a cara) y "contra X e Y · dificultad" */
.dRivals { position: relative; padding: 0; background: rgba(36,36,36,.14); }
.dRivals .avatar { position: absolute; width: 34px; height: 34px; box-shadow: none; border: 2px solid var(--cream); background: var(--pc); }
.dRivals .avatar:first-child { left: 4px; top: 5px; }
.dRivals .avatar:last-child { right: 4px; bottom: 5px; }
.dVs { font-size: 12.5px; font-weight: 500; margin-top: 1px; }
.mDaily .dMeta { opacity: .75; }
@media (max-width: 420px) { .dRivals .avatar { width: 28px; height: 28px; } }
@media (max-width: 420px) { .mDaily { gap: 10px; padding-right: 12px; } .dTxt b { font-size: 16.5px; } .dVs { font-size: 12px; } }

/* continuar una partida guardada: siempre en naranja */
.btn-continue { --b-bg: var(--accent); --b-fg: #fff; --b-line: var(--accent); }
.btn-continue:hover { background-color: var(--accent-deep); border-color: var(--accent-deep); }

/* ningún botón lleva sombra (look limpio). Solo quedan los anillos que marcan algo:
   color elegido, "termina el turno" y el consejo del caddie */
button:where(:not(#endTurnBtn)) { box-shadow: none !important; } /* (sin especificidad: los anillos de abajo ganan) */
#endTurnBtn { box-shadow: none; }
#endTurnBtn.cta, #endTurnBtn.ctaEndTurn { box-shadow: 0 0 0 4px rgba(232,135,58,.45); }
@keyframes endPulse { 50% { box-shadow: 0 0 0 7px rgba(232,135,58,.25); } }
#endTurnBtn.caddiePick { box-shadow: 0 0 0 4px var(--accent); }
.pveColor.sel { box-shadow: 0 0 0 3px var(--cream), 0 0 0 4.5px var(--ink) !important; }

/* ---------- color de cada modo: partida rápida verde, contrarreloj azul, desafíos rojo,
   reto diario naranja (el campo de la partida usa la misma paleta, ver themes.css) ---------- */
:root { --mode-rush: var(--navy); --mode-challenge: #B5473F; --mode-daily: var(--accent); }
.modeCard.quick .mdIco { background: var(--grass-dark); color: var(--cream); }
.mdSection.challenges .mdIco, .mdSection.challenges .lvlCount, .chDone { background: var(--mode-challenge); color: var(--cream); }
.chCard.done { background: rgba(181,71,63,.08); border-color: rgba(181,71,63,.3); }
#modeChip[data-variant="rush"] { background: var(--mode-rush); }
#modeChip[data-variant="challenge"], #modeChip[data-variant="weekly"] { background: var(--mode-challenge); }
#modeChip[data-variant="daily"] { background: var(--mode-daily); color: var(--ink); }
.themeFor { font-size: 11px; color: var(--ink-soft); font-weight: 400; }

/* ---------- tarjeta del reto diario: tic de completado ---------- */
.dHead { display: inline-flex; align-items: center; gap: 6px; }
.dDone { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--grass-dark); color: var(--cream); flex: 0 0 auto; }
.dDone .i { width: 11px; height: 11px; stroke-width: 3; }
body[data-screen="menu"]:not(.loading) .dDone { animation: donePop .5s .7s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes donePop { from { transform: scale(0); } }

/* ---------- ficha del rival: tu balance y tu némesis ---------- */
.rvRec { font-size: 11px; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em; }
.rvNemesis { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: 1px 7px; border-radius: 999px;
  background: var(--ink); color: var(--cream); }

/* ---------- desafío semanal (encabeza la sección de desafíos) ---------- */
.chCard.weekly { margin-bottom: 12px; border: 1.5px solid var(--mode-challenge); background: rgba(181,71,63,.06); }
.chCard.weekly .wkTag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--mode-challenge); font-weight: 600; }
.chCard.weekly .wkBest { font-size: 11.5px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.chCard.weekly.done { background: rgba(181,71,63,.1); }

/* ---------- primera vez en un modo: tarjeta de presentación ---------- */
.dlgBox.intro { text-align: center; align-items: center; padding: 26px 28px 22px; }
#dialog:has(.dlgBox.intro) { width: min(400px, 92vw); }
.dlgBox.intro .introIco { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px;
  background: var(--grass-dark); color: var(--cream); margin: 4px auto 8px; }
.dlgBox.intro .introIco .i { width: 26px; height: 26px; }
.dlgBox.intro.rush .introIco { background: var(--mode-rush); }
.dlgBox.intro.challenge .introIco, .dlgBox.intro.weekly .introIco { background: var(--mode-challenge); }
.dlgBox.intro.daily .introIco { background: var(--mode-daily); color: var(--ink); }
.introList { list-style: none; padding: 0; margin: 6px 0 14px; text-align: left; display: grid; gap: 8px; width: 100%; }
.introList li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.35; color: var(--ink); }
.introList li::before { content: ''; position: absolute; left: 4px; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dlgBox.intro .dlgBtns { justify-content: center; }
.dlgBox.intro .dlgBtns button { min-width: 160px; }

/* ---------- final: recorrido de tu pelota ---------- */
#winRoute:empty { display: none; }
#winRoute { margin: 0 0 20px; text-align: left; }
#winRoute h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); }
.rtWrap { display: flex; align-items: center; gap: 14px; }
.rtMap { flex: 0 0 auto; height: 170px; width: auto; max-width: 55%; }
.rtLegend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink); }
.rtLg { display: inline-flex; align-items: center; gap: 6px; }
.rtSw { width: 20px; height: 20px; flex: 0 0 auto; }
@media (max-width: 480px) { .rtMap { height: 130px; } }

/* ---------- estadísticas: gráficas (victorias azul, derrotas naranja; cifras siempre escritas) ---------- */
:root { --ch-win: #3F6FA8; --ch-loss: #E8873A; --ch-track: rgba(36,36,36,.07); }
.chLegend { display: flex; gap: 14px; margin: -4px 0 10px; font-size: 12px; color: var(--ink-soft); }
.chLegend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chLegend .lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.chLegend .lg.win::before { background: var(--ch-win); } .chLegend .lg.loss::before { background: var(--ch-loss); }
.chEmpty { margin: 0; font-size: 13px; }
/* evolución: columnas apiladas, 2px de separación entre tramos, extremos redondeados arriba */
.evChart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 130px; padding-top: 16px;
  border-bottom: 1px solid var(--cream-line); }
.evCol { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; cursor: default; }
.evBar { position: relative; flex: 1; width: 100%; max-width: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.evBar i { display: block; width: 100%; min-height: 3px; }
.evBar i:first-of-type { border-radius: 4px 4px 0 0; }
.evBar i.win { background: var(--ch-win); } .evBar i.loss { background: var(--ch-loss); }
.evVal { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--ink); }
.evCol:hover .evBar i { filter: brightness(1.08); }
.evDay { font-size: 10px; color: var(--ink-soft); margin-top: 4px; line-height: 1; transform: translateY(6px); }
.evCol.today .evDay { color: var(--ink); font-weight: 700; }
.evChart + * { margin-top: 10px; }
.evChart { margin-bottom: 12px; }
/* barras horizontales */
.hbars { display: grid; gap: 8px; }
.hbRow { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.hbLbl { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.hbLbl.rv .avatar { width: 22px; height: 22px; box-shadow: none; }
.hbTrack { display: flex; gap: 2px; height: 12px; border-radius: 0 4px 4px 0; background: var(--ch-track); overflow: hidden; }
.hbTrack i { display: block; height: 100%; }
.hbTrack i:last-child { border-radius: 0 4px 4px 0; }
.hbTrack i.win { background: var(--ch-win); } .hbTrack i.loss { background: var(--ch-loss); }
.hbTrack i[style*="width:0%"] { display: none; }
.hbVal { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; min-width: 44px; text-align: right; }
.hbVal small { font-weight: 400; color: var(--ink-soft); }
.hbRow:hover .hbTrack i { filter: brightness(1.08); }
@media (max-width: 480px) {
  .hbRow { grid-template-columns: minmax(118px, 40%) 1fr auto; gap: 8px; font-size: 12.5px; }
  .hbLbl.rv { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
  .hbVal { min-width: 38px; }
}